/* ============================================
   PILL SELECT / MULTISELECT — états interactifs du dropdown
   (styles statiques définis côté Python dans inputs.py)
   ============================================ */
.pill-select-option:hover {
    background: rgba(var(--color-viz-2-rgb), 0.10) !important;
}
.pill-select-option[data-combobox-selected] {
    background: rgba(var(--color-viz-2-rgb), 0.16) !important;
    color: var(--color-viz-2) !important;
}
.pill-select-option[data-combobox-selected]::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-viz-2);
    margin-right: 8px;
    vertical-align: middle;
}

/* ============================================
   FILTER CHIP — resume supprimable d'un filtre actif
   (barres de filtres compactes : chip = filtre secondaire non-defaut)
   ============================================ */
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary);
    color: var(--color-primary-hover);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Le clic supprime le filtre : le hover annonce la suppression */
.filter-chip:hover {
    background: var(--color-danger-subtle);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

/* ============================================
   CHIP GROUP — etats coche / decoche (create_chip_group dans inputs.py)
   Memes tokens que create_segmented_control.
   ============================================ */
.app-chip-label {
    background: var(--color-bg-surface-alt) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 600;
}
.app-chip-label:hover {
    border-color: var(--color-primary) !important;
}
.app-chip-label[data-checked] {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================
   ACTION ICONS / NAVIGATION LINKS
   ============================================ */

/* Reset icon (inside ActionIcon) */
.reset-icon {
    --reset-icon-color: var(--color-text-muted);
    transition: transform 0.25s ease;
}
.mantine-ActionIcon-root:hover .reset-icon {
    --reset-icon-color: var(--color-danger);
    transform: rotate(-45deg);
}

.nav-link {
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.player-link:hover {
    color: var(--color-primary-active) !important;
    background-color: var(--color-primary-subtle);
    padding: 4px 8px;
    border-radius: 4px;
}

/* ============================================
   DATATABLE — Liens markdown + container
   Règle globale dark mode. !important pour appliquer uniformément à tous
   les tableaux du projet. Bleu pâle (Tailwind 300) : visible/cliquable
   sans crier.
   ============================================ */
.dash-table-container a,
.dash-spreadsheet-container a,
.dash-cell-value a {
    color: var(--color-primary-soft) !important;
    text-decoration: none;
}
.dash-table-container a:hover,
.dash-spreadsheet-container a:hover,
.dash-cell-value a:hover {
    color: var(--color-primary-hover) !important;
    text-decoration: underline;
}

/* Colonne DATE en markdown (sortable_date_cell, utils/formatting.py) : meme police et meme
   centrage vertical qu'une cellule texte ; le <p> du markdown n'ajoute pas de marge. */
/* specificite superieure a la regle interne du DataTable (div.dash-cell-value.cell-markdown en sans-serif) */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td[data-dash-column="DATE"] div.dash-cell-value.cell-markdown {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* miroir de FONT_MONO (config/ui.py) */
}
.dash-spreadsheet td[data-dash-column="DATE"] .cell-markdown p { margin: 0; }

.dash-table-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* DataTable : SUPPRIMER COMPLETEMENT tout hover/focus/selection Dash.
   Les overlays blancs/clairs ecrasent les couleurs de la heatmap (palette
   tier-X) et rendent les lignes illisibles. On force `transparent` partout
   sauf le fond d'origine de la cell (defini par style_data_conditional). */

/* Hover row + cell : aucun changement visuel */
.dash-spreadsheet-inner tr:hover,
.dash-spreadsheet-inner tr:hover td,
.dash-spreadsheet-inner .dash-cell:hover,
.dash-table-container tr:hover,
.dash-table-container tr:hover td,
.dash-table-container .dash-cell:hover,
.dash-spreadsheet-container tr:hover,
.dash-spreadsheet-container tr:hover td,
.dash-spreadsheet-container .dash-cell:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

/* Cell focused / selected (clic) : pas d'overlay non plus */
.dash-spreadsheet-inner .dash-cell.focused,
.dash-spreadsheet-inner .dash-cell--selected,
.dash-spreadsheet-inner .dash-cell.cell--selected,
.dash-spreadsheet-inner .dash-cell.row--selected,
.dash-table-container .dash-cell.focused,
.dash-table-container .dash-cell--selected,
.dash-table-container .dash-cell.cell--selected,
.dash-table-container .dash-cell.row--selected,
.dash-spreadsheet-container .dash-cell.focused,
.dash-spreadsheet-container .dash-cell--selected,
.dash-spreadsheet-container .dash-cell.cell--selected,
.dash-spreadsheet-container .dash-cell.row--selected {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    border-color: var(--color-border-light) !important;
    outline: none !important;
}

/* Inputs internes de Dash (.dash-cell-value > input) : aucun fond/shadow. */
.dash-spreadsheet-inner .dash-cell input,
.dash-table-container .dash-cell input,
.dash-spreadsheet-container .dash-cell input {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
/* Ecran d'attente initial : Dash sert <div class="_dash-loading">Loading...</div>
   tant que React n'a pas dessine l'app. On masque ce texte et on affiche le logo
   centre avec une barre animee. Rien a retirer : React remplace l'element. */
._dash-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-size: 0;                        /* masque le texte "Loading..." */
    background: var(--color-bg-page) url('brand_icon/kapte-transparent.png')
                center calc(50% - 18px) / 200px auto no-repeat;
}

._dash-loading::before,
._dash-loading::after {
    content: '';
    position: absolute;
    top: calc(50% + 30px);
    left: calc(50% - 70px);
    height: 3px;
    border-radius: 2px;
}

._dash-loading::before {                 /* rail */
    width: 140px;
    background: var(--color-border-light);
}

._dash-loading::after {                  /* curseur */
    width: 46px;
    background: var(--color-primary);
    animation: dash-loading-slide 1.1s ease-in-out infinite alternate;
}

@keyframes dash-loading-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(94px); }
}

@media (prefers-reduced-motion: reduce) {
    ._dash-loading::after { animation: none; transform: translateX(47px); }
}

/* Changement de page (create_page_loading) : meme barre que l'ecran d'attente initial,
   fixee sous la navbar. Tant que la zone des pages est vide (premier affichage), on lui
   reserve de la hauteur pour que le pied de page ne remonte pas. */
.page-loader {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 900;
    height: 3px;
    overflow: hidden;
    background: var(--color-border-light);
}
.page-loader::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    border-radius: 2px;
    background: var(--color-primary);
    animation: page-loader-slide 1.1s ease-in-out infinite;
}
@keyframes page-loader-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
    .page-loader::after { animation: none; width: 100%; opacity: 0.6; }
}
#_pages_content:empty { min-height: 60vh; }

