` dichiara le righe e tace sulle colonne. La colonna implicita vale `auto`, e una traccia `auto` NON scende sotto il min-content dei figli: l'intestazione di Campionati ne chiede 638 px, quindi il main restava largo 638 anche quando ne aveva 480 — e i 158 px di troppo li tagliava `overflow:hidden`, in silenzio. `minmax(0, 1fr)` toglie quel pavimento e la colonna segue il contenitore. ★ Nota: `min-w-0` sul main non bastava — riguarda il main dentro al suo flex padre, non i figli dentro alla griglia del main. Il pavimento era un piano più sotto di dove si guardava. */ main.grid[class*="grid-rows"] { grid-template-columns: minmax(0, 1fr); } /* ============================================================================ TABLET - max-width: 1024px ============================================================================ */ @media (max-width: 1024px) and (min-width: 768px) { /* ★★★ LA BARRA LATERALE QUI È UN MENÙ A SCOMPARSA (29 luglio 2026) Prima era una colonna che spingeva il contenuto: 288 px su 768 sono il 37% della finestra, e all'area di lavoro ne restavano 480 — meno di un telefono girato. Misurato in quello stato: l'intestazione di Campionati usciva di 158 px, le linguette di Varie di 791. Fabio: «con questo tipo di formato pagina non puoi trasformare la side bar in un drop menu?». Sì — e il meccanismo esisteva già due volte: sotto i 767 px la barra è fuori dal flusso con velo e scorrimento, e `app.toggleSidebar` in auth-global.js dichiara da sé `isOverlayMode = window.innerWidth < 1024`. Mancava solo il CSS: qui sopra i 767 px la barra tornava colonna e l'intenzione cadeva. ⚠️ La regola precedente («width: 200px») non arrivava mai a valere: lo stile che components.js inietta a runtime ha lo stesso peso ed entra dopo. Da qui `body #mainSidebar`, che vince per specificità e non per ordine di caricamento. */ body #mainSidebar, body #mainSidebar.sidebar-desktop-collapsed { position: fixed !important; left: 0; top: 0; bottom: 0; width: 280px !important; min-width: 280px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; z-index: 9998 !important; overflow: hidden !important; transition: transform 0.3s ease !important; } body #mainSidebar.sidebar-closed { transform: translateX(-100%) !important; } body #mainSidebar.sidebar-open { transform: translateX(0) !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5); } /* Il velo che chiude toccando fuori: nasce `hidden md:hidden`, quindi sopra i 768 px resterebbe spento anche dopo che il JS toglie `hidden`. */ #sidebarOverlay:not(.hidden) { display: block !important; } /* Il pulsante che lo apre (nasce `md:hidden`) e la freccia «riduci a 52 px», che fuori dal flusso non vuol dire più niente. */ nav button.md\:hidden, button[onclick*="toggleSidebar"], #menuToggle, .menu-toggle { display: inline-flex !important; } #sidebar-desktop-toggle { display: none !important; } /* Grid a 2 colonne */ /* ⚠️★ LA GRIGLIA CHE MANGIAVA LA PAGINA (29 luglio 2026) `.grid` da solo prende OGNI griglia del sito — compreso lo scheletro: `` e `

