/* ============================================================================
   Theme overrides for light-shell components and remaining feature sheets
   ============================================================================ */

/* Raids / campaigns light modal shells, explicit dark */
html[data-theme="dark"] .raids-white-theme,
html[data-theme="dark"] .campaigns-white-theme {
  background: linear-gradient(180deg, var(--color-background-alt) 0%, var(--color-background-secondary) 100%) !important;
  color: var(--color-text) !important;
  border-color: var(--color-dm-border) !important;
}

html[data-theme="dark"] .raids-white-theme .modal-header,
html[data-theme="dark"] .campaigns-white-theme .modal-header {
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-theme="dark"] .raids-white-theme .modal-header h2,
html[data-theme="dark"] .campaigns-white-theme .modal-header h2 {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .raids-white-theme .modal-tabs,
html[data-theme="dark"] .campaigns-white-theme .modal-tabs {
  background: var(--color-background-secondary) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-theme="dark"] .raids-white-theme .tab-btn,
html[data-theme="dark"] .campaigns-white-theme .tab-btn {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .raids-white-theme .tab-btn.active,
html[data-theme="dark"] .campaigns-white-theme .tab-btn.active {
  color: var(--color-primary) !important;
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-primary) !important;
}

html[data-theme="dark"] .raids-white-theme .modal-content,
html[data-theme="dark"] .raids-white-theme .modal-body,
html[data-theme="dark"] .campaigns-white-theme .modal-content,
html[data-theme="dark"] .campaigns-white-theme .modal-body {
  background: var(--color-background-alt) !important;
  color: var(--color-text) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .raids-white-theme,
  :root:not([data-theme="light"]) .campaigns-white-theme {
    background: linear-gradient(180deg, var(--color-background-alt) 0%, var(--color-background-secondary) 100%) !important;
    color: var(--color-text) !important;
    border-color: var(--color-dm-border) !important;
  }

  :root:not([data-theme="light"]) .raids-white-theme .modal-header,
  :root:not([data-theme="light"]) .campaigns-white-theme .modal-header {
    background: var(--color-surface) !important;
    border-bottom-color: var(--color-border) !important;
  }

  :root:not([data-theme="light"]) .raids-white-theme .modal-header h2,
  :root:not([data-theme="light"]) .campaigns-white-theme .modal-header h2 {
    color: var(--color-text) !important;
  }

  :root:not([data-theme="light"]) .raids-white-theme .modal-tabs,
  :root:not([data-theme="light"]) .campaigns-white-theme .modal-tabs {
    background: var(--color-background-secondary) !important;
    border-bottom-color: var(--color-border) !important;
  }

  :root:not([data-theme="light"]) .raids-white-theme .tab-btn,
  :root:not([data-theme="light"]) .campaigns-white-theme .tab-btn {
    color: var(--color-text-secondary) !important;
  }

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

  :root:not([data-theme="light"]) .raids-white-theme .modal-content,
  :root:not([data-theme="light"]) .raids-white-theme .modal-body,
  :root:not([data-theme="light"]) .campaigns-white-theme .modal-content,
  :root:not([data-theme="light"]) .campaigns-white-theme .modal-body {
    background: var(--color-background-alt) !important;
    color: var(--color-text) !important;
  }
}

/* Generic Modal.js dialog shell */
.modal {
  background: var(--color-modal-bg);
  color: var(--color-text);
}

/* Wizard */
.wizard-container,
.wizard-step-content {
  background: var(--color-page-bg);
  color: var(--color-text);
}

.wizard-box {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

/* Student management light shell */
.student-management-modal,
.students-management-modal {
  background: var(--color-surface);
  color: var(--color-text);
}

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

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

/* Student dashboard shell */
.student-dashboard-page,
.student-dashboard-container,
.student-dashboard-layout {
  background: var(--color-page-bg);
  color: var(--color-text);
}

.student-dashboard-layout .classroom-student-list {
  background: var(--color-surface);
  border-right-color: var(--color-border);
  color: var(--color-text);
}

.student-dashboard-layout .student-list-header h3,
.student-dashboard-layout .student-name,
.student-dashboard-layout .student-text {
  color: var(--color-text);
}

.student-dashboard-card,
.student-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Activity center */
.activity-center-panel,
.activity-center-modal {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Spellbook / shop shells */
.spellbook-panel,
.student-shop-panel {
  background: linear-gradient(
    180deg,
    var(--color-modal-shell-start) 0%,
    var(--color-modal-shell-end) 100%
  );
  color: var(--color-text);
  border-color: var(--color-modal-shell-border);
}

/* Activity center / timer / dice light tools in classroom */
.tool-light-shell,
.timer-stopwatch-panel,
.dice-roller-panel,
.noise-tracker-panel,
.tsw-panel,
.randomizer-panel {
  background: linear-gradient(
    180deg,
    var(--color-modal-shell-start) 0%,
    var(--color-modal-shell-end) 100%
  );
  color: var(--color-text);
  border-color: var(--color-modal-shell-border);
}

/* Shared form hints in account + settings pages */
.form-hint {
  color: var(--color-text-light);
}

/* Dark mode, ensure readable text on app shells */
html[data-theme="dark"] #app,
html[data-theme="dark"] .classroom-container,
html[data-theme="dark"] .teacher-dashboard,
html[data-theme="dark"] .dashboard-container,
html[data-theme="dark"] .form-container {
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #app,
  :root:not([data-theme="light"]) .classroom-container,
  :root:not([data-theme="light"]) .teacher-dashboard,
  :root:not([data-theme="light"]) .dashboard-container,
  :root:not([data-theme="light"]) .form-container {
    color: var(--color-text);
  }
}

/* Light tool panels inside classroom */
html[data-theme="dark"] .classroom-main-panel,
html[data-theme="dark"] .student-detail-panel,
html[data-theme="dark"] .classroom-student-list,
html[data-theme="dark"] .student-list-header,
html[data-theme="dark"] .nc-dropdown,
html[data-theme="dark"] .poll-panel,
html[data-theme="dark"] .live-poll-card {
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .classroom-main-panel,
  :root:not([data-theme="light"]) .student-detail-panel,
  :root:not([data-theme="light"]) .classroom-student-list,
  :root:not([data-theme="light"]) .student-list-header,
  :root:not([data-theme="light"]) .nc-dropdown,
  :root:not([data-theme="light"]) .poll-panel,
  :root:not([data-theme="light"]) .live-poll-card {
    color: var(--color-text);
  }
}

/* Data-management light sub-panels on dark modal */
html[data-theme="dark"] .data-management-modal .damage-card,
html[data-theme="dark"] .data-management-modal .reward-card,
html[data-theme="dark"] .data-management-modal .stat-card,
html[data-theme="dark"] .data-management-modal .list-item-card {
  color: var(--color-text);
}

html[data-theme="dark"] .student-dashboard-layout .action-btn-small,
html[data-theme="dark"] .student-dashboard-layout .action-btn-small i {
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .student-dashboard-layout .action-btn-small,
  :root:not([data-theme="light"]) .student-dashboard-layout .action-btn-small i {
    color: var(--color-text);
  }
}

/* Raid boss step 4: keep lineup / damage panels dark (avoid light color-mix shells) */
html[data-theme="dark"] .raid-boss-panel--lineup,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup {
  background: var(--color-background-secondary) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .raid-boss-panel--lineup h4,
html[data-theme="dark"] .raid-boss-panel--lineup .toggle-label,
html[data-theme="dark"] .raid-boss-panel--lineup .raid-boss-panel-subtitle,
html[data-theme="dark"] .raid-boss-panel--lineup .raid-boss-random-toggle,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup h4,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup .toggle-label,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup .raid-boss-panel-subtitle,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup .raid-boss-random-toggle {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .raid-boss-panel--lineup .raid-boss-panel-subtitle,
html[data-theme="dark"] .raids-white-theme .raid-boss-panel--lineup .raid-boss-panel-subtitle {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] .raid-boss-damage-progress--warn,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--warn {
  background: rgba(120, 53, 15, 0.55) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .raid-boss-damage-progress--ok,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--ok {
  background: rgba(20, 83, 45, 0.55) !important;
  border-color: rgba(134, 239, 172, 0.5) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .raid-boss-damage-progress--warn .raid-boss-damage-progress-label,
html[data-theme="dark"] .raid-boss-damage-progress--warn .raid-boss-damage-progress-stats,
html[data-theme="dark"] .raid-boss-damage-progress--warn .raid-boss-damage-progress-help,
html[data-theme="dark"] .raid-boss-damage-progress--warn .raid-boss-damage-status,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--warn .raid-boss-damage-progress-label,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--warn .raid-boss-damage-progress-stats,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--warn .raid-boss-damage-progress-help,
html[data-theme="dark"] .raids-white-theme .raid-boss-damage-progress--warn .raid-boss-damage-status {
  color: inherit !important;
}

/* Focus rings on dark backgrounds */
.btn-theme:focus-visible,
.btn-header-menu:focus-visible,
.student-view-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}