/* ===========================================================
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.
=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
: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;
--canvas: #F0F4F9; --drawer-bg: #E2E9F2; --surface: #FFFFFF; --surface-2: #EEF3F9; --surface-3: #DEE7F1;
--text: #1E293B; --text-muted: #475569; --text-faint: #94A3B8; --text-on-ink: #E2E8F0;
--border: #E0E8F2; --border-strong: #C9D5E6;
--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;
}
/* 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) {
/* Sotto questa soglia sette colonne diventano illeggibili: mese e settimana
scorrono orizzontalmente invece di comprimersi fino all'inutilizzabile. */
.cal-month, .cal-week { display: block; overflow-x: auto; white-space: nowrap; }
.cal-month > *, .cal-week > * {
display: inline-block;
vertical-align: top;
white-space: normal;
width: 140px;
}
.cal-month__cell { min-height: 110px; }
.cal-week__col { min-height: 280px; }
}
@media (max-width: 560px) {
.cal-kpis { grid-template-columns: 1fr; }
.cal-kpi__value { font-size: 1.3rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
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; }
}