/* ============================================================================
   Aree dei CLIENTI — tutti i 24 verticali (2026-10-08)

   Contenuti delle pagine nello stile del design system (design-tokens.css):
   sfondo a tinta unita --zd-canvas, contenuti su card bianche con bordo sottile
   e ombra leggera, testi slate, animazioni brevi spente con prefers-reduced-motion.

   Il colore del settore resta SOLO ACCENTO: lo dà il tema MudBlazor del verticale
   (--mud-palette-primary) e qui si usa per icone di sezione, selezioni, chip,
   barre attive. Mai come sfondo di pagina o di card. Bordi delle card neutri
   anche in hover (richiesta del titolare: niente bordi colorati).

   Ambito: tutto sotto html:not([data-vertical="superadmin"]):not([data-vertical="platform"]).
   Restano fuori il pannello admin (superadmin*.css) e le pagine di accesso
   (platform, shell). Il Budget (.fzb) ha un design system proprio, allineato
   ai token in budget.css: qui è escluso con :not(.fzb *).

   Carica dopo app.css (vedi App.razor): diverse regole di app.css hanno
   !important, per questo alcune qui lo ripetono con specificità maggiore.

   Indice
     1. Token locali e palette MudBlazor allineata ai token
     2. Intestazione di pagina (.page-header)
     3. Card, paper, statistiche
     4. Tabelle (MudTable, MudDataGrid, MudSimpleTable)
     5. Chip di stato, avvisi, liste, tab, pannelli
     6. Campi e filtri
     7. Finestre (MudDialog)
     8. Calendari e agende
     9. Stati vuoti, caricamento
    10. Pagine pubbliche di prenotazione (/{verticale}/p/{slug})
    11. Movimento
    12. Telefono e touch
   ============================================================================ */

