/* =============================================================================
   Theme System — Light / Dark Mode
   Include this in every page. Toggle via theme-toggle.js.
   CSS custom properties adapt all UI elements automatically.
   ============================================================================= */

/* --- Light Mode (default) --- */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #e8ecf1;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f0f2f5;
  --bg-modal-overlay: rgba(0, 0, 0, 0.5);

  --text-primary: #1a1a2e;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --text-inverse: #ffffff;
  --text-link: #3182ce;
  --text-link-hover: #2c5282;

  --border-color: #e2e8f0;
  --border-color-focus: #3182ce;
  --border-color-subtle: #edf2f7;

  --accent-primary: #3182ce;
  --accent-primary-hover: #2b6cb0;
  --accent-success: #38a169;
  --accent-warning: #d69e2e;
  --accent-danger: #e53e3e;
  --accent-danger-hover: #c53030;
  --accent-info: #3182ce;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --table-header-bg: #f7fafc;
  --table-row-hover: #f0f4f8;
  --table-stripe: #fafbfc;

  --badge-active-bg: #c6f6d5;
  --badge-active-text: #22543d;
  --badge-inactive-bg: #fed7d7;
  --badge-inactive-text: #742a2a;
  --badge-pending-bg: #fefcbf;
  --badge-pending-text: #744210;

  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;

  color-scheme: light;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d27;
  --bg-tertiary: #252836;
  --bg-card: #1e2130;
  --bg-input: #252836;
  --bg-hover: #2a2d3a;
  --bg-modal-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-tertiary: #718096;
  --text-inverse: #1a1a2e;
  --text-link: #63b3ed;
  --text-link-hover: #90cdf4;

  --border-color: #2d3748;
  --border-color-focus: #63b3ed;
  --border-color-subtle: #1e2130;

  --accent-primary: #4299e1;
  --accent-primary-hover: #63b3ed;
  --accent-success: #48bb78;
  --accent-warning: #ecc94b;
  --accent-danger: #fc8181;
  --accent-danger-hover: #feb2b2;
  --accent-info: #63b3ed;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

  --table-header-bg: #252836;
  --table-row-hover: #2a2d3a;
  --table-stripe: #1e2130;

  --badge-active-bg: #22543d;
  --badge-active-text: #c6f6d5;
  --badge-inactive-bg: #742a2a;
  --badge-inactive-text: #fed7d7;
  --badge-pending-bg: #744210;
  --badge-pending-text: #fefcbf;

  --scrollbar-track: #1a1d27;
  --scrollbar-thumb: #4a5568;

  color-scheme: dark;
}

/* --- Base Resets Using Theme Vars --- */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

input, select, textarea {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-color-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

/* --- Theme Toggle Button --- */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-md);
  transition: background-color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
  background: var(--bg-hover);
}

/* Light mode shows moon icon, dark mode shows sun icon */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- Scrollbar Theming --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }