/* ============================================================================ * Kids Premier ERP — Premium Calm Executive override layer * ---------------------------------------------------------------------------- * Phase 1 live-pilot. URL-driven flag: ?design=executive on any ERP page sets * data-design="executive" on via inline IIFE in base.html. * * EVERY rule in this file is strictly scoped under [data-design="executive"]. * Without the flag this file is INERT — zero impact on production UI. * * Loaded AFTER theme-tweakcn.css. Direction documented in: * docs/ui/calm_operator_dashboard_prototype.html * * Visual direction: Premium Calm Executive / Emerald Ledger * light -> warm ivory / pearl background, deep emerald primary * dark -> deep graphite, warm-ivory text, emerald lifted * accent -> dosed champagne (used very sparingly) * * Layer order (top to bottom): * 1. Optional premium serif for KPI numerics / headings (Fraunces) * 2. Token override layer (light + dark) * 3. Legacy variable bridge (--body-bg, --card-bg, --text-primary, ...) * 4. Base page surfaces (body, animations, scrollbars) * 5. Visual noise neutralizers (gradient-text, btn-3d, glass-card, * neon-border, .kpi-card::before, animated background) * 6. Component repaint (sidebar, kpi-card, table-modern, data-table, * form-control-modern, badge-modern, alert-modern, pagination, * buttons, fab, toasts, search modal) * 7. Targeted Tailwind utility overrides * (used heavily by AI Assistant page and dashboard) * 8. Form control hardcoded-value overrides (style.css uses !important on * input/select/textarea per data-theme; we win with higher specificity * under our scope) * * Rollback: remove to this file from templates/base.html (one line). * ============================================================================ */ /* Premium serif for headings + KPI numerics. Falls back to Inter if blocked. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap'); /* ============================================================================ * 1. TOKEN OVERRIDE LAYER — light * ============================================================================ */ [data-design="executive"]:root, [data-design="executive"][data-theme="light"] { --background: oklch(0.974 0.004 250); --background-glow: oklch(0.992 0.006 250); --foreground: oklch(0.18 0.018 240); --foreground-strong: oklch(0.12 0.020 240); --card: oklch(1.000 0 0); --card-tint: oklch(0.989 0.004 250); --card-foreground: oklch(0.18 0.018 240); --card-highlight: oklch(1 0 0 / 0.85); --popover: oklch(1.000 0 0); --popover-foreground: oklch(0.18 0.018 240); --muted: oklch(0.960 0.005 250); --muted-strong: oklch(0.934 0.006 250); --muted-foreground: oklch(0.46 0.015 240); --border: oklch(0.906 0.006 255); --border-strong: oklch(0.840 0.008 255); --hairline: oklch(0.938 0.005 255); --input: oklch(1.000 0 0); --primary: oklch(0.42 0.09 162); --primary-strong: oklch(0.36 0.10 162); --primary-foreground: oklch(0.985 0.005 90); --primary-soft: oklch(0.94 0.030 162); --primary-soft-fg: oklch(0.32 0.10 162); --primary-edge: oklch(0.34 0.09 162); --ring: oklch(0.45 0.10 162); --secondary: oklch(0.42 0.09 162); --secondary-foreground: oklch(0.985 0.005 90); --accent: oklch(0.42 0.09 162); --accent-foreground: oklch(0.985 0.005 90); --champagne: oklch(0.74 0.06 75); --champagne-soft: oklch(0.95 0.025 75); --champagne-fg: oklch(0.42 0.06 75); --success: oklch(0.50 0.12 155); --success-soft: oklch(0.95 0.030 155); --success-soft-fg: oklch(0.34 0.12 155); --warning: oklch(0.65 0.13 65); --warning-soft: oklch(0.96 0.040 80); --warning-soft-fg: oklch(0.42 0.13 65); --destructive: oklch(0.50 0.16 25); --destructive-foreground: oklch(0.99 0 0); --destructive-soft: oklch(0.96 0.030 25); --destructive-soft-fg: oklch(0.40 0.17 25); --neutral-soft: oklch(0.93 0.008 240); --neutral-soft-fg: oklch(0.36 0.015 240); --radius: 0.5rem; --radius-card: 0.625rem; --radius-button: 0.375rem; --shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.03); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.04); --shadow-card: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 8px 18px -12px oklch(0.20 0.03 255 / 0.18); --shadow-md: 0 8px 20px -8px oklch(0.20 0.03 255 / 0.16), 0 2px 6px -2px oklch(0 0 0 / 0.05); --shadow-lg: 0 20px 46px -14px oklch(0.18 0.03 255 / 0.24), 0 6px 16px -6px oklch(0 0 0 / 0.08); --shadow-press-light: inset 0 1px 0 oklch(1 0 0 / 0.85); --shadow-press-primary: inset 0 1px 0 oklch(1 0 0 / 0.18); } /* ============================================================================ * 1b. TOKEN OVERRIDE LAYER — dark (deep graphite + warm ivory text + emerald) * ============================================================================ */ [data-design="executive"][data-theme="dark"] { --background: oklch(0.145 0.008 240); --background-glow: oklch(0.180 0.014 240); --foreground: oklch(0.96 0.008 85); --foreground-strong: oklch(0.99 0.005 85); --card: oklch(0.195 0.010 240); --card-tint: oklch(0.180 0.010 240); --card-foreground: oklch(0.96 0.008 85); --card-highlight: oklch(1 0 0 / 0.06); --popover: oklch(0.205 0.010 240); --popover-foreground: oklch(0.96 0.008 85); --muted: oklch(0.230 0.010 240); --muted-strong: oklch(0.265 0.010 240); --muted-foreground: oklch(0.68 0.012 85); --border: oklch(0.275 0.010 240); --border-strong: oklch(0.34 0.012 240); --hairline: oklch(0.245 0.010 240); --input: oklch(0.195 0.010 240); --primary: oklch(0.62 0.09 162); --primary-strong: oklch(0.56 0.10 162); --primary-foreground: oklch(0.13 0.020 162); --primary-soft: oklch(0.30 0.045 162); --primary-soft-fg: oklch(0.86 0.10 162); --primary-edge: oklch(0.46 0.10 162); --ring: oklch(0.62 0.10 162); --secondary: oklch(0.62 0.09 162); --secondary-foreground: oklch(0.13 0.020 162); --accent: oklch(0.62 0.09 162); --accent-foreground: oklch(0.13 0.020 162); --champagne: oklch(0.78 0.06 75); --champagne-soft: oklch(0.30 0.040 75); --champagne-fg: oklch(0.86 0.07 75); --success: oklch(0.66 0.12 155); --success-soft: oklch(0.28 0.045 155); --success-soft-fg: oklch(0.84 0.12 155); --warning: oklch(0.78 0.13 65); --warning-soft: oklch(0.30 0.060 65); --warning-soft-fg: oklch(0.86 0.13 65); --destructive: oklch(0.66 0.15 25); --destructive-foreground: oklch(0.99 0 0); --destructive-soft: oklch(0.30 0.065 25); --destructive-soft-fg: oklch(0.85 0.14 25); --neutral-soft: oklch(0.265 0.010 240); --neutral-soft-fg: oklch(0.80 0.012 85); --shadow-xs: 0 1px 1px 0 oklch(0 0 0 / 0.40); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.35); --shadow-card: 0 1px 2px 0 oklch(0 0 0 / 0.45); --shadow-md: 0 8px 24px -8px oklch(0 0 0 / 0.55), 0 2px 6px -2px oklch(0 0 0 / 0.40); --shadow-lg: 0 16px 40px -8px oklch(0 0 0 / 0.60), 0 6px 12px -4px oklch(0 0 0 / 0.40); --shadow-press-light: inset 0 1px 0 oklch(1 0 0 / 0.05); --shadow-press-primary: inset 0 1px 0 oklch(1 0 0 / 0.10); } /* ============================================================================ * 2. LEGACY VARIABLE BRIDGE * Map historical project variables onto executive tokens so unmodified * components inherit the new palette without any template changes. * ============================================================================ */ [data-design="executive"]:root, [data-design="executive"][data-theme="light"], [data-design="executive"][data-theme="dark"] { --body-bg: var(--background); --card-bg: var(--card); --card-border: var(--border); --sidebar-bg: var(--card); --sidebar-border: var(--border); --text-primary: var(--foreground-strong); --text-secondary: var(--muted-foreground); --text-muted: var(--muted-foreground); --input-bg: var(--input); --input-border: var(--border); --hover-bg: var(--muted); --active-color: var(--primary); --primary-color: var(--primary); --primary-gradient: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%); } /* ============================================================================ * 3. BASE PAGE SURFACES * ============================================================================ */ [data-design="executive"] body { background-color: var(--background); background-image: radial-gradient(ellipse 1200px 600px at 50% -200px, var(--background-glow) 0%, transparent 70%); background-attachment: fixed; color: var(--foreground); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-design="executive"] ::selection { background: var(--primary-soft); color: var(--primary-soft-fg); } [data-design="executive"] h1, [data-design="executive"] h2, [data-design="executive"] h3, [data-design="executive"] h4 { letter-spacing: -0.012em; color: var(--foreground-strong); } /* Tabular numerics where the project already hints monospace intent */ [data-design="executive"] code, [data-design="executive"] kbd, [data-design="executive"] pre, [data-design="executive"] .num-mono { font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-variant-numeric: tabular-nums; } /* Fraunces only where serif premium feel is safe (display headlines + KPI numerics). * Fallback to Inter if @import is blocked. */ [data-design="executive"] .gradient-text, [data-design="executive"] h1.gradient-text, [data-design="executive"] .kpi-card h3 { font-family: 'Fraunces', 'Inter', serif; font-optical-sizing: auto; letter-spacing: -0.02em; font-weight: 600; font-variant-numeric: tabular-nums; } /* ============================================================================ * 4. VISUAL NOISE NEUTRALIZERS * Disable legacy decorations (animated bg, gradient text, 3D buttons, * glassmorphism, neon, KPI gradient strip, table translateX hover). * ============================================================================ */ /* Animated background -> static premium surface */ [data-design="executive"] body.bg-animated, [data-design="executive"] body { background-color: var(--background); background-image: radial-gradient(ellipse 1200px 600px at 50% -200px, var(--background-glow) 0%, transparent 70%); background-size: auto; animation: none !important; } /* Gradient text -> solid premium foreground */ [data-design="executive"] .gradient-text { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--foreground-strong) !important; } /* 3D button -> flat premium primary */ [data-design="executive"] .btn-3d { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%) !important; border: 1px solid var(--primary-edge) !important; border-radius: 6px !important; color: var(--primary-foreground) !important; transform: none !important; box-shadow: var(--shadow-press-primary), 0 1px 2px oklch(from var(--primary) calc(l - 0.20) c h / 0.30) !important; transition: filter .14s ease, box-shadow .14s ease !important; } [data-design="executive"] .btn-3d:hover { filter: brightness(1.04); transform: none !important; box-shadow: var(--shadow-press-primary), 0 2px 6px oklch(from var(--primary) calc(l - 0.20) c h / 0.35) !important; } [data-design="executive"] .btn-3d:active { transform: none !important; background: var(--primary-strong) !important; box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.20) !important; } /* Glassmorphism -> premium paper card */ [data-design="executive"] .glass-card { background: var(--card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card), inset 0 1px 0 var(--card-highlight) !important; } [data-design="executive"] .glass-card:hover { transform: none !important; box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-highlight) !important; border-color: var(--border-strong) !important; } /* Neon-border -> normal hairline */ [data-design="executive"] .neon-border, [data-design="executive"] .neon-border-cyan, [data-design="executive"] .neon-border-pink { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card) !important; } /* KPI gradient strip -> hidden */ [data-design="executive"] .kpi-card::before { display: none !important; } /* ============================================================================ * 5. COMPONENT REPAINT * ============================================================================ */ /* Sidebar — paper + emerald active state */ [data-design="executive"] .sidebar { background: linear-gradient(180deg, var(--card) 0%, var(--card-tint) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-right: 1px solid var(--border) !important; box-shadow: inset -1px 0 0 var(--card-highlight) !important; } /* Brand block inside sidebar (first .p-6) — premium calm */ [data-design="executive"] .sidebar .p-6 { border-bottom: 1px solid var(--hairline); } /* Sidebar nav link */ [data-design="executive"] .sidebar-link { color: var(--muted-foreground); border-left: 3px solid transparent; border-radius: 0; transition: color .14s ease, background-color .14s ease; } [data-design="executive"] .sidebar-link:hover { background: var(--muted); color: var(--foreground-strong); border-left-color: transparent; } [data-design="executive"] .sidebar-link.active { background: var(--primary-soft); color: var(--primary-soft-fg); border-left-color: var(--primary); font-weight: 600; } [data-design="executive"] .sidebar-link.active i { color: var(--primary); } /* Sidebar group toggle (defined in base.html inline