/* Theme CSS Variables for Light/Dark Mode Support
 * This file defines CSS custom properties that enable theme switching
 * Default: Dark Mode (backwards compatible)
 */

/* ===================================================================
   DEFAULT THEME: DARK MODE (Current)
   =================================================================== */
:root {
  /* Background Colors */
  --bg-primary: rgb(0, 0, 0);           /* Main background (body) */
  --bg-secondary: #1a1a1a;              /* Secondary backgrounds */
  --bg-tertiary: #2a2a2a;               /* Tertiary backgrounds */
  --bg-popup: #ffffff;                  /* Popup/modal backgrounds */
  --bg-choice: #ffffff;                 /* Quiz choice backgrounds */
  --bg-table-header: #333333;           /* Table header backgrounds */
  --bg-table-row-even: #444444;         /* Table even row backgrounds */
  --bg-card: #1a1a1a;                   /* Card backgrounds */
  --bg-input: #ffffff;                  /* Input field backgrounds */
  --bg-answer-user: #1a3a5a;            /* User selected answer background (blue tint) */
  --bg-answer-correct: #1a3a2a;         /* Correct answer background (green tint) */
  --bg-answer-incorrect: #3a1a1a;       /* Incorrect answer background (red tint) */

  /* Text Colors */
  --text-primary: #ececec;              /* Primary text color */
  --text-secondary: #f9f8fc;            /* Secondary text (headings) */
  --text-inverse: #000000;              /* Inverse text (on white bg) */
  --text-label: #fd9814;                /* Label/accent text */
  --text-muted: #aaaaaa;                /* Muted/disabled text */
  --text-link: #4a9eff;                 /* Link text */
  --choice-text: #000000;               /* Quiz choice text - always black */

  /* Border Colors */
  --border-primary: #333333;            /* Primary borders */
  --border-secondary: #555555;          /* Secondary borders */
  --border-tertiary: #cccccc;           /* Tertiary borders */
  --border-input: #ffffff;              /* Input borders */
  --border-dark: #000000;               /* Dark borders */

  /* Chart Colors (same in both modes) */
  --chart-red: #ff0000;
  --chart-orange: #ffa500;
  --chart-green: #00ff00;
  --chart-grey: #808080;
  --chart-text: #ffffff;                /* Chart text color (dynamic) */
  --chart-legend: #ffffff;              /* Chart legend color (dynamic) */

  /* Button Colors */
  --btn-primary: #fd9814;               /* Primary button background */
  --btn-primary-hover: #e68a00;         /* Primary button hover */
  --btn-text: #000000;                  /* Button text */
  --btn-hover: #ffffff;                 /* Button hover background - white for dark mode */
  --btn-border: #000000;                /* Button border (dark mode = black) */
  --btn-secondary: #555555;             /* Secondary button background */
  --btn-secondary-hover: #777777;       /* Secondary button hover */
  --btn-danger-bg: #dc3545;             /* Danger button background */
  --btn-danger-text: #ffffff;           /* Danger button text */
  --btn-danger-hover: #c82333;          /* Danger button hover */

  /* Status Colors (same in both modes) */
  --status-correct: green;
  --status-incorrect: red;
  --status-skipped: grey;
  --status-current: orange;
  --status-answered: #0362C1;
  --status-not-asked: #000000;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.274);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  --shadow-dark: rgba(0, 0, 0, 0.8);
}

/* ===================================================================
   LIGHT MODE OVERRIDES
   =================================================================== */
body.light-mode {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e0e0e0;
  --bg-popup: #ffffff;
  --bg-choice: #f9f9f9;
  --bg-table-header: #e0e0e0;
  --bg-table-row-even: #f5f5f5;
  --bg-card: #f9f9f9;
  --bg-input: #ffffff;
  --bg-answer-user: #cce5ff;            /* User selected answer background (light blue) */
  --bg-answer-correct: #d4edda;         /* Correct answer background (light green) */
  --bg-answer-incorrect: #f8d7da;       /* Incorrect answer background (light red) */

  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #1a1a1a;
  --text-inverse: #ffffff;
  --text-label: #000000;
  --text-muted: #666666;
  --text-link: #0066cc;
  --choice-text: #000000;               /* Quiz choice text - always black */

  /* Border Colors */
  --border-primary: #cccccc;
  --border-secondary: #666666;
  --border-tertiary: #999999;
  --border-input: #cccccc;
  --border-dark: #000000;

  /* Chart Colors (text changes for light mode) */
  --chart-text: #000000;
  --chart-legend: #000000;

  /* Button hover (light gray for light mode) */
  --btn-hover: #d3d3d3;

  /* Shadows (lighter for light mode) */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.3);
}

/* ===================================================================
   APPLY THEME COLORS TO ELEMENTS
   =================================================================== */

/* Root and Body */
:root {
  background-color: var(--bg-primary);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-secondary);
}

/* Links */
a {
  color: var(--text-link);
}

/* Grid Items */
.grid-item {
  border-color: var(--border-primary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.grid-item.not-asked {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
}

/* Popups */
.popup {
  background-color: var(--bg-popup);
  border-color: var(--border-secondary);
}

.popup h2,
.popup p,
.popup .text {
  color: #000000 !important;
}

.popup strong,
.popup .label {
  color: var(--text-link) !important;
}

/* Tables */
table th {
  background-color: var(--bg-table-header);
  color: var(--text-primary);
}

table tr:nth-child(even) {
  background-color: var(--bg-table-row-even);
}

.report-table th {
  background-color: var(--bg-table-header);
  color: var(--text-primary);
}

.report-table tr:nth-child(even) {
  background-color: var(--bg-table-row-even);
}

/* Info Sections */
.info-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-tertiary);
}

.info-item {
  background-color: var(--bg-tertiary);
}

/* Choice Containers */
.choice-container {
  background-color: var(--bg-choice);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

.choice-text {
  color: var(--choice-text);
}

/* Matching Questions */
.upper-pane,
.lower-pane {
  background-color: var(--bg-choice);
  border-color: var(--border-secondary);
}

.prompt-slot {
  background-color: var(--bg-choice);
}

.prompt-text {
  color: var(--text-primary);
}

/* Smooth Transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.grid-item,
.popup,
.choice-container,
.info-section,
.info-item {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}