`. Fra 768 e 1024 px il body diventava così una griglia a DUE COLONNE invece che a due righe: la barra laterale finiva in una colonna, il contenuto nell'altra ridotto a 162 px su 900, e sotto restava mezzo schermo vuoto. Misurato: `gridTemplateColumns` del body valeva `450px 450px`. ★ È la stessa mina del 27 luglio («le schermate galleggiano»), una fascia più su: allora fu chiusa sotto i 767 px, qui era rimasta. La guardia esclude chi dichiara da sé le proprie tracce — chi scrive `grid-rows-*` o `grid-cols-*` sa già come vuole disporsi, e non va corretto da una regola generica. */ .grid:not(body):not([class*="grid-rows"]):not([class*="grid-cols"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Cards leggermente più piccole */ .coach-card, .player-card { padding: 1rem !important; } /* Statistiche 3 colonne */ .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Tabelle con font leggermente più piccolo */ table { font-size: 13px !important; } /* Prima colonna sticky anche su tablet */ table th:first-child, table td:first-child { position: sticky !important; left: 0 !important; z-index: 10 !important; background: #1e293b !important; } /* Modali più larghe */ .modal-content { max-width: 90vw !important; } /* Tabs scrollabili anche su tablet */ .tabs-container, [class*="tabs"] { overflow-x: auto !important; flex-wrap: nowrap !important; } } /* ============================================================================ LANDSCAPE MOBILE - Orientamento orizzontale ============================================================================ */ @media (max-width: 900px) and (orientation: landscape) { /* Sidebar sempre nascosta in landscape mobile */ #mainSidebar { transform: translateX(-100%) !important; -webkit-transform: translateX(-100%) !important; } /* Modali più basse */ .modal-content { max-height: 80vh !important; } /* Header più compatto */ nav { padding: 0.25rem 0.5rem !important; } /* Nascondi elementi non essenziali in landscape */ .hide-landscape { display: none !important; } } /* ============================================================================ UTILITÀ RESPONSIVE ============================================================================ */ /* Classi per nascondere/mostrare elementi */ /* NOTA: NON sovrascrivere i prefissi sm:/md: di Tailwind CDN qui! Il CDN genera già le media query corrette: @media (min-width: 640px) { .sm\:block { display: block; } } Aggiungere regole custom con max-width invertiva il comportamento, mostrando gli elementi su mobile invece di nasconderli. Rimosso in v2.5.0 — 24/03/2026 */ @media (min-width: 768px) { .sm\:show { display: block !important; } .mobile-only { display: none !important; } } @media (min-width: 1025px) { .lg\:show { display: block !important; } .tablet-only { display: none !important; } } /* Touch-friendly: target minimo 44px */ @media (pointer: coarse) { button, a, input[type="checkbox"], input[type="radio"], select { min-height: 44px; min-width: 44px; } /* Link nelle tabelle */ td a { display: inline-block; padding: 0.5rem; } } /* Disabilita hover su touch devices */ @media (hover: none) { .hover\:bg-slate-700:hover, .hover\:border-blue-500:hover { background-color: inherit; border-color: inherit; } } /* Safe area per notch iPhone */ @supports (padding: env(safe-area-inset-bottom)) { #mainSidebar { padding-bottom: env(safe-area-inset-bottom); } .fixed-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } } /* ============================================================================ SIDEBAR NAVIGATION - LABEL PIÙ GRANDI, MAIUSCOLO, ALLINEATE A SINISTRA ============================================================================ */ /* Container link nella sidebar - allineamento a sinistra */ #mainSidebar nav a, #mainSidebar nav button, nav.grid a, nav.grid button { justify-content: flex-start !important; text-align: left !important; } /* Label ambienti nella sidebar - maiuscolo e più grandi */ #mainSidebar nav a span, #mainSidebar nav button span, #mainSidebar .nav-label, nav.grid a span, nav.grid button span { font-size: 1rem !important; /* 16px */ font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.025em !important; } /* Desktop: label ancora più leggibili */ @media (min-width: 768px) { #mainSidebar nav a span, #mainSidebar nav button span, nav.grid a span, nav.grid button span { font-size: 1.0625rem !important; /* 17px */ font-weight: 700 !important; } } /* Override per classi text-xs e text-sm nella sidebar */ #mainSidebar nav .text-xs, #mainSidebar nav .text-sm { font-size: 1rem !important; text-transform: uppercase !important; } /* ============================================================================ LANDSCAPE: NASCONDI OVERLAY TABELLE (utente ha già ruotato) ============================================================================ */ @media (orientation: landscape) { .table-container::after, .overflow-x-auto:has(table)::after, div:has(> table.wide-table)::after { display: none !important; } } /* ============================================================================ DESKTOP: NASCONDI OVERLAY TABELLE ============================================================================ */ @media (min-width: 768px) { .table-container::after, .overflow-x-auto:has(table)::after, div:has(> table.wide-table)::after { display: none !important; } } /* ============================================================================ TAB FULLSCREEN MODAL - Apre contenuto tab in finestra modale espansa ============================================================================ */ /* Modal overlay per tab fullscreen */ .tab-fullscreen-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .tab-fullscreen-overlay.active { opacity: 1; visibility: visible; } /* Header del modal fullscreen */ .tab-fullscreen-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: linear-gradient(to bottom, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95)); border-bottom: 1px solid rgba(71, 85, 105, 0.5); flex-shrink: 0; } .tab-fullscreen-title { font-size: 1.25rem; font-weight: 700; color: #f8fafc; display: flex; align-items: center; gap: 0.5rem; } .tab-fullscreen-title i { color: #f97316; } .tab-fullscreen-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .tab-fullscreen-close:hover { background: rgba(239, 68, 68, 0.4); color: #fecaca; transform: scale(1.1); } /* Contenuto del modal fullscreen */ .tab-fullscreen-content { flex: 1; overflow: auto; padding: 1rem; background: #0f172a; -webkit-overflow-scrolling: touch; } /* === STILI MODAL FULLSCREEN v2 - TIPI: table | card | interactive === */ /* Immagini nel modal: dimensione universale */ .tab-fullscreen-content img { max-width: 28px; max-height: 28px; object-fit: contain; } /* === TYPE: TABLE — tabelle dati, classifica, statistiche === */ .tab-fullscreen-content [data-fullscreen="table"] { font-size: 18px; } .tab-fullscreen-content [data-fullscreen="table"] table { width: 100% !important; font-size: 18px !important; table-layout: auto !important; border-collapse: collapse; } .tab-fullscreen-content [data-fullscreen="table"] th, .tab-fullscreen-content [data-fullscreen="table"] td { padding: 0.6rem 0.8rem !important; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tab-fullscreen-content [data-fullscreen="table"] th { background: #1e293b !important; color: #e2e8f0; font-weight: 700; text-transform: uppercase; font-size: 14px !important; letter-spacing: 0.05em; } .tab-fullscreen-content [data-fullscreen="table"] td { font-size: 18px !important; font-weight: 500; } .tab-fullscreen-content [data-fullscreen="table"] tbody tr { border-bottom: 1px solid rgba(71, 85, 105, 0.3); } .tab-fullscreen-content [data-fullscreen="table"] tbody tr:hover { background: rgba(51, 65, 85, 0.5); } /* Text size boost per TABLE */ .tab-fullscreen-content [data-fullscreen="table"] .text-xs { font-size: 16px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-sm { font-size: 18px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-base { font-size: 20px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-lg { font-size: 22px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-xl { font-size: 26px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-2xl { font-size: 30px !important; } .tab-fullscreen-content [data-fullscreen="table"] .font-bold, .tab-fullscreen-content [data-fullscreen="table"] .font-semibold { font-size: 18px !important; } /* Flex: nessun override di width — i pure HTML table si espandono già con table{width:100%} Rimuovere width:100% su .flex evita di rompere inner-flex (badge div, stat boxes in card) */ /* Fix altezze TABLE */ .tab-fullscreen-content [data-fullscreen="table"] > div { max-height: none !important; height: auto !important; width: 100% !important; } .tab-fullscreen-content [data-fullscreen="table"] .overflow-y-auto, .tab-fullscreen-content [data-fullscreen="table"] .overflow-auto { max-height: none !important; overflow: visible !important; } /* Grid "Le Giornate" dentro tab-classifica (TABLE type) */ .tab-fullscreen-content [data-fullscreen="table"] .grid.lg\:grid-cols-2, .tab-fullscreen-content [data-fullscreen="table"] .grid.grid-cols-1.lg\:grid-cols-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2rem !important; width: 100% !important; } .tab-fullscreen-content [data-fullscreen="table"] .grid.lg\:grid-cols-2 > div, .tab-fullscreen-content [data-fullscreen="table"] .grid.grid-cols-1.lg\:grid-cols-2 > div { width: 100% !important; min-width: 0 !important; } .tab-fullscreen-content [data-fullscreen="table"] #dailyResultsGrid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5rem !important; } .tab-fullscreen-content [data-fullscreen="table"] .h-\[1000px\] { height: auto !important; min-height: 400px !important; } /* Dark card background TABLE */ .tab-fullscreen-content [data-fullscreen="table"] .bg-slate-800 { background: #1e293b !important; } /* Nascondi solo i selettori colonne MobileCols nel modal TABLE (non i sub-tab utente) */ .tab-fullscreen-content [data-fullscreen="table"] .marcatori-sub-tab-btn, .tab-fullscreen-content [data-fullscreen="table"] .filters-container { display: none !important; } /* === TYPE: CARD — territori, formazione top, tabellone, calendario, rosa === */ .tab-fullscreen-content [data-fullscreen="card"] { font-size: 15px; } /* Territori: stat box compatte (numeri grandi non sbordano) */ .tab-fullscreen-content [data-fullscreen="card"] #cittaCardsContainer .tabular-nums, .tab-fullscreen-content [data-fullscreen="card"] #regioniCardsContainer .tabular-nums { font-size: 13px !important; }.tab-fullscreen-content [data-fullscreen="card"] #cittaCardsContainer [class^="text-[14px]"], .tab-fullscreen-content [data-fullscreen="card"] #cittaCardsContainer [class*=" text-[14px]"], .tab-fullscreen-content [data-fullscreen="card"] #regioniCardsContainer [class^="text-[14px]"], .tab-fullscreen-content [data-fullscreen="card"] #regioniCardsContainer [class*=" text-[14px]"]{ font-size: 10px !important; } .tab-fullscreen-content [data-fullscreen="card"] #cittaCardsContainer .flex.gap-1, .tab-fullscreen-content [data-fullscreen="card"] #regioniCardsContainer .flex.gap-1 { gap: 2px !important; } .tab-fullscreen-content [data-fullscreen="card"] #cittaCardsContainer [class*="min-w-\[30px\]"], .tab-fullscreen-content [data-fullscreen="card"] #regioniCardsContainer [class*="min-w-\[30px\]"] { min-width: 28px !important; padding-left: 4px !important; padding-right: 4px !important; } /* Fix altezze CARD */ .tab-fullscreen-content [data-fullscreen="card"] > div { max-height: none !important; height: auto !important; } .tab-fullscreen-content [data-fullscreen="card"] .overflow-y-auto, .tab-fullscreen-content [data-fullscreen="card"] .overflow-auto { max-height: none !important; overflow: visible !important; } .tab-fullscreen-content [data-fullscreen="card"] .h-\[1000px\] { height: auto !important; min-height: 400px !important; } /* Calendario: grid 2 colonne */ .tab-fullscreen-content [data-fullscreen="card"] .grid.lg\:grid-cols-2, .tab-fullscreen-content [data-fullscreen="card"] .grid.grid-cols-1.lg\:grid-cols-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2rem !important; width: 100% !important; } .tab-fullscreen-content [data-fullscreen="card"] #dailyResultsGrid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0.5rem !important; } /* === TYPE: INTERACTIVE — confronti, duelli, query builder === */ .tab-fullscreen-content [data-fullscreen="interactive"] { font-size: 15px; } /* Mostra SEMPRE inputs in INTERACTIVE */ .tab-fullscreen-content [data-fullscreen="interactive"] input[type="text"], .tab-fullscreen-content [data-fullscreen="interactive"] input[type="search"] { display: block !important; width: 100% !important; } /* Dropdown: posizione naturale */ .tab-fullscreen-content [data-fullscreen="interactive"] [id*="dropdown"] { position: static !important; max-height: 200px !important; overflow-y: auto !important; } /* Fix altezze INTERACTIVE */ .tab-fullscreen-content [data-fullscreen="interactive"] > div { max-height: none !important; height: auto !important; } /* === FALLBACK: senza data-fullscreen (calciatori, arbitri, partite...) === */ .tab-fullscreen-content table { width: 100% !important; table-layout: auto !important; border-collapse: collapse; } .tab-fullscreen-content th { background: #1e293b !important; color: #e2e8f0; font-weight: 700; font-size: 14px !important; } .tab-fullscreen-content tbody tr:hover { background: rgba(51, 65, 85, 0.5); } .tab-fullscreen-content > div { max-height: none !important; height: auto !important; width: 100% !important; } /* === MOBILE: font ridotti per spazio limitato === */ @media (max-width: 767px) { .tab-fullscreen-content [data-fullscreen="table"], .tab-fullscreen-content [data-fullscreen="card"], .tab-fullscreen-content [data-fullscreen="interactive"] { font-size: 14px; } .tab-fullscreen-content [data-fullscreen="table"] table { font-size: 13px !important; } .tab-fullscreen-content [data-fullscreen="table"] th, .tab-fullscreen-content [data-fullscreen="table"] td { font-size: 13px !important; padding: 0.4rem 0.5rem !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-xs { font-size: 11px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-sm { font-size: 13px !important; } .tab-fullscreen-content [data-fullscreen="table"] .text-base { font-size: 14px !important; } } .tab-expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 0.35rem; padding: 0; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 4px; color: #60a5fa; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .tab-expand-btn:hover { background: rgba(59, 130, 246, 0.3); color: #93c5fd; transform: scale(1.1); } .tab-expand-btn i { font-size: 0.75rem; } /* Mobile: bottone più grande per touch */ @media (max-width: 767px) { .tab-expand-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; } .tab-expand-btn i { font-size: 0.85rem; } /* Header modal più compatto su mobile */ .tab-fullscreen-header { padding: 0.5rem 0.75rem; } .tab-fullscreen-title { font-size: 1rem; } .tab-fullscreen-content { padding: 0.5rem; } } /* Stile per tab attivo con icona expand */ .tab-btn-container { display: inline-flex; align-items: center; } /* ============================================================================ STAMPA ============================================================================ */ @media print { #mainSidebar, nav, .no-print, button, .pagination { display: none !important; } #mainContainer { margin: 0 !important; padding: 0 !important; } body { background: white !important; color: black !important; } table { font-size: 10pt !important; } } /* ============================================================================ NOTE PER SVILUPPATORI: Per attivare l'overlay "Scorri/Ruota" su una tabella: 1. Avvolgi la tabella in un div con classe "table-container" o "overflow-x-auto" 2. Oppure aggiungi classe "wide-table" alla tabella stessa Per DISABILITARE l'overlay su tabelle compatte: - Aggiungi classe "no-overlay" al container - Oppure aggiungi classe "compact-table" alla tabella JavaScript opzionale per nascondere overlay dopo scroll: document.querySelectorAll('.table-container, .overflow-x-auto').forEach(el => { el.addEventListener('scroll', () => el.classList.add('scrolled'), {once: true}); }); ============================================================================ */ /* ============================================================================ TEMA CHIARO (WHITE THEME) — override universale Attivato da: body.bg-slate-50 Copre TUTTE le pagine tramite wildcard Tailwind. Ordine sezioni: base → sfondi → testi → bordi → bottoni → input → tabelle → sidebar → header → tabs → modali → scrollbar ============================================================================ */ /* ────────────────────────────────────────────── BASE: pagina e layout principale ────────────────────────────────────────────── */ body.bg-slate-50 { background-color: #f1f5f9 !important; color: #0f172a !important; } /* ────────────────────────────────────────────── SFONDI: tutti i dark slate → bianco Wildcards per bg-slate-5xx .. 9xx + opacity variants ────────────────────────────────────────────── */ body.bg-slate-50 [class^="bg-slate-5"], body.bg-slate-50 [class*=" bg-slate-5"], 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"], body.bg-slate-50 .bg-black, body.bg-slate-50 .bg-slate-950 { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* Sfondi chiari (slate-100..400) → grigio molto chiaro */ body.bg-slate-50 .bg-slate-100, body.bg-slate-50 .bg-slate-200, body.bg-slate-50 .bg-slate-300, body.bg-slate-50 .bg-slate-400, body.bg-slate-50 [class^="bg-slate-1"], body.bg-slate-50 [class*=" bg-slate-1"], body.bg-slate-50 [class^="bg-slate-2"], body.bg-slate-50 [class*=" bg-slate-2"], body.bg-slate-50 [class^="bg-slate-3"], body.bg-slate-50 [class*=" bg-slate-3"], body.bg-slate-50 [class^="bg-slate-4"], body.bg-slate-50 [class*=" bg-slate-4"] { background-color: #f8fafc !important; border-color: #e2e8f0 !important; } /* Bordo 3D leggero solo su div contenitori (rounded + border, NON su button/tr/td) */ body.bg-slate-50 div[class*="rounded-2xl"][class*="border"], body.bg-slate-50 div[class*="rounded-xl"][class*="border"], body.bg-slate-50 div[class*="rounded-lg"][class*="border"] { box-shadow: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04) !important; } /* ────────────────────────────────────────────── TESTI: chiari → scuri ────────────────────────────────────────────── */ body.bg-slate-50 .text-white, body.bg-slate-50 .text-slate-50, body.bg-slate-50 .text-slate-100, body.bg-slate-50 .text-slate-200 { color: #0f172a !important; }body.bg-slate-50 .text-slate-300, body.bg-slate-50 .text-slate-400, body.bg-slate-50 [class^="text-slate-3"], body.bg-slate-50 [class*=" text-slate-3"], body.bg-slate-50 [class^="text-slate-4"], body.bg-slate-50 [class*=" text-slate-4"]{ color: #475569 !important; }body.bg-slate-50 .text-slate-500, body.bg-slate-50 [class^="text-slate-5"], body.bg-slate-50 [class*=" text-slate-5"]{ color: #64748b !important; }body.bg-slate-50 .text-slate-600, body.bg-slate-50 [class^="text-slate-6"], body.bg-slate-50 [class*=" text-slate-6"]{ color: #475569 !important; } /* slate-700+ già abbastanza scuro, leggermente intensificato */ body.bg-slate-50 .text-slate-700, body.bg-slate-50 [class^="text-slate-7"], body.bg-slate-50 [class*=" text-slate-7"] { color: #334155 !important; } /* ──────────────────────────────────────────────────── TESTO BIANCO PRESERVATO su bottoni/badge colorati (amber, violet, blue, green, red, pink, emerald, indigo) ──────────────────────────────────────────────────── */ /* ⚠️ RIMOSSA il 22 lug 2026 — era il GEMELLO della regola tolta stamattina da light-theme.css, e ha continuato a fare lo stesso danno da qui. Forzava il testo BIANCO su bottoni con classe bg--*, mentre le regole «variante B» rendono quei fondi PASTELLO: risultato, bianco su pastello. Contrasto 1,25 sul «Cerca» della home e 1,21 sull'«Esegui» della Scatola Magica — gli ULTIMI due testi invisibili del sito. Le famiglie coperte qui sono tutte già gestite dalla variante B (ogni colore, tinte 500-800), quindi non resta scoperto niente. ★ La lezione: quando si toglie una regola sbagliata, si cerca se ne esiste una copia altrove. Averne tolta una sola ha lasciato il difetto in piedi mezza giornata. */ /* ────────────────────────────────────────────── BORDI: dark → grigio chiaro ────────────────────────────────────────────── */ 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"], body.bg-slate-50 .border-black { border-color: #cbd5e1 !important; }body.bg-slate-50 [class^="border-slate-3"], body.bg-slate-50 [class*=" border-slate-3"], body.bg-slate-50 [class^="border-slate-4"], body.bg-slate-50 [class*=" border-slate-4"]{ border-color: #e2e8f0 !important; } /* Divisori (divide-*) */ body.bg-slate-50 [class*="divide-slate-6"] > * + *, body.bg-slate-50 [class*="divide-slate-7"] > * + *, body.bg-slate-50 [class*="divide-slate-8"] > * + *, body.bg-slate-50 [class*="divide-slate-9"] > * + * { border-color: #e2e8f0 !important; } /* ────────────────────────────────────────────── BOTTONI con sfondo dark slate → grigio chiaro ────────────────────────────────────────────── */ body.bg-slate-50 button[class^="bg-slate-6"], body.bg-slate-50 button[class*=" bg-slate-6"], body.bg-slate-50 button[class^="bg-slate-7"], body.bg-slate-50 button[class*=" bg-slate-7"], body.bg-slate-50 button[class^="bg-slate-8"], body.bg-slate-50 button[class*=" bg-slate-8"], body.bg-slate-50 button[class^="bg-slate-9"], body.bg-slate-50 button[class*=" bg-slate-9"], body.bg-slate-50 a[class^="bg-slate-7"], body.bg-slate-50 a[class*=" bg-slate-7"], body.bg-slate-50 a[class^="bg-slate-8"], body.bg-slate-50 a[class*=" bg-slate-8"], body.bg-slate-50 a[class^="bg-slate-9"], body.bg-slate-50 a[class*=" bg-slate-9"] { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }body.bg-slate-50 button[class^="bg-slate-6"]:hover, body.bg-slate-50 button[class*=" bg-slate-6"]:hover, body.bg-slate-50 button[class^="bg-slate-7"]:hover, body.bg-slate-50 button[class*=" bg-slate-7"]:hover, body.bg-slate-50 button[class^="bg-slate-8"]:hover, body.bg-slate-50 button[class*=" bg-slate-8"]:hover, body.bg-slate-50 button[class^="bg-slate-9"]:hover, body.bg-slate-50 button[class*=" bg-slate-9"]:hover{ background-color: #cbd5e1 !important; } /* Hover di bg-slate-* su elementi generici */ body.bg-slate-50 [class*="hover:bg-slate-7"]:hover, body.bg-slate-50 [class*="hover:bg-slate-8"]:hover, body.bg-slate-50 [class*="hover:bg-slate-6"]:hover { background-color: #f1f5f9 !important; } /* ────────────────────────────────────────────── INPUT / SELECT / TEXTAREA ────────────────────────────────────────────── */ body.bg-slate-50 input, body.bg-slate-50 input[type="text"], body.bg-slate-50 input[type="search"], body.bg-slate-50 input[type="number"], body.bg-slate-50 input[type="email"], body.bg-slate-50 input[type="password"], body.bg-slate-50 select, body.bg-slate-50 textarea { background-color: #ffffff !important; color: #0f172a !important; border-color: #94a3b8 !important; } body.bg-slate-50 input::placeholder, body.bg-slate-50 textarea::placeholder { color: #94a3b8 !important; } body.bg-slate-50 input:focus, body.bg-slate-50 select:focus, body.bg-slate-50 textarea:focus { border-color: #6366f1 !important; outline-color: #6366f1 !important; } /* ────────────────────────────────────────────── TABELLE ────────────────────────────────────────────── */ body.bg-slate-50 table { border-color: #e2e8f0 !important; } body.bg-slate-50 thead, body.bg-slate-50 thead tr { background-color: #f1f5f9 !important; } body.bg-slate-50 thead th, body.bg-slate-50 th { background-color: #f1f5f9 !important; color: #334155 !important; border-color: #cbd5e1 !important; } body.bg-slate-50 tbody tr { border-color: #f1f5f9 !important; } body.bg-slate-50 tbody td { color: #1e293b !important; border-color: #f1f5f9 !important; } body.bg-slate-50 tbody tr:hover { background-color: #f8fafc !important; } /* Sticky header celle */ body.bg-slate-50 th[class*="sticky"], body.bg-slate-50 td[class*="sticky"] { background-color: #f1f5f9 !important; } /* ────────────────────────────────────────────── SIDEBAR ────────────────────────────────────────────── */ body.bg-slate-50 #mainSidebar { background-color: #ffffff !important; border-right-color: #e2e8f0 !important; border-color: #e2e8f0 !important; box-shadow: 1px 0 3px rgba(15,23,42,0.06) !important; } body.bg-slate-50 #mainSidebar a, body.bg-slate-50 #mainSidebar button, body.bg-slate-50 #mainSidebar span, body.bg-slate-50 #mainSidebar div { color: #334155 !important; border-color: #e2e8f0 !important; } body.bg-slate-50 #mainSidebar a.active, body.bg-slate-50 #mainSidebar a[class*="active"], body.bg-slate-50 #mainSidebar button.active { background-color: #ede9fe !important; color: #5b21b6 !important; } body.bg-slate-50 #mainSidebar a:hover, body.bg-slate-50 #mainSidebar button:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } /* ────────────────────────────────────────────── HEADER / NAV / GLASS ────────────────────────────────────────────── */ body.bg-slate-50 header, body.bg-slate-50 .glass-header, body.bg-slate-50 [class*="backdrop-blur"] { background-color: rgba(255,255,255,0.97) !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 4px rgba(15,23,42,0.08) !important; } /* ────────────────────────────────────────────── TAB BUTTONS ────────────────────────────────────────────── */ body.bg-slate-50 .tab-btn { color: #64748b !important; border-color: transparent !important; } /* Tab attivo — preserva il colore accent */ body.bg-slate-50 .tab-btn.active { color: #db2777 !important; border-color: #db2777 !important; background-color: transparent !important; }body.bg-slate-50 .tab-btn[class^="text-pink"], body.bg-slate-50 .tab-btn[class*=" text-pink"], body.bg-slate-50 .tab-btn[class^="border-pink"], body.bg-slate-50 .tab-btn[class*=" border-pink"]{ color: #db2777 !important; border-color: #db2777 !important; } /* ────────────────────────────────────────────── MODAL / OVERLAY ────────────────────────────────────────────── */ /* Il backdrop rimane scuro per contrasto */ body.bg-slate-50 .fixed.inset-0[class^="bg-black"], body.bg-slate-50 .fixed.inset-0[class*=" bg-black"], body.bg-slate-50 .fixed.inset-0[class^="bg-slate-9"], body.bg-slate-50 .fixed.inset-0[class*=" bg-slate-9"] { background-color: rgba(15,23,42,0.55) !important; } /* Contenuto modale → bianco */ body.bg-slate-50 [id*="Modal"], body.bg-slate-50 [id*="modal"] { background-color: #ffffff !important; color: #0f172a !important; } /* ────────────────────────────────────────────── SCROLLBAR (tema chiaro) ────────────────────────────────────────────── */ body.bg-slate-50 ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px; } body.bg-slate-50 ::-webkit-scrollbar-track { background: #f1f5f9 !important; } body.bg-slate-50 .scroll-custom::-webkit-scrollbar-thumb { background: #94a3b8 !important; } /* ────────────────────────────────────────────── RING / FOCUS (accessibilità) ────────────────────────────────────────────── */ body.bg-slate-50 [class*="ring-slate-"] { --tw-ring-color: #94a3b8 !important; } /* ────────────────────────────────────────────── LOADING / SKELETON ────────────────────────────────────────────── */ body.bg-slate-50 .animate-pulse [class^="bg-slate-"], body.bg-slate-50 .animate-pulse [class*=" bg-slate-"] { background-color: #e2e8f0 !important; } /* ────────────────────────────────────────────── GRADIENTS scuri → neutralizzati ────────────────────────────────────────────── */ body.bg-slate-50 [class^="from-slate-7"], body.bg-slate-50 [class*=" from-slate-7"], body.bg-slate-50 [class^="from-slate-8"], body.bg-slate-50 [class*=" from-slate-8"], body.bg-slate-50 [class^="from-slate-9"], body.bg-slate-50 [class*=" from-slate-9"] { --tw-gradient-from: #f8fafc !important; }body.bg-slate-50 [class^="to-slate-7"], body.bg-slate-50 [class*=" to-slate-7"], body.bg-slate-50 [class^="to-slate-8"], body.bg-slate-50 [class*=" to-slate-8"], body.bg-slate-50 [class^="to-slate-9"], body.bg-slate-50 [class*=" to-slate-9"]{ --tw-gradient-to: #ffffff !important; }body.bg-slate-50 [class^="via-slate-7"], body.bg-slate-50 [class*=" via-slate-7"], body.bg-slate-50 [class^="via-slate-8"], body.bg-slate-50 [class*=" via-slate-8"], body.bg-slate-50 [class^="via-slate-9"], body.bg-slate-50 [class*=" via-slate-9"]{ --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9, var(--tw-gradient-to) !important; } /* ────────────────────────────────────────────── FOOTER COPYRIGHT ────────────────────────────────────────────── */ body.bg-slate-50 #copyright-footer { background: rgba(241,245,249,0.95) !important; border-top-color: #e2e8f0 !important; } /* 🔴★★★ 4 settembre 2026 — IL PIÈ DI PAGINA NEL TEMA CHIARO. Centocinque rilievi di contrasto, e tutti da qui: #64748b su un fondo #f2f6f9 fa **4,38**, sotto la soglia di 4,5. Sono le righe che stanno su OGNI pagina del sito — «Come Funziona», «Privacy Policy», «Cookie Policy», la riga del copyright — e proprio per questo il numero e' cosi' alto: un colore solo, moltiplicato per tutte le schermate. Un gradino piu' scuro (#475569) lo porta a 7,3. ⚠️ Trovato solo misurando lo SCHERMO LARGO: sul telefono il piè di pagina e' sostituito dalla barra in fondo e non si vede. */ body.bg-slate-50 #copyright-footer p, body.bg-slate-50 #copyright-footer a, body.bg-slate-50 #copyright-footer span { color: #475569 !important; } body.bg-slate-50 #copyright-footer strong { color: #334155 !important; } /* ────────────────────────────────────────────── SIDEBAR DESKTOP: scrollbar in tema chiaro ────────────────────────────────────────────── */ body.bg-slate-50 #mainSidebar::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } /* ────────────────────────────────────────────── STEMMI squadre — tema chiaro Sfondo scuro semitrasparente per stemmi bianchi (Juventus, Napoli, ecc.) ────────────────────────────────────────────── */ body.bg-slate-50 img[src*="stemmi"] { background-color: rgba(15, 23, 42, 0.08) !important; border-radius: 6px !important; padding: 2px !important; } /* ────────────────────────────────────────────── BOTTONE "APRI SCHEDA" (Squadre) — tema chiaro Mantiene sfondo blu per leggibilità ────────────────────────────────────────────── */ /* «Apri Scheda» in tema chiaro: tinta tenue + testo scuro + ombra (scelta di Fabio, 21 lug). Era blu pieno col bianco sopra — leggibile ma un blocco cupo sulla pagina bianca, e Fabio l'ha segnalato come «poco visibile» guardando il sito. ⚠️ Questa regola vive QUI e non nel blocco