/* ============================================================================
   Dark mode, modals, form controls, and action buttons
   Loaded last; relies on tokens from framework/variables.css
   ============================================================================ */

/* ---------- Modal shells ---------- */
.data-management-modal,
.student-management-modal,
.students-management-modal,
.raids-white-theme,
.campaigns-modal,
.attendance-management-modal,
.spellbook-overlay .spellbook-panel,
.inspiration-modal,
.activity-center-modal,
.student-shop-modal,
.student-shop-panel,
.random-encounter-modal,
.student-transfer-modal,
.nc-modal,
.custom-modal {
  color: var(--color-text);
}

.data-management-modal .modal-content,
.student-management-modal .modal-content,
.student-management-modal .sm-panel,
.raids-white-theme .modal-content,
.raids-white-theme .modal-body,
.campaigns-modal .modal-content,
.attendance-management-modal .modal-content {
  background: var(--color-modal-shell-end);
  color: var(--color-text);
}

/* Student management uses raids-white-theme class on the modal root */
.student-management-modal.raids-white-theme,
.student-management-modal {
  background: linear-gradient(180deg, var(--color-modal-shell-start) 0%, var(--color-modal-shell-end) 100%) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
}

.student-management-modal .modal-header,
.students-management-modal .modal-header {
  background: var(--color-modal-shell-header) !important;
  border-bottom-color: var(--color-modal-shell-border) !important;
}

.student-management-modal .modal-header h2,
.student-management-modal .modal-header h3 {
  color: var(--color-text) !important;
}

/* ---------- Modal form controls ---------- */
.data-management-modal input:not([type="checkbox"]):not([type="radio"]),
.data-management-modal select,
.data-management-modal textarea,
.student-management-modal input:not([type="checkbox"]):not([type="radio"]),
.student-management-modal select,
.student-management-modal textarea,
.raids-white-theme input:not([type="checkbox"]):not([type="radio"]),
.raids-white-theme select,
.raids-white-theme textarea,
.custom-modal input,
.custom-modal select,
.custom-modal textarea,
.modal input,
.modal select,
.modal textarea,
.nc-modal input,
.nc-modal select,
.nc-modal textarea {
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border-color: var(--color-input-border);
}

.data-management-modal input::placeholder,
.student-management-modal input::placeholder,
.raids-white-theme input::placeholder,
.custom-modal input::placeholder {
  color: var(--color-text-light);
}

/* ---------- Modal / panel buttons ---------- */
.data-management-modal .btn-secondary,
.data-management-modal .btn-small,
.student-management-modal .btn-secondary,
.student-management-modal .btn-small,
.raids-white-theme .btn-secondary,
.raids-white-theme .btn-small,
.custom-modal .btn-primary,
.custom-modal .btn-secondary,
.custom-modal .btn-danger,
.modal .btn-secondary,
.modal .modal-btn-secondary,
.modal-footer .btn,
.form-actions .btn-secondary,
.live-poll-actions .btn-secondary,
.live-poll-run-actions .btn-secondary,
.student-shop-panel .btn-secondary,
.spellbook-panel .btn-secondary,
.activity-center-panel .btn-secondary,
.product-analytics-page .btn-secondary,
.tool-light-shell .btn-secondary,
.timer-stopwatch-panel .btn-secondary,
.dice-roller-panel .btn-secondary,
.noise-tracker-panel .btn-secondary,
.randomizer-panel .btn-secondary,
.give-award-panel .btn-secondary,
.give-reward-panel .btn-secondary,
.edit-stats-panel .btn-secondary,
.inspiration-modal .btn-secondary,
.student-campaigns-modal .btn-secondary,
.pet-quests-modal .btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.data-management-modal .btn-secondary:hover,
.student-management-modal .btn-secondary:hover,
.raids-white-theme .btn-secondary:hover,
.custom-modal .btn-secondary:hover,
.modal .btn-secondary:hover,
.live-poll-actions .btn-secondary:hover,
.live-poll-run-actions .btn-secondary:hover:not(:disabled),
.student-shop-panel .btn-secondary:hover,
.spellbook-panel .btn-secondary:hover,
.activity-center-panel .btn-secondary:hover,
.product-analytics-page .btn-secondary:hover,
.tool-light-shell .btn-secondary:hover,
.timer-stopwatch-panel .btn-secondary:hover,
.dice-roller-panel .btn-secondary:hover,
.noise-tracker-panel .btn-secondary:hover,
.randomizer-panel .btn-secondary:hover,
.give-award-panel .btn-secondary:hover,
.give-reward-panel .btn-secondary:hover,
.edit-stats-panel .btn-secondary:hover,
.inspiration-modal .btn-secondary:hover,
.student-campaigns-modal .btn-secondary:hover,
.pet-quests-modal .btn-secondary:hover {
  background: var(--color-brand-hover-bg);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.data-management-modal .btn-primary,
.student-management-modal .btn-primary,
.raids-white-theme .btn-primary,
.custom-modal .btn-primary,
.modal .btn-primary,
.modal .modal-btn-primary,
.student-shop-panel .btn-primary,
.product-analytics-page .btn-primary,
.tool-light-shell .btn-primary,
.give-award-panel .btn-primary,
.give-reward-panel .btn-primary,
.edit-stats-panel .btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}