/* ============================================
   CURSEUR (dmc.Slider) : rail discret, poignee cerclee, bulle aux couleurs de l'app
   ============================================ */
.mantine-Slider-track::before { background: var(--color-border); }
.mantine-Slider-bar { background: linear-gradient(90deg, var(--color-primary-active), var(--color-primary-hover)); }
.mantine-Slider-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-primary-hover);
    background: var(--color-bg-page);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.18);
    transition: box-shadow 150ms ease;
}
.mantine-Slider-thumb:hover,
.mantine-Slider-thumb[data-dragging] { box-shadow: 0 0 0 7px rgba(var(--color-primary-rgb), 0.28); }
.mantine-Slider-label {
    padding: 3px 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Pagination des tableaux Dash : memes surfaces que les autres controles */
.dash-table-container .previous-next-container button,
.dash-table-container .previous-next-container input.current-page {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px;
    background: var(--color-bg-surface-alt) !important;
    color: var(--color-text-secondary) !important;
}
.dash-table-container .previous-next-container button:disabled { opacity: 0.4; }

/* dcc.Loading wrapper : pas de min-height force qui ajouterait
   un espace vide quand le contenu est present. */
.dash-loading-callback,
[data-dash-is-loading-component="true"] {
    min-height: 0;
}

/* ============================================
   FORM CONTROLS — Dash 4 dropdown styling
   ============================================ */
.dash-dropdown {
    border-radius: 6px;
    border: 2px solid var(--color-border-light);
}

.dash-dropdown:hover {
    border-color: var(--color-primary);
}

.dash-dropdown:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}

/* Dash 4 dropdown popup — main content area (light theme) */
.dash-dropdown-content [role="option"]:is([data-highlighted], :hover) { background: var(--color-bg-surface-alt); }
.dash-dropdown-content [role="option"]:is([aria-selected="true"]) { color: var(--color-primary); font-weight: 500; }

/* ============================================
   DATE PICKERS (Dash 3 + Dash 4 Radix-based)
   ============================================ */

.dash-datepicker { border-radius: 6px; }
.dash-datepicker-calendar { border: 1px solid var(--color-border-light); border-radius: 8px; box-shadow: var(--shadow-md); }
.dash-datepicker [data-today] { font-weight: 600; }
.dash-datepicker [data-selected] { background: var(--color-primary) !important; color: white !important; /* white pur OK : contraste sur fond primary saturé */ }
.dash-datepicker [data-in-range] { background: rgba(var(--color-primary-rgb), 0.15) !important; }

