/* Effetto "liquid glass" sui box (schede strategia, riquadri KPI, card della home), attivo solo con
   <html class="glass">: ?glass=1 lo accende, ?glass=0 lo spegne (resta memorizzato nel browser).
   Niente sfondi colorati: il vetro è fatto di riflesso in alto, bordo luminoso e ombre interne. */

html.glass {
    /* tema chiaro: sfondo della pagina grigio freddo, così i box bianchi a vetro risaltano.
       Alternative provate: sfumato linear-gradient(180deg, #F3F4F6, #E2E5EA), grigio caldo #ECEAE5 */
    --lg-page: #ECEEF1;
    --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.80) 60%, rgba(255, 255, 255, 0.72) 100%);
    --lg-sheen: radial-gradient(120% 55% at 15% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 60%);
    --lg-rim: linear-gradient(160deg, #FFFFFF 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.35) 65%, #FFFFFF 100%);
    --lg-inner: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.6);
    --lg-drop: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08), 0 24px 48px -24px rgba(0, 0, 0, 0.18);
    --lg-drop-hover: 0 2px 3px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.11), 0 30px 56px -24px rgba(0, 0, 0, 0.24);
}
html.glass:not([data-theme="dark"]) body { background: var(--lg-page); }
html.glass[data-theme="dark"] {
    --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 55%, rgba(255, 255, 255, 0.02) 100%);
    --lg-sheen: radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%);
    --lg-rim: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 65%, rgba(255, 255, 255, 0.22) 100%);
    --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(255, 255, 255, 0.02);
    --lg-drop: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35), 0 20px 44px -18px rgba(0, 0, 0, 0.5);
    --lg-drop-hover: 0 2px 2px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45), 0 28px 54px -20px rgba(0, 0, 0, 0.6);
}

/* i box */
html.glass :where(.pf-card, .rs-card, .pf-kpi, .sd-tile, .sd-kpi, .ld-card, .ld-mini-card, .ld-strip a, .ld-stat, .ld-tax-card,
                  .sc-card, .fp-card, .pr-card, .wm-card, .stat-box, .ac-card,
                  .sd-section, .tx-form, .sim-form, .fp-form, .fp-result, .chart-box, .cp-chart,
                  .lock-card, .entry-card) {
    position: relative;
    isolation: isolate;
    background: var(--lg-sheen), var(--lg-fill);
    border-color: transparent;
    box-shadow: var(--lg-inner), var(--lg-drop);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* bordo luminoso: un anello sfumato al posto del bordo grigio */
html.glass :where(.pf-card, .rs-card, .pf-kpi, .sd-tile, .sd-kpi, .ld-card, .ld-mini-card, .ld-strip a, .ld-stat, .ld-tax-card,
                  .sc-card, .fp-card, .pr-card, .wm-card, .stat-box, .ac-card,
                  .sd-section, .tx-form, .sim-form, .fp-form, .fp-result, .chart-box, .cp-chart,
                  .lock-card, .entry-card)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
    background: var(--lg-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
/* le schede grandi si sollevano un poco al passaggio del mouse */
html.glass :where(.pf-card, .rs-card, .ld-card, .ld-mini-card, .ld-strip a, .sc-card, .fp-card, .pr-card):hover {
    box-shadow: var(--lg-inner), var(--lg-drop-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    html.glass :where(.pf-card, .rs-card, .ld-card, .ld-mini-card, .ld-strip a, .sc-card, .fp-card, .pr-card):hover { transform: none; }
}

/* tabelle dentro i box a vetro: l'intestazione fissa prende il colore del vetro invece del bianco pieno */
html.glass:not([data-theme="dark"]) :where(.sd-section, .ac-card) :where(thead th, th[style*="sticky"]) {
    background: rgba(255, 255, 255, 0.94);
}
html.glass[data-theme="dark"] :where(.sd-section, .ac-card) :where(thead th) { background: #1A2129; }
html.glass :where(.sd-section) { border-radius: 16px; }

/* Variante "liquid" per il tema chiaro (?glass=2), sul modello della pen "Glass UI" di Margarita-the-solid:
   sfondo grigio ardesia più scuro con macchie fredde molto sfocate (niente verde né giallo), box bianchi al 62%
   con sfocatura di 18px, riflesso diagonale in alto a sinistra, bordo scuro sottile e luce interna in alto. */
html.glass.glass-liquid:not([data-theme="dark"]) {
    --lg-page: linear-gradient(160deg, #DCE1E8 0%, #CED5DE 55%, #D6DCE4 100%);
    --lg-fill: linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62));
    --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 50%);
    --lg-rim: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(51, 65, 85, 0.14) 40%, rgba(51, 65, 85, 0.12) 70%, rgba(255, 255, 255, 0.7) 100%);
    --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    --lg-drop: 0 8px 32px rgba(31, 41, 55, 0.14), 0 2px 6px rgba(31, 41, 55, 0.06);
    --lg-drop-hover: 0 16px 48px rgba(31, 41, 55, 0.20), 0 4px 10px rgba(31, 41, 55, 0.08);
}
html.glass.glass-liquid:not([data-theme="dark"]) body { background: var(--lg-page) fixed; }
html.glass.glass-liquid:not([data-theme="dark"]) body::before {
    content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
    background:
        radial-gradient(30vmax 26vmax at 18% 22%, rgba(99, 125, 168, 0.30), transparent 70%),
        radial-gradient(28vmax 24vmax at 85% 18%, rgba(140, 132, 180, 0.24), transparent 70%),
        radial-gradient(34vmax 28vmax at 70% 85%, rgba(86, 120, 150, 0.26), transparent 70%),
        radial-gradient(26vmax 22vmax at 12% 85%, rgba(160, 170, 190, 0.30), transparent 70%);
    filter: blur(60px);
}
html.glass.glass-liquid:not([data-theme="dark"]) :where(.pf-card, .rs-card, .pf-kpi, .sd-tile, .sd-kpi, .ld-card, .ld-mini-card,
        .ld-strip a, .ld-stat, .ld-tax-card, .sc-card, .fp-card, .pr-card, .wm-card, .stat-box, .ac-card, .sd-section,
        .tx-form, .sim-form, .fp-form, .fp-result, .chart-box, .cp-chart, .lock-card, .entry-card) {
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
/* dentro un box a vetro, i riquadri annidati (numeri delle schede) restano un po' più chiari */
html.glass.glass-liquid:not([data-theme="dark"]) :where(.pf-card .pf-kpi, .sd-section .sd-tile) {
    --lg-fill: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55));
}
html.glass.glass-liquid:not([data-theme="dark"]) :where(.sd-section, .ac-card) :where(thead th) { background: rgba(255, 255, 255, 0.85); }

