/* ============================================================================
   SuperAdmin — kit di stile "come il Budget" (2026-10-08, 3° giro)

   Richiesta cliente: tutta l'area /superadmin più moderna e fluida, con lo stesso
   linguaggio del Budget (tema chiaro azzurro, card morbide, barre fisse, accenti
   indaco) e uniforme da una pagina all'altra.

   Questo file è il PUNTO UNICO dello stile admin a livello di componenti:
   - app.css               → palette superadmin (colori) e base di tutti i verticali
   - superadmin-3d.css     → scena di sfondo, profondità, tab sticky, superfici MudBlazor
   - superadmin.css (qui)  → token di forma/spaziatura e resa uniforme di intestazioni,
                             card, tabelle, chip, pulsanti, campi, pannelli + utility
                             che sostituiscono gli stili inline nelle pagine.

   Ambito: tutto sotto html[data-vertical="superadmin"] → i verticali dei tenant non
   cambiano. Il Budget (.fzb) ha un design system proprio: escluso con :not(.fzb *).
   Va caricato DOPO superadmin-3d.css (vedi App.razor).

   Scala spaziature: 4 / 8 / 12 / 16 / 24 / 32 px (--sa-1 … --sa-6).
   ============================================================================ */

html[data-vertical="superadmin"] {
    /* ── Token ── */
    --sa-1: 4px;
    --sa-2: 8px;
    --sa-3: 12px;
    --sa-4: 16px;
    --sa-5: 24px;
    --sa-6: 32px;
    --sa-radius: 18px;          /* card, tabelle, pannelli: come .card del Budget */
    --sa-radius-sm: 12px;       /* campi, pulsanti, riquadri interni */
    --sa-radius-pill: 999px;
    --sa-shadow-1: 0 1px 2px rgba(11, 16, 38, .05), 0 8px 22px -12px rgba(30, 58, 110, .22);
    --sa-shadow-2: 0 2px 6px rgba(11, 16, 38, .06), 0 20px 44px -18px rgba(30, 58, 110, .30);
    --sa-card-bg: linear-gradient(160deg, #FBFDFF, var(--surface));
    --sa-ease: cubic-bezier(.16, 1, .3, 1);
    --sa-dur: .22s;

    /* MudBlazor usa questo raggio per campi, pulsanti, menu, tab arrotondate. */
    --mud-default-borderradius: var(--sa-radius-sm);

    /* ═════════════════════ INTESTAZIONE PAGINA ═════════════════════
       Struttura comune a tutte le pagine: MudPaper.page-header > MudStack(row) >
       [MudIcon] [testi] [azioni]. L'icona diventa una tessera indaco (al posto
       dell'alone che "respirava"), titolo slate-indaco a colore fisso. */
    & .mud-main-content .page-header {
        padding: var(--sa-1) 0 var(--sa-5) !important;
        margin-bottom: 0 !important;
    }
    & .mud-main-content .page-header::before { display: none; }
    & .mud-main-content .page-header > .mud-stack {
        gap: var(--sa-4);
        flex-wrap: wrap;
    }
    & .mud-main-content .page-header > .mud-stack > .mud-icon-root:first-child {
        box-sizing: content-box;
        width: 26px;
        height: 26px;
        padding: 11px;
        margin: 0 !important;
        flex: none;
        border-radius: 14px;
        color: var(--accent-dark) !important;
        background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--brass) 12%, var(--surface)));
        border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
        box-shadow: var(--sa-shadow-1);
        filter: none;
    }
    & .mud-main-content .page-header > .mud-stack > div:not(:first-child) { min-width: 0; }
    & .mud-main-content .page-header .mud-typography-h4,
    & .mud-main-content .page-header .mud-typography-h5 {
        font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }
    & .mud-main-content .page-header .mud-typography-body2 {
        color: var(--text-muted);
        margin-top: 2px;
        max-width: 72ch;
    }

    /* ═════════════════════ CARD / PAPER ═════════════════════
       Stesse card del Budget: raggio 18, bordo azzurro, ombra morbida, fondo
       appena sfumato. Elevation 0/1/2 nelle pagine non contano più: una sola resa. */
    & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.fzb *) {
        border-radius: var(--sa-radius) !important;
        border: 1px solid var(--border-strong);
        transition: box-shadow var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) ease;
    }
    & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.mud-paper .mud-paper):not(.fzb *) {
        background: var(--sa-card-bg) !important;
    }
    /* Riquadri dentro una card: raggio più piccolo, niente ombra. */
    & .mud-main-content .mud-paper .mud-paper:not(.fzb *) {
        border-radius: var(--sa-radius-sm) !important;
        box-shadow: none !important;
    }
    /* Le paper che fanno solo da contenitore di MudTabs/MudTable non raddoppiano il bordo. */
    & .mud-main-content .mud-tabs .mud-tabs-panels > .mud-paper:not(.fzb *) { border: 0; }

    /* ═════════════════════ TAB ═════════════════════ */
    & .mud-main-content .mud-tabs:not(.fzb *) {
        border-radius: var(--sa-radius);
        border: 1px solid var(--border-strong);
        background: var(--surface);
        box-shadow: var(--sa-shadow-1);
    }
    & .mud-main-content .mud-tabs .mud-tabs:not(.fzb *) { box-shadow: none; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tabs-tabbar { border-radius: 0; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab {
        min-height: 48px;
        border-radius: var(--sa-radius-sm) var(--sa-radius-sm) 0 0;
        transition: color var(--sa-dur) ease, background-color var(--sa-dur) ease;
    }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab-slider {
        height: 3px !important;
        border-radius: 3px 3px 0 0;
    }

    /* ═════════════════════ TABELLE ═════════════════════
       Contenitore con scroll orizzontale proprio (la pagina non scorre mai di
       lato), intestazione chiara in maiuscoletto, righe con hover azzurro. */
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) {
        border-radius: var(--sa-radius) !important;
        border: 1px solid var(--border-strong);
        overflow: hidden;
    }
    /* Tabella libera nella pagina = una card come le altre. */
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.mud-paper *):not(.mud-tabs *):not(.sa-card *):not(.fzb *) {
        box-shadow: var(--sa-shadow-1) !important;
    }
    /* Tabella dentro una card, un tab o una .sa-card: riquadro interno, niente ombra. */
    & .mud-main-content :is(.mud-paper, .mud-tabs-panels, .sa-card) :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) {
        border-radius: var(--sa-radius-sm) !important;
        box-shadow: none !important;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    & .mud-main-content .mud-simple-table:not(.fzb *) thead th {
        background: var(--surface-2);
        color: var(--text-muted);
        font-size: .71rem;
        font-weight: 700;
        letter-spacing: .045em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-strong);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(td, th) {
        padding: var(--sa-3) var(--sa-4);
    }
    & .mud-main-content :is(.mud-table-dense, .mud-simple-table-dense):not(.fzb *) :is(td, th) {
        padding: var(--sa-2) var(--sa-3);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) tbody tr {
        transition: background-color .15s ease;
    }
    & .mud-main-content .mud-simple-table.mud-table-hover:not(.fzb *) tbody tr:hover {
        background-color: var(--accent-tint);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-pagination {
        border-top: 1px solid var(--border);
        background: var(--surface-2);
    }

    /* ═════════════════════ LISTE PERSONALIZZATE ═════════════════════
       Barra tenant (.tt), griglia tenant (.tl), ticket (.sl, .st), richieste (.rl),
       Comunicazioni (.comm-*): definite in superadmin-lists.css e nei <style> delle
       pagine con raggio 12 e ombra piatta; qui prendono la stessa forma delle card. */
    & .mud-main-content :is(.tt, .tl, .sl, .rl, .comm-tabs) {
        border-radius: var(--sa-radius);
        border-color: var(--border-strong);
        background: var(--sa-card-bg);
        box-shadow: var(--sa-shadow-1);
    }
    & .mud-main-content .comm-card {
        border-radius: var(--sa-radius-sm);
        border-color: var(--border);
        background: var(--surface);
    }
    & .mud-main-content .comm-tabs .mud-tabs-panels { background: var(--surface-2); }
    & .mud-main-content :is(.tl__row, .sl__row, .rl__row) {
        transition: background-color .15s ease;
    }

    /* ═════════════════════ CHIP DI STATO ═════════════════════ */
    & .mud-main-content .mud-chip:not(.fzb *) {
        border-radius: var(--sa-radius-pill);
        font-weight: 600;
        letter-spacing: .01em;
    }
    & .mud-main-content .mud-chip.mud-chip-size-small:not(.fzb *) {
        height: 26px;
        font-size: .76rem;
        padding: 0 10px;
    }
    & .mud-main-content .mud-chip.mud-chip-text:not(.fzb *) {
        border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    }

    /* ═════════════════════ PULSANTI E CAMPI ═════════════════════ */
    & .mud-button-root:not(.mud-icon-button) {
        border-radius: var(--sa-radius-sm) !important;
    }
    & .mud-main-content .mud-button-filled:not(.fzb *) {
        box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent);
    }
    & .mud-main-content .mud-button-filled:not(.fzb *):hover {
        box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent);
    }
    & .mud-main-content .mud-input.mud-input-outlined:not(.fzb *) {
        background: #FFFFFF;
        border-radius: var(--sa-radius-sm);
    }
    & .mud-main-content .mud-input-outlined-border:not(.fzb *) {
        border-color: var(--border-strong);
    }

    /* ═════════════════════ PANNELLI, AVVISI, LISTE ═════════════════════ */
    & .mud-main-content .mud-expand-panel:not(.fzb *) {
        border-radius: var(--sa-radius-sm) !important;
        margin-bottom: var(--sa-2);
        overflow: hidden;
        transition: box-shadow var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) ease;
    }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded:not(.fzb *) {
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
        box-shadow: var(--sa-shadow-1);
    }
    & .mud-main-content .mud-expansion-panels:not(.fzb *) {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }
    & .mud-main-content .mud-alert:not(.fzb *) {
        border-radius: var(--sa-radius-sm) !important;
    }
    & .mud-main-content .mud-list-item:not(.fzb *) {
        border-radius: var(--sa-radius-sm);
        transition: background-color .15s ease;
    }

    /* Dialog: stessi angoli del Budget. */
    & .mud-dialog {
        border-radius: 20px !important;
        border: 1px solid var(--border-strong);
        box-shadow: 0 40px 80px -24px rgba(15, 23, 42, .45) !important;
    }

    /* ═════════════════════ UTILITY (al posto degli stili inline) ═════════════════════ */
    /* riquadro interno tenue (era background:#f5f5f5 in GDPR) */
    & .sa-inset {
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--sa-radius-sm) !important;
        box-shadow: none !important;
    }
    & .sa-grow { flex: 1 1 auto; min-width: 0; }
    & .sa-strong { font-weight: 600 !important; }
    & .sa-title { font-weight: 700 !important; }
    & .sa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
    & .sa-icon-inline { vertical-align: middle; }
    & .sa-num { text-align: right !important; font-variant-numeric: tabular-nums; }
    /* Campi di ricerca/filtro: larghezza comoda su desktop, tutta la riga su telefono. */
    & .sa-field { width: 100%; max-width: 100%; }
    & .sa-field--sm { width: 100%; max-width: 100%; }
    & .sa-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    @media (min-width: 37.5em) {
        & .sa-field { width: auto; min-width: 260px; max-width: 320px; }
        & .sa-field--sm { width: auto; min-width: 140px; max-width: 220px; }
    }

    /* ═════════════════════ TELEFONO E TOUCH ═════════════════════ */
    @media (max-width: 37.5em) {
        & .mud-main-content .page-header > .mud-stack > .mud-icon-root:first-child {
            width: 22px; height: 22px; padding: 9px; border-radius: 12px;
        }
        & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.mud-paper .mud-paper):not(.fzb *) {
            border-radius: 16px !important;
        }
        /* Niente larghezze minime fisse nei campi: su 320px facevano scorrere la pagina. */
        & .mud-main-content .mud-input-control:not(.fzb *) { min-width: 0 !important; max-width: 100% !important; }
    }
    @media (pointer: coarse) {
        & .mud-main-content .mud-button-root:not(.fzb *) { min-height: 44px; }
        & .mud-main-content .mud-icon-button:not(.fzb *) { min-width: 44px; min-height: 44px; }
        & .mud-main-content .mud-chip:not(.fzb *) { min-height: 32px; }
    }

    /* Hover solo con il mouse: la card "si solleva" appena. */
    @media (hover: hover) and (pointer: fine) {
        & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.mud-paper .mud-paper):not(.mud-tabs *):not(.fzb *):hover {
            border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        & .mud-main-content :is(.mud-paper, .mud-card, .mud-tab, .mud-expand-panel, .mud-list-item, tr, .sa-kpi) {
            transition: none !important;
        }
        & .mud-main-content .sa-kpi:hover { transform: none !important; }
    }
}