/* site-dark.css
 * Site-wide dark mode for pages extending base.html (home, review,
 * My Progress, analytics). Activated by the `act-dark` class on
 * <html> — the same class and localStorage key (act_dark_mode) the
 * test interface uses, so the preference follows the user everywhere.
 * Printable reports are standalone and intentionally stay light.
 *
 * Strategy: override the small set of light Tailwind utilities the
 * templates actually use, rather than restyling components.
 */

/* --- Page + surfaces -------------------------------------------------- */
html.act-dark body { background-color: #0f172a; color: #e5e7eb; }
html.act-dark .bg-gray-100 { background-color: #0f172a !important; }
html.act-dark .bg-white { background-color: #1f2937 !important; }
html.act-dark .bg-gray-50 { background-color: #182234 !important; }
html.act-dark .bg-gray-800 { background-color: #030712 !important; }

/* --- Text ------------------------------------------------------------- */
html.act-dark .text-gray-900,
html.act-dark .text-gray-800 { color: #f3f4f6 !important; }
html.act-dark .text-gray-700 { color: #d1d5db !important; }
html.act-dark .text-gray-600,
html.act-dark .text-gray-500 { color: #9ca3af !important; }
html.act-dark .text-gray-400 { color: #6b7280 !important; }
html.act-dark h1, html.act-dark h2, html.act-dark h3 { color: #f3f4f6; }

/* --- Borders / dividers ---------------------------------------------- */
html.act-dark .border,
html.act-dark .border-b,
html.act-dark .border-t,
html.act-dark .border-l,
html.act-dark .border-r,
html.act-dark .border-gray-200,
html.act-dark .border-gray-300 { border-color: #334155 !important; }
html.act-dark .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* --- Hovers ----------------------------------------------------------- */
html.act-dark .hover\:bg-gray-50:hover,
html.act-dark .hover\:bg-gray-100:hover { background-color: #273449 !important; }
html.act-dark .hover\:bg-gray-200:hover { background-color: #334155 !important; }

/* --- Tinted panels (info/warn/error cards) ---------------------------- */
html.act-dark .bg-blue-50 { background-color: #172554 !important; }
html.act-dark .bg-red-50 { background-color: #3f1d1d !important; }
html.act-dark .bg-yellow-50 { background-color: #3a2c10 !important; }
html.act-dark .bg-green-50 { background-color: #132e1f !important; }
html.act-dark .bg-purple-50 { background-color: #2a1d52 !important; }
html.act-dark .bg-orange-50 { background-color: #3c2312 !important; }

/* Badge chips: darken bg-*-100, lighten their text-*-800 pairs */
html.act-dark .bg-blue-100 { background-color: #1e3a8a !important; }
html.act-dark .bg-red-100 { background-color: #7f1d1d !important; }
html.act-dark .bg-yellow-100 { background-color: #713f12 !important; }
html.act-dark .bg-green-100 { background-color: #14532d !important; }
html.act-dark .bg-purple-100 { background-color: #4c1d95 !important; }
html.act-dark .bg-gray-100.text-gray-600,
html.act-dark span.bg-gray-100 { background-color: #374151 !important; }
html.act-dark .text-blue-800, html.act-dark .text-blue-700 { color: #93c5fd !important; }
html.act-dark .text-red-800, html.act-dark .text-red-700 { color: #fca5a5 !important; }
html.act-dark .text-yellow-800, html.act-dark .text-yellow-700 { color: #fde68a !important; }
html.act-dark .text-green-800, html.act-dark .text-green-700 { color: #86efac !important; }
html.act-dark .text-purple-800, html.act-dark .text-purple-700 { color: #d8b4fe !important; }
html.act-dark .text-orange-800, html.act-dark .text-orange-600 { color: #fdba74 !important; }
html.act-dark .text-blue-600 { color: #60a5fa !important; }
html.act-dark .text-red-600 { color: #f87171 !important; }
html.act-dark .text-green-600 { color: #4ade80 !important; }

/* --- Form controls ---------------------------------------------------- */
html.act-dark input[type="text"],
html.act-dark input[type="search"],
html.act-dark input[type="password"],
html.act-dark input[type="number"],
html.act-dark input[type="email"],
html.act-dark select,
html.act-dark textarea {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #374151;
}
html.act-dark input::placeholder { color: #6b7280; }

/* --- Tables ------------------------------------------------------------ */
html.act-dark table thead th { color: #9ca3af; }
html.act-dark table td, html.act-dark table th { border-color: #334155; }
/* Gradebook's sticky student column sets a literal white background
   (opaque while scrolling sideways) — match the dark card surface */
html.act-dark .gradebook-table th:first-child,
html.act-dark .gradebook-table td:first-child {
    background: #1f2937;
    box-shadow: 2px 0 3px -2px rgba(0, 0, 0, 0.6);
}

/* --- Shadows read as edges in the dark -------------------------------- */
html.act-dark .shadow,
html.act-dark .shadow-lg {
    box-shadow: 0 0 0 1px #334155 !important;
}

/* --- Review page (teacher note, progress tracks, explanations) --------- */
html.act-dark .bg-indigo-50 { background-color: #1e1b4b !important; }
html.act-dark .border-indigo-200 { border-color: #3730a3 !important; }
html.act-dark .text-indigo-900 { color: #c7d2fe !important; }
html.act-dark .bg-gray-200 { background-color: #334155 !important; }
html.act-dark .hover\:bg-gray-300:hover { background-color: #475569 !important; }
/* Tailwind prose defaults to near-black text; explanations sit on a
   darkened bg-blue-50 box, so lift the whole typographic scale */
html.act-dark .prose,
html.act-dark .prose p,
html.act-dark .prose li,
html.act-dark .prose strong,
html.act-dark .prose em {
    color: #d1d5db !important;
}

/* --- Review page question-number circles + solid chips ---------------
   These pair bg-*-200 / bg-gray-300 with text-*-800 / text-gray-700.
   The text rules above lighten the foreground, so without darkening
   the background too the number disappears (light on light). */
html.act-dark .bg-green-200 { background-color: #166534 !important; }
html.act-dark .bg-red-200 { background-color: #991b1b !important; }
html.act-dark .bg-purple-200 { background-color: #5b21b6 !important; }
html.act-dark .bg-blue-200,
html.act-dark .hover\:bg-blue-200:hover { background-color: #1e40af !important; }
html.act-dark .bg-yellow-200 { background-color: #854d0e !important; }
html.act-dark .bg-gray-300 { background-color: #475569 !important; }
html.act-dark .hover\:bg-gray-400:hover { background-color: #64748b !important; }
html.act-dark .border-blue-200 { border-color: #1e3a8a !important; }
html.act-dark .border-blue-400 { border-color: #3b82f6 !important; }

/* Review answer-choice cards: the correct / your-pick borders stay
   saturated; neutral cards get the dark divider color via .border-gray-200
   above. Choice text inherits body color, but imported HTML sometimes
   carries <p>/<span> with no class — keep it readable. */
html.act-dark .border-green-500 { border-color: #22c55e !important; }
html.act-dark .border-red-500 { border-color: #ef4444 !important; }

/* Rendered passage text inside the review's white card */
html.act-dark .passage-text,
html.act-dark .passage-text p { color: #d1d5db !important; }

/* --- Content images on the review pages ------------------------------
   Same inversion the test interface applies (act-style.css,
   `html.act-dark main img`): black-on-white question/choice/passage
   images become light-on-dark. Scoped to img.act-content-img so the
   school logo in the nav and admin-page images are left alone. */
html.act-dark img.act-content-img {
    background-color: #ffffff;
    padding: 4px;
    border-radius: 4px;
    filter: invert(0.9) hue-rotate(180deg);
}