/* ─── Dark theme overrides ───────────────────────────────────────────────
   Most of the UI already paints from the tokens in variables.css, so this
   file only re-tones the places that were written with literal light colours
   before the theme existed. Everything here is scoped to [data-theme="dark"],
   so the light theme is untouched. */

:root[data-theme="dark"] .theme-toggle { border-color: var(--border); }

/* Surfaces that were literal white / near-white */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .eq-modal,
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .ai-window,
:root[data-theme="dark"] .ai-bar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .fa-view-toggle,
:root[data-theme="dark"] .select-filter,
:root[data-theme="dark"] .fa-journal-filters select {
  background: var(--surface);
  color: var(--text);
}

/* Table headers and inset strips */
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] .wh-tx-head,
:root[data-theme="dark"] .emp-table thead th,
:root[data-theme="dark"] .rates-table thead th,
:root[data-theme="dark"] .sp-table thead th,
:root[data-theme="dark"] .fh-pred-row,
:root[data-theme="dark"] .fa-det-block {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* Form controls */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }
/* Native date/number pickers render black-on-black without this */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button { filter: invert(1) opacity(.7); }
:root[data-theme="dark"] option { background: var(--surface-2); color: var(--text); }

/* Buttons that were white-on-light */
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .icon-btn {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .icon-btn:hover { background: var(--border); }

/* --green is lightened for dark backgrounds, so white-on-green loses contrast:
   the primary button reads better with dark text on it. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .page-btn.active-page,
:root[data-theme="dark"] .fa-view-btn.active,
:root[data-theme="dark"] .sp-confirm-btn.sp-confirm-active { color: #10231A; font-weight: 600; }
:root[data-theme="dark"] .btn-primary:hover { background: #8ABF9E; }

/* ─── Tinted chips, badges and blocks ────────────────────────────────────
   These were written with literal pastel backgrounds and dark text. Simply
   brightening them turns them white, so each hue family gets a real dark
   counterpart: deep tinted background + light tinted text. */

/* neutral */
:root[data-theme="dark"] .tag-gray,
:root[data-theme="dark"] .icon-gray,
:root[data-theme="dark"] .ct-empty,
:root[data-theme="dark"] .eq-status-inactive,
:root[data-theme="dark"] .emp-badge-inactive,
:root[data-theme="dark"] .rates-year-badge.past,
:root[data-theme="dark"] .rates-mode-bar.mode-past,
:root[data-theme="dark"] .rates-mode-bar.mode-empty,
:root[data-theme="dark"] .group-subtotal td,
:root[data-theme="dark"] .emp-card-body,
:root[data-theme="dark"] .emp-works-table th,
:root[data-theme="dark"] .ai-messages,
:root[data-theme="dark"] .sp-seg-current .sp-seg-circle,
:root[data-theme="dark"] .rates-table tr.row-sub,
:root[data-theme="dark"] .rates-table.edit-mode input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] .area-group-th,
:root[data-theme="dark"] .area-sub-th,
:root[data-theme="dark"] tbody td.area-col {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}

/* green */
:root[data-theme="dark"] .status-active,
:root[data-theme="dark"] .eq-status-active,
:root[data-theme="dark"] .sev-low,
:root[data-theme="dark"] .sev-resolved,
:root[data-theme="dark"] .req-status-done,
:root[data-theme="dark"] .tech-status-completed,
:root[data-theme="dark"] .tech-stage-2,
:root[data-theme="dark"] .fert-block-topdressing,
:root[data-theme="dark"] .fert-tag-topdressing,
:root[data-theme="dark"] .wh-tx-badge.in,
:root[data-theme="dark"] .wh-type-toggle button.active-in,
:root[data-theme="dark"] .pt-sun {
  background: #1E2E23;
  color: #7FC397;
  border-color: #2E4A38;
}

