/* ============================================================
   Zugzwang — Global Styles
   Design system : slate + forest (esprit echiquier classique)
   Typo : IBM Plex Sans (UI) + IBM Plex Mono (chiffres) + IBM Plex Serif (titres)
   ============================================================ */

/* --- Design tokens ----------------------------------------- */

:root {
    /* Slate (neutres) */
    --bg:            #eef0f2;
    --surface:       #ffffff;
    --surface-2:     #f7f8f9;
    --surface-3:     #eceef1;
    --ink:           #1a1f24;
    --ink-2:         #3a434d;
    --ink-mute:      #6b7480;
    --ink-faint:     #9aa3ad;
    --border:        #d6dae0;
    --border-2:      #e4e7eb;
    --border-strong: #b8bec6;

    /* Forest (accent principal) */
    --forest:        #1f4d3a;
    --forest-2:      #2a6647;
    --forest-3:      #3d8a66;
    --forest-bg:     #e8f0eb;
    --forest-ink:    #0f3325;

    /* Status */
    --gold:    #b08542;
    --gold-bg: #f6efde;
    --red:     #a23b2c;
    --red-bg:  #f5e2de;
    --blue:    #34618a;
    --blue-bg: #e3ecf3;

    /* Fonts */
    --font-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', 'Consolas', monospace;
    --font-serif: 'IBM Plex Serif', ui-serif, Georgia, serif;

    /* Densite (compact unique) */
    --row-h:   30px;
    --row-pad: 8px;
    --gap:     12px;
    --radius:    2px;
    --radius-lg: 4px;

    /* Type scale */
    --fs-xs:  11px;
    --fs-sm:  12px;
    --fs-md:  13px;
    --fs-lg:  15px;
    --fs-xl:  18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;

    /* Shell dimensions */
    --sidebar-w: 200px;
    --topbar-h:  48px;
}

/* --- Reset & Base ------------------------------------------ */

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    height: 100%;
    overflow: hidden;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01';
}

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }

/* --- MudBlazor variables overrides ------------------------- */
/* On re-map les variables MudBlazor sur nos tokens pour que les
   composants Mud heritent automatiquement de la nouvelle palette. */

.mud-theme-provider,
:root {
    --mud-palette-primary: var(--forest);
    --mud-palette-primary-rgb: 31, 77, 58;
    --mud-palette-primary-darken: var(--forest-ink);
    --mud-palette-primary-lighten: var(--forest-3);
    --mud-palette-primary-hover: var(--forest-bg);
    --mud-palette-primary-text: #ffffff;

    --mud-palette-background: var(--bg);
    --mud-palette-background-grey: var(--bg);
    --mud-palette-surface: var(--surface);

    --mud-palette-text-primary: var(--ink);
    --mud-palette-text-secondary: var(--ink-mute);
    --mud-palette-text-disabled: var(--ink-faint);

    --mud-palette-lines-default: var(--border);
    --mud-palette-lines-inputs: var(--border-strong);
    --mud-palette-table-lines: var(--border-2);
    --mud-palette-table-striped: var(--surface-2);
    --mud-palette-table-hover: var(--surface-2);

    --mud-palette-action-default: var(--ink-2);
    --mud-palette-action-default-hover: rgba(31, 77, 58, 0.06);

    --mud-palette-appbar-background: var(--surface);
    --mud-palette-appbar-text: var(--ink);
    --mud-palette-drawer-background: var(--surface);
    --mud-palette-drawer-text: var(--ink-2);
    --mud-palette-drawer-icon: var(--ink-mute);

    --mud-default-borderradius: 2px;

    --mud-typography-default-family: var(--font-sans);
    --mud-typography-h1-family: var(--font-serif);
    --mud-typography-h2-family: var(--font-serif);
    --mud-typography-h3-family: var(--font-serif);
    --mud-typography-h4-family: var(--font-serif);
    --mud-typography-h5-family: var(--font-serif);
    --mud-typography-h6-family: var(--font-sans);
}

/* --- AppBar (claire, slim) --------------------------------- */

.mud-appbar {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
}

.mud-appbar.mud-appbar-dense {
    min-height: var(--topbar-h) !important;
    height: var(--topbar-h);
}

.mud-appbar .mud-typography-h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
}

/* --- Drawer (sidebar) -------------------------------------- */

.mud-drawer {
    background-color: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
}

.mud-drawer .mud-drawer-content {
    background-color: var(--surface) !important;
}

.mud-nav-link.active {
    background-color: var(--forest-bg) !important;
    color: var(--forest-ink) !important;
    border-radius: var(--radius);
    font-weight: 500;
}

