/* Formulatore TIR ELITE – Custom styles */ /* ══ TEMI ═══════════════════════════════════════════════════════════════════ I colori del config Tailwind (base.html) puntano a queste variabili, quindi cambiarle qui ri-colora TUTTE le utility — varianti hover:/peer-checked:/ focus: incluse, che una lista di sovrascritture non coprirebbe. Il tema si sceglie con l'interruttore in barra; l'attributo data-theme viene messo su prima del primo paint (script in base.html) per non far lampeggiare la pagina. ── Valori RGB senza rgb(): servono "nudi" per rgb(var(--x) / ). */ :root { /* superfici: dal fondo pagina (950) alle card (900) ai campi (800) */ --c-surface-50: 248 250 252; --c-surface-100: 241 245 249; --c-surface-200: 226 232 240; --c-surface-700: 51 65 85; --c-surface-800: 30 41 59; --c-surface-850: 23 32 51; --c-surface-900: 15 23 42; --c-surface-950: 2 6 23; /* "bianco" = testo forte e bordi (usato come white/10) */ --c-white: 255 255 255; /* scala grigi Tailwind (testo smorzato su fondo scuro) */ --c-gray-50: 249 250 251; --c-gray-100: 243 244 246; --c-gray-200: 229 231 235; --c-gray-300: 209 213 219; --c-gray-400: 156 163 175; --c-gray-500: 107 114 128; --c-gray-600: 75 85 99; --c-gray-700: 55 65 81; --c-gray-800: 31 41 55; --c-gray-900: 17 24 39; --c-gray-950: 3 7 18; } /* ── TEMA CHIARO ─────────────────────────────────────────────────────────── Le superfici si ribaltano (fondo chiaro, card bianche) e la scala grigi si inverte: gray-300/400/500 restano "testo smorzato", ma scuro su chiaro. */ :root[data-theme="light"] { --c-surface-50: 15 23 42; --c-surface-100: 30 41 59; --c-surface-200: 51 65 85; --c-surface-700: 226 232 240; /* binario dei toggle, bordi marcati */ --c-surface-800: 241 245 249; /* campi e superfici rialzate */ --c-surface-850: 248 250 252; --c-surface-900: 255 255 255; /* card */ --c-surface-950: 241 245 249; /* fondo pagina: le card bianche staccano */ --c-white: 15 23 42; /* testo forte; border-white/10 → bordo scuro tenue */ --c-gray-50: 15 23 42; --c-gray-100: 15 23 42; --c-gray-200: 30 41 59; --c-gray-300: 51 65 85; --c-gray-400: 71 85 105; --c-gray-500: 100 116 139; --c-gray-600: 148 163 184; --c-gray-700: 203 213 225; --c-gray-800: 226 232 240; --c-gray-900: 241 245 249; --c-gray-950: 248 250 252; } /* Accenti: le tonalita' 200/300/400 sono tarate per fondo scuro e su bianco risultano slavate. Qui si caricano. (Gli accenti NON passano da variabili: `extend` sostituirebbe l'intera scala, spegnendo le tonalita' non elencate.) */ :root[data-theme="light"] .text-emerald-200, :root[data-theme="light"] .text-emerald-300 { color: #047857; } :root[data-theme="light"] .text-emerald-400 { color: #059669; } :root[data-theme="light"] .text-amber-200, :root[data-theme="light"] .text-amber-300 { color: #b45309; } :root[data-theme="light"] .text-amber-400 { color: #d97706; } :root[data-theme="light"] .text-red-300 { color: #b91c1c; } :root[data-theme="light"] .text-red-400, :root[data-theme="light"] .text-rose-400 { color: #dc2626; } :root[data-theme="light"] .text-sky-200, :root[data-theme="light"] .text-sky-300 { color: #0369a1; } :root[data-theme="light"] .text-blue-200, :root[data-theme="light"] .text-blue-400 { color: #2563eb; } :root[data-theme="light"] .text-violet-200, :root[data-theme="light"] .text-violet-400 { color: #7c3aed; } :root[data-theme="light"] .text-primary-200, :root[data-theme="light"] .text-primary-300 { color: #02638a; } :root[data-theme="light"] .text-primary-400 { color: #007ba8; } /* stesse tonalita' nelle varianti (l'utility generata porta il prefisso nel nome) */ :root[data-theme="light"] .hover\:text-emerald-200:hover, :root[data-theme="light"] .hover\:text-emerald-300:hover { color: #047857; } :root[data-theme="light"] .hover\:text-amber-300:hover { color: #b45309; } :root[data-theme="light"] .hover\:text-amber-400:hover { color: #d97706; } :root[data-theme="light"] .hover\:text-red-300:hover { color: #b91c1c; } :root[data-theme="light"] .hover\:text-red-400:hover { color: #dc2626; } :root[data-theme="light"] .hover\:text-primary-300:hover { color: #02638a; } :root[data-theme="light"] .hover\:text-primary-400:hover { color: #007ba8; } :root[data-theme="light"] .group:hover .group-hover\:text-primary-300, :root[data-theme="light"] .group:hover .group-hover\:text-primary-400 { color: #007ba8; } :root[data-theme="light"] .peer:checked ~ .peer-checked\:text-primary-300 { color: #02638a; } /* Su fondo accentato PIENO il bianco deve restare bianco: qui "white" e' scuro, e senza questa regola i pulsanti avrebbero testo scuro su blu/rosso. NB: colpisce solo le classi piene — `bg-primary-500/10` e' un'altra classe. */ :root[data-theme="light"] :is(.bg-primary-500, .bg-primary-600, .bg-primary-700, .bg-red-500, .bg-red-600, .bg-emerald-500, .bg-emerald-600, .bg-amber-500, .bg-amber-600, .bg-sky-500, .bg-sky-600, .bg-violet-500), :root[data-theme="light"] :is(.bg-primary-500, .bg-primary-600, .bg-primary-700, .bg-red-500, .bg-red-600, .bg-emerald-500, .bg-emerald-600, .bg-amber-500, .bg-amber-600, .bg-sky-500, .bg-sky-600, .bg-violet-500) :is(.text-white, svg, span) { color: #fff; } /* pallino del toggle acceso: bianco su binario colorato */ :root[data-theme="light"] .peer:checked ~ [class*="peer-checked:after:bg-white"]::after { background-color: #fff; } /* Il logo fornito e' la versione chiara (bianca), invisibile su barra chiara. invert ribalta la luminosita', hue-rotate riporta il pallino al suo blu: evita di dipendere da un secondo file remoto che potrebbe non esistere. */ :root[data-theme="light"] img[alt="Logo IG3"] { filter: invert(1) hue-rotate(180deg); } /* Icone dell'interruttore tema: si mostra quella dell'azione che il click compie (luna = passa a scuro? no: nel tema scuro si offre il chiaro, e viceversa). */ .tema-icona-sole { display: none; } :root[data-theme="light"] .tema-icona-sole { display: block; } :root[data-theme="light"] .tema-icona-luna { display: none; } span.tema-icona-sole, span.tema-icona-luna { display: none; } :root:not([data-theme="light"]) span.tema-icona-luna { display: inline; } :root[data-theme="light"] span.tema-icona-sole { display: inline; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--c-white) / 0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-white) / 0.3); } /* Alpine.js cloak */ [x-cloak] { display: none !important; } /* HTMX loading indicator */ .htmx-request { opacity: 0.7; transition: opacity 200ms ease-in; } .htmx-settling { opacity: 1; transition: opacity 200ms ease-in; } /* Focus ring for dark mode inputs */ input:focus, textarea:focus, select:focus { outline: none; } /* Toggle switch */ input[type="checkbox"]:checked + div { background-color: #0097d2; } /* Glassmorphism effect */ .glass { background: rgb(var(--c-surface-900) / 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgb(var(--c-white) / 0.05); } /* Pulse animation for save indicator */ @keyframes save-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } } .save-indicator { animation: save-pulse 1s ease-out; } /* Il calendario nativo dei campi data segue il tema (icona e popup del browser) */ input[type="date"] { color-scheme: dark; } :root[data-theme="light"] input[type="date"] { color-scheme: light; } /* Select arrow for dark mode */ select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.25em 1.25em; padding-right: 2.5rem; } /* Stampa e PDF Layout Forziamo uno stile pulito (Light Mode) perché il dark-theme in stampa è solitamente oscurato o rimosso dai browser. */ @media print { body { background-color: white !important; color: black !important; } /* Disabilita trasparenze dark, glass e ombre in stampa */ [class*="bg-surface"], [class*="bg-primary"], .glass { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* Tutti i testi bianchi o grigi chiari li convertiamo tassativamente al nero o grigio scuro */ * { color: black !important; text-shadow: none !important; } .text-gray-400, .text-gray-500, .text-gray-300 { color: #333 !important; } .text-emerald-400 { color: #059669 !important; font-weight: bold; } .text-rose-400 { color: #e11d48 !important; font-weight: bold; } /* Bordi delle tabelle e riquadri in nero leggero */ [class*="border-white"], table, th, td { border-color: #ccc !important; } /* Colora gli header tabella per un'ottima leggibilità su bianco */ th, .bg-surface-800\/90 { background-color: #f3f4f6 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color: black !important; } /* Gestione dei Badge e pills */ [class*="bg-primary-500\/20"] { border: 1px solid #111 !important; background-color: white !important; } /* Non tagliare i riquadri e i titoli durante il cambio pagina */ .rounded-2xl { border-radius: 4px !important; border: 1px solid #aaa !important; margin-bottom: 20px !important; page-break-inside: avoid; padding: 10px !important; } h1, h2, h3, h4 { page-break-after: avoid; page-break-inside: avoid; } }