/* ========================================================================
   Tema Cartoon — componenti (0.147.0)
   ========================================================================
   I token (palette, raggi, ombre, font) stanno in themes.css sotto
   .theme-cartoon / .dark.theme-cartoon; qui il "linguaggio" illustrato:
   cartoon con VOLUME. Card, tasti, badge e voci di menu hanno contorno
   navy, luce dall'alto (gradiente + filo chiaro interno), un "lato" pieno
   sotto (estrusione) e un'ombra morbida a terra; i tasti premuti si
   abbassano e il lato sparisce. Icone KPI, avatar e OdiS sono sfere con
   riflesso. Titoli in Fredoka, sfondo disegnato con profondita'.
   OGNI regola e' sotto .theme-cartoon: gli altri temi non vedono nulla.

   Caricato fra themes.css e ui.css: le scelte esplicite del Pannello Temi
   (raggio, superficie, font, sfondo) restano l'ultima parola. Per questo i
   raggi qui passano sempre da var(--radius-*) e le ombre dei contenitori da
   var(--fim-card-shadow): data-radius / data-surface li ridefiniscono.

   Fuori da @layer come themes.css: vince sulle utility di app.css senza
   ricompilare Tailwind.
   ======================================================================== */

/* ---- Tipografia ------------------------------------------------------- */
.theme-cartoon h1, .theme-cartoon h2, .theme-cartoon h3,
.theme-cartoon .kpi-value, .theme-cartoon .kanban-column-header,
.theme-cartoon .text-3xl {
  font-family: var(--font-cartoon-display);
  font-weight: 600;
  letter-spacing: .005em;
}
/* Una scelta esplicita di font nel pannello vale anche per i titoli. */
html[data-font].theme-cartoon :is(h1, h2, h3, .kpi-value, .kanban-column-header, .text-3xl) {
  font-family: var(--font-sans);
}
/* Titolo di pagina: grande, con la pennellata oro sotto e un filo di
   rilievo (ombra piena di un pixel sotto le lettere). */
.theme-cartoon main h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  color: var(--color-fim-navy);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--cartoon-gold) 85%, transparent);
  text-decoration-thickness: .3em;
  text-underline-offset: -.12em;
  text-decoration-skip-ink: none;
}
.dark.theme-cartoon main h1 { color: var(--color-text-primary); }
/* i titoli dentro le card restano titoli di sezione, senza pennellata */
.theme-cartoon main :is(section, .card, dialog) h1 {
  font-size: 1.35rem;
  text-decoration-line: none;
}
.theme-cartoon .text-3xl { text-shadow: 0 2px 0 rgba(16, 34, 58, .15); }
.theme-cartoon ::selection { background: var(--cartoon-gold); color: var(--cartoon-on-gold); }

/* Icone Lucide un filo piu' spesse: tratto da pennarello. */
.theme-cartoon svg.lucide { stroke-width: 2.25; }

/* ---- Sfondo illustrato -------------------------------------------------
   Attivo quando il tema e' Cartoon e l'utente NON ha scelto uno sfondo:
   uno sfondo esplicito (mesh, griglia, immagine personale...) vince.
   Dall'alto: un velo leggero, il paesaggio (fascia in basso, larga quanto lo
   schermo), il cielo azzurro-lavanda che sfuma nel crema. I testi stanno su
   card opache; quelli appoggiati allo sfondo hanno un alone. */
html.theme-cartoon:not([data-bg]) body { background-color: var(--color-app); }
/* Il disegno sta su un livello fisso tutto suo, il piu' lontano: appena
   sfocato e desaturato, cosi' pannelli e card "escono" in primo piano. Un
   solo elemento fisso con filtro, disegnato una volta: nessun costo sulle
   liste lunghe. */
