/* ═══════════════════════════════════════════════════════════
   DARK THEME — shared overrides, applied when html.dark
   ═══════════════════════════════════════════════════════════ */

body { transition: background 0.28s ease, color 0.28s ease; }

html.dark body { background: #1C1C1E; color: #FFFFFF; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* ═══ SHARED SIDEBAR (navbar.js) ═══ */
html.dark .main-sidebar {
  background: #1C1C1E !important;
  border-right-color: #2C2C2E !important;
}
html.dark .ms-nav-item:hover { background: #3A3A3C !important; }
html.dark .ms-nav-item.active {
  background: rgba(28,176,246,0.12) !important;
  border-color: rgba(28,176,246,0.28) !important;
}
html.dark .ms-nav-icon.col-inactive { background: #2C2C2E !important; }
html.dark .ms-nav-label { color: #8E8E93 !important; }
html.dark .meer-dropdown-item { color: #8E8E93 !important; }
html.dark .meer-dropdown-item:hover { background: #3A3A3C !important; color: #FFFFFF !important; }
html.dark .meer-dropdown-item.current { color: #1CB0F6 !important; }
html.dark .meer-dropdown-logout { color: #FF3B30 !important; }

/* ═══ EXAM PAGES ═══ */

html.dark .site-header {
  background: rgba(28,28,30,0.94) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark .header-title { color: #FFFFFF !important; }
html.dark .header-title .title-sub { color: #8E8E93 !important; }

html.dark .streak-wrap {
  background: rgba(28,28,30,0.96) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark .streak-bar-bg { background: #3A3A3C !important; }

html.dark .q-block {
  background: #2C2C2E !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2) !important;
}
html.dark .q-text,
html.dark .q-context,
html.dark .q-question { color: #EBEBF0 !important; }
html.dark .q-num { color: #8E8E93 !important; }

html.dark .opt-btn {
  background: #2C2C2E !important;
  border-color: #48484A !important;
  color: #EBEBF0 !important;
}
html.dark .opt-btn:hover:not(:disabled) {
  background: rgba(28,176,246,0.12) !important;
  border-color: #1CB0F6 !important;
}
html.dark .opt-btn.selected {
  background: rgba(28,176,246,0.12) !important;
  border-color: #1CB0F6 !important;
}
html.dark .opt-letter { background: #3A3A3C !important; color: #EBEBF0 !important; }

html.dark .modal-box {
  background: #2C2C2E !important;
  color: #FFFFFF !important;
}
html.dark .modal-box h2 { color: #FFFFFF !important; }
html.dark .modal-box p  { color: #8E8E93 !important; }
html.dark .btn-cancel   { background: #3A3A3C !important; color: #FFFFFF !important; }

html.dark #results-overlay { background: #1C1C1E !important; }
html.dark .results-title   { color: #FFFFFF !important; }
html.dark .results-sub     { color: #8E8E93 !important; }
html.dark .score-ring {
  background: conic-gradient(#58CC02 0%, #58CC02 var(--pct), #3A3A3C var(--pct), #3A3A3C 100%) !important;
}
html.dark .score-ring-inner { background: #1C1C1E !important; }
html.dark .score-num        { color: #FFFFFF !important; }
html.dark .score-den        { color: #8E8E93 !important; }
html.dark .stat-card        { background: #2C2C2E !important; }
html.dark .stat-card .stat-lbl { color: #8E8E93 !important; }
html.dark .btn-back-exam    { background: #2C2C2E !important; color: #FFFFFF !important; }

html.dark .dnd-pool { background: #2C2C2E !important; }
html.dark .dnd-card {
  background: #3A3A3C !important;
  border-color: #48484A !important;
  color: #EBEBF0 !important;
}
html.dark .dnd-label {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
  color: #EBEBF0 !important;
}
html.dark .dnd-zone {
  background: #2C2C2E !important;
  border-color: #48484A !important;
}
html.dark .dnd-zone.dnd-filled {
  background: #3A3A3C !important;
  border-color: #48484A !important;
}
html.dark .dnd-hint  { color: #636366 !important; }
html.dark .match-item {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
  color: #EBEBF0 !important;
}
html.dark .match-letter { background: #3A3A3C !important; color: #EBEBF0 !important; }

html.dark select, html.dark .mq3-sel {
  background: #3A3A3C !important;
  color: #EBEBF0 !important;
  border-color: #48484A !important;
}

html.dark .result-note {
  background: #2C2C2E !important;
  border-left-color: #48484A !important;
  color: #8E8E93 !important;
}
html.dark .juiste-table th {
  background: #3A3A3C !important;
  color: #FFFFFF !important;
  border-color: #48484A !important;
}
html.dark .juiste-table td { border-color: #48484A !important; }
html.dark .juiste-table tr:nth-child(even) td { background: #2C2C2E !important; }
html.dark .multi-hint { color: #8E8E93 !important; }

html.dark .summary {
  background: rgba(28,28,30,0.92) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
html.dark .summary-stat   { color: #8E8E93 !important; }
html.dark .summary-stat .n { color: #FFFFFF !important; }

html.dark .g-tip {
  background: #2C2C2E !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark .g-panel {
  background: #2C2C2E !important;
  border-left-color: rgba(255,255,255,0.06) !important;
}
html.dark .g-title { color: #FFFFFF !important; }
html.dark .g-def   { color: #EBEBF0 !important; }
html.dark .g-close, html.dark .g-img-btn {
  background: #3A3A3C !important;
  color: #8E8E93 !important;
}
html.dark .g-img-btn:hover { background: #48484A !important; }
html.dark .g-img-counter   { color: #8E8E93 !important; }

html.dark .chat-panel {
  background: #2C2C2E !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}
html.dark .chat-panel-header {
  background: #1C1C1E !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark .chat-panel-title { color: #FFFFFF !important; }
html.dark .chat-close { background: #3A3A3C !important; color: #8E8E93 !important; }
html.dark .chat-context-pill {
  background: #2C2C2E !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #8E8E93 !important;
}
html.dark .chat-context-pill strong { color: #FFFFFF !important; }
html.dark .chat-msg.ai {
  background: #3A3A3C !important;
  color: #EBEBF0 !important;
}
html.dark .chat-msg.ai h3,
html.dark .chat-msg.ai h4  { color: #EBEBF0 !important; }
html.dark .chat-msg.ai em  { color: #EBEBF0 !important; }
html.dark .chat-msg.ai hr  { border-top-color: #48484A !important; }
html.dark .chat-input-area {
  background: #1C1C1E !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}
html.dark .chat-input {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
  color: #FFFFFF !important;
}
html.dark .chat-send:disabled { background: #3A3A3C !important; }

/* Open-answer fields — dark surfaces in dark mode (white only in light mode).
   (Supersedes the old "always white" rule now that exams have a dark theme.) */
html.dark .open-input,
html.dark .open-input:disabled,
html.dark .open-result,
html.dark .open-modelans {
  background: #2C2C2E !important;
  color: #EBEBF0 !important;
  -webkit-text-fill-color: #EBEBF0 !important;
  border-color: #48484A !important;
}
html.dark .open-input::placeholder { color: #8E8E93 !important; }
html.dark .open-crit { color: #8E8E93 !important; border-top-color: #48484A !important; }

/* ═══ MEDEACE_V3 HUB ═══ */
html.dark header {
  background: #1C1C1E !important;
  border-bottom: 1px solid #3A3A3C !important;
}
html.dark header nav { border-color: #3A3A3C !important; }
html.dark .nav-pill { color: #8E8E93 !important; }
html.dark .nav-pill-active {
  background: #3A3A3C !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
}
html.dark .subject-card { background: #2C2C2E !important; }
html.dark .sidebar-card {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
}

/* ═══ PROFILE PAGE ═══ */
html.dark .avatar-banner { background: #1e3040 !important; }
html.dark .edit-btn {
  background: rgba(60,60,65,0.92) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark .profile-name    { color: #FFFFFF !important; }
html.dark .profile-username,
html.dark .profile-joined  { color: #8E8E93 !important; }
html.dark .tabs { border-bottom-color: #3A3A3C !important; }
html.dark .tab  { color: #8E8E93 !important; }
html.dark .tab.active { color: #1CB0F6 !important; border-bottom-color: #1CB0F6 !important; }
html.dark .stats-title { color: #FFFFFF !important; }
html.dark .stat-card {
  border-color: #3A3A3C !important;
  background: #2C2C2E !important;
}
html.dark .stat-value { color: #FFFFFF !important; }
html.dark .stat-label { color: #8E8E93 !important; }
html.dark .achievements-list { border-color: #3A3A3C !important; }
html.dark .achievement-row  { border-bottom-color: #3A3A3C !important; }
html.dark .ach-name  { color: #FFFFFF !important; }
html.dark .ach-count { color: #8E8E93 !important; }
html.dark .ach-bar-wrap { background: #3A3A3C !important; }
html.dark .ach-desc  { color: #8E8E93 !important; }
html.dark .name-modal-box {
  background: #2C2C2E !important;
  color: #FFFFFF !important;
}
html.dark .name-modal-title { color: #FFFFFF !important; }
html.dark .name-edit-input {
  background: #3A3A3C !important;
  border-color: #48484A !important;
  color: #FFFFFF !important;
}
html.dark #auth-gate  { background: rgba(28,28,30,0.65) !important; }
html.dark .auth-card  { background: #2C2C2E !important; }
html.dark .auth-card h2 { color: #FFFFFF !important; }
html.dark .auth-input {
  background: #3A3A3C !important;
  border-color: #48484A !important;
  color: #FFFFFF !important;
}
html.dark .auth-divider-line { background: #3A3A3C !important; }

/* ═══ VOORTGANG PAGE ═══ */
html.dark .page-title { color: #FFFFFF !important; }
html.dark .page-sub   { color: #8E8E93 !important; }
html.dark .level-stats {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
}
html.dark .ls-xp-val    { color: #FFFFFF !important; }
html.dark .ls-bar-wrap  { background: #3A3A3C !important; }
html.dark .ls-bar-label { color: #8E8E93 !important; }
html.dark .road-title   { color: #FFFFFF !important; }
html.dark .road-arrow {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
  color: #FFFFFF !important;
}
html.dark .road-arrow:hover { background: #3A3A3C !important; border-color: #1CB0F6 !important; }
html.dark .road-line-bg { background: #3A3A3C !important; }
html.dark .tr-node.locked .tr-badge {
  background: #2C2C2E !important;
  border-color: #3A3A3C !important;
}
html.dark .pager-dot { background: #3A3A3C !important; }
html.dark .pager-dot:hover:not(.active) { background: #48484A !important; }
html.dark .login-prompt {
  background: rgba(28,176,246,0.08) !important;
  border-color: rgba(28,176,246,0.25) !important;
}
html.dark .login-prompt-text { color: #FFFFFF !important; }

/* ═══ AVATAR CREATOR ═══ */
html.dark .main-wrapper { background: #1C1C1E !important; }
html.dark .editor-card  { background: #2C2C2E !important; border-color: #3A3A3C !important; }