/*
 * Tema notte «Aurora» — il cielo prima dell'alba (design_system_aurora.md §2).
 * Fondo blu notte (mai nero), superfici blu elevato, accento indaco chiaro.
 * Stessi selettori della versione precedente: coprono anche le pagine non
 * ancora ridisegnate, che così restano coerenti durante la transizione.
 */

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0d1020 !important;
    color: #c3c9e0 !important;
}

html.dark .bg-background {
    background-color: #0d1020 !important;
}

html.dark .bg-surface,
html.dark .bg-white,
html.dark .bg-white\/80,
html.dark .bg-white\/90 {
    background-color: #151a2e !important;
}

/* Varianti di opacità di surface: Tailwind cuoce il valore CHIARO (#fff) al
   build, quindi in notturna diventerebbero bianco translucido (fondo sballato
   della bacheca kanban, empty-state dashboard, header sticky dettaglio). Qui la
   controparte scura, mantenendo la translucenza voluta su base #151a2e. */
html.dark .bg-surface\/50 { background-color: rgb(21 26 46 / 0.5) !important; }
html.dark .bg-surface\/60 { background-color: rgb(21 26 46 / 0.6) !important; }
html.dark .bg-surface\/95 { background-color: rgb(21 26 46 / 0.95) !important; }

/* /40 e /50 mancavano mentre /60, /70 e /80 c'erano: in tema notte quelle due opacita'
   restavano chiazze chiare, e la differenza fra "coperto" e "scoperto" era invisibile a
   chi scriveva il markup. */
html.dark .bg-slate-50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 {
    background-color: #1c2238 !important;
}

html.dark .bg-slate-100,
html.dark .bg-soft {
    background-color: #262e4e !important;
}

html.dark .text-text-main,
html.dark .text-slate-900 {
    color: #eef0fa !important;
}

html.dark .text-slate-800 {
    color: #dde1f2 !important;
}

html.dark .text-slate-700 {
    color: #c3c9e0 !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-muted {
    color: #8f96b3 !important;
}

html.dark .text-slate-400,
html.dark .text-faint {
    color: #6b7290 !important;
}

html.dark .border-border,
html.dark .border-border-2,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-slate-700 {
    border-color: #232a44 !important;
}

html.dark .shadow-sm,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.9) !important;
}

html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: #242b4a !important;
}

html.dark .hover\:text-slate-800:hover,
html.dark .hover\:text-slate-900:hover {
    color: #eef0fa !important;
}

html.dark .bg-blue-50,
html.dark .bg-soft-indigo {
    background-color: #23294d !important;
}

html.dark .text-primary {
    color: #a5b4fc !important;
}

html.dark .hover\:text-primary:hover {
    color: #c7d2fe !important;
}

html.dark .bg-blue-50.text-primary,
html.dark .bg-blue-50 .text-primary {
    color: #e0e7ff !important;
}

html.dark .bg-blue-50 .material-symbols-outlined {
    color: #c7d2fe !important;
}

/* Bottoni solid: in notte il bianco va solo sull'indaco profondo (contrasto). */
html.dark .bg-primary {
    background-color: #4f46e5 !important;
}

/* Pill/box semantici (delta KPI, badge stato, box esito) — mappa notte globale.
   Copre sfondi, bordi e testi delle tre famiglie (ok/errore/warning) così i
   box di successo/errore rendono bene in notturna ovunque, non solo nelle liste. */
html.dark .bg-emerald-50 {
    background-color: #132f20 !important;
}

html.dark .bg-emerald-100 {
    background-color: #17402c !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
    color: #86efac !important;
}

html.dark .border-emerald-100,
html.dark .border-emerald-200 {
    border-color: #2f7d5a !important;
}

html.dark .bg-rose-50 {
    background-color: #3a1d27 !important;
}

html.dark .bg-rose-100 {
    background-color: #4a2330 !important;
}

html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800 {
    color: #fda4af !important;
}

html.dark .border-rose-100,
html.dark .border-rose-200 {
    border-color: #8e3b5d !important;
}

html.dark .bg-amber-50 {
    background-color: #332612 !important;
}

html.dark .bg-amber-100 {
    background-color: #43310f !important;
}

html.dark .border-amber-200 {
    border-color: #7c5a21 !important;
}

html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 {
    color: #fcd34d !important;
}

html.dark .settings-mesh {
    background:
        radial-gradient(900px 300px at 15% -10%, rgba(99, 102, 241, 0.24), transparent 70%),
        radial-gradient(700px 260px at 100% 0%, rgba(139, 92, 246, 0.18), transparent 72%),
        #0d1020 !important;
}

html.dark .settings-glow-card {
    background: linear-gradient(140deg, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.12) 52%, rgba(21, 26, 46, 0.95) 100%) !important;
}

html.dark .settings-glow-card.border-blue-100 {
    border-color: #232a44 !important;
}

html.dark .settings-nav-shell {
    background: rgba(21, 26, 46, 0.94) !important;
}

html.dark .settings-tab-inactive {
    color: #c3c9e0 !important;
}

