/* Dark theme for the CPT Partner Portal.
   Turned on by <html data-theme="dark"> (set by /assets/js/theme.js).
   Colors match the partner dashboard's Live Board. The Live Board itself has
   its own fixed styles and is not affected by this file. */

html[data-theme="dark"] {
  color-scheme: dark;
  --cpt-bg: #070f1f;
  --cpt-surface: #0c1a30;
  --cpt-surface-2: #0f2038;
  --cpt-surface-3: #13284a;
  --cpt-line: #1c2d4a;
  --cpt-line-2: #2a3f63;
  --cpt-text: #e6eefb;
  --cpt-text-2: #cbd5e1;
  --cpt-text-3: #a9b8d0;
  --cpt-muted: #8195b5;
  --cpt-faint: #62769a;
  --cpt-track: #1b2b47;
  --cpt-accent: #4f8cff;
  --cpt-btn: #1f4f8f;
  --cpt-btn-hover: #2a62ab;
  --cpt-tint-pct: 16%;
  --cpt-tint-base: #0c1a30;
  --cpt-cancel-track: #4c1d24;
  --cpt-lift: 38%;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 500px at 0% -10%, #15305a44, transparent 60%),
    radial-gradient(900px 400px at 100% 0%, #0d948822, transparent 60%),
    var(--cpt-bg) !important;
  background-attachment: fixed !important;
  color: var(--cpt-text);
}

/* ---------- surfaces ---------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-\[\#f8fafc\] { background-color: var(--cpt-surface); }
html[data-theme="dark"] .bg-\[\#f3f4f6\] { background-color: transparent; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-\[\#f5f8fc\] { background-color: var(--cpt-surface-2); }
html[data-theme="dark"] .bg-slate-100 { background-color: var(--cpt-surface-3); }
html[data-theme="dark"] .bg-slate-200 { background-color: var(--cpt-track); }
html[data-theme="dark"] .bg-slate-300 { background-color: var(--cpt-line-2); }
html[data-theme="dark"] .bg-slate-800 { background-color: #0e2242; }
html[data-theme="dark"] .bg-slate-900\/50 { background-color: rgb(2 6 23 / .7); }
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--cpt-surface-3); }

/* Brand navy buttons need a lift to read on navy. */
html[data-theme="dark"] .bg-\[\#17375e\] { background-color: var(--cpt-btn); }
html[data-theme="dark"] .hover\:bg-\[\#102943\]:hover { background-color: var(--cpt-btn-hover); }
html[data-theme="dark"] .bg-\[\#17375e\]\/20 { background-color: rgb(79 140 255 / .2); }
html[data-theme="dark"] .accent-\[\#17375e\] { accent-color: var(--cpt-accent); }

/* ---------- borders ---------- */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #16263f; }
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cpt-line); }
html[data-theme="dark"] .border-slate-300 { border-color: var(--cpt-line-2); }
html[data-theme="dark"] .border-slate-400,
html[data-theme="dark"] .hover\:border-slate-400:hover { border-color: #3b5480; }
html[data-theme="dark"] .border-\[\#17375e\],
html[data-theme="dark"] .focus\:border-\[\#17375e\]:focus { border-color: var(--cpt-accent); }
html[data-theme="dark"] .border-\[\#17375e\]\/30 { border-color: rgb(79 140 255 / .35); }

/* ---------- text ---------- */
html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .hover\:text-slate-800:hover { color: var(--cpt-text); }
html[data-theme="dark"] .text-slate-700 { color: var(--cpt-text-2); }
html[data-theme="dark"] .text-slate-600 { color: var(--cpt-text-3); }
html[data-theme="dark"] .text-slate-500 { color: var(--cpt-muted); }
html[data-theme="dark"] .text-slate-400 { color: var(--cpt-faint); }
html[data-theme="dark"] .text-\[\#17375e\] { color: #93c5fd; }
html[data-theme="dark"] .text-\[\#b08a54\] { color: #d9b27a; }
html[data-theme="dark"] .text-\[\#8a6a3e\] { color: #e0b877; }

/* ---------- tinted status colors ---------- */
html[data-theme="dark"] .bg-\[\#faf6ef\],
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-50\/60,
html[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgb(245 181 68 / .12); }
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-50\/40,
html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / .13); }
html[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgb(239 68 68 / .22); }
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-emerald-50 { background-color: rgb(16 185 129 / .13); }
html[data-theme="dark"] .hover\:bg-green-100:hover { background-color: rgb(16 185 129 / .22); }
html[data-theme="dark"] .bg-blue-50 { background-color: rgb(79 140 255 / .13); }

html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .hover\:text-red-600:hover { color: #fca5a5; }
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-red-900 { color: #fecaca; }
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-emerald-700 { color: #6ee7b7; }
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-900 { color: #a7f3d0; }
html[data-theme="dark"] .text-amber-700 { color: #fcd34d; }
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900 { color: #fde68a; }

html[data-theme="dark"] .border-red-200,
html[data-theme="dark"] .border-red-300,
html[data-theme="dark"] .border-rose-300 { border-color: rgb(239 68 68 / .45); }
html[data-theme="dark"] .border-green-200,
html[data-theme="dark"] .border-green-300,
html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-emerald-300 { border-color: rgb(16 185 129 / .45); }
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300 { border-color: rgb(245 158 11 / .45); }

/* ---------- form controls ---------- */
html[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input {
  background-color: #0a162b;
  border-color: var(--cpt-line-2);
  color: var(--cpt-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--cpt-faint); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .input:focus { border-color: var(--cpt-accent); box-shadow: 0 0 0 2px rgb(79 140 255 / .2); }
html[data-theme="dark"] .input[disabled],
html[data-theme="dark"] .input[readonly],
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] input[readonly] { background-color: var(--cpt-surface-2); color: var(--cpt-muted); }
html[data-theme="dark"] .input.invalid { border-color: #ef4444; background-color: rgb(239 68 68 / .1); }
html[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--cpt-text);
  -webkit-box-shadow: 0 0 0 1000px #0a162b inset;
}

html[data-theme="dark"] .field-label,
html[data-theme="dark"] .set-label,
html[data-theme="dark"] .label { color: var(--cpt-muted); }

/* Tabs / toggles used on a few pages */
html[data-theme="dark"] .appTab,
html[data-theme="dark"] .dayTab,
html[data-theme="dark"] .modeTab { background: var(--cpt-surface); color: var(--cpt-text-3); }
html[data-theme="dark"] .appTab[aria-selected="true"],
html[data-theme="dark"] .dayTab[aria-selected="true"],
html[data-theme="dark"] .modeTab[aria-selected="true"] { background: var(--cpt-btn); color: #fff; }

html[data-theme="dark"] .pref { border-color: var(--cpt-line); }
html[data-theme="dark"] .pref:has(input:checked) { border-color: var(--cpt-accent); background: rgb(79 140 255 / .1); }
html[data-theme="dark"] td.no { color: var(--cpt-faint); }
html[data-theme="dark"] td.yes { color: #6ee7b7; }

html[data-theme="dark"] .statusBtn { background: var(--cpt-surface); border-color: var(--cpt-line-2); color: var(--cpt-text-2); }
html[data-theme="dark"] .statusBtn:hover { background: var(--cpt-surface-3); }
html[data-theme="dark"] .statusBtn.danger { border-color: rgb(239 68 68 / .45); color: #fca5a5; }
html[data-theme="dark"] .statusBtn.danger:hover { background: rgb(239 68 68 / .13); }

/* ---------- request form (scheduler, choices, summary) ---------- */
html[data-theme="dark"] .navBtn { background: var(--cpt-surface); border-color: var(--cpt-line-2); color: var(--cpt-text-2); }
html[data-theme="dark"] .navBtn:hover { background: var(--cpt-surface-3); }

html[data-theme="dark"] .day-card,
html[data-theme="dark"] .tp-day { background: var(--cpt-surface); border-color: var(--cpt-line); }
html[data-theme="dark"] .day-card:hover:not([disabled]),
html[data-theme="dark"] .tp-day:hover:not([disabled]) { border-color: #3b5480; }
html[data-theme="dark"] .day-card[aria-selected="true"],
html[data-theme="dark"] .tp-day[aria-selected="true"] { border-color: var(--cpt-accent); box-shadow: inset 0 0 0 1px var(--cpt-accent), 0 0 14px rgb(79 140 255 / .25); background: rgb(79 140 255 / .12); }
html[data-theme="dark"] .day-card[disabled],
html[data-theme="dark"] .tp-day[disabled] { background: #0a1426; }
html[data-theme="dark"] .day-card .wd,
html[data-theme="dark"] .tp-day .wd { color: var(--cpt-muted); }
html[data-theme="dark"] .day-card .dn,
html[data-theme="dark"] .tp-day .dn { color: #fff; }
html[data-theme="dark"] .day-card[disabled] .dn,
html[data-theme="dark"] .tp-day[disabled] .dn { color: var(--cpt-faint); }
html[data-theme="dark"] .day-card .meter,
html[data-theme="dark"] .tp-day .meter { background: var(--cpt-track); }
html[data-theme="dark"] .tp-day .cur { background: var(--cpt-accent); }
html[data-theme="dark"] .tp-bar { border-color: var(--cpt-line); }

html[data-theme="dark"] .seg,
html[data-theme="dark"] .tp-bar > i { border-right-color: rgb(7 15 31 / .8); }
html[data-theme="dark"] .seg-past,
html[data-theme="dark"] .tp-s-past,
html[data-theme="dark"] .sw-past { background: repeating-linear-gradient(135deg, #16263f 0 6px, #0f1d33 6px 12px); }
html[data-theme="dark"] .seg-full,
html[data-theme="dark"] .tp-s-full,
html[data-theme="dark"] .sw-full { background: repeating-linear-gradient(135deg, #be123c 0 6px, #881337 6px 12px); }

html[data-theme="dark"] .chip-open,
html[data-theme="dark"] .tp-chip-open { border-color: rgb(16 185 129 / .55); background: rgb(16 185 129 / .12); color: #6ee7b7; }
html[data-theme="dark"] .chip-open:hover { background: rgb(16 185 129 / .22); }
html[data-theme="dark"] .chip-limited,
html[data-theme="dark"] .tp-chip-limited { border-color: rgb(245 158 11 / .55); background: rgb(245 158 11 / .12); color: #fcd34d; }
html[data-theme="dark"] .chip-limited:hover { background: rgb(245 158 11 / .22); }
html[data-theme="dark"] .chip-full,
html[data-theme="dark"] .tp-chip-full { border-color: rgb(244 63 94 / .45); background: rgb(244 63 94 / .1); color: #fda4af; }
html[data-theme="dark"] .chip-past,
html[data-theme="dark"] .tp-chip-past { border-color: var(--cpt-line); background: #0a1426; color: var(--cpt-faint); }
html[data-theme="dark"] .chip-blocked,
html[data-theme="dark"] .tp-chip-blocked { border-color: #3b5480; background: #16263f; color: var(--cpt-muted); }
html[data-theme="dark"] .chip[aria-pressed="true"],
html[data-theme="dark"] .tp-chip[aria-pressed="true"] { border-color: var(--cpt-accent); background: var(--cpt-btn); color: #fff; box-shadow: 0 0 14px rgb(79 140 255 / .35); }
html[data-theme="dark"] .tp-chip.tp-current:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 2px var(--cpt-accent); }

html[data-theme="dark"] .time-slider::-webkit-slider-thumb { background: #fff; border-color: var(--cpt-accent); }
html[data-theme="dark"] .time-slider::-moz-range-thumb { background: #fff; border-color: var(--cpt-accent); }
html[data-theme="dark"] .flex-slider::-webkit-slider-thumb { background: var(--cpt-accent); border-color: var(--cpt-surface); }
html[data-theme="dark"] .flex-slider::-moz-range-thumb { background: var(--cpt-accent); border-color: var(--cpt-surface); }

html[data-theme="dark"] .choice { background: var(--cpt-surface); border-color: var(--cpt-line-2); }
html[data-theme="dark"] .choice:hover { border-color: #3b5480; }
html[data-theme="dark"] .choice:has(input:checked) { border-color: var(--cpt-accent); box-shadow: inset 0 0 0 1px var(--cpt-accent); background: rgb(79 140 255 / .1); }
html[data-theme="dark"] .choice-title,
html[data-theme="dark"] .sum-row dd { color: var(--cpt-text); }
html[data-theme="dark"] .choice-sub,
html[data-theme="dark"] .sum-row dt { color: var(--cpt-muted); }

/* ---------- address suggestions ---------- */
html[data-theme="dark"] .cpt-ac-list { background: var(--cpt-surface); border-color: var(--cpt-line-2); box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
html[data-theme="dark"] .cpt-ac-item { background: var(--cpt-surface); border-bottom-color: var(--cpt-line); }
html[data-theme="dark"] .cpt-ac-item[aria-selected="true"],
html[data-theme="dark"] .cpt-ac-item:hover { background: var(--cpt-surface-3); }
html[data-theme="dark"] .cpt-ac-main { color: var(--cpt-text); }
html[data-theme="dark"] .cpt-ac-sub { color: var(--cpt-muted); }
html[data-theme="dark"] .cpt-ac-foot { background: var(--cpt-surface-2); border-top-color: var(--cpt-line); }
html[data-theme="dark"] .cpt-ac-pin { color: #6ee7b7; }

/* ---------- admin Today Board ---------- */
html[data-theme="dark"] .job[aria-pressed="true"] { outline-color: #fff; }

/* ---------- theme switch ---------- */
.cpt-theme-toggle {
  display: inline-flex; align-items: center; border: 1px solid #cbd5e1; background: #fff;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 0; cursor: pointer; flex: 0 0 auto;
}
.cpt-theme-toggle span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; color: #64748b; }
.cpt-theme-toggle span[data-on="true"] { background: #17375e; color: #fff; }
.cpt-theme-toggle svg { width: 13px; height: 13px; }
.cpt-theme-toggle:focus-visible { outline: 2px solid #17375e; outline-offset: 2px; }
.cpt-theme-float { position: fixed; top: 14px; right: 14px; z-index: 60; }
html[data-theme="dark"] .cpt-theme-toggle { background: var(--cpt-surface); border-color: var(--cpt-line-2); }
html[data-theme="dark"] .cpt-theme-toggle span { color: var(--cpt-muted); }
html[data-theme="dark"] .cpt-theme-toggle span[data-on="true"] { background: var(--cpt-btn); color: #fff; box-shadow: 0 0 12px rgb(79 140 255 / .35); }
html[data-theme="dark"] .cpt-theme-toggle:focus-visible { outline-color: var(--cpt-accent); }