/* * FlowYa Cockpit — thème premium (Filament v3) * --------------------------------------------------------------------------- * Fichier CSS unique pour le cockpit : garder les overrides visuels ici * (pas de styles dispersés dans les vues). Chargé après le thème Filament * (hook panels::styles.after dans AdminPanelProvider) pour ne pas être écrasé. * * Sélecteurs : le a la classe fi-panel-{id} (ex. fi-panel-admin ou * fi-panel-cockpit). On cible les deux pour que le thème s’applique même si * l’id du panel change entre environnements. * --------------------------------------------------------------------------- */ :root { /* —— Marque FlowYa —— */ --fy-orange: #f47b4a; --fy-orange-deep: #ea580c; --fy-orange-soft: rgba(244, 123, 74, 0.14); --fy-orange-glow: rgba(244, 123, 74, 0.22); /* Vert thérapeutique / qualitatif (accents, pas saturation) */ --fy-green: #0f766e; --fy-green-soft: rgba(15, 118, 110, 0.11); --fy-green-muted: #115e59; --fy-teal-glow: rgba(15, 118, 110, 0.12); /* Texte & surfaces */ --fy-ink: #0f172a; --fy-muted: #64748b; --fy-muted-soft: #94a3b8; --fy-surface: #ffffff; --fy-surface-2: #fbf6f2; --fy-surface-3: #f3ebe4; --fy-surface-warm: #fffbf7; --fy-border: rgba(15, 23, 42, 0.1); --fy-border-warm: rgba(244, 123, 74, 0.14); /* Ombres */ --fy-shadow-warm: 0 8px 28px -6px rgba(244, 123, 74, 0.18); --fy-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.05); --fy-ring-inset: inset 0 1px 0 rgba(255, 255, 255, 0.78); --fy-ring-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.95); /* Relief premium (cartes, panneaux) */ --fy-elev-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px -4px rgba(244, 123, 74, 0.1); --fy-elev-2: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 14px 32px -10px rgba(244, 123, 74, 0.18), var(--fy-ring-inset); --fy-elev-kpi: 0 2px 4px rgba(15, 23, 42, 0.04), 0 10px 28px -6px rgba(15, 23, 42, 0.07), 0 12px 36px -10px rgba(244, 123, 74, 0.14), var(--fy-ring-inset-strong); --fy-elev-hover: 0 10px 22px -6px rgba(15, 23, 42, 0.1), 0 22px 48px -12px rgba(244, 123, 74, 0.26), var(--fy-ring-inset); --fy-radius-card: 1.125rem; --fy-radius-lg: 1.35rem; --fy-radius-pill: 999px; /* Transitions */ --fy-ease-out: cubic-bezier(0.34, 1.15, 0.64, 1); --fy-duration: 0.22s; } /* ——— Fond général (remplace le gris Filament par une base chaude) ——— */ :is(.fi-body.fi-panel-admin, .fi-body.fi-panel-cockpit) { background: linear-gradient( 168deg, var(--fy-surface-2) 0%, #f5efe8 32%, #faf7f4 58%, #fffcfa 100% ) !important; background-attachment: fixed; } .dark :is(.fi-body.fi-panel-admin, .fi-body.fi-panel-cockpit) { background: linear-gradient(168deg, #0c0a09 0%, #1a1816 45%, #0f172a 100%) !important; } /* Colonne principale — espace sous la topbar (homogène toutes pages Cockpit) */ .fi-main { padding-top: 0.5rem; padding-bottom: 2.75rem; } /* ——— Sidebar ——— */ .fi-sidebar { background: radial-gradient(1200px 600px at -10% -20%, rgba(244, 123, 74, 0.2), transparent 58%), radial-gradient(900px 480px at 120% 10%, var(--fy-teal-glow), transparent 55%), linear-gradient(180deg, #fffef9 0%, #ffffff 100%); border-right: 1px solid var(--fy-border); box-shadow: 4px 0 24px -12px rgba(15, 23, 42, 0.08); } .dark .fi-sidebar { background: radial-gradient(900px 500px at -5% 0%, rgba(244, 123, 74, 0.12), transparent 50%), linear-gradient(180deg, #1c1917 0%, #0f0f0f 100%); box-shadow: 4px 0 32px -8px rgba(0, 0, 0, 0.35); } .fi-sidebar-header { border-bottom: 1px solid var(--fy-border); padding-top: 0.8rem !important; } :is(body.fi-panel-admin, body.fi-panel-cockpit) .fi-sidebar-header.fy-sidebar-brand-header { background: linear-gradient(100deg, #fffdfb 0%, #ffffff 55%, #fbf6f2 100%) !important; box-shadow: 0 6px 20px -10px rgba(244, 123, 74, 0.15) !important; border-bottom: 1px solid rgba(244, 123, 74, 0.1) !important; } .dark :is(body.fi-panel-admin, body.fi-panel-cockpit) .fi-sidebar-header.fy-sidebar-brand-header { background: linear-gradient(100deg, rgb(28 27 26) 0%, rgb(23 23 23) 100%) !important; border-bottom-color: rgba(244, 123, 74, 0.18) !important; } /* Wordmark FlowYa : largeur auto + léger relief (hauteur inline = brandLogoHeight). */ :is(body.fi-panel-admin, body.fi-panel-cockpit) img.fy-flowya-brand-logo-img { width: auto !important; max-width: min(12.5rem, 100%) !important; object-fit: contain !important; object-position: left center; filter: drop-shadow(0 2px 4px rgba(244, 123, 74, 0.16)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); } .dark :is(body.fi-panel-admin, body.fi-panel-cockpit) img.fy-flowya-brand-logo-img { filter: drop-shadow(0 2px 6px rgba(244, 123, 74, 0.25)); } /* Cloche notifications (activée via ->databaseNotifications() sur le panel). */ :is(body.fi-panel-admin, body.fi-panel-cockpit) .fi-topbar .fi-topbar-database-notifications-btn { position: relative; } :is(body.fi-panel-admin, body.fi-panel-cockpit) .fi-topbar .fi-topbar-database-notifications-btn:hover { color: var(--fy-orange) !important; background-color: rgba(244, 123, 74, 0.1) !important; } .fi-sidebar-nav .fi-sidebar-item a, .fi-sidebar-nav .fi-sidebar-item button { border-radius: 12px; transition: background 0.15s ease, box-shadow 0.15s ease; } .fi-sidebar-nav .fi-sidebar-item a:hover, .fi-sidebar-nav .fi-sidebar-item button:hover { background: var(--fy-orange-soft); box-shadow: var(--fy-shadow-soft); } .fi-sidebar-nav .fi-sidebar-item.fi-active a { background: linear-gradient(90deg, rgba(244, 123, 74, 0.22) 0%, rgba(244, 123, 74, 0.08) 100%); box-shadow: inset 3px 0 0 var(--fy-orange), var(--fy-shadow-soft); font-weight: 600; } /* Groupes de navigation */ .fi-sidebar-group-button { border-radius: 10px; } /* * Topbar : fond sur le