/* NH — theme-vars.css * Override tema (light/dark) globale per TUTTE le pagine, anche quelle che * dichiarano solo valori dark in :root senza override light. * * Strategia: * 1) Ridefinire tutte le CSS custom properties principali in due blocchi * (light / dark) con specificità html[data-theme="x"] > :root. * 2) Forzare body + input/select/textarea/button a usare le custom properties * con !important, così il tema funziona anche se la pagina ha style * inline diretti (background:#0f172a etc.). * 3) color-scheme coerente per la UI nativa (scrollbar, form controls). * * Include come ULTIMA risorsa CSS nel : * * ========================================================================== */ /* ────────────────────── PALETTE LIGHT ──────────────────────────────────── */ html[data-theme="light"] { color-scheme: light; /* Sfondi */ --bg: #f3f5f8; --bg-2: #ffffff; --bg-3: #eef2f6; --bg-4: #e5e9f0; /* Testo */ --text: #0f172a; --text-1: #0f172a; --text-2: #475569; --text-3: #64748b; --text-4: #94a3b8; --text-dim: #6b7280; /* Bordi / ombre */ --border: #d9dee4; --border-hi: #94a3b8; --shadow: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); /* Superfici */ --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f6; /* Accenti */ --accent: #2563eb; --blue: #2563eb; --blue-2: #4f46e5; --blue-dim: rgba(37, 99, 235, 0.10); --violet: #7c3aed; --purple: #7c3aed; --pink: #db2777; --cyan: #0891b2; --teal: #0d9488; --green: #059669; --amber: #d97706; --red: #dc2626; /* Stati */ --success: #059669; --warn: #d97706; --warning: #d97706; --danger: #dc2626; --error: #dc2626; --info: #0891b2; --glow: rgba(37, 99, 235, 0.18); --hero-bg: linear-gradient(135deg, #e0e7ff 0%, #f3f5f8 60%, #dbeafe 100%); /* Testo sopra l'hero: in light il bg è chiaro → scritte scure */ --hero-text: #0f172a; --hero-text-muted: #334155; --hero-text-dim: #475569; --hero-border: rgba(15,23,42,.12); --hero-surface: rgba(255,255,255,.55); } /* ────────────────────── PALETTE DARK ───────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --bg-2: #1e293b; --bg-3: #334155; --bg-4: #475569; --text: #f1f5f9; --text-1: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8; --text-4: #64748b; --text-dim: #94a3b8; --border: #334155; --border-hi: #64748b; --shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-lg: 0 30px 70px -12px rgba(0, 0, 0, 0.6); --surface: #1e293b; --surface-2: #0f172a; --surface-3: #334155; --accent: #3b82f6; --blue: #60a5fa; --blue-2: #818cf8; --blue-dim: rgba(96, 165, 250, 0.15); --violet: #a78bfa; --purple: #8b5cf6; --pink: #f472b6; --cyan: #22d3ee; --teal: #2dd4bf; --green: #34d399; --amber: #fbbf24; --red: #f87171; --success: #10b981; --warn: #f59e0b; --warning: #f59e0b; --danger: #ef4444; --error: #ef4444; --info: #06b6d4; --glow: rgba(96, 165, 250, 0.25); --hero-bg: linear-gradient(135deg, #1e1b4b 0%, #0b1220 60%, #172554 100%); /* Testo sopra l'hero: in dark il bg è scuro → scritte chiare */ --hero-text: #f1f5f9; --hero-text-muted: #cbd5e1; --hero-text-dim: #94a3b8; --hero-border: rgba(255,255,255,.08); --hero-surface: rgba(255,255,255,.04); } /* ────────────────────── FORZATURE GLOBALI ──────────────────────────────── */ /* Assicurano il tema anche su pagine con colori hardcoded. !important è necessario perché alcune pagine (soc/xdr/icc/grc/ops) dichiarano `body { background: #0f172a }` direttamente senza custom property. */ html[data-theme="light"] body, html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text-1) !important; transition: background-color .15s ease, color .15s ease; } /* Form controls — devono adattarsi al tema anche quando la pagina non li tematizza. */ html[data-theme="light"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] select, html[data-theme="light"] textarea { background-color: var(--surface); color: var(--text-1); border-color: var(--border); } html[data-theme="dark"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--surface-2); color: var(--text-1); border-color: var(--border); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--text-3); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-4); } /* Scrollbar chrome-style coerente */ html[data-theme="dark"] *::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html[data-theme="light"] *::-webkit-scrollbar-track { background: #f1f5f9; } html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* ─── NH Uniform Topbar / Breadcrumb (global) ───────────────────────────── * Normalizza tipografia del brand e del link "Home" su tutte le pagine. * Applicato via theme-vars.css → incluso in tutte le pagine. */ .topbar .brand, .topbar .logo, header .brand, header .logo { font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.01em; } /* Link "Home" nelle breadcrumb: sempre stessa dimensione, grassetto, accento */ .crumb a, .breadcrumb a, .topbar .crumb a { font-weight: 700 !important; font-size: 13px !important; text-decoration: none; cursor: pointer; } .crumb strong, .breadcrumb strong, .topbar .crumb strong { font-weight: 700 !important; font-size: 13px !important; } /* ════════════════════════════════════════════════════════════════════════ NH Z-INDEX SCALE 2026-05-30 (Z-SCALE-S1) ════════════════════════════════════════════════════════════════════════ Scala binaria — NON inventare valori intermedi. Bug ricorrenti causati da z-index hardcoded: questa scala è la SoT. Layer base (0–99) · UI inline · stacking minore --nh-z-base : 1 --nh-z-elevated : 5 --nh-z-sticky : 50 · sticky header, sidebar --nh-z-dropdown : 100 · menu a tendina, select custom --nh-z-tooltip : 500 · tooltip, hover popover --nh-z-fixed-bar : 1000 · toolbar fissa, bottom-dock Layer overlay (5000–9999) · feedback UI --nh-z-toast : 9000 · toast notifications --nh-z-loader : 9500 · spinner full-screen Layer modal (10000–10999) · modali di prima generazione --nh-z-modal-base : 10500 · modal standard (es. dettaglio utente) --nh-z-modal-edit : 10600 · modal edit / form --nh-z-modal-confirm:10700 · confirm dialog (sopra edit) Layer overlay-top (11000–11999) · azioni distruttive / chiavi --nh-z-modal-overlay:11000 · password reveal, integrity check --nh-z-modal-critical:11500 · DELETE confirm "type ID" Layer system (≥99000) · solo casi eccezionali documentati --nh-z-emergency : 99000 · debug overlay, crash reporter Regola d'oro: una modal aperta DA UN'ALTRA modal deve avere z-index ≥ z-index del genitore + 100. Usa la scala, non inventare. */ :root { --nh-z-base: 1; --nh-z-elevated: 5; --nh-z-sticky: 50; --nh-z-dropdown: 100; --nh-z-tooltip: 500; --nh-z-fixed-bar: 1000; --nh-z-toast: 9000; --nh-z-loader: 9500; --nh-z-modal-base: 10500; --nh-z-modal-edit: 10600; --nh-z-modal-confirm: 10700; --nh-z-modal-overlay: 11000; --nh-z-modal-critical: 11500; --nh-z-emergency: 99000; }