/* ========================================================================
   Temi colore + sfondi personalizzabili (aspetto CRM)
   ========================================================================
   Caricato DOPO app.css in base.html. Non richiede ricompilazione Tailwind:
   le utility v4 (bg-fim-navy, text-text-primary, …) leggono le CSS custom
   properties a runtime, quindi qui ci limitiamo a SOVRASCRIVERE le variabili
   sotto le classi .theme-<nome> applicate su <html>.

   Due assi ORTOGONALI:
   - MODO chiaro/scuro: classe .dark (toggle esistente, localStorage 'theme').
   - TEMA colore: classe .theme-<nome> (localStorage 'fim_theme').
   - SFONDO: attributo [data-bg=...] su <html> (localStorage 'fim_bg').

   Convenzione temi: ridefiniamo solo il PRIMARIO (famiglia --color-fim-navy).
   Il rosso (--color-fim-red) resta semantico = "pericolo/priorità" in tutti i
   temi, per coerenza UX. Ogni tema fornisce la variante chiara (.theme-x) e
   quella scura (.dark.theme-x, accento schiarito per contrasto su scuro).
   ======================================================================== */

/* ---- Oceano (teal/cyan) ---- */
.theme-ocean        { --color-fim-navy:#0E7490; --color-fim-navy-hover:#155E75; }
.dark.theme-ocean   { --color-fim-navy:#2DD4BF; --color-fim-navy-hover:#5EEAD4; }

/* ---- Foresta (verde) ---- */
.theme-forest       { --color-fim-navy:#15803D; --color-fim-navy-hover:#166534; }
.dark.theme-forest  { --color-fim-navy:#4ADE80; --color-fim-navy-hover:#86EFAC; }

/* ---- Tramonto (arancio) ---- */
.theme-sunset       { --color-fim-navy:#C2410C; --color-fim-navy-hover:#9A3412; }
.dark.theme-sunset  { --color-fim-navy:#FB923C; --color-fim-navy-hover:#FDBA74; }

/* ---- Viola (indaco/violet) ---- */
.theme-violet       { --color-fim-navy:#6D28D9; --color-fim-navy-hover:#5B21B6; }
.dark.theme-violet  { --color-fim-navy:#A78BFA; --color-fim-navy-hover:#C4B5FD; }

/* ---- Grafite (monocromatico) ---- */
.theme-graphite      { --color-fim-navy:#334155; --color-fim-navy-hover:#1E293B; }
.dark.theme-graphite { --color-fim-navy:#94A3B8; --color-fim-navy-hover:#CBD5E1; }

/* ========================================================================
   Temi "full surface" (2026)
   ========================================================================
   I temi qui sopra ritoccano solo l'accento. Questi ridefiniscono ANCHE le
   superfici (app/surface/muted/border/testi): e' cio' che li fa sembrare
   prodotti diversi e non lo stesso CRM ricolorato.

   Spunti dai pattern dominanti nei SaaS moderni (Linear, Notion, Nord):
   fondo mai nero puro, superfici a strati, neutri caldi al posto del bianco
   pieno, un solo accento saturo che guida l'attenzione.

   REGOLA: ogni tema DEVE definire sia `.theme-x` sia `.dark.theme-x`.
   `.dark` (in app.css) e `.theme-x` hanno la stessa specificita' e themes.css
   e' caricato dopo: senza la variante `.dark.theme-x` (0,2,0) le superfici
   chiare vincerebbero anche in modo scuro.
   ======================================================================== */

/* ========================================================================
   Forma (shape): il tema non e' solo colore
   ========================================================================
   Un tema cambia anche il "linguaggio" grafico: raggio degli angoli, ombre,
   trattamento delle tabelle. I template usano le utility Tailwind grezze
   (`rounded`, `rounded-md`, ...), quindi qui le ricolleghiamo a variabili
   nostre: themes.css NON e' dentro @layer, e il CSS senza layer vince sempre
   sulle utility layerizzate di app.css. Un tema che non tocca queste
   variabili resta identico a prima.

   `rounded-full` NON e' ridefinito: pallini, avatar e pill devono restare
   tondi in ogni tema.
   ======================================================================== */
:root {
  --fim-r-sm: .25rem;    /* .rounded, .rounded-sm */
  --fim-r-md: .375rem;   /* .rounded-md */
  --fim-r-lg: .5rem;     /* .rounded-lg */
  --fim-r-xl: .75rem;    /* .rounded-xl */
  --fim-card-shadow: none;      /* ombra dei contenitori (section/card) */
  --fim-thead-bg: transparent;  /* fondo intestazione tabella */
  --fim-thead-border: 0;        /* spessore riga sotto l'intestazione (0 = come oggi) */
  --fim-stripe: transparent;    /* righe alternate */
}

.rounded, .rounded-sm { border-radius: var(--fim-r-sm); }
.rounded-md { border-radius: var(--fim-r-md); }
.rounded-lg { border-radius: var(--fim-r-lg); }
.rounded-xl { border-radius: var(--fim-r-xl); }
.rounded-t, .rounded-t-sm {
  border-top-left-radius: var(--fim-r-sm); border-top-right-radius: var(--fim-r-sm);
}
.rounded-t-md { border-top-left-radius: var(--fim-r-md); border-top-right-radius: var(--fim-r-md); }
.rounded-t-lg { border-top-left-radius: var(--fim-r-lg); border-top-right-radius: var(--fim-r-lg); }
.rounded-b-md { border-bottom-left-radius: var(--fim-r-md); border-bottom-right-radius: var(--fim-r-md); }
.rounded-bl-sm { border-bottom-left-radius: var(--fim-r-sm); }
.rounded-br-sm { border-bottom-right-radius: var(--fim-r-sm); }

/* Contenitori: le sezioni della scheda deal e le card sono <section>/.card
   su bg-surface. Restringiamo l'ombra a questi per non appesantire ogni
   bottone o dropdown che usa bg-surface. */
section.bg-surface, .card, .kpi-card { box-shadow: var(--fim-card-shadow); }

/* Componenti kanban: `@apply rounded` compila un valore letterale, non una
   variabile — li riagganciamo a mano. */
.kanban-column, .kanban-card, .kanban-counter,
.kanban-stage-badge, .kanban-priority-badge { border-radius: var(--fim-r-sm); }

/* Tabelle: intestazione e righe alternate seguono il tema. */
table thead tr { background: var(--fim-thead-bg); }
table thead tr th {
  border-bottom-width: var(--fim-thead-border);
  border-bottom-color: var(--color-border-strong);
}
table tbody tr:nth-child(even) { background: var(--fim-stripe); }

/* ---- Midnight (indaco/violetto su superfici inchiostro) ---- */
.theme-midnight {
  /* Forma: angoli generosi, ombra profonda ma diffusa. */
  --fim-r-sm: .5rem; --fim-r-md: .625rem; --fim-r-lg: .875rem; --fim-r-xl: 1.125rem;
  --radius-sm: .5rem; --radius-md: .625rem; --radius-lg: .875rem; --radius-xl: 1.125rem;
  --fim-card-shadow: 0 1px 2px rgba(20, 23, 42, .05), 0 10px 28px -18px rgba(20, 23, 42, .45);
  --color-fim-navy: #5B5BD6; --color-fim-navy-hover: #4A4AC4;
  --color-app: #F5F6FB; --color-surface: #FFFFFF; --color-muted: #EDEFF8;
  --color-border: #E2E5F1; --color-border-strong: #CBD0E5;
  --color-text-primary: #14162B; --color-text-secondary: #454A6B; --color-text-muted: #6E7391;
}
.dark.theme-midnight {
  --fim-card-shadow: 0 1px 0 rgba(139, 139, 245, .06), 0 16px 40px -24px rgba(0, 0, 0, .85);
  --color-fim-navy: #8B8BF5; --color-fim-navy-hover: #A5A5FF;
  --color-app: #0B0D18; --color-surface: #14172A; --color-muted: #1E2238;
  --color-border: #262B45; --color-border-strong: #343B5C;
  --color-text-primary: #E8EAF6; --color-text-secondary: #B6BBD8; --color-text-muted: #858BAC;
  --color-fim-red: #F2576F; --color-fim-red-hover: #FF7189;
}

/* ---- Sabbia (neutri caldi + terracotta) ---- */
.theme-sand {
  /* Forma: molto morbida, ombra calda, tabelle a righe alternate senza
     reticolo — lettura da documento piu' che da foglio di calcolo. */
  --fim-r-sm: .625rem; --fim-r-md: .75rem; --fim-r-lg: 1rem; --fim-r-xl: 1.25rem;
  --radius-sm: .625rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.25rem;
  --fim-card-shadow: 0 2px 10px -4px rgba(90, 70, 50, .16);
  --fim-thead-border: 2px;
  --fim-stripe: rgba(180, 85, 45, .045);
  --color-fim-navy: #B4552D; --color-fim-navy-hover: #98421F;
  --color-app: #F7F4EF; --color-surface: #FFFDF9; --color-muted: #EFEAE1;
  --color-border: #E5DED2; --color-border-strong: #D2C7B6;
  --color-text-primary: #2A241D; --color-text-secondary: #5B5145; --color-text-muted: #857A6C;
  --color-success: #4D7C4A; --color-warning: #B4761A; --color-info: #4E7C8A;
}
.dark.theme-sand {
  --fim-card-shadow: 0 2px 12px -6px rgba(0, 0, 0, .7);
  --fim-stripe: rgba(224, 138, 94, .06);
  --color-fim-navy: #E08A5E; --color-fim-navy-hover: #EFA07A;
  --color-app: #1A1613; --color-surface: #241F1A; --color-muted: #322B24;
  --color-border: #3A322A; --color-border-strong: #4C4238;
  --color-text-primary: #F2EBE1; --color-text-secondary: #CFC3B4; --color-text-muted: #9E9182;
  --color-fim-red: #D4614F; --color-fim-red-hover: #E47765;
  --color-success: #7FA96E; --color-warning: #D9A038; --color-info: #7FA8B5;
}

/* ---- Nordic (blu-grigio desaturato, palette Nord) ---- */
.theme-nordic {
  /* Forma: flat. Nessuna ombra, angoli contenuti, intestazioni marcate:
     la gerarchia la fanno i bordi, non la profondita'. */
  --fim-r-sm: .25rem; --fim-r-md: .25rem; --fim-r-lg: .375rem; --fim-r-xl: .5rem;
  --radius-sm: .25rem; --radius-md: .25rem; --radius-lg: .375rem; --radius-xl: .5rem;
  --fim-card-shadow: none;
  --fim-thead-bg: rgba(94, 129, 172, .10);
  --fim-thead-border: 2px;
  --color-fim-navy: #5E81AC; --color-fim-navy-hover: #4C6E96;
  --color-app: #ECEFF4; --color-surface: #FFFFFF; --color-muted: #E3E8F0;
  --color-border: #D8DEE9; --color-border-strong: #C0C9D8;
  --color-text-primary: #2E3440; --color-text-secondary: #434C5E; --color-text-muted: #6B7688;
  --color-success: #4C8E6E; --color-warning: #C0873C; --color-info: #5E81AC;
}
.dark.theme-nordic {
  --fim-thead-bg: rgba(136, 192, 208, .10);
  --color-fim-navy: #88C0D0; --color-fim-navy-hover: #A3D4E2;
  --color-app: #232830; --color-surface: #2E3440; --color-muted: #3B4252;
  --color-border: #3B4252; --color-border-strong: #4C566A;
  --color-text-primary: #ECEFF4; --color-text-secondary: #D8DEE9; --color-text-muted: #A5B0C0;
  --color-fim-red: #BF616A; --color-fim-red-hover: #D08770;
  --color-success: #A3BE8C; --color-warning: #EBCB8B; --color-info: #81A1C1;
}

/* ---- Neon (contrasto alto, accento elettrico) ---- */
.theme-neon {
  /* Forma: spigoli vivi, zero ombre, intestazioni piene. Look "terminale". */
  --fim-r-sm: 0; --fim-r-md: 0; --fim-r-lg: 0; --fim-r-xl: 0;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --fim-card-shadow: none;
  --fim-thead-bg: rgba(0, 145, 213, .10);
  --fim-thead-border: 2px;
  --color-fim-navy: #0091D5; --color-fim-navy-hover: #0077B0;
  --color-app: #F2F5F9; --color-surface: #FFFFFF; --color-muted: #E8EDF4;
  --color-border: #DCE3EC; --color-border-strong: #C3CCDA;
  --color-text-primary: #0B1220; --color-text-secondary: #3C4757; --color-text-muted: #66738A;
}
.dark.theme-neon {
  --fim-thead-bg: rgba(34, 211, 238, .10);
  --fim-card-shadow: 0 0 0 1px rgba(34, 211, 238, .06);
  --color-fim-navy: #22D3EE; --color-fim-navy-hover: #67E8F9;
  --color-app: #05070B; --color-surface: #0E1219; --color-muted: #161C26;
  --color-border: #1D2530; --color-border-strong: #2B3543;
  --color-text-primary: #E9F2F7; --color-text-secondary: #AFBECB; --color-text-muted: #7A8A9B;
  --color-fim-red: #FF4D6D; --color-fim-red-hover: #FF6E88;
  --color-success: #2DD4A7; --color-warning: #FBBF24; --color-info: #38BDF8;
}

/* ---- Cartoon (illustrazione piatta bancario-legale, 0.147.0) ----
   Il tema piu' "lontano" dal CRM di serie: oltre a palette e forma cambia
   tipografia, contorni, ombre e sfondo. Qui solo i token; i componenti
   (bottoni, card, menu, kanban, modali, toast...) stanno in
   theme-cartoon.css, tutti sotto .theme-cartoon. Palette dall'immagine di
   riferimento: navy #1d3d5c, ardesia #4f6876, salvia #8aa9a4, crema
   #e2e0ce, sabbia #958f84, oro #e8c76a. Testi verificati AA (>= 4.5:1) su
   app, surface e muted, in chiaro e in scuro. */
.theme-cartoon {
  --fim-r-sm: .625rem; --fim-r-md: .875rem; --fim-r-lg: 1.125rem; --fim-r-xl: 1.5rem;
  --radius-sm: .625rem; --radius-md: .875rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem;
  /* stile "sticker": contorno spesso e ombra PIENA sfalsata, niente sfumature */
  --cartoon-ink: #1D3D5C;          /* contorni */
  --cartoon-side: #0F2338;         /* il "lato" estruso sotto card e tasti */
  --cartoon-line: 2.5px;           /* spessore contorni */
  /* Profondita' su livelli, luce unica in alto a sinistra: le ombre cadono
     in basso a destra e crescono con la "distanza" dallo sfondo.
     z1 aree/pannelli -> z2 card -> z3 elementi interattivi (tasti) ->
     z4 menu a tendina, modali, toast. Ogni ombra = lato pieno + ombra
     morbida a terra + luce interna in alto. */
  --cartoon-z1: 2px 4px 0 var(--cartoon-side), 6px 12px 18px -10px rgba(16, 34, 58, .4), inset 0 2px 0 rgba(255, 255, 255, .6);
  --fim-card-shadow: 3px 6px 0 var(--cartoon-side), 10px 18px 26px -10px rgba(16, 34, 58, .5), inset 1px 2px 0 rgba(255, 255, 255, .75);
  --cartoon-z2-up: 5px 10px 0 var(--cartoon-side), 16px 28px 34px -12px rgba(16, 34, 58, .55), inset 1px 2px 0 rgba(255, 255, 255, .8);
  --cartoon-key: 2px 4px 0 var(--cartoon-side), 6px 10px 14px -5px rgba(16, 34, 58, .45), inset 1px 2px 0 rgba(255, 255, 255, .55);
  --cartoon-key-hover: 3px 6px 0 var(--cartoon-side), 10px 16px 20px -6px rgba(16, 34, 58, .5), inset 1px 2px 0 rgba(255, 255, 255, .6);
  --cartoon-key-down: 0 0 0 var(--cartoon-side), 1px 2px 4px rgba(16, 34, 58, .35), inset 1px 2px 4px rgba(16, 34, 58, .25);
  --cartoon-z4: 5px 9px 0 var(--cartoon-side), 18px 34px 48px -12px rgba(16, 34, 58, .6), inset 1px 2px 0 rgba(255, 255, 255, .7);
  --cartoon-gloss: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 55%, rgba(16, 34, 58, .12));
  --cartoon-surface-hi: #FFFDF6;   /* luce in cima alle card */
  --cartoon-surface-lo: #F5E8C6;   /* ombra in fondo alle card */
  --cartoon-well: inset 0 3px 0 rgba(16, 34, 58, .13), 0 2px 0 rgba(255, 255, 255, .8);  /* campi incavati */
  --fim-thead-bg: #1D3D5C;         /* intestazioni tabella navy... */
  --cartoon-thead-text: #FFF6E0;   /* ...con testo crema */
  --fim-thead-border: 0;
  --fim-stripe: rgba(255, 255, 255, .8);   /* righe alternate crema/bianco */
  --cartoon-ink-soft: #B9AE8C;     /* bordi interni (righe, separatori) */
  --cartoon-gold: #E8C76A;         /* accenti: spunta, pennino, bottoni primari */
  --cartoon-gold-hover: #F2D88E;
  --cartoon-on-gold: #10223A;      /* testo sopra l'oro */
  --cartoon-on-primary: #FFF6E0;   /* testo sopra il primario (navy) */
  /* fasce colorate delle card, a rotazione */
  --cartoon-band-1: #8AA9A4; --cartoon-band-2: #E8C76A; --cartoon-band-3: #7F9CC9;
  --cartoon-veil: 14%;             /* quanto lo sfondo illustrato e' attenuato */
  --color-fim-navy: #1D3D5C; --color-fim-navy-hover: #142D45;
  --color-fim-red: #A8382F; --color-fim-red-hover: #8E2D25;
  --color-app: #EFE8D2; --color-surface: #FFF6E0; --color-muted: #F1E7CB;
  --color-border: #D6CBA8; --color-border-strong: #B9AE8C;
  --color-text-primary: #16304A; --color-text-secondary: #3E5666; --color-text-muted: #4F6370;
  --color-success: #3C6E5E; --color-warning: #7E560B; --color-info: #3A6670;
  --font-sans: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cartoon-display: "Fredoka", "Nunito", system-ui, sans-serif;
}
.dark.theme-cartoon {
  --cartoon-ink: #06101C;
  --cartoon-side: #02070D;
  --cartoon-z1: 2px 4px 0 var(--cartoon-side), 6px 12px 18px -10px rgba(0, 0, 0, .65), inset 0 2px 0 rgba(255, 255, 255, .08);
  --fim-card-shadow: 3px 6px 0 var(--cartoon-side), 10px 18px 26px -10px rgba(0, 0, 0, .75), inset 1px 2px 0 rgba(255, 255, 255, .1);
  --cartoon-z2-up: 5px 10px 0 var(--cartoon-side), 16px 28px 34px -12px rgba(0, 0, 0, .8), inset 1px 2px 0 rgba(255, 255, 255, .14);
  --cartoon-key: 2px 4px 0 var(--cartoon-side), 6px 10px 14px -5px rgba(0, 0, 0, .7), inset 1px 2px 0 rgba(255, 255, 255, .35);
  --cartoon-key-hover: 3px 6px 0 var(--cartoon-side), 10px 16px 20px -6px rgba(0, 0, 0, .75), inset 1px 2px 0 rgba(255, 255, 255, .4);
  --cartoon-key-down: 0 0 0 var(--cartoon-side), 1px 2px 4px rgba(0, 0, 0, .6), inset 1px 2px 4px rgba(0, 0, 0, .35);
  --cartoon-z4: 5px 9px 0 var(--cartoon-side), 18px 34px 48px -12px rgba(0, 0, 0, .85), inset 1px 2px 0 rgba(255, 255, 255, .12);
  --cartoon-surface-hi: #23415F;
  --cartoon-surface-lo: #142840;
  --cartoon-well: inset 0 3px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .08);
  --fim-thead-bg: #06101C;
  --cartoon-thead-text: #E8C76A;
  --fim-stripe: rgba(232, 199, 106, .06);
  --cartoon-ink-soft: #35536F;
  --cartoon-on-primary: #10223A;   /* in scuro il primario e' l'oro: testo inchiostro */
  --cartoon-band-1: #5E8A84; --cartoon-band-2: #C9A54A; --cartoon-band-3: #5F7FB0;
  --cartoon-veil: 18%;
  --color-fim-navy: #E8C76A; --color-fim-navy-hover: #F2D88E;
  --color-fim-red: #E8857A; --color-fim-red-hover: #F09C92;
  --color-app: #0E1C2B; --color-surface: #1A3049; --color-muted: #1E354B;
  --color-border: #2A4560; --color-border-strong: #3B5A78;
  --color-text-primary: #F2EEDC; --color-text-secondary: #CBD1BE; --color-text-muted: #A9BAB5;
  --color-success: #8FC2A8; --color-warning: #E8C76A; --color-info: #8DB8C2;
}

/* ========================================================================
   Sfondi dell'area app
   ========================================================================
   Applicati al <body> via [data-bg] su <html>. Il <body> ha già bg-app
   (tinta piena): qui ci sovrapponiamo un'immagine/gradiente. Le card usano
   bg-surface (opaco) quindi restano leggibili; lo sfondo si vede nelle
   gutter, dietro <main> e attorno alle card.

   I gradienti usano var(--color-fim-navy) così lo sfondo si ARMONIZZA col
   tema colore scelto. background-attachment: fixed → non scrolla col contenuto.
   ======================================================================== */
html[data-bg] body { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; }

/* Mesh: due aloni morbidi tinti col primario del tema (+ rosso brand). */
html[data-bg="mesh"] body {
  background-image:
    radial-gradient(at 18% 12%, color-mix(in srgb, var(--color-fim-navy) 22%, transparent) 0px, transparent 45%),
    radial-gradient(at 85% 18%, color-mix(in srgb, var(--color-fim-red) 16%, transparent) 0px, transparent 42%),
    radial-gradient(at 75% 88%, color-mix(in srgb, var(--color-fim-navy) 16%, transparent) 0px, transparent 48%);
}

/* Aurora: sfumatura diagonale soffusa. */
html[data-bg="aurora"] body {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--color-fim-navy) 14%, transparent),
    transparent 40%,
    color-mix(in srgb, var(--color-fim-red) 10%, transparent));
}

/* Dots: pattern a pois sottilissimi. */
html[data-bg="dots"] body {
  background-image: radial-gradient(color-mix(in srgb, var(--color-text-muted) 35%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Grid: griglia leggera. */
html[data-bg="grid"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-border-strong) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-border-strong) 60%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Glow: bagliore singolo in alto. */
html[data-bg="glow"] body {
  background-image: radial-gradient(120% 80% at 50% -10%,
    color-mix(in srgb, var(--color-fim-navy) 20%, transparent) 0%, transparent 60%);
}

/* Custom: immagine caricata dall'utente, servita dalla route autenticata.
   La var --app-custom-bg è impostata dallo script FOUC in base.html. Un velo
   (linear-gradient piatto su --color-app) attenua l'immagine per mantenere
   leggibili le aree trasparenti. */
html[data-bg="custom"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-app) 55%, transparent),
                    color-mix(in srgb, var(--color-app) 55%, transparent)),
    var(--app-custom-bg, none);
  background-position: center, center;
}

/* Neon: bottoni e intestazioni in maiuscoletto spaziato — coerente con gli
   spigoli vivi. Solo qui: sugli altri temi sarebbe rumore. */
.theme-neon .btn { text-transform: uppercase; letter-spacing: .05em; }
.theme-neon table thead tr th { letter-spacing: .08em; }

/* Sabbia: titoli meno serrati, si legge come una pagina stampata. */
.theme-sand h1, .theme-sand h2, .theme-sand h3 { letter-spacing: 0; }