html.theme-cartoon:not([data-bg]) body::before {
  --cartoon-veil-color: color-mix(in srgb, var(--color-app) var(--cartoon-veil), transparent);
  content: "";
  position: fixed;
  inset: -48px -24px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cartoon-veil-color), var(--cartoon-veil-color)),
    url("/static/img/themes/cartoon-bg.svg"),
    radial-gradient(60% 50% at 18% 12%, rgba(255, 236, 180, .55), transparent 70%),
    linear-gradient(180deg, #7F9CC9 0%, #A9BCD8 30%, #D9DCD6 55%, var(--color-app) 72%);
  background-size: cover, 100% auto, cover, cover;
  background-position: center, center bottom, center, center top;
  background-repeat: no-repeat;
  filter: blur(1.2px) saturate(.88);
  /* parallasse leggera: lo sfondo scorre piu' lento della pagina */
  animation: cartoon-parallax linear both;
  animation-timeline: scroll(root);
}
html.dark.theme-cartoon:not([data-bg]) body::before {
  background-image:
    linear-gradient(var(--cartoon-veil-color), var(--cartoon-veil-color)),
    url("/static/img/themes/cartoon-bg-dark.svg"),
    radial-gradient(50% 40% at 18% 12%, rgba(232, 199, 106, .14), transparent 70%),
    linear-gradient(180deg, #132A42 0%, #1D3D5C 45%, #2C5276 75%);
}
@keyframes cartoon-parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-cartoon:not([data-bg]) body::before { animation: none; }
}
html:is([data-motion="off"], [data-motion="reduced"]).theme-cartoon:not([data-bg]) body::before { animation: none; }
/* Telefono: il paesaggio a tutta larghezza diventerebbe una striscia
   minuscola; lo allarghiamo e lo centriamo sulla banca. */
@media (max-width: 767px) {
  html.theme-cartoon:not([data-bg]) body::before { background-size: cover, 230% auto, cover, cover; }
}
/* Testi appoggiati direttamente sullo sfondo (titoli, etichette dei filtri,
   sottotitoli): un alone del colore dell'app li stacca dal disegno. */
html.theme-cartoon:not([data-bg]) main :is(h1, label, p, span, a) {
  text-shadow: 0 0 3px var(--color-app), 0 0 6px var(--color-app), 0 0 10px var(--color-app);
}
html.theme-cartoon:not([data-bg]) main :is(section, .card, table, dialog, .kanban-column, .bg-surface, .btn, button, a.bg-fim-navy) :is(h1, label, p, span, a),
html.theme-cartoon:not([data-bg]) main :is(.btn, button, .badge, [class*="bg-"]),
html.theme-cartoon:not([data-bg]) main [class*="bg-"] * {
  text-shadow: none;
}

/* ---- Topbar: bordo pulito con un filo di volume ----------------------- */
.theme-cartoon header.bg-surface {
  background-image: linear-gradient(180deg, var(--cartoon-surface-hi), var(--color-surface));
  border-bottom: 3px solid var(--cartoon-ink);
  /* superficie rialzata sopra lo sfondo */
  box-shadow: 0 4px 0 var(--cartoon-side), 6px 14px 22px -8px rgba(16, 34, 58, .55);
}
.dark.theme-cartoon header.bg-surface {
  background-color: #10223A;
  background-image: linear-gradient(180deg, #1A3049, #10223A);
  border-bottom-color: var(--cartoon-gold);
}
.theme-cartoon header input[type="search"],
.theme-cartoon header input[type="text"] {
  background-color: var(--color-surface);
  border: var(--cartoon-line) solid var(--cartoon-ink);
  border-radius: 9999px;
  box-shadow: var(--cartoon-well);
}
/* avatar e logo: sfere con riflesso */
.theme-cartoon header .rounded-full.bg-fim-navy,
.theme-cartoon header img.rounded-full {
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: 2px 3px 0 var(--cartoon-side), 5px 7px 10px -3px rgba(16, 34, 58, .45);
}
.theme-cartoon header .rounded-full.bg-fim-navy,
.theme-cartoon button.fixed.bottom-5.rounded-full,
.theme-cartoon a.card > div:first-child > svg.lucide,
.theme-cartoon .kpi-icon {
  --sphere: var(--cartoon-gold);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--sphere) 40%, #fff), var(--sphere) 52%, color-mix(in srgb, var(--sphere) 62%, #000) 100%);
  color: var(--cartoon-on-gold);
}
.theme-cartoon header .rounded-full.bg-fim-navy {
  font-family: var(--font-cartoon-display);
  font-weight: 600;
}

