@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%;
}