/* La palette è agganciata a [data-theme] a QUALSIASI livello (non solo :root):
   così un sottoalbero (es. #mapView) può forzare un tema diverso dal root. */
:root,
[data-theme="light"] {
    --glass: rgba(255, 255, 255, 0.65);
    --glass-strong: rgba(255, 255, 255, 0.85);
    --glass-subtle: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-border-subtle: rgba(255, 255, 255, 0.4);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    --glass-blur: blur(25px) saturate(140%);
    --glass-blur-light: blur(15px) saturate(120%);

    /* Apple System Colors */
    --text: #1d1d1f;
    --text2: #424245;
    --text3: #86868b;
    --green: #24b24b;
    --green-bg: rgba(36, 178, 75, 0.08);
    --red: #ff3b30;
    --red-bg: rgba(255, 59, 48, 0.08);
    --yellow: #ff9f0a;
    --yellow-bg: rgba(255, 159, 10, 0.08);
    --blue: #007aff;
    --blue-bg: rgba(0, 122, 255, 0.08);
    --purple: #7e22ce;
    --purple-bg: rgba(168, 85, 247, 0.13);
    --orange: #c2410c;
    --orange-bg: rgba(194, 65, 12, 0.1);

    /* Grafici mutuo (palette validata: banda L, CVD, contrasto ≥3:1) */
    --chart-capitale: #007aff;
    --chart-interessi: #b45309;
    /* Grafici strategie investimento (Analytics): flip/hold/rendita */
    --chart-flip: #007aff;
    --chart-hold: #1d8a43;
    --chart-rendita: #b45309;

    /* Superfici semantiche — usale nei NUOVI componenti al posto di colori fissi,
       così seguono automaticamente light/dark. */
    --app-bg: #f5f5f7;          /* sfondo pagina */
    --surface: #ffffff;          /* card/pannelli opachi */
    --surface-2: #fafafa;        /* superfici secondarie (header tabella, righe alt.) */
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);

    /* Canali RGB: una sola variabile tematizza tutti gli rgba(...) con qualsiasi
       alpha. In light valgono i colori originali → resa identica. */
    --surface-rgb: 255, 255, 255;   /* superfici/glass chiari → rgba(var(--surface-rgb), α) */
    --ink-rgb: 0, 0, 0;             /* bordi/tinte/testo scuri → rgba(var(--ink-rgb), α) */

    /* Canali RGB degli accenti: per i tint semitrasparenti (es. sfondi soft di
       blu/verde/rosso). Usa rgba(var(--blue-rgb), α) al posto di rgba(0,122,255,α)
       così il tint segue il tema invece di restare fisso e slavato sul dark. */
    --blue-rgb: 0, 122, 255;
    --green-rgb: 36, 178, 75;
    --red-rgb: 255, 59, 48;
    --yellow-rgb: 255, 159, 10;
    --purple-rgb: 168, 85, 247;

    /* ── Alias legacy → token tema ───────────────────────────────────────────
       Molti componenti (consulting, admin, notifiche, template inline) usano
       nomi di variabili storici (--bg, --bg0/1/2/3, --surface-1, --text1,
       --text-muted, --border1, --accent…) che NON erano mai stati definiti: il
       loro fallback chiaro (es. var(--bg0,#fff)) vinceva sempre → isole chiare
       in dark. Aliasandoli ai token tematici QUI, seguono light/dark ovunque a
       parità di resa light. (Definiti sul root: il dark li ridefinisce via i
       token base, che sono overridden sul root stesso.) */
    --bg: var(--surface);
    --bg0: var(--surface);
    --bg1: var(--surface-2);
    --bg2: var(--surface-2);
    --bg3: var(--surface-2);
    --bg-alt: var(--surface-2);
    --bg-color: var(--surface);
    --surface-1: var(--surface);
    --surface-3: var(--surface-2);
    --surface-hover: var(--surface-2);
    --text1: var(--text);
    --text-primary: var(--text);
    --text-color: var(--text);
    --text-secondary: var(--text2);
    --text-muted: var(--text3);
    --text-dim: var(--text3);
    --text4: var(--text3);
    --border1: var(--border);
    --border2: var(--border-strong);
    --border3: var(--border);
    --border-light: var(--border);
    --accent: var(--blue);
    --primary: var(--blue);
    --primary-light: var(--blue-bg);
    --blue-dark: var(--blue);
    --orange: var(--yellow);
    --accent-gradient: linear-gradient(135deg, var(--blue), var(--purple));

    /* Testo/icone su superfici accento piene (bottoni blu/verde/rosso, badge attivi):
       bianco in entrambi i temi, ma tokenizzato così resta un solo punto di verità. */
    --on-accent: #ffffff;

    /* Gradiente brand "AI" (Google) — dichiarato una sola volta, uguale nei due temi */
    --ai-gradient: linear-gradient(-45deg, #4285F4, #EA4335, #FBBC05, #34A853);

    /* Scrim per drawer/overlay mobile (dark più coprente) */
    --backdrop: rgba(15, 18, 25, 0.28);

    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 10px;

    --shadow: 0 4px 12px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.02);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.02);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.4);
    --shadow-drawer: 12px 0 30px rgba(0,0,0,0.14);
    --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

    color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK MODE — applicato da theme.js come <html data-theme="dark">.
   Palette ispirata a finance-platform (IntelliJ New UI / JetBrains Dark).
   Sovrascrive SOLO le variabili: i componenti che usano var(--*) seguono il
   tema. I colori hardcoded restano chiari finché non migrano alle variabili
   (vedi CLAUDE.md §tema). Non rompe il light (default).
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"],
[data-theme="dark"] {
    color-scheme: dark;

    --glass: rgba(43, 45, 48, 0.72);          /* panel #2B2D30 */
    --glass-strong: rgba(43, 45, 48, 0.92);
    --glass-subtle: rgba(43, 45, 48, 0.5);
    --glass-border: rgba(57, 59, 64, 0.85);   /* hover/hairline #393B40 */
    --glass-border-subtle: rgba(57, 59, 64, 0.55);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    --text: #dfe1e5;
    --text2: #b4b8c0;
    --text3: #9da0a8;

    --green: #5fad65;
    --green-bg: rgba(95, 173, 101, 0.16);
    --red: #f75464;
    --red-bg: rgba(247, 84, 100, 0.16);
    --yellow: #d6ae58;
    --yellow-bg: rgba(214, 174, 88, 0.16);
    --blue: #3574f0;
    --blue-bg: rgba(53, 116, 240, 0.18);
    --purple: #c4a7f5;
    --purple-bg: rgba(168, 85, 247, 0.22);
    --orange: #d08b4c;
    --orange-bg: rgba(208, 139, 76, 0.16);

    /* Grafici mutuo — variante scura (banda L 0.48–0.67 validata) */
    --chart-capitale: #3574f0;
    --chart-interessi: #bd8626;
    --chart-flip: #3574f0;
    --chart-hold: #55a05c;
    --chart-rendita: #bd8626;

    --app-bg: #1e1f22;          /* editor bg */
    --surface: #2b2d30;          /* panel */
    --surface-2: #313338;
    --border: rgba(57, 59, 64, 0.85);
    --border-strong: rgba(85, 88, 94, 0.9);

    /* Canali RGB scuri: gli rgba(255,255,255,α) diventano superfici scure,
       gli rgba(0,0,0,α) (bordi/testo) diventano chiari su fondo scuro. */
    --surface-rgb: 43, 45, 48;
    --ink-rgb: 223, 225, 229;

    /* Accenti dark: tinte più tenui/luminose per leggere su fondo scuro. */
    --blue-rgb: 53, 116, 240;
    --green-rgb: 95, 173, 101;
    --red-rgb: 247, 84, 100;
    --yellow-rgb: 214, 174, 88;
    --purple-rgb: 196, 167, 245;

    --on-accent: #ffffff;
    --backdrop: rgba(0, 0, 0, 0.5);

    --shadow: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.42), 0 2px 4px rgba(0,0,0,0.28);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(57,59,64,0.6);
    --shadow-drawer: 12px 0 30px rgba(0,0,0,0.55);
}

