/* ==== css/superadmin-3d.css ==== */
/* ============================================================================
   Area SuperAdmin — regole di struttura rimaste (2026-10-08)

   Questo foglio ospitava la scena 3D di sfondo dell'area admin (aurora, raggi, griglia
   in prospettiva, pulviscolo, tilt delle card, ingresso dal fondo): ELIMINATA su richiesta
   del titolare, che vuole uno sfondo a tinta unita uguale per admin e clienti, senza righe.
   Eliminato anche js/superadmin-3d.js. Restano solo le regole ancora utili: tab fisse sotto
   la barra in alto e pannelli a fisarmonica, sulle superfici del design system.

   Le variabili --mud-palette-* le inietta MudThemeProvider su :root (0,1,0):
   html[data-vertical="superadmin"] (0,1,1) vince senza !important.
   Il modulo Budget (.fzb) ha un design system proprio e resta escluso.
   ============================================================================ */
html[data-vertical="superadmin"] {
    --mud-palette-background: var(--canvas);
    --mud-palette-surface: var(--surface);
    --mud-palette-background-gray: var(--surface-2);
    --mud-palette-lines-default: var(--border);
    --mud-palette-table-lines: var(--border);
    --mud-palette-table-striped: var(--surface-2);
    --mud-palette-table-hover: var(--accent-tint);
    --mud-palette-divider: var(--border);

    /* Barra dei tab: un tono sotto la card, così si legge come intestazione.
       (In MudBlazor 7 la barra è .mud-tabs-tabbar; .mud-tabs-toolbar non esiste più.) */
    & .mud-main-content .mud-tabs-tabbar:not(.fzb *) {
        background: var(--surface-2);
        border-bottom: 1px solid var(--border-strong);
    }
    & .mud-main-content .mud-tabs:not(.fzb *) {
        border-radius: var(--r-md);
    }

    /* Tab "fisse": scorrendo un pannello lungo la barra dei tab resta agganciata
       sotto l'AppBar invece di uscire dallo schermo. MudBlazor mette overflow:hidden
       su .mud-tabs-rounded, che annullerebbe lo sticky: overflow:clip taglia gli
       angoli allo stesso modo ma non crea un contenitore di scroll.
       Solo il livello più esterno: tab annidate restano normali. */
    & .mud-main-content .mud-tabs:not(.mud-tabs .mud-tabs):not(.fzb *) {
        overflow: clip;
    }
    & .mud-main-content .mud-tabs:not(.mud-tabs .mud-tabs):not(.fzb *) > .mud-tabs-tabbar {
        position: sticky;
        top: var(--zcd-appbar-h, 64px);
        z-index: 5;                  /* sotto drawer (1100+) e AppBar (1300) */
        box-shadow: var(--zd-shadow-1);
    }
    & .mud-main-content .mud-tab.mud-tab-active:not(.fzb *) {
        color: var(--accent-darker) !important;
        background: var(--zd-surface);
    }

    /* Pannelli a fisarmonica (documentazione, panoramica funzionalità). */
    & .mud-main-content .mud-expand-panel:not(.fzb *) {
        background: var(--surface);
        border: 1px solid var(--border);
    }
    & .mud-main-content .mud-expand-panel .mud-expand-panel-header:not(.fzb *) {
        background: var(--surface-2);
    }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header:not(.fzb *) {
        background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    }

    /* Paper dentro paper (es. riquadri statistiche del Backup dentro un tab):
       un tono più azzurro per staccarli dal contenitore senza bordi colorati. */
    & .mud-main-content .mud-paper .mud-paper.mud-paper-outlined:not(.fzb *) {
        background: var(--surface-2) !important;
        border-color: var(--border-strong);
    }

    /* Telefono: tab compatti e scorrevoli, pannelli con padding ridotto. */
    @media (max-width: 37.5em) {
        & .mud-main-content .mud-tab:not(.fzb *) {
            min-width: 0;
            padding-inline: 12px;
            min-height: 44px;            /* tap target */
        }
        & .mud-main-content .mud-expand-panel .mud-expand-panel-content:not(.fzb *) {
            padding-inline: 10px;
        }
        & .mud-main-content .mud-tabs-panels > .pa-4:not(.fzb *) {
            padding: 12px !important;
        }
    }
}

/* ==== css/superadmin.css ==== */
/* ============================================================================
   SuperAdmin — contenuti del pannello (restyling 2026-10-08, design system condiviso)

   Richiesta del titolare: sfondo semplice a tinta unita (lo stesso delle aree clienti),
   niente righe/aloni/sfumature, stile dei grandi gestionali, animazioni discrete.

   Tutti i valori vengono da design-tokens.css (--zd-*): qui NON si scrivono colori
   a mano, salvo i pochi colori "di identità" dichiarati come tali (verticali, canali).
   - superfici: card bianche (--zd-surface) su canvas a tinta unita (--zd-canvas),
     bordo sottile --zd-border, ombra --zd-shadow-1 / -2;
   - intestazioni di tabella e riquadri interni: --zd-surface-2;
   - stati: --zd-success / warning / danger / info e i rispettivi -soft;
   - marchio --zd-brand per azioni e selezioni; nessun gradiente nei contenuti.

   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).

   Gli alias --sa-* restano perché le pagine e superadmin-lists.css li usano: ora
   puntano ai token condivisi.
   ============================================================================ */

@keyframes sa-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* :root in più nel selettore = la stessa specificità delle regole di superadmin-3d.css
   (html[...]:not(.sa3d-off)): a parità vince questo foglio, caricato dopo. Così i contenuti
   restano piatti e a tinta unita anche finché la scena 3D esiste ancora. */
