/* ================================================================
   DARK THEME — Brispa International NCLEX Training Platform
   CSS Custom Properties approach with [data-theme="dark"] selector
   ================================================================ */

/* ── Light-theme defaults (current look) ────────────────────────── */
:root,
[data-theme="light"] {
  --bg-primary:       #FFFFFF;
  --bg-secondary:     #F7FAFC;
  --bg-tertiary:      #EDF2F7;
  --bg-accent:        #E2E8F0;
  --bg-gray:          #f8f9fa;

  --text-primary:     #1A202C;
  --text-secondary:   #4A5568;
  --text-tertiary:    #A0AEC0;
  --text-disabled:    #CBD5E0;
  --text-black:       #233d63;
  --text-heading:     #233d63;

  --border-primary:   #E2E8F0;
  --border-secondary: #CBD5E0;
  --border-hover:     #A0AEC0;
  --border-input:     #ced4da;

  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,.1);
  --shadow-md:  0 4px 6px 0 rgba(0,0,0,.1);
  --shadow-lg:  0 10px 15px 0 rgba(0,0,0,.1);

  --accent-coral:       #E07856;
  --accent-coral-hover: #DA6E4A;
  --accent-coral-active:#C85C38;
  --accent-coral-rgb:   224,120,86;

  /* Align with dark theme: used by learner UIs (e.g. bow tie) for rgba(var(--accent-blue-rgb), α) */
  --accent-blue:       #4299E1;
  --accent-blue-rgb:   66,153,225;

  --success:    #48BB78;
  --warning:    #F6AD55;
  --danger:     #F56565;
  --info:       #4299E1;
  --success-bg: rgba(72,187,120,.1);
  --warning-bg: rgba(246,173,85,.1);
  --danger-bg:  rgba(245,101,101,.1);
  --info-bg:    rgba(66,153,225,.1);

  --input-bg:       #FFFFFF;
  --input-border:   #ced4da;
  --input-text:     #495057;
  --input-focus-border: #E07856;

  --card-bg:    #FFFFFF;
  --card-border:#E2E8F0;
  --card-shadow:0 0 10px rgba(82,85,90,.1);

  --dropdown-bg:     #FFFFFF;
  --dropdown-border: #E2E8F0;

  --sidebar-bg:      #FFFFFF;
  --sidebar-text:    #4A5568;
  --sidebar-active:  rgba(224,120,86,.08);
  --sidebar-hover:   #F7FAFC;

  --table-header-bg: #F7FAFC;
  --table-border:    #E2E8F0;
  --table-stripe-bg: #F7FAFC;
  --table-hover-bg:  rgba(224,120,86,.04);

  --modal-overlay:   rgba(0,0,0,.5);
  --scrollbar-thumb: #CBD5E0;
  --scrollbar-track: #F7FAFC;

  --nav-bg:          #FFFFFF;
  --nav-text:        #233d63;
  --nav-border:      #E2E8F0;

  --footer-bg:       #FFFFFF;
  --footer-text:     #4A5568;

  --hero-bg:         #f8f9fa;
  --section-block-bg:#eee;

  --ribbon-bg:       rgba(224,120,86,.1);
  --ribbon-text:     #E07856;

  --badge-bg:        #eee;
  --badge-text:      #333;

  --icon-element-bg: #F7FAFC;
  --icon-element-shadow: 0 1px 3px rgba(0,0,0,.08);

  --preloader-bg:    #FFFFFF;
  --body-overlay:    rgba(0,0,0,.45);

  --color-scheme: light;
}

/* ── Dark-theme overrides ───────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Backgrounds — distinct tonal layers ── */
  --bg-primary:       #0D1117;   /* Page background  — darkest */
  --bg-secondary:     #161B25;   /* Cards / panels   — +1 step  */
  --bg-tertiary:      #1E2536;   /* Sidebars / inputs— +2 steps */
  --bg-accent:        #273047;   /* Hover / elevated — +3 steps */
  --bg-gray:          #161B25;

  /* ── Text ── */
  --text-primary:     #F0F4FF;   /* Near-white with blue tint */
  --text-secondary:   #C5CFE0;
  --text-tertiary:    #8A94A6;
  --text-disabled:    #5A6478;
  --text-black:       #F0F4FF;
  --text-heading:     #F0F4FF;

  /* ── Borders — visible contrast ── */
  --border-primary:   #232D52;   /* Subtle but visible */
  --border-secondary: #3A4563;   /* Stronger dividers  */
  --border-hover:     #5A6A8A;
  --border-input:     #3A4563;

  /* ── Shadows with colour tint ── */
  --shadow-sm:  0 2px 4px rgba(0,0,0,.4), 0 0 1px rgba(159,122,234,.08);
  --shadow-md:  0 4px 14px rgba(0,0,0,.5), 0 0 2px rgba(159,122,234,.12);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.6), 0 0 4px rgba(66,153,225,.15);

  /* ── Glows ── */
  --glow-coral:   0 0 18px rgba(237,137,54,.25);
  --glow-purple:  0 0 22px rgba(159,122,234,.3);
  --glow-blue:    0 0 18px rgba(66,153,225,.25);
  --glow-green:   0 0 18px rgba(72,187,120,.25);

  /* ── Gradients ── */
  --gradient-coral:           linear-gradient(135deg,#ED8936 0%,#F6AD55 100%);
  --gradient-purple-magenta:  linear-gradient(135deg,#9F7AEA 0%,#D946EF 100%);
  --gradient-blue-cyan:       linear-gradient(135deg,#4299E1 0%,#06B6D4 100%);
  --gradient-green:           linear-gradient(135deg,#48BB78 0%,#38A169 100%);
  --gradient-bg-card:         linear-gradient(135deg,#1E2536 0%,#273047 100%);
  --gradient-welcome:         linear-gradient(135deg,#2D3A6A 0%,#1E2536 60%,#0D1117 100%);

  /* ── Brand accent ── */
  --accent-coral:         #ED8936;
  --accent-coral-hover:   #DD6B20;
  --accent-coral-active:  #C05621;
  --accent-coral-rgb:     237,137,54;

  /* ── Extra accent palette ── */
  --accent-purple:        #9F7AEA;
  --accent-purple-rgb:    159,122,234;
  --accent-blue:          #4299E1;
  --accent-blue-rgb:      66,153,225;
  --accent-cyan:          #06B6D4;
  --accent-green:         #48BB78;
  --accent-magenta:       #D946EF;

  /* ── Semantic ── */
  --success:    #48BB78;
  --warning:    #F6AD55;
  --danger:     #FC8181;
  --info:       #63B3ED;
  --success-bg: rgba(72,187,120,.15);
  --warning-bg: rgba(246,173,85,.15);
  --danger-bg:  rgba(252,129,129,.15);
  --info-bg:    rgba(99,179,237,.15);

  /* ── Inputs ── */
  --input-bg:           #1E2536;
  --input-border:       #3A4563;
  --input-text:         #F0F4FF;
  --input-focus-border: #9F7AEA;

  /* ── Cards ── */
  --card-bg:    #161B25;
  --card-border:#232D52;
  --card-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 1px rgba(159,122,234,.08);

  /* ── Dropdowns ── */
  --dropdown-bg:     #161B25;
  --dropdown-border: #232D52;

  /* ── Sidebar ── */
  --sidebar-bg:     #161B25;
  --sidebar-text:   #C5CFE0;
  --sidebar-active: rgba(237,137,54,.12);
  --sidebar-hover:  #1E2536;

  /* ── Tables ── */
  --table-header-bg: #1E2536;
  --table-border:    #232D52;
  --table-stripe-bg: #161B25;
  --table-hover-bg:  rgba(237,137,54,.06);

  /* ── Misc ── */
  --modal-overlay:   rgba(0,0,0,.75);
  --scrollbar-thumb: #3A4563;
  --scrollbar-track: #161B25;

  --nav-bg:          #161B25;
  --nav-text:        #F0F4FF;
  --nav-border:      #232D52;

  --footer-bg:       #0D1117;
  --footer-text:     #C5CFE0;

  --hero-bg:         #0D1117;
  --section-block-bg:#232D52;

  --ribbon-bg:       rgba(237,137,54,.15);
  --ribbon-text:     #ED8936;

  --badge-bg:        #1E2536;
  --badge-text:      #F0F4FF;

  --icon-element-bg:     #1E2536;
  --icon-element-shadow: 0 2px 6px rgba(0,0,0,.35);

  --preloader-bg:    #0D1117;
  --body-overlay:    rgba(0,0,0,.65);

  --color-scheme: dark;
  color-scheme: dark;

  /* DataTables 1.13+ — library dark mode uses html.dark; we map the same tokens here */
  --dt-html-background: #1E2536;
  --dt-row-hover: 255, 255, 255;
  --dt-row-stripe: 255, 255, 255;
  --dt-column-ordering: 255, 255, 255;
  --dt-row-selected: 237, 137, 54;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 240, 244, 255;
}


/* ================================================================
   GLOBAL ELEMENT OVERRIDES
   ================================================================ */

[data-theme="dark"] body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ── Headings ──────────────────────────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-primary);
}

/* ── Paragraphs & general text ─────────────────────────────────── */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] li {
  color: var(--text-secondary);
}

/* ── Anchors ───────────────────────────────────────────────────── */
[data-theme="dark"] a {
  color: var(--text-secondary);
}
[data-theme="dark"] a:hover {
  color: var(--accent-coral);
}

/* ── Small / muted ─────────────────────────────────────────────── */
[data-theme="dark"] .text-muted,
[data-theme="dark"] small {
  color: var(--text-tertiary) !important;
}

/* ── Explicit text-black usage ─────────────────────────────────── */
[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

/* ── HR / dividers ─────────────────────────────────────────────── */
[data-theme="dark"] hr,
[data-theme="dark"] .section-block {
  border-color: var(--border-primary) !important;
  background-color: var(--border-primary) !important;
}
[data-theme="dark"] .section-divider,
[data-theme="dark"] .section--divider {
  background-color: var(--accent-coral) !important;
}

/* ================================================================
   BACKGROUNDS — override utility classes
   ================================================================ */
[data-theme="dark"] .bg-white {
  background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] .bg-gray,
[data-theme="dark"] .bg-light {
  background-color: var(--bg-primary) !important;
}
[data-theme="dark"] .bg-transparent {
  background-color: transparent !important;
}

/* ================================================================
   HEADER / NAVIGATION
   ================================================================ */
[data-theme="dark"] .header-menu-area {
  background-color: var(--nav-bg) !important;
}
[data-theme="dark"] .header-menu-content,
[data-theme="dark"] .dashboard-menu-content {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
}
[data-theme="dark"] .header-menu-content.bg-white,
[data-theme="dark"] .dashboard-menu-content.bg-white {
  background-color: var(--nav-bg) !important;
}

[data-theme="dark"] .main-menu ul li a {
  color: var(--text-secondary);
}
[data-theme="dark"] .main-menu ul li a:hover,
[data-theme="dark"] .main-menu ul li.page-active > a {
  color: var(--accent-coral);
}

[data-theme="dark"] .off-canvas-menu,
[data-theme="dark"] .off--canvas-menu {
  background-color: var(--sidebar-bg) !important;
}
/* style.css hardcodes background-color:#fff and color:#233d63 on li a — override both */
[data-theme="dark"] .off-canvas-menu-list li a,
[data-theme="dark"] .off--canvas-menu-list li a {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .off-canvas-menu-list li a:hover,
[data-theme="dark"] .off--canvas-menu-list li a:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--accent-coral) !important;
}
/* SVG icons inside list items */
[data-theme="dark"] .off-canvas-menu-list li svg,
[data-theme="dark"] .off--canvas-menu-list li svg {
  fill: var(--sidebar-text) !important;
}
[data-theme="dark"] .off-canvas-menu-list li.page-active a,
[data-theme="dark"] .off--canvas-menu-list li.page-active a {
  background-color: var(--sidebar-active) !important;
  color: var(--accent-coral) !important;
  border-right-color: var(--accent-coral) !important;
}
[data-theme="dark"] .off-canvas-menu-list li.page-active svg,
[data-theme="dark"] .off--canvas-menu-list li.page-active svg {
  fill: var(--accent-coral) !important;
}

/* .body-overlay already has background:rgba(30,30,28,.9) in style.css, which is
   fine for dark mode. We only adjust opacity timing via the existing transition. */

[data-theme="dark"] .icon-element {
  background-color: var(--icon-element-bg);
  color: var(--text-primary);
  box-shadow: var(--icon-element-shadow);
}

/* mobile search */
[data-theme="dark"] .mobile-search-form {
  background-color: var(--bg-secondary);
}

/* ── Shadow utility ────────────────────────────────────────────── */
[data-theme="dark"] .shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .shadow {
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ================================================================
   PROFILE DROPDOWN
   ================================================================ */
[data-theme="dark"] .cart-dropdown-menu,
[data-theme="dark"] .notification-dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
[data-theme="dark"] .menu-heading-block {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .generic-list-item li a {
  color: var(--text-secondary);
}
[data-theme="dark"] .generic-list-item li a:hover {
  color: var(--accent-coral);
}

/* ── Theme picker button style ─────────────────────────────────── */
[data-theme="dark"] .theme-picker {
  border-color: var(--border-primary);
}
[data-theme="dark"] .theme-picker-btn {
  color: var(--text-primary);
}
[data-theme="dark"] .theme-picker-btn:hover {
  background-color: var(--bg-tertiary);
}

/* Show/hide light/dark buttons depending on current theme */
[data-theme="dark"] .dark-mode-btn {
  display: none !important;
}
[data-theme="dark"] .light-mode-btn {
  display: inline-flex !important;
}
[data-theme="light"] .dark-mode-btn,
:root .dark-mode-btn {
  display: inline-flex;
}
[data-theme="light"] .light-mode-btn,
:root .light-mode-btn {
  display: none;
}

/* ── Admin header: theme switch — matches pill UI (light= moon right / dark= sun left) ─ */
.header-theme-toggle-wrap {
  flex-shrink: 0;
  min-height: 32px;
}
.header-theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.header-theme-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 4;
}
/* Unchecked = light theme: dark track, white knob left, moon + stars right */
.header-theme-switch-slider {
  display: block;
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2d36 0%, #1a1d24 100%);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.header-theme-switch-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  transition: opacity .22s ease;
}
.header-theme-switch-icon--sun {
  left: 9px;
  font-size: 12px;
  color: #1f2937;
  opacity: 0;
}
.header-theme-switch-icon--moon {
  right: 6px;
  left: auto;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.header-theme-switch-stars {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-left: 0;
  line-height: 1;
}
.header-theme-switch-stars .fa-star {
  font-size: 4px;
  opacity: 0.95;
}
.header-theme-switch-stars .fa-star:last-child {
  margin-left: 2px;
  font-size: 3px;
}
.header-theme-switch-knob {
  position: absolute;
  z-index: 2;
  left: 4px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), background .28s ease, box-shadow .28s ease;
}
/* Checked = dark theme: light track, sun left, dark knob right */
.header-theme-switch-input:checked + .header-theme-switch-slider {
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.85), inset 0 -1px 3px rgba(0, 0, 0, 0.06);
}
.header-theme-switch-input:checked + .header-theme-switch-slider .header-theme-switch-icon--sun {
  opacity: 1;
}
.header-theme-switch-input:checked + .header-theme-switch-slider .header-theme-switch-icon--moon {
  opacity: 0;
}
.header-theme-switch-input:checked + .header-theme-switch-slider .header-theme-switch-knob {
  transform: translateX(26px);
  background: linear-gradient(180deg, #2d323c 0%, #1a1d24 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.header-theme-switch-input:focus-visible + .header-theme-switch-slider {
  outline: 2px solid #9F7AEA;
  outline-offset: 3px;
}
[data-theme="dark"] .header-theme-switch-input:focus-visible + .header-theme-switch-slider {
  outline-color: var(--accent-purple);
}

/* ── Compact theme picker (mobile) — single round icon button that swaps
   between sun/moon based on current theme. Drops the pill on small
   screens where the hamburger needs the horizontal space. ───────── */
.theme-picker-compact {
  gap: 0;
}
.theme-picker-compact .theme-picker-btn {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-heading);
  border-radius: 50%;
  /* Matches icon-element-sm sizing */
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-picker-compact .theme-picker-btn:hover {
  background-color: var(--bg-accent);
  color: var(--accent-coral);
}
.theme-picker-compact .theme-picker-btn:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 2px;
}
[data-theme="dark"] .theme-picker-compact .theme-picker-btn {
  color: var(--text-primary);
}
[data-theme="dark"] .theme-picker-compact .theme-picker-btn:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent-coral);
}

