/*
 * marchiotto-glass-tokens.css
 * ===========================
 * Token CSS centralizzati per il sistema liquid-glass (Marchiotto/Progres).
 *
 * Caricato PRIMA di tutti i fogli *-glass.css in staff-head.html e client-head.html.
 *
 * Obiettivi (perf 2026-05-13):
 *   1) Centralizzare le intensità di blur per tuning rapido senza toccare 9 fogli.
 *   2) Ridurre il costo compositing su Mac/Safari (artefatti bordi, frame drop)
 *      via classe html.mp-low-graphics applicata da UA detection inline in
 *      staff-head.html / client-head.html (Safari, Mac M1, hardware <8 core).
 *   3) Rispetto utente: @media (prefers-reduced-transparency) e
 *      @media (prefers-reduced-motion) azzerano blur e animazioni pesanti.
 *   4) Fallback @supports per browser senza backdrop-filter (vecchio Firefox/IE):
 *      background più opaco invece di pannelli trasparenti vuoti.
 *
 * NESSUNA modifica funzionale: i fogli glass continuano a usare i loro selettori,
 * sostituiscono solo i numeri hard-coded con var(--glass-blur-*).
 */

:root {
    /* Scala blur (px). Default desktop alto, calibrato per look "liquid glass" originale. */
    --glass-blur-sm: 8px;
    --glass-blur-md: 12px;
    --glass-blur-lg: 16px;
    --glass-blur-xl: 20px;
    --glass-blur-2xl: 24px;

    /* Saturation di default per accentuare i colori sotto il vetro */
    --glass-sat: 155%;
    --glass-sat-strong: 170%;
    --glass-sat-extra: 180%;

    /* Background fallback (usato quando backdrop-filter non è supportato o ridotto) */
    --glass-bg-fallback: rgba(255, 255, 255, 0.55);

    /* Superficie vetro condivisa staff/client */
    --glass-bg: rgba(28, 45, 72, 0.88);
    --glass-bg-deep: rgba(8, 14, 28, 0.88);
    --glass-border-soft: rgba(255, 255, 255, 0.22);
    --glass-inset-ring: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    --glass-accent-glow: rgba(96, 165, 250, 0.22);

    /* Chart.js dashboard (client + staff) */
    --chart-grid: rgba(148, 163, 184, 0.08);
    --chart-grid-strong: rgba(148, 163, 184, 0.12);
}

/*
 * Mac/Safari + hardware basso: classe applicata da inline UA detection.
 * Riduzione progressiva del blur per minimizzare repaint cost (su Safari M1
 * il backdrop-filter è il singolo collo di bottiglia più costoso del frame).
 */
html.mp-low-graphics {
    --glass-blur-sm: 6px;
    --glass-blur-md: 10px;
    --glass-blur-lg: 12px;
    --glass-blur-xl: 14px;
    --glass-blur-2xl: 16px;
}

/*
 * Preferenza utente "Reduce transparency" (macOS Accessibility, Windows).
 * Il browser rispetta l'impostazione di sistema → azzeriamo blur e
 * compensiamo con background più opaco per mantenere leggibilità.
 */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-blur-sm: 0;
        --glass-blur-md: 0;
        --glass-blur-lg: 0;
        --glass-blur-xl: 0;
        --glass-blur-2xl: 0;
        --glass-bg-fallback: rgba(255, 255, 255, 0.92);
        --glass-bg-deep: rgba(8, 14, 28, 0.96);
    }
}

/*
 * Browser senza supporto backdrop-filter (vecchio Firefox <103, IE).
 * Aumentiamo l'opacità del fallback per evitare pannelli illeggibili.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-bg-fallback: rgba(255, 255, 255, 0.95);
    }
}

/*
 * Reduced motion: oltre alle animazioni dei fogli singoli (gestite localmente),
 * forziamo un transizione minima sui contenitori glass per evitare frame jump
 * quando l'utente naviga rapidamente fra ticket o tab.
 */
@media (prefers-reduced-motion: reduce) {
    html.mp-low-graphics {
        --glass-blur-sm: 4px;
        --glass-blur-md: 6px;
        --glass-blur-lg: 8px;
        --glass-blur-xl: 8px;
        --glass-blur-2xl: 10px;
    }
}

/*
 * Utility isolation — ogni superficie vetro interattiva ottiene il proprio stacking context.
 * Evita bleed/flicker di backdrop-filter su pulsanti, righe e pill adiacenti (WebKit/Metal).
 * Applicare sulla stessa box che porta backdrop-filter, o su un wrapper diretto.
 */
.mp-glass-isolate {
    position: relative;
    isolation: isolate;
}

.mp-glass-isolate--paint {
    contain: paint;
}

/*
 * Layer GPU separato — chrome fixed vs contenuto scrollabile.
 * Usare su wrapper #content / #pjax-container o pannelli glass grandi.
 */
.mp-glass-layer {
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Superficie vetro senza campionamento (sostituto backdrop-filter) */
.mp-glass-solid {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--glass-bg-fallback, rgba(28, 45, 72, 0.94));
}