.mud-nav-link:hover:not(.active) {
    background-color: var(--surface-3) !important;
    color: var(--ink) !important;
    border-radius: var(--radius);
}

/* --- Buttons (sobres, rectangulaires, format unique) -------
   IMPORTANT : on exclut .mud-icon-button et .mud-switch-base de
   ces regles. Sinon, comme MudBlazor applique aussi la classe
   .mud-button-root sur les MudIconButton (et sur le switch-base
   interne du MudSwitch), notre min-height/padding casse la
   geometrie : thumb du switch trop gros, +/- du NumericField
   decales. */
.mud-button-root:not(.mud-icon-button):not(.mud-switch-base) {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius) !important;
    min-height: 28px !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
    transition: background 0.1s ease, border-color 0.1s ease;
}

/* Icon-buttons : on garde leur taille native MudBlazor (12px padding),
   on enleve juste l'ombre et on aligne la couleur. */
.mud-icon-button {
    box-shadow: none !important;
    text-transform: none !important;
}

/* Compactage des +/- du MudNumericField.
   DOM verifie : les spinners sont des MudButton (mud-button-root +
   mud-button-text), pas des MudIconButton. Le container est
   .mud-input-numeric-spin.

   ATTENTION SPECIFICITE : mon override generique
   .mud-button-root:not(.mud-icon-button):not(.mud-switch-base) a une
   specificite de 0,3,0 (chaque :not() comptant 1 classe). Mon sel ecteur
   pour le spin doit donc atteindre au moins 0,4,0 pour gagner. */
.mud-input-control .mud-input-numeric-spin .mud-button-root.mud-button {
    min-height: 0 !important;
    padding: 2px 4px !important;
    height: auto !important;
    border-radius: 0 !important;
}
.mud-input-control .mud-input-numeric-spin .mud-button-root.mud-button .mud-icon-root,
.mud-input-control .mud-input-numeric-spin .mud-button-root.mud-button svg {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}
.mud-input-control .mud-input-numeric-spin {
    display: inline-flex !important;
    flex-direction: column !important;
    align-self: center !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
}

.mud-button-root.mud-button-filled-primary {
    background-color: var(--forest) !important;
    color: #ffffff !important;
    border: 1px solid var(--forest) !important;
}
.mud-button-root.mud-button-filled-primary:hover {
    background-color: var(--forest-2) !important;
    border-color: var(--forest-2) !important;
}

.mud-button-root.mud-button-outlined {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--border-strong) !important;
}
.mud-button-root.mud-button-outlined:hover {
    background-color: var(--surface-2) !important;
}

.mud-button-root.mud-button-text {
    background-color: transparent !important;
    color: var(--ink-2) !important;
}
.mud-button-root.mud-button-text:hover {
    background-color: var(--surface-3) !important;
}

.mud-button-root .mud-button-label {
    text-transform: none !important;
}

.mud-button:active {
    transform: scale(0.98) !important;
}

/* Boutons larges */
.mud-button-root.mud-size-large {
    min-height: 34px !important;
    padding: 0 16px !important;
    font-size: var(--fs-lg) !important;
}
.mud-button-root.mud-size-small {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: var(--fs-sm) !important;
}

/* Icon buttons */
.mud-icon-button {
    border-radius: var(--radius) !important;
    transition: background 0.1s ease;
}
.mud-icon-button:hover {
    background-color: var(--surface-3) !important;
}
.mud-icon-button:active {
    transform: scale(0.95) !important;
}

/* --- Inputs (28px, radius 2px) ----------------------------- */

.mud-input,
.mud-input-control,
.mud-select {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-md) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius) !important;
    border-color: var(--border-strong) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ink-mute) !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--forest) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 2px var(--forest-bg);
}

.mud-input-label-outlined {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-md) !important;
}

/* --- Switch (pilule, accent forest) ------------------------ */
/* Track : pilule pleinement arrondie (notre --mud-default-borderradius: 2px
   se propagerait sinon a la track, ce qui la rend carree). */
.mud-switch .mud-switch-track {
    border-radius: 999px !important;
    background-color: var(--ink-faint) !important;
    opacity: 0.45 !important;
    border: 0 !important;
}
.mud-switch.mud-checked .mud-switch-track,
.mud-switch .mud-checked + .mud-switch-track {
    background-color: var(--forest) !important;
    opacity: 0.45 !important;
}