/* ================================================================
   SIDEBAR (Admin + Student)
   ================================================================ */
[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .client-sidenav,
[data-theme="dark"] #sidenav-main {
  background-color: var(--sidebar-bg) !important;
  border-color: var(--border-primary) !important;
}

[data-theme="dark"] .admin-sidebar a,
[data-theme="dark"] .client-sidenav a,
[data-theme="dark"] #sidenav-main a,
[data-theme="dark"] .off-canvas-menu-list a {
  color: var(--sidebar-text) !important;
}
[data-theme="dark"] .admin-sidebar a:hover,
[data-theme="dark"] .client-sidenav a:hover,
[data-theme="dark"] #sidenav-main a:hover {
  color: var(--accent-coral) !important;
  background-color: var(--sidebar-hover) !important;
}
[data-theme="dark"] .admin-sidebar .page-active > a,
[data-theme="dark"] .client-sidenav .page-active > a,
[data-theme="dark"] #sidenav-main .page-active > a,
[data-theme="dark"] .admin-sidebar .page-active > .nav-child-link,
[data-theme="dark"] .client-sidenav .page-active > .nav-child-link,
[data-theme="dark"] #sidenav-main .page-active > .nav-child-link,
[data-theme="dark"] .nav-child-item.page-active > a {
  color: var(--accent-coral) !important;
  background-color: var(--sidebar-active) !important;
}

[data-theme="dark"] .nav-section-header {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .sidebar-section-header {
  color: var(--text-tertiary) !important;
}

/* sidebar logo area */
[data-theme="dark"] .logo-box {
  border-color: var(--border-primary);
}

/* ================================================================
   CARDS & PANELS
   ================================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .card-item {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
[data-theme="dark"] .card:hover,
[data-theme="dark"] .card-item:hover {
  border-color: var(--border-secondary) !important;
  box-shadow: var(--shadow-lg), var(--glow-purple) !important;
}
[data-theme="dark"] .card-body {
  background-color: var(--card-bg);
}
[data-theme="dark"] .card-title {
  color: var(--text-primary);
}
[data-theme="dark"] .card-title a {
  color: var(--text-primary);
}
[data-theme="dark"] .card-text {
  color: var(--text-secondary);
}
[data-theme="dark"] .card-price {
  color: var(--text-primary) !important;
}

/* ── Bootstrap bg-light used inside cards / panels ── */
[data-theme="dark"] .bg-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
/* Bootstrap bg-primary progress bar override */
[data-theme="dark"] .progress-bar.bg-primary,
[data-theme="dark"] .bg-primary.progress-bar {
  background-color: var(--accent-coral) !important;
}
[data-theme="dark"] .progress-bar.bg-success { background-color: var(--success) !important; }
[data-theme="dark"] .progress-bar.bg-info    { background-color: var(--info)    !important; }
[data-theme="dark"] .progress-bar.bg-warning { background-color: var(--warning) !important; }
[data-theme="dark"] .progress-bar.bg-danger  { background-color: var(--danger)  !important; }

/* info-box (Feature cards on homepage) */
[data-theme="dark"] .info-box {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}
[data-theme="dark"] .info__title {
  color: var(--text-primary);
}
[data-theme="dark"] .info__text {
  color: var(--text-secondary);
}

/* ================================================================
   FORMS & INPUTS
   ================================================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form--control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .custom-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form--control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-coral-rgb),.2) !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form--control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .form--control-gray {
  background-color: var(--bg-tertiary) !important;
}
[data-theme="dark"] .form-group label {
  color: var(--text-secondary);
}
[data-theme="dark"] .input-group-text {
  background-color: var(--bg-tertiary);
  border-color: var(--input-border);
  color: var(--text-secondary);
}

/* bootstrap select */
[data-theme="dark"] .bootstrap-select .dropdown-toggle {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-item {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .bootstrap-select .dropdown-item:hover,
[data-theme="dark"] .bootstrap-select .dropdown-item.active {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* tag inputs */
[data-theme="dark"] .bootstrap-tagsinput {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}
[data-theme="dark"] .bootstrap-tagsinput .tag {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ================================================================
   BUTTONS
   ================================================================ */
[data-theme="dark"] .btn {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease !important;
}

/* Primary / Brand */
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .btn-primary {
  background-color: var(--accent-coral) !important;
  border-color: var(--accent-coral) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(var(--accent-coral-rgb),.18) !important;
}
[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .btn-primary:hover {
  background-color: var(--accent-coral-hover) !important;
  border-color: var(--accent-coral-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(var(--accent-coral-rgb),.35), var(--glow-coral) !important;
}
[data-theme="dark"] .theme-btn:active,
[data-theme="dark"] .btn-primary:active {
  background-color: var(--accent-coral-active) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Secondary */
[data-theme="dark"] .btn-secondary {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--bg-accent) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-1px) !important;
}

/* Outline variants */
[data-theme="dark"] .btn-outline-primary {
  color: var(--accent-coral) !important;
  border-color: var(--accent-coral) !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--accent-coral) !important;
  color: #FFFFFF !important;
  box-shadow: var(--glow-coral) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] .btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Light */
[data-theme="dark"] .btn-light {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* Semantic */
[data-theme="dark"] .btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
[data-theme="dark"] .btn-success:hover { box-shadow: var(--glow-green) !important; transform: translateY(-1px) !important; }
[data-theme="dark"] .btn-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #1A1A1A !important;
}
[data-theme="dark"] .btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}
[data-theme="dark"] .btn-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}
[data-theme="dark"] .btn-info:hover { box-shadow: var(--glow-blue) !important; transform: translateY(-1px) !important; }

/* Disabled */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-disabled) !important;
  opacity: .5;
  transform: none !important;
  box-shadow: none !important;
}

/* White / transparent variants */
[data-theme="dark"] .theme-btn-white {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .theme-btn-white:hover {
  background-color: var(--bg-accent) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] .theme-btn-transparent {
  background-color: transparent !important;
  border-color: var(--accent-coral) !important;
  color: var(--accent-coral) !important;
}
[data-theme="dark"] .theme-btn-transparent:hover {
  background-color: rgba(var(--accent-coral-rgb),.12) !important;
  transform: translateY(-1px) !important;
}

/* ================================================================
   TABLES & DATA DISPLAYS
   ================================================================ */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  color: var(--text-primary);
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table > thead > tr > th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--table-border) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tbody > tr > th {
  border-color: var(--table-border) !important;
  color: var(--text-secondary);
}
[data-theme="dark"] .table-bordered {
  border-color: var(--table-border) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-stripe-bg) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--table-hover-bg) !important;
}
[data-theme="dark"] .table tbody tr {
  background-color: var(--bg-secondary);
}

/* ================================================================
   DATATABLES (global) — CDN styles assume html.dark; we use data-theme
   ================================================================ */
[data-theme="dark"] .dataTables_wrapper {
  color: var(--text-secondary);
  position: relative;
}

/* Top toolbar: length + search (float layout from DT; panel reads as one strip) */
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 8px;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
  color: var(--text-secondary) !important;
  font-weight: 500;
  margin-bottom: 0;
  vertical-align: middle;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin-left: 6px;
  min-height: 36px;
  box-shadow: none !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  min-width: 12rem;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--input-focus-border) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-purple-rgb), .2) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--text-tertiary) !important;
  padding-top: 12px !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
  background: var(--bg-accent) !important;
  background-image: none !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  border-color: var(--accent-coral) !important;
  background: var(--accent-coral) !important;
  background-image: none !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--text-disabled) !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: var(--bg-tertiary) !important;
  background-image: none !important;
}

[data-theme="dark"] div.dataTables_processing {
  color: var(--text-primary);
  z-index: 3;
}

/* Table chrome — mirror DataTables html.dark borders + our header fill */
[data-theme="dark"] table.dataTable {
  border-color: var(--table-border) !important;
}
[data-theme="dark"] table.dataTable > thead > tr > th,
[data-theme="dark"] table.dataTable > thead > tr > td {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-secondary) !important;
  font-weight: 600;
}
[data-theme="dark"] table.dataTable > tfoot > tr > th,
[data-theme="dark"] table.dataTable > tfoot > tr > td {
  border-top: 1px solid var(--border-secondary) !important;
  background-color: var(--table-header-bg) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] table.dataTable.no-footer {
  border-bottom: 1px solid var(--border-secondary) !important;
}
[data-theme="dark"] table.dataTable.row-border > tbody > tr > th,
[data-theme="dark"] table.dataTable.row-border > tbody > tr > td,
[data-theme="dark"] table.dataTable.display > tbody > tr > th,
[data-theme="dark"] table.dataTable.display > tbody > tr > td {
  border-top-color: var(--table-border) !important;
}
[data-theme="dark"] table.dataTable.cell-border > tbody > tr > th,
[data-theme="dark"] table.dataTable.cell-border > tbody > tr > td {
  border-top-color: var(--table-border) !important;
  border-right-color: var(--table-border) !important;
}
[data-theme="dark"] table.dataTable.cell-border > tbody > tr > th:first-child,
[data-theme="dark"] table.dataTable.cell-border > tbody > tr > td:first-child {
  border-left-color: var(--table-border) !important;
}
[data-theme="dark"] .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom-color: var(--border-secondary) !important;
}

