/* Import des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&family=MedievalSharp&family=Cinzel:wght@400;700&family=Cinzel+Decorative:wght@400;700&family=Crimson+Text:wght@400;600;700&display=swap');

/* Variables de couleurs */
:root {
    --color-page: #261F19;
    --color-header: #342A24;
    --color-navbar: #241D15;
    --color-card: #261B05;
    --color-border-gold: #b59f5f;
    --color-text-light: #e8dcc8;
    --color-text-gold: #d4af37;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-page);
    color: var(--color-text-light);
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Typographie */
h1, .title-main {
    font-family: 'Eagle Lake', cursive;
    font-size: 48px;
    color: var(--color-text-gold);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

h2, .title-secondary {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 32px;
    color: var(--color-text-gold);
    margin-bottom: 1rem;
}

h3, .title-tertiary {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: var(--color-border-gold);
    margin-bottom: 0.75rem;
}

.navbar-text {
    font-family: 'MedievalSharp', cursive;
    font-size: 24px;
}

/* Layout principal */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.app-header {
    background-color: var(--color-header);
    border-bottom: 3px solid var(--color-border-gold);
    padding: 1.5rem 2rem;
    text-align: center;
}

/* Navigation */
.app-navbar {
    background-color: var(--color-navbar);
    border-bottom: 2px solid var(--color-border-gold);
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
}

.nav-item a {
    font-family: 'MedievalSharp', cursive;
    font-size: 16px;
    color: var(--color-text-gold);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-item a:hover {
    background-color: rgba(180, 159, 95, 0.2);
    color: #fff;
}

.nav-item.active a {
    background-color: rgba(180, 159, 95, 0.3);
    border: 1px solid var(--color-border-gold);
}

/* Sous-menus dropdown */
.nav-item {
    position: relative;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-navbar);
    border: 2px solid var(--color-border-gold);
    border-radius: 6px;
    min-width: 250px;
    padding: 0.5rem 0;
    padding-top: 1rem;
    margin-top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.nav-item:hover .nav-dropdown,
.nav-dropdown:hover {
    display: block;
}

.nav-dropdown li {
    list-style: none;
}

.nav-dropdown a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 14px;
    color: var(--color-text-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-dropdown a:hover {
    background-color: rgba(180, 159, 95, 0.2);
    color: var(--color-text-gold);
}

/* Barre de séparation verticale */
.nav-separator {
    border-left: 2px solid var(--color-border-gold);
    height: 30px;
    align-self: center;
}

/* Contenu principal */
.app-content {
    flex: 1;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Footer */
.app-footer {
    background-color: var(--color-navbar);
    border-top: 2px solid var(--color-border-gold);
    padding: 1.5rem 0;
    margin-top: auto;
    width: 100%;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-social {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.social-link {
    color: var(--color-text-gold);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    color: #fff;
    transform: scale(1.1);
}

.footer-copyright {
    color: var(--color-border-gold);
    font-size: 14px;
    text-align: center;
    font-family: 'Crimson Text', serif;
}

/* Cartes de contenu */
.content-card {
    background-color: var(--color-card);
    border: 2px solid var(--color-border-gold);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.content-card-title {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    color: var(--color-text-gold);
    margin-bottom: 0.5rem;
}

.content-card-subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    color: var(--color-border-gold);
    margin-bottom: 1rem;
    font-style: italic;
}

/* Statistiques Dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-card {
    background-color: var(--color-card);
    border: 2px solid var(--color-border-gold);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-number {
    font-family: 'Cinzel', serif;
    font-size: 48px;
    color: var(--color-text-gold);
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    color: var(--color-text-light);
}

/* Boutons */
.btn {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: 2px solid var(--color-border-gold);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--color-border-gold);
    color: var(--color-page);
    font-weight: 700;
}

.btn-primary:hover {
    background-color: var(--color-text-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-gold);
}

.btn-secondary:hover {
    background-color: rgba(180, 159, 95, 0.2);
}

.btn-danger {
    background-color: #8b0000;
    color: #fff;
    border-color: #ff0000;
}

.btn-danger:hover {
    background-color: #a00000;
}

.btn-success {
    background-color: #2d5016;
    color: #fff;
    border-color: #4a7c2d;
}

.btn-success:hover {
    background-color: #3d6020;
}

/* Formulaires */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--color-text-gold);
    display: block;
    margin-bottom: 0.5rem;
}

.form-control {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(36, 29, 21, 0.5);
    border: 1px solid var(--color-border-gold);
    border-radius: 6px;
    color: var(--color-text-light);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-text-gold);
    box-shadow: 0 0 0 3px rgba(180, 159, 95, 0.2);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

select.form-control {
    cursor: pointer;
}

/* Input pour les nouveaux formulaires de personnage */
.form-input {
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(36, 29, 21, 0.5);
    border: 1px solid var(--color-border-gold);
    border-radius: 6px;
    color: var(--color-text-light);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-text-gold);
    box-shadow: 0 0 0 3px rgba(180, 159, 95, 0.2);
}

textarea.form-input {
    resize: vertical;
}

select.form-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b59f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: var(--color-text-gold);
    background-color: var(--color-navbar);
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--color-border-gold);
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(180, 159, 95, 0.3);
}

.table tr:hover {
    background-color: rgba(180, 159, 95, 0.1);
}

/* Badges */
.badge {
    font-family: 'Crimson Text', serif;
    font-size: 14px;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    display: inline-block;
    font-weight: 600;
}

.badge-admin {
    background-color: var(--color-text-gold);
    color: var(--color-page);
}

.badge-user {
    background-color: #666;
    color: #fff;
}

.badge-active {
    background-color: #2d5016;
    color: #fff;
}

.badge-inactive {
    background-color: #8b0000;
    color: #fff;
}

.badge-pj {
    background-color: #2d5016;
    color: #fff;
}

.badge-pnj {
    background-color: #4a7c2d;
    color: #fff;
}

.badge-monstre {
    background-color: #8b0000;
    color: #fff;
}

.badge-dragon {
    background-color: #ff4500;
    color: #fff;
}

.badge-demon {
    background-color: #4b0082;
    color: #fff;
}

.badge-ennemi {
    background-color: #8b4513;
    color: #fff;
}

/* Messages flash */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border: 2px solid;
}

