/*
  immersive.css — Superagentsss · DUE TEMI (soft dark / chiaro), commutabili
  Layer ADDITIVO sopra design-tokens.css / layout.css / auth-admin.css (caricato per ultimo).
  Richiesta BOSS 2026-06-19: immersivo e figa MA comodo per ore; schede ben staccate
  dallo sfondo; possibilita di scegliere tema scuro o chiaro (toggle in topbar, ricordato).
  Default: dark morbido (stile Linear). Vincoli: LOGO (icona, immagine) e identita blu
  del marchio intatti; tutte le funzioni intatte; solo CSS (lo switch e in theme.js).
  Architettura: variabili --imm-* per tema; i componenti le usano; lo switch cambia i token.
*/

/* ============================================================
   TEMA SCURO (default) — token + atmosfera immersiva
   ============================================================ */
[data-theme="dark"] {
  /* FASE 7: il soft dark passa sull'ink e sul navy del marchio. La scelta del
     BOSS (immersivo ma comodo per ore) resta; cambia la famiglia di colore, non
     il carattere. Ogni valore e misurato: banco fase7-visivo. */
  --sa-bg:           #07111F;   /* ink */
  --sa-surface:      #0E1F38;   /* navy rialzato: schede, pannelli, modali */
  --sa-surface-2:    #0A192E;   /* colonne board: piu FONDE della scheda */
  --sa-surface-3:    #16304F;   /* hover, campo riempito */
  --sa-border:       rgba(150,184,224,0.16);
  --sa-border-strong: #50729E;  /* confine dei controlli: 3,34:1 sulla scheda */
  --sa-border-focus: #4FA6FF;
  --sa-overlay:      rgba(4,9,17,0.66);
  --sa-text:         #E6EDF7;   /* 14,01:1 sulla scheda */
  --sa-text-2:       #A3B5CC;   /* 7,89:1 */
  --sa-text-3:       #8296B0;   /* 5,46:1 */
  --sa-text-inv:     #FFFFFF;
  /* Il riempimento primario nello scuro NON e l'electric puro: il bianco sopra
     #1187FF fa 3,54:1 e non passa AA. #0D6FDD tiene il bianco a 4,84:1 e stacca
     dal fondo ink a 3,91:1. L'elettrico resta dove non porta testo: bordi,
     soffi, link chiari. Misurato, non scelto a occhio. */
  --sa-accent:       #0D6FDD;
  --sa-accent-dark:  #0A57AE;
  --sa-accent-mid:   #4FA6FF;
  /* L'electric del marchio e lo STESSO nei due temi, come il ciano e il lime:
     e una tinta di marchio, non un tono di testo, e come CONFINE passa il 3:1
     ovunque (5,35 sull'ink, 4,67 sul navy). Da qui in poi gli aloni elettrici
     lo dicono col nome invece che con un rgba scritto a mano: erano NOVE
     rgba(17,135,255,...) sparsi, e nessuno li collegava al riferimento.
     Cinque sono diventati var(--sa-electric): il velo dell'accento, l'alone,
     il soffio della card in volo, il filo sotto la testata, la testa della
     scheda lead. Gli ALTRI QUATTRO restano letterali di proposito, ed e una
     scelta, non una dimenticanza: due sono --sa-stage-1-bg e -pill, che sono
     il segnale del PRIMO STADIO e hanno per caso lo stesso valore (un mestiere
     diverso non si nasconde sotto lo stesso nome); due sono i fondi decorativi
     --imm-body e --imm-login-bg, dove l'electric e una velatura di scena e non
     un bordo. Allargare il mestiere del token per assorbirli lo renderebbe di
     nuovo vago, che e il difetto da cui si sta uscendo.
     Il cambio e provato sul PIXEL e non sul testo del valore: color-mix si
     serializza in color(srgb ...), quindi un confronto testuale griderebbe
     "diverso" su una sostituzione neutra. Dipinte sullo stesso fondo, le due
     forme danno gli stessi byte a 14, 18, 26, 30 e 40 per cento. */
  --sa-electric:     #1187FF;
  --sa-accent-light: color-mix(in srgb, var(--sa-electric) 18%, transparent);
  --sa-accent-glow:  0 6px 20px color-mix(in srgb, var(--sa-electric) 30%, transparent), 0 1px 3px rgba(0,0,0,0.40);

  /* AI e priorita: sullo scuro il ciano e il lime del marchio danno il meglio
     (9,90:1 e 15,58:1). Qui --sa-ai-ink e piu CHIARO del ciano, non piu scuro:
     e il testo, e sul fondo scuro il testo va verso il bianco. */
  --sa-ai:           #41D9FF;
  --sa-ai-ink:       #8DE9FF;
  --sa-ai-bg:        rgba(65,217,255,0.14);
  --sa-signal:       #BDFC66;
  --sa-signal-ink:   #07111F;
  --sa-signal-edge:  #BDFC66;

  /* Marchi esterni: il verde di WhatsApp resta il suo, appena schiarito per
     restare leggibile sul fondo scuro. */
  --sa-wa:           #25D366;
  --sa-wa-dark:      #1FAE55;
  --sa-wa-darker:    #17913F;
  --sa-wa-bg:        rgba(37,211,102,0.14);
  --sa-wa-border:    rgba(37,211,102,0.34);
  --sa-wa-text:      #6EE7A5;

  /* Accenti di stadio, versione SCURA. Gli stessi cinque segnali del tema chiaro
     (design-tokens.css :root) calibrati sul fondo ink: l'accento e la tinta viva
     del marchio, -bg e -pill sono veli traslucidi, -text la variante chiara.
     Senza questo blocco i --sa-stage-* chiari trapelerebbero (pill chiarissime su
     fondo scuro, illeggibili). Cinque gruppi COMPLETI: la classe la costruisce il
     JS da color_index e un buco si vede solo sui dati di quel cliente. */
  --sa-stage-1-accent: #4FA6FF; --sa-stage-1-bg: rgba(17,135,255,0.16);  --sa-stage-1-text: #B3D8FF; --sa-stage-1-pill: rgba(17,135,255,0.34);
  --sa-stage-2-accent: #24BF84; --sa-stage-2-bg: rgba(36,191,132,0.16);  --sa-stage-2-text: #93EBC6; --sa-stage-2-pill: rgba(36,191,132,0.34);
  --sa-stage-3-accent: #FFB84D; --sa-stage-3-bg: rgba(255,184,77,0.16);  --sa-stage-3-text: #FFDCA3; --sa-stage-3-pill: rgba(255,184,77,0.34);
  --sa-stage-4-accent: #FF5D73; --sa-stage-4-bg: rgba(255,93,115,0.16);  --sa-stage-4-text: #FFB3BF; --sa-stage-4-pill: rgba(255,93,115,0.34);
  --sa-stage-5-accent: #41D9FF; --sa-stage-5-bg: rgba(65,217,255,0.16);  --sa-stage-5-text: #A8ECFF; --sa-stage-5-pill: rgba(65,217,255,0.34);

  /* Terna semantica (scuro): veli traslucidi + testo luminoso, come per gli
     stadi. Prima MANCAVANO del tutto e i token chiari (:root) trapelavano: le
     SEGNALAZIONI del master (.sa-flag, fondo --sa-warning-bg) e i TASK SCADUTI
     (.sa-task--overdue, fondo --sa-danger-bg) diventavano testo chiaro su pastello
     chiaro = invisibili nel tema di default. Contenuto reale che deve URLARE.
     La faccia -solid resta la tinta del marchio: barre e pallini, dove non c'e
     testo sopra, non hanno bisogno di essere schiariti. */
  --sa-success:    #4ADFA6; --sa-success-bg: rgba(36,191,132,0.16); --sa-success-solid: #24BF84;
  --sa-warning:    #FFC96B; --sa-warning-bg: rgba(255,184,77,0.16); --sa-warning-solid: #FFB84D;
  --sa-caution:    #FFD84D;
  --sa-danger:     #FF8A9C; --sa-danger-bg:  rgba(255,93,115,0.16); --sa-danger-solid: #FF5D73;
  /* Le facce -solid sono identiche nei due temi, quindi lo e anche il testo che
     ci sta sopra: ink, non bianco. Vale per il toast, per la pillola "scaduto" e
     per il conteggio della campanella. 7,99 / 11,01 / 6,37, misurati. */
  --sa-text-on-solid: #07111F;

  /* Ombre: sul fondo scuro l'ombra pura non si vede, quindi il piano lo dice la
     superficie piu chiara piu un filo interno. Resta la regola del riferimento:
     l'ombra e per cio che galleggia o e selezionato, non per tutto. */
  --sa-shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset;
  --sa-shadow-col:   0 0 0 1px rgba(150,184,224,0.06);
  --sa-shadow-lift:  0 12px 32px -14px rgba(0,0,0,0.72), 0 2px 8px rgba(0,0,0,0.40);
  --sa-shadow-modal: 0 32px 90px -26px rgba(0,0,0,0.80), 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,166,255,0.12);
  /* Ombra di "volo" della card trascinata, versione scura. Profonda + soffio blu. */
  --sa-shadow-drag:  0 22px 56px -14px rgba(0,0,0,0.74), 0 6px 18px color-mix(in srgb, var(--sa-electric) 26%, transparent);
  /* I due buchi veri del tema scuro, trovati dall'inventario della fase 7: il
     gradiente di fondo e l'ombra del pannello erano rimasti sui valori CHIARI. */
  --sa-bg-gradient:  #07111F;
  --sa-shadow-panel: -14px 0 44px -18px rgba(0,0,0,0.72);
  --sa-shadow-ai:    0 10px 30px -14px rgba(65,217,255,0.34);

  --imm-body:
    radial-gradient(1200px 760px at 50% -16%, rgba(17,135,255,0.10), transparent 60%),
    radial-gradient(820px 620px at 102% 6%, rgba(65,217,255,0.05), transparent 55%),
    linear-gradient(160deg, #08131F 0%, #07111F 55%, #081A2E 100%);
  --imm-topbar: linear-gradient(180deg, rgba(14,31,56,0.88) 0%, rgba(10,25,46,0.82) 100%);
  /* Firma blu sotto la testata, 1px: l'identita resta, il tratto e fine. */
  --imm-topbar-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 24px -12px rgba(0,0,0,0.5), 0 1px 0 color-mix(in srgb, var(--sa-electric) 40%, transparent);
  --imm-toolbar: linear-gradient(180deg, rgba(14,31,56,0.45), rgba(14,31,56,0));
  --imm-col: linear-gradient(180deg, #0B1B31 0%, #0A192E 100%);
  --imm-stage-header: #0E1F38;
  --imm-line: rgba(150,184,224,0.12);
  /* Testata scheda lead (scuro): superficie + soffio blu attenuato in testa. */
  --imm-panel-head: linear-gradient(180deg, color-mix(in srgb, var(--sa-electric) 14%, transparent) 0%, var(--sa-surface) 100%);
  /* SCHEDE: superficie piu chiara del fondo colonna + filo di bordo. Niente
     ombra a riposo: il piano lo fa il salto di superficie. */
  --imm-card: #12253F;
  --imm-card-border: rgba(150,184,224,0.18);
  --imm-card-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  --imm-card-hover-border: rgba(79,166,255,0.52);
  --imm-card-hover-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 32px -14px rgba(0,0,0,0.7);
  --imm-surface: #0E1F38;
  --imm-overlay: radial-gradient(130% 120% at 50% 0%, rgba(4,9,17,0.56) 0%, rgba(3,6,12,0.74) 100%);
  --imm-brand-super: #E6EDF7;
  --imm-login-bg:
    radial-gradient(960px 660px at 50% -8%, rgba(7,89,245,0.34), transparent 60%),
    radial-gradient(700px 540px at 12% 112%, rgba(17,135,255,0.22), transparent 55%),
    radial-gradient(640px 540px at 104% 2%, rgba(65,217,255,0.16), transparent 55%),
    linear-gradient(165deg, #08172B 0%, #07111F 50%, #081A2E 100%);
  --imm-login-card: linear-gradient(180deg, #12253F 0%, #0C1D34 100%);
  --imm-login-card-border: rgba(79,166,255,0.22);
  --imm-login-glow-1: rgba(7,89,245,0.34);
  --imm-login-glow-2: rgba(65,217,255,0.20);
}

/* ============================================================
   TEMA CHIARO — i token base restano quelli originali (design-tokens.css),
   qui aggiungo solo l'atmosfera immersiva chiara.
   ============================================================ */
[data-theme="light"] {
  --sa-shadow-card:  0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 5px rgba(15,23,42,0.06), 0 10px 24px -12px rgba(15,23,42,0.16);
  --sa-shadow-col:   0 1px 0 rgba(255,255,255,0.85) inset, 0 8px 26px -10px rgba(15,23,42,0.18), 0 0 0 1px rgba(15,23,42,0.03);
  --sa-shadow-modal: 0 28px 90px -22px rgba(15,23,42,0.40), 0 4px 14px rgba(15,23,42,0.14), 0 0 0 1px color-mix(in srgb, var(--sa-accent) 8%, transparent);

  --imm-body:
    radial-gradient(1100px 720px at 50% -12%, color-mix(in srgb, var(--sa-accent) 10%, transparent), transparent 60%),
    radial-gradient(760px 520px at 100% 6%, rgba(99,102,241,0.06), transparent 55%),
    radial-gradient(820px 640px at -4% 102%, rgba(37,99,235,0.04), transparent 55%),
    linear-gradient(162deg, #F3F6FD 0%, #EBEFF7 52%, #EEF1F8 100%);
  --imm-topbar: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,249,255,0.80) 100%);
  /* Firma blu del marchio sotto la topbar anche in Daylight chiaro (in dark c'era gia).
     Assottigliata a 1px col redesign 2026-07-23. */
  --imm-topbar-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, 0 4px 22px -8px rgba(15,23,42,0.12), 0 1px 0 color-mix(in srgb, var(--sa-accent) 16%, transparent);
  --imm-toolbar: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  --imm-col: linear-gradient(180deg, #F5F7FB 0%, var(--sa-surface-2) 100%);
  --imm-stage-header: var(--sa-surface);
  --imm-line: rgba(15,23,42,0.10);
  /* Testata scheda lead (light): teniamo il soffio azzurro originale del design base. */
  --imm-panel-head: linear-gradient(180deg, #EEF4FF 0%, var(--sa-surface) 100%);
  --imm-card: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
  --imm-card-border: rgba(15,23,42,0.08);
  --imm-card-shadow: var(--sa-shadow-card);
  --imm-card-hover-border: color-mix(in srgb, var(--sa-accent) 22%, transparent);
  --imm-card-hover-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 20px -8px rgba(15,23,42,0.18), 0 0 0 1px color-mix(in srgb, var(--sa-accent) 14%, transparent), 0 0 30px -12px color-mix(in srgb, var(--sa-accent) 28%, transparent);
  --imm-surface: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  --imm-overlay: radial-gradient(130% 120% at 50% 0%, rgba(15,23,42,0.42) 0%, rgba(11,18,40,0.60) 100%);
  --imm-brand-super: var(--sa-text);
  --imm-login-bg:
    radial-gradient(900px 620px at 50% -8%, color-mix(in srgb, var(--sa-accent) 16%, transparent), transparent 60%),
    linear-gradient(165deg, #F0F4FF 0%, #E8EEFF 40%, #EEF2FF 70%, #EEF1F8 100%);
  --imm-login-card: linear-gradient(180deg, #EEF4FF 0%, #FFFFFF 56px, #FFFFFF 100%);
  --imm-login-card-border: color-mix(in srgb, var(--sa-accent) 16%, transparent);
  --imm-login-glow-1: color-mix(in srgb, var(--sa-accent) 18%, transparent);
  --imm-login-glow-2: rgba(99,102,241,0.12);
}

/* ============================================================
   COMPONENTI (theme-agnostic, via variabili --imm-*)
   ============================================================ */
body {
  background: var(--imm-body);
  background-attachment: fixed;
  color: var(--sa-text);
}

.sa-topbar {
  background: var(--imm-topbar);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--imm-topbar-shadow);
}
.sa-brand__logo { color: var(--imm-brand-super); }
.sa-brand__logo strong { color: var(--sa-accent-mid); }
.sa-brand::before { filter: drop-shadow(0 2px 7px rgba(61,130,240,0.4)); }

.sa-toolbar {
  background: var(--imm-toolbar);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* La colonna prende il bordo d'atmosfera SUI TRE LATI non in testa: il bordo
   SUPERIORE resta al capo-colonna Daylight (.sa-stage--N { border-top: 3px accent }
   in design-tokens.css). Prima qui c'era border-color: var(--imm-line) che, caricato
   per ultimo, spegneva la stripe colorata dello stadio in entrambi i temi. */
.sa-stage {
  background: var(--imm-col);
  border-right-color: var(--imm-line);
  border-bottom-color: var(--imm-line);
  border-left-color: var(--imm-line);
  box-shadow: var(--sa-shadow-col);
}
.sa-stage__header { background: var(--imm-stage-header); border-bottom-color: var(--imm-line); }

.sa-card {
  background: var(--imm-card);
  border: 1px solid var(--imm-card-border);
  box-shadow: var(--imm-card-shadow);
  color: var(--sa-text);
}
.sa-card:hover { border-color: var(--imm-card-hover-border); box-shadow: var(--imm-card-hover-shadow); }

/* SOLLEVAMENTO (hold-to-drag): quando il fantasma nasce dopo l'hold, un pop di
   scala + alone blu marchio segnala "ora la stai spostando". Theme-agnostic via
   --sa-accent (definito sia chiaro sia scuro). La classe .is-lifting la toglie JS
   a fine animazione, lasciando il fantasma nel suo aspetto normale (rotate(2deg)
   di layout.css). Se questo layer manca, il drag funziona lo stesso senza il pop. */
.sa-card--ghost.is-lifting {
  animation: sa-card-lift 320ms var(--sa-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
  box-shadow:
    var(--sa-shadow-modal),
    0 0 0 2px var(--sa-accent),
    0 0 26px -2px var(--sa-accent);
}
@keyframes sa-card-lift {
  0%   { transform: rotate(2deg) scale(1); }
  45%  { transform: rotate(2deg) scale(1.06); }
  100% { transform: rotate(2deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-card--ghost.is-lifting { animation: none; transform: rotate(2deg) scale(1.03); }
}

.sa-btn--primary {
  background: linear-gradient(180deg, var(--sa-accent) 0%, var(--sa-accent-dark) 100%);
  border: none; color: var(--sa-text-inv);
  box-shadow: var(--sa-accent-glow), 0 1px 0 rgba(255,255,255,0.16) inset;
}
.sa-btn--primary:hover { box-shadow: 0 7px 22px rgba(61,130,240,0.42), 0 1px 0 rgba(255,255,255,0.2) inset; }

/* DIFETTO DI ACCESSIBILITA CHIUSO NELLA FASE 7.
   Questa regola faceva `outline: none` su ogni campo, in ENTRAMBI i temi (non e
   dentro un blocco [data-theme]), con specificita 0,2,0 e in coda a tutti i
   fogli: batteva la rete di sicurezza `:focus-visible` universale. Restava un
   alone al 20% cablato al blu del tema scuro, mostrato anche in tema chiaro dove
   l'accento e un altro. Misurato, non dedotto: sul campo di ricerca in tema
   chiaro l'anello di fuoco non c'era.
   Adesso l'anello e quello del sistema (2px accento + 2px di stacco) e il colore
   viene dal token, quindi segue il tema. L'!important non serve piu. */
.sa-input:focus-visible,
input.sa-input:focus-visible, select.sa-input:focus-visible, textarea.sa-input:focus-visible {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 2px;
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-accent) 20%, transparent);
}
/* Col mouse (focus senza :focus-visible) resta il solo bordo acceso: nessun
   anello, che sarebbe rumore per chi ha appena cliccato dentro il campo. */
.sa-input:focus, input.sa-input:focus, select.sa-input:focus, textarea.sa-input:focus {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-accent) 18%, transparent);
}

.sa-modal { background: var(--imm-surface); box-shadow: var(--sa-shadow-modal); }
/* L'ombra passa dal TOKEN, non da un valore letterale: qui c'era un rgba scritto
   a mano che vinceva sul token (immersive.css e l'ultimo foglio), quindi
   l'override scuro di --sa-shadow-panel introdotto in fase 7 era codice morto e
   il drawer aveva la stessa ombra nei due temi. */
.sa-panel { background: var(--imm-surface); box-shadow: var(--sa-shadow-panel), 0 0 0 1px var(--imm-line); }
.sa-modal__head, .sa-panel__head { border-bottom-color: var(--imm-line); }
/* FIX scheda lead: la testata base ha un #EEF4FF chiaro fisso (design-tokens.css).
   In dark diventa una striscia bianca in cima al drawer, con la X invisibile dentro.
   Override del background per tema (--imm-panel-head, definito sopra per tema):
   in dark superficie scura coerente col soft-dark, in light il soffio azzurro originale. */
.sa-panel__head { background: var(--imm-panel-head); }
.sa-modal__foot { border-top-color: var(--imm-line); }
.sa-overlay {
  background: var(--imm-overlay);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Toggle tema in topbar (iniettato da theme.js) */
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
#theme-toggle svg { width: 18px; height: 18px; }

/* ---------- Login / sblocco (atmosfera per tema) ---------- */
.sa-login {
  overflow: hidden;
  background: var(--imm-login-bg);
}
.sa-login::before {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  top: -180px; right: -140px;
  background: radial-gradient(circle, var(--imm-login-glow-1), transparent 66%);
  filter: blur(36px); pointer-events: none;
  animation: sa-imm-float 12s ease-in-out infinite;
}
.sa-login::after {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  bottom: -190px; left: -130px;
  background: radial-gradient(circle, var(--imm-login-glow-2), transparent 66%);
  filter: blur(40px); pointer-events: none;
  animation: sa-imm-float 15s ease-in-out infinite reverse;
}
.sa-login__card {
  position: relative; z-index: 1;
  background: var(--imm-login-card) !important;
  border: 1px solid var(--imm-login-card-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 28px 80px -22px rgba(0,0,0,0.5), 0 6px 18px rgba(61,130,240,0.14), 0 0 0 1px var(--imm-login-card-border);
}
.sa-login__brand { color: var(--imm-brand-super); }
.sa-login__brand strong { color: var(--sa-accent-mid); }
.sa-login__sub { color: var(--sa-text-2); }

@keyframes sa-imm-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,18px); } }
@media (prefers-reduced-motion: reduce) { .sa-login::before, .sa-login::after { animation: none; } }

/* ============================================================
   SOLO TEMA SCURO — fix leggibilita su colori chiari fissi non-token
   ============================================================ */
[data-theme="dark"] .sa-brand__logo { color: var(--imm-brand-super); }
[data-theme="dark"] .sa-input,
[data-theme="dark"] input.sa-input,
[data-theme="dark"] select.sa-input,
[data-theme="dark"] textarea.sa-input {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.13); color: var(--sa-text);
}
[data-theme="dark"] .sa-input::placeholder { color: var(--sa-text-3); }
[data-theme="dark"] select.sa-input option { background: #1C2230; color: var(--sa-text); }
[data-theme="dark"] .sa-btn:not(.sa-btn--primary):not(.sa-btn--wa):not(.sa-btn--danger):not(.sa-btn--flag):not(.sa-btn--priorita) {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--sa-text);
}
[data-theme="dark"] .sa-btn:not(.sa-btn--primary):not(.sa-btn--wa):not(.sa-btn--danger):not(.sa-btn--flag):not(.sa-btn--priorita):hover {
  background: rgba(255,255,255,0.09); border-color: rgba(106,160,247,0.4);
}
/* Bottoni SEMANTICI nel dark: il catch-all sopra ora li esclude, cosi mantengono
   l'affordance di colore (prima diventavano grigi neutri: "Cancella per sempre" e
   "Elimina" perdevano il rosso di pericolo nel tema di default). */
[data-theme="dark"] .sa-btn--danger {
  background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.42); color: #FCA5A5;
}
[data-theme="dark"] .sa-btn--danger:hover {
  background: rgba(248,113,113,0.22); border-color: rgba(248,113,113,0.6);
}
[data-theme="dark"] .sa-btn--flag {
  background: rgba(251,191,36,0.16); border-color: rgba(251,191,36,0.42); color: #FBBF24;
}
[data-theme="dark"] .sa-btn--wa,
[data-theme="dark"] .sa-card__action-btn--wa {
  background: rgba(37,211,102,0.16); border-color: rgba(37,211,102,0.42); color: #5DE0A0;
}
/* Orari nel calendario: --sa-accent-dark #2563C9 e cupo sul velo blu scuro (come
   l'avatar). Azzurro chiaro. */
[data-theme="dark"] .sa-cal-week__time,
[data-theme="dark"] .sa-cal-day__time { color: #BFD6FF; }
[data-theme="dark"] .sa-list-table, [data-theme="dark"] .sa-rubrica-table { color: var(--sa-text); }
[data-theme="dark"] .sa-list-table thead th, [data-theme="dark"] .sa-rubrica-table thead th { background: var(--sa-surface-2); color: var(--sa-text-2); border-bottom-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .sa-list-table tbody tr, [data-theme="dark"] .sa-rubrica-table tbody tr { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-list-table tbody tr:hover, [data-theme="dark"] .sa-rubrica-table tbody tr:hover { background: rgba(255,255,255,0.035); }
[data-theme="dark"] .sa-cal, [data-theme="dark"] .sa-cal-grid, [data-theme="dark"] .sa-cal-cell { color: var(--sa-text); }
[data-theme="dark"] .sa-cal-cell { background: var(--sa-surface-2); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .sa-cal-cell--today { box-shadow: inset 0 0 0 2px rgba(61,130,240,0.45); }
[data-theme="dark"] .sa-cal-cell--has { background: rgba(61,130,240,0.12); }
[data-theme="dark"] .sa-cal-cell--has:hover,
[data-theme="dark"] .sa-cal-week__item:hover,
[data-theme="dark"] .sa-cal-day__item:hover { background: rgba(61,130,240,0.20); }
[data-theme="dark"] .sa-cal-week__item, [data-theme="dark"] .sa-cal-day__item { border-color: rgba(61,130,240,0.26); }
[data-theme="dark"] .sa-card__action-btn--primary { background: rgba(61,130,240,0.16); border-color: rgba(61,130,240,0.36); color: #BFD6FF; }
[data-theme="dark"] .sa-card__action-btn--primary:hover { background: rgba(61,130,240,0.28); border-color: var(--sa-accent); color: var(--sa-text-inv); }
[data-theme="dark"] .sa-card__action-btn:hover { border-color: rgba(255,255,255,0.18); }
/* Pillola AGENDA sulla card (dark): il testo base --sa-accent-dark (#2563C9) e
   troppo cupo sul fondo scuro della card. Qui testo azzurro chiaro leggibile,
   velo e bordo del blu marchio. La pillola NOTE resta ok (usa --sa-text chiaro). */
[data-theme="dark"] .sa-card__agenda {
  background: rgba(61,130,240,0.16);
  color: #BFD6FF;
  border-color: rgba(61,130,240,0.34);
}
/* Avatar iniziali proprietario (dark): il blu --sa-accent-dark #2563C9 e un po'
   cupo sul velo blu della card scura. Iniziali azzurro chiaro, velo un filo piu
   pieno: si leggono nette. */
[data-theme="dark"] .sa-card__owner {
  background: rgba(61,130,240,0.22);
  color: #CFE0FF;
}
/* X di chiusura nella testata scheda lead: contrasto pieno sul nuovo sfondo scuro
   (col grigio attenuato di base spariva nella striscia). Hover leggibile. */
[data-theme="dark"] .sa-panel__head .sa-btn-icon,
[data-theme="dark"] .sa-modal__head .sa-btn-icon { color: var(--sa-text); }
[data-theme="dark"] .sa-panel__head .sa-btn-icon:hover,
[data-theme="dark"] .sa-modal__head .sa-btn-icon:hover { background: rgba(255,255,255,0.10); color: var(--sa-text-inv); }

/* ============================================================
   Animazione d'ingresso "Ue Ue Welcome" — a tema + piu figa/movimentata
   (prima aveva lo sfondo bianco fisso; ora segue il tema e ha piu vita)
   ============================================================ */
.sa-entry-overlay {
  background: var(--imm-login-bg) !important;
  overflow: hidden;
}
/* due orbi di luce del marchio che derivano sullo sfondo */
.sa-entry-overlay::before,
.sa-entry-overlay::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(44px); z-index: 0;
}
.sa-entry-overlay::before {
  width: 540px; height: 540px; top: -170px; left: -130px;
  background: radial-gradient(circle, var(--imm-login-glow-1), transparent 66%);
  animation: sa-entry-orb 2.0s var(--sa-ease) both;
}
.sa-entry-overlay::after {
  width: 470px; height: 470px; bottom: -160px; right: -120px;
  background: radial-gradient(circle, var(--imm-login-glow-2), transparent 66%);
  animation: sa-entry-orb 2.2s var(--sa-ease) 0.1s both;
}
@keyframes sa-entry-orb {
  0%   { opacity: 0; transform: scale(0.7); }
  45%  { opacity: 1; }
  100% { opacity: 0.85; transform: scale(1.16) translate(18px, -12px); }
}
.sa-entry-stage { position: relative; z-index: 1; }

/* anelli che esplodono dietro il logo */
.sa-entry-hero::before,
.sa-entry-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  opacity: 0; transform: scale(0.5);
}
.sa-entry-hero::before {
  border: 2px solid var(--sa-accent);
  animation: sa-entry-ring 900ms var(--sa-ease) 160ms both;
}
.sa-entry-hero::after {
  border: 1px solid var(--sa-accent-mid);
  animation: sa-entry-ring 1150ms var(--sa-ease) 320ms both;
}
@keyframes sa-entry-ring {
  0%   { opacity: 0; transform: scale(0.5); }
  35%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(2.4); }
}

/* logo: glow piu vivo */
.sa-entry-hero__img { filter: drop-shadow(0 12px 32px rgba(61,130,240,0.5)) !important; }

/* nome: shimmer che passa sul wordmark */
.sa-entry-wordmark__name {
  background: linear-gradient(100deg, var(--sa-text) 28%, var(--sa-accent-mid) 50%, var(--sa-text) 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sa-entry-shimmer 1500ms var(--sa-ease) 640ms both;
}
.sa-entry-wordmark__name strong { -webkit-text-fill-color: var(--sa-accent-mid); }
@keyframes sa-entry-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* "Ue Ue Welcome": il saluto d'ingresso, piu in evidenza (sotto il brand) */
.sa-entry-wordmark__tagline {
  margin-top: 9px;
  font-size: var(--sa-fs-18);
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--sa-accent-mid);
  text-shadow: 0 0 22px rgba(61,130,240,0.6);
  animation: sa-entry-wm 340ms var(--sa-ease) 620ms both, sa-entry-tag-pulse 1500ms ease-in-out 980ms;
}
@keyframes sa-entry-tag-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.72; } }

@media (prefers-reduced-motion: reduce) {
  .sa-entry-overlay::before, .sa-entry-overlay::after,
  .sa-entry-hero::before, .sa-entry-hero::after { animation: none !important; opacity: 0 !important; }
  .sa-entry-wordmark__name { animation: none !important; -webkit-text-fill-color: var(--sa-text); }
  .sa-entry-wordmark__tagline { animation: sa-entry-wm 1ms linear both !important; }
}

/* ============================================================
   FIX MOBILE — overflow orizzontale e affordance del nome card
   (additivo; i punti 1-3 sono di contenimento mobile <=599px, il punto 4
   sull'affordance del nome vale su tutte le larghezze ed e theme-aware).
   Causa misurata su iPhone/Chrome a 390x844: il centro notifiche e la
   griglia settimanale del calendario sfondano la larghezza utile e "sballano
   la visuale". Qui li conteniamo senza toccare le funzioni ne i due temi.
   ============================================================ */

/* (1) Guard radice: rete di sicurezza contro qualunque sfondamento orizzontale.
   Su iOS Safari un elemento posizionato fuori dal viewport puo allargare la
   pagina (a differenza di Chrome desktop): questo clamp lo impedisce a monte.
   Non rompe gli scroll-x interni, che restano overflow-x:auto sui loro
   contenitori (board, griglia settimanale). Vale su tutte le larghezze. */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 599px) {
  /* (2) CENTRO NOTIFICHE — ancorato al VIEWPORT, non al wrap della campanella.
     Misura del bug (390px): il pannello (.sa-notif-panel right:0 dentro un wrap
     rientrato) finiva con left:-116 -> meta fuori schermo a sinistra. Su mobile
     lo agganciamo allo schermo: position:fixed + left/right a 8px, larghezza
     piena meno i margini. Il top viene impostato sotto la campanella reale da
     openNotifPanel (la topbar mobile e a due righe, altezza variabile). */
  .sa-notif-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    /* fallback se il top dinamico non e ancora impostato: sotto la topbar
       mobile a 2 righe del redesign 2026-07-23 (~100px) */
    top: 110px;
    max-height: 70vh;
  }

  /* (3) CALENDARIO settimanale — la griglia chiede 7x120=840px. Conteniamo lo
     scroll DENTRO il body del calendario invece di lasciarlo sfondare la pagina:
     min-width:0 sblocca la compressione dei flex/grid item (default min-width:auto
     non si comprime sotto il contenuto), e overflow-x:auto fa scorrere la griglia
     nel suo riquadro. La .sa-cal-week mantiene le 7 colonne da 120px leggibili. */
  .sa-cal-wrap { min-width: 0; }
  .sa-cal__body { min-width: 0; overflow-x: auto; }
}

/* (4) PROBLEMA B — affordance del nome card (tutte le larghezze, theme-aware).
   Col fix JS l'intera area non-bottone della card apre la scheda; qui rinforziamo
   il segnale visivo che il nome e il punto d'ingresso: piu padding (bersaglio piu
   ampio), con margine negativo compensativo per non allargare il blocco, e in
   hover/active il blu del marchio (--sa-accent), coerente nei due temi. */
.sa-card__name {
  padding: 5px 2px;
  margin: -5px -2px 1px;
  border-radius: var(--sa-r-sm);
  transition: color var(--sa-t-fast), background var(--sa-t-fast);
}
.sa-card:hover .sa-card__name { color: var(--sa-accent-mid); }
.sa-card:active .sa-card__name,
.sa-card__name:active { background: var(--sa-accent-light); color: var(--sa-accent-mid); }