/* Sorting indicators — default opacity 0.125 is nearly invisible on dark */
[data-theme="dark"] table.dataTable thead > tr > th.sorting:before,
[data-theme="dark"] table.dataTable thead > tr > th.sorting:after,
[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:before,
[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:after,
[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:before,
[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:after,
[data-theme="dark"] table.dataTable thead > tr > td.sorting:before,
[data-theme="dark"] table.dataTable thead > tr > td.sorting:after {
  opacity: 0.35 !important;
  color: var(--text-tertiary);
}
[data-theme="dark"] table.dataTable thead > tr > th.sorting_asc:before,
[data-theme="dark"] table.dataTable thead > tr > th.sorting_desc:after,
[data-theme="dark"] table.dataTable thead > tr > td.sorting_asc:before,
[data-theme="dark"] table.dataTable thead > tr > td.sorting_desc:after {
  opacity: 0.85 !important;
  color: var(--accent-coral);
}

[data-theme="dark"] table.dataTable tbody th,
[data-theme="dark"] table.dataTable tbody td {
  color: var(--text-secondary);
}
[data-theme="dark"] table.dataTable tbody tr {
  background-color: var(--bg-secondary);
}
[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--table-hover-bg) !important;
}
[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--bg-primary);
}
[data-theme="dark"] table.dataTable.stripe tbody tr.even,
[data-theme="dark"] table.dataTable.display tbody tr.even {
  background-color: var(--bg-secondary);
}
[data-theme="dark"] table.dataTable td.dataTables_empty {
  color: var(--text-tertiary) !important;
}

/* Responsive extension + child rows */
[data-theme="dark"] table.dataTable td.dt-control:before,
[data-theme="dark"] table.dataTable > tbody > tr > td.dtr-control:before,
[data-theme="dark"] table.dataTable > tbody > tr > th.dtr-control:before {
  color: rgba(240, 244, 255, 0.45) !important;
}
[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] div.dtr-modal div.dtr-modal-display {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-secondary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] div.dtr-modal div.dtr-modal-content {
  color: var(--text-secondary);
}

/* Inside card body: subtle separation before table */
[data-theme="dark"] .card-body > .dataTables_wrapper {
  margin-top: 2px;
}

/* ================================================================
   MODALS & OVERLAYS
   ================================================================ */
[data-theme="dark"] .modal-content {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .modal-header .btn-close {
  color: var(--text-primary);
}
[data-theme="dark"] .modal-footer {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .modal-title {
  color: var(--text-primary);
}
[data-theme="dark"] .modal-backdrop {
  background-color: #000;
}

/* overlay (site custom) — #ui-overlays is a full-viewport fixed container;
   it must stay transparent — only its CHILDREN (e.g. dropdown portals) draw colour. */
[data-theme="dark"] #ui-overlays {
  background-color: transparent !important;
}

/* ================================================================
   BADGES & STATUS INDICATORS
   ================================================================ */
[data-theme="dark"] .badge {
  color: var(--badge-text);
}
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-green {
  background-color: var(--success-bg) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .badge-warning {
  background-color: var(--warning-bg) !important;
  color: var(--warning) !important;
}
[data-theme="dark"] .badge-danger {
  background-color: var(--danger-bg) !important;
  color: var(--danger) !important;
}
[data-theme="dark"] .badge-info {
  background-color: var(--info-bg) !important;
  color: var(--info) !important;
}
[data-theme="dark"] .badge-primary {
  background-color: var(--ribbon-bg) !important;
  color: var(--accent-coral) !important;
}
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge-light {
  background-color: var(--badge-bg) !important;
  color: var(--text-primary) !important;
}

/* ================================================================
   ALERTS
   ================================================================ */
[data-theme="dark"] .alert-success {
  background-color: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
[data-theme="dark"] .alert-warning {
  background-color: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}
[data-theme="dark"] .alert-danger {
  background-color: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
[data-theme="dark"] .alert-info {
  background-color: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}

/* ================================================================
   HERO / SECTIONS (Public site)
   ================================================================ */
[data-theme="dark"] .hero-area,
[data-theme="dark"] .hero-area-4 {
  background-color: var(--hero-bg) !important;
}
[data-theme="dark"] .section__title {
  color: var(--text-primary);
}
[data-theme="dark"] .section__desc {
  color: var(--text-secondary);
}

/* ribbon labels */
[data-theme="dark"] .ribbon {
  background-color: var(--ribbon-bg);
  color: var(--ribbon-text);
}

/* Category section (Popular points) */
[data-theme="dark"] .category-item {
  border-color: var(--card-border);
}
[data-theme="dark"] .category-content {
  background: linear-gradient(transparent, rgba(15,20,25,.9)) !important;
}
[data-theme="dark"] .cat__title a {
  color: #FFFFFF !important;
}

/* Course cards */
[data-theme="dark"] .course-badge-labels .course-badge {
  background-color: var(--accent-coral);
  color: #FFFFFF;
}

/* Counter / Stats */
[data-theme="dark"] .counter-item {
  color: var(--text-primary);
}
[data-theme="dark"] .counter__meta {
  color: var(--text-secondary);
}

/* CTA area */
[data-theme="dark"] .cat-area {
  background-color: var(--bg-primary) !important;
}
[data-theme="dark"] .cta-content-wrap .section__title {
  color: var(--text-primary);
}

/* About area */
[data-theme="dark"] .about-content .section__desc {
  color: var(--text-secondary);
}

/* stroke / ring shapes */
[data-theme="dark"] .stroke-shape,
[data-theme="dark"] .ring-shape {
  opacity: .15;
}

/* Funfact / dot-bg area */
[data-theme="dark"] .funfact-area,
[data-theme="dark"] .dot-bg {
  background-color: var(--bg-secondary) !important;
}

/* Get started area */
[data-theme="dark"] .get-started-area {
  background-color: var(--bg-primary);
}
[data-theme="dark"] .get-started-area.bg-gray {
  background-color: var(--bg-secondary) !important;
}

/* ================================================================
   FOOTER
   ================================================================ */
[data-theme="dark"] .footer-area {
  background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] .footer-item h3 {
  color: var(--text-primary);
}
[data-theme="dark"] .footer-item a {
  color: var(--footer-text);
}
[data-theme="dark"] .footer-item a:hover {
  color: var(--accent-coral);
}
[data-theme="dark"] .copyright-content {
  background-color: var(--bg-primary) !important;
  border-top: 1px solid var(--border-primary);
}
[data-theme="dark"] .copy-desc {
  color: var(--text-tertiary);
}

/* ================================================================
   DASHBOARD — Main content area
   ================================================================ */
[data-theme="dark"] .dashboard-area,
[data-theme="dark"] .dashboard-content-wrap,
[data-theme="dark"] .dashboard-inner,
[data-theme="dark"] .dashboard-main {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
}

/* Ensure the primary dashboard canvas never falls back to light utilities */
[data-theme="dark"] .dashboard-content-wrap > .container-fluid,
[data-theme="dark"] .dashboard-area .container-fluid {
  background-color: transparent !important;
  color: var(--text-primary);
}

/* Global safeguards: legacy utility/background classes inside dashboard */
[data-theme="dark"] .dashboard-area .bg-white,
[data-theme="dark"] .dashboard-content-wrap .bg-white {
  background-color: var(--bg-secondary) !important;
}
[data-theme="dark"] .dashboard-area .bg-light,
[data-theme="dark"] .dashboard-content-wrap .bg-light,
[data-theme="dark"] .dashboard-area .bg-gray,
[data-theme="dark"] .dashboard-content-wrap .bg-gray {
  background-color: var(--bg-tertiary) !important;
}

/* Better dark-mode rhythm for long dashboard pages */
[data-theme="dark"] .dashboard-content-wrap {
  border-top: 1px solid var(--border-primary);
}
[data-theme="dark"] .dashboard-content-wrap .container-fluid {
  isolation: isolate;
}
[data-theme="dark"] .dashboard-heading h3,
[data-theme="dark"] .dashboard-heading-title {
  color: var(--text-primary);
}
[data-theme="dark"] .dashboard-copyright-content {
  border-top: 1px solid var(--border-primary);
}
[data-theme="dark"] .dashboard-copyright-content .copy-desc {
  color: var(--text-tertiary);
}

/* ── KPI / stat cards ──────────────────────────────────────────── */
[data-theme="dark"] .icon-element-bg {
  background-color: var(--bg-tertiary);
}

/* ================================================================
   CHARTS & VISUALIZATIONS (canvas wrappers)
   ================================================================ */
[data-theme="dark"] .chart-container,
[data-theme="dark"] [class*="chart-wrap"],
[data-theme="dark"] .performance-chart-wrap {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* ================================================================
   BREADCRUMBS
   ================================================================ */
[data-theme="dark"] .breadcrumb {
  background-color: var(--bg-secondary);
}
[data-theme="dark"] .breadcrumb-item a {
  color: var(--text-secondary);
}
[data-theme="dark"] .breadcrumb-item.active {
  color: var(--text-tertiary);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-tertiary);
}

/* ================================================================
   PAGINATION (Bootstrap)
   ================================================================ */
[data-theme="dark"] .page-item .page-link {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--accent-coral);
  border-color: var(--accent-coral);
  color: #FFFFFF;
}
[data-theme="dark"] .page-item .page-link:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--bg-tertiary);
  color: var(--text-disabled);
}

/* ================================================================
   TOOLTIPS & POPOVERS
   ================================================================ */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}
[data-theme="dark"] .bs-tooltip-top .arrow::before    { border-top-color: var(--bg-tertiary); }
[data-theme="dark"] .bs-tooltip-bottom .arrow::before { border-bottom-color: var(--bg-tertiary); }
[data-theme="dark"] .bs-tooltip-left .arrow::before   { border-left-color: var(--bg-tertiary); }
[data-theme="dark"] .bs-tooltip-right .arrow::before  { border-right-color: var(--bg-tertiary); }

[data-theme="dark"] .popover {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}
[data-theme="dark"] .popover-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
  color: var(--text-primary);
}
[data-theme="dark"] .popover-body {
  color: var(--text-secondary);
}

/* ================================================================
   PROGRESS BARS
   ================================================================ */
[data-theme="dark"] .progress {
  background-color: var(--bg-tertiary);
}
[data-theme="dark"] .progress-bar {
  background-color: var(--accent-coral);
}

/* ================================================================
   LIST GROUPS
   ================================================================ */
[data-theme="dark"] .list-group-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}
[data-theme="dark"] .list-group-item.active {
  background-color: var(--accent-coral);
  border-color: var(--accent-coral);
  color: #FFFFFF;
}
[data-theme="dark"] .list-group-item-action:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ================================================================
   NAV TABS / PILLS
   ================================================================ */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-primary);
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--border-secondary);
  color: var(--text-primary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary) var(--border-primary) var(--bg-secondary);
  color: var(--accent-coral);
}
[data-theme="dark"] .nav-pills .nav-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--accent-coral);
  color: #FFFFFF;
}

/* ================================================================
   TAB CONTENT
   ================================================================ */
[data-theme="dark"] .tab-content {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

/* ================================================================
   DROPDOWN (Bootstrap)
   ================================================================ */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
[data-theme="dark"] .dropdown-item {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--border-primary);
}

/* ================================================================
   PRELOADER
   ================================================================ */
[data-theme="dark"] .preloader {
  background-color: var(--preloader-bg);
}

[data-theme="dark"] #pageLoader .page-loader__backdrop {
  background: var(--page-loader-glass-bg, rgba(13, 17, 23, 0.52));
}

/* ================================================================
   SCROLL-TO-TOP
   ================================================================ */
[data-theme="dark"] #scroll-top {
  background-color: var(--accent-coral);
  color: #FFFFFF;
}

/* ================================================================
   BORDER UTILITY OVERRIDES
   ================================================================ */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .border-right-gray {
  border-right-color: var(--border-primary) !important;
}

/* ================================================================
   RATING STARS
   ================================================================ */
[data-theme="dark"] .la-star {
  color: var(--accent-coral);
}
[data-theme="dark"] .la-star-o {
  color: var(--text-tertiary);
}
[data-theme="dark"] .rating-number {
  color: var(--text-primary);
}
[data-theme="dark"] .rating-total {
  color: var(--text-tertiary);
}

/* ================================================================
   IMAGES & MEDIA — subtle treatment in dark mode
   ================================================================ */
[data-theme="dark"] .card-image img,
[data-theme="dark"] .cat__img,
[data-theme="dark"] .card-img-top {
  filter: brightness(.92) contrast(1.05);
}
[data-theme="dark"] .generic-img-box .img__item {
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

/* ================================================================
   QUILL EDITOR
   ================================================================ */
[data-theme="dark"] .ql-container,
[data-theme="dark"] .ql-editor {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}
[data-theme="dark"] .ql-toolbar {
  background-color: var(--bg-tertiary);
  border-color: var(--input-border);
}
[data-theme="dark"] .ql-toolbar button,
[data-theme="dark"] .ql-toolbar .ql-picker-label {
  color: var(--text-secondary);
}
[data-theme="dark"] .ql-toolbar .ql-stroke {
  stroke: var(--text-secondary);
}
[data-theme="dark"] .ql-toolbar .ql-fill {
  fill: var(--text-secondary);
}

/* ================================================================
   JQUERY-TE (text editor)
   ================================================================ */
[data-theme="dark"] .jqte {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
[data-theme="dark"] .jqte_editor {
  background-color: var(--input-bg);
  color: var(--text-primary);
}
[data-theme="dark"] .jqte_toolbar {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
}

/* ================================================================
   EMOJI AREA
   ================================================================ */
[data-theme="dark"] .emojionearea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
}
[data-theme="dark"] .emojionearea .emojionearea-editor {
  color: var(--text-primary);
}

/* ================================================================
   SESSION-TIMEOUT WARNING
   ================================================================ */
[data-theme="dark"] .session-timeout-modal,
[data-theme="dark"] .session-timeout-warning {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* ================================================================
   CUSTOM SCROLLBAR
   ================================================================ */
[data-theme="dark"] .custom-scrollbar-styled::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}
[data-theme="dark"] .custom-scrollbar-styled::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}
[data-theme="dark"]::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

