/* ============================================================
   dark-mode.css  —  MyLearning Portal
   Global dark mode overrides. Loaded on every page via header.php.

   HOW IT WORKS:
   - :root[data-theme="dark"] is set by the theme toggle JS in header.php
   - These rules only fire in dark mode
   - Uses CSS variables defined in header.php :root blocks
   - Replaces the old shotgun override block that was inside header.php
   - All !important tags here are intentional — they override legacy
     inline styles and old module CSS that predates this system
   ============================================================ */


/* ── 1. PAGE BASE ── */
:root[data-theme="dark"] body {
  background: var(--surface) !important;
  color: var(--text) !important;
}


/* ── 2. LAYOUT CONTAINERS ── */
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .container--tight,
:root[data-theme="dark"] .container--wide,
:root[data-theme="dark"] .inner,
:root[data-theme="dark"] .page-wrap,
:root[data-theme="dark"] .wrap {
  color: var(--text);
}


/* ── 3. CARDS & SURFACES ── */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .admin-section,
:root[data-theme="dark"] .admin-details,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .category-card,
:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .scard,
:root[data-theme="dark"] .results-card,
:root[data-theme="dark"] .filters-card,
:root[data-theme="dark"] .guide-card,
:root[data-theme="dark"] .m-card {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Card sub-sections */
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .panel-header,
:root[data-theme="dark"] .panel-body,
:root[data-theme="dark"] .admin-section__head,
:root[data-theme="dark"] .admin-details summary {
  color: var(--text) !important;
  border-color: var(--border) !important;
}


/* ── 4. TYPOGRAPHY — inherit, don't override ── */
/* Note: we use inherit here, NOT a fixed color.
   This lets individual components control their own accent colors
   (gold, teal, etc) without being overridden by dark mode */
:root[data-theme="dark"] p,
:root[data-theme="dark"] span,
:root[data-theme="dark"] div,
:root[data-theme="dark"] li,
:root[data-theme="dark"] small,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] b,
:root[data-theme="dark"] em {
  color: inherit;
}

/* Labels — muted tone in dark mode */
:root[data-theme="dark"] label {
  color: var(--muted) !important;
}

/* Table cells */
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
  color: inherit;
}

/* Tables */
:root[data-theme="dark"] table {
  color: var(--text);
}


/* ── 5. LINKS ── */
:root[data-theme="dark"] a {
  color: #c4b5fd;
}
:root[data-theme="dark"] a:hover {
  color: #ddd6fe;
}

/* Nav links stay white — they're on the purple topbar */
:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .nav .hello,
:root[data-theme="dark"] .theme-btn,
:root[data-theme="dark"] .menu-toggle {
  color: rgba(255,255,255,.95) !important;
}

/* Utility link class */
:root[data-theme="dark"] .link {
  color: #c4b5fd !important;
}
:root[data-theme="dark"] .link:hover {
  color: #ddd6fe !important;
}

/* Text utility classes */
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .text-muted {
  color: var(--muted) !important;
}


/* ── 6. FORM CONTROLS ── */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.25) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] input:focus:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] .input:focus {
  border-color: rgba(167,139,250,.55) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.18) !important;
  outline: none;
}

/* Checkboxes and radios — use accent color */
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] {
  accent-color: #a78bfa;
}

/* Select options background (browser support varies) */
:root[data-theme="dark"] select option {
  background: #0f172a;
  color: #f8fafc;
}


/* ── 7. BUTTONS ── */
:root[data-theme="dark"] .btn-outline {
  color: var(--text);
  border-color: rgba(255,255,255,.20);
}
:root[data-theme="dark"] .btn-outline:hover {
  color: #fff;
  background: var(--primary);
}

:root[data-theme="dark"] .btn.secondary,
:root[data-theme="dark"] .btn-secondary {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}

:root[data-theme="dark"] .btn-ghost {
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}


/* ── 8. BADGES & PILLS ── */
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .pill {
  color: #fff !important;
}

:root[data-theme="dark"] .badge.gray,
:root[data-theme="dark"] .pill.gray {
  background: rgba(255,255,255,.12);
  color: var(--text) !important;
}

:root[data-theme="dark"] .badge.green,
:root[data-theme="dark"] .pill.good {
  background: rgba(34,197,94,.20);
  color: #b7f7d2 !important;
}

:root[data-theme="dark"] .badge.amber,
:root[data-theme="dark"] .pill.warn {
  background: rgba(245,158,11,.18);
  color: #fde68a !important;
}

:root[data-theme="dark"] .badge.red {
  background: rgba(239,68,68,.20);
  color: #ffd1d1 !important;
}

/* Soft badges used in various modules */
:root[data-theme="dark"] .soft-badge,
:root[data-theme="dark"] .tag-badge,
:root[data-theme="dark"] .sbadge {
  color: var(--text);
}


/* ── 9. ALERTS ── */
:root[data-theme="dark"] .alert {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}

:root[data-theme="dark"] .alert.ok,
:root[data-theme="dark"] .alert.success {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
  color: #b7f7d2;
}

:root[data-theme="dark"] .alert.bad,
:root[data-theme="dark"] .alert.error,
:root[data-theme="dark"] .alert.danger {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.22);
  color: #ffd1d1;
}

:root[data-theme="dark"] .alert.warn,
:root[data-theme="dark"] .alert.warning {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.22);
  color: #fde68a;
}

:root[data-theme="dark"] .alert.info {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.22);
  color: #bfdbfe;
}


/* ── 10. TABLES ── */
:root[data-theme="dark"] .table th {
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-color: var(--border);
}

:root[data-theme="dark"] .table td {
  border-color: var(--border);
}

:root[data-theme="dark"] .table tr:hover td {
  background: rgba(255,255,255,.03);
}


/* ── 11. MODALS & OVERLAYS ── */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-box {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .modal-backdrop,
:root[data-theme="dark"] .overlay {
  background: rgba(0,0,0,.65);
}


/* ── 12. TILES ── */
:root[data-theme="dark"] .tile {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .tile:hover {
  border-color: rgba(167,139,250,.3) !important;
}

:root[data-theme="dark"] .tile .icon {
  color: #c4b5fd;
  background: rgba(167,139,250,.12);
}


/* ── 13. HERO SECTIONS ── */
:root[data-theme="dark"] .landing__heading {
  color: #c4b5fd;
}


/* ── 14. PROGRESS BARS ── */
:root[data-theme="dark"] .progress {
  background: rgba(139,92,246,.22);
}

:root[data-theme="dark"] .bar {
  background: rgba(139,92,246,.22);
}


/* ── 15. CATEGORY CARDS (courses page) ── */
:root[data-theme="dark"] .category-card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .category-card__title {
  color: var(--text) !important;
}

:root[data-theme="dark"] .course-row {
  border-color: var(--border);
}

:root[data-theme="dark"] .course-row__title {
  color: var(--text);
}

:root[data-theme="dark"] .course-row__desc {
  color: var(--muted);
}


/* ── 16. TOOLBAR / FILTER AREAS ── */
:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] .filters-card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}


/* ── 17. SCROLLBAR (webkit) ── */
:root[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.20);
}


/* ── 18. SELECTION HIGHLIGHT ── */
:root[data-theme="dark"] ::selection {
  background: rgba(167,139,250,.35);
  color: #fff;
}


/* ── 19. HR / DIVIDERS ── */
:root[data-theme="dark"] hr {
  border-color: var(--border);
}


/* ── 20. CODE BLOCKS ── */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre {
  background: rgba(0,0,0,.35);
  color: #e2e8f0;
  border-color: rgba(255,255,255,.1);
}