html.dark .settings-tab-inactive:hover {
    background: #242b4a !important;
}

html.dark .settings-tab-active {
    color: #e0e7ff !important;
    background: rgba(79, 70, 229, 0.45) !important;
    border-color: rgba(165, 180, 252, 0.55) !important;
}

html.dark .settings-tab-active .settings-tab-icon {
    color: #c7d2fe !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    background-color: #10152a !important;
    color: #dde1f2 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7290 !important;
}

html.dark code {
    color: #c7d2fe;
}

html.dark #moduleDetailDrawer {
    background-color: #151a2e !important;
}

html.dark #detailBackdrop {
    background-color: rgba(4, 6, 16, 0.72) !important;
}

html.dark #sidebarGroupsContainer .text-slate-400 {
    color: #6b7290 !important;
}

html.dark #sidebarGroupsContainer .text-slate-600 {
    color: #c3c9e0 !important;
}

html.dark .border-white\/80 {
    border-color: rgba(165, 180, 252, 0.35) !important;
}

html.dark #settingsPasswordBreachBox {
    background: linear-gradient(135deg, #1c2238 0%, #151a2e 100%) !important;
    border-color: #2e3660 !important;
}

html.dark #settingsPasswordBreachBox .text-slate-700 {
    color: #dde1f2 !important;
}

html.dark #settingsPasswordBreachBox .text-slate-600,
html.dark #settingsPasswordBreachBox .text-slate-500 {
    color: #c3c9e0 !important;
}

html.dark #moduleRows button[data-action='open-record'] {
    color: #a5b4fc !important;
}

html.dark #moduleRows button[data-action='open-record']:hover {
    color: #c7d2fe !important;
}

/* Module table readability (light + dark) */
#moduleRows > tr {
    transition: background-color 0.15s ease;
}

#moduleRows > tr:nth-child(odd) {
    background-color: #ffffff;
}

#moduleRows > tr:nth-child(even) {
    background-color: #fafbfe;
}

#moduleRows > tr + tr {
    border-top-color: #e9ecf4 !important;
}

#moduleRows > tr:hover {
    background-color: #eef0ff !important;
}

#moduleRows > tr.bg-blue-50\/70 {
    background-color: #e6e9ff !important;
}

html.dark #moduleRows > tr:nth-child(odd) {
    background-color: #131830;
}

html.dark #moduleRows > tr:nth-child(even) {
    background-color: #161c36;
}

html.dark #moduleRows > tr + tr {
    border-top-color: #232a44 !important;
}

html.dark #moduleRows > tr:hover {
    background-color: #1f2542 !important;
}

html.dark .module-toolbar-button.is-active {
    border-color: #4f46e5 !important;
    color: #e0e7ff !important;
    background: rgba(49, 46, 129, 0.6) !important;
}

html.dark #moduleToolbarPanels {
    background: #151a2e !important;
}

html.dark #moduleBulkBar {
    background: rgba(35, 41, 77, 0.8) !important;
}

html.dark #moduleRows > tr.bg-blue-50\/70 {
    background-color: #23294d !important;
}

html.dark #moduleRows .bg-blue-50 {
    background-color: #23294d !important;
}

html.dark #moduleRows .text-blue-700 {
    color: #c7d2fe !important;
}

html.dark #moduleRows .border-blue-200 {
    border-color: #4c5296 !important;
}

html.dark #moduleRows .bg-emerald-50 {
    background-color: #132f20 !important;
}

html.dark #moduleRows .text-emerald-700 {
    color: #86efac !important;
}

html.dark #moduleRows .border-emerald-200 {
    border-color: #2f7d5a !important;
}

html.dark #moduleRows .bg-rose-50 {
    background-color: #3a1d27 !important;
}

html.dark #moduleRows .text-rose-700 {
    color: #fda4af !important;
}

html.dark #moduleRows .border-rose-200 {
    border-color: #8e3b5d !important;
}

html.dark #moduleRows .bg-cyan-50 {
    background-color: #16303d !important;
}

html.dark #moduleRows .text-cyan-700 {
    color: #7dd3fc !important;
}

html.dark #moduleRows .border-cyan-200 {
    border-color: #3e7994 !important;
}

html.dark #moduleRows .bg-violet-50 {
    background-color: #2b2350 !important;
}

html.dark #moduleRows .text-violet-700 {
    color: #c4b5fd !important;
}

html.dark #moduleRows .border-violet-200 {
    border-color: #6650a1 !important;
}

