/**
 * V2 ENHANCEMENTS CSS
 * Miglioramenti grafici incrementali per datinumeridelcalcio.it V2
 * Non sovrascrive funzionalità, solo stile
 */

/* ══════════════════════════════════════════════════
   0. FONT SIZE GLOBALE — Accessibilità (utenza 50+)
   ══════════════════════════════════════════════════ */

/* Base: nessun testo sotto 13px */
body {
    font-size: 15px !important;
}
/* Override per testi troppo piccoli */
p, span, a, li, label, select, input, button, td, th, div {
    min-font-size: 13px;
}
/* Testi descrittivi nelle card */
.text-xs { font-size: 0.8rem !important; }          /* 12px → 12.8px */
.text-sm { font-size: 0.9rem !important; }          /* 14px → 14.4px */
/* Tab, filtri, bottoni */
.text-base { font-size: 1rem !important; }
/* ⚠️★★★ RIMOSSA il 30 luglio 2026 — UNA CLASSE DI COLORE NON DECIDE LA DIMENSIONE
   Era `.text-slate-400 { font-size: 0.88rem }` (14 px), nata per «le descrizioni slate-400
   nelle card della homepage». Ma `.text-slate-400` è una classe di COLORE, applicata a
   centinaia di elementi, e questa regola imponeva 14 px a tutti — battendo per ordine di
   caricamento anche le classi di corpo esplicite di Tailwind, che hanno la stessa specificità.

   ★ Come è venuta fuori: in Campionati `#statDraws` (`text-4xl text-slate-400`) stava a
     16 px mentre il gemello accanto (`text-4xl text-red-400`) stava a 36. Stessa classe di
     corpo, colore diverso, dimensione diversa. `palette.css` aveva già una catena di
     `:not()` per difendersi da questa regola, ed è la prova che il difetto era noto e
     tamponato invece che rimosso.

   ★ Misurato il raggio prima di toglierla, su una schermata reale: 69 elementi con
     `.text-slate-400`, di cui 47 con un corpo esplicito e **1 solo** effettivamente
     schiacciato. I 22 senza corpo esplicito stavano a 14 px, cioè GIÀ sotto il pavimento
     dei 15: togliere la regola li porta a ereditare il corpo del contesto, che è meglio.

   Il colore resta dove deve stare: nelle classi di colore. */
/* Sidebar voci */
#mainSidebar span { font-size: 0.85rem !important; }
/* Modale e overlay */
.modal-body, .policy-body { font-size: 0.92rem !important; line-height: 1.65 !important; }

/* ══════════════════════════════════════════════════
   1. TABELLE MIGLIORATE
   ══════════════════════════════════════════════════ */

/* Zebra striping più evidente */
table.v2-table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.5);
}
table.v2-table tbody tr:nth-child(odd) {
    background: rgba(15, 23, 42, 0.3);
}
table.v2-table tbody tr:hover {
    background: rgba(34, 211, 238, 0.08) !important;
    transition: background 0.15s ease;
}

/* Header sticky con linea accent */
table.v2-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #1e293b;
    border-bottom: 2px solid #10b981;
    padding: 0.5rem 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
    white-space: nowrap;
}
table.v2-table thead th:hover {
    color: #e2e8f0;
    cursor: pointer;
}

