Hartmut
e4bf121b33
- Unify Saturday+Sunday into single isWeekend flag (header + grid lines) - Replace hardcoded amber vacation bar/tooltip colors with brand-* classes - Add global accent-color for checkboxes and radio buttons via CSS variable - Update VACATION_TIMELINE_COLORS/BORDER to use brand palette (SICK stays red) - Vacation-only tooltip uses neutral dark surface with brand accent border Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
908 lines
31 KiB
CSS
908 lines
31 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ─── Accent Color CSS Variables ────────────────────────────────────────────
|
|
Each data-accent value sets the --accent-* RGB triplets consumed by Tailwind
|
|
brand-* classes. The format is "R G B" (no commas) for Tailwind opacity support.
|
|
*/
|
|
|
|
/* Sky Blue (default) */
|
|
:root,
|
|
[data-accent="sky"] {
|
|
--accent-50: 240 249 255;
|
|
--accent-100: 224 242 254;
|
|
--accent-200: 186 230 253;
|
|
--accent-300: 125 211 252;
|
|
--accent-400: 56 189 248;
|
|
--accent-500: 14 165 233;
|
|
--accent-600: 2 132 199;
|
|
--accent-700: 3 105 161;
|
|
--accent-800: 7 89 133;
|
|
--accent-900: 12 74 110;
|
|
}
|
|
|
|
[data-accent="indigo"] {
|
|
--accent-50: 238 242 255;
|
|
--accent-100: 224 231 255;
|
|
--accent-200: 199 210 254;
|
|
--accent-300: 165 180 252;
|
|
--accent-400: 129 140 248;
|
|
--accent-500: 99 102 241;
|
|
--accent-600: 79 70 229;
|
|
--accent-700: 67 56 202;
|
|
--accent-800: 55 48 163;
|
|
--accent-900: 49 46 129;
|
|
}
|
|
|
|
[data-accent="violet"] {
|
|
--accent-50: 245 243 255;
|
|
--accent-100: 237 233 254;
|
|
--accent-200: 221 214 254;
|
|
--accent-300: 196 181 253;
|
|
--accent-400: 167 139 250;
|
|
--accent-500: 139 92 246;
|
|
--accent-600: 124 58 237;
|
|
--accent-700: 109 40 217;
|
|
--accent-800: 91 33 182;
|
|
--accent-900: 76 29 149;
|
|
}
|
|
|
|
[data-accent="emerald"] {
|
|
--accent-50: 236 253 245;
|
|
--accent-100: 209 250 229;
|
|
--accent-200: 167 243 208;
|
|
--accent-300: 110 231 183;
|
|
--accent-400: 52 211 153;
|
|
--accent-500: 16 185 129;
|
|
--accent-600: 5 150 105;
|
|
--accent-700: 4 120 87;
|
|
--accent-800: 6 95 70;
|
|
--accent-900: 6 78 59;
|
|
}
|
|
|
|
[data-accent="rose"] {
|
|
--accent-50: 255 241 242;
|
|
--accent-100: 255 228 230;
|
|
--accent-200: 254 205 211;
|
|
--accent-300: 253 164 175;
|
|
--accent-400: 251 113 133;
|
|
--accent-500: 244 63 94;
|
|
--accent-600: 225 29 72;
|
|
--accent-700: 190 18 60;
|
|
--accent-800: 159 18 57;
|
|
--accent-900: 136 19 55;
|
|
}
|
|
|
|
[data-accent="amber"] {
|
|
--accent-50: 255 251 235;
|
|
--accent-100: 254 243 199;
|
|
--accent-200: 253 230 138;
|
|
--accent-300: 252 211 77;
|
|
--accent-400: 251 191 36;
|
|
--accent-500: 245 158 11;
|
|
--accent-600: 217 119 6;
|
|
--accent-700: 180 83 9;
|
|
--accent-800: 146 64 14;
|
|
--accent-900: 120 53 15;
|
|
}
|
|
|
|
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */
|
|
|
|
:root {
|
|
--surface-page: 252 252 253;
|
|
--surface-card: 255 255 255;
|
|
--surface-elevated: 250 250 251;
|
|
--surface-input: 255 255 255;
|
|
--border-subtle: 219 224 232;
|
|
--border-input: 197 205 218;
|
|
--text-primary: 18 24 38;
|
|
--text-secondary: 71 85 105;
|
|
--text-muted: 100 116 139;
|
|
--text-very-muted: 148 163 184;
|
|
--shadow-soft: 15 23 42 / 0.05;
|
|
--shadow-strong: 15 23 42 / 0.12;
|
|
}
|
|
|
|
/* ─── Dark Theme Surface Variables ──────────────────────────────────────── */
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--surface-page: 10 10 10;
|
|
--surface-card: 17 17 17;
|
|
--surface-elevated: 24 24 24;
|
|
--surface-input: 14 14 14;
|
|
--border-subtle: 38 38 38;
|
|
--border-input: 58 58 58;
|
|
--text-primary: 240 241 243;
|
|
--text-secondary: 205 207 210;
|
|
--text-muted: 158 160 164;
|
|
--text-very-muted: 130 132 136;
|
|
--shadow-soft: 0 0 0 / 0.45;
|
|
--shadow-strong: 0 0 0 / 0.75;
|
|
}
|
|
|
|
/* ─── Base Layer: Apply variables to body ────────────────────────────────── */
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: rgb(var(--surface-page));
|
|
color: rgb(var(--text-primary));
|
|
transition:
|
|
background-color 0.15s ease,
|
|
color 0.15s ease;
|
|
background-image:
|
|
radial-gradient(ellipse 80% 40% at 50% -5%, rgb(var(--accent-300) / 0.04) 0%, transparent 55%),
|
|
radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.10), transparent 50%),
|
|
radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.06), transparent 50%),
|
|
linear-gradient(180deg, rgb(255 255 255 / 0.60), transparent 20rem);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.dark body {
|
|
background-image:
|
|
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--accent-400), 0.07) 0%, transparent 60%),
|
|
radial-gradient(circle at top left, rgb(var(--accent-600) / 0.16), transparent 26rem),
|
|
linear-gradient(180deg, rgb(10 10 12 / 0.35), transparent 28rem);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
accent-color: rgb(var(--accent-500));
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
[data-page-title="true"] {
|
|
font-family: var(--font-display), system-ui, sans-serif;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
/* Smooth transition for theme changes */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-property: background-color, border-color, color;
|
|
transition-duration: 0.1s;
|
|
transition-timing-function: ease;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea,
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid rgb(var(--accent-500));
|
|
outline-offset: 2px;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid rgb(var(--accent-500));
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 3px rgb(var(--accent-500) / 0.12);
|
|
}
|
|
|
|
/* Scrollbar styling for dark mode */
|
|
.dark ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: rgb(var(--surface-card));
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: rgb(var(--border-subtle));
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
/* ─── Dark Mode Overrides for Common Tailwind Patterns ──────────────────── */
|
|
/* These override the most commonly used utility classes in the app */
|
|
|
|
.dark .bg-white {
|
|
background-color: rgb(var(--surface-card)) !important;
|
|
}
|
|
|
|
.bg-white {
|
|
box-shadow: 0 18px 42px -28px rgb(var(--shadow-strong));
|
|
}
|
|
|
|
.dark .bg-gray-50 {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
.dark .bg-gray-100 {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
.dark .bg-gray-200 {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
.dark .bg-gray-300 {
|
|
background-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
|
|
.dark .bg-gray-400 {
|
|
background-color: rgb(var(--border-input)) !important;
|
|
}
|
|
|
|
.dark .bg-gray-500 {
|
|
background-color: rgb(80 80 80) !important;
|
|
}
|
|
|
|
.dark .bg-gray-600 {
|
|
background-color: rgb(var(--border-input)) !important;
|
|
}
|
|
|
|
.dark .border-gray-100 {
|
|
border-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
|
|
.dark .border-gray-200 {
|
|
border-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
|
|
.dark .border-gray-300 {
|
|
border-color: rgb(var(--border-input)) !important;
|
|
}
|
|
|
|
.dark .text-gray-900 {
|
|
color: rgb(var(--text-primary)) !important;
|
|
}
|
|
|
|
.dark .text-gray-800 {
|
|
color: rgb(var(--text-primary)) !important;
|
|
}
|
|
|
|
.dark .text-gray-700 {
|
|
color: rgb(var(--text-secondary)) !important;
|
|
}
|
|
|
|
.dark .text-gray-600 {
|
|
color: rgb(var(--text-secondary)) !important;
|
|
}
|
|
|
|
.dark .text-gray-500 {
|
|
color: rgb(var(--text-muted)) !important;
|
|
}
|
|
|
|
.dark .text-gray-400 {
|
|
color: rgb(var(--text-very-muted)) !important;
|
|
}
|
|
|
|
/* Dark variant text overrides — catches className="dark:text-gray-*" */
|
|
.dark .dark\:text-gray-100 { color: rgb(var(--text-primary)) !important; }
|
|
.dark .dark\:text-gray-200 { color: rgb(var(--text-secondary)) !important; }
|
|
.dark .dark\:text-gray-300 { color: rgb(var(--text-muted)) !important; }
|
|
.dark .dark\:text-gray-400 { color: rgb(var(--text-very-muted)) !important; }
|
|
|
|
.dark input,
|
|
.dark select,
|
|
.dark textarea {
|
|
background-color: rgb(var(--surface-input));
|
|
border-color: rgb(var(--border-input));
|
|
color: rgb(var(--text-primary));
|
|
}
|
|
|
|
.dark input::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: rgb(var(--text-muted));
|
|
}
|
|
|
|
/* Table row / interactive hover */
|
|
.dark .hover\:bg-gray-50:hover,
|
|
.dark .hover\:bg-gray-100:hover,
|
|
.dark .hover\:bg-gray-200:hover {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
/* Status badge adjustments in dark mode - keep them readable */
|
|
.dark .bg-green-100 {
|
|
background-color: rgb(6 78 59 / 0.4) !important;
|
|
}
|
|
.dark .text-green-700 {
|
|
color: rgb(52 211 153) !important;
|
|
}
|
|
.dark .bg-yellow-100 {
|
|
background-color: rgb(120 53 15 / 0.4) !important;
|
|
}
|
|
.dark .text-yellow-700 {
|
|
color: rgb(251 191 36) !important;
|
|
}
|
|
.dark .bg-blue-100 {
|
|
background-color: rgb(30 58 138 / 0.4) !important;
|
|
}
|
|
.dark .text-blue-700 {
|
|
color: rgb(96 165 250) !important;
|
|
}
|
|
.dark .bg-red-100 {
|
|
background-color: rgb(127 29 29 / 0.4) !important;
|
|
}
|
|
.dark .text-red-600 {
|
|
color: rgb(248 113 113) !important;
|
|
}
|
|
.dark .text-red-700 {
|
|
color: rgb(248 113 113) !important;
|
|
}
|
|
.dark .bg-purple-100 {
|
|
background-color: rgb(76 29 149 / 0.4) !important;
|
|
}
|
|
.dark .text-purple-700 {
|
|
color: rgb(196 181 253) !important;
|
|
}
|
|
|
|
/* Status/alert -50 backgrounds — covers ~250+ instances across the codebase */
|
|
.dark .bg-red-50 { background-color: rgb(127 29 29 / 0.15) !important; }
|
|
.dark .bg-green-50 { background-color: rgb(6 78 59 / 0.15) !important; }
|
|
.dark .bg-blue-50 { background-color: rgb(30 58 138 / 0.15) !important; }
|
|
.dark .bg-yellow-50 { background-color: rgb(120 53 15 / 0.15) !important; }
|
|
.dark .bg-amber-50 { background-color: rgb(120 53 15 / 0.15) !important; }
|
|
.dark .bg-purple-50 { background-color: rgb(76 29 149 / 0.15) !important; }
|
|
.dark .bg-indigo-50 { background-color: rgb(49 46 129 / 0.15) !important; }
|
|
.dark .bg-orange-50 { background-color: rgb(124 45 18 / 0.15) !important; }
|
|
.dark .bg-brand-50 { background-color: rgb(var(--accent-900) / 0.15) !important; }
|
|
.dark .bg-emerald-50 { background-color: rgb(6 78 59 / 0.15) !important; }
|
|
|
|
/* Colored border overrides */
|
|
.dark .border-red-200 { border-color: rgb(127 29 29 / 0.4) !important; }
|
|
.dark .border-green-200 { border-color: rgb(6 78 59 / 0.4) !important; }
|
|
.dark .border-blue-200 { border-color: rgb(30 58 138 / 0.4) !important; }
|
|
.dark .border-yellow-200 { border-color: rgb(120 53 15 / 0.4) !important; }
|
|
.dark .border-amber-200 { border-color: rgb(120 53 15 / 0.4) !important; }
|
|
.dark .border-purple-200 { border-color: rgb(76 29 149 / 0.4) !important; }
|
|
.dark .border-indigo-200 { border-color: rgb(49 46 129 / 0.4) !important; }
|
|
.dark .border-brand-200 { border-color: rgb(var(--accent-700) / 0.4) !important; }
|
|
|
|
/* Hover -50/-100 colored states */
|
|
.dark .hover\:bg-red-50:hover { background-color: rgb(127 29 29 / 0.20) !important; }
|
|
.dark .hover\:bg-red-100:hover { background-color: rgb(127 29 29 / 0.30) !important; }
|
|
.dark .hover\:bg-green-50:hover { background-color: rgb(6 78 59 / 0.20) !important; }
|
|
.dark .hover\:bg-blue-50:hover { background-color: rgb(30 58 138 / 0.20) !important; }
|
|
.dark .hover\:bg-amber-50:hover { background-color: rgb(120 53 15 / 0.20) !important; }
|
|
|
|
/* Missing text color overrides */
|
|
.dark .text-amber-700 { color: rgb(251 191 36) !important; }
|
|
.dark .text-amber-600 { color: rgb(251 191 36) !important; }
|
|
.dark .text-orange-600 { color: rgb(251 146 60) !important; }
|
|
.dark .text-green-600 { color: rgb(52 211 153) !important; }
|
|
.dark .text-emerald-700 { color: rgb(52 211 153) !important; }
|
|
.dark .text-brand-700 { color: rgb(var(--accent-400)) !important; }
|
|
|
|
/* Interactive text — action links, errors, close buttons */
|
|
.dark .text-blue-600 { color: rgb(96 165 250) !important; }
|
|
.dark .text-blue-500 { color: rgb(96 165 250) !important; }
|
|
.dark .text-red-500 { color: rgb(248 113 113) !important; }
|
|
.dark .text-red-400 { color: rgb(251 113 133) !important; }
|
|
.dark .text-indigo-600 { color: rgb(129 140 248) !important; }
|
|
.dark .text-indigo-700 { color: rgb(129 140 248) !important; }
|
|
|
|
/* Hover states for action links */
|
|
.dark .hover\:text-blue-800:hover { color: rgb(147 197 253) !important; }
|
|
.dark .hover\:text-red-700:hover { color: rgb(252 165 165) !important; }
|
|
.dark .hover\:text-red-600:hover { color: rgb(248 113 113) !important; }
|
|
.dark .hover\:text-indigo-800:hover { color: rgb(165 180 252) !important; }
|
|
|
|
/* Native <option> elements — best-effort across browsers */
|
|
:is(.dark) option {
|
|
background-color: rgb(var(--surface-card));
|
|
color: rgb(var(--text-primary));
|
|
}
|
|
|
|
/* Divide overrides */
|
|
.dark .divide-gray-50 > * + *,
|
|
.dark .divide-gray-100 > * + *,
|
|
.dark .dark\:divide-gray-800 > * + * { border-color: rgb(var(--border-subtle)) !important; }
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
COMPREHENSIVE DARK SURFACE NORMALIZATION
|
|
Tailwind's gray-700/800/900 and slate-* palette is blue-shifted.
|
|
In dark mode we remap all of these to our neutral CSS variable surfaces.
|
|
|
|
Tailwind v3 with darkMode:"class" generates selectors like:
|
|
.dark .dark\:bg-gray-800 { background-color: rgb(31 41 55 / ...) }
|
|
We override them here with neutral surfaces + !important.
|
|
|
|
Two forms per class:
|
|
1. Plain — matches className="bg-gray-800" (no variant)
|
|
2. dark\: — matches className="dark:bg-gray-800" (Tailwind dark variant)
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Light grays: gray-50 through gray-200 → elevated surface ──────────── */
|
|
.dark .dark\:bg-gray-50,
|
|
.dark .dark\:bg-gray-100,
|
|
.dark .dark\:bg-gray-200 {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
/* ── Mid grays: gray-300 through gray-600 → border/mid tones ──────────── */
|
|
.dark .dark\:bg-gray-300 {
|
|
background-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
.dark .dark\:bg-gray-400,
|
|
.dark .dark\:bg-gray-600 {
|
|
background-color: rgb(var(--border-input)) !important;
|
|
}
|
|
.dark .dark\:bg-gray-500 {
|
|
background-color: rgb(80 80 80) !important;
|
|
}
|
|
|
|
/* ── Elevated surface: gray-700, gray-800, slate-700, slate-800 ─────────── */
|
|
.dark .bg-gray-700, .dark .dark\:bg-gray-700,
|
|
.dark .bg-gray-800, .dark .dark\:bg-gray-800,
|
|
.dark .bg-slate-700, .dark .dark\:bg-slate-700,
|
|
.dark .bg-slate-800, .dark .dark\:bg-slate-800 {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
|
|
/* ── Card surface: gray-900, gray-950, slate-900, slate-950 ──────────────── */
|
|
.dark .bg-gray-900, .dark .dark\:bg-gray-900,
|
|
.dark .bg-gray-950, .dark .dark\:bg-gray-950,
|
|
.dark .bg-slate-900, .dark .dark\:bg-slate-900,
|
|
.dark .bg-slate-950, .dark .dark\:bg-slate-950 {
|
|
background-color: rgb(var(--surface-card)) !important;
|
|
}
|
|
|
|
/* ── Opacity variants: elevated surface (/95 → /20) ────────────────────── */
|
|
.dark .bg-gray-700\/95, .dark .dark\:bg-gray-700\/95,
|
|
.dark .bg-gray-700\/80, .dark .dark\:bg-gray-700\/80,
|
|
.dark .bg-gray-700\/70, .dark .dark\:bg-gray-700\/70,
|
|
.dark .bg-gray-700\/60, .dark .dark\:bg-gray-700\/60,
|
|
.dark .bg-gray-700\/50, .dark .dark\:bg-gray-700\/50,
|
|
.dark .bg-gray-700\/40, .dark .dark\:bg-gray-700\/40,
|
|
.dark .bg-gray-800\/95, .dark .dark\:bg-gray-800\/95,
|
|
.dark .bg-gray-800\/80, .dark .dark\:bg-gray-800\/80,
|
|
.dark .bg-gray-800\/70, .dark .dark\:bg-gray-800\/70,
|
|
.dark .bg-gray-800\/60, .dark .dark\:bg-gray-800\/60,
|
|
.dark .bg-gray-800\/50, .dark .dark\:bg-gray-800\/50,
|
|
.dark .bg-gray-800\/40, .dark .dark\:bg-gray-800\/40,
|
|
.dark .bg-gray-800\/30, .dark .dark\:bg-gray-800\/30,
|
|
.dark .bg-slate-700\/95, .dark .dark\:bg-slate-700\/95,
|
|
.dark .bg-slate-700\/80, .dark .dark\:bg-slate-700\/80,
|
|
.dark .bg-slate-700\/70, .dark .dark\:bg-slate-700\/70,
|
|
.dark .bg-slate-700\/60, .dark .dark\:bg-slate-700\/60,
|
|
.dark .bg-slate-700\/50, .dark .dark\:bg-slate-700\/50,
|
|
.dark .bg-slate-800\/95, .dark .dark\:bg-slate-800\/95,
|
|
.dark .bg-slate-800\/80, .dark .dark\:bg-slate-800\/80,
|
|
.dark .bg-slate-800\/70, .dark .dark\:bg-slate-800\/70,
|
|
.dark .bg-slate-800\/60, .dark .dark\:bg-slate-800\/60,
|
|
.dark .bg-slate-800\/50, .dark .dark\:bg-slate-800\/50 {
|
|
background-color: rgb(var(--surface-elevated) / 0.9) !important;
|
|
}
|
|
|
|
/* ── Opacity variants: card surface (/95 → /20) ─────────────────────────── */
|
|
.dark .bg-gray-900\/95, .dark .dark\:bg-gray-900\/95,
|
|
.dark .bg-gray-900\/70, .dark .dark\:bg-gray-900\/70,
|
|
.dark .bg-gray-900\/60, .dark .dark\:bg-gray-900\/60,
|
|
.dark .bg-gray-900\/50, .dark .dark\:bg-gray-900\/50,
|
|
.dark .bg-gray-900\/40, .dark .dark\:bg-gray-900\/40,
|
|
.dark .bg-gray-900\/30, .dark .dark\:bg-gray-900\/30,
|
|
.dark .bg-gray-900\/25, .dark .dark\:bg-gray-900\/25,
|
|
.dark .bg-gray-900\/20, .dark .dark\:bg-gray-900\/20,
|
|
.dark .bg-slate-900\/95, .dark .dark\:bg-slate-900\/95,
|
|
.dark .bg-slate-900\/70, .dark .dark\:bg-slate-900\/70,
|
|
.dark .bg-slate-900\/60, .dark .dark\:bg-slate-900\/60,
|
|
.dark .bg-slate-900\/50, .dark .dark\:bg-slate-900\/50,
|
|
.dark .bg-slate-900\/40, .dark .dark\:bg-slate-900\/40,
|
|
.dark .bg-slate-900\/30, .dark .dark\:bg-slate-900\/30,
|
|
.dark .bg-gray-950\/96, .dark .dark\:bg-gray-950\/96,
|
|
.dark .bg-gray-950\/95, .dark .dark\:bg-gray-950\/95,
|
|
.dark .bg-gray-950\/60, .dark .dark\:bg-gray-950\/60,
|
|
.dark .bg-gray-950\/50, .dark .dark\:bg-gray-950\/50,
|
|
.dark .bg-gray-950\/45, .dark .dark\:bg-gray-950\/45,
|
|
.dark .bg-gray-950\/40, .dark .dark\:bg-gray-950\/40,
|
|
.dark .bg-slate-950\/95, .dark .dark\:bg-slate-950\/95,
|
|
.dark .bg-slate-950\/70, .dark .dark\:bg-slate-950\/70,
|
|
.dark .bg-slate-950\/60, .dark .dark\:bg-slate-950\/60,
|
|
.dark .bg-slate-950\/40, .dark .dark\:bg-slate-950\/40 {
|
|
background-color: rgb(var(--surface-card) / 0.9) !important;
|
|
}
|
|
|
|
/* ── Hover state overrides ──────────────────────────────────────────────── */
|
|
.dark .hover\:bg-gray-700:hover, .dark .dark\:hover\:bg-gray-700:hover,
|
|
.dark .hover\:bg-gray-800:hover, .dark .dark\:hover\:bg-gray-800:hover,
|
|
.dark .hover\:bg-slate-700:hover, .dark .dark\:hover\:bg-slate-700:hover,
|
|
.dark .hover\:bg-slate-800:hover, .dark .dark\:hover\:bg-slate-800:hover {
|
|
background-color: rgb(var(--surface-elevated)) !important;
|
|
}
|
|
.dark .hover\:bg-gray-900:hover, .dark .dark\:hover\:bg-gray-900:hover,
|
|
.dark .hover\:bg-slate-900:hover, .dark .dark\:hover\:bg-slate-900:hover {
|
|
background-color: rgb(var(--surface-card)) !important;
|
|
}
|
|
|
|
/* ── Hover opacity variants ────────────────────────────────────────────── */
|
|
.dark .dark\:hover\:bg-gray-800\/50:hover,
|
|
.dark .dark\:hover\:bg-gray-800\/30:hover,
|
|
.dark .dark\:hover\:bg-gray-700\/50:hover {
|
|
background-color: rgb(var(--surface-elevated) / 0.5) !important;
|
|
}
|
|
|
|
/* ── Border normalization ───────────────────────────────────────────────── */
|
|
.dark .border-gray-600, .dark .dark\:border-gray-600,
|
|
.dark .border-gray-700, .dark .dark\:border-gray-700,
|
|
.dark .border-gray-800, .dark .dark\:border-gray-800,
|
|
.dark .border-slate-600, .dark .dark\:border-slate-600,
|
|
.dark .border-slate-700, .dark .dark\:border-slate-700,
|
|
.dark .border-slate-800, .dark .dark\:border-slate-800 {
|
|
border-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
|
|
/* Border opacity variants */
|
|
.dark .dark\:border-gray-700\/60,
|
|
.dark .dark\:border-gray-700\/40 {
|
|
border-color: rgb(var(--border-subtle) / 0.6) !important;
|
|
}
|
|
|
|
/* Sidebar panel — overrides the hardcoded hex values in AppShell */
|
|
:is(.dark) .sidebar-panel {
|
|
background-color: rgb(var(--surface-card) / 0.92) !important;
|
|
border-right-color: rgb(var(--border-subtle)) !important;
|
|
border-bottom-color: rgb(var(--border-subtle)) !important;
|
|
}
|
|
|
|
/* Modal / overlay */
|
|
.dark .shadow-2xl {
|
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
|
|
}
|
|
|
|
@layer components {
|
|
/* Light mode only — dark overrides are ALL outside @layer to ensure they win */
|
|
|
|
.app-surface {
|
|
@apply rounded-2xl border border-gray-200 bg-white;
|
|
background-image: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%);
|
|
--tw-shadow: 0 1px 3px rgb(var(--accent-400) / 0.06), 0 4px 16px rgb(var(--accent-400) / 0.04);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
|
|
.app-surface-strong {
|
|
@apply rounded-3xl border border-gray-200 bg-white;
|
|
background-image: linear-gradient(145deg, #ffffff 0%, #fdfdfd 100%);
|
|
--tw-shadow: 0 2px 8px rgb(var(--accent-400) / 0.06), 0 8px 24px rgb(var(--accent-400) / 0.04);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
}
|
|
|
|
.app-toolbar {
|
|
@apply sticky top-0 z-10 rounded-2xl border p-4;
|
|
background: rgb(255 255 255 / 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-color: rgb(var(--accent-400) / 0.12);
|
|
box-shadow: 0 1px 3px rgb(var(--accent-400) / 0.06);
|
|
}
|
|
|
|
.app-input {
|
|
@apply w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition;
|
|
}
|
|
|
|
.app-input:focus {
|
|
border-color: rgb(var(--accent-500));
|
|
box-shadow: 0 0 0 3px rgba(var(--accent-400), 0.25), 0 1px 2px rgba(0,0,0,0.05);
|
|
outline: none;
|
|
}
|
|
|
|
.app-select {
|
|
@apply rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none transition;
|
|
@apply focus:border-brand-500 focus:ring-4 focus:ring-brand-100/80;
|
|
}
|
|
|
|
.app-label {
|
|
@apply mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500;
|
|
}
|
|
|
|
.app-page {
|
|
@apply p-6 md:p-8;
|
|
}
|
|
|
|
.app-page-header {
|
|
@apply flex flex-col gap-2 md:flex-row md:items-end md:justify-between;
|
|
}
|
|
|
|
.app-page-title {
|
|
@apply font-display text-3xl font-semibold text-gray-900;
|
|
}
|
|
|
|
.app-page-subtitle {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
.app-data-table {
|
|
@apply rounded-2xl border border-gray-200 bg-white shadow-sm;
|
|
overflow: clip;
|
|
}
|
|
|
|
.app-data-table table {
|
|
@apply min-w-full text-sm;
|
|
}
|
|
|
|
.app-data-table thead tr {
|
|
@apply bg-gray-50/90;
|
|
}
|
|
|
|
.app-data-table th {
|
|
@apply text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500;
|
|
}
|
|
|
|
/* ─── Semantic action classes (light mode only) ──────────────────────── */
|
|
|
|
.app-action-edit {
|
|
@apply text-xs font-medium cursor-pointer transition-colors;
|
|
color: rgb(59 130 246);
|
|
}
|
|
.app-action-edit:hover {
|
|
color: rgb(37 99 235);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.app-action-delete {
|
|
@apply text-xs font-medium cursor-pointer transition-colors;
|
|
color: rgb(239 68 68);
|
|
}
|
|
.app-action-delete:hover {
|
|
color: rgb(185 28 28);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.app-action-danger-btn {
|
|
@apply rounded px-2 py-1 text-sm font-medium cursor-pointer transition-colors;
|
|
color: rgb(239 68 68);
|
|
}
|
|
.app-action-danger-btn:hover {
|
|
color: rgb(185 28 28);
|
|
background-color: rgb(254 242 242);
|
|
}
|
|
}
|
|
|
|
/* ─── Dark overrides for component classes — ALL outside @layer ──────────────
|
|
Rules inside @layer components are lower priority than unlayered styles.
|
|
Placing :is(.dark) rules here (unlayered) ensures they always win.
|
|
─────────────────────────────────────────────────────────────────────────── */
|
|
|
|
:is(.dark) .app-surface {
|
|
background-color: rgb(var(--surface-card));
|
|
background-image: linear-gradient(135deg, rgb(var(--text-primary) / 0.045) 0%, rgb(var(--text-primary) / 0.015) 100%);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-color: rgb(var(--border-subtle));
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(var(--border-subtle) / 0.5), inset 0 1px 0 rgb(var(--text-primary) / 0.07);
|
|
}
|
|
|
|
:is(.dark) .app-surface-strong {
|
|
background-color: rgb(var(--surface-card));
|
|
background-image: linear-gradient(135deg, rgb(var(--text-primary) / 0.055) 0%, rgb(var(--text-primary) / 0.018) 100%);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-color: rgb(var(--border-subtle));
|
|
box-shadow: 0 4px 16px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(var(--border-subtle) / 0.6), inset 0 1px 0 rgb(var(--text-primary) / 0.08);
|
|
}
|
|
|
|
:is(.dark) .app-toolbar {
|
|
background: rgb(var(--surface-card) / 0.82);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-color: rgb(var(--border-subtle) / 0.6);
|
|
box-shadow: 0 1px 0 rgb(var(--text-primary) / 0.04);
|
|
}
|
|
|
|
:is(.dark) .app-input {
|
|
background-color: rgb(var(--surface-input));
|
|
border-color: rgb(var(--border-input));
|
|
color: rgb(var(--text-primary));
|
|
}
|
|
|
|
:is(.dark) .app-input:focus {
|
|
border-color: rgb(var(--accent-400));
|
|
box-shadow: 0 0 0 3px rgba(var(--accent-400), 0.20), inset 0 0 8px rgba(var(--accent-400), 0.08);
|
|
}
|
|
|
|
:is(.dark) .app-select {
|
|
background-color: rgb(var(--surface-input));
|
|
border-color: rgb(var(--border-input));
|
|
color: rgb(var(--text-primary));
|
|
}
|
|
|
|
:is(.dark) .app-select:focus {
|
|
border-color: rgb(var(--accent-400));
|
|
box-shadow: 0 0 0 3px rgb(var(--accent-400) / 0.20);
|
|
}
|
|
|
|
:is(.dark) .app-label {
|
|
color: rgb(var(--text-very-muted));
|
|
}
|
|
|
|
:is(.dark) .app-page-title {
|
|
background-image: linear-gradient(135deg, rgb(var(--accent-200)) 0%, rgb(var(--accent-100)) 50%, rgb(237 242 247) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
:is(.dark) .app-page-subtitle {
|
|
color: rgb(var(--text-muted));
|
|
}
|
|
|
|
:is(.dark) .app-data-table {
|
|
background-color: rgb(var(--surface-card));
|
|
border-color: rgb(var(--border-subtle));
|
|
box-shadow: none;
|
|
}
|
|
|
|
:is(.dark) .app-data-table thead tr {
|
|
background-color: rgb(var(--surface-elevated));
|
|
}
|
|
|
|
:is(.dark) .app-data-table th {
|
|
color: rgb(var(--text-very-muted));
|
|
}
|
|
|
|
:is(.dark) .app-action-edit { color: rgb(96 165 250); }
|
|
:is(.dark) .app-action-edit:hover { color: rgb(147 197 253); }
|
|
:is(.dark) .app-action-delete { color: rgb(248 113 113); }
|
|
:is(.dark) .app-action-delete:hover { color: rgb(252 165 165); }
|
|
:is(.dark) .app-action-danger-btn { color: rgb(248 113 113); }
|
|
:is(.dark) .app-action-danger-btn:hover {
|
|
color: rgb(252 165 165);
|
|
background-color: rgb(127 29 29 / 0.2);
|
|
}
|
|
|
|
/* ─── Timeline utilities (unchanged) ────────────────────────────────────── */
|
|
|
|
@layer utilities {
|
|
.timeline-row {
|
|
@apply flex border-b border-gray-100 hover:bg-gray-50/50;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.allocation-block {
|
|
@apply absolute rounded-md text-xs font-medium px-2 py-1 cursor-pointer select-none;
|
|
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, opacity 0.15s ease-in-out;
|
|
}
|
|
|
|
.allocation-block:hover {
|
|
@apply ring-2 ring-white ring-offset-1 shadow-md;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.allocation-block.dragging {
|
|
@apply opacity-75 shadow-lg scale-105;
|
|
}
|
|
}
|
|
|
|
/* ─── Aurora: new keyframes ──────────────────────────────────────────────── */
|
|
@keyframes fadeSlideUp {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.96); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes glowPulse {
|
|
0%, 100% { box-shadow: 0 0 12px rgba(var(--accent-400), 0.3); }
|
|
50% { box-shadow: 0 0 24px rgba(var(--accent-400), 0.55); }
|
|
}
|
|
|
|
.animate-fade-slide-up {
|
|
animation: fadeSlideUp 0.12s ease-out both;
|
|
}
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.12s ease-out both;
|
|
}
|
|
.animate-glow-pulse {
|
|
animation: glowPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Overbooking blink animation ──────────────────────────────────────────── */
|
|
@keyframes overbooking-blink {
|
|
0%, 100% { background-color: rgba(239, 68, 68, 0); }
|
|
50% { background-color: rgba(239, 68, 68, 0.18); }
|
|
}
|
|
.dark .animate-overbooking-blink {
|
|
animation: overbooking-blink-dark 2s ease-in-out infinite;
|
|
}
|
|
@keyframes overbooking-blink-dark {
|
|
0%, 100% { background-color: rgba(239, 68, 68, 0); }
|
|
50% { background-color: rgba(239, 68, 68, 0.25); }
|
|
}
|
|
.animate-overbooking-blink {
|
|
animation: overbooking-blink 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Shimmer skeleton animation ─────────────────────────────────────────── */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.shimmer-skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--surface-card) 25%,
|
|
color-mix(in srgb, var(--text-very-muted) 8%, var(--surface-card)) 50%,
|
|
var(--surface-card) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
:is(.dark) .shimmer-skeleton {
|
|
background: linear-gradient(90deg, rgb(var(--text-primary) / 0.04) 0%, rgb(var(--text-primary) / 0.09) 50%, rgb(var(--text-primary) / 0.04) 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Table row stagger entrance (reuses fadeSlideUp keyframes) ──────────── */
|
|
.animate-row-enter {
|
|
animation: fadeSlideUp 0.12s ease-out both;
|
|
}
|
|
|
|
/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
|
|
.hover-lift {
|
|
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
|
|
}
|
|
.hover-lift:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(var(--accent-400), 0.18), 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
:is(.dark) .hover-lift:hover {
|
|
box-shadow: 0 6px 24px rgba(var(--accent-400), 0.22), 0 2px 8px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
/* ─── Smooth scroll + reduced-motion accessibility ────────────────────────── */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ─── Table row hover accent border ──────────────────────────────────────── */
|
|
.table-row-hover {
|
|
border-left: 2px solid transparent;
|
|
transition: border-color 100ms ease-out, background-color 100ms ease-out, transform 100ms ease-out, box-shadow 100ms ease-out;
|
|
}
|
|
.table-row-hover:hover {
|
|
border-left-color: rgb(var(--accent-400));
|
|
}
|
|
|
|
/* ─── Animated underline for action links ─────────────────────────────────── */
|
|
.link-hover-underline {
|
|
position: relative;
|
|
}
|
|
.link-hover-underline::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: currentColor;
|
|
transition: width 0.2s ease-out;
|
|
}
|
|
.link-hover-underline:hover::after {
|
|
width: 100%;
|
|
}
|