CapaKraken/apps/web/src/app/globals.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: 244 246 250;
  --surface-card: 255 255 255;
  --surface-elevated: 249 250 252;
  --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: 12 17 29;
  --surface-card: 16 23 38;
  --surface-elevated: 24 33 52;
  --surface-input: 18 28 45;
  --border-subtle: 41 55 78;
  --border-input: 61 79 110;
  --text-primary: 237 242 247;
  --text-secondary: 196 207 223;
  --text-muted: 147 161 185;
  --text-very-muted: 118 133 161;
  --shadow-soft: 2 6 23 / 0.38;
  --shadow-strong: 2 6 23 / 0.65;
}

/* ─── 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(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
      linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
    text-rendering: optimizeLegibility;
  }

  .dark body {
    background-image:
      radial-gradient(circle at top left, rgb(var(--accent-600) / 0.16), transparent 26rem),
      linear-gradient(180deg, rgb(15 23 42 / 0.35), transparent 28rem);
  }

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

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid rgb(var(--accent-500));
    outline-offset: 2px;
  }

  /* 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(45 51 71) !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;
}

.text-gray-900 {
  color: rgb(var(--text-primary)) !important;
}

.text-gray-800,
.text-gray-700 {
  color: rgb(var(--text-secondary)) !important;
}

.text-gray-600,
.text-gray-500 {
  color: rgb(var(--text-muted)) !important;
}

.text-gray-400 {
  color: rgb(var(--text-very-muted)) !important;
}

.border-gray-200 {
  border-color: rgb(var(--border-subtle)) !important;
}

.border-gray-300 {
  border-color: rgb(var(--border-input)) !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 alternating / hover */
.dark .hover\:bg-gray-50:hover {
  background-color: rgb(var(--surface-elevated)) !important;
}

.dark .divide-gray-100 > * + * {
  border-color: rgb(var(--border-subtle)) !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-gray-100 {
  background-color: rgb(var(--surface-elevated)) !important;
}
.dark .text-gray-700 {
  color: rgb(var(--text-secondary)) !important;
}
.dark .bg-purple-100 {
  background-color: rgb(76 29 149 / 0.4) !important;
}
.dark .text-purple-700 {
  color: rgb(196 181 253) !important;
}
.dark .bg-amber-50 {
  background-color: rgb(120 53 15) !important;
}

/* Modal / overlay */
.dark .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6) !important;
}

@layer components {
  .app-surface {
    @apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/90;
  }

  .app-surface-strong {
    @apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
  }

  .app-toolbar {
    @apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur;
    @apply dark:border-gray-700 dark:bg-gray-900/90 dark:shadow-black/20;
  }

  .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;
    @apply focus:border-brand-500 focus:ring-4 focus:ring-brand-100/80;
    @apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-brand-900/50;
  }

  .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;
    @apply dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:focus:ring-brand-900/50;
  }

  .app-label {
    @apply mb-1.5 block text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400;
  }

  .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 dark:text-gray-100;
  }

  .app-page-subtitle {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }

  .app-data-table {
    @apply overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/95;
  }

  .app-data-table table {
    @apply min-w-full text-sm;
  }

  .app-data-table thead tr {
    @apply bg-gray-50/90 dark:bg-gray-800/80;
  }

  .app-data-table th {
    @apply text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400;
  }
}

/* ─── 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;
    @apply transition-all duration-150 ease-in-out;
  }

  .allocation-block:hover {
    @apply ring-2 ring-white ring-offset-1;
  }

  .allocation-block.dragging {
    @apply opacity-75 shadow-lg scale-105;
  }
}

/* ─── 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;
}