/* ===========================================================
   ProgencyAI — dark theme
   Loaded after app.css on every page. Everything is scoped to
   html[data-theme="dark"] and wrapped in @media screen so print
   always renders the light theme.

   Strategy:
   1. Redefine the design tokens (:root variables) for dark.
   2. Targeted overrides for the handful of hardcoded light
      values in app.css that the variables don't reach.
   =========================================================== */
@media screen {

/* ===== 1. Design tokens (v36 StaffCentral — dark) ===== */
html[data-theme="dark"] {
  --bg: #0F1420;            /* dark canvas */
  --bg-soft: #161D2B;
  --card: #171D2B;          /* dark card */
  --border: #263048;
  --border-soft: #202942;

  --ink: #E8EDF8;
  --ink-2: #C6CFE2;
  --ink-3: #93A0BA;
  --ink-muted: #6B7893;

  /* Sidebar goes DARK again in dark mode (app.css defaults it white). */
  --sidebar-bg: #131A28;

  /* Primary blue is identical to light mode; accents keep their colors.
     (--brand/--brand-hover/--green/--pink/--amber/--red inherit from app.css.) */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

  /* Native form controls, scrollbars, etc. render dark. */
  color-scheme: dark;
}

/* Wide-screen floating shell: page backdrop behind the rounded app. */
@media (min-width: 1720px) {
  html[data-theme="dark"] body { background: #080d19; }
}

/* Sidebar: dark surface, hairline divider, active item stays the blue pill. */
html[data-theme="dark"] .sidebar { border-right-color: var(--border); }
html[data-theme="dark"] .brand-name { color: var(--ink); }
html[data-theme="dark"] .nav-item.active { box-shadow: 0 6px 16px rgba(47,128,255,.24); }
html[data-theme="dark"] .sidebar { scrollbar-color: #2c3654 transparent; }
html[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: #2c3654; }

/* ===== 2. Topbar & top actions (hardcoded whites) ===== */
html[data-theme="dark"] .topbar { background: rgba(19, 26, 40, .88); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
html[data-theme="dark"] .toggle-btn,
html[data-theme="dark"] .report-modal-close { background: var(--card); }
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .profile-btn:hover { background: var(--card); }
html[data-theme="dark"] .avatar.online::after { border-color: var(--card); }
html[data-theme="dark"] .search {
  background: var(--bg-soft); border-color: var(--border);
}
html[data-theme="dark"] .search:focus-within { background: var(--card); border-color: var(--brand); }
html[data-theme="dark"] .search .kbd { background: var(--card); }

/* ===== 3. Buttons, chips, small controls on white ===== */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] .chat-suggestions button,
html[data-theme="dark"] .dt-pagebtn,
html[data-theme="dark"] .dt-pagesize select,
html[data-theme="dark"] .fm-view-toggle button,
html[data-theme="dark"] .scan-filter-btn,
html[data-theme="dark"] .scan-fmt-btn,
html[data-theme="dark"] .sl-rate-btn,
html[data-theme="dark"] .med-pass .mp-mini,
html[data-theme="dark"] .wizard-step .num { background: var(--card); }
html[data-theme="dark"] .dt-pagebtn.dt-gap { background: transparent; }
html[data-theme="dark"] .btn:hover { background: var(--bg-soft); }
/* Restate variants/hover states that the scoped base rules above would out-specify. */
html[data-theme="dark"] .btn.primary { background: var(--brand); }
html[data-theme="dark"] .btn.primary:hover { background: var(--brand-hover); }
html[data-theme="dark"] .dt-pagebtn.active { background: var(--brand); }
html[data-theme="dark"] .btn.danger:hover { background: rgba(255, 75, 43, .14); }
html[data-theme="dark"] .wizard-step.active .num { background: rgba(255, 255, 255, .25); }
html[data-theme="dark"] .wizard-step.done .num { background: var(--green); }
html[data-theme="dark"] .toggle-btn:hover,
html[data-theme="dark"] .report-modal-close:hover,
html[data-theme="dark"] .chat-suggestions button:hover { background: var(--bg-soft); }
html[data-theme="dark"] .fm-view-toggle button.active,
html[data-theme="dark"] .scan-filter-btn.active,
html[data-theme="dark"] .scan-fmt-btn.active { background: var(--brand); }
html[data-theme="dark"] .sl-rate-btn.sel[data-rate="progress"] { background: #2ED573; }
html[data-theme="dark"] .sl-rate-btn.sel[data-rate="maintained"] { background: #2F80FF; }
html[data-theme="dark"] .sl-rate-btn.sel[data-rate="regressed"] { background: #FF4B2B; }
html[data-theme="dark"] .sl-rate-btn.sel[data-rate="no_opportunity"] { background: #64748b; }

/* ===== 4. Forms: inputs on white ===== */
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .toolbar .search-inline,
html[data-theme="dark"] .dt-search,
html[data-theme="dark"] .table-widget .tw-filter,
html[data-theme="dark"] .bubble.md .md-table-filter,
html[data-theme="dark"] .sl-goal .slg-note,
html[data-theme="dark"] .med-pass .mp-initials {
  background: var(--bg-soft); color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus,
html[data-theme="dark"] .dt-search:focus-within { border-color: var(--brand); }

/* ===== 5. Tables: zebra + MAR month grid ===== */
/* Light zebra rgba(244,246,251,.55) is near-white — use a faint lift instead. */
html[data-theme="dark"] table.data tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
html[data-theme="dark"] table.data tbody tr:hover,
html[data-theme="dark"] table.data tbody tr:hover td { background: var(--bg-soft); }

/* MAR paper grid: weekend header + charted-cell tints/inks. */
html[data-theme="dark"] .marg thead th.wknd { background: #1d2640; }
html[data-theme="dark"] .marg .marg-cell.given { background: rgba(16, 185, 129, .16); color: #34d399; }
html[data-theme="dark"] .marg .marg-cell.missed { background: rgba(239, 68, 68, .16); color: #f87171; }
html[data-theme="dark"] .marg .marg-cell.refused { background: rgba(239, 68, 68, .08); }
html[data-theme="dark"] .marg .marg-cell.na {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255, 255, 255, .06) 3px, rgba(255, 255, 255, .06) 6px);
}

/* ===== 6. Pills / status badges / alerts (dark inks on light tints) ===== */
html[data-theme="dark"] .pill.amber,
html[data-theme="dark"] .badge-status.amber { color: #fbbf24; background: rgba(245, 158, 11, .16); }
html[data-theme="dark"] .pill.green,
html[data-theme="dark"] .badge-status.green { color: #34d399; background: rgba(16, 185, 129, .16); }
html[data-theme="dark"] .pill.red,
html[data-theme="dark"] .badge-status.red { color: #f87171; background: rgba(239, 68, 68, .16); }
html[data-theme="dark"] .pill.blue,
html[data-theme="dark"] .badge-status.blue { color: #5B9BFF; background: rgba(47, 128, 255, .18); }

html[data-theme="dark"] .alert.success { color: #34d399; background: rgba(46, 213, 115, .16); }
html[data-theme="dark"] .alert.error { color: #f87171; background: rgba(255, 75, 43, .16); }
html[data-theme="dark"] .alert.info { color: #5B9BFF; background: rgba(47, 128, 255, .16); }

/* Action Required list icons (dashboard) — lighten the dark inks. */
html[data-theme="dark"] .action-item.red .action-ico { color: #f87171; }
html[data-theme="dark"] .action-item.amber .action-ico { color: #fbbf24; }
html[data-theme="dark"] .action-item.blue .action-ico { color: #5B9BFF; }

/* Toasts + notification icon accents. */
html[data-theme="dark"] .toast.error .toast-ico { color: #f87171; }
html[data-theme="dark"] .toast.warning .toast-ico { color: #fbbf24; }
html[data-theme="dark"] .toast.success .toast-ico { color: #34d399; }
html[data-theme="dark"] .toast.info .toast-ico { color: #5B9BFF; }
html[data-theme="dark"] .notif-item.success > i { color: #34d399; }
html[data-theme="dark"] .notif-item.warning > i { color: #fbbf24; }
html[data-theme="dark"] .notif-item.error > i { color: #f87171; }

/* ISP goal rating pills. */
html[data-theme="dark"] .rating-pill.progress { color: #34d399; }
html[data-theme="dark"] .rating-pill.maintained { color: #5B9BFF; }
html[data-theme="dark"] .rating-pill.regressed { color: #f87171; }
html[data-theme="dark"] .sl-goal .slg-saved { color: #34d399; }

/* ===== 7. Dropdown menus / popovers on white ===== */
html[data-theme="dark"] .notif-menu,
html[data-theme="dark"] .mention-pop { background: var(--card); }
html[data-theme="dark"] .notif-item.unread { background: rgba(47, 128, 255, .10); }
html[data-theme="dark"] .notif-item.unread:hover { background: rgba(47, 128, 255, .16); }
html[data-theme="dark"] .notif-readall { color: #8FB8FF; }
html[data-theme="dark"] .mention-item .m-tag.consumer { background: rgba(47, 128, 255, .2); color: #8FB8FF; }
html[data-theme="dark"] .mention-item .m-tag.staff { background: rgba(46, 213, 115, .2); color: #6EE7A0; }
html[data-theme="dark"] .cmd-pop .mention-item .m-name { color: #8FB8FF; }
html[data-theme="dark"] .fm-ai-badge { color: #8FB8FF; }

/* ===== 8. Chat / messenger / AI widgets ===== */
html[data-theme="dark"] .chat-widget { background: var(--card); }
html[data-theme="dark"] .chat-widget .cw-head { background: linear-gradient(135deg, rgba(47, 128, 255, .14), rgba(47, 128, 255, .10)); }
html[data-theme="dark"] .report-card {
  background: linear-gradient(135deg, rgba(47, 128, 255, .14), rgba(47, 128, 255, .10));
  border-color: rgba(47, 128, 255, .3);
}
html[data-theme="dark"] .report-card .rc-btn { background: var(--card); border-color: rgba(47, 128, 255, .4); color: #8FB8FF; }
html[data-theme="dark"] .report-card .rc-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
html[data-theme="dark"] .bubble.md code { color: #8FB8FF; }
html[data-theme="dark"] .bubble.md a { color: #8FB8FF; }
html[data-theme="dark"] .bubble.md pre.md-pre { border: 1px solid var(--border); }
html[data-theme="dark"] .msgr-chip { color: #8FB8FF; }
html[data-theme="dark"] .msgr-chip button { color: #8FB8FF; }
html[data-theme="dark"] .confirm-widget .cw-done { color: #34d399; }
html[data-theme="dark"] .confirm-widget .cw-err { color: #f87171; }
html[data-theme="dark"] .med-pass .mp-check { color: #4ade80; }
html[data-theme="dark"] .med-pass .mp-mini.danger { color: #f87171; }

/* Med-pass initials strip (light amber paper) + charted chips. */
html[data-theme="dark"] .med-pass .mp-initials-row { background: rgba(245, 158, 11, .10); border-bottom-color: rgba(245, 158, 11, .3); }
html[data-theme="dark"] .med-pass .mp-initials-row label { color: #fbbf24; }
html[data-theme="dark"] .med-pass .mp-initials { border-color: rgba(245, 158, 11, .4); }
html[data-theme="dark"] .med-pass .mp-charted.given { background: rgba(16, 185, 129, .18); color: #34d399; }
html[data-theme="dark"] .med-pass .mp-charted.refused { background: rgba(245, 158, 11, .18); color: #fbbf24; }
html[data-theme="dark"] .med-pass .mp-charted.missed { background: rgba(239, 68, 68, .18); color: #f87171; }

/* ===== 9. Scheduling grid + scanner + shift-log goals ===== */
html[data-theme="dark"] .sched-shift.unfilled { color: #f87171; }
html[data-theme="dark"] .sched-shift.unfilled .ss-time { color: #f87171; }
html[data-theme="dark"] .sched-report-head { color: #fbbf24; }
html[data-theme="dark"] .scan-thumb { background: var(--card); }
html[data-theme="dark"] .sl-goal { background: var(--card); }

/* ===== 10. Detail pages ===== */
/* Profile hero: translucent brand tints need a dark card base. */
html[data-theme="dark"] .profile-hero {
  background: linear-gradient(135deg, rgba(47, 128, 255, .16), rgba(47, 128, 255, .10) 45%, rgba(20, 184, 166, .10)), var(--card);
}

/* Compliance gauge track (inline SVG stroke #eef0f6). */
html[data-theme="dark"] .gauge-wrap svg circle:first-of-type { stroke: var(--border-soft); }

/* Disabled-action tooltip: --ink is now light, so restate the dark bubble. */
html[data-theme="dark"] .report-action-wrap .report-action-note { background: #323d5e; color: #fff; }

/* The report sheet (.report-sheet-scroll > #reportSheet) intentionally stays
   white — it previews the printable paper document. */

/* ===== 11. Login (login.php also loads this file) ===== */
html[data-theme="dark"] .login-card { background: var(--card); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }

/* ===== 12. Scrollbars (subtle) ===== */
html[data-theme="dark"] { scrollbar-color: #2c3654 var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3654; border-radius: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #38436a; }

} /* end @media screen */