/* ============================================
   TOP NAVBAR — Solution A : flotte sur le fond.
   Meme couleur que le body — pas de "boite" sombre, juste un alignement
   d'elements. Le glow violet du .page-header en dessous remonte legerement
   pour creer l'effet d'aura traversante (style Linear/Vercel/Anthropic).
   ============================================ */

#navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--color-bg-page);   /* surface-0 : meme que body */
    display: flex;
    align-items: center;
    padding: 0 28px;
    z-index: 1000;
}

/* Hairline ultra-subtile en bas (optionnel, si la separation est trop floue) */
#navbar-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--overlay-hairline) 50%,
        transparent 100%);
}

/* --- DMC Menu trigger buttons (subtle variant override for dark navbar) --- */
.nav-menu-trigger,
.nav-menu-trigger .mantine-Button-label {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.nav-menu-trigger:hover,
.nav-menu-trigger:hover .mantine-Button-label {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

/* --- DMC Menu dropdown dark theme --- */
.mantine-Menu-dropdown {
    min-width: 200px !important;
}

.mantine-Menu-item {
    font-size: 13px !important;
    color: var(--color-text-muted) !important;
    transition: all 0.15s ease !important;
}

/* dmc.MenuItem(href=...) rend un <a> interne qui herite de Bootstrap
   --bs-link-color (bleu). On force la couleur sur l'ancre elle-meme. */
.mantine-Menu-item,
.mantine-Menu-item:link,
.mantine-Menu-item:visited {
    color: var(--color-text-muted) !important;
    text-decoration: none !important;
}

.mantine-Menu-item:hover,
.mantine-Menu-item[data-hovered] {
    background: var(--overlay-hover) !important;
    color: var(--color-text-secondary) !important;
}

/* MenuLabel + MenuDivider — utilises par le account menu authentifie */
.mantine-Menu-label {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px !important;
}

.mantine-Menu-divider {
    border-color: var(--overlay-hairline) !important;
    margin: 4px 0 !important;
}

/* --- Direct link (single-item sections like Joueurs) ---
   !important sur tous les etats pour gagner sur Bootstrap (--bs-link-color
   bleu) qui s'applique par defaut sur <a> rendus par dmc.Anchor. On couvre
   :link/:visited/:focus/:active (Chrome et Edge n'appliquent pas les memes
   defaults Bootstrap selon l'etat). */
.nav-direct-link,
.nav-direct-link:link,
.nav-direct-link:visited,
.nav-direct-link:focus,
.nav-direct-link:active {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.nav-direct-link:hover,
.nav-direct-link:hover:visited {
    color: var(--color-text-primary) !important;
}

.nav-direct-link.active {
    color: var(--color-text-primary) !important;
}

/* Retire le cadre bleu (outline + Bootstrap focus shadow) qui apparait
   quand on clique sur un lien nav direct ou un menu trigger. */
.nav-direct-link:focus,
.nav-direct-link:focus-visible,
.nav-menu-trigger:focus,
.nav-menu-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   NAVBAR RESPONSIVE — 3 paliers
   Structure (components/navbar.py) :
     .nav-bar > .nav-logo | .nav-burger | .nav-collapse | .nav-right
     .nav-collapse > .nav-links + .nav-selectors
   > 1600px    : tout en ligne.
   1361-1600px : liens et selecteurs resserres.
   901-1360px  : les liens passent dans un panneau (burger), les
                 selecteurs restent dans la barre.
   <= 900px    : liens + selecteurs dans un seul panneau plein ecran.
   Le panneau s'ouvre via la classe .nav-open sur #navbar-container
   (assets/navbar.js).
   ============================================ */

.nav-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.nav-logo { flex-shrink: 0; }

.nav-collapse {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}
.nav-links { margin-left: 12px; }

.nav-selectors {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.nav-select-season { width: 180px; }
.nav-select-team   { width: 180px; }
.nav-select-player { width: 200px; }

.nav-right { flex-shrink: 0; }

.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-burger:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
#navbar-container.nav-open .nav-burger {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-primary);
}

/* Panneau deroulant commun (appliquee a .nav-links puis a .nav-collapse) */
@media (max-width: 1360px) {
    .nav-burger { display: inline-flex; }
    .nav-links {
        display: none !important;
        position: fixed;
        top: 56px;
        left: 0;
        min-width: 260px;
        margin: 0;
        padding: 10px;
        flex-direction: column;
        align-items: stretch !important;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-top: none;
        border-radius: 0 0 12px 0;
        box-shadow: var(--shadow-lg);
    }
    #navbar-container.nav-open .nav-links { display: flex !important; }
    /* Liens directs (<a>) et menus (<button> Mantine) alignes sur la meme
       marge gauche : le Button porte son propre padding et centre son label. */
    .nav-links .nav-direct-link,
    .nav-links .nav-direct-link:link,
    .nav-links .nav-direct-link:visited,
    .nav-links .nav-menu-trigger {
        justify-content: flex-start;
        width: 100%;
        padding: 8px 12px !important;
    }
    .nav-links .nav-menu-trigger .mantine-Button-inner { justify-content: flex-start; }
}

/* Palier resserre : moins de padding, selecteurs plus etroits */
@media (max-width: 1600px) {
    .nav-bar, .nav-collapse { gap: 12px; }
    .nav-direct-link,
    .nav-direct-link:link,
    .nav-direct-link:visited { padding: 8px 10px; }
    .nav-select-season { width: 150px; }
    .nav-select-team   { width: 150px; }
    .nav-select-player { width: 160px; }
}

/* Mobile : un seul panneau plein ecran pour liens + selecteurs */
@media (max-width: 900px) {
    #navbar-container { padding: 0 12px; }
    .nav-bar { gap: 10px; }
    .nav-collapse {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px 20px;
        background: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }
    #navbar-container.nav-open .nav-collapse { display: flex; }
    /* Dans le panneau mobile, les liens redeviennent un bloc statique */
    .nav-links,
    #navbar-container.nav-open .nav-links {
        display: flex !important;
        position: static;
        min-width: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .nav-selectors {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        padding-top: 14px;
        border-top: 1px solid var(--color-border-light);
    }
    .nav-selectors > *,
    .nav-select-season, .nav-select-team, .nav-select-player { width: 100%; }
    .nav-right { margin-left: auto; gap: 4px !important; }
    /* CTA abonnement (navbar.py, _cta_button) : icone seule pour que
       .nav-right tienne a cote du logo et du burger. */
    .nav-cta-button { padding: 0 10px; }
    .nav-cta-button .mantine-Button-label { display: none; }
    .nav-cta-button .mantine-Button-section { margin: 0; }
}

/* ============================================
   FILTERS PANEL — Left panel (player page only)
   ============================================ */

#filters-panel {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--color-bg-page);   /* surface-0 : meme que body et navbar */
    border-right: 1px solid var(--overlay-hover);
    padding: 20px 14px;
    overflow-y: auto;
    z-index: 900;
}

/* Mobile : plus de colonne fixe a gauche (elle laisserait ~170px au
   contenu). Le panneau rejoint le flux, au-dessus du contenu, en pleine
   largeur. !important : position / largeur / marge sont posees en style
   inline par global_callbacks.update_layout_for_page. */
@media (max-width: 900px) {
    #filters-panel {
        position: static !important;
        width: auto !important;
        border-right: none;
        border-bottom: 1px solid var(--overlay-hover);
        padding: 16px;
    }
    #main-content-container { margin-left: 0 !important; }
}

#filters-panel .filter-label-text {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#filters-panel .filter-section-title {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--overlay-active);
}