/* ---- Menu laterale: blocco navy con voci a pillola in rilievo --------- */
.theme-cartoon aside.bg-surface {
  background-color: #1D3D5C;
  background-image: linear-gradient(90deg, #22476B, #1D3D5C 70%, #183552);
  border-right: 3px solid var(--cartoon-ink);
  box-shadow: 4px 2px 0 var(--cartoon-side), 14px 8px 24px -8px rgba(16, 34, 58, .55);
  color: #F2EEDC;
}
.dark.theme-cartoon aside.bg-surface {
  background-color: #10223A;
  background-image: linear-gradient(90deg, #142A44, #10223A 70%, #0C1C30);
  border-right-color: #06101C;
}
.theme-cartoon aside.bg-surface nav { padding-top: 1.25rem; }
.theme-cartoon aside.bg-surface nav > div {                       /* titoli sezione */
  color: #E8C76A;
  font-family: var(--font-cartoon-display);
  font-weight: 600;
  letter-spacing: .08em;
}
.theme-cartoon aside.bg-surface nav a {
  color: #F2EEDC;
  border-radius: 9999px;
  border: 2px solid #0F2338;
  margin-top: .35rem;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%, rgba(0, 0, 0, .08));
  box-shadow: 2px 3px 0 #0A1A2B, inset 1px 1px 0 rgba(255, 255, 255, .18);
  transition: background-color .15s, color .15s, transform .1s, box-shadow .1s;
}
.theme-cartoon aside.bg-surface nav a:hover {
  background-color: rgba(242, 238, 220, .1);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 2px 4px 0 #0A1A2B, inset 1px 1px 0 rgba(255, 255, 255, .22);
}
.theme-cartoon aside.bg-surface nav a:active { transform: translate(2px, 3px); box-shadow: 0 0 0 #0A1A2B; }
/* voce attiva: il template mette bg-muted + text-text-primary */
.theme-cartoon aside.bg-surface nav a.bg-muted {
  background-color: var(--cartoon-gold);
  background-image: var(--cartoon-gloss);
  color: var(--cartoon-on-gold);
  border-color: #06101C;
  box-shadow: 3px 5px 0 #06101C, 8px 12px 16px -4px rgba(0, 0, 0, .55), inset 1px 2px 0 rgba(255, 255, 255, .65);
  font-weight: 800;
  transform: translateX(3px) scale(1.03);
}
.theme-cartoon aside.bg-surface > button,
.theme-cartoon aside.bg-surface .border-t { border-color: rgba(242, 238, 220, .2); }
.theme-cartoon aside.bg-surface > button { color: #F2EEDC; }
.theme-cartoon aside.bg-surface > button:hover { background-color: rgba(242, 238, 220, .12); }
.theme-cartoon aside.bg-surface .text-text-muted { color: #CBD1BE; }

/* ---- Contenitori: card in rilievo con fascia colorata -----------------
   Sezioni, card e riquadri arrotondati: fondo crema illuminato dall'alto,
   contorno spesso, lato estruso e ombra a terra. In cima una fascia colorata
   (salvia / oro / azzurro a rotazione) col suo rilievo: chiara in alto,
   scura in basso, e un filo d'ombra sotto. */
.theme-cartoon :is(section.bg-surface, .card, .card-elevated, .kpi-card),
.theme-cartoon main div.bg-surface.border:is(.rounded, .rounded-md, .rounded-lg, .rounded-xl) {
  --cartoon-band: var(--cartoon-band-1);
  background-color: var(--color-surface);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--cartoon-band) 50%, #fff), var(--cartoon-band) 55%, color-mix(in srgb, var(--cartoon-band) 75%, #000)),
    linear-gradient(rgba(16, 34, 58, .22), rgba(16, 34, 58, 0)),
    linear-gradient(160deg, var(--cartoon-surface-hi), var(--color-surface) 35%, var(--cartoon-surface-lo));
  background-size: 100% 10px, 100% 5px, 100% 100%;
  background-position: 0 0, 0 10px, 0 0;
  background-repeat: no-repeat;
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--fim-card-shadow);
}
.theme-cartoon :is(section.bg-surface, .card, .kpi-card):nth-child(3n+2),
.theme-cartoon main div.bg-surface.border:nth-child(3n+2) { --cartoon-band: var(--cartoon-band-2); }
.theme-cartoon :is(section.bg-surface, .card, .kpi-card):nth-child(3n),
.theme-cartoon main div.bg-surface.border:nth-child(3n) { --cartoon-band: var(--cartoon-band-3); }
/* card cliccabili (KPI della home, link a card): si sollevano, premute si
   appoggiano */
.theme-cartoon a.card { transition: transform .12s, box-shadow .12s; }
.theme-cartoon a.card:hover {
  transform: translate(-2px, -4px) scale(1.02);
  box-shadow: var(--cartoon-z2-up);
}
.theme-cartoon a.card:active { transform: translate(3px, 6px); box-shadow: var(--cartoon-key-down); }
/* Le KPI sono gia' piu' vicine del resto della pagina. */
.theme-cartoon a.card, .theme-cartoon .kpi-card { box-shadow: var(--cartoon-z2-up); }
.theme-cartoon .card-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cartoon-band, var(--cartoon-band-1)) 50%, #fff), var(--cartoon-band, var(--cartoon-band-1)));
  border-bottom: var(--cartoon-line) solid var(--cartoon-ink);
  color: var(--cartoon-on-gold);
}
/* Icona della card KPI: sfera colorata con riflesso. */
.theme-cartoon a.card > div:first-child > svg.lucide,
.theme-cartoon .kpi-icon {
  --sphere: var(--cartoon-band);
  box-sizing: content-box;
  width: 1.25rem; height: 1.25rem;
  padding: .55rem;
  border-radius: 9999px;
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: 2px 3px 0 var(--cartoon-side), 5px 7px 10px -3px rgba(16, 34, 58, .45);
}
.theme-cartoon .kpi-icon { width: 1.5rem; height: 1.5rem; padding: .35rem; }

