/* ============================================
   QUIZZES TODAY – Dark/Light Theme System
   Gaming aesthetic via CSS variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------- LIGHT THEME ---------- */
body.light-theme {
  --bg-color: #F8FAFC;
  --header-footer-color: #282828;
  --surface-color: #FFFFFF;
  --button-bg: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --accent: #ffae00;
  --border-color: #E2E8F0;
}

/* ---------- DARK THEME (Gaming Oriented) ---------- */
body.dark-theme {
  --bg-color: #0B0E14;
  --header-footer-color: #282828;
  --surface-color: #161B22;
  --button-bg: #282828;
  --text-primary: #F8FAFC;
  --text-secondary: #8B949E;
  --accent: #ffae00;
  --border-color: rgba(255, 255, 255, 0.1);
}

/* Fallback when no class (default to dark) */
body:not(.light-theme):not(.dark-theme) {
  --bg-color: #0B0E14;
  --header-footer-color: #282828;
  --surface-color: #161B22;
  --button-bg: #282828;
  --text-primary: #F8FAFC;
  --text-secondary: #8B949E;
  --accent: #ffae00;
  --border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- TABLE HEADERS (th) - theme-aware ---------- */
body.light-theme th {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1px solid #94A3B8 !important;
}
body.dark-theme th,
body:not(.light-theme):not(.dark-theme) th {
  background: var(--header-footer-color, #282828) !important;
  color: var(--text-primary, #F8FAFC) !important;
}

/* ---------- DATE PICKER BUTTONS (#dateContainer) - light theme ---------- */
body.light-theme #dateContainer button {
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
body.light-theme #dateContainer button:hover:not(:disabled) {
  background: var(--accent, #ffae00) !important;
  color: #0F172A !important;
}
body.light-theme #dateContainer button:disabled,
body.light-theme #dateContainer button:disabled:hover {
  background: rgba(143, 31, 31, 0.5) !important;
  color: var(--text-secondary, #8B949E) !important;
}

/* ---------- HINT BUTTON - shared across Sortle, Yin Yang, Conflict Zone ---------- */
.hintBtn,
#hint-btn {
  background-color: var(--accent, #ffae00) !important;
  color: var(--text-primary, #0F172A) !important;
  border: none !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  cursor: pointer;
}
.hintBtn:hover,
#hint-btn:hover {
  background-color: var(--header-footer-color, #282828) !important;
  color: var(--accent, #ffae00) !important;
}

/* ---------- CLEAR / RESET PUZZLE - theme-aware borders ---------- */
body.light-theme .clear-btn,
body.light-theme #reset {
  border: 1px solid #475569 !important;
}
body.dark-theme .clear-btn,
body.dark-theme #reset,
body:not(.light-theme):not(.dark-theme) .clear-btn,
body:not(.light-theme):not(.dark-theme) #reset {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ---------- DISABLED BUTTONS - same as dark theme for both themes ---------- */
body.light-theme button:disabled,
body.light-theme button:disabled:hover {
  background: rgba(143, 31, 31, 0.5) !important;
  color: var(--text-secondary, #8B949E) !important;
}