/*
 * Dark mode overrides — class-based (.dark on <html>)
 * Re-maps Tailwind utility classes to dark equivalents without touching templates.
 */

/* ── Base element & native UI ─────────────────────────────────────────── */

.dark {
  color-scheme: dark;
}

/* Default border color for bare `border`, `border-b`, `border-t` utilities */
.dark *,
.dark *::before,
.dark *::after {
  border-color: #334155; /* slate-700 */
}

/* Native form controls without explicit classes */
.dark input:not([class*="bg-"]),
.dark select:not([class*="bg-"]),
.dark textarea:not([class*="bg-"]) {
  background-color: #0f172a; /* slate-900 */
  color: #e2e8f0; /* slate-200 */
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b; /* slate-500 */
}

.dark input[class*="bg-white"],
.dark select[class*="bg-white"],
.dark textarea[class*="bg-white"] {
  background-color: #0f172a;
  color: #e2e8f0;
}

/* ── Surface backgrounds ──────────────────────────────────────────────── */

.dark .bg-gray-50 {
  background-color: #0f172a; /* slate-900 — page bg */
}
.dark .bg-gray-100 {
  background-color: #1e293b; /* slate-800 */
}
.dark .bg-white {
  background-color: #1e293b; /* slate-800 — card/panel surface */
}

.dark .bg-slate-50 {
  background-color: #1e293b;
}
.dark .bg-slate-100 {
  background-color: #334155; /* slate-700 */
}

/* ── Text — neutral ───────────────────────────────────────────────────── */

.dark .text-gray-900 {
  color: #f1f5f9; /* slate-100 */
}
.dark .text-gray-800 {
  color: #e2e8f0; /* slate-200 */
}
.dark .text-gray-700 {
  color: #cbd5e1; /* slate-300 */
}
.dark .text-gray-600 {
  color: #94a3b8; /* slate-400 */
}
.dark .text-gray-500 {
  color: #94a3b8; /* slate-400 */
}
.dark .text-gray-400 {
  color: #64748b; /* slate-500 */
}

.dark .text-slate-800 {
  color: #e2e8f0;
}
.dark .text-slate-700 {
  color: #cbd5e1;
}
.dark .text-slate-600 {
  color: #94a3b8;
}
.dark .text-slate-400 {
  color: #64748b;
}

/* ── Borders — neutral ────────────────────────────────────────────────── */

.dark .border-gray-300 {
  border-color: #334155; /* slate-700 */
}
.dark .border-gray-200 {
  border-color: #334155;
}
.dark .border-gray-100 {
  border-color: #1e293b; /* slate-800 */
}

.dark .border-slate-200 {
  border-color: #334155;
}

/* ── Dividers ─────────────────────────────────────────────────────────── */

.dark .divide-gray-200 > * + * {
  border-color: #334155;
}

/* ── Blue (primary / links) ───────────────────────────────────────────── */

.dark .text-blue-900 {
  color: #bfdbfe; /* blue-200 */
}
.dark .text-blue-800 {
  color: #93c5fd; /* blue-300 */
}
.dark .text-blue-700 {
  color: #60a5fa; /* blue-400 */
}
.dark .text-blue-600 {
  color: #60a5fa;
}
.dark .text-blue-500 {
  color: #3b82f6; /* blue-500 — keep */
}

.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1);
}
.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.15);
}
.dark .bg-blue-300 {
  background-color: rgba(59, 130, 246, 0.3);
}
/* bg-blue-600 / bg-blue-700 — primary buttons, keep as-is */

.dark .border-blue-100 {
  border-color: rgba(59, 130, 246, 0.2);
}
.dark .border-blue-200 {
  border-color: rgba(59, 130, 246, 0.3);
}
.dark .border-blue-300 {
  border-color: rgba(59, 130, 246, 0.4);
}

/* ── Green (success / active) ─────────────────────────────────────────── */

.dark .text-green-900 {
  color: #bbf7d0; /* green-200 */
}
.dark .text-green-800 {
  color: #86efac; /* green-300 */
}
.dark .text-green-700 {
  color: #4ade80; /* green-400 */
}
.dark .text-green-600 {
  color: #4ade80;
}
.dark .text-green-500 {
  color: #22c55e; /* keep */
}

.dark .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.1);
}
.dark .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15);
}

.dark .border-green-100 {
  border-color: rgba(34, 197, 94, 0.2);
}
.dark .border-green-200 {
  border-color: rgba(34, 197, 94, 0.3);
}
.dark .border-green-300 {
  border-color: rgba(34, 197, 94, 0.4);
}

/* ── Red (error / disabled) ───────────────────────────────────────────── */

