/*
 * LIGHT-THEME.CSS — datinumeridelcalcio.it
 * Override completo per tema chiaro (body.bg-slate-50)
 * Riscritto: maggio 2026 — nuova palette con gerarchia visiva
 *
 * PALETTE:
 *   Body/page bg:        #eef1f6  (grigio chiaro-blu)
 *   Navigation/header:   #c0c6d2  (grigio medio, distinguibile)
 *   Sidebar:             #cdd2dc
 *   bg-slate-950/900:    #d4d9e2  (superfici scure → grigio medio-scuro)
 *   bg-slate-800:        #dde2ea  (pannelli, card)
 *   bg-slate-700:        #e4e8f0  (pannelli secondari)
 *   Semi-trasparenti:    #e8ecf3
 *   bg-slate-600-:       #edf0f7
 *   Form inputs:         #f3f5fa  bordo #b8c0ce
 *   Table bg:            #e8ecf3
 *   Table thead:         #cbd1dc
 *   Table row even:      #e0e5ee
 *   Table row hover:     #d5dbe6
 *   Bordi principali:    #b8c0ce
 *   Bordi leggeri:       #c8d0da
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKEN — fonte UNICA dei colori per tema (29 Mag 2026, #14)
   Foundation per superare la frammentazione (4 selettori tema + 1116 !important).
   I NUOVI componenti e i refactor devono usare var(--ndc-*) invece di hex fissi.
   Il tema attivo è scelto da accessibility.js: body.bg-slate-50 (chiaro) /
   bg-slate-900 (scuro, default) / bg-black (nero).
   ═══════════════════════════════════════════════════════════════ */
:root {                         /* TEMA SCURO (default) */
    --ndc-bg-page:    #0f172a;
    --ndc-bg-panel:   #1e293b;
    --ndc-bg-elev:    #334155;
    --ndc-text:       #e2e8f0;  /* testo primario */
    --ndc-text-2:     #94a3b8;  /* testo secondario */
    --ndc-border:     #334155;
    --ndc-accent:     #3b82f6;
    --ndc-accent-ct:  #ffffff;  /* testo su accent */
    --ndc-positive:   #22c55e;
    --ndc-negative:   #ef4444;
    --ndc-warn:       #fbbf24;  /* ambra: asterischi e avvisi (19 ago 2026) */
}
body.bg-slate-50 {              /* TEMA CHIARO */
    --ndc-bg-page:    #eef1f6;
    --ndc-bg-panel:   #dde2ea;
    --ndc-bg-elev:    #e8ecf3;
    --ndc-text:       #1e293b;
    --ndc-text-2:     #475569;  /* secondario leggibile AA */
    --ndc-border:     #b8c0ce;
    --ndc-accent:     #2563eb;
    --ndc-accent-ct:  #ffffff;
    --ndc-positive:   #15803d;
    --ndc-negative:   #b91c1c;
    --ndc-warn:       #b45309;  /* l'ambra chiara su fondo bianco non si legge */
}
body.bg-black {                 /* TEMA NERO */
    --ndc-bg-page:    #000000;
    --ndc-bg-panel:   #111111;
    --ndc-bg-elev:    #1a1a1a;
    --ndc-text:       #f1f5f9;
    --ndc-text-2:     #a3a3a3;
    --ndc-border:     #262626;
    --ndc-accent:     #3b82f6;
    --ndc-accent-ct:  #ffffff;
    --ndc-positive:   #22c55e;
    --ndc-negative:   #f87171;
    --ndc-warn:       #fbbf24;
}

/* Accessibilità: rispetta la preferenza di sistema "riduci animazioni" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GUARDIA UNIVERSALE — nessun testo bianco in light mode
   ═══════════════════════════════════════════════════════════════ */