#filters-panel hr {
    border-color: var(--overlay-active) !important;
    margin: 16px 0 !important;
}

/* Filters panel scrollbar */
#filters-panel::-webkit-scrollbar {
    width: 4px;
}

#filters-panel::-webkit-scrollbar-track {
    background: transparent;
}

#filters-panel::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 2px;
}

#filters-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}

/* ============================================
   CONTENT LAYOUT
   ============================================ */

#content-wrapper {
    margin-top: 56px;
    min-height: calc(100vh - 56px);
    background: var(--color-bg-page);   /* surface-0 : continuite avec navbar */
}

#main-content-container {
    padding: 0;                         /* le .page-header doit toucher la nav */
    background-color: var(--color-bg-page);   /* surface-0 */
    min-height: calc(100vh - 56px);
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page container — padding lateral pour le contenu sous le header */
.page-container {
    width: 100%;
    padding: 0 2% 40px 2%;
    box-sizing: border-box;
}

/* ============================================
   APP FOOTER
   ============================================ */
#app-footer {
    background: linear-gradient(90deg, var(--color-bg-sidebar) 0%, var(--color-bg-surface-alt) 100%);
    padding: 16px 24px;
}

#app-footer .app-footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

#app-footer .app-footer-brand {
    grid-column: 1;
    justify-self: start;
}

