/*
  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"] {
  --sa-bg:           #10141E;
  --sa-surface:      #1C2230;
  --sa-surface-2:    #161B27;
  --sa-surface-3:    #242C3C;
  --sa-border:       rgba(255,255,255,0.08);
  --sa-border-focus: #6AA0F7;
  --sa-overlay:      rgba(8,11,18,0.60);
  --sa-text:         #DBE0EC;
  --sa-text-2:       #99A2B4;
  --sa-text-3:       #7A8496;
  --sa-text-inv:     #FFFFFF;
  --sa-accent:       #3D82F0;
  --sa-accent-dark:  #2563C9;
  --sa-accent-mid:   #6AA0F7;
  --sa-accent-light: rgba(61,130,240,0.16);
  --sa-accent-glow:  0 5px 18px rgba(61,130,240,0.32), 0 1px 3px rgba(0,0,0,0.35);

  /* Accenti di stadio (Daylight, versione DARK). Gli stessi 5 stadi del tema
     chiaro (design-tokens.css :root) ma calibrati per il fondo scuro: l'accento
     (stripe del capo-colonna, pallino accanto al nome, badge conteggio) e piu
     luminoso; -bg e -pill sono veli traslucidi del colore; -text e la variante
     chiara, cosi le pill si leggono bene sulle card scure. Senza questo blocco i
     --sa-stage-* chiari trapelerebbero (pill chiarissime su fondo scuro = illeggibili). */
  --sa-stage-1-accent: #60A5FA; --sa-stage-1-bg: rgba(96,165,250,0.15);  --sa-stage-1-text: #BFDBFE; --sa-stage-1-pill: rgba(96,165,250,0.34);
  --sa-stage-2-accent: #34D399; --sa-stage-2-bg: rgba(52,211,153,0.15);  --sa-stage-2-text: #A7F3D0; --sa-stage-2-pill: rgba(52,211,153,0.34);
  --sa-stage-3-accent: #FBBF24; --sa-stage-3-bg: rgba(251,191,36,0.15);  --sa-stage-3-text: #FDE68A; --sa-stage-3-pill: rgba(251,191,36,0.34);
  --sa-stage-4-accent: #F472B6; --sa-stage-4-bg: rgba(244,114,182,0.15); --sa-stage-4-text: #FBCFE8; --sa-stage-4-pill: rgba(244,114,182,0.34);
  --sa-stage-5-accent: #A78BFA; --sa-stage-5-bg: rgba(167,139,250,0.15); --sa-stage-5-text: #DDD6FE; --sa-stage-5-pill: rgba(167,139,250,0.34);

  /* Terna semantica (dark): veli traslucidi scuri + 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. */
  --sa-success:    #34D399; --sa-success-bg: rgba(52,211,153,0.16);
  --sa-warning:    #FBBF24; --sa-warning-bg: rgba(251,191,36,0.16);
  --sa-caution:    #FDE047;
  --sa-danger:     #F87171; --sa-danger-bg:  rgba(248,113,113,0.16);
  --sa-shadow-card:  0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 22px -10px rgba(0,0,0,0.66);
  --sa-shadow-col:   0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 26px -14px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  --sa-shadow-lift:  0 10px 30px -12px rgba(0,0,0,0.66), 0 2px 8px rgba(0,0,0,0.4);
  --sa-shadow-modal: 0 32px 90px -26px rgba(0,0,0,0.78), 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(106,160,247,0.10);
  /* Ombra di "volo" della card trascinata, versione scura (prima usava quella
     chiara dei token base: fuori tono sul soft-dark). Profonda + soffio blu. */
  --sa-shadow-drag:  0 20px 52px -12px rgba(0,0,0,0.7), 0 6px 18px rgba(61,130,240,0.26), 0 1px 3px rgba(0,0,0,0.5);

  --imm-body:
    radial-gradient(1200px 760px at 50% -16%, rgba(61,130,240,0.10), transparent 60%),
    radial-gradient(820px 620px at 102% 6%, rgba(99,102,241,0.06), transparent 55%),
    linear-gradient(160deg, #121724 0%, #0F131D 55%, #131826 100%);
  --imm-topbar: linear-gradient(180deg, rgba(28,34,48,0.85) 0%, rgba(20,25,37,0.78) 100%);
  /* Firma blu sotto la topbar assottigliata a 1px (redesign 2026-07-23):
     l'identita resta, il tratto si fa fine come sui prodotti di riferimento. */
  --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 rgba(61,130,240,0.38);
  --imm-toolbar: linear-gradient(180deg, rgba(28,34,48,0.45), rgba(28,34,48,0));
  --imm-col: linear-gradient(180deg, #1A2030 0%, #161B27 100%);
  --imm-stage-header: #1C2230;
  --imm-line: rgba(255,255,255,0.07);
  /* Testata scheda lead (dark): superficie scura + soffio blu marchio attenuato in
     testa, niente chiaro fisso. La X ci si stacca sopra con contrasto pieno. */
  --imm-panel-head: linear-gradient(180deg, rgba(61,130,240,0.14) 0%, var(--sa-surface) 100%);
  /* SCHEDE: superficie piu chiara + bordo e ombra marcati -> si staccano dallo sfondo */
  --imm-card: linear-gradient(180deg, #2B3650 0%, #243049 100%);
  --imm-card-border: rgba(160,190,240,0.16);
  --imm-card-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 26px -10px rgba(0,0,0,0.7);
  --imm-card-hover-border: rgba(106,160,247,0.55);
  --imm-card-hover-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 14px 32px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(61,130,240,0.30);
  --imm-surface: linear-gradient(180deg, #1E2434 0%, #181E2C 100%);
  --imm-overlay: radial-gradient(130% 120% at 50% 0%, rgba(8,11,18,0.50) 0%, rgba(6,8,14,0.70) 100%);
  --imm-brand-super: #EAEEF8;
  --imm-login-bg:
    radial-gradient(960px 660px at 50% -8%, rgba(45,108,240,0.34), transparent 60%),
    radial-gradient(700px 540px at 12% 112%, rgba(45,108,240,0.24), transparent 55%),
    radial-gradient(640px 540px at 104% 2%, rgba(99,102,241,0.22), transparent 55%),
    linear-gradient(165deg, #0C1426 0%, #0A0F1F 50%, #0D1528 100%);
  --imm-login-card: linear-gradient(180deg, #1F2942 0%, #171F31 100%);
  --imm-login-card-border: rgba(106,160,247,0.20);
  --imm-login-glow-1: rgba(61,130,240,0.32);
  --imm-login-glow-2: rgba(99,102,241,0.24);
}

/* ============================================================
   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 rgba(29,94,199,0.08);

  --imm-body:
    radial-gradient(1100px 720px at 50% -12%, rgba(29,94,199,0.10), 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 rgba(29,94,199,0.16);
  --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: rgba(29,94,199,0.22);
  --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 rgba(29,94,199,0.14), 0 0 30px -12px rgba(29,94,199,0.28);
  --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%, rgba(29,94,199,0.16), 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: rgba(29,94,199,0.16);
  --imm-login-glow-1: rgba(29,94,199,0.18);
  --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: #fff;
  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; }

.sa-input:focus, .sa-input:focus-visible,
input.sa-input:focus, select.sa-input:focus, textarea.sa-input:focus {
  outline: none;
  border-color: var(--sa-accent) !important;
  box-shadow: 0 0 0 3px rgba(61,130,240,0.20);
}

.sa-modal { background: var(--imm-surface); box-shadow: var(--sa-shadow-modal); }
.sa-panel { background: var(--imm-surface); box-shadow: -12px 0 64px -24px rgba(0,0,0,0.5), 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) {
  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):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-view-toggle { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .sa-view-toggle__btn { color: var(--sa-text-2); }
[data-theme="dark"] .sa-view-toggle__btn.is-active { background: var(--sa-surface); color: var(--sa-text); box-shadow: 0 1px 4px rgba(0,0,0,0.45), 0 0 0 1px rgba(61,130,240,0.26); }
[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: #fff; }
[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: 17px;
  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); }