/* ================================================================
   UI-DEPTH SYSTEM overrides
   ================================================================ */
[data-theme="dark"] .ui-depth-overlay {
  background-color: var(--modal-overlay);
}

/* ================================================================
   EXAM-MODE overrides — see assets/css/exam-mode.css
   (dark-mode rules live inside exam-mode.css itself so they win
    over its light defaults, since it is loaded after this file.)
   ================================================================ */
[data-theme="dark"] body.exam-mode {
  background-color: var(--bg-primary) !important; 
}

/* ================================================================
   MENU-SEARCH — command palette (#menu-search-panel)
   ================================================================ */
[data-theme="dark"] #menu-search-panel .menu-search-inner {
  background: var(--card-bg);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-purple-rgb), 0.06);
}

[data-theme="dark"] .menu-search-input {
  background: var(--bg-tertiary);
  color: var(--input-text);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .menu-search-input::placeholder {
  color: var(--text-tertiary);
}

/* Results list: slightly recessed vs header field for scanability */
[data-theme="dark"] .menu-search-results {
  background: var(--bg-primary);
  scrollbar-color: var(--scrollbar-thumb) var(--bg-primary);
}

[data-theme="dark"] .menu-search-results::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

[data-theme="dark"] .menu-search-item {
  color: var(--text-primary);
}

[data-theme="dark"] .menu-search-item:hover,
[data-theme="dark"] .menu-search-item.menu-search-item-selected {
  background: var(--sidebar-active);
  color: var(--accent-coral);
}

[data-theme="dark"] .menu-search-item mark {
  background: rgba(var(--accent-coral-rgb), 0.28);
  color: var(--text-primary);
}

[data-theme="dark"] .menu-search-category {
  color: var(--text-tertiary);
}

[data-theme="dark"] .menu-search-empty {
  color: var(--text-tertiary);
}

[data-theme="dark"] .search-menu-toggle:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ================================================================
   STREAK INDICATOR
   ================================================================ */
[data-theme="dark"] .streak-indicator-wrap {
  color: var(--text-primary);
}

/* ================================================================
   SECTION-SPECIFIC — padding / background areas
   ================================================================ */
[data-theme="dark"] .section--padding {
  background-color: var(--bg-primary);
}

/* ================================================================
   FANCYBOX
   ================================================================ */
[data-theme="dark"] .fancybox-content {
  background-color: var(--bg-secondary);
}

/* ================================================================
   OWL CAROUSEL
   ================================================================ */
[data-theme="dark"] .owl-nav button {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .owl-dot span {
  background-color: var(--bg-accent);
}
[data-theme="dark"] .owl-dot.active span {
  background-color: var(--accent-coral);
}

/* ================================================================
   ACCESSIBILITY — Focus states
   ================================================================ */
[data-theme="dark"] *:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 2px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 2px;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   CLIENT SIDEBAR — hardcoded color overrides
   ================================================================ */
[data-theme="dark"] #sidenav-main.client-sidenav {
  background-color: var(--sidebar-bg) !important;
  border-right-color: var(--border-primary) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.3) !important;
}
[data-theme="dark"] .client-sidenav .nav-section-header {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .client-sidenav .nav-child-link {
  color: var(--sidebar-text) !important;
}
[data-theme="dark"] .client-sidenav .nav-child-link:hover {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.06) !important;
}
[data-theme="dark"] .client-sidenav .nav-child-item.page-active .nav-child-link {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.1) !important;
  border-right-color: var(--accent-coral) !important;
}

/* ================================================================
   ADMIN SIDEBAR — hardcoded color overrides
   ================================================================ */
