/** * Design Tokens - Geist-Inspired Design System * * Single source of truth for all design values. * Uses OKLCH color space for perceptually uniform colors. * Supports light (default) and dark mode via .dark class on . * * Usage: Reference these tokens via CSS custom properties * or through Tailwind utility classes configured to use them. */ :root { /* ============================================ * COLOR SYSTEM - OKLCH Values * ============================================ * Format: lightness% chroma hue * Geist-inspired: high-contrast, neutral-heavy palette */ /* Canvas (Backgrounds) - Light Theme */ --lch-canvas: 99% 0 0; /* #fafafa */ --lch-canvas-subtle: 97% 0 0; /* #f2f2f2 */ --lch-canvas-muted: 93% 0 0; /* #ebebeb */ --lch-canvas-raised: 100% 0 0; /* #ffffff */ /* Ink (Text) - High contrast neutrals */ --lch-ink: 13% 0 0; /* #0a0a0a */ --lch-ink-secondary: 27% 0 0; /* #404040 */ --lch-ink-muted: 44% 0 0; /* #666666 */ --lch-ink-subtle: 63% 0 0; /* #999999 */ /* Accent (Geist Blue) */ --lch-accent: 52% 0.20 264; /* #0070f3 */ --lch-accent-hover: 47% 0.22 264; /* #005bc4 */ --lch-accent-active: 42% 0.20 264; /* #004999 */ --lch-accent-subtle: 95% 0.03 264; /* #eef6ff */ --lch-accent-muted: 85% 0.06 264; /* #c4deff */ /* Status: Positive (Green) */ --lch-positive: 47% 0.17 152; --lch-positive-bg: 97% 0.02 152; --lch-positive-border: 85% 0.08 152; /* Status: Warning (Amber) */ --lch-warning: 62% 0.18 80; --lch-warning-bg: 97% 0.03 80; --lch-warning-border: 88% 0.10 80; /* Status: Negative (Red) */ --lch-negative: 52% 0.22 25; --lch-negative-bg: 97% 0.02 25; --lch-negative-border: 85% 0.10 25; /* Status: Info (Blue) */ --lch-info: 52% 0.20 264; --lch-info-bg: 97% 0.02 264; --lch-info-border: 85% 0.06 264; /* Borders */ --lch-border: 90% 0 0; /* #e5e5e5 */ --lch-border-strong: 78% 0 0; /* #c7c7c7 */ --lch-border-subtle: 94% 0 0; /* #f0f0f0 */ /* ============================================ * COMPUTED COLOR VALUES * ============================================ */ /* Canvas */ --color-canvas: oklch(var(--lch-canvas)); --color-canvas-subtle: oklch(var(--lch-canvas-subtle)); --color-canvas-muted: oklch(var(--lch-canvas-muted)); --color-canvas-raised: oklch(var(--lch-canvas-raised)); /* Ink */ --color-ink: oklch(var(--lch-ink)); --color-ink-secondary: oklch(var(--lch-ink-secondary)); --color-ink-muted: oklch(var(--lch-ink-muted)); --color-ink-subtle: oklch(var(--lch-ink-subtle)); /* Accent */ --color-accent: oklch(var(--lch-accent)); --color-accent-hover: oklch(var(--lch-accent-hover)); --color-accent-active: oklch(var(--lch-accent-active)); --color-accent-subtle: oklch(var(--lch-accent-subtle)); --color-accent-muted: oklch(var(--lch-accent-muted)); /* Status */ --color-positive: oklch(var(--lch-positive)); --color-positive-bg: oklch(var(--lch-positive-bg)); --color-positive-border: oklch(var(--lch-positive-border)); --color-warning: oklch(var(--lch-warning)); --color-warning-bg: oklch(var(--lch-warning-bg)); --color-warning-border: oklch(var(--lch-warning-border)); --color-negative: oklch(var(--lch-negative)); --color-negative-bg: oklch(var(--lch-negative-bg)); --color-negative-border: oklch(var(--lch-negative-border)); --color-info: oklch(var(--lch-info)); --color-info-bg: oklch(var(--lch-info-bg)); --color-info-border: oklch(var(--lch-info-border)); /* Borders */ --color-border: oklch(var(--lch-border)); --color-border-strong: oklch(var(--lch-border-strong)); --color-border-subtle: oklch(var(--lch-border-subtle)); /* ============================================ * TYPOGRAPHY * ============================================ */ /* Font Families */ --font-sans: "Geist Sans", "Inter var", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace; /* Type Scale (Fluid) */ --text-display: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); --text-2xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem); --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem); --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --text-sm: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem); --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* Line Heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter Spacing - Geist style: tighter on large text */ --tracking-tight: -0.04em; --tracking-normal: -0.01em; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* ============================================ * SPACING * ============================================ */ /* Horizontal Spacing (character-based) */ --space-1: 0.25ch; --space-2: 0.5ch; --space-3: 0.75ch; --space-4: 1ch; --space-6: 1.5ch; --space-8: 2ch; --space-10: 2.5ch; --space-12: 3ch; --space-16: 4ch; --space-20: 5ch; --space-24: 6ch; /* Vertical Spacing (rem-based) */ --block-1: 0.25rem; --block-2: 0.5rem; --block-3: 0.75rem; --block-4: 1rem; --block-5: 1.25rem; --block-6: 1.5rem; --block-8: 2rem; --block-10: 2.5rem; --block-12: 3rem; --block-16: 4rem; --block-20: 5rem; /* ============================================ * LAYOUT * ============================================ */ /* Container Widths */ --container-xs: 28rem; /* 448px - Narrow forms */ --container-sm: 40rem; /* 640px - Cards */ --container-md: 56rem; /* 896px - Content */ --container-lg: 72rem; /* 1152px - Dashboard */ --container-xl: 84rem; /* 1344px - Wide dashboard */ --container-2xl: 96rem; /* 1536px - Full width */ /* Gutter */ --gutter: clamp(1rem, 4vw, 2rem); /* ============================================ * EFFECTS * ============================================ */ /* Border Radius - Geist-restrained */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Shadows - Minimal, Geist-style */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 8px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04); --shadow-xl: 0 16px 32px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04); /* ============================================ * ANIMATION * ============================================ */ /* Easing Functions */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Durations - Geist: fast and snappy */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-normal: 150ms; --duration-slow: 200ms; --duration-slower: 300ms; /* Stagger Delay */ --stagger: 40ms; /* ============================================ * Z-INDEX SCALE * ============================================ */ --z-dropdown: 50; --z-sticky: 100; --z-fixed: 200; --z-modal: 300; --z-popover: 400; --z-tooltip: 500; /* ============================================ * SHADCN VARIABLE BRIDGE * ============================================ * Maps LC2026 OKLCH triplets onto the variable names that * shadcn_phlexcomponents.css declares in @theme inline. * Loaded via Sprockets after vendor/shadcn_phlexcomponents.css, * so these win the cascade. */ --background: oklch(var(--lch-canvas)); --foreground: oklch(var(--lch-ink)); --card: oklch(var(--lch-canvas-raised)); --card-foreground: oklch(var(--lch-ink)); --popover: oklch(var(--lch-canvas-raised)); --popover-foreground: oklch(var(--lch-ink)); --primary: oklch(var(--lch-accent)); --primary-foreground: oklch(99% 0 0); --secondary: oklch(var(--lch-canvas-subtle)); --secondary-foreground: oklch(var(--lch-ink)); --muted: oklch(var(--lch-canvas-muted)); --muted-foreground: oklch(var(--lch-ink-muted)); --accent: oklch(var(--lch-accent-subtle)); --accent-foreground: oklch(var(--lch-accent)); --destructive: oklch(var(--lch-negative)); --border: oklch(var(--lch-border)); --input: oklch(var(--lch-border)); --ring: oklch(var(--lch-accent)); --radius: 0.5rem; /* Sidebar tokens (used by shadcn sidebar component) */ --sidebar: oklch(var(--lch-canvas-subtle)); --sidebar-foreground: oklch(var(--lch-ink)); --sidebar-primary: oklch(var(--lch-accent)); --sidebar-primary-foreground: oklch(99% 0 0); --sidebar-accent: oklch(var(--lch-canvas-muted)); --sidebar-accent-foreground: oklch(var(--lch-ink)); --sidebar-border: oklch(var(--lch-border)); --sidebar-ring: oklch(var(--lch-accent)); /* Chart palette */ --chart-1: oklch(var(--lch-accent)); --chart-2: oklch(55% 0.18 145); --chart-3: oklch(70% 0.16 80); --chart-4: oklch(58% 0.24 25); --chart-5: oklch(60% 0.17 295); } /* ============================================ * DARK MODE * ============================================ * Applied via .dark class on element */ .dark { color-scheme: dark; /* Canvas (Backgrounds) - Dark Theme */ --lch-canvas: 9% 0 0; /* #111111 */ --lch-canvas-subtle: 13% 0 0; /* #1a1a1a */ --lch-canvas-muted: 18% 0 0; /* #252525 */ --lch-canvas-raised: 15% 0 0; /* #1e1e1e */ /* Ink (Text) - Light values for dark backgrounds */ --lch-ink: 97% 0 0; /* #ededed */ --lch-ink-secondary: 80% 0 0; /* #b4b4b4 */ --lch-ink-muted: 63% 0 0; /* #888888 */ --lch-ink-subtle: 44% 0 0; /* #555555 */ /* Accent - Slightly lighter blue for dark backgrounds */ --lch-accent: 60% 0.18 264; --lch-accent-hover: 65% 0.20 264; --lch-accent-active: 55% 0.18 264; --lch-accent-subtle: 18% 0.06 264; --lch-accent-muted: 25% 0.08 264; /* Status: Positive */ --lch-positive: 55% 0.15 152; --lch-positive-bg: 15% 0.04 152; --lch-positive-border: 25% 0.06 152; /* Status: Warning */ --lch-warning: 70% 0.16 80; --lch-warning-bg: 15% 0.04 80; --lch-warning-border: 25% 0.06 80; /* Status: Negative */ --lch-negative: 60% 0.20 25; --lch-negative-bg: 15% 0.04 25; --lch-negative-border: 25% 0.06 25; /* Status: Info */ --lch-info: 60% 0.18 264; --lch-info-bg: 15% 0.04 264; --lch-info-border: 25% 0.06 264; /* Borders */ --lch-border: 22% 0 0; /* #333333 */ --lch-border-strong: 32% 0 0; /* #444444 */ --lch-border-subtle: 17% 0 0; /* #222222 */ /* Shadows - Deeper for dark mode */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.2); --shadow-sm: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 8px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 8px 16px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2); --shadow-xl: 0 16px 32px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.2); /* shadcn bridge - dark mode (re-references the .dark --lch-* triplets above) */ --background: oklch(var(--lch-canvas)); --foreground: oklch(var(--lch-ink)); --card: oklch(var(--lch-canvas-raised)); --card-foreground: oklch(var(--lch-ink)); --popover: oklch(var(--lch-canvas-raised)); --popover-foreground: oklch(var(--lch-ink)); --primary: oklch(var(--lch-accent)); --primary-foreground: oklch(13% 0 0); --secondary: oklch(var(--lch-canvas-subtle)); --secondary-foreground: oklch(var(--lch-ink)); --muted: oklch(var(--lch-canvas-muted)); --muted-foreground: oklch(var(--lch-ink-muted)); --accent: oklch(var(--lch-accent-subtle)); --accent-foreground: oklch(var(--lch-accent)); --destructive: oklch(var(--lch-negative)); --border: oklch(var(--lch-border)); --input: oklch(var(--lch-border)); --ring: oklch(var(--lch-accent)); --sidebar: oklch(var(--lch-canvas-subtle)); --sidebar-foreground: oklch(var(--lch-ink)); --sidebar-primary: oklch(var(--lch-accent)); --sidebar-primary-foreground: oklch(13% 0 0); --sidebar-accent: oklch(var(--lch-canvas-muted)); --sidebar-accent-foreground: oklch(var(--lch-ink)); --sidebar-border: oklch(var(--lch-border)); --sidebar-ring: oklch(var(--lch-accent)); } /* ============================================ * ANIMATIONS * ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Animation Utility Classes */ .animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out-quart); } .animate-fade-out { animation: fadeOut var(--duration-normal) var(--ease-out-quart); } .animate-slide-up { animation: slideUp var(--duration-slow) var(--ease-out-expo); } .animate-slide-down { animation: slideDown var(--duration-slow) var(--ease-out-expo); } .animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out-quart); } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s var(--ease-in-out) infinite; } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ * LC2026 DESIGN SYSTEM OVERRIDES * Dark-first LessClicks application standard. * ============================================ */ :root, .dark { color-scheme: dark; /* Neutrals */ --bone-50: #F7F6F3; --bone-100: #EEEDE9; --bone-200: #DDDCD6; --ash-200: #BFBFB9; --pitch-900: #050505; --pitch-850: #0C0C0B; --pitch-800: #141413; --pitch-700: #1F1F1D; --pitch-500: #5C5C58; --pitch-300: #9A9A95; /* Accent */ --tangerine-50: #FFE9D6; --tangerine-400: #FF8A4D; --tangerine-500: #FF6A1A; --tangerine-600: #E45200; /* Semantic */ --success: #6A8F5E; --warning: #C9A24A; --danger: #B4513A; --info: #5A7D9A; --success-light: rgba(106,143,94,.15); --warning-light: rgba(201,162,74,.15); --danger-light: rgba(180,81,58,.15); --info-light: rgba(90,125,154,.15); --accent-light: rgba(255,106,26,.1); /* LC aliases */ --bg: var(--pitch-900); --surface: var(--pitch-800); --surface-2: var(--pitch-850); --surface-3: #191918; --border: var(--pitch-700); --border-strong: #2A2A27; --text: var(--bone-50); --text-muted: var(--pitch-300); --text-subtle: var(--pitch-500); --accent: var(--tangerine-500); --accent-hover: var(--tangerine-600); /* OKLCH overrides — make Tailwind utilities (bg-accent, text-positive, etc.) resolve to LC2026 colours. Values approximate the LC2026 hex palette. */ --lch-canvas: 5% 0.005 60; /* pitch-900 #050505 */ --lch-canvas-subtle: 8% 0.005 60; /* pitch-850 #0C0C0B */ --lch-canvas-muted: 11% 0.005 60; /* pitch-800 #141413 */ --lch-canvas-raised: 13% 0.005 60; /* surface-3 #191918 */ --lch-ink: 96% 0.004 75; /* bone-50 #F7F6F3 */ --lch-ink-secondary: 72% 0.004 75; /* pitch-300 #9A9A95 */ --lch-ink-muted: 55% 0.005 70; /* pitch-500 #5C5C58 */ --lch-ink-subtle: 45% 0.005 70; --lch-accent: 67.5% 0.198 39; /* tangerine-500 #FF6A1A */ --lch-accent-hover: 60.5% 0.205 38; /* tangerine-600 #E45200 */ --lch-accent-active: 56% 0.205 38; --lch-accent-subtle: 94% 0.039 60; /* tangerine-50 #FFE9D6 */ --lch-accent-muted: 74.4% 0.156 49; /* tangerine-400 #FF8A4D */ --lch-positive: 58% 0.078 137; /* success #6A8F5E */ --lch-positive-bg: 58% 0.078 137; --lch-positive-border: 58% 0.078 137; --lch-warning: 72% 0.118 78; /* warning #C9A24A */ --lch-warning-bg: 72% 0.118 78; --lch-warning-border: 72% 0.118 78; --lch-negative: 53% 0.142 36; /* danger #B4513A */ --lch-negative-bg: 53% 0.142 36; --lch-negative-border: 53% 0.142 36; --lch-info: 54% 0.052 244; /* info #5A7D9A */ --lch-info-bg: 54% 0.052 244; --lch-info-border: 54% 0.052 244; --lch-border: 13.5% 0.005 70; /* pitch-700 #1F1F1D */ --lch-border-strong: 17% 0.005 70; /* border-strong #2A2A27 */ --lch-border-subtle: 100% 0 0 / 0.05; /* Existing app aliases remapped to LC2026 */ --color-canvas: var(--bg); --color-canvas-subtle: var(--surface-2); --color-canvas-muted: var(--surface); --color-canvas-raised: var(--surface); --color-ink: var(--text); --color-ink-secondary: var(--text-muted); --color-ink-muted: var(--pitch-300); --color-ink-subtle: var(--text-subtle); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-active: var(--tangerine-600); --color-accent-subtle: var(--accent-light); --color-accent-muted: rgba(255,106,26,.28); --color-positive: var(--success); --color-positive-bg: var(--success-light); --color-positive-border: rgba(106,143,94,.34); --color-warning: var(--warning); --color-warning-bg: var(--warning-light); --color-warning-border: rgba(201,162,74,.34); --color-negative: var(--danger); --color-negative-bg: var(--danger-light); --color-negative-border: rgba(180,81,58,.34); --color-info: var(--info); --color-info-bg: var(--info-light); --color-info-border: rgba(90,125,154,.34); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-border-subtle: rgba(255,255,255,.05); /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-2xl: var(--r-xl); --radius-full: var(--r-pill); /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Type */ --font-serif: "Fraunces", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px; --text-5xl: 60px; --text-display: var(--text-4xl); /* Shadows and motion */ --shadow-sm: 0 1px 2px rgba(0,0,0,.18); --shadow-md: 0 2px 10px rgba(0,0,0,.25); --shadow-lg: 0 16px 40px rgba(0,0,0,.45); --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --duration-fast: var(--dur-fast); --duration-normal: var(--dur); --duration-slow: var(--dur-slow); --ease-out-expo: var(--ease); --ease-out-quart: var(--ease); /* Chart series */ --chart-1: var(--tangerine-500); --chart-2: var(--pitch-300); --chart-3: var(--info); --chart-4: var(--tangerine-400); --chart-5: var(--ash-200); --chart-positive: var(--success); --chart-negative: var(--danger); --chart-neutral: var(--pitch-500); --chart-grid: rgba(255,255,255,.06); --chart-axis: var(--pitch-500); --chart-tooltip-bg: var(--pitch-800); --chart-tooltip-border: var(--pitch-700); } [data-theme="light"] { color-scheme: light; --bg: var(--bone-50); --surface: #FFFFFF; --surface-2: var(--bone-100); --surface-3: #FFFFFF; --border: var(--bone-200); --border-strong: var(--ash-200); --text: var(--pitch-900); --text-muted: var(--pitch-500); --text-subtle: var(--pitch-300); --accent: var(--tangerine-500); --accent-hover: var(--tangerine-600); /* OKLCH light-mode values used by Tailwind token utilities. */ --lch-canvas: 96.8% 0.010 86; /* bone-50 */ --lch-canvas-subtle: 94.2% 0.010 86; /* bone-100 */ --lch-canvas-muted: 88.8% 0.010 86; /* bone-200 */ --lch-canvas-raised: 100% 0 0; /* white */ --lch-ink: 5% 0.005 60; /* pitch-900 */ --lch-ink-secondary: 45% 0.005 70; /* pitch-500 */ --lch-ink-muted: 45% 0.005 70; --lch-ink-subtle: 68% 0.005 75; /* pitch-300 */ --lch-accent: 67.5% 0.198 39; /* tangerine-500 */ --lch-accent-hover: 60.5% 0.205 38; /* tangerine-600 */ --lch-accent-active: 56% 0.205 38; --lch-accent-subtle: 94% 0.039 60; /* tangerine-50 */ --lch-accent-muted: 74.4% 0.156 49; /* tangerine-400 */ --lch-positive: 48% 0.090 137; --lch-positive-bg: 95% 0.025 137; --lch-positive-border: 83% 0.055 137; --lch-warning: 58% 0.110 78; --lch-warning-bg: 96% 0.030 78; --lch-warning-border: 84% 0.070 78; --lch-negative: 48% 0.145 36; --lch-negative-bg: 96% 0.025 36; --lch-negative-border: 84% 0.065 36; --lch-info: 48% 0.055 244; --lch-info-bg: 96% 0.018 244; --lch-info-border: 84% 0.040 244; --lch-border: 88.8% 0.010 86; --lch-border-strong: 76% 0.008 86; --lch-border-subtle: 94.2% 0.010 86; --success-light: #EEF5EB; --warning-light: #FBF3DA; --danger-light: #F8EAE5; --info-light: #EAF1F6; --accent-light: rgba(255, 106, 26, 0.10); --color-canvas: var(--bg); --color-canvas-subtle: var(--surface-2); --color-canvas-muted: var(--bone-200); --color-canvas-raised: var(--surface); --color-ink: var(--text); --color-ink-secondary: var(--text-muted); --color-ink-muted: var(--pitch-500); --color-ink-subtle: var(--pitch-300); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-active: var(--tangerine-600); --color-accent-subtle: var(--accent-light); --color-accent-muted: rgba(255, 106, 26, 0.28); --color-positive: var(--success); --color-positive-bg: var(--success-light); --color-positive-border: #C9DEC2; --color-warning: var(--warning); --color-warning-bg: var(--warning-light); --color-warning-border: #E7D391; --color-negative: var(--danger); --color-negative-bg: var(--danger-light); --color-negative-border: #E2B9AD; --color-info: var(--info); --color-info-bg: var(--info-light); --color-info-border: #BCD0DF; --color-border: var(--border); --color-border-strong: var(--border-strong); --chart-grid: rgba(5, 5, 5, 0.08); --chart-axis: var(--pitch-500); --chart-tooltip-bg: #FFFFFF; --chart-tooltip-border: var(--bone-200); --shadow-sm: 0 1px 2px rgba(5, 5, 5, 0.04); --shadow-md: 0 8px 24px rgba(5, 5, 5, 0.08); --shadow-lg: 0 24px 56px rgba(5, 5, 5, 0.12); } /** * Application Styles - Incident Management Enterprise Theme * * Sprockets manifest. Order matters: * 1. design-tokens -- declares :root --lch-* triplets and bridges * them onto shadcn variable names (--background, * --foreground, --primary, etc). * 2. require_self -- the legacy `.lc-*` / `.im-*` rule definitions * below (kept while views are ported). * 3. shadcn-overrides -- retheme of the legacy classes onto the shadcn * token system so unported views still look * shadcn-correct. Loaded LAST so it wins the * cascade. Phase 10 will collapse 1+2+3 into a * single trimmed bundle. * * Tailwind v4 utilities ship from app/assets/tailwind/application.css -> * app/assets/builds/tailwind.css and load via stylesheet_link_tag in the * layout BEFORE this file, so this file wins for any rule conflict. * */ /* ============================================ * GLOBAL RESETS & DEFAULTS * ============================================ */ /* Smooth transitions for theme changes */ *, *::before, *::after { transition-property: background-color, border-color; transition-duration: 150ms; transition-timing-function: ease-out; } /* Disable transitions for animations */ .animate-fade-in, .animate-fade-out, .animate-slide-up, .animate-slide-down, .animate-scale-in, [class*="animate-"] { transition: none; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================ * TYPOGRAPHY ENHANCEMENTS * ============================================ */ /* Text gradient (for accent headlines) */ .text-gradient-accent { background: linear-gradient(135deg, oklch(60% 0.18 170) 0%, oklch(55% 0.20 170) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Monospace styling for w3w addresses */ .w3w-address { font-family: var(--font-mono); letter-spacing: 0.02em; } /* ============================================ * SPECIAL EFFECTS * ============================================ */ /* Gradient accent background */ .bg-gradient-accent { background: linear-gradient(135deg, oklch(60% 0.18 170) 0%, oklch(50% 0.16 170) 100%); } /* Glow effect for accent elements */ .glow-accent { box-shadow: var(--glow-accent); } /* ============================================ * LEGACY GRADIENTS (for migration) * ============================================ */ .bg-gradient-primary { background: linear-gradient(135deg, oklch(60% 0.18 170) 0%, oklch(50% 0.16 170) 100%); } .bg-gradient-success { background: linear-gradient(135deg, oklch(55% 0.18 145) 0%, oklch(48% 0.16 145) 100%); } .bg-gradient-warning { background: linear-gradient(135deg, oklch(70% 0.20 75) 0%, oklch(60% 0.18 75) 100%); } .bg-gradient-danger { background: linear-gradient(135deg, oklch(58% 0.24 25) 0%, oklch(50% 0.22 25) 100%); } .bg-gradient-info { background: linear-gradient(135deg, oklch(60% 0.17 255) 0%, oklch(52% 0.15 255) 100%); } .text-gradient-primary { background: linear-gradient(135deg, oklch(60% 0.18 170) 0%, oklch(55% 0.20 170) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ * STITCH MOBILE REVIEW DESIGN SYSTEM * ============================================ */ /* Legacy im-* tokens aliased to LC2026 design system. Keeps existing .im-* rules working while remapping every surface to pitch neutrals + tangerine. */ :root { --im-bg: var(--bg); --im-bg-lowest: var(--surface-2); --im-surface: var(--surface); --im-surface-raised: var(--surface-3); --im-surface-high: var(--pitch-700); --im-surface-highest: var(--border-strong); --im-border: var(--border); --im-border-strong: var(--border-strong); --im-text: var(--text); --im-text-muted: var(--text-muted); --im-text-subtle: var(--text-subtle); --im-primary: var(--accent); --im-primary-soft: var(--accent-light); --im-primary-text: #FFFFFF; --im-tertiary: var(--info); --im-error: var(--danger); --im-warning: var(--warning); --im-success: var(--success); } .im-mobile-shell { min-height: 100vh; background: radial-gradient(circle at 50% -10%, rgba(255, 106, 26, 0.18), transparent 34rem), var(--im-bg); color: var(--im-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); } .im-screen { width: min(100%, 48rem); margin: 0 auto; padding: 5rem 1rem 1.5rem; } .im-screen--center { min-height: 100vh; display: flex; align-items: center; padding-top: 2rem; padding-bottom: 2rem; } .im-topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(4rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 1rem 0; display: flex; align-items: center; justify-content: space-between; background: rgba(11, 11, 12, 0.88); border-bottom: 1px solid var(--im-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .im-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--im-primary); font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; } .im-icon-button { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: var(--im-text-muted); background: rgba(28, 27, 28, 0.75); border: 1px solid var(--im-border); } .im-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .im-title { color: var(--im-text); font-family: var(--font-sans); font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; letter-spacing: -0.02em; } .im-subtitle { margin-top: 0.25rem; color: var(--im-text-muted); font-size: 0.9rem; line-height: 1.35rem; } .im-section-title { color: var(--im-text); font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .im-card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid var(--im-border); background: rgba(28, 27, 28, 0.92); color: var(--im-text); } .im-card-link { display: block; transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease; } .im-card-link:active { transform: scale(0.985); } .im-card-link:hover { border-color: rgba(255, 138, 77, 0.28); background: rgba(32, 31, 32, 0.96); } .im-card-accent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--im-primary); } .im-card-accent--danger::before { background: var(--im-error); } .im-card-accent--warning::before { background: var(--im-warning); } .im-card-accent--success::before { background: var(--im-success); } .im-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .im-stat { border-radius: 1rem; border: 1px solid var(--im-border); background: rgba(28, 27, 28, 0.9); padding: 0.9rem; text-align: center; } .im-stat-value { display: block; color: var(--im-text); font-family: var(--font-sans); font-size: 1.55rem; line-height: 1.85rem; font-weight: 800; } .im-stat-label { margin-top: 0.2rem; color: var(--im-text-subtle); font-size: 0.68rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .im-input, .im-select, .im-textarea { width: 100%; min-height: 44px; border-radius: 0.75rem; border: 1px solid var(--im-border-strong); background: #161618; color: var(--im-text); font-size: 17px; padding: 0.75rem 1rem; } .im-input::placeholder, .im-textarea::placeholder { color: rgba(199, 196, 215, 0.55); } .im-input:focus, .im-select:focus, .im-textarea:focus { outline: none; border-color: var(--im-primary); box-shadow: 0 0 0 1px var(--im-primary), 0 0 24px rgba(255, 106, 26, 0.18); } .im-search { position: relative; } .im-search svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--im-text-subtle); } .im-search .im-input { padding-left: 2.55rem; } .im-chip-row { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; } .im-chip-row::-webkit-scrollbar { display: none; } .im-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 9999px; border: 1px solid var(--im-border); background: var(--im-surface-raised); color: var(--im-text-muted); padding: 0.45rem 0.8rem; white-space: nowrap; font-size: 0.82rem; font-weight: 700; } .im-chip-active, .im-chip:hover { color: var(--im-primary-text); background: var(--im-primary); border-color: var(--im-primary); } .im-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; padding: 0.25rem 0.55rem; font-size: 0.68rem; line-height: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid transparent; } .im-badge-neutral { background: rgba(154, 154, 149, 0.16); color: var(--im-text-muted); border-color: rgba(154, 154, 149, 0.22); } .im-badge-info { background: var(--info-light); color: var(--im-tertiary); border-color: rgba(90, 125, 154, 0.34); } .im-badge-success { background: var(--success-light); color: var(--im-success); border-color: rgba(106, 143, 94, 0.34); } .im-badge-warning { background: var(--warning-light); color: var(--im-warning); border-color: rgba(201, 162, 74, 0.34); } .im-badge-danger { background: var(--danger-light); color: var(--im-error); border-color: rgba(180, 81, 58, 0.34); } .im-badge-primary { background: var(--accent-light); color: var(--tangerine-400); border-color: rgba(255, 106, 26, 0.28); } .im-primary-button, .im-secondary-button { min-height: 44px; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.75rem 1rem; font-family: var(--font-sans); font-weight: 800; line-height: 1.2; transition: transform 150ms ease, background-color 150ms ease; } .im-primary-button { background: var(--im-primary); color: var(--im-primary-text); box-shadow: 0 0 20px rgba(255, 106, 26, 0.24); } .im-secondary-button { background: var(--im-surface-high); color: var(--im-text); border: 1px solid var(--im-border); } .im-primary-button:active, .im-secondary-button:active { transform: scale(0.97); } .im-meta { color: var(--im-text-subtle); font-size: 0.78rem; line-height: 1.15rem; } .im-text { color: var(--im-text) !important; } .im-text-muted { color: var(--im-text-muted) !important; } .im-text-subtle { color: var(--im-text-subtle) !important; } .im-text-primary { color: var(--tangerine-400) !important; } .im-text-success { color: var(--im-success) !important; } .im-text-error { color: var(--im-error) !important; } .im-bg-primary { background: var(--im-primary) !important; } .im-bg-surface { background: var(--im-surface) !important; } .im-bg-surface-high { background: var(--im-surface-high) !important; } .im-icon-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--im-surface-high); border: 1px solid var(--im-border); color: var(--im-text-muted); } .im-icon-tile-primary { background: var(--im-primary); border-color: var(--im-primary); color: var(--im-primary-text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 106, 26, 0.28); } .im-logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 1.5rem; background: var(--im-surface); border: 1px solid var(--im-border); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } .im-toggle { background: var(--im-surface-highest) !important; } .im-toggle-on { background: var(--im-primary) !important; } .im-status-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: var(--im-text-subtle); } .im-status-dot-on { background: var(--im-success); } .im-action-icon { width: 2.5rem; height: 2.5rem; } .im-bottom-nav, .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; align-items: center; gap: 0.25rem; min-height: calc(5rem + env(safe-area-inset-bottom, 0px)); padding: 0.75rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); background: rgba(11, 11, 12, 0.92); border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem 1rem 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .header { background: rgba(11, 11, 12, 0.88) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .header-logo { color: var(--im-primary) !important; font-family: var(--font-sans); font-weight: 900 !important; letter-spacing: -0.02em; } .page, .bg-canvas { background-color: var(--im-bg) !important; color: var(--im-text) !important; } .card, .bg-canvas-subtle { background-color: rgba(28, 27, 28, 0.92) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--im-text) !important; } .bg-canvas-muted, .bg-canvas-raised { background-color: var(--im-surface-high) !important; } .text-ink, .text-gray-900, .text-gray-800, .text-white { color: var(--im-text) !important; } .text-ink-secondary, .text-gray-700, .text-gray-600, .text-gray-500, .text-slate-500, .text-neutral-400 { color: var(--im-text-muted) !important; } .text-ink-muted, .text-ink-subtle, .text-gray-400, .text-neutral-500 { color: var(--im-text-subtle) !important; } .border-border, .border-gray-200, .border-gray-300, .divide-border > :not([hidden]) ~ :not([hidden]), .divide-gray-200 > :not([hidden]) ~ :not([hidden]), .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.1) !important; } .form-input, .form-select, .form-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea { background-color: #161618 !important; border-color: var(--im-border-strong) !important; color: var(--im-text) !important; min-height: 44px; } .btn, .btn-primary, .btn-secondary, .btn-primary:not(.btn), .btn-secondary:not(.btn) { display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.75rem 1rem; border-radius: 0.875rem; border: 1px solid transparent; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 800; line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap; transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .btn:active, .btn-primary:active, .btn-secondary:active { transform: scale(0.98); } .btn svg, .btn-primary svg, .btn-secondary svg { flex-shrink: 0; } .btn-primary, .bg-accent, .bg-blue-600, .bg-primary-600 { background-color: var(--im-primary) !important; color: var(--im-primary-text) !important; } .btn-secondary, .bg-white, .bg-gray-50 { background-color: var(--im-surface) !important; color: var(--im-text) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .badge, .badge-info, .badge-neutral, .badge-warning, .badge-positive, .badge-negative, .badge-accent { border-radius: 9999px !important; font-weight: 800 !important; letter-spacing: 0.05em; text-transform: uppercase; } .nav-link { color: var(--im-text-muted) !important; } .nav-link:hover, .nav-link-active { color: var(--tangerine-400) !important; background: rgba(255, 106, 26, 0.12) !important; } .mobile-nav-item { min-width: 4rem; min-height: 3.25rem; border-radius: 0.75rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.4rem 0.5rem; color: #71717a; text-decoration: none; transition: transform 150ms ease, color 150ms ease, background-color 150ms ease; } .mobile-nav-item:active { transform: scale(0.92); } .mobile-nav-item-active { color: #818cf8; background: rgba(255, 106, 26, 0.12); } .mobile-nav-icon { width: 1.45rem; height: 1.45rem; } .mobile-nav-label { color: currentColor; font-family: var(--font-sans); font-size: 0.64rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .mobile-nav-fab { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--im-primary); color: var(--im-primary-text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 106, 26, 0.35); } .dashboard-command { min-height: 100vh; background: radial-gradient(circle at 50% -14rem, rgba(255, 106, 26, 0.2), transparent 34rem), var(--im-bg-lowest); } .dashboard-command-content { display: flex; justify-content: center; padding: 4.5rem 1rem 0; } .dashboard-command-panel { width: min(100%, 46rem); display: flex; flex-direction: column; gap: 1.15rem; } .dashboard-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.15rem 0 0.25rem; } .dashboard-hero-icon, .dashboard-hero-action { width: 3.5rem; height: 3.5rem; border-radius: 1.25rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(28, 27, 28, 0.94); border: 1px solid var(--im-border); color: var(--im-primary); } .dashboard-hero-action { background: var(--im-primary); color: var(--im-primary-text); box-shadow: 0 0 24px rgba(255, 106, 26, 0.32); } .dashboard-title { color: var(--im-text); font-family: var(--font-sans); font-size: clamp(1.85rem, 5vw, 2.4rem); line-height: 1.08; font-weight: 900; letter-spacing: 0; } .dashboard-subtitle { margin-top: 0.35rem; color: var(--im-text-muted); font-size: 0.95rem; } .dashboard-section { display: flex; flex-direction: column; gap: 0.8rem; } .dashboard-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .dashboard-section-header h2 { color: var(--im-text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.3; font-weight: 850; } .dashboard-action { min-height: 5.25rem; padding: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; } .dashboard-action + .dashboard-action { margin-top: 0.7rem; } .dashboard-action-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; background: var(--im-surface-high); color: var(--im-text-muted); } .dashboard-action-primary .dashboard-action-icon { background: var(--im-primary); color: var(--im-primary-text); box-shadow: 0 0 20px rgba(255, 106, 26, 0.28); } .dashboard-action-copy h3 { color: var(--im-text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.25; font-weight: 850; } .dashboard-action-copy p { margin-top: 0.25rem; color: var(--im-text-muted); font-size: 0.86rem; line-height: 1.25; } .dashboard-action-chevron { width: 1.15rem; height: 1.15rem; color: var(--im-text-subtle); } .dashboard-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .dashboard-stat, .dashboard-list-card, .dashboard-empty { padding: 1rem; } .dashboard-stat { min-height: 8.25rem; } .dashboard-empty { min-height: 7.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .dashboard-command .card { border-radius: 1rem !important; } .im-mobile-shell .prose, .im-mobile-shell .prose * { color: var(--im-text-muted) !important; } .im-mobile-shell .bg-slate-950, .im-mobile-shell .bg-slate-900, .im-mobile-shell .bg-gray-50 { background: transparent !important; } .im-mobile-shell .bg-slate-800 { background: var(--im-surface-high) !important; } .im-mobile-shell .bg-slate-100 { background: var(--im-primary) !important; } .im-mobile-shell .bg-indigo-600 { background: var(--im-primary) !important; } .im-mobile-shell .bg-emerald-500 { background: var(--im-success) !important; } .im-mobile-shell .text-slate-900, .im-mobile-shell .text-slate-100, .im-mobile-shell .text-slate-600, .im-mobile-shell .text-gray-900 { color: var(--im-text) !important; } .im-mobile-shell .text-slate-500 { color: var(--im-text-muted) !important; } .h-full.flex.flex-col.bg-gray-50, .min-h-screen.bg-gray-50, .min-h-screen.im-mobile-shell, .h-full.flex.flex-col.im-mobile-shell { background: radial-gradient(circle at 50% -14rem, rgba(255, 106, 26, 0.16), transparent 32rem), var(--im-bg-lowest) !important; } .h-full.flex.flex-col.bg-gray-50 > main, .min-h-screen.bg-gray-50, .min-h-screen.im-mobile-shell, .h-full.flex.flex-col.im-mobile-shell > main { color: var(--im-text); } .h-full.flex.flex-col.bg-gray-50 .text-3xl, .min-h-screen.bg-gray-50 .text-3xl, .h-full.flex.flex-col.bg-gray-50 .text-4xl, .min-h-screen.bg-gray-50 .text-4xl { font-family: var(--font-sans); font-size: clamp(1.75rem, 4vw, 2.15rem) !important; line-height: 1.12 !important; font-weight: 900 !important; letter-spacing: 0 !important; } .h-full.flex.flex-col.bg-gray-50 .max-w-3xl, .h-full.flex.flex-col.bg-gray-50 .max-w-4xl, .min-h-screen.bg-gray-50 .max-w-3xl, .min-h-screen.bg-gray-50 .max-w-4xl { max-width: 46rem !important; } .h-full.flex.flex-col.bg-gray-50 .card, .min-h-screen.bg-gray-50 .card, .h-full.flex.flex-col.im-mobile-shell .card, .min-h-screen.im-mobile-shell .card, .h-full.flex.flex-col.bg-gray-50 .bg-white, .min-h-screen.bg-gray-50 .bg-white, .h-full.flex.flex-col.im-mobile-shell .bg-white, .min-h-screen.im-mobile-shell .bg-white { background: rgba(28, 27, 28, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; } .h-full.flex.flex-col.bg-gray-50 table, .min-h-screen.bg-gray-50 table, .h-full.flex.flex-col.im-mobile-shell table, .min-h-screen.im-mobile-shell table { color: var(--im-text); } .h-full.flex.flex-col.bg-gray-50 thead, .min-h-screen.bg-gray-50 thead, .h-full.flex.flex-col.im-mobile-shell thead, .min-h-screen.im-mobile-shell thead, .h-full.flex.flex-col.bg-gray-50 .bg-primary-50, .min-h-screen.bg-gray-50 .bg-primary-50, .h-full.flex.flex-col.im-mobile-shell .bg-primary-50, .min-h-screen.im-mobile-shell .bg-primary-50 { background: rgba(255, 106, 26, 0.12) !important; } .h-full.flex.flex-col.bg-gray-50 tr:hover, .min-h-screen.bg-gray-50 tr:hover, .h-full.flex.flex-col.im-mobile-shell tr:hover, .min-h-screen.im-mobile-shell tr:hover, .h-full.flex.flex-col.bg-gray-50 .hover\:bg-gray-50:hover, .min-h-screen.bg-gray-50 .hover\:bg-gray-50:hover, .h-full.flex.flex-col.im-mobile-shell .hover\:bg-gray-50:hover, .min-h-screen.im-mobile-shell .hover\:bg-gray-50:hover { background: rgba(255, 255, 255, 0.04) !important; } .hidden { display: none !important; } @media (max-width: 1023.98px) { .lg\:hidden { display: block !important; } .mobile-nav.lg\:hidden, .im-bottom-nav.lg\:hidden { display: flex !important; } .hidden.lg\:block, .hidden.lg\:flex, .hidden.lg\:inline-flex { display: none !important; } } @media (min-width: 1024px) { .lg\:block { display: block !important; } .lg\:flex { display: flex !important; } .lg\:inline-flex { display: inline-flex !important; } .lg\:hidden { display: none !important; } .im-mobile-shell { padding-bottom: 2rem; } .im-screen { padding-top: 6rem; } .mobile-nav, .im-bottom-nav { display: none; } } /* ============================================ * INCIDENT COMMAND GLOBAL ALIGNMENT * Normalizes older Rails/Tailwind views that still use scaffold-era * font, slate/gray/neutral, large radius, and shadow utilities. * ============================================ */ html, body { background: var(--im-bg-lowest) !important; color: var(--im-text) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; } body, main, section, article, aside, nav, form, table, input, select, textarea, button { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; } h1, h2, h3, h4, .header-logo, .im-brand, .im-title, .im-section-title, .dashboard-title, .card-title, .page-title, [style*="SF Pro"] { font-family: var(--font-serif), Georgia, serif !important; font-variation-settings: "opsz" 96, "wght" 500; letter-spacing: -0.018em !important; } h1, .text-4xl, .text-3xl { color: var(--im-text) !important; line-height: 1.12 !important; font-weight: 900 !important; } h2, h3, .text-2xl, .text-xl, .text-lg { letter-spacing: 0 !important; } .tracking-tight, .tracking-tighter, [class*="tracking-tight"] { letter-spacing: 0 !important; } .bg-neutral-950, .bg-neutral-900, .bg-slate-950, .bg-slate-900, .bg-gray-950, .bg-gray-900 { background: var(--im-bg-lowest) !important; } .bg-neutral-800, .bg-slate-800, .bg-gray-800, .bg-canvas-subtle { background: var(--im-surface) !important; } .bg-neutral-700, .bg-slate-700, .bg-gray-700, .bg-gray-100, .bg-gray-200, .bg-primary-50 { background: var(--im-surface-high) !important; } .bg-gradient-to-r.from-gray-50.to-white, .bg-gradient-to-r.from-white.to-gray-50, .bg-gradient-to-br.from-gray-50.to-white, .bg-gradient-to-br.from-white.to-gray-50, .bg-gradient-to-br.from-blue-50.to-blue-100, .bg-gradient-to-br.from-purple-50.to-purple-100, [class*="from-"][class*="-50"][class*="to-"][class*="-100"] { background: var(--im-surface) !important; } .bg-blue-600, .bg-purple-600, .bg-indigo-600, .bg-primary-500, .bg-primary-600, .bg-accent { background: var(--im-primary) !important; color: var(--im-primary-text) !important; } .bg-orange-500 { background: var(--im-warning) !important; } .text-neutral-300, .text-neutral-400, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400 { color: var(--im-text-subtle) !important; } .text-neutral-500, .text-neutral-600, .text-slate-500, .text-slate-600, .text-slate-700, .text-gray-500, .text-gray-600, .text-gray-700 { color: var(--im-text-muted) !important; } .text-neutral-100, .text-neutral-200, .text-slate-100, .text-slate-200, .text-gray-800, .text-gray-900, .text-black, .text-white { color: var(--im-text) !important; } .text-blue-600, .text-purple-600, .text-indigo-600, .text-primary-600 { color: var(--tangerine-400) !important; } .border-neutral-700, .border-neutral-800, .border-slate-700, .border-slate-800, .border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--im-border) !important; } .rounded-3xl, .rounded-\[36px\] { border-radius: 1rem !important; } .rounded-2xl { border-radius: 0.875rem !important; } .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-soft, .shadow-soft-lg { box-shadow: none !important; } .card, .stat-card, .metric-card, .bg-white { background: rgba(28, 27, 28, 0.92) !important; border-color: var(--im-border) !important; color: var(--im-text) !important; } .card h1, .card h2, .card h3, .card h4, .card p, .card span, .card dt, .card dd, .card li { letter-spacing: 0 !important; } table, thead, tbody, tr, td, th { color: var(--im-text) !important; border-color: var(--im-border) !important; } thead, tbody.bg-white, .divide-gray-100 > :not([hidden]) ~ :not([hidden]), .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { background: rgba(28, 27, 28, 0.92) !important; border-color: var(--im-border) !important; } .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-neutral-800:hover, tr:hover { background: rgba(255, 255, 255, 0.04) !important; } .badge, [class*="badge"] { letter-spacing: 0.05em !important; } /* ============================================ * LC2026 PRODUCT REDESIGN LAYER * Web management: SaaS sidebar shell. * Mobile reporting: simple big-button incident flow. * ============================================ */ html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); letter-spacing: 0; } body.web-management-surface, body.mobile-reporting-surface { background: radial-gradient(circle at 20% -10%, rgba(255,106,26,.16), transparent 28rem), linear-gradient(180deg, var(--pitch-850), var(--pitch-900) 42rem); padding: 0 !important; } body.web-management-surface { --im-primary: var(--accent); --im-primary-soft: var(--accent-light); --im-primary-text: var(--bone-50); --im-tertiary: var(--tangerine-400); --im-bg: var(--pitch-900); --im-bg-lowest: var(--pitch-900); --im-surface: var(--surface); --im-surface-high: var(--surface); --im-border: var(--border); --im-text: var(--text); --im-text-muted: var(--text-muted); --im-text-subtle: var(--text-subtle); font-size: var(--text-base); } body.mobile-reporting-surface { font-size: 16px; } .web-management-surface h1, .web-management-surface h2, .web-management-surface h3, .mobile-reporting-surface h1, .mobile-reporting-surface h2, .mobile-reporting-surface h3, .im-title, .dashboard-title { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0; } .web-management-surface h1, .dashboard-title { font-size: clamp(2rem, 3vw, 3rem) !important; line-height: 1.05 !important; } .web-management-surface p, .web-management-surface span, .web-management-surface dd, .web-management-surface dt, .web-management-surface li, .mobile-reporting-surface p, .mobile-reporting-surface span, .mobile-reporting-surface dd, .mobile-reporting-surface dt, .mobile-reporting-surface li { letter-spacing: 0; } /* Existing app class remap */ .im-mobile-shell, .page, .dashboard-command { background: transparent !important; color: var(--text) !important; } .web-management-surface .im-mobile-shell, .web-management-surface .page, .web-management-surface .dashboard-command { min-height: 100vh; padding-bottom: 0 !important; } .web-management-surface .lc-app-sidebar ~ main, .web-management-surface .lc-app-sidebar + main, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav), .web-management-surface .page-content { margin-left: 280px; width: calc(100% - 280px); min-height: 100vh; padding: var(--s-8) var(--s-8) var(--s-12) !important; } .web-management-surface .page-content > *, .web-management-surface main > div, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav) > * { max-width: 1280px; } .web-management-surface main .pt-16, .web-management-surface .pt-16, .web-management-surface .pt-20 { padding-top: 0 !important; } .web-management-surface main .pb-20, .web-management-surface .pb-20, .web-management-surface .pb-24 { padding-bottom: 0 !important; } .card, .im-card, .stat-card, .metric-card, .dashboard-stat, .dashboard-list-card, .bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-900, .bg-slate-950 { background: color-mix(in srgb, var(--surface) 94%, transparent) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; color: var(--text) !important; } .card-hover:hover, .im-card-link:hover, .dashboard-action:hover, tr:hover { background: color-mix(in srgb, var(--surface) 86%, var(--accent) 5%) !important; border-color: var(--border-strong) !important; } .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .im-primary-button, .im-secondary-button, button[type="submit"], input[type="submit"] { min-height: 44px; border-radius: var(--r-md) !important; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600 !important; letter-spacing: 0; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease) !important; } .btn-primary, .im-primary-button, .dashboard-action-primary, button[type="submit"], input[type="submit"] { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bone-50) !important; box-shadow: none !important; } .btn-primary:hover, .im-primary-button:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--accent-hover) !important; } .btn-secondary, .im-secondary-button, .btn-ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .btn-secondary:hover, .im-secondary-button:hover, .btn-ghost:hover { background: var(--surface) !important; border-color: var(--border-strong) !important; } .btn-danger { background: var(--danger) !important; color: var(--bone-50) !important; } .btn:active, .im-primary-button:active, .im-secondary-button:active, .lc-sidebar-link:active, .lc-mobile-report-card:active { transform: scale(.985); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select, .form-input, .form-select, .form-textarea, .im-input, .im-select, .im-textarea { min-height: 44px; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; color: var(--text) !important; font-family: var(--font-sans); font-size: 16px !important; box-shadow: none !important; } input:focus, textarea:focus, select:focus, .form-input:focus, .form-select:focus, .form-textarea:focus, .im-input:focus, .im-select:focus, .im-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255,106,26,.2) !important; outline: none !important; } table { border-collapse: separate; border-spacing: 0; } thead, thead.bg-gray-50 { background: var(--surface) !important; } tbody, tbody.bg-white, tr, td, th { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; } th { color: var(--text-muted) !important; font-size: var(--text-xs) !important; letter-spacing: .06em !important; } .badge, [class*="badge"], .im-badge { border-radius: var(--r-pill) !important; font-size: var(--text-xs) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } .badge-primary, .im-badge-primary, .badge-info, .im-badge-info { background: var(--accent-light) !important; border-color: rgba(255,106,26,.22) !important; color: var(--tangerine-400) !important; } .badge-positive, .im-badge-success { background: var(--success-light) !important; color: var(--success) !important; } .badge-warning, .im-badge-warning { background: var(--warning-light) !important; color: var(--warning) !important; } .badge-negative, .im-badge-danger { background: var(--danger-light) !important; color: var(--danger) !important; } .text-accent, .im-text-primary, .text-primary-600, .text-blue-600, .text-blue-500, .text-blue-400, .text-indigo-600, .text-indigo-500, .text-indigo-400, .text-purple-600, .text-purple-500, .text-purple-400, .text-purple-300, .text-purple-700, .hover\:text-purple-500:hover, .hover\:text-purple-600:hover, .hover\:text-purple-700:hover { color: var(--accent) !important; } .bg-blue-600, .bg-indigo-600, .bg-purple-500, .bg-purple-600, .hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover { background: var(--accent) !important; color: var(--bone-50) !important; } .bg-purple-500\/10, .bg-indigo-500\/10, .bg-blue-500\/10 { background: var(--accent-light) !important; } .border-blue-500, .border-indigo-500, .border-purple-500 { border-color: var(--accent) !important; } .focus\:border-blue-500:focus, .focus\:border-indigo-500:focus, .focus\:border-purple-500:focus { border-color: var(--accent) !important; } .focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus, .focus\:ring-purple-500:focus { box-shadow: 0 0 0 3px rgba(255,106,26,.2) !important; } .text-ink, .text-gray-900, .text-slate-900, .text-canvas-raised { color: var(--text) !important; } .text-ink-secondary, .text-gray-600, .text-gray-500, .text-slate-600, .text-canvas-raised\/80, .im-text-muted { color: var(--text-muted) !important; } .text-ink-muted, .text-ink-subtle, .text-gray-400, .im-text-subtle { color: var(--text-subtle) !important; } .border-border, .border-gray-200, .border-gray-300, .divide-border > :not([hidden]) ~ :not([hidden]), .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; } /* Web SaaS sidebar shell */ .lc-app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: 280px; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5); background: color-mix(in srgb, var(--pitch-850) 94%, transparent); border-right: 1px solid var(--border); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .lc-sidebar-brand { padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); } .lc-brand-mark { display: flex; align-items: center; gap: var(--s-3); color: var(--text) !important; text-decoration: none; } .lc-brand-block { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--bone-50); font-weight: 800; transform: rotate(-3deg); } .lc-brand-mark strong, .lc-sidebar-user strong { display: block; color: var(--text); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-brand-mark small, .lc-sidebar-user small { display: block; color: var(--text-subtle); font-size: var(--text-xs); line-height: 1.4; } .lc-sidebar-nav { display: grid; gap: var(--s-1); } .lc-sidebar-section { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); } .lc-sidebar-section > p { margin: 0; color: var(--text-subtle); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .lc-sidebar-link { min-height: 42px; display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-muted) !important; font-size: var(--text-sm); font-weight: 500; text-decoration: none !important; } .lc-sidebar-link svg, .lc-sidebar-link [data-lucide] { width: 20px; height: 20px; flex: 0 0 auto; } .lc-sidebar-link:hover, .lc-sidebar-link-active { background: var(--surface) !important; border-color: var(--border); color: var(--text) !important; } .lc-sidebar-link-active { box-shadow: inset 3px 0 0 var(--accent); } .lc-sidebar-link em { margin-left: auto; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--accent); color: var(--bone-50); font-size: 11px; font-style: normal; } .lc-sidebar-actions { margin-top: auto; display: grid; gap: var(--s-3); } .lc-sidebar-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-md); background: var(--accent); color: var(--bone-50) !important; font-size: var(--text-sm); font-weight: 600; text-decoration: none !important; } .lc-sidebar-user { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .lc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--accent); color: var(--bone-50); font-weight: 700; } .lc-sidebar-utility { display: grid; gap: var(--s-1); } .lc-sidebar-danger { width: 100%; color: var(--danger) !important; } .web-management-surface .mobile-nav, .web-management-surface .lg\:hidden.mobile-nav { display: none !important; } .web-management-surface .dashboard-hero-action, .web-management-surface .dashboard-action-primary .dashboard-action-icon { box-shadow: 0 0 24px rgba(255,106,26,.24) !important; } /* Mobile reporting shell */ .mobile-reporting-surface { --im-bg: var(--pitch-900); --im-bg-lowest: var(--pitch-900); --im-surface: var(--pitch-800); --im-surface-raised: var(--pitch-850); --im-surface-high: #191918; --im-surface-highest: var(--pitch-700); --im-border: var(--border); --im-border-strong: var(--border-strong); --im-text: var(--text); --im-text-muted: var(--text-muted); --im-text-subtle: var(--text-subtle); --im-primary: var(--accent); --im-primary-soft: var(--accent-light); --im-primary-text: var(--bone-50); --im-tertiary: var(--tangerine-400); --im-error: var(--danger); --im-warning: var(--warning); --im-success: var(--success); } .mobile-reporting-surface .im-mobile-shell { min-height: 100vh; background: radial-gradient(circle at 50% -12%, rgba(255,106,26,.24), transparent 24rem), var(--pitch-900) !important; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); } .mobile-reporting-surface .im-screen { width: min(100%, 30rem); padding: 5.5rem 1rem 1.5rem; } .mobile-reporting-surface .im-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.02; } .mobile-reporting-surface .im-subtitle { margin-top: .75rem; font-size: 1rem; line-height: 1.5; } .lc-mobile-report-header, .im-topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(4.75rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 1rem 0; display: flex; align-items: center; justify-content: space-between; background: rgba(5,5,5,.86) !important; border-bottom: 1px solid var(--border) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .lc-mobile-header-button, .im-icon-button { width: 48px; height: 48px; border-radius: var(--r-lg) !important; display: inline-flex; align-items: center; justify-content: center; background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .lc-mobile-header-button svg, .lc-mobile-header-button [data-lucide] { width: 22px; height: 22px; } .lc-mobile-header-title, .im-brand { display: grid; gap: 2px; text-align: center; color: var(--text) !important; font-family: var(--font-serif), Georgia, serif !important; font-weight: 500; } .lc-mobile-header-title small { color: var(--text-subtle); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .mobile-reporting-surface .mobile-nav { display: flex !important; background: rgba(12,12,11,.92) !important; border-top: 1px solid var(--border) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .mobile-reporting-surface .mobile-nav-item { min-height: 58px; color: var(--text-subtle) !important; } .mobile-reporting-surface .mobile-nav-item-active, .mobile-reporting-surface .mobile-nav-item:hover { background: var(--accent-light) !important; color: var(--accent) !important; } .mobile-reporting-surface .mobile-nav-fab { width: 60px; height: 60px; background: var(--accent) !important; color: var(--bone-50) !important; border: 4px solid var(--pitch-900); box-shadow: 0 10px 28px rgba(255,106,26,.24) !important; } .lc-mobile-choice-grid { display: grid; gap: var(--s-4); } .lc-mobile-report-card { min-height: 168px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); color: var(--text) !important; text-decoration: none !important; } .lc-mobile-report-card-primary { background: linear-gradient(145deg, rgba(255,106,26,.22), rgba(255,106,26,.06)), var(--surface); border-color: rgba(255,106,26,.34); } .lc-mobile-report-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--accent); color: var(--bone-50); } .lc-mobile-report-card:not(.lc-mobile-report-card-primary) .lc-mobile-report-icon { background: var(--pitch-700); color: var(--tangerine-400); } .lc-mobile-report-icon svg, .lc-mobile-report-icon [data-lucide] { width: 30px; height: 30px; } .lc-mobile-report-card h2 { margin: 0 0 6px; color: var(--text); font-size: 1.35rem; line-height: 1.15; } .lc-mobile-report-card p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.45; } .lc-mobile-report-card strong { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); color: var(--tangerine-400); font-size: var(--text-sm); font-weight: 700; } .mobile-reporting-surface .card, .mobile-reporting-surface .im-card { border-radius: var(--r-xl) !important; } .mobile-reporting-surface .btn, .mobile-reporting-surface .im-primary-button, .mobile-reporting-surface .im-secondary-button { min-height: 56px; font-size: 1rem; } .mobile-reporting-surface .im-screen .im-primary-button, .mobile-reporting-surface .im-screen .im-secondary-button { width: 100%; } @media (max-width: 1023px) { .web-management-surface .lc-app-sidebar { position: sticky; top: 0; width: 100%; min-height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: var(--s-3); } .web-management-surface .lc-sidebar-brand, .web-management-surface .lc-sidebar-section, .web-management-surface .lc-sidebar-actions { display: none; } .web-management-surface .lc-sidebar-nav { display: flex; gap: var(--s-2); } .web-management-surface .lc-sidebar-link { white-space: nowrap; } .web-management-surface .lc-app-sidebar ~ main, .web-management-surface .lc-app-sidebar + main, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav), .web-management-surface .page-content { width: 100%; margin-left: 0; padding: var(--s-5) var(--s-4) var(--s-10) !important; } } @media (max-width: 640px) { .mobile-reporting-surface .im-screen { padding-left: 1rem; padding-right: 1rem; } .lc-mobile-report-card { grid-template-columns: 1fr; min-height: 180px; } } /* ============================================ * LC2026 COMPONENT ALIGNMENT PASS * Native component primitives from the reference library. * ============================================ */ body.web-management-surface, body.mobile-reporting-surface { background: var(--bg) !important; } h1, h2, h3, .lc-page-header h1, .lc-mobile-page-head h1, .lc-mobile-intro h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em; } .lc-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 16px; border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1; text-decoration: none !important; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .lc-btn svg, .lc-btn [data-lucide] { width: 16px; height: 16px; } .lc-btn:hover { transform: translateY(-1px); } .lc-btn:active { transform: translateY(0) scale(.985); } .lc-btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bone-50) !important; } .lc-btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } .lc-btn-secondary { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; } .lc-btn-secondary:hover { background: var(--surface) !important; border-color: var(--border-strong) !important; } .lc-btn-ghost { background: transparent !important; color: var(--text) !important; } .lc-btn-ghost:hover { background: var(--surface) !important; } .lc-btn-danger { background: var(--danger) !important; color: var(--bone-50) !important; } .lc-btn-full { width: 100%; } .lc-icon-button { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted) !important; text-decoration: none !important; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .lc-icon-button:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--text) !important; } .lc-icon-button svg, .lc-icon-button [data-lucide] { width: 18px; height: 18px; } .lc-icon-button em { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--accent); color: var(--bone-50); font-size: 10px; font-style: normal; font-weight: 700; } .lc-icon-button-large { width: 52px; height: 52px; flex: 0 0 52px; } .lc-card, .lc-form-section, .lc-kpi-card, .lc-action-card, .lc-empty-state, .lc-stacked-list, .lc-bottom-sheet-panel, .lc-review-card, .lc-chat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; color: var(--text); } .lc-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: var(--text-xs); font-weight: 600; line-height: 1; } .lc-badge-accent { background: var(--accent-light); border-color: rgba(255,106,26,.22); color: var(--tangerine-400); } .lc-badge-success { background: var(--success-light); border-color: transparent; color: var(--success); } .lc-badge-warning { background: var(--warning-light); border-color: transparent; color: var(--warning); } .lc-badge-danger { background: var(--danger-light); border-color: transparent; color: var(--danger); } .lc-badge-default { color: var(--text-muted); } .lc-kicker { display: inline-flex; width: fit-content; margin: 0 0 var(--s-3); padding: 4px 10px; border: 1px solid rgba(255,106,26,.22); border-radius: var(--r-pill); background: var(--accent-light); color: var(--tangerine-400); font-size: var(--text-xs); font-weight: 600; } .lc-text-link { color: var(--accent) !important; font-size: var(--text-sm); font-weight: 600; text-decoration: none !important; } .lc-text-link:hover { color: var(--tangerine-400) !important; } /* Desktop application shell */ .lc-app-sidebar { width: 240px; padding: var(--s-5); gap: var(--s-4); background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; } .lc-app-topbar { position: fixed; inset: 0 0 auto 240px; z-index: 90; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--s-6); background: var(--bg); border-bottom: 1px solid var(--border); } .lc-app-search { min-width: min(360px, 42vw); height: 40px; display: flex; align-items: center; gap: var(--s-2); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-subtle); font-size: var(--text-sm); } .lc-app-search svg, .lc-app-search [data-lucide] { width: 16px; height: 16px; } .lc-app-topbar-actions { display: flex; align-items: center; gap: var(--s-2); } .lc-avatar-sm { width: 36px; height: 36px; font-size: var(--text-xs); } .web-management-surface .lc-app-sidebar ~ main, .web-management-surface .lc-app-sidebar + main, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav), .web-management-surface .page-content { width: calc(100% - 240px); margin-left: 240px; padding: calc(64px + var(--s-8)) var(--s-8) var(--s-12) !important; } .lc-sidebar-link { min-height: 38px; padding: 8px 10px; } .lc-sidebar-link svg, .lc-sidebar-link [data-lucide] { width: 17px; height: 17px; } .lc-sidebar-link-active { box-shadow: none; background: var(--surface) !important; color: var(--text) !important; font-weight: 600; } .lc-sidebar-primary { background: var(--accent); box-shadow: none; } .lc-app-page { max-width: none; } .web-management-surface .lc-app-page > * { max-width: none; } .lc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border); margin-bottom: var(--s-6); } .lc-page-header h1 { margin: 0; font-size: var(--text-4xl); line-height: 1.08; } .lc-page-subtitle { max-width: 62ch; margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--text-base); } .lc-page-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; } .lc-breadcrumbs { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); color: var(--text-subtle); font-size: var(--text-sm); } .lc-breadcrumbs svg { width: 14px; height: 14px; } .lc-breadcrumbs strong { color: var(--text); font-weight: 600; } .lc-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); } .lc-action-card { min-height: 118px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: var(--s-4); padding: var(--s-5); color: var(--text) !important; text-decoration: none !important; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .lc-action-card:hover { border-color: var(--border-strong); background: var(--surface-3); transform: translateY(-1px); } .lc-action-card-primary { border-color: rgba(255,106,26,.36); background: linear-gradient(145deg, rgba(255,106,26,.16), rgba(255,106,26,.04)), var(--surface); } .lc-action-icon, .lc-list-icon, .lc-kpi-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--accent-light); color: var(--accent); } .lc-action-icon { width: 44px; height: 44px; } .lc-action-icon svg, .lc-list-icon svg, .lc-kpi-icon svg { width: 18px; height: 18px; } .lc-action-card strong, .lc-stacked-item strong { display: block; color: var(--text); font-size: var(--text-base); font-weight: 600; line-height: 1.25; } .lc-action-card small, .lc-stacked-item small { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.35; } .lc-section { margin-top: var(--s-8); } .lc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); } .lc-section-head h2 { margin: 0; color: var(--text) !important; font-size: var(--text-2xl); } .lc-section-head p { margin: var(--s-1) 0 0; color: var(--text-muted); font-size: var(--text-sm); } .lc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); } .lc-kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lc-kpi-card { min-height: 160px; padding: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .lc-kpi-icon { width: 38px; height: 38px; } .lc-kpi-icon-success { background: var(--success-light); color: var(--success); } .lc-kpi-icon-warning { background: var(--warning-light); color: var(--warning); } .lc-kpi-icon-danger { background: var(--danger-light); color: var(--danger); } .lc-kpi-card strong { display: block; margin-top: var(--s-4); color: var(--text); font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .lc-kpi-card span:last-child { color: var(--text-muted); font-size: var(--text-sm); } .lc-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); } .lc-progress-card { padding: var(--s-5); } .lc-progress-card h3 { margin: 0 0 var(--s-4); color: var(--text) !important; font-size: var(--text-xl); } .lc-progress-row + .lc-progress-row { margin-top: var(--s-4); } .lc-progress-row > div:first-child { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--text-muted); font-size: var(--text-sm); } .lc-progress-row strong { color: var(--text); } .lc-progress-track { height: 8px; margin-top: var(--s-2); overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); } .lc-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .lc-stacked-list { overflow: hidden; } .lc-stacked-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border-bottom: 1px solid var(--border); color: var(--text) !important; text-decoration: none !important; } .lc-stacked-item:last-child { border-bottom: 0; } .lc-stacked-item:hover { background: var(--surface-3); } .lc-stacked-item-large { align-items: flex-start; } .lc-stacked-item code { display: inline-flex; margin-top: var(--s-2); color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); } .lc-list-icon { width: 40px; height: 40px; } .lc-item-meta { display: grid; gap: var(--s-2); justify-items: end; color: var(--text-subtle); } .lc-empty-state { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-5); text-align: center; } .lc-empty-state > svg, .lc-empty-state > [data-lucide] { width: 48px; height: 48px; color: var(--text-subtle); } .lc-empty-state h3 { margin: var(--s-2) 0 0; color: var(--text) !important; font-size: var(--text-xl); } .lc-empty-state p { max-width: 36ch; margin: 0; color: var(--text-muted); font-size: var(--text-sm); } .lc-centred-action { display: flex; justify-content: center; margin-top: var(--s-5); } /* Mobile reporting app */ .mobile-reporting-surface { display: block; min-height: 100vh; background: var(--bg) !important; } .mobile-reporting-surface .lc-mobile-shell, .mobile-reporting-surface .im-mobile-shell { position: relative; width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; overflow-x: hidden; background: var(--bg) !important; border-inline: 1px solid var(--border); padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } .lc-mobile-report-header, .mobile-reporting-surface .mobile-nav { left: 50%; right: auto; width: min(100%, 430px); transform: translateX(-50%); } .lc-mobile-report-header { height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--s-4) 0; background: rgba(5,5,5,.94) !important; } .lc-mobile-header-button { width: 44px; height: 44px; border-radius: var(--r-md) !important; } .lc-mobile-header-title span { font-size: var(--text-base); font-weight: 600; } .lc-mobile-screen { min-height: 100dvh; padding: calc(64px + env(safe-area-inset-top, 0px) + var(--s-6)) var(--s-4) calc(96px + env(safe-area-inset-bottom, 0px)); } .lc-mobile-screen-centred { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-6); padding-top: calc(64px + env(safe-area-inset-top, 0px) + var(--s-8)); } .lc-mobile-stack { display: grid; gap: var(--s-5); } .lc-mobile-intro, .lc-mobile-page-head { display: grid; gap: var(--s-3); } .lc-mobile-intro { text-align: left; } .lc-mobile-intro h1, .lc-mobile-page-head h1 { margin: 0; color: var(--text) !important; font-size: var(--text-3xl); line-height: 1.08; } .lc-mobile-intro p:not(.lc-kicker), .lc-mobile-page-head p:not(.lc-kicker) { margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.55; } .lc-mobile-choice-grid { gap: var(--s-3); } .lc-mobile-report-card { min-height: 148px; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); } .lc-mobile-report-card-primary { background: linear-gradient(145deg, rgba(255,106,26,.14), rgba(255,106,26,.04)), var(--surface); } .lc-mobile-report-icon { width: 48px; height: 48px; border-radius: var(--r-md); } .lc-mobile-report-icon svg, .lc-mobile-report-icon [data-lucide] { width: 22px; height: 22px; } .lc-mobile-report-card h2 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; } .lc-mobile-report-card p { font-size: var(--text-base); } .lc-mobile-report-card strong { margin-top: var(--s-3); font-size: var(--text-sm); } .mobile-reporting-surface .mobile-nav { min-height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid !important; grid-template-columns: 1fr 1fr 64px 1fr; align-items: center; gap: 4px; background: rgba(12,12,11,.96) !important; border-top: 1px solid var(--border) !important; border-radius: var(--r-xl) var(--r-xl) 0 0; } .mobile-reporting-surface .mobile-nav-item { min-height: 48px; padding: 4px 8px; border-radius: var(--r-md); color: var(--text-subtle) !important; } .mobile-reporting-surface .mobile-nav-item-active, .mobile-reporting-surface .mobile-nav-item:hover { background: transparent !important; color: var(--accent) !important; } .mobile-reporting-surface .mobile-nav-icon { width: 22px; height: 22px; } .mobile-reporting-surface .mobile-nav-label { font-size: 10px; font-weight: 600; } .mobile-reporting-surface .mobile-nav-fab { justify-self: center; width: 56px; height: 56px; border: 4px solid var(--bg); border-radius: 50%; background: var(--accent) !important; color: var(--bone-50) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-10px); } .mobile-reporting-surface .mobile-nav-fab svg, .mobile-reporting-surface .mobile-nav-fab [data-lucide] { width: 22px; height: 22px; } .lc-assistant-flow { display: grid; gap: var(--s-4); } .lc-chat-card { min-height: 330px; display: flex; flex-direction: column; overflow: hidden; } .lc-chat-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); } .lc-chat-agent { display: flex; align-items: center; gap: var(--s-3); } .lc-chat-agent p { margin: 0; color: var(--text); font-weight: 600; } .lc-chat-agent small { display: block; margin-top: 2px; color: var(--text-subtle); font-size: var(--text-xs); } .lc-chat-avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--bone-50); font-weight: 700; } .lc-chat-messages { flex: 1; overflow-y: auto; padding: var(--s-2) 0; } .lc-chat-composer { border-top: 1px solid var(--border); padding: var(--s-2) var(--s-3); } .lc-composer-box { display: grid; gap: var(--s-2); } .lc-composer-input { display: grid; gap: var(--s-2); } .lc-composer-input small, .lc-helper-text { color: var(--text-subtle); font-size: var(--text-xs); } .lc-mobile-input, .lc-mobile-form-screen .form-input, .lc-mobile-form-screen .form-select, .lc-mobile-form-screen .form-textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; background: var(--surface-2) !important; color: var(--text) !important; font-family: var(--font-sans); font-size: 16px !important; } textarea.lc-mobile-input { min-height: 92px; resize: vertical; } .lc-chat-composer textarea.lc-mobile-input { min-height: 64px; } .lc-composer-actions { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-2); } .lc-bottom-sheet-panel { padding: 0 var(--s-4) var(--s-4); border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg); } .lc-sheet-handle { display: block; width: 40px; height: 4px; margin: 10px auto var(--s-4); border-radius: var(--r-pill); background: var(--text-muted); opacity: .3; } .lc-review-card { padding: var(--s-3); } .lc-review-card + .lc-review-card { margin-top: var(--s-3); } .lc-review-card h2, .lc-review-card h3 { margin: 0 0 var(--s-2); color: var(--text) !important; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; } .lc-review-card p, .lc-review-card div, .lc-review-card dl { margin: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; } .lc-form-error { margin: var(--s-2) 0 0; min-height: 1em; color: var(--danger); font-size: var(--text-xs); } .lc-form-section { padding: var(--s-5); } .lc-form-section h3 { margin: 0 0 var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); color: var(--text) !important; font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; } .lc-mobile-form { display: grid; gap: var(--s-4); } .lc-mobile-form label { color: var(--text-muted) !important; font-size: var(--text-sm); font-weight: 600; } .lc-mobile-form .space-y-5 > * + *, .lc-mobile-form .space-y-4 > * + * { margin-top: var(--s-4) !important; } .lc-mobile-form-screen .grid { gap: var(--s-3) !important; } .lc-mobile-form-screen .border-dashed { border: 1px dashed var(--border-strong) !important; background: var(--surface-2) !important; border-radius: var(--r-lg) !important; } .lc-mobile-form-screen input[type="radio"], .lc-mobile-form-screen input[type="checkbox"] { accent-color: var(--accent); } .lc-mobile-action-row { position: sticky; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 10; display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(12,12,11,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .lc-mobile-action-row input.lc-btn-secondary, .lc-mobile-action-row button.lc-btn-secondary { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; } .lc-mobile-action-row input.lc-btn-primary, .lc-mobile-action-row button.lc-btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bone-50) !important; } .lc-alert { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); border-left-width: 3px; } .lc-alert-danger { background: var(--danger-light); border-color: rgba(180,81,58,.34); color: var(--danger); } .lc-chat-row { display: flex; gap: var(--s-3); padding: var(--s-2) var(--s-4); } .lc-chat-row-user { flex-direction: row-reverse; } .lc-chat-bubble { max-width: 82%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); font-size: var(--text-sm); line-height: 1.5; } .lc-chat-row-user .lc-chat-bubble { background: var(--accent); border-color: var(--accent); color: var(--bone-50); } .lc-chat-row .lc-chat-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: var(--text-xs); } .lc-fields-empty { color: var(--text-muted); } .lc-field-row { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .lc-field-row dt { color: var(--text-subtle); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; } .lc-field-row dd { margin: 4px 0 0; color: var(--text); font-size: var(--text-sm); } @media (max-width: 1023px) { .lc-app-topbar { display: none; } .web-management-surface .lc-app-sidebar ~ main, .web-management-surface .lc-app-sidebar + main, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav), .web-management-surface .page-content { width: 100%; margin-left: 0; padding: var(--s-6) var(--s-4) var(--s-10) !important; } .lc-page-header, .lc-section-head { display: grid; } .lc-action-grid, .lc-kpi-grid, .lc-two-column { grid-template-columns: 1fr; } } @media (max-width: 520px) { .mobile-reporting-surface .lc-mobile-shell, .mobile-reporting-surface .im-mobile-shell { width: 100%; border-inline: 0; } .lc-mobile-report-header, .mobile-reporting-surface .mobile-nav { width: 100%; } .lc-mobile-screen { padding-inline: var(--s-4); } } /* ============================================ * LC2026 PRIMITIVES — Phase B * Form controls, alerts, pills, pagination, modal, tables. * ============================================ */ /* Alert variants (lc-alert + lc-alert-danger already defined above) */ .lc-alert-success { background: var(--success-light); border-color: rgba(106, 143, 94, 0.34); color: var(--success); } .lc-alert-warning { background: var(--warning-light); border-color: rgba(201, 162, 74, 0.34); color: var(--warning); } .lc-alert-info { background: var(--info-light); border-color: rgba(90, 125, 154, 0.34); color: var(--info); } .lc-alert-accent { background: var(--accent-light); border-color: rgba(255, 106, 26, 0.28); color: var(--accent); } /* Form group + label */ .lc-form-group { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); } .lc-label { font-size: var(--text-sm); font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .lc-label-muted { color: var(--text-muted); } /* Inputs / textarea / select — LC2026 form rule */ .lc-input, .lc-textarea, .lc-select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.45; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .lc-input::placeholder, .lc-textarea::placeholder { color: var(--text-subtle); } .lc-input:focus, .lc-textarea:focus, .lc-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.2); } .lc-input:disabled, .lc-textarea:disabled, .lc-select:disabled { opacity: 0.6; cursor: not-allowed; } .lc-textarea { min-height: 96px; resize: vertical; } .lc-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } /* Pills — filter rows */ .lc-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); } .lc-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .lc-pill:hover { background: var(--surface-3); color: var(--text); } .lc-pill-active, .lc-pill[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } /* Pagination */ .lc-pagination { display: flex; gap: var(--s-1); align-items: center; justify-content: center; margin-top: var(--s-6); } .lc-pagination a, .lc-pagination span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; text-decoration: none; transition: all var(--dur-fast) var(--ease); } .lc-pagination a:hover { background: var(--surface); color: var(--text); border-color: var(--border); } .lc-pagination .current, .lc-pagination .active { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .lc-pagination .disabled, .lc-pagination .gap { color: var(--text-subtle); pointer-events: none; } /* Modal */ .lc-modal-backdrop { position: fixed; inset: 0; background: rgba(5, 5, 5, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--s-4); z-index: 50; } .lc-modal { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .lc-modal-head { padding: var(--s-5) var(--s-5) var(--s-3); border-bottom: 1px solid var(--border); } .lc-modal-title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; color: var(--text); letter-spacing: -0.01em; } .lc-modal-body { padding: var(--s-5); color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; } .lc-modal-actions { padding: var(--s-3) var(--s-5) var(--s-5); display: flex; gap: var(--s-2); justify-content: flex-end; } /* Data table — LC2026 application UI rule */ .lc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .lc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .lc-table thead { background: var(--surface-2); } .lc-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .lc-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color var(--dur-fast) var(--ease); } .lc-table tbody tr:last-child { border-bottom: 0; } .lc-table tbody tr:hover { background: var(--surface-3); } .lc-table td { padding: 14px 16px; color: var(--text); vertical-align: middle; } .lc-table-actions { display: flex; gap: var(--s-1); justify-content: flex-end; } /* Auth shell — LC2026 sign-in card */ .lc-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4); background: radial-gradient(circle at 50% -10%, rgba(255, 106, 26, 0.08), transparent 34rem), var(--bg); } .lc-auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--s-5); } .lc-auth-divider { position: relative; text-align: center; font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-subtle); } .lc-auth-divider::before, .lc-auth-divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--border); } .lc-auth-divider::before { left: 0; } .lc-auth-divider::after { right: 0; } /* Mobile bento grid — LC2026 mobile dashboard */ .lc-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .lc-bento-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); min-height: 110px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); text-decoration: none !important; color: var(--text); } .lc-bento-card:hover, .lc-bento-card:active { border-color: var(--border-strong); background: var(--surface-3); } .lc-bento-card-hero { grid-column: span 2; background: linear-gradient(145deg, rgba(255,106,26,.18), rgba(255,106,26,.04)), var(--surface); border-color: rgba(255,106,26,.36); display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: var(--s-3); min-height: 88px; } .lc-bento-hero-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(255,106,26,.18); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .lc-bento-hero-icon svg { width: 22px; height: 22px; } .lc-bento-hero-text strong { display: block; font-size: var(--text-base); font-weight: 600; color: var(--text); line-height: 1.25; } .lc-bento-hero-text small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); } .lc-bento-hero-arrow { color: var(--accent); width: 20px; height: 20px; } .lc-bento-value { font-family: var(--font-serif); font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-weight: 500; } .lc-bento-label { font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.02em; } .lc-bento-card-link strong { font-size: var(--text-base); font-weight: 600; } .lc-bento-link-title { color: var(--text); } /* Mic button recording state — tangerine ring + pulse */ .lc-mic-recording { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 24px rgba(255, 106, 26, 0.4); animation: lc-mic-pulse 1.4s var(--ease) infinite; } @keyframes lc-mic-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 24px rgba(255, 106, 26, 0.4); } 50% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 32px rgba(255, 106, 26, 0.7); } } /* ============================================ * LC2026-LUXE — Linear + Vision Pro on top of LC2026 * * Z-LAYER RULE (do not violate): * 0 atmosphere .lc-volumetric, page bg tint * 1 particles .lc-particles canvas * 10 surface sidebar, topbar, page bg containers (matte) * 20 focal hero cards, primary CTA, modals seed (.lc-glass / .lc-glass-hero) * 50 overlay modal, drawer, toast (.lc-glass + heavy shadow) * * GLASS RESTRAINT RULE: glass goes on FOCAL surfaces only (layer 20+). * Never on .lc-table rows, .lc-stacked-item, .lc-bento-card (non-hero), or KPIs. * Density wins. Vision Pro overcompensation = AI slop. * ============================================ */ /* Glass tier tokens — composable, dark-only */ :root, .dark { --glass-1: rgba(20, 20, 19, 0.55); --glass-2: rgba(20, 20, 19, 0.35); --glass-3: rgba(12, 12, 11, 0.62); --glass-border: rgba(255, 255, 255, 0.06); --glass-highlight: rgba(255, 255, 255, 0.04); --glass-blur-sm: 8px; --glass-blur-md: 16px; --glass-blur-lg: 24px; --glass-saturate: 1.4; --tangerine-spill: rgba(255, 106, 26, 0.18); } [data-theme="light"] { --glass-1: rgba(255, 255, 255, 0.65); --glass-2: rgba(255, 255, 255, 0.45); --glass-3: rgba(247, 246, 243, 0.72); --glass-border: rgba(0, 0, 0, 0.08); --glass-highlight: rgba(255, 255, 255, 0.6); --tangerine-spill: rgba(255, 106, 26, 0.12); } /* Glass surfaces */ .lc-glass { background: var(--glass-1); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.55); } .lc-glass-hero { background: var(--glass-3); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px -16px rgba(0, 0, 0, 0.6), 0 0 80px -20px var(--tangerine-spill); } /* prefers-reduced-transparency: drop blur, raise alpha to 0.92 */ @media (prefers-reduced-transparency: reduce) { .lc-glass, .lc-glass-hero { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 20, 19, 0.92); } [data-theme="light"] .lc-glass, [data-theme="light"] .lc-glass-hero { background: rgba(247, 246, 243, 0.96); } } /* Volumetric atmosphere — single layer per page, fixed-position */ .lc-volumetric { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 720px 480px at 18% 12%, rgba(255, 106, 26, 0.12), transparent 70%), radial-gradient(ellipse 540px 540px at 88% 92%, rgba(255, 106, 26, 0.06), transparent 70%); animation: lc-vol-drift 60s var(--ease) infinite alternate; will-change: transform; } .lc-volumetric-auth { background: radial-gradient(ellipse 760px 520px at 50% 20%, rgba(255, 106, 26, 0.16), transparent 68%), radial-gradient(ellipse 480px 480px at 50% 100%, rgba(255, 106, 26, 0.07), transparent 70%); } .lc-volumetric-mobile { background: radial-gradient(ellipse 480px 320px at 50% 92%, rgba(255, 106, 26, 0.14), transparent 65%); animation: none; /* mobile: static well, no drift drain */ } .lc-volumetric-minimal { /* admin tables get a single, subtle well */ background: radial-gradient(ellipse 600px 400px at 5% 0%, rgba(255, 106, 26, 0.05), transparent 75%); animation: none; } @keyframes lc-vol-drift { to { transform: translate3d(20px, -10px, 0) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .lc-volumetric { animation: none; } } /* Light bar — under page headers, implies a light source above */ .lc-light-bar { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.45), transparent); margin: var(--s-6) 0; border: 0; } /* Particle canvas */ .lc-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5; } @media (pointer: coarse) { /* mobile / touch devices: never render particles */ .lc-particles { display: none !important; } } @media (prefers-reduced-motion: reduce) { .lc-particles { opacity: 0.25; } } [data-luxe-particles="off"] .lc-particles { display: none !important; } /* Premium typography expression */ @supports (font-variation-settings: normal) { h1, .lc-display, .lc-page-header h1 { font-family: var(--font-serif); font-variation-settings: "opsz" 144, "wght" 500; letter-spacing: -0.025em; line-height: 1.05; } h2, .lc-page-header h2 { font-family: var(--font-serif); font-variation-settings: "opsz" 96, "wght" 450; letter-spacing: -0.018em; line-height: 1.15; } } /* Tabular numerics — apply to KPIs, table values, badge counts */ .lc-num, .lc-bento-value, .lc-kpi-card strong, .lc-table td, .lc-stat-value, .lc-progress-row strong { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; } /* Optical alignment + ligatures for body */ body, p, .lc-page-subtitle { font-feature-settings: "cv11" 1, "ss01"; } /* Tier A entrance — page load stagger */ .lc-enter, .lc-enter > * { animation: lc-enter 320ms var(--ease) backwards; } .lc-enter > *:nth-child(1) { animation-delay: 0ms; } .lc-enter > *:nth-child(2) { animation-delay: 40ms; } .lc-enter > *:nth-child(3) { animation-delay: 80ms; } .lc-enter > *:nth-child(4) { animation-delay: 120ms; } .lc-enter > *:nth-child(5) { animation-delay: 160ms; } .lc-enter > *:nth-child(6) { animation-delay: 200ms; } .lc-enter > *:nth-child(7) { animation-delay: 240ms; } .lc-enter > *:nth-child(8) { animation-delay: 280ms; } @keyframes lc-enter { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lc-enter, .lc-enter > * { animation: none; } } /* Tier B hover — focal cards lift with tangerine spill */ .lc-action-card-primary, .lc-bento-card-hero { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 120ms var(--ease); } .lc-action-card-primary:hover, .lc-bento-card-hero:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px -16px var(--tangerine-spill), 0 0 60px -10px rgba(255, 106, 26, 0.22); } @media (prefers-reduced-motion: reduce) { .lc-action-card-primary:hover, .lc-bento-card-hero:hover { transform: none; } } /* Tier C — KPI count-up scaffold (motion_controller.js drives the value) */ .lc-num-counting { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; } /* Ensure focal surfaces sit above atmosphere/particles */ .page, .lc-app-page, .lc-mobile-shell, main { position: relative; z-index: 10; } .lc-modal-backdrop { z-index: 50; } /* Apply hero-glass to focal primitives — overrides earlier flat surfaces */ .lc-action-card-primary, .lc-bento-card-hero, .lc-auth-card, .lc-modal { background: var(--glass-3); backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 56px -16px rgba(0, 0, 0, 0.6), 0 0 80px -20px var(--tangerine-spill); } /* Hero accent gradient stays on action-card-primary and bento hero — luxe layer adds glow on top */ .lc-action-card-primary { background: linear-gradient(145deg, rgba(255, 106, 26, 0.18), rgba(255, 106, 26, 0.04)), var(--glass-3); border-color: rgba(255, 106, 26, 0.30); } .lc-bento-card-hero { background: linear-gradient(145deg, rgba(255, 106, 26, 0.20), rgba(255, 106, 26, 0.05)), var(--glass-3); border-color: rgba(255, 106, 26, 0.32); } /* Bottom sheet — lighter glass (it sits on mobile content already darkened) */ .lc-bottom-sheet-panel { background: var(--glass-2); backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate)); border-top: 1px solid var(--glass-border); } /* Modal backdrop — heavier blur to throw focal modal forward */ .lc-modal-backdrop { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(5, 5, 5, 0.55); } @media (prefers-reduced-transparency: reduce) { .lc-action-card-primary, .lc-bento-card-hero, .lc-auth-card, .lc-modal, .lc-bottom-sheet-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); } .lc-action-card-primary { background: linear-gradient(145deg, rgba(255, 106, 26, 0.18), rgba(255, 106, 26, 0.04)), var(--surface); } .lc-bento-card-hero { background: linear-gradient(145deg, rgba(255, 106, 26, 0.20), rgba(255, 106, 26, 0.05)), var(--surface); } } /* Auto light-bar under every lc-page-header — single source */ .lc-page-header { position: relative; padding-bottom: var(--s-6); } .lc-page-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 106, 26, 0.45), transparent); pointer-events: none; } /* Force Fraunces on legacy heading/display classes (Manrope was off-spec) */ .im-title, .im-section-title, .im-brand, .header-logo, .dashboard-title, .im-stat-value { font-family: var(--font-serif), Georgia, serif; font-variation-settings: "opsz" 96, "wght" 500; letter-spacing: -0.018em; } /* ============================================ * LC2026 LIGHT MODE CONVERSION * Final pass that moves the dark-first LC2026 shell onto the light palette. * Kept at the end so older dark utility overrides cannot win the cascade. * ============================================ */ html[data-theme="light"] { color-scheme: light; background: var(--bone-50) !important; --bg: var(--bone-50); --surface: #FFFFFF; --surface-2: var(--bone-100); --surface-3: #FFFFFF; --border: var(--bone-200); --border-strong: var(--ash-200); --text: var(--pitch-900); --text-muted: var(--pitch-500); --text-subtle: var(--pitch-300); --accent-light: rgba(255, 106, 26, 0.10); --success-light: #EEF5EB; --warning-light: #FBF3DA; --danger-light: #F8EAE5; --info-light: #EAF1F6; --glass-1: rgba(255, 255, 255, 0.72); --glass-2: rgba(255, 255, 255, 0.54); --glass-3: rgba(247, 246, 243, 0.78); --glass-border: rgba(5, 5, 5, 0.08); --glass-highlight: rgba(255, 255, 255, 0.70); --tangerine-spill: rgba(255, 106, 26, 0.12); } html[data-theme="light"], html[data-theme="light"] body, html[data-theme="light"].web-management-surface, html[data-theme="light"].mobile-reporting-surface, html[data-theme="light"] body.web-management-surface, html[data-theme="light"] body.mobile-reporting-surface, html[data-theme="light"] .mobile-reporting-surface { --im-bg: var(--bg); --im-bg-lowest: var(--bg); --im-surface: var(--surface); --im-surface-raised: var(--surface); --im-surface-high: var(--surface-2); --im-surface-highest: var(--bone-200); --im-border: var(--border); --im-border-strong: var(--border-strong); --im-text: var(--text); --im-text-muted: var(--text-muted); --im-text-subtle: var(--text-subtle); --im-primary: var(--accent); --im-primary-soft: var(--accent-light); --im-primary-text: var(--bone-50); --im-tertiary: var(--tangerine-600); --im-error: var(--danger); --im-warning: var(--warning); --im-success: var(--success); } html[data-theme="light"] body.web-management-surface, html[data-theme="light"] body.mobile-reporting-surface { background: radial-gradient(ellipse 720px 440px at 18% -6%, rgba(255, 106, 26, 0.10), transparent 70%), var(--bg) !important; color: var(--text) !important; } html[data-theme="light"] body, html[data-theme="light"] .page, html[data-theme="light"] .dashboard-command, html[data-theme="light"] .im-mobile-shell, html[data-theme="light"] .lc-mobile-shell { background-color: var(--bg) !important; color: var(--text) !important; } html[data-theme="light"] .lc-app-sidebar, html[data-theme="light"] .lc-app-topbar, html[data-theme="light"] .header, html[data-theme="light"] .im-topbar, html[data-theme="light"] .lc-mobile-report-header, html[data-theme="light"] .mobile-nav, html[data-theme="light"] .im-bottom-nav { background: rgba(255, 255, 255, 0.92) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .lc-app-sidebar, html[data-theme="light"] .lc-app-topbar, html[data-theme="light"] .lc-mobile-report-header, html[data-theme="light"] .mobile-nav { box-shadow: 0 1px 0 rgba(5, 5, 5, 0.02) !important; } html[data-theme="light"] .card, html[data-theme="light"] .im-card, html[data-theme="light"] .stat-card, html[data-theme="light"] .metric-card, html[data-theme="light"] .dashboard-stat, html[data-theme="light"] .dashboard-list-card, html[data-theme="light"] .bg-white, html[data-theme="light"] .bg-gray-50, html[data-theme="light"] .bg-gray-100, html[data-theme="light"] .bg-canvas-subtle, html[data-theme="light"] .bg-canvas-raised, html[data-theme="light"] .lc-card, html[data-theme="light"] .lc-form-section, html[data-theme="light"] .lc-kpi-card, html[data-theme="light"] .lc-action-card, html[data-theme="light"] .lc-empty-state, html[data-theme="light"] .lc-stacked-list, html[data-theme="light"] .lc-review-card, html[data-theme="light"] .lc-chat-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: none !important; } html[data-theme="light"] .bg-canvas-muted, html[data-theme="light"] .bg-neutral-700, html[data-theme="light"] .bg-slate-700, html[data-theme="light"] .bg-gray-700, html[data-theme="light"] .bg-gray-200, html[data-theme="light"] .bg-primary-50, html[data-theme="light"] .dashboard-hero-icon, html[data-theme="light"] .dashboard-action-icon, html[data-theme="light"] .im-icon-tile, html[data-theme="light"] .lc-field-row, html[data-theme="light"] .lc-progress-track { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } html[data-theme="light"] .bg-ink { background: var(--surface-2) !important; color: var(--text) !important; } html[data-theme="light"] .card-hover:hover, html[data-theme="light"] .im-card-link:hover, html[data-theme="light"] .dashboard-action:hover, html[data-theme="light"] .lc-action-card:hover, html[data-theme="light"] .lc-stacked-item:hover, html[data-theme="light"] .lc-bento-card:hover, html[data-theme="light"] tr:hover { background: color-mix(in srgb, var(--surface) 88%, var(--accent) 6%) !important; border-color: var(--border-strong) !important; } html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="url"], html[data-theme="light"] input[type="search"], html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="datetime-local"], html[data-theme="light"] input[type="time"], html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .form-input, html[data-theme="light"] .form-select, html[data-theme="light"] .form-textarea, html[data-theme="light"] .im-input, html[data-theme="light"] .im-select, html[data-theme="light"] .im-textarea, html[data-theme="light"] .lc-input, html[data-theme="light"] .lc-textarea, html[data-theme="light"] .lc-select, html[data-theme="light"] .lc-mobile-input { color-scheme: light !important; background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder, html[data-theme="light"] .im-input::placeholder, html[data-theme="light"] .im-textarea::placeholder { color: var(--text-subtle) !important; } html[data-theme="light"] .text-ink, html[data-theme="light"] .text-gray-900, html[data-theme="light"] .text-slate-900, html[data-theme="light"] .text-canvas-raised, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: var(--text) !important; } html[data-theme="light"] .text-ink-secondary, html[data-theme="light"] .text-gray-700, html[data-theme="light"] .text-gray-600, html[data-theme="light"] .text-gray-500, html[data-theme="light"] .text-slate-600, html[data-theme="light"] .text-canvas-raised\/80, html[data-theme="light"] .im-text-muted { color: var(--text-muted) !important; } html[data-theme="light"] .text-ink-muted, html[data-theme="light"] .text-ink-subtle, html[data-theme="light"] .text-gray-400, html[data-theme="light"] .im-text-subtle { color: var(--text-subtle) !important; } html[data-theme="light"] .btn-primary, html[data-theme="light"] .im-primary-button, html[data-theme="light"] .lc-btn-primary, html[data-theme="light"] .bg-accent, html[data-theme="light"] .bg-blue-600, html[data-theme="light"] .bg-indigo-600, html[data-theme="light"] .bg-purple-600, html[data-theme="light"] .dashboard-action-primary, html[data-theme="light"] button[type="submit"], html[data-theme="light"] input[type="submit"] { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--bone-50) !important; } html[data-theme="light"] .btn-secondary, html[data-theme="light"] .im-secondary-button, html[data-theme="light"] .lc-btn-secondary, html[data-theme="light"] .btn-ghost, html[data-theme="light"] .lc-icon-button, html[data-theme="light"] .lc-mobile-header-button, html[data-theme="light"] .im-icon-button, html[data-theme="light"] .lc-sidebar-user { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .lc-action-card-primary, html[data-theme="light"] .lc-bento-card-hero, html[data-theme="light"] .lc-auth-card, html[data-theme="light"] .lc-modal { background: linear-gradient(145deg, rgba(255, 106, 26, 0.12), rgba(255, 106, 26, 0.03)), rgba(255, 255, 255, 0.78) !important; border-color: rgba(255, 106, 26, 0.22) !important; box-shadow: inset 0 1px 0 0 var(--glass-highlight), 0 16px 40px -28px rgba(5, 5, 5, 0.32), 0 0 48px -24px var(--tangerine-spill) !important; } html[data-theme="light"] .lc-bottom-sheet-panel, html[data-theme="light"] .lc-mobile-action-row { background: rgba(255, 255, 255, 0.92) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .lc-modal-backdrop { background: rgba(5, 5, 5, 0.22) !important; } html[data-theme="light"] .lc-mobile-report-card, html[data-theme="light"] .lc-bento-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .lc-mobile-report-card-primary { background: linear-gradient(145deg, rgba(255, 106, 26, 0.12), rgba(255, 106, 26, 0.03)), var(--surface) !important; border-color: rgba(255, 106, 26, 0.24) !important; } html[data-theme="light"] .lc-mobile-report-card:not(.lc-mobile-report-card-primary) .lc-mobile-report-icon, html[data-theme="light"] .mobile-reporting-surface .mobile-nav-fab { border-color: var(--bg) !important; } html[data-theme="light"] table, html[data-theme="light"] thead, html[data-theme="light"] tbody, html[data-theme="light"] tr, html[data-theme="light"] td, html[data-theme="light"] th { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] thead, html[data-theme="light"] thead.bg-gray-50, html[data-theme="light"] .lc-table thead { background: var(--surface-2) !important; } html[data-theme="light"] .lc-volumetric { opacity: 0.9; background: radial-gradient(ellipse 720px 480px at 18% 12%, rgba(255, 106, 26, 0.09), transparent 70%), radial-gradient(ellipse 540px 540px at 88% 92%, rgba(255, 106, 26, 0.04), transparent 70%); } html[data-theme="light"] .lc-particles { opacity: 0.18; } /* Older mobile-first pages use highly-specific shell selectors; keep them aligned with the light theme when rendered inside the desktop shell. */ html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .card, html[data-theme="light"] .min-h-screen.im-mobile-shell .card, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .card, html[data-theme="light"] .min-h-screen.bg-gray-50 .card, html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .bg-white, html[data-theme="light"] .min-h-screen.im-mobile-shell .bg-white, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .bg-white, html[data-theme="light"] .min-h-screen.bg-gray-50 .bg-white { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: none !important; } html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .bg-canvas-muted, html[data-theme="light"] .min-h-screen.im-mobile-shell .bg-canvas-muted, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .bg-canvas-muted, html[data-theme="light"] .min-h-screen.bg-gray-50 .bg-canvas-muted, html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .bg-canvas-subtle, html[data-theme="light"] .min-h-screen.im-mobile-shell .bg-canvas-subtle, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .bg-canvas-subtle, html[data-theme="light"] .min-h-screen.bg-gray-50 .bg-canvas-subtle { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .text-white, html[data-theme="light"] .min-h-screen.im-mobile-shell .text-white, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .text-white, html[data-theme="light"] .min-h-screen.bg-gray-50 .text-white { color: var(--text) !important; } html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .bg-accent.text-white, html[data-theme="light"] .min-h-screen.im-mobile-shell .bg-accent.text-white, html[data-theme="light"] .h-full.flex.flex-col.bg-gray-50 .bg-accent.text-white, html[data-theme="light"] .min-h-screen.bg-gray-50 .bg-accent.text-white, html[data-theme="light"] .h-full.flex.flex-col.im-mobile-shell .btn-primary, html[data-theme="light"] .min-h-screen.im-mobile-shell .btn-primary { color: var(--bone-50) !important; } html[data-theme="light"] .web-management-surface .lc-mobile-action-row, html[data-theme="light"] body.web-management-surface .lc-mobile-action-row { position: static !important; display: flex !important; gap: var(--s-3); padding: var(--s-4) 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] body.web-management-surface .lc-mobile-action-row .lc-btn, html[data-theme="light"] body.web-management-surface .lc-mobile-action-row input, html[data-theme="light"] body.web-management-surface .lc-mobile-action-row button { flex: 1 1 0; } html[data-theme="light"] #geo-map, html[data-theme="light"] #geo-map .leaflet-container, html[data-theme="light"] #geo-map .leaflet-tile-pane, html[data-theme="light"] #geo-map .leaflet-tile { filter: none !important; opacity: 1 !important; } /** * shadcn-overrides.css * * Retheme of legacy `.lc-*` and `.im-*` utility classes onto the shadcn * design tokens (--background, --foreground, --card, --primary, --secondary, * --muted, --accent, --destructive, --border, --ring, --radius). Loaded * after application.css so these rules win the cascade against the * original LC2026/Stitch definitions. * * Goal: pages that haven't been hand-ported yet (incident reports forms, * AI assistant, admin tables, conversation sessions, investigations, * subjects, bulletins, checklists, notifications, the 7 chart report * pages) inherit shadcn colors + spacing without per-file rewrites. * * Phase 10 will delete the now-redundant legacy rules from application.css * along with this file. */ /* ============================================================ * MOBILE SHELL + LAYOUT CONTAINERS * ============================================================ */ .im-mobile-shell, .lc-mobile-shell { background: var(--background); color: var(--foreground); min-height: 100vh; } /* (Sidebar offset rule moved to end of file to win cascade against the * .lc-mobile-screen shorthand `padding: 1rem` further down.) */ .lc-mobile-screen, .lc-mobile-form-screen { padding-top: 1rem; padding-right: 1rem; padding-bottom: 6rem; padding-left: 1rem; display: flex; flex-direction: column; gap: 1rem; } .lc-mobile-screen-centred { align-items: center; justify-content: center; text-align: center; } .lc-mobile-stack { display: flex; flex-direction: column; gap: 1rem; } .lc-mobile-page-head { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; } .lc-mobile-page-head h1, .lc-mobile-intro h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0; } .lc-mobile-page-head p, .lc-mobile-intro p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; } /* ============================================================ * CARDS / SURFACES * ============================================================ */ .lc-card, .im-card, .lc-review-card, .lc-mobile-report-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 1rem; } .lc-mobile-report-card-primary { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 8%, var(--card)); } /* ============================================================ * SECTIONS / PAGE HEADERS * ============================================================ */ .lc-section { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .lc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .lc-section-head h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0; } .lc-section-head p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; } .lc-page-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } @media (min-width: 1024px) { .lc-page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .lc-page-header h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); margin: 0; } .lc-page-subtitle { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; } .lc-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================ * TYPOGRAPHY UTILITIES * ============================================================ */ .im-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); } .im-subtitle { font-size: 0.875rem; color: var(--muted-foreground); } .im-section-title { font-size: 1rem; font-weight: 600; color: var(--foreground); } .lc-kicker { display: inline-block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .im-text, .lc-text { color: var(--foreground); } .im-text-muted, .lc-text-muted { color: var(--muted-foreground); } .im-text-subtle, .lc-text-subtle { color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); } .im-text-error, .lc-text-error { color: var(--destructive); } .im-text-primary, .lc-text-primary { color: var(--primary); } .lc-text-link { color: var(--primary); font-weight: 500; text-decoration: none; } .lc-text-link:hover { text-decoration: underline; } .lc-helper-text { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; } .lc-form-error { font-size: 0.75rem; color: var(--destructive); margin-top: 0.25rem; } /* ============================================================ * BUTTONS * ============================================================ */ .lc-btn, .im-primary-button, .im-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; border: 1px solid transparent; } .lc-btn:focus-visible, .im-primary-button:focus-visible, .im-secondary-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .lc-btn-primary, .im-primary-button { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .lc-btn-primary:hover, .im-primary-button:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); } .lc-btn-secondary, .im-secondary-button { background: var(--background); color: var(--foreground); border-color: var(--border); } .lc-btn-secondary:hover, .im-secondary-button:hover { background: var(--accent); color: var(--accent-foreground); } .lc-btn-ghost { background: transparent; color: var(--foreground); } .lc-btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); } .lc-btn-danger { background: var(--destructive); color: var(--primary-foreground); } .lc-btn-danger:hover { background: color-mix(in oklch, var(--destructive) 90%, transparent); } .lc-btn-full { width: 100%; } /* ============================================================ * ICON BUTTONS * ============================================================ */ .lc-icon-button, .im-icon-button { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem; border-radius: var(--radius); color: var(--foreground); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; } .lc-icon-button:hover, .im-icon-button:hover { background: var(--accent); color: var(--accent-foreground); } .lc-icon-button:focus-visible, .im-icon-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .lc-icon-button-large { height: 2.75rem; width: 2.75rem; } .im-icon-tile, .im-icon-tile-primary { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: calc(var(--radius) + 2px); background: var(--muted); color: var(--foreground); } .im-icon-tile-primary { background: var(--primary); color: var(--primary-foreground); } /* ============================================================ * BADGES * ============================================================ */ .lc-badge, .im-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: calc(var(--radius) - 2px); font-size: 0.75rem; font-weight: 500; border: 1px solid transparent; white-space: nowrap; width: fit-content; } .lc-badge-default, .im-badge-neutral { background: var(--secondary); color: var(--secondary-foreground); } .lc-badge-accent, .im-badge-primary, .im-badge-info { background: var(--primary); color: var(--primary-foreground); } .lc-badge-success { background: oklch(55% 0.16 145); color: oklch(99% 0 0); } .lc-badge-warning { background: oklch(70% 0.18 80); color: oklch(13% 0 0); } .lc-badge-danger { background: var(--destructive); color: var(--primary-foreground); } /* ============================================================ * FORMS / INPUTS * ============================================================ */ .lc-input, .im-input, .lc-mobile-input, .im-textarea, .lc-select { display: flex; width: 100%; height: 2.5rem; padding: 0.5rem 0.75rem; background: var(--background); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); font-size: 1rem; line-height: 1.5; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .im-textarea { height: auto; min-height: 6rem; } .lc-input:focus, .im-input:focus, .lc-mobile-input:focus, .im-textarea:focus, .lc-select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); } .lc-input::placeholder, .im-input::placeholder, .lc-mobile-input::placeholder, .im-textarea::placeholder { color: var(--muted-foreground); } .lc-form-section { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); } .lc-form-section h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0; } .lc-mobile-form { display: flex; flex-direction: column; gap: 1rem; } /* ============================================================ * ALERTS * ============================================================ */ .lc-alert { border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 0.75rem 1rem; background: var(--card); color: var(--card-foreground); } .lc-alert-success { border-color: oklch(55% 0.16 145 / 0.4); background: oklch(55% 0.16 145 / 0.08); color: oklch(45% 0.16 145); } .lc-alert-warning { border-color: oklch(70% 0.18 80 / 0.4); background: oklch(70% 0.18 80 / 0.08); color: oklch(50% 0.16 80); } .lc-alert-danger { border-color: color-mix(in oklch, var(--destructive) 40%, transparent); background: color-mix(in oklch, var(--destructive) 10%, var(--card)); color: var(--destructive); } /* ============================================================ * STACKED LISTS / EMPTY STATES * ============================================================ */ .lc-stacked-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); overflow: hidden; } .lc-stacked-list > * + * { border-top: 1px solid var(--border); } .lc-stacked-item, .lc-stacked-item-large { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--foreground); text-decoration: none; transition: background-color 150ms ease-out; } .lc-stacked-item:hover, .lc-stacked-item-large:hover { background: var(--accent); color: var(--accent-foreground); } .lc-stacked-item-large { padding: 1rem; } .lc-stacked-item strong, .lc-stacked-item-large strong { display: block; font-size: 0.875rem; font-weight: 500; color: var(--foreground); } .lc-stacked-item small, .lc-stacked-item-large small { display: block; font-size: 0.75rem; color: var(--muted-foreground); } .lc-stacked-item .lc-list-icon, .lc-stacked-item-large .lc-list-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground); } .lc-item-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; } .lc-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem; border: 1px dashed var(--border); border-radius: calc(var(--radius) + 2px); background: color-mix(in oklch, var(--card) 60%, transparent); text-align: center; color: var(--muted-foreground); } .lc-empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); margin: 0; } .lc-empty-state p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; } /* ============================================================ * TABLES (admin) * ============================================================ */ .lc-table-wrap { border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); overflow-x: auto; } .lc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .lc-table thead { background: var(--muted); color: var(--muted-foreground); } .lc-table th { text-align: left; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .lc-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); color: var(--foreground); vertical-align: middle; } .lc-table tr:last-child td { border-bottom: none; } .lc-table tr:hover td { background: var(--accent); } .lc-table-actions { display: flex; gap: 0.5rem; align-items: center; } .lc-pagination { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem; } /* ============================================================ * AVATAR * ============================================================ */ .lc-avatar, .im-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.75rem; font-weight: 500; flex-shrink: 0; } /* ============================================================ * MOBILE REPORT HEADER (still used on a few pages) * ============================================================ */ .lc-mobile-report-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: color-mix(in oklch, var(--background) 95%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .lc-mobile-header-button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); color: var(--foreground); background: transparent; border: none; cursor: pointer; transition: background-color 150ms ease-out; } .lc-mobile-header-button:hover { background: var(--accent); color: var(--accent-foreground); } .lc-mobile-header-title { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; } .lc-mobile-header-title span { font-size: 0.875rem; font-weight: 600; color: var(--foreground); } .lc-mobile-header-title small { font-size: 0.75rem; color: var(--muted-foreground); } .lc-mobile-action-row { display: flex; gap: 0.5rem; align-items: center; } .lc-mobile-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .lc-sheet-handle { width: 2.5rem; height: 0.25rem; border-radius: 9999px; background: var(--muted-foreground); margin: 0.5rem auto; opacity: 0.5; } /* ============================================================ * BENTO GRID (mobile dashboard) -- legacy fallback * ============================================================ */ .lc-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .lc-bento-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); } .lc-bento-card-hero { grid-column: span 2; flex-direction: row; align-items: center; background: var(--primary); color: var(--primary-foreground); border-color: transparent; } /* ============================================================ * SIDEBAR / TOPBAR LAYOUT (positioning only -- visuals via header * component shadcn classes) * ============================================================ */ .lc-app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 16rem; z-index: 30; display: none; } @media (min-width: 1024px) { .lc-app-sidebar { display: flex; } } .lc-app-topbar { position: sticky; top: 0; z-index: 20; display: none; } @media (min-width: 1024px) { .lc-app-topbar { display: flex; margin-left: 16rem; } } .lc-app-main { min-height: 100vh; } /* ============================================================ * LOGO TILE (login) * ============================================================ */ .im-logo-tile { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--primary); color: var(--primary-foreground); box-shadow: 0 4px 12px color-mix(in oklch, var(--primary) 30%, transparent); } .im-bg-surface { background: var(--background); } /* ============================================================ * STATUS DOTS / TOGGLES * ============================================================ */ .im-status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--muted-foreground); } .im-status-dot-on { background: oklch(55% 0.16 145); } .im-toggle { display: inline-flex; width: 2.5rem; height: 1.5rem; border-radius: 9999px; background: var(--muted); position: relative; cursor: pointer; transition: background-color 150ms ease-out; } .im-toggle-on { background: var(--primary); } .im-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--card); transition: transform 150ms ease-out; } .im-toggle-on::after { transform: translateX(1rem); } /* ============================================================ * LEGACY v3-TAILWIND COMPONENT CLASSES * ============================================================ * The previous Tailwind v3 application.tailwind.css defined .btn, * .btn-primary/secondary/danger/outline/ghost, .card, .card-hover, * .card-header/title/body/footer, .badge + variants, .form-input, * .form-select, .form-textarea via @apply directives. Those got * dropped when v3 config + entry point were deleted in Phase 1. * Many views (incident_reports/index, admin tables, etc) still * reference them. Redefine here using shadcn variables so markup * keeps rendering without per-view rewrites. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; border: 1px solid transparent; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .btn-sm { height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; } .btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; } .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .btn-primary:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); } .btn-secondary { background: var(--background); color: var(--foreground); border-color: var(--border); } .btn-secondary:hover { background: var(--accent); color: var(--accent-foreground); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); } .btn-danger { background: var(--destructive); color: var(--primary-foreground); } .btn-danger:hover { background: color-mix(in oklch, var(--destructive) 90%, transparent); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: color-mix(in oklch, var(--primary) 8%, transparent); } .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); overflow: hidden; } .card-hover { transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; } .card-hover:hover { background: var(--accent); border-color: color-mix(in oklch, var(--border) 50%, var(--foreground)); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); } .card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); } .card-title { font-size: 1rem; font-weight: 600; color: var(--foreground); } .card-body { padding: 1.25rem 1.5rem; } .card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 50%, var(--card)); } .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; border: 1px solid var(--border); } .badge-positive { background: oklch(55% 0.16 145 / 0.1); color: oklch(45% 0.16 145); border-color: oklch(55% 0.16 145 / 0.4); } .badge-warning { background: oklch(70% 0.18 80 / 0.1); color: oklch(50% 0.16 80); border-color: oklch(70% 0.18 80 / 0.4); } .badge-negative { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 40%, transparent); } .badge-info { background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); border-color: color-mix(in oklch, var(--primary) 40%, transparent); } .badge-neutral, .badge-default { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } .badge-accent { background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); border-color: color-mix(in oklch, var(--primary) 30%, transparent); } .form-input, .form-select, .form-textarea { display: flex; width: 100%; height: 2.5rem; padding: 0.5rem 0.75rem; background: var(--background); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); font-size: 1rem; line-height: 1.5; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .form-textarea { height: auto; min-height: 6rem; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); } .form-input::placeholder, .form-textarea::placeholder { color: var(--muted-foreground); } /* ============================================================ * LEGACY ORNAMENTAL CLASSES -- neutralise to nothing (in case any * markup still references them) so they don't paint glass / particles. * ============================================================ */ /* Volumetric / particles canvases are decorative — kill any leftover * markup that paints them. .web-management-surface and * .mobile-reporting-surface are SEMANTIC ROUTING MARKERS on ; * they must not be hidden. */ .lc-volumetric, .lc-volumetric-mobile, .lc-particles { display: none !important; } .text-gradient-accent, .text-gradient-primary, .bg-gradient-accent, .bg-gradient-primary, .bg-gradient-success, .bg-gradient-warning, .bg-gradient-danger, .bg-gradient-info, .glow-accent { background: var(--card) !important; color: var(--card-foreground) !important; box-shadow: none !important; -webkit-text-fill-color: currentColor !important; } /* ============================================================ * SIDEBAR OFFSET (must be at end of file) * ============================================================ * On lg+ screens the fixed sidebar takes 16rem on the left. Push * descendant content blocks right so they aren't clipped behind it. * Placed last so it wins the cascade against earlier shorthand * `padding: 1rem` rules in this same file. */ @media (min-width: 1024px) { .web-management-surface { --app-sidebar-width: 16rem; --app-content-max: 80rem; --app-content-x: 2rem; --app-content-top: 5rem; --app-content-bottom: 3rem; } .web-management-surface .lc-app-topbar { position: fixed; top: 0; right: 0; left: var(--app-sidebar-width); width: auto; margin-left: 0; } .web-management-surface .lc-app-topbar [aria-label="Search"] { width: min(100%, 28rem); max-width: 28rem; } .web-management-surface .lc-app-sidebar ~ main, .web-management-surface .lc-app-sidebar + main, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav), .web-management-surface .page-content, .web-management-surface .im-mobile-shell > main, .web-management-surface .lc-mobile-shell > main, .web-management-surface .im-mobile-shell > .pt-16, .web-management-surface .lc-mobile-shell > .pt-16, .web-management-surface .im-mobile-shell .lc-mobile-screen, .web-management-surface .im-mobile-shell .lc-mobile-form-screen, .web-management-surface .lc-mobile-shell .lc-mobile-screen, .web-management-surface .lc-mobile-shell .lc-mobile-form-screen, .web-management-surface body > main:not([data-no-sidebar]), .web-management-surface .lc-app-main:not([data-no-sidebar]) { width: calc(100% - var(--app-sidebar-width)) !important; min-height: 100vh; margin-left: var(--app-sidebar-width) !important; padding: var(--app-content-top) var(--app-content-x) var(--app-content-bottom) !important; } .web-management-surface .lc-app-sidebar ~ main > div, .web-management-surface .lc-app-sidebar + main > div, .web-management-surface .lc-app-sidebar ~ div:not(.mobile-nav) > *, .web-management-surface .page-content > *, .web-management-surface .lc-app-main > div, .web-management-surface main > div, .web-management-surface .im-mobile-shell > .pt-16 > *, .web-management-surface .lc-mobile-shell > .pt-16 > * { width: 100%; max-width: var(--app-content-max); margin-left: auto !important; margin-right: auto !important; } }