/* Numeri monospace allineati a destra */
table.v2-table td.num,
table.v2-table td[data-type="number"] {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Celle standard */
table.v2-table td {
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid rgba(51, 65, 85, 0.4);
    font-size: 0.9rem;
    color: #cbd5e1;
    vertical-align: middle;
}

/* Prima colonna (rank/nome) più visibile */
table.v2-table td:first-child {
    color: #e2e8f0;
    font-weight: 500;
}

/* Riga selezionata */
table.v2-table tbody tr.selected {
    background: rgba(16, 185, 129, 0.12) !important;
    border-left: 3px solid #10b981;
}

/* Tema chiaro */
body.bg-slate-50 table.v2-table tbody tr:nth-child(even) { background: rgba(241, 245, 249, 0.7); }
body.bg-slate-50 table.v2-table tbody tr:nth-child(odd) { background: #ffffff; }
body.bg-slate-50 table.v2-table tbody tr:hover { background: rgba(16, 185, 129, 0.06) !important; }
body.bg-slate-50 table.v2-table thead th { background: #f1f5f9; border-bottom-color: #059669; color: #475569; }
body.bg-slate-50 table.v2-table td { border-bottom-color: #e2e8f0; color: #334155; }

/* ══════════════════════════════════════════════════
   2. BOTTONI — 3 LIVELLI COERENTI
   ══════════════════════════════════════════════════ */

/* Primario: azione principale */
.v2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}
.v2-btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}
.v2-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
}

/* Secondario: navigazione, filtri */
.v2-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.82rem;
    border: 1px solid #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.v2-btn-secondary:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}
.v2-btn-secondary.active {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

/* Terziario: utility (CSV, Copia, Fullscreen) */
.v2-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(51, 65, 85, 0.5);
    color: #94a3b8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.v2-btn-icon:hover {
    background: rgba(51, 65, 85, 0.8);
    color: #e2e8f0;
}
.v2-btn-icon .v2-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.6rem;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.v2-btn-icon:hover .v2-tooltip { display: block; }

/* Tema chiaro bottoni */
body.bg-slate-50 .v2-btn-secondary { color: #475569; border-color: #cbd5e1; }
body.bg-slate-50 .v2-btn-secondary:hover { color: #059669; border-color: #059669; }
body.bg-slate-50 .v2-btn-icon { background: rgba(226, 232, 240, 0.6); color: #475569; }
body.bg-slate-50 .v2-btn-icon:hover { background: #e2e8f0; color: #1e293b; }

/* ══════════════════════════════════════════════════
   3. BARRA AZIONI STICKY MOBILE
   ══════════════════════════════════════════════════ */

#v2-action-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #334155;
    padding: 0.5rem 0.75rem;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    #v2-action-bar.has-actions {
        display: flex;
    }
    /* Spazio per la barra in basso */
    body.v2-has-action-bar {
        padding-bottom: 56px;
    }
}

#v2-action-bar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: all 0.15s;
}
#v2-action-bar button i {
    font-size: 1.1rem;
}
#v2-action-bar button:hover,
#v2-action-bar button.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

body.bg-slate-50 #v2-action-bar { background: rgba(248, 250, 252, 0.97); border-top-color: #e2e8f0; }

/* ══════════════════════════════════════════════════
   4. BREADCRUMB
   ══════════════════════════════════════════════════ */

/* ⚠️ Misure in PIXEL, non in rem (22 lug 2026). Erano 0.72rem: col font-root a 17px
   fanno ~12px, e con «Aspetto → A−» scendevano ancora. La casetta e il nome
   dell'ambiente sono la via di ritorno alla home da qualunque punto del sito: devono
   essere leggibili e grandi abbastanza da centrarli col dito. Su mobile erano già
   stati portati a px l'8 luglio; il desktop era rimasto indietro. */
#v2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 15px;
    color: #64748b;
    background: rgba(15, 23, 42, 0.4);
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
#v2-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
}
/* La casetta: bersaglio da 32px, così si prende col dito e col mouse senza mirare */
#v2-breadcrumb a i.fa-home {
    font-size: 19px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s;
}
#v2-breadcrumb a:hover i.fa-home { background: rgba(148, 163, 184, 0.16); }
#v2-breadcrumb a:hover {
    color: #10b981;
}
#v2-breadcrumb .separator {
    color: #475569;
    font-size: 0.6rem;
}
#v2-breadcrumb .current {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 15px;
}
/* ★★ Il pavimento del desktop (Fabio, 1 agosto). Il nome della pagina era l'ULTIMO
   elemento sotto misura rimasto in ogni ambiente convertito al kit: lo ritrovavo da
   solo in fondo a ogni misurazione, in Storia come altrove. */
@media (min-width: 900px) {
    #v2-breadcrumb .current { font-size: 18px; }
}