[data-theme="dark"] .admin-sidebar .admin-nav-section {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-parent-btn {
  color: var(--sidebar-text) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-parent-btn:hover {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.06) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-parent-btn .admin-nav-chevron {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-parent.has-active .admin-nav-parent-btn {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.06) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-child-link {
  color: var(--sidebar-text) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-child-link:hover {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.06) !important;
}
[data-theme="dark"] .admin-sidebar .admin-nav-child-item.page-active .admin-nav-child-link {
  color: var(--accent-coral) !important;
  background-color: rgba(var(--accent-coral-rgb),.1) !important;
  border-right-color: var(--accent-coral) !important;
}

/* ================================================================
   CLIENT DASHBOARD — Naxlex action cards, donut, explore cards
   ================================================================ */
[data-theme="dark"] .naxlex-action-card {
  border-color: var(--border-primary) !important;
  background-color: var(--card-bg) !important;
}
[data-theme="dark"] .naxlex-action-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
  border-color: rgba(var(--accent-coral-rgb),.35) !important;
}
[data-theme="dark"] .naxlex-card-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .naxlex-card-cta {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .naxlex-donut-center {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .naxlex-mini-bar {
  background-color: var(--bg-accent) !important;
}

/* Success banner */
[data-theme="dark"] .naxlex-success-banner {
  background: linear-gradient(to right, rgba(var(--accent-coral-rgb),.08), transparent) !important;
  border-left-color: var(--accent-coral) !important;
}

/* Explore cards */
[data-theme="dark"] .naxlex-explore-card {
  border-color: var(--border-primary) !important;
  background-color: var(--card-bg) !important;
}

/* Dashboard action cards */
[data-theme="dark"] .dashboard-action-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .dashboard-action-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
  border-color: rgba(var(--accent-coral-rgb),.5) !important;
}
[data-theme="dark"] .dashboard-action-card .card-desc {
  color: var(--text-tertiary) !important;
}

/* Quick links */
[data-theme="dark"] .dashboard-quick-link {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .dashboard-quick-link:hover {
  background: rgba(var(--accent-coral-rgb),.08) !important;
  border-color: rgba(var(--accent-coral-rgb),.35) !important;
  color: var(--accent-coral) !important;
}

/* Section labels */
[data-theme="dark"] .dashboard-section .section-label {
  color: var(--text-tertiary) !important;
}

/* Chances-of-passing gauge */
[data-theme="dark"] .chances-gauge-bg {
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .chances-info-icon,
[data-theme="dark"] .chances-bubble-icon {
  background: var(--bg-tertiary) !important;
  color: var(--info) !important;
}
[data-theme="dark"] .chances-svg-label {
  fill: var(--text-primary) !important;
}
[data-theme="dark"] .chances-gauge-caption {
  color: var(--success) !important;
}

/* ================================================================
   ADMIN NAV LAYER — overlay overrides
   ================================================================ */
[data-theme="dark"] .off-canvas-menu.dashboard-off-canvas-menu {
  background-color: var(--sidebar-bg) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.4) !important;
}

/* ================================================================
   ADMIN — Publishing, UDA KPI strips, command-center tiles
   (publishing.php, users.php, live-classes, marketing, applications,
    flashes, services, sheets, examiner views — inline #fff / gray)
   ================================================================ */

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

/* ── Content publishing — alerts / recommended steps tiles ─────── */
[data-theme="dark"] .publishing-meta {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .publishing-kpi-card,
[data-theme="dark"] .publishing-domain-card {
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .publishing-domain-card:hover {
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .publishing-tile {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .publishing-tile-danger { border-left-color: var(--danger) !important; }
[data-theme="dark"] .publishing-tile-warning { border-left-color: var(--warning) !important; }
[data-theme="dark"] .publishing-tile-info { border-left-color: var(--info) !important; }
[data-theme="dark"] .publishing-tile-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .publishing-tile-icon {
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .publishing-mono {
  color: var(--text-primary) !important;
}

/* ── Users / live classes / marketing KPI (users-dashboard.css) ─ */
[data-theme="dark"] .uda-kpi-tile {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .uda-kpi-tile[data-filter]:hover {
  box-shadow: var(--shadow-md) !important;
}
[data-theme="dark"] .uda-kpi-tile--primary { border-left-color: #5b8cff !important; }
[data-theme="dark"] .uda-kpi-tile--primary:hover { box-shadow: 0 8px 24px rgba(91, 140, 255, .22) !important; }
[data-theme="dark"] .uda-kpi-tile--success { border-left-color: #3dd68c !important; }
[data-theme="dark"] .uda-kpi-tile--success:hover { box-shadow: 0 8px 24px rgba(61, 214, 140, .18) !important; }
[data-theme="dark"] .uda-kpi-tile--info { border-left-color: #4ec9f0 !important; }
[data-theme="dark"] .uda-kpi-tile--info:hover { box-shadow: 0 8px 24px rgba(78, 201, 240, .18) !important; }
[data-theme="dark"] .uda-kpi-tile--warning { border-left-color: #e6b422 !important; }
[data-theme="dark"] .uda-kpi-tile--warning:hover { box-shadow: 0 8px 24px rgba(230, 180, 34, .22) !important; }
[data-theme="dark"] .uda-kpi-tile--secondary { border-left-color: #8b95a8 !important; }
[data-theme="dark"] .uda-kpi-tile--secondary:hover { box-shadow: 0 8px 24px rgba(139, 149, 168, .18) !important; }

[data-theme="dark"] .uda-kpi-muted,
[data-theme="dark"] .uda-kpi-sub {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .uda-kpi-cc-kpi--primary { color: #7aa3ff !important; }
[data-theme="dark"] .uda-kpi-cc-kpi--success { color: #5ce39e !important; }
[data-theme="dark"] .uda-kpi-cc-kpi--info { color: #5ecfff !important; }
[data-theme="dark"] .uda-kpi-cc-kpi--warning { color: #f0c14c !important; }
[data-theme="dark"] .uda-kpi-cc-kpi--secondary { color: var(--text-secondary) !important; }

[data-theme="dark"] .uda-kpi-cc-icon.uda-icon-primary {
  background: rgba(91, 140, 255, .2) !important;
  color: #9cb8ff !important;
}
[data-theme="dark"] .uda-kpi-cc-icon.uda-icon-success {
  background: rgba(72, 187, 120, .18) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .uda-kpi-cc-icon.uda-icon-info {
  background: rgba(78, 201, 240, .18) !important;
  color: #7ee0ff !important;
}
[data-theme="dark"] .uda-kpi-cc-icon.uda-icon-warning {
  background: rgba(230, 180, 34, .22) !important;
  color: #f0c14c !important;
}
[data-theme="dark"] .uda-kpi-cc-icon.uda-icon-secondary {
  background: rgba(139, 149, 168, .22) !important;
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .uda-table-loading {
  background: rgba(22, 27, 37, .93) !important;
}
[data-theme="dark"] .uda-table-loading-spinner {
  border-color: rgba(91, 140, 255, .28) !important;
  border-top-color: #7aa3ff !important;
}

[data-theme="dark"] #uda-insights-tabs {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] #uda-insights-tabs .nav-link {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] #uda-insights-tabs .nav-link:hover {
  color: var(--accent-coral) !important;
  border-color: var(--border-secondary) var(--border-secondary) transparent !important;
}
[data-theme="dark"] #uda-insights-tabs .nav-link.active {
  color: var(--accent-coral) !important;
  background: var(--card-bg) !important;
  border-color: var(--border-primary) var(--border-primary) transparent !important;
  border-bottom-color: var(--card-bg) !important;
}

/* ── Shared “command center” KPI tiles (inline styles in PHP) ──── */
[data-theme="dark"] .app-cc-tile,
[data-theme="dark"] .fl-cc-tile,
[data-theme="dark"] .sr-cc-tile,
[data-theme="dark"] .sheet-cc-tile,
[data-theme="dark"] .examiner-app-cc-tile {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .app-cc-tile:hover,
[data-theme="dark"] .fl-cc-tile:hover,
[data-theme="dark"] .sr-cc-tile:hover,
[data-theme="dark"] .sheet-cc-tile:hover,
[data-theme="dark"] .examiner-app-cc-tile:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-secondary) !important;
}

[data-theme="dark"] .sheet-cc-card {
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .app-muted,
[data-theme="dark"] .fl-muted,
[data-theme="dark"] .sheet-cc-muted {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .app-cc-kpi,
[data-theme="dark"] .fl-cc-kpi,
[data-theme="dark"] .sr-cc-kpi,
[data-theme="dark"] .sheet-cc-kpi,
[data-theme="dark"] .examiner-app-cc-kpi,
[data-theme="dark"] .sub-cc-kpi {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .app-kpi-sub,
[data-theme="dark"] .sub-cc-kpi-sub {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .sub-cc-muted {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .sub-cc-tile {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .sub-cc-tile:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .sub-cc-pill {
  border-color: var(--border-secondary) !important;
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .sub-cc-flag-new {
  background: rgba(91, 140, 255, .16) !important;
  color: #9cb8ff !important;
  border-color: rgba(91, 140, 255, .38) !important;
}
[data-theme="dark"] .sub-cc-flag-warn {
  background: rgba(246, 173, 85, .14) !important;
  color: var(--warning) !important;
  border-color: rgba(246, 173, 85, .35) !important;
}
[data-theme="dark"] .sub-cc-icon.soft {
  background: rgba(91, 140, 255, .2) !important;
  color: #9cb8ff !important;
}
[data-theme="dark"] .sub-cc-icon.green {
  background: rgba(72, 187, 120, .2) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .sub-cc-icon.amber {
  background: rgba(246, 173, 85, .2) !important;
  color: var(--warning) !important;
}
[data-theme="dark"] .sub-cc-icon.red {
  background: rgba(245, 101, 101, .18) !important;
  color: var(--danger) !important;
}
[data-theme="dark"] .sub-cc-icon.blue {
  background: rgba(66, 153, 225, .2) !important;
  color: var(--info) !important;
}
[data-theme="dark"] .sub-cc-icon.gray {
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] #sub-row-panel {
  background: var(--card-bg) !important;
  box-shadow: -4px 0 28px rgba(0, 0, 0, .5) !important;
  border-left: 1px solid var(--border-primary);
}

[data-theme="dark"] .examiner-app-muted {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .examiner-app-kpi-sub {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .examiner-app-pill {
  border-color: var(--border-secondary) !important;
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .examiner-app-flag-new {
  background: rgba(91, 140, 255, .16) !important;
  color: #9cb8ff !important;
  border-color: rgba(91, 140, 255, .38) !important;
}
[data-theme="dark"] .examiner-app-flag-warn {
  background: rgba(246, 173, 85, .14) !important;
  color: var(--warning) !important;
  border-color: rgba(246, 173, 85, .35) !important;
}
[data-theme="dark"] .examiner-app-cc-icon.soft {
  background: rgba(91, 140, 255, .2) !important;
  color: #9cb8ff !important;
}
[data-theme="dark"] .examiner-app-cc-icon.green {
  background: rgba(72, 187, 120, .2) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .examiner-app-cc-icon.amber {
  background: rgba(246, 173, 85, .2) !important;
  color: var(--warning) !important;
}
[data-theme="dark"] .examiner-app-cc-icon.red {
  background: rgba(245, 101, 101, .18) !important;
  color: var(--danger) !important;
}

[data-theme="dark"] .app-cc-icon.soft,
[data-theme="dark"] .fl-cc-icon.soft,
[data-theme="dark"] .sheet-cc-icon.soft {
  background: rgba(91, 140, 255, .2) !important;
  color: #9cb8ff !important;
}
[data-theme="dark"] .app-cc-icon.green,
[data-theme="dark"] .fl-cc-icon.green,
[data-theme="dark"] .sheet-cc-icon.green {
  background: rgba(72, 187, 120, .2) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .app-cc-icon.gray,
[data-theme="dark"] .fl-cc-icon.gray,
[data-theme="dark"] .sheet-cc-icon.gray {
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .app-cc-icon.amber,
[data-theme="dark"] .fl-cc-icon.amber,
[data-theme="dark"] .sheet-cc-icon.amber {
  background: rgba(246, 173, 85, .2) !important;
  color: var(--warning) !important;
}
[data-theme="dark"] .app-cc-icon.red,
[data-theme="dark"] .fl-cc-icon.red,
[data-theme="dark"] .sheet-cc-icon.red {
  background: rgba(245, 101, 101, .18) !important;
  color: var(--danger) !important;
}

[data-theme="dark"] .app-pill,
[data-theme="dark"] .fl-pill,
[data-theme="dark"] .sheet-cc-pill {
  border-color: var(--border-secondary) !important;
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .app-flag-new,
[data-theme="dark"] .fl-flag-new {
  background: rgba(91, 140, 255, .16) !important;
  color: #9cb8ff !important;
  border-color: rgba(91, 140, 255, .38) !important;
}
[data-theme="dark"] .app-flag-warn {
  background: rgba(246, 173, 85, .14) !important;
  color: var(--warning) !important;
  border-color: rgba(246, 173, 85, .35) !important;
}
[data-theme="dark"] .app-flag-danger {
  background: rgba(245, 101, 101, .14) !important;
  color: #ff9b9b !important;
  border-color: rgba(245, 101, 101, .35) !important;
}

[data-theme="dark"] .fl-badge.neutral {
  background: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .fl-badge.easy {
  background: rgba(72, 187, 120, .16) !important;
  color: var(--success) !important;
  border-color: rgba(72, 187, 120, .35) !important;
}
[data-theme="dark"] .fl-badge.medium {
  background: rgba(66, 153, 225, .16) !important;
  color: var(--info) !important;
  border-color: rgba(66, 153, 225, .35) !important;
}
[data-theme="dark"] .fl-badge.hard {
  background: rgba(246, 173, 85, .16) !important;
  color: var(--warning) !important;
  border-color: rgba(246, 173, 85, .35) !important;
}
[data-theme="dark"] .fl-flag-unlinked {
  background: rgba(246, 173, 85, .12) !important;
  color: var(--warning) !important;
  border-color: rgba(246, 173, 85, .32) !important;
}
[data-theme="dark"] .fl-flag-draft {
  background: var(--bg-accent) !important;
  color: var(--text-tertiary) !important;
  border-color: var(--border-secondary) !important;
}

[data-theme="dark"] .app-row-overdue {
  background: rgba(245, 101, 101, .07) !important;
}
[data-theme="dark"] .app-row-attn {
  background: rgba(246, 173, 85, .08) !important;
}

[data-theme="dark"] .alert-light {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .alert-light .btn,
[data-theme="dark"] .alert-light .btn-sm {
  /* keep outline buttons readable on tinted bar */
  border-color: var(--border-secondary);
}

[data-theme="dark"] .badge-dark {
  background: var(--bg-accent) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-secondary);
}

[data-theme="dark"] .qbe-wrap .card.border-0.shadow-sm {
  border: 1px solid var(--card-border) !important;
}
[data-theme="dark"] .qbe-wrap .qbe-kpi {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
}
[data-theme="dark"] .qbe-wrap .qbe-kpi-label {
  color: var(--text-tertiary);
}
[data-theme="dark"] .qbe-wrap .qbe-kpi-value {
  color: var(--text-primary);
}
[data-theme="dark"] .qbe-wrap .qbe-kpi--published .qbe-kpi-value {
  color: var(--success);
}
[data-theme="dark"] .qbe-wrap .qbe-kpi--draft .qbe-kpi-value {
  color: var(--warning);
}
[data-theme="dark"] .qbe-wrap .qbe-kpi--review .qbe-kpi-value {
  color: var(--info);
}

/* ================================================================
   BUILDER / QUESTION-TYPE STUDIO  (Quest-types/admin/builder.php)
   All qt-* inline styles use hardcoded light colours; override here.
   ================================================================ */

/* ── Shared scaffold ─────────────────────────────────────────────── */
[data-theme="dark"] .qt-card,
[data-theme="dark"] .qt-side-section,
[data-theme="dark"] .qt-guided-section,
[data-theme="dark"] .qt-hl-box,
[data-theme="dark"] .qt-mrn-box,
[data-theme="dark"] .qt-mx-box,
[data-theme="dark"] .qt-si-box,
[data-theme="dark"] .qt-ddc-box,
[data-theme="dark"] .qt-ddt-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}

/* Inner "card" sub-panels (fafafa / f8fafc bg) */
[data-theme="dark"] .qt-mrn-card,
[data-theme="dark"] .qt-mx-card,
[data-theme="dark"] .qt-si-card,
[data-theme="dark"] .qt-ddc-card,
[data-theme="dark"] .qt-ddt-card {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

/* Stage / editor areas (dashed outline boxes) */
[data-theme="dark"] .qt-mrn-stage,
[data-theme="dark"] .qt-mx-stage,
[data-theme="dark"] .qt-si-stage,
[data-theme="dark"] .qt-ddc-stage,
[data-theme="dark"] .qt-ddt-stage,
[data-theme="dark"] .qt-hs-stage {
  background: var(--bg-primary) !important;
  border-color: var(--border-secondary) !important;
}

/* Preview sub-panels */
[data-theme="dark"] .qt-mrn-prev,
[data-theme="dark"] .qt-si-prev,
[data-theme="dark"] .qt-ddc-prev {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

/* MRN editor inner box (JS-built; no inline styles) + preview list */
[data-theme="dark"] .qt-mrn-editor-box {
  background: var(--bg-primary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mrn-editor-title,
[data-theme="dark"] .qt-mrn-panel-heading {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mrn-preview-list {
  color: var(--text-primary);
}

/* Light theme: MRN builder surfaces align with shared border tokens */
[data-theme="light"] .qt-mrn-editor-box,
[data-theme="light"] .qt-mrn-prev,
[data-theme="light"] .qt-mrn-stage,
[data-theme="light"] .qt-mrn-card,
[data-theme="light"] .qt-mrn-opt:not(.disabled),
[data-theme="light"] .qt-mrn-pill,
[data-theme="light"] .qt-mrn-tag,
[data-theme="light"] .qt-mrn-wrap {
  border-color: var(--border-secondary, #cbd5e0) !important;
}

/* MRN learner UI (executor: .qt-mrn-wrap) — embedded styles load in-question; reinforce themes */
[data-theme="dark"] .qt-mrn-wrap {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mrn-opt {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-mrn-opt .txt {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mrn-opt.sel {
  outline-color: rgba(66, 153, 225, 0.55) !important;
  background: rgba(66, 153, 225, 0.12) !important;
  border-color: rgba(66, 153, 225, 0.45) !important;
}
[data-theme="dark"] .qt-mrn-opt.ok {
  border-color: rgba(72, 187, 120, 0.5) !important;
  background: rgba(72, 187, 120, 0.12) !important;
}
[data-theme="dark"] .qt-mrn-opt.bad {
  border-color: rgba(245, 101, 101, 0.45) !important;
  background: rgba(245, 101, 101, 0.1) !important;
}
[data-theme="dark"] .qt-mrn-msg {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-mrn-msg.ok {
  background: rgba(72, 187, 120, 0.12) !important;
  border-color: rgba(72, 187, 120, 0.35) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .qt-mrn-msg.err {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
  color: var(--danger) !important;
}

/* Dropdown cloze learner UI (executor: .qt-dc-box) */
[data-theme="dark"] .qt-dc-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] select.qt-dc-sel,
[data-theme="dark"] .qt-dc-sel.form-control {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .qt-dc-sel.ok {
  border-color: rgba(72, 187, 120, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.22) inset !important;
}
[data-theme="dark"] .qt-dc-sel.bad {
  border-color: rgba(245, 101, 101, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.18) inset !important;
}
[data-theme="dark"] .qt-dc-msg {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-dc-msg.ok {
  background: rgba(72, 187, 120, 0.12) !important;
  border-color: rgba(72, 187, 120, 0.35) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .qt-dc-msg.err {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
  color: var(--danger) !important;
}

[data-theme="light"] .qt-dc-box {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] select.qt-dc-sel:not(.ok):not(.bad),
[data-theme="light"] .qt-dc-sel.form-control:not(.ok):not(.bad) {
  border-color: var(--border-secondary, #cbd5e0) !important;
}

/* ── Header / brand area ─────────────────────────────────────────── */
[data-theme="dark"] .qt-builder-brand-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-builder-brand-sub {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-head-btn.is-muted {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
}

/* ── Side panel ──────────────────────────────────────────────────── */
[data-theme="dark"] .qt-side-title {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-side-title .dot {
  background: var(--bg-accent) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-side-sub {
  color: var(--text-tertiary) !important;
}

/* ── Guided section labels / helpers ────────────────────────────── */
[data-theme="dark"] .qt-guided-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-helper,
[data-theme="dark"] .qt-mrn-help,
[data-theme="dark"] .qt-mx-help,
[data-theme="dark"] .qt-si-help,
[data-theme="dark"] .qt-ddc-help,
[data-theme="dark"] .qt-ddt-help,
[data-theme="dark"] .qt-hl-counter {
  color: var(--text-tertiary) !important;
}

/* ── Tutorial notes panels (dbeafe/eff6ff bg) ───────────────────── */
[data-theme="dark"] .qt-mrn-notes,
[data-theme="dark"] .qt-si-notes,
[data-theme="dark"] .qt-ddc-notes,
[data-theme="dark"] .qt-ddt-notes {
  background: rgba(66, 153, 225, 0.08) !important;
  border-color: rgba(66, 153, 225, 0.25) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-mrn-notes code,
[data-theme="dark"] .qt-ddc-notes code,
[data-theme="dark"] .qt-ddt-notes code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

/* ── Pill / tag badges ───────────────────────────────────────────── */
[data-theme="dark"] .qt-hs-pill,
[data-theme="dark"] .qt-mrn-pill,
[data-theme="dark"] .qt-mrn-tag,
[data-theme="dark"] .qt-mx-pill,
[data-theme="dark"] .qt-si-pill,
[data-theme="dark"] .qt-si-tag,
[data-theme="dark"] .qt-ddc-pill,
[data-theme="dark"] .qt-ddc-tag {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mrn-tag.ok,
[data-theme="dark"] .qt-si-tag.ok,
[data-theme="dark"] .qt-ddc-tag.ok {
  background: rgba(72, 187, 120, 0.15) !important;
  border-color: rgba(72, 187, 120, 0.4) !important;
  color: var(--success) !important;
}

/* ── Collapse button ─────────────────────────────────────────────── */
[data-theme="dark"] .qt-collapse-btn {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-secondary) !important;
}

/* ── Tooltip trigger icon ────────────────────────────────────────── */
[data-theme="dark"] .ui-tip-btn {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-secondary) !important;
}

/* ── Status / message boxes ──────────────────────────────────────── */
[data-theme="dark"] .qt-mx-prev-msg,
[data-theme="dark"] .qt-ddc-msg,
[data-theme="dark"] .qt-ddt-prev-msg {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-mx-prev-msg.ok,
[data-theme="dark"] .qt-ddc-msg.ok,
[data-theme="dark"] .qt-ddt-prev-msg.ok {
  background: rgba(72, 187, 120, 0.12) !important;
  border-color: rgba(72, 187, 120, 0.3) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .qt-mx-prev-msg.err,
[data-theme="dark"] .qt-ddc-msg.err,
[data-theme="dark"] .qt-ddt-prev-msg.err {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.3) !important;
  color: var(--danger) !important;
}

/* "Next" preview button (light bg) */
[data-theme="dark"] .qt-mx-next,
[data-theme="dark"] .qt-ddc-next,
[data-theme="dark"] .qt-ddt-next {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}

/* ── Matrix table ────────────────────────────────────────────────── */
[data-theme="dark"] table.qt-mx-t th,
[data-theme="dark"] table.qt-mx-t td {
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] table.qt-mx-t th {
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .qt-mx-cell {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mx-cell.ok {
  background: rgba(72, 187, 120, 0.12) !important;
  border-color: rgba(72, 187, 120, 0.4) !important;
}
[data-theme="dark"] .qt-mx-cell.bad {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.3) !important;
}
[data-theme="dark"] .qt-mx-cell.sel {
  background: rgba(66, 153, 225, 0.12) !important;
  border-color: rgba(66, 153, 225, 0.4) !important;
}

/* ── Region card (hotspot) ───────────────────────────────────────── */
[data-theme="dark"] .qt-region-card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-region-card.is-selected {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-blue-rgb), 0.18) !important;
}
[data-theme="dark"] .qt-region-key {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-region-correct {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-region-delete {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.4) !important;
  color: var(--danger) !important;
}
[data-theme="dark"] .qt-region-delete:hover {
  background: rgba(245, 101, 101, 0.2) !important;
}

/* ── Asset gallery tiles ─────────────────────────────────────────── */
[data-theme="dark"] .qt-asset-tile {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-asset-tile:hover {
  border-color: var(--border-hover) !important;
}
[data-theme="dark"] .qt-asset-thumb {
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .qt-asset-name {
  color: var(--text-secondary) !important;
}

/* SATA-images tile grid */
[data-theme="dark"] .qt-si-tile {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-si-tile img {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-si-tile .cap {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-si-tile.sel {
  background: rgba(66, 153, 225, 0.1) !important;
  outline-color: rgba(66, 153, 225, 0.4) !important;
}

/* SATA-images row */
[data-theme="dark"] .qt-si-row {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

/* SATA-images modal */
[data-theme="dark"] .qt-si-modal-card {
  background: var(--card-bg) !important;
}
[data-theme="dark"] .qt-si-modal-head {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* ── Highlight text / passage (executor learner + EHR preview) ───── */
[data-theme="dark"] .qt-hl-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-hl-help strong {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-hl-passage {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
  border-style: solid !important;
  border-width: 1px !important;
  --qt-hl-tok-idle: rgba(245, 158, 11, 0.22);
  --qt-hl-tok-hover-bg: rgba(245, 158, 11, 0.32);
  --qt-hl-tok-hover-ring: rgba(251, 191, 36, 0.55);
  --qt-hl-sel-bg: rgba(66, 153, 225, 0.2);
  --qt-hl-sel-ring: rgba(66, 153, 225, 0.55);
  --qt-hl-sel-hover-bg: rgba(245, 158, 11, 0.28);
  --qt-hl-sel-hover-ring: rgba(251, 191, 36, 0.65);
}
[data-theme="dark"] .qt-hl-token:not(.lock):hover {
  background: var(--qt-hl-tok-hover-bg) !important;
  outline: 1px solid var(--qt-hl-tok-hover-ring) !important;
}
[data-theme="dark"] .qt-hl-token:not(.lock) {
  background: var(--qt-hl-tok-idle) !important;
}
[data-theme="dark"] .qt-hl-token.sel {
  outline: 2px solid var(--qt-hl-sel-ring) !important;
  background: var(--qt-hl-sel-bg) !important;
}
[data-theme="dark"] .qt-hl-token.sel:not(.lock):hover {
  outline: 2px solid var(--qt-hl-sel-hover-ring) !important;
  background: var(--qt-hl-sel-hover-bg) !important;
}
[data-theme="dark"] .qt-hl-token.ok {
  background: rgba(72, 187, 120, 0.18) !important;
  outline: 2px solid rgba(72, 187, 120, 0.55) !important;
}
[data-theme="dark"] .qt-hl-token.bad {
  background: rgba(245, 101, 101, 0.14) !important;
  outline: 2px solid rgba(245, 101, 101, 0.5) !important;
}
[data-theme="dark"] .qt-hl-token.missed {
  outline: 2px dashed rgba(72, 187, 120, 0.75) !important;
}
[data-theme="dark"] .qt-hl-token.distr {
  background: rgba(66, 153, 225, 0.15) !important;
  outline-color: rgba(66, 153, 225, 0.4) !important;
}

[data-theme="light"] .qt-hl-box,
[data-theme="light"] .qt-hl-passage {
  border-color: var(--border-secondary, #cbd5e0) !important;
}

/* Sentence helper panel */
[data-theme="dark"] #qt_hl_sentence_panel {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}

/* ── Drop-Down Cloze drag items ──────────────────────────────────── */
[data-theme="dark"] .qt-ddc-item {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ddc-item.used {
  opacity: 0.35;
}

/* ── MCQ choice rows ─────────────────────────────────────────────── */
[data-theme="dark"] .qt-mcq-choice-row {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mcq-choice-row.is-mcq-correct {
  border-color: rgba(72, 187, 120, 0.5) !important;
  background: rgba(72, 187, 120, 0.1) !important;
}
[data-theme="dark"] .qt-mcq-choice-row.is-mcq-incorrect {
  border-color: rgba(245, 101, 101, 0.4) !important;
  background: rgba(245, 101, 101, 0.08) !important;
}
[data-theme="dark"] .qt-mcq-choice-row.is-mcq-incorrect .label-text {
  color: var(--danger) !important;
}
[data-theme="dark"] .qt-mcq-choice-row.is-mcq-incorrect .form-control {
  border-color: rgba(245, 101, 101, 0.35) !important;
}
[data-theme="dark"] .qt-mcq-opt-img-preview {
  border-color: var(--border-primary) !important;
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .qt-mcq-media-modal-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary);
}
[data-theme="dark"] .qt-mcq-media-modal-head {
  background: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-mcq-asset-tile {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-mcq-asset-name {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mcq-media-path {
  color: var(--text-secondary, #94a3b8) !important;
}

/* ── Builder-wide inline help labels ────────────────────────────── */
[data-theme="dark"] .card-body .label-text {
  color: var(--text-primary);
}
[data-theme="dark"] .card-body details summary {
  color: var(--text-primary);
}
[data-theme="dark"] .card-body details .nb {
  background: #2b4acb;
  color: #fff;
}

/* ── Quill editor host ───────────────────────────────────────────── */
[data-theme="dark"] .qt-quill-host,
[data-theme="dark"] .qt-quill-host .ql-toolbar,
[data-theme="dark"] .qt-quill-host .ql-container {
  background: var(--input-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .qt-quill-host .ql-editor {
  color: var(--input-text) !important;
}
[data-theme="dark"] .qt-quill-host .ql-stroke {
  stroke: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-quill-host .ql-fill {
  fill: var(--text-secondary) !important;
}

/* ── Error-summary / tour-banner alerts ──────────────────────────── */
[data-theme="dark"] .qt-error-summary.alert-danger {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
  color: var(--danger) !important;
}
[data-theme="dark"] .qt-tour-banner.alert-info {
  background: rgba(66, 153, 225, 0.1) !important;
  border-color: rgba(66, 153, 225, 0.3) !important;
  color: var(--info) !important;
}

/* ── Select-container (custom select dropdowns in builder) ───────── */
[data-theme="dark"] .select-container-select {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ── Bow Tie (NGN) builder — qt-bt-* ────────────────────────────── */
[data-theme="dark"] .qt-bt-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-bt-col {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-bt-col h6 {
  color: var(--text-primary);
}
[data-theme="dark"] .qt-bt-item {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-bt-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-bt-status {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-bt-badge {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-bt-badge.ok {
  background: rgba(72, 187, 120, 0.15) !important;
  border-color: rgba(72, 187, 120, 0.4) !important;
}
[data-theme="dark"] .qt-bt-badge.bad {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
}
[data-theme="dark"] .qt-bt-msg.ok {
  color: var(--success) !important;
}
[data-theme="dark"] .qt-bt-msg.bad {
  color: var(--danger) !important;
}

/* ── MCQ client-data details panel (inline-style override) ───────── */
/* The element has inline style="background:#fafafa;border:1px solid #e5e7eb"
   so !important is required to beat inline specificity. */
[data-theme="dark"] .qt-mcq-client-data,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mcq-client-data summary,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data summary {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-mcq-client-data .qt-ehr-editor-surface,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data .qt-ehr-editor-surface {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-mcq-client-data .qt-ehr-editor-surface.qt-ehr-empty-surf:before,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data .qt-ehr-editor-surface.qt-ehr-empty-surf:before {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-mcq-client-data .qt-ehr-toolbar .btn,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data .qt-ehr-toolbar .btn {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-mcq-client-data .qt-ehr-editor-surface td,
[data-theme="dark"] .qt-mcq-client-data .qt-ehr-editor-surface th,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data .qt-ehr-editor-surface td,
[data-theme="dark"] .qt-client-chart.qt-mcq-client-data .qt-ehr-editor-surface th {
  border-color: var(--border-secondary) !important;
}

/* MCQ client chart — learner / practice (EHR shell from engine inline CSS) */
[data-theme="dark"] .qt-ehr-chart {
  --qt-ehr-active-tab-bg: var(--card-bg);
  --qt-ehr-active-tab-fg: var(--text-primary);
  --qt-ehr-active-tab-edge: var(--border-primary);
  --qt-ehr-active-tab-merge: var(--card-bg);
  --qt-ehr-panel-bg: var(--card-bg);
  --qt-ehr-panel-fg: var(--text-primary);
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ehr-chart-hd {
  background: linear-gradient(90deg, #0b1220, #1e293b) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ehr-tab-strip {
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .qt-ehr-tab-labels {
  background: var(--bg-tertiary) !important;
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h {
  background: var(--bg-accent) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h.qt-ehr-h-health {
  background: rgba(59, 130, 246, 0.24) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h.qt-ehr-h-nurses {
  background: rgba(99, 102, 241, 0.24) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h.qt-ehr-h-vitals {
  background: rgba(45, 212, 191, 0.22) !important;
  color: #0f172a !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h.qt-ehr-h-labs {
  background: rgba(251, 191, 36, 0.24) !important;
  color: #1c1917 !important;
}
[data-theme="dark"] .qt-ehr-tab-labels .qt-ehr-tab-h.qt-ehr-h-orders {
  background: rgba(236, 72, 153, 0.22) !important;
  color: #fce7f3 !important;
}
[data-theme="dark"] .qt-ehr-tab-panels {
  background: var(--card-bg) !important;
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ehr-tab-panels .qt-ehr-tab-panel {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ehr-panel-inner {
  color: var(--text-primary);
}
/* Bare <table> (no tr/td) or simple tables — engine injects light bg/border */
[data-theme="dark"] .qt-ehr-panel-inner table {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-secondary) !important;
  color: var(--text-primary) !important;
  border-radius: 8px;
  padding: 8px 10px;
  box-sizing: border-box;
}
[data-theme="dark"] .qt-ehr-panel-inner tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.35) !important;
}
[data-theme="dark"] .qt-ehr-panel-inner th,
[data-theme="dark"] .qt-ehr-panel-inner td {
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .qt-ehr-panel-inner th {
  background: var(--table-header-bg) !important;
}
[data-theme="dark"] .qt-ehr-acc {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ehr-acc-body {
  border-top-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ehr-acc-body th,
[data-theme="dark"] .qt-ehr-acc-body td {
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ehr-acc-body th {
  background: var(--table-header-bg) !important;
}
[data-theme="dark"] .qt-ehr-acc > summary.qt-ehr-acc-sum.qt-ehr-h-health {
  background: rgba(59, 130, 246, 0.28) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .qt-ehr-acc > summary.qt-ehr-acc-sum.qt-ehr-h-nurses {
  background: rgba(99, 102, 241, 0.28) !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .qt-ehr-acc > summary.qt-ehr-acc-sum.qt-ehr-h-vitals {
  background: rgba(45, 212, 191, 0.26) !important;
  color: #0f172a !important;
}
[data-theme="dark"] .qt-ehr-acc > summary.qt-ehr-acc-sum.qt-ehr-h-labs {
  background: rgba(251, 191, 36, 0.28) !important;
  color: #1c1917 !important;
}
[data-theme="dark"] .qt-ehr-acc > summary.qt-ehr-acc-sum.qt-ehr-h-orders {
  background: rgba(236, 72, 153, 0.26) !important;
  color: #fce7f3 !important;
}

/* ── Light theme — EHR client chart + bow tie pools (preview / exam)
      Stronger borders than --border-primary on white for legibility. ── */
[data-theme="light"] .qt-ehr-chart {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-ehr-tab-panels {
  border-top-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-ehr-panel-inner table {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-ehr-panel-inner th,
[data-theme="light"] .qt-ehr-panel-inner td {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-wrap {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-pool {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-item {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-tabbtn,
[data-theme="light"] .qt-bt-tabpanel {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-slot {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] .qt-bt-msg {
  border-color: var(--border-secondary, #cbd5e0) !important;
}
[data-theme="light"] body.qt-preview .exam-main-panel.qt-preview-panel {
  border: 1px solid var(--border-secondary, #cbd5e0);
}
[data-theme="light"] body.qt-preview .qt-preview-question-inner {
  border-bottom: 1px solid var(--border-secondary, #cbd5e0);
}

/* ── Ordered Response Builder (qt-orb-*) ────────────────────────── */
[data-theme="dark"] .qt-orb-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-orb-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-orb-status {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-orb-badge {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-orb-badge.ok {
  background: rgba(72, 187, 120, 0.15) !important;
  border-color: rgba(72, 187, 120, 0.4) !important;
}
[data-theme="dark"] .qt-orb-badge.bad {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
}
[data-theme="dark"] .qt-orb-list {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-orb-row {
  border-top-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-orb-row .handle {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-orb-row .num {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-orb-preview {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}

/* ── Dyad learner UI (qt-dyad-*) — executor uses CSS variables; reinforce surfaces ── */
[data-theme="dark"] .qt-dyad-wrap {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-dyad-box {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-dyad-box h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-dyad-sel {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .qt-dyad-msg {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-dyad-msg.ok,
[data-theme="dark"] .qt-dyad-msg.err {
  color: var(--text-primary) !important;
}
[data-theme="light"] .qt-dyad-wrap,
[data-theme="light"] .qt-dyad-box,
[data-theme="light"] .qt-dyad-sel:not(.ok):not(.bad),
[data-theme="light"] .qt-dyad-msg:not(.ok):not(.err) {
  border-color: var(--border-secondary, #cbd5e0) !important;
}

/* ── Triad learner UI (qt-triad-*) — executor uses CSS variables; reinforce surfaces ── */
[data-theme="dark"] .qt-triad-wrap {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-triad-box {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-triad-box h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-triad-sel {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
[data-theme="dark"] .qt-triad-msg {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-triad-msg.ok,
[data-theme="dark"] .qt-triad-msg.err {
  color: var(--text-primary) !important;
}
[data-theme="light"] .qt-triad-wrap,
[data-theme="light"] .qt-triad-box,
[data-theme="light"] .qt-triad-sel:not(.ok):not(.bad),
[data-theme="light"] .qt-triad-msg:not(.ok):not(.err) {
  border-color: var(--border-secondary, #cbd5e0) !important;
}

/* ── Dyad Builder (qt-dyb-*) ─────────────────────────────────────── */
[data-theme="dark"] .qt-dyb-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-dyb-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-dyb-notes {
  background: rgba(66, 153, 225, 0.08) !important;
  border-color: rgba(66, 153, 225, 0.25) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-dyb-notes code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-dyb-col {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-dyb-col h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-dyb-row {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-dyb-preview {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .qt-dyb-sel {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ── Triad Builder (qt-trb-*) ───────────────────────────────────── */
[data-theme="dark"] .qt-trb-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-trb-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-trb-notes {
  background: rgba(66, 153, 225, 0.08) !important;
  border-color: rgba(66, 153, 225, 0.25) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-trb-notes code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-trb-col {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-trb-col h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-trb-row {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-trb-preview {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}

[data-theme="dark"] #qt_editor_stem .ql-editor code {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .qt-trb-sel {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ── Drop-Down Cloze builder (Triad-style grid: qt-ddc-*) ──────── */
[data-theme="dark"] .qt-ddc-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-ddc-notes {
  background: rgba(66, 153, 225, 0.08) !important;
  border-color: rgba(66, 153, 225, 0.25) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-ddc-notes code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ddc-col {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ddc-col h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ddc-row {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ddc-preview {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .qt-ddc-sel {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ── Highlight Table Builder (qt-ht-*) ──────────────────────────── */
[data-theme="dark"] .qt-ht-box {
  background: var(--card-bg) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary);
}
[data-theme="dark"] .qt-ht-help {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qt-ht-notes {
  background: rgba(66, 153, 225, 0.08) !important;
  border-color: rgba(66, 153, 225, 0.25) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-ht-notes code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ht-card {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qt-ht-stage,
[data-theme="dark"] .qt-ht-prev-stage {
  background: var(--bg-primary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] table.qt-ht-t th,
[data-theme="dark"] table.qt-ht-t td {
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] table.qt-ht-t th {
  background: var(--bg-tertiary) !important;
}
[data-theme="dark"] .qt-ht-cell.is-token {
  outline-color: rgba(245, 158, 11, 0.75) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}
[data-theme="dark"] .qt-ht-cell.is-correct {
  outline-color: rgba(72, 187, 120, 0.75) !important;
  background: rgba(72, 187, 120, 0.12) !important;
}
[data-theme="dark"] .qt-ht-legend {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-ht-pill {
  background: var(--bg-accent) !important;
  border-color: var(--border-secondary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qt-ht-dot.none {
  background: var(--bg-accent) !important;
}
[data-theme="dark"] .qt-ht-prev-msg {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-ht-prev-msg.ok {
  background: rgba(72, 187, 120, 0.12) !important;
  border-color: rgba(72, 187, 120, 0.3) !important;
  color: var(--success) !important;
}
[data-theme="dark"] .qt-ht-prev-msg.err {
  background: rgba(245, 101, 101, 0.1) !important;
  border-color: rgba(245, 101, 101, 0.3) !important;
  color: var(--danger) !important;
}
[data-theme="dark"] .qt-ht-prev-counter {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qt-ht-prev-cell.tok:hover {
  box-shadow: 0 0 0 2px rgba(var(--accent-blue-rgb), 0.3) inset !important;
}
[data-theme="dark"] .qt-ht-prev-cell.sel {
  background: rgba(var(--accent-blue-rgb), 0.15) !important;
  border-color: rgba(var(--accent-blue-rgb), 0.4) !important;
}

[data-theme="dark"] .marketing-overview-page .card-header.bg-white {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* ================================================================
   QBANK / EXAM-SPECIFIC ELEMENTS
   ================================================================ */
[data-theme="dark"] .qbank-rn-qfactory,
[data-theme="dark"] [class*="qbank-"] {
  color: var(--text-primary);
}

[data-theme="dark"] .qfactory-hero {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-hero h1 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qfactory-step {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}
[data-theme="dark"] .qfactory-step-title {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qfactory-step-num {
  background: var(--accent-blue) !important;
  color: #fff !important;
}
[data-theme="dark"] .qfactory-pool-option label {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qfactory-pool-option input:checked + label {
  border-color: var(--accent-blue) !important;
  background: rgba(var(--accent-blue-rgb), 0.14) !important;
}
[data-theme="dark"] .qfactory-pool-option label:hover {
  border-color: var(--border-hover) !important;
}
[data-theme="dark"] .qfactory-pool-count {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qfactory-module-block {
  background: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-module-block > summary {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qfactory-module-block > summary:hover {
  background: var(--bg-accent) !important;
}
[data-theme="dark"] .qfactory-module-block > summary::after {
  border-right-color: var(--text-tertiary) !important;
  border-bottom-color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qfactory-module-meta {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qfactory-module-meta-item + .qfactory-module-meta-item::before {
  color: var(--border-secondary) !important;
}
[data-theme="dark"] .qfactory-module-inner {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-bulk-btn {
  background: var(--bg-tertiary) !important;
  color: var(--accent-blue) !important;
  border-color: rgba(var(--accent-blue-rgb), 0.45) !important;
}
[data-theme="dark"] .qfactory-bulk-btn:hover {
  background: rgba(var(--accent-blue-rgb), 0.14) !important;
  border-color: var(--accent-blue) !important;
}
[data-theme="dark"] .qfactory-module-bulk-bar {
  border-bottom-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-topic {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-topic-name {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .qfactory-subtopic-row label {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .qfactory-subtopic-count {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .qfactory-step-actions {
  border-top-color: var(--border-primary) !important;
}
[data-theme="dark"] .qfactory-hint,
[data-theme="dark"] .qfactory-hint-modules {
  color: var(--text-tertiary) !important;
}

/* ================================================================
   MISC UTILITY OVERRIDES
   ================================================================ */
[data-theme="dark"] .bg-1 { background-color: var(--success) !important; }
[data-theme="dark"] .text-color-2 { color: var(--accent-coral) !important; }
[data-theme="dark"] .text-color-3 { color: var(--info) !important; }
[data-theme="dark"] .text-color-4 { color: var(--success) !important; }
[data-theme="dark"] .text-color-5 { color: var(--warning) !important; }


/* ================================================================
   PHASE 3 — PREMIUM INTERACTIVE STATES
   ================================================================ */

/* ── Info-box / feature cards (public site) ── */
[data-theme="dark"] .info-box {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
[data-theme="dark"] .info-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--glow-purple) !important;
}

/* ── Navigation items — animated left-border ── */
[data-theme="dark"] .client-sidenav .nav-child-item,
[data-theme="dark"] .admin-sidebar .admin-nav-parent {
  position: relative;
}
[data-theme="dark"] .client-sidenav .nav-child-link,
[data-theme="dark"] .admin-sidebar .admin-nav-child-link {
  transition: color .18s ease, background-color .18s ease, padding-left .15s ease !important;
}

/* ── Hover-y cards (Journey section) ── */
[data-theme="dark"] .hover-y {
  transition: transform .25s ease, box-shadow .25s ease !important;
}
[data-theme="dark"] .hover-y:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), var(--glow-blue) !important;
}

/* ── Icon element interactive ── */
[data-theme="dark"] .icon-element {
  transition: transform .2s ease, box-shadow .2s ease !important;
}
[data-theme="dark"] .icon-element:hover {
  transform: scale(1.08);
  box-shadow: var(--glow-coral) !important;
}

/* ── Form inputs — smooth focus ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form--control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* ── Dropdown items ── */
[data-theme="dark"] .dropdown-item {
  transition: background-color .15s ease, color .15s ease !important;
}

/* ── Table rows ── */
[data-theme="dark"] .table tbody tr {
  transition: background-color .15s ease !important;
}


/* ================================================================
   PHASE 4 — GRADIENT ACCENTS & DEPTH
   ================================================================ */

/* ── Welcome / breadcrumb header section ── */
[data-theme="dark"] .breadcrumb-content {
  background: var(--gradient-welcome);
  border-radius: 12px;
  padding: 20px 24px !important;
  border: 1px solid var(--border-primary);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .breadcrumb-content::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 220px;
  height: 220px;
  background: rgba(159,122,234,.07);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
[data-theme="dark"] .breadcrumb-content .section__title {
  color: var(--text-primary) !important;
}

/* ── Accent top-line on cards ── */
[data-theme="dark"] .card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-coral);
  border-radius: 4px 4px 0 0;
  opacity: 0;
  transition: opacity .3s ease;
}
[data-theme="dark"] .card-item {
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .card-item:hover::before {
  opacity: .7;
}

/* ── Dashboard info cards (legacy KPI) — gradient background ── */
[data-theme="dark"] .dashboard-info-card {
  background: var(--gradient-bg-card) !important;
  border-color: var(--border-secondary) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
[data-theme="dark"] .dashboard-info-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--accent-coral) !important;
  box-shadow: var(--shadow-lg), var(--glow-coral) !important;
}

/* ── Stat/KPI value numbers ── */
[data-theme="dark"] .dashboard-info-card .card-title {
  color: var(--accent-coral) !important;
}
[data-theme="dark"] .dashboard-info-card .card-text {
  color: var(--text-secondary) !important;
  font-weight: 500;
}

/* ── Icon circles on KPI cards ── */
[data-theme="dark"] .bg-2 { background-color: var(--accent-purple) !important; }
[data-theme="dark"] .bg-3 { background-color: var(--accent-blue) !important; }
[data-theme="dark"] .bg-4 { background-color: #F6AD55 !important; }
[data-theme="dark"] .bg-5 { background-color: var(--danger) !important; }
[data-theme="dark"] .bg-6 { background-color: var(--accent-cyan) !important; }

/* ── Hero section gradient ── */
[data-theme="dark"] .hero-area {
  background: linear-gradient(160deg, #0D1117 0%, #161B25 60%, #1E2536 100%) !important;
}
[data-theme="dark"] .hero-area .section__title {
  color: var(--text-primary);
}
[data-theme="dark"] .hero-area .section__desc {
  color: var(--text-secondary);
}

/* ── CTA / get-started area ── */
[data-theme="dark"] .cat-area {
  background: linear-gradient(135deg, #0D1117 0%, #1E2536 100%) !important;
}

/* ── Footer accent ── */
[data-theme="dark"] .footer-area {
  background: linear-gradient(180deg, #161B25 0%, #0D1117 100%) !important;
}

/* ── Category item overlay for dark mode ── */
[data-theme="dark"] .category-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(13,17,23,.85));
  border-radius: inherit;
  pointer-events: none;
}


/* ================================================================
   PHASE 5 — ADMIN DASHBOARD COMPONENT FIXES
   ================================================================ */

/* ── Admin Command Center wrapper card ── */
[data-theme="dark"] .card.card-item.border-0.shadow-sm {
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

/* ── KPI mini-stat panels inside Command Center ── */
[data-theme="dark"] .p-3.rounded.border.bg-light {
  background: var(--gradient-bg-card) !important;
  border-color: var(--border-secondary) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-theme="dark"] .p-3.rounded.border.bg-light:hover {
  transform: translateY(-3px);
  border-color: var(--accent-coral) !important;
  box-shadow: var(--shadow-md), var(--glow-coral) !important;
}
[data-theme="dark"] .p-3.rounded.border.bg-light h4 {
  color: var(--accent-coral) !important;
  font-weight: 700;
}
[data-theme="dark"] .p-3.rounded.border.bg-light h5 {
  color: var(--text-primary) !important;
}

/* ── Question Type Distribution stat panels ── */
[data-theme="dark"] .border.rounded.p-3.bg-light {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}
[data-theme="dark"] .border.rounded.p-3.bg-light h5 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .border.rounded.p-3.bg-light .text-muted {
  color: var(--text-tertiary) !important;
}

/* ── Progress bars inside cards ── */
[data-theme="dark"] .progress {
  background-color: var(--bg-accent) !important;
}

/* ── Quick Actions card ── */
[data-theme="dark"] .card-item .theme-btn-transparent {
  border-color: var(--border-secondary) !important;
  color: var(--text-secondary) !important;
  background-color: var(--bg-tertiary) !important;
  transition: all .2s ease !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .card-item .theme-btn-transparent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-purple-rgb),.1));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
[data-theme="dark"] .card-item .theme-btn-transparent:hover {
  border-color: var(--accent-purple) !important;
  color: var(--accent-purple) !important;
  background-color: rgba(var(--accent-purple-rgb),.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), var(--glow-purple) !important;
  transform: translateY(-2px) !important;
}
[data-theme="dark"] .card-item .theme-btn-transparent:hover::after {
  opacity: 1;
}
[data-theme="dark"] .card-item .theme-btn-transparent i {
  transition: color .2s ease, transform .2s ease;
}
[data-theme="dark"] .card-item .theme-btn-transparent:hover i {
  color: var(--accent-purple);
  transform: scale(1.15);
}

/* ── Admin Range select ── */
[data-theme="dark"] #adminRange {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ── Type-distribution progress bars ── */
[data-theme="dark"] #typeDistribution .progress-bar.bg-primary {
  background: var(--gradient-coral) !important;
}
[data-theme="dark"] #typeDistribution .badge-light {
  background-color: var(--bg-accent) !important;
  color: var(--text-primary) !important;
}

/* ── Naxlex action card improvements ── */
[data-theme="dark"] .naxlex-action-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
[data-theme="dark"] .naxlex-action-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg), var(--glow-purple) !important;
  border-color: var(--accent-purple) !important;
}

/* ── Dashboard action card improvements ── */
[data-theme="dark"] .dashboard-action-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
[data-theme="dark"] .dashboard-action-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--accent-coral-rgb),.5) !important;
  box-shadow: var(--shadow-lg), var(--glow-coral) !important;
}

/* ── Course cards — slight lift ── */
[data-theme="dark"] .card.card-item.card-preview,
[data-theme="dark"] .card.card-item.card-preview:hover {
  transition: transform .25s ease, box-shadow .25s ease !important;
}
[data-theme="dark"] .card.card-item.card-preview:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg), var(--glow-blue) !important;
}


/* ================================================================
   PHASE 6 — CHARTS & DATA VISUALIZATIONS
   ================================================================ */

/* Chart.js: canvas colours come from the JS themeChanged listener, not CSS here. */

/* ── Chart CSS variables for JS consumption ── */
[data-theme="dark"] {
  --chart-primary:   #ED8936;
  --chart-secondary: #9F7AEA;
  --chart-tertiary:  #4299E1;
  --chart-success:   #48BB78;
  --chart-warning:   #F6AD55;
  --chart-danger:    #FC8181;
  --chart-grid:      rgba(58,69,99,.35);
  --chart-text:      #8A94A6;
}

/* ── Streak indicator dark style ── */
[data-theme="dark"] .streak-indicator-wrap {
  color: var(--text-primary);
}


/* ================================================================
   PHASE 7 — IMAGES & ICON TREATMENTS
   ================================================================ */

/* ── Logo — slight brightness boost ── */
[data-theme="dark"] .logo img,
[data-theme="dark"] .footer__logo {
  filter: brightness(1.05) contrast(1.05);
}

/* ── About section images — definition in dark ── */
[data-theme="dark"] .img__item {
  border-radius: 8px;
  box-shadow: var(--shadow-lg) !important;
  filter: brightness(.92) contrast(1.06);
}

/* ── Module / course card images ── */
[data-theme="dark"] .card-img-top,
[data-theme="dark"] .cat__img {
  filter: brightness(.88) contrast(1.06);
}

/* ── Avatar / profile images — no filter needed, keep crisp ── */
[data-theme="dark"] .rounded-circle {
  border: 2px solid var(--border-secondary);
}

/* ── Generic icon elements background variants ── */
[data-theme="dark"] .icon-element {
  background-color: var(--icon-element-bg);
  border: 1px solid var(--border-primary);
}


/* ================================================================
   PHASE 8 — TYPOGRAPHY REFINEMENTS
   ================================================================ */

/* ── Slightly blue-tinted white for primary text (less harsh) ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: #F0F4FF !important;
  letter-spacing: -.01em;
}
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #E8EEFF !important;
}

/* ── Body copy ── */
[data-theme="dark"] p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Small / hint text ── */
[data-theme="dark"] small,
[data-theme="dark"] .text-muted {
  color: var(--text-tertiary) !important;
}

/* ── Font-weight-semi-bold in dark ── */
[data-theme="dark"] .font-weight-semi-bold {
  color: var(--text-primary);
}

/* ── Section titles on public pages ── */
[data-theme="dark"] .section__title {
  color: #F0F4FF !important;
}
[data-theme="dark"] .section__desc {
  color: var(--text-secondary) !important;
}

/* ── Ribbon labels ── */
[data-theme="dark"] .ribbon {
  background-color: rgba(var(--accent-coral-rgb),.18) !important;
  color: var(--accent-coral) !important;
  font-weight: 600;
}

/* ── Counter numbers ── */
[data-theme="dark"] .counter__title,
[data-theme="dark"] .counter {
  font-weight: 800;
}

/* ── Badge text adjustments ── */
[data-theme="dark"] .badge-light {
  background-color: var(--bg-accent) !important;
  color: var(--text-secondary) !important;
}


/* ================================================================
   PHASE 9 — ACCESSIBILITY & FOCUS STATES
   ================================================================ */

/* ── All focus-visible elements ── */
[data-theme="dark"] *:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Button focus rings ── */
[data-theme="dark"] .btn:focus-visible {
  outline: 2px solid var(--accent-purple);
  box-shadow: 0 0 0 4px rgba(var(--accent-purple-rgb),.25) !important;
}

/* ── Input focus ── */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form--control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-purple-rgb),.18) !important;
  outline: none !important;
}

/* ── Link focus ── */
[data-theme="dark"] a:focus-visible {
  outline: 2px solid var(--accent-purple);
  border-radius: 3px;
}

/* ── Sidebar nav link focus ── */
[data-theme="dark"] .nav-child-link:focus-visible,
[data-theme="dark"] .admin-nav-child-link:focus-visible,
[data-theme="dark"] .admin-nav-parent-btn:focus-visible {
  outline: 2px solid var(--accent-coral) !important;
  outline-offset: -2px;
  background-color: var(--sidebar-hover);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] *,
  [data-theme="dark"] *::before,
  [data-theme="dark"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}


/* ================================================================
   PHASE 10 — SMOOTH THEME TRANSITIONS
   ================================================================ */

/* theme-switching class is applied during toggle for smooth transitions */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color .3s cubic-bezier(.4,0,.2,1),
    color .25s cubic-bezier(.4,0,.2,1),
    border-color .3s cubic-bezier(.4,0,.2,1),
    box-shadow .3s cubic-bezier(.4,0,.2,1),
    fill .3s cubic-bezier(.4,0,.2,1) !important;
  animation: none !important;
}

/* Legacy class kept for compatibility */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color .3s cubic-bezier(.4,0,.2,1),
    color .25s cubic-bezier(.4,0,.2,1),
    border-color .3s cubic-bezier(.4,0,.2,1),
    box-shadow .3s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Theme toggle button ripple effect ── */
[data-theme="dark"] .theme-picker-btn {
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .theme-picker-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(var(--accent-coral-rgb),.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .4s ease, height .4s ease, opacity .4s ease;
  opacity: 0;
  pointer-events: none;
}
[data-theme="dark"] .theme-picker-btn:active::after {
  width: 80px;
  height: 80px;
  opacity: 0;
}

/* ── Scrollbar refinement ── */
[data-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* ================================================================
   DASHBOARD WRAPPER + GLOBAL CONTENT TEXT SAFETY
   ================================================================ */
[data-theme="dark"] .dashboard-area,
[data-theme="dark"] .dashboard-content-wrap,
[data-theme="dark"] .dashboard-content-wrap > .container-fluid,
[data-theme="dark"] .dashboard-content-wrap .container-fluid {
  color: var(--text-primary) !important;
}

/* Keep section wrappers readable without forcing card backgrounds */
[data-theme="dark"] .dashboard-content-wrap .text-dark {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dashboard-content-wrap .text-muted {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .dashboard-content-wrap .text-secondary {
  color: var(--text-secondary) !important;
}

/* Common heading/copy harmonization in dashboard content regions */
[data-theme="dark"] .dashboard-content-wrap h1,
[data-theme="dark"] .dashboard-content-wrap h2,
[data-theme="dark"] .dashboard-content-wrap h3,
[data-theme="dark"] .dashboard-content-wrap h4,
[data-theme="dark"] .dashboard-content-wrap h5,
[data-theme="dark"] .dashboard-content-wrap h6 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .dashboard-content-wrap p,
[data-theme="dark"] .dashboard-content-wrap span,
[data-theme="dark"] .dashboard-content-wrap li,
[data-theme="dark"] .dashboard-content-wrap label,
[data-theme="dark"] .dashboard-content-wrap small {
  color: inherit;
}

/* Bootstrap utility + soft badges frequently used on dashboard pages */
[data-theme="dark"] .dashboard-content-wrap .badge-light,
[data-theme="dark"] .dashboard-content-wrap .bg-light {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* Module/filter strip buttons and chips baseline readability */
[data-theme="dark"] .dashboard-content-wrap .btn-outline-secondary,
[data-theme="dark"] .dashboard-content-wrap .btn-light {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="dark"] .dashboard-content-wrap .btn-outline-secondary:hover,
[data-theme="dark"] .dashboard-content-wrap .btn-light:hover {
  background: var(--bg-accent) !important;
  border-color: var(--border-hover) !important;
}

/* Student dashboard shared UI text (overrides res/student_ui.php light rgba text) */
[data-theme="dark"] .dashboard-content-wrap .stu-subtle {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .dashboard-content-wrap .stu-kpi-card .stu-kpi-title,
[data-theme="dark"] .dashboard-content-wrap .stu-kpi-card .stu-kpi-meta {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .dashboard-content-wrap .stu-kpi-card .stu-kpi-value {
  color: var(--text-primary) !important;
}

/* ================================================================
   QUEST STEM HTML — authored rich text (Quill / paste) theme sync
   Executor wraps stem in .qt-stem-html (and .qt-ehr-stem-body.qt-stem-html).
   Neutralize inline color:… so stems follow active theme in preview & exam.
   ================================================================ */
:root .qt-stem-html,
[data-theme="light"] .qt-stem-html,
[data-theme="dark"] .qt-stem-html,
:root .qt-ehr-stem-body.qt-stem-html,
[data-theme="light"] .qt-ehr-stem-body.qt-stem-html,
[data-theme="dark"] .qt-ehr-stem-body.qt-stem-html {
  color: var(--text-primary);
}

:root .qt-stem-html [style*="color"],
[data-theme="light"] .qt-stem-html [style*="color"],
[data-theme="dark"] .qt-stem-html [style*="color"],
:root .qt-ehr-stem-body.qt-stem-html [style*="color"],
[data-theme="light"] .qt-ehr-stem-body.qt-stem-html [style*="color"],
[data-theme="dark"] .qt-ehr-stem-body.qt-stem-html [style*="color"] {
  color: var(--text-primary) !important;
}