/* ==========================================================================
   theme.css - Jonno's Jobs / NZ Teacher Vacancies Desk
   Theme variables, dark/light/auto overrides, and accessible controls.
   Preserves purple and green brand identity across all visual modes.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  /* Light mode brand defaults */
  --ink: #292632;
  --muted: #676370;
  --purple: #78528c;
  --primary-text: #ffffff;
  --purple-dark: #4e355e;
  --purple-hover: #3d284a;
  --green: #47783c;
  --cream: #f5f3ec;
  --paper: #fffefa;
  --line: #dedadf;
  --pale: #eee7f2;
  --softgreen: #e8f1e2;

  /* Surface & control tokens */
  --surface-hover: #ffffff;
  --border-hover: #c4b4cd;
  --input-bg: #ffffff;
  --input-border: #cbc5d0;
  --input-text: #292632;
  --focus-outline: #77a352;
  --th-bg: #f1edf3;
  --empty-border: #c4bdc7;
  --due-color: #983d2c;
  --timeline-line: #c8b4d1;
  --meter-bar-bg: #eee8f0;
  --meter-value-bg: #78528c;
  --heat-bg: #e4d7ea;
  --heat-text: #4c315c;
  --status-pill-bg: #e8f1e2;
  --status-pill-text: #305227;
  --new-pill-bg: #47783c;
  --new-pill-text: #ffffff;
  --status-pill-muted-bg: #ece8ed;
  --status-pill-muted-text: #676370;
  --new-match-bg: #f4f7ed;
  --new-match-border: #b7cba5;
  --login-panel-bg: #f5f2e5;
  --hero-bg: #4e355e;
  --hero-text: #ffffff;
  --hero-p: #e3d8e9;
  --hero-btn-bg: #d1e7bd;
  --hero-btn-text: #273b20;
  --link-color: #4e355e;
  --link-hover: #352340;
  --btn-secondary-bg: #fffefa;
  --btn-secondary-border: #dedadf;
  --btn-secondary-text: #292632;
  --flash-error-bg: #f8e3df;
  --flash-error-text: #78261e;
  --flash-error-border: #f1c3bb;
  --client-msg-bg: #4e355e;
  --client-msg-text: #ffffff;
  --client-msg-border: #ffffff;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Dark mode brand tokens */
  --ink: #f0edf5;
  --muted: #a59fb0;
  --purple: #aa80c3;
  --primary-text: #201628;
  --purple-dark: #cba8e5;
  --purple-hover: #b993d6;
  --green: #68ab57;
  --cream: #131118;
  --paper: #1c1825;
  --line: #373142;
  --pale: #2b2438;
  --softgreen: #1a2a16;

  --surface-hover: #241f30;
  --border-hover: #5d5172;
  --input-bg: #231f2d;
  --input-border: #4e445d;
  --input-text: #f0edf5;
  --focus-outline: #8bcc7b;
  --th-bg: #272233;
  --empty-border: #484058;
  --due-color: #ff8876;
  --timeline-line: #4e4062;
  --meter-bar-bg: #2b2438;
  --meter-value-bg: #aa80c3;
  --heat-bg: #402c54;
  --heat-text: #eedbfb;
  --status-pill-bg: #1c3017;
  --status-pill-text: #a8ee94;
  --new-pill-bg: #478035;
  --new-pill-text: #ffffff;
  --status-pill-muted-bg: #2b2537;
  --status-pill-muted-text: #a59fb0;
  --new-match-bg: #1b2717;
  --new-match-border: #3b532e;
  --login-panel-bg: #1c1825;
  --hero-bg: #2f203a;
  --hero-text: #ffffff;
  --hero-p: #d5c8dc;
  --hero-btn-bg: #28441f;
  --hero-btn-text: #d4f2c2;
  --link-color: #cba8e5;
  --link-hover: #ebd5fb;
  --btn-secondary-bg: #231f2d;
  --btn-secondary-border: #443c53;
  --btn-secondary-text: #f0edf5;
  --flash-error-bg: #3c1c1a;
  --flash-error-text: #ffb8b0;
  --flash-error-border: #642f2a;
  --client-msg-bg: #241f30;
  --client-msg-text: #f0edf5;
  --client-msg-border: #5d5172;

  color-scheme: dark;
}

