/* =================================================================== theme-classic.css — TEMA CLASSICO / TABELLARE per ParfumERP Modalità "gestionale tradizionale" (stile Danea/Winfatt), attivata dall'utente tramite lo switch in sidebar. Applicato SOLO quando ha la classe .theme-classic (gestita da hooks/useThemeMode.ts, stesso pattern di dark-mode.js). NON tocca il tema moderno: tutte le regole sono scoped sotto body.theme-classic. Le regole !important vincono le sovrascritture di theme-future.css (caricato prima). Tutto dentro @media screen per NON toccare la stampa (gestita da index.css). =================================================================== */ @media screen { /* Dropdown ricerca prodotto (Document Editor): variabili dark. Le variabili --panel-* / --fd-* erano usate ma MAI definite: in dark il pannello di ricerca restava bianco e illeggibile. Definite su body.dark-mode → valgono in tutti i temi. */ body.dark-mode { --panel-bg: #1e293b; --panel-border: #334155; --panel-head: #0f172a; --panel-text: #e2e8f0; --panel-muted: #94a3b8; --panel-blue: #60a5fa; --fd-bg: #263447; --fd-head: #0f172a; } /* Magazzino — azioni bulk: pulsanti tutti su una riga (le etichette non vanno a capo → stessa altezza), niente rimpicciolimento nel flex */ .pf-bulk-actions button { white-space: nowrap !important; flex-shrink: 0 !important; height: 30px !important; align-items: center !important; display: inline-flex !important; } /* Magazzino — azioni bulk: select "Crea Doc" allineata in altezza ai pulsanti */ .bulk-doc-select [role="combobox"] { padding: 4px 8px !important; min-height: 0 !important; height: 30px !important; display: flex !important; align-items: center !important; border-radius: 6px !important; font-size: 12px !important; box-shadow: none !important; } /* Pulsanti azioni laterali dettaglio partner (PartnerDetail): colori distinti e visibili in TUTTI i temi (chiaro, scuro, classico). Specificità alta per vincere Aurora (main .bg-white) e dark-mode.css. */ main .pf-action-new, body.dark-mode main .pf-action-new { background-image: none !important; background-color: #16a34a !important; border-color: #16a34a !important; color: #ffffff !important; } main .pf-action-new:hover, body.dark-mode main .pf-action-new:hover { background-color: #15803d !important; } main .pf-action-pay, body.dark-mode main .pf-action-pay { background-image: none !important; background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } main .pf-action-pay:hover, body.dark-mode main .pf-action-pay:hover { background-color: #1d4ed8 !important; } main .pf-action-fidelity, body.dark-mode main .pf-action-fidelity { background-image: none !important; background-color: #9333ea !important; border-color: #9333ea !important; color: #ffffff !important; } main .pf-action-fidelity:hover, body.dark-mode main .pf-action-fidelity:hover { background-color: #7e22ce !important; } main .pf-action-delete, body.dark-mode main .pf-action-delete { background-image: none !important; background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } main .pf-action-delete:hover, body.dark-mode main .pf-action-delete:hover { background-color: #b91c1c !important; } /* ── Sfondo neutro (neutralizza l'Aurora di theme-future.css) ── */ body.theme-classic { background: #eef0f4 !important; background-attachment: initial !important; } /* Spegne le "macchie luce" animate dell'Aurora */ body.theme-classic::before, body.theme-classic::after, body.theme-classic #root::before { display: none !important; } /* ── DENSITÀ DI BASE ───────────────────────────────────────────── */ body.theme-classic { font-size: 13px; } body.theme-classic h1 { font-size: 20px !important; } body.theme-classic h2 { font-size: 17px !important; } /* Pannelli bianchi semi-trasparenti dell'Aurora → bianco pieno. NB: solo le opacità ALTE (vetro dei pannelli). Le opacità basse (bg-white/5-50) sono overlay/pulsanti su header scuri (es. freccia indietro e pulsante PDF nell'editor documenti): NON vanno toccate. */ body.theme-classic .bg-white\/60, body.theme-classic .bg-white\/70, body.theme-classic .bg-white\/75, body.theme-classic .bg-white\/80, body.theme-classic .bg-white\/85, body.theme-classic .bg-white\/90, body.theme-classic .bg-white\/95 { background-color: #ffffff !important; } /* ══ PANNELLI E CARD — piatti, bordi netti (regola gestionale) ══ Solo dentro `main` (i pannelli del contenuto): la sidebar e i menu restano nel loro contesto moderno. */ body.theme-classic main .bg-white.rounded-xl, body.theme-classic main .bg-white.rounded-2xl, body.theme-classic main .bg-slate-50.rounded-xl, body.theme-classic main .bg-slate-50.rounded-2xl { border-radius: 4px !important; box-shadow: none !important; } body.theme-classic main .bg-white.rounded-lg, body.theme-classic main .bg-slate-50.rounded-lg { border-radius: 3px !important; box-shadow: none !important; } /* Neutralizza il "vetro" Aurora su TUTTI i contenitori bianchi: bianco pieno, niente gradiente, niente bordi rosa */ body.theme-classic main .bg-white, body.theme-classic main .bg-white.shadow-xl, body.theme-classic main .bg-white.shadow-2xl { background-color: #ffffff !important; background-image: none !important; } body.theme-classic main .bg-white.shadow-xl, body.theme-classic main .bg-white.shadow-2xl { border-color: #cbd5e1 !important; } /* Barre header slate (sfumatura rosa aurora → grigia piatta) */ body.theme-classic main .bg-slate-50.border-b { background: #f8fafc !important; border-bottom-color: #e2e8f0 !important; } body.theme-classic main .bg-slate-100.border-b { background: #f1f5f9 !important; border-bottom-color: #e2e8f0 !important; } /* Ombre piatte su tutto il contenuto principale */ body.theme-classic main .shadow-sm, body.theme-classic main .shadow, body.theme-classic main .shadow-md, body.theme-classic main .shadow-lg, body.theme-classic main .shadow-xl, body.theme-classic main .shadow-2xl, body.theme-classic main .shadow-soft { box-shadow: none !important; } body.theme-classic main .shadow-glow { box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.4) !important; } /* ══ MODALI — pannelli piatti ma con ombra discreta per profondità */ body.theme-classic .fixed.inset-0 .rounded-xl, body.theme-classic .fixed.inset-0 .rounded-2xl { border-radius: 6px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18) !important; } /* ══ PULSANTI — colorati ma piatti (niente gradienti aurora) ════ Mantiene i colori brand/contestuali (la "nota moderna" richiesta) ma con angoli netti e niente ombre pesanti da gestionale. */ body.theme-classic main button, body.theme-classic .fixed.inset-0 button { border-radius: 3px !important; } /* I pulsanti circolari (POS, icone) restano rotondi */ body.theme-classic main button.rounded-full, body.theme-classic .fixed.inset-0 button.rounded-full { border-radius: 9999px !important; } body.theme-classic main button[class*="bg-"], body.theme-classic .fixed.inset-0 button[class*="bg-"] { background-image: none !important; box-shadow: none !important; } /* Focus visibile preservato (accessibilità) */ body.theme-classic main button:focus-visible, body.theme-classic .fixed.inset-0 button:focus-visible { outline: 2px solid #1d4ed8 !important; outline-offset: 1px !important; box-shadow: none !important; } /* ══ INPUT / FORM — densi e netti ═══════════════════════════════ */ body.theme-classic main input, body.theme-classic main select, body.theme-classic main textarea, body.theme-classic .fixed.inset-0 input, body.theme-classic .fixed.inset-0 select, body.theme-classic .fixed.inset-0 textarea { border-radius: 3px !important; font-size: 13px !important; } body.theme-classic main label, body.theme-classic .fixed.inset-0 label { font-size: 12px !important; } /* ══════════════════ TABELLE "GESTIONALE" ═══════════════════════ Densità alta, righe zebrate, bordi netti, header compatto. Coprono TUTTE le tabelle dell'app (dentro main e nei modali). NB: le varianti con `main` (e !important) servono a vincere le regole tabella di theme-future.css (header aurora + zebra rosa). */ body.theme-classic table, body.theme-classic main table { font-size: 12.5px; border-collapse: collapse; } /* vince sulle p-4/p-2 delle celle → compattezza su TUTTE le tabelle */ body.theme-classic th, body.theme-classic td, body.theme-classic main th, body.theme-classic main td { padding: 4px 8px !important; } body.theme-classic thead th, body.theme-classic main thead th { background: #f1f5f9 !important; border-bottom: 1px solid #94a3b8 !important; border-top: 1px solid #e2e8f0 !important; color: #334155 !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 12px; } body.theme-classic tbody td, body.theme-classic main tbody td { border-bottom: 1px solid #e2e8f0; vertical-align: middle; } /* zebra pulita (senza tinta rosa dell'Aurora) */ body.theme-classic tbody tr:nth-child(even), body.theme-classic main tbody tr:nth-child(even) { background: #f8fafc !important; } body.theme-classic tbody tr:hover, body.theme-classic main tbody tr:hover { background: #eff6ff !important; } /* Font celle uniforme su TUTTE le tabelle (12.5px) — anche dove le celle usano text-sm / text-base (es. tabella articoli di Magazzino) */ body.theme-classic main th, body.theme-classic main td { font-size: 12.5px !important; } body.theme-classic main td .text-sm, body.theme-classic main td [class*="text-sm"] { font-size: 12.5px !important; } body.theme-classic main td .text-base, body.theme-classic main td [class*="text-base"] { font-size: 13px !important; } /* ══ DENSITÀ CONTENUTI — typography e grafiche "gestionale" ══════ Numeri grandi, titoli e gradienti delle card moderne vengono compattati/flatten per lo stile classico. Non tocca la sidebar. */ body.theme-classic main h3 { font-size: 15px !important; } body.theme-classic main .text-3xl { font-size: 20px !important; } body.theme-classic main .text-2xl { font-size: 18px !important; } body.theme-classic main .text-xl { font-size: 16px !important; } /* Gradienti delle card (Aurora + card accentate) → piatto bianco */ body.theme-classic main div[class*="bg-gradient"], body.theme-classic main section[class*="bg-gradient"] { background-image: none !important; background-color: #ffffff !important; } /* Niente rigonfiamenti all'hover: bordi neutri e niente ombre */ body.theme-classic main [class*="hover:shadow"]:hover { box-shadow: none !important; } body.theme-classic main [class*="hover:border"]:hover { border-color: #94a3b8 !important; } /* ════════════ COMPATTAZIONE "GESTIONALE" — spazio ai DATI ═══════ Riduce lo spazio di header, filtri, pulsanti e box dati per dare più spazio alle TABELLE (le più importanti del gestionale). */ /* Pannelli: padding più compatti */ body.theme-classic main div.p-4, body.theme-classic main section.p-4, body.theme-classic main form.p-4, body.theme-classic main header.p-4, body.theme-classic main nav.p-4 { padding: 10px !important; } body.theme-classic main div.p-5, body.theme-classic main section.p-5, body.theme-classic main form.p-5 { padding: 12px !important; } body.theme-classic main div.p-6, body.theme-classic main section.p-6, body.theme-classic main form.p-6 { padding: 14px !important; } /* Griglie e spaziature verticali più strette */ body.theme-classic main .gap-2 { gap: 6px !important; } body.theme-classic main .gap-3 { gap: 8px !important; } body.theme-classic main .gap-4 { gap: 10px !important; } body.theme-classic main .gap-6 { gap: 14px !important; } body.theme-classic main .space-y-4 > * + * { margin-top: 10px !important; } body.theme-classic main .space-y-6 > * + * { margin-top: 14px !important; } body.theme-classic main .mb-4 { margin-bottom: 10px !important; } body.theme-classic main .mt-4 { margin-top: 10px !important; } /* Pulsanti: più piccoli e densi (testo 12px, padding ridotto) */ body.theme-classic main button { font-size: 12px !important; } body.theme-classic main button.p-3 { padding: 6px 8px !important; } body.theme-classic main button.p-2 { padding: 5px 6px !important; } body.theme-classic main button.px-4 { padding-left: 10px !important; padding-right: 10px !important; } body.theme-classic main button.py-2 { padding-top: 5px !important; padding-bottom: 5px !important; } body.theme-classic main button.py-3 { padding-top: 7px !important; padding-bottom: 7px !important; } /* Input: più bassi e compatti */ body.theme-classic main input[class*="py-2"] { padding-top: 5px !important; padding-bottom: 5px !important; } body.theme-classic main input[class*="px-3"] { padding-left: 8px !important; padding-right: 8px !important; } body.theme-classic main input[class*="px-4"] { padding-left: 9px !important; padding-right: 9px !important; } /* Campi testo (input/select/textarea): bianco pieno, bordo netto. Specificità volutamente alta per vincere il "glass" di theme-future.css (`main input:not(...)...`). */ body.theme-classic main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), body.theme-classic .fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), body.theme-classic main select, body.theme-classic main textarea { background-color: #ffffff !important; border-color: #cbd5e1 !important; box-shadow: none !important; } /* Eccezione: input speciali trasparenti (es. importo POS gift card) */ body.theme-classic main input.bg-transparent { background-color: transparent !important; border-color: transparent !important; } /* Focus: blu classico (niente anello rosa dell'Aurora) */ body.theme-classic main input:not([type="checkbox"]):not([type="radio"]):focus, body.theme-classic main select:focus, body.theme-classic main textarea:focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.20) !important; background-color: #ffffff !important; } /* Area contenuti (es. Centro di Controllo) con padding laterale ridotto */ body.theme-classic main .lg\:px-10, body.theme-classic main .md\:px-8 { padding-left: 16px !important; padding-right: 16px !important; } /* ═══════════ CENTRO DI CONTROLLO — box dati compatti ═══════════ */ body.theme-classic main .pf-box { border-radius: 3px !important; box-shadow: none !important; border-color: #cbd5e1 !important; font-size: 12.5px; } body.theme-classic main .pf-box > div:first-child { padding: 6px 10px !important; } body.theme-classic main .pf-box h2 { font-size: 12px !important; } body.theme-classic main .pf-box [class*="divide-y"] > * { padding: 5px 10px !important; } body.theme-classic main .pf-box > div:nth-child(2) { padding: 8px 10px !important; } body.theme-classic main .pf-box .text-sm { font-size: 12px !important; } /* KPI Donut: struttura ORIGINALE intatta (anelli + valore interno). Niente override specifici: in classico valgono solo le regole globali di appiattimento (bordo netto, ombra rimossa). */ /* ═══════ SCADENZE → RIGHE TABELLARI (classico) ══════════════════ Le voci dei box scadenza (ScrollSection) diventano righe di una tabella: colonne allineate, zebra, bordi orizzontali netti. */ body.theme-classic main .pf-box [class*="divide-y"] > div:has(button) { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 8px !important; padding: 4px 10px !important; border-bottom: 1px solid #e2e8f0 !important; font-size: 12.5px !important; } body.theme-classic main .pf-box [class*="divide-y"] > div:has(button):nth-child(even) { background: #f8fafc !important; } body.theme-classic main .pf-box [class*="divide-y"] > div:has(button) p, body.theme-classic main .pf-box [class*="divide-y"] > div:has(button) span { font-size: 12.5px !important; } /* ═══════ DOCUMENT EDITOR — tabella articoli in stile WINDOWS ════ Vale in TUTTI i temi (moderno e classico). Griglia a celle con bordi netti, header azzurro gestionale, input come caselle di testo classiche. Il sistema di navigazione TAB NON viene toccato. */ main table.pf-items-table { font-size: 12.5px !important; border-collapse: collapse !important; } main table.pf-items-table thead th { background: #dbe4f0 !important; color: #1e3a5f !important; border: 1px solid #b0bed0 !important; border-bottom: 1px solid #8fa3ba !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 6px !important; } main table.pf-items-table tbody td { border: 1px solid #cfd8e3 !important; padding: 2px 5px !important; font-size: 12.5px !important; } main table.pf-items-table tbody tr:nth-child(even) { background: #f5f7fa !important; } main table.pf-items-table tbody tr:hover { background: #e9f0fa !important; } /* Input nelle celle: casella di testo Windows (bordo blu-grigio, niente raggio). Specificità alta per vincere le regole input di theme-future.css. */ main table.pf-items-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), main table.pf-items-table select { border: 1px solid #7f9db9 !important; border-color: #7f9db9 !important; border-radius: 0 !important; background-color: #ffffff !important; font-size: 12px !important; padding: 1px 4px !important; box-shadow: none !important; } main table.pf-items-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, main table.pf-items-table select:focus { border-color: #2f6fbf !important; box-shadow: none !important; } /* Campo IVA (CustomSelect) allineato in altezza alle caselle vicine */ main table.pf-items-table [role="combobox"] { padding: 1px 4px !important; border-radius: 0 !important; font-size: 12px !important; min-height: 0 !important; box-shadow: none !important; } /* ══════════════════ SUPPORTO DARK MODE ═════════════════════════ Se l'utente ha dark-mode attiva, il classico resta leggibile con neutri scuri (ardesia). */ body.theme-classic.dark-mode { background: #1e293b !important; } body.theme-classic.dark-mode thead th, body.theme-classic.dark-mode main thead th { background: #0f172a !important; color: #cbd5e1 !important; border-color: #334155 !important; } body.theme-classic.dark-mode tbody td, body.theme-classic.dark-mode main tbody td { border-bottom-color: #334155 !important; } body.theme-classic.dark-mode tbody tr:nth-child(even), body.theme-classic.dark-mode main tbody tr:nth-child(even) { background: #1e293b !important; } body.theme-classic.dark-mode tbody tr:hover, body.theme-classic.dark-mode main tbody tr:hover { background: #263447 !important; } /* Pannelli e card scuri in classic+dark. NB: copre anche i "vetri" bg-white/xx (es. header Centro di Controllo) che le regole light sopra forzano a bianco pieno. */ body.theme-classic.dark-mode main .bg-white, body.theme-classic.dark-mode .fixed.inset-0 .bg-white, body.theme-classic.dark-mode .bg-white\/60, body.theme-classic.dark-mode .bg-white\/70, body.theme-classic.dark-mode .bg-white\/75, body.theme-classic.dark-mode .bg-white\/80, body.theme-classic.dark-mode .bg-white\/85, body.theme-classic.dark-mode .bg-white\/90, body.theme-classic.dark-mode .bg-white\/95 { background-color: #0f172a !important; border-color: #334155 !important; } body.theme-classic.dark-mode main .border-slate-100, body.theme-classic.dark-mode main .border-slate-200 { border-color: #334155 !important; } /* Righe tabellari scadenze: zebra e bordi scuri in classic+dark */ body.theme-classic.dark-mode main .pf-box [class*="divide-y"] > div:has(button) { border-bottom-color: #334155 !important; } body.theme-classic.dark-mode main .pf-box [class*="divide-y"] > div:has(button):nth-child(even) { background: #1e293b !important; } /* Document Editor — tabella articoli Windows in dark (tutti i temi) */ body.dark-mode main table.pf-items-table thead th { background: #0f172a !important; color: #cbd5e1 !important; border-color: #334155 !important; border-bottom-color: #475569 !important; } body.dark-mode main table.pf-items-table tbody td { border-color: #334155 !important; } body.dark-mode main table.pf-items-table tbody tr:nth-child(even) { background: #1e293b !important; } body.dark-mode main table.pf-items-table tbody tr:hover { background: #263447 !important; } body.dark-mode main table.pf-items-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), body.dark-mode main table.pf-items-table select { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; } body.dark-mode main table.pf-items-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, body.dark-mode main table.pf-items-table select:focus { border-color: #60a5fa !important; } body.theme-classic.dark-mode main .bg-slate-50 { background-color: #1e293b !important; } body.theme-classic.dark-mode main input, body.theme-classic.dark-mode main select, body.theme-classic.dark-mode main textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } body.theme-classic.dark-mode main label, body.theme-classic.dark-mode .fixed.inset-0 label { color: #cbd5e1 !important; } /* ═══════════ DARK CLASSIC — COPERTURA ESTESA (Dashboard / modali / POS) ══ Il tema classico in LIGHT forza il bianco pieno con !important e specificità molto alta (pannelli, header-bar, campi, gradienti). Le regole qui sotto ripristinano lo scuro in modalità dark usando selettori con la STESSA struttura (più .dark-mode) per vincere. */ /* Header-bar dei pannelli (es. Dashboard, Centro Controllo, modali) */ body.theme-classic.dark-mode main .bg-slate-50.border-b, body.theme-classic.dark-mode main .bg-slate-100.border-b, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-50.border-b, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-100.border-b { background-color: #1e293b !important; border-bottom-color: #334155 !important; } /* Grandi aree/sfondo secondari (contenuti POS, workspace etichette, modali) che in dark restavano grigio chiaro */ body.theme-classic.dark-mode main .bg-slate-200, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-200 { background-color: #334155 !important; } body.theme-classic.dark-mode main .bg-slate-200\/90, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-200\/90 { background-color: rgba(51, 65, 85, 0.9) !important; } body.theme-classic.dark-mode main .bg-slate-200\/70, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-200\/70 { background-color: rgba(51, 65, 85, 0.7) !important; } body.theme-classic.dark-mode main .bg-slate-200\/50, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-200\/50 { background-color: rgba(51, 65, 85, 0.5) !important; } body.theme-classic.dark-mode main .bg-slate-200\/30, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-200\/30 { background-color: rgba(51, 65, 85, 0.3) !important; } body.theme-classic.dark-mode main .bg-slate-300, body.theme-classic.dark-mode .fixed.inset-0 .bg-slate-300 { background-color: #475569 !important; } /* ── CAMPI MODULO (main E modali): la regola "light" usa :not(...) ad altissima specificità → la replico con .dark-mode per vincerla. */ body.theme-classic.dark-mode main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), body.theme-classic.dark-mode main select, body.theme-classic.dark-mode main textarea, body.theme-classic.dark-mode .fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), body.theme-classic.dark-mode .fixed.inset-0 select, body.theme-classic.dark-mode .fixed.inset-0 textarea { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; box-shadow: none !important; } body.theme-classic.dark-mode main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, body.theme-classic.dark-mode main select:focus, body.theme-classic.dark-mode main textarea:focus, body.theme-classic.dark-mode .fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, body.theme-classic.dark-mode .fixed.inset-0 select:focus, body.theme-classic.dark-mode .fixed.inset-0 textarea:focus { background-color: #0f172a !important; border-color: #60a5fa !important; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important; } body.theme-classic.dark-mode main input::placeholder, body.theme-classic.dark-mode main textarea::placeholder, body.theme-classic.dark-mode .fixed.inset-0 input::placeholder, body.theme-classic.dark-mode .fixed.inset-0 textarea::placeholder { color: #64748b !important; } body.theme-classic.dark-mode option { background-color: #0f172a !important; color: #e2e8f0 !important; } /* Eccezione input "trasparenti" (importo in evidenza POS, campi inline su header colorati): restano trasparenti anche in dark classic */ body.theme-classic.dark-mode main input.bg-transparent, body.theme-classic.dark-mode .fixed.inset-0 input.bg-transparent { background-color: transparent !important; border-color: transparent !important; } /* ── GRADIENTI in `main`: in classic+dark NON possono restare bianchi appiattiti (testo chiaro invisibile) né pastello con testo già schiarito dal dark globale → pannello piatto scuro, coerente con lo stile gestionale del tema classico. */ body.theme-classic.dark-mode main div[class*="bg-gradient"], body.theme-classic.dark-mode main section[class*="bg-gradient"] { background-image: none !important; background-color: #0f172a !important; border-color: #334155 !important; } /* Eccezione barre-progresso (fill a tutta altezza): mantengono il gradiente colorato, altrimenti sparirebbero sul pannello scuro */ body.theme-classic.dark-mode main .h-full.bg-gradient-to-r, body.theme-classic.dark-mode main .h-full.rounded-full.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; background-color: transparent !important; } /* Testi "neutri" dentro questi pannelli → sempre chiari */ body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-400 { color: #94a3b8 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-gray-500 { color: #94a3b8 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-gray-600 { color: #cbd5e1 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-800, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-slate-900, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-gray-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-gray-800, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-gray-900 { color: #f1f5f9 !important; } /* Testi colorati dentro i pannelli-gradiente → tonalità chiare */ body.theme-classic.dark-mode main [class*="bg-gradient"] .text-blue-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-blue-600 { color: #93c5fd !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-blue-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-blue-800 { color: #bfdbfe !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-indigo-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-indigo-600 { color: #a5b4fc !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-indigo-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-indigo-800 { color: #c7d2fe !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-violet-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-violet-700 { color: #c4b5fd !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-purple-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-purple-600 { color: #c084fc !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-purple-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-purple-800 { color: #d8b4fe !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-fuchsia-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-fuchsia-700 { color: #f0abfc !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-pink-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-pink-700 { color: #f9a8d4 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-rose-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-rose-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-red-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-red-700 { color: #fda4af !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-orange-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-orange-600 { color: #fdba74 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-orange-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-orange-800 { color: #fed7aa !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-amber-500, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-amber-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-amber-700 { color: #fde68a !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-yellow-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-yellow-700 { color: #fde047 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-green-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-emerald-600 { color: #6ee7b7 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-green-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-emerald-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-green-800, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-emerald-800 { color: #a7f3d0 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-teal-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-teal-700 { color: #5eead4 !important; } body.theme-classic.dark-mode main [class*="bg-gradient"] .text-cyan-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-cyan-700, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-sky-600, body.theme-classic.dark-mode main [class*="bg-gradient"] .text-sky-700 { color: #67e8f9 !important; } /* Elementi di testo "scuri-su-chiaro" in main (celle/riepiloghi): sempre chiari anche se su un contenitore chiaro residuo */ body.theme-classic.dark-mode main .text-slate-900, body.theme-classic.dark-mode main .text-slate-800, body.theme-classic.dark-mode main .text-slate-700, body.theme-classic.dark-mode main .text-gray-900, body.theme-classic.dark-mode main .text-gray-800, body.theme-classic.dark-mode main .text-gray-700 { color: #f1f5f9 !important; } }