/* ============================================
   DMC DATEINPUT — Calendar popup (etats interactifs)
   Styles statiques (couleurs base) definis cote Python dans inputs.py.
   Ici : hover, today, selected, weekend, outside.
   ============================================ */

/* Hover sur une cellule jour cliquable */
.mantine-DateInput-day:hover:not([data-selected]):not([data-disabled]) {
    background: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-text-primary) !important;
}

/* Aujourd'hui : ring discret en couleur primary */
.mantine-DateInput-day[data-today] {
    color: var(--color-primary-hover) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

/* Jour selectionne : fond primary, texte blanc */
.mantine-DateInput-day[data-selected] {
    background: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

/* Weekend (samedi/dimanche) : leger accent visuel */
.mantine-DateInput-day[data-weekend]:not([data-selected]):not([data-outside]) {
    color: var(--color-text-muted) !important;
}

/* Jours du mois precedent/suivant (outside) : tres efface */
.mantine-DateInput-day[data-outside] {
    color: var(--color-text-disabled) !important;
    opacity: 0.5;
}

/* Bouton header (mois/annee) au hover */
.mantine-DateInput-calendarHeaderControl:hover {
    background: rgba(var(--color-primary-rgb), 0.10) !important;
    color: var(--color-text-primary) !important;
}
.mantine-DateInput-calendarHeaderLevel:hover {
    background: rgba(var(--color-primary-rgb), 0.10) !important;
    color: var(--color-primary-hover) !important;
}

/* ============================================
   PLOTLY HOVER PREMIUM
   ============================================
   Override l'enveloppe SVG des tooltips Plotly natifs pour matcher l'identite
   "Glow Accent" (style page-header). Cible `.hoverlayer .hovertext`.

   Limites Plotly :
   - Le path SVG inclut une pointe directionnelle non-arrondissable.
   - Ombre simulee via drop-shadow.
   - Alignement label/valeur fait cote Python par padding au caractere (le SVG
     text de Plotly ne supporte pas le CSS grid).
*/
.hoverlayer .hovertext {
    /* Ombre douce + halo violet pour suggerer l'elevation */
    filter:
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 16px rgba(var(--color-glow-accent-rgb), 0.18));
}

.hoverlayer .hovertext > path {
    /* Effet "bords tres arrondis" via stroke ultra-epais + linejoin round.
       stroke-width=12 cree un large halo violet en bordure qui simule un
       border-radius prononce (~10-12px visuel). paint-order: stroke fill
       garantit que le stroke est dessine derriere le fill, donc n'empiete
       pas sur le contenu interne. */
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    stroke-width: 10px !important;
    paint-order: stroke fill;
}

/* ============================================
   DASH 4 — Component Overrides
   Variables --Dash-* extraites dans 00-tokens.css. Overrides globaux des
   composants Dash 4 (pas page-specifiques) : dropdowns, checklist, radio.
   ============================================ */

/* Dash 4 dropdown global refinements */
.dash-dropdown-content {
    z-index: 1000;
    border-radius: 6px;
}

/* Dash 4 checklist & radio items alignment (NOT inside dropdowns) */
.dash-checklist-inline .dash-options-list,
.dash-radioitems-inline .dash-options-list {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================
   ACCOUNT MENU — User profile dropdown
   Style "Chrome profile menu" : avatar + nom + email en haut, actions en dessous.
   Render conditionnel selon user-session (cf navbar.build_account_menu_*).
   ========================================== */
.account-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--overlay-hairline);
    min-width: 240px;
}

.account-menu-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-menu-name {
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-email {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-header-avatar {
    flex-shrink: 0;
}

/* L'avatar dans la navbar (trigger) reste cliquable comme l'ActionIcon */
.account-menu-trigger-avatar {
    cursor: pointer;
}

/* ============================================
   APERCU PREMIUM (components/premium_teaser.py)
   Bloc reserve a l'offre payante : version compacte (badge, controle de
   filtre, colonne). Le carton pleine largeur porte ses styles en inline.
   Tout ce qui signale Premium est dore (tokens warning), comme le bloc
   Premium de l'accueil ; le bleu reste la couleur des actions gratuites.
   ============================================ */

.premium-lock,
.premium-lock:link,
.premium-lock:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px dashed rgba(var(--color-warning-rgb), 0.5);
    border-radius: 999px;
    background: var(--color-warning-subtle);
    color: var(--color-warning-text);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.premium-lock:hover {
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

/* Apercu premium repliable : illustration a donnees fictives, masquee tant que
   l'utilisateur ne la demande pas. */
.premium-example {
    /* pas de text-align : s'aligne sur son contexte (centre dans l'apercu
       pleine largeur, a gauche dans l'entete joueur) */
    margin: 4px 0 16px 0;
}
.premium-example__summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-warning-text);
}
.premium-example__summary::-webkit-details-marker {
    display: none;
}
.premium-example__summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 4px;
    transition: transform 150ms ease;
}
.premium-example[open] .premium-example__summary::before {
    transform: rotate(90deg);
}
.premium-example__note {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-muted);
}
.premium-example__body {
    margin-top: 8px;
    opacity: 0.75;
    pointer-events: none;
}