/* Thumb : cercle parfait, ombre sobre */
.mud-switch .mud-switch-thumb,
.mud-switch .mud-icon-button .mud-switch-thumb {
    border-radius: 50% !important;
    background-color: var(--surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.mud-switch.mud-checked .mud-switch-thumb {
    background-color: var(--forest) !important;
}

/* Le bouton sous-jacent (zone clic) ne doit pas voir son hover apparaitre
   en carre teinte ; on neutralise. */
.mud-switch .mud-icon-button {
    background-color: transparent !important;
}
.mud-switch .mud-icon-button:hover {
    background-color: rgba(31, 77, 58, 0.06) !important;
    border-radius: 50% !important;
}

/* Switch : forcer le label.mud-switch a clusteriser ses enfants au debut,
   au lieu du justify-content:space-between que MudBlazor 9.2 pose via la
   classe mud-input-content-placement-end. Le selecteur label.mud-switch
   evite de matcher le span.mud-typography.mud-switch qui porte aussi la
   classe (verifie dans le DOM). */
label.mud-switch {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 12px !important;
    width: auto !important;
    max-width: max-content !important;
}
label.mud-switch > .mud-typography {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--fs-md);
    color: var(--ink);
}

/* --- Checkbox : meme principe sur la racine label.mud-checkbox */
label.mud-checkbox {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 6px !important;
    width: auto !important;
    max-width: max-content !important;
}
label.mud-checkbox > .mud-typography {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--fs-md);
    color: var(--ink);
}
.mud-checkbox .mud-checkbox-icon {
    border-radius: var(--radius);
}

/* --- Cards / Papers (radius 4, bord fin) ------------------- */

.mud-card,
.mud-paper {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border);
    box-shadow: none !important;
    background-color: var(--surface);
}

/* Annulation du lift au hover (incompatible look sobre) */
.mud-card:hover,
.mud-paper.hover-lift:hover {
    transform: none !important;
    box-shadow: none !important;
}

.mud-card-header {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-2);
}
.mud-card-content {
    padding: 12px 14px !important;
}

/* --- Tables (compact 30px lignes) -------------------------- */

.mud-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none !important;
}

.mud-table .mud-table-head .mud-table-cell {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: var(--fs-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-mute) !important;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border) !important;
    padding: 6px 10px !important;
    height: 28px;
}

.mud-table-body .mud-table-row .mud-table-cell {
    font-size: var(--fs-md);
    padding: 0 10px !important;
    height: var(--row-h);
    border-bottom: 1px solid var(--border-2) !important;
}

.mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: var(--surface-2) !important;
}

.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.mud-table-pagination {
    border-top: 1px solid var(--border-2);
    background: var(--surface-2);
    font-size: var(--fs-sm);
}

/* --- Page header (sobre, sans gradient) -------------------- */

.page-header {
    background: transparent;
    border-radius: 0;
    padding: 0 0 16px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-2);
    gap: 16px;
}

.page-header h4,
.page-header h5,
.page-header .mud-typography-h4,
.page-header .mud-typography-h5 {
    font-family: var(--font-serif) !important;
    color: var(--ink) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
}

.page-header .mud-typography-body2,
.page-header .mud-typography-subtitle1,
.page-header .header-subtitle {
    color: var(--ink-mute) !important;
}

.page-header .mud-icon-root {
    color: var(--ink-mute);
}

.page-eyebrow {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    font-weight: 500;
}

/* --- Stat tile --------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-width: 0;
}
.stat .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.stat .v { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; color: var(--ink); margin-top: 2px; }
.stat .d { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 2px; }
.stat .d.up { color: var(--forest-2); }

/* --- Chips / Badges ---------------------------------------- */