@media (max-width: 768px) {
    /* Breadcrumb leggibile su mobile (era ~7.8px, illeggibile — Fabio 8 Lug).
       px assoluti: il font-root è scalato su mobile, i rem rendevano il testo minuscolo. */
    #v2-breadcrumb { padding: 0.5rem 0.85rem; font-size: 14px; gap: 0.45rem; }
    #v2-breadcrumb a, #v2-breadcrumb a i.fa-home, #v2-breadcrumb a i.fas { font-size: 15px; }
    #v2-breadcrumb .current { font-size: 14px; font-weight: 700; }
    #v2-breadcrumb .separator { font-size: 11px; }
}

body.bg-slate-50 #v2-breadcrumb { background: rgba(248, 250, 252, 0.5); }
body.bg-slate-50 #v2-breadcrumb a { color: #475569; }
body.bg-slate-50 #v2-breadcrumb a:hover { color: #059669; }
body.bg-slate-50 #v2-breadcrumb .current { color: #1e293b; }

/* ══════════════════════════════════════════════════
   5. CHIP FILTRI ATTIVI
   ══════════════════════════════════════════════════ */

#v2-active-filters {
    display: none;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0;
    align-items: center;
}
#v2-active-filters.has-filters {
    display: flex;
}
.v2-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 0.72rem;
    color: #10b981;
    font-weight: 500;
}
.v2-filter-chip .remove {
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.v2-filter-chip .remove:hover {
    opacity: 1;
}
.v2-filter-clear {
    font-size: 0.7rem;
    color: #ef4444;
    cursor: pointer;
    margin-left: 0.5rem;
    text-decoration: underline;
}
.v2-filter-clear:hover {
    color: #f87171;
}

/* ══════════════════════════════════════════════════
   6. TOOLTIP CONTESTUALI "?"
   ══════════════════════════════════════════════════ */

.v2-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    border: 1.5px solid rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: help;
    margin-left: 0.4rem;
    position: relative;
    transition: all 0.15s;
    vertical-align: middle;
}
.v2-help-icon:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.v2-help-popup {
    display: none;
    position: fixed;
    width: 220px;
    padding: 0.6rem 0.8rem;
    background: #1e293b;
    color: #cbd5e1;
    font-size: 0.73rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 10000;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
}
.v2-help-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}
.v2-help-popup.v2-popup-visible {
    display: block;
}

body.bg-slate-50 .v2-help-icon { background: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.3); }
body.bg-slate-50 .v2-help-icon:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
body.bg-slate-50 .v2-help-popup { background: #fff; color: #334155; border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
body.bg-slate-50 .v2-help-popup::after { border-top-color: #fff; }

/* ══════════════════════════════════════════════════
   7. SIDEBAR MIGLIORATA — Separatore + Accent bar
   ══════════════════════════════════════════════════ */

/* Accent bar laterale sezione attiva */
.v2-nav-active {
    position: relative;
}
.v2-nav-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #10b981;
}

/* Separatore tra consultazione e strumenti */
.v2-nav-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, #334155, transparent);
    margin: 0.5rem 0.75rem;
}

/* Badge "NEW" su sezioni */
.v2-badge-new {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
    background: #ef4444;
    color: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.2;
}

/* ══════════════════════════════════════════════════
   8. CARD MIGLIORATE — Profondità
   ══════════════════════════════════════════════════ */