:root[data-theme="dark"] .status-awaiting { background: #1B2733; color: #7FB4DB; }
:root[data-theme="dark"] .status-awaiting .status-dot { background: #5A9BCB; }
:root[data-theme="dark"] .status-inactive { background: #2E261A; color: #D69344; }
:root[data-theme="dark"] .status-inactive .status-dot { background: #D69344; }

/* brown / amber */
:root[data-theme="dark"] .status-fallow,
:root[data-theme="dark"] .status-prep,
:root[data-theme="dark"] .eq-status-maint,
:root[data-theme="dark"] .sev-medium,
:root[data-theme="dark"] .sev-progress,
:root[data-theme="dark"] .api-notice,
:root[data-theme="dark"] .req-note,
:root[data-theme="dark"] .tech-status-in_progress,
:root[data-theme="dark"] .tech-stage-1,
:root[data-theme="dark"] .fert-block-presowing,
:root[data-theme="dark"] .fert-tag-presowing,
:root[data-theme="dark"] .wh-badge-low,
:root[data-theme="dark"] .rates-year-badge.future,
:root[data-theme="dark"] .rates-mode-bar.mode-future,
:root[data-theme="dark"] .pt-rape,
:root[data-theme="dark"] .pt-wheat {
  background: #2E2517;
  color: #D9A05B;
  border-color: #4D3D22;
}

/* red */
:root[data-theme="dark"] .eq-status-repair,
:root[data-theme="dark"] .sev-high,
:root[data-theme="dark"] .sev-critical,
:root[data-theme="dark"] .sev-open,
:root[data-theme="dark"] .req-status-pending,
:root[data-theme="dark"] .emp-badge-sick,
:root[data-theme="dark"] .wh-badge-empty,
:root[data-theme="dark"] .wh-btn-out,
:root[data-theme="dark"] .wh-tx-badge.out,
:root[data-theme="dark"] .wh-type-toggle button.active-out,
:root[data-theme="dark"] .sp-multi-banner,
:root[data-theme="dark"] .sp-scheme-banner-draft,
:root[data-theme="dark"] .emp-icon-btn-del:hover,
:root[data-theme="dark"] .emp-row-btn-del:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #5A322E;
}

/* blue */
:root[data-theme="dark"] .tech-status-new,
:root[data-theme="dark"] .tech-stage-0,
:root[data-theme="dark"] .tech-tag,
:root[data-theme="dark"] .fert-block-main,
:root[data-theme="dark"] .fert-tag-main,
:root[data-theme="dark"] .emp-badge-vacation,
:root[data-theme="dark"] .pt-millet,
:root[data-theme="dark"] .pt-barley {
  background: #1A2632;
  color: #83B4DC;
  border-color: #2A3E52;
}

/* purple */
:root[data-theme="dark"] .fert-tag-custom,
:root[data-theme="dark"] .tech-tag-custom,
:root[data-theme="dark"] .tech-stage-4,
:root[data-theme="dark"] .sp-scheme-banner {
  background: #271E33;
  color: #B99BDA;
  border-color: #3C2E4D;
}

/* pink */
:root[data-theme="dark"] .tech-stage-3,
:root[data-theme="dark"] .pt-phac {
  background: #2E1F27;
  color: #D695AE;
  border-color: #4A3140;
}

/* teal */
:root[data-theme="dark"] .tech-stage-5 {
  background: #17292B;
  color: #79BCC0;
  border-color: #26454A;
}

/* The rates sheet's highlight row was pure #FFFF66 */
:root[data-theme="dark"] .rates-table tr.row-highlighted,
:root[data-theme="dark"] .rates-table tr.row-highlighted td {
  background: #3A3312 !important;
  color: #F0D67A !important;
}
:root[data-theme="dark"] .rates-table tr.row-highlighted:hover,
:root[data-theme="dark"] .rates-table tr.row-highlighted:hover td { background: #47401A !important; }

/* The crop-statistics bars get their colour from an inline style in fields.js,
   so they're toned down here rather than recoloured — pastel fills glare on a
   dark track. A solid bar carries no text, so dimming is safe. */
:root[data-theme="dark"] .crop-stat-fill { filter: brightness(.55) saturate(1.25); }

/* Per-crop tones (--ct-h / --ct-s, set in crop-colors.js). Pastel chips turn to
   washed-out white on a dark page, so the pair is flipped: deep tinted
   background, light tinted text. The stat row already carries its own tones, so
   it skips the blanket dimming above. */
:root[data-theme="dark"] .crop-tag.ct-auto {
  background: hsl(var(--ct-h) calc(var(--ct-s, 64%) * 0.5)  20%);
  color:      hsl(var(--ct-h) calc(var(--ct-s, 64%) * 1.05) 74%);
}
:root[data-theme="dark"] .crop-stat-item.ct-auto .crop-stat-dot {
  background: hsl(var(--ct-h) calc(var(--ct-s, 64%) * 0.85) 58%);
}
:root[data-theme="dark"] .crop-stat-item.ct-auto .crop-stat-fill {
  background: hsl(var(--ct-h) calc(var(--ct-s, 64%) * 0.75) 45%);
  filter: none;
}

/* Row hovers that assumed a light page */
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .field-row:hover td,
:root[data-theme="dark"] .wh-table tr:hover td,
:root[data-theme="dark"] .emp-card-header:hover,
:root[data-theme="dark"] .emp-works-table tbody tr:hover td { background: var(--surface-2); }

/* The calendar now paints its day states straight from the theme tokens
   (see calendar.css), so nothing extra is needed here. */

/* Rows highlighted with a literal light green */
:root[data-theme="dark"] .sp-row-confirmed td,
:root[data-theme="dark"] tr.sp-row-selected td { background: var(--green-light); }

/* Hover states that assumed a light page */
:root[data-theme="dark"] .fa-journal-row:hover,
:root[data-theme="dark"] .fa-day-item:hover,
:root[data-theme="dark"] .fa-overdue-row:hover,
:root[data-theme="dark"] .field-row:hover td { background: var(--surface-2); }

/* Modal scrim a touch deeper so the dark modal still separates */
:root[data-theme="dark"] .eq-modal-backdrop { background: rgba(0, 0, 0, .62); }

/* ─── The toggle itself (both themes) ─────────────────────────────────── */
.theme-toggle {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--green); }