.mud-chip {
    border-radius: var(--radius) !important;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    height: 18px;
    padding: 0 6px !important;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius);
    font-size: 10.5px;
    font-weight: 500;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-3);
    color: var(--ink-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.chip.live { background: var(--forest); color: white; border-color: var(--forest); }
.chip.live::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    animation: pulse 1.4s infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }
.chip.draft { background: var(--surface-3); color: var(--ink-mute); }
.chip.done { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.chip.gold { background: var(--gold-bg); color: var(--gold); border-color: transparent; }
.chip.red { background: var(--red-bg); color: var(--red); border-color: transparent; }

/* --- Dialog ------------------------------------------------ */

.mud-dialog {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

.mud-dialog .mud-dialog-title {
    padding: 14px 20px 10px !important;
    border-bottom: 1px solid var(--border-2);
    font-family: var(--font-serif) !important;
    font-size: var(--fs-xl) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mud-dialog .mud-dialog-content {
    padding: 14px 20px !important;
    font-size: var(--fs-md);
}

.mud-dialog .mud-dialog-actions {
    padding: 10px 20px 12px !important;
    border-top: 1px solid var(--border-2);
    background: var(--surface-2);
}

/* --- Tabs (underline forest) ------------------------------- */

.mud-tabs {
    background: transparent;
}

.mud-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: 0;
    font-size: var(--fs-md);
    min-height: 36px;
    padding: 0 14px;
    color: var(--ink-2) !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 500;
    color: var(--forest-ink) !important;
}

.mud-tabs .mud-tab-slider {
    height: 2px;
    border-radius: 0;
    background-color: var(--forest) !important;
}

/* --- Snackbar ---------------------------------------------- */

.mud-snackbar {
    border-radius: var(--radius-lg) !important;
    font-weight: 500;
    font-size: var(--fs-md);
}

/* --- Tooltip ----------------------------------------------- */

.mud-tooltip {
    border-radius: var(--radius) !important;
    font-size: var(--fs-sm) !important;
    padding: 4px 8px !important;
    background-color: var(--ink) !important;
    color: var(--surface) !important;
}

/* --- Progress bar ------------------------------------------ */

.mud-progress-linear {
    height: 4px !important;
    border-radius: 2px !important;
    background-color: var(--surface-3) !important;
}

.mud-progress-linear-bar {
    background-color: var(--forest) !important;
}

/* --- Scrollbar custom (Webkit) ----------------------------- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 5px;
    border: 2px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-strong);
}

/* --- Page fade-in animation -------------------------------- */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mud-main-content > * {
    animation: fadeInUp 200ms ease-out;
}

/* --- Empty state ------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
    color: var(--ink-mute);
}
.empty-state .mud-icon-root {
    font-size: 48px !important;
    opacity: 0.25;
    margin-bottom: 12px;
}

/* --- Score & numeric cells --------------------------------- */

.score-cell {
    font-family: var(--font-mono);
    font-weight: 500;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.board-number {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink-mute);
}

.col-numeric {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --- Status ------------------------------------------------ */

.status-active    { color: var(--forest-2); }
.status-withdrawn { color: var(--red); }
.status-completed { color: var(--blue); }

/* --- Elo par niveau (re-couleur) --------------------------- */

.elo-master { color: var(--red); font-weight: 600; }      /* 2200+ */
.elo-expert { color: var(--gold); font-weight: 600; }     /* 2000-2199 */
.elo-strong { color: var(--forest); font-weight: 500; }   /* 1800-1999 */

/* --- Titres FIDE ------------------------------------------- */

.title-gm { color: var(--red); font-weight: 600; }
.title-im { color: var(--gold); font-weight: 600; }
.title-fm { color: var(--forest); font-weight: 500; }
.title-cm { color: var(--ink-mute); font-weight: 500; }
.title-wgm, .title-wim, .title-wfm, .title-wcm { font-style: italic; }

/* --- Resultats de parties ---------------------------------- */

.result-win  { color: var(--forest-2); font-weight: 600; }
.result-loss { color: var(--red); }
.result-draw { color: var(--ink-mute); font-weight: 500; }

/* --- Table compacte (override pour densite extreme) -------- */

.compact-table .mud-table-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.3 !important;
}
.compact-table .mud-table-row {
    height: auto !important;
}

/* --- Echiquier mark (signature graphique) ------------------ */

.echi {
    display: inline-grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 18px;
    height: 18px;
    border: 0.5px solid currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}
.echi i { display: block; }
.echi i:nth-child(odd):nth-child(-n+4),
.echi i:nth-child(even):nth-child(n+5):nth-child(-n+8),
.echi i:nth-child(odd):nth-child(n+9):nth-child(-n+12),
.echi i:nth-child(even):nth-child(n+13) {
    background: currentColor;
}

/* --- Brand mark (logo 4 cases) ----------------------------- */

.brand-mark {
    width: 22px;
    height: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid var(--ink);
    flex-shrink: 0;
}
.brand-mark span:nth-child(1),
.brand-mark span:nth-child(4) { background: var(--ink); }

/* --- Card header (shell) ----------------------------------- */

.card-h {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-2);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-md);
}
.card-h .ttl { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.card-h .sub { color: var(--ink-mute); font-size: var(--fs-sm); }
.card-h .right { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.card-b { padding: 12px 14px; }
.card-b.flush { padding: 0; }

/* --- Rounds selector --------------------------------------- */

.rounds {
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
.rounds .r {
    min-width: 28px;
    height: 26px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ink-mute);
    border-right: 1px solid var(--border-2);
    cursor: pointer;
    padding: 0 8px;
    user-select: none;
}
.rounds .r:last-child { border-right: 0; }
.rounds .r:hover { background: var(--surface-2); color: var(--ink); }
.rounds .r.done { color: var(--ink-2); background: var(--surface-2); }
.rounds .r.active { background: var(--forest); color: white; font-weight: 600; }
.rounds .r.pending { color: var(--ink-faint); }

/* --- Pairing card ------------------------------------------ */

.pair {
    display: grid;
    grid-template-columns: 36px 1fr 70px 1fr 28px;
    align-items: center;
    height: var(--row-h);
    border-bottom: 1px solid var(--border-2);
    font-size: var(--fs-md);
}
.pair:last-child { border-bottom: 0; }
.pair:hover { background: var(--surface-2); }
.pair .bd {
    font-family: var(--font-mono);
    text-align: center;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.pair .p { padding: 0 8px; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; }
.pair .p.w { padding-left: 12px; }
.pair .result {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    text-align: center;
    color: var(--ink);
    font-weight: 500;
}

.pc {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
}
.pc.w { background: white; }
.pc.b { background: var(--ink); border-color: var(--ink); }

/* --- Player row (compact) ---------------------------------- */

.plr {
    display: grid;
    grid-template-columns: 32px 1fr 70px 60px 80px 60px;
    align-items: center;
    height: var(--row-h);
    padding: 0 10px;
    border-bottom: 1px solid var(--border-2);
    font-size: var(--fs-md);
}
.plr:hover { background: var(--surface-2); }
.plr .rk { font-family: var(--font-mono); color: var(--ink-mute); font-size: var(--fs-sm); }
.plr .nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plr .nm .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plr .nm .club { color: var(--ink-mute); font-size: var(--fs-sm); }
.plr .elo { font-family: var(--font-mono); text-align: right; }
.plr .fed { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-mute); }
.plr .pts { font-family: var(--font-mono); text-align: right; font-weight: 500; }
.plr .tb { font-family: var(--font-mono); text-align: right; color: var(--ink-mute); font-size: var(--fs-sm); }

/* --- Steps / wizard ---------------------------------------- */

.steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
}
.step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
    position: relative;
}
.step .n {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--ink-mute);
    font-family: var(--font-mono);
    font-size: 11px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
}
.step.active { color: var(--ink); font-weight: 500; }
.step.active .n { background: var(--forest); color: white; border-color: var(--forest); }
.step.done .n { background: var(--forest-bg); color: var(--forest); border-color: var(--forest-3); }
.step + .step::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--border);
    margin-right: 8px;
}

