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

.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); }
}

/* 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.
   ============================================ */

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

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

/* 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-primary-hover);
}
.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) > .mfilters-body { display: none; }
    .mfilters.open > .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; }

/* ============================================
   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-primary); }
.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-primary-hover); }
.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-primary); color: var(--color-text-primary) !important; }
.po-btn.ghost { border: 1px solid var(--color-border-strong); background: transparent; }