/* ---- Bottoni: "tasti" con luce in alto e lato sotto ------------------- */
.theme-cartoon .btn {
  border-radius: var(--radius-xl);
  border: var(--cartoon-line) solid var(--cartoon-ink);
  font-weight: 800;
  background-image: var(--cartoon-gloss);
  box-shadow: var(--cartoon-key);
  transition: transform .1s, box-shadow .1s, background-color .15s;
}
.theme-cartoon .btn:hover:not(:disabled):not([disabled]) { transform: translateY(-2px); box-shadow: var(--cartoon-key-hover); }
.theme-cartoon .btn:active:not(:disabled):not([disabled]) { transform: translate(2px, 4px); box-shadow: var(--cartoon-key-down); }
.theme-cartoon .btn-ghost { border-color: transparent; box-shadow: none; background-image: none; }
.theme-cartoon .btn-ghost:hover:not(:disabled) { box-shadow: none; transform: none; }
/* Primario: oro con testo navy (anche i bottoni scritti a mano con il
   primario pieno). In scuro il primario e' gia' l'oro. */
.theme-cartoon .btn-primary,
.theme-cartoon :is(button, a, input[type="submit"]).bg-fim-navy {
  background-color: var(--cartoon-gold);
  background-image: var(--cartoon-gloss);
  color: var(--cartoon-on-gold);
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-key);
  font-weight: 800;
}
.theme-cartoon .btn-primary { box-shadow: var(--cartoon-key-hover); }
.theme-cartoon .btn-primary:hover,
.theme-cartoon :is(button, a, input[type="submit"]).bg-fim-navy:hover { background-color: var(--cartoon-gold-hover); }
.theme-cartoon :is(button, a).bg-fim-navy .text-white,
.theme-cartoon :is(button, a).bg-fim-navy.text-white { color: var(--cartoon-on-gold); }
.theme-cartoon .btn-danger { color: #FFF6E0; }
.dark.theme-cartoon .btn-danger { color: var(--cartoon-on-gold); }
/* bottoni pieni scritti a mano (verde chiama, rosso nuovo deal...) */
.theme-cartoon main :is(button, a):is(.bg-success, .bg-fim-red, .bg-warning, .bg-info, .bg-fim-navy) {
  border: var(--cartoon-line) solid var(--cartoon-ink);
  background-image: var(--cartoon-gloss);
  box-shadow: var(--cartoon-key);
  font-weight: 800;
  transition: transform .1s, box-shadow .1s;
}
.theme-cartoon main :is(button, a):is(.bg-success, .bg-fim-red, .bg-warning, .bg-info, .bg-fim-navy):active {
  transform: translate(2px, 4px);
  box-shadow: var(--cartoon-key-down);
}
.theme-cartoon .btn:focus-visible,
.theme-cartoon a:focus-visible,
.theme-cartoon button:focus-visible {
  outline: 3px solid var(--cartoon-gold);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .theme-cartoon :is(.btn, a.card, .kanban-card, aside.bg-surface nav a, main button, main a) { transform: none !important; }
}
html:is([data-motion="off"], [data-motion="reduced"]).theme-cartoon :is(.btn, a.card, .kanban-card, aside.bg-surface nav a, main button, main a) {
  transform: none !important;
}

/* Testo sopra il primario. In scuro il primario e' oro: il bianco dei
   template (`text-white`) li' non regge il contrasto e passa all'inchiostro.
   Stesso discorso per i fondi pieni chiari usati da toast e chip. */
.dark.theme-cartoon :is(.bg-fim-navy, .bg-fim-red, .bg-success, .bg-warning, .bg-info).text-white,
.dark.theme-cartoon .bg-fim-navy .text-white,
.dark.theme-cartoon .hover\:bg-fim-navy:hover { color: var(--cartoon-on-primary); }

/* ---- Badge: pastiglie piene in rilievo, testo inchiostro -------------- */
.theme-cartoon .badge {
  border: 2px solid var(--cartoon-ink);
  font-weight: 800;
  color: var(--cartoon-on-gold);
  background-image: var(--cartoon-gloss);
  box-shadow: 0 2px 0 var(--cartoon-side), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.theme-cartoon .badge-neutral  { background-color: #E2E0CE; }
.theme-cartoon .badge-success  { background-color: #CFE3D7; }
.theme-cartoon :is(.badge-warning, .badge-stagnant) { background-color: #F6E3A6; }
.theme-cartoon .badge-info     { background-color: #CFE0E6; }
.theme-cartoon .badge-danger   { background-color: #F2C9C3; }
.dark.theme-cartoon .badge-neutral  { background-color: #CBD1BE; }
.dark.theme-cartoon .badge-success  { background-color: #8FC2A8; }
.dark.theme-cartoon :is(.badge-warning, .badge-stagnant) { background-color: #E8C76A; }
.dark.theme-cartoon .badge-info     { background-color: #8DB8C2; }
.dark.theme-cartoon .badge-danger   { background-color: #E8857A; }

/* ---- Form: campi incavati ---------------------------------------------- */
.theme-cartoon :is(.input, .textarea, .select),
.theme-cartoon :is(main, dialog) input:is([type="text"], [type="search"], [type="email"], [type="tel"],
  [type="number"], [type="date"], [type="datetime-local"], [type="time"], [type="password"], [type="url"], :not([type])),
.theme-cartoon :is(main, dialog) :is(select, textarea) {
  background-color: #FFFDF6;
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-well);
}
.dark.theme-cartoon :is(.input, .textarea, .select),
.dark.theme-cartoon :is(main, dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: #10223A;
  border-color: #4F6E8C;
}
.theme-cartoon :is(main, dialog) :is(input, select, textarea):focus,
.theme-cartoon :is(.input, .textarea, .select):focus {
  border-color: var(--cartoon-ink);
  box-shadow: var(--cartoon-well), 0 0 0 3px var(--cartoon-gold);
  outline: none;
}
.dark.theme-cartoon :is(main, dialog) :is(input, select, textarea):focus { border-color: var(--cartoon-gold); }
.theme-cartoon input[type="checkbox"], .theme-cartoon input[type="radio"] {
  accent-color: var(--color-fim-navy);
  width: 1.05rem; height: 1.05rem;
}
.theme-cartoon :is(.label, main label) { font-weight: 700; }

/* ---- Tabelle: intestazione navy in rilievo, righe crema/bianco -------- */
.theme-cartoon table thead tr {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fim-thead-bg) 85%, #fff), var(--fim-thead-bg) 60%, color-mix(in srgb, var(--fim-thead-bg) 80%, #000));
}
.theme-cartoon table thead tr th {
  color: var(--cartoon-thead-text);
  font-family: var(--font-cartoon-display);
  font-weight: 600;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.theme-cartoon table thead tr th :is(a, button, span) { color: inherit; }
.theme-cartoon table tbody tr:hover {
  background-color: color-mix(in srgb, var(--cartoon-gold) 22%, transparent);
}
.theme-cartoon main div:has(> table) {
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-z1);
  background-color: var(--color-surface);
}

/* ---- Liste a righe dentro le card (es. «Deal recenti») ---------------- */
.theme-cartoon :is(section, .card) ul > li:nth-child(even) { background-color: var(--fim-stripe); }

/* ---- Kanban ----------------------------------------------------------- */
.theme-cartoon .kanban-column {
  background-color: color-mix(in srgb, var(--cartoon-band-1) 22%, var(--color-surface));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%, rgba(16, 34, 58, .06));
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-z1);
  transition: transform .15s, box-shadow .15s;
}
/* la colonna su cui si lavora (puntatore o trascinamento) viene avanti */
.theme-cartoon .kanban-column:is(:hover, :focus-within) { transform: translateY(-2px); box-shadow: var(--fim-card-shadow); }
.theme-cartoon .kanban-column:nth-child(3n+2) { background-color: color-mix(in srgb, var(--cartoon-band-2) 22%, var(--color-surface)); }
.theme-cartoon .kanban-column:nth-child(3n) { background-color: color-mix(in srgb, var(--cartoon-band-3) 22%, var(--color-surface)); }
.dark.theme-cartoon .kanban-column {
  background-color: color-mix(in srgb, var(--cartoon-band-1) 14%, var(--color-surface));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .12));
}
.dark.theme-cartoon .kanban-column:nth-child(3n+2) { background-color: color-mix(in srgb, var(--cartoon-band-3) 10%, #16304A); }
.dark.theme-cartoon .kanban-column:nth-child(3n) { background-color: color-mix(in srgb, var(--cartoon-band-3) 16%, var(--color-surface)); }
.theme-cartoon .kanban-column-header {
  border-bottom: var(--cartoon-line) solid var(--cartoon-ink);
  color: var(--color-text-primary);
}
.theme-cartoon .kanban-card {
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, var(--cartoon-surface-hi), var(--color-surface) 40%, var(--cartoon-surface-lo));
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-key);
  transition: transform .12s, box-shadow .12s;
}
.theme-cartoon .kanban-card:hover { transform: translate(-1px, -3px) rotate(-.4deg) scale(1.015); box-shadow: var(--cartoon-z2-up); }
.theme-cartoon .kanban-counter {
  background-color: var(--cartoon-gold);
  background-image: var(--cartoon-gloss);
  color: var(--cartoon-on-gold);
  border: 2px solid var(--cartoon-ink);
  border-radius: 9999px;
  box-shadow: 0 2px 0 var(--cartoon-side);
}
.theme-cartoon .kanban-stage-badge,
.theme-cartoon .kanban-priority-badge { border: 1.5px solid currentColor; font-weight: 800; }
/* le nuove lead mantengono il loro bordo rosso */
.theme-cartoon .kanban-card-lead-nuovo { border-color: var(--color-fim-red); }

/* ---- Modali, menu a tendina, popover ---------------------------------- */
.theme-cartoon :is(dialog.modal-dialog, dialog[open]) {
  border: 3px solid var(--cartoon-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--cartoon-z4);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--cartoon-band-2) 50%, #fff), var(--cartoon-band-2) 55%, color-mix(in srgb, var(--cartoon-band-2) 75%, #000)),
    linear-gradient(180deg, var(--cartoon-surface-hi), var(--color-surface) 30%);
  background-size: 100% 10px, 100% 100%;
  background-repeat: no-repeat;
}
.theme-cartoon dialog.modal-dialog::backdrop { background-color: rgba(16, 34, 58, .55); }
.theme-cartoon :is(.shadow-lg, .shadow-xl).bg-surface {
  border: var(--cartoon-line) solid var(--cartoon-ink);
  box-shadow: var(--cartoon-z4);
}

/* ---- Toast (contenitore in fondo a destra, base.html) ----------------- */
.theme-cartoon .z-\[60\] > div.shadow-lg {
  border: 3px solid var(--cartoon-ink);
  border-radius: var(--radius-lg);
  background-image: var(--cartoon-gloss);
  box-shadow: var(--cartoon-z4);
  font-weight: 800;
}

/* ---- Stati vuoti: mini illustrazione al posto dell'icona -------------- */
.theme-cartoon :is(.text-center.py-8, .text-center.py-16):has(> svg:first-child)::before {
  content: "";
  display: block;
  width: 9.5rem; height: 6.65rem;
  margin: 0 auto .75rem;
  background: url("/static/img/themes/cartoon-empty.svg") center / contain no-repeat;
}
.theme-cartoon :is(.text-center.py-8, .text-center.py-16):has(> svg:first-child) > svg:first-child { display: none; }

/* ---- OdiS: il drawer e il bottone flottante hanno il blu FIM scritto a
   mano (#34407C) — lo riportiamo alla palette del tema. ---------------- */
.theme-cartoon .bg-\[\#34407C\] { background-color: #1D3D5C; }
.theme-cartoon .hover\:bg-\[\#2a3366\]:hover { background-color: #142D45; }
.theme-cartoon .text-\[\#34407C\] { color: #1D3D5C; }
.theme-cartoon .focus\:ring-\[\#34407C\]:focus { --tw-ring-color: #1D3D5C; }
.theme-cartoon button.fixed.bottom-5.rounded-full {
  border: 3px solid var(--cartoon-ink);
  box-shadow: 3px 5px 0 var(--cartoon-side), 12px 18px 24px -6px rgba(0, 0, 0, .5);
  transition: transform .1s, box-shadow .1s;
}
.theme-cartoon button.fixed.bottom-5.rounded-full:active { transform: translate(3px, 5px); box-shadow: 0 0 0 var(--cartoon-side); }

/* ---- Barre di scorrimento -------------------------------------------- */
.theme-cartoon * { scrollbar-color: #8AA9A4 transparent; }
.dark.theme-cartoon * { scrollbar-color: #35536F transparent; }