/* ============================================
   FILTRES EN PASTILLES — mobile (SPEC-socle S9)
   components/filter_summary.py ; ouverture : assets/mobile-ui.js.
   Desktop : .mfilters-head masque (.m-only), controles toujours visibles.
   ============================================ */
.mfilters-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.mfilters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.mfilter-chip {
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--color-primary-subtle);
    color: var(--color-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
.mfilters-toggle,
.mfilters-toggle-wide {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-primary-hover);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1023.98px) {   /* bp mobile */
    .mfilters:not(.open):not(.mfilters-quick) > .mfilters-body { display: none; }
    .mfilters.open:not(.mfilters-quick) > .mfilters-body {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: var(--color-bg-surface);
    }
}

/* ============================================
   LIGNE DEPLIABLE — mobile (SPEC-socle S10)
   components/factories.create_expandable_row.
   ============================================ */
.xrow {
    margin-bottom: 6px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
}
.xrow-head,
.xrow-static {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 4px 6px 10px;
    cursor: pointer;
    list-style: none;
}
.xrow-head::-webkit-details-marker { display: none; }
.xrow-main { flex: 1; min-width: 0; }
.xrow-caret {
    color: var(--color-text-light);
    font-size: 12px;
    transition: transform 150ms ease;
}
.xrow[open] .xrow-caret { transform: rotate(180deg); }
.xrow-link,
.xrow-link:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-primary-hover) !important;
    font-size: 20px;
    text-decoration: none !important;
}
.xrow-detail {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--color-border-light);
}

/* ============================================
   CIBLES TACTILES — mobile (SPEC-socle S12)
   40 px minimum sous 1024 px.
   ============================================ */
@media (max-width: 1023.98px) {   /* bp mobile */
    .mantine-Button-root,
    .mantine-ActionIcon-root,
    .mantine-SegmentedControl-control,
    .mantine-Chip-label,
    .mantine-Input-input,
    .mantine-Checkbox-body {
        min-height: 40px;
    }
    .mantine-ActionIcon-root { min-width: 40px; }
    .mantine-SegmentedControl-label {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
    }
    .mantine-Checkbox-body { align-items: center; }
    .mantine-Chip-label { display: inline-flex; align-items: center; }
}

/* ============================================
   BLOC SECONDAIRE REPLIABLE — mobile (SPEC-socle S14)
   components/factories.create_ext_block : poignee discrete sans chiffres,
   « Replier ▴ » quand le bloc est ouvert.
   ============================================ */