/* Testi chiari su sfondi diventati chiari — testo PRIMARIO scuro */
body.bg-slate-50 .text-white,
body.bg-slate-50 [class^="text-slate-1"],
body.bg-slate-50 [class*=" text-slate-1"],
body.bg-slate-50 [class^="text-slate-2"],
body.bg-slate-50 [class*=" text-slate-2"],
body.bg-slate-50 [class^="text-slate-3"],
body.bg-slate-50 [class*=" text-slate-3"] { color: #1e293b !important; }

/* Testo SECONDARIO chiaro (slate/gray 400-500): grigio scuro leggibile (AA).
   Esteso il 29 Mag perché la guardia si fermava a -300, lasciando il testo
   secondario (text-slate-400/500) illeggibile su pagine che non caricano
   gli altri CSS (es. record/index.html). Protegge OGNI pagina in tema chiaro. */
body.bg-slate-50 [class^="text-slate-4"],
body.bg-slate-50 [class*=" text-slate-4"],
body.bg-slate-50 [class^="text-slate-5"],
body.bg-slate-50 [class*=" text-slate-5"],
body.bg-slate-50 [class^="text-gray-4"],
body.bg-slate-50 [class*=" text-gray-4"],
body.bg-slate-50 [class^="text-gray-5"],
body.bg-slate-50 [class*=" text-gray-5"] { color: #475569 !important; }

/* Catch-all per inline style color:white / color:#fff */
body.bg-slate-50 [style*="color: white"],
body.bg-slate-50 [style*="color:white"],
body.bg-slate-50 [style*="color: #fff"],
body.bg-slate-50 [style*="color:#fff"],
body.bg-slate-50 [style*="color: rgb(255, 255, 255)"] { color: #1e293b !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   🔴 LE SUPERFICI CHE SONO SCURE IN OGNI TEMA — l'eccezione al catch-all qui sopra
   ═══════════════════════════════════════════════════════════════════════════════
   Verificato il 20 agosto 2026 sulla guida della Scheda Partita: in tema chiaro il
   testo del pannello usciva `rgb(15,23,42)` **su fondo `#0f172a`** — nero su nero.
   Non era un colore dimenticato: era il catch-all qui sopra che, giustamente, spegne
   ogni `color:#fff` inline perche' su una pagina chiara sarebbe invisibile.
   ★ Ma alcune superfici restano SCURE anche in tema chiaro, perche' sono pannelli a
     se': la lavagna tattica (un campo verde su fondo notte), le guide passo passo, i
     cartellini degli strumenti. Li' il bianco e' giusto, ed e' il catch-all a dover
     fare un passo indietro.
   ⚠️ Si elencano per NOME, uno per uno: un'eccezione larga («tutti i pannelli scuri»)
      non si puo' scrivere, perche' «scuro» non e' una cosa che il CSS sappia vedere.
      Chi aggiunge un pannello scuro nuovo aggiunge la sua riga qui. */
body.bg-slate-50 #ndc-lav-pannello [style*="color: white"],
body.bg-slate-50 #ndc-lav-pannello [style*="color:white"],
body.bg-slate-50 #ndc-lav-pannello [style*="color: #fff"],
body.bg-slate-50 #ndc-lav-pannello [style*="color:#fff"],
body.bg-slate-50 #ndc-lav-aiuto [style*="color:#fff"],
body.bg-slate-50 #ndc-lav-aiuto [style*="color: #fff"],
body.bg-slate-50 #ndc-lav-panca [style*="color:#fff"],
body.bg-slate-50 #ndc-lav-panca [style*="color: #fff"],
body.bg-slate-50 #sp-guida [style*="color:#fff"],
body.bg-slate-50 #sp-guida [style*="color: #fff"],
body.bg-slate-50 #ndc-guida-card [style*="color:#fff"],
body.bg-slate-50 #ndc-guida-card [style*="color: #fff"] { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   ★★★ LA REGOLA MADRE — FONDO SCURO, CARATTERE CHIARO · FONDO CHIARO, CARATTERE SCURO
   ═══════════════════════════════════════════════════════════════════════════════
   Fabio, 13 settembre 2026: «la regola deve essere chiara ed elementare: fondo scuro
   carattere chiaro e viceversa — la regola madre e inalienabile di tutto il progetto,
   che vale per tutti e due i temi». Il caso: il tab «Per torneo» nella scheda di un
   avversario della Nazionale, fondo azzurro #1f4fa3 e testo NERO, perché
   `body.bg-slate-50 .font-bold { color:#000 !important }` (0,2,1) batteva il bianco.
 ★ Il CSS non sa vedere se un fondo è scuro: lo DICHIARA chi disegna l'elemento.
     · `ndc-su-scuro`  — il fondo resta scuro in OGNI tema (azzurro attivo, colore di squadra,
                          pannello notte): carattere bianco, in tutti e due i temi;
     · `ndc-su-chiaro` — il fondo resta chiaro in ogni tema (ambra, bianco pieno): carattere scuro.
 ★ Senza prefisso di tema, e con peso (0,2,2): batte i catch-all del tema chiaro (0,2,1).
 ⚠️ Chi aggiunge un fondo pieno che non cambia col tema mette una di queste due classi:
    niente liste di id, niente `color:#fff` inline sperando che regga. Il controllo è
    `admin/scripts/audit_contrasto.js`, nei DUE temi. Indice: `DOCS/REGOLE.md` §0. */
html body .ndc-su-scuro.ndc-su-scuro,
html body .ndc-su-scuro.ndc-su-scuro * { color: #ffffff !important; }
/* 🔴 14/09/2026 — il bottone «Social» ha il fondo a GRADIENTE (arancio-magenta, il marchio di Instagram) in tutti e due
     i temi: il catch-all dei bottoni del tema chiaro gli dava il grigio #4a5568 (contrasto ~1,6), e la guardia non lo
     vede perché i gradienti li salta. Si dichiara qui, come fondo che resta scuro: in tutte le card della Redazione. */
html body .ndc-social.ndc-social,
html body .ndc-social.ndc-social * { color: #ffffff !important; }
html body .ndc-su-chiaro.ndc-su-chiaro,
html body .ndc-su-chiaro.ndc-su-chiaro * { color: #0f172a !important; }

/* 🔴🔴★★★ 4 settembre 2026 — LE PASTIGLIE DEI GIOCATORI SUL CAMPO.
   Nel tabellino di una partita, in tema chiaro, i nomi uscivano **neri sul granata
   della Roma**: contrasto 2,39, illeggibili. La pastiglia porta il colore della
   squadra nel suo `style` e il testo bianco — che e' giusto — ma tre regole
   importanti la colpiscono tutte con peso (0,2,1), e vince l'ultima:
   `body.bg-slate-50 .font-bold { color: #000 }`. Il colore della SQUADRA non lo
   sceglie il tema, e su un fondo di squadra il bianco resta bianco.
 ★ E' esattamente il caso che il blocco qui sopra descrive: una superficie scura
   in ogni tema. Aggiunta la sua riga, come chiede il commento. */
body.bg-slate-50 .field-3d-container [style*="color: #fff"],
body.bg-slate-50 .field-3d-container [style*="color:#fff"],
body.bg-slate-50 .field-3d-container [style*="color: white"],
body.bg-slate-50 .field-3d-container [style*="color:white"] { color: #fff !important; }

/* …e il testo che NON dichiara un colore proprio: senza questa riga eredita il nero
   del tema chiaro e sparisce sul fondo notte del pannello. */
body.bg-slate-50 #ndc-lav-pannello, body.bg-slate-50 #ndc-lav-pannello *,
body.bg-slate-50 #ndc-lav-aiuto, body.bg-slate-50 #ndc-lav-aiuto *,
body.bg-slate-50 #ndc-lav-panca, body.bg-slate-50 #ndc-lav-panca *,
body.bg-slate-50 #sp-guida, body.bg-slate-50 #sp-guida *,
body.bg-slate-50 #ndc-guida-card, body.bg-slate-50 #ndc-guida-card *,
body.bg-slate-50 .ndc-tip-istantaneo, body.bg-slate-50 .ndc-tip-istantaneo *,
body.bg-slate-50 .ndc-lav-tip, body.bg-slate-50 .ndc-lav-tip * { color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════════
   1. SFONDO BODY E TESTO BASE
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 {
    background-color: #eef1f6 !important;
    color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. SFONDI SLATE SCURI — catch-all via [class*=]
   Copre bg-slate-700..950 e TUTTE le varianti con opacità
   ═══════════════════════════════════════════════════════════════ */

/* Regola catch-all: qualsiasi elemento con classe bg-slate-7xx, 8xx, 9xx */
body.bg-slate-50 [class^="bg-slate-9"],
body.bg-slate-50 [class*=" bg-slate-9"],
body.bg-slate-50 [class^="bg-slate-8"],
body.bg-slate-50 [class*=" bg-slate-8"],
body.bg-slate-50 [class^="bg-slate-7"],
body.bg-slate-50 [class*=" bg-slate-7"] {
    background-color: #e8ecf3 !important;
}

/* Sfumature più pesanti (950/900) → grigio medio-scuro */
body.bg-slate-50 .bg-slate-950,
body.bg-slate-50 .bg-slate-900 {
    background-color: #d4d9e2 !important;
}

/* bg-slate-800 → pannelli, card */
body.bg-slate-50 .bg-slate-800 {
    background-color: #dde2ea !important;
}

/* bg-slate-700 → pannelli secondari */
body.bg-slate-50 .bg-slate-700 {
    background-color: #e4e8f0 !important;
}

/* bg-slate-600 e inferiori */
body.bg-slate-50 .bg-slate-600,
body.bg-slate-50 [class^="bg-slate-6"],
body.bg-slate-50 [class*=" bg-slate-6"],
body.bg-slate-50 [class^="bg-slate-5"],
body.bg-slate-50 [class*=" bg-slate-5"],
body.bg-slate-50 [class^="bg-slate-4"],
body.bg-slate-50 [class*=" bg-slate-4"] {
    background-color: #edf0f7 !important;
}

/* Varianti semi-trasparenti → grigio chiaro-blu */
body.bg-slate-50 .bg-slate-800\/80,
body.bg-slate-50 .bg-slate-800\/70,
body.bg-slate-50 .bg-slate-800\/60,
body.bg-slate-50 .bg-slate-800\/50,
body.bg-slate-50 .bg-slate-800\/40,
body.bg-slate-50 .bg-slate-800\/30,
body.bg-slate-50 .bg-slate-800\/20,
body.bg-slate-50 .bg-slate-900\/95,
body.bg-slate-50 .bg-slate-900\/90,
body.bg-slate-50 .bg-slate-900\/80,
body.bg-slate-50 .bg-slate-900\/60,
body.bg-slate-50 .bg-slate-900\/50,
body.bg-slate-50 .bg-slate-900\/40,
body.bg-slate-50 .bg-slate-900\/30,
body.bg-slate-50 .bg-slate-900\/20,
body.bg-slate-50 .bg-slate-700\/80,
body.bg-slate-50 .bg-slate-700\/70,
body.bg-slate-50 .bg-slate-700\/60,
body.bg-slate-50 .bg-slate-700\/50,
body.bg-slate-50 .bg-slate-700\/40,
body.bg-slate-50 .bg-slate-700\/30,
body.bg-slate-50 .bg-slate-950\/90 {
    background-color: #e8ecf3 !important;
}

/* Hover su sfondi scuri */
body.bg-slate-50 .hover\:bg-slate-700:hover,
body.bg-slate-50 .hover\:bg-slate-800:hover,
body.bg-slate-50 .hover\:bg-slate-600:hover,
body.bg-slate-50 .hover\:bg-slate-800\/40:hover,
body.bg-slate-50 .hover\:bg-slate-800\/50:hover,
body.bg-slate-50 .hover\:bg-slate-800\/80:hover {
    background-color: #d5dbe6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. SFONDI COLORATI SCURI → TINTE CHIARE EQUIVALENTI
   bg-green-900/xx, bg-red-900/xx, ecc. → pastello chiaro distinto
   ═══════════════════════════════════════════════════════════════ */

/* Verde scuro → verde pastello */
body.bg-slate-50 [class^="bg-green-9"],
body.bg-slate-50 [class*=" bg-green-9"] {
    background-color: #dcfce7 !important;
}
body.bg-slate-50 .bg-green-900\/70,
body.bg-slate-50 .bg-green-900\/50,
body.bg-slate-50 .bg-green-900\/40,
body.bg-slate-50 .bg-green-900\/30 { background-color: #f0fdf4 !important; }
body.bg-slate-50 .bg-green-900     { background-color: #dcfce7 !important; }

/* Rosso scuro → rosso pastello */
body.bg-slate-50 [class^="bg-red-9"],
body.bg-slate-50 [class*=" bg-red-9"] {
    background-color: #fee2e2 !important;
}
body.bg-slate-50 .bg-red-900\/70,
body.bg-slate-50 .bg-red-900\/50,
body.bg-slate-50 .bg-red-900\/40,
body.bg-slate-50 .bg-red-900\/30,
body.bg-slate-50 .bg-red-900\/10 { background-color: #fef2f2 !important; }
body.bg-slate-50 .bg-red-900     { background-color: #fee2e2 !important; }

/* Blu scuro → blu pastello */
body.bg-slate-50 [class^="bg-blue-9"],
body.bg-slate-50 [class*=" bg-blue-9"],
body.bg-slate-50 [class^="bg-blue-95"],
body.bg-slate-50 [class*=" bg-blue-95"] {
    background-color: #dbeafe !important;
}
body.bg-slate-50 .bg-blue-900\/60,
body.bg-slate-50 .bg-blue-900\/50,
body.bg-slate-50 .bg-blue-900\/30,
body.bg-slate-50 .bg-blue-900\/20,
body.bg-slate-50 .bg-blue-950\/60  { background-color: #eff6ff !important; }
body.bg-slate-50 .bg-blue-900      { background-color: #dbeafe !important; }

/* Amber scuro → amber pastello */
body.bg-slate-50 [class^="bg-amber-9"],
body.bg-slate-50 [class*=" bg-amber-9"] {
    background-color: #fef3c7 !important;
}
body.bg-slate-50 .bg-amber-900\/50,
body.bg-slate-50 .bg-amber-900\/30,
body.bg-slate-50 .bg-amber-900\/10 { background-color: #fffbeb !important; }

/* Orange scuro → orange pastello */
body.bg-slate-50 [class^="bg-orange-9"],
body.bg-slate-50 [class*=" bg-orange-9"] {
    background-color: #ffedd5 !important;
}
body.bg-slate-50 .bg-orange-900\/60,
body.bg-slate-50 .bg-orange-900\/50,
body.bg-slate-50 .bg-orange-900\/40,
body.bg-slate-50 .bg-orange-900\/30,
body.bg-slate-50 .bg-orange-900\/10 { background-color: #fff7ed !important; }

/* Violet scuro → violet pastello */
body.bg-slate-50 [class^="bg-violet-9"],
body.bg-slate-50 [class*=" bg-violet-9"] {
    background-color: #ede9fe !important;
}
body.bg-slate-50 .bg-violet-900\/50 { background-color: #f5f3ff !important; }

/* Cyan scuro → cyan pastello */
body.bg-slate-50 [class^="bg-cyan-9"],
body.bg-slate-50 [class*=" bg-cyan-9"] {
    background-color: #cffafe !important;
}
body.bg-slate-50 .bg-cyan-900\/50,
body.bg-slate-50 .bg-cyan-900\/40 { background-color: #ecfeff !important; }

/* Yellow scuro → yellow pastello */
body.bg-slate-50 [class^="bg-yellow-9"],
body.bg-slate-50 [class*=" bg-yellow-9"] {
    background-color: #fef9c3 !important;
}
body.bg-slate-50 .bg-yellow-900\/50,
body.bg-slate-50 .bg-yellow-900\/40 { background-color: #fefce8 !important; }

/* Pink scuro → pink pastello */
body.bg-slate-50 [class^="bg-pink-9"],
body.bg-slate-50 [class*=" bg-pink-9"] {
    background-color: #fce7f3 !important;
}
body.bg-slate-50 .bg-pink-900\/50 { background-color: #fdf2f8 !important; }

/* Indigo scuro → indigo pastello */
body.bg-slate-50 [class^="bg-indigo-9"],
body.bg-slate-50 [class*=" bg-indigo-9"] {
    background-color: #e0e7ff !important;
}
body.bg-slate-50 .bg-indigo-900\/50 { background-color: #eef2ff !important; }

/* Teal scuro → teal pastello */
body.bg-slate-50 [class^="bg-teal-9"],
body.bg-slate-50 [class*=" bg-teal-9"] {
    background-color: #ccfbf1 !important;
}
body.bg-slate-50 .bg-teal-900\/50 { background-color: #f0fdfa !important; }

/* Emerald scuro → emerald pastello */
body.bg-slate-50 [class^="bg-emerald-9"],
body.bg-slate-50 [class*=" bg-emerald-9"] {
    background-color: #d1fae5 !important;
}
body.bg-slate-50 .bg-emerald-900\/50 { background-color: #ecfdf5 !important; }

/* Sky scuro → sky pastello */
body.bg-slate-50 [class^="bg-sky-9"],
body.bg-slate-50 [class*=" bg-sky-9"] {
    background-color: #e0f2fe !important;
}
body.bg-slate-50 .bg-sky-900\/50 { background-color: #f0f9ff !important; }

/* Lime scuro → lime pastello */
body.bg-slate-50 [class^="bg-lime-9"],
body.bg-slate-50 [class*=" bg-lime-9"] {
    background-color: #ecfccb !important;
}
body.bg-slate-50 .bg-lime-900\/50 { background-color: #f7fee7 !important; }

/* Rose scuro → rose pastello */
body.bg-slate-50 [class^="bg-rose-9"],
body.bg-slate-50 [class*=" bg-rose-9"] {
    background-color: #ffe4e6 !important;
}
body.bg-slate-50 .bg-rose-900\/50 { background-color: #fff1f2 !important; }

/* ═══════════════════════════════════════════════════════════════
   4. TESTO — TUTTI I GRADI DI CHIAREZZA → LEGGIBILI SU GRIGIO
   ═══════════════════════════════════════════════════════════════ */

/* Testi quasi bianchi → quasi neri */
body.bg-slate-50 .text-slate-100 { color: #1e293b !important; }
body.bg-slate-50 .text-slate-200 { color: #1e293b !important; }
body.bg-slate-50 .text-slate-300 { color: #1e293b !important; }
body.bg-slate-50 .text-slate-400 { color: #475569 !important; }
body.bg-slate-50 .text-slate-500 { color: #5a6475 !important; }
body.bg-slate-50 .text-slate-600 { color: #475569 !important; }

/*
 * OVERRIDE CRITICO — responsive.css ha una regola con specificità (0,3,0) che
 * preserva text-white bianco dentro [class*="bg-amber-"], [class*="bg-yellow-"] ecc.
 * Quella regola è giusta per bg-amber-500 (vivido), ma SBAGLIA per bg-yellow-900/20
 * (che in light theme diventa #fef9c3 — chiarissimo: testo bianco = invisibile).
 *
 * FIX TABELLE (tr/td): specificità (0,3,1)
 */
body.bg-slate-50 tr[class^="bg-amber-"] td.text-white,
body.bg-slate-50 tr[class*=" bg-amber-"] td.text-white,
body.bg-slate-50 tr[class^="bg-amber-"] td.font-medium,
body.bg-slate-50 tr[class*=" bg-amber-"] td.font-medium,
body.bg-slate-50 tr[class^="bg-yellow-"] td.text-white,
body.bg-slate-50 tr[class*=" bg-yellow-"] td.text-white,
body.bg-slate-50 tr[class^="bg-green-"] td.text-white,
body.bg-slate-50 tr[class*=" bg-green-"] td.text-white,
body.bg-slate-50 tr[class^="bg-blue-"]  td.text-white,
body.bg-slate-50 tr[class*=" bg-blue-"]  td.text-white,
body.bg-slate-50 tr[class^="bg-red-"]   td.text-white,
body.bg-slate-50 tr[class*=" bg-red-"]   td.text-white,
body.bg-slate-50 tr[class^="bg-violet-"] td.text-white,
body.bg-slate-50 tr[class*=" bg-violet-"] td.text-white,
body.bg-slate-50 tr[class^="bg-orange-"] td.text-white,
body.bg-slate-50 tr[class*=" bg-orange-"] td.text-white,
body.bg-slate-50 tr[class^="bg-cyan-"]  td.text-white,
body.bg-slate-50 tr[class*=" bg-cyan-"]  td.text-white {
    color: #1e293b !important;
}

/* Numero posizione riga #1: amber su sfondo amber pastello */
body.bg-slate-50 tr[class^="bg-amber-"] td.text-amber-400,
body.bg-slate-50 tr[class*=" bg-amber-"] td.text-amber-400 {
    color: #92400e !important; /* amber-800 su #fffbeb */
}

/*
 * FIX CARD / DIV con sfondi colorati scuri (span, div) — specificità (0,3,1)
 */
body.bg-slate-50 [class^="bg-yellow-9"] span.text-white,
body.bg-slate-50 [class*=" bg-yellow-9"] span.text-white,
body.bg-slate-50 [class^="bg-yellow-9"] div.text-white,
body.bg-slate-50 [class*=" bg-yellow-9"] div.text-white,
body.bg-slate-50 [class^="bg-amber-9"]  span.text-white,
body.bg-slate-50 [class*=" bg-amber-9"]  span.text-white,
body.bg-slate-50 [class^="bg-amber-9"]  div.text-white,
body.bg-slate-50 [class*=" bg-amber-9"]  div.text-white,
body.bg-slate-50 [class^="bg-green-9"]  span.text-white,
body.bg-slate-50 [class*=" bg-green-9"]  span.text-white,
body.bg-slate-50 [class^="bg-green-9"]  div.text-white,
body.bg-slate-50 [class*=" bg-green-9"]  div.text-white,
body.bg-slate-50 [class^="bg-blue-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-blue-9"]   span.text-white,
body.bg-slate-50 [class^="bg-blue-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-blue-9"]   div.text-white,
body.bg-slate-50 [class^="bg-red-9"]    span.text-white,
body.bg-slate-50 [class*=" bg-red-9"]    span.text-white,
body.bg-slate-50 [class^="bg-red-9"]    div.text-white,
body.bg-slate-50 [class*=" bg-red-9"]    div.text-white,
body.bg-slate-50 [class^="bg-violet-9"] span.text-white,
body.bg-slate-50 [class*=" bg-violet-9"] span.text-white,
body.bg-slate-50 [class^="bg-violet-9"] div.text-white,
body.bg-slate-50 [class*=" bg-violet-9"] div.text-white,
body.bg-slate-50 [class^="bg-orange-9"] span.text-white,
body.bg-slate-50 [class*=" bg-orange-9"] span.text-white,
body.bg-slate-50 [class^="bg-orange-9"] div.text-white,
body.bg-slate-50 [class*=" bg-orange-9"] div.text-white,
body.bg-slate-50 [class^="bg-cyan-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-cyan-9"]   span.text-white,
body.bg-slate-50 [class^="bg-cyan-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-cyan-9"]   div.text-white,
body.bg-slate-50 [class^="bg-pink-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-pink-9"]   span.text-white,
body.bg-slate-50 [class^="bg-pink-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-pink-9"]   div.text-white,
body.bg-slate-50 [class^="bg-indigo-9"] span.text-white,
body.bg-slate-50 [class*=" bg-indigo-9"] span.text-white,
body.bg-slate-50 [class^="bg-indigo-9"] div.text-white,
body.bg-slate-50 [class*=" bg-indigo-9"] div.text-white,
body.bg-slate-50 [class^="bg-teal-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-teal-9"]   span.text-white,
body.bg-slate-50 [class^="bg-teal-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-teal-9"]   div.text-white,
body.bg-slate-50 [class^="bg-emerald-9"] span.text-white,
body.bg-slate-50 [class*=" bg-emerald-9"] span.text-white,
body.bg-slate-50 [class^="bg-emerald-9"] div.text-white,
body.bg-slate-50 [class*=" bg-emerald-9"] div.text-white,
body.bg-slate-50 [class^="bg-sky-9"]    span.text-white,
body.bg-slate-50 [class*=" bg-sky-9"]    span.text-white,
body.bg-slate-50 [class^="bg-sky-9"]    div.text-white,
body.bg-slate-50 [class*=" bg-sky-9"]    div.text-white,
body.bg-slate-50 [class^="bg-lime-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-lime-9"]   span.text-white,
body.bg-slate-50 [class^="bg-lime-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-lime-9"]   div.text-white,
body.bg-slate-50 [class^="bg-rose-9"]   span.text-white,
body.bg-slate-50 [class*=" bg-rose-9"]   span.text-white,
body.bg-slate-50 [class^="bg-rose-9"]   div.text-white,
body.bg-slate-50 [class*=" bg-rose-9"]   div.text-white {
    color: #1e293b !important;
}

/* Headings */
body.bg-slate-50 h1,
body.bg-slate-50 h2,
body.bg-slate-50 h3,
body.bg-slate-50 h4 { color: #0f172a !important; }

/* ═══════════════════════════════════════════════════════════════
   5. COLORI FUNZIONALI — PIÙ SCURI PER LEGGIBILITÀ SU GRIGIO CHIARO
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 .text-green-400,
body.bg-slate-50 .text-green-300 { color: #15803d !important; }
body.bg-slate-50 .text-green-500 { color: #166534 !important; }

body.bg-slate-50 .text-red-400,
body.bg-slate-50 .text-red-300   { color: #b91c1c !important; }
body.bg-slate-50 .text-red-500   { color: #991b1b !important; }

body.bg-slate-50 .text-amber-400,
body.bg-slate-50 .text-amber-300 { color: #92400e !important; }
body.bg-slate-50 .text-yellow-400,
body.bg-slate-50 .text-yellow-300{ color: #854d0e !important; }

body.bg-slate-50 .text-blue-400,
body.bg-slate-50 .text-blue-300  { color: #1d4ed8 !important; }
body.bg-slate-50 .text-blue-500  { color: #1e40af !important; }

body.bg-slate-50 .text-cyan-400,
body.bg-slate-50 .text-cyan-300  { color: #0e7490 !important; }

body.bg-slate-50 .text-violet-400,
body.bg-slate-50 .text-purple-400 { color: #6d28d9 !important; }

body.bg-slate-50 .text-orange-400,
body.bg-slate-50 .text-orange-300 { color: #c2410c !important; }

body.bg-slate-50 .text-pink-400  { color: #be185d !important; }

/* ═══════════════════════════════════════════════════════════════
   6. TABELLE — COMPLETO
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 table {
    background-color: #e8ecf3;
    border: 1px solid #b8c0ce;
}

body.bg-slate-50 thead,
body.bg-slate-50 thead tr {
    background-color: #cbd1dc !important;
}

body.bg-slate-50 th {
    background-color: #cbd1dc !important;
    color: #1a1a2e !important;
    border-bottom: 2px solid #b8c0ce !important;
}

body.bg-slate-50 td {
    border-bottom: 1px solid #c8d0da;
    color: #1e293b !important;
}

/* Riga pari alternata */
body.bg-slate-50 tbody tr:nth-child(even) {
    background-color: #e0e5ee;
}

body.bg-slate-50 tbody tr:hover,
body.bg-slate-50 tbody tr:hover td {
    background-color: #d5dbe6 !important;
}

/* Riga #1 (primo posto) — amber su sfondo giallo pastello */
body.bg-slate-50 .bg-amber-900\/20,
body.bg-slate-50 tr.bg-amber-900\/20 {
    background-color: #fffbeb !important;
}
/* Forza testo SCURO nelle celle della riga #1 */
body.bg-slate-50 tr.bg-amber-900\/20 td {
    color: #1e293b !important;
}
/* Mantieni il numero di posizione in amber leggibile */
body.bg-slate-50 tr.bg-amber-900\/20 td.text-amber-400 {
    color: #b45309 !important; /* amber-700 — scuro su #fffbeb */
}

/* Righe colorate dal JS (alternanza bg-slate-800/20) */
body.bg-slate-50 .bg-slate-800\/20 {
    background-color: #dde2ea !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. BORDI
   ═══════════════════════════════════════════════════════════════ */
body.bg-slate-50 [class^="border-slate-9"],
body.bg-slate-50 [class*=" border-slate-9"],
body.bg-slate-50 [class^="border-slate-8"],
body.bg-slate-50 [class*=" border-slate-8"],
body.bg-slate-50 [class^="border-slate-7"],
body.bg-slate-50 [class*=" border-slate-7"],
body.bg-slate-50 [class^="border-slate-6"],
body.bg-slate-50 [class*=" border-slate-6"] {
    border-color: #b8c0ce !important;
}

body.bg-slate-50 .border-slate-700,
body.bg-slate-50 .border-slate-600 {
    border-color: #b8c0ce !important;
}

body.bg-slate-50 .divide-slate-700 > * + *,
body.bg-slate-50 .divide-slate-800 > * + * {
    border-color: #c8d0da !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. FORM — INPUT, SELECT, TEXTAREA
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 input,
body.bg-slate-50 select,
body.bg-slate-50 textarea {
    background-color: #f3f5fa !important;
    color: #1e293b !important;
    border-color: #b8c0ce !important;
}

body.bg-slate-50 input::placeholder,
body.bg-slate-50 textarea::placeholder {
    color: #94a3b8 !important;
}

body.bg-slate-50 select option {
    background-color: #f3f5fa;
    color: #1e293b;
}

/* ═══════════════════════════════════════════════════════════════
   9. CARD / LINK NAVIGAZIONE HOME
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 a.bg-slate-800 {
    background-color: #dde2ea !important;
    border-color: #b8c0ce !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
body.bg-slate-50 a.bg-slate-800:hover {
    background-color: #d5dbe6 !important;
    border-color: #a8b2c0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
body.bg-slate-50 a.bg-slate-800 h2,
body.bg-slate-50 a.bg-slate-800 h3 { color: #0f172a !important; }
body.bg-slate-50 a.bg-slate-800 p  { color: #475569 !important; }

/* Icone vivaci nelle card home */
body.bg-slate-50 a.bg-slate-800 .text-yellow-400 { color: #92400e !important; }
body.bg-slate-50 a.bg-slate-800 .text-green-400  { color: #15803d !important; }
body.bg-slate-50 a.bg-slate-800 .text-blue-500,
body.bg-slate-50 a.bg-slate-800 .text-blue-400   { color: #1d4ed8 !important; }
body.bg-slate-50 a.bg-slate-800 .text-orange-400 { color: #c2410c !important; }
body.bg-slate-50 a.bg-slate-800 .text-pink-400   { color: #be185d !important; }
body.bg-slate-50 a.bg-slate-800 .text-cyan-400,
body.bg-slate-50 a.bg-slate-800 .text-cyan-300   { color: #0e7490 !important; }
body.bg-slate-50 a.bg-slate-800 .text-red-400    { color: #b91c1c !important; }
body.bg-slate-50 a.bg-slate-800 .text-amber-500  { color: #92400e !important; }

/* Icone background nelle card home */
body.bg-slate-50 .bg-yellow-900\/50 { background-color: #fef3c7 !important; }
body.bg-slate-50 .bg-green-900\/50  { background-color: #dcfce7 !important; }
body.bg-slate-50 .bg-blue-900\/50   { background-color: #dbeafe !important; }
body.bg-slate-50 .bg-cyan-900\/50   { background-color: #cffafe !important; }
body.bg-slate-50 .bg-amber-900\/50  { background-color: #fef3c7 !important; }
body.bg-slate-50 .bg-red-900\/50    { background-color: #fee2e2 !important; }
body.bg-slate-50 .bg-violet-900\/50 { background-color: #ede9fe !important; }
body.bg-slate-50 .bg-pink-900\/50   { background-color: #fce7f3 !important; }

/* ═══════════════════════════════════════════════════════════════
   10. SIDEBAR E NAVIGAZIONE
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 #mainSidebar,
body.bg-slate-50 aside#mainSidebar {
    background-color: #cdd2dc !important;
    border-right: 1px solid #b8c0ce !important;
    color: #1a1a2e !important;
}

body.bg-slate-50 #mainSidebar a,
body.bg-slate-50 #mainSidebar span,
body.bg-slate-50 #mainSidebar p {
    color: #1a1a2e !important;
}

body.bg-slate-50 #mainSidebar a:hover,
body.bg-slate-50 #mainSidebar a.active {
    background-color: #bcc3cf !important;
    color: #c2410c !important;
}

/* Nav/Header — CHIARAMENTE diversi dal body (#eef1f6) */
body.bg-slate-50 nav.bg-slate-900,
body.bg-slate-50 nav.bg-slate-800,
body.bg-slate-50 header.bg-slate-900,
body.bg-slate-50 header.bg-slate-800 {
    background-color: #c0c6d2 !important;
    border-bottom: 1px solid #aab2c0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* Testo dentro nav/header */
body.bg-slate-50 nav.bg-slate-900 .text-white,
body.bg-slate-50 nav.bg-slate-800 .text-white,
body.bg-slate-50 header.bg-slate-900 .text-white,
body.bg-slate-50 header.bg-slate-800 .text-white {
    color: #1a1a2e !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. PULSANTI
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 button.bg-slate-700,
body.bg-slate-50 button.bg-slate-600,
body.bg-slate-50 button.bg-slate-800 {
    background-color: #d4d9e2 !important;
    color: #1a1a2e !important;
    border-color: #b8c0ce !important;
}
body.bg-slate-50 button.bg-slate-700:hover,
body.bg-slate-50 button.bg-slate-600:hover,
body.bg-slate-50 button.bg-slate-800:hover {
    background-color: #c8cdd8 !important;
}

/* Tab pulsanti attivi */
/* 🔴 27 agosto 2026 — e la stessa esclusione vale per la voce ATTIVA. Nella barra in
   fondo «Menu» e «Aspetto» sono `<button>`: quando la sezione corrente non e' fra le
   quattro della barra, «Menu» diventa l'attivo e pigliava questa pastiglia — mentre
   l'attivo delle altre pagine, che e' un `<a>`, non la prende. Stessa barra, due modi
   di dire «sei qui», e la differenza era il tipo di elemento.
 ★ Nella barra il «sei qui» lo dice il colore arancione, uguale per link e bottoni. */
body.bg-slate-50 .tab-active,
body.bg-slate-50 [aria-selected="true"],
body.bg-slate-50 button.active:not(.muxv2-navitem) {
    background-color: #c0c6d4 !important;
    color: #1a1a2e !important;
    border-color: #a0a8b8 !important;
}

/* Tab pulsanti inattivi */
/* 🔴🔴 27 agosto 2026 — LA PASTIGLIA FINIVA SULLE VOCI SBAGLIATE. Nella barra in fondo
   «Menu» e «Aspetto» sono `<button>`, le altre quattro sono `<a>`: solo i due bottoni
   pigliavano questo fondo grigio, e sembravano premuti. La voce DAVVERO attiva — che ha
   `.active` ed e' quindi esclusa qui — restava senza niente.
   ★★★ Risultato all'occhio: gli unici due riquadri pieni della barra stavano sulle due
   voci non attive, cioe' l'indicazione era esattamente al contrario. Solo sul tema
   chiaro; sullo scuro non succedeva, perche' questa regola vive solo qui.
 ⚠️ La barra in fondo non e' un gruppo di tab: e' navigazione, e chi ci sta dentro dice
   gia' da se' dove sei col colore arancione. Escludendola si toglie il caso, non la
   regola — i tab veri continuano a comportarsi come prima. */
body.bg-slate-50 .tab-inactive,
body.bg-slate-50 [aria-selected="false"],
body.bg-slate-50 button:not(.active):not([class*="bg-"]):not(.muxv2-navitem) {
    background-color: #dde2ea;
    color: #4a5568;
}

/*
 * OVERRIDE CRITICO — responsive.css forza color:#ffffff su
 * button[class*="bg-red-"], button[class*="bg-amber-"], ecc. (specificità 0,3,0).
 * Giusto per bg-red-500 (vivido), SBAGLIATO per bg-red-900/10 (diventa
 * #fef2f2 in light theme → testo bianco invisibile su sfondo quasi bianco).
 */
body.bg-slate-50 button[class^="bg-red-9"],
body.bg-slate-50 button[class*=" bg-red-9"],
body.bg-slate-50 button[class^="bg-amber-9"],
body.bg-slate-50 button[class*=" bg-amber-9"],
body.bg-slate-50 button[class^="bg-green-9"],
body.bg-slate-50 button[class*=" bg-green-9"],
body.bg-slate-50 button[class^="bg-blue-9"],
body.bg-slate-50 button[class*=" bg-blue-9"],
body.bg-slate-50 button[class^="bg-violet-9"],
body.bg-slate-50 button[class*=" bg-violet-9"],
body.bg-slate-50 button[class^="bg-orange-9"],
body.bg-slate-50 button[class*=" bg-orange-9"],
body.bg-slate-50 button[class^="bg-cyan-9"],
body.bg-slate-50 button[class*=" bg-cyan-9"],
body.bg-slate-50 button[class^="bg-yellow-9"],
body.bg-slate-50 button[class*=" bg-yellow-9"],
body.bg-slate-50 button[class^="bg-pink-9"],
body.bg-slate-50 button[class*=" bg-pink-9"],
body.bg-slate-50 button[class^="bg-emerald-9"],
body.bg-slate-50 button[class*=" bg-emerald-9"],
body.bg-slate-50 button[class^="bg-indigo-9"],
body.bg-slate-50 button[class*=" bg-indigo-9"] {
    color: #1e293b !important;
}
/* Stessa eccezione per <a> usati come pulsanti con varianti scure */
body.bg-slate-50 a[class^="bg-red-9"],
body.bg-slate-50 a[class*=" bg-red-9"],
body.bg-slate-50 a[class^="bg-amber-9"],
body.bg-slate-50 a[class*=" bg-amber-9"],
body.bg-slate-50 a[class^="bg-green-9"],
body.bg-slate-50 a[class*=" bg-green-9"],
body.bg-slate-50 a[class^="bg-blue-9"],
body.bg-slate-50 a[class*=" bg-blue-9"] {
    color: #1e293b !important;
}

/*
 * CORREZIONE SIDEBAR — pulsanti con bg vivido devono mantenere testo bianco
 */
body.bg-slate-50 #mainSidebar button[class^="bg-blue-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-blue-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-blue-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-blue-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-blue-4"],
body.bg-slate-50 #mainSidebar button[class*=" bg-blue-4"],
body.bg-slate-50 #mainSidebar button[class^="bg-red-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-red-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-red-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-red-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-green-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-green-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-green-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-green-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-orange-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-orange-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-orange-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-orange-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-violet-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-violet-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-violet-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-violet-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-indigo-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-indigo-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-indigo-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-indigo-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-emerald-5"],
body.bg-slate-50 #mainSidebar button[class*=" bg-emerald-5"],
body.bg-slate-50 #mainSidebar button[class^="bg-emerald-6"],
body.bg-slate-50 #mainSidebar button[class*=" bg-emerald-6"],
body.bg-slate-50 #mainSidebar button[class^="bg-gradient-"],
body.bg-slate-50 #mainSidebar button[class*=" bg-gradient-"] {
    color: #ffffff !important;
}

/* v2-landing-cta: pulsante CTA hero */
body.bg-slate-50 .v2-landing-cta {
    color: #1e293b !important;
    text-shadow: none !important;
}

/* v2-landing-sec-btn: scorciatoie-sezione sul landing — contrasto su tema chiaro */
body.bg-slate-50 .v2-landing-sec-btn {
    background: #eef1f6 !important;
    border-color: #d4d9e2 !important;
    color: #1e293b !important;
}

/* v2-landing-card: card hero sezione */
body.bg-slate-50 .v2-landing-card,
body.bg-slate-50 .v2-landing-card h1,
body.bg-slate-50 .v2-landing-card h2,
body.bg-slate-50 .v2-landing-card p,
body.bg-slate-50 .v2-landing-card span:not(.v2-oggi-year),
body.bg-slate-50 .v2-landing-card div:not(.v2-landing-overlay) {
    color: #1e293b !important;
}

/* v2-chip-stat: chip statistiche nella landing */
body.bg-slate-50 .v2-chip-stat,
body.bg-slate-50 .v2-chip-stat span,
body.bg-slate-50 .v2-chip-stat strong {
    color: #1e293b !important;
    background-color: #d4d9e2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. SEARCH BOX / AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 #qs-results {
    background-color: #f3f5fa !important;
    border-color: #b8c0ce !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
body.bg-slate-50 #qs-results a,
body.bg-slate-50 #qs-results div { color: #1e293b !important; }
body.bg-slate-50 #qs-results a:hover { background-color: #d5dbe6 !important; }

/* ═══════════════════════════════════════════════════════════════
   13. PANNELLI SPLIT (Stadi: lista + dettaglio)
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 #listPanel,
body.bg-slate-50 #detailPanel {
    background-color: #dde2ea !important;
    border-color: #b8c0ce !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 ::-webkit-scrollbar-track { background: #d4d9e2; }
body.bg-slate-50 ::-webkit-scrollbar-thumb {
    background: #a8b0be;
    border-radius: 4px;
}
body.bg-slate-50 ::-webkit-scrollbar-thumb:hover { background: #8a94a4; }

/* ═══════════════════════════════════════════════════════════════
   15. LINK
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 a:not([class*="bg-"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-green"]):not([class*="text-red"]) {
    color: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════
   16. HOVER TESTO BIANCO — mantieni ok su bg hover vivido/scuro reale
   ═══════════════════════════════════════════════════════════════ */

/* In light mode, hover:text-white su sfondi chiari = invisibile → scuro */
body.bg-slate-50 [class*="hover:text-white"]:hover {
    color: #1e293b !important;
}
body.bg-slate-50 .group:hover .group-hover\:text-white {
    color: #1e293b !important;
}

/* Fix hover:bg-slate-* — quando il bg diventa "scuro" (ma grigio chiaro) */
body.bg-slate-50 [class*="hover:bg-slate-8"]:hover,
body.bg-slate-50 [class*="hover:bg-slate-9"]:hover {
    background-color: #d5dbe6 !important;
    color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. PULSANTE TEMA — evidenzia quello attivo
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 #theme-white {
    background-color: #c2410c !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   18. TABELLINO PARTITA / PRE / CODE
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 pre,
body.bg-slate-50 code,
body.bg-slate-50 .whitespace-pre-wrap,
body.bg-slate-50 .font-mono {
    background-color: #e8ecf3 !important;
    color: #1e293b !important;
    border: 1px solid #b8c0ce !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. FOOTER
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 footer {
    background-color: #d4d9e2 !important;
    border-top: 1px solid #b8c0ce !important;
    color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════
   20. CLASSI SPECIFICHE GENERATE DA JS (sezioni dinamiche)
   ═══════════════════════════════════════════════════════════════ */

/* Chip statistiche (gol, casa, fuori, pareggi) */
body.bg-slate-50 .bg-slate-800\/60 {
    background-color: #dde2ea !important;
    border-color: #b8c0ce !important;
}

/* Settings bar tema/testo */
body.bg-slate-50 .bg-slate-800\/50 {
    background-color: #d4d9e2 !important;
    border-color: #b8c0ce !important;
}

/* Sezione "Nella storia" wrapper */
body.bg-slate-50 .bg-slate-800\/60.border.border-slate-700 {
    background-color: #dde2ea !important;
    border-color: #b8c0ce !important;
}

/* ═══════════════════════════════════════════════════════════════
   21. CLASSI CUSTOM GLASS (allenatori, arbitri, calcia, varie, ecc.)
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 .glass-panel {
    background: rgba(221, 226, 234, 0.97) !important;
    border-color: #b8c0ce !important;
    color: #1e293b !important;
}

body.bg-slate-50 .glass-header {
    background: rgba(203, 209, 220, 0.97) !important;
    border-color: #b8c0ce !important;
}

/* ═══════════════════════════════════════════════════════════════
   22. TAB-FULLSCREEN MODAL — overlay fullscreen per tabelle
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 .tab-fullscreen-overlay {
    background: #eef1f6 !important;
}

body.bg-slate-50 .tab-fullscreen-header {
    background: #d4d9e2 !important;
    border-color: #b8c0ce !important;
    color: #1e293b !important;
}

body.bg-slate-50 .tab-fullscreen-content {
    background: #e8ecf3 !important;
    color: #1e293b !important;
}

body.bg-slate-50 .tab-fullscreen-content th {
    background: #cbd1dc !important;
    color: #1a1a2e !important;
    border-color: #b8c0ce !important;
}

body.bg-slate-50 .tab-fullscreen-content td {
    border-color: #c8d0da !important;
}

body.bg-slate-50 .tab-fullscreen-content tr:hover {
    background: #d5dbe6 !important;
}

body.bg-slate-50 .tab-fullscreen-close {
    color: #475569 !important;
}

body.bg-slate-50 .tab-fullscreen-close:hover {
    color: #1e293b !important;
    background: #d4d9e2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   23. STICKY COLUMNS TABLET (768–1024px) — responsive.css le rende scure
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) and (min-width: 768px) {
    body.bg-slate-50 table th:first-child,
    body.bg-slate-50 table td:first-child {
        background: #dde2ea !important;
        color: #1e293b !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   24. FIX GLOBALE: hover:text-white — Tailwind su sfondo grigio
   ═══════════════════════════════════════════════════════════════ */

body.bg-slate-50 [class*="hover:text-white"]:hover {
    color: #1e293b !important;
}

/* Fix hover:bg-slate-* */
body.bg-slate-50 [class*="hover:bg-slate-8"]:hover,
body.bg-slate-50 [class*="hover:bg-slate-9"]:hover {
    background-color: #d5dbe6 !important;
    color: #1e293b !important;
}

/* ═══════════════════════════════════════════════════════════════
   25. ECCEZIONI LEGITTIME — sfondi scuri REALI mantengono testo bianco
   ═══════════════════════════════════════════════════════════════ */

/* v2-landing-overlay: in TEMA CHIARO l'overlay/card ha fondo CHIARO (#f8fafc),
   NON scuro come ipotizzato in origine → il testo deve essere SCURO, non bianco.
   (Questa regola, prima a #fff, rendeva illeggibile tutto l'hero del landing.) */
body.bg-slate-50 .v2-landing-overlay,
body.bg-slate-50 .v2-landing-overlay h1,
body.bg-slate-50 .v2-landing-overlay h2,
body.bg-slate-50 .v2-landing-overlay p,
body.bg-slate-50 .v2-landing-overlay span,
body.bg-slate-50 .v2-landing-overlay div {
    color: #1e293b !important;
}

/* Eccezione: il bottone CTA resta a testo bianco su verde (verde scurito per AA) */
body.bg-slate-50 .v2-landing-overlay .v2-landing-cta,
body.bg-slate-50 .v2-landing-cta {
    background: #047857 !important;   /* emerald-700: bianco sopra ≈ 4.6 (AA) */
    color: #ffffff !important;
}
body.bg-slate-50 .v2-landing-overlay .v2-landing-cta * { color: #ffffff !important; }

/* v2-oggi-year: anno corrente — bg trasparente, testo arancio scuro */
body.bg-slate-50 .v2-oggi-year {
    background: transparent !important;
    color: #c2410c !important; /* orange-700: ratio ~4.8 su #eef1f6 → AA */
}

/* Pulsanti CTA vividi (bg-blue-6xx, bg-orange-5xx, ecc.) → testo bianco OK */
body.bg-slate-50 [class^="bg-blue-6"] .text-white,
body.bg-slate-50 [class*=" bg-blue-6"] .text-white,
body.bg-slate-50 [class^="bg-blue-5"] .text-white,
body.bg-slate-50 [class*=" bg-blue-5"] .text-white,
body.bg-slate-50 [class^="bg-orange-5"] .text-white,
body.bg-slate-50 [class*=" bg-orange-5"] .text-white,
body.bg-slate-50 [class^="bg-red-6"] .text-white,
body.bg-slate-50 [class*=" bg-red-6"] .text-white,
body.bg-slate-50 [class^="bg-green-6"] .text-white,
body.bg-slate-50 [class*=" bg-green-6"] .text-white,
body.bg-slate-50 [class^="bg-violet-6"] .text-white,
body.bg-slate-50 [class*=" bg-violet-6"] .text-white,
body.bg-slate-50 [class^="bg-indigo-6"] .text-white,
body.bg-slate-50 [class*=" bg-indigo-6"] .text-white,
body.bg-slate-50 [class^="bg-emerald-6"] .text-white,
body.bg-slate-50 [class*=" bg-emerald-6"] .text-white {
    color: #ffffff !important;
}

/* Testo bianco SOLO su fondi ESPLICITAMENTE SCURI (rgba(0,0,0,...)).
   RIMOSSI [class*="bg-gradient-to-"] e linear-gradient generici: in tema chiaro
   quei gradienti vengono rimappati CHIARI (vedi .bg-gradient-to-br più sotto),
   quindi il testo bianco diventava INVISIBILE — es. il titolo "📖 Libro dei
   Record" e altri header con gradiente. Ora ereditano il testo scuro della guardia. */
body.bg-slate-50 [style*="background-color: rgba(0"] .text-white,
body.bg-slate-50 [style*="background:rgba(0"] .text-white {
    color: #ffffff !important;
}

/* Modal/dialog con fondo scuro esplicito (inline style rgba(0,0,0,...)) */
body.bg-slate-50 [style*="background-color: rgba(0, 0, 0"],
body.bg-slate-50 [style*="background: rgba(0, 0, 0"],
body.bg-slate-50 [style*="background:rgba(0,0,0"] {
    /* mantieni colore come da inline style, non sovrascrivere */
}

/* ════════════════════════════════════════════════════════════════════════════
   FIX CONTRASTO TEMA CHIARO — 29 Mag 2026
   La "guardia universale" (text-white → #1e293b) scuriva il testo ANCHE sui
   bottoni con sfondo colorato PIENO → testo scuro su colore saturo (contrasto
   ~3.3, sotto WCAG AA 4.5). Qui ripristiniamo il bianco dove lo sfondo è saturo.
   Posto in fondo al file = ha l'ultima parola nella cascata.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) ⚠️ REGOLA RIMOSSA il 21 lug 2026 — era la CAUSA di «Apri Scheda» illeggibile.
   Forzava il testo BIANCO su qualunque elemento con classe bg-<colore>-5/6/7, ed
   e' nata (29 mag) quando in tema chiaro quegli sfondi restavano SATURI. Dal 21 lug
   la scelta di Fabio e' l'opposto — «i fondi neri o grigio scuri nel tema bianco sono
   un colpo in un occhio» — e le regole «variante B» piu' sotto rendono quegli sfondi
   PASTELLO con testo scuro. Le due si contraddicevano, e questa vinceva: specificita'
   0,3,1 (l'attributo + il :not) contro 0,2,2 delle regole mirate. Risultato a schermo:
   fondo arancione pastello con scritta BIANCA sopra — contrasto 1.35, invisibile.
   Copriva blue/indigo/violet/purple/green/emerald/red/cyan/sky/orange/rose: TUTTI
   gia' coperti dalla variante B (ogni famiglia, tinte 500-800), quindi togliendola
   non resta scoperto niente.
   ⚠️ Il difetto e' stato trovato solo con CSS.getMatchedStylesForNode (protocollo di
   debug di Chrome): leggere la CSSOM a mano dava zero regole e mandava fuori strada. */

/* 2) Bottoni dimensione testo (A-/A/A+): in chiaro il bianco su bianco è invisibile.
   Il controllo vive dentro #mainSidebar → serve specificità con ID per vincere
   sulla regola `#mainSidebar button` (1,2,1). */
body.bg-slate-50 button.fs-btn,
body.bg-slate-50 #mainSidebar button.fs-btn { color: #334155 !important; }
/* Stato attivo dei pulsanti A−/A/A+ e del tema: ora SOLO in css/palette.css
   (mazzetta C, 22 lug 2026). Era blu elettrico: un accento che non c'entrava. */


/* 3) Banner cookie / share: bottoni e link accent con verde troppo chiaro → verde scuro AA */
body.bg-slate-50 .btn-accept { background: #15803d !important; color: #ffffff !important; }
body.bg-slate-50 #ndc-cookie-banner a,
body.bg-slate-50 .ndc-footer a,
body.bg-slate-50 footer a[onclick*="Privacy"],
body.bg-slate-50 footer a[onclick*="Cookie"] { color: #047857 !important; }

/* 3) Accenti verdi/ciano chiari su sfondo bianco → tonalità leggibili (AA) */
body.bg-slate-50 .text-green-500,
body.bg-slate-50 .text-emerald-400,
body.bg-slate-50 .text-emerald-500 { color: #15803d !important; }
body.bg-slate-50 .text-cyan-400,
body.bg-slate-50 .text-cyan-500,
body.bg-slate-50 .text-sky-400 { color: #0e7490 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   FIX LEGGIBILITÀ LANDING/HERO v2 (29 Mag 2026)
   I componenti .v2-* del landing (titolo, hero "big fact", chip, "oggi nella
   storia") ereditano il TESTO BIANCO dall'overlay anche in tema chiaro → su
   sfondo chiaro erano illeggibili. Qui forziamo colori scuri leggibili.
   !important perché il bianco arriva per ereditarietà dall'overlay.
   ════════════════════════════════════════════════════════════════════════════ */

/* Container: il testo di base eredita scuro (i bottoni colorati restano gestiti
   dalle regole dei bottoni più sopra, a specificità pari + ordine successivo) */
body.bg-slate-50 .v2-landing-overlay,
body.bg-slate-50 .v2-landing-card,
body.bg-slate-50 .v2-landing-header,
body.bg-slate-50 .v2-big-fact,
body.bg-slate-50 .v2-chip-stat,
body.bg-slate-50 .v2-oggi-card { color: #1e293b !important; }

/* Testi PRIMARI (titoli, valori, squadre, punteggi) → scuro forte */
body.bg-slate-50 .v2-landing-title,
body.bg-slate-50 .v2-big-fact-value,
body.bg-slate-50 .v2-big-fact-num,
body.bg-slate-50 .v2-chip-val,
body.bg-slate-50 .v2-oggi-teams,
body.bg-slate-50 .v2-oggi-year,
body.bg-slate-50 .v2-oggi-score { color: #0f172a !important; }

/* Testi SECONDARI (sottotitoli, etichette, note) → grigio scuro leggibile (AA) */
body.bg-slate-50 .v2-landing-sub,
body.bg-slate-50 .v2-big-fact-label,
body.bg-slate-50 .v2-big-fact-note,
body.bg-slate-50 .v2-chip-lbl,
body.bg-slate-50 .v2-desc-btn,
body.bg-slate-50 .v2-desc-content { color: #475569 !important; }

/* Etichetta accent "OGGI NELLA STORIA" / badge: arancio scuro leggibile su chiaro */
body.bg-slate-50 .v2-oggi-label { color: #c2410c !important; }

/* Il punteggio "oggi" ha sfondo chip: assicura sfondo chiaro + testo scuro */
body.bg-slate-50 .v2-oggi-score { background: #e2e8f0 !important; }

/* ════════════════════════════════════════════════════════════════════
   Fix contrasto tema chiaro (audit contrasto 12/06/2026)
   ════════════════════════════════════════════════════════════════════ */

/* "Calendario pubblicato" e simili: emerald al 70%% era 2.4:1 su bianco */
body.bg-slate-50 .text-emerald-500\/70,
body.bg-slate-50 .text-emerald-400\/70 { color: #047857 !important; }

/* ── Tour onboarding (v2-tour): card SCURA by-design su OGNI tema ──
   Le regole generiche del tema chiaro (p/span/.text-white → scuri, anche
   con stile inline) rendevano il testo del tour invisibile (scuro su card
   scura). Qui si ripristinano i colori originali del tour: l'id batte in
   specificità le regole generiche. */
body.bg-slate-50 #v2-tour-card h3 { color: #f1f5f9 !important; }
body.bg-slate-50 #v2-tour-card p { color: #94a3b8 !important; }
body.bg-slate-50 #v2-tour-card span { color: #64748b !important; }
body.bg-slate-50 #v2-tour-card button { color: #cbd5e1 !important; }
body.bg-slate-50 #v2-tour-card button[onclick*="skip"] { color: #94a3b8 !important; }
body.bg-slate-50 #v2-tour-card button[onclick*="next"],
body.bg-slate-50 #v2-tour-card button[onclick*="finish"] { color: #ffffff !important; }

/* ── X di chiusura delle modali (cerchio scuro + icona): in tema chiaro il
   cerchio diventava bianco e l'icona restava bianca → X invisibile
   (segnalato da Fabio su mobile, 12/06/2026) ── */
body.bg-slate-50 #modalContent button[onclick*="closeModal"],
body.bg-slate-50 #modalContent button[onclick*="closeModal"] i,
body.bg-slate-50 button[onclick*="closeModal"],
body.bg-slate-50 button[onclick*="closeModal"] i { color: #334155 !important; }
body.bg-slate-50 #modalContent button[onclick*="closeModal"]:hover,
body.bg-slate-50 #modalContent button[onclick*="closeModal"]:hover i,
body.bg-slate-50 button[onclick*="closeModal"]:hover,
body.bg-slate-50 button[onclick*="closeModal"]:hover i { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════
   REGOLA PRIMARIA — TESTI D'ACCENTO SU FONDO CHIARO (20 lug 2026)
   ═══════════════════════════════════════════════════════════════

   Il tema chiaro aveva gia' la guardia sui testi BIANCHI e GRIGI, e regge:
   in nessuna pagina si trova testo invisibile. Mancava pero' la stessa guardia
   sui COLORI D'ACCENTO (verde, ambra, arancione, ciano, rosso, blu): quelle
   tonalita' sono tarate sul fondo SCURO e su fondo chiaro sbiadiscono.

   Misurato prima di questa regola (rapporto di contrasto, soglia AA = 4.5):
     · ambra 400  su grigio chiaro  →  1.52   («pronti da pubblicare», Redazione)
     · arancione 500 su bianco      →  2.78   (briciole di navigazione)
     · verde 700  su grigio chiaro  →  4.23   (x59 in Calciatori: gia' scurito
                                               dal tema, ma non abbastanza)

   Regola: su fondo chiaro ogni accento scende ai livelli 700/800. Vale per
   QUALSIASI sfondo chiaro, che e' il principio richiesto da Fabio.

   ⚠️ NON tocca il testo BIANCO su fondo colorato pieno (bottoni, badge): quello
   e' gestito dalle eccezioni piu' su e deve restare bianco.
   ─────────────────────────────────────────────────────────────── */
body.bg-slate-50 [class^="text-amber-2"],
body.bg-slate-50 [class*=" text-amber-2"],
body.bg-slate-50 [class^="text-amber-3"],
body.bg-slate-50 [class*=" text-amber-3"],
body.bg-slate-50 [class^="text-amber-4"],
body.bg-slate-50 [class*=" text-amber-4"],
body.bg-slate-50 [class^="text-amber-5"],
body.bg-slate-50 [class*=" text-amber-5"],
body.bg-slate-50 [class^="text-yellow-2"],
body.bg-slate-50 [class*=" text-yellow-2"],
body.bg-slate-50 [class^="text-yellow-3"],
body.bg-slate-50 [class*=" text-yellow-3"],
body.bg-slate-50 [class^="text-yellow-4"],
body.bg-slate-50 [class*=" text-yellow-4"],
body.bg-slate-50 [class^="text-yellow-5"],
body.bg-slate-50 [class*=" text-yellow-5"] {
    color: #854d0e !important;          /* yellow-800 */
}body.bg-slate-50 [class^="text-orange-2"],
body.bg-slate-50 [class*=" text-orange-2"],
body.bg-slate-50 [class^="text-orange-3"],
body.bg-slate-50 [class*=" text-orange-3"],
body.bg-slate-50 [class^="text-orange-4"],
body.bg-slate-50 [class*=" text-orange-4"],
body.bg-slate-50 [class^="text-orange-5"],
body.bg-slate-50 [class*=" text-orange-5"],
body.bg-slate-50 [class^="text-orange-6"],
body.bg-slate-50 [class*=" text-orange-6"]{
    color: #9a3412 !important;          /* orange-800 */
}body.bg-slate-50 [class^="text-green-2"],
body.bg-slate-50 [class*=" text-green-2"],
body.bg-slate-50 [class^="text-green-3"],
body.bg-slate-50 [class*=" text-green-3"],
body.bg-slate-50 [class^="text-green-4"],
body.bg-slate-50 [class*=" text-green-4"],
body.bg-slate-50 [class^="text-green-5"],
body.bg-slate-50 [class*=" text-green-5"],
body.bg-slate-50 [class^="text-green-6"],
body.bg-slate-50 [class*=" text-green-6"],
body.bg-slate-50 [class^="text-green-7"],
body.bg-slate-50 [class*=" text-green-7"],
body.bg-slate-50 [class^="text-emerald-2"],
body.bg-slate-50 [class*=" text-emerald-2"],
body.bg-slate-50 [class^="text-emerald-3"],
body.bg-slate-50 [class*=" text-emerald-3"],
body.bg-slate-50 [class^="text-emerald-4"],
body.bg-slate-50 [class*=" text-emerald-4"],
body.bg-slate-50 [class^="text-emerald-5"],
body.bg-slate-50 [class*=" text-emerald-5"],
body.bg-slate-50 [class^="text-emerald-6"],
body.bg-slate-50 [class*=" text-emerald-6"],
body.bg-slate-50 [class^="text-emerald-7"],
body.bg-slate-50 [class*=" text-emerald-7"]{
    color: #14532d !important;          /* green-900: green-700 dava 4.23, sotto soglia */
}body.bg-slate-50 [class^="text-cyan-2"],
body.bg-slate-50 [class*=" text-cyan-2"],
body.bg-slate-50 [class^="text-cyan-3"],
body.bg-slate-50 [class*=" text-cyan-3"],
body.bg-slate-50 [class^="text-cyan-4"],
body.bg-slate-50 [class*=" text-cyan-4"],
body.bg-slate-50 [class^="text-cyan-5"],
body.bg-slate-50 [class*=" text-cyan-5"],
body.bg-slate-50 [class^="text-sky-2"],
body.bg-slate-50 [class*=" text-sky-2"],
body.bg-slate-50 [class^="text-sky-3"],
body.bg-slate-50 [class*=" text-sky-3"],
body.bg-slate-50 [class^="text-sky-4"],
body.bg-slate-50 [class*=" text-sky-4"],
body.bg-slate-50 [class^="text-sky-5"],
body.bg-slate-50 [class*=" text-sky-5"]{
    color: #155e75 !important;          /* cyan-800 */
}body.bg-slate-50 [class^="text-red-2"],
body.bg-slate-50 [class*=" text-red-2"],
body.bg-slate-50 [class^="text-red-3"],
body.bg-slate-50 [class*=" text-red-3"],
body.bg-slate-50 [class^="text-red-4"],
body.bg-slate-50 [class*=" text-red-4"],
body.bg-slate-50 [class^="text-red-5"],
body.bg-slate-50 [class*=" text-red-5"],
body.bg-slate-50 [class^="text-rose-2"],
body.bg-slate-50 [class*=" text-rose-2"],
body.bg-slate-50 [class^="text-rose-3"],
body.bg-slate-50 [class*=" text-rose-3"],
body.bg-slate-50 [class^="text-rose-4"],
body.bg-slate-50 [class*=" text-rose-4"],
body.bg-slate-50 [class^="text-rose-5"],
body.bg-slate-50 [class*=" text-rose-5"],
body.bg-slate-50 [class^="text-pink-3"],
body.bg-slate-50 [class*=" text-pink-3"],
body.bg-slate-50 [class^="text-pink-4"],
body.bg-slate-50 [class*=" text-pink-4"]{
    color: #991b1b !important;          /* red-800 */
}body.bg-slate-50 [class^="text-blue-2"],
body.bg-slate-50 [class*=" text-blue-2"],
body.bg-slate-50 [class^="text-blue-3"],
body.bg-slate-50 [class*=" text-blue-3"],
body.bg-slate-50 [class^="text-blue-4"],
body.bg-slate-50 [class*=" text-blue-4"],
body.bg-slate-50 [class^="text-blue-5"],
body.bg-slate-50 [class*=" text-blue-5"],
body.bg-slate-50 [class^="text-indigo-3"],
body.bg-slate-50 [class*=" text-indigo-3"],
body.bg-slate-50 [class^="text-indigo-4"],
body.bg-slate-50 [class*=" text-indigo-4"],
body.bg-slate-50 [class^="text-violet-3"],
body.bg-slate-50 [class*=" text-violet-3"],
body.bg-slate-50 [class^="text-violet-4"],
body.bg-slate-50 [class*=" text-violet-4"],
body.bg-slate-50 [class^="text-purple-3"],
body.bg-slate-50 [class*=" text-purple-3"],
body.bg-slate-50 [class^="text-purple-4"],
body.bg-slate-50 [class*=" text-purple-4"],
body.bg-slate-50 [class^="text-fuchsia-3"],
body.bg-slate-50 [class*=" text-fuchsia-3"],
body.bg-slate-50 [class^="text-fuchsia-4"],
body.bg-slate-50 [class*=" text-fuchsia-4"]{
    color: #1e40af !important;          /* blue-800 */
}

/* ⚠️ RIMOSSA il 21 lug: «su fondo colorato pieno il testo resta bianco».
   Era giusta finche' i fondi erano PIENI e scuri. Da quando il tema chiaro usa tinte
   tenui (scelta di Fabio) e' diventata dannosa: teneva il bianco sopra un fondo chiaro.
   Sul pulsante «Apri Scheda» di Squadre dava contrasto 1.35, cioe' illeggibile — ed era
   proprio il «poco visibile» che Fabio segnalava.
   ⚠️ Vinceva anche sulle regole nuove per un dettaglio di specificita': il `:not(...)`
   le aggiungeva un livello. Non bastava scriverne una dopo: andava tolta. */

/* ═══════════════════════════════════════════════════════════════════════════
   FONDI COLORATI: tinta tenue + testo scuro + ombra              (21 lug 2026)
   ═══════════════════════════════════════════════════════════════════════════
   Scelta di Fabio, dopo aver confrontato le alternative a video:
     «i fondi neri o grigio scuri nel tema bianco sono un colpo in un occhio;
      preferisco la tinta chiara, magari con una leggera ombra che dia una
      parvenza di 3D»
   E' la risposta alla sua domanda del 20 lug — perche' in tema chiaro non si usa
   un carattere scuro come regola generale? Perche' non lo si era ancora fatto.
   Il fondo diventa la TINTA CHIARA del colore, il testo la tinta SCURA dello
   stesso colore: il pulsante tiene la sua identita' cromatica e smette di essere
   un blocco cupo sulla pagina bianca. L'ombra sostituisce il bordo — la tinta da
   sola stacca dalla pagina per 1.11 e il pulsante ci si confonderebbe.

   ⚠️ SELETTORE: si usa `~=`, che confronta il TOKEN ESATTO della classe.
   Con `[class*="bg-green-6"]:not([class*="/"])` succedeva questo: la seconda
   condizione guarda TUTTA la stringa delle classi, quindi bastava un
   `border-emerald-600/40` altrove per far saltare la regola. Su Campionati le
   card `bg-slate-800` restavano scure per quel motivo, con dentro un testo che
   il tema scuriva: 195 testi illeggibili, contrasto 1.0. `~=` non ha il problema
   e distingue da solo `bg-green-600` da `bg-green-600/20`.
   ⚠️ Prima avevo fatto il CONTRARIO — scurire il fondo per far salire il
   contrasto col bianco. Numero giusto, direzione sbagliata. Rimosso. */
body.bg-slate-50 [class~="bg-green-500"],
body.bg-slate-50 [class~="bg-green-600"],
body.bg-slate-50 [class~="bg-green-700"],
body.bg-slate-50 [class~="bg-green-800"] {
    background-color: #bbf7d0 !important; color: #14532d !important;
}
body.bg-slate-50 [class~="bg-green-500"] *,
body.bg-slate-50 [class~="bg-green-600"] *,
body.bg-slate-50 [class~="bg-green-700"] *,
body.bg-slate-50 [class~="bg-green-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-emerald-500"],
body.bg-slate-50 [class~="bg-emerald-600"],
body.bg-slate-50 [class~="bg-emerald-700"],
body.bg-slate-50 [class~="bg-emerald-800"] {
    background-color: #a7f3d0 !important; color: #064e3b !important;
}
body.bg-slate-50 [class~="bg-emerald-500"] *,
body.bg-slate-50 [class~="bg-emerald-600"] *,
body.bg-slate-50 [class~="bg-emerald-700"] *,
body.bg-slate-50 [class~="bg-emerald-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-teal-500"],
body.bg-slate-50 [class~="bg-teal-600"],
body.bg-slate-50 [class~="bg-teal-700"],
body.bg-slate-50 [class~="bg-teal-800"] {
    background-color: #99f6e4 !important; color: #134e4a !important;
}
body.bg-slate-50 [class~="bg-teal-500"] *,
body.bg-slate-50 [class~="bg-teal-600"] *,
body.bg-slate-50 [class~="bg-teal-700"] *,
body.bg-slate-50 [class~="bg-teal-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-cyan-500"],
body.bg-slate-50 [class~="bg-cyan-600"],
body.bg-slate-50 [class~="bg-cyan-700"],
body.bg-slate-50 [class~="bg-cyan-800"] {
    background-color: #a5f3fc !important; color: #164e63 !important;
}
body.bg-slate-50 [class~="bg-cyan-500"] *,
body.bg-slate-50 [class~="bg-cyan-600"] *,
body.bg-slate-50 [class~="bg-cyan-700"] *,
body.bg-slate-50 [class~="bg-cyan-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-sky-500"],
body.bg-slate-50 [class~="bg-sky-600"],
body.bg-slate-50 [class~="bg-sky-700"],
body.bg-slate-50 [class~="bg-sky-800"] {
    background-color: #bae6fd !important; color: #075985 !important;
}
body.bg-slate-50 [class~="bg-sky-500"] *,
body.bg-slate-50 [class~="bg-sky-600"] *,
body.bg-slate-50 [class~="bg-sky-700"] *,
body.bg-slate-50 [class~="bg-sky-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-blue-500"],
body.bg-slate-50 [class~="bg-blue-600"],
body.bg-slate-50 [class~="bg-blue-700"],
body.bg-slate-50 [class~="bg-blue-800"] {
    background-color: #bfdbfe !important; color: #1e3a8a !important;
}
body.bg-slate-50 [class~="bg-blue-500"] *,
body.bg-slate-50 [class~="bg-blue-600"] *,
body.bg-slate-50 [class~="bg-blue-700"] *,
body.bg-slate-50 [class~="bg-blue-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-indigo-500"],
body.bg-slate-50 [class~="bg-indigo-600"],
body.bg-slate-50 [class~="bg-indigo-700"],
body.bg-slate-50 [class~="bg-indigo-800"] {
    background-color: #c7d2fe !important; color: #312e81 !important;
}
body.bg-slate-50 [class~="bg-indigo-500"] *,
body.bg-slate-50 [class~="bg-indigo-600"] *,
body.bg-slate-50 [class~="bg-indigo-700"] *,
body.bg-slate-50 [class~="bg-indigo-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-violet-500"],
body.bg-slate-50 [class~="bg-violet-600"],
body.bg-slate-50 [class~="bg-violet-700"],
body.bg-slate-50 [class~="bg-violet-800"] {
    background-color: #ddd6fe !important; color: #4c1d95 !important;
}
body.bg-slate-50 [class~="bg-violet-500"] *,
body.bg-slate-50 [class~="bg-violet-600"] *,
body.bg-slate-50 [class~="bg-violet-700"] *,
body.bg-slate-50 [class~="bg-violet-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-purple-500"],
body.bg-slate-50 [class~="bg-purple-600"],
body.bg-slate-50 [class~="bg-purple-700"],
body.bg-slate-50 [class~="bg-purple-800"] {
    background-color: #e9d5ff !important; color: #581c87 !important;
}
body.bg-slate-50 [class~="bg-purple-500"] *,
body.bg-slate-50 [class~="bg-purple-600"] *,
body.bg-slate-50 [class~="bg-purple-700"] *,
body.bg-slate-50 [class~="bg-purple-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-fuchsia-500"],
body.bg-slate-50 [class~="bg-fuchsia-600"],
body.bg-slate-50 [class~="bg-fuchsia-700"],
body.bg-slate-50 [class~="bg-fuchsia-800"] {
    background-color: #f5d0fe !important; color: #701a75 !important;
}
body.bg-slate-50 [class~="bg-fuchsia-500"] *,
body.bg-slate-50 [class~="bg-fuchsia-600"] *,
body.bg-slate-50 [class~="bg-fuchsia-700"] *,
body.bg-slate-50 [class~="bg-fuchsia-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-pink-500"],
body.bg-slate-50 [class~="bg-pink-600"],
body.bg-slate-50 [class~="bg-pink-700"],
body.bg-slate-50 [class~="bg-pink-800"] {
    background-color: #fbcfe8 !important; color: #831843 !important;
}
body.bg-slate-50 [class~="bg-pink-500"] *,
body.bg-slate-50 [class~="bg-pink-600"] *,
body.bg-slate-50 [class~="bg-pink-700"] *,
body.bg-slate-50 [class~="bg-pink-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-rose-500"],
body.bg-slate-50 [class~="bg-rose-600"],
body.bg-slate-50 [class~="bg-rose-700"],
body.bg-slate-50 [class~="bg-rose-800"] {
    background-color: #fecdd3 !important; color: #881337 !important;
}
body.bg-slate-50 [class~="bg-rose-500"] *,
body.bg-slate-50 [class~="bg-rose-600"] *,
body.bg-slate-50 [class~="bg-rose-700"] *,
body.bg-slate-50 [class~="bg-rose-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-red-500"],
body.bg-slate-50 [class~="bg-red-600"],
body.bg-slate-50 [class~="bg-red-700"],
body.bg-slate-50 [class~="bg-red-800"] {
    background-color: #fecaca !important; color: #7f1d1d !important;
}
body.bg-slate-50 [class~="bg-red-500"] *,
body.bg-slate-50 [class~="bg-red-600"] *,
body.bg-slate-50 [class~="bg-red-700"] *,
body.bg-slate-50 [class~="bg-red-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-orange-500"],
body.bg-slate-50 [class~="bg-orange-600"],
body.bg-slate-50 [class~="bg-orange-700"],
body.bg-slate-50 [class~="bg-orange-800"] {
    background-color: #fed7aa !important; color: #7c2d12 !important;
}
body.bg-slate-50 [class~="bg-orange-500"] *,
body.bg-slate-50 [class~="bg-orange-600"] *,
body.bg-slate-50 [class~="bg-orange-700"] *,
body.bg-slate-50 [class~="bg-orange-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-amber-500"],
body.bg-slate-50 [class~="bg-amber-600"],
body.bg-slate-50 [class~="bg-amber-700"],
body.bg-slate-50 [class~="bg-amber-800"] {
    background-color: #fde68a !important; color: #78350f !important;
}
body.bg-slate-50 [class~="bg-amber-500"] *,
body.bg-slate-50 [class~="bg-amber-600"] *,
body.bg-slate-50 [class~="bg-amber-700"] *,
body.bg-slate-50 [class~="bg-amber-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-yellow-500"],
body.bg-slate-50 [class~="bg-yellow-600"],
body.bg-slate-50 [class~="bg-yellow-700"],
body.bg-slate-50 [class~="bg-yellow-800"] {
    background-color: #fef08a !important; color: #713f12 !important;
}
body.bg-slate-50 [class~="bg-yellow-500"] *,
body.bg-slate-50 [class~="bg-yellow-600"] *,
body.bg-slate-50 [class~="bg-yellow-700"] *,
body.bg-slate-50 [class~="bg-yellow-800"] * { color: inherit !important; }
body.bg-slate-50 [class~="bg-lime-500"],
body.bg-slate-50 [class~="bg-lime-600"],
body.bg-slate-50 [class~="bg-lime-700"],
body.bg-slate-50 [class~="bg-lime-800"] {
    background-color: #d9f99d !important; color: #365314 !important;
}
body.bg-slate-50 [class~="bg-lime-500"] *,
body.bg-slate-50 [class~="bg-lime-600"] *,
body.bg-slate-50 [class~="bg-lime-700"] *,
body.bg-slate-50 [class~="bg-lime-800"] * { color: inherit !important; }

/* ── I GRIGI SCURI: le card che restavano nere sulla pagina bianca ──────────
   `bg-slate-700/800/900` e simili sopravvivevano al tema chiaro: riquadri cupi
   su fondo bianco, e per giunta col testo bianco scurito dal tema, cioe' scuro
   su scuro. Diventano superfici chiare come le altre card. */
body.bg-slate-50 [class~="bg-slate-700"],
body.bg-slate-50 [class~="bg-slate-800"],
body.bg-slate-50 [class~="bg-slate-900"],
body.bg-slate-50 [class~="bg-slate-950"],
body.bg-slate-50 [class~="bg-gray-700"],
body.bg-slate-50 [class~="bg-gray-800"],
body.bg-slate-50 [class~="bg-gray-900"],
body.bg-slate-50 [class~="bg-gray-950"],
body.bg-slate-50 [class~="bg-zinc-700"],
body.bg-slate-50 [class~="bg-zinc-800"],
body.bg-slate-50 [class~="bg-zinc-900"],
body.bg-slate-50 [class~="bg-zinc-950"],
body.bg-slate-50 [class~="bg-neutral-700"],
body.bg-slate-50 [class~="bg-neutral-800"],
body.bg-slate-50 [class~="bg-neutral-900"],
body.bg-slate-50 [class~="bg-neutral-950"],
body.bg-slate-50 [class~="bg-stone-700"],
body.bg-slate-50 [class~="bg-stone-800"],
body.bg-slate-50 [class~="bg-stone-900"],
body.bg-slate-50 [class~="bg-stone-950"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
}
body.bg-slate-50 [class~="bg-slate-700"] > *,
body.bg-slate-50 [class~="bg-slate-800"] > *,
body.bg-slate-50 [class~="bg-slate-900"] > *,
body.bg-slate-50 [class~="bg-slate-950"] > *,
body.bg-slate-50 [class~="bg-gray-700"] > *,
body.bg-slate-50 [class~="bg-gray-800"] > *,
body.bg-slate-50 [class~="bg-gray-900"] > *,
body.bg-slate-50 [class~="bg-gray-950"] > *,
body.bg-slate-50 [class~="bg-zinc-700"] > *,
body.bg-slate-50 [class~="bg-zinc-800"] > *,
body.bg-slate-50 [class~="bg-zinc-900"] > *,
body.bg-slate-50 [class~="bg-zinc-950"] > *,
body.bg-slate-50 [class~="bg-neutral-700"] > *,
body.bg-slate-50 [class~="bg-neutral-800"] > *,
body.bg-slate-50 [class~="bg-neutral-900"] > *,
body.bg-slate-50 [class~="bg-neutral-950"] > *,
body.bg-slate-50 [class~="bg-stone-700"] > *,
body.bg-slate-50 [class~="bg-stone-800"] > *,
body.bg-slate-50 [class~="bg-stone-900"] > *,
body.bg-slate-50 [class~="bg-stone-950"] > * { color: #0f172a; }

/* L'ombra: rilievo senza peso scuro. Solo su cio' che si preme. */
body.bg-slate-50 button[class^="bg-"],
body.bg-slate-50 button[class*=" bg-"],
body.bg-slate-50 a[class^="bg-"],
body.bg-slate-50 a[class*=" bg-"] {
    box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.07);
}body.bg-slate-50 button[class^="bg-"]:active,
body.bg-slate-50 button[class*=" bg-"]:active{
    box-shadow: 0 1px 1px rgba(15,23,42,.12); transform: translateY(1px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   REGOLE CENTRALIZZATE dalle pagine                          (21 Jul 2026)
   ═══════════════════════════════════════════════════════════════════════════
   Erano scritte IDENTICHE in piu' pagine (barra laterale, testate, comandi
   condivisi: copiate e incollate a ogni pagina nuova). Qui stanno una volta sola.
   Spostate solo quelle il cui selettore non dice niente di diverso altrove: le
   regole in conflitto e quelle di una pagina sola NON sono state toccate.
   ⚠️ Ora vengono PRIMA dei blocchi <style> delle pagine, non dopo: se una pagina
   volesse sovrascriverne una, adesso puo' farlo — ed e' il comportamento giusto. */
/* era in: allenatori, arbitri, calciatori, campionati, partite, record, scatolamagica, scommettiamo, squadre, varie */
body.bg-slate-50 #sidebar-desktop-toggle { background-color: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #475569 !important; }
/* era in: allenatori, arbitri, calciatori, campionati, partite, record, scatolamagica, scommettiamo, squadre, varie */
body.bg-slate-50 #sidebar-desktop-toggle:hover { background-color: #cbd5e1 !important; color: #1e293b !important; }
/* era in: allenatori, arbitri, campionati, home, partite, scommettiamo, varie */
body:not(.bg-slate-50) .bg-white { background-color: #1e293b !important; border-color: #334155 !important; }
/* era in: allenatori, arbitri, calciatori, campionati, scatolamagica, squadre, varie */
/* ⚠️ 4 set: era #64748b — **3,14** sul fondo del menu laterale nel tema chiaro.
   Le etichette del menu («MENU», «DATI») sono la bussola della pagina. */
body.bg-slate-50 #mainSidebar .text-slate-400, body.bg-slate-50 #mainSidebar .text-slate-500, body.bg-slate-50 #mainSidebar .text-slate-300 { color: #475569 !important; }
/* era in: allenatori, arbitri, calciatori, campionati, scatolamagica, squadre, varie */
body.bg-slate-50 #mainSidebar .group:hover .text-slate-400 { color: #0f172a !important; }
/* era in: allenatori, arbitri, calciatori, campionati, scatolamagica, varie */
body.bg-slate-50 .text-slate-300, body.bg-slate-50 .text-slate-400 { color: #475569 !important; }
/* era in: allenatori, arbitri, calciatori, campionati, squadre, varie */
body.bg-slate-50 button.bg-slate-800, body.bg-slate-50 button.bg-slate-700, body.bg-slate-50 button.bg-slate-950, body.bg-slate-50 #bg-black, body.bg-slate-50 #bg-dark { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #000000 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
/* era in: allenatori, arbitri, calciatori, campionati, squadre, varie */
body.bg-slate-50 #mainSidebar .bg-slate-800:hover, body.bg-slate-50 #mainSidebar .bg-slate-800\/50:hover, body.bg-slate-50 #mainSidebar .group:hover { background-color: #f1f5f9 !important; }
/* era in: arbitri, calciatori, campionati, squadre, varie */
body.bg-slate-50 .card-item { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
/* era in: allenatori, arbitri, calciatori, campionati, varie */
body.bg-slate-50 h1, body.bg-slate-50 h2, body.bg-slate-50 h3, body.bg-slate-50 h4, body.bg-slate-50 .font-black, body.bg-slate-50 .font-bold { color: #000000 !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .bg-slate-100, body:not(.bg-slate-50) .bg-slate-50:not(body), body:not(.bg-slate-50) .bg-gray-50, body:not(.bg-slate-50) .bg-gray-100 { background-color: #0f172a !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .text-slate-900, body:not(.bg-slate-50) .text-slate-800, body:not(.bg-slate-50) .text-gray-900, body:not(.bg-slate-50) .text-gray-800 { color: #ffffff !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .text-slate-700, body:not(.bg-slate-50) .text-gray-700 { color: #e2e8f0 !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .text-slate-600, body:not(.bg-slate-50) .text-gray-600 { color: #94a3b8 !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .border-slate-200, body:not(.bg-slate-50) .border-slate-100, body:not(.bg-slate-50) .border-slate-300, body:not(.bg-slate-50) .border-gray-200 { border-color: #334155 !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) select.bg-white, body:not(.bg-slate-50) input.bg-white { background-color: #1e293b !important; color: #ffffff !important; border-color: #475569 !important; }
/* era in: allenatori, arbitri, campionati, partite */
body:not(.bg-slate-50) .hover\:bg-slate-100:hover, body:not(.bg-slate-50) .hover\:bg-slate-50:hover { background-color: #334155 !important; }
/* era in: arbitri, calciatori, squadre, varie */
body.bg-slate-50 #mainSidebar, body.bg-slate-50 #mainContainer, body.bg-slate-50 .glass-header, body.bg-slate-50 .modal-content, body.bg-slate-50 .bg-slate-900, body.bg-slate-50 .bg-slate-950, body.bg-slate-50 .bg-slate-800, body.bg-slate-50 .bg-slate-900\/95 { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #000000 !important; }
/* era in: home, scommettiamo, varie */
body:not(.bg-slate-50) .bg-slate-100, body:not(.bg-slate-50) .bg-slate-50:not(body), body:not(.bg-slate-50) .bg-gray-50 { background-color: #0f172a !important; }
/* era in: home, scommettiamo, varie */
body:not(.bg-slate-50) .text-slate-900, body:not(.bg-slate-50) .text-slate-800, body:not(.bg-slate-50) .text-gray-900 { color: #ffffff !important; }
/* era in: home, scommettiamo, varie */
body:not(.bg-slate-50) .text-slate-700 { color: #e2e8f0 !important; }
/* era in: home, scommettiamo, varie */
body:not(.bg-slate-50) .text-slate-600 { color: #94a3b8 !important; }
/* era in: home, scommettiamo, varie */
body:not(.bg-slate-50) .border-slate-200, body:not(.bg-slate-50) .border-slate-300 { border-color: #334155 !important; }
/* era in: calciatori, home */
body.bg-slate-50 .text-slate-400, body.bg-slate-50 .text-slate-500 { color: #64748b !important; }
/* era in: home, scatolamagica */
body.bg-slate-50 .bg-slate-800, body.bg-slate-50 .bg-slate-800\/50, body.bg-slate-50 .bg-slate-900 { background-color: #ffffff !important; border-color: #cbd5e1 !important; }
/* era in: campionati, partite */
body.bg-slate-50 [class^="bg-slate-6"],
body.bg-slate-50 [class*=" bg-slate-6"],
body.bg-slate-50 [class^="bg-slate-7"],
body.bg-slate-50 [class*=" bg-slate-7"],
body.bg-slate-50 [class^="bg-slate-8"],
body.bg-slate-50 [class*=" bg-slate-8"],
body.bg-slate-50 [class^="bg-slate-9"],
body.bg-slate-50 [class*=" bg-slate-9"] { background-color: #ffffff !important; color: #1e293b !important; }
/* era in: campionati, partite */
body.bg-slate-50 [class^="bg-slate-"][class*="\/"],
body.bg-slate-50 [class*=" bg-slate-"][class*="\/"] { background-color: #f8fafc !important; color: #1e293b !important; }
/* era in: campionati, partite */
body.bg-slate-50 [class^="text-slate-"],
body.bg-slate-50 [class*=" text-slate-"],
body.bg-slate-50 [class^="text-white"],
body.bg-slate-50 [class*=" text-white"],
body.bg-slate-50 .text-white { color: #1e293b !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   🔴🔴★★★ IL FONDO SATURO — 4 settembre 2026, e l'ha visto Fabio, non il banco:
   «ho visto un fondo verde scuro con testo nero all'interno, e non va bene, questo
   su tema chiaro». Era il riquadro «CAMPIONATO 1945-46»: sotto c'e' una sfumatura
   verde (#15803d → #166534), il testo e' scritto `text-white` — giusto, e c'e' pure
   il commento che lo spiega — ma la riga qui sopra lo ribalta a quasi-nero.
   Contrasto **2,5**, tre testi illeggibili.
 ★ E la sonda non lo vedeva: cercava `background-color` e una sfumatura sta in
   `background-image`. Ogni testo su una sfumatura le era invisibile — non un caso,
   una FAMIGLIA intera. Ora le sfumature le legge, e tiene la tinta peggiore.
 ★★★ Il rimedio non e' una toppa per quel riquadro: e' un NOME che una superficie
   colorata puo' darsi, `ndc-fondo-saturo`. Il tema chiaro non sa e non puo' sapere
   se un fondo e' scuro — glielo dice chi lo disegna. Chi mette una sfumatura satura
   sotto del testo bianco aggiunge questa classe, e il bianco resta bianco.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ⚠️ 4 set 2026 — le superfici del Quiz sono sature per disegno («il quiz deve
   sembrare un quiz»): il tema chiaro ci metteva il **nero su verde campo** (1,41) e
   il **nero su blu notte** (1,30), i due contrasti peggiori di tutto il sito.
   Portano gia' un nome loro: si aggiungono qui, accanto a `ndc-fondo-saturo`. */
body.bg-slate-50 .flashcard-front, body.bg-slate-50 .flashcard-front *,
body.bg-slate-50 .flashcard-back, body.bg-slate-50 .flashcard-back * { color: #fff !important; }

body.bg-slate-50 .ndc-fondo-saturo[style*="color:#fff"],
body.bg-slate-50 .ndc-fondo-saturo[style*="color: #fff"],
body.bg-slate-50 .ndc-fondo-saturo[style*="color: rgb(255, 255, 255)"],
body.bg-slate-50 .ndc-fondo-saturo .text-white,
body.bg-slate-50 .ndc-fondo-saturo [style*="color: white"],
body.bg-slate-50 .ndc-fondo-saturo [style*="color:white"],
body.bg-slate-50 .ndc-fondo-saturo [style*="color: #fff"],
body.bg-slate-50 .ndc-fondo-saturo [style*="color:#fff"] { color: #fff !important; }
/* …e il testo che non dichiara un colore proprio: senza questa riga eredita il nero
   del tema chiaro e sparisce sul fondo saturo. */
body.bg-slate-50 .ndc-fondo-saturo,
body.bg-slate-50 .ndc-fondo-saturo * { color: #fff; }
/* era in: campionati, partite */
body.bg-slate-50 [class^="border-slate-"],
body.bg-slate-50 [class*=" border-slate-"] { border-color: #cbd5e1 !important; }
/* era in: campionati, partite */
body.bg-slate-50 .border-slate-700, body.bg-slate-50 .border-slate-800 { border-color: #e2e8f0 !important; }
/* era in: calciatori, squadre */
body:not(.bg-slate-50):not(.bg-black) .bg-white { background-color: #1e293b !important; border-color: #334155 !important; }
/* era in: calciatori, squadre */
body:not(.bg-slate-50):not(.bg-black) .text-slate-900, body:not(.bg-slate-50):not(.bg-black) .text-slate-800, body:not(.bg-slate-50):not(.bg-black) .text-gray-900, body:not(.bg-slate-50):not(.bg-black) .text-gray-800 { color: #ffffff !important; }
/* ══════════════════════════════════════════════════════════════════════════════
   🔴🔴★★★ 4 settembre 2026 — CHI PORTA UN FONDO CHIARO SUO TIENE IL TESTO SCURO.
   La regola qui sopra ribalta `.text-slate-900` in bianco quando il tema e' scuro:
   giusto per il testo che sta sul fondo pagina, **sbagliato** per una pastiglia che
   si porta dietro il proprio fondo chiaro. Sulla Timeline della Juventus il
   piazzamento «· 1ª» delle stagioni con lo scudetto e' scritto `bg-amber-500
   text-slate-900` — ambra con testo scuro, corretto — e usciva **bianco su ambra**:
   contrasto **2,15**, su tutt'e due gli schermi.
 ★ E' lo specchio esatto del difetto delle pastiglie dei giocatori sul campo, dove
   era il tema CHIARO a mettere il nero sul granata. Stessa lezione: il colore che
   una superficie si porta addosso non lo decide il tema.
 ⚠️ Si elencano le famiglie di fondo CHIARO, una per una. Come per le superfici
   scure piu' sopra, «chiaro» non e' una cosa che il CSS sappia vedere: lo dice chi
   disegna. Chi aggiunge un fondo chiaro nuovo aggiunge la sua famiglia qui.
   ══════════════════════════════════════════════════════════════════════════════ */
body:not(.bg-slate-50):not(.bg-black) [class*="bg-amber-"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-yellow-"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-lime-"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-orange-3"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-orange-4"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) .bg-white.text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-slate-1"].text-slate-900,
body:not(.bg-slate-50):not(.bg-black) [class*="bg-slate-2"].text-slate-900 { color: #0f172a !important; }

/* era in: calciatori, squadre */
body:not(.bg-slate-50):not(.bg-black) .text-slate-700, body:not(.bg-slate-50):not(.bg-black) .text-gray-700 { color: #e2e8f0 !important; }
/* era in: calciatori, squadre */
body:not(.bg-slate-50):not(.bg-black) .text-slate-600, body:not(.bg-slate-50):not(.bg-black) .text-gray-600 { color: #94a3b8 !important; }
/* era in: calciatori, squadre */
body:not(.bg-slate-50):not(.bg-black) .hover\:bg-slate-100:hover, body:not(.bg-slate-50):not(.bg-black) .hover\:bg-slate-50:hover { background-color: #334155 !important; }
/* era in: arbitri, calciatori */
body:not(.bg-slate-50) canvas+div, body:not(.bg-slate-50) canvas+div *, body:not(.bg-slate-50) canvas~div, body:not(.bg-slate-50) canvas~div * { color: #FFFFFF !important; }
/* era in: arbitri, calciatori */
body:not(.bg-slate-50) [class*="chart"] span, body:not(.bg-slate-50) [class*="legend"] span { color: #FFFFFF !important; }
/* era in: arbitri, calciatori */
body.bg-slate-50 canvas+div, body.bg-slate-50 canvas+div *, body.bg-slate-50 canvas~div, body.bg-slate-50 canvas~div * { color: #1e293b !important; }
/* era in: arbitri, calciatori */
body.bg-slate-50 [class*="chart"] span, body.bg-slate-50 [class*="legend"] span { color: #1e293b !important; }

/* «Apri Scheda» — la regola finale, in coda e con specificita' alta di proposito.
   Ci sono voluti tre tentativi perche' su questo bottone competono regole in
   responsive.css, nel <style> della pagina (che in Squadre viene PRIMA dei CSS
   esterni) e qui; e la vecchia eccezione «testo bianco sui fondi colorati» vinceva
   per via del `:not(...)`, che le aggiungeva un livello di specificita'.
   Tinta tenue + testo scuro + ombra: la scelta di Fabio del 21 lug. */
/* Colore di «Apri Scheda»: ora sta SOLO in css/palette.css (mazzetta C, 22 lug 2026).
   Qui c'erano strati sovrapposti che si battevano a colpi di specificità. */


/* ── La lente «Statistiche rapide» (Calciatori) ────────────────────────────
   Fondo `emerald-500/10`, cioe' verde al 10%: su card bianca e' quasi bianco, e
   la lente verde sopra spariva — segnalato da Fabio guardando il sito.
   Le classi con la barra sono escluse di proposito dalle regole generali (sono
   traslucide e vanno lasciate stare), quindi serve questa eccezione mirata.
   Tinta piena chiara + icona scura: la stessa scelta degli altri comandi. */
body.bg-slate-50 button[class^="bg-emerald-500/10"],
body.bg-slate-50 button[class*=" bg-emerald-500/10"] {
    background-color: #a7f3d0 !important;
    color: #064e3b !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.10);
}body.bg-slate-50 button[class^="bg-emerald-500/10"] i,
body.bg-slate-50 button[class*=" bg-emerald-500/10"] i{ color: #064e3b !important; }body.bg-slate-50 button[class^="bg-emerald-500/10"]:hover,
body.bg-slate-50 button[class*=" bg-emerald-500/10"]:hover{ background-color: #6ee7b7 !important; }


/* Etichette «Menu» e «Aspetto» della barra laterale — tema chiaro (22 lug 2026).
   Vedi la nota gemella in responsive.css: erano a 3,14 di contrasto. */
body.bg-slate-50 #mainSidebar .sidebar-toggle-wrap > span,
body.bg-slate-50 #mainSidebar #sidebar-aspetto > p {
    color: #334155 !important;
}