/* Pulsanti, chip e campi di ricerca a vetro: pillole con bordo luminoso e testo pieno, leggibili sul grigio */
html.glass {
    --lg-pill: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    --lg-pill-on: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, 0.92));
    --lg-pill-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55),
                    0 1px 2px rgba(31, 41, 55, 0.08), 0 4px 12px -4px rgba(31, 41, 55, 0.14);
    --lg-pill-text: #1F2A27;
}
html.glass[data-theme="dark"] {
    --lg-pill: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
    --lg-pill-on: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.12));
    --lg-pill-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06),
                    0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
    --lg-pill-text: #E6EAEE;
}
/* chip singoli e campi */
html.glass :where(.sc-chips button, .sd-filter button, .mo-chipform a, .sc-search, .pf-amount input,
                  input[type="search"], input[type="text"].sc-search) {
    background: var(--lg-pill);
    border-color: transparent;
    box-shadow: var(--lg-pill-edge);
    color: var(--lg-pill-text);
    -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
}
html.glass :where(.sc-search, input[type="search"])::placeholder { color: color-mix(in srgb, var(--lg-pill-text) 55%, transparent); }
html.glass :where(.sc-chips button[aria-pressed="true"], .sd-filter button[aria-pressed="true"], .mo-chipform a[aria-pressed="true"]) {
    background: var(--lg-pill-on); color: var(--accent); font-weight: 700;
}
html.glass :where(.sc-chips button, .sd-filter button, .mo-chipform a):hover { background: var(--lg-pill-on); }
/* gruppi a segmenti (Overview/Performance, linguette, periodi): la cornice è il vetro, il selezionato una goccia piena */
html.glass :where(.pf-toggle, .mo-tabs, .lg-tabs, .cp-toggle, .er-period) {
    background: var(--lg-pill);
    border-color: transparent;
    box-shadow: var(--lg-pill-edge);
    -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
}
html.glass :where(.pf-toggle, .mo-tabs, .lg-tabs, .cp-toggle, .er-period) :where(a, button) { color: var(--lg-pill-text); }
html.glass :where(.pf-toggle a[aria-current="true"], .pf-toggle button[aria-pressed="true"], .mo-tabs a[aria-current="page"],
                  .lg-tabs a[aria-current="page"], .cp-toggle button[aria-pressed="true"], .er-period a[aria-current="true"]) {
    background: var(--lg-pill-on); color: var(--accent); font-weight: 700;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(31, 41, 55, 0.12);
}
html.glass[data-theme="dark"] :where(.pf-toggle a[aria-current="true"], .pf-toggle button[aria-pressed="true"], .mo-tabs a[aria-current="page"],
                  .lg-tabs a[aria-current="page"], .cp-toggle button[aria-pressed="true"], .er-period a[aria-current="true"]) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.4);
}