/* Fallback before theme.js executes, respecting OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f0edf5;
    --muted: #a59fb0;
    --purple: #aa80c3;
    --primary-text: #201628;
    --purple-dark: #cba8e5;
    --purple-hover: #b993d6;
    --green: #68ab57;
    --cream: #131118;
    --paper: #1c1825;
    --line: #373142;
    --pale: #2b2438;
    --softgreen: #1a2a16;

    --surface-hover: #241f30;
    --border-hover: #5d5172;
    --input-bg: #231f2d;
    --input-border: #4e445d;
    --input-text: #f0edf5;
    --focus-outline: #8bcc7b;
    --th-bg: #272233;
    --empty-border: #484058;
    --due-color: #ff8876;
    --timeline-line: #4e4062;
    --meter-bar-bg: #2b2438;
    --meter-value-bg: #aa80c3;
    --heat-bg: #402c54;
    --heat-text: #eedbfb;
    --status-pill-bg: #1c3017;
    --status-pill-text: #a8ee94;
    --new-pill-bg: #478035;
    --new-pill-text: #ffffff;
    --status-pill-muted-bg: #2b2537;
    --status-pill-muted-text: #a59fb0;
    --new-match-bg: #1b2717;
    --new-match-border: #3b532e;
    --login-panel-bg: #1c1825;
    --hero-bg: #2f203a;
    --hero-text: #ffffff;
    --hero-p: #d5c8dc;
    --hero-btn-bg: #28441f;
    --hero-btn-text: #d4f2c2;
    --link-color: #cba8e5;
    --link-hover: #ebd5fb;
    --btn-secondary-bg: #231f2d;
    --btn-secondary-border: #443c53;
    --btn-secondary-text: #f0edf5;
    --flash-error-bg: #3c1c1a;
    --flash-error-text: #ffb8b0;
    --flash-error-border: #642f2a;
    --client-msg-bg: #241f30;
    --client-msg-text: #f0edf5;
    --client-msg-border: #5d5172;

    color-scheme: dark;
  }
}

/* ==========================================================================
   Element & Component Overrides
   ========================================================================== */

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

/* Accessibility Focus */
:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 2px;
}

.skip-link {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Header & Nav */
.site-header nav a {
  color: var(--ink);
}
.site-header nav a[aria-current="page"] {
  background: var(--pale);
  color: var(--link-color);
}
.site-header nav a:hover {
  background: var(--pale);
}

/* Buttons */
.button {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}
.button.primary {
  background: var(--purple);
  color: var(--primary-text);
  border-color: transparent;
}
.button.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.hero > .button {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  border: 1px solid transparent;
}

/* Dark mode button hover adjustments */
:root[data-theme="dark"] .button:hover {
  filter: brightness(1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button:hover {
    filter: brightness(1.15);
  }
}
:root[data-theme="dark"] .button.primary:hover {
  filter: brightness(1.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button.primary:hover {
    filter: brightness(1.08);
  }
}

/* Form Controls */
input,
select,
textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-text);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
}

/* Vacancy Card & Hover */
.vacancy-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}
.vacancy-card.new-match {
  background: var(--new-match-bg);
  border-color: var(--new-match-border);
}

/* Status & New Pills */
.status-pill {
  background: var(--status-pill-bg);
  color: var(--status-pill-text);
}
.new-pill {
  background: var(--new-pill-bg);
  color: var(--new-pill-text);
}
.status-pill.muted {
  background: var(--status-pill-muted-bg);
  color: var(--status-pill-muted-text);
}

/* Status filters */
.status-filters a {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.status-filters .selected {
  background: var(--purple);
  color: var(--primary-text);
  border-color: var(--purple);
}

/* Tables */
th {
  background: var(--th-bg);
  color: var(--muted);
  border-bottom-color: var(--line);
}
td {
  border-bottom-color: var(--line);
}
td.due {
  color: var(--due-color);
}

/* Empty State */
.empty {
  border-color: var(--empty-border);
  background: var(--paper);
  color: var(--muted);
}

/* Timeline */
.timeline {
  border-left-color: var(--timeline-line);
}

/* School Facts */
.school-facts dl div {
  background: var(--cream);
  border: 1px solid var(--line);
}

/* Meters */
meter::-webkit-meter-bar {
  background: var(--meter-bar-bg);
  border: 0;
}
meter::-webkit-meter-optimum-value {
  background: var(--meter-value-bg);
}
meter::-moz-meter-bar {
  background: var(--meter-value-bg);
}

/* Heatmap Table */
/* Counts share one scale, including the combined night row. */
.heatmap-table td { color: var(--ink); }
.heatmap-table .heat-0 { background: var(--paper); color: var(--muted); }
.heatmap-table .heat-1 { background: color-mix(in srgb, var(--purple) 12%, var(--paper)); }
.heatmap-table .heat-2 { background: color-mix(in srgb, var(--purple) 25%, var(--paper)); }
.heatmap-table .heat-3 { background: color-mix(in srgb, var(--purple) 40%, var(--paper)); }
.heatmap-table .heat-4 { background: color-mix(in srgb, var(--purple) 80%, var(--paper)); color: var(--primary-text); }
.heatmap-table .heat-5 { background: var(--purple); color: var(--primary-text); }

/* Hero Section */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
}
.hero p {
  color: var(--hero-p);
}

/* Login Panel & Mascot */
.login-panel {
  background: var(--login-panel-bg);
}
:root[data-theme="dark"] .login-mascot {
  mix-blend-mode: normal;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-mascot {
    mix-blend-mode: normal;
  }
}

/* Flash and Notification Messages */
.flash {
  background: var(--softgreen);
  color: var(--ink);
  border: 1px solid var(--line);
}
.flash.error {
  background: var(--flash-error-bg);
  color: var(--flash-error-text);
  border: 1px solid var(--flash-error-border);
}
#client-message {
  background: var(--client-msg-bg);
  color: var(--client-msg-text);
  border: 1px solid var(--client-msg-border);
}

/* Theme Selector Component */
.theme-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.theme-selector label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.theme-selector select {
  width: auto;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.3;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
}
.theme-selector select:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  .theme-selector {
    margin-left: auto;
  }
  .theme-selector label {
    font-size: 10px;
  }
  .theme-selector select {
    font-size: 10px;
    padding: 2px 4px;
  }
}