/**
 * App theme — light (default) / dark.
 * Dark = existing slate UI. Light = off-white surfaces, same orange accents.
 * Preference: localStorage key "ifp-theme" = "light" | "dark"
 */

/* ---------- Defaults / dark (no overrides; current design) ---------- */
html.theme-dark {
  color-scheme: dark;
}

html.theme-dark .text-amber-200,
html.theme-dark .text-amber-200\/80,
html.theme-dark .text-amber-200\/90,
html.theme-dark .text-amber-300,
html.theme-dark .text-amber-300\/80,
html.theme-dark .text-amber-300\/90,
html.theme-dark .text-amber-400 {
  color: #d97706 !important; /* amber-600 — readable gold, not pale yellow */
}

/* ---------- Light theme ---------- */
html.theme-light {
  color-scheme: light;
}

/*
 * Tailwind v4 preflight uses currentColor for borders (near-black in light).
 * Entire selector is inside :where() so specificity stays 0 and orange/status
 * borders (including .defaultButton) still win.
 */
:where(html.theme-dark, html.theme-dark *, html.theme-dark ::before, html.theme-dark ::after) {
  border-color: #334155;
}
:where(html.theme-light, html.theme-light *, html.theme-light ::before, html.theme-light ::after) {
  border-color: #e2e8f0;
}

/* Page chrome */
html.theme-light body {
  background-color: #f1f3f5 !important; /* off-white grey */
  color: #0f172a !important;
}

html.theme-light .app-shell-header,
html.theme-light .app-shell-footer,
html.theme-light .app-floating-footer {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #e2e8f0 !important;
}