#app-footer .footer-links {
    grid-column: 2;
}

#app-footer a:hover {
    color: var(--color-text-secondary) !important;
}

@media (max-width: 900px) {
    #app-footer .app-footer-content {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    #app-footer .app-footer-brand,
    #app-footer .footer-links {
        grid-column: 1;
    }

    #app-footer .footer-links {
        width: 100%;
    }
}

/* ============================================
   PAGE HEADER — Glow Accent (style Anthropic / Notion).
   Base sombre solide + halo violet qui émane du haut, ligne d'accent fine
   en haut. Lumineux quand on scanne, calme quand on lit les chiffres en bas.
   Toutes les couleurs viennent de :root (CSS vars) — voir Colors.GLOW_* (config/ui.py).
   ============================================ */
/* Solution A : edge-to-edge, colle a la nav, glow violet qui flotte sur le
   fond commun (--color-bg-page). Pas de bg solide derriere le glow — le body
   se voit a travers, ce qui permet a l'aura violette de "deborder" sous la
   navbar (qui est sur le meme fond). */
.page-header {
    position: relative;
    text-align: center;
    padding: 1.75rem 2rem 1.5rem;                 /* compact : ~28px / 24px vertical */
    margin: 0 -2%;                                /* edge-to-edge : casse padding .page-container */
    color: var(--color-text-primary);
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%,
            var(--glow-halo-strong), transparent 70%),
        radial-gradient(ellipse 90% 80% at 50% 100%,
            var(--glow-halo-soft), transparent 70%);
}

/* Hairline en bas qui dialogue avec le tab underline */
.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--glow-accent-line) 50%,
        transparent 100%);
}

/* Note typo : valeurs alignees sur FontSizes/FontWeights/Spacing (config/ui.py).
   Sync a la main si modification — voir skill frontend-themes. */
.page-title {
    font-size: 26px;             /* compact hero — entre FontSizes.H2 (24) et H1 (36) */
    font-weight: 600;            /* = FontWeights.SEMIBOLD */
    letter-spacing: -0.01em;
    margin: 0 0 4px 0;           /* = Spacing.XS */
    color: var(--color-text-primary);
    text-shadow: 0 0 40px var(--glow-text-shadow);
}

.page-subtitle {
    font-size: 14px;             /* = FontSizes.BODY */
    margin: 0;
    color: var(--glow-subtitle-text);
}

.page-header h3 {
    margin: 8px 0 0 0;           /* = Spacing.SM */
    opacity: 0.9;
    font-weight: 300;            /* = FontWeights.LIGHT */
}

/* ============================================
   DMC TABS — overrides cohérents avec la palette Midnight Slate.
   Cible les data-attributes Mantine v2 (Dash Mantine Components).
   ============================================ */
.mantine-Tabs-list {
    border-bottom: 2px solid var(--color-border-light) !important;
    margin-bottom: 16px;
    width: 100%;
}

.mantine-Tabs-tab {
    flex: 1;
    color: var(--color-text-muted) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease !important;
}

.mantine-Tabs-tab[data-active] {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

.mantine-Tabs-tab:hover:not([data-active]) {
    color: var(--color-text-secondary) !important;
    background-color: var(--color-bg-surface-hover) !important;
    border-bottom-color: var(--color-border) !important;
}

.tab-content {
    margin-top: 15px;
}

/* ============================================
   PLAYER SELECTOR — chrome de page (titre + dropdown)
   Hide selected value, show custom label (Dash 4)
   ============================================ */
.player-selector-dropdown .dash-dropdown-value {
    visibility: hidden !important;
}

.player-selector-dropdown .dash-dropdown-wrapper {
    cursor: pointer;
    background-color: var(--color-bg-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    position: relative;
}

.player-selector-dropdown .dash-dropdown-wrapper:hover {
    background-color: var(--color-border-light) !important;
    border-color: var(--color-primary) !important;
}

/* Show "Changer de joueur :" as pseudo-element */
.player-selector-dropdown .dash-dropdown-wrapper::before {
    content: "Changer de joueur :";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.player-selector-dropdown .dash-dropdown-trigger-icon {
    visibility: hidden;
}

.player-selector-dropdown .dash-dropdown-search input::placeholder {
    visibility: hidden !important;
}

/* Make dropdown menu wider when open */
.player-selector-dropdown .dash-dropdown-options {
    width: 300px !important;
    min-width: 300px !important;
}

.player-selector-dropdown .dash-dropdown-option {
    white-space: nowrap;
    overflow: visible;
}