/* ===========================================================
ZcodedepthV — Design System "Flow"
-----------------------------------------------------------
Un unico linguaggio visivo per tutti i verticali: superfici
pulite, ombre morbide a più livelli, micro-animazioni, sfondo
con glow di brand. Ogni verticale cambia SOLO i colori tramite
le variabili in html[data-vertical]: lo stile resta identico.
=========================================================== */
/* I font sono in css/fonts.css, ospitati in locale (niente IP dei visitatori a Google). */
:root {
/* ---- default: BarberFlow (cognac/cuoio) ---- */
--ink: #2C2521; /* scuro di brand: appbar, tooltip, picker */
--ink-soft: #4A3F38;
--canvas: #F6F4F1; /* off-white caldo e arioso */
--drawer-bg: #EFECE7;
--surface: #FFFFFF;
--surface-2: #F1EEE9;
--surface-3: #E6E2DB;
/* accento primario */
--accent: #A87545;
--accent-dark: #8B5D38;
--accent-darker: #724A2B;
--accent-light: #C99670;
--accent-tint: rgba(168, 117, 69, 0.09);
--accent-tint-strong: rgba(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 */
--sage: #5A7561;
--sage-dark: #43594B;
--sage-tint: rgba(90, 117, 97, 0.12);
--brass: #C9A961;
--brass-tint: rgba(201, 169, 97, 0.18);
/* testo */
--text: #2C2521;
--text-muted: #6B5F50;
--text-faint: #9C9183;
--text-on-ink: #F2EAE0;
--text-on-accent: #FFFFFF;
/* bordi */
--border: #E3DFD8;
--border-strong: #CFC9BF;
/* Grigio FISSO, non ridefinito in nessun html[data-vertical]: usato dove
il cliente vuole un bordo neutro identico su tutti i verticali (stat-card),
a differenza di --border-strong che è intenzionalmente tinto per verticale. */
--neutral-border: #CBC6BE;
--neutral-border-hover: #A9A39A;
/* stati */
--success: #3D8B5F;
--success-tint: rgba(61, 139, 95, 0.14);
--error: #C24A45;
--error-tint: rgba(194, 74, 69, 0.12);
--warning: #C9923E;
--warning-tint: rgba(201, 146, 62, 0.15);
--info: var(--accent);
--info-tint: var(--accent-tint-strong);
/* geometria / ombre / motion */
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--shadow-xs: 0 1px 2px rgba(20, 16, 12, 0.05);
--shadow-sm: 0 2px 6px rgba(20, 16, 12, 0.06), 0 1px 2px rgba(20, 16, 12, 0.04);
--shadow-md: 0 8px 26px rgba(20, 16, 12, 0.10), 0 2px 8px rgba(20, 16, 12, 0.05);
--shadow-lg: 0 22px 60px rgba(20, 16, 12, 0.18), 0 6px 18px rgba(20, 16, 12, 0.08);
--ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
--ease-slow: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ===========================================================
PALETTE PER VERTICALE — cambiano i COLORI, mai il 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);
--ink: #0B3A44; --ink-soft: #1F4A55;
--canvas: #F2F8F9; --drawer-bg: #E7F2F3; --surface: #FFFFFF; --surface-2: #ECF5F6; --surface-3: #DEEDEF;
--text: #0B3A44; --text-muted: #4A6E76; --text-faint: #8AA8AE; --text-on-ink: #D7EEF1;
--border: #D6E9EB; --border-strong: #B6D8DC;
--success: #2E9E7B; --success-tint: rgba(46, 158, 123, 0.16);
--error: #C24A45; --error-tint: rgba(194, 74, 69, 0.14);
--warning: #E0992E; --warning-tint: rgba(224, 153, 46, 0.16);
}
/* ---------- 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);
--ink: #1E3A5F; --ink-soft: #2B4A6E;
--canvas: #EFF6FF; --drawer-bg: #DBEAFE; --surface: #FFFFFF; --surface-2: #EAF2FE; --surface-3: #DBEAFE;
--text: #1E3A5F; --text-muted: #4B6B8A; --text-faint: #8FA8C2; --text-on-ink: #DBEAFE;
--border: #C7DBF5; --border-strong: #A9C7EE;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.16);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.14);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.16);
}
/* ---------- 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);
--ink: #4A0E2E; --ink-soft: #6D213C;
--canvas: #FCF4F8; --drawer-bg: #FBEDF4; --surface: #FFFFFF; --surface-2: #FAEEF4; --surface-3: #F4DEE9;
--text: #4A0E2E; --text-muted: #8A5A70; --text-faint: #B98FA3; --text-on-ink: #FCE7F3;
--border: #F4DCE7; --border-strong: #EAC3D5;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ---------- 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);
--ink: #2A1E55; --ink-soft: #3B2E6B;
--canvas: #F6F3FC; --drawer-bg: #F0EBFA; --surface: #FFFFFF; --surface-2: #F2EEFA; --surface-3: #E7DFF6;
--text: #2A1E55; --text-muted: #6B6191; --text-faint: #9B92BE; --text-on-ink: #EDE9FE;
--border: #E5DDF4; --border-strong: #D0C3EC;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ---------- 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);
--ink: #0F3D2E; --ink-soft: #1E4D3A;
--canvas: #F2F9F5; --drawer-bg: #E6F3EC; --surface: #FFFFFF; --surface-2: #ECF5F0; --surface-3: #DCECE3;
--text: #0F3D2E; --text-muted: #4B6B5D; --text-faint: #8AA89B; --text-on-ink: #ECFDF5;
--border: #D8EBE0; --border-strong: #BCDCCB;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ---------- 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);
--ink: #1C1917; --ink-soft: #292524;
--canvas: #F7F6F5; --drawer-bg: #EFEDEB; --surface: #FFFFFF; --surface-2: #F0EEEC; --surface-3: #E4E1DD;
--text: #1C1917; --text-muted: #78716C; --text-faint: #A8A29E; --text-on-ink: #FAFAF9;
--border: #E6E4E1; --border-strong: #D3CFCA;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #EA580C; --warning-tint: rgba(234, 88, 12, 0.15);
}
/* ---------- 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);
--ink: #0F172A; --ink-soft: #1E293B;
--canvas: #F4F7FB; --drawer-bg: #E9EFF7; --surface: #FFFFFF; --surface-2: #EEF3F9; --surface-3: #DFE8F4;
--text: #0F172A; --text-muted: #475569; --text-faint: #94A3B8; --text-on-ink: #E2E8F0;
--border: #DCE5F1; --border-strong: #C3D1E5;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ---------- 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);
--ink: #16213E; --ink-soft: #24314F;
--canvas: #F3F5FB; --drawer-bg: #EAEEF8; --surface: #FFFFFF; --surface-2: #EDF1F9; --surface-3: #DEE4F2;
--text: #16213E; --text-muted: #54607F; --text-faint: #8C97B5; --text-on-ink: #E0E7FF;
--border: #DDE2F0; --border-strong: #C5CEE5;
--success: #2E9E5B; --success-tint: rgba(46, 158, 91, 0.15);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #CA8A04; --warning-tint: rgba(202, 138, 4, 0.16);
}
/* ---------- 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);
--ink: #1C1917; --ink-soft: #292524;
--canvas: #F7F6F5; --drawer-bg: #EFEDEB; --surface: #FFFFFF; --surface-2: #F0EEEC; --surface-3: #E4E1DD;
--text: #1C1917; --text-muted: #78716C; --text-faint: #A8A29E; --text-on-ink: #FAFAF9;
--border: #E6E4E1; --border-strong: #D3CFCA;
--success: #16A34A; --success-tint: rgba(22, 163, 74, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #EA580C; --warning-tint: rgba(234, 88, 12, 0.15);
}
/* ---------- 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);
--ink: #16213E; --ink-soft: #24314F;
--canvas: #F3F5FB; --drawer-bg: #EAEEF8; --surface: #FFFFFF; --surface-2: #EDF1F9; --surface-3: #DEE4F2;
--text: #16213E; --text-muted: #54607F; --text-faint: #8C97B5; --text-on-ink: #E0E7FF;
--border: #DDE2F0; --border-strong: #C5CEE5;
--success: #2E9E5B; --success-tint: rgba(46, 158, 91, 0.15);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #CA8A04; --warning-tint: rgba(202, 138, 4, 0.16);
}
/* ---------- 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);
--ink: #1A0505; --ink-soft: #2D0808;
--canvas: #FAF3F2; --drawer-bg: #F3E5E4; --surface: #FFFFFF; --surface-2: #F5E9E8; --surface-3: #ECD9D8;
--text: #1A0505; --text-muted: #6B3A3A; --text-faint: #A07070; --text-on-ink: #F7EEED;
--border: #EAD6D6; --border-strong: #DABEBE;
--success: #2E7D32; --success-tint: rgba(46, 125, 50, 0.15);
--error: #B71C1C; --error-tint: rgba(183, 28, 28, 0.14);
--warning: #E65100; --warning-tint: rgba(230, 81, 0, 0.16);
}
/* ---------- 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);
--ink: #3A2018; --ink-soft: #5C1A12;
--canvas: #FCF5F1; --drawer-bg: #F8EBE4; --surface: #FFFFFF; --surface-2: #F9EEE8; --surface-3: #F0DFD4;
--text: #3A2018; --text-muted: #7A5547; --text-faint: #A98B7C; --text-on-ink: #FBE9E7;
--border: #EFDDD3; --border-strong: #E0C8B9;
--success: #2E9E5B; --success-tint: rgba(46, 158, 91, 0.15);
--error: #C0392B; --error-tint: rgba(192, 57, 43, 0.14);
--warning: #E67E22; --warning-tint: rgba(230, 126, 34, 0.16);
}
/* ---------- 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);
--ink: #1E1B4B; --ink-soft: #312E81;
--canvas: #F7F7FC; --drawer-bg: #EFEEFA; --surface: #FFFFFF; --surface-2: #F2F1FA; --surface-3: #E7E5F5;
--text: #1E1B3A; --text-muted: #555078; --text-faint: #938EB8; --text-on-ink: #E0E7FF;
--border: #E6E4F4; --border-strong: #D2CEEC;
--success: #059669; --success-tint: rgba(5, 150, 105, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ---------- 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);
/* Notte indaco: chrome scuro distintivo dell'area piattaforma (slate → indigo profondo) */
--ink: #0B1026; --ink-soft: #23276B;
/* Superfici "bluetto" (2026-10-08, richiesta cliente): niente bianco pieno né
grigio neutro nell'area admin. Canvas azzurro polvere, card appena velate di
blu, intestazioni/tab un tono sotto. Testo #1E293B su --surface ≈ 14:1,
--text-muted #475569 su --surface-3 ≈ 6:1 (AA). */
--canvas: #DDE7F3; --drawer-bg: #D3DFEE; --surface: #F8FBFF; --surface-2: #EAF1FA; --surface-3: #DAE5F2;
--text: #1E293B; --text-muted: #475569; --text-faint: #94A3B8; --text-on-ink: #E2E8F0;
--border: #D3DFEE; --border-strong: #B9CBE2;
--success: #059669; --success-tint: rgba(5, 150, 105, 0.14);
--error: #DC2626; --error-tint: rgba(220, 38, 38, 0.12);
--warning: #D97706; --warning-tint: rgba(217, 119, 6, 0.15);
}
/* ===================== KEYFRAMES ===================== */
@keyframes pageIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmerSweep {
from { transform: translateX(-100%); }
to { transform: translateX(220%); }
}
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(28px, -28px) scale(1.07); }
66% { transform: translate(-18px, 20px) scale(0.93); }
}
@keyframes support-blink {
0% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); }
50% { opacity: 0.45; box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
/* ===================== BASE ===================== */
* { box-sizing: border-box; }
html, body {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
height: 100%;
margin: 0;
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-size: 15px;
line-height: 1.5;
}
/* Sfondo: base grigio chiaro neutro con sfumatura di profondità + glow morbidi di
brand negli angoli (colori del verticale). background fixed → resta fermo allo
scroll. !important: vince su MudBlazor e sullo stile iniettato da MudThemeProvider. */
html { background: #EEF0F3 !important; }
body {
background:
radial-gradient(820px 480px at 92% -14%, var(--accent-tint), transparent 58%) fixed,
radial-gradient(900px 620px at -18% 116%, var(--accent-tint), transparent 52%) fixed,
linear-gradient(180deg, #F5F6F8 0%, #EAECEF 100%) fixed !important;
}
/* Altezza reale dell'AppBar fissa di MudBlazor (stessi gradini di MudBlazor.min.css:
56px su telefono verticale, 48px in orizzontale, 64px da 600px in su). Serve a chi
resta "sticky" subito sotto: barre delle tab admin e barra sezioni del Budget. */
:root { --zcd-appbar-h: 56px; }
@media (orientation: landscape) { :root { --zcd-appbar-h: 48px; } }
@media (min-width: 37.5em) { :root { --zcd-appbar-h: 64px; } }
/* Area admin: base azzurra invece del grigio neutro (vale anche con la scena 3D
spenta, .sa3d-off; con la scena accesa il body è trasparente, vedi superadmin-3d.css). */
html[data-vertical="superadmin"] { background: var(--canvas) !important; }
html[data-vertical="superadmin"] body {
background:
radial-gradient(820px 480px at 92% -14%, var(--accent-tint), transparent 58%) fixed,
radial-gradient(900px 620px at -18% 116%, var(--brass-tint), transparent 52%) fixed,
linear-gradient(180deg, #E6EEF8 0%, #D4E1F0 100%) fixed !important;
}
/* Le superfici di MudLayout devono restare trasparenti: lo sfondo di brand è sul body. */
.mud-layout,
.mud-main-content { background: transparent !important; }
/* Footer sempre in fondo (sticky footer). Catena flex completa a partire da
.mud-layout: MudBlazor lo lascia in height:100% NON-flex, quindi da solo il
main-content non ha un'altezza a cui ancorarsi e resta spazio vuoto sotto.
- .mud-layout: colonna flex alta almeno quanto la viewport, ma height:auto
così cresce col contenuto lungo (appbar e drawer sono position:fixed, fuori
dal flusso: l'unico figlio in-flusso è il main-content).
- .mud-main-content: flex:1 0 auto riempie l'altezza residua; a sua volta è
colonna flex così il contenitore pagina spinge l'AppFooter in fondo.
- .mud-container: cresce e occupa lo spazio, l'AppFooter (flex-shrink:0) resta
incollato in basso anche con poco contenuto. */
.mud-layout {
display: flex;
flex-direction: column;
min-height: 100dvh;
height: auto;
}
.mud-main-content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.mud-main-content > .mud-container {
flex: 1 0 auto;
}
.mud-typography {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
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: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
/* Heading hero (login/onboarding/booking pubblico): serif elegante */
.auth-logo,
.mud-typography-h4.hero-title,
.mud-typography-h5.hero-title {
font-family: 'Playfair Display', 'Georgia', serif;
font-weight: 700;
letter-spacing: 0;
}
.mud-typography-overline {
color: var(--text-faint);
letter-spacing: 0.08em;
font-weight: 600;
}
.mud-text-secondary,
.mud-typography-body2.mud-text-secondary { color: var(--text-muted) !important; }
a, .mud-link { color: var(--accent-dark); }
a:hover { color: var(--accent-darker); }
::selection { background: var(--accent-tint-strong); color: var(--text); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* ===================== ANIMAZIONE INGRESSO PAGINE =====================
Le superfici principali entrano con un fade+slide leggero quando vengono
montate (cambio pagina). Breve e una sola volta: non disturba i re-render. */
.mud-main-content .page-header,
.mud-main-content .mud-card,
.mud-main-content .mud-table,
.mud-main-content .mud-data-grid,
.mud-main-content .mud-paper:not(.mud-menu *):not(.mud-popover) {
animation: pageIn 0.38s var(--ease-slow) both;
}
/* ===================== APPBAR — scura, nel colore di brand del verticale ===================== */
/* L'header prende l'ink del verticale attivo: ogni area ha il suo carattere,
lo stile resta identico. */
.mud-appbar {
background: linear-gradient(110deg, var(--ink) 0%, var(--ink-soft) 100%) !important;
color: var(--text-on-ink) !important;
box-shadow: 0 2px 14px rgba(2, 8, 20, 0.30) !important;
border-bottom: none;
}
.mud-appbar .mud-typography-h6 {
font-weight: 700;
letter-spacing: -0.01em;
color: #FFFFFF !important;
}
/* Frase fissa al centro dell'header, uguale per tutti i verticali (vedi
MainLayout.razor) — nascosta sotto una certa larghezza, non c'è spazio
accanto a menu/email/logout. */
.appbar-tagline {
color: var(--text-on-ink-muted, rgba(255, 255, 255, 0.72)) !important;
font-style: italic;
white-space: nowrap;
}
@media (max-width: 959.98px) {
.appbar-tagline { display: none; }
}
/* icona di brand accanto al titolo: tocco di colore del verticale */
.mud-appbar > .mud-icon-root {
color: var(--accent-light) !important;
filter: drop-shadow(0 0 10px var(--accent-tint-strong));
}
.mud-appbar .mud-icon-button {
color: var(--text-on-ink) !important;
opacity: 0.85;
transition: background-color var(--ease), color var(--ease), opacity var(--ease);
}
.mud-appbar .mud-icon-button .mud-icon-root { color: inherit !important; }
.mud-appbar .mud-icon-button:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: #FFFFFF !important;
opacity: 1;
}
.mud-appbar .mud-text-secondary,
.mud-appbar .mud-typography-body1,
.mud-appbar .mud-typography-body2 {
color: var(--text-on-ink) !important;
opacity: 0.9;
}
/* Contatore della posta non letta (MainLayout, solo SuperAdmin).
Quello di serie è tarato per un contenuto chiaro: sull'appbar scura risulta grosso
e staccato dalla busta. Qui diventa una pastiglia piccola appoggiata all'angolo,
con un anello del colore dell'header al posto del bordo — così si stacca dall'icona
senza aggiungere spessore. !important perché MudBlazor scrive misure e transform
sulle proprie classi. */
.mail-badge .mud-badge {
min-width: 15px !important;
height: 15px !important;
padding: 0 4px !important;
font-size: 0.6rem !important;
font-weight: 700 !important;
line-height: 15px !important;
letter-spacing: 0.2px;
border-radius: 999px !important;
border: none !important;
/* L'anello sostituisce il bordo: due pixel del colore dell'appbar staccano la
pastiglia dalla busta senza farla sembrare più grande. */
box-shadow: 0 0 0 2px var(--ink), 0 1px 3px rgba(2, 8, 20, 0.45) !important;
/* Più attaccata all'icona: di serie il badge sporge parecchio dall'angolo. */
transform: translate(30%, -30%) !important;
}
/* La busta accanto al numero non deve stare al massimo dell'opacità come le altre:
con la pastiglia rossa sopra, l'insieme risulterebbe pesante. */
.mail-badge .mud-icon-button {
opacity: 0.9;
padding: 0;
}
/* ===================== DRAWER / NAV — sidebar scura di brand ===================== */
/* Stessa famiglia cromatica dell'appbar: chrome scuro coeso, contenuto chiaro.
Il colore cambia con il verticale tramite --ink / --ink-soft. */
.mud-drawer {
background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 140%) !important;
color: var(--text-on-ink) !important;
border-right: none !important;
box-shadow: 2px 0 18px rgba(2, 8, 20, 0.18);
}
/* aurora di brand in testa e bagliore caldo in fondo alla sidebar */
.mud-drawer::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(320px 240px at 18% -8%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%),
radial-gradient(280px 280px at 112% 106%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 72%);
animation: auroraDrift 16s ease-in-out infinite alternate;
pointer-events: none;
}
/* filo luminoso che separa la sidebar dal contenuto */
.mud-drawer::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 1px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent-light) 45%, transparent),
transparent 30%,
transparent 70%,
color-mix(in srgb, var(--brass) 35%, transparent));
pointer-events: none;
}
.mud-drawer .mud-navmenu { padding: 12px 0; }
.mud-drawer .mud-nav-link {
color: color-mix(in srgb, var(--text-on-ink) 76%, transparent) !important;
border-radius: var(--r-sm);
margin: 2px 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 500;
position: relative;
transition: background-color var(--ease), color var(--ease),
box-shadow var(--ease), transform var(--ease);
}
.mud-drawer .mud-nav-link:hover {
background: rgba(255, 255, 255, 0.07) !important;
color: #FFFFFF !important;
transform: translateX(2px);
}
.mud-drawer .mud-nav-link.mud-nav-link-active {
background: color-mix(in srgb, var(--accent) 26%, transparent) !important;
color: #FFFFFF !important;
font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-light) 35%, transparent);
}
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
color: var(--accent-light) !important;
}
.mud-drawer .mud-nav-link .mud-icon-root {
color: inherit !important;
transition: transform var(--ease);
}
.mud-drawer .mud-nav-link:hover .mud-icon-root { transform: scale(1.08); }
.mud-drawer .mud-divider {
border-color: rgba(255, 255, 255, 0.10) !important;
margin: 8px 16px;
}
/* Se il primo elemento visibile del menu ha DividerBefore (es. area SuperAdmin,
dove AuthorizeView nasconde le voci Owner/Staff), il divisore resterebbe
orfano in testa al menu: lo nascondiamo. I divisori TRA sezioni non sono
first-child e restano visibili. */
.mud-drawer .mud-navmenu > .mud-divider:first-child { display: none; }
/* gruppi di navigazione (sezioni addon) */
.mud-drawer .mud-nav-group > .mud-nav-link,
.mud-drawer .mud-nav-group .mud-nav-group-title {
color: color-mix(in srgb, var(--text-on-ink) 76%, transparent) !important;
}
.mud-drawer .mud-nav-group .mud-collapse-container .mud-navmenu { padding: 0; }
/* testi generici e overline nel drawer */
.mud-drawer .mud-typography,
.mud-drawer .mud-typography-overline {
color: color-mix(in srgb, var(--text-on-ink) 80%, transparent);
}
/* scrollbar del drawer in tono scuro */
.mud-drawer ::-webkit-scrollbar-track { background: transparent; }
.mud-drawer ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.18);
border: 2px solid transparent;
background-clip: content-box;
}
/* ===================== PAGE HEADER =====================
Nessuna card: il titolo vive direttamente sul canvas. Identità data da
due elementi leggeri: titolo con gradient text animato e alone radiale
soft dietro l'icona. Nessuna linea decorativa sotto il titolo. */
.page-header {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative;
overflow: visible;
padding: 4px 2px 16px !important;
}
/* alone radiale che respira dietro l'icona */
.page-header::before {
content: '';
position: absolute;
left: -22px; top: 50%;
width: 110px; height: 110px;
transform: translateY(-58%);
border-radius: 50%;
background: radial-gradient(closest-side, var(--accent-tint-strong), transparent 72%);
animation: haloBreath 6s ease-in-out infinite;
pointer-events: none;
}
.page-header .mud-icon-root {
color: var(--accent) !important;
filter: drop-shadow(0 4px 12px var(--accent-tint-strong));
}
/* titolo pagina: colore unico e fisso (niente più ciclo giallo/arancione). */
.page-header .mud-typography-h4,
.page-header .mud-typography-h5 {
color: var(--accent-dark, #8B5D38);
font-weight: 800;
letter-spacing: -0.02em;
}
/* ===================== BUTTONS ===================== */
.mud-button-root {
border-radius: var(--r-sm) !important;
text-transform: none !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
transition: background-color var(--ease), color var(--ease),
transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.mud-button-filled.mud-button-filled-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
color: #FFFFFF !important;
box-shadow: var(--shadow-xs), 0 3px 10px var(--accent-tint-strong) !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-darker) 100%) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-sm), 0 6px 16px var(--accent-tint-strong) !important;
}
.mud-button-filled.mud-button-filled-primary:active { transform: translateY(0) scale(0.98); }
.mud-button-outlined.mud-button-outlined-primary {
border-color: var(--accent) !important;
color: var(--accent-dark) !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover {
background: var(--accent-tint) !important;
border-color: var(--accent-dark) !important;
transform: translateY(-1px);
}
.mud-button-outlined.mud-button-outlined-default {
border-color: var(--border-strong) !important;
color: var(--text-muted) !important;
}
.mud-button-outlined.mud-button-outlined-default:hover {
background: var(--surface-2) !important;
}
.mud-button-text.mud-button-text-primary { color: var(--accent-dark) !important; }
.mud-button-text.mud-button-text-primary:hover { background: var(--accent-tint) !important; }
.mud-icon-button { transition: background-color var(--ease), color var(--ease), transform var(--ease); }
.mud-icon-button:hover { background: var(--accent-tint) !important; }
.mud-icon-button:active { transform: scale(0.92); }
/* gruppo bottoni (es. switch vista calendario) */
.mud-button-group-outlined .mud-button-root { border-color: var(--border-strong) !important; }
.mud-button-group .mud-button-root.mud-button-outlined-primary { background: var(--accent-tint) !important; }
/* ===================== PAPER / CARD ===================== */
.mud-paper {
border-radius: var(--r-md) !important;
border: 1px solid var(--border);
box-shadow: var(--shadow-xs) !important;
background: var(--surface) !important;
}
.mud-paper.mud-elevation-0 { box-shadow: none !important; }
/* eccezioni (dichiarate dopo e più specifiche: vincono sul .mud-paper sopra):
superfici che hanno uno sfondo di brand proprio */
.mud-paper.page-header {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.mud-paper.stat-card {
background: var(--surface) !important;
}
.mud-card {
border-radius: var(--r-md) !important;
border: 1px solid var(--border);
box-shadow: var(--shadow-xs) !important;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}
.mud-card:hover {
box-shadow: var(--shadow-sm) !important;
border-color: var(--border-strong);
}
.mud-card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.mud-card-header .mud-typography-h6 { font-size: 1.05rem; }
.mud-card-content { padding: 20px; }
.mud-card-actions { padding: 12px 16px; gap: 8px; }
/* ===================== DATA GRID / TABLE ===================== */
.mud-data-grid,
.mud-table {
border-radius: var(--r-md) !important;
border: 1px solid var(--border);
box-shadow: var(--shadow-xs) !important;
overflow: hidden;
background: var(--surface) !important;
}
.mud-data-grid .mud-table-head,
.mud-table .mud-table-head {
background: var(--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(--text-muted) !important;
font-weight: 600 !important;
letter-spacing: 0.045em;
text-transform: uppercase;
font-size: 0.71rem;
border-bottom: 1px solid var(--border-strong);
padding-top: 14px;
padding-bottom: 14px;
}
.mud-table-cell {
border-bottom: 1px solid var(--border);
color: var(--text);
font-size: 0.9rem;
}
.mud-table-row { transition: background-color var(--ease); }
.mud-table-row:nth-child(even) { background: var(--surface-2); }
.mud-table-row:hover { background: var(--accent-tint) !important; }
.mud-table-pagination,
.mud-table-toolbar {
border-top: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-muted);
}
/* ===================== DIALOG ===================== */
.mud-overlay-dialog { backdrop-filter: blur(3px); }
.mud-dialog {
border-radius: var(--r-lg) !important;
overflow: hidden;
box-shadow: var(--shadow-lg) !important;
border: 1px solid var(--border);
animation: popIn 0.26s var(--ease-slow) both;
}
.mud-dialog-title {
background: var(--surface) !important;
color: var(--text) !important;
font-weight: 700 !important;
font-size: 1.1rem;
padding: 20px 24px !important;
border-bottom: 1px solid var(--border);
}
.mud-dialog-title .mud-icon-root { color: var(--accent) !important; }
.mud-dialog-content {
padding: 24px !important;
color: var(--text);
}
.mud-dialog-actions {
background: var(--surface-2) !important;
padding: 16px 24px !important;
gap: 8px;
border-top: 1px solid var(--border);
}
/* messaggi di conferma (ShowMessageBox) */
.mud-message-box .mud-dialog-content { padding: 24px !important; }
/* ===================== CHIPS ===================== */
.mud-chip {
border-radius: 999px !important;
font-weight: 600;
font-size: 0.78rem;
}
.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(--sage-tint) !important; color: var(--sage-dark) !important; }
.mud-chip.mud-chip-color-success { background: var(--success) !important; color: #FFFFFF !important; }
.mud-chip.mud-chip-color-error { background: var(--error) !important; color: #FFFFFF !important; }
.mud-chip.mud-chip-color-warning { background: var(--warning) !important; color: #FFFFFF !important; }
.mud-chip.mud-chip-color-info { background: var(--accent) !important; color: #FFFFFF !important; }
.mud-chip.mud-chip-color-default { background: var(--surface-3) !important; color: var(--text-muted) !important; }
/* ===================== ALERT ===================== */
.mud-alert {
border-radius: var(--r-md) !important;
font-weight: 500;
}
.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-standard-info { background: var(--info-tint) !important; color: var(--accent-darker) !important; }
.mud-alert.mud-alert-text-success,
.mud-alert.mud-alert-standard-success { background: var(--success-tint) !important; color: var(--sage-dark) !important; }
.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-standard-warning { background: var(--warning-tint) !important; color: #8A610E !important; }
.mud-alert.mud-alert-text-error,
.mud-alert.mud-alert-standard-error { background: var(--error-tint) !important; color: #8C3530 !important; }
.mud-alert.mud-alert-filled-success { background: var(--success) !important; }
.mud-alert.mud-alert-filled-error { background: var(--error) !important; }
.mud-alert.mud-alert-filled-warning { background: var(--warning) !important; }
.mud-alert.mud-alert-filled-info { background: var(--accent) !important; }
/* ===================== LIST ===================== */
.mud-list-item {
border-radius: var(--r-sm);
transition: background-color var(--ease);
}
.mud-list-item:hover { background: var(--accent-tint) !important; }
.mud-list .mud-divider { border-color: var(--border); }
/* ===================== INPUTS / SELECT / PICKER ===================== */
.mud-input-outlined .mud-input-outlined-border {
border-color: var(--border-strong) !important;
border-radius: var(--r-sm) !important;
transition: border-color var(--ease), box-shadow var(--ease);
}
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--accent-light) !important; }
.mud-input-outlined.mud-focused .mud-input-outlined-border {
border-color: var(--accent) !important;
border-width: 2px !important;
box-shadow: 0 0 0 3px var(--accent-tint);
}
.mud-input-label.mud-input-label-animated.mud-focused { color: var(--accent-dark) !important; }
.mud-input-error .mud-input-outlined-border { border-color: var(--error) !important; }
.mud-input-helper-text.mud-input-error { color: var(--error) !important; }
.mud-input-control input::placeholder { color: var(--text-faint); }
/* popover di select / datepicker / menu */
.mud-popover {
border-radius: var(--r-md) !important;
box-shadow: var(--shadow-lg) !important;
border: 1px solid var(--border);
animation: popIn 0.18s var(--ease-slow) both;
}
.mud-list-item-clickable.mud-selected-item {
background: var(--accent-tint-strong) !important;
color: var(--accent-darker) !important;
}
.mud-picker-toolbar { background: var(--ink) !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; }
/* switch */
.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; }
/* checkbox */
.mud-checkbox .mud-checkbox-true,
.mud-checkbox .mud-checkbox-indeterminate { color: var(--accent) !important; }
/* ===================== TABS ===================== */
.mud-tabs-toolbar { border-bottom: 1px solid var(--border); }
.mud-tab {
text-transform: none !important;
font-weight: 600 !important;
color: var(--text-muted) !important;
letter-spacing: 0 !important;
transition: color var(--ease), background-color var(--ease);
}
.mud-tab:hover { background: var(--accent-tint); }
.mud-tab.mud-tab-active { color: var(--accent-dark) !important; }
.mud-tab-slider.mud-tab-slider-horizontal {
background: linear-gradient(90deg, var(--accent), var(--brass)) !important;
height: 3px;
border-radius: 3px 3px 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-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar { background: var(--accent) !important; }
.mud-progress-linear { border-radius: 6px; background: var(--surface-3) !important; }
.mud-progress-circular.mud-progress-circular-color-primary .mud-progress-circular-circle { color: var(--accent) !important; }
/* ===================== DIVIDER / TOOLTIP ===================== */
.mud-divider { border-color: var(--border) !important; }
.mud-tooltip {
background: var(--ink) !important;
color: #FFFFFF !important;
border-radius: var(--r-sm) !important;
font-size: 0.76rem;
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 CARDS (dashboard / pagamenti) =====================
Superficie pulita, nessuna barra/tinta sui bordi: numero protagonista,
etichetta muted, bagliore soft che respira nell'angolo come unico elemento
di vita. Bordo GRIGIO NEUTRO FISSO (--neutral-border, non --border-strong):
il cliente non vuole bordi colorati su NESSUN verticale, nemmeno in hover. */
.stat-card,
.stat-card.mud-card-outlined {
background: var(--surface) !important;
border: 1px solid var(--neutral-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-xs) !important;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
position: relative;
overflow: hidden;
}
/* bagliore radiale soft nell'angolo in basso a destra, quasi impercettibile */
.stat-card::after {
content: '';
position: absolute;
right: -50px; bottom: -50px;
width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(closest-side, var(--accent-tint), transparent 74%);
animation: haloBreath 7s ease-in-out infinite;
pointer-events: none;
}
.stat-card:hover,
.stat-card.mud-card-outlined:hover {
transform: translateY(-3px);
border-color: var(--neutral-border-hover) !important;
box-shadow: var(--shadow-md) !important;
}
.stat-card .mud-card-content { padding: 18px 20px; }
.stat-card .mud-typography-overline {
color: var(--text-muted);
letter-spacing: 0.09em;
}
.stat-card .mud-typography-h4 {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-top: 2px;
color: var(--text);
}
/* icona (dove presente) in chip tondo con tinta accent soft */
.stat-card .mud-icon-root {
color: var(--accent) !important;
background: var(--accent-tint);
border-radius: 50%;
padding: 9px;
box-sizing: content-box;
transition: transform var(--ease-slow);
}
.stat-card:hover .mud-icon-root { transform: scale(1.1); }
/* ===================== 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:
radial-gradient(360px 130px at 50% -60px, var(--accent-tint), transparent 75%),
var(--surface) !important;
transition: transform var(--ease-slow), box-shadow var(--ease-slow), border-color var(--ease);
}
.plan-card:hover {
transform: translateY(-5px);
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:
radial-gradient(320px 120px at 85% -40px, var(--accent-tint), transparent 75%),
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(-4px);
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(-3px);
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 — corporate navy ===================== */
.login-bg {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(1100px 720px at 78% -22%, rgba(37, 99, 235, 0.22), transparent 60%),
radial-gradient(900px 620px at -12% 112%, rgba(14, 165, 233, 0.15), transparent 55%),
radial-gradient(700px 500px at 50% 120%, rgba(124, 58, 237, 0.10), transparent 60%),
linear-gradient(150deg, #0B1322 0%, #122036 55%, #0C1626 100%);
position: relative;
overflow: hidden;
}
/* aurora conica che ruota lentamente dietro tutto */
.login-bg::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 160vmax; height: 160vmax;
margin: -80vmax 0 0 -80vmax;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(37, 99, 235, 0.10) 60deg,
transparent 120deg,
rgba(124, 58, 237, 0.08) 190deg,
transparent 250deg,
rgba(14, 165, 233, 0.09) 310deg,
transparent 360deg);
filter: blur(50px);
animation: spinSlow 60s linear infinite;
pointer-events: none;
}
/* griglia tech che sfuma verso i bordi */
.login-bg::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 54px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 54px);
-webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 30%, transparent 100%);
mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 30%, transparent 100%);
pointer-events: none;
}
/* Sfere di luce animate nello sfondo — blu corporate, molto soft */
.login-orb {
position: absolute;
border-radius: 50%;
filter: blur(95px);
pointer-events: none;
animation: orbFloat 12s ease-in-out infinite;
}
.login-orb-1 {
width: 520px; height: 520px;
background: radial-gradient(circle, #2563EB 0%, transparent 70%);
opacity: 0.18;
top: -140px; right: -90px;
animation-delay: 0s;
}
.login-orb-2 {
width: 360px; height: 360px;
background: radial-gradient(circle, #0EA5E9 0%, transparent 70%);
opacity: 0.14;
bottom: -90px; left: -60px;
animation-delay: -3.8s;
}
.login-orb-3 {
width: 260px; height: 260px;
background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
opacity: 0.12;
top: 42%; left: 32%;
animation-delay: -7s;
}
/* Carta centrata — glow che respira */
.login-card {
width: 100%;
max-width: 430px;
border-radius: 20px;
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: 0 40px 100px rgba(2, 8, 20, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
animation: popIn 0.45s var(--ease-slow) both,
glowBreath 6s ease-in-out 0.45s infinite;
}
/* filo di brand in testa alla carta: gradiente che scorre */
.login-card::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, #2563EB, #38BDF8, #818CF8, #2563EB);
background-size: 300% 100%;
animation: gradientShift 6s ease-in-out infinite;
}
/* Body con form */
.login-card-body {
background: #fff;
padding: 34px 40px 28px;
text-align: center;
}
.login-card-body .login-form,
.login-card-body form { text-align: left; }
/* Badge logo sopra il titolo — fluttua dolcemente con alone luminoso */
.login-brand-mark {
width: 56px; height: 56px;
margin: 0 auto 14px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
box-shadow: 0 10px 26px rgba(37, 99, 235, 0.35);
animation: floatY 5s ease-in-out infinite;
position: relative;
}
.login-brand-mark::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(129, 140, 248, 0.25));
filter: blur(12px);
z-index: -1;
}
.login-brand-mark .mud-icon-root {
color: #fff !important;
font-size: 1.9rem;
}
.login-form-title {
font-size: 1.5rem; font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 4px;
background: linear-gradient(100deg, #101828 40%, #2563EB 85%, #4F46E5);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-form-sub {
font-size: 0.87rem; color: #667085;
margin-bottom: 26px;
}
.login-form { margin-bottom: 22px; }
.login-btn {
height: 50px !important;
font-size: 1rem !important;
letter-spacing: 0.01em !important;
border-radius: 12px !important;
}
/* Invito alla registrazione sotto il form di login (visibile solo se la registrazione è abilitata). */
.login-signup {
text-align: center;
font-size: 0.88rem;
color: var(--text-faint);
margin: 18px 0 10px;
}
.login-signup a {
color: var(--accent-dark); font-weight: 600; text-decoration: none;
}
.login-signup a:hover { color: var(--accent); text-decoration: underline; }
.login-policy-links {
display: flex; align-items: center; justify-content: center;
gap: 8px;
font-size: 0.79rem; color: var(--text-faint);
margin-bottom: 10px;
}
.login-policy-links a {
color: var(--accent-dark); text-decoration: none;
transition: color var(--ease);
}
.login-policy-links a:hover { color: var(--accent); text-decoration: underline; }
.login-policy-links span { color: var(--border-strong); }
.login-copyright {
text-align: center; font-size: 0.74rem; color: var(--text-faint);
}
/* --- Tablet/mobile: mascotte impilata sopra la card invece che a fianco --- */
@media (max-width: 59.99em) {
.login-bg { flex-direction: column; }
}
/* --- Mobile --- */
@media (max-width: 600px) {
.login-bg { padding: 20px 16px; align-items: center; justify-content: flex-start; }
.login-orb { display: none; }
.login-bg::before, .login-bg::after, .auth-hero::before { display: none; }
.login-card {
max-width: 420px; min-height: auto;
border-radius: 20px;
box-shadow: 0 30px 70px rgba(2, 8, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.login-card-body { padding: 28px 24px 24px; }
}
@media (max-width: 380px) {
.login-card-body { padding: 24px 18px 20px; }
}
/* ===================== SIGNUP / ONBOARDING / BOOKING ===================== */
.auth-hero {
position: relative;
/* 100dvh: con 100vh la barra degli indirizzi di Safari/Chrome mobile rende il viewport
reale più corto 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: 24px;
overflow: hidden;
background:
radial-gradient(ellipse at 18% 12%, var(--brass-tint), transparent 55%),
radial-gradient(ellipse at 88% 92%, var(--accent-tint-strong), transparent 55%),
var(--canvas);
}
/* aurora di brand che ruota dietro la card (signup/onboarding/booking) */
.auth-hero::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 160vmax; height: 160vmax;
margin: -80vmax 0 0 -80vmax;
background: conic-gradient(from 0deg,
transparent 0deg,
var(--accent-tint) 70deg,
transparent 140deg,
var(--brass-tint) 210deg,
transparent 280deg,
var(--accent-tint) 330deg,
transparent 360deg);
filter: blur(46px);
animation: spinSlow 70s linear infinite;
pointer-events: none;
}
.auth-card {
position: relative;
z-index: 1;
background: var(--surface) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--shadow-lg) !important;
border: 1px solid var(--border);
overflow: hidden;
max-width: 420px;
width: 100%;
animation: popIn 0.45s var(--ease-slow) both;
}
/* Larghezze delle varianti: erano stili inline sulle MudPaper, e da inline vincevano
sull'override mobile qui sotto rendendolo inefficace. */
.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::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--brass), var(--accent-light), var(--accent));
background-size: 300% 100%;
animation: gradientShift 6s ease-in-out infinite;
}
.auth-card .auth-logo {
font-weight: 700;
font-size: 1.7rem;
color: var(--text);
letter-spacing: 0;
text-align: center;
}
.auth-card .auth-logo .auth-icon { color: var(--accent); margin: 0 0.35rem; }
.auth-card .auth-subtitle {
color: var(--text-muted);
letter-spacing: 0.01em;
text-align: center;
font-style: italic;
}
.auth-card .auth-divider {
height: 3px;
width: 48px;
margin: 0.75rem auto 1.25rem;
background: linear-gradient(90deg, var(--accent), var(--brass));
border-radius: 3px;
}
/* ===================== SELETTORE VERTICALE (signup) ===================== */
.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;
padding: 12px 8px;
background: var(--surface);
border: 1.5px solid var(--border-strong);
border-radius: var(--r-sm);
color: var(--text-muted);
font: inherit;
cursor: pointer;
transition: border-color var(--ease), background-color var(--ease),
color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.vertical-option:hover {
border-color: var(--accent-light);
background: var(--accent-tint);
color: var(--accent-darker);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.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;
}
/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 6px;
border: 2px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--canvas); }
/* ===================== SNACKBAR ===================== */
.mud-snackbar { border-radius: var(--r-md) !important; box-shadow: var(--shadow-md) !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(--accent) !important; }
/* ===========================================================
RESPONSIVE
=========================================================== */
/* Tab scrollabili ovunque: su schermi stretti non spezzano il layout */
.mud-tabs-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --- Tablet (≤ 960px) --- */
@media (max-width: 960px) {
.mud-main-content > .mud-container {
padding-left: 14px !important;
padding-right: 14px !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; }
.mud-appbar .mud-typography-h6 { font-size: 1rem; }
/* contenuto a tutta larghezza con margini ridotti */
.mud-main-content > .mud-container {
padding-left: 10px !important;
padding-right: 10px !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(--r-md) !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 alone più compatto */
.page-header { padding: 2px 0 12px !important; }
.page-header::before { width: 84px; height: 84px; left: -16px; }
}
/* --- Mobile piccolo (≤ 380px) --- */
@media (max-width: 380px) {
.mud-appbar .mud-typography-h6 { font-size: 0.9rem; }
.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 grigio chiaro più visibile (theme-aware via --border-strong),
radius invariato: eredita quello del .mud-paper. */
.support-card {
border: 1px solid var(--border-strong) !important;
}
/* --- Badge Assistenza (lampeggiante) --- */
.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: 10px;
background: #E53935;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6);
animation: support-blink 1.2s ease-in-out infinite;
}
/* ===================== MAIN CONTENT — STICKY FOOTER ===================== */
/* MudMainContent diventa flex-column: il container si espande fino a riempire
lo schermo, spingendo il footer sempre in fondo alla viewport. */
.mud-main-content {
display: flex !important;
flex-direction: column !important;
min-height: calc(100vh - var(--mud-appbar-height, 64px));
}
.mud-main-content > .mud-container {
flex: 1 1 auto !important;
}
/* ===================== FOOTER ===================== */
/* Stesso sfondo scuro di brand dell'header (--ink → --ink-soft): cambia per
verticale, quindi resta sempre coerente coi colori del sito. */
.app-footer {
background: linear-gradient(110deg, var(--ink) 0%, var(--ink-soft) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 13px 28px;
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(--text-on-ink-muted, rgba(255, 255, 255, 0.72));
}
/* Frase breve e d'impatto al centro, in tinta accent chiara sul fondo scuro. */
.app-footer-tagline {
flex: 1 1 auto;
text-align: center;
font-size: 0.8rem;
font-style: italic;
letter-spacing: 0.01em;
color: var(--accent-light);
white-space: nowrap;
}
.app-footer-links {
display: flex;
align-items: center;
gap: 10px;
}
.app-footer-links a {
font-size: 0.76rem;
color: var(--text-on-ink-muted, rgba(255, 255, 255, 0.72));
text-decoration: none;
transition: color var(--ease);
}
.app-footer-links a:hover { color: var(--accent-light); }
.app-footer-sep { color: rgba(255, 255, 255, 0.25); font-size: 0.76rem; }
/* Sotto un certo respiro non c'è spazio per la frase accanto a copy e link. */
@media (max-width: 959.98px) {
.app-footer-tagline { display: none; }
}
@media (max-width: 600px) {
.app-footer-inner { flex-direction: column; align-items: flex-start; gap: 3px; }
}
/* SuperAdmin: l'--ink d'area (#0B1026) è quasi nero e "spegne" il blu. Nel footer
usiamo un indaco più chiaro e nettamente blu, comunque più scuro dello sfondo
pagina chiaro così i due piani restano ben distinti. */
html[data-vertical="superadmin"] .app-footer {
background: linear-gradient(110deg, #262C63 0%, #3A41A6 100%);
}
/* ===================== 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;
}
/* ===========================================================
FLOW 2.0 — LAYER PREMIUM
Glassmorphism, ingressi scaglionati, glow di brand animati,
micro-interazioni più ricche. Solo estetica additiva: nessun
cambio di layout, tutto guidato dalle variabili del verticale.
=========================================================== */
/* ---- keyframes aggiuntivi ---- */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes floatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* respiro di un alone radiale (page-header, stat-card) */
@keyframes haloBreath {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 var(--accent-tint-strong); }
50% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
}
@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; }
}
@keyframes auroraDrift {
from { transform: translateX(-4%) scale(1); opacity: 0.65; }
to { transform: translateX(4%) scale(1.06); opacity: 1; }
}
@keyframes spinSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes glowBreath {
0%, 100% { box-shadow: 0 40px 100px rgba(2, 8, 20, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.07),
0 0 60px rgba(37, 99, 235, 0.10); }
50% { box-shadow: 0 40px 110px rgba(2, 8, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.10),
0 0 90px rgba(37, 99, 235, 0.22); }
}
/* ---- APPBAR — vetro scuro di brand con filo animato ---- */
.mud-appbar {
background: linear-gradient(110deg,
color-mix(in srgb, var(--ink) 90%, transparent) 0%,
color-mix(in srgb, var(--ink-soft) 90%, transparent) 100%) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
position: relative;
overflow: hidden;
}
/* aurora di brand che respira dentro l'header */
.mud-appbar::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -8%; right: -8%;
background:
radial-gradient(560px 130px at 12% 130%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
radial-gradient(480px 150px at 88% -50%, color-mix(in srgb, var(--accent-light) 26%, transparent), transparent 70%),
radial-gradient(300px 110px at 55% 160%, color-mix(in srgb, var(--brass) 18%, transparent), transparent 70%);
animation: auroraDrift 13s ease-in-out infinite alternate;
pointer-events: none;
}
/* il contenuto dell'appbar resta sopra l'aurora */
.mud-appbar > * { position: relative; }
.mud-appbar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--brass), var(--accent-light), var(--accent));
background-size: 300% 100%;
animation: gradientShift 9s ease-in-out infinite;
opacity: 0.85;
pointer-events: none;
}
/* ---- INGRESSI SCAGLIONATI — le superfici entrano una dopo l'altra ---- */
.mud-main-content .mud-card:nth-child(1),
.mud-main-content .mud-grid > .mud-grid-item:nth-child(1) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(1) .mud-paper { animation-delay: 0.03s; }
.mud-main-content .mud-grid > .mud-grid-item:nth-child(2) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(2) .mud-paper { animation-delay: 0.09s; }
.mud-main-content .mud-grid > .mud-grid-item:nth-child(3) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(3) .mud-paper { animation-delay: 0.15s; }
.mud-main-content .mud-grid > .mud-grid-item:nth-child(4) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(4) .mud-paper { animation-delay: 0.21s; }
.mud-main-content .mud-grid > .mud-grid-item:nth-child(5) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(5) .mud-paper { animation-delay: 0.27s; }
.mud-main-content .mud-grid > .mud-grid-item:nth-child(n+6) .mud-card,
.mud-main-content .mud-grid > .mud-grid-item:nth-child(n+6) .mud-paper { animation-delay: 0.33s; }
/* ---- AREA SUPERADMIN — aurora indaco/ciano più presente su appbar e drawer.
Usa solo le variabili della palette superadmin: gli altri verticali non cambiano. */
html[data-vertical="superadmin"] .mud-appbar::before {
background:
radial-gradient(560px 180px at 84% -50%, color-mix(in srgb, var(--accent-light) 36%, transparent), transparent 70%),
radial-gradient(360px 140px at 42% 180%, color-mix(in srgb, var(--brass) 28%, transparent), transparent 70%);
}
html[data-vertical="superadmin"] .mud-drawer::before {
background:
radial-gradient(340px 260px at 18% -8%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%),
radial-gradient(300px 300px at 112% 106%, color-mix(in srgb, var(--brass) 22%, transparent), transparent 72%);
}
/* ---- BOTTONE PRIMARIO — riflesso che attraversa al passaggio ---- */
.mud-button-filled.mud-button-filled-primary {
position: relative;
overflow: hidden;
}
.mud-button-filled.mud-button-filled-primary::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 40%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: translateX(-160%);
transition: none;
pointer-events: none;
}
.mud-button-filled.mud-button-filled-primary:hover::after {
animation: shimmerSweep 0.7s var(--ease-slow) 1 both;
}
/* ---- CARD — bordo luminoso di brand all'hover (MAI su .stat-card: il
cliente non vuole bordi/glow colorati sulle card della dashboard) ---- */
.mud-card:hover:not(.stat-card) {
box-shadow: var(--shadow-sm), 0 0 0 1px var(--accent-light), 0 10px 30px var(--accent-tint-strong) !important;
}
/* ---- STAT CARD — icona che fluttua dolcemente ---- */
.stat-card .mud-icon-root {
animation: floatY 4.5s ease-in-out infinite;
}
.stat-card:nth-child(2) .mud-icon-root,
.mud-grid-item:nth-child(2) .stat-card .mud-icon-root { animation-delay: -1.4s; }
.mud-grid-item:nth-child(3) .stat-card .mud-icon-root { animation-delay: -2.6s; }
.mud-grid-item:nth-child(4) .stat-card .mud-icon-root { animation-delay: -3.5s; }
/* ---- NAV DRAWER — indicatore attivo luminoso ---- */
.mud-drawer .mud-nav-link.mud-nav-link-active::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--accent-light), var(--brass));
box-shadow: 0 0 10px var(--accent-tint-strong);
}
/* ---- TABELLE — riga hover che scivola appena ---- */
.mud-table-row:hover .mud-table-cell:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* ---- DIALOG — velo più profondo con blur e saturazione ---- */
.mud-overlay-dialog {
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
background: rgba(15, 12, 8, 0.32) !important;
}
/* ---- TABS — sottolineatura che nasce dal centro ---- */
.mud-tab { position: relative; }
.mud-tab::after {
content: '';
position: absolute;
left: 50%; right: 50%; bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--accent-light);
transition: left var(--ease-slow), right var(--ease-slow);
}
.mud-tab:hover:not(.mud-tab-active)::after { left: 22%; right: 22%; }
/* ---- CHIP — micro-scale all'hover (solo cliccabili) ---- */
.mud-chip.mud-clickable { transition: transform var(--ease), box-shadow var(--ease); }
.mud-chip.mud-clickable:hover { transform: translateY(-1px) scale(1.04); box-shadow: var(--shadow-xs); }
/* ---- BADGE — pulsazione soft (notifiche) ---- */
.mud-badge .mud-badge-content { animation: pulseGlow 2.4s ease-in-out infinite; }
/* ---- FAB — sempre con glow di brand ---- */
.mud-fab.mud-fab-primary,
.mud-button-fab.mud-button-fab-primary {
box-shadow: 0 10px 28px var(--accent-tint-strong), var(--shadow-sm) !important;
}
/* ---- SKELETON — shimmer di caricamento (utility) ----
Uso: */
.skeleton {
border-radius: var(--r-sm);
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
background-size: 200% 100%;
animation: skeletonWave 1.4s linear infinite;
}
.mud-skeleton { border-radius: var(--r-sm) !important; }
/* ---- EMPTY STATE — icona che fluttua (utility) ----
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(--text-muted);
}
.empty-state .mud-icon-root {
font-size: 3.2rem;
color: var(--accent-light);
animation: floatY 4s ease-in-out infinite;
filter: drop-shadow(0 8px 18px var(--accent-tint-strong));
}
/* ---- LOADING DOTS — indicatore a tre puntini (utility) ----
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; }
/* ---- SCROLL REVEAL leggero sui titoli di sezione ---- */
.mud-main-content h4, .mud-main-content h5 { animation: pageIn 0.4s var(--ease-slow) both; }
/* ===================== ACCESSIBILITÀ — riduzione movimento ===================== */
@media (prefers-reduced-motion: reduce) {
.support-blink-badge { animation: none; }
.login-orb { animation: none; }
/* aloni restano visibili ma statici */
.stat-card::after { animation: none; }
.mud-main-content .page-header,
.mud-main-content .mud-card,
.mud-main-content .mud-table,
.mud-main-content .mud-data-grid,
.mud-main-content .mud-paper:not(.mud-menu *):not(.mud-popover),
.mud-dialog, .mud-popover, .login-card, .auth-card { animation: none; }
.stat-card:hover, .mud-card:hover, .vertical-option:hover,
.mud-button-filled.mud-button-filled-primary:hover { transform: none; }
/* layer Flow 2.0 */
.mud-appbar::after,
.page-header::before,
.stat-card .mud-icon-root,
.mud-badge .mud-badge-content,
.empty-state .mud-icon-root,
.loading-dots i,
.skeleton,
.mud-main-content h4, .mud-main-content h5 { animation: none; }
.mud-button-filled.mud-button-filled-primary:hover::after { animation: none; }
.mud-chip.mud-clickable:hover { transform: none; }
/* layer aurora / login scenografico */
.mud-appbar::before,
.mud-drawer::before,
.login-bg::before,
.auth-hero::before,
.login-card::before,
.auth-card::before,
.login-brand-mark { animation: none; }
/* NOTA: .page-header title ed occhi mascotte NON vengono qui disattivati
di proposito — richiesta esplicita del cliente, restano sempre animati. */
}
/* ═══════════════════════════════════════════════════════════════════════════
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: #059669; }
.cal-kpi--trial { border-left-color: #D97706; }
.cal-kpi--danger { border-left-color: #DC2626; }
.cal-kpi__label {
font-size: .7rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary, #64748B);
}
.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: #94A3B8;
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: #DC2626; 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: #059669; }
/* ── 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, #64748B);
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, #64748B);
}
.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, #64748B);
}
.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: #059669; }
/* ── Legenda ── */
.cal-legend {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .74rem;
color: var(--mud-palette-text-secondary, #64748B);
}
.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: #D97706; }
.cal-legend__mark--pastdue { border-top-color: #DC2626; 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; }
}