/* Dark mode overrides — applied when html.dark is set */
html.dark {
  color-scheme: dark;
}

/* Global backgrounds and text */
html.dark body {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

/* ─── Tailwind background overrides ─── */

/* White / gray backgrounds → dark navy */
html.dark .bg-white { background-color: #16213e !important; }
html.dark .bg-gray-50,
html.dark .bg-gray-100 { background-color: #1a1a2e !important; }
html.dark .bg-gray-200 { background-color: #2a2a4a !important; }
html.dark .bg-gray-300 { background-color: #3a3a5a !important; }

/* Coloured -50 / -100 backgrounds → dark tinted versions */
html.dark .bg-amber-50,
html.dark .bg-yellow-50 { background-color: #2a2210 !important; }
html.dark .bg-amber-100,
html.dark .bg-yellow-100 { background-color: #33290d !important; }
html.dark .bg-red-50 { background-color: #2a1015 !important; }
html.dark .bg-red-100 { background-color: #331018 !important; }
html.dark .bg-green-50 { background-color: #0a2a15 !important; }
html.dark .bg-green-100 { background-color: #0d3318 !important; }
html.dark .bg-blue-50 { background-color: #0a1a2e !important; }
html.dark .bg-blue-100 { background-color: #0d2040 !important; }
html.dark .bg-purple-50 { background-color: #1a0a2e !important; }
html.dark .bg-purple-100 { background-color: #2a1745 !important; }
html.dark .bg-orange-50 { background-color: #2a1a0a !important; }
html.dark .bg-orange-100 { background-color: #33200d !important; }
html.dark .bg-indigo-50 { background-color: #0f0a2e !important; }
html.dark .bg-indigo-100 { background-color: #150d40 !important; }
html.dark .bg-emerald-50 { background-color: #0a2a1a !important; }
html.dark .bg-emerald-100 { background-color: #0d3320 !important; }
html.dark .bg-teal-50 { background-color: #0a2a25 !important; }
html.dark .bg-teal-100 { background-color: #0d332e !important; }
html.dark .bg-sky-50 { background-color: #0a1e2e !important; }
html.dark .bg-sky-100 { background-color: #0d2840 !important; }
html.dark .bg-rose-50 { background-color: #2a0a15 !important; }
html.dark .bg-rose-100 { background-color: #330d1a !important; }
html.dark .bg-slate-50 { background-color: #1a1a2e !important; }
html.dark .bg-slate-100 { background-color: #1e1e38 !important; }

/* -200 backgrounds → slightly lighter dark */
html.dark [class*="bg-"][class*="-200"] {
  filter: brightness(0.35) saturate(1.2);
}

/* ─── Text color overrides ─── */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 { color: #e0e0e0 !important; }
html.dark .text-gray-600,
html.dark .text-gray-500 { color: #b0b0c0 !important; }
html.dark .text-gray-400 { color: #8888a0 !important; }

/* Coloured text stays readable — lighten slightly */
html.dark .text-amber-800 { color: #f59e0b !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-blue-700 { color: #60a5fa !important; }
html.dark .text-purple-700 { color: #c084fc !important; }
html.dark .text-orange-700 { color: #fb923c !important; }

/* ─── Border overrides ─── */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 { border-color: #2a2a4a !important; }
html.dark .border-amber-200,
html.dark .border-amber-300 { border-color: #554400 !important; }
html.dark .border-red-200 { border-color: #550020 !important; }
html.dark .border-green-200 { border-color: #005520 !important; }
html.dark .border-blue-200 { border-color: #003355 !important; }

/* ─── Shadows ─── */
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-sm,
html.dark .shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; }

/* ─── Form inputs ─── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark textarea,
html.dark select {
  background-color: #1f1f3a !important;
  color: #e0e0e0 !important;
  border-color: #4a4a6a !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #7070a0 !important;
}

/* ─── School dashboard specific ─── */
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-xl { background-color: #16213e !important; }

/* School nav bar */
html.dark nav.bg-white { background-color: #16213e !important; }
html.dark nav .text-gray-600 { color: #b0b0c0 !important; }
html.dark nav .hover\:bg-gray-100:hover { background-color: #2a2a4a !important; }
html.dark .bg-gray-200.mr-3 { background-color: #3a3a5a !important; }

/* Billing banner */
html.dark .bg-amber-50.border { background-color: #2a2210 !important; }

/* ─── Dashboard cards (SEAGSuccess.css pages) ─── */
html.dark .dashboard-card,
html.dark .dashboardcontainer {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
  border-color: #2a2a4a !important;
}

html.dark .dashboard-header h1,
html.dark .dashboard-header h2,
html.dark .section-title,
html.dark .recommended-heading {
  color: #f0e6ff !important;
}

html.dark .dashboard-table th {
  background-color: #2a1745 !important;
  color: #e0e0e0 !important;
}

html.dark .dashboard-table td {
  background-color: #16213e !important;
  color: #d0d0d0 !important;
  border-color: #2a2a4a !important;
}

html.dark .cta-link,
html.dark .dashboard-cta-button {
  color: #ff6600 !important;
}

html.dark .subscription-alert {
  background-color: #2a1745 !important;
  color: #f0e6ff !important;
}

/* ─── Quiz/test pages ─── */
html.dark .question-card,
html.dark .quiz-container,
html.dark .results-container {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
}

html.dark .option-btn,
html.dark .answer-option {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
  border-color: #3a3a5a !important;
}

html.dark .option-btn:hover,
html.dark .answer-option:hover {
  background-color: #2a1745 !important;
}

/* ─── Lesson pages ─── */
html.dark .lesson-content,
html.dark .lesson-card {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
}

/* ─── Modals / drawers ─── */
html.dark [class*="modal"],
html.dark [x-show] > div.bg-white {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
}

/* Fixed overlay backgrounds */
html.dark .fixed.inset-0.bg-black\/30,
html.dark .fixed.inset-0.bg-black\/50 {
  background-color: rgba(0,0,0,0.6) !important;
}

/* ─── Tables ─── */
html.dark table {
  color: #e0e0e0 !important;
}
html.dark th {
  background-color: #2a1745 !important;
  color: #f0e6ff !important;
}
html.dark td {
  border-color: #2a2a4a !important;
}
html.dark tr:hover td {
  background-color: #1e1e3a !important;
}

/* ─── Parent portal ─── */
html.dark .child-tile,
html.dark .stat-card {
  background-color: #16213e !important;
  color: #e0e0e0 !important;
}

/* ─── Dividers ─── */
html.dark .divide-gray-100 > * + *,
html.dark .divide-gray-200 > * + * {
  border-color: #2a2a4a !important;
}
html.dark hr { border-color: #2a2a4a !important; }

/* ─── Badges / pills ─── */
html.dark .rounded-full[class*="bg-"][class*="-100"] {
  opacity: 0.9;
}

/* ─── Override inline style backgrounds ─── */
/* Many school pages use style="background:#f5f0fa" etc — must use !important on structural selectors */
html.dark [style*="background:#f5f0fa"],
html.dark [style*="background: #f5f0fa"],
html.dark [style*="background:#faf7fd"],
html.dark [style*="background:#f0ebf8"],
html.dark [style*="background:#e0d5f0"] {
  background: #2a1745 !important;
}

html.dark [style*="background:#fffbeb"],
html.dark [style*="background:#fef3c7"] {
  background: #2a2210 !important;
}

html.dark [style*="background:#eff6ff"],
html.dark [style*="background:#dbeafe"] {
  background: #0d2040 !important;
}

html.dark [style*="background:#fafafa"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background:#f3f4f6"] {
  background: #1e1e38 !important;
}

html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"] {
  background: #16213e !important;
}

/* Gradient headers in dashboard */
html.dark [style*="background:linear-gradient(to right,#f5f0fa"],
html.dark [style*="background:linear-gradient(to right, #f5f0fa"] {
  background: linear-gradient(to right, #2a1745, #1e1040) !important;
}

/* Border colors from inline styles */
html.dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #e5e7eb"] {
  border-color: #2a2a4a !important;
}
html.dark [style*="border:1px solid #e9d8f9"],
html.dark [style*="border:1px solid #d8ccea"],
html.dark [style*="border-color:#fde68a"] {
  border-color: #3a2a5a !important;
}

/* Inline text colors */
html.dark [style*="color:#3c1053"] {
  color: #c084fc !important;
}

/* Inline bg buttons should keep their purple */
html.dark [style*="background:#3c1053"] {
  background: #3c1053 !important;
}

/* ─── Print: always light ─── */
@media print {
  html.dark body,
  html.dark .dashboard-card,
  html.dark .bg-white,
  html.dark nav.bg-white {
    background-color: #fff !important;
    color: #000 !important;
  }
  html.dark [class*="bg-"][class*="-50"],
  html.dark [class*="bg-"][class*="-100"] {
    filter: none !important;
  }
}