.alert-success {
    background-color: rgba(45, 80, 22, 0.3);
    border-color: #4a7c2d;
    color: #a8d98a;
}

.alert-error {
    background-color: rgba(139, 0, 0, 0.3);
    border-color: #ff0000;
    color: #ffb6b6;
}

.alert-warning {
    background-color: rgba(180, 159, 95, 0.3);
    border-color: var(--color-border-gold);
    color: var(--color-text-gold);
}

/* Actions groupées */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 16px;
}

/* Drag and drop */
.sortable-item {
    cursor: move;
    padding: 0.5rem;
    border-left: 3px solid var(--color-border-gold);
    margin-bottom: 0.5rem;
}

.sortable-item:hover {
    background-color: rgba(180, 159, 95, 0.1);
}

.sortable-ghost {
    opacity: 0.4;
}

/* Responsive */
@media (max-width: 768px) {
    h1, .title-main {
        font-size: 48px;
    }
    
    h2, .title-secondary {
        font-size: 32px;
    }
    
    .navbar-text {
        font-size: 28px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .app-content {
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard sidebar layout */
.dashboard-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.dashboard-sidebar {
    width: 220px;
    min-width: 180px;
    background-color: var(--color-card);
    border: 2px solid var(--color-border-gold);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    height: fit-content;
}

.dashboard-sidebar h4 {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    margin-bottom: 0.75rem;
    color: var(--color-text-gold);
}

.dashboard-sidebar .admin-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-sidebar .admin-links a {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.dashboard-main {
    flex: 1;
}

@media (max-width: 900px) {
    .dashboard-layout {
        flex-direction: column;
    }
    .dashboard-sidebar {
        width: 100%;
        min-width: 0;
    }
}

/* Utilitaires */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.gap-2 {
    gap: 1rem;
}

/* Pagination / contrôles de carrousel - réparation de tailles excessives */
nav[aria-label*="Pagination"], .pagination {
    font-size: 16px;
    line-height: 1;
}

/* Limiter la taille des icônes/flèches utilisées pour la navigation */
nav[aria-label*="Pagination"] a,
nav[aria-label*="Pagination"] span,
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0.375rem 0.6rem;
}

/* Icônes SVG ou background-images dans les contrôles (carrousel, pagination semantic/bs etc.) */
nav[aria-label*="Pagination"] svg,
nav[aria-label*="Pagination"] i,
.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    background-size: 100% 100% !important;
}

/* Au cas où des règles globales redimensionnent les chevrons */
.page-link, .page-item .page-link {
    font-size: 16px;
}

/* Masquer uniquement les libellés textuels "previous" / "next" du bloc mobile
   généré par la vue Tailwind (classe `sm:hidden`). Cela conserve les ancres
   contenant des icônes (SVG) pour la navigation desktop. */
nav[aria-label*="Pagination"] .sm\:hidden > a,
nav[aria-label*="Pagination"] .sm\:hidden > span {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    padding: 0.25rem 0.5rem;
}

/* Assurer la taille des SVG dans les contrôles (desktop) */
nav[aria-label*="Pagination"] a svg,
nav[aria-label*="Pagination"] a i,
nav[aria-label*="Pagination"] span svg {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    background-size: 100% 100% !important;
}

/* Cible aussi les icônes de pagination qui utilisent des classes (semantic-ui etc.) */
nav[aria-label*="Pagination"] a i[class*="chevron"],
nav[aria-label*="Pagination"] a .chevron {
    font-size: 1em !important;
}

/* Masquer le bloc mobile généré par la vue Tailwind (classe utilitaire `sm:hidden`) qui
   affiche les libellés texte "previous" / "next" quand Tailwind n'est pas appliqué. */
/* Do not globally hide `.sm:hide` — only hide its textual children above. */

/* Emergency cap: force decorative arrows/icons to match text size.
   This targets common class names and any SVG to avoid oversized chevrons
   appearing on pages. If this is too broad, we can scope it to specific
   containers later. */
[class*="arrow"], [class*="chevron"], .icon, .svg-icon, svg, img.icon {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    font-size: 1em !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Also cap pseudo-elements that might draw large shapes */
[class*="arrow"]::before, [class*="arrow"]::after,
[class*="chevron"]::before, [class*="chevron"]::after {
    width: 1em !important;
    height: 1em !important;
    content: "" !important;
}