/* Enable class-based dark mode (add/remove 'dark' class on ) */ @custom-variant dark (&:where(.dark, .dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-sans); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); } /* Light mode */ :root { --radius: 0.625rem; /* Font family */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Brand reds */ --brand-red-500: oklch(0.58 0.24 25); --brand-red-700: oklch(0.42 0.22 25); --brand-red-50: oklch(0.96 0.04 25); /* Semantic informing colors */ --semantic-success: oklch(0.55 0.15 165); --semantic-error: oklch(0.5 0.2 20); --semantic-warning: oklch(0.82 0.18 75); --semantic-accent-blue: oklch(0.65 0.18 260); --semantic-purple: oklch(0.52 0.18 290); /* Neutrals light */ --neutral-900: oklch(0.15 0.02 260); --neutral-600: oklch(0.45 0.02 260); --neutral-400: oklch(0.7 0.02 260); --neutral-200: oklch(0.88 0.01 260); --neutral-100: oklch(0.96 0.005 260); --neutral-50: oklch(0.98463 0.00181 249.248); --neutral-0: oklch(1 0 0); --primary-gradient-left: oklch(53.081% 0.19688 19.524); --primary-gradient-right: oklch(45.801% 0.16835 18.755); --background: var(--neutral-50); --foreground: var(--neutral-900); --card: var(--neutral-0); --card-foreground: var(--neutral-900); --popover: var(--neutral-0); --popover-foreground: var(--neutral-900); --primary: var(--brand-red-500); --primary-foreground: var(--neutral-0); --secondary: var(--neutral-100); --secondary-foreground: var(--neutral-900); --muted: var(--neutral-100); --muted-foreground: var(--neutral-600); --accent: var(--semantic-accent-blue); --accent-foreground: var(--neutral-0); --destructive: var(--semantic-error); --destructive-subtle: color-mix(in srgb, var(--destructive) 15%, transparent); --border: var(--neutral-200); --input: var(--neutral-200); --ring: var(--brand-red-500); --chart-1: var(--semantic-success); --chart-2: var(--semantic-warning); --chart-3: var(--semantic-error); --chart-4: var(--semantic-accent-blue); --chart-5: var(--semantic-purple); --sidebar: var(--neutral-0); --sidebar-foreground: var(--neutral-900); --sidebar-primary: var(--brand-red-500); --sidebar-primary-foreground: var(--neutral-0); --sidebar-accent: var(--neutral-100); --sidebar-accent-foreground: var(--neutral-900); --sidebar-border: var(--neutral-200); --sidebar-ring: var(--brand-red-500); /* Chart */ --chart-validated: oklch(72.276% 0.19199 149.6); --chart-pending: oklch(76.858% 0.1646 70.075); /* Status badges */ --status-validated: oklch(69.588% 0.14907 162.508); --status-pending: oklch(88.98% 0.13901 89.51); --status-rejected: oklch(64.244% 0.238 27.201); --status-absent: oklch(83.896% 0.12514 337.626); --status-future: oklch(97% 0.01 260); --status-weekend: oklch(95% 0.01 260); --status-modified: #fb923c; --status-validated-text: oklch(55.522% 0.10378 166.117); --status-pending-text: oklch(70.733% 0.15024 71.178); --status-rejected-text: oklch(41.763% 0.15153 10.687); --status-absent-text: oklch(40% 0.1 350); --status-future-text: oklch(50% 0.01 260); --status-weekend-text: oklch(45% 0.01 260); /* CRA-48: Check-in status (amber) */ --status-checkin: oklch(78% 0.17 75); --status-checkin-text: oklch(38% 0.12 60); --border: oklch(92.758% 0.00592 264.656); --muted-variant-two: oklch(98.511% 0.00011 271.152); --search-input: oklch(98.511% 0.00011 271.152); /* Assignment type badges */ --assignment-on-site: oklch(94% 0.06 55); --assignment-on-site-text: oklch(48% 0.16 50); --assignment-in-house: oklch(93% 0.05 210); --assignment-in-house-text: oklch(42% 0.12 210); /* KPI borders */ --kpi-border-validated: oklch(69.588% 0.14907 162.508); --kpi-border-pending: oklch(76.858% 0.1646 70.075); /* KPI shadows */ --shadow-kpi-pending: 0 10px 25px -5px rgba(245, 158, 11, 0.08); --shadow-kpi-validated: 0 10px 25px -5px rgba(34, 197, 94, 0.08); --shadow-kpi-active: 0 10px 25px -5px rgba(107, 33, 168, 0.08); --shadow-kpi-consultants: 0 10px 25px -5px rgba(59, 130, 246, 0.08); /* ─── KPI card icon colors — LIGHT MODE ─────────────────────────────────── Pending → orange #F59E0B (Tailwind amber-400) Validated → green #16A34A (Tailwind green-600) Active → purple #6B21A8 Consultants → blue #3B82F6 ─────────────────────────────────────────────────────────────────────────── */ --icon-bg-pending: #f59e0b1a; --icon-stroke-pending: #f59e0b; --icon-border-pending: #f59e0b; --icon-bg-validated: #16a34a1a; --icon-stroke-validated: #16a34a; --icon-border-validated: #16a34a; --icon-bg-active: #6b21a81a; --icon-stroke-active: #6b21a8; --icon-border-active: #6b21a8; --icon-bg-consultants: #3b82f61a; --icon-stroke-consultants: #3b82f6; --icon-border-consultants: #3b82f6; /* Button gradient tokens */ --btn-validate-from: #166534; --btn-validate-to: #15803d; } /* Dark mode overrides */ .dark { --background: oklch(0.11 0.015 260); --foreground: oklch(0.94 0.008 260); --card: oklch(0.145 0.02 260); --card-foreground: var(--foreground); --popover: oklch(0.145 0.02 260); --popover-foreground: var(--foreground); --primary: oklch(0.74 0.21 25); --primary-foreground: oklch(0.98 0.005 25); --secondary: oklch(0.2 0.015 260); --secondary-foreground: var(--foreground); --muted: oklch(0.17 0.015 260); --muted-foreground: oklch(0.68 0.015 260); --accent: oklch(0.8 0.15 260); --accent-foreground: oklch(0.98 0.005 260); --destructive: oklch(0.7 0.18 20); --border: oklch(0.28 0.02 260); --input: oklch(0.22 0.02 260); --ring: oklch(0.74 0.21 25); --chart-1: oklch(0.7 0.18 165); --chart-2: oklch(0.9 0.19 75); --chart-3: oklch(0.74 0.2 20); --chart-4: oklch(0.84 0.18 260); --chart-5: oklch(0.72 0.19 290); --sidebar: oklch(0.13 0.015 260); --sidebar-foreground: oklch(0.94 0.008 260); --sidebar-primary: oklch(0.74 0.21 25); --sidebar-primary-foreground: oklch(0.98 0.005 25); --sidebar-accent: oklch(0.22 0.02 260); --sidebar-accent-foreground: oklch(0.94 0.008 260); --sidebar-border: oklch(0.28 0.02 260); --sidebar-ring: oklch(0.74 0.21 25); /* Chart */ --chart-validated: oklch(78% 0.16 165); --chart-pending: oklch(88% 0.16 80); /* Status badges – brighter in dark */ --status-validated: oklch(78% 0.16 165); --status-pending: oklch(88% 0.16 80); --status-rejected: oklch(78% 0.16 25); --status-absent: oklch(82% 0.12 350); --status-future: oklch(22% 0.01 260); --status-weekend: oklch(28% 0.01 260); --status-modified: oklch(78% 0.19 55); --status-validated-text: oklch(98% 0.01 165); --status-pending-text: oklch(98% 0.01 80); --status-rejected-text: oklch(98% 0.01 25); --status-absent-text: oklch(98% 0.01 350); --status-future-text: oklch(85% 0.01 260); --status-weekend-text: oklch(80% 0.01 260); /* CRA-48: Check-in status (amber – brighter in dark) */ --status-checkin: oklch(88% 0.17 75); --status-checkin-text: oklch(95% 0.05 75); --muted-variant-two: var(--muted); --search-input: var(--muted); /* Assignment type badges */ --assignment-on-site: oklch(32% 0.09 55); --assignment-on-site-text: oklch(84% 0.17 70); --assignment-in-house: oklch(24% 0.07 210); --assignment-in-house-text: oklch(76% 0.14 200); /* KPI borders */ --kpi-border-validated: oklch(78% 0.16 165); --kpi-border-pending: oklch(88% 0.16 80); /* KPI shadows */ --shadow-kpi-pending: 0 10px 25px -5px rgba(245, 158, 11, 0.15); --shadow-kpi-validated: 0 10px 25px -5px rgba(34, 197, 94, 0.15); --shadow-kpi-active: 0 10px 25px -5px rgba(167, 103, 217, 0.15); --shadow-kpi-consultants: 0 10px 25px -5px rgba(96, 165, 250, 0.15); /* ─── KPI card icon colors — DARK MODE ──────────────────────────────────── All colors brightened to ~70-82% lightness so they pop on dark surfaces. Pending → amber-400 ~#FBBF24 Validated → green-400 ~#4ADE80 Active → purple-400 ~#C084FC Consultants → blue-400 ~#60A5FA ─────────────────────────────────────────────────────────────────────────── */ --icon-bg-pending: oklch(82% 0.17 75 / 0.18); --icon-stroke-pending: oklch(82% 0.17 75); --icon-border-pending: oklch(82% 0.17 75); --icon-bg-validated: oklch(75% 0.18 155 / 0.18); --icon-stroke-validated: oklch(75% 0.18 155); --icon-border-validated: oklch(75% 0.18 155); --icon-bg-active: oklch(72% 0.19 304 / 0.18); --icon-stroke-active: oklch(72% 0.19 304); --icon-border-active: oklch(72% 0.19 304); --icon-bg-consultants: oklch(70% 0.19 258 / 0.18); --icon-stroke-consultants: oklch(70% 0.19 258); --icon-border-consultants: oklch(70% 0.19 258); /* Button gradient tokens */ --btn-validate-from: oklch(55% 0.17 155); --btn-validate-to: oklch(62% 0.18 155); } html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); min-height: 100vh; } @layer base { * { @apply border-border outline-ring/50; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } p, h1, h2, h3, h4, h5, h6, button, input, textarea, select { font-family: var(--font-sans); } } .no-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .no-scrollbar::-webkit-scrollbar-track { background: var(--background); border-radius: 10px; } .no-scrollbar::-webkit-scrollbar-thumb { background: var(--foreground); border-radius: 10px; border: 2px solid var(--background); } .no-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); } .no-scrollbar { scrollbar-width: thin; scrollbar-color: var(--foreground) var(--background); } .gradient-text { background: linear-gradient( to right, var(--primary-gradient-left), var(--primary-gradient-right) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-transition { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #sun-icon { display: block; } #moon-icon { display: none; } .dark #sun-icon { display: none; } .dark #moon-icon { display: block; } .logo-cra-light { display: block; } .dark .logo-cra-light { display: none; } .logo-cra-dark { display: none; } .dark .logo-cra-dark { display: block; } input { color-scheme: light; } .dark input { color-scheme: dark; } .input-checkbox-base { width: 20px; height: 20px; } .input-checkbox-small { width: 16px; height: 16px; } /* Themed checkbox */ .input-checkbox { appearance: none; -webkit-appearance: none; border: 2px solid var(--border); border-radius: 6px; background-color: var(--card); transition: all 0.15s ease; position: relative; cursor: pointer; flex-shrink: 0; } .input-checkbox:hover { border-color: var(--primary); } .input-checkbox:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); } .input-checkbox:checked { background-color: var(--primary); border-color: var(--primary); } .input-checkbox-base:checked::after { width: 6px; height: 12px; } .input-checkbox-small:checked::after { width: 3px; height: 6px; } .input-checkbox:checked::after { content: ""; position: absolute; left: 5px; top: 1px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .input-checkbox:disabled { opacity: 0.6; cursor: not-allowed; } /* Themed radio button */ .input-radio { appearance: none; -webkit-appearance: none; border: 2px solid var(--border); border-radius: 50%; background-color: var(--card); transition: all 0.15s ease; position: relative; cursor: pointer; flex-shrink: 0; } .input-radio:hover { border-color: var(--primary); } .input-radio:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); } .input-radio:checked { background-color: var(--primary); border-color: var(--primary); } .input-radio:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background-color: white; } .input-radio:disabled { opacity: 0.6; cursor: not-allowed; } .input-radio-small { width: 14px; height: 14px; } .input-radio-base { width: 18px; height: 18px; }