/* ── Dark mode fixes ──────────────────────────
   Loaded only on the pages with <body class="theme-aware"> (dashboard,
   admin, compliance, the policy pages, insights, 404). Everything here sits
   inside the dark media query, so light mode is untouched.

   Kept in one file on purpose: /css/* is cached for a year, so fixing the
   shared files in place would need a version bump on every page that loads
   them. This file is versioned on just the pages that use dark mode.

   Several rules override inline styles written by JS (confirm dialogs, the
   Stats page, the compliance calendar), which is why a few use !important.
   Found by the 2026-09-29 contrast audit (every section scanned in dark mode).
──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.theme-aware {
    /* Native controls (selects, date and colour pickers, scrollbars) follow the theme. */
    color-scheme: dark;
    --hover-bg: #1E2B37;
    --row-hover: #1A2631;
    --note-bg: #1C2833;
    --on-accent: #0F1923;
  }

  /* Text on yellow buttons and pills must stay dark: --text turns light in dark mode. */
  body.theme-aware .btn-primary,
  body.theme-aware .btn-login,
  body.theme-aware .filter-tab.active,
  body.theme-aware .if-rec.on { color: var(--on-accent); }
  body.theme-aware .btn-primary:hover { color: var(--on-accent); }

  /* The phone menu button's three lines were drawn in the fixed dark colour. */
  body.theme-aware .hamburger span { background: var(--text); }
  /* Empty rating stars used the border colour, which vanishes on dark. */
  body.theme-aware .if-star, body.theme-aware .cand-stars .off { color: rgba(148, 163, 179, 0.45); }
  body.theme-aware .if-star.on { color: var(--yellow); }

  /* Confirm and alert dialogs write their message as color:var(--dark) inline. */
  body.theme-aware .modal-body p[style*="--dark"] { color: var(--text) !important; }

  /* Hover and selected states that used hardcoded light backgrounds. */
  body.theme-aware .day-header:hover { background: var(--hover-bg); }
  body.theme-aware #cmp-table .data-table tbody tr:hover td { background: var(--row-hover); }
  body.theme-aware .data-table tbody tr:hover { background: var(--row-hover); }
  body.theme-aware .data-table .actions-cell { background: var(--surface); box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.5); }
  body.theme-aware .data-table tbody tr:hover .actions-cell { background: var(--row-hover); }
  body.theme-aware .cmp-pill.active { background: rgba(245, 194, 66, 0.18); border-color: var(--yellow); color: #F5D27A; }

  /* Status badges: lighter text on the same tinted backgrounds. */
  body.theme-aware .badge-yellow, body.theme-aware .badge-warning, body.theme-aware .badge-advisory,
  body.theme-aware .cmp-modstatpill.warn { color: #F2C66D; background: rgba(245, 194, 66, 0.14); }
  body.theme-aware .badge-blue, body.theme-aware .badge-info, body.theme-aware .badge-income-tax,
  body.theme-aware .badge-fintech { color: #93BEEA; background: rgba(66, 153, 225, 0.16); }
  body.theme-aware .badge-green, body.theme-aware .badge-success, body.theme-aware .badge-gst,
  body.theme-aware .cmp-modstatpill.ok { color: #86D1A5; background: rgba(72, 187, 120, 0.14); }
  body.theme-aware .badge-danger, body.theme-aware .badge-red, body.theme-aware .cmp-modstatpill.bad { color: #FC9A9A; background: rgba(229, 62, 62, 0.16); }
  body.theme-aware .badge-gray { color: var(--muted); background: rgba(148, 163, 179, 0.12); }
  body.theme-aware #cmp-reset-all { color: #FC9A9A; }
  /* Insights tags sit on photos, so give them a solid backing. */
  body.theme-aware .ins-card-badge .badge { background-color: rgba(15, 25, 35, 0.85); }

  /* Light utility boxes and notices. */
  body.theme-aware .bg-light { background: var(--note-bg); }
  body.theme-aware [style*="#FFF9E6"] { background: rgba(245, 194, 66, 0.10) !important; }
  body.theme-aware [style*="#FFF9E6"] [style*="#B7791F"] { color: #F2C66D !important; }
  body.theme-aware [style*="#FFF9E6"] [style*="#975A16"] { color: #E7C98A !important; }
  body.theme-aware #intro-preview { background: var(--surface) !important; }

  /* Stat card icons: brand colours too dark on their tinted circles. */
  /* #tsd-kpis variants are injected by js/admin/admin-timesheets-dashboard.js. */
  body.theme-aware .dash-stat-icon.blue, body.theme-aware #tsd-kpis .dash-stat-icon.blue { color: #93BEEA; }
  body.theme-aware .dash-stat-icon.green, body.theme-aware #tsd-kpis .dash-stat-icon.green { color: #C3CC8A; }
  body.theme-aware .dash-stat-icon.yellow, body.theme-aware #tsd-kpis .dash-stat-icon.yellow { color: #F2C66D; }
  body.theme-aware .dash-stat-icon.red { color: #FC9A9A; }
  body.theme-aware .cmp-stat.yellow .cmp-stat-icon { color: #F2C66D; }
  body.theme-aware .cmp-stat.green .cmp-stat-icon { color: #86D1A5; }
  body.theme-aware .cmp-stat.blue .cmp-stat-icon { color: #93BEEA; }
  body.theme-aware .cmp-stat.red .cmp-stat-icon { color: #FC9A9A; }

  /* Rich-text editor toolbar (Quill) in the admin panel. */
  body.theme-aware .ql-toolbar .ql-stroke { stroke: var(--text); }
  body.theme-aware .ql-toolbar .ql-fill { fill: var(--text); }
  body.theme-aware .ql-toolbar .ql-picker { color: var(--text); }
  body.theme-aware .ql-toolbar .ql-picker-options { background: var(--surface); }
  body.theme-aware .ql-toolbar.ql-snow, body.theme-aware .ql-container.ql-snow { border-color: var(--border); }

  /* My Stats page (styles injected by js/dashboard/stats.js). */
  body.theme-aware .stats-kpi { background: var(--surface); }
  body.theme-aware .stats-kpi-value,
  body.theme-aware .stats-card-header h3,
  body.theme-aware .stats-status-label,
  body.theme-aware .stats-status-count { color: var(--text); }
  body.theme-aware .stats-badge { background: var(--note-bg); }

  /* Compliance calendar (styles injected by js/components/compliance-calendar.js). */
  body.theme-aware .cmpcal-header-label,
  body.theme-aware .cmpcal-cell-date,
  body.theme-aware .cmpcal-mini-label,
  body.theme-aware .cmpcal-day-row-client { color: var(--text); }
  body.theme-aware .cmpcal-view-btn { background: var(--surface); color: var(--muted); }
  body.theme-aware .cmpcal-view-btn.active { background: var(--text); color: var(--on-accent); border-color: var(--text); }
  body.theme-aware .cmpcal-cell:hover { border-color: var(--muted); }
  body.theme-aware .cmpcal-badge-more { background: var(--note-bg); }
  body.theme-aware .cmpcal-cell, body.theme-aware .cmpcal-week-col { background: var(--surface); }
  body.theme-aware .cmpcal-cell.cmpcal-today, body.theme-aware .cmpcal-week-col.cmpcal-today { background: rgba(245, 194, 66, 0.12); }
  body.theme-aware .cmpcal-badge-pending { color: #F2C66D; }
  body.theme-aware .cmpcal-badge-overdue { color: #FC9A9A; }
  body.theme-aware .cmpcal-badge-filed { color: #86D1A5; }

  /* "View everything" button: white on the dark module card, needs dark text. */
  body.theme-aware .cmp-modcard-all .cmp-modgobtn { color: var(--on-accent); }

  /* Candidates: toolbar strip, segmented control and candidate header. */
  body.theme-aware .cand-strip { background: var(--surface); }
  body.theme-aware .cand-views button.active { background: var(--hover-bg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
  body.theme-aware .cand-search { background: var(--note-bg); }
  body.theme-aware .cand-search input::placeholder { color: var(--muted); }
  body.theme-aware .cd-stage { background-color: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
  body.theme-aware .cd-facts { background: var(--note-bg); }
  body.theme-aware .cd-copy:hover { background: var(--hover-bg); }
  /* Assign (interviewers): the default outline border is 1.3:1 on the drawer, so the button read as faint. */
  body.theme-aware .cd-sec .btn-outline { border-color: #64748B; }
  body.theme-aware .cd-sec .btn-outline:hover { border-color: var(--yellow); }

  /* Add from CVs: status and notice colours were fixed for a light page. */
  body.theme-aware .ci-st.review, body.theme-aware .csl-warn { color: #F5C242; }
  body.theme-aware .ci-st.listed { color: #8fb4f5; }
  body.theme-aware .ci-st.sent { color: #6fcf97; }
  body.theme-aware .ci-st.fix, body.theme-aware .ci-dup, body.theme-aware .csl-t .dupl { color: #f1a193; }
  body.theme-aware .ci-match { background: var(--note-bg); }
  /* The CV page stays white in dark mode, so its Open original button needs dark text. */
  body.theme-aware .ci-text .btn-outline { color: #1d2733; border-color: #cbd5e1; background: #fff; }
}