/* Dark theme overrides for styles.css. Purely additive - nothing in styles.css
   is modified by this file's presence; it only takes effect under
   html[data-theme="dark"]. Scope: the 7 private-pages/*.html admin/host pages
   plus public/login.html (see docs/design-system.md for the light-theme source).
   Background/color declarations use !important throughout because several
   components in this codebase set their light-mode background via an inline
   style="" attribute (higher priority than a plain class rule). */

:root[data-theme="dark"] {
  --bg-color: #0f0a1f;
  --bg-grad-top: #1e1b3a;
  --bg-grad-bot: #0f0a1f;
  --panel-bg: rgba(30, 41, 59, 0.6);
  --text-main: #f5f0ff;
  --text-muted: #c4b5fd;
  --text-light: #a855f7;
  --border-light: rgba(168, 120, 255, 0.22);
  --border-strong: rgba(168, 85, 247, 0.5);
  --accent-base: #a855f7;
  --accent-hover: #c084fc;
  --accent-light: rgba(168, 85, 247, 0.28);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Scrollbar */
html[data-theme="dark"] {
  scrollbar-color: rgba(168, 85, 247, 0.4) rgba(15, 10, 31, 0.9);
}
html[data-theme="dark"]::-webkit-scrollbar-track { background: rgba(15, 10, 31, 0.9) !important; }
html[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.38) !important;
  border-color: rgba(15, 10, 31, 0.9) !important;
}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.5) !important; }

/* Header / nav */
html[data-theme="dark"] .site-header {
  background: rgba(20, 14, 38, 0.96) !important;
}
html[data-theme="dark"] .site-nav {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}
html[data-theme="dark"] .site-nav-link.active {
  background: rgba(51, 65, 85, 0.7) !important;
}
html[data-theme="dark"] .site-nav-link:hover {
  background: rgba(51, 65, 85, 0.4) !important;
}
html[data-theme="dark"] .badge {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .theme-toggle-btn {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: rgba(168, 120, 255, 0.4) !important;
  color: #d8b4fe !important;
}
html[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(71, 85, 105, 0.95) !important;
}
html[data-theme="dark"] #logoutBtn {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] #logoutBtn:hover {
  background: rgba(51, 65, 85, 0.8) !important;
}