.ext-block {
    margin: 0 -12px 12px;
    padding: 0 12px;
    background: var(--color-bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
.ext-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}
.ext-handle::-webkit-details-marker { display: none; }
.ext-label::after { content: " ▾"; }
.ext-close { display: none; }
.ext-close::after { content: " ▴"; }
.ext-block[open] > .ext-handle { order: 2; }
.ext-block[open] .ext-label { display: none; }
.ext-block[open] .ext-close { display: inline; }
.ext-block[open] { display: flex; flex-direction: column; }
.ext-body { padding-top: 10px; }

/* ============================================
   BASCULE LIGNES / TABLEAU — mobile (SPEC-socle S15)
   components/view_switch.py ; data-view sur le conteneur (mobile-ui.js).
   ============================================ */
.view-switch {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin: 4px 0 8px;
}
.vs-btn {
    width: 40px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
}
.vs-btn.on {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
    color: var(--color-text-primary);
}
@media (max-width: 1023.98px) {   /* bp mobile */
    [data-view="rows"] > .view-table,
    [data-view="table"] > .view-rows { display: none !important; }
}

/* ============================================
   HISTORIQUE EN LIGNES — mobile (fiche joueur et fiche equipe)
   components/player/tabs/game_log_rows.py, components/team/tabs/game_log_rows.py ;
   vue tableau : DATE et match colles a gauche.
   ============================================ */
.gl-title {
    margin: 12px 0 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.gl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.gl-date { width: 40px; color: var(--color-text-muted); }
.gl-opp { flex: 1; min-width: 0; color: var(--color-text-secondary); font-weight: 600; }
.gl-team, .gl-team:visited { color: var(--color-primary-hover) !important; text-decoration: none; }
.gl-info { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }
.gl-stat { display: inline-flex; flex-direction: column; align-items: center; width: 30px; line-height: 1.1; }
.gl-stat b { color: var(--color-text-primary); }
.gl-stat small, .gl-min { color: var(--color-text-muted); font-size: 10px; }
.gl-min { width: 26px; text-align: right; }
.gl-row-dnp, .gl-dnp { color: var(--color-text-light); }
.gl-score { margin-left: auto; font-weight: 700; }
.gl-delta { width: 34px; font-size: 12px; font-weight: 600; text-align: right; }
.gl-line-6 { grid-template-columns: repeat(6, 1fr); }
.gl-line { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.gl-cell { display: flex; flex-direction: column; font-size: 12px; }
.gl-cell small { color: var(--color-text-muted); font-size: 10px; }
.gl-cell b { color: var(--color-text-secondary); font-weight: 600; }
.gl-bx, .gl-bx:visited {
    display: inline-block;
    min-height: 40px;
    margin-top: 6px;
    padding: 10px 0 0;
    color: var(--color-primary-hover) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 1023.98px) {   /* bp mobile */
    /* Vue tableau : defile, DATE et GAME collees a gauche */
    .gl-view .dash-spreadsheet-container { overflow-x: auto !important; }
    .gl-view [data-dash-column="DATE"] {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 82px !important;
        width: 82px !important;
        background: var(--color-bg-surface);
    }
    .gl-view [data-dash-column="GAME"],
    .gl-view [data-dash-column="VS"] {
        position: sticky;
        left: 82px;
        z-index: 1;
        background: var(--color-bg-surface);
    }
}

/* ============================================
   BARRES HORIZONTALES — mobile (SPEC-socle S16)
   components/player/visualizations/hbars.py : une ligne par match, repere du
   seuil, 12 derniers matchs puis « toute la saison » (.all, mobile-ui.js).
   ============================================ */
.hbars {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
}
.hbars:not(.all) .hb-more { display: none; }
.hb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hb-title { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.hb-all {
    min-height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
}
.hb-row {
    display: grid;
    grid-template-columns: 76px 1fr 30px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border-top: 1px solid var(--color-border-light);
}
.hb-lab { display: flex; flex-direction: column; line-height: 1.15; }
.hb-lab b, .hb-team, .hb-team:visited { color: var(--color-text-primary) !important; font-size: 13px; font-weight: 700; text-decoration: none; }
.hb-lab small { color: var(--color-text-muted); font-size: 10px; }
.hb-row > b { color: var(--color-text-primary); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.hb-track { position: relative; height: 12px; border-radius: 6px; background: var(--color-border-light); }
.hb-fill { height: 100%; border-radius: 6px; }
.hb-pos { background: var(--color-success); }
.hb-neg { background: var(--color-danger); }
.hb-neutral { background: var(--color-primary); }
.hb-thr { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-warning); }
.hb-dnp { height: auto; background: transparent; color: var(--color-text-light); font-size: 11px; }

/* ============================================
   CLASSEMENT EN BARRES — mobile (SPEC-socle S16)
   components/rank_bars.py : rang, nom, sous-titre, barre, valeur ; les 3
   premiers en accent. Conteneur et piste : .hbars / .hb-track.
   ============================================ */
.rb-row {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) 1fr 46px;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border-top: 1px solid var(--color-border-light);
}
.rb-lab { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rb-lab small { color: var(--color-text-muted); font-size: 10px; }
.rb-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rb-rank { width: 18px; flex-shrink: 0; color: var(--color-text-muted); font-size: 11px; text-align: right; }
.rb-logo { width: 18px; height: 18px; flex-shrink: 0; }
.rb-name, .rb-name:visited {
    overflow: hidden;
    color: var(--color-text-primary) !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}
.rb-fill { height: 100%; border-radius: 6px; background: var(--color-border-strong); }
.rb-fill.on { background: var(--color-primary); }
.rb-row > b { color: var(--color-text-primary); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================
   FENETRE DE CONNEXION KAPTE (components/auth_modal, specs/auth/maquettes/v1 B)
   Centree sur desktop, panneau bas sur mobile (.sheet-modal). Champs de 16 px :
   pas de zoom a la saisie sur iPhone.
   ============================================ */
/* Fond de l'app plutot que le gris par defaut de Mantine */
.mantine-Modal-content:has(.auth-body),
.mantine-Modal-content:has(.auth-body) .mantine-Modal-header {
    background: var(--color-bg-surface);
}
.mantine-Modal-content:has(.auth-body) { border: 1px solid var(--color-border); }
.auth-body .mantine-Input-input {
    border-color: var(--color-border);
    background: var(--color-bg-surface-alt);
    color: var(--color-text-primary);
}
.auth-body .mantine-Input-input:focus,
.auth-body .mantine-Input-input:focus-within { border-color: var(--color-primary); }
.auth-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 8px; }
.auth-title { margin: 0; color: var(--color-text-primary); font-size: 22px; font-weight: 700; line-height: 1.2; }
.auth-sub { margin: -8px 0 4px; color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }
.auth-google,
.auth-google:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-primary) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
}
.auth-google:hover { background: var(--color-bg-surface-hover); }
.auth-google-icon {
    width: 18px;
    height: 18px;
    background: url("/assets/google-g.svg") center / contain no-repeat;
}
.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-light);
    font-size: 12px;
}
.auth-or::before,
.auth-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-who {
    align-self: flex-start;
    max-width: 100%;
    min-height: 36px;
    padding: 0 12px;
    overflow: hidden;
    border: none;
    border-radius: 20px;
    background: var(--color-bg-surface-alt);
    color: var(--color-text-secondary);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.auth-who span { color: var(--color-text-muted); }
/* Messages : encadres, pour etre vus avant le bouton */
.auth-error,
.auth-info,
.auth-notice {
    padding: 10px 12px;
    border-left: 3px solid;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}
.auth-error { border-color: var(--color-danger); background: var(--color-danger-subtle); color: var(--color-danger-text); }
.auth-info { border-color: var(--color-success); background: var(--color-success-subtle); color: var(--color-success-text); }
.auth-notice { border-color: var(--color-warning); background: var(--color-warning-subtle); color: var(--color-warning-text); }
.auth-link {
    align-self: center;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--color-primary-hover);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.auth-legal { margin: 2px 0 0; color: var(--color-text-light); font-size: 12px; line-height: 1.5; text-align: center; }
.auth-legal a { color: var(--color-text-muted); }

/* ============================================
   FILTRES RAPIDES — mobile (components/quick_filters.py, specs/mobile/filtres)
   .fq-bar : ligne de pastilles deroulantes (filtres classiques) + bouton ⚙.
   .fq-classic : controle pilote par une pastille, masque sous 1024 px.
   .fq-adv-zone : filtres avances, visibles seulement dans l'ecran ouvert par ⚙.
   .fq-page.open : la racine de la page passe en plein ecran ; tout ce qui
   n'est pas une zone de filtres avances s'efface.
   ============================================ */
@media (max-width: 1023.98px) {   /* bp mobile */
    .fq-bar { margin-bottom: 10px; }
    .fq-row { display: flex; align-items: center; gap: 6px; }
    .fq-chips {
        display: flex;
        flex: 1;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .fq-chip,
    .fq-adv {
        flex: none;
        min-height: 40px;
        padding: 0 12px;
        border: 1px solid var(--color-border-strong);   /* se detache du fond de page */
        border-radius: 20px;
        background: var(--color-bg-elevated);
        color: var(--color-text-primary);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }
    .fq-chip[hidden] { display: none; }
    .fq-chip:not(.fq-toggle)::after { content: " ▾"; white-space: pre; color: var(--color-text-secondary); }
    .fq-chip.on { border-color: var(--color-primary-hover); background: var(--color-primary-subtle); }
    .fq-chip.tog { border-color: var(--color-primary); background: var(--color-primary); }
    .fq-chip.tog::before { content: "✓ "; white-space: pre; }
    .fq-adv { min-width: 44px; background: transparent; color: var(--color-text-primary); font-size: 16px; }
    .fq-adv[data-count]::after {
        content: attr(data-count);
        margin-left: 6px;
        padding: 1px 6px;
        border-radius: 10px;
        background: var(--color-primary);
        color: var(--color-text-primary);
        font-size: 10px;
        font-weight: 700;
        vertical-align: middle;
    }
    .fq-menu { display: none; }
    .fq-menu.open {
        display: block;
        max-height: 50vh;
        margin-top: 6px;
        padding: 4px;
        overflow-y: auto;
        border: 1px solid var(--color-border-strong);
        border-radius: 12px;
        background: var(--color-bg-elevated);
    }
    .fq-menu button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 42px;
        padding: 0 12px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 14px;
        text-align: left;
        cursor: pointer;
    }
    .fq-menu button.on { background: var(--color-primary-subtle); color: var(--color-text-primary); font-weight: 600; }
    .fq-menu button.on::after { content: "✓"; }
    .fq-group {
        padding: 10px 12px 4px;
        color: var(--color-text-light);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .fq-bar .mfilters-chips { margin-top: 8px; cursor: pointer; }
    .fq-bar .mfilter-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0 0 12px; }
    .mfilter-x {
        min-width: 40px;
        min-height: 40px;
        border: none;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 13px;
        cursor: pointer;
    }
    .fq-bar .mfilters-chips:empty { display: none; }

    .fq-classic { display: none !important; }
    /* La saison n'existe que dans la ligne de pastilles : plus dans le panneau de la loupe */
    #season-selector-container { display: none !important; }
    /* Controles restants sous la ligne de pastilles : sans cadre */
    .mfilters-quick > .mfilters-body .mf-stack:has(> :not(.fq-classic)) { gap: 8px !important; }
    .fq-page:not(.open) .fq-adv-zone,
    .fq-page:not(.open) .fadv-head,
    .fq-page:not(.open) .fadv-close { display: none !important; }

    /* Ecran des filtres avances */
    .fq-page.open {
        position: fixed;
        inset: 0;
        z-index: 1050;   /* au-dessus de la navbar et de la barre d'app, sous les listes Mantine (1100) */
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        margin: 0 !important;
        padding: 0 16px !important;
        background: var(--color-bg-page);
    }
    /* Tout s'efface, sauf les zones de filtres avances, leurs conteneurs, l'en-tete et le bouton */
    .fq-page.open *:not(:has(.fq-adv-zone)):not(.fq-adv-zone):not(.fq-adv-zone *):not(.fadv-head):not(.fadv-head *):not(.fadv-close) {
        display: none !important;
    }
    .fq-page.open .fq-adv-zone {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        padding: 8px 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .fadv-head {
        position: sticky;
        top: 0;
        order: -1;   /* en tete de l'ecran, ou qu'il soit dans la page */
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 -16px 8px;
        padding: 6px 12px;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg-surface);
    }
    .fadv-back,
    .fadv-reset {
        min-width: 44px;
        min-height: 44px;
        border: none;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 24px;
        cursor: pointer;
    }
    .fadv-reset { color: var(--color-primary-hover); font-size: 13px; font-weight: 600; }
    .fadv-title { flex: 1; color: var(--color-text-primary); font-size: 16px; font-weight: 700; }
    .fadv-close {
        position: sticky;
        bottom: 12px;
        order: 99;   /* en bas de l'ecran, ou qu'il soit dans la page */
        flex-shrink: 0;
        min-height: 46px;
        margin: 16px 0 12px;
        border: none;
        border-radius: 10px;
        background: var(--color-primary);
        color: var(--color-text-primary);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
}

/* ============================================
   FILTRES EMPILES — mobile (classements)
   Rangee de filtres desktop (.mf-stack, FILTER_ROW_STYLE inline) dans un
   panneau « ✎ Modifier » : une colonne, controles pleine largeur, separateurs
   (.f-sep) masques. .mfilters-extra : filtres propres a un onglet, ouverts
   avec le panneau (create_filter_summary(extra=...)).
   ============================================ */
@media (max-width: 1023.98px) {   /* bp mobile */
    .mf-stack {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .mf-stack .f-sep { display: none; }
    /* Groupe de chips (poste) : libelle puis chips sur une ligne */
    .mf-stack > div:has(> .mantine-Chip-root) {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    .mf-stack > div:has(> .mantine-Chip-root) > label { flex-basis: 100%; }
    .mf-stack .mantine-InputWrapper-root,
    .mf-stack .mantine-Select-root,
    .mf-stack .mantine-MultiSelect-root,
    .mf-stack .mantine-SegmentedControl-root { width: 100% !important; }
    .mfilters-extra:not(.open) { display: none !important; }
    .mfilters-extra.open {
        margin-bottom: 12px !important;
        padding: 12px !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 12px;
        background: var(--color-bg-surface) !important;
    }
}

/* ============================================
   RECHERCHE EN DIRECT — mobile (SPEC-socle S17)
   [data-search-target] (ex. injuries/layout_helpers.create_team_search) ;
   filtrage dans assets/mobile-ui.js ; .search-none si rien ne correspond.
   ============================================ */
.lsearch { margin-bottom: 12px; }
.search-none {
    display: none;
    padding: 24px 12px;
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
}

/* ============================================
   CARTES « BIENTOT » ET APERCU PREMIUM — mobile
   factories.create_coming_soon_card, premium_teaser.create_premium_teaser :
   styles inline desktop (80 px de marges) resserres sous 1024 px.
   ============================================ */
.soon-cta, .soon-cta:visited {
    display: inline-block;
    min-height: 40px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-primary-hover) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 1023.98px) {   /* bp mobile */
    .coming-soon-card,
    .premium-teaser {
        margin: 12px 0 !important;
        padding: 24px 16px !important;
    }
    .coming-soon-card h1 { font-size: 18px !important; }
    .premium-teaser h2 { font-size: 18px !important; }
}

/* ============================================
   SECTION REPLIABLE — mobile (.m-acc)
   En-tete .m-acc-head (libelle + .m-acc-count), contenu replie sauf .open ;
   ouverture et « Tout deplier » (.m-acc-all) : assets/mobile-ui.js.
   ============================================ */
.m-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.m-acc-head::after { content: "▾"; margin-left: 8px; color: var(--color-text-light); }
.m-acc.open > .m-acc-head::after { content: "▴"; }
.m-acc-count { margin-left: auto; color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.m-acc-all {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    color: var(--color-primary-hover);
    font-size: 13px;
    font-weight: 600;
}
@media (max-width: 1023.98px) {   /* bp mobile */
    .m-acc > .m-acc-head { margin-bottom: 8px; }
    .m-acc:not(.open) > :not(.m-acc-head) { display: none !important; }
}

/* ============================================
   PANNEAU BAS — mobile (.sheet-modal, SPEC-socle S18)
   Modale ancree en bas d'ecran sous 1024 px, centree au-dessus.
   dbc.Modal : className="sheet-modal" (montant du pari) ;
   dmc.Modal : SHEET_MODAL (profile/layout_helpers.py) = classe + zIndex au-dessus
   de la barre d'app (1000).
   ============================================ */
@media (max-width: 1023.98px) {   /* bp mobile */
    .sheet-modal .modal-dialog {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: none;
        margin: 0;
    }
    .sheet-modal .modal-content { border-radius: 16px 16px 0 0; }
    .sheet-modal .modal-footer .btn { flex: 1; min-height: 44px; }
    .sheet-modal .mantine-Modal-inner {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .sheet-modal .mantine-Modal-content {
        flex: 1 1 100% !important;
        max-width: none !important;
        max-height: 85vh;
        border-radius: 16px 16px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sheet-modal .mantine-Button-root { width: 100%; min-height: 44px; }
}

/* ============================================
   LIGNES DE REGLAGES (.sr-*, components/settings_rows.py)
   Groupe titre + carte de lignes de 46 px ; profil mobile.
   ============================================ */
.sr-title {
    margin: 14px 0 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sr-group {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
}
.sr-row, .sr-row:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--color-border-light);
    background: transparent;
    color: var(--color-text-primary) !important;
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
}
.sr-row:last-child { border-bottom: 0; }
.sr-row.act { cursor: pointer; }
.sr-row.act:active { background: var(--overlay-hover); }
.sr-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sr-chev { color: var(--color-text-light); font-size: 16px; }
.sr-row.danger { color: var(--color-danger-text) !important; }
.sr-row.success { color: var(--color-success-text) !important; }
.sr-row.warning { color: var(--color-warning-text) !important; }

/* ============================================
   OFFRE PREMIUM (.po-*, components/premium_offer.py)
   Comparatif Gratuit / Premium et paire d'offres : page /premium et
   section tarifs de la landing (rendus mobiles).
   ============================================ */
.po-cmp {
    width: 100%;
    margin-bottom: 12px;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
    font-size: 12.5px;
}
.po-cmp th {
    padding: 8px 6px;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.po-cmp td { padding: 7px 6px; border-top: 1px solid var(--color-border-light); text-align: center; }
.po-cmp td.po-feat { color: var(--color-text-secondary); text-align: left; }
.po-yes { color: var(--color-success-text); font-weight: 700; }
.po-no { color: var(--color-text-light); }
.po-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.po-plan {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-surface);
}
.po-plan.featured { border: 2px solid var(--color-warning); }
.po-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.po-name {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.po-plan.featured .po-name { color: var(--color-warning-text); }
.po-save {
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--color-success-subtle);
    color: var(--color-success-text);
    font-size: 10.5px;
    font-weight: 700;
}
.po-price {
    color: var(--color-text-primary);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.po-note { margin-bottom: 8px; color: var(--color-text-muted); font-size: 12px; }
.po-soon, .po-btn, .po-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: auto;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.po-soon { border: 1px dashed var(--color-border-strong); color: var(--color-warning-text); }
.po-btn { background: var(--color-warning); color: var(--color-warning-subtle) !important; }
.po-btn.ghost { border: 1px solid rgba(var(--color-warning-rgb), 0.5); background: transparent; color: var(--color-warning-text) !important; }