html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
    /* ═════════════ 1. TOKEN LOCALI ═════════════ */
    --tn-accent: var(--mud-palette-primary, var(--zd-brand));
    --tn-accent-soft: color-mix(in srgb, var(--tn-accent) 9%, var(--zd-surface));
    --tn-accent-soft-2: color-mix(in srgb, var(--tn-accent) 15%, var(--zd-surface));
    /* accento usato come TESTO: scurito verso lo slate, regge 4.5:1 anche con accenti chiari */
    --tn-accent-ink: color-mix(in srgb, var(--tn-accent) 72%, #0F172A);
    --tn-accent-ring: color-mix(in srgb, var(--tn-accent) 26%, transparent);
    --tn-row-hover: color-mix(in srgb, var(--tn-accent) 4%, var(--zd-surface));

    /* Palette MudBlazor ricondotta ai token: superfici bianche, linee e testi slate,
       uguali in ogni verticale. Il colore primario del verticale NON si tocca.
       (:root del MudThemeProvider ha specificità 0,1,0: qui 0,3,1.) */
    --mud-palette-background: var(--zd-canvas);
    --mud-palette-background-grey: var(--zd-surface-2);
    --mud-palette-surface: var(--zd-surface);
    --mud-palette-lines-default: var(--zd-border);
    --mud-palette-lines-inputs: var(--zd-border-strong);
    --mud-palette-table-lines: var(--zd-border);
    --mud-palette-table-striped: var(--zd-surface-2);
    --mud-palette-table-hover: var(--tn-row-hover);
    --mud-palette-divider: var(--zd-border);
    --mud-palette-divider-light: var(--zd-border);
    --mud-palette-text-primary: var(--zd-text);
    --mud-palette-text-secondary: var(--zd-text-3);
    --mud-default-borderradius: var(--zd-radius-sm);

    /* Titoli messi a fuoco da FocusOnNavigate (tabindex=-1): non sono comandi,
       l'anello di focus attorno al titolo sembrava un errore grafico. */
    & :is(h1, h2, h3, h4, h5, h6, .mud-typography)[tabindex="-1"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* ═════════════ 2. INTESTAZIONE DI PAGINA ═════════════
       MudPaper.page-header > div.d-flex.flex-row (MudStack Row) > [MudIcon] [div testi]
       [MudSpacer] [ricerca/filtri] [pulsanti]. Vive sul canvas, senza card né aloni. */
    & .mud-main-content .page-header {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: var(--zd-space-1) 0 var(--zd-space-5) !important;
        margin-bottom: 0 !important;
    }
    & .mud-main-content .page-header::before { display: none !important; }
    & .mud-main-content .page-header > .d-flex.flex-row {
        flex-wrap: wrap;
        row-gap: var(--zd-space-3);
        column-gap: var(--zd-space-3);
    }
    /* Icona di sezione: accento del verticale, niente ombra colorata. */
    & .mud-main-content .page-header > .d-flex > .mud-icon-root:first-child,
    & .mud-main-content .page-header .mud-icon-root.mud-icon-size-large {
        color: var(--tn-accent) !important;
        filter: none !important;
        flex: none;
    }
    & .mud-main-content .page-header > .d-flex > .mud-icon-root:first-child { margin-right: 0 !important; }
    & .mud-main-content .page-header :is(.mud-typography-h4, .mud-typography-h5) {
        color: var(--zd-text) !important;
        font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem) !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
        line-height: 1.25;
        background: none !important;
        -webkit-text-fill-color: currentColor;
    }
    & .mud-main-content .page-header .mud-typography-body2 {
        color: var(--zd-text-3) !important;
        font-size: var(--zd-font-size-sm);
        margin-top: 2px;
        max-width: 72ch;
    }
    /* Il blocco dei testi prende lo spazio libero e va a capo prima di comprimersi. */
    & .mud-main-content .page-header > .d-flex.flex-row > div:not([class]) {
        flex: 1 1 14rem;
        min-width: 0;
    }

    /* ═════════════ 3. CARD, PAPER, STATISTICHE ═════════════ */
    & .mud-main-content :is(.mud-paper, .mud-card):not(.page-header):not(.fzb *):not(.zed-assist):not(.zed-hero-bar) {
        background: var(--zd-surface) !important;
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius) !important;
        box-shadow: var(--zd-shadow-1) !important;
        transition: box-shadow var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease), transform var(--zd-dur) var(--zd-ease);
    }
    /* Riquadri dentro una card: raggio più piccolo, fondo appena grigio, niente ombra. */
    & .mud-main-content :is(.mud-paper, .mud-card) :is(.mud-paper, .mud-card):not(.fzb *):not(.mud-table):not(.mud-data-grid) {
        border-radius: var(--zd-radius-sm) !important;
        box-shadow: none !important;
    }
    & .mud-main-content .mud-card:hover:not(.fzb *) {
        border-color: var(--zd-border-strong);
        box-shadow: var(--zd-shadow-2) !important;
        transform: none;
    }
    & .mud-main-content .mud-card-header:not(.fzb *) {
        padding: var(--zd-space-4) var(--zd-space-5);
        border-bottom: 1px solid var(--zd-border);
    }
    & .mud-main-content .mud-card-header .mud-typography-h6 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--zd-text);
        letter-spacing: -0.01em;
    }
    & .mud-main-content .mud-card-content:not(.fzb *) { padding: var(--zd-space-5); }
    & .mud-main-content .mud-card-actions:not(.fzb *) {
        padding: var(--zd-space-3) var(--zd-space-5);
        border-top: 1px solid var(--zd-border);
        gap: var(--zd-space-2);
    }
    /* Titoli h6 delle card "paper + titolo" (molto usati nelle impostazioni). */
    & .mud-main-content .mud-paper > .mud-typography-h6:first-child {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    /* Statistiche delle dashboard: etichetta piccola, numero protagonista.
       Niente aloni né icone che fluttuano: un solo sollevamento leggero in hover. */
    & .mud-main-content .stat-card {
        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%;
    }
    & .mud-main-content .stat-card::after { display: none !important; }
    & .mud-main-content .stat-card:hover {
        transform: translateY(-2px);
        border-color: var(--zd-border-strong) !important;
        box-shadow: var(--zd-shadow-2) !important;
    }
    & .mud-main-content .stat-card :is(.mud-card-content, .mud-paper-content) { padding: var(--zd-space-4) var(--zd-space-5); }
    & .mud-main-content .stat-card .mud-typography-overline {
        display: block;
        color: var(--zd-text-3) !important;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .06em;
        line-height: 1.4;
        text-transform: uppercase;
    }
    & .mud-main-content .stat-card :is(.mud-typography-h4, .mud-typography-h5) {
        font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem) !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-top: var(--zd-space-1);
        font-variant-numeric: tabular-nums;
    }
    & .mud-main-content .stat-card :is(.mud-typography-h4, .mud-typography-h5):not(.mud-error-text):not(.mud-success-text):not(.mud-warning-text):not(.mud-info-text):not([style*="color"]) {
        color: var(--zd-text) !important;
    }
    & .mud-main-content .stat-card .mud-icon-root {
        color: var(--tn-accent) !important;
        background: var(--tn-accent-soft) !important;
        border-radius: var(--zd-radius-sm) !important;
        padding: 8px;
        box-sizing: content-box;
        animation: none !important;
        transition: none;
    }
    & .mud-main-content .stat-card:hover .mud-icon-root { transform: none; }

    /* Barre di avanzamento: traccia grigia, riempimento nell'accento. */
    & .mud-main-content .mud-progress-linear:not(.fzb *) {
        background: var(--zd-surface-hover) !important;
        border-radius: var(--zd-radius-pill);
    }

    /* ═════════════ 4. TABELLE ═════════════
       Tabella = card; intestazione grigio chiaro in maiuscoletto; righe senza zebra,
       hover appena accennato; scroll orizzontale dentro la tabella, mai sulla pagina. */
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) {
        background: var(--zd-surface) !important;
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius) !important;
        box-shadow: var(--zd-shadow-1) !important;
        overflow: hidden;
    }
    & .mud-main-content :is(.mud-paper, .mud-card, .mud-tabs-panels) :is(.mud-table, .mud-data-grid):not(.fzb *) {
        box-shadow: none !important;
        border-radius: var(--zd-radius-sm) !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, .mud-simple-table):not(.fzb *) :is(.mud-table-head, thead) :is(th, .mud-table-cell) {
        background: var(--zd-surface-2) !important;
        color: var(--zd-text-3) !important;
        font-size: .72rem !important;
        font-weight: 600 !important;
        letter-spacing: .05em;
        text-transform: uppercase;
        border-bottom: 1px solid var(--zd-border) !important;
        padding-top: var(--zd-space-3);
        padding-bottom: var(--zd-space-3);
        white-space: nowrap;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-head {
        background: var(--zd-surface-2) !important;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(.mud-table-body, tbody) :is(td, .mud-table-cell) {
        border-bottom: 1px solid var(--zd-border);
        color: var(--zd-text);
        font-size: var(--zd-font-size);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(.mud-table-body, tbody) tr:last-child > :is(td, .mud-table-cell) {
        border-bottom: 0;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-row:nth-child(even) { background: transparent; }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(.mud-table-body, tbody) tr {
        transition: background-color var(--zd-dur-fast) ease;
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid, .mud-simple-table):not(.fzb *) :is(.mud-table-body, tbody) tr:hover {
        background: var(--tn-row-hover) !important;
    }
    & .mud-main-content .mud-table-row:hover .mud-table-cell:first-child { box-shadow: inset 2px 0 0 var(--tn-accent); }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) :is(.mud-table-pagination, .mud-table-toolbar) {
        background: var(--zd-surface) !important;
        color: var(--zd-text-2);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-pagination {
        border-top: 1px solid var(--zd-border);
    }
    & .mud-main-content :is(.mud-table, .mud-data-grid):not(.fzb *) .mud-table-toolbar {
        border-top: 0;
        border-bottom: 1px solid var(--zd-border);
    }
    /* Tabelle semplici dentro le card: stesso maiuscoletto, niente bordo doppio. */
    & .mud-main-content .mud-simple-table:not(.fzb *) {
        background: transparent;
        box-shadow: none !important;
    }

    /* ═════════════ 5. CHIP, AVVISI, LISTE, TAB, PANNELLI ═════════════ */
    /* Chip di stato: tinta tenue + testo scuro dello stesso colore (leggibili, non urlati). */
    & .mud-chip:not(.fzb *) {
        border-radius: var(--zd-radius-pill) !important;
        font-weight: 600;
        letter-spacing: .01em;
        transition: background-color var(--zd-dur-fast) ease, box-shadow var(--zd-dur-fast) ease, transform var(--zd-dur-fast) ease;
    }
    & .mud-chip.mud-chip-size-small:not(.fzb *) { height: 24px; font-size: .75rem; padding: 0 10px; }
    & .mud-chip.mud-chip-filled.mud-chip-color-primary:not(.fzb *) { background: var(--tn-accent-soft-2) !important; color: var(--tn-accent-ink) !important; }
    & .mud-chip.mud-chip-filled.mud-chip-color-secondary:not(.fzb *),
    & .mud-chip.mud-chip-filled.mud-chip-color-tertiary:not(.fzb *),
    & .mud-chip.mud-chip-filled.mud-chip-color-default:not(.fzb *),
    & .mud-chip.mud-chip-filled.mud-chip-color-dark:not(.fzb *) { background: var(--zd-surface-hover) !important; color: var(--zd-text-2) !important; }
    & .mud-chip.mud-chip-filled.mud-chip-color-success:not(.fzb *) { background: var(--zd-success-soft) !important; color: #047857 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zd-success) 22%, transparent); }
    & .mud-chip.mud-chip-filled.mud-chip-color-error:not(.fzb *) { background: var(--zd-danger-soft) !important; color: #B91C1C !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zd-danger) 22%, transparent); }
    & .mud-chip.mud-chip-filled.mud-chip-color-warning:not(.fzb *) { background: var(--zd-warning-soft) !important; color: #B45309 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zd-warning) 26%, transparent); }
    & .mud-chip.mud-chip-filled.mud-chip-color-info:not(.fzb *) { background: var(--zd-info-soft) !important; color: #0369A1 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zd-info) 22%, transparent); }
    & .mud-chip.mud-chip-filled :is(.mud-chip-icon, .mud-icon-root) { color: inherit !important; }
    /* Chip selezionabili (filtri, MudChipSet): la scelta attiva è piena nell'accento. */
    & .mud-chip.mud-chip-selected:not(.fzb *) {
        background: var(--tn-accent) !important;
        color: #FFFFFF !important;
        box-shadow: none;
    }
    & .mud-chip.mud-chip-outlined:not(.fzb *) { border-color: var(--zd-border-strong) !important; background: var(--zd-surface) !important; }
    & .mud-chip.mud-chip-outlined.mud-chip-color-primary:not(.fzb *) { border-color: var(--tn-accent-ring) !important; color: var(--tn-accent-ink) !important; }

    /* Avvisi (MudAlert standard/testo): fondo tenue dello stato, bordo sottile, testo scuro.
       Le "info" erano tinte nel colore del verticale e in Ristorante sembravano errori. */
    & .mud-main-content .mud-alert:not(.fzb *):not(.layout-banner) {
        border-radius: var(--zd-radius-sm) !important;
        font-weight: 500;
        box-shadow: none !important;
    }
    & .mud-main-content :is(.mud-alert-text-info, .mud-alert-standard-info):not(.fzb *) { background: var(--zd-info-soft) !important; color: #075985 !important; border: 1px solid color-mix(in srgb, var(--zd-info) 22%, transparent); }
    & .mud-main-content :is(.mud-alert-text-success, .mud-alert-standard-success):not(.fzb *) { background: var(--zd-success-soft) !important; color: #065F46 !important; border: 1px solid color-mix(in srgb, var(--zd-success) 22%, transparent); }
    & .mud-main-content :is(.mud-alert-text-warning, .mud-alert-standard-warning):not(.fzb *) { background: var(--zd-warning-soft) !important; color: #92400E !important; border: 1px solid color-mix(in srgb, var(--zd-warning) 26%, transparent); }
    & .mud-main-content :is(.mud-alert-text-error, .mud-alert-standard-error):not(.fzb *) { background: var(--zd-danger-soft) !important; color: #991B1B !important; border: 1px solid color-mix(in srgb, var(--zd-danger) 22%, transparent); }
    & .mud-main-content :is(.mud-alert-text-info, .mud-alert-standard-info, .mud-alert-outlined-info):not(.layout-banner) .mud-alert-icon .mud-icon-root { color: var(--zd-info) !important; }
    & .mud-main-content :is(.mud-alert-text-success, .mud-alert-standard-success, .mud-alert-outlined-success):not(.layout-banner) .mud-alert-icon .mud-icon-root { color: var(--zd-success) !important; }
    & .mud-main-content :is(.mud-alert-text-warning, .mud-alert-standard-warning, .mud-alert-outlined-warning):not(.layout-banner) .mud-alert-icon .mud-icon-root { color: var(--zd-warning) !important; }
    & .mud-main-content :is(.mud-alert-text-error, .mud-alert-standard-error, .mud-alert-outlined-error):not(.layout-banner) .mud-alert-icon .mud-icon-root { color: var(--zd-danger) !important; }
    /* Avvisi delineati: fondo bianco, bordo tenue dello stato. */
    & .mud-main-content .mud-alert[class*="mud-alert-outlined-"]:not(.layout-banner):not(.fzb *) { background: var(--zd-surface) !important; }
    & .mud-main-content .mud-alert-outlined-info:not(.layout-banner) { border-color: color-mix(in srgb, var(--zd-info) 40%, transparent) !important; color: #075985 !important; }
    & .mud-main-content .mud-alert-outlined-success:not(.layout-banner) { border-color: color-mix(in srgb, var(--zd-success) 40%, transparent) !important; color: #065F46 !important; }
    & .mud-main-content .mud-alert-outlined-warning:not(.layout-banner) { border-color: color-mix(in srgb, var(--zd-warning) 45%, transparent) !important; color: #92400E !important; }
    & .mud-main-content .mud-alert-outlined-error:not(.layout-banner) { border-color: color-mix(in srgb, var(--zd-danger) 40%, transparent) !important; color: #991B1B !important; }

    /* Liste */
    & .mud-main-content .mud-list-item:not(.fzb *) {
        border-radius: var(--zd-radius-sm);
        transition: background-color var(--zd-dur-fast) ease;
    }
    & .mud-main-content .mud-list-item:not(.fzb *):hover { background: var(--zd-surface-hover) !important; }
    & .mud-main-content .mud-list-item.mud-selected-item:not(.fzb *) { background: var(--tn-accent-soft) !important; color: var(--tn-accent-ink); }

    /* Tab: barra bianca con linea sotto, scheda attiva nell'accento con barretta. */
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tabs-tabbar {
        background: var(--zd-surface) !important;
        border-bottom: 1px solid var(--zd-border);
    }
    & .mud-main-content > .mud-container .mud-tabs:not(.mud-paper *):not(.fzb *) {
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--zd-shadow-1);
        overflow: hidden;
    }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab {
        color: var(--zd-text-2);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        min-height: 48px;
        transition: color var(--zd-dur) ease, background-color var(--zd-dur) ease;
    }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab::after { display: none; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab:hover { background: var(--zd-surface-hover); color: var(--zd-text); }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab.mud-tab-active { color: var(--tn-accent-ink) !important; }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tab-slider {
        background: var(--tn-accent) !important;
        height: 2px !important;
        border-radius: 2px 2px 0 0;
        transition: left var(--zd-dur-slow) var(--zd-ease), width var(--zd-dur-slow) var(--zd-ease);
    }
    & .mud-main-content .mud-tabs:not(.fzb *) .mud-tabs-panels { background: transparent; }

    /* Pannelli espandibili (documentazione, impostazioni): una card unica a righe. */
    & .mud-main-content .mud-expansion-panels:not(.fzb *) {
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--zd-shadow-1) !important;
        overflow: hidden;
    }
    & .mud-main-content .mud-expansion-panels:not(.fzb *) > .mud-expand-panel {
        background: var(--zd-surface) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--zd-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    & .mud-main-content .mud-expansion-panels:not(.fzb *) > .mud-expand-panel:last-child { border-bottom: 0 !important; }
    & .mud-main-content .mud-expand-panel:not(.fzb *) .mud-expand-panel-header {
        transition: background-color var(--zd-dur-fast) ease;
    }
    & .mud-main-content .mud-expand-panel:not(.fzb *) .mud-expand-panel-header:hover { background: var(--zd-surface-hover); }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded:not(.fzb *) > .mud-expand-panel-header {
        color: var(--tn-accent-ink);
        font-weight: 600;
    }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded:not(.fzb *) > .mud-expand-panel-header .mud-icon-root { color: var(--tn-accent); }

    /* Occhielli (overline) dei contenuti: grigi come le etichette, non nel colore del settore. */
    & .mud-main-content .mud-typography-overline:not([class*="-text"]):not(.fzb *) { color: var(--zd-text-3); }

    /* Testi 'secondari' (MudText Color.Secondary): nei template sono testo attenuato, ma il colore
       secondario dei verticali è verde, rosso, arancio... Qui diventano grigio slate ovunque. */
    & :is(.mud-main-content, .mud-dialog) .mud-typography.mud-secondary-text:not(.fzb *) { color: var(--zd-text-3) !important; }

    /* Divisori */
    & .mud-main-content .mud-divider:not(.fzb *) { border-color: var(--zd-border) !important; }

    /* ═════════════ 6. CAMPI E FILTRI ═════════════ */
    & :is(.mud-main-content, .mud-dialog) .mud-input.mud-input-outlined:not(.fzb *) {
        background: var(--zd-surface);
        border-radius: var(--zd-radius-sm);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-input-outlined-border:not(.fzb *) {
        border-color: var(--zd-border-strong) !important;
        border-radius: var(--zd-radius-sm) !important;
        transition: border-color var(--zd-dur-fast) ease, box-shadow var(--zd-dur-fast) ease;
    }
    & :is(.mud-main-content, .mud-dialog) .mud-input.mud-input-outlined:not(.fzb *):hover .mud-input-outlined-border { border-color: var(--zd-text-3) !important; }
    & :is(.mud-main-content, .mud-dialog) .mud-input.mud-input-outlined.mud-focused:not(.fzb *) .mud-input-outlined-border {
        border-color: var(--tn-accent) !important;
        border-width: 1px !important;
        box-shadow: 0 0 0 3px var(--tn-accent-ring);
    }
    & :is(.mud-main-content, .mud-dialog) .mud-input-error .mud-input-outlined-border { border-color: var(--zd-danger) !important; }
    /* Etichetta del campo delineato: stesso fondo del campo, niente riquadretto colorato attorno. */
    & :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-label.mud-focused:not(.fzb *) { color: var(--tn-accent-ink) !important; }
    & :is(.mud-main-content, .mud-dialog) .mud-input-underline:not(.fzb *)::before { border-bottom-color: var(--zd-border-strong); }
    & :is(.mud-main-content, .mud-dialog) .mud-input-underline:not(.fzb *)::after { border-bottom-color: var(--tn-accent); }
    & :is(.mud-main-content, .mud-dialog) .mud-input-helper-text:not(.mud-input-error) { color: var(--zd-text-3); }

    /* ═════════════ 7. FINESTRE (MudDialog) ═════════════
       Card bianca con angoli ampi, testata con l'icona nell'accento, piede grigio chiaro.
       MudBlazor ancora la X di chiusura alla testata, ma la testata non è "position: relative":
       la X finiva nell'angolo dello SCHERMO, fuori dalla finestra (desktop e telefono). */
    & .mud-overlay-dialog { backdrop-filter: none !important; }
    & .mud-overlay-dialog .mud-overlay-scrim { background-color: rgba(15, 23, 42, .45) !important; }
    & .mud-dialog:not(.fzb *) {
        background: var(--zd-surface) !important;
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius-lg) !important;
        box-shadow: var(--zd-shadow-3) !important;
        overflow: hidden;
    }
    & .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;
        color: var(--zd-text) !important;
        border-bottom: 1px solid var(--zd-border);
        font-size: 1.05rem;
        font-weight: 600 !important;
    }
    & .mud-dialog .mud-dialog-title > .mud-typography {
        display: flex;
        align-items: center;
        gap: var(--zd-space-2);
        min-width: 0;
        font-weight: 600;
    }
    & .mud-dialog .mud-dialog-title .mud-icon-root { color: var(--tn-accent) !important; }
    & .mud-dialog .mud-dialog-title .mud-button-close {
        position: absolute;
        top: 50%;
        right: var(--zd-space-3);
        transform: translateY(-50%);
        color: var(--zd-text-3) !important;
    }
    & .mud-dialog .mud-dialog-title .mud-button-close .mud-icon-root { color: inherit !important; }
    & .mud-dialog .mud-dialog-content {
        padding: var(--zd-space-5) !important;
        background: var(--zd-surface) !important;
        color: var(--zd-text);
        overflow-x: hidden;
    }
    & .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-alert { border-radius: var(--zd-radius-sm) !important; }
    /* Sentinelle invisibili del focus-trap di MudDialog: con il focus disegnavano un
       quadratino colorato 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;
    }
    /* Corpo dei dialog con larghezza minima (classe da usare nelle finestre nuove):
       comoda su desktop, mai oltre lo schermo su telefono. */
    & .tn-dialog-body { min-width: min(460px, calc(100vw - 88px)); max-width: 100%; }

    /* ═════════════ 8. CALENDARI E AGENDE ═════════════
       Griglia settimanale (.calendar-grid, Barbiere e cloni) e mese/settimana (.cal-*):
       righe sottili grigie, intestazioni chiare, oggi in evidenza con l'accento. */
    & .mud-main-content .calendar-grid {
        background: var(--zd-border);
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--zd-shadow-1);
    }
    & .mud-main-content .calendar-slot { background: var(--zd-surface); }
    & .mud-main-content .calendar-slot.calendar-header {
        background: var(--zd-surface) !important;
        border-bottom: 1px solid var(--zd-border) !important;
        padding: var(--zd-space-3) var(--zd-space-1);
    }
    & .mud-main-content .calendar-slot.calendar-header .mud-typography-overline {
        color: var(--zd-text-3) !important;
        font-weight: 600;
        letter-spacing: .06em;
    }
    & .mud-main-content .calendar-slot.calendar-header .mud-typography-h6 { color: var(--zd-text) !important; font-weight: 700; }
    & .mud-main-content .calendar-slot.calendar-time {
        background: var(--zd-surface-2) !important;
        color: var(--zd-text-3);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }
    & .mud-main-content .calendar-slot.calendar-cell:hover {
        background: var(--tn-row-hover) !important;
        box-shadow: inset 0 0 0 1px var(--tn-accent-ring) !important;
    }
    & .mud-main-content .appointment-chip {
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
        text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    }
    & .mud-main-content .appointment-chip:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--zd-shadow-2); }
    & .mud-main-content :is(.cal-month, .cal-week) {
        border-color: var(--zd-border) !important;
        border-radius: var(--zd-radius) !important;
        box-shadow: var(--zd-shadow-1);
        background: var(--zd-border);
    }
    & .mud-main-content :is(.cal-month__cell, .cal-week__col) { background: var(--zd-surface); }
    & .mud-main-content .cal-month__cell--weekend { background: var(--zd-surface-2); }
    & .mud-main-content :is(.cal-month__cell--today, .cal-week__col--today) { background: var(--tn-accent-soft) !important; }
    & .mud-main-content .cal-today { background: var(--tn-accent) !important; color: #FFFFFF !important; }
    & .mud-main-content :is(.cal-month__dow, .cal-week__head) { background: var(--zd-surface-2); color: var(--zd-text-3); }
    & .mud-main-content .cal-kpi {
        background: var(--zd-surface);
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius);
        box-shadow: var(--zd-shadow-1);
    }

    /* ═════════════ 9. STATI VUOTI, CARICAMENTO ═════════════ */
    & .mud-main-content .empty-state {
        background: var(--zd-surface);
        border: 1px dashed var(--zd-border-strong);
        border-radius: var(--zd-radius);
        color: var(--zd-text-3);
        padding: var(--zd-space-6) var(--zd-space-5);
        text-align: center;
    }
    & .mud-main-content .empty-state .mud-icon-root {
        color: var(--tn-accent) !important;
        background: var(--tn-accent-soft);
        border-radius: var(--zd-radius-pill);
        padding: 12px;
        box-sizing: content-box;
        animation: none !important;
    }
    & .mud-main-content .mud-progress-linear.mud-progress-indeterminate:not(.fzb *) { height: 3px; }
    & .mud-main-content .mud-skeleton { background-color: var(--zd-surface-hover); border-radius: var(--zd-radius-sm) !important; }

    /* Animazioni continue nei contenuti (badge che pulsano, icone che fluttuano, aloni che
       respirano): distraggono e consumano. Restano solo transizioni brevi su interazione. */
    & .mud-main-content :is(.mud-badge-content, .stat-card .mud-icon-root, .page-header .mud-icon-root) { animation: none !important; }
    & .mud-main-content .mud-button-filled.mud-button-filled-primary::after { display: none !important; }
}

/* Titoli dei contenuti nel testo slate del design system (app.css li tinge col colore del
   settore). Specificità minima (:where): qualsiasi regola più precisa, come i testi bianchi
   delle testate colorate, continua a vincere. */
:where(html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) :is(.mud-main-content, .mud-dialog)) :is(h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6) {
    color: var(--zd-text);
}

/* ═════════════ 10. PAGINE PUBBLICHE DI PRENOTAZIONE ═════════════
   /{verticale}/p/{slug}: PublicLayout del verticale (niente menu, niente barra in alto).
   Stesso linguaggio dell'area di lavoro: canvas a tinta unita, testata BIANCA (prima un
   blocco scuro sfumato nel colore del settore), card bianche, accento solo nei dettagli.
   Le regole di forma restano nei <style> delle pagine (logica e markup invariati): qui
   solo i colori, con specificità maggiore di .public-booking-shell .pb-*. */
html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
    & .mud-layout:has(> .pb-layout-main),
    & .pb-layout-main,
    & .public-booking-shell {
        background: var(--zd-canvas) !important;
    }
    & .public-booking-shell .pb-hero {
        color: var(--zd-text);
        background: var(--zd-surface);
        border-bottom: 1px solid var(--zd-border);
    }
    & .public-booking-shell .pb-hero__eyebrow { color: var(--tn-accent-ink); }
    & .public-booking-shell .pb-hero__name { color: var(--zd-text) !important; }
    & .public-booking-shell .pb-hero__address { color: var(--zd-text-2); }
    & .public-booking-shell .pb-hero__address .mud-icon-root { color: var(--tn-accent); }
    & .public-booking-shell .pb-chip {
        background: var(--zd-surface-2);
        border: 1px solid var(--zd-border);
        color: var(--zd-text-2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    & .public-booking-shell .pb-hero__mascot .zcd-mascot__bubble {
        border-color: var(--zd-border);
        box-shadow: var(--zd-shadow-2);
    }
    & .public-booking-shell .pb-tabs .mud-tabs-tabbar {
        background: var(--zd-surface) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid var(--zd-border);
        box-shadow: var(--zd-shadow-1);
    }
    & .public-booking-shell .pb-tabs .mud-tab { color: var(--zd-text-2); }
    & .public-booking-shell .pb-tabs .mud-tab:hover { color: var(--zd-text); background: var(--zd-surface-hover); }
    & .public-booking-shell .pb-tabs .mud-tab.mud-tab-active { color: var(--tn-accent-ink); }
    & .public-booking-shell .pb-tabs .mud-tab-slider { background: var(--tn-accent); }
    & .public-booking-shell :is(.mud-paper, .mud-card):not(.mud-paper *):not(.mud-tabs-tabbar) {
        background: var(--zd-surface) !important;
        border: 1px solid var(--zd-border);
        border-radius: var(--zd-radius-lg) !important;
        box-shadow: var(--zd-shadow-1) !important;
    }
    & .public-booking-shell .pb-service-item.mud-checkbox {
        border-color: var(--zd-border);
        border-radius: var(--zd-radius-sm);
        background: var(--zd-surface);
    }
    & .public-booking-shell .pb-service-item.mud-checkbox:hover {
        border-color: var(--zd-border-strong);
        background: var(--zd-surface-hover);
    }
    & .public-booking-shell .pb-service-item.mud-checkbox:has(input:checked) {
        border-color: var(--tn-accent);
        background: var(--tn-accent-soft);
        box-shadow: inset 0 0 0 1px var(--tn-accent);
    }
    & .public-booking-shell .mud-input.mud-input-outlined { background: var(--zd-surface); }
    & .public-booking-shell .mud-input-outlined-border { border-color: var(--zd-border-strong) !important; border-radius: var(--zd-radius-sm) !important; }
    & .public-booking-shell .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
        border-color: var(--tn-accent) !important;
        box-shadow: 0 0 0 3px var(--tn-accent-ring);
    }
    & .public-booking-shell .mud-input-label-outlined { background-color: var(--zd-surface); }
}

/* ═════════════ 11. MOVIMENTO ═════════════
   Ingresso della pagina: i blocchi principali salgono di pochi pixel e appaiono,
   a scaglioni di 40ms. Le finestre si aprono con una scala leggera. Tutto spento
   con prefers-reduced-motion (anche le durate dei token vanno a 0). */
@keyframes tn-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes tn-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
        & .mud-main-content :is(.mud-paper, .mud-card, .mud-table, .mud-data-grid, .page-header):not(.fzb *) {
            animation: none;
        }
        & .mud-main-content .zed-after-title > :not(.layout-banner):not(.fzb) {
            animation: tn-rise var(--zd-dur-slow) var(--zd-ease) both;
        }
        & .mud-main-content .zed-after-title > :nth-child(2) { animation-delay: 30ms; }
        & .mud-main-content .zed-after-title > :nth-child(3) { animation-delay: 60ms; }
        & .mud-main-content .zed-after-title > :nth-child(4) { animation-delay: 90ms; }
        & .mud-main-content .zed-after-title > :nth-child(n+5) { animation-delay: 120ms; }
        /* Griglie di statistiche e card: scaglioni brevi da sinistra a destra. */
        & .mud-main-content .mud-grid > .mud-grid-item:not(.fzb *) {
            animation: tn-rise var(--zd-dur-slow) var(--zd-ease) both;
        }
        & .mud-main-content .mud-grid > .mud-grid-item:nth-child(2) { animation-delay: 40ms; }
        & .mud-main-content .mud-grid > .mud-grid-item:nth-child(3) { animation-delay: 80ms; }
        & .mud-main-content .mud-grid > .mud-grid-item:nth-child(4) { animation-delay: 120ms; }
        & .mud-main-content .mud-grid > .mud-grid-item:nth-child(n+5) { animation-delay: 160ms; }
        & .mud-dialog:not(.fzb *) { animation: tn-pop var(--zd-dur-slow) var(--zd-ease) both !important; }
        & .public-booking-shell .pb-tabs .mud-tabs-panels > * { animation: tn-rise var(--zd-dur-slow) var(--zd-ease) both; }
    }
}
@media (prefers-reduced-motion: reduce) {
    html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
        & .mud-main-content *, & .mud-dialog, & .public-booking-shell * {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* ═════════════ 12. TELEFONO E TOUCH ═════════════ */
@media (max-width: 37.5em) {
    html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
        /* Intestazione: titolo su tutta la riga, poi ricerca e pulsanti che vanno a capo. */
        & .mud-main-content .page-header { padding-bottom: var(--zd-space-4) !important; }
        & .mud-main-content .page-header > .d-flex.flex-row > div.flex-grow-1:not(:has(*)) { display: none; }
        & .mud-main-content .page-header .mud-input-control :is(.mud-input, [style*="width"]) { max-width: 100% !important; }
        & .mud-main-content .page-header > .d-flex.flex-row > div:not([class]) { flex: 1 1 calc(100% - 56px); }
        & .mud-main-content .page-header > .d-flex.flex-row > :is(.mud-input-control, .mud-select, .mud-autocomplete, .mud-picker) {
            flex: 1 1 100%;
            max-width: 100% !important;
            min-width: 0 !important;
        }
        & .mud-main-content .page-header > .d-flex.flex-row > .mud-button-root:not(.mud-icon-button) { flex: 1 1 auto; }
        & .mud-main-content .page-header .mud-button-root:not(.mud-icon-button) .mud-button-label { white-space: nowrap; }

        /* Niente larghezze minime fisse nei campi: su 360px facevano scorrere la pagina. */
        & .mud-main-content .mud-input-control:not(.fzb *) { min-width: 0 !important; max-width: 100% !important; }
        & .mud-main-content .mud-card-content:not(.fzb *),
        & .mud-main-content .mud-card-header:not(.fzb *) { padding: var(--zd-space-4); }

        /* Dialog: testata più bassa, campi affiancati che vanno a capo, pulsanti alti 44px. */
        & .mud-dialog .mud-dialog-title { min-height: 54px; 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; flex-wrap: wrap; }
        & .mud-dialog .mud-dialog-content .d-flex.flex-row:not(.mud-input-control *) { flex-wrap: wrap; }
        & .mud-dialog .mud-dialog-content .d-flex.flex-row > .mud-input-control { flex: 1 1 100%; }
        & .mud-dialog .mud-dialog-content :is(.mud-input-control, .mud-stack, .d-flex) { min-width: 0 !important; }
        /* Larghezze fisse scritte inline nei dialog dei verticali (min-width:420px e simili):
           su telefono tagliavano campi e pulsanti a destra. */
        & .mud-dialog .mud-dialog-content [style*="width"] { min-width: 0 !important; max-width: 100% !important; }
        & .mud-dialog .mud-dialog-actions .mud-button-root { min-height: 44px; }

        /* Tabelle impilate di MudTable (righe come schede): ogni riga è una card. */
        & .mud-main-content .mud-xs-table :is(.mud-table-body, tbody) > .mud-table-row {
            display: block;
            margin: var(--zd-space-2);
            border: 1px solid var(--zd-border);
            border-radius: var(--zd-radius-sm);
            background: var(--zd-surface);
            box-shadow: none;
        }
        & .mud-main-content .mud-xs-table :is(.mud-table-body, tbody) > .mud-table-row > .mud-table-cell {
            border-bottom: 1px solid var(--zd-border);
        }
        & .mud-main-content .mud-xs-table :is(.mud-table-body, tbody) > .mud-table-row > .mud-table-cell:last-child { border-bottom: 0; }
        & .mud-main-content .mud-xs-table :is(.mud-table-body, tbody) > .mud-table-row > .mud-table-cell::before {
            color: var(--zd-text-3);
            font-size: .72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        & .mud-main-content .mud-xs-table .mud-table-row:hover .mud-table-cell:first-child { box-shadow: none; }

        /* Pagine pubbliche: Giorno/Orario e Nome/Cognome in colonna. La regola nella pagina
           perdeva contro .flex-row di MudBlazor (flex-direction: row !important). */
        & .public-booking-shell :is(.pb-when-row, .pb-name-row) { flex-direction: column !important; align-items: stretch !important; }
        & .public-booking-shell :is(.pb-when-row, .pb-name-row) > * { width: 100%; }
        /* Pagine pubbliche: card a filo con meno margine. */
        & .public-booking-shell :is(.mud-paper, .mud-card):not(.mud-paper *):not(.mud-tabs-tabbar) { border-radius: var(--zd-radius) !important; }
    }
}
@media (pointer: coarse) {
    html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) {
        /* Bersagli di tocco ≥ 44px. Interruttori, spunte e scelte usano internamente
           .mud-icon-button: ingrandirli staccava il pallino dello switch dalla barra. */
        & .mud-main-content .mud-button-root:not(.mud-icon-button):not(.fzb *):not(:is(.mud-switch, .mud-checkbox, .mud-radio, .mud-input-adornment, .mud-table-pagination) *) { min-height: 44px; }
        & .mud-main-content .mud-icon-button:not(.fzb *):not(:is(.mud-switch, .mud-checkbox, .mud-radio, .mud-input-adornment, .mud-chip, .mud-table-pagination) *) { min-width: 44px; min-height: 44px; }
    }
}