/* ─────────────────────────────────────────────────────────────────────────────
   Global dark theme.

   The app's light palette is expressed with Tailwind utility classes (bg-white,
   text-gray-900, border-gray-200 …). Rather than adding a `dark:` variant to every
   one of them — which would silently miss any page added later — this stylesheet
   remaps the light palette once, at the highest practical specificity, whenever
   <html> carries the `dark` class. Every page therefore themes automatically,
   including pages not yet written.

   Page-specific CSS (e.g. the topbar) still wins where it needs to, because those
   rules are scoped more narrowly or declared later.
   ───────────────────────────────────────────────────────────────────────────── */

.dark body,
.dark main,
.dark .bg-gray-50 { background-color: #0f172a !important; }

.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-gray-100 { background-color: #263449 !important; }
.dark .bg-gray-200 { background-color: #334155 !important; }
.dark .bg-slate-50 { background-color: #0f172a !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }

/* Soft alert / badge surfaces keep their hue but drop to a dark tint. */
.dark .bg-red-50 { background-color: rgba(239, 68, 68, .12) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, .18) !important; }
.dark .bg-green-50 { background-color: rgba(34, 197, 94, .12) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, .18) !important; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12) !important; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18) !important; }
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, .12) !important; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, .18) !important; }
.dark .bg-primary-light { background-color: rgba(221, 51, 51, .18) !important; }

/* Text */
.dark .text-gray-900,
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-400 { color: #94a3b8 !important; }

.dark .text-red-600 { color: #fca5a5 !important; }
.dark .text-red-700 { color: #fca5a5 !important; }
.dark .text-red-800 { color: #fecaca !important; }
.dark .text-green-600 { color: #86efac !important; }
.dark .text-green-700 { color: #86efac !important; }
.dark .text-green-800 { color: #bbf7d0 !important; }
.dark .text-amber-600 { color: #fcd34d !important; }
.dark .text-amber-800 { color: #fde68a !important; }
.dark .text-primary { color: #f87171 !important; }

/* Borders & dividers */
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-blue-200,
.dark .border-primary-subtle,
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-700,
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* Form controls */
.dark input,
.dark select,
.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark input::placeholder,
.dark textarea::placeholder { color: #64748b !important; }
.dark select option { background-color: #1e293b; color: #e2e8f0; }

/* Row hover */
.dark .hover\:bg-gray-50:hover { background-color: #263449 !important; }

/* Scrollbars inside themed surfaces */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: #0f172a; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* The welcome / marketing page keeps its own light-on-dark gradient. */
.dark .welcome-hero { color-scheme: dark; }

/* ─────────────────────────────────────────────────────────────────────────────
   Safety net.

   The rules above cover Tailwind's named light palette. These catch the patterns
   that are easy to reach for and would otherwise stay bright in dark mode:
   shadows on light cards, gradient stops, and arbitrary hex values.

   Prefer a named class (bg-white, text-gray-900) over bg-[#fff] — named classes
   are remapped automatically, arbitrary values are not.
   ───────────────────────────────────────────────────────────────────────────── */

/* Shadows read as heavy grey smudges on a dark surface. */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl { box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important; }
.dark .shadow-primary { box-shadow: 0 4px 12px rgba(0, 0, 0, .35) !important; }

/* Gradient stops. */
.dark .from-white { --tw-gradient-from: #1e293b var(--tw-gradient-from-position) !important; }
.dark .via-white { --tw-gradient-via: #1e293b var(--tw-gradient-via-position) !important; }
.dark .to-white { --tw-gradient-to: #1e293b var(--tw-gradient-to-position) !important; }
.dark .from-gray-50 { --tw-gradient-from: #0f172a var(--tw-gradient-from-position) !important; }
.dark .from-gray-100 { --tw-gradient-from: #1e293b var(--tw-gradient-from-position) !important; }
.dark .to-gray-50 { --tw-gradient-to: #0f172a var(--tw-gradient-to-position) !important; }
.dark .to-gray-100 { --tw-gradient-to: #1e293b var(--tw-gradient-to-position) !important; }
.dark .to-slate-900 { --tw-gradient-to: #020617 var(--tw-gradient-to-position) !important; }

/* Common arbitrary hex values (bg-[#fff], bg-[#ffffff] and friends). */
.dark [class*="bg-[#fff]"] { background-color: #1e293b !important; }
.dark [class*="bg-[#FFF]"] { background-color: #1e293b !important; }
.dark [class*="text-[#fff]"],
.dark [class*="text-[#FFF]"] { color: #e2e8f0 !important; }
.dark [class*="bg-[#f"] { background-color: #1e293b !important; }
.dark [class*="bg-[#F"] { background-color: #1e293b !important; }

/* Tabular figures stay legible. */
.dark .tabular-nums { font-variant-numeric: tabular-nums; }

/* Images and avatars that are pure white would glare — soften slightly. */
.dark img[src$=".png"] { opacity: .92; }