/* ============================================
   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;
}

/* ============================================
   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;
}

#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;
}

/* MultiSelect (Adversaire, Cluster, Blesses) : pas de cadre au repos pour
   un look "minimaliste" type sidebar Linear/Vercel — la bordure reapparait
   au hover/focus pour signaler l'interactivite (cf 03-components.css). */
#filters-panel .sidebar-ms-input,
#filters-panel .mantine-MultiSelect-input {
    border-color: transparent !important;
    background: var(--overlay-hover) !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 a:hover {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   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;
}