.dark .text-red-800 {
  color: #fca5a5; /* red-300 */
}
.dark .text-red-700 {
  color: #f87171; /* red-400 */
}
.dark .text-red-600 {
  color: #f87171;
}
.dark .text-red-500 {
  color: #ef4444; /* keep */
}

.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1);
}
.dark .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.15);
}
.dark .bg-red-400 {
  background-color: rgba(239, 68, 68, 0.4);
}

.dark .border-red-100 {
  border-color: rgba(239, 68, 68, 0.2);
}
.dark .border-red-200 {
  border-color: rgba(239, 68, 68, 0.3);
}
.dark .border-red-300 {
  border-color: rgba(239, 68, 68, 0.4);
}

/* ── Amber / Yellow (warning) ─────────────────────────────────────────── */

.dark .text-amber-900 {
  color: #fde68a; /* amber-200 */
}
.dark .text-amber-800 {
  color: #fcd34d; /* amber-300 */
}
.dark .text-amber-700 {
  color: #fbbf24; /* amber-400 */
}
.dark .text-amber-500 {
  color: #f59e0b; /* keep */
}

.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1);
}
.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.15);
}

.dark .border-amber-100 {
  border-color: rgba(245, 158, 11, 0.2);
}
.dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.3);
}

.dark .text-yellow-700 {
  color: #facc15; /* yellow-400 */
}
.dark .text-yellow-600 {
  color: #eab308; /* keep */
}

.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.1);
}
.dark .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.15);
}

.dark .border-yellow-100 {
  border-color: rgba(234, 179, 8, 0.2);
}

/* ── Indigo ───────────────────────────────────────────────────────────── */

.dark .text-indigo-800 {
  color: #a5b4fc; /* indigo-300 */
}
.dark .text-indigo-700 {
  color: #818cf8; /* indigo-400 */
}
.dark .text-indigo-600 {
  color: #818cf8;
}

.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.1);
}
.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.15);
}

.dark .border-indigo-100 {
  border-color: rgba(99, 102, 241, 0.2);
}
.dark .border-indigo-200 {
  border-color: rgba(99, 102, 241, 0.3);
}

/* ── Purple ───────────────────────────────────────────────────────────── */

.dark .text-purple-700 {
  color: #c084fc; /* purple-400 */
}

.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.1);
}
.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.15);
}

.dark .border-purple-100 {
  border-color: rgba(168, 85, 247, 0.2);
}

/* ── Orange ───────────────────────────────────────────────────────────── */

.dark .text-orange-800 {
  color: #fdba74; /* orange-300 */
}
.dark .text-orange-700 {
  color: #fb923c; /* orange-400 */
}

.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1);
}

.dark .border-orange-100 {
  border-color: rgba(249, 115, 22, 0.2);
}

/* ── Hover variants ───────────────────────────────────────────────────── */

.dark .hover\:text-gray-900:hover {
  color: #f1f5f9;
}
.dark .hover\:text-blue-700:hover {
  color: #93c5fd; /* blue-300 */
}
.dark .hover\:bg-blue-50:hover {
  background-color: rgba(59, 130, 246, 0.15);
}
.dark .hover\:bg-red-50:hover {
  background-color: rgba(239, 68, 68, 0.15);
}
.dark .hover\:bg-green-50:hover {
  background-color: rgba(34, 197, 94, 0.15);
}
.dark .hover\:bg-gray-100:hover {
  background-color: rgba(148, 163, 184, 0.1);
}
.dark .hover\:bg-gray-50:hover {
  background-color: rgba(148, 163, 184, 0.07);
}
.dark .hover\:bg-slate-100:hover {
  background-color: rgba(148, 163, 184, 0.1);
}
.dark .hover\:text-slate-700:hover {
  color: #cbd5e1;
}

/* ── Odd/even row striping (variant-prefixed) ─────────────────────────── */

.dark .odd\:bg-white:nth-child(odd) {
  background-color: #1e293b; /* slate-800 — matches .dark .bg-white */
}
.dark .even\:bg-slate-50:nth-child(even) {
  background-color: #243044; /* slightly lighter than card surface */
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.dark table thead {
  color: #94a3b8; /* slate-400 */
}

.dark tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.05);
}

/* ── Code / mono ──────────────────────────────────────────────────────── */

.dark code,
.dark pre,
.dark .font-mono {
  background-color: rgba(15, 23, 42, 0.5);
}

/* ── Misc surface helpers ─────────────────────────────────────────────── */

.dark .bg-gray-700 {
  background-color: #334155;
}
.dark .bg-gray-600 {
  background-color: #475569;
}
.dark .bg-slate-300 {
  background-color: #475569;
}