/* Hard-coded navy used on header / floating footer */
html.theme-light .bg-\[\#0f172a\],
html.theme-light .bg-\[\#0f172a\]\/95 {
  background-color: rgba(255, 255, 255, 0.96) !important;
}

/* Footer action buttons: readable on light bar */
html.theme-light .defaultButton {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}
html.theme-light .defaultButton span {
  color: #0f172a;
}
html.theme-light .defaultButton:hover {
  background: #fff7ed;
}
html.theme-light .defaultButton:hover span {
  color: #000000;
}

/* Surfaces: dark slate → light cards / page */
html.theme-light .bg-slate-950,
html.theme-light .bg-slate-900,
html.theme-light .bg-slate-950\/30,
html.theme-light .bg-slate-950\/40,
html.theme-light .bg-slate-950\/50,
html.theme-light .bg-slate-900\/30,
html.theme-light .bg-slate-900\/40,
html.theme-light .bg-slate-900\/50,
html.theme-light .bg-slate-900\/60,
html.theme-light .bg-slate-950\/60 {
  background-color: #ffffff !important;
}

html.theme-light .bg-slate-800,
html.theme-light .bg-slate-800\/40,
html.theme-light .bg-slate-800\/50,
html.theme-light .bg-slate-800\/60,
html.theme-light .bg-slate-800\/80 {
  background-color: #f8fafc !important;
}

html.theme-light .bg-slate-700,
html.theme-light .bg-slate-700\/50,
html.theme-light .bg-slate-700\/60 {
  background-color: #e2e8f0 !important;
}

html.theme-light .hover\:bg-slate-800:hover,
html.theme-light .hover\:bg-slate-800\/40:hover,
html.theme-light .hover\:bg-slate-800\/50:hover,
html.theme-light .hover\:bg-slate-800\/60:hover,
html.theme-light .hover\:bg-slate-700:hover,
html.theme-light .hover\:bg-slate-700\/50:hover,
html.theme-light .hover\:bg-slate-700\/60:hover,
html.theme-light .hover\:bg-slate-700\/70:hover,
html.theme-light .hover\:bg-slate-700\/80:hover {
  background-color: #fff7ed !important; /* orange-50 */
}

html.theme-light .hover\:bg-slate-900:hover,
html.theme-light .hover\:bg-slate-950:hover {
  background-color: #ffedd5 !important; /* orange-100 */
}

html.theme-light .hover\:bg-slate-600:hover {
  background-color: #fed7aa !important; /* orange-200 */
}

/* Card / tile hover highlights */
html.theme-light .hover\:border-orange-500:hover,
html.theme-light .hover\:border-orange-500\/50:hover,
html.theme-light .hover\:border-orange-500\/40:hover,
html.theme-light .group:hover {
  background-color: #fff7ed !important;
}

/* Selected / active highlight */
html.theme-light .bg-orange-600\/10,
html.theme-light .bg-orange-600\/15,
html.theme-light .bg-orange-500\/10 {
  background-color: #ffedd5 !important;
}

/* Borders */
html.theme-light .border-slate-600,
html.theme-light .border-slate-700,
html.theme-light .border-slate-700\/80,
html.theme-light .border-slate-800,
html.theme-light .border-slate-800\/80 {
  border-color: #e2e8f0 !important;
}

html.theme-light .border-slate-500 {
  border-color: #cbd5e1 !important;
}

/* v3 CDN divide (sibling + border-top) */
html.theme-light .divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html.theme-light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* v4 compiled divide (border-bottom on all but last child) */
html.theme-light .divide-y > :not(:last-child),
html.theme-light .divide-slate-700 > :not(:last-child),
html.theme-light .divide-slate-800 > :not(:last-child),
html.theme-light :where(.divide-slate-700 > :not(:last-child)),
html.theme-light :where(.divide-slate-800 > :not(:last-child)) {
  border-color: #e2e8f0 !important;
}

/* Text */
html.theme-light .text-white {
  color: #0f172a !important;
}

html.theme-light .text-slate-100,
html.theme-light .text-slate-200 {
  color: #1e293b !important;
}

html.theme-light .text-slate-300 {
  color: #334155 !important;
}

html.theme-light .text-slate-400 {
  color: #475569 !important;
}

html.theme-light .text-slate-500 {
  color: #64748b !important;
}

html.theme-light .text-slate-600 {
  color: #475569 !important;
}

html.theme-light .placeholder-slate-500::placeholder,
html.theme-light .placeholder-slate-400::placeholder {
  color: #94a3b8 !important;
}

/* Primary orange controls keep white text/icons */
html.theme-light .bg-orange-600,
html.theme-light .bg-orange-500,
html.theme-light .bg-orange-700,
html.theme-light .hover\:bg-orange-500:hover,
html.theme-light .hover\:bg-orange-600:hover,
html.theme-light .hover\:bg-orange-700:hover {
  color: #ffffff !important;
}
html.theme-light .bg-orange-600 *,
html.theme-light .bg-orange-500 *,
html.theme-light .bg-orange-700 *,
html.theme-light .bg-amber-600 *,
html.theme-light .bg-amber-700 *,
html.theme-light .bg-emerald-600 *,
html.theme-light .bg-emerald-700 *,
html.theme-light .bg-blue-600 *,
html.theme-light .bg-red-600 * {
  color: #ffffff !important;
}

html.theme-light .bg-amber-600,
html.theme-light .bg-amber-700,
html.theme-light .hover\:bg-amber-700:hover,
html.theme-light .bg-emerald-600,
html.theme-light .bg-emerald-700,
html.theme-light .hover\:bg-emerald-700:hover,
html.theme-light .bg-blue-600,
html.theme-light .bg-red-600 {
  color: #ffffff !important;
}
/* Soft orange tints (tiles) keep their own text colors */
html.theme-light .bg-orange-600\/10 *,
html.theme-light .bg-orange-600\/15 *,
html.theme-light .bg-orange-500\/10 * {
  color: inherit !important;
}

/* Orange text accents stay orange */
html.theme-light .text-orange-400,
html.theme-light .text-orange-300,
html.theme-light .group-hover\:text-orange-400:hover,
html.theme-light .group:hover .group-hover\:text-orange-400 {
  color: #ea580c !important;
}

html.theme-light .hover\:text-orange-400:hover {
  color: #ea580c !important;
}

/* Create / edit form modal — one white form, no hover wash on fields */
html.theme-light #create-form-modal > div {
  background-color: #ffffff !important;
}
html.theme-light #create-form-modal input,
html.theme-light #create-form-modal select,
html.theme-light #create-form-modal textarea,
html.theme-light #create-form-modal #new-form-owner-label,
html.theme-light #create-form-modal #new-form-also-used-by,
html.theme-light #create-form-modal #new-form-work-types {
  background-color: #ffffff !important;
}
html.theme-light #create-form-modal input:hover,
html.theme-light #create-form-modal input:focus,
html.theme-light #create-form-modal select:hover,
html.theme-light #create-form-modal select:focus,
html.theme-light #create-form-modal textarea:hover,
html.theme-light #create-form-modal textarea:focus,
html.theme-light #create-form-modal label:hover,
html.theme-light #create-form-modal .also-used-row:hover,
html.theme-light #create-form-modal #new-form-also-used-by:hover,
html.theme-light #create-form-modal #new-form-work-types:hover,
html.theme-light #create-form-modal #new-form-work-types label:hover,
html.theme-light #create-form-modal #new-form-owner-label:hover {
  background-color: #ffffff !important;
}
html.theme-light #create-form-modal option {
  background-color: #ffffff;
  color: #0f172a;
}

