/* ──────────────────────────────────────────────────────
   DARK MODE — Loaded separately from Tailwind to avoid purging
   ────────────────────────────────────────────────────── */

/* CSS Variables */
.dark {
  color-scheme: dark;

  --background: 0 0% 5%;
  --foreground: 0 0% 96%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 96%;
  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 96%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 55%;
  --accent: 0 0% 12%;
  --accent-foreground: 239 84% 67%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 239 84% 67%;

  --sidebar-bg: 0 0% 7%;
  --page-bg: 0 0% 5%;
  --surface: 0 0% 10%;
  --border-subtle: 0 0% 14%;
  --text-primary: 0 0% 96%;
  --text-secondary: 0 0% 70%;
  --text-muted: 0 0% 55%;
  --text-subtle: 0 0% 42%;
  --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  --shadow-elevated: 0 8px 30px rgba(0,0,0,.4);
  --shadow-button: 0 1px 2px rgba(99,102,241,.4);
}

/* Backgrounds */
.dark .bg-white { background-color: #141414 !important; }
.dark .bg-gray-50 { background-color: #111111 !important; }
.dark .bg-gray-100 { background-color: #1a1a1a !important; }
.dark .bg-gray-50\/50 { background-color: rgba(255,255,255,0.03) !important; }

/* Borders */
.dark .border-gray-200 { border-color: #2a2a2a !important; }
.dark .border-gray-100 { border-color: #222222 !important; }
.dark .border-gray-300 { border-color: #333333 !important; }

/* Text — primary / headings */
.dark .text-gray-900 { color: #f5f5f5 !important; }
.dark .text-gray-800 { color: #e5e5e5 !important; }
.dark .text-gray-700 { color: #d4d4d4 !important; }

/* Text — secondary */
.dark .text-gray-600 { color: #a3a3a3 !important; }
.dark .text-gray-500 { color: #8a8a8a !important; }

/* Text — muted */
.dark .text-gray-400 { color: #666666 !important; }
.dark .text-gray-300 { color: #555555 !important; }

/* Hover states */
.dark .hover\:bg-gray-50:hover { background-color: #1a1a1a !important; }
.dark .hover\:bg-gray-100:hover { background-color: #222222 !important; }
.dark .hover\:text-gray-600:hover { color: #d4d4d4 !important; }
.dark .hover\:text-gray-900:hover { color: #f5f5f5 !important; }
.dark .hover\:border-gray-300:hover { border-color: #444444 !important; }

/* Input & form elements */
.dark input, .dark textarea, .dark select {
  background-color: #1a1a1a;
  color: #e5e5e5;
  border-color: #333333;
}
.dark input::placeholder, .dark textarea::placeholder {
  color: #555555;
}
.dark input:focus, .dark textarea:focus, .dark select:focus {
  border-color: hsl(239 84% 67%);
}

/* Tables */
.dark table { color: #e5e5e5; }
.dark th { color: #a3a3a3 !important; }
.dark tr { border-color: #222222; }

/* Status badges — dark mode contrast boost */
.dark .bg-purple-100 { background-color: rgba(147,51,234,.2) !important; }
.dark .text-purple-800 { color: #c084fc !important; }
.dark .border-purple-300 { border-color: rgba(147,51,234,.35) !important; }

.dark .bg-slate-100 { background-color: rgba(148,163,184,.15) !important; }
.dark .text-slate-800 { color: #cbd5e1 !important; }
.dark .border-slate-300 { border-color: rgba(148,163,184,.3) !important; }

.dark .bg-blue-100 { background-color: rgba(59,130,246,.2) !important; }
.dark .text-blue-800 { color: #93c5fd !important; }
.dark .border-blue-300 { border-color: rgba(59,130,246,.35) !important; }

.dark .bg-amber-100 { background-color: rgba(245,158,11,.2) !important; }
.dark .text-amber-800 { color: #fcd34d !important; }
.dark .border-amber-300 { border-color: rgba(245,158,11,.35) !important; }

.dark .bg-emerald-100 { background-color: rgba(16,185,129,.2) !important; }
.dark .text-emerald-800 { color: #6ee7b7 !important; }
.dark .border-emerald-300 { border-color: rgba(16,185,129,.35) !important; }

.dark .bg-green-100 { background-color: rgba(34,197,94,.2) !important; }
.dark .text-green-800 { color: #86efac !important; }
.dark .border-green-400 { border-color: rgba(34,197,94,.35) !important; }

.dark .bg-sky-100 { background-color: rgba(14,165,233,.2) !important; }
.dark .text-sky-800 { color: #7dd3fc !important; }
.dark .border-sky-300 { border-color: rgba(14,165,233,.35) !important; }

/* Other colored elements */
.dark .bg-amber-50 { background-color: rgba(245,158,11,.15) !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .bg-blue-50 { background-color: rgba(59,130,246,.15) !important; }
.dark .text-blue-600 { color: #60a5fa !important; }
.dark .bg-red-50 { background-color: rgba(239,68,68,.15) !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-red-500 { color: #f87171 !important; }
.dark .text-red-400 { color: #ef4444 !important; }
.dark .bg-emerald-50 { background-color: rgba(16,185,129,.1) !important; }
.dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-emerald-500 { color: #34d399 !important; }
.dark .bg-indigo-50 { background-color: rgba(99,102,241,.15) !important; }
.dark .text-indigo-600 { color: #818cf8 !important; }
.dark .text-indigo-500 { color: #818cf8 !important; }
.dark .text-indigo-700 { color: #a5b4fc !important; }
.dark .bg-indigo-500\/10 { background-color: rgba(99,102,241,.15) !important; }

/* Hover on colored items */
.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.2) !important; }
.dark .hover\:text-indigo-600:hover { color: #a5b4fc !important; }
.dark .hover\:text-blue-600:hover { color: #93c5fd !important; }

/* Shadows */
.dark [class*="shadow-[0_1px_3px"] {
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2) !important;
}

/* Scrollbar */
.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
.dark ::-webkit-scrollbar-track { background: #111; }
.dark ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #444; }

/* Recharts */
.dark .recharts-cartesian-grid line { stroke: #2a2a2a !important; }
.dark .recharts-text { fill: #888 !important; }
.dark .recharts-tooltip-wrapper .recharts-default-tooltip {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
}

/* Sidebar progress card */
.dark .sidebar-progress-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 1) 0%, rgba(25, 25, 25, 0.8) 100%);
  border: 1px solid rgba(50, 50, 50, 0.8);
}

/* Topbar */
.dark .content-top-bar {
  background-color: rgba(20, 20, 20, 0.85);
}

/* Theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}