/*
 * Dark Mode overlay — applies only when the root carries [data-theme="dark"]
 * (set server-side from the Appearance > Mode setting). Loaded on every
 * page, inert otherwise.
 *
 * Strategy: the base stylesheets use hardcoded hex colors in dozens of
 * places rather than CSS variables, so a clean per-selector re-skin isn't
 * practical. Instead, this file:
 *   1. Redefines the handful of --pms-* variables that already drive most
 *      of the shared chrome (body/page background, card/table borders,
 *      input borders, muted text) — safe because none of them double as a
 *      brand-chrome color (the sidebar/back-to-top/mobile-toggle use
 *      --pms-navy, which is left untouched on purpose).
 *   2. Applies `filter:invert(1) hue-rotate(180deg)` to each surface
 *      component (.card, .table, .modal, buttons, badges, alerts, ...).
 *      This flips whatever hardcoded light background + dark text that
 *      component was authored with into a dark background + light text,
 *      regardless of which of the many hex values it used — without
 *      needing to enumerate every one. Components already living inside
 *      another filtered surface are excluded via :not(...) guards so the
 *      filter isn't applied twice (which would cancel back to the original
 *      light colors).
 *   3. The sidebar, its toggle, the back-to-top button and the FAB/toast
 *      (already dark-on-purpose in every theme combo) are deliberately
 *      left unfiltered.
 */

:root[data-theme="dark"] {
  --pms-bg: #10151a;
  --pms-card: #1b232a;
  --pms-border: #2c363e;
  --pms-text: #dbe2e6;
  --pms-muted: #93a3ad;
  --pms-input: #3a444c;
  color-scheme: dark;
}

/* Bare headings that sit directly in the page flow (not inside any of the
   filtered surfaces below), so they'd otherwise stay dark-on-dark. */
[data-theme="dark"] .title h1,
[data-theme="dark"] .page-intro h2 {
  color: #eef2f4;
}

[data-theme="dark"] ::selection {
  background: #3a444c;
  color: #eef2f4;
}

/* ---- Filtered surfaces: flips background + text together as one unit ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .modal,
[data-theme="dark"] .login-card,
[data-theme="dark"] .pagination-bar,
[data-theme="dark"] .pagination-download-btn,
[data-theme="dark"] .pagination-email-btn,
[data-theme="dark"] .view-columns-card,
[data-theme="dark"] .user-pill,
[data-theme="dark"] .dashboard-hero,
[data-theme="dark"] .dashboard-kpi,
[data-theme="dark"] .dashboard-finance-card,
[data-theme="dark"] .dashboard-footer-status,
[data-theme="dark"] .calendar-card,
[data-theme="dark"] .cal-daycell,
[data-theme="dark"] .quick-fab-menu {
  filter: invert(1) hue-rotate(180deg);
}

/* Elements that also appear standalone (outside any of the surfaces above)
   get their own filter, guarded so it never doubles up with an ancestor's
   filter (two inversions would cancel back to the original light colors). */
[data-theme="dark"] .table:not(.card *):not(.modal *) {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .btn:not(.card *):not(.modal *):not(.login-card *):not(.pagination-bar *) {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .badge:not(.card *):not(.modal *):not(.table *),
[data-theme="dark"] .status-badge:not(.card *):not(.modal *):not(.table *) {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .alert:not(.card *):not(.modal *):not(.login-card *) {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .combo-options:not(.card *):not(.modal *) {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .import-status-imported:not(.table *):not(.card *),
[data-theme="dark"] .import-status-duplicate:not(.table *):not(.card *),
[data-theme="dark"] .import-status-error:not(.table *):not(.card *),
[data-theme="dark"] .import-status-pending:not(.table *):not(.card *),
[data-theme="dark"] .secondary-btn:not(.card *):not(.modal *) {
  filter: invert(1) hue-rotate(180deg);
}

/* Theme swatch preview chips must keep showing their true colors — cancel
   out the ancestor .card's filter with a second inversion. */
[data-theme="dark"] .theme-combo-preview,
[data-theme="dark"] .theme-mode-preview {
  filter: invert(1) hue-rotate(180deg);
}