/* Question builder modal — no wash on question fields */
html.theme-light #question-modal > div {
  background-color: #ffffff !important;
}
html.theme-light #question-modal input,
html.theme-light #question-modal select,
html.theme-light #question-modal textarea {
  background-color: #ffffff !important;
}
html.theme-light #question-modal input:hover,
html.theme-light #question-modal input:focus,
html.theme-light #question-modal select:hover,
html.theme-light #question-modal select:focus,
html.theme-light #question-modal textarea:hover,
html.theme-light #question-modal textarea:focus {
  background-color: #ffffff !important;
}

html.theme-light .hover\:border-orange-500:hover,
html.theme-light .border-orange-500,
html.theme-light .border-orange-600 {
  border-color: #ea580c !important;
}

.client-card {
  border-color: rgba(234, 88, 12, 0.45);
}
html.theme-light .client-card {
  border-color: rgba(194, 65, 12, 0.4);
}

/* Status / semantic colors: slightly softer on light */
html.theme-light .bg-emerald-900,
html.theme-light .bg-emerald-500\/10,
html.theme-light .bg-emerald-900\/40,
html.theme-light .bg-emerald-900\/60,
html.theme-light .bg-emerald-900\/80 {
  background-color: #ecfdf5 !important;
}

html.theme-light .text-emerald-200,
html.theme-light .text-emerald-300,
html.theme-light .text-emerald-400 {
  color: #047857 !important;
}

html.theme-light .border-emerald-500\/40,
html.theme-light .border-emerald-600\/50,
html.theme-light .border-emerald-700,
html.theme-light .border-emerald-700\/50 {
  border-color: #a7f3d0 !important;
}

html.theme-light .bg-amber-900,
html.theme-light .bg-amber-900\/40,
html.theme-light .bg-amber-900\/50,
html.theme-light .bg-amber-900\/60,
html.theme-light .bg-amber-500\/10,
html.theme-light .bg-amber-950\/30 {
  background-color: #fffbeb !important;
}

html.theme-light .text-amber-200,
html.theme-light .text-amber-200\/80,
html.theme-light .text-amber-200\/90,
html.theme-light .text-amber-300,
html.theme-light .text-amber-300\/80,
html.theme-light .text-amber-300\/90,
html.theme-light .text-amber-400 {
  color: #92400e !important; /* amber-800 */
}

html.theme-light .border-amber-400,
html.theme-light .border-amber-500,
html.theme-light .border-amber-500\/40,
html.theme-light .border-amber-500\/50,
html.theme-light .border-amber-600,
html.theme-light .border-amber-700,
html.theme-light .border-amber-700\/50 {
  border-color: #d97706 !important;
}

html.theme-light .bg-sky-900\/60 {
  background-color: #f0f9ff !important;
}
html.theme-light .bg-sky-900\/80,
html.theme-light .bg-sky-900 {
  background-color: #e0f2fe !important;
}

html.theme-light .text-sky-200,
html.theme-light .text-sky-300 {
  color: #0369a1 !important;
}

html.theme-light .bg-orange-900\/40,
html.theme-light .bg-orange-900\/60 {
  background-color: #fff7ed !important;
}

html.theme-light .text-orange-300 {
  color: #c2410c !important;
}

html.theme-light .bg-red-900\/30,
html.theme-light .bg-red-900\/40,
html.theme-light .bg-red-950\/30,
html.theme-light .bg-red-950\/40,
html.theme-light .hover\:bg-red-900\/50:hover {
  background-color: #fef2f2 !important;
}

html.theme-light .bg-red-900,
html.theme-light .bg-red-900\/80,
html.theme-light .bg-red-900\/50 {
  background-color: #fee2e2 !important;
}

html.theme-light .text-red-200,
html.theme-light .text-red-300,
html.theme-light .text-red-400,
html.theme-light .hover\:text-red-400:hover {
  color: #991b1b !important;
}