.data-management-modal .tab-btn,
.raids-white-theme .tab-btn,
.student-management-modal .sm-tab {
  color: var(--color-text-secondary);
}

.data-management-modal .tab-btn.active,
.student-management-modal .sm-tab.active {
  color: var(--color-primary);
  background: var(--color-surface);
}

/* ---------- Toolbar / header icon buttons ---------- */
.btn-header-menu i,
.btn-notification i,
.btn-reports i,
.btn-help i,
.header-student-view-wrap .student-view-toggle i,
.btn-theme i {
  color: inherit;
}

/* ---------- Header menu dropdown icons ---------- */
html[data-theme="dark"] .header-menu-item i,
html[data-theme="dark"] .header-menu-theme-option i {
  color: var(--color-primary-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-menu-item i,
  :root:not([data-theme="light"]) .header-menu-theme-option i {
    color: var(--color-primary-light);
  }
}

/* ---------- List selection (modals + classroom) ---------- */
.sm-student-row.selected,
.attendance-row.selected,
.damage-card.selected,
.reward-card.selected {
  background: var(--color-selection-bg) !important;
  color: var(--color-text);
}

.sm-student-row.selected .sm-student-row-name,
.sm-student-row.selected .sm-student-row-meta {
  color: var(--color-text);
}

/* ---------- Misc modal panels ---------- */
.activity-center-modal,
.pet-quests-modal .modal-content,
.random-encounters-modal,
.spellbook-panel,
.student-campaigns-modal {
  background: var(--color-modal-shell-end);
  color: var(--color-text);
}

.spellbook-panel,
.activity-center-panel {
  border-color: var(--color-border);
}

/* ---------- Data tables / cards inside modals ---------- */
.data-management-modal .list-item,
.data-management-modal .card-item,
.data-management-modal .table-row,
.raids-white-theme .list-item,
.raids-white-theme .card-item {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.data-management-modal .list-item:hover,
.raids-white-theme .list-item:hover {
  background: var(--color-surface-hover);
}

/* ---------- Give award / use potion panel ---------- */
.give-award-panel {
  background: linear-gradient(180deg, var(--color-modal-shell-start) 0%, var(--color-modal-shell-end) 100%) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
}

.give-award-header {
  background: var(--color-modal-shell-header) !important;
  border-bottom-color: var(--color-modal-shell-border) !important;
}

.give-award-sub,
.give-award-empty,
.give-award-loading {
  color: var(--color-text-secondary) !important;
}

.give-award-recipients,
.give-award-grid {
  background: transparent !important;
}

.give-award-footer {
  background: var(--color-modal-shell-header) !important;
  border-top-color: var(--color-modal-shell-border) !important;
}

.give-award-tile-name {
  color: var(--color-text) !important;
}

.give-award-tile--selected {
  background: var(--color-selection-bg) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-selection-muted) !important;
}

/* ---------- Combat flow panel ---------- */
.combat-panel {
  background: linear-gradient(180deg, var(--color-combat-shell-start) 0%, var(--color-combat-shell-end) 100%) !important;
  color: var(--color-text) !important;
}

.combat-phases {
  background: var(--color-combat-phases-bg) !important;
}

.combat-body {
  background: var(--color-combat-body-bg) !important;
}

.combat-damage-tile--selected,
.combat-result-card--exhausted,
.combat-dramatic-roster-card--exhausted,
.combat-dramatic-metric--danger {
  background: var(--color-combat-selection-bg) !important;
  border-color: var(--color-combat-selection-border) !important;
}

.combat-damage-name,
.combat-defense-info strong,
.combat-result-card strong,
.combat-dramatic-roster-card strong {
  color: var(--color-text) !important;
}

.combat-panel .btn.btn-secondary {
  color: var(--color-combat-secondary-text) !important;
}

.combat-defense-row,
.combat-defense-ineligible-row,
.combat-dramatic-roster-card,
.combat-dramatic-defense-block {
  background: var(--color-combat-row-bg) !important;
}

.combat-curse-student-row:not([class*="combat-curse-student-row--"]) {
  background: var(--color-combat-row-bg) !important;
}

.combat-curse-student-row--defender {
  background: rgba(239, 68, 68, 0.14) !important;
}

.combat-curse-student-row--wizard {
  background: rgba(59, 130, 246, 0.14) !important;
}

.combat-curse-student-row--healer {
  background: rgba(16, 185, 129, 0.14) !important;
}

.combat-curse-student-row--tinkerer {
  background: rgba(245, 158, 11, 0.16) !important;
}

.combat-curse-student-row--unassigned {
  background: rgba(148, 163, 184, 0.14) !important;
}

.combat-dramatic-results-card {
  background: linear-gradient(180deg, var(--color-combat-shell-start) 0%, var(--color-combat-shell-end) 100%) !important;
  color: var(--color-text) !important;
}

.combat-scene-head h3,
.combat-section h3,
.combat-section h4,
.combat-hud-item strong {
  color: var(--color-combat-heading) !important;
}

.combat-chip {
  background: var(--color-combat-chip-bg) !important;
  border-color: var(--color-combat-chip-border) !important;
  color: var(--color-combat-chip-text) !important;
}

/* Meta chips (targeting line, spell line, stat rows), readable text, purple accent only */
.data-management-modal .spell-effect,
.data-management-modal .damage-stats,
.data-management-modal .reward-stats {
  color: var(--color-accent-chip-text);
}

.data-management-modal .spell-effect {
  background: var(--color-accent-chip-bg) !important;
  color: var(--color-accent-chip-text) !important;
  border-left-color: var(--color-accent-chip-border) !important;
}

.data-management-modal .spell-effect i {
  color: var(--color-accent-chip-border) !important;
}

/* ---------- Data management cards / shell ---------- */
.data-management-modal {
  background: linear-gradient(180deg, var(--color-modal-shell-start) 0%, var(--color-modal-shell-end) 100%) !important;
  border-color: var(--color-modal-shell-border) !important;
}

.data-management-modal .modal-header,
.data-management-modal .modal-tabs {
  background: var(--color-modal-shell-header) !important;
  border-color: var(--color-modal-shell-border) !important;
}

.data-management-modal .damage-card,
.data-management-modal .reward-card {
  background: var(--color-surface) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
}

.data-management-modal .default-note {
  color: var(--color-warning-banner-text) !important;
  background: var(--color-warning-banner-bg) !important;
  border-left-color: var(--color-warning-banner-border) !important;
}

.data-management-modal .status-btn,
.data-management-modal .edit-btn,
.data-management-modal .delete-btn {
  color: var(--color-text) !important;
}

.data-management-modal .share-btn {
  color: var(--color-text-secondary) !important;
}

.data-management-modal .share-btn.shared {
  color: #fff !important;
  background: #10b981 !important;
  border-color: #10b981 !important;
}

.data-management-modal .share-btn.shared:hover {
  color: #fff !important;
  background: #059669 !important;
  border-color: #059669 !important;
}

/* Reports page shell */
.classroom-reports-page {
  background: var(--color-page-bg) !important;
  color: var(--color-text) !important;
}

.classroom-reports-panel,
.classroom-reports-stat-card {
  background: var(--color-background-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.classroom-reports-hero,
.classroom-reports-preset-group {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.classroom-reports-date-input {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

.classroom-reports-table th,
.classroom-reports-table td {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Give reward picker */
.give-reward-panel {
  background: linear-gradient(180deg, var(--color-reward-shell-start) 0%, var(--color-reward-shell-end) 100%) !important;
  color: var(--color-text) !important;
}

.give-reward-recipients-section,
.give-reward-grid {
  background: transparent !important;
}

.give-reward-footer {
  background: var(--color-modal-shell-header) !important;
}

.give-reward-tile--selected {
  background: var(--color-reward-selection-bg) !important;
  border-color: var(--color-reward-selection-border) !important;
}

/* Student management */
.student-management-modal .sm-detail-panel,
.student-management-modal .team-column {
  background: var(--color-surface) !important;
}

.student-management-modal .sm-student-row.selected .sm-student-row-name,
.student-management-modal .sm-student-row.selected .sm-student-row-meta {
  color: var(--color-text) !important;
}

.student-management-modal .sm-asset-item.selected {
  background: var(--color-selection-bg) !important;
}

.student-management-modal .sm-class-option-desc,
.student-management-modal .sm-class-option-stats,
.student-management-modal .sm-student-code-value,
.student-management-modal .sm-code-label,
.sm-add-student-modal .sm-class-option-desc,
.sm-add-student-modal .sm-class-option-stats {
  color: var(--color-text-secondary) !important;
}

.student-management-modal .sm-class-option-stats,
.sm-add-student-modal .sm-class-option-stats,
.student-management-modal .sm-student-code-value {
  color: var(--color-primary-text) !important;
}

.student-management-modal .sm-class-option-title,
.sm-add-student-modal .sm-class-option-title {
  color: var(--color-text) !important;
}

.student-management-modal .sm-assignment-card-head {
  color: var(--color-text-secondary) !important;
}

/* Raids builder, question bank & image pickers */
.raid-question-bank,
.raid-question-picker-list,
.raid-asset-gallery {
  background: var(--color-background-alt) !important;
  border-color: var(--color-border) !important;
}

.raid-question-chip,
.raid-question-picker-item,
.raid-asset-thumb,
.raid-image-card,
.raid-mob-picker-card {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.raid-question-picker-item--active,
.raid-image-card--active,
.raid-mob-picker-card--active {
  background: var(--color-selection-bg) !important;
  border-color: var(--color-primary) !important;
}

/* Attendance */
.attendance-management-modal .am-attendance-pool {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

/* Audit log (reports + standalone) */
.audit-log-entry--combat {
  background: var(--color-audit-combat-bg) !important;
}

.audit-log-entry--reward {
  background: var(--color-audit-reward-bg) !important;
}

.audit-log-entry--magic {
  background: var(--color-audit-magic-bg) !important;
}

.audit-log-header,
.audit-log-filters {
  background: var(--color-modal-shell-header) !important;
  border-color: var(--color-border) !important;
}

.question-filter-bar,
.raid-boss-assigned {
  background: var(--color-background-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.question-tag-chip {
  color: var(--color-primary-light) !important;
}

.raid-boss-q-text {
  color: var(--color-text) !important;
}

/* ---------- Campaigns light shell ---------- */
.campaigns-white-theme,
.campaigns-modal.campaigns-white-theme {
  background: linear-gradient(180deg, var(--color-modal-shell-start) 0%, var(--color-modal-shell-end) 100%) !important;
  color: var(--color-text) !important;
}

.data-management-modal.campaigns-modal .modal-header,
.campaigns-white-theme .modal-header,
.campaigns-modal .modal-header {
  background: var(--color-modal-shell-header) !important;
  border-bottom-color: var(--color-modal-shell-border) !important;
  color: var(--color-text) !important;
}

.data-management-modal.campaigns-modal .modal-header h2,
.campaigns-white-theme .modal-header h2 {
  color: var(--color-text) !important;
}

.data-management-modal.campaigns-modal .modal-content,
.campaigns-white-theme .modal-content,
.campaigns-modal .modal-content {
  background: var(--color-modal-shell-end) !important;
  color: var(--color-text) !important;
}

/* ---------- Settings / wizard in modals ---------- */
.settings-section,
.wizard-box,
.form-box {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.tab-button,
.settings-wrapper .tab-button:not(.active) {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.tab-button.active,
.settings-wrapper .tab-button.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 4px 12px rgba(124, 115, 255, 0.3);
}

.feature-card-setting,
.advanced-setting-row {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.advanced-setting-slider::after {
  background: var(--color-text-inverse);
}

/* Lighter purple labels/headings on dark modal surfaces */
html[data-theme="dark"] .data-management-modal .tab-btn.active,
html[data-theme="dark"] .data-management-modal .tab-btn:hover,
html[data-theme="dark"] .data-management-modal .back-btn,
html[data-theme="dark"] .data-management-modal .btn-secondary,
html[data-theme="dark"] .custom-modal .btn-secondary {
  color: var(--color-primary-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .data-management-modal .tab-btn.active,
  :root:not([data-theme="light"]) .data-management-modal .tab-btn:hover,
  :root:not([data-theme="light"]) .data-management-modal .back-btn,
  :root:not([data-theme="light"]) .data-management-modal .btn-secondary,
  :root:not([data-theme="light"]) .custom-modal .btn-secondary {
    color: var(--color-primary-text);
  }
}

/* ---------- Message board (Quest Bulletin), dark mode ---------- */
html[data-theme="dark"] .mb-panel,
:root:not([data-theme="light"]) .mb-panel {
  background: linear-gradient(
    165deg,
    var(--color-modal-shell-start) 0%,
    var(--color-modal-shell-end) 55%,
    var(--color-background-alt) 100%
  ) !important;
  border-color: var(--color-modal-shell-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

html[data-theme="dark"] .mb-feed-wrap,
:root:not([data-theme="light"]) .mb-feed-wrap {
  background:
    radial-gradient(circle at 10% 20%, rgba(124, 115, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 40%),
    transparent !important;
}

html[data-theme="dark"] .mb-loading,
html[data-theme="dark"] .mb-empty,
:root:not([data-theme="light"]) .mb-loading,
:root:not([data-theme="light"]) .mb-empty {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .mb-empty i,
:root:not([data-theme="light"]) .mb-empty i {
  color: var(--color-primary-light) !important;
}

html[data-theme="dark"] .mb-msg-avatar,
:root:not([data-theme="light"]) .mb-msg-avatar {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .mb-msg-meta,
:root:not([data-theme="light"]) .mb-msg-meta {
  color: var(--color-primary-light) !important;
}

html[data-theme="dark"] .mb-msg-time,
:root:not([data-theme="light"]) .mb-msg-time {
  color: var(--color-text-light) !important;
}

html[data-theme="dark"] .mb-msg-bubble,
:root:not([data-theme="light"]) .mb-msg-bubble {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .mb-msg--teacher .mb-msg-bubble,
:root:not([data-theme="light"]) .mb-msg--teacher .mb-msg-bubble {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

html[data-theme="dark"] .mb-msg-text,
:root:not([data-theme="light"]) .mb-msg-text {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .mb-student-tip,
:root:not([data-theme="light"]) .mb-student-tip {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .mb-student-tip__name,
:root:not([data-theme="light"]) .mb-student-tip__name {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .mb-student-tip__gold,
:root:not([data-theme="light"]) .mb-student-tip__gold {
  border-top-color: var(--color-border) !important;
}

html[data-theme="dark"] .mb-team-tag,
:root:not([data-theme="light"]) .mb-team-tag {
  color: var(--color-primary-light) !important;
  background: rgba(124, 115, 255, 0.18) !important;
}

html[data-theme="dark"] .mb-role-badge--teacher,
:root:not([data-theme="light"]) .mb-role-badge--teacher {
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.18) !important;
}

html[data-theme="dark"] .mb-composer,
:root:not([data-theme="light"]) .mb-composer {
  background: var(--color-modal-shell-header) !important;
  border-top-color: var(--color-border) !important;
}

html[data-theme="dark"] .mb-composer-label,
:root:not([data-theme="light"]) .mb-composer-label {
  color: var(--color-primary-light) !important;
}

html[data-theme="dark"] .mb-input,
:root:not([data-theme="light"]) .mb-input {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

html[data-theme="dark"] .mb-input:focus,
:root:not([data-theme="light"]) .mb-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 115, 255, 0.22) !important;
}

html[data-theme="dark"] .mb-delete,
:root:not([data-theme="light"]) .mb-delete {
  color: var(--color-text-light) !important;
}

html[data-theme="dark"] .mb-delete:hover,
:root:not([data-theme="light"]) .mb-delete:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .mb-class-badge.class-defender,
html[data-theme="dark"] .mb-class-badge.class-warrior,
:root:not([data-theme="light"]) .mb-class-badge.class-defender,
:root:not([data-theme="light"]) .mb-class-badge.class-warrior {
  color: #fecaca !important;
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
}

html[data-theme="dark"] .mb-class-badge.class-wizard,
html[data-theme="dark"] .mb-class-badge.class-mage,
:root:not([data-theme="light"]) .mb-class-badge.class-wizard,
:root:not([data-theme="light"]) .mb-class-badge.class-mage {
  color: #bfdbfe !important;
  background: rgba(59, 130, 246, 0.28) !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
}

html[data-theme="dark"] .mb-class-badge.class-healer,
html[data-theme="dark"] .mb-class-badge.class-medic,
html[data-theme="dark"] .mb-class-badge.class-rogue,
:root:not([data-theme="light"]) .mb-class-badge.class-healer,
:root:not([data-theme="light"]) .mb-class-badge.class-medic,
:root:not([data-theme="light"]) .mb-class-badge.class-rogue {
  color: #a7f3d0 !important;
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
}

html[data-theme="dark"] .mb-class-badge.class-tinkerer,
html[data-theme="dark"] .mb-class-badge.class-paladin,
html[data-theme="dark"] .mb-class-badge.class-bard,
:root:not([data-theme="light"]) .mb-class-badge.class-tinkerer,
:root:not([data-theme="light"]) .mb-class-badge.class-paladin,
:root:not([data-theme="light"]) .mb-class-badge.class-bard {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
}

/* ---------- Student shop, dark mode polish ---------- */
html[data-theme="dark"] .student-shop-tab:not(.active),
:root:not([data-theme="light"]) .student-shop-tab:not(.active) {
  background: var(--color-background-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .student-shop-tab.active,
:root:not([data-theme="light"]) .student-shop-tab.active {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: var(--color-gp) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .student-shop-tile-thumb,
:root:not([data-theme="light"]) .student-shop-tile-thumb {
  background: var(--color-background-alt) !important;
}

html[data-theme="dark"] .student-shop-tile--selected,
:root:not([data-theme="light"]) .student-shop-tile--selected {
  background: rgba(245, 158, 11, 0.14) !important;
}

html[data-theme="dark"] .student-shop-badge--owned,
:root:not([data-theme="light"]) .student-shop-badge--owned {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .student-shop-badge--equipped,
:root:not([data-theme="light"]) .student-shop-badge--equipped {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

/* ---------- Campaigns modal, inner light surfaces (campaigns.css) ---------- */
html[data-theme="dark"] .data-management-modal.campaigns-modal .modal-tabs,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-picker-sidebar,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wizard .wizard-step-btn:not(.active),
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-list-card,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-release-panel,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-editor,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-item,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wizard-progress,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wiz-panel,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .modal-tabs,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-picker-sidebar,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wizard .wizard-step-btn:not(.active),
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-list-card,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-release-panel,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-editor,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-item,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wizard-progress,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wiz-panel {
  background: var(--color-background-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group label,
html[data-theme="dark"] .data-management-modal.campaigns-modal .raid-help,
html[data-theme="dark"] .data-management-modal.campaigns-modal .toggle-label,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wizard h3,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-picker-label,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-editor h4,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-editor-empty,
html[data-theme="dark"] .data-management-modal.campaigns-modal .empty-hint,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-release-hint,
html[data-theme="dark"] .data-management-modal.campaigns-modal .tab-btn,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wizard .wizard-step-btn:not(.active),
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group label,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .raid-help,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .toggle-label,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wizard h3,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-picker-label,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-editor h4,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-editor-empty,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .empty-hint,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-release-hint,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .tab-btn,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wizard .wizard-step-btn:not(.active) {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .tab-btn.active,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .tab-btn.active {
  color: var(--color-primary-text) !important;
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-primary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group input[type='text'],
html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group input[type='number'],
html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group input[type='datetime-local'],
html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group textarea,
html[data-theme="dark"] .data-management-modal.campaigns-modal .form-group select.dm-select,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group input[type='text'],
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group input[type='number'],
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group input[type='datetime-local'],
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group textarea,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .form-group select.dm-select {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .toggle-slider,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .toggle-slider {
  background: var(--color-border-dark) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .toggle-checkbox:checked + .toggle-slider,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .toggle-checkbox:checked + .toggle-slider {
  background: var(--color-primary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-upload-btn:hover,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-context-menu button:hover,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-upload-btn:hover,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-context-menu button:hover {
  background: var(--color-surface-hover) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-upload-btn,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-thumb,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-upload-btn,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-thumb {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-primary-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-picker-preview,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-picker-preview {
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wizard .wizard-nav,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-progress-panel,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-release-row,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-q-list li,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-actions,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wizard .wizard-nav,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-progress-panel,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-release-row,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-q-list li,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-actions {
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-progress-table th,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-progress-table td,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-progress-table th,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-progress-table td {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-progress-row--pending,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-queue,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-progress-row--pending,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-queue {
  background: var(--color-warning-banner-bg) !important;
  border-color: var(--color-warning-banner-border) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-queue-title,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-grade-label,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-queue-title,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-grade-label {
  color: var(--color-warning-banner-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-grade-actions,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-connect-hint,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-grade-actions,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-connect-hint {
  background: var(--color-selection-muted) !important;
  border-color: var(--color-modal-shell-border) !important;
  color: var(--color-primary-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-badge--start,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-badge--start {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-badge--final,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-badge--final {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  color: #c4b5fd !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-dl dt,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-table th,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wiz-panel-title,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-dl dt,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-table th,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wiz-panel-title {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-wiz-panel-title,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-wiz-panel-title {
  color: var(--color-primary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-dl dd,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-table td,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-dl dd,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-table td {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-quest,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-question,
html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-review-answer,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-quest,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-question,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-review-answer {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-context-menu,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-context-menu {
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-context-menu button,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-context-menu button {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-map-context-menu button.danger:hover,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-map-context-menu button.danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-release--open .campaign-quest-release-status,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-release--open .campaign-quest-release-status {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .data-management-modal.campaigns-modal .campaign-quest-release--locked .campaign-quest-release-status,
:root:not([data-theme="light"]) .data-management-modal.campaigns-modal .campaign-quest-release--locked .campaign-quest-release-status {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
}

/* ---------- Classroom creation wizard (wizard.css) ---------- */
html[data-theme="dark"] #classroom-wizard .wizard-appearance-choice,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-choice {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(12, 74, 110, 0.55) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-title,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-title {
  color: #e0f2fe !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-hint,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-hint {
  color: #7dd3fc !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-option,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-option {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-option.is-selected,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-option.is-selected {
  background: rgba(12, 74, 110, 0.55) !important;
  border-color: #38bdf8 !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-option-copy strong,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-option-copy strong {
  color: var(--color-text) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-appearance-option-hint,
:root:not([data-theme="light"]) #classroom-wizard .wizard-appearance-option-hint {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-mode-card--progressive,
:root:not([data-theme="light"]) #classroom-wizard .wizard-mode-card--progressive {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 115, 255, 0.28), transparent 55%),
    var(--color-surface) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-mode-card--standard,
:root:not([data-theme="light"]) #classroom-wizard .wizard-mode-card--standard {
  background:
    radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.22), transparent 55%),
    var(--color-surface) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-mode-chip--progressive,
:root:not([data-theme="light"]) #classroom-wizard .wizard-mode-chip--progressive {
  color: #c4b5fd !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-mode-chip--standard,
:root:not([data-theme="light"]) #classroom-wizard .wizard-mode-chip--standard {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] #classroom-wizard .progress-step:not(.active),
html[data-theme="dark"] #classroom-wizard .csv-instructions,
html[data-theme="dark"] #classroom-wizard .student-item,
html[data-theme="dark"] #classroom-wizard .student-pool,
html[data-theme="dark"] #classroom-wizard .team-organization,
:root:not([data-theme="light"]) #classroom-wizard .progress-step:not(.active),
:root:not([data-theme="light"]) #classroom-wizard .csv-instructions,
:root:not([data-theme="light"]) #classroom-wizard .student-item,
:root:not([data-theme="light"]) #classroom-wizard .student-pool,
:root:not([data-theme="light"]) #classroom-wizard .team-organization {
  background: var(--color-background-alt) !important;
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] #classroom-wizard .students-list,
html[data-theme="dark"] #classroom-wizard .team-controls-bar,
html[data-theme="dark"] #classroom-wizard .team-column,
html[data-theme="dark"] #classroom-wizard .feature-card:not(.active),
:root:not([data-theme="light"]) #classroom-wizard .students-list,
:root:not([data-theme="light"]) #classroom-wizard .team-controls-bar,
:root:not([data-theme="light"]) #classroom-wizard .team-column,
:root:not([data-theme="light"]) #classroom-wizard .feature-card:not(.active) {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] #classroom-wizard .phase3-tabs,
html[data-theme="dark"] #classroom-wizard .column-header,
:root:not([data-theme="light"]) #classroom-wizard .phase3-tabs,
:root:not([data-theme="light"]) #classroom-wizard .column-header {
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] #classroom-wizard .tab-btn,
html[data-theme="dark"] #classroom-wizard .toggle-hint,
html[data-theme="dark"] #classroom-wizard .wizard-helper-text,
html[data-theme="dark"] #classroom-wizard .column-count,
html[data-theme="dark"] #classroom-wizard .wizard-empty-placeholder,
:root:not([data-theme="light"]) #classroom-wizard .tab-btn,
:root:not([data-theme="light"]) #classroom-wizard .toggle-hint,
:root:not([data-theme="light"]) #classroom-wizard .wizard-helper-text,
:root:not([data-theme="light"]) #classroom-wizard .column-count,
:root:not([data-theme="light"]) #classroom-wizard .wizard-empty-placeholder {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] #classroom-wizard .tab-btn.active,
:root:not([data-theme="light"]) #classroom-wizard .tab-btn.active {
  color: var(--color-primary-text) !important;
  border-bottom-color: var(--color-primary) !important;
}

html[data-theme="dark"] #classroom-wizard .team-name-input,
:root:not([data-theme="light"]) #classroom-wizard .team-name-input {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

html[data-theme="dark"] #classroom-wizard .unassigned-column,
:root:not([data-theme="light"]) #classroom-wizard .unassigned-column {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

html[data-theme="dark"] .wizard-emblem-picker-modal .wizard-emblem-picker-preview,
html[data-theme="dark"] .wizard-emblem-picker-modal .wizard-emblem-item.wizard-emblem-upload,
:root:not([data-theme="light"]) .wizard-emblem-picker-modal .wizard-emblem-picker-preview,
:root:not([data-theme="light"]) .wizard-emblem-picker-modal .wizard-emblem-item.wizard-emblem-upload {
  background: var(--color-selection-muted) !important;
  border-color: var(--color-modal-shell-border) !important;
}

html[data-theme="dark"] .wizard-emblem-picker-toolbar,
html[data-theme="dark"] .wizard-emblem-clear-btn,
:root:not([data-theme="light"]) .wizard-emblem-picker-toolbar,
:root:not([data-theme="light"]) .wizard-emblem-clear-btn {
  color: var(--color-primary-text) !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-team-delete-btn,
:root:not([data-theme="light"]) #classroom-wizard .wizard-team-delete-btn {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] #classroom-wizard .wizard-team-delete-btn:hover,
:root:not([data-theme="light"]) #classroom-wizard .wizard-team-delete-btn:hover {
  background: rgba(239, 68, 68, 0.28) !important;
}

html[data-theme="dark"] #classroom-wizard .toggle-switch input[type="checkbox"],
:root:not([data-theme="light"]) #classroom-wizard .toggle-switch input[type="checkbox"] {
  background-color: var(--color-border-dark) !important;
}

html[data-theme="dark"] #classroom-wizard .toggle-switch input[type="checkbox"]:checked,
:root:not([data-theme="light"]) #classroom-wizard .toggle-switch input[type="checkbox"]:checked {
  background-color: var(--color-success) !important;
}