/* Sfondi pagina: ogni sezione imposta un gradiente chiaro hardcoded sul body
   (consulting/analytics/admin/dashboard). In dark forziamo lo sfondo piatto
   --app-bg (la specificità [data-theme] + body.classe batte le regole originali). */
:root[data-theme="dark"] body.consulting-page,
:root[data-theme="dark"] body.analytics-page,
:root[data-theme="dark"] body.admin-page,
:root[data-theme="dark"] body.dashboard-page,
:root[data-theme="dark"] body.login-page {
    background: var(--app-bg);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: var(--text);
    height: 100vh;
    background: var(--app-bg);
    letter-spacing: -0.01em;
    overflow: hidden; /* Rimuove lo scroll esterno */
    transition: background var(--transition), color var(--transition);
}

/* Selettore tema nel modale Profilo Utente (light / dark / system) */
.theme-seg {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.theme-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.theme-seg-btn .material-symbols-outlined {
    font-size: 16px;
}

.theme-seg-btn:hover {
    color: var(--text);
}

.theme-seg-btn.is-active {
    background: var(--surface);
    color: var(--blue);
    box-shadow: var(--shadow);
}

html.status-scroll-unlocked,
body.status-scroll-unlocked {
    overflow-y: auto !important;
}

body.status-scroll-unlocked .main {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Glass mixin applied via classes */
.glass-panel {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}