html.theme-light .border-red-400,
html.theme-light .border-red-500,
html.theme-light .border-red-500\/40,
html.theme-light .border-red-500\/50 {
  border-color: #ef4444 !important;
}

html.theme-light .bg-red-600,
html.theme-light .bg-red-600 * {
  color: #ffffff !important;
}

html.theme-dark .presence-review-amber {
  color: #f59e0b !important;
}
html.theme-light .presence-review-amber {
  color: #78350f !important;
}
.presence-review-amber {
  color: #d97706;
}
html.theme-dark .presence-review-red {
  color: #f87171 !important;
}
html.theme-light .presence-review-red {
  color: #991b1b !important;
}

html.theme-dark .presence-alert .presence-alert-title {
  color: #f59e0b !important;
}
html.theme-dark .presence-alert .presence-alert-copy {
  color: #d97706 !important;
}

html.theme-light .presence-alert,
html.theme-light .presence-alert .presence-alert-title,
html.theme-light .presence-alert .presence-alert-copy,
html.theme-light .presence-alert p,
html.theme-light .presence-alert li > span {
  color: #0f172a !important;
}
html.theme-light .presence-alert button {
  color: #0f172a !important;
}
html.theme-light .presence-alert button.bg-orange-600,
html.theme-light .presence-alert button.bg-orange-500 {
  color: #ffffff !important;
}

/* Selected N/A on forms — keep white on slate, not the remapped dark text-white */
html.theme-light .bg-slate-600,
html.theme-light .bg-slate-600 * {
  color: #ffffff !important;
}

html.theme-light .bg-yellow-900,
html.theme-light .bg-yellow-900\/80,
html.theme-light .bg-yellow-900\/60 {
  background-color: #fef9c3 !important;
}
html.theme-light .text-yellow-200,
html.theme-light .text-yellow-300 {
  color: #854d0e !important;
}

html.theme-light .bg-purple-900,
html.theme-light .bg-purple-900\/80,
html.theme-light .bg-purple-900\/60 {
  background-color: #f3e8ff !important;
}
html.theme-light .text-purple-200,
html.theme-light .text-purple-300 {
  color: #6b21a8 !important;
}

html.theme-light .bg-orange-900\/50 {
  background-color: #ffedd5 !important;
}
html.theme-light .bg-orange-900\/80,
html.theme-light .bg-orange-900 {
  background-color: #ffedd5 !important;
}
html.theme-light .text-orange-200 {
  color: #c2410c !important;
}

html.theme-light .border-red-500\/50,
html.theme-light .border-red-700 {
  border-color: #fecaca !important;
}

/* Status chips: 15% tints vanish on white — use solid pastels */
html.theme-light .bg-sky-500\/15,
html.theme-light .bg-sky-500\/10 {
  background-color: #e0f2fe !important;
}
html.theme-light .bg-amber-500\/15 {
  background-color: #fef3c7 !important;
}
html.theme-light .bg-red-500\/15,
html.theme-light .bg-red-600\/15 {
  background-color: #fee2e2 !important;
}
html.theme-light .bg-orange-500\/15,
html.theme-light .bg-orange-600\/15 {
  background-color: #ffedd5 !important;
}
html.theme-light .bg-slate-500\/15,
html.theme-light .bg-slate-500\/10 {
  background-color: #e2e8f0 !important;
}
html.theme-light .bg-emerald-500\/15 {
  background-color: #d1fae5 !important;
}

html.theme-light .border-sky-500\/30,
html.theme-light .border-sky-500\/40 {
  border-color: #7dd3fc !important;
}
html.theme-light .border-amber-500\/40 {
  border-color: #fcd34d !important;
}
html.theme-light .border-red-500\/40,
html.theme-light .border-red-600\/40 {
  border-color: #fca5a5 !important;
}
html.theme-light .border-orange-500\/40,
html.theme-light .border-orange-600\/30 {
  border-color: #fdba74 !important;
}
html.theme-light .border-slate-500\/30 {
  border-color: #cbd5e1 !important;
}

