/* ============================================================================ * PERCORSO 24 — ADMIN THEME (v2 — minimale, chirurgico) * ============================================================================ * Strategia: cambiamo SOLO colori (palette via CSS variables), MAI layout * né backgrounds di wrapper Filament. Filament usa sezioni nested e usando * `!important` su tutte avevamo creato un blob senza contrasto. * Qui tocchiamo solo: * - body bg (con tint pink) * - sidebar bg * - topbar bg * - stat cards (bordo e shadow) * - heading colore * - buttons primary * - badges * - input focus ring * - toggle dark mode * * SEZIONI * 1. TOKENS (light) * 2. TOKENS (dark) * 3. BODY / SIDEBAR / TOPBAR ← solo questi 3 outer wrapper * 4. HEADING (color del page-header) * 5. STAT CARD (KPI widget) * 6. BUTTONS primary * 7. INPUT focus * 8. BADGES color * 9. THEME TOGGLE * 10. UTILITY (scrollbar, focus-visible) * ============================================================================ */ /* ============================================================================ * 1. TOKENS — light mode * ============================================================================ */ :root { /* Palette WellPath: sidebar dark teal + body cream + accent blu vivo. Cambiato 2026-05-23 dalla precedente rosa femminile per stile più fresco/wellness/professionale (ref: screenshot WellPath dashboard). */ /* Sfondi */ --p24-bg: #F4F2EC; /* body — cream beige neutro */ --p24-bg-card: #FFFFFF; --p24-bg-sidebar: #1E3A3A; /* DARK teal — sidebar diventa scura */ --p24-bg-topbar: #FFFFFF; --p24-bg-muted: #E5F0FF; /* hover button — azzurro tenue */ /* Brand — BLU vivo per CTA */ --p24-primary: #2563EB; --p24-primary-hover: #1D4ED8; --p24-primary-soft: #DBEAFE; --p24-primary-text: #1E3A8A; /* Accent KPI colorati (immagine ref: 4 stat con icone rosso/verde/blu/giallo) */ --p24-accent-red: #EF4444; /* allenamenti / engagement */ --p24-accent-green: #10B981; /* nutrizione / health */ --p24-accent-violet: #8B5CF6; /* progressi */ --p24-accent-amber: #F59E0B; /* streak / gamification */ /* Aliases per retro-compatibilità con widget esistenti */ --p24-lavender: #8B5CF6; --p24-peach: #F59E0B; /* Testo */ --p24-text: #0F1B2A; /* navy quasi-nero */ --p24-text-muted: #5C6B7A; --p24-text-soft: #94A3B8; /* Bordi sottili neutri */ --p24-border: rgba(15, 27, 42, 0.08); --p24-border-strong: rgba(37, 99, 235, 0.32); /* Shadows più pulite, meno sature */ --p24-shadow-card: 0 4px 12px -4px rgba(15, 27, 42, 0.10), 0 1px 4px -1px rgba(0, 0, 0, 0.04); --p24-shadow-card-hover: 0 10px 24px -8px rgba(37, 99, 235, 0.22), 0 4px 10px -4px rgba(0, 0, 0, 0.06); } /* ============================================================================ * 2. TOKENS — dark mode * ============================================================================ */ .dark { --p24-bg: #14091A; /* dark plum profondo */ --p24-bg-card: #2B1A36; /* card distinta dal body (contrasto chiaro) */ --p24-bg-sidebar: #1E1126; --p24-bg-topbar: #1E1126; --p24-bg-muted: #3A2348; --p24-primary: #F472B6; --p24-primary-hover: #EC4899; --p24-primary-soft: #5B1F3F; --p24-primary-text: #FBCFE8; --p24-lavender: #C4B5FD; --p24-peach: #FDBA74; --p24-text: #F5E8EE; --p24-text-muted: #B4A0AB; --p24-text-soft: #7C6E76; --p24-border: rgba(244, 114, 182, 0.28); --p24-border-strong: rgba(244, 114, 182, 0.45); --p24-shadow-card: 0 4px 16px -6px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4); --p24-shadow-card-hover: 0 10px 28px -10px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5); } /* ============================================================================ * 3. BODY / SIDEBAR / TOPBAR * Layer outer della UI. NON tocchiamo .fi-section / .fi-main / wrapper interni * (Filament li usa per nesting → rischio blob senza contrasto). * ============================================================================ */ body.fi-panel-admin { background-color: var(--p24-bg) !important; } /* Sidebar SCURA (palette WellPath): testo bianco/azzurro, active item bg trasp. */ body.fi-panel-admin .fi-sidebar { background-color: var(--p24-bg-sidebar) !important; border-right: 1px solid var(--p24-border) !important; } body.fi-panel-admin .fi-sidebar, body.fi-panel-admin .fi-sidebar *:not(svg):not(path):not(line):not(polyline):not(circle):not(rect) { color: #FFFFFF !important; } body.fi-panel-admin .fi-sidebar svg { color: #FFFFFF !important; stroke: currentColor !important; } /* Filament 4 usa .fi-sidebar-item-btn come della voce nav. */ body.fi-panel-admin .fi-sidebar .fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; } /* Item attivo: bg blu brand (matcha CTA Dashboard) + testo bianco bold */ body.fi-panel-admin .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn { background-color: var(--p24-primary) !important; color: #FFFFFF !important; border-radius: 10px; font-weight: 600; box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.4); } body.fi-panel-admin .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn * { color: #FFFFFF !important; } body.fi-panel-admin .fi-sidebar .fi-sidebar-group-label { color: rgba(255, 255, 255, 0.45) !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; } body.fi-panel-admin .fi-topbar { background-color: var(--p24-bg-topbar) !important; border-bottom: 1px solid var(--p24-border) !important; } /* ============================================================================ * 4. HEADING — titolo pagina in rosa brand * ============================================================================ */ body.fi-panel-admin .fi-header-heading, body.fi-panel-admin .fi-page-header-heading, body.fi-panel-admin h1.fi-header-heading { color: var(--p24-primary) !important; } /* ============================================================================ * 5. STAT CARD (KPI widget) * Bordo rosa, shadow caldo, hover lift. Solo widget statistici (non wrapper). * ============================================================================ */ body.fi-panel-admin .fi-wi-stats-overview-stat { background-color: var(--p24-bg-card) !important; border: 1px solid var(--p24-border) !important; border-radius: 20px !important; box-shadow: var(--p24-shadow-card) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body.fi-panel-admin .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: var(--p24-shadow-card-hover) !important; border-color: var(--p24-border-strong) !important; } /* ============================================================================ * 6. BUTTONS — primary * ============================================================================ */ body.fi-panel-admin .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link), body.fi-panel-admin .fi-ac-btn-action.fi-color-primary { background-color: var(--p24-primary) !important; color: #ffffff !important; border-color: var(--p24-primary) !important; box-shadow: 0 4px 10px -3px rgba(236, 72, 153, 0.45) !important; } body.fi-panel-admin .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover { background-color: var(--p24-primary-hover) !important; border-color: var(--p24-primary-hover) !important; } /* ============================================================================ * 7. INPUT — focus ring rosa * ============================================================================ */ body.fi-panel-admin .fi-input:focus, body.fi-panel-admin input:focus:not([type="checkbox"]):not([type="radio"]), body.fi-panel-admin textarea:focus, body.fi-panel-admin select:focus { border-color: var(--p24-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--p24-primary) 22%, transparent) !important; outline: none !important; } /* ============================================================================ * 8. BADGES — primary in rosa * ============================================================================ */ body.fi-panel-admin .fi-badge.fi-color-primary { background-color: var(--p24-primary-soft) !important; color: var(--p24-primary-text) !important; } /* ============================================================================ * 9. THEME TOGGLE — bottone sole/luna in topbar * ============================================================================ */ .p24-theme-toggle { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--p24-text-muted); cursor: pointer; transition: background-color .18s ease, color .18s ease; border: none; margin-right: 8px; } .p24-theme-toggle:hover { background-color: var(--p24-bg-muted); color: var(--p24-primary); } .p24-theme-toggle svg { width: 18px; height: 18px; } /* ============================================================================ * 9.bis WIZARD — nascondiamo l'header pillole (sono variabili in base alle scelte) * e lasciamo solo il contenuto step. Il titolo dello step lo dà la Section * wrapper interna; prev/next restano nel footer Filament. * ============================================================================ */ /* Wizard header (pillole step con icona + titolo + minidesc) — VISIBILE. Re-mostriamo dopo che l'utente l'ha richiesto: serve a vedere a colpo d'occhio in quale passo siamo + cosa fanno gli altri passi. */ body.fi-panel-admin .fi-sc-wizard-header { display: flex; } /* Filament 4 wrappa il wizard in .fi-sc-component che si auto-restringe a content. Forziamo l'intera catena a full-width per riempire la pagina (5xl = 1024px). */ body.fi-panel-admin .fi-sc-wizard, body.fi-panel-admin .fi-sc-wizard.fi-contained, body.fi-panel-admin .fi-sc-wizard > .fi-sc-component, body.fi-panel-admin form.fi-sc-form > .fi-sc-component, body.fi-panel-admin form.fi-sc-form > .fi-sc-component:has(> .fi-sc-wizard) { max-width: none !important; width: 100% !important; } body.fi-panel-admin .fi-sc-wizard-step { width: 100%; } /* Breadcrumb item p24-screen-code (code-name interno) un po' più morbido */ body.fi-panel-admin .fi-breadcrumbs-list .p24-screen-code:before { content: none !important; } /* ============================================================================ * 10. UTILITY — scrollbar custom + focus-visible accent rosa * ============================================================================ */ body.fi-panel-admin *::-webkit-scrollbar { width: 8px; height: 8px; } body.fi-panel-admin *::-webkit-scrollbar-thumb { background: var(--p24-border-strong); border-radius: 999px; } body.fi-panel-admin *::-webkit-scrollbar-thumb:hover { background: var(--p24-primary); } body.fi-panel-admin *::-webkit-scrollbar-track { background: transparent; } body.fi-panel-admin *:focus-visible { outline: 2px solid var(--p24-primary) !important; outline-offset: 2px !important; }