html.dark .module-workflow-card {
    background: linear-gradient(145deg, #1a2140 0%, #151a2e 100%) !important;
    border-color: #2e3660 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .module-workflow-empty {
    background: #1c2238 !important;
    border-color: #2e3660 !important;
}

html.dark .module-workflow-card .text-slate-900 {
    color: #eef0fa !important;
}

html.dark .module-workflow-card .text-slate-700,
html.dark .module-workflow-card .text-slate-600,
html.dark .module-workflow-card .text-slate-500,
html.dark .module-workflow-empty {
    color: #c3c9e0 !important;
}

html.dark .module-workflow-chip {
    background: #10152a !important;
    border-color: #3d468a !important;
    color: #e0e7ff !important;
}

html.dark .audit-chip-success {
    background: #132f20 !important;
    border-color: #2f7d5a !important;
    color: #86efac !important;
}

html.dark .audit-chip-error {
    background: #3a1d27 !important;
    border-color: #8e3b5d !important;
    color: #fda4af !important;
}

html.dark .audit-chip-warn {
    background: #332612 !important;
    border-color: #8b5e2a !important;
    color: #fcd34d !important;
}

/* Chip stato mail in arrivo (inbound_emails): la versione giorno è inline nella
   pagina; qui la controparte notturna sui token Aurora (gap segnalato in F3). */
html.dark .ie-chip-applied  { background: #132f20 !important; color: #86efac !important; }
html.dark .ie-chip-received { background: #23294d !important; color: #a5b4fc !important; }
html.dark .ie-chip-failed   { background: #3a1d27 !important; color: #fda4af !important; }
html.dark .ie-chip-skipped  { background: #332612 !important; color: #fbbf24 !important; }


/* ---------------------------------------------------------------------------
   Gradienti (from-* / to-*)

   Il file non conteneva NESSUNA regola per le utility di gradiente: i pannelli che
   le usano restavano chiazze chiare in tema notte, perche' `--tw-gradient-from` e
   `--tw-gradient-to` portano colori scelti per il tema chiaro.

   Si rimappano le due estremita' sulle superfici del tema scuro invece di elencare
   una per una le famiglie: un gradiente in tema notte deve solo restare dentro la
   scala della pagina, e un elenco per famiglia si dimentica alla prima aggiunta.
   --------------------------------------------------------------------------- */
html.dark [class*="from-"] {
    --tw-gradient-from: #151a2e var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(21, 26, 46, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.dark [class*="to-"] {
    --tw-gradient-to: #1b2140 var(--tw-gradient-to-position);
}

/* ------------------------------------------------------------------------- */
/* Sidebar collassabile a binario (CRM-127).                                  */
/*                                                                            */
/* Sta QUI e non fra le classi Tailwind perche' Tailwind e' compilato: lo      */
/* scanner cerca stringhe letterali nel sorgente, quindi una classe applicata  */
/* a runtime sopravvive fino al primo `npm run build:css` e poi sparisce senza */
/* che niente lo segnali. Questo file e' scritto a mano ed e' caricato da      */
/* tutte le pagine, come app.css.                                             */

nav.crm-side-collassata {
    width: 72px;
}

/* Le etichette si riducono a filetti invece di sparire del tutto: a binario   */
/* stretto restano le icone, e l'ingombro non salta.                          */
nav.crm-side-collassata #sidebarGroupsContainer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

nav.crm-side-collassata .crm-side-etichetta,
nav.crm-side-collassata [data-role="group-label"],
nav.crm-side-collassata a > span:not(.material-symbols-outlined),
nav.crm-side-collassata button:not(#sidebarCollapseHandle) > span:not(.material-symbols-outlined) {
    display: none;
}

/* Il blocco del marchio in cima: resta il quadrato, sparisce il testo.        */
nav.crm-side-collassata > div:first-child {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

nav.crm-side-collassata > div:first-child > div:last-child {
    display: none;
}

/* La maniglia: sul bordo, sempre raggiungibile, e con un bersaglio abbastanza */
/* grande da colpire senza mirare.                                             */
.crm-side-maniglia {
    position: absolute;
    right: -12px;
    top: 84px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #ffffff);
    color: #64748b;
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
    cursor: pointer;
}

.crm-side-maniglia:hover {
    color: #0f172a;
}

html.dark .crm-side-maniglia {
    border-color: #2a3154;
    background: #161c33;
    color: #94a3b8;
}

/* Modo dimostrazione. Le classi ambra della targa e delle note sono COMPOSTE
   (.demo-targa, .demo-nota): non passano dalle utility .bg-amber-* qui sopra, quindi
   in tema notte resterebbero pastiglie chiarissime su fondo blu notte. Stessi valori
   di quelle utility, cosi' l'ambra della dimostrazione e' la stessa ambra di tutto il
   resto del prodotto. */
html.dark .demo-targa {
    border-color: #7c5a21;
    background-color: #332612;
    color: #fcd34d;
}

html.dark .demo-targa:hover {
    border-color: #a1741f;
    background-color: #43310f;
}

html.dark .demo-nota,
html.dark .demo-nota strong {
    color: #fcd34d;
}

html.dark .demo-nota-icona,
html.dark .demo-gruppo-icona {
    color: #f0b429;
}

html.dark .demo-dialogo-simbolo {
    border-color: #7c5a21;
    background-color: #332612;
    color: #fcd34d;
}

html.dark .demo-elenco {
    border-color: #7c5a21;
}

/* Il controllo spento: in tema notte la sola desaturazione lo lascia troppo vicino al
   fondo, e «spento» finirebbe per somigliare a «invisibile». Si alza l'opacita'. */
html.dark .demo-off,
html.dark .demo-off:hover {
    opacity: 0.72;
}