/* Left status stripe — border-slate-700 !important was wiping these */
html.theme-light .border-l-sky-500 { border-left-color: #0ea5e9 !important; }
html.theme-light .border-l-slate-500 { border-left-color: #64748b !important; }
html.theme-light .border-l-amber-400 { border-left-color: #f59e0b !important; }
html.theme-light .border-l-red-500 { border-left-color: #ef4444 !important; }
html.theme-light .border-l-orange-500 { border-left-color: #f97316 !important; }
html.theme-light .border-l-orange-600 { border-left-color: #ea580c !important; }
html.theme-light .border-l-red-600 { border-left-color: #dc2626 !important; }
html.theme-light .border-l-emerald-500 { border-left-color: #10b981 !important; }

/* Inputs / selects already using slate-800 — covered above */
html.theme-light input,
html.theme-light select,
html.theme-light textarea {
  color: #0f172a;
}

html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
  outline-color: #f97316;
}

/* Modals / overlays — keep dim backdrop */
html.theme-light .bg-black\/60,
html.theme-light .bg-black\/70 {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

/* Floating footer / cards shadows a bit softer on light */
html.theme-light .shadow-2xl {
  --tw-shadow-color: rgb(15 23 42 / 0.12);
}

/* Impersonation bar stays high-contrast amber */
html.theme-light .bg-amber-500 {
  background-color: #f59e0b !important;
  color: #0f172a !important;
}

/* Theme toggle row */
html.theme-light .theme-toggle-btn {
  color: #334155;
}
html.theme-dark .theme-toggle-btn {
  color: #e2e8f0;
}

/* Camera preview labels sit on a dark video — never invert in light theme */
.camera-overlay-label,
html.theme-light .camera-overlay-label,
html.theme-dark .camera-overlay-label {
  background: rgba(0, 0, 0, 0.72) !important;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Toasts keep their own colours — light theme must not remap them */
html.theme-light #toast-container [class*="bg-emerald"],
html.theme-light #toast-container [class*="bg-red"],
html.theme-light #toast-container [class*="bg-amber"],
html.theme-light #toast-container [class*="bg-blue"],
html.theme-light #toast-container [class*="bg-orange"] {
  color: #ffffff !important;
}
html.theme-light #toast-container [class*="bg-emerald"] *,
html.theme-light #toast-container [class*="bg-red"] *,
html.theme-light #toast-container [class*="bg-amber"] *,
html.theme-light #toast-container [class*="bg-blue"] *,
html.theme-light #toast-container [class*="bg-orange"] *,
html.theme-light #toast-container .text-white {
  color: #ffffff !important;
}
html.theme-light #toast-container .bg-blue-600 { background-color: #2563eb !important; }
html.theme-light #toast-container .bg-emerald-600 { background-color: #059669 !important; }
html.theme-light #toast-container .bg-red-600 { background-color: #dc2626 !important; }
html.theme-light #toast-container .bg-amber-600 { background-color: #d97706 !important; }

/* Table / roster row hover — light orange, not grey/navy */
html.theme-light .roster-row:hover,
html.theme-light tr:hover,
html.theme-light tbody tr:hover,
html.theme-light .hover\:bg-slate-900\/80:hover,
html.theme-light .hover\:bg-slate-900\/60:hover,
html.theme-light .hover\:bg-slate-900\/50:hover,
html.theme-light .hover\:bg-slate-950\/50:hover,
html.theme-light .hover\:bg-slate-950\/40:hover,
html.theme-light .hover\:bg-slate-800\/80:hover,
html.theme-light .hover\:bg-slate-800\/60:hover {
  background-color: #fff7ed !important;
}
html.theme-dark .roster-row:hover {
  background-color: rgba(234, 88, 12, 0.12) !important;
}

/* Team list login — black by default, orange on hover */
.team-login { color: #e2e8f0; }
.team-login:hover { color: #fb923c; }
.team-login:hover .team-copy-hint { color: #fb923c; }

html.theme-light .team-login { color: #0f172a !important; }
html.theme-light .team-login:hover { color: #ea580c !important; }

/* Forms management — do not rely on Tailwind hover utilities */
.form-ghost-btn {
  border: 1px solid #475569;
  background: #1e293b;
  color: #f8fafc;
}
.form-ghost-btn:hover {
  border-color: #ea580c;
  background: #334155;
}
html.theme-light .form-ghost-btn {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
html.theme-light .form-ghost-btn:hover {
  border-color: #ea580c !important;
  background: #fff7ed !important;
  color: #0f172a !important;
}
html.theme-light .form-row:hover {
  background-color: #fff7ed !important;
}
html.theme-dark .form-row:hover {
  background-color: rgba(30, 41, 59, 0.8);
}

/* Health & Safety pills — same size, theme-safe (not remapped Tailwind utilities) */
.hs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 7.5rem;
  max-width: 14rem;
  padding: 0 0.9rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(234, 88, 12, 0.4);
  background: transparent;
  color: #e2e8f0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hs-pill:hover {
  border-color: #ea580c;
  background: rgba(234, 88, 12, 0.12);
}
.hs-pill.is-active {
  background: rgba(234, 88, 12, 0.2);
  border-color: #ea580c;
  color: #fdba74;
}
html.theme-light .hs-pill {
  color: #334155 !important;
  border-color: rgba(194, 65, 12, 0.35) !important;
  background: #ffffff !important;
}
html.theme-light .hs-pill:hover {
  background: #fff7ed !important;
  border-color: #ea580c !important;
  color: #9a3412 !important;
}
html.theme-light .hs-pill.is-active {
  background: #ffedd5 !important;
  border-color: #ea580c !important;
  color: #9a3412 !important;
}

.hs-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 7rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.hs-status.is-requested {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
}
.hs-status.is-progress {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fcd34d;
}
.hs-status.is-pending {
  background: rgba(234, 88, 12, 0.18);
  border-color: rgba(249, 115, 22, 0.5);
  color: #fdba74;
}
.hs-status.is-ok {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}
.hs-status.is-off {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}
.hs-status.is-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
}
.hs-status.is-btn {
  cursor: pointer;
}
.hs-status.is-btn:hover {
  filter: brightness(1.12);
}
html.theme-light .hs-status.is-requested {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}
html.theme-light .hs-status.is-progress {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}
html.theme-light .hs-status.is-pending {
  background: #ffedd5 !important;
  border-color: #fb923c !important;
  color: #c2410c !important;
}
html.theme-light .hs-status.is-ok {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}
html.theme-light .hs-status.is-off {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html.theme-light .hs-status.is-danger {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* Overview / form accents — orange must win over body/text-white remaps */
html.theme-light .text-orange-400,
html.theme-light .text-orange-300,
html.theme-light .text-orange-500,
html.theme-light h2.text-orange-400,
html.theme-light h4.text-orange-400 {
  color: #ea580c !important;
}

/* Signature: crush ink to black/white so invert doesn't tint slate strokes orange */
.overview-signature {
  background: #0f172a;
}
html.theme-light .overview-signature {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.theme-light .overview-signature-img {
  filter: brightness(0);
}
html.theme-dark .overview-signature {
  background: #0f172a;
}
html.theme-dark .overview-signature-img {
  filter: brightness(0) invert(1);
}

/* Overview panels — orange tint instead of grey in light theme */
html.theme-light .overview-door {
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
}
html.theme-light .overview-door-head {
  background-color: #ffedd5 !important;
}
html.theme-light .overview-door-head:hover {
  background-color: #fed7aa !important;
}

/* Overview N/A pill — same idea as Yes/No tints */
.overview-na-pill {
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}
html.theme-light .overview-na-pill {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.theme-light .overview-panel {
  background-color: #ffffff !important;
  border-color: #fed7aa !important;
}
html.theme-light .overview-panel .bg-slate-900 {
  background-color: #fff7ed !important;
}


/* Signature pad while filling the form */
html.theme-light canvas.signature-canvas {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* Location capture — solid colour on both themes */
#loc-banner.loc-pending {
  background-color: #92400e !important;
  border-color: #fbbf24 !important;
  color: #fffbeb !important;
}
#loc-banner.loc-ok {
  background-color: #047857 !important;
  border-color: #6ee7b7 !important;
  color: #ecfdf5 !important;
}
#loc-banner.loc-error {
  background-color: #b91c1c !important;
  border-color: #fca5a5 !important;
  color: #fef2f2 !important;
}
#loc-banner.loc-pending span,
#loc-banner.loc-ok span,
#loc-banner.loc-error span {
  color: inherit !important;
}
html.theme-light #loc-banner.loc-pending {
  background-color: #f59e0b !important;
  border-color: #b45309 !important;
  color: #1c1917 !important;
}
html.theme-light #loc-banner.loc-ok {
  background-color: #059669 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
}
html.theme-light #loc-banner.loc-error {
  background-color: #dc2626 !important;
  border-color: #991b1b !important;
  color: #ffffff !important;
}