html:root[data-vertical="superadmin"] {
    /* ── Alias verso il design system ── */
    --sa-1: var(--zd-space-1);
    --sa-2: var(--zd-space-2);
    --sa-3: var(--zd-space-3);
    --sa-4: var(--zd-space-4);
    --sa-5: var(--zd-space-5);
    --sa-6: var(--zd-space-6);
    --sa-radius: var(--zd-radius);          /* card, tabelle, pannelli */
    --sa-radius-sm: var(--zd-radius-sm);    /* campi, pulsanti, riquadri interni */
    --sa-radius-pill: var(--zd-radius-pill);
    --sa-shadow-1: var(--zd-shadow-1);
    --sa-shadow-2: var(--zd-shadow-2);
    --sa-card-bg: var(--zd-surface);        /* tinta unita: niente più sfumatura */
    --sa-ease: var(--zd-ease);
    --sa-dur: var(--zd-dur);

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

    /* ═════════════════════ INTESTAZIONE PAGINA ═════════════════════
       Struttura comune: MudPaper.page-header > div.d-flex.flex-row (MudStack Row in MudBlazor 7:
       NON esiste .mud-stack) > [MudIcon] [testi] [azioni]. Sull'icona si posa la mascotte Zed
       (mascot-follow.js ne misura la posizione): niente tessere o sfondi sotto, si vedrebbero ai lati.
       Le azioni della pagina stanno nella fascia .sa-actions subito sotto (superadmin-lists.css). */
    & .mud-main-content .page-header {
        padding: var(--zd-space-1) 0 var(--zd-space-5) !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    & .mud-main-content .page-header::before { display: none; }
    & .mud-main-content .page-header .mud-icon-root { color: var(--zd-brand); }
    & .mud-main-content .page-header :is(.mud-typography-h4, .mud-typography-h5) {
        font-size: clamp(1.25rem, 1.1rem + .6vw, var(--zd-h1));
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.25;
        color: var(--zd-text);
        text-shadow: none;
    }
    & .mud-main-content .page-header .mud-typography-body2 {
        color: var(--zd-text-3);
        font-size: var(--zd-font-size);
        margin-top: 2px;
        max-width: 72ch;
    }

    /* ═════════════════════ CARD / PAPER ═════════════════════
       Una sola resa per ogni MudPaper/MudCard dei contenuti: bianca, bordo sottile, ombra
       leggera. Elevation 0/1/2 nelle pagine non contano più. */
    & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.fzb *) {
        border-radius: var(--zd-radius) !important;
        border: 1px solid var(--zd-border);
        transition: box-shadow var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease);
    }
    & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.mud-paper .mud-paper):not(.fzb *) {
        background: var(--zd-surface) !important;
        box-shadow: var(--zd-shadow-1) !important;
    }
    /* Riquadri dentro una card: raggio più piccolo, niente ombra. */
    & .mud-main-content .mud-paper .mud-paper:not(.fzb *) {
        border-radius: var(--zd-radius-sm) !important;
        box-shadow: none !important;
        background: var(--zd-surface) !important;
    }
    & .mud-main-content .mud-paper .mud-paper.mud-paper-outlined:not(.fzb *) {
        border-color: var(--zd-border) !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; }
    & .mud-main-content .mud-card-header { padding: var(--zd-space-4) var(--zd-space-5) 0; }
    & .mud-main-content .mud-card-content { padding: var(--zd-space-4) var(--zd-space-5); }

    /* Titoli di sezione dentro le card. */
    & .mud-main-content .mud-paper :is(.mud-typography-h6, .mud-typography-subtitle1) { color: var(--zd-text); }

    /* ═════════════════════ TAB ═════════════════════
       Barra delle schede come nei gestionali: testo, sottolineatura del marchio sulla scheda
       attiva, linea di separazione sotto. Il contenitore è una card come le altre. */
    & .mud-main-content .mud-tabs:not(.fzb *) {
        border-radius: var(--zd-radius);
        border: 1px solid var(--zd-border);
        background: var(--zd-surface);
        box-shadow: var(--zd-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: var(--zd-radius) var(--zd-radius) 0 0;
        background: var(--zd-surface) !important;
        border-bottom: 1px solid var(--zd-border);
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    & .mud-main-content .mud-tabs .mud-tabs:not(.fzb *) .mud-tabs-tabbar { border-radius: 0; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tabs-panels { background: transparent; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab {
        min-height: 48px;
        border-radius: 0;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        color: var(--zd-text-2);
        background: transparent !important;
        transition: color var(--zd-dur-fast) var(--zd-ease), background-color var(--zd-dur-fast) var(--zd-ease);
    }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab:hover { color: var(--zd-text); background: var(--zd-surface-hover) !important; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab.mud-tab-active { color: var(--zd-brand); font-weight: 600; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab-slider {
        height: 2px !important;
        border-radius: 2px 2px 0 0;
        background: var(--zd-brand) !important;
    }

    /* ═════════════════════ TABELLE ═════════════════════
       Contenitore con scroll orizzontale proprio (la pagina non scorre mai di lato),
       intestazione grigia chiara in maiuscoletto, righe dense con hover neutro. */
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) {
        border-radius: var(--zd-radius) !important;
        border: 1px solid var(--zd-border);
        background: var(--zd-surface) !important;
        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(--zd-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(--zd-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 :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-head .mud-table-cell,
    & .mud-main-content .mud-simple-table:not(.fzb *) thead th {
        background: var(--zd-surface-2);
        color: var(--zd-text-3);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        line-height: 1.3;
        border-bottom: 1px solid var(--zd-border);
        white-space: nowrap;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(td, th) {
        padding: var(--zd-space-3) var(--zd-space-4);
        border-color: var(--zd-border);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) td {
        color: var(--zd-text);
        font-size: var(--zd-font-size);
    }
    & .mud-main-content :is(.mud-table-dense, .mud-simple-table-dense):not(.fzb *) :is(td, th) {
        padding: var(--zd-space-2) var(--zd-space-3);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) tbody tr {
        transition: background-color var(--zd-dur-fast) var(--zd-ease);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) tbody tr:last-child > td { border-bottom: 0; }
    /* app.css colora a righe alterne TUTTE le tabelle (.mud-table-row:nth-child(even)): nei
       contenuti del pannello le righe sono bianche e separate da una linea; le righe alterne
       restano solo dove la pagina chiede Striped (variabile --mud-palette-table-striped). */
    & .mud-main-content .mud-table-row:nth-child(even):not(.fzb *) { background: transparent; }
    & .mud-main-content :is(.mud-table-hover, .mud-data-grid):not(.fzb *) tbody tr:hover,
    & .mud-main-content .mud-simple-table.mud-table-hover:not(.fzb *) tbody tr:hover {
        background-color: var(--zd-surface-hover) !important;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-pagination {
        border-top: 1px solid var(--zd-border);
        background: var(--zd-surface-2);
        color: var(--zd-text-2);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-toolbar {
        background: var(--zd-surface);
        border-bottom: 1px solid var(--zd-border);
    }

    /* ═════════════════════ LISTE PERSONALIZZATE ═════════════════════
       Barra tenant (.tt), griglia tenant (.tl), ticket (.sl), richieste (.rl),
       Comunicazioni (.comm-*): definite in superadmin-lists.css e più sotto; qui
       prendono la stessa forma delle card. */
    & .mud-main-content :is(.tt, .tl, .sl, .st, .rl, .comm-tabs) {
        border-radius: var(--zd-radius);
        border: 1px solid var(--zd-border);
        background: var(--zd-surface);
        box-shadow: var(--zd-shadow-1);
    }
    & .mud-main-content .comm-card {
        border-radius: var(--zd-radius-sm);
        border-color: var(--zd-border);
        background: var(--zd-surface);
    }
    & .mud-main-content .comm-tabs .mud-tabs-panels { background: var(--zd-surface-2); }
    & .mud-main-content :is(.tl__row, .sl__row, .rl__row) {
        transition: background-color var(--zd-dur-fast) var(--zd-ease);
    }

    /* ═════════════════════ CHIP DI STATO ═════════════════════
       Stile "soft" dei gestionali: fondo tenue del colore di stato, testo pieno, bordo leggero.
       I chip pieni colorati (variante di default di MudBlazor) diventano soft; i chip
       selezionati di un MudChipSet restano pieni, perché lì il pieno È la selezione. */
    & .mud-main-content .mud-chip:not(.fzb *),
    & .mud-dialog .mud-chip {
        border-radius: var(--zd-radius-pill);
        font-weight: 600;
        letter-spacing: .01em;
    }
    & .mud-main-content .mud-chip.mud-chip-size-small:not(.fzb *) {
        height: 24px;
        font-size: .75rem;
        padding: 0 10px;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-chip:is(.mud-chip-filled, .mud-chip-text):not(.mud-chip-selected):not(.fzb *) {
        /* Il colore lo danno le regole per stato qui sotto (variabili), il grigio è il ripiego. */
        color: var(--sa-chip, var(--zd-text-2)) !important;
        background-color: var(--sa-chip-bg, var(--zd-surface-2)) !important;
        border: 1px solid color-mix(in srgb, var(--sa-chip, var(--zd-text-2)) 22%, transparent);
        box-shadow: none;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-chip.mud-chip-color-success { --sa-chip: var(--zd-success); --sa-chip-bg: var(--zd-success-soft); }
    /* Testo ambra più scuro di --zd-warning: #D97706 su fondo giallo tenue resta sotto 4.5:1. */
    & :is(.mud-main-content, .mud-dialog) .mud-chip.mud-chip-color-warning { --sa-chip: var(--zd-warning-ink);         --sa-chip-bg: var(--zd-warning-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-chip.mud-chip-color-error   { --sa-chip: var(--zd-danger);  --sa-chip-bg: var(--zd-danger-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-chip.mud-chip-color-info    { --sa-chip: var(--zd-info);    --sa-chip-bg: var(--zd-info-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-chip:is(.mud-chip-color-primary, .mud-chip-color-secondary, .mud-chip-color-tertiary) {
        --sa-chip: var(--zd-brand); --sa-chip-bg: var(--zd-brand-soft);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-chip:is(.mud-chip-filled, .mud-chip-text) .mud-chip-icon { color: inherit !important; }
    & .mud-main-content .mud-chip.mud-chip-outlined:not(.fzb *) {
        border-color: var(--zd-border-strong);
        color: var(--zd-text-2);
    }

    /* ═════════════════════ PULSANTI E CAMPI ═════════════════════ */
    & :is(.mud-main-content, .mud-dialog) .mud-button-root:not(.mud-icon-button):not(.fzb *) {
        border-radius: var(--zd-radius-sm) !important;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-button-filled:not(.fzb *) {
        box-shadow: var(--zd-shadow-1) !important;
        background-image: none !important;
        transition: background-color var(--zd-dur-fast) var(--zd-ease), box-shadow var(--zd-dur-fast) var(--zd-ease);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-button-filled.mud-button-filled-primary:not(.fzb *) {
        background-color: var(--zd-brand) !important;
        color: var(--zd-text-inverse) !important;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-button-filled.mud-button-filled-primary:not(.fzb *):hover {
        background-color: var(--zd-brand-hover) !important;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-button-filled:not(.fzb *):hover { box-shadow: var(--zd-shadow-2) !important; }
    & :is(.mud-main-content, .mud-dialog) .mud-button-outlined:not(.mud-button-outlined-error):not(.mud-button-outlined-warning):not(.mud-button-outlined-success):not(.fzb *) {
        border-color: var(--zd-border-strong);
        background: var(--zd-surface);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-button-outlined.mud-button-outlined-default:not(.fzb *) { color: var(--zd-text); }
    & :is(.mud-main-content, .mud-dialog) .mud-button-outlined:not(.fzb *):hover { background: var(--zd-surface-hover); }

    & :is(.mud-main-content, .mud-dialog) .mud-input.mud-input-outlined:not(.fzb *) {
        background: var(--zd-surface);
        border-radius: var(--zd-radius-sm);
    }
    /* Etichetta dei campi delineati: deve avere lo stesso fondo del campo, altrimenti
       si vede un riquadretto attorno al testo ("Verticali", "Titolo*"). */
    & :is(.mud-main-content, .mud-dialog) .mud-input-label-outlined:not(.fzb *) { background-color: var(--zd-surface); }
    & :is(.mud-main-content, .mud-dialog) .mud-input-outlined-border:not(.fzb *) {
        border-color: var(--zd-border-strong);
        transition: border-color var(--zd-dur-fast) var(--zd-ease);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border:not(.fzb *) {
        border-color: var(--zd-text-3);
    }

    /* ═════════════════════ PANNELLI, AVVISI, LISTE ═════════════════════ */
    & .mud-main-content .mud-expand-panel:not(.fzb *) {
        border-radius: var(--zd-radius-sm) !important;
        border: 1px solid var(--zd-border);
        background: var(--zd-surface);
        margin-bottom: var(--zd-space-2);
        box-shadow: none;
        overflow: hidden;
        transition: box-shadow var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease);
    }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded:not(.fzb *) {
        border-color: var(--zd-border-strong);
        box-shadow: var(--zd-shadow-1);
    }
    & .mud-main-content .mud-expand-panel .mud-expand-panel-header:not(.fzb *) { background: transparent !important; }
    & .mud-main-content .mud-expand-panel .mud-expand-panel-header:not(.fzb *):hover { background: var(--zd-surface-hover) !important; }
    & .mud-main-content .mud-expansion-panels:not(.fzb *) {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-alert:not(.fzb *) {
        border-radius: var(--zd-radius-sm) !important;
        font-size: var(--zd-font-size);
    }
    /* Avvisi pieni (Variant.Filled): un blocco arancione/rosso a tutta larghezza urla più del
       necessario. Diventano soft: fondo tenue, bordo e icona del colore di stato, testo scuro. */
    & :is(.mud-main-content, .mud-dialog) .mud-alert:is(.mud-alert-filled-warning, .mud-alert-filled-error, .mud-alert-filled-success, .mud-alert-filled-info):not(.fzb *) {
        color: var(--zd-text) !important;
        background-color: var(--sa-alert-bg) !important;
        border: 1px solid color-mix(in srgb, var(--sa-alert) 35%, transparent);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-alert:is(.mud-alert-filled-warning, .mud-alert-filled-error, .mud-alert-filled-success, .mud-alert-filled-info) .mud-alert-icon { color: var(--sa-alert) !important; }
    & :is(.mud-main-content, .mud-dialog) .mud-alert-filled-warning { --sa-alert: var(--zd-warning); --sa-alert-bg: var(--zd-warning-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-alert-filled-error   { --sa-alert: var(--zd-danger);  --sa-alert-bg: var(--zd-danger-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-alert-filled-success { --sa-alert: var(--zd-success); --sa-alert-bg: var(--zd-success-soft); }
    & :is(.mud-main-content, .mud-dialog) .mud-alert-filled-info    { --sa-alert: var(--zd-info);    --sa-alert-bg: var(--zd-info-soft); }
    & .mud-main-content .mud-list-item:not(.fzb *) {
        border-radius: var(--zd-radius-sm);
        transition: background-color var(--zd-dur-fast) var(--zd-ease);
    }
    & .mud-main-content .mud-divider { border-color: var(--zd-border); }
    & .mud-main-content .mud-progress-linear { border-radius: var(--zd-radius-pill); }

    /* ═════════════════════ FINESTRE (MudDialog) ═════════════════════
       Card bianca in primo piano: testata con l'icona in tessera, corpo, piede grigio
       chiaro con i pulsanti a destra. */
    & .mud-dialog {
        border-radius: var(--zd-radius-lg) !important;
        border: 1px solid var(--zd-border);
        background: var(--zd-surface) !important;
        box-shadow: var(--zd-shadow-3) !important;
    }
    /* MudBlazor ancora la X di chiusura alla testata, ma la testata non è "position: relative":
       la X finiva nell'angolo dello SCHERMO, fuori dalla finestra (visto su desktop e telefono). */
    & .mud-dialog .mud-dialog-title {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--zd-space-3);
        min-height: 60px;
        padding: var(--zd-space-4) 56px var(--zd-space-4) var(--zd-space-5) !important;
        background: var(--zd-surface) !important;
        border-bottom: 1px solid var(--zd-border);
    }
    & .mud-dialog .mud-dialog-title .mud-button-close {
        top: 50%;
        right: var(--zd-space-3);
        transform: translateY(-50%);
        color: var(--zd-text-3);
    }
    /* Titoli personalizzati (TitleContent con icona + testo): l'icona diventa una tessera. */
    & .mud-dialog .mud-dialog-title > .mud-typography .mud-icon-root,
    & .mud-dialog .mud-dialog-title > .mud-icon-root {
        box-sizing: content-box;
        padding: 7px;
        border-radius: var(--zd-radius-sm);
        background: var(--zd-brand-soft);
        color: var(--zd-brand);
        vertical-align: middle;
    }
    & .mud-dialog .mud-dialog-title :is(.mud-typography-h6, .mud-typography-h5) {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--zd-text);
        display: flex;
        align-items: center;
        gap: var(--zd-space-2);
        min-width: 0;
    }
    & .mud-dialog .mud-dialog-content {
        padding: var(--zd-space-5) !important;
        overflow-x: hidden;
        color: var(--zd-text);
    }
    & .mud-dialog .mud-dialog-actions {
        background: var(--zd-surface-2) !important;
        border-top: 1px solid var(--zd-border);
        padding: var(--zd-space-3) var(--zd-space-5) !important;
        gap: var(--zd-space-2);
    }
    & .mud-dialog .mud-paper .mud-paper,
    & .mud-dialog .mud-dialog-content .mud-paper { border-radius: var(--zd-radius-sm) !important; box-shadow: none !important; }
    & .mud-dialog .mud-dialog-content .mud-paper-outlined { border-color: var(--zd-border); background: var(--zd-surface-2); }
    /* Dialog in comparsa: leggero rialzo invece dello scatto. */
    & .mud-dialog-container .mud-dialog { animation: sa-rise var(--zd-dur-slow) var(--zd-ease) both; }

    /* Corpo dei dialog: larghezza minima su desktop, mai oltre lo schermo su telefono
       (prima min-width fissi 420-520px tagliavano campi e pulsanti a destra). */
    & .sa-dialog-body { min-width: min(460px, calc(100vw - 88px)); max-width: 100%; }
    & .sa-dialog-body--sm { min-width: min(420px, calc(100vw - 88px)); }
    & .sa-dialog-body--lg { min-width: min(520px, calc(100vw - 88px)); }
    /* Sentinelle invisibili del focus-trap di MudDialog: prendendo il focus mostravano un
       quadratino viola nell'angolo dello schermo (anello di focus globale). */
    & .mud-dialog-container .mud-focus-trap > .fixed.pointer-events-none:focus { outline: none !important; box-shadow: none !important; }

    @media (max-width: 37.5em) {
        & .mud-dialog .mud-dialog-title { min-height: 56px; padding: var(--zd-space-3) 52px var(--zd-space-3) var(--zd-space-4) !important; }
        & .mud-dialog .mud-dialog-content { padding: var(--zd-space-4) !important; }
        & .mud-dialog .mud-dialog-actions { padding: var(--zd-space-3) var(--zd-space-4) !important; }
        /* Righe di campi affiancati (MudStack Row): vanno a capo invece di uscire dalla finestra. */
        & .mud-dialog .mud-dialog-content .d-flex.flex-row { flex-wrap: wrap; }
        & .mud-dialog .mud-dialog-content .d-flex.flex-row > .mud-input-control { flex: 1 1 100%; }
        & .mud-dialog .mud-dialog-actions .mud-button-root { min-height: 44px; }
    }

    /* ═════════════════════ KPI ═════════════════════
       Riquadri numerici delle pagine (Dashboard entrate, cruscotto Sicurezza, Sistema,
       Calendario, Backup): stessa forma ovunque. Etichetta piccola in alto, numero grande
       in cifre tabellari, riga di contesto sotto; l'icona (dove c'è) in tessera tenue. */
    & .sa-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
        gap: var(--zd-space-4);
    }
    & :is(.sa-kpi, .stat-card, .cal-kpi):not(.fzb *) {
        position: relative;
        background: var(--zd-surface) !important;
        border: 1px solid var(--zd-border) !important;
        border-radius: var(--zd-radius) !important;
        box-shadow: var(--zd-shadow-1) !important;
        overflow: hidden;
        height: 100%;
        transition: box-shadow var(--zd-dur) var(--zd-ease), transform var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease);
        animation: sa-rise var(--zd-dur-slow) var(--zd-ease) both;
    }
    /* Comparsa in sequenza, appena percettibile (40ms fra un riquadro e il successivo). */
    & :is(.sa-kpi-grid, .cal-kpis, .mud-grid) > :nth-child(2) :is(.sa-kpi, .stat-card),
    & :is(.sa-kpi-grid, .cal-kpis) > :nth-child(2):is(.sa-kpi, .cal-kpi) { animation-delay: 40ms; }
    & :is(.sa-kpi-grid, .cal-kpis, .mud-grid) > :nth-child(3) :is(.sa-kpi, .stat-card),
    & :is(.sa-kpi-grid, .cal-kpis) > :nth-child(3):is(.sa-kpi, .cal-kpi) { animation-delay: 80ms; }
    & :is(.sa-kpi-grid, .cal-kpis, .mud-grid) > :nth-child(4) :is(.sa-kpi, .stat-card),
    & :is(.sa-kpi-grid, .cal-kpis) > :nth-child(4):is(.sa-kpi, .cal-kpi) { animation-delay: 120ms; }
    & .stat-card::after { display: none !important; }    /* alone "che respira" di app.css */

    & .sa-kpi__body {
        display: flex;
        align-items: flex-start;
        gap: var(--zd-space-4);
        padding: var(--zd-space-5);
    }
    & .sa-kpi__icon {
        width: 40px; height: 40px;
        border-radius: var(--zd-radius-sm);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        background: var(--zd-brand-soft);
        color: var(--zd-brand);
    }
    & .sa-kpi__icon--success { background: var(--zd-success-soft); color: var(--zd-success); }
    & .sa-kpi__icon--primary { background: var(--zd-brand-soft);   color: var(--zd-brand); }
    & .sa-kpi__icon--violet  { background: color-mix(in srgb, #7C3AED 10%, var(--zd-surface)); color: #8B5CF6; } /* identità "entrate dell'anno" */
    & .sa-kpi__icon--sky     { background: var(--zd-info-soft);    color: var(--zd-info); }
    & .sa-kpi__icon--warning { background: var(--zd-warning-soft); color: var(--zd-warning); }
    & .sa-kpi__icon--danger  { background: var(--zd-danger-soft);  color: var(--zd-danger); }
    & .sa-kpi__icon--neutral { background: var(--zd-surface-2);    color: var(--zd-text-3); }
    & .sa-kpi__label {
        font-size: var(--zd-font-size-sm);
        font-weight: 500;
        color: var(--zd-text-2);
        margin-bottom: var(--zd-space-1);
        line-height: 1.3;
    }
    & .sa-kpi__value {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--zd-text);
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
    }
    & .sa-kpi__value--danger  { color: var(--zd-danger); }
    & .sa-kpi__value--warning { color: var(--zd-warning-ink); }
    & .sa-kpi__sub {
        font-size: .75rem;
        color: var(--zd-text-3);
        margin-top: 6px;
    }
    & .sa-kpi__trend {
        font-size: .75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-top: 6px;
        padding: 1px 8px 1px 6px;
        border-radius: var(--zd-radius-pill);
    }
    & .sa-kpi__trend--up { color: var(--zd-success); background: var(--zd-success-soft); }
    /* KPI cliccabile (cruscotto Sicurezza: filtra l'elenco): è un <button>. */
    & button.sa-kpi {
        width: 100%;
        font: inherit;
        text-align: left;
        cursor: pointer;
        color: inherit;
        padding: 0;
    }
    & button.sa-kpi:focus-visible { outline: 2px solid var(--zd-brand); outline-offset: 2px; }
    & button.sa-kpi.is-active { border-color: var(--zd-brand) !important; box-shadow: 0 0 0 3px var(--zd-brand-ring) !important; }

    /* .stat-card (Sistema, database tenant) e .cal-kpi (Calendario) nella stessa forma. */
    & .stat-card { padding: var(--zd-space-4) var(--zd-space-5) !important; }
    & .stat-card .mud-typography-overline {
        display: block;
        font-size: var(--zd-font-size-sm);
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.3;
        color: var(--zd-text-2);
    }
    & .stat-card .mud-typography-h4 {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.2;
        margin-top: var(--zd-space-1);
        font-variant-numeric: tabular-nums;
    }
    & .stat-card .mud-typography-h4:not(.mud-error-text) { color: var(--zd-text) !important; }
    & .stat-card .mud-icon-root { transition: none; }
    & .stat-card:hover .mud-icon-root { transform: none; }

    & .cal-kpis { gap: var(--zd-space-4); }
    & .cal-kpi {
        --sa-kpi-dot: var(--zd-brand);
        border-left-width: 1px !important;
        padding: var(--zd-space-4) var(--zd-space-5);
        gap: var(--zd-space-1);
    }
    & .cal-kpi--money  { --sa-kpi-dot: var(--zd-success); }
    & .cal-kpi--trial  { --sa-kpi-dot: var(--zd-warning); }
    & .cal-kpi--danger { --sa-kpi-dot: var(--zd-danger); }
    & .cal-kpi__label {
        display: inline-flex;
        align-items: center;
        gap: var(--zd-space-2);
        font-size: var(--zd-font-size-sm);
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--zd-text-2);
    }
    & .cal-kpi__label::before {
        content: "";
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--sa-kpi-dot);
        flex: none;
    }
    & .cal-kpi__value {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--zd-text);
        font-variant-numeric: tabular-nums;
    }

    @media (hover: hover) and (pointer: fine) {
        & :is(.sa-kpi, .stat-card, .cal-kpi):not(.fzb *):hover {
            transform: translateY(-1px);
            border-color: var(--zd-border-strong) !important;
            box-shadow: var(--zd-shadow-2) !important;
        }
    }

    /* KPI su telefono: due per riga, icona sopra l'etichetta, numero più compatto. */
    @media (max-width: 599.98px) {
        & .sa-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zd-space-3); }
        & .sa-kpi__body {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--zd-space-2);
            padding: var(--zd-space-3) var(--zd-space-3) var(--zd-space-4);
        }
        & .sa-kpi__icon { width: 32px; height: 32px; }
        & .sa-kpi__icon .mud-icon-root { font-size: 1.1rem !important; }
        & .sa-kpi__label { font-size: .75rem; }
        & :is(.sa-kpi__value, .cal-kpi__value, .stat-card .mud-typography-h4) { font-size: 1.3rem; }
        & :is(.sa-kpi__sub, .sa-kpi__trend) { font-size: .68rem; margin-top: 4px; line-height: 1.3; }
        & .stat-card { padding: var(--zd-space-3) !important; }
        & .cal-kpi { padding: var(--zd-space-3); }
        & .cal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zd-space-3); }
    }

    /* ═════════════════════ STATO VUOTO ═════════════════════
       .sa-empty: icona in tessera tonda, titolo, testo, eventuale azione. Lo stesso aspetto
       hanno gli stati vuoti già presenti nelle liste (.rl__empty, .comm-empty). */
    & :is(.sa-empty, .rl__empty, .comm-empty) {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--zd-space-2);
        padding: var(--zd-space-6) var(--zd-space-4);
        color: var(--zd-text-3);
        font-size: var(--zd-font-size);
    }
    & :is(.sa-empty, .rl__empty, .comm-empty) > .mud-icon-root:first-child {
        box-sizing: content-box;
        width: 28px !important;
        height: 28px !important;
        font-size: 28px !important;
        padding: 14px;
        border-radius: 50%;
        background: var(--zd-surface-2);
        border: 1px solid var(--zd-border);
        color: var(--zd-text-3) !important;
        opacity: 1 !important;
        margin-bottom: var(--zd-space-1);
    }
    & .sa-empty__title { font-weight: 600; color: var(--zd-text); font-size: .95rem; }
    & .sa-empty__text { max-width: 46ch; color: var(--zd-text-3); }

    /* ═════════════════════ PANNELLI INTERNI ═════════════════════
       Backup, Console SQL, Posta, Telegram: riquadri scorrevoli e aree di codice. */
    & .sa-scroll-box { max-height: 600px; overflow: auto; overscroll-behavior: contain; }
    & .sa-scroll-box--sm { max-height: 520px; }
    & .sa-scroll-fill { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    & .sa-chat-pane { height: 65vh; display: flex; flex-direction: column; min-height: 320px; }
    & .sa-code-box {
        background: var(--zd-surface-2) !important;
        border: 1px solid var(--zd-border) !important;
        overflow-x: auto;
    }
    & .sa-boxed { border: 1px solid var(--zd-border); border-radius: var(--zd-radius-sm); }
    @media (max-width: 37.5em) {
        & .sa-scroll-box { max-height: 70vh; }
        & .sa-chat-pane { height: 70vh; }
    }

    /* ═════════════════════ UTILITY (al posto degli stili inline) ═════════════════════ */
    /* riquadro interno tenue (era background:#f5f5f5 in GDPR) */
    & .sa-inset {
        background: var(--zd-surface-2) !important;
        border: 1px solid var(--zd-border) !important;
        border-radius: var(--zd-radius-sm) !important;
        box-shadow: none !important;
    }
    & .sa-grow { flex: 1 1 auto; min-width: 0; }
    & .sa-min0 { min-width: 0; }
    & .sa-self-start { align-self: flex-start; }
    & .sa-strong { font-weight: 600 !important; }
    & .sa-title { font-weight: 700 !important; }
    & .sa-regular { font-weight: 400 !important; }
    & .sa-right { text-align: right !important; }
    & .sa-num { text-align: right !important; font-variant-numeric: tabular-nums; }
    & .sa-nowrap { white-space: nowrap; }
    & .sa-break { overflow-wrap: anywhere; word-break: break-word; }
    & .sa-break-all { word-break: break-all; }
    & .sa-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .sa-pre-wrap { white-space: pre-wrap; font-family: inherit; }
    & .sa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
    & .sa-mono.sa-pre-wrap { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    & .sa-small { font-size: .85rem; }
    & .sa-xsmall { font-size: .75rem; }
    & .sa-icon-inline { vertical-align: middle; }
    & .sa-minw-150 { min-width: 150px; }
    & .sa-minw-180 { min-width: 180px; }
    & .sa-minw-200 { min-width: 200px; }
    & .sa-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    & .sa-row { display: flex; align-items: center; gap: var(--zd-space-2); }
    & .sa-row--between { justify-content: space-between; }
    & .sa-row--wrap { flex-wrap: wrap; }
    & .sa-col-tight { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    /* Larghezza di lettura dei moduli lunghi (dati fiscali, impostazioni). */
    & .sa-measure { max-width: 860px; }
    & .sa-measure--md { max-width: 760px; }
    & .sa-measure--sm { max-width: 640px; }
    /* Nota sotto un campo che deve stare attaccata al campo (annulla parte dello spazio del gruppo). */
    & .sa-helper-tight { margin-top: -12px; }
    /* Avviso tenue (es. password temporanea da copiare). */
    & .sa-warn-box {
        background: var(--zd-warning-soft) !important;
        border-color: color-mix(in srgb, var(--zd-warning) 35%, var(--zd-border)) !important;
    }
    /* Campi di ricerca/filtro: su telefono tutta la riga; da 600px larghezza comoda e limitata.
       xs ≈ anno/numero, sm ≈ select corta, base ≈ ricerca, lg ≈ campo descrittivo. */
    & :is(.sa-field, .sa-field--xs, .sa-field--sm, .sa-field--lg) { width: 100%; max-width: 100%; }

    @media (min-width: 37.5em) {
        & .sa-field { min-width: min(260px, 100%); max-width: 320px; }
        & .sa-field--xs { max-width: 180px; }
        & .sa-field--sm { min-width: min(140px, 100%); max-width: 230px; }
        & .sa-field--lg { max-width: 520px; }
    }
    @media (max-width: 37.5em) {
        & :is(.sa-minw-150, .sa-minw-180, .sa-minw-200) { min-width: 0; }
    }

    /* ═════════════════════ TELEFONO E TOUCH ═════════════════════ */
    @media (max-width: 37.5em) {
        /* 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) {
        /* Interruttori, caselle di spunta e scelte usano internamente .mud-button-root/.mud-icon-button:
           ingrandirli a 44px staccava il pallino dello switch dalla sua barra (visto su telefono il
           2026-10-08). Il loro bersaglio di tocco lo gestisce già MudBlazor, qui si escludono. */
        & .mud-main-content .mud-button-root:not(.fzb *):not(:is(.mud-switch, .mud-checkbox, .mud-radio) *) { min-height: 44px; }
        & .mud-main-content .mud-icon-button:not(.fzb *):not(:is(.mud-switch, .mud-checkbox, .mud-radio) *) { min-width: 44px; min-height: 44px; }
        & .mud-main-content .mud-chip:not(.fzb *) { min-height: 32px; }
    }

    /* Hover solo con il mouse: la card prende un bordo appena più deciso. */
    @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(.stat-card):not(.fzb *):hover {
            border-color: var(--zd-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, .stat-card, .cal-kpi),
        & .mud-dialog {
            transition: none !important;
            animation: none !important;
        }
        & .mud-main-content :is(.sa-kpi, .stat-card, .cal-kpi):hover { transform: none !important; }
    }
}

/* Anteprima non autorizzata dal titolare: lucchetto ambrato tenue (non un'azione rotta, uno stato). */
html[data-vertical="superadmin"] .sa-preview-locked { opacity: .75; }
html[data-vertical="superadmin"] .sa-preview-locked:hover { opacity: 1; }

/* Intestazioni di pagina su telefono: titolo, descrizione e pulsanti stavano su una riga sola e il
   pulsante finale usciva dallo schermo ("Aggiorn…", pagina Sicurezza, 2026-10-08). Sotto i 600px si va
   a capo: testo a tutta larghezza, pulsanti sotto, allineati a destra. */
@media (max-width: 600px) {
    /* MudStack Row di MudBlazor 7 = div.d-flex.flex-row (non esiste .mud-stack-row). */
    html[data-vertical="superadmin"] .page-header > .d-flex.flex-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    html[data-vertical="superadmin"] .page-header > .d-flex.flex-row > :is(.sa-grow, div:not(.zcd-mascot)) {
        flex: 1 1 200px;
        min-width: 0;
    }
    html[data-vertical="superadmin"] .page-header > .d-flex.flex-row > .mud-button-root {
        margin-left: auto;
    }
}

/* ============================================================================
   Stili delle singole pagine admin (spostati qui dai <style> nelle pagine, 2026-10-08).
   Prima vivevano dentro i .razor: un blocco per pagina, ripetuto a ogni render e
   fuori da qualsiasi ambito. Ora sono chiusi sotto html[data-vertical="superadmin"].
   Forma dei contenitori (.tl, .sl, .rl: raggio, bordo, fondo) la danno le regole
   "LISTE PERSONALIZZATE" più sopra: qui solo griglie e contenuti.
   ============================================================================ */
html[data-vertical="superadmin"] {
    /* ───────── SuperAdminPage (spostato dal <style> della pagina) ───────── */

    & .db-name{
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 0.82rem;
        background: var(--zd-surface-2);
        border: 1px solid var(--zd-border);
        border-radius: 6px;
        padding: 2px 8px;
        white-space: nowrap;
    }

    /* ── Elenco tenant ──────────────────────────────────────────────────────────
       Una CSS grid per riga, con le stesse colonne dell'intestazione. Tre assetti:
         da 1200px  una riga sola, intestazione visibile;
         600-1199  due righe: identità + stato + azioni sopra, i tre dati sotto;
         sotto 600 scheda impilata, un dato per riga con la sua etichetta.
       min-width:0 sulle celle è ciò che permette l'ellissi: senza, un'email lunga
       allargherebbe la colonna e spingerebbe fuori le azioni. */
    & .tl{
        --tl-cols: minmax(200px, 1.4fr) minmax(190px, 1.3fr) minmax(190px, 1.2fr) 100px 120px 116px;
        overflow: hidden;
    }

    & .tl__head,
    & .tl__row{
        display: grid;
        grid-template-columns: var(--tl-cols);
        column-gap: 16px;
        align-items: center;
        padding: 10px 14px;
    }

    & .tl__head{
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--zd-text-3);
        background: var(--zd-surface-2);
        border-bottom: 1px solid var(--zd-border);
    }
    & .tl__head-actions{ text-align: right; }

    & .tl__row{
        border-bottom: 1px solid var(--zd-border);
        transition: background-color .15s ease;
    }
    & .tl__row:last-child{ border-bottom: 0; }
    & .tl__row:hover{ background: var(--zd-surface-hover); }
    & .tl__row.is-open{ background: var(--zd-surface-hover); }
    & .tl__row.is-off .tl__name{ opacity: .6; text-decoration: line-through; }

    & .tl__cell{
        min-width: 0;
        font-size: 0.82rem;
        line-height: 1.35;
    }
    & .tl__cell > div,
    & .tl__name,
    & .tl__sub .tl__mono{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .tl__tenant{ display: flex; align-items: center; gap: 4px; }
    & .tl__toggle{ flex: 0 0 auto; margin-left: -6px; }
    & .tl__tenant-text{ min-width: 0; }
    & .tl__name{ font-weight: 600; font-size: 0.9rem; }
    & .tl__sub{ display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }

    & .tl__strong{ font-weight: 600; }
    & .tl__muted{ color: var(--zd-text-3); font-size: 0.75rem; }
    & .tl__mono{ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.76rem; }

    & .tl__badge{
        flex: 0 0 auto;
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.6;
        color: #fff;
        white-space: nowrap;
    }

    & .tl__chip{ height: 22px !important; font-size: 0.72rem !important; margin-bottom: 2px !important; }
    & .tl__plan{
        display: inline-block;
        padding: 0 6px;
        margin-right: 4px;
        border-radius: 6px;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    & .tl__state .mud-switch{ margin: 0; }
    & .tl__state .mud-typography{ font-size: 0.8rem; }

    & .tl__actions{ display: flex; justify-content: flex-end; align-items: center; gap: 0; }

    /* Dettaglio: database, schema e connection string, a tutta larghezza sotto la riga. */
    & .tl__detail{
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--zd-surface-2);
        border: 1px dashed var(--zd-border);
    }
    & .tl__detail-item{
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 10px;
    }
    & .tl__detail-label{
        flex: 0 0 160px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--zd-text-3);
    }
    & .tl__cs{
        flex: 1 1 260px;
        min-width: 0;
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 0.76rem;
        word-break: break-all;
        background: transparent;
    }

    /* Etichette per cella: servono solo quando l'intestazione non c'è. */
    & .tl__cell[data-label]::before{
        content: attr(data-label);
        display: none;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--zd-text-3);
        margin-bottom: 1px;
    }

    /* Tablet e desktop stretto: due righe per tenant. */
    @media (max-width: 1199.98px) {
        & .tl__head{ display: none; }
        & .tl__row{
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-areas:
                "tenant tenant state   actions"
                "owner  owner  sub     created";
            row-gap: 8px;
        }
        & .tl__tenant{ grid-area: tenant; }
        & .tl__state{ grid-area: state; justify-self: end; }
        & .tl__actions{ grid-area: actions; }
        & .tl__row > .tl__cell:nth-child(2){ grid-area: owner; }
        & .tl__row > .tl__cell:nth-child(3){ grid-area: sub; }
        & .tl__row > .tl__cell:nth-child(4){ grid-area: created; }
        & .tl__row > .tl__cell:nth-child(2){ padding-left: 30px; }
        & .tl__cell[data-label]:not(.tl__state)::before{ display: block; }
    }

    /* Telefono: scheda impilata, un dato per riga. */
    @media (max-width: 599.98px) {
        & .tl__row{
            /* Lo stato sta sotto le azioni, accanto alle due righe del nome: è spazio che
               altrimenti resterebbe vuoto. Abbonamento e creazione affiancati. */
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "tenant  actions"
                "tenant  state"
                "owner   owner"
                "sub     created";
            padding: 12px;
            row-gap: 8px;
        }
        & .tl__row > .tl__cell:nth-child(2){ padding-left: 0; }
        & .tl__state{ justify-self: end; align-self: start; }
        & .tl__state::before{ display: none !important; }
        & .tl__row > .tl__cell:nth-child(4){ text-align: right; }
        & .tl__detail-label{ flex-basis: 100%; }
        & .tl__cell > div{ white-space: normal; overflow-wrap: anywhere; }
    }

    /* ───────── SuperAdminSupportPage (spostato dal <style> della pagina) ───────── */

    /* ── Elenco richieste ───────────────────────────────────────────────────────
       Colonne: selezione | richiesta | verticale·priorità·stato | data | freccia.
       Sotto 1100px verticale, priorità e stato scendono su una seconda riga. */
    & .sl{
        --sl-cols: 32px minmax(0, 2fr) minmax(0, 1.4fr) 84px 20px;
        overflow: hidden;
    }
    & .sl__head,
    & .sl__row{
        display: grid;
        grid-template-columns: var(--sl-cols);
        column-gap: 14px;
        align-items: center;
        padding: 8px 14px;
    }
    & .sl__head{
        min-height: 44px;
        background: var(--zd-surface-2);
        border-bottom: 1px solid var(--zd-border);
    }
    & .sl__head-label{
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--zd-text-3);
        white-space: nowrap;
    }
    & .sl__head-date{ grid-column: 4 / span 2; text-align: right; }
    & .sl__bulk{
        grid-column: 2 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    & .sl__bulk-count{ font-weight: 600; font-size: 0.85rem; margin-right: auto; }
    & .sl__bulk-btn{ text-transform: none !important; }

    & .sl__check{ display: flex; align-items: center; justify-content: center; }
    & .sl__check .mud-checkbox{ margin: 0 !important; }
    & .sl__check .mud-button-root{ padding: 4px !important; }

    & .sl__row{
        border-bottom: 1px solid var(--zd-border);
        cursor: pointer;
        transition: background-color .15s ease;
    }
    & .sl__row:last-child{ border-bottom: 0; }
    & .sl__row:hover{ background: var(--zd-surface-hover); }
    & .sl__row:focus-visible{ outline: 2px solid var(--zd-brand); outline-offset: -2px; }
    & .sl__row.is-selected{ background: color-mix(in srgb, var(--zd-brand) 10%, transparent); }
    & .sl__row.is-unread{ box-shadow: inset 3px 0 0 var(--zd-danger); }

    & .sl__main{ min-width: 0; }
    & .sl__subject,
    & .sl__who{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    & .sl__subject{ font-size: 0.9rem; font-weight: 500; }
    & .sl__row.is-unread .sl__subject{ font-weight: 700; }
    & .sl__unread{
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        border-radius: 50%;
        vertical-align: middle;
        background: var(--zd-danger);
    }
    & .sl__who,
    & .sl__muted{ font-size: 0.75rem; color: var(--zd-text-3); }

    & .sl__chips{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
    & .sl__badge{
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.6;
        color: #fff;
        white-space: nowrap;
    }
    & .sl__pill{
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        white-space: nowrap;
        color: var(--sl-c);
        border: 1px solid color-mix(in srgb, var(--sl-c) 55%, transparent);
    }
    /* Stato "pieno": fondo tenue del colore di stato, come i chip soft del resto del pannello. */
    & .sl__pill--filled{
        color: color-mix(in srgb, var(--sl-c) 85%, var(--zd-text));
        background: color-mix(in srgb, var(--sl-c) 12%, var(--zd-surface));
        border-color: color-mix(in srgb, var(--sl-c) 30%, transparent);
    }

    & .sl__date{ text-align: right; font-size: 0.82rem; white-space: nowrap; }
    & .sl__go{ color: var(--zd-text-3); }

    @media (max-width: 1099.98px) {
        & .sl__row{
            grid-template-columns: 32px minmax(0, 1fr) auto 20px;
            grid-template-areas:
                "check main  date go"
                ".     chips chips chips";
            row-gap: 6px;
        }
        & .sl__row > .sl__check{ grid-area: check; }
        & .sl__row > .sl__main{ grid-area: main; }
        & .sl__row > .sl__chips{ grid-area: chips; }
        & .sl__row > .sl__date{ grid-area: date; }
        & .sl__row > .sl__go{ grid-area: go; }
        & .sl__head{ grid-template-columns: 32px minmax(0, 1fr) auto; }
        & .sl__head-chips{ display: none; }
        & .sl__head-date{ grid-column: 3; }
    }
    @media (max-width: 599.98px) {
        & .sl__head, & .sl__row{ padding: 8px 10px; column-gap: 10px; }
        & .sl__row{ grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "check main date" ". chips chips"; }
        & .sl__row > .sl__go{ display: none; }
        & .sl__head{ grid-template-columns: 28px minmax(0, 1fr) auto; }
    }

    /* ── Conversazione ─────────────────────────────────────────────────────────
       Un'unica scheda: intestazione (indietro, oggetto, priorità, stato, elimina),
       messaggi a scorrimento, risposta in fondo. */
    & .st{ overflow: hidden; }
    & .st__head{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--zd-border);
    }
    & .st__title{ flex: 1 1 auto; min-width: 0; }
    & .st__subject{
        font-size: 1.05rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    & .st__meta{ display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
    & .st__meta-text{
        font-size: 0.76rem;
        color: var(--zd-text-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    & .st__controls{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    & .st__controls .mud-input-control{ margin: 0 !important; }
    & .st__select{ width: 160px; }

    & .st__messages{
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 55vh;
        overflow-y: auto;
        padding: 16px 14px;
        background: var(--zd-surface-2);
    }
    & .st__msg{ display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
    & .st__msg.is-admin{ align-self: flex-end; align-items: flex-end; }
    & .st__bubble{
        padding: 10px 12px;
        border-radius: 12px 12px 12px 4px;
        font-size: 0.875rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
    }
    & .st__msg.is-admin .st__bubble{
        border-radius: 12px 12px 4px 12px;
        color: var(--zd-text-inverse);
        background: var(--zd-brand);
        border-color: var(--zd-brand);
    }
    & .st__msg-meta{
        display: flex;
        align-items: center;
        gap: 2px;
        min-height: 26px;
        padding: 0 4px;
        font-size: 0.72rem;
        color: var(--zd-text-3);
    }
    & .st__msg-del{ padding: 3px !important; }

    & .st__reply{
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 12px 14px;
        border-top: 1px solid var(--zd-border);
    }
    & .st__input{ flex: 1 1 auto; min-width: 0; }
    & .st__reply .mud-input-control{ margin: 0 !important; }
    & .st__reply-actions{ flex: 0 0 auto; display: flex; gap: 8px; }
    & .st__btn.mud-button-root{ height: 40px; border-radius: 8px; text-transform: none; font-weight: 600; }

    @media (max-width: 959.98px) {
        & .st__head{ flex-wrap: wrap; row-gap: 14px; }
        & .st__title{ flex-basis: calc(100% - 52px); }
        & .st__controls{ flex: 1 1 100%; }
        & .st__select{ flex: 1 1 0; width: auto; }
        & .st__msg{ max-width: 90%; }
    }
    @media (max-width: 599.98px) {
        & .st__head, & .st__reply{ padding: 10px; }
        & .st__meta-text{ white-space: normal; }
        & .st__reply{ flex-wrap: wrap; }
        & .st__reply-actions{ flex: 1 1 100%; }
        & .st__reply-actions .st__btn{ flex: 1 1 0; }
    }

    /* ───────── SuperAdminRichiestePage (spostato dal <style> della pagina) ───────── */

    /* ── Registrazione pubblica ────────────────────────────────────────────────── */
    & .rs__head{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 14px 0;
    }
    & .rs__title{ font-weight: 600; font-size: 0.9rem; }
    & .rs__mode{
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        color: #fff;
        background: var(--rs-c);
    }
    & .rs__hint{ font-size: 0.78rem; color: var(--zd-text-3); }
    & .rs__bar{ padding-top: 10px; }
    & .rs__mode-field{ flex: 1 1 190px; min-width: 0; }
    & .rs__trial{ flex: 0 1 110px; min-width: 90px; }
    & .rs__email{ flex: 1 1 180px; min-width: 0; }
    & .rs__vpanel{
        margin: 4px 14px 14px;
        padding-top: 10px;
        border-top: 1px solid var(--zd-border);
    }
    & .rs__vhead{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; }
    & .rs__vtitle{ font-weight: 600; font-size: 0.85rem; }
    & .rs__vcount{ font-size: 0.75rem; color: var(--zd-text-3); }
    & .rs__vnote{ font-size: 0.78rem; color: var(--zd-text-3); margin-bottom: 8px; }
    & .rs__vgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
    & .rs__vtile{
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--zd-border);
        border-radius: 8px;
        background: var(--zd-surface);
        color: var(--zd-text-3);
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color .12s ease, background .12s ease;
    }
    & .rs__vtile:hover:not(:disabled){ border-color: var(--zd-brand); }
    & .rs__vtile.is-on{
        border-color: var(--zd-brand);
        background: var(--zd-brand-soft);
        color: var(--zd-text);
    }
    & .rs__vtile:disabled{ cursor: not-allowed; }
    & .rs__vpanel.is-disabled .rs__vgrid{ opacity: .5; }
    & .rs__vname{ display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 0.82rem; font-weight: 600; }
    & .rs__vname > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .rs__vbrand{ font-size: 0.7rem; font-weight: 400; color: var(--zd-text-3); }
    & .rs__veye{ flex: 0 0 auto; opacity: .7; }
    & .rs__vtile.is-on .rs__veye{ color: var(--zd-brand); opacity: 1; }
    & .rs__save.mud-button-root{
        flex: 0 0 auto;
        height: 40px;
        padding: 0 16px;
        border-radius: 8px;
        text-transform: none;
        font-weight: 600;
    }
    & .rs__save .mud-button-label{ gap: 6px; }

    /* ── Elenco richieste ──────────────────────────────────────────────────────
       Colonne: selezione | attività | richiedente | stato | richiesta | azioni.
       Sotto 1200px due righe, sotto 600px scheda impilata. */
    & .rl{
        --rl-cols: 32px minmax(200px, 1.4fr) minmax(170px, 1.2fr) minmax(170px, 1fr) 150px 200px;
        overflow: hidden;
    }
    & .rl__head,
    & .rl__row{
        display: grid;
        grid-template-columns: var(--rl-cols);
        column-gap: 14px;
        align-items: center;
        padding: 8px 14px;
    }
    & .rl__head{
        min-height: 44px;
        background: var(--zd-surface-2);
        border-bottom: 1px solid var(--zd-border);
    }
    & .rl__label{
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--zd-text-3);
    }
    & .rl__label--end{ text-align: right; }
    & .rl__bulk{ grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    & .rl__bulk-count{ font-weight: 600; font-size: 0.85rem; margin-right: auto; }
    & .rl__bulk-btn{ text-transform: none !important; }

    & .rl__check{ display: flex; align-items: center; justify-content: center; }
    & .rl__check .mud-checkbox{ margin: 0 !important; }
    & .rl__check .mud-button-root{ padding: 4px !important; }

    & .rl__row{
        border-bottom: 1px solid var(--zd-border);
        transition: background-color .15s ease;
    }
    & .rl__row:last-of-type{ border-bottom: 0; }
    & .rl__row:hover,
    & .rl__row.is-open{ background: var(--zd-surface-hover); }
    & .rl__row.is-selected{ background: color-mix(in srgb, var(--zd-brand) 10%, transparent); }

    & .rl__cell{ min-width: 0; font-size: 0.82rem; line-height: 1.35; }
    & .rl__cell > div,
    & .rl__name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    & .rl__biz{ display: flex; align-items: center; gap: 4px; }
    & .rl__toggle{ flex: 0 0 auto; margin-left: -6px; }
    & .rl__biz-text{ min-width: 0; }
    & .rl__name{ font-weight: 600; font-size: 0.9rem; }
    & .rl__msg-ico{ font-size: 0.95rem !important; vertical-align: -2px; margin-left: 2px; color: var(--zd-text-3); }
    & .rl__sub{ display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
    & .rl__sub .rl__mono{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    & .rl__strong{ font-weight: 600; }
    & .rl__muted{ color: var(--zd-text-3); font-size: 0.75rem; }
    & .rl__mono{ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.76rem; }

    & .rl__badge{
        flex: 0 0 auto;
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.6;
        color: #fff;
        white-space: nowrap;
    }
    & .rl__pills{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
    & .rl__state > .rl__pills{ white-space: normal; overflow: visible; }
    & .rl__pill{
        display: inline-flex;
        align-items: center;
        gap: 3px;
        height: 22px;
        padding: 0 8px 0 6px;
        border-radius: 999px;
        font-size: 0.71rem;
        font-weight: 600;
        white-space: nowrap;
        color: var(--rl-c);
        border: 1px solid color-mix(in srgb, var(--rl-c) 55%, transparent);
    }
    & .rl__pill .mud-icon-root{ font-size: 0.9rem !important; }
    & .rl__pill--filled{
        color: color-mix(in srgb, var(--rl-c) 85%, var(--zd-text));
        background: color-mix(in srgb, var(--rl-c) 12%, var(--zd-surface));
        border-color: color-mix(in srgb, var(--rl-c) 30%, transparent);
    }

    & .rl__actions{ display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
    & .rl__btn.mud-button-root{ height: 32px; border-radius: 8px; text-transform: none; font-weight: 600; }

    & .rl__detail{
        grid-column: 2 / -1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        background: var(--zd-surface-2);
        border: 1px dashed var(--zd-border);
    }
    & .rl__detail-item{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
    & .rl__detail-label{
        flex: 0 0 120px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--zd-text-3);
    }
    & .rl__detail-text{ flex: 1 1 260px; min-width: 0; font-size: 0.82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
    & .rl__detail-item.is-error .rl__detail-label,
    & .rl__detail-item.is-error .rl__detail-text{ color: var(--zd-danger); }

    & .rl__pager{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 6px 10px;
        border-top: 1px solid var(--zd-border);
    }
    & .rl__empty{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 28px 16px;
    }

    /* Etichette per cella: servono solo quando l'intestazione non c'è. */
    & .rl__cell[data-label]::before{
        content: attr(data-label);
        display: none;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--zd-text-3);
        margin-bottom: 1px;
    }

    @media (max-width: 1199.98px) {
        & .rl__head{ grid-template-columns: 32px minmax(0, 1fr); }
        & .rl__head .rl__label:not(:first-of-type){ display: none; }
        & .rl__row{
            grid-template-columns: 32px repeat(3, minmax(0, 1fr));
            grid-template-areas:
                "check biz   biz   actions"
                ".     who   state date";
            row-gap: 8px;
        }
        & .rl__row > .rl__check{ grid-area: check; }
        & .rl__row > .rl__biz{ grid-area: biz; }
        & .rl__row > .rl__actions{ grid-area: actions; }
        & .rl__row > .rl__cell:nth-child(3){ grid-area: who; }
        & .rl__row > .rl__state{ grid-area: state; }
        & .rl__row > .rl__cell:nth-child(5){ grid-area: date; }
        & .rl__row > .rl__cell:nth-child(3){ padding-left: 30px; }
        & .rl__cell[data-label]::before{ display: block; }
    }
    @media (max-width: 599.98px) {
        & .rs__head{ padding: 10px 10px 0; }
        /* Modalità ed email a tutta riga; giorni di trial e Salva affiancati in fondo. */
        & .rs__mode-field, & .rs__email{ flex-basis: 100%; }
        & .rs__mode-field{ order: 1; }
        & .rs__email{ order: 2; }
        & .rs__trial{ order: 3; flex: 1 1 0; }
        & .rs__save.mud-button-root{ order: 4; flex: 1 1 0; }
        & .rs__vpanel{ margin: 4px 10px 10px; }
        & .rs__vgrid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }

        & .rl__head, & .rl__row{ padding: 8px 10px; column-gap: 10px; }
        & .rl__row{
            grid-template-columns: 28px minmax(0, 1fr) auto;
            grid-template-areas:
                "check biz   biz"
                ".     who   who"
                ".     state date"
                ".     actions actions";
        }
        & .rl__row > .rl__cell:nth-child(3){ padding-left: 0; }
        & .rl__row > .rl__cell:nth-child(5){ text-align: right; }
        & .rl__actions{ justify-content: stretch; }
        & .rl__actions .rl__btn{ flex: 1 1 0; }
        & .rl__detail{ grid-column: 1 / -1; }
        & .rl__cell > div{ white-space: normal; overflow-wrap: anywhere; }
    }

    /* ───────── SuperAdminRevenueDashboardPage (spostato dal <style> della pagina) ───────── */

    /* ── wrapper ── */
    & .sa-dash{ padding-bottom: 32px; }

    & .sa-loading{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 64px 0;
    }

    /* ── content cards ── */
    & .sa-card{
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--sa-shadow-1);
    }
    & .sa-card__header{
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ───────── SuperAdminSecurityPage (spostato dal <style> della pagina) ───────── */

    & .sec-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--zd-border); flex-wrap:wrap; }
    & .sec-row:last-child{ border-bottom:none; }
    & .sec-row__icon{ margin-top:2px; flex:0 0 auto; }
    & .sec-row__body{ flex:1 1 260px; min-width:0; }
    & .sec-row__side{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    & .sec-row--edit{ background:var(--zd-surface-2); align-items:center; }
    & .sec-doc{ overflow-x:auto; line-height:1.55; }
    & .sec-doc table{ border-collapse:collapse; margin:8px 0 16px; font-size:13px; }
    & .sec-doc th, & .sec-doc td{ border:1px solid var(--zd-border); padding:4px 8px; vertical-align:top; }
    & .sec-doc h1{ font-size:1.4rem; margin:0 0 8px; } & .sec-doc h2{ font-size:1.15rem; margin:18px 0 6px; }
    & .sec-pre{ background:var(--zd-surface-2); padding:12px; border-radius:8px; overflow-x:auto; font-size:13px; }
    @media (max-width:600px) { & .sec-row{ padding:10px 12px; } }

    /* ───────── TelegramPanel (spostato dal <style> della pagina) ───────── */

    & .tg-chat{
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    & .tg-chat:hover{ background: var(--zd-surface-hover); }

    & .tg-chat--open{
        background: var(--zd-surface-hover);
        border-color: var(--zd-brand);
    }

    & .tg-chat__row{ display: flex; align-items: center; gap: 8px; }
    & .tg-chat__title{ font-weight: 600; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .tg-chat__meta{ font-size: 0.72rem; color: var(--zd-text-3); display: flex; gap: 4px; }
    & .tg-chat__preview{ font-size: 0.78rem; color: var(--zd-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Le bolle: in uscita a destra, in entrata a sinistra — la lettura è immediata
       senza dover cercare il nome dell'autore. */
    & .tg-msg{ display: flex; margin-bottom: 6px; }
    & .tg-msg--out{ justify-content: flex-end; }

    & .tg-msg__bubble{
        max-width: 78%;
        padding: 6px 10px;
        border-radius: 12px;
        background: var(--zd-surface-2);
        border: 1px solid var(--zd-border);
    }

    & .tg-msg--out .tg-msg__bubble{
        background: var(--zd-brand-soft);
        border-color: var(--zd-brand);
    }

    & .tg-msg__author{ font-size: 0.72rem; font-weight: 700; color: var(--zd-text-3); }

    /* L'immagine sta dentro la bolla e non la allarga: il limite in altezza evita che una
       foto verticale occupi tutta la finestra della conversazione. */
    & .tg-msg__img{
        display: block;
        max-width: 100%;
        max-height: 260px;
        border-radius: 8px;
        cursor: zoom-in;
        margin-bottom: 4px;
    }

    & .tg-msg__media{
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--zd-text-3);
    }

    & .tg-msg__text{ white-space: pre-wrap; overflow-wrap: anywhere; }
    & .tg-msg__time{ font-size: 0.68rem; color: var(--zd-text-3); text-align: right; }
}

/* ============================================================================
   Vetrina dei verticali — SOLO nel pannello (2026-10-08).
   VerticalShowcaseGrid / VerticalSheet sono componenti condivisi con la
   Documentazione dei verticali (vertical-showcase.css): qui, sotto
   html[data-vertical="superadmin"], prendono forma e ombre delle card admin.
   Nei verticali la resa resta quella di vertical-showcase.css.
   I colori del singolo verticale (--vs-accent) restano: sono l'identità della scheda.
   ============================================================================ */
html[data-vertical="superadmin"] {
    & .vs { padding: var(--sa-5) var(--sa-4) var(--sa-6); }
    & .vs__heading { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--zd-text); }
    & .vs__sub { color: var(--zd-text-3); opacity: 1; }
    & .vs__search { min-width: min(14rem, 100%); }
    & .vs__grid { gap: var(--sa-4); }
    & .vs-card {
        border-radius: var(--sa-radius);
        background: var(--zd-surface);
        border-color: var(--zd-border);
        box-shadow: var(--sa-shadow-1);
    }
    & .vs-card__body { padding: var(--sa-4); }

    & .vsd__back {
        min-height: 40px;
        padding: 0 var(--sa-3) 0 var(--sa-2);
        border-radius: var(--sa-radius-pill);
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
        box-shadow: var(--sa-shadow-1);
        text-decoration: none;
    }
    & .vsd__back:hover { text-decoration: none; border-color: color-mix(in srgb, var(--vs-accent, var(--zd-brand)) 45%, var(--zd-border)); }
    & :is(.vsd__card, .vsd__zed) {
        border-radius: var(--sa-radius);
        border-color: var(--zd-border);
        box-shadow: var(--sa-shadow-1);
    }
    & .vsd__card { background: var(--zd-surface); }
    /* Titolo della testata colorata: il colore globale dei titoli (app.css) lo rendeva scuro su fondo scuro. */
    & .vsd__hero .vsd__title { color: #FFFFFF; }
    & .vsd__card p { opacity: 1; color: var(--zd-text-3); }
    & .vsd__toc a { min-height: 32px; display: inline-flex; align-items: center; }

    @media (pointer: coarse) {
        & .vsd__back { min-height: 44px; }
        & .vsd__toc a { min-height: 40px; padding-inline: var(--sa-3); }
    }
    @media (prefers-reduced-motion: reduce) {
        & .vs-card { transition: none; }
        & :is(.vs-card:hover, .vs-card:focus-visible) { transform: none; }
    }
}

/* ============================================================================
   Variabili di MudBlazor nei CONTENUTI del pannello (2026-10-08).
   Righe alterne, hover, linee e grigi di MudTable/MudDivider/MudSwitch leggono queste
   variabili del tema: dentro i contenuti e i dialog le si fa puntare ai token condivisi,
   così una tabella a righe alterne non torna azzurra qualunque sia la palette del tema.
   ============================================================================ */
html[data-vertical="superadmin"] :is(.mud-main-content, .mud-dialog) {
    --mud-palette-table-striped: var(--zd-surface-2);
    --mud-palette-table-hover: var(--zd-surface-hover);
    --mud-palette-table-lines: var(--zd-border);
    --mud-palette-lines-default: var(--zd-border);
    --mud-palette-lines-inputs: var(--zd-border-strong);
    --mud-palette-divider: var(--zd-border);
    --mud-palette-background-gray: var(--zd-surface-2);
}

/* ============================================================================
   Calendario abbonamenti (/superadmin/calendario): griglia mese/settimana.
   Le regole di base stanno in app.css; qui solo le superfici, riportate ai token
   (celle bianche, fine settimana e intestazioni grigio chiaro, oggi in tinta del marchio).
   La tinta delle chip evento (--cal-brand) resta: identifica il verticale.
   ============================================================================ */
html[data-vertical="superadmin"] {
    & :is(.cal-month, .cal-week) {
        background: var(--zd-border);
        border-color: var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--zd-shadow-1) !important;
    }
    & :is(.cal-month__dow, .cal-week__head) {
        background: var(--zd-surface-2);
        color: var(--zd-text-3);
    }
    & :is(.cal-month__cell, .cal-week__col) {
        background: var(--zd-surface);
        transition: background-color var(--zd-dur-fast) var(--zd-ease);
    }
    & :is(.cal-month__cell--weekend) { background: var(--zd-surface-2); }
    & :is(.cal-month__cell--today, .cal-week__col--today) { background: var(--zd-brand-soft); }
    & .cal-today { border-color: var(--zd-brand); color: var(--zd-brand); }
    & .cal-month__count { background: var(--zd-surface-2); color: var(--zd-text-2); }
    & .cal-week__foot { border-color: var(--zd-border); }
    & .cal-week__foot--on { color: var(--zd-success); }
}