/* ============================================================================
   Dark mode, classroom tools (timer, stopwatch, randomizer, dice, noise, polls)
   Loaded after classroom.css / realtime.css; uses tokens from variables.css
   ============================================================================ */

/* Shared light-shell tool panels */
html[data-theme="dark"] .tsw-panel,
html[data-theme="dark"] .tsw-mini,
html[data-theme="dark"] .randomizer-panel,
html[data-theme="dark"] .dice-roller-panel,
html[data-theme="dark"] .nt-panel,
html[data-theme="dark"] .live-poll-panel,
:root:not([data-theme="light"]) .tsw-panel,
:root:not([data-theme="light"]) .tsw-mini,
:root:not([data-theme="light"]) .randomizer-panel,
:root:not([data-theme="light"]) .dice-roller-panel,
:root:not([data-theme="light"]) .nt-panel,
:root:not([data-theme="light"]) .live-poll-panel {
  color: var(--color-text);
  border-color: var(--color-modal-shell-border);
}

html[data-theme="dark"] .tsw-panel,
html[data-theme="dark"] .randomizer-panel,
html[data-theme="dark"] .dice-roller-panel,
:root:not([data-theme="light"]) .tsw-panel,
:root:not([data-theme="light"]) .randomizer-panel,
:root:not([data-theme="light"]) .dice-roller-panel {
  background: linear-gradient(
    180deg,
    var(--color-modal-shell-start) 0%,
    var(--color-modal-shell-end) 100%
  ) !important;
}

html[data-theme="dark"] .tsw-mini,
:root:not([data-theme="light"]) .tsw-mini {
  background: linear-gradient(
    180deg,
    var(--color-modal-shell-start) 0%,
    var(--color-modal-shell-end) 100%
  ) !important;
}

html[data-theme="dark"] .tsw-header,
html[data-theme="dark"] .randomizer-close,
html[data-theme="dark"] .dice-roller-header,
html[data-theme="dark"] .nt-header,
:root:not([data-theme="light"]) .tsw-header,
:root:not([data-theme="light"]) .randomizer-close,
:root:not([data-theme="light"]) .dice-roller-header,
:root:not([data-theme="light"]) .nt-header {
  background: var(--color-modal-shell-header) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .tsw-title,
html[data-theme="dark"] .randomizer-title,
html[data-theme="dark"] .dice-roller-title,
html[data-theme="dark"] .nt-title,
html[data-theme="dark"] .tsw-display,
:root:not([data-theme="light"]) .tsw-title,
:root:not([data-theme="light"]) .randomizer-title,
:root:not([data-theme="light"]) .dice-roller-title,
:root:not([data-theme="light"]) .nt-title,
:root:not([data-theme="light"]) .tsw-display {
  color: var(--color-primary-text) !important;
}

html[data-theme="dark"] .randomizer-mode-toggle,
html[data-theme="dark"] .randomizer-draft-column,
html[data-theme="dark"] .randomizer-draft-list,
:root:not([data-theme="light"]) .randomizer-mode-toggle,
:root:not([data-theme="light"]) .randomizer-draft-column,
:root:not([data-theme="light"]) .randomizer-draft-list {
  background: var(--color-tool-inset) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .randomizer-draft-pool-select,
:root:not([data-theme="light"]) .randomizer-draft-pool-select {
  background-color: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

html[data-theme="dark"] .randomizer-draft-list-item,
html[data-theme="dark"] .randomizer-pool-btn,
:root:not([data-theme="light"]) .randomizer-draft-list-item,
:root:not([data-theme="light"]) .randomizer-pool-btn {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .randomizer-pool-btn:hover,
:root:not([data-theme="light"]) .randomizer-pool-btn:hover {
  background: var(--color-brand-hover-bg) !important;
}

html[data-theme="dark"] .dice-roller-viewport-wrap,
html[data-theme="dark"] .dice-roller-row,
:root:not([data-theme="light"]) .dice-roller-viewport-wrap,
:root:not([data-theme="light"]) .dice-roller-row {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .dice-roller-footer,
:root:not([data-theme="light"]) .dice-roller-footer {
  background: var(--color-tool-inset-strong) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .nt-panel::before,
:root:not([data-theme="light"]) .nt-panel::before {
  background: var(--color-tool-panel-wash) !important;
}

html[data-theme="dark"] .nt-hero,
html[data-theme="dark"] .nt-surface,
html[data-theme="dark"] .nt-live-card,
:root:not([data-theme="light"]) .nt-hero,
:root:not([data-theme="light"]) .nt-surface,
:root:not([data-theme="light"]) .nt-live-card {
  background: var(--color-tool-card) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .nt-meter,
:root:not([data-theme="light"]) .nt-meter {
  background: var(--color-tool-inset-strong) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .live-poll-panel,
:root:not([data-theme="light"]) .live-poll-panel {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-xl) !important;
}

html[data-theme="dark"] .live-poll-header,
:root:not([data-theme="light"]) .live-poll-header {
  background: var(--color-background-alt) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .live-poll-tab--active,
:root:not([data-theme="light"]) .live-poll-tab--active {
  background: var(--color-surface) !important;
  color: var(--color-tool-accent) !important;
}

html[data-theme="dark"] .live-poll-body,
:root:not([data-theme="light"]) .live-poll-body {
  background: var(--color-background-alt) !important;
}

html[data-theme="dark"] .live-poll-setup-sidebar,
:root:not([data-theme="light"]) .live-poll-setup-sidebar {
  background: rgba(124, 115, 255, 0.08);
  border-color: rgba(124, 115, 255, 0.22);
}

html[data-theme="dark"] .live-poll-settings,
:root:not([data-theme="light"]) .live-poll-settings {
  background: transparent !important;
}

html[data-theme="dark"] .live-poll-history-item,
:root:not([data-theme="light"]) .live-poll-history-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Timer / stopwatch inputs */
html[data-theme="dark"] .tsw-input,
html[data-theme="dark"] .tsw-lap-list,
:root:not([data-theme="light"]) .tsw-input,
:root:not([data-theme="light"]) .tsw-lap-list {
  background: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}

html[data-theme="dark"] .tsw-lap-row,
:root:not([data-theme="light"]) .tsw-lap-row {
  color: var(--color-primary-text) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .tsw-tab,
html[data-theme="dark"] .tsw-preset,
html[data-theme="dark"] .tsw-minimize,
html[data-theme="dark"] .tsw-close,
:root:not([data-theme="light"]) .tsw-tab,
:root:not([data-theme="light"]) .tsw-preset,
:root:not([data-theme="light"]) .tsw-minimize,
:root:not([data-theme="light"]) .tsw-close {
  background: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-tool-accent) !important;
}

html[data-theme="dark"] .tsw-tab--active,
:root:not([data-theme="light"]) .tsw-tab--active {
  background: var(--color-brand-hover-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
}

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

html[data-theme="dark"] .dice-roller-viewport-wrap,
html[data-theme="dark"] .dice-roller-viewport,
html[data-theme="dark"] .dice-roller-panel--wide .dice-roller-viewport,
html[data-theme="dark"] .dice-roller-result,
html[data-theme="dark"] .dice-roller-swipe-hint,
:root:not([data-theme="light"]) .dice-roller-viewport-wrap,
:root:not([data-theme="light"]) .dice-roller-viewport,
:root:not([data-theme="light"]) .dice-roller-panel--wide .dice-roller-viewport,
:root:not([data-theme="light"]) .dice-roller-result,
:root:not([data-theme="light"]) .dice-roller-swipe-hint {
  background: var(--color-modal-shell-end) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}

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

html[data-theme="dark"] .nt-status-paused,
:root:not([data-theme="light"]) .nt-status-paused {
  color: #fcd34d !important;
}

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

html[data-theme="dark"] .live-poll-student-panel,
:root:not([data-theme="light"]) .live-poll-student-panel {
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-modal-shell-end) 100%
  ) !important;
  border-color: var(--color-modal-shell-border) !important;
}

html[data-theme="dark"] .live-poll-student-q,
:root:not([data-theme="light"]) .live-poll-student-q {
  background: var(--color-brand-hover-bg) !important;
  border-left-color: var(--color-primary) !important;
}

html[data-theme="dark"] .live-poll-bar-track,
:root:not([data-theme="light"]) .live-poll-bar-track {
  background: var(--color-background-secondary) !important;
}

html[data-theme="dark"] .live-poll-pie-hole,
:root:not([data-theme="light"]) .live-poll-pie-hole {
  background: var(--color-surface) !important;
}

html[data-theme="dark"] .nc-see-all-btn,
:root:not([data-theme="light"]) .nc-see-all-btn {
  background: var(--color-brand-hover-bg) !important;
  color: var(--color-tool-accent) !important;
}

html[data-theme="dark"] .nc-see-all-btn:hover,
:root:not([data-theme="light"]) .nc-see-all-btn:hover {
  background: var(--color-selection-bg) !important;
}