/* --- Score grid (saisie resultats) ------------------------- */

.score-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.score-btn {
    height: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    cursor: pointer;
    border-radius: var(--radius);
    color: var(--ink);
    transition: background 0.1s ease;
}
.score-btn:hover { background: var(--surface-2); }
.score-btn.active { background: var(--forest); color: white; border-color: var(--forest); }

/* --- Misc helpers ------------------------------------------ */

.divider { height: 1px; background: var(--border-2); margin: 8px 0; border: 0; }
.vsep { width: 1px; background: var(--border); align-self: stretch; margin: 4px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }

/* Anchor nav (formulaires longs) */
.anchor-nav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    font-size: var(--fs-md);
}
.anchor-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    color: var(--ink-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    cursor: pointer;
}
.anchor-nav a:hover { background: var(--surface-3); color: var(--ink); }
.anchor-nav a.active {
    color: var(--forest-ink);
    border-left-color: var(--forest);
    background: var(--forest-bg);
    font-weight: 500;
}

/* Section heading (formulaires) */
.section-h {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-2);
}

/* =========================================================
   Saisie des resultats : header + grille de cartes
   ========================================================= */
.result-entry-header {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}
.result-entry-line1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.result-entry-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.shortcuts-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-mute);
    font-size: var(--fs-xs);
}
.shortcuts-hint strong {
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
    color: var(--ink);
}

.pairing-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
    outline: none;
}

.pairing-card {
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    transition: border-color .12s, box-shadow .12s;
    outline: none;
}
.pairing-card:hover {
    border-color: var(--mud-palette-primary);
}
.pairing-card.is-focused {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.pairing-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pairing-card-header .board-label {
    font-size: var(--fs-sm, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pairing-card-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.player-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.player-side.player-black {
    justify-content: flex-end;
}
.player-info {
    min-width: 0;
}
.player-info .player-name {
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-info .player-elo {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}
.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-2);
}
.color-dot-white { background: #ffffff; }
.color-dot-black { background: #1f1f1f; border-color: #1f1f1f; }
.vs-label {
    font-size: var(--fs-xs);
    color: var(--ink-mute);
    text-transform: lowercase;
    font-style: italic;
}

.result-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.result-btn {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.result-display {
    padding: 8px 0;
}

.team-match-header {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-2);
}