/* Buttons - brighten on hover instead of the light theme's darken-on-hover */
html[data-theme="dark"] button.primary:hover,
html[data-theme="dark"] .action-link-button.primary:hover {
  background: #c084fc !important;
}
html[data-theme="dark"] button.secondary {
  background: rgba(30, 41, 59, 0.7) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] button.secondary:hover {
  background: rgba(51, 65, 85, 0.8) !important;
}
html[data-theme="dark"] button.danger:hover { background: #f87171 !important; }
html[data-theme="dark"] button.success:hover { background: #4ade80 !important; }
html[data-theme="dark"] button.warning:hover { background: #fbbf24 !important; }
html[data-theme="dark"] button.info { background: #6366f1 !important; }
html[data-theme="dark"] button.info:hover { background: #818cf8 !important; }

/* Forms */
html[data-theme="dark"] .custom-input,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-textarea {
  background-color: rgba(15, 10, 31, 0.6) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c084fc' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] #questionSelect.custom-select:disabled {
  background-color: rgba(15, 10, 31, 0.4) !important;
}

/* Status boxes */
html[data-theme="dark"] .status-box {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .status-box.success {
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .status-box.error {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

/* Leaderboard cards + podium (base, hover, gold/silver/bronze incl. hover) */
html[data-theme="dark"] .leaderboard-card,
html[data-theme="dark"] #leaderboardList .leaderboard-card,
html[data-theme="dark"] #finalStandingsList .leaderboard-card,
html[data-theme="dark"] #leaderboardList .leaderboard-card:hover,
html[data-theme="dark"] #finalStandingsList .leaderboard-card:hover {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .leaderboard-card.is-first,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-first,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-first,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-first:hover,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-first:hover {
  background: linear-gradient(to right, rgba(251, 191, 36, 0.16), rgba(30, 41, 59, 0.5)) !important;
}
html[data-theme="dark"] .leaderboard-card.is-second,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-second,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-second,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-second:hover,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-second:hover {
  background: linear-gradient(to right, rgba(203, 213, 225, 0.14), rgba(30, 41, 59, 0.5)) !important;
}
html[data-theme="dark"] .leaderboard-card.is-third,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-third,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-third,
html[data-theme="dark"] #leaderboardList .leaderboard-card.is-third:hover,
html[data-theme="dark"] #finalStandingsList .leaderboard-card.is-third:hover {
  background: linear-gradient(to right, rgba(217, 119, 6, 0.16), rgba(30, 41, 59, 0.5)) !important;
}
html[data-theme="dark"] .leaderboard-selection-count,
html[data-theme="dark"] .leaderboard-row-check span,
html[data-theme="dark"] .leaderboard-check-all span {
  background: rgba(30, 41, 59, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Leaderboard / audit table (twitch-points.html, security.html, leaderboard.html) */
html[data-theme="dark"] .leaderboard-table th,
html[data-theme="dark"] .leaderboard-table td {
  border-bottom-color: rgba(168, 85, 247, 0.18) !important;
}
html[data-theme="dark"] .leaderboard-table tbody tr {
  background: rgba(30, 41, 59, 0.5) !important;
}
html[data-theme="dark"] .leaderboard-table tbody tr:hover {
  background: rgba(51, 65, 85, 0.65) !important;
}
html[data-theme="dark"] .leaderboard-table tbody tr.is-selected {
  background: rgba(88, 28, 135, 0.4) !important;
}

/* Toast */
html[data-theme="dark"] .toast {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(20, 14, 38, 0.94)) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
}

/* Custom confirm modal */
html[data-theme="dark"] .custom-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .custom-confirm-card {
  background: #150f28 !important;
  border-color: rgba(168, 85, 247, 0.22) !important;
}
html[data-theme="dark"] .custom-confirm-title {
  color: #f3e8ff !important;
}
html[data-theme="dark"] .custom-confirm-message {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .custom-confirm-kicker {
  color: #fdba74 !important;
}
html[data-theme="dark"] .custom-confirm-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(249, 115, 22, 0.18) !important;
}
html[data-theme="dark"] .custom-confirm-actions button {
  transition: background-color 0.18s ease, color 0.18s ease !important;
}
html[data-theme="dark"] .custom-confirm-actions .secondary,
html[data-theme="dark"] .custom-confirm-actions .secondary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  transform: none !important;
}
html[data-theme="dark"] .custom-confirm-actions .secondary {
  background: rgb(61, 71, 89) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .custom-confirm-actions .secondary:hover {
  background: rgb(81, 91, 109) !important;
  color: #fff !important;
}
html[data-theme="dark"] .custom-confirm-actions .danger,
html[data-theme="dark"] .custom-confirm-actions .danger:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(239, 68, 68, 0.2) !important;
  transform: none !important;
}

/* "Unsaved changes" modal (admin.html + invites.html share the #unsavedModal id/markup) */
html[data-theme="dark"] #unsavedModal > div {
  background: #150f28 !important;
}
html[data-theme="dark"] .custom-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Admin question list (drag list) */
html[data-theme="dark"] .admin-item {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .admin-item.active {
  background: rgba(168, 85, 247, 0.1) !important;
}
html[data-theme="dark"] .admin-media-empty {
  background: rgba(30, 41, 59, 0.5) !important;
}
html[data-theme="dark"] .admin-media-chip {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .media-assets-panel {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(20, 14, 38, 0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 34px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .admin-media-storage-note {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.14), rgba(30, 41, 59, 0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .admin-media-upload-btn {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(20, 14, 38, 0.85)) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .admin-media-toggle {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(20, 14, 38, 0.75)) !important;
}
html[data-theme="dark"] .custom-audio-player {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(20, 14, 38, 0.9)) !important;
}
html[data-theme="dark"] .custom-audio-track {
  background: rgba(15, 10, 31, 0.7) !important;
}
html[data-theme="dark"] .custom-audio-volume {
  background: rgba(15, 10, 31, 0.5) !important;
}
html[data-theme="dark"] .custom-audio-volume input[type="range"] {
  background: rgba(168, 85, 247, 0.25) !important;
}

/* Footer */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] body.host-page .site-footer,
html[data-theme="dark"] body.app-page .site-footer {
  background: rgba(20, 14, 38, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .footer-btn.help,
html[data-theme="dark"] body.host-page .footer-btn.help,
html[data-theme="dark"] body.app-page .footer-btn.help {
  background: rgba(30, 41, 59, 0.7) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .footer-btn.help:hover {
  background: rgba(51, 65, 85, 0.8) !important;
}
html[data-theme="dark"] .footer-credits,
html[data-theme="dark"] body.host-page .footer-credits,
html[data-theme="dark"] body.app-page .footer-credits {
  color: var(--text-main) !important;
}
html[data-theme="dark"] .footer-collab-divider,
html[data-theme="dark"] body.host-page .footer-collab-divider,
html[data-theme="dark"] body.app-page .footer-collab-divider {
  color: rgba(196, 181, 253, 0.7) !important;
}

/* Login page */
html[data-theme="dark"] .auth-google-btn {
  background: linear-gradient(180deg, #1e1b3a 0%, #150f28 100%) !important;
  color: #f5f0ff !important;
  border-color: rgba(168, 85, 247, 0.24) !important;
}
html[data-theme="dark"] .auth-google-btn:hover {
  background: linear-gradient(180deg, #241f47 0%, #1a1533 100%) !important;
}

/* Score manager + answers widgets (host.html) */
html[data-theme="dark"] .score-current-card {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .answer-entry-card {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .answer-entry-card.is-correct {
  background: rgba(34, 197, 94, 0.12) !important;
}
html[data-theme="dark"] .answer-entry-card.is-incorrect {
  background: rgba(239, 68, 68, 0.12) !important;
}
html[data-theme="dark"] .summary-chip {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .answer-option-card {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .host-btn-group {
  background: rgba(20, 14, 38, 0.9) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* Question picker + score-player picker (custom dropdowns on host.html) */
html[data-theme="dark"] .score-player-trigger,
html[data-theme="dark"] .question-picker-trigger {
  background: rgba(15, 10, 31, 0.7) !important;
  border-color: rgba(168, 120, 255, 0.3) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .score-player-menu,
html[data-theme="dark"] .question-picker-menu {
  background: linear-gradient(180deg, #1e1b3a, #150f28) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}
html[data-theme="dark"] .score-player-option,
html[data-theme="dark"] .question-picker-option {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(168, 85, 247, 0.18) !important;
  color: var(--text-main) !important;
}
html[data-theme="dark"] .score-player-option:hover,
html[data-theme="dark"] .question-picker-option:hover {
  background: rgba(51, 65, 85, 0.85) !important;
}
html[data-theme="dark"] .score-player-option.is-selected,
html[data-theme="dark"] .question-picker-option.is-selected {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #e9d5ff !important;
}
html[data-theme="dark"] .question-picker-empty {
  background: rgba(30, 41, 59, 0.6) !important;
}

/* Invites page */
html[data-theme="dark"] .tq-invites-container .tq-invite-card {
  background: rgba(30, 41, 59, 0.6) !important;
}
html[data-theme="dark"] .tq-invites-container .tq-invite-card.active {
  background: rgba(168, 85, 247, 0.14) !important;
}
html[data-theme="dark"] .tq-invites-container .tq-btn {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .tq-invites-container .tq-btn:hover {
  background: rgba(51, 65, 85, 0.85) !important;
}
html[data-theme="dark"] .invite-link-action-btn {
  background: rgba(30, 41, 59, 0.7) !important;
}
html[data-theme="dark"] .tq-invites-container .tq-btn.is-disabled,
html[data-theme="dark"] .tq-invites-container .tq-btn:disabled,
html[data-theme="dark"] .invite-link-action-btn:disabled {
  opacity: 0.55 !important;
}
html[data-theme="dark"] .tq-invites-container .tq-ico-copy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='10' height='10' rx='2'/%3E%3Cpath d='M15 9V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .tq-invites-container .tq-ico-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 0 1 0-7l2-2a5 5 0 0 1 7 7l-1 1'/%3E%3Cpath d='M14 10a5 5 0 0 1 0 7l-2 2a5 5 0 0 1-7-7l1-1'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .tq-invites-container .tq-ico-refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] .tq-invites-container .tq-card-btn:hover .tq-ico-copy,
html[data-theme="dark"] .tq-invites-container .tq-card-btn:hover .tq-ico-open {
  filter: brightness(1.15);
}

/* Twitch tracker page-specific cards (some use inline style="" for the light
   background, which needs !important to lose to a class-based dark override) */
html[data-theme="dark"] .twitch-search-input {
  background: rgba(15, 10, 31, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-theme="dark"] .twitch-guide-card,
html[data-theme="dark"] .twitch-status-card,
html[data-theme="dark"] .twitch-settings-toolbar {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.7), rgba(20, 14, 38, 0.6)) !important;
}
html[data-theme="dark"] .twitch-settings-toolbar-title {
  color: #d8b4fe !important;
}
html[data-theme="dark"] .twitch-status-card::after {
  background: none !important;
}
html[data-theme="dark"] .twitch-guide-card h3,
html[data-theme="dark"] .twitch-settings-status-head h3 {
  color: var(--text-main) !important;
}
html[data-theme="dark"] .twitch-status-value {
  color: #e9d5ff !important;
}
html[data-theme="dark"] .twitch-pagination-label {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.85), rgba(30, 41, 59, 0.75)) !important;
  border-color: rgba(168, 85, 247, 0.28) !important;
  color: #d8b4fe !important;
}
html[data-theme="dark"] .twitch-prediction-outcome {
  background: rgba(30, 41, 59, 0.5) !important;
}
html[data-theme="dark"] .twitch-prediction-outcome.is-winning {
  background: rgba(34, 197, 94, 0.12) !important;
}
html[data-theme="dark"] .twitch-prediction-row {
  background: rgba(51, 65, 85, 0.55) !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="connected"] {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(30, 41, 59, 0.6)) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="connected"] .twitch-status-value {
  color: #86efac !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="connected"] .twitch-status-kicker {
  color: #4ade80 !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="disconnected"] {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.16), rgba(30, 41, 59, 0.6)) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="disconnected"] .twitch-status-value {
  color: #fca5a5 !important;
}
html[data-theme="dark"] #trackerStateCard[data-state="disconnected"] .twitch-status-kicker {
  color: #f87171 !important;
}
html[data-theme="dark"] .twitch-page-btn {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.8), rgba(30, 41, 59, 0.75)) !important;
  color: #d8b4fe !important;
}
html[data-theme="dark"] .twitch-page-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.85), rgba(51, 65, 85, 0.85)) !important;
}