.v2-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}
.v2-card:hover {
    border-color: #475569;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

body.bg-slate-50 .v2-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
body.bg-slate-50 .v2-card:hover { border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* ══════════════════════════════════════════════════
   9. ACCENT PER SEZIONE + FASCIA COLORATA
   ══════════════════════════════════════════════════ */

/* Colori accent — Palette differenziata (nessun colore troppo simile)
 * Campionati:  ORO (trofeo)
 * Partite:     VERDE SMERALDO (campo)
 * Campionati:  GIALLO (trofeo/oro)
 * Partite:     VERDE (campo)
 * Squadre:     BLU (stemmi)
 * Calciatori:  CELESTE (maglie azzurre)
 * Allenatori:  MARRONE (panchina classica)
 * Arbitri:     ROSSO (cartellino)
 * Storia:      VIOLA (nostalgia)
 * Scatola:     ARANCIO (magia)
 * Scommettiamo:ROSA (scommessa)
 * CalcIA:      AZZURRO (AI/tech)
 * Quiz:        VERDE ACQUA (gioco)
 */
body[data-section="campionati"] .v2-accent { color: #ca8a04; }
body[data-section="partite"] .v2-accent { color: #16a34a; }
body[data-section="squadre"] .v2-accent { color: #1d4ed8; }
body[data-section="calciatori"] .v2-accent { color: #22d3ee; }
body[data-section="allenatori"] .v2-accent { color: #a16207; }
body[data-section="arbitri"] .v2-accent { color: #dc2626; }
body[data-section="varie"] .v2-accent { color: #db2777; }
body[data-section="scatolamagica"] .v2-accent { color: #ea580c; }
body[data-section="scommettiamo"] .v2-accent { color: #db2777; }
body[data-section="calcia"] .v2-accent { color: #3b82f6; }
body[data-section="quiz"] .v2-accent { color: #0d9488; }

/* Header accent border per sezione */
body[data-section="campionati"] table.v2-table thead th { border-bottom-color: #ca8a04; }
body[data-section="partite"] table.v2-table thead th { border-bottom-color: #16a34a; }
body[data-section="squadre"] table.v2-table thead th { border-bottom-color: #1d4ed8; }
body[data-section="calciatori"] table.v2-table thead th { border-bottom-color: #22d3ee; }
body[data-section="allenatori"] table.v2-table thead th { border-bottom-color: #a16207; }
body[data-section="arbitri"] table.v2-table thead th { border-bottom-color: #dc2626; }
body[data-section="varie"] table.v2-table thead th { border-bottom-color: #db2777; }
body[data-section="scatolamagica"] table.v2-table thead th { border-bottom-color: #ea580c; }
body[data-section="scommettiamo"] table.v2-table thead th { border-bottom-color: #db2777; }
body[data-section="calcia"] table.v2-table thead th { border-bottom-color: #3b82f6; }
body[data-section="quiz"] table.v2-table thead th { border-bottom-color: #0d9488; }

/* ── FASCIA COLORATA SOTTO HEADER ── */
#v2-section-bar {
    height: 2px;
    width: 100%;
    position: relative;
    z-index: 49;
    transition: background 0.3s ease;
}

/* Gradiente con il colore della sezione + sfumatura */
body[data-section="campionati"] #v2-section-bar {
    background: linear-gradient(90deg, #ca8a04 0%, #a16207 40%, rgba(202,138,4,0.1) 100%);
}
body[data-section="partite"] #v2-section-bar {
    background: linear-gradient(90deg, #16a34a 0%, #15803d 40%, rgba(22,163,74,0.1) 100%);
}
body[data-section="squadre"] #v2-section-bar {
    background: linear-gradient(90deg, #1d4ed8 0%, #1e3a8a 40%, rgba(29,78,216,0.1) 100%);
}
body[data-section="calciatori"] #v2-section-bar {
    background: linear-gradient(90deg, #22d3ee 0%, #06b6d4 40%, rgba(34,211,238,0.1) 100%);
}
body[data-section="allenatori"] #v2-section-bar {
    background: linear-gradient(90deg, #a16207 0%, #854d0e 40%, rgba(161,98,7,0.1) 100%);
}
body[data-section="arbitri"] #v2-section-bar {
    background: linear-gradient(90deg, #dc2626 0%, #b91c1c 40%, rgba(220,38,38,0.1) 100%);
}
body[data-section="varie"] #v2-section-bar {
    background: linear-gradient(90deg, #db2777 0%, #be185d 40%, rgba(219,39,119,0.1) 100%);
}
body[data-section="scatolamagica"] #v2-section-bar {
    background: linear-gradient(90deg, #ea580c 0%, #c2410c 40%, rgba(234,88,12,0.1) 100%);
}
body[data-section="scommettiamo"] #v2-section-bar {
    background: linear-gradient(90deg, #db2777 0%, #be185d 40%, rgba(219,39,119,0.1) 100%);
}
body[data-section="calcia"] #v2-section-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 40%, rgba(59,130,246,0.1) 100%);
}
body[data-section="quiz"] #v2-section-bar {
    background: linear-gradient(90deg, #0d9488 0%, #0f766e 40%, rgba(13,148,136,0.1) 100%);
}

/* Glow sottile della fascia */
#v2-section-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: inherit;
    opacity: 0.1;
    filter: blur(4px);
}

/* ══════════════════════════════════════════════════
   10. ANIMAZIONI SOTTILI
   ══════════════════════════════════════════════════ */

@keyframes v2-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.v2-animate-in {
    animation: v2-fadeIn 0.3s ease-out;
}

@keyframes v2-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.v2-slide-up {
    animation: v2-slideUp 0.4s ease-out;
}

/* Transizione smooth per cambio tab */
.v2-tab-content {
    transition: opacity 0.2s ease;
}
.v2-tab-content.entering {
    opacity: 0;
}

/* ══════════════════════════════════════════════════
   11. FONT MONOSPACE IMPORT
   ══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════
   12. RESPONSIVE MOBILE FIXES
   ══════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* --- Breadcrumb: horizontal scroll on mobile --- */
    #v2-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        gap: 0.25rem;
    }
    #v2-breadcrumb::-webkit-scrollbar { display: none; }

    /* --- Filter chips: proper wrapping --- */
    #v2-active-filters {
        gap: 0.3rem;
        padding: 0.4rem 0.5rem;
    }
    .v2-filter-chip {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Tooltip: prevent viewport overflow on mobile --- */
    .v2-help-popup {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85vw;
        max-width: 300px;
        z-index: 10000;
        font-size: 0.78rem;
        padding: 0.8rem 1rem;
    }
    .v2-help-popup::after { display: none; }
    .v2-btn-icon .v2-tooltip {
        left: auto;
        right: 0;
        transform: none;
        font-size: 0.65rem;
    }

    /* --- Section bar: ensure visibility on mobile --- */
    #v2-section-bar {
        height: 3px;
        min-height: 3px;
    }

    /* --- Action bar: well-spaced buttons --- */
    #v2-action-bar {
        padding: 0.4rem 0.5rem;
        gap: 0.25rem;
    }
    #v2-action-bar button {
        font-size: 0.6rem;
        padding: 0.25rem 0.35rem;
        min-width: 0;
        flex: 1 1 0;
        max-width: 72px;
    }
    #v2-action-bar button i {
        font-size: 1rem;
    }

    /* --- Table: minimum 13px font on mobile --- */
    table.v2-table td,
    table.v2-table th {
        font-size: 13px !important;
        padding: 0.35rem 0.3rem;
    }
    table.v2-table td.num,
    table.v2-table td[data-type="number"] {
        font-size: 13px !important;
    }
    table.v2-table thead th {
        font-size: 11px !important;
        padding: 0.4rem 0.3rem;
    }

    /* --- Cards: disable hover translateY on touch (no hover on mobile) --- */
    .v2-card:hover {
        transform: none;
    }

    /* --- Buttons: better sizing on mobile --- */
    .v2-btn-primary {
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
    }
    .v2-btn-secondary {
        font-size: 0.78rem;
        padding: 0.4rem 0.7rem;
    }
}

/* Also disable hover translateY for touch devices via media query */
@media (hover: none) {
    .v2-card:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════
   13. TEMA CHIARO — REGOLE GLOBALI COMPLETE
   Coprono TUTTI i componenti di tutte le sezioni.
   Usa selettori wildcard [class*="..."] per catturare
   classi Tailwind hardcoded e varianti con opacità.
   ══════════════════════════════════════════════════ */

/* --- BASE BODY --- */
body.bg-slate-50 {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* --- SFONDI SCURI → BIANCHI/CHIARI ---
   Tailwind dark palette: slate-600/700/800/900/950
   Cattura anche varianti con opacità: bg-slate-800/50, bg-slate-900/95, ecc. */
body.bg-slate-50 [class^="bg-slate-6"],
body.bg-slate-50 [class*=" bg-slate-6"],
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;
}

/* bg-slate-700 → leggermente off-white per gerarchia visiva (card annidate) */
body.bg-slate-50 [class^="bg-slate-7"],
body.bg-slate-50 [class*=" bg-slate-7"] {
    background-color: #f1f5f9 !important;
}

/* bg-slate-500 → neutro chiaro */
body.bg-slate-50 [class^="bg-slate-5"],
body.bg-slate-50 [class*=" bg-slate-5"] {
    background-color: #f8fafc !important;
}

/* bg-black → bianco */
body.bg-slate-50 .bg-black {
    background-color: #ffffff !important;
}

/* bg-gray-800/900 */
body.bg-slate-50 .bg-gray-900,
body.bg-slate-50 .bg-gray-800,
body.bg-slate-50 .bg-gray-950 {
    background-color: #ffffff !important;
}

/* --- TESTI CHIARI → SCURI --- */

/* text-white e tutte le varianti → slate-900 */
body.bg-slate-50 .text-white,
body.bg-slate-50 [class^="text-white"],
body.bg-slate-50 [class*=" text-white"] {
    color: #1e293b !important;
}

/* text-slate-300 (near-white in dark) → slate-700 */
body.bg-slate-50 [class^="text-slate-3"],
body.bg-slate-50 [class*=" text-slate-3"] {
    color: #374151 !important;
}

/* text-slate-400 (muted in dark) → slate-600 */
body.bg-slate-50 [class^="text-slate-4"],
body.bg-slate-50 [class*=" text-slate-4"] {
    color: #4b5563 !important;
}

/* text-slate-500 → slate-500 (già medio, ok) */
body.bg-slate-50 [class^="text-slate-5"],
body.bg-slate-50 [class*=" text-slate-5"] {
    color: #64748b !important;
}

/* text-gray-* → dark */
body.bg-slate-50 [class^="text-gray-3"],
body.bg-slate-50 [class*=" text-gray-3"],
body.bg-slate-50 [class^="text-gray-4"],
body.bg-slate-50 [class*=" text-gray-4"] {
    color: #6b7280 !important;
}

/* Headings e font-weight */
body.bg-slate-50 h1,
body.bg-slate-50 h2,
body.bg-slate-50 h3,
body.bg-slate-50 h4,
body.bg-slate-50 h5,
body.bg-slate-50 h6,
body.bg-slate-50 .font-black,
body.bg-slate-50 .font-bold {
    color: #0f172a !important;
}

/* --- COLORI ACCENT → VERSIONI PIÙ SCURE (leggibili su bianco) --- */

body.bg-slate-50 .text-blue-400,
body.bg-slate-50 .text-blue-300   { color: #2563eb !important; }

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

body.bg-slate-50 .text-green-400,
body.bg-slate-50 .text-green-300  { color: #16a34a !important; }

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

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

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

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

body.bg-slate-50 .text-purple-400,
body.bg-slate-50 .text-purple-300,
body.bg-slate-50 .text-violet-400,
body.bg-slate-50 .text-violet-300  { color: #7c3aed !important; }

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

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

body.bg-slate-50 .text-indigo-400,
body.bg-slate-50 .text-indigo-300  { color: #4f46e5 !important; }

/* --- BORDI SCURI → CHIARI --- */
body.bg-slate-50 [class^="border-slate-5"],
body.bg-slate-50 [class*=" border-slate-5"],
body.bg-slate-50 [class^="border-slate-6"],
body.bg-slate-50 [class*=" border-slate-6"],
body.bg-slate-50 [class^="border-slate-7"],
body.bg-slate-50 [class*=" border-slate-7"],
body.bg-slate-50 [class^="border-slate-8"],
body.bg-slate-50 [class*=" border-slate-8"],
body.bg-slate-50 [class^="border-slate-9"],
body.bg-slate-50 [class*=" border-slate-9"] {
    border-color: #cbd5e1 !important;
}body.bg-slate-50 [class^="border-slate-4"],
body.bg-slate-50 [class*=" border-slate-4"]{
    border-color: #e2e8f0 !important;
}

/* --- OMBRE PER PROFONDITÀ (depth & rilievo) ---
   Sfondo bianco senza ombre è piatto: le ombre
   ridisegnano la gerarchia visiva nel tema chiaro. */

/* Card principali (bg-slate-800/900): ombra media */
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"],
body.bg-slate-50 .card-item,
body.bg-slate-50 .dashboard-card,
body.bg-slate-50 .v2-card,
body.bg-slate-50 .glass-panel {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
                0 2px 4px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Card annidate (bg-slate-700): ombra leggera */
body.bg-slate-50 [class^="bg-slate-7"],
body.bg-slate-50 [class*=" bg-slate-7"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07),
                0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Pannelli grandi (sidebar, header, modal): ombra strutturale */
body.bg-slate-50 #mainSidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
}

body.bg-slate-50 .glass-header,
body.bg-slate-50 header,
body.bg-slate-50 nav.sticky {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

body.bg-slate-50 .modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* --- INPUT, SELECT, TEXTAREA --- */

body.bg-slate-50 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.bg-slate-50 select,
body.bg-slate-50 textarea {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

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

/* Select con bg-slate-800 / bg-slate-700 hardcoded */
body.bg-slate-50 select.bg-slate-800,
body.bg-slate-50 select.bg-slate-700,
body.bg-slate-50 select[class^="bg-slate-"],
body.bg-slate-50 select[class*=" bg-slate-"] {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* --- SIDEBAR --- */

body.bg-slate-50 #mainSidebar {
    background-color: #f8fafc !important;
    border-right-color: #e2e8f0 !important;
}

/* Tutti gli elementi dentro la sidebar */
body.bg-slate-50 #mainSidebar [class^="bg-slate-"],
body.bg-slate-50 #mainSidebar [class*=" bg-slate-"] {
    background-color: #ffffff !important;
}body.bg-slate-50 #mainSidebar [class^="text-slate-4"],
body.bg-slate-50 #mainSidebar [class*=" text-slate-4"],
body.bg-slate-50 #mainSidebar [class^="text-slate-3"],
body.bg-slate-50 #mainSidebar [class*=" text-slate-3"]{
    color: #64748b !important;
}body.bg-slate-50 #mainSidebar [class^="border-slate-"],
body.bg-slate-50 #mainSidebar [class*=" border-slate-"]{
    border-color: #e2e8f0 !important;
}

/* --- GLASS HEADER --- */

body.bg-slate-50 .glass-header {
    background-color: rgba(248, 250, 252, 0.97) !important;
    border-bottom-color: #e2e8f0 !important;
}

/* --- MODAL E OVERLAY --- */

body.bg-slate-50 .modal-content {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

/* --- BADGE E CHIP --- */
body.bg-slate-50 [class^="bg-slate-6"].rounded-full,
body.bg-slate-50 [class*=" bg-slate-6"].rounded-full,
body.bg-slate-50 [class^="bg-slate-7"].rounded-full,
body.bg-slate-50 [class*=" bg-slate-7"].rounded-full,
body.bg-slate-50 [class^="bg-slate-8"].rounded-full,
body.bg-slate-50 [class*=" bg-slate-8"].rounded-full {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* --- DIVIDER / SEPARATORI --- */
body.bg-slate-50 [class^="border-slate-7"],
body.bg-slate-50 [class*=" border-slate-7"],
body.bg-slate-50 [class*="divide-slate-7"] {
    border-color: #e2e8f0 !important;
}

/* --- SCROLLBAR (Webkit) --- */

body.bg-slate-50 ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

body.bg-slate-50 ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

body.bg-slate-50 ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- BARRA AZIONI MOBILE nel tema chiaro --- */

body.bg-slate-50 #v2-action-bar button {
    color: #475569 !important;
}

body.bg-slate-50 #v2-action-bar button:hover,
body.bg-slate-50 #v2-action-bar button.active {
    color: #059669 !important;
    background: rgba(5, 150, 105, 0.08) !important;
}

/* --- SECTION BAR: adatta il colore nel tema chiaro --- */

body.bg-slate-50 #v2-section-bar {
    opacity: 0.7;
}

/* --- OLED / BLACK THEME — invariato (nessuna regola bg-black) --- */

/* ══════════════════════════════════════════════════
   4. HOME PAGE CARDS (Meno scuri, testo più leggibile)
   ══════════════════════════════════════════════════ */
body:not(.bg-slate-50) #envGrid > a {
    background-color: #232f42 !important; /* Leggermente più morbido di slate-800 */
}
body:not(.bg-slate-50) #envGrid > a:hover {
    background-color: #2f3d53 !important; /* Si SCHIARISCE al passaggio del mouse! */
}
body:not(.bg-slate-50) #envGrid > a p.text-slate-400 {
    color: #cbd5e1 !important; /* Testo più visibile (slate-300 invece di slate-400) */
}