/* ==== css/design-tokens.css ==== */
/* ============================================================================
ZcodedepthV — Design system condiviso (2026-10-08)
UNICA fonte dei valori di base per TUTTA l'app: pannello admin, aree dei clienti,
login. Ogni altro foglio di stile usa queste variabili, non valori scritti a mano.
Direzione (decisa con il titolare): stile dei gestionali professionali.
- Sfondo della pagina a TINTA UNITA, uguale ovunque: niente gradienti, righe,
griglie, raggi o scene animate.
- Menu laterale scuro blu notte (#0B0A20, lo stesso dell'icona dell'app).
- Contenuti su card bianche con bordo sottile e ombra leggera.
- Animazioni brevi e discrete; spente con prefers-reduced-motion.
- Nei verticali il colore del settore resta come ACCENTO (pulsanti, selezioni),
mai come sfondo: lo fornisce il tema MudBlazor del verticale (--mud-palette-primary).
============================================================================ */
:root {
/* Superfici */
--zd-canvas: #F3F5F9; /* sfondo pagina, tinta unita */
--zd-surface: #FFFFFF; /* card, dialog, barra in alto */
--zd-surface-2: #F8FAFC; /* intestazioni tabelle, riquadri interni */
--zd-surface-hover: #F1F5F9;
--zd-border: #E2E8F0;
--zd-border-strong: #CBD5E1;
/* Testo */
--zd-text: #0F172A;
--zd-text-2: #475569;
--zd-text-3: #64748B;
--zd-text-inverse: #FFFFFF;
/* Marchio (piattaforma e pannello admin) */
--zd-brand: #4F46E5;
--zd-brand-hover: #4338CA;
--zd-brand-soft: #EEF2FF; /* fondo di selezioni e chip del marchio */
--zd-brand-ring: rgba(79, 70, 229, .28);
--zd-brand-gradient: linear-gradient(135deg, #8B5CF6 0%, #22D3EE 100%); /* solo dettagli: logo, barretta attiva */
/* Menu laterale */
--zd-sidebar-bg: #0B0A20;
--zd-sidebar-bg-2: #12112B; /* gruppi aperti, hover */
--zd-sidebar-border: rgba(255, 255, 255, .06);
--zd-sidebar-text: #A9AEC9;
--zd-sidebar-text-strong: #FFFFFF;
--zd-sidebar-section: #6B7094; /* titoletti di sezione */
--zd-sidebar-active-bg: rgba(139, 92, 246, .16);
--zd-sidebar-width: 264px;
/* Barra in alto */
--zd-topbar-bg: #FFFFFF;
--zd-topbar-height: 60px;
/* Stati */
--zd-success: #059669; --zd-success-soft: #ECFDF5;
--zd-warning: #D97706; --zd-warning-soft: #FFFBEB;
--zd-danger: #DC2626; --zd-danger-soft: #FEF2F2;
--zd-info: #0284C7; --zd-info-soft: #F0F9FF;
/* Stati usati come TESTO su fondo -soft (chip, avvisi): più scuri, reggono 4.5:1. */
--zd-success-ink: #047857;
--zd-warning-ink: #B45309;
--zd-danger-ink: #B91C1C;
--zd-info-ink: #0369A1;
/* Con cosa si mescola un accento per usarlo come TESTO: scurito sul chiaro, schiarito sullo scuro. */
--zd-ink-mix: #0F172A;
/* Forma */
--zd-radius-sm: 8px;
--zd-radius: 12px;
--zd-radius-lg: 16px;
--zd-radius-pill: 999px;
/* Profondità */
--zd-shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
--zd-shadow-2: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -6px rgba(15, 23, 42, .10);
--zd-shadow-3: 0 12px 32px -8px rgba(15, 23, 42, .18); /* dialog, menu a comparsa */
/* Spaziatura (scala 4) */
--zd-space-1: 4px; --zd-space-2: 8px; --zd-space-3: 12px;
--zd-space-4: 16px; --zd-space-5: 24px; --zd-space-6: 32px;
/* Tipografia */
--zd-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--zd-font-size: 14px;
--zd-font-size-sm: 13px;
--zd-h1: 22px;
--zd-h2: 18px;
/* Movimento */
--zd-ease: cubic-bezier(.2, .8, .2, 1);
--zd-dur-fast: 120ms;
--zd-dur: 200ms;
--zd-dur-slow: 280ms;
color-scheme: light;
}
/* Al cambio di tema niente transizioni a metà strada (classe messa per un attimo da zcdTheme.set). */
html.zcd-theme-switching *, html.zcd-theme-switching *::before, html.zcd-theme-switching *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
:root { --zd-dur-fast: 0ms; --zd-dur: 0ms; --zd-dur-slow: 0ms; }
}
/* ============================================================================
Modalità SCURA (2026-10-09)
Solo per l'area di lavoro e il pannello (MainLayout): l'attributo data-theme="dark"
su lo scrive js/theme.js leggendo la scelta salvata nel browser (localStorage
"zcd-theme"), prima della prima pittura. Login, pagine pubbliche di prenotazione e
pagine legali restano chiare: non passano da MainLayout e non ricevono l'attributo.
Si ridefiniscono SOLO i token: tutti i fogli che li usano diventano scuri da soli.
Le variabili --mud-palette-* che i fogli non riconducono già ai token si ridirigono
qui (specificità 0,1,1, sopra il :root del MudThemeProvider): il tema C# resta chiaro
e non serve un secondo giro di render lato server.
============================================================================ */
html[data-theme="dark"] {
color-scheme: dark;
--zd-canvas: #0E1016;
--zd-surface: #161922;
--zd-surface-2: #1B1F2A;
--zd-surface-hover: #222736;
--zd-border: #272C3A;
--zd-border-strong: #384054;
--zd-text: #E7E9F0;
--zd-text-2: #A9B0C2;
--zd-text-3: #808AA0;
--zd-text-inverse: #0E1016;
--zd-brand: #818CF8;
--zd-brand-hover: #A5B4FC;
--zd-brand-soft: rgba(129, 140, 248, .14);
--zd-brand-ring: rgba(129, 140, 248, .35);
--zd-sidebar-bg: #0A0B14;
--zd-sidebar-bg-2: #12142A;
--zd-sidebar-border: rgba(255, 255, 255, .05);
--zd-topbar-bg: #161922;
--zd-success: #34D399; --zd-success-soft: rgba(52, 211, 153, .12);
--zd-warning: #FBBF24; --zd-warning-soft: rgba(251, 191, 36, .12);
--zd-danger: #F87171; --zd-danger-soft: rgba(248, 113, 113, .12);
--zd-info: #38BDF8; --zd-info-soft: rgba(56, 189, 248, .12);
--zd-success-ink: #6EE7B7;
--zd-warning-ink: #FCD34D;
--zd-danger-ink: #FCA5A5;
--zd-info-ink: #7DD3FC;
--zd-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
--zd-shadow-2: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 20px -8px rgba(0, 0, 0, .55);
--zd-shadow-3: 0 16px 40px -8px rgba(0, 0, 0, .70);
--zd-ink-mix: #FFFFFF;
/* MudBlazor: superfici, testi e stati dei controlli sui token scuri. */
--mud-palette-background: var(--zd-canvas);
--mud-palette-background-gray: var(--zd-surface-2);
--mud-palette-background-grey: var(--zd-surface-2);
--mud-palette-surface: var(--zd-surface);
--mud-palette-appbar-background: var(--zd-topbar-bg);
--mud-palette-appbar-text: var(--zd-text);
--mud-palette-text-primary: var(--zd-text);
--mud-palette-text-secondary: var(--zd-text-3);
--mud-palette-text-disabled: rgba(231, 233, 240, .38);
--mud-palette-action-default: var(--zd-text-2);
--mud-palette-action-default-hover: rgba(255, 255, 255, .06);
--mud-palette-action-disabled: rgba(231, 233, 240, .30);
--mud-palette-action-disabled-background: rgba(231, 233, 240, .10);
--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(--zd-surface-hover);
--mud-palette-divider: var(--zd-border);
--mud-palette-divider-light: var(--zd-border);
--mud-palette-overlay-dark: rgba(0, 0, 0, .6);
--mud-palette-skeleton: rgba(255, 255, 255, .08);
--mud-palette-dark: #2A3040;
--mud-palette-dark-text: var(--zd-text);
--mud-palette-success: var(--zd-success);
--mud-palette-warning: var(--zd-warning);
--mud-palette-error: var(--zd-danger);
--mud-palette-success-text: #062A1E;
--mud-palette-warning-text: #2A1E03;
--mud-palette-error-text: #2A0909;
}
/* ==== css/app.css ==== */
/* ===========================================================
ZcodedepthV — base globale dell'app (restyling 2026-10-08)
-----------------------------------------------------------
Stile da gestionale professionale, UGUALE per pannello admin,
aree dei clienti e login:
- sfondo pagina a tinta unita (--zd-canvas), niente gradienti,
righe, aloni o scene animate;
- barra in alto bianca, menu laterale scuro (--zd-sidebar-bg);
- contenuti su card bianche con bordo sottile e ombra leggera;
- animazioni brevi (--zd-dur*), spente con prefers-reduced-motion.
I VALORI stanno in design-tokens.css (--zd-*): qui solo il loro uso.
Il colore del settore resta come ACCENTO (--accent* per verticale,
--mud-palette-primary dal tema MudBlazor), mai come sfondo.
=========================================================== */
/* I font sono in css/fonts.css, ospitati in locale (niente IP dei visitatori a Google). */
:root {
/* ---- Variabili storiche, ora ALIAS dei token condivisi ----
Molti fogli e pagine usano ancora --canvas/--surface/--text/--border:
puntano tutte al design system, quindi superfici, testi e bordi sono
identici in ogni area. Per pagine nuove usare direttamente --zd-*. */
--canvas: var(--zd-canvas);
--drawer-bg: var(--zd-sidebar-bg);
--surface: var(--zd-surface);
--surface-2: var(--zd-surface-2);
--surface-3: var(--zd-surface-hover);
--text: var(--zd-text);
--text-muted: var(--zd-text-2);
--text-faint: var(--zd-text-3);
--text-on-ink: #E2E8F0;
--text-on-accent: #FFFFFF;
--border: var(--zd-border);
--border-strong: var(--zd-border-strong);
--neutral-border: var(--zd-border);
--neutral-border-hover: var(--zd-border-strong);
--ink: var(--zd-sidebar-bg);
--ink-soft: var(--zd-sidebar-bg-2);
/* ---- Accento: di default il Primary del tema MudBlazor del verticale attivo (lo inietta
MudThemeProvider), così anche i verticali senza un blocco qui sotto hanno il loro colore
invece di quello di BarberFlow. I blocchi html[data-vertical] lo affinano a mano. ---- */
--accent: var(--mud-palette-primary, #A87545);
--accent-dark: var(--mud-palette-primary-darken, #8B5D38);
--accent-darker: var(--mud-palette-primary-darken, #724A2B);
--accent-light: var(--mud-palette-primary-lighten, #C99670);
--accent-tint: rgba(var(--mud-palette-primary-rgb, 168, 117, 69), 0.09);
--accent-tint-strong: rgba(var(--mud-palette-primary-rgb, 168, 117, 69), 0.18);
/* alias retrocompatibili (le classi storiche usano --teal-*) */
--teal: var(--accent);
--teal-dark: var(--accent-dark);
--teal-darker: var(--accent-darker);
--teal-light: var(--accent-light);
--teal-tint: var(--accent-tint);
--teal-tint-strong: var(--accent-tint-strong);
/* secondario + highlight del verticale (solo dettagli) */
--sage: #5A7561;
--sage-dark: #43594B;
--sage-tint: rgba(90, 117, 97, 0.12);
--brass: #C9A961;
--brass-tint: rgba(201, 169, 97, 0.18);
/* stati: uguali ovunque */
--success: var(--zd-success);
--success-tint: var(--zd-success-soft);
--error: var(--zd-danger);
--error-tint: var(--zd-danger-soft);
--warning: var(--zd-warning);
--warning-tint: var(--zd-warning-soft);
--info: var(--zd-info);
--info-tint: var(--zd-info-soft);
/* geometria / ombre / movimento: alias dei token */
--r-sm: var(--zd-radius-sm);
--r-md: var(--zd-radius);
--r-lg: var(--zd-radius-lg);
--shadow-xs: var(--zd-shadow-1);
--shadow-sm: var(--zd-shadow-2);
--shadow-md: var(--zd-shadow-2);
--shadow-lg: var(--zd-shadow-3);
--ease: var(--zd-dur) var(--zd-ease);
--ease-slow: var(--zd-dur-slow) var(--zd-ease);
/* Altezza della barra in alto: stessa per ogni larghezza (prima 56/48/64 a gradini).
Serve a chi resta "sticky" subito sotto: barre delle tab admin, sezioni del Budget. */
--zcd-appbar-h: var(--zd-topbar-height);
}
/* ===========================================================
ACCENTI PER VERTICALE — cambia SOLO il colore di accento, mai superfici o layout.
Lo switch avviene via [data-vertical] su (server-side
in App.razor, riallineato via JS dalla shell).
=========================================================== */
/* ---------- DentalFlow — teal clinico ---------- */
html[data-vertical="dentalflow"] {
--accent: #0E7490; --accent-dark: #0B5E73; --accent-darker: #084A5C; --accent-light: #5EC9D6;
--accent-tint: rgba(14, 116, 144, 0.09); --accent-tint-strong: rgba(14, 116, 144, 0.18);
--sage: #0EA5A5; --sage-dark: #0B7C7C; --sage-tint: rgba(14, 165, 165, 0.12);
--brass: #5EC9D6; --brass-tint: rgba(94, 201, 214, 0.20);
}
/* ---------- MedicoFlow — blu clinico ---------- */
html[data-vertical="medicoflow"] {
--accent: #2563EB; --accent-dark: #1E40AF; --accent-darker: #1E3A8A; --accent-light: #93C5FD;
--accent-tint: rgba(37, 99, 235, 0.09); --accent-tint-strong: rgba(37, 99, 235, 0.18);
--sage: #3B82F6; --sage-dark: #1D4ED8; --sage-tint: rgba(59, 130, 246, 0.12);
--brass: #93C5FD; --brass-tint: rgba(147, 197, 253, 0.20);
}
/* ---------- EsteticaFlow — rosa cipria/magenta ---------- */
html[data-vertical="esteticaflow"] {
--accent: #BE185D; --accent-dark: #9D174D; --accent-darker: #831843; --accent-light: #F472B6;
--accent-tint: rgba(190, 24, 93, 0.09); --accent-tint-strong: rgba(190, 24, 93, 0.18);
--sage: #DB2777; --sage-dark: #BE185D; --sage-tint: rgba(219, 39, 119, 0.12);
--brass: #F472B6; --brass-tint: rgba(244, 114, 182, 0.22);
}
/* ---------- VaultFlow — indaco/viola ---------- */
html[data-vertical="vaultflow"] {
--accent: #6D28D9; --accent-dark: #5B21B6; --accent-darker: #4A1A93; --accent-light: #A78BFA;
--accent-tint: rgba(109, 40, 217, 0.09); --accent-tint-strong: rgba(109, 40, 217, 0.18);
--sage: #9333EA; --sage-dark: #7E22CE; --sage-tint: rgba(147, 51, 234, 0.12);
--brass: #A78BFA; --brass-tint: rgba(167, 139, 250, 0.22);
}
/* ---------- BudgetFlow — verde smeraldo ---------- */
html[data-vertical="budgetflow"] {
--accent: #047857; --accent-dark: #036249; --accent-darker: #024C39; --accent-light: #34D399;
--accent-tint: rgba(4, 120, 87, 0.09); --accent-tint-strong: rgba(4, 120, 87, 0.18);
--sage: #B45309; --sage-dark: #92400E; --sage-tint: rgba(180, 83, 9, 0.12);
--brass: #10B981; --brass-tint: rgba(16, 185, 129, 0.20);
}
/* ---------- Palestra — arancio energia su antracite ---------- */
html[data-vertical="palestra"] {
--accent: #EA580C; --accent-dark: #C2410C; --accent-darker: #9A3412; --accent-light: #FB923C;
--accent-tint: rgba(234, 88, 12, 0.09); --accent-tint-strong: rgba(234, 88, 12, 0.18);
--sage: #0EA5E9; --sage-dark: #0284C7; --sage-tint: rgba(14, 165, 233, 0.12);
--brass: #FACC15; --brass-tint: rgba(250, 204, 21, 0.22);
}
/* ---------- StewardFlow — blu acciaio su grafite ---------- */
html[data-vertical="stewardflow"] {
--accent: #1D4ED8; --accent-dark: #1E40AF; --accent-darker: #1E3A8A; --accent-light: #60A5FA;
--accent-tint: rgba(29, 78, 216, 0.09); --accent-tint-strong: rgba(29, 78, 216, 0.18);
--sage: #475569; --sage-dark: #334155; --sage-tint: rgba(71, 85, 105, 0.12);
--brass: #38BDF8; --brass-tint: rgba(56, 189, 248, 0.20);
}
/* ---------- GuidaFlow — blu notte + oro (autoscuola) ---------- */
html[data-vertical="guidaflow"] {
--accent: #1E3A8A; --accent-dark: #172E6E; --accent-darker: #122355; --accent-light: #3B82F6;
--accent-tint: rgba(30, 58, 138, 0.09); --accent-tint-strong: rgba(30, 58, 138, 0.18);
--sage: #CA8A04; --sage-dark: #A16207; --sage-tint: rgba(202, 138, 4, 0.14);
--brass: #CA8A04; --brass-tint: rgba(202, 138, 4, 0.22);
}
/* ---------- SportFlow — alias palestra (retrocompatibilità) ---------- */
html[data-vertical="sportflow"] {
--accent: #EA580C; --accent-dark: #C2410C; --accent-darker: #9A3412; --accent-light: #FB923C;
--accent-tint: rgba(234, 88, 12, 0.09); --accent-tint-strong: rgba(234, 88, 12, 0.18);
--sage: #0EA5E9; --sage-dark: #0284C7; --sage-tint: rgba(14, 165, 233, 0.12);
--brass: #FACC15; --brass-tint: rgba(250, 204, 21, 0.22);
}
/* ---------- ScuolaFlow — alias guidaflow (retrocompatibilità) ---------- */
html[data-vertical="scuolaflow"] {
--accent: #1E3A8A; --accent-dark: #172E6E; --accent-darker: #122355; --accent-light: #3B82F6;
--accent-tint: rgba(30, 58, 138, 0.09); --accent-tint-strong: rgba(30, 58, 138, 0.18);
--sage: #CA8A04; --sage-dark: #A16207; --sage-tint: rgba(202, 138, 4, 0.14);
--brass: #CA8A04; --brass-tint: rgba(202, 138, 4, 0.22);
}
/* ---------- TattooFlow — crimson/ink ---------- */
html[data-vertical="tattooflow"] {
--accent: #9B1B1B; --accent-dark: #7A1212; --accent-darker: #5C0D0D; --accent-light: #C94040;
--accent-tint: rgba(155, 27, 27, 0.09); --accent-tint-strong: rgba(155, 27, 27, 0.18);
--sage: #5C3317; --sage-dark: #3E2210; --sage-tint: rgba(92, 51, 23, 0.13);
--brass: #D4AF37; --brass-tint: rgba(212, 175, 55, 0.22);
}
/* ---------- RistoFlow — terracotta/pomodoro ---------- */
html[data-vertical="ristoflow"] {
--accent: #C0392B; --accent-dark: #A12C20; --accent-darker: #7F2018; --accent-light: #E07A6E;
--accent-tint: rgba(192, 57, 43, 0.09); --accent-tint-strong: rgba(192, 57, 43, 0.18);
--sage: #E67E22; --sage-dark: #CA6510; --sage-tint: rgba(230, 126, 34, 0.13);
--brass: #D4A017; --brass-tint: rgba(212, 160, 23, 0.22);
}
/* ---------- Piattaforma (pre-login) — marchio ZcodedepthV ---------- */
html[data-vertical="platform"] {
--accent: #4F46E5; --accent-dark: #4338CA; --accent-darker: #3730A3; --accent-light: #818CF8;
--accent-tint: rgba(79, 70, 229, 0.09); --accent-tint-strong: rgba(79, 70, 229, 0.16);
--sage: #7C3AED; --sage-dark: #6D28D9; --sage-tint: rgba(124, 58, 237, 0.12);
--brass: #6366F1; --brass-tint: rgba(99, 102, 241, 0.20);
}
/* ---------- SuperAdmin — slate/indaco corporate ---------- */
html[data-vertical="superadmin"] {
--accent: #4F46E5; --accent-dark: #4338CA; --accent-darker: #3730A3; --accent-light: #818CF8;
--accent-tint: rgba(79, 70, 229, 0.09); --accent-tint-strong: rgba(79, 70, 229, 0.16);
--sage: #475569; --sage-dark: #334155; --sage-tint: rgba(71, 85, 105, 0.12);
--brass: #0EA5E9; --brass-tint: rgba(14, 165, 233, 0.16);
}
/* ---------- Tema scuro: accenti dal primario schiarito ----------
Le tonalità "dark/darker" qui sopra servono come TESTO sul bianco; sul fondo scuro
sparirebbero. In tema scuro tutte le varianti puntano al primario che la shell schiarisce
per ogni verticale (VerticalThemeFactory.DarkAccentCss). Specificità 0,2,1: batte i blocchi sopra. */
html[data-theme="dark"][data-vertical] {
--accent: var(--mud-palette-primary);
--accent-dark: var(--mud-palette-primary);
--accent-darker: var(--mud-palette-primary);
--accent-light: var(--mud-palette-primary-lighten);
--accent-tint: rgba(var(--mud-palette-primary-rgb), 0.12);
--accent-tint-strong: rgba(var(--mud-palette-primary-rgb), 0.22);
}
/* ===================== KEYFRAMES ===================== */
/* Ingresso delle pagine: dissolvenza con 4px di salita. Fill "backwards": finita l'animazione
non resta nessun transform, che altrimenti renderebbe l'elemento il riferimento dei figli
position:fixed (overlay, menu) — trappola già vista con la vecchia pageIn. */
@keyframes zd-page-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@keyframes zd-pop-in {
from { opacity: 0; transform: translateY(4px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes zd-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Nomi storici ancora usati da altri fogli: stessa resa sobria. */
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
/* ===================== BASE ===================== */
* { box-sizing: border-box; }
html, body {
font-family: var(--zd-font);
height: 100%;
margin: 0;
color: var(--zd-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Base dei rem invariata (15px, 14px su telefono): MudBlazor e tutti i fogli misurano in
rem, cambiarla ridimensionerebbe l'intera app. Il testo semplice usa il token. */
font-size: 15px;
line-height: 1.5;
}
body { font-size: var(--zd-font-size); }
/* Sfondo: TINTA UNITA, uguale per admin, clienti e login. !important perché
MudThemeProvider inietta il proprio background sul body. */
html,
body { background: var(--zd-canvas) !important; }
/* Le superfici di MudLayout restano trasparenti: il colore è quello del body. */
.mud-layout,
.mud-main-content { background: transparent !important; }
/* Footer sempre in fondo (sticky footer). Catena flex completa a partire da
.mud-layout: appbar e drawer sono position:fixed, l'unico figlio in flusso è il
main-content, che a sua volta è colonna flex e spinge l'AppFooter in fondo. */
.mud-layout {
display: flex;
flex-direction: column;
min-height: 100dvh;
height: auto;
}
.mud-layout > .mud-main-content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
/* Barra in alto ad altezza unica (MudBlazor la riduce a gradini su telefono). */
padding-top: var(--zd-topbar-height);
}
.mud-main-content > .mud-container {
flex: 1 0 auto;
}
/* Contenitore della pagina: respiro uniforme, più stretto su telefono. */
.mud-main-content > .zd-content {
padding-top: var(--zd-space-5);
padding-bottom: var(--zd-space-6);
}
.mud-typography { font-family: var(--zd-font); }
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
font-family: var(--zd-font);
font-weight: 650;
letter-spacing: -0.015em;
color: var(--zd-text);
}
/* Titoli "hero" (onboarding/booking pubblico): stessa famiglia del resto, solo più peso.
Il serif decorativo stonava con lo stile da gestionale. */
.auth-logo,
.mud-typography-h4.hero-title,
.mud-typography-h5.hero-title {
font-family: var(--zd-font);
font-weight: 700;
letter-spacing: -0.02em;
}
.mud-typography-overline {
color: var(--zd-text-3);
letter-spacing: 0.06em;
font-weight: 600;
}
.mud-text-secondary,
.mud-typography-body2.mud-text-secondary { color: var(--zd-text-2) !important; }
a, .mud-link { color: var(--accent-dark); }
a:hover { color: var(--accent-darker); }
::selection { background: var(--accent-tint-strong); color: var(--zd-text); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ===================== INGRESSO DELLE PAGINE =====================
I figli diretti del contenitore pagina sono nodi NUOVI a ogni cambio pagina (Blazor
rende @Body in linea): entrano con una dissolvenza breve. I re-render della stessa
pagina riusano i nodi e non la ripetono. Zed e i banner del layout restano fermi. */
.mud-main-content > .zd-content > *:not(.layout-banner):not(.zed-assist):not(.zed-hero-bar) {
animation: zd-page-in var(--zd-dur-slow) var(--zd-ease) backwards;
}
/* ===================== BARRA IN ALTO — bianca e piatta ===================== */
.mud-appbar {
background: var(--zd-topbar-bg) !important;
color: var(--zd-text) !important;
box-shadow: none !important;
border-bottom: 1px solid var(--zd-border);
}
.mud-appbar .mud-toolbar-appbar {
height: var(--zd-topbar-height);
gap: var(--zd-space-1);
padding-inline: var(--zd-space-3) var(--zd-space-4);
}
.zd-topbar__brand {
display: flex;
align-items: center;
gap: var(--zd-space-2);
margin-left: var(--zd-space-2);
min-width: 0;
}
.zd-topbar__name {
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.01em;
color: var(--zd-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Con il menu aperto su desktop il marchio è già in testa al menu: qui non si ripete. */
.zd-topbar__brand--when-closed { display: none; }
@media (max-width: 59.99em) {
.zd-topbar__brand--when-closed { display: flex; }
}
/* Frase fissa al centro dell'header, uguale per tutti i verticali: discreta. */
.appbar-tagline {
color: var(--zd-text-3) !important;
font-size: var(--zd-font-size-sm) !important;
white-space: nowrap;
}
@media (max-width: 74.99em) {
.appbar-tagline { display: none; }
}
.mud-appbar .mud-icon-button {
color: var(--zd-text-2) !important;
transition: background-color var(--zd-dur-fast) var(--zd-ease), color var(--zd-dur-fast) var(--zd-ease);
}
.mud-appbar .mud-icon-button .mud-icon-root { color: inherit !important; }
.mud-appbar .mud-icon-button:hover {
background: var(--zd-surface-hover) !important;
color: var(--zd-text) !important;
}
.mud-appbar .mud-button-root { color: var(--zd-text-2) !important; }
.mud-appbar .mud-text-secondary,
.mud-appbar .mud-typography-body1,
.mud-appbar .mud-typography-body2 { color: var(--zd-text-2) !important; }
/* Utente collegato: solo l'email, in una pastiglia (sparisce su telefono). L'iniziale
colorata accanto è stata tolta il 2026-10-09 su richiesta del titolare. */
.appbar-user {
display: flex;
align-items: center;
gap: var(--zd-space-2);
min-width: 0;
padding: 5px 12px;
border-radius: var(--zd-radius-pill);
border: 1px solid var(--zd-border);
background: var(--zd-surface);
}
.appbar-user__name {
font-size: var(--zd-font-size-sm);
color: var(--zd-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
/* Contatori della posta e di Telegram (MainLayout, solo SuperAdmin): pastiglia piccola
appoggiata all'angolo, con un anello del colore della barra al posto del bordo. */
.mail-badge .mud-badge {
min-width: 16px !important;
height: 16px !important;
padding: 0 4px !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
line-height: 16px !important;
border-radius: var(--zd-radius-pill) !important;
border: none !important;
box-shadow: 0 0 0 2px var(--zd-topbar-bg) !important;
transform: translate(30%, -30%) !important;
}
.mail-badge .mud-icon-button { padding: 8px; }
/* ===================== MENU LATERALE ===================== */
/* Scuro (--zd-sidebar-bg) in ogni area: admin e clienti. Del verticale resta solo
l'accento della voce attiva e del marchio in testa. */
.mud-drawer.zd-sidebar {
background: var(--zd-sidebar-bg) !important;
color: var(--zd-sidebar-text) !important;
border-right: 1px solid var(--zd-sidebar-border) !important;
box-shadow: none;
overflow: hidden; /* scorre solo l'area delle voci (.zd-nav) */
}
.zd-sidebar .mud-drawer-content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
/* Marchio in testa al menu: tessera con l'icona del verticale + nome e area. */
.zd-sidebar__brand {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--zd-space-3);
height: var(--zd-topbar-height);
padding: 0 var(--zd-space-5);
border-bottom: 1px solid var(--zd-sidebar-border);
}
.zd-sidebar__brand-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.zd-sidebar__name {
color: var(--zd-sidebar-text-strong);
font-weight: 700;
font-size: 0.98rem;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zd-sidebar__sub {
color: var(--zd-sidebar-section);
font-size: 0.72rem;
font-weight: 500;
}
.zd-brand-mark {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--zd-brand-gradient);
color: #FFFFFF;
}
.zd-brand-mark .mud-icon-root { color: #FFFFFF !important; font-size: 1.25rem; }
.zd-brand-mark--sm { width: 28px; height: 28px; border-radius: 8px; }
.zd-brand-mark--sm .mud-icon-root { font-size: 1.05rem; }
/* Nei verticali la tessera prende l'accento del settore (dettaglio, non sfondo). */
html:not([data-vertical="superadmin"]):not([data-vertical="platform"]) .zd-brand-mark {
background: var(--mud-palette-primary, var(--accent));
}
/* Area delle voci: scorre, ma SENZA barra di scorrimento visibile. L'indizio che c'è
altro sotto è una sfumatura in basso, accesa da js/nav.js solo quando serve. */
.zd-nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--zd-space-3) 0 var(--zd-space-5);
}
.zd-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.zd-nav.is-more-below {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
}
.zd-nav .mud-navmenu { padding: 0; }
/* Voce del menu */
.zd-sidebar .mud-nav-link {
position: relative;
display: flex;
align-items: center;
width: auto;
flex: 1 1 auto;
min-width: 0;
min-height: 38px;
margin: 1px var(--zd-space-3);
padding: 7px var(--zd-space-3);
border-radius: var(--zd-radius-sm);
color: var(--zd-sidebar-text) !important;
font-size: var(--zd-font-size);
font-weight: 500;
line-height: 1.35;
border: 0 !important;
transition: background-color var(--zd-dur-fast) var(--zd-ease), color var(--zd-dur-fast) var(--zd-ease);
}
.zd-sidebar .mud-nav-link .mud-nav-link-text { margin-left: var(--zd-space-3); margin-inline-start: var(--zd-space-3); min-width: 0; }
.zd-sidebar .mud-nav-link .mud-nav-link-icon,
.zd-sidebar .mud-nav-link .mud-icon-root {
color: inherit !important;
font-size: 1.2rem;
opacity: 0.85;
flex: 0 0 auto;
}
.zd-sidebar .mud-nav-link:hover:not(.mud-nav-link-disabled) {
background: var(--zd-sidebar-bg-2) !important;
color: var(--zd-sidebar-text-strong) !important;
}
.zd-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled) {
background: var(--zd-sidebar-active-bg) !important;
color: var(--zd-sidebar-text-strong) !important;
font-weight: 600 !important;
}
.zd-sidebar .mud-nav-link.active .mud-icon-root { opacity: 1; }
/* Barretta della voce attiva: il gradiente del marchio, dentro la pillola (mud-ripple ha
overflow:hidden e taglierebbe tutto ciò che sporge). */
.zd-sidebar .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--zd-brand-gradient);
}
.zd-sidebar .mud-nav-link:focus-visible {
outline: 2px solid rgba(139, 92, 246, 0.7);
outline-offset: -2px;
}
/* Etichetta con contatore (Assistenza, Richieste, errori di Sistema). */
.zd-nav-label {
display: flex;
align-items: center;
gap: var(--zd-space-2);
min-width: 0;
}
.zd-nav-label__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zd-nav-badge {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
border-radius: var(--zd-radius-pill);
background: var(--zd-danger);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
animation: zd-pop-in var(--zd-dur) var(--zd-ease) backwards;
}
/* Separatore tra sezioni (DividerBefore dei moduli). */
.zd-nav-sep {
height: 1px;
margin: var(--zd-space-3) var(--zd-space-5);
background: var(--zd-sidebar-border);
}
/* Gruppo ad albero: intestazione cliccabile + corpo che si apre con un'animazione fluida
(grid-template-rows 0fr → 1fr: altezza vera, senza misure scritte a mano). */
.zd-nav-group { margin: 2px 0; }
.zd-nav-group__head {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--zd-space-3);
width: calc(100% - 2 * var(--zd-space-3));
min-height: 40px;
margin: 1px var(--zd-space-3);
padding: 8px var(--zd-space-3);
border-radius: var(--zd-radius-sm);
color: var(--zd-sidebar-text);
font-size: var(--zd-font-size);
font-weight: 600;
cursor: pointer;
transition: background-color var(--zd-dur-fast) var(--zd-ease), color var(--zd-dur-fast) var(--zd-ease);
}
.zd-nav-group__head:hover { background: var(--zd-sidebar-bg-2); color: var(--zd-sidebar-text-strong); }
.zd-nav-group__head:focus-visible { outline: 2px solid rgba(139, 92, 246, 0.7); outline-offset: -2px; }
.zd-nav-group__icon { font-size: 1.2rem !important; color: inherit !important; opacity: 0.85; }
.zd-nav-group__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-nav-group__chevron {
font-size: 1.15rem !important;
color: var(--zd-sidebar-section) !important;
transition: transform var(--zd-dur) var(--zd-ease);
}
.zd-nav-group__head .zd-nav-badge { margin-left: 0; }
.zd-nav-group.is-open > .zd-nav-group__head { color: var(--zd-sidebar-text-strong); }
.zd-nav-group.is-open .zd-nav-group__chevron { transform: rotate(180deg); }
/* Gruppo chiuso che contiene la pagina corrente: un punto d'accento accanto al titolo. */
.zd-nav-group.has-active:not(.is-open) .zd-nav-group__title::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
vertical-align: middle;
border-radius: 50%;
background: var(--zd-brand-gradient);
}
.zd-nav-group__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--zd-dur-slow) var(--zd-ease);
}
.zd-nav-group.is-open > .zd-nav-group__body { grid-template-rows: 1fr; }
.zd-nav-group__inner {
min-height: 0;
overflow: hidden;
position: relative;
}
/* Rami dell'albero: filo verticale sottile a sinistra delle voci figlie. */
.zd-nav-group__inner::before {
content: "";
position: absolute;
left: calc(var(--zd-space-3) + 21px);
top: 4px;
bottom: 6px;
width: 1px;
background: var(--zd-sidebar-border);
}
.zd-nav-group__inner .mud-nav-link {
margin-left: calc(var(--zd-space-3) + 30px);
padding-left: var(--zd-space-3);
min-height: 34px;
font-size: var(--zd-font-size-sm);
}
.zd-nav-group__inner .mud-nav-link .mud-icon-root { font-size: 1.05rem; opacity: 0.7; }
/* Le voci entrano scivolando appena quando il gruppo si apre. */
.zd-nav-group.is-open .zd-nav-group__inner .mud-nav-link {
animation: zd-fade-in var(--zd-dur-slow) var(--zd-ease) backwards;
}
/* Add-on attivi del tenant (AddonNavSection): stessa resa, separati da un filo. */
.zd-sidebar .mud-navmenu > .mud-divider,
.zd-sidebar .mud-divider {
border-color: var(--zd-sidebar-border) !important;
margin: var(--zd-space-3) var(--zd-space-5);
}
.zd-sidebar .mud-typography,
.zd-sidebar .mud-typography-overline { color: var(--zd-sidebar-section); }
/* Telefono/tablet: il menu è un pannello sopra il contenuto, con velo morbido. */
.mud-drawer-responsive.zd-sidebar,
.mud-drawer-temporary.zd-sidebar { transition: transform var(--zd-dur-slow) var(--zd-ease), width var(--zd-dur-slow) var(--zd-ease); }
.mud-overlay-drawer { background: rgba(11, 10, 32, 0.38) !important; }
@media (max-width: 59.99em) {
.mud-drawer.zd-sidebar.mud-drawer--open { box-shadow: var(--zd-shadow-3); }
/* Tap target ≥ 44px su touch. */
.zd-sidebar .mud-nav-link,
.zd-nav-group__head { min-height: 44px; }
.zd-nav-group__inner .mud-nav-link { min-height: 42px; }
}
/* ===================== PAGE HEADER =====================
Titolo direttamente sul canvas, senza card né aloni: icona in tessera
tenue con l'accento, titolo scuro. */
.page-header {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative;
overflow: visible;
padding: 0 0 var(--zd-space-4) !important;
}
.page-header .mud-icon-root { color: var(--accent) !important; }
.page-header .mud-typography-h4,
.page-header .mud-typography-h5 {
color: var(--zd-text);
font-size: var(--zd-h1);
font-weight: 700;
letter-spacing: -0.02em;
}
/* ===================== PULSANTI ===================== */
.mud-button-root {
border-radius: var(--zd-radius-sm) !important;
text-transform: none !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
transition: background-color var(--zd-dur-fast) var(--zd-ease), color var(--zd-dur-fast) var(--zd-ease),
box-shadow var(--zd-dur-fast) var(--zd-ease), border-color var(--zd-dur-fast) var(--zd-ease);
}
.mud-button-filled { box-shadow: var(--zd-shadow-1) !important; }
.mud-button-filled:hover { box-shadow: var(--zd-shadow-2) !important; }
.mud-button-filled:active { box-shadow: none !important; }
/* Primario: colore pieno del tema (accento del verticale), niente gradienti né riflessi. */
.mud-button-filled.mud-button-filled-primary { color: var(--mud-palette-primary-text, #FFFFFF) !important; }
.mud-button-outlined.mud-button-outlined-default {
border-color: var(--zd-border-strong) !important;
color: var(--zd-text-2) !important;
}
.mud-button-outlined.mud-button-outlined-default:hover { background: var(--zd-surface-hover) !important; }
.mud-icon-button { transition: background-color var(--zd-dur-fast) var(--zd-ease), color var(--zd-dur-fast) var(--zd-ease); }
.mud-button-group-outlined .mud-button-root { border-color: var(--zd-border-strong) !important; }
/* ===================== CARD / PAPER ===================== */
.mud-paper {
border-radius: var(--zd-radius) !important;
border: 1px solid var(--zd-border);
box-shadow: var(--zd-shadow-1) !important;
background: var(--zd-surface) !important;
}
.mud-paper.mud-elevation-0 { box-shadow: none !important; }
.mud-paper.page-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Pannelli a comparsa: niente bordo/ombra della card (li gestiscono popover e menu). */
.mud-popover.mud-paper { border-radius: var(--zd-radius) !important; }
.mud-appbar.mud-paper, .mud-drawer.mud-paper { border-radius: 0 !important; }
.mud-card {
border-radius: var(--zd-radius) !important;
border: 1px solid var(--zd-border);
box-shadow: var(--zd-shadow-1) !important;
transition: box-shadow var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease);
}
.mud-card:hover { box-shadow: var(--zd-shadow-2) !important; }
.mud-card-header {
padding: var(--zd-space-4) var(--zd-space-5);
border-bottom: 1px solid var(--zd-border);
}
.mud-card-header .mud-typography-h6 { font-size: 1rem; }
.mud-card-content { padding: var(--zd-space-5); }
.mud-card-actions { padding: var(--zd-space-3) var(--zd-space-4); gap: var(--zd-space-2); }
/* ===================== TABELLE ===================== */
.mud-data-grid,
.mud-table {
border-radius: var(--zd-radius) !important;
border: 1px solid var(--zd-border);
box-shadow: var(--zd-shadow-1) !important;
overflow: hidden;
background: var(--zd-surface) !important;
}
.mud-data-grid .mud-table-head,
.mud-table .mud-table-head { background: var(--zd-surface-2) !important; }
.mud-data-grid .mud-table-head th,
.mud-data-grid .mud-table-head .mud-table-cell,
.mud-table .mud-table-head th {
color: var(--zd-text-3) !important;
font-weight: 600 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.7rem;
border-bottom: 1px solid var(--zd-border);
padding-top: 12px;
padding-bottom: 12px;
}
.mud-table-cell {
border-bottom: 1px solid var(--zd-border);
color: var(--zd-text);
font-size: var(--zd-font-size);
}
.mud-table-row { transition: background-color var(--zd-dur-fast) var(--zd-ease); }
.mud-table-row:hover { background: var(--zd-surface-hover) !important; }
.mud-table-pagination,
.mud-table-toolbar {
border-top: 1px solid var(--zd-border);
background: var(--zd-surface);
color: var(--zd-text-2);
}
/* ===================== DIALOG ===================== */
.mud-overlay-dialog { background: rgba(15, 23, 42, 0.36) !important; }
.mud-dialog {
border-radius: var(--zd-radius-lg) !important;
overflow: hidden;
box-shadow: var(--zd-shadow-3) !important;
border: 1px solid var(--zd-border);
animation: zd-pop-in var(--zd-dur) var(--zd-ease) both;
}
.mud-dialog-title {
background: var(--zd-surface) !important;
color: var(--zd-text) !important;
font-weight: 650 !important;
font-size: 1.05rem;
padding: 18px 24px !important;
border-bottom: 1px solid var(--zd-border);
}
.mud-dialog-title .mud-icon-root { color: var(--accent) !important; }
.mud-dialog-content { padding: 24px !important; color: var(--zd-text); }
.mud-dialog-actions {
background: var(--zd-surface-2) !important;
padding: 14px 24px !important;
gap: var(--zd-space-2);
border-top: 1px solid var(--zd-border);
}
.mud-message-box .mud-dialog-content { padding: 24px !important; }
/* ===================== CHIP ===================== */
.mud-chip {
border-radius: var(--zd-radius-pill) !important;
font-weight: 600;
font-size: 0.76rem;
}
.mud-chip.mud-chip-color-primary { background: var(--accent-tint-strong) !important; color: var(--accent-darker) !important; }
.mud-chip.mud-chip-color-secondary { background: var(--zd-surface-hover) !important; color: var(--zd-text-2) !important; }
.mud-chip.mud-chip-color-success { background: var(--zd-success-soft) !important; color: var(--zd-success-ink) !important; }
.mud-chip.mud-chip-color-error { background: var(--zd-danger-soft) !important; color: var(--zd-danger-ink) !important; }
.mud-chip.mud-chip-color-warning { background: var(--zd-warning-soft) !important; color: var(--zd-warning-ink) !important; }
.mud-chip.mud-chip-color-info { background: var(--zd-info-soft) !important; color: var(--zd-info-ink) !important; }
.mud-chip.mud-chip-color-default { background: var(--zd-surface-hover) !important; color: var(--zd-text-2) !important; }
.mud-chip.mud-clickable { transition: background-color var(--zd-dur-fast) var(--zd-ease), box-shadow var(--zd-dur-fast) var(--zd-ease); }
.mud-chip.mud-clickable:hover { box-shadow: var(--zd-shadow-1); }
/* ===================== AVVISI ===================== */
.mud-alert { border-radius: var(--zd-radius) !important; font-weight: 500; }
.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-standard-info { background: var(--zd-info-soft) !important; color: var(--zd-info-ink) !important; }
.mud-alert.mud-alert-text-success,
.mud-alert.mud-alert-standard-success { background: var(--zd-success-soft) !important; color: var(--zd-success-ink) !important; }
.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-standard-warning { background: var(--zd-warning-soft) !important; color: var(--zd-warning-ink) !important; }
.mud-alert.mud-alert-text-error,
.mud-alert.mud-alert-standard-error { background: var(--zd-danger-soft) !important; color: var(--zd-danger-ink) !important; }
.mud-alert.mud-alert-filled-success { background: var(--zd-success) !important; }
.mud-alert.mud-alert-filled-error { background: var(--zd-danger) !important; }
.mud-alert.mud-alert-filled-warning { background: var(--zd-warning) !important; }
.mud-alert.mud-alert-filled-info { background: var(--zd-info) !important; }
/* ===================== LISTE ===================== */
.mud-list-item {
border-radius: var(--zd-radius-sm);
transition: background-color var(--zd-dur-fast) var(--zd-ease);
}
.mud-list-item:hover { background: var(--zd-surface-hover) !important; }
.mud-list .mud-divider { border-color: var(--zd-border); }
/* ===================== CAMPI / SELECT / PICKER ===================== */
.mud-input-outlined .mud-input-outlined-border {
border-color: var(--zd-border-strong) !important;
border-radius: var(--zd-radius-sm) !important;
transition: border-color var(--zd-dur-fast) var(--zd-ease), box-shadow var(--zd-dur-fast) var(--zd-ease);
}
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--zd-text-3) !important; }
.mud-input-outlined.mud-focused .mud-input-outlined-border {
border-color: var(--accent) !important;
border-width: 1px !important;
box-shadow: 0 0 0 3px var(--accent-tint-strong);
}
.mud-input-label.mud-input-label-animated.mud-focused { color: var(--accent-dark) !important; }
.mud-input-error .mud-input-outlined-border { border-color: var(--zd-danger) !important; }
.mud-input-helper-text.mud-input-error { color: var(--zd-danger) !important; }
.mud-input-control input::placeholder { color: var(--zd-text-3); }
/* popover di select / datepicker / menu */
.mud-popover {
border-radius: var(--zd-radius) !important;
box-shadow: var(--zd-shadow-3) !important;
border: 1px solid var(--zd-border);
}
.mud-popover.mud-popover-open { animation: zd-pop-in var(--zd-dur-fast) var(--zd-ease) both; }
.mud-list-item-clickable.mud-selected-item {
background: var(--accent-tint-strong) !important;
color: var(--accent-darker) !important;
}
.mud-picker-toolbar { background: var(--accent) !important; color: #FFFFFF !important; }
.mud-picker-toolbar .mud-typography { color: #FFFFFF !important; }
.mud-picker .mud-picker-calendar-day.mud-selected { background: var(--accent) !important; color: #fff !important; }
.mud-picker .mud-picker-calendar-day:hover { background: var(--accent-tint) !important; }
.mud-switch.mud-switch-checked .mud-switch-track { background: var(--accent) !important; opacity: 0.5; }
.mud-switch.mud-switch-checked .mud-switch-thumb { color: var(--accent) !important; }
.mud-checkbox .mud-checkbox-true,
.mud-checkbox .mud-checkbox-indeterminate { color: var(--accent) !important; }
/* ===================== TAB ===================== */
.mud-tab {
text-transform: none !important;
font-weight: 600 !important;
color: var(--zd-text-2) !important;
letter-spacing: 0 !important;
transition: color var(--zd-dur-fast) var(--zd-ease), background-color var(--zd-dur-fast) var(--zd-ease);
}
.mud-tab:hover { background: var(--zd-surface-hover); color: var(--zd-text) !important; }
.mud-tab.mud-tab-active { color: var(--accent-dark) !important; }
.mud-tab-slider.mud-tab-slider-horizontal {
background: var(--accent) !important;
height: 2px;
border-radius: 2px 2px 0 0;
}
/* ===================== AVATAR / BADGE / PROGRESS ===================== */
.mud-avatar.mud-avatar-color-primary { background: var(--accent) !important; color: #fff !important; }
.mud-avatar.mud-avatar-color-secondary { background: var(--sage) !important; color: #fff !important; }
.mud-badge .mud-badge-content { background: var(--accent) !important; color: #fff !important; }
.mud-badge.mud-badge-error, .mud-badge .mud-badge.mud-theme-error { background: var(--zd-danger) !important; }
.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar { background: var(--accent) !important; }
.mud-progress-linear { border-radius: 6px; background: var(--zd-surface-hover) !important; }
.mud-progress-circular.mud-progress-circular-color-primary .mud-progress-circular-circle { color: var(--accent) !important; }
/* ===================== DIVISORI / TOOLTIP ===================== */
.mud-divider { border-color: var(--zd-border) !important; }
.mud-tooltip {
background: var(--zd-text) !important;
color: #FFFFFF !important;
border-radius: 6px !important;
font-size: 0.75rem;
font-weight: 500;
padding: 6px 10px;
}
/* ===================== CALENDAR ===================== */
.calendar-grid {
display: grid;
grid-template-columns: 70px repeat(7, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.calendar-slot {
background: var(--surface);
min-height: 54px;
padding: 4px;
cursor: pointer;
transition: background-color var(--ease), box-shadow var(--ease);
position: relative;
}
.calendar-slot.calendar-header {
background: var(--surface-2);
color: var(--text);
text-align: center;
padding: 10px 4px;
cursor: default;
border-bottom: 2px solid var(--accent);
}
.calendar-slot.calendar-header .mud-typography-overline { color: var(--accent-dark) !important; font-weight: 700; }
.calendar-slot.calendar-header .mud-typography-h6 { color: var(--text) !important; }
.calendar-slot.calendar-time {
background: var(--surface-2);
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
.calendar-slot.calendar-cell:hover {
background: var(--accent-tint);
box-shadow: inset 0 0 0 2px var(--accent);
z-index: 1;
}
/* La cella dispone le prenotazioni in colonna e le lascia crescere in altezza:
un appuntamento riempie l'intero rettangolo dello slot (min 30 min = 1 cella). */
.calendar-slot.calendar-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.appointment-chip {
border-radius: 7px;
padding: 4px 8px;
font-size: 0.76rem;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
width: 100%;
/* riempie tutta l'altezza del rettangolo dello slot */
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
/* testo mandato a capo e sempre visibile: niente troncamento con ellissi */
white-space: normal;
overflow-wrap: anywhere;
overflow: hidden;
box-shadow: var(--shadow-xs);
/* leggibilità garantita su qualsiasi colore di servizio */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}
.appointment-chip:hover {
transform: scale(1.03);
filter: brightness(1.06);
box-shadow: var(--shadow-sm);
z-index: 2;
}
/* ===================== STAT CARD (dashboard / pagamenti) =====================
Card bianca, bordo neutro, numero protagonista. Niente aloni né icone fluttuanti:
l'unico movimento è l'ombra che si alza appena al passaggio. */
.stat-card,
.stat-card.mud-card-outlined {
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;
transition: box-shadow var(--zd-dur) var(--zd-ease), border-color var(--zd-dur) var(--zd-ease);
position: relative;
overflow: hidden;
}
.stat-card:hover,
.stat-card.mud-card-outlined:hover {
border-color: var(--zd-border-strong) !important;
box-shadow: var(--zd-shadow-2) !important;
}
.stat-card .mud-card-content { padding: 18px 20px; }
.stat-card .mud-typography-overline {
color: var(--zd-text-3);
letter-spacing: 0.06em;
}
.stat-card .mud-typography-h4 {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 2px;
color: var(--zd-text);
}
/* icona (dove presente) in tessera tonda con l'accento tenue */
.stat-card .mud-icon-root {
color: var(--accent) !important;
background: var(--accent-tint);
border-radius: 10px;
padding: 8px;
box-sizing: content-box;
}
/* ===================== PLAN CARDS (pricing — SuperAdmin / billing) =====================
Schede piano moderne: niente bordo laterale, prezzo protagonista, glow accent in
alto, hover lift e footer azioni separato. */
.plan-card {
height: 100%;
display: flex !important;
flex-direction: column;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
overflow: hidden;
position: relative;
background:
var(--surface) !important;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}
.plan-card:hover {
transform: translateY(-2px);
border-color: var(--accent-light) !important;
box-shadow: var(--shadow-md) !important;
}
.plan-card-body { padding: 22px 22px 14px; flex: 1 1 auto; }
.plan-card-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.plan-card-name { font-weight: 700 !important; letter-spacing: -0.01em; }
.plan-card-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 2px;
}
.plan-price-amount {
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--accent-dark);
line-height: 1.15;
}
.plan-price-period { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; }
.plan-price-yearly { color: var(--text-faint); font-size: 0.8rem; margin-top: 1px; }
.plan-card-desc { margin-top: 10px !important; min-height: 38px; }
.plan-card-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.plan-card-actions {
border-top: 1px solid var(--border);
background: var(--surface-2) !important;
padding: 8px 14px !important;
}
.plan-inactive { opacity: 0.62; }
.plan-inactive:hover { transform: none; }
/* ===================== PACKAGE CARDS (listino pacchetti) =====================
Card di listino con numero sessioni protagonista, prezzo per sessione e
footer azioni. Stesso linguaggio delle plan-card. */
.pkg-card {
height: 100%;
display: flex;
flex-direction: column;
background:
var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 18px 18px 10px;
position: relative;
overflow: hidden;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}
.pkg-card:hover {
transform: translateY(-2px);
border-color: var(--accent-light);
box-shadow: var(--shadow-md), 0 8px 26px var(--accent-tint-strong);
}
.pkg-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 6px;
}
.pkg-card-qty {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--accent-dark);
line-height: 1;
display: flex;
align-items: baseline;
gap: 5px;
}
.pkg-card-qty span {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-faint);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pkg-card-name { font-weight: 700 !important; letter-spacing: -0.01em; }
.pkg-card-price {
display: flex;
align-items: baseline;
gap: 10px;
margin: 10px 0 4px;
}
.pkg-price-amount {
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
}
.pkg-price-per { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.pkg-card-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 8px 0 12px;
}
.pkg-card-actions {
display: flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border);
}
/* ===================== PURCHASE CARDS (abbonamenti clienti) ===================== */
.purchase-card {
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px 18px 12px;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}
.purchase-card:hover {
transform: translateY(-2px);
border-color: var(--accent-light);
box-shadow: var(--shadow-md);
}
.purchase-card-closed { opacity: 0.72; }
.purchase-card-closed:hover { transform: none; }
.purchase-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.purchase-card-title { flex: 1 1 auto; min-width: 0; }
.purchase-card-title .mud-typography { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchase-progress { display: flex; flex-direction: column; gap: 6px; }
.purchase-progress-label {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-muted);
}
.purchase-progress-label strong { color: var(--accent-dark); font-size: 0.95rem; }
.purchase-card-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 0.78rem;
color: var(--text-muted);
}
.purchase-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.purchase-card-meta .mud-icon-root { font-size: 0.95rem; color: var(--text-faint); }
.purchase-expired { color: var(--error); font-weight: 600; }
.purchase-expired .mud-icon-root { color: var(--error); }
.purchase-card-actions {
display: flex;
align-items: center;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* ===================== LOGIN E PAGINE PRE-ACCESSO =====================
Card bianca al centro con bordo sottile e ombra leggera, sul grigio dell'app.
Un po' di personalità (2026-10-09, richiesta del titolare) senza tornare alle
scene animate: sul grigio di fondo due ampie velature BIANCHE ferme e un filo
d'indaco, una barretta nel gradiente del marchio in cima alla card, alone
attorno al logo, il nome nel gradiente del marchio e il motto sotto la card.
Niente sfere, griglie o righe; l'unico movimento è l'ingresso della card. */
.login-bg {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--zd-space-4);
padding: var(--zd-space-5) var(--zd-space-4);
background:
radial-gradient(70rem 42rem at 12% -12%, rgba(255, 255, 255, .95), transparent 62%),
radial-gradient(56rem 40rem at 108% 112%, rgba(255, 255, 255, .85), transparent 60%),
radial-gradient(44rem 30rem at 92% 4%, color-mix(in srgb, var(--zd-brand) 7%, transparent), transparent 70%),
radial-gradient(36rem 26rem at 0% 100%, color-mix(in srgb, #22D3EE 6%, transparent), transparent 70%),
var(--zd-canvas);
}
.login-card {
position: relative;
width: 100%;
max-width: 420px;
border-radius: var(--zd-radius-lg);
border: 1px solid var(--zd-border);
background: var(--zd-surface);
box-shadow: var(--zd-shadow-2);
overflow: hidden;
animation: zd-pop-in var(--zd-dur-slow) var(--zd-ease) both;
}
/* Barretta nel gradiente del marchio (viola → azzurro, come l'icona dell'app). */
.login-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: var(--zd-brand-gradient);
}
.login-card-body {
background: var(--zd-surface);
padding: 36px 36px 28px;
text-align: center;
}
.login-card-body .login-form,
.login-card-body form { text-align: left; }
/* Marchio dell'app (Login) e icona di pagina (2FA, password, email). */
.login-logo {
display: block;
width: 60px;
height: 60px;
margin: 4px auto 18px;
border-radius: 16px;
/* alone: anello bianco e luce morbida nei colori del marchio */
box-shadow:
0 0 0 6px var(--zd-surface),
0 0 0 7px color-mix(in srgb, var(--zd-brand) 14%, transparent),
0 14px 32px -10px rgba(139, 92, 246, .55);
}
.login-brand-mark {
width: 48px;
height: 48px;
margin: 0 auto 16px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--zd-brand-soft);
}
.login-brand-mark .mud-icon-root {
color: var(--zd-brand) !important;
font-size: 1.6rem;
}
.login-form-title {
font-size: 1.375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--zd-text);
margin-bottom: 4px;
}
.login-form-sub {
font-size: var(--zd-font-size);
color: var(--zd-text-2);
margin-bottom: 24px;
}
.login-form { margin-bottom: 20px; }
.login-btn {
height: 46px !important;
font-size: 0.95rem !important;
border-radius: var(--zd-radius-sm) !important;
}
.login-signup {
text-align: center;
font-size: var(--zd-font-size-sm);
color: var(--zd-text-3);
margin: 14px 0 8px;
}
.login-signup a { color: var(--zd-brand); font-weight: 600; text-decoration: none; }
.login-signup a:hover { color: var(--zd-brand-hover); text-decoration: underline; }
.login-policy-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.78rem;
color: var(--zd-text-3);
margin: 18px 0 8px;
padding-top: 16px;
border-top: 1px solid var(--zd-border);
}
.login-policy-links a { color: var(--zd-text-2); text-decoration: none; transition: color var(--zd-dur-fast) var(--zd-ease); }
.login-policy-links a:hover { color: var(--zd-brand); text-decoration: underline; }
.login-policy-links span { color: var(--zd-border-strong); }
.login-copyright {
text-align: center;
font-size: 0.74rem;
color: var(--zd-text-3);
}
/* Nome della piattaforma nel gradiente del marchio (solo nella pagina di accesso). */
.login-form-title--brand {
font-size: 1.5rem;
background: linear-gradient(135deg, #7C3AED 0%, var(--zd-brand) 45%, #0891B2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Motto sotto la card. */
.login-motto {
margin: 0;
font-size: var(--zd-font-size-sm);
font-weight: 500;
letter-spacing: .01em;
color: var(--zd-text-3);
text-align: center;
}
/* Le pagine pre-accesso hanno l'accento della piattaforma (indaco) anche se il
[data-vertical] arriva da un verticale per un redirect. */
.login-bg .mud-button-filled.mud-button-filled-primary { background: var(--zd-brand) !important; }
.login-bg .mud-button-filled.mud-button-filled-primary:hover { background: var(--zd-brand-hover) !important; }
@media (max-width: 37.49em) {
.login-bg { justify-content: flex-start; padding: var(--zd-space-6) var(--zd-space-4); }
.login-card { box-shadow: var(--zd-shadow-1); }
.login-card-body { padding: 28px 22px 22px; }
}
/* ===================== REGISTRAZIONE / ONBOARDING / PRENOTAZIONE =====================
Stessa regola: tinta unita e card bianca. */
.auth-hero {
position: relative;
/* 100dvh: con 100vh la barra degli indirizzi dei browser mobili accorcia il viewport
reale e i pulsanti a fondo card finiscono sotto la barra. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--zd-space-5);
background: var(--zd-canvas);
}
.auth-card {
position: relative;
background: var(--zd-surface) !important;
border-radius: var(--zd-radius-lg) !important;
box-shadow: var(--zd-shadow-2) !important;
border: 1px solid var(--zd-border);
overflow: hidden;
max-width: 420px;
width: 100%;
animation: zd-pop-in var(--zd-dur-slow) var(--zd-ease) both;
}
/* Larghezze delle varianti (erano inline sulle MudPaper e vincevano sull'override mobile). */
.auth-card--medium { max-width: 560px; }
.auth-card--wide { max-width: 640px; }
/* Padding della card (sostituisce pa-8 di MudBlazor, che non si riduceva su mobile). */
.auth-card-pad { padding: 32px !important; }
.auth-card .auth-logo {
font-weight: 700;
font-size: 1.5rem;
color: var(--zd-text);
text-align: center;
}
.auth-card .auth-logo .auth-icon { color: var(--accent); margin: 0 0.35rem; }
.auth-card .auth-subtitle {
color: var(--zd-text-2);
text-align: center;
}
.auth-card .auth-divider {
height: 1px;
width: 100%;
margin: 1rem 0 1.25rem;
background: var(--zd-border);
}
/* ===================== SELETTORE VERTICALE (registrazione) ===================== */
.vertical-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
gap: 8px;
}
.vertical-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 12px 8px;
background: var(--zd-surface);
border: 1px solid var(--zd-border-strong);
border-radius: var(--zd-radius-sm);
color: var(--zd-text-2);
font: inherit;
cursor: pointer;
transition: border-color var(--zd-dur-fast) var(--zd-ease), background-color var(--zd-dur-fast) var(--zd-ease),
color var(--zd-dur-fast) var(--zd-ease), box-shadow var(--zd-dur-fast) var(--zd-ease);
}
.vertical-option:hover {
border-color: var(--accent-light);
background: var(--accent-tint);
color: var(--accent-darker);
}
.vertical-option .mud-icon-root { color: var(--accent); }
.vertical-option-selected,
.vertical-option-selected:hover {
border-color: var(--accent);
background: var(--accent-tint-strong);
color: var(--accent-darker);
box-shadow: inset 0 0 0 1px var(--accent);
}
.vertical-option-name {
font-size: 0.78rem;
font-weight: 600;
text-align: center;
line-height: 1.2;
}
/* ===================== BARRE DI SCORRIMENTO =====================
Sottili e neutre nella pagina; il menu laterale non ne ha (vedi .zd-nav). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--zd-border-strong);
border-radius: 6px;
border: 2px solid var(--zd-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--zd-text-3); }
* { scrollbar-width: thin; scrollbar-color: var(--zd-border-strong) transparent; }
/* ===================== SNACKBAR ===================== */
.mud-snackbar { border-radius: var(--zd-radius) !important; box-shadow: var(--zd-shadow-3) !important; }
.mud-snackbar.mud-alert-filled-success { background: var(--success) !important; }
.mud-snackbar.mud-alert-filled-error { background: var(--error) !important; }
.mud-snackbar.mud-alert-filled-warning { background: var(--warning) !important; }
.mud-snackbar.mud-alert-filled-info { background: var(--zd-info) !important; }
/* ===========================================================
RESPONSIVE
=========================================================== */
/* Tab scrollabili ovunque: su schermi stretti non spezzano il layout */
/* --- Tablet (≤ 960px) --- */
@media (max-width: 960px) {
.mud-main-content > .mud-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
.mud-dialog-content { padding: 20px !important; }
.mud-dialog-actions { padding: 14px 20px !important; }
.mud-card-content { padding: 16px; }
.calendar-slot { min-height: 48px; }
.stat-card .mud-typography-h4 { font-size: 1.5rem; }
/* toolbar di tabelle/griglie: i controlli vanno a capo invece di traboccare */
.mud-table-toolbar { flex-wrap: wrap; gap: 8px; min-height: unset; padding: 10px 12px; }
}
/* --- Mobile (≤ 600px) --- */
@media (max-width: 600px) {
html, body { font-size: 14px; }
h4, .mud-typography-h4 { font-size: 1.45rem; }
h5, .mud-typography-h5 { font-size: 1.2rem; }
h6, .mud-typography-h6 { font-size: 1.02rem; }
/* contenuto a tutta larghezza con margini ridotti */
.mud-main-content > .mud-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* gruppi di bottoni e stack orizzontali: a capo invece di traboccare */
.mud-button-group-root { flex-wrap: wrap; }
.mud-toolbar { flex-wrap: wrap; gap: 6px; }
/* le stat card occupano tutta la riga */
.stat-card { width: 100%; }
/* tabelle larghe → scroll orizzontale invece di rompere il layout */
.mud-data-grid, .mud-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mud-table-container { overflow-x: auto; }
/* dialog a tutta larghezza */
.mud-dialog {
margin: 12px !important;
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
border-radius: var(--zd-radius) !important;
}
.mud-dialog-title { padding: 16px 18px !important; font-size: 1.02rem; }
.mud-dialog-content { padding: 16px 18px !important; }
.mud-dialog-actions { padding: 12px 18px !important; flex-wrap: wrap; }
.mud-dialog-actions .mud-button-root { flex: 1 1 auto; }
/* page header: contenuti che vanno a capo */
.page-header .mud-stack-row { flex-wrap: wrap; gap: 8px; }
/* calendario compatto */
.calendar-grid { grid-template-columns: 52px repeat(7, minmax(96px, 1fr)); }
.calendar-slot { min-height: 46px; padding: 3px; }
.calendar-slot.calendar-header { padding: 8px 2px; }
.appointment-chip { font-size: 0.7rem; padding: 3px 6px; }
.stat-card .mud-typography-h4 { font-size: 1.4rem; }
.mud-card-content { padding: 14px; }
.mud-card-header { padding: 14px 16px; }
/* login */
.auth-hero { padding: 16px; }
.auth-card,
.auth-card--medium,
.auth-card--wide { max-width: 100%; }
/* 32px per lato su 360px lasciavano ~264px di contenuto: campi e label andavano stretti. */
.auth-card-pad { padding: 24px !important; }
.auth-card .auth-logo { font-size: 1.4rem; }
/* page header senza card: su mobile più compatto */
.page-header { padding: 2px 0 12px !important; }
}
/* --- Mobile piccolo (≤ 380px) --- */
@media (max-width: 380px) {
.calendar-grid { grid-template-columns: 44px repeat(7, minmax(78px, 1fr)); }
.stat-card .mud-typography-h4 { font-size: 1.3rem; }
.auth-hero { padding: 12px; }
.auth-card-pad { padding: 18px !important; }
}
/* --- Card Assistenza / Support: bordo un filo più visibile --- */
.support-card {
border: 1px solid var(--zd-border-strong) !important;
}
/* --- Badge storico dell'Assistenza (ora .zd-nav-badge nel menu): resta per chi lo usa ancora,
senza lampeggio — un contatore che pulsa all'infinito distrae e si impara a ignorarlo. --- */
.support-nav-label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.support-blink-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--zd-radius-pill);
background: var(--zd-danger);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
}
/* ===================== FOOTER ===================== */
/* Chiaro e discreto, sul canvas: un filo sopra, testo secondario. */
.app-footer {
background: transparent;
border-top: 1px solid var(--zd-border);
padding: 14px 24px;
flex-shrink: 0;
}
.app-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 16px;
max-width: 1800px;
margin: 0 auto;
}
.app-footer-copy {
font-size: 0.76rem;
color: var(--zd-text-3);
}
.app-footer-tagline {
flex: 1 1 auto;
text-align: center;
font-size: 0.78rem;
color: var(--zd-text-3);
white-space: nowrap;
}
.app-footer-links {
display: flex;
align-items: center;
gap: 10px;
}
.app-footer-links a {
font-size: 0.76rem;
color: var(--zd-text-2);
text-decoration: none;
transition: color var(--zd-dur-fast) var(--zd-ease);
}
.app-footer-links a:hover { color: var(--zd-text); text-decoration: underline; }
.app-footer-sep { color: var(--zd-border-strong); font-size: 0.76rem; }
@media (max-width: 59.99em) {
.app-footer-tagline { display: none; }
}
@media (max-width: 37.49em) {
.app-footer { padding: 12px 16px; }
.app-footer-inner { flex-direction: column; align-items: flex-start; gap: 3px; }
}
/* ===================== POLICY PAGES (privacy / cookie) ===================== */
.policy-section {
margin-bottom: 2.2rem;
}
.policy-heading {
color: var(--accent-dark) !important;
font-size: 1rem !important;
font-weight: 700 !important;
margin-bottom: 0.75rem !important;
}
.policy-list .mud-list-item { padding-top: 4px !important; padding-bottom: 4px !important; }
.policy-list .mud-list-item .mud-icon-root {
font-size: 0.55rem !important;
color: var(--accent) !important;
margin-top: 2px;
align-self: flex-start;
}
.policy-table {
border-radius: var(--r-md) !important;
overflow: hidden;
font-size: 0.84rem;
}
.policy-table thead th {
background: var(--surface-2) !important;
color: var(--text-muted) !important;
font-weight: 700 !important;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 14px !important;
}
.policy-table tbody td {
padding: 9px 14px !important;
color: var(--text);
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.policy-table tbody tr:last-child td { border-bottom: none; }
.policy-table code {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
font-size: 0.78rem;
color: var(--accent-dark);
font-family: 'Menlo', 'Consolas', monospace;
white-space: nowrap;
}
/* ===========================================================
UTILITY DI STATO (caricamento, vuoto)
Il vecchio layer "Flow 2.0" (aurora nell'header, filo animato,
riflessi sui pulsanti, icone fluttuanti, ingressi scaglionati,
pulsazione dei badge) è stato eliminato il 2026-10-08: restano
solo le utility che le pagine usano davvero.
=========================================================== */
@keyframes skeletonWave {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@keyframes dotBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* ---- SKELETON — shimmer di caricamento ----
Uso: */
.skeleton {
border-radius: var(--zd-radius-sm);
background: linear-gradient(90deg, var(--zd-surface-2) 25%, var(--zd-surface-hover) 50%, var(--zd-surface-2) 75%);
background-size: 200% 100%;
animation: skeletonWave 1.4s linear infinite;
}
.mud-skeleton { border-radius: var(--zd-radius-sm) !important; }
/* ---- EMPTY STATE ----
Uso: wrapper .empty-state con dentro MudIcon + testi */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 48px 24px;
text-align: center;
color: var(--zd-text-2);
}
.empty-state .mud-icon-root {
font-size: 2.6rem;
color: var(--zd-text-3);
}
/* ---- LOADING DOTS — indicatore a tre puntini ----
Uso: */
.loading-dots { display: inline-flex; gap: 5px; align-items: center; }
.loading-dots i {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
animation: dotBounce 1.2s ease-in-out infinite;
}
.loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-dots i:nth-child(3) { animation-delay: 0.3s; }
/* ===================== ACCESSIBILITÀ — riduzione movimento =====================
I token --zd-dur* valgono già 0ms (design-tokens.css); qui si spengono le
animazioni che non passano dai token o che girano all'infinito. */
@media (prefers-reduced-motion: reduce) {
.mud-main-content > .zd-content > *,
.login-card, .auth-card, .mud-dialog, .mud-popover.mud-popover-open,
.zd-nav-badge, .zd-nav-group .mud-nav-link,
.skeleton, .loading-dots i { animation: none !important; }
.zd-nav-group__body, .zd-nav-group__chevron { transition: none !important; }
/* NOTA: occhi e micro-animazioni della mascotte Zed NON vengono spenti qui di
proposito — richiesta esplicita del cliente (vedi mascot.css). */
}
/* ═══════════════════════════════════════════════════════════════════════════
Calendario abbonamenti (SuperAdmin) — /superadmin/calendario
Regola portante: la TINTA della chip identifica il verticale (var --cal-brand,
iniettata inline dalla pagina), il BORDO identifica lo stato dell'evento. Con
venti verticali, codificare entrambi col colore renderebbe un insoluto
indistinguibile da un rinnovo regolare, anche per chi vede bene i colori.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Striscia KPI ── */
.cal-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.cal-kpi {
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
border-left: 4px solid var(--accent);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.cal-kpi--money { border-left-color: var(--zd-success); }
.cal-kpi--trial { border-left-color: var(--zd-warning); }
.cal-kpi--danger { border-left-color: var(--zd-danger); }
.cal-kpi__label {
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary, var(--zd-text-3));
}
.cal-kpi__value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
/* ── Chip evento (condivisa da mese e settimana) ── */
.cal-chip {
--cal-brand: var(--zd-text-3);
display: flex;
align-items: center;
gap: 6px;
padding: 3px 7px;
margin-top: 3px;
border-radius: 7px;
border-left: 3px solid var(--cal-brand);
background: color-mix(in srgb, var(--cal-brand) 12%, transparent);
font-size: .72rem;
line-height: 1.25;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.cal-chip:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}
.cal-chip__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--cal-brand);
flex: 0 0 auto;
}
.cal-chip__txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.cal-chip__stack { display: flex; flex-direction: column; min-width: 0; }
.cal-chip__sub { font-size: .66rem; opacity: .75; white-space: nowrap; }
/* Stato: solo il bordo, mai la tinta di fondo (che appartiene al verticale). */
.cal-chip--trial { border-left-style: dashed; }
.cal-chip--projected { border-left-style: dotted; opacity: .72; }
.cal-chip--pastdue { border-left-color: var(--zd-danger); border-left-width: 4px; background: rgba(220, 38, 38, .10); }
.cal-chip--cancelled { text-decoration: line-through; opacity: .6; }
.cal-chip--activation{ border-left-color: var(--zd-success); }
/* ── Vista MESE ── */
.cal-month {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--border-strong);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
overflow: hidden;
}
.cal-month__dow {
background: var(--surface-2);
padding: 9px 8px;
text-align: center;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary, var(--zd-text-3));
position: sticky;
top: 0;
z-index: 2;
}
.cal-month__cell {
background: var(--surface);
min-height: 118px;
padding: 6px 7px 8px;
display: flex;
flex-direction: column;
}
.cal-month__cell--weekend { background: var(--surface-2); }
.cal-month__cell--out { opacity: .45; }
.cal-month__cell--today { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cal-month__num {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .8rem;
font-weight: 600;
margin-bottom: 2px;
}
/* Anello, non riempimento: il pieno ruberebbe attenzione agli insoluti. */
.cal-today {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid var(--accent);
color: var(--accent);
font-weight: 700;
}
.cal-month__count {
font-size: .62rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 9px;
background: var(--surface-2);
color: var(--mud-palette-text-secondary, var(--zd-text-3));
}
.cal-month__more {
margin-top: 3px;
font-size: .68rem;
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.cal-month__more:hover { text-decoration: underline; }
/* ── Vista SETTIMANA ── */
.cal-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--border-strong);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
overflow: hidden;
}
.cal-week__col {
background: var(--surface);
display: flex;
flex-direction: column;
min-height: 340px;
}
.cal-week__col--today { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cal-week__head {
padding: 9px 8px;
text-align: center;
background: var(--surface-2);
display: flex;
flex-direction: column;
gap: 2px;
position: sticky;
top: 0;
z-index: 2;
}
.cal-week__dow {
font-size: .68rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary, var(--zd-text-3));
}
.cal-week__num { font-size: 1.05rem; font-weight: 700; }
.cal-week__body { flex: 1; padding: 6px 7px; overflow-y: auto; }
.cal-week__empty { text-align: center; opacity: .3; padding-top: 14px; }
.cal-week__foot {
padding: 7px 8px;
text-align: right;
font-size: .74rem;
font-weight: 700;
border-top: 1px solid var(--border);
min-height: 30px;
}
.cal-week__foot--on { color: var(--zd-success); }
/* ── Legenda ── */
.cal-legend {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .74rem;
color: var(--mud-palette-text-secondary, var(--zd-text-3));
}
.cal-legend__mark {
width: 14px; height: 0;
border-top: 3px solid var(--accent);
border-radius: 2px;
}
.cal-legend__mark--projected { border-top-style: dotted; }
.cal-legend__mark--trial { border-top-style: dashed; border-top-color: var(--zd-warning); }
.cal-legend__mark--pastdue { border-top-color: var(--zd-danger); border-top-width: 4px; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.cal-kpis { grid-template-columns: repeat(2, 1fr); }
.cal-month__cell { min-height: 96px; }
}
@media (max-width: 800px) {
/* La settimana ha 7 colonne piene di orari: sotto questa soglia scorre in orizzontale. */
.cal-week { display: block; overflow-x: auto; white-space: nowrap; }
.cal-week > * {
display: inline-block;
vertical-align: top;
white-space: normal;
width: 140px;
}
.cal-week__col { min-height: 280px; }
}
/* ── Vista MESE su telefono ───────────────────────────────────────────────────
Qui c'era la stessa regola della settimana, e sul mese non funzionava: con
`display:block`, figli `inline-block` da 140px e `white-space:nowrap`, le sette
intestazioni più i ~35 giorni finivano tutti su UNA riga larga quasi 6000px. Il
risultato non era un calendario che scorre, era un nastro in cui non si capiva più
quale giorno stesse sotto quale colonna: di fatto, su telefono il calendario non si
vedeva. Un mese è una griglia 7×5: resta una griglia, solo compatta. Al posto dei
nomi dei tenant — che in 50px non ci stanno comunque — resta il contatore, e il
dettaglio del giorno si apre toccando la cella. */
@media (max-width: 800px) {
.cal-month {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
white-space: normal;
overflow: hidden;
}
.cal-month > * { display: block; width: auto; }
.cal-month__dow { padding: 6px 2px; font-size: .58rem; letter-spacing: 0; }
.cal-month__cell { min-height: 56px; padding: 4px 3px 5px; }
.cal-month__num { font-size: .8rem; }
/* I riquadri col nome del tenant e il "+N altri" spariscono: resta il numero del
giorno col contatore, che è l'informazione che serve a colpo d'occhio. */
.cal-month .cal-chip,
.cal-month__more { display: none; }
.cal-month__count { font-size: .58rem; padding: 1px 4px; }
}
/* Tutta la cella è un bersaglio: prima si poteva toccare solo un riquadro o "+N altri",
che su telefono ora non ci sono più. */
.cal-month__cell { cursor: pointer; }
@media (max-width: 560px) {
/* Un KPI per riga sono quattro schede impilate: ~340px solo per quattro numeri.
Due per riga li fa stare in uno sguardo. */
.cal-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cal-kpi { padding: 8px 10px; }
.cal-kpi__label { font-size: .62rem; line-height: 1.25; }
.cal-kpi__value { font-size: 1.05rem; line-height: 1.2; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Popover con UNA sola barra di scorrimento.
MudSelect limita in altezza sia il popover sia la MudList interna: quando le
voci superano lo spazio disponibile compaiono due scrollbar annidate, e
trascinare quella esterna non muove l'elenco. Qui lo scroll resta al popover
e la lista interna scorre insieme al contenitore.
Generalizza la stessa correzione già applicata a .vertical-multiselect-popover.
═══════════════════════════════════════════════════════════════════════════ */
/* Lo scroll vive SOLO sul contenitore del popover (div id="popovercontent-…").
Le due forme del selettore coprono entrambi i casi: la classe applicata
direttamente su quell'elemento oppure su un suo antenato. */
.zcd-single-scroll-popover,
.zcd-single-scroll-popover .mud-popover {
max-height: 340px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* MudBlazor limita anche la lista interna (MaxHeight di MudSelect diventa uno stile
inline sull'elemento): serve !important, che da foglio di stile ha comunque la
precedenza sull'inline, altrimenti la seconda barra resta. */
.zcd-single-scroll-popover .mud-list,
.zcd-single-scroll-popover .mud-list-padding,
.zcd-single-scroll-popover .mud-menu-list,
.zcd-single-scroll-popover .mud-select-menu {
max-height: none !important;
overflow: visible !important;
}
/* ── Console SQL del SuperAdmin ────────────────────────────────────────────────
Colonne dell'albero dello schema: cliccabili per accodare il nome virgolettato
alla query. Serve un segnale visivo che siano cliccabili, altrimenti sembrano
una semplice etichetta e nessuno le prova. */
.sqlc__col {
cursor: pointer;
padding: 1px 4px;
border-radius: 4px;
line-height: 1.35;
}
.sqlc__col:hover {
background: var(--mud-palette-action-default-hover);
}
/* ============================================================================
Barra in alto su telefono: il pulsante "Esci" deve restare raggiungibile.
Misurato su iPhone 12 (390px): la barra aveva scrollWidth 416px contro clientWidth 390,
cioè sbordava di 26px, e l'elemento più a destra — il logout — era il primo a uscire dallo
schermo. La larghezza se la prendeva l'indirizzo email dell'utente.
============================================================================ */
@media (max-width: 599.98px) {
.mud-appbar .appbar-user { display: none; }
/* Icone un filo più strette: quattro pulsanti più il menu devono stare in 390px. */
.mud-appbar .mud-icon-button { padding: 8px; }
}
/* ============================================================================
Barra di ritorno delle pagine legali (.policy-nav).
Le informative si aprivano in una scheda nuova (target="_blank") e su telefono da lì
non si tornava indietro: ora restano nell'app e portano con sé i propri comandi, in
cima e in fondo, perché sono pagine lunghe.
============================================================================ */
.policy-nav {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.policy-nav:last-child { margin: 16px 0 0; }
.policy-nav__spacer { flex: 1 1 auto; }
.policy-nav .mud-button-root { text-transform: none; font-weight: 600; }
@media (max-width: 599.98px) {
/* Il contenitore delle informative ha pa-8 (32px): su telefono è troppo. */
.policy-nav .mud-button-root { padding: 0 10px; min-width: 0; }
}
/* ============================================================================
Calendario — barra dei comandi e dei livelli (.cal-toolbar).
Su telefono questa barra occupava ~430px prima ancora di mostrare un giorno: il
gruppo Prec./Oggi/Succ., il nome del mese con un min-width di 230px scritto inline,
la scelta Mese/Settimana/Giorno, il filtro Verticale e quattro interruttori che
andavano a capo su due righe. Sei fasce sovrapposte per quattro decisioni.
Strategia: le misure fisse escono dall'inline e finiscono qui, dove possono cedere;
sopra resta una riga sola con periodo e navigazione, sotto vista e verticale si
dividono la riga, e i livelli diventano UNA striscia che scorre in orizzontale —
lo stesso schema dei contatori-filtro dell'elenco tenant, così il gesto è già noto.
============================================================================ */
.cal-toolbar__label { font-weight: 600; min-width: 230px; }
.cal-toolbar__levels-label { font-weight: 700; letter-spacing: .04em; }
@media (max-width: 599.98px) {
.cal-toolbar { padding: 10px !important; }
/* Prima riga: frecce e nome del periodo accanto, non uno sopra l'altro. */
.cal-toolbar__row { gap: 8px !important; }
.cal-toolbar__nav { flex: 0 0 auto; }
.cal-toolbar__nav .mud-button-root { padding: 0 8px; min-width: 0; font-size: .78rem; }
.cal-toolbar__label {
min-width: 0;
flex: 1 1 auto;
font-size: .95rem;
text-align: right;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Seconda riga: vista e verticale si dividono lo spazio invece di impilarsi. */
.cal-toolbar__view { flex: 1 1 100%; }
.cal-toolbar__view .mud-toggle-group { width: 100%; }
.cal-toolbar__view .mud-toggle-item { flex: 1 1 0; font-size: .78rem; padding-inline: 4px; }
.cal-toolbar__vertical { flex: 1 1 100%; min-width: 0; }
.cal-toolbar__vertical .mud-select { width: 100%; }
/* Livelli: una riga sola che scorre. flex-wrap:wrap arriva da MudStack e va vinto,
altrimenti gli interruttori tornano a impilarsi invece di scorrere. */
.cal-toolbar__levels {
flex-wrap: nowrap !important;
overflow-x: auto;
gap: 12px !important;
margin-top: 10px !important;
padding-bottom: 2px;
scrollbar-width: none;
/* Sfumatura a destra: dice che la striscia continua oltre il bordo. */
mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
}
.cal-toolbar__levels::-webkit-scrollbar { display: none; }
.cal-toolbar__levels > * { flex: 0 0 auto; }
.cal-toolbar__levels .mud-switch { margin: 0; }
.cal-toolbar__levels .mud-switch-label { font-size: .78rem; }
.cal-toolbar__levels-label { font-size: .6rem; }
}
/* ── Schermata d'avvio (pagine senza prerender, vedi App.razor e js/boot.js) ──────────────────
Sostituisce la pagina bianca dei primi istanti mentre parte il circuito: l'icona di Zed al
centro sul fondo a tinta unita dell'app e una barretta sottile che scorre sotto. Sfuma via
appena il layout è disegnato. Colori scritti per esteso: questo blocco deve funzionare anche
se design-tokens.css non è ancora arrivato. */
#zcd-boot {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 22px;
background: var(--zd-canvas);
transition: opacity 240ms cubic-bezier(.2, .8, .2, 1);
}
#zcd-boot img {
width: 64px;
height: 64px;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -6px rgba(15, 23, 42, .18);
animation: zcd-boot-in 280ms cubic-bezier(.2, .8, .2, 1) both;
}
.zcd-boot__bar {
position: relative;
width: 96px;
height: 3px;
border-radius: 3px;
overflow: hidden;
background: var(--zd-border);
}
.zcd-boot__bar::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 40%;
border-radius: 3px;
background: var(--zd-brand);
animation: zcd-boot-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
#zcd-boot.zcd-boot--out { opacity: 0; pointer-events: none; }
@keyframes zcd-boot-in {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: none; }
}
@keyframes zcd-boot-slide {
from { transform: translateX(-100%); }
to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
#zcd-boot img, .zcd-boot__bar::after { animation: none; }
#zcd-boot { transition: none; }
}
/* Pallino del colore scelto (servizi, categorie, sale, gruppi…): il colore resta inline,
il contorno viene dai token e regge anche il tema scuro (2026-10-09; prima era #ccc/#fff inline). */
.zd-swatch {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--zd-surface), 0 0 0 3px var(--zd-border-strong);
}
.zd-swatch--sm { width: 24px; height: 24px; }
.zd-swatch--square { border-radius: var(--zd-radius-sm); }
.zd-swatch--sm.zd-swatch--square { border-radius: 4px; }
/* Barra di accettazione di Termini + Accordo art. 28 (LegalAcceptanceBanner, 2026-10-09):
una riga sottile al posto dell'avviso alto tre righe. Su telefono il testo va a capo e il
pulsante scende a tutta larghezza. */
.legal-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding: 8px 8px 8px 14px;
border: 1px solid color-mix(in srgb, var(--zd-warning) 35%, transparent);
border-radius: var(--zd-radius);
background: var(--zd-warning-soft);
color: var(--zd-text);
font-size: var(--zd-font-size-sm);
line-height: 1.4;
}
.legal-bar__icon { color: var(--zd-warning-ink); flex: 0 0 auto; }
.legal-bar__text { flex: 1 1 auto; min-width: 0; }
.legal-bar__text strong { color: var(--zd-warning-ink); }
.legal-bar__text a { color: var(--zd-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal-bar__sep { margin: 0 4px; color: var(--zd-text-3); }
.legal-bar__btn.mud-button-root { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 599.98px) {
.legal-bar { flex-wrap: wrap; align-items: flex-start; padding: 10px 12px; }
.legal-bar__text { flex-basis: calc(100% - 30px); }
.legal-bar__btn.mud-button-root { flex-basis: 100%; }
}
/* Navigazione in basso su telefono (Shared/BottomNav, 2026-10-09). Sopra i 600px non esiste: lì
il menu laterale resta lo strumento principale. Il contenuto si allunga di altrettanto, così
l'ultima riga di una pagina non resta sotto la barra. */
.zd-bottom-nav { display: none; }
@media (max-width: 599.98px) {
.zd-bottom-nav {
position: fixed;
inset: auto 0 0 0;
z-index: 1250;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
background: var(--zd-surface);
border-top: 1px solid var(--zd-border);
box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, .25);
}
.zd-bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 52px;
padding: 4px 2px;
border: 0;
border-radius: var(--zd-radius-sm);
background: none;
color: var(--zd-text-3);
font: inherit;
font-size: 0.68rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.zd-bottom-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-bottom-nav__item--active { color: var(--mud-palette-primary, var(--zd-brand)); }
.zd-bottom-nav__item--active .mud-icon-root {
background: color-mix(in srgb, var(--mud-palette-primary, var(--zd-brand)) 14%, transparent);
border-radius: var(--zd-radius-pill);
padding: 2px 14px;
box-sizing: content-box;
}
.mud-layout:has(.zd-bottom-nav) .mud-main-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
/* Il piè di pagina dell'app resta sopra la barra. */
}
/* ==== css/mascot.css ==== */
/* ===========================================================
Mascotte "Zed" 2.0 — stili e animazioni
-----------------------------------------------------------
Componente: Shared/Mascot.razor. Tutto il colore arriva dalle
variabili tema (--accent-*, --surface, --ink) definite in
app.css per [data-vertical]: nessun colore di brand hardcoded.
Gli occhi luminosi derivano dall'accent del tema e ciclano
tinta tramite hue-rotate: restano coerenti col verticale.
Namespace CSS: .zcd-mascot / .zm-* — nessuna collisione con
le classi del design system Flow.
=========================================================== */
/* Registrate come per poterle animare in modo fluido (senza
@property un'animazione su custom property "scatta" da un valore
all'altro invece di sfumare). Usate dagli occhi/glow: qui gira
davvero il ciclo giallo/arancione richiesto, non solo un hue-rotate
(che partendo da un blu non arriva mai a un giallo/arancione vero). */
@property --zm-eye-core { syntax: ''; inherits: true; initial-value: #DFF2FF; }
@property --zm-eye-edge { syntax: ''; inherits: true; initial-value: #8FC6E8; }
@property --zm-glow { syntax: ''; inherits: true; initial-value: #8FC6E8; }
.zcd-mascot {
--mascot-size: 120px;
/* Valori di partenza (fallback se @property non supportato): tinta del
verticale. L'animazione zcd-eye-color-cycle li porta poi su giallo/
arancione e torna. */
--zm-eye-core: color-mix(in srgb, var(--accent-light, #C99670) 32%, #FFFFFF);
--zm-eye-edge: color-mix(in srgb, var(--accent-light, #C99670) 72%, #FFFFFF);
--zm-glow: color-mix(in srgb, var(--accent-light, #C99670) 80%, #FFFFFF);
animation: zcd-eye-color-cycle 9s ease-in-out infinite;
display: inline-flex;
align-items: flex-start;
gap: 0.875rem;
max-width: 100%;
}
.zcd-mascot__figure {
width: var(--mascot-size);
flex: none;
filter: drop-shadow(0 6px 14px rgba(20, 16, 12, 0.12));
}
.zcd-mascot__figure svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Tutte le parti animate via transform usano il proprio bounding box */
.zm-float, .zm-head, .zm-eyes, .zm-eye, .zm-arm-r, .zm-shadow,
.zm-antenna, .zm-halo, .zm-chest, .zm-sheen {
transform-box: fill-box;
transform-origin: center;
}
/* ---------- Animazioni di base (idle) ---------- */
/* Fluttuazione: ampiezza 12px + micro-rollio, chiaramente percepibile */
.zm-float { animation: zcd-float 4.2s ease-in-out infinite; }
.zm-shadow { animation: zcd-shadow 4.2s ease-in-out infinite; }
/* Battito di ciglia: doppio blink ogni ~3.8s */
.zm-eye { animation: zcd-blink 3.8s ease-in-out infinite; }
/* Occhi: glow permanente + ciclo di tinta (hue-rotate) + drift dello sguardo.
Il filter base garantisce il glow anche con reduced-motion. */
.zm-eyes {
filter: drop-shadow(0 0 3px var(--zm-glow)) drop-shadow(0 0 9px var(--zm-glow));
animation:
zcd-look 8s ease-in-out infinite,
zcd-eyeglow 6.5s ease-in-out infinite;
}
/* Led antenna, alone, nucleo petto, anelli pod: pulsano sfalsati */
.zm-antenna { animation: zcd-pulse 2.6s ease-in-out infinite; }
.zm-halo { animation: zcd-halo 2.6s ease-in-out infinite; }
.zm-chest { animation: zcd-core 2.2s ease-in-out infinite; }
.zm-ear { animation: zcd-pulse 3.4s ease-in-out 0.8s infinite; }
/* Led di stato sul corpo: si accendono in sequenza */
.zm-led { opacity: 0.25; animation: zcd-led 1.8s ease-in-out infinite; }
.zm-led + .zm-led { animation-delay: 0.3s; }
.zm-led + .zm-led + .zm-led { animation-delay: 0.6s; }
/* Sheen diagonale che attraversa il visore ogni ~7s */
.zm-sheen { animation: zcd-sheen 7s ease-in-out infinite; }
/* La testa reagisce con una transizione morbida (hover, mood) */
.zm-head {
transform-origin: 50% 90%;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- Reazione al passaggio del mouse ---------- */
.zcd-mascot:hover .zm-head { transform: rotate(-6deg) translateY(-2px); }
.zcd-mascot:hover .zm-arm-r {
transform-origin: 50% 10%;
animation: zcd-wave 1s ease-in-out;
}
.zcd-mascot:hover .zm-antenna { animation: zcd-pulse 0.7s ease-in-out infinite; }
.zcd-mascot:hover .zm-halo { animation: zcd-halo 0.7s ease-in-out infinite; }
/* Gli occhi si illuminano di più quando ricevono attenzione */
.zcd-mascot:hover .zm-eyes {
animation:
zcd-look 8s ease-in-out infinite,
zcd-eyeglow 2.5s ease-in-out infinite;
}
/* ---------- Mood ---------- */
/* Elementi condizionali: nascosti di default */
.zm-mouth-happy, .zm-cheek, .zm-think, .zm-question { opacity: 0; visibility: hidden; }
/* happy: sorriso e guance, niente grille */
.zcd-mascot--happy .zm-mouth-neutral { opacity: 0; visibility: hidden; }
.zcd-mascot--happy .zm-mouth-happy { opacity: 1; visibility: visible; }
.zcd-mascot--happy .zm-cheek { opacity: 0.55; visibility: visible; }
/* thinking: sguardo in alto fisso + puntini che si accendono in sequenza */
.zcd-mascot--thinking .zm-eyes {
animation: zcd-eyeglow 6.5s ease-in-out infinite;
transform: translate(3px, -4px);
}
.zcd-mascot--thinking .zm-think { opacity: 1; visibility: visible; }
.zcd-mascot--thinking .zm-think-dot { animation: zcd-think 1.8s ease-in-out infinite; }
.zcd-mascot--thinking .zm-think-dot:nth-child(2) { animation-delay: 0.3s; }
.zcd-mascot--thinking .zm-think-dot:nth-child(3) { animation-delay: 0.6s; }
/* confused: testa inclinata e punto interrogativo */
.zcd-mascot--confused .zm-head { transform: rotate(6deg); }
.zcd-mascot--confused:hover .zm-head { transform: rotate(-6deg) translateY(-2px); }
.zcd-mascot--confused .zm-question {
opacity: 1;
visibility: visible;
animation: zcd-question 2.4s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
/* ---------- Fumetto ---------- */
.zcd-mascot__bubble {
position: relative;
align-self: center;
background: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E3DFD8);
border-radius: var(--r-md, 14px);
padding: 0.625rem 0.875rem;
font-size: 0.9rem;
line-height: 1.45;
color: var(--text, #2C2521);
box-shadow: var(--shadow-sm, 0 2px 6px rgba(20, 16, 12, 0.06));
max-width: 34ch;
animation: zcd-bubble-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
/* Coda del fumetto: punta verso la figura (a sinistra nel layout in riga) */
.zcd-mascot__bubble::before {
content: '';
position: absolute;
left: -5px;
top: 50%;
width: 10px;
height: 10px;
background: inherit;
border-left: 1px solid var(--border, #E3DFD8);
border-bottom: 1px solid var(--border, #E3DFD8);
transform: translateY(-50%) rotate(45deg);
}
/* ---------- Variante impilata (empty state, 404) ---------- */
.zcd-mascot--stack {
flex-direction: column;
align-items: center;
text-align: center;
}
.zcd-mascot--stack .zcd-mascot__bubble { align-self: center; }
.zcd-mascot--stack .zcd-mascot__bubble::before {
left: 50%;
top: -5px;
border: none;
border-left: 1px solid var(--border, #E3DFD8);
border-top: 1px solid var(--border, #E3DFD8);
transform: translateX(-50%) rotate(45deg);
}
/* Mascotte "di sezione" (accanto ai titoli pagina/verticale): oscilla dolcemente
e si illumina, come il nome "Zed" nell'assistente compatto. Il float agisce su un
gruppo INTERNO all'SVG (.zm-float) e il bagliore è un filter sul wrap: nessuno dei
due tocca il transform:scale che mascot-follow.js applica per posizionarla, quindi
il movimento non interferisce con l'aggancio sopra l'icona del titolo. */
.zcd-mascot-anchor .zm-float {
animation: zcd-float 4.2s ease-in-out infinite;
}
/* L'ombra di terra resta ferma: non ha senso pulsare sopra un'icona di titolo. */
.zcd-mascot-anchor .zm-shadow {
animation: none;
}
.zcd-mascot-anchor .zcd-mascot-figure-wrap {
animation: zcd-section-glow 2.6s ease-in-out infinite;
}
@keyframes zcd-section-glow {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #A87545) 70%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
.zcd-mascot-anchor .zm-float,
.zcd-mascot-anchor .zcd-mascot-figure-wrap {
animation: none;
}
}
/* ---------- Contesti d'uso ---------- */
/* Login: mascotte di benvenuto — accanto alla card su desktop, impilata sopra su mobile/tablet */
.mascot-login {
position: relative;
z-index: 1;
margin-inline-end: 2.5rem;
align-self: center;
}
@media (max-width: 59.99em) {
.mascot-login {
margin-inline-end: 0;
margin-block-end: 0.5rem;
transform: scale(0.8);
}
}
@media (max-width: 380px) {
.mascot-login { transform: scale(0.68); }
}
/* Mascotte "di sezione": prende il POSTO dell'icona del titolo di ogni
pagina (.page-header .mud-icon-root.mud-svg-icon), che viene nascosta via
JS — non più "a fianco" del titolo, ma esattamente al suo posto, stessa
dimensione. z-index alto: deve stare sopra le card come lo sfondo
fluttuante. */
.zcd-mascot-anchor {
position: fixed;
z-index: 35;
cursor: pointer;
/* niente transition su top/left/opacity: l'ancora deve scattare ESATTAMENTE
sopra l'icona reale ad ogni cambio pagina, uno spostamento animato
farebbe vedere la mascotte "viaggiare" da un punto vecchio. Nascosta
di default: mascot-follow.js la rende visibile SOLO dopo aver calcolato
la posizione corretta sulla pagina corrente, così non si vede mai né
nel punto della pagina precedente né "saltare" in quello nuovo. */
opacity: 0;
}
/* Il wrap riceve lo scale calcolato via JS in base alla dimensione
dell'icona sostituita: SEPARATO dall'anchor apposta, altrimenti anche il
pannello/menu (fratello, sotto) si rimpicciolirebbe insieme alla figura. */
.zcd-mascot-figure-wrap {
display: block;
transform-origin: top left;
transition: transform 0.15s ease-out;
}
.zcd-mascot-anchor .zcd-mascot__bubble,
.zcd-mascot-anchor .zcd-mascot-toast {
position: absolute;
top: calc(100% + 10px);
/* Ancorato al bordo SINISTRO della mascotte: ora sta al posto
dell'icona del titolo, quindi vicino al bordo SINISTRO dell'area di
contenuto (accanto alla sidebar) — aprire verso destra (non più verso
sinistra) evita che il pannello finisca nascosto dietro la sidebar. */
left: 0;
right: auto;
white-space: normal;
width: max-content;
max-width: min(30ch, calc(100vw - 2.5rem));
}
.zcd-mascot-anchor .zcd-mascot__bubble::before {
left: 14px;
right: auto;
top: -5px;
border: none;
border-left: 1px solid var(--border, #E3DFD8);
border-top: 1px solid var(--border, #E3DFD8);
transform: rotate(45deg);
}
/* Messaggio transitorio ("come se parlasse"): stessa forma del fumetto ma
sparisce da sola dopo pochi secondi (gestito da MainLayout via MascotSignal),
la mascotte resta al suo posto. */
.zcd-mascot-toast {
background: var(--surface, #FFFFFF);
border: 1px solid var(--accent-light, #C99670);
border-radius: var(--r-md, 14px);
padding: 0.55rem 0.8rem;
font-size: 0.86rem;
font-weight: 600;
color: var(--accent-dark, #8B5D38);
box-shadow: var(--shadow-md, 0 8px 24px rgba(20, 16, 12, 0.12));
animation: zcd-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
pointer-events: none;
}
/* Pagina 404 */
.zcd-notfound {
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 2rem 1rem;
text-align: center;
}
.zcd-notfound__home {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.625rem 1.25rem;
border-radius: var(--r-sm, 10px);
background: var(--accent, #A87545);
color: var(--text-on-accent, #FFFFFF);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: var(--shadow-sm, 0 2px 6px rgba(20, 16, 12, 0.06));
transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.zcd-notfound__home:hover {
background: var(--accent-dark, #8B5D38);
transform: translateY(-1px);
}
.zcd-notfound__home:focus-visible {
outline: 2px solid var(--accent-dark, #8B5D38);
outline-offset: 2px;
}
/* Empty state generico con mascotte (Addons, ...) */
.zcd-empty-mascot {
display: flex;
justify-content: center;
padding: 2rem 1rem;
}
/* ---------- Keyframes ---------- */
@keyframes zcd-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(1.4deg); }
}
@keyframes zcd-shadow {
0%, 100% { transform: scaleX(1); opacity: 0.12; }
50% { transform: scaleX(0.78); opacity: 0.06; }
}
/* Doppio battito di ciglia, rapido e vivace */
@keyframes zcd-blink {
0%, 86%, 100% { transform: scaleY(1); }
88%, 90% { transform: scaleY(0.06); }
92% { transform: scaleY(1); }
94%, 96% { transform: scaleY(0.06); }
98% { transform: scaleY(1); }
}
@keyframes zcd-look {
0%, 30%, 100% { transform: translateX(0); }
38%, 52% { transform: translateX(5px); }
60%, 88% { transform: translateX(-5px); }
}
/* Glow degli occhi: intensità che respira (il COLORE non è più qui — vedi
zcd-eye-color-cycle sotto, che cambia davvero --zm-glow/--zm-eye-*). */
@keyframes zcd-eyeglow {
0%, 100% { filter: drop-shadow(0 0 3px var(--zm-glow)) drop-shadow(0 0 9px var(--zm-glow)) brightness(1); }
35% { filter: drop-shadow(0 0 5px var(--zm-glow)) drop-shadow(0 0 14px var(--zm-glow)) brightness(1.18); }
70% { filter: drop-shadow(0 0 4px var(--zm-glow)) drop-shadow(0 0 11px var(--zm-glow)) brightness(1.08); }
}
/* Ciclo di colore reale degli occhi: tinta del verticale -> giallo -> arancione
-> tinta del verticale. Richiede @property qui sopra per interpolare invece
di scattare da un colore all'altro. */
@keyframes zcd-eye-color-cycle {
0%, 100% {
--zm-eye-core: color-mix(in srgb, var(--accent-light, #C99670) 32%, #FFFFFF);
--zm-eye-edge: color-mix(in srgb, var(--accent-light, #C99670) 72%, #FFFFFF);
--zm-glow: color-mix(in srgb, var(--accent-light, #C99670) 80%, #FFFFFF);
}
30% { --zm-eye-core: #FFF3B0; --zm-eye-edge: #FFC53D; --zm-glow: #FFB300; }
65% { --zm-eye-core: #FFDCB0; --zm-eye-edge: #FF9F45; --zm-glow: #FF7A1A; }
}
@keyframes zcd-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes zcd-halo {
0%, 100% { opacity: 0.10; transform: scale(1); }
50% { opacity: 0.40; transform: scale(1.35); }
}
@keyframes zcd-core {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.65; transform: scale(1.18); }
}
@keyframes zcd-led {
0%, 100% { opacity: 0.25; }
30%, 50% { opacity: 1; }
}
@keyframes zcd-sheen {
0%, 55% { transform: translateX(-46px); }
85%, 100% { transform: translateX(120px); }
}
@keyframes zcd-wave {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-44deg); }
50% { transform: rotate(-14deg); }
75% { transform: rotate(-36deg); }
}
@keyframes zcd-think {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
@keyframes zcd-question {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-4px) rotate(8deg); }
}
@keyframes zcd-bubble-in {
from { opacity: 0; transform: translateY(6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* NOTA: nessuna regola prefers-reduced-motion qui (rimossa): richiesta
esplicita del cliente, le animazioni (mascotte inclusa) restano sempre
attive a prescindere dalle impostazioni di sistema. */
/* ==== css/docs-assistant.css ==== */
/* ============================================================
Assistente della documentazione ("Chiedi a Zed").
Usato da Verticals\Barbiere\Barbiere.Web\Components\DocsAssistant.razor.
Namespace classi: .zed-assist / .zed-turn / .zed-typing
Riusa le variabili di tema (--accent, --surface, --ink) come mascot.css.
============================================================ */
.zed-assist {
position: relative;
overflow: hidden;
margin-bottom: 1.5rem;
padding: 1.5rem 1.75rem;
/* Con la riga unica non c'è più nulla sotto la barra di ricerca: il fondo
si stringe al minimo, il respiro lo dà già il margine esterno. */
padding-bottom: 3px;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
linear-gradient(180deg, var(--zd-surface) 0%, var(--zd-surface-2) 100%);
}
/* --- Hero: mascotte + intro + barra di ricerca --- */
.zed-assist__hero {
display: flex;
align-items: center;
gap: 1.75rem;
}
/* --- Variante compatta: recupera altezza (nome sopra la mascotte, niente riga titolo) --- */
.zed-assist--compact {
padding: 1rem 1.25rem;
padding-bottom: 3px;
margin-bottom: 1rem;
}
.zed-assist--compact .zed-assist__hero {
gap: 1.25rem;
}
/* Mascotte più piccola con il nome impilato sopra la testa. */
.zed-assist--compact .zed-assist__mascot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
}
.zed-assist__name {
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.03em;
line-height: 1;
color: color-mix(in srgb, var(--accent) 72%, var(--zd-ink-mix));
/* Poco più in alto, staccato dalla testa della mascotte. */
margin-top: -0.35rem;
margin-bottom: 0.15rem;
/* Si muove e si illumina. */
animation: zed-name-glow 2.4s ease-in-out infinite;
will-change: transform;
}
@keyframes zed-name-glow {
0%, 100% {
transform: translateY(0);
text-shadow: 0 0 0 transparent;
}
50% {
transform: translateY(-3px);
text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent);
}
}
/* Distacca la barra input/Invia dai chip sottostanti (altrimenti risultano "attaccati"). */
.zed-assist--compact .zed-assist__ask {
margin-bottom: 0.75rem;
}
/* ...ma quando sotto non c'è nulla (caso normale: l'invito è ora nella riga stessa)
quel margine sommato al padding del riquadro tornerebbe a sprecare altezza. */
.zed-assist__ask:last-child {
margin-bottom: 0;
}
/* Domande frequenti in griglia ordinata: 4 colonne dove c'è spazio, poi 3 / 2 / 1. */
.zed-assist--compact .zed-assist__chips {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
align-items: stretch;
margin-top: 0.6rem;
}
.zed-assist--compact .zed-assist__chips-label {
grid-column: 1 / -1;
margin: 0;
}
.zed-assist--compact .zed-assist__chips .mud-chip {
width: 100%;
margin: 0;
justify-content: flex-start;
}
@media (max-width: 75em) {
.zed-assist--compact .zed-assist__chips {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 60em) {
.zed-assist--compact .zed-assist__chips {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 40em) {
.zed-assist--compact .zed-assist__chips {
grid-template-columns: 1fr;
}
}
/* Assistente subito dopo il titolo (solo area SuperAdmin): la .page-header della pagina e
ZedHero sono figli diretti della stessa MudContainer (Blazor rende @Body inline). Con un
flex-column e order forziamo Titolo → ZedHero → resto, senza toccare le singole pagine. */
.zed-after-title {
display: flex;
flex-direction: column;
}
/* I banner di LAYOUT (conferma email, annunci, anteprima Owner) restano in cima, sopra il
titolo: sono avvisi che riguardano l'intera sessione, non la pagina che si sta guardando.
Il selettore era `.zed-after-title > .mud-alert`, e il commento diceva che le alert dentro
le pagine non venivano toccate. Non era vero: Blazor rende @Body in linea, quindi anche gli
avvisi scritti DENTRO una pagina sono figli diretti di questo contenitore e prendevano lo
stesso order:-3, scavalcando titolo e assistente. Su "WhatsApp dedicato" le istruzioni
operative finivano così sopra al titolo della pagina. Ora la regola vale solo per i banner
che il layout marca a mano, e gli avvisi di pagina restano dove l'autore li ha scritti. */
.zed-after-title > .layout-banner { order: -3; }
.zed-after-title > .page-header { order: -2; }
.zed-after-title > .zed-assist,
.zed-after-title > .zed-hero-bar,
.zed-after-title > .zed-inline-bar { order: -1; }
/* Barra compatta nei verticali (2026-10-09): su una riga sua sotto il titolo, a tutta larghezza. */
.zed-after-title:not(.zed-title-row) > .zed-inline-bar { margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
.zed-assist__name { animation: none; }
}
/* Comprimi/espandi in compatta: pulsante in alto a destra, senza rubare una riga. */
.zed-hero__collapse--floating {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
opacity: 0.6;
}
.zed-hero__collapse--floating:hover { opacity: 1; }
/* In compatta il pulsante "Invia" arriverebbe a sfiorare l'icona comprimi/espandi
(che galleggia nell'angolo): riserviamo la corsia a destra della riga di ricerca. */
.zed-assist--compact .zed-assist__ask {
padding-right: 2.6rem;
}
/* ---- Riga unica: ricerca + Invia + invito alla palette --------------------
Dove c'è larghezza (desktop e tablet) i tre elementi stanno affiancati e
alti uguali: l'assistente occupa una fascia sola invece di due, che sui
portatili è la differenza fra vedere o non vedere la tabella sotto.
Vale per entrambe le varianti (shell SuperAdmin e verticali). */
.zed-assist__ask {
align-items: center;
flex-wrap: nowrap;
--zed-row-h: 2.5rem;
}
/* min-width:0 è obbligatorio: senza, la larghezza minima del campo impedisce
alla riga di stringersi e i tre elementi sbordano invece di adattarsi. */
.zed-assist__input {
min-width: 0;
}
.zed-assist__input,
.zed-assist__input .mud-input-control,
.zed-assist__input .mud-input {
min-height: var(--zed-row-h);
}
.zed-assist__send {
height: var(--zed-row-h);
padding-inline: 1.1rem;
}
/* L'invito diventa un elemento della riga: niente stacco verticale, niente a capo. */
.zed-assist__hint {
flex: 0 1 auto;
min-width: 0;
height: var(--zed-row-h);
margin-top: 0;
white-space: nowrap;
}
.zed-assist__hint > span:not(.zed-assist__hint-kbd) {
overflow: hidden;
text-overflow: ellipsis;
}
/* Tablet stretto: si sacrifica per primo il suggerimento sul come aprirla,
che è ridondante (la mascotte è lì accanto). */
@media (max-width: 62em) {
.zed-assist__hint-kbd { display: none; }
}
@media (max-width: 40em) {
/* In colonna il pulsante è a tutta larghezza: basta un filo di respiro. */
.zed-assist--compact .zed-assist__ask {
padding-right: 2.2rem;
}
.zed-assist__ask {
flex-wrap: wrap;
align-items: stretch;
}
/* Sotto, la riga unica non ci sta: l'invito torna a tutta larghezza. */
.zed-assist__hint {
width: 100%;
height: auto;
padding-block: 0.45rem;
justify-content: center;
}
/* Su schermo stretto i controlli sono impilati: si torna alle altezze tocco-friendly. */
.zed-assist__send {
height: 2.9rem;
}
}
/* Barra ridotta migliorata: filo d'accento a sinistra, più compatta. */
.zed-hero-bar--compact {
padding: 7px 14px;
border-left: 3px solid var(--accent);
}
.zed-assist__mascot {
flex: 0 0 auto;
}
.zed-assist__intro {
flex: 1 1 auto;
min-width: 0;
}
.zed-assist__title {
font-weight: 700;
letter-spacing: -0.01em;
}
.zed-assist__subtitle {
margin-bottom: 0.9rem;
max-width: 62ch;
opacity: 0.78;
}
.zed-assist__ask {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.zed-assist__input {
flex: 1 1 auto;
margin: 0;
}
.zed-assist__send {
flex: 0 0 auto;
height: 3.4rem;
border-radius: 12px;
padding-inline: 1.4rem;
}
.zed-assist__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-top: 0.85rem;
}
.zed-assist__chips-label {
margin-right: 0.25rem;
opacity: 0.65;
}
/* --- Thread domanda/risposta --- */
.zed-assist__thread {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
}
.zed-turn + .zed-turn {
margin-top: 1.25rem;
}
.zed-turn__you {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 100%;
margin-bottom: 0.6rem;
padding: 0.5rem 0.9rem;
border-radius: 14px 14px 14px 4px;
font-weight: 600;
color: var(--zd-text);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.zed-turn__zed {
padding: 1rem 1.15rem;
border-radius: 4px 14px 14px 14px;
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
background: var(--zd-surface);
animation: zed-answer-in 0.35s ease-out both;
}
.zed-turn__zed--miss {
border-style: dashed;
background: transparent;
}
@keyframes zed-answer-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.zed-turn__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.6rem;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: color-mix(in srgb, var(--accent) 72%, var(--zd-ink-mix));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.zed-turn__body {
line-height: 1.6;
}
.zed-turn__body p { margin: 0 0 0.6rem; }
.zed-turn__body p:last-child { margin-bottom: 0; }
.zed-turn__body ul,
.zed-turn__body ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.zed-turn__body li { margin-bottom: 0.3rem; }
.zed-turn__body code {
padding: 0.1rem 0.35rem;
border-radius: 5px;
font-size: 0.88em;
background: color-mix(in srgb, var(--zd-text) 8%, transparent);
}
.zed-turn__related {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
margin-top: 0.75rem;
padding-top: 0.6rem;
border-top: 1px solid color-mix(in srgb, var(--zd-text) 8%, transparent);
}
.zed-assist__reset {
margin-top: 1rem;
}
/* --- Indicatore "sta scrivendo" --- */
.zed-typing {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.zed-typing__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: zed-blink 1.2s infinite ease-in-out;
}
.zed-typing__dot:nth-child(2) { animation-delay: 0.18s; }
.zed-typing__dot:nth-child(3) { animation-delay: 0.36s; }
.zed-typing__label {
margin-left: 0.5rem;
font-size: 0.85rem;
opacity: 0.7;
}
@keyframes zed-blink {
0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* --- Responsive: sotto i 60em la mascotte va sopra, centrata --- */
@media (max-width: 60em) {
.zed-assist {
padding: 1.25rem;
}
.zed-assist__hero {
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.zed-assist__mascot {
transform: scale(0.8);
transform-origin: center;
}
.zed-assist__subtitle {
margin-inline: auto;
}
.zed-assist__ask {
flex-direction: column;
text-align: left;
}
.zed-assist__send {
width: 100%;
height: 2.9rem;
}
.zed-assist__chips {
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.zed-turn__zed { animation: none; }
.zed-typing__dot { animation-duration: 3s; }
}
/* ===================== ZED HERO (globale, sopra il contenuto) ===================== */
/* Riga del titolo con il pulsante per ridurre l'hero a barra. */
.zed-hero__titlerow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.zed-hero__collapse {
flex-shrink: 0;
opacity: 0.7;
}
.zed-hero__collapse:hover { opacity: 1; }
/* Barra compatta: stato "ridotto" ricordato per utente. Un click la riapre. */
.zed-hero-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
margin-bottom: 1rem;
border: 1px solid var(--zd-border);
border-radius: 12px;
background: var(--zd-surface);
color: var(--zd-text-2);
cursor: pointer;
transition: border-color var(--ease, .2s ease), box-shadow var(--ease, .2s ease), background var(--ease, .2s ease);
}
.zed-hero-bar:hover {
border-color: var(--accent);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.zed-hero-bar__icon {
display: inline-flex;
color: var(--accent);
}
.zed-hero-bar__text {
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 500;
}
/* Tabelle e schede chiave-valore nelle risposte di Zed (consultazioni "Zed sa").
Scorrono orizzontalmente su schermi stretti senza rompere il layout della chat. */
.zed-turn__body table {
width: 100%;
border-collapse: collapse;
margin: 0.35rem 0;
font-size: 0.85rem;
display: block;
overflow-x: auto;
}
.zed-turn__body th,
.zed-turn__body td {
text-align: left;
padding: 4px 8px;
border-bottom: 1px solid var(--zd-border);
vertical-align: top;
white-space: nowrap;
}
.zed-turn__body th {
font-weight: 600;
color: var(--zd-text-3);
}
.zed-turn__body table.zed-kv td:first-child {
white-space: nowrap;
color: var(--zd-text-3);
}
.zed-turn__body table.zed-kv td:last-child {
white-space: normal;
}
/* ===================== MASCOTTE-TRIGGER + PALETTE DELLE SCORCIATOIE =====================
I suggerimenti ("Prova con:") non stanno piu' nell'hero: rubavano mezza schermata.
Ora la mascotte e' un pulsante che apre .zed-palette, una modale fixed con le azioni,
le consultazioni e le domande frequenti, filtrabili. Su mobile diventa un bottom-sheet.
====================================================================================== */
.zed-mascot-trigger {
position: relative;
display: block;
padding: 0;
border: 0;
background: none;
cursor: pointer;
line-height: 0;
border-radius: 50%;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zed-mascot-trigger:hover { transform: translateY(-3px) scale(1.04); }
.zed-mascot-trigger:active { transform: translateY(-1px) scale(0.99); }
.zed-mascot-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 6px;
}
/* Alone pulsante: dice "sono cliccabile" senza aggiungere testo alla pagina. */
.zed-mascot-trigger__ring {
position: absolute;
inset: 8% 4%;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
opacity: 0;
pointer-events: none;
animation: zed-trigger-ping 3.2s ease-out infinite;
}
@keyframes zed-trigger-ping {
0% { transform: scale(0.72); opacity: 0; }
35% { opacity: 0.55; }
100% { transform: scale(1.12); opacity: 0; }
}
.zed-mascot-trigger:hover .zed-mascot-trigger__ring {
opacity: 0.65;
animation-duration: 1.6s;
}
/* Pastiglia con il numero di scorciatoie disponibili. */
.zed-mascot-trigger__badge {
position: absolute;
top: 2px;
right: -2px;
min-width: 22px;
height: 22px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
color: #fff;
background: linear-gradient(140deg, var(--accent), var(--accent-dark));
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-dark) 45%, transparent);
pointer-events: none;
}
/* Invito testuale al posto della griglia di chip: una riga, non venti. */
.zed-assist__hint {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.75rem;
padding: 0.4rem 0.85rem;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: 0.85rem;
color: color-mix(in srgb, var(--accent) 72%, var(--zd-ink-mix));
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
background: color-mix(in srgb, var(--accent) 9%, transparent);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.zed-assist__hint:hover {
transform: translateY(-1px);
background: color-mix(in srgb, var(--accent) 16%, transparent);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.zed-assist__hint-kbd {
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem;
opacity: 0.75;
background: color-mix(in srgb, var(--accent) 18%, transparent);
}
/* --- Modale --- */
.zed-palette {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
align-items: center;
justify-content: center;
padding: 5vh 1rem;
}
.zed-palette__scrim {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: zed-pal-fade 0.22s ease-out;
}
.zed-palette__panel {
position: relative;
display: flex;
flex-direction: column;
width: min(760px, 100%);
max-height: 90vh;
overflow: hidden;
border-radius: 22px;
outline: none;
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
background: linear-gradient(180deg, var(--zd-surface) 0%, var(--zd-surface-2) 100%);
box-shadow: var(--zd-shadow-3);
animation: zed-pal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Aura d'accento in alto: da' profondita' senza immagini. */
.zed-palette__glow {
position: absolute;
top: -45%;
left: -10%;
width: 70%;
height: 90%;
pointer-events: none;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}
@keyframes zed-pal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zed-pal-in {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.zed-palette__head {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.15rem 1.3rem 0.6rem;
}
.zed-palette__avatar { flex: 0 0 auto; line-height: 0; }
.zed-palette__headtext { flex: 1 1 auto; min-width: 0; }
.zed-palette__title {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--accent) 72%, var(--zd-ink-mix));
}
.zed-palette__sub {
font-size: 0.85rem;
opacity: 0.72;
margin-top: 0.1rem;
}
.zed-palette__close { flex: 0 0 auto; align-self: flex-start; }
.zed-palette__search {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.35rem 1.3rem 0.9rem;
padding: 0.55rem 0.85rem;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
background: var(--zd-surface);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.zed-palette__search:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.zed-palette__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
background: none;
font: inherit;
font-size: 0.95rem;
color: inherit;
}
.zed-palette__clear {
border: 0;
background: none;
cursor: pointer;
padding: 0;
line-height: 0;
opacity: 0.55;
}
.zed-palette__clear:hover { opacity: 1; }
.zed-palette__body {
position: relative;
flex: 1 1 auto;
overflow-y: auto;
padding: 0 1.3rem 1rem;
overscroll-behavior: contain;
}
.zed-palette__group + .zed-palette__group { margin-top: 1.1rem; }
.zed-palette__grouplabel {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.6;
}
.zed-palette__grouplabel::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.zed-palette__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0.5rem;
}
.zed-palette__item {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
padding: 0.65rem 0.7rem;
border-radius: 14px;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
background: var(--zd-surface);
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.zed-palette__item:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-dark) 18%, transparent);
}
.zed-palette__item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.zed-palette__icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: #fff;
background: linear-gradient(140deg, var(--accent), var(--accent-dark));
}
/* Consultazioni e domande restano riconoscibili a colpo d'occhio. */
.zed-palette__item--query .zed-palette__icon {
background: linear-gradient(140deg,
color-mix(in srgb, var(--accent) 30%, #4C8DA6), #2F6B84);
}
.zed-palette__item--doc .zed-palette__icon {
color: color-mix(in srgb, var(--accent) 72%, var(--zd-ink-mix));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.zed-palette__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.zed-palette__label {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
}
.zed-palette__hint {
font-size: 0.76rem;
opacity: 0.65;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zed-palette__go {
flex: 0 0 auto;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.zed-palette__item:hover .zed-palette__go,
.zed-palette__item:focus-visible .zed-palette__go {
opacity: 0.7;
transform: none;
}
.zed-palette__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 2rem 1rem;
text-align: center;
opacity: 0.85;
}
.zed-palette__foot {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
font-size: 0.76rem;
opacity: 0.62;
border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.zed-palette__foot kbd {
padding: 0.05rem 0.35rem;
border-radius: 5px;
font-family: inherit;
font-size: 0.72rem;
border: 1px solid color-mix(in srgb, var(--zd-text) 22%, transparent);
background: var(--zd-surface);
}
.zed-palette__footdot { opacity: 0.5; }
/* Mobile: bottom-sheet a tutta larghezza, piu' comodo del pop-up centrato. */
@media (max-width: 40em) {
.zed-palette {
align-items: flex-end;
padding: 0;
}
.zed-palette__panel {
width: 100%;
max-height: 88vh;
border-radius: 22px 22px 0 0;
animation-name: zed-pal-sheet;
}
.zed-palette__grid { grid-template-columns: 1fr; }
.zed-palette__head { padding-top: 1rem; }
}
@keyframes zed-pal-sheet {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.zed-mascot-trigger,
.zed-mascot-trigger__ring,
.zed-palette__panel,
.zed-palette__scrim,
.zed-palette__item,
.zed-palette__go {
animation: none;
transition: none;
}
.zed-mascot-trigger:hover { transform: none; }
.zed-palette__go { opacity: 0.6; transform: none; }
}
/* ============================================================================
Zed in riga col titolo (area SuperAdmin, ZedHero Compact).
Il contenitore passa da flex a grid: il titolo della pagina nella prima colonna,
la barra di Zed nella seconda, sulla stessa riga; tutto il resto a piena larghezza.
L'ordine (banner → titolo → Zed → pagina) resta quello di .zed-after-title: gli
`order` valgono anche per la grid, e il posizionamento automatico mette la barra
accanto al titolo perché la colonna 2 di quella riga è libera.
La barra NON entra nel riquadro del titolo: diverse pagine SuperAdmin hanno pulsanti
a destra nel proprio titolo, e ci finirebbe sopra.
============================================================================ */
.zed-title-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
align-items: start;
/* align-content: start è OBBLIGATORIO, non una rifinitura.
Questo contenitore è figlio di .mud-main-content, che è display:flex: viene quindi
stirato a tutta l'altezza della finestra anche quando la pagina è corta. Il valore
iniziale align-content:normal per una grid si comporta come `stretch`, e le righe a
dimensione automatica si spartiscono TUTTO lo spazio avanzato: su /superadmin/richieste
le righe misuravano 254px e 521px per 461px di contenuto, su /superadmin/whatsapp-dedicato
308+217+249px per 289px. Da qui i vuoti enormi fra titolo, barra di Zed e contenuto, e il
fatto che cambiassero da pagina a pagina (dipendono da quanto contenuto c'è).
Conseguenza secondaria, meno ovvia: la barra di Zed ha align-self:center e finiva
centrata in una riga alta 254px, cioè MOLTO sotto il titolo invece che accanto. */
align-content: start;
}
/* min-width:0: senza, una tabella larga allargherebbe la colonna e la pagina. */
.zed-title-row > * { grid-column: 1 / -1; min-width: 0; }
.zed-title-row > .page-header { grid-column: 1; }
.zed-title-row > .zed-inline-bar {
grid-column: 2;
order: -1;
align-self: center;
width: clamp(300px, 30vw, 440px);
/* Il titolo ha mb-4 (16px): lo stesso margine qui centra la barra sul riquadro, non sulla riga. */
margin-bottom: 16px;
}
/* Pagina senza titolo standard: la barra prende l'intera riga. */
.zed-title-row:not(:has(> .page-header)) > .zed-inline-bar {
grid-column: 1 / -1;
width: auto;
}
.zed-inline-bar {
display: flex;
align-items: center;
gap: 8px;
}
.zed-inline-bar__input { flex: 1 1 auto; min-width: 0; }
.zed-inline-bar .mud-input-control { margin: 0 !important; }
.zed-inline-bar__send.mud-button-root {
flex: 0 0 auto;
height: 40px; /* = altezza del campo con Margin.Dense */
min-width: 0;
padding: 0 14px;
border-radius: 8px;
text-transform: none;
font-weight: 600;
}
.zed-inline-bar__send .mud-button-label { gap: 6px; }
/* Pannello delle risposte sotto il titolo: compare solo quando c'è una risposta. */
.zed-assist--inline {
order: -1;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.zed-assist--inline .zed-assist__thread:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Tablet e telefono: la barra scende sotto il titolo, a tutta larghezza. */
@media (max-width: 959.98px) {
.zed-title-row > .page-header,
.zed-title-row > .zed-inline-bar {
grid-column: 1 / -1;
}
.zed-title-row > .zed-inline-bar {
width: auto;
margin-top: -4px;
}
}
/* Telefono: "Invia" diventa un pulsante quadrato con la sola icona. */
@media (max-width: 599.98px) {
.zed-inline-bar__send.mud-button-root { width: 40px; padding: 0; }
.zed-inline-bar__send-label { display: none; }
}
/* Pulsante delle scorciatoie nella barra in riga: fulmine + numero, alto come il campo.
Sostituisce il badge che nella variante estesa sta sulla mascotte. */
.zed-inline-bar__shortcuts {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--zd-border-strong);
border-radius: 8px;
background: var(--zd-surface);
color: var(--mud-palette-primary);
font: inherit;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.zed-inline-bar__shortcuts:hover {
border-color: var(--mud-palette-primary);
background: var(--zd-surface-hover);
}
.zed-inline-bar__shortcuts:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.zed-inline-bar__count {
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
color: var(--mud-palette-primary-text, #fff);
background: var(--mud-palette-primary);
}
/* ============================================================================
Chiusura della risposta di Zed.
Il pannello si apriva e non si chiudeva più: l'unico modo era cambiare pagina, e su un
telefono la risposta copre tutto lo schermo sopra il contenuto della pagina. Il contenitore
ha già position:relative, quindi la X si àncora al suo angolo senza toccare il resto.
============================================================================ */
.zed-assist__close.mud-icon-button {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
color: var(--mud-palette-text-secondary);
}
.zed-assist__close.mud-icon-button:hover {
color: var(--mud-palette-text-primary);
background: var(--mud-palette-action-default-hover);
}
/* Il testo del pannello non deve finire sotto la X. */
.zed-assist--inline { padding-right: 44px; }
@media (max-width: 599.98px) {
/* Area di tocco piena sul telefono, dove si sbaglia mira. */
.zed-assist__close.mud-icon-button { top: 2px; right: 2px; padding: 8px; }
}
/* ============================================================================
Pagina Documentazione su telefono: l'assistente non deve mangiarsi lo schermo.
Qui l'assistente è la variante grande (DocsAssistant Compact="true"): mascotte da 96px,
nome sopra la testa, campo e suggerimento sotto. Su un telefono da 390px quel blocco
occupa quasi metà della prima schermata, mentre su tutte le ALTRE pagine SuperAdmin
l'assistente è la barra sottile accanto al titolo. Qui lo si riporta alle stesse
proporzioni: mascotte piccola a sinistra, campo accanto, una fascia sola.
La mascotte deriva ogni misura da --mascot-size, quindi basta cambiare quella: scalarla
con transform avrebbe lasciato lo spazio originale occupato.
============================================================================ */
@media (max-width: 599.98px) {
.zed-assist--compact {
padding: 10px 12px;
padding-bottom: 3px;
margin-bottom: 12px;
}
/* Sotto i 60em una regola precedente mette l'eroe IN COLONNA e centra la mascotte:
è ciò che fa diventare il blocco una torre da 280px. Qui torna una riga. */
.zed-assist--compact .zed-assist__hero {
flex-direction: row;
align-items: center;
text-align: left;
gap: 10px;
}
/* La stessa regola rimpicciolisce la mascotte con transform: scale(.8), che cambia
l'aspetto ma NON lo spazio occupato — restava ingombrante come a 96px. Si annulla
e si agisce sulla misura vera. --mascot-size è impostata inline dal componente,
quindi serve !important per scavalcarla. */
.zed-assist--compact .zed-assist__mascot { transform: none; }
.zed-assist--compact .zcd-mascot { --mascot-size: 52px !important; }
.zed-assist--compact .zed-assist__name { font-size: .78rem; margin-top: 0; margin-bottom: 2px; }
/* L'anello attorno alla mascotte e il contatore erano tarati sui 96px. */
.zed-assist--compact .zed-mascot-trigger__badge { font-size: .58rem; padding: 0 4px; min-width: 16px; }
/* Il campo e "Chiedi" su UNA riga, il pulsante accanto alla barra di scrittura.
Qui serve flex-direction:row esplicito: la media query a 60em qui sopra mette
.zed-assist__ask in COLONNA, ed è per questo che "Chiedi" finiva sotto il campo —
il flex-wrap:nowrap che c'era prima non poteva farci nulla, perché in colonna gli
elementi si incolonnano comunque. */
.zed-assist--compact .zed-assist__ask {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding-right: 0;
gap: 8px;
}
/* Il pulsante tiene la sua etichetta: "Chiedi" dice cosa succede, un'icona sola no.
width:auto annulla il width:100% della regola a 60em. */
.zed-assist--compact .zed-assist__send {
flex: 0 0 auto;
width: auto;
min-width: 0;
height: 2.5rem;
padding-inline: 12px;
font-size: .82rem;
}
.zed-assist--compact .zed-assist__input { flex: 1 1 auto; min-width: 0; }
/* L'invito alle scorciatoie va sotto, piccolo: è un suggerimento, non un comando. */
.zed-assist--compact .zed-assist__hint { font-size: .72rem; padding-block: .3rem; }
}
/* ==== css/superadmin-lists.css ==== */
/* ============================================================================
Liste del SuperAdmin: barra comandi + contatori-filtro (.tt).
Condivisa da Tenant (/superadmin) e Assistenza (/superadmin/assistenza), che
devono restare identiche nell'aspetto: prima questi stili vivevano nel