/*
 * Application-wide light + dark theme.
 *
 * Built Tailwind utilities provide the base look. These semantic overrides keep
 * server-rendered templates and JavaScript-generated calendar markup in sync,
 * and raise contrast for light mode (dark mode has a fuller remap below).
 */
html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* ── Light mode polish ─────────────────────────────────────────────────────── */

html:not(.dark) body.bg-slate-50 {
  background-color: #f1f5f9 !important;
  background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 42%, #eef2f7 100%);
  background-attachment: fixed;
  color: #0f172a;
}

html:not(.dark) body.bg-gray-50 {
  background-color: #f8fafc !important;
  color: #0f172a;
}

/* Soft borders read as edges on white cards / tables */
html:not(.dark) .border-gray-50,
html:not(.dark) .border-gray-100 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* Muted labels and empty-state text */
html:not(.dark) .text-gray-300 {
  color: #94a3b8 !important;
}

html:not(.dark) .text-gray-400 {
  color: #64748b !important;
}

/* White cards — slightly clearer elevation on slate page chrome */
html:not(.dark) .bg-white.rounded-xl.border,
html:not(.dark) .bg-white.rounded-2xl.border,
html:not(.dark) .bg-white.rounded-lg.border {
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 1px 3px rgb(15 23 42 / 0.06);
}

/* Form controls */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8;
}

html:not(.dark) input:disabled,
html:not(.dark) select:disabled,
html:not(.dark) textarea:disabled {
  background-color: #f1f5f9;
  color: #64748b;
}

/* Tables */
html:not(.dark) thead tr.bg-gray-50 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) thead tr.bg-gray-50 th {
  color: #475569 !important;
}

html:not(.dark) tbody.divide-y.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

html:not(.dark) td.text-gray-500 .text-gray-300 {
  color: #94a3b8 !important;
}

/* Neutral status pills */
html:not(.dark) .inline-flex.bg-gray-100.text-gray-400,
html:not(.dark) .inline-flex.bg-gray-100.text-gray-600 {
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

/* Dashboard / KPI icon badges */
html:not(.dark) .w-8.h-8.bg-blue-50 {
  border: 1px solid #bfdbfe;
  box-shadow: 0 0 0 1px rgb(37 99 235 / 0.06);
}

html:not(.dark) .w-8.h-8.bg-green-50 {
  border: 1px solid #bbf7d0;
  box-shadow: 0 0 0 1px rgb(22 163 74 / 0.06);
}

html:not(.dark) .w-8.h-8.bg-red-50 {
  border: 1px solid #fecaca;
  box-shadow: 0 0 0 1px rgb(220 38 38 / 0.06);
}

html:not(.dark) .w-8.h-8.bg-amber-50 {
  border: 1px solid #fde68a;
  box-shadow: 0 0 0 1px rgb(217 119 6 / 0.06);
}

/* Inspection form surfaces */
html:not(.dark) .rounded-xl.border.border-gray-200.bg-slate-50\/80 {
  border-color: #cbd5e1 !important;
  background-color: rgb(248 250 252 / 0.95) !important;
}

html:not(.dark) .inspection-section-title {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .yesno-btn span,
html:not(.dark) .status-btn.border-gray-200 {
  border-color: #cbd5e1 !important;
}

html:not(.dark) .yesno-btn:hover span {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

html:not(.dark) .yesno-btn:has(input:checked):hover span {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
}

/* Back button */
html:not(.dark) .global-back-btn {
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* Calendar sidebar, cards, and grid */
html:not(.dark) #inspection_calendar .rounded-xl.border.border-gray-100,
html:not(.dark) #inspection_calendar .rounded-xl.border.border-gray-200,
html:not(.dark) #inspection_calendar .cal-week.border {
  border-color: #cbd5e1 !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 4px 14px rgb(15 23 42 / 0.05);
}

html:not(.dark) #inspection_calendar #cal_customer_search {
  border-color: #cbd5e1 !important;
}

html:not(.dark) .cal-customer-item {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .cal-week .border-gray-50,
html:not(.dark) .cal-week .border-gray-100,
html:not(.dark) .cal-week .border-b.border-gray-50,
html:not(.dark) .cal-week .border-b.border-gray-100,
html:not(.dark) .cal-slot.border-gray-50,
html:not(.dark) .cal-slot.border-gray-100 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .cal-time-label {
  color: #64748b !important;
}

html:not(.dark) .cal-month-day,
html:not(.dark) .cal-week .border-l.border-gray-100,
html:not(.dark) .cal-week .border-r.border-gray-100 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) ::selection {
  background: #bfdbfe;
  color: #1e3a8a;
}

/* Public legal / FAQ content cards */
html:not(.dark).public-schedule-page .bg-white.rounded-2xl.border {
  border-color: #e2e8f0 !important;
}

/* Fixed theme control on light public/legal pages */
html:not(.dark) .theme-toggle.public-legal-theme-toggle {
  background-color: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

html:not(.dark) .theme-toggle.public-legal-theme-toggle:hover {
  background-color: #f8fafc;
}

html.dark .theme-toggle.public-legal-theme-toggle {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}

html.dark .theme-toggle.public-legal-theme-toggle:hover {
  background-color: #334155;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */

html.dark body {
  background-color: #0f172a !important;
  color: #e2e8f0;
}

html.dark body.bg-gradient-to-br {
  background-color: #020617 !important;
  background-image: linear-gradient(to bottom right, #0f172a, #172554, #020617) !important;
}

/* Surfaces */
html.dark .bg-white { background-color: #1e293b !important; }
/* Letter template preview must stay paper-white in dark mode. */
html.dark .letter-preview-page,
html.dark .letter-preview-page .bg-white {
  background-color: #ffffff !important;
}
html.dark .letter-preview-page img {
  background-color: #ffffff !important;
}
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-50\/80 { background-color: rgb(15 23 42 / 0.8) !important; }
html.dark .bg-gray-50 { background-color: #172033 !important; }
html.dark .bg-gray-50\/50 { background-color: rgb(23 32 51 / 0.5) !important; }
html.dark .bg-gray-50\/60 { background-color: rgb(23 32 51 / 0.72) !important; }
html.dark .bg-gray-100 { background-color: #334155 !important; }
html.dark .bg-gray-200 { background-color: #475569 !important; }
html.dark .bg-gray-300 { background-color: #64748b !important; }

/* Neutral text */
html.dark .text-gray-950,
html.dark .text-gray-900 { color: #f8fafc !important; }
html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500 { color: #cbd5e1 !important; }
html.dark .text-gray-400 { color: #b6c2d1 !important; }
html.dark .text-gray-300 { color: #a8b4c4 !important; }

/* Borders, dividers, and rings */
html.dark .border-gray-50,
html.dark .border-gray-100 { border-color: #334155 !important; }
html.dark .border-gray-200 { border-color: #475569 !important; }
html.dark .border-gray-200\/80 { border-color: rgb(71 85 105 / 0.8) !important; }
html.dark .border-gray-300 { border-color: #64748b !important; }
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #475569 !important;
}

/* Form controls */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: #0f172a;
  border-color: #64748b;
  color: #f8fafc;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b;
}

html.dark input[type="date"],
html.dark input[type="time"],
html.dark select {
  color-scheme: dark;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
  background-color: #1e293b;
  color: #94a3b8;
}

/* Links, pale blue surfaces, and selected controls */
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .bg-blue-50 { background-color: rgb(30 64 175 / 0.22) !important; }
html.dark .bg-blue-50\/40 { background-color: rgb(30 64 175 / 0.18) !important; }
html.dark .bg-blue-50\/60 { background-color: rgb(30 64 175 / 0.26) !important; }
html.dark .bg-blue-100 { background-color: rgb(30 64 175 / 0.35) !important; }
html.dark .bg-blue-100\/90 { background-color: rgb(30 64 175 / 0.48) !important; }
html.dark .border-blue-100,
html.dark .border-blue-200 { border-color: #1d4ed8 !important; }

/* Semantic messages and badges */
html.dark .bg-green-50,
html.dark .bg-green-100 { background-color: rgb(20 83 45 / 0.45) !important; }
html.dark .text-green-500,
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac !important; }
html.dark .border-green-100,
html.dark .border-green-200 { border-color: #166534 !important; }

html.dark .bg-red-50,
html.dark .bg-red-100 { background-color: rgb(127 29 29 / 0.38) !important; }
html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900 { color: #fca5a5 !important; }
html.dark .border-red-100,
html.dark .border-red-200 { border-color: #991b1b !important; }

html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-amber-50,
html.dark .bg-amber-100 { background-color: rgb(120 53 15 / 0.4) !important; }
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 { color: #fde68a !important; }
html.dark .border-yellow-100,
html.dark .border-yellow-200,
html.dark .border-amber-100,
html.dark .border-amber-200 { border-color: #a16207 !important; }

html.dark .border-amber-200 { border-color: #a16207 !important; }

html.dark .bg-followup-50,
html.dark .bg-followup-100 { background-color: rgb(88 28 135 / 0.4) !important; }
html.dark .text-followup-600,
html.dark .text-followup-700,
html.dark .text-followup-800 { color: #d8b4fe !important; }
html.dark .border-followup-500 { border-color: #9333ea !important; }

html.dark .bg-attempted-50,
html.dark .bg-attempted-100 { background-color: rgb(154 52 18 / 0.4) !important; }
html.dark .text-attempted-600,
html.dark .text-attempted-700,
html.dark .text-attempted-800 { color: #fdba74 !important; }
html.dark .border-attempted-100 { border-color: #c2410c !important; }
html.dark .bg-attempted-600,
html.dark .hover\:bg-attempted-700:hover { background-color: #ea580c !important; }
html.dark .focus\:ring-attempted-500:focus { --tw-ring-color: rgb(249 115 22 / 0.5) !important; }

html.dark .bg-indigo-50,
html.dark .bg-indigo-100 { background-color: rgb(49 46 129 / 0.38) !important; }
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-indigo-800,
html.dark .text-indigo-900 { color: #c7d2fe !important; }
html.dark .border-indigo-100,
html.dark .border-indigo-200 { border-color: #4338ca !important; }

/* Interactive neutral and table states */
html.dark .hover\:bg-gray-50:hover { background-color: #293548 !important; }
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover { background-color: #475569 !important; }
html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-blue-50\/30:hover,
html.dark .hover\:bg-blue-50\/40:hover { background-color: rgb(30 64 175 / 0.24) !important; }
html.dark .hover\:bg-blue-100:hover,
html.dark .hover\:bg-blue-200:hover,
html.dark .hover\:bg-blue-200\/90:hover { background-color: rgb(30 64 175 / 0.48) !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgb(20 83 45 / 0.45) !important; }
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-red-100:hover { background-color: rgb(127 29 29 / 0.42) !important; }
html.dark .hover\:text-green-700:hover { color: #86efac !important; }
html.dark .hover\:text-red-700:hover { color: #fca5a5 !important; }
html.dark .hover\:text-gray-600:hover,
html.dark .hover\:text-gray-700:hover,
html.dark .hover\:text-gray-800:hover { color: #f8fafc !important; }
html.dark .hover\:text-blue-800:hover { color: #bfdbfe !important; }

/* Peer-selected controls and status buttons */
html.dark .peer:checked ~ .peer-checked\:border-blue-600 {
  border-color: #3b82f6 !important;
}
html.dark .peer:checked ~ .peer-checked\:bg-blue-50 {
  background-color: rgb(37 99 235 / 0.48) !important;
}
html.dark .peer:checked ~ .peer-checked\:text-blue-700 {
  color: #dbeafe !important;
}
html.dark .peer:checked ~ .peer-checked\:bg-green-50 {
  background-color: rgb(22 163 74 / 0.45) !important;
}
html.dark .peer:checked ~ .peer-checked\:text-green-700 {
  color: #bbf7d0 !important;
}
html.dark .peer:checked ~ .peer-checked\:border-green-500 {
  border-color: #22c55e !important;
}
html.dark .peer:checked ~ .peer-checked\:bg-red-50 {
  background-color: rgb(220 38 38 / 0.42) !important;
}
html.dark .peer:checked ~ .peer-checked\:text-red-700 {
  color: #fecaca !important;
}
html.dark .peer:checked ~ .peer-checked\:border-red-500 {
  border-color: #ef4444 !important;
}
html.dark .peer:checked ~ .peer-checked\:bg-followup-50 {
  background-color: rgb(147 51 234 / 0.42) !important;
}
html.dark .peer:checked ~ .peer-checked\:text-followup-700 {
  color: #e9d5ff !important;
}
html.dark .peer:checked ~ .peer-checked\:border-followup-500 {
  border-color: #a855f7 !important;
}

/* Inspection form */
html.dark .rounded-xl.border.border-gray-200.bg-slate-50\/80 {
  background-color: #121a2b !important;
  border-color: #475569 !important;
}
html.dark .inspection-section-title.bg-white {
  background-color: #243044 !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}
html.dark .inspection-row.bg-white {
  background-color: #1a2438 !important;
}
html.dark .inspection-row.bg-blue-50\/40 {
  background-color: rgb(30 64 175 / 0.22) !important;
}
html.dark .inspection-row .sm\:border-blue-200 {
  border-color: #3b82f6 !important;
}
html.dark .yesno-btn span {
  background-color: #0f172a !important;
  border-color: #64748b !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgb(2 6 23 / 0.35);
}
html.dark .yesno-btn span.bg-white {
  background-color: #0f172a !important;
}
html.dark .yesno-btn:hover span {
  border-color: #94a3b8 !important;
  background-color: #172033 !important;
}
html.dark .yesno-btn:has(input:checked) span,
html.dark .yesno-btn:has(input:checked):hover span {
  border-color: #3b82f6 !important;
  background-color: rgb(37 99 235 / 0.35) !important;
  color: #dbeafe !important;
}
html.dark .status-btn {
  background-color: #0f172a !important;
}
html.dark .status-btn.border-gray-200 {
  border-color: #64748b !important;
  color: #e2e8f0 !important;
}
html.dark .status-btn.border-green-500 {
  border-color: #22c55e !important;
  background-color: rgb(22 163 74 / 0.42) !important;
  color: #bbf7d0 !important;
}
html.dark .status-btn.border-red-500 {
  border-color: #ef4444 !important;
  background-color: rgb(220 38 38 / 0.42) !important;
  color: #fecaca !important;
}
html.dark .status-btn.border-followup-500 {
  border-color: #a855f7 !important;
  background-color: rgb(147 51 234 / 0.42) !important;
  color: #e9d5ff !important;
}
html.dark .status-btn.bg-green-50 {
  background-color: rgb(22 163 74 / 0.42) !important;
  color: #bbf7d0 !important;
}
html.dark .status-btn.bg-red-50 {
  background-color: rgb(220 38 38 / 0.42) !important;
  color: #fecaca !important;
}
html.dark .status-btn.bg-followup-50 {
  background-color: rgb(147 51 234 / 0.42) !important;
  color: #e9d5ff !important;
}
html.dark .status-btn.text-green-700 {
  color: #bbf7d0 !important;
}
html.dark .status-btn.text-red-700 {
  color: #fecaca !important;
}
html.dark .status-btn.text-followup-700 {
  color: #e9d5ff !important;
}
html.dark .hover\:border-green-500:hover {
  border-color: #22c55e !important;
}
html.dark .hover\:border-red-500:hover {
  border-color: #ef4444 !important;
}
html.dark .hover\:border-followup-500:hover {
  border-color: #a855f7 !important;
}
html.dark .hover\:text-followup-700:hover {
  color: #e9d5ff !important;
}
html.dark .hover\:bg-followup-50:hover {
  background-color: rgb(147 51 234 / 0.28) !important;
}

html.dark .after\:bg-white::after {
  background-color: #f8fafc !important;
}

html.dark .after\:border-gray-300::after {
  border-color: #64748b !important;
}

/* Toggle switches */
html.dark .toggle-track {
  background-color: #475569 !important;
}

html.dark .peer:checked ~ .toggle-track {
  background-color: #2563eb !important;
}

html.dark .peer:focus ~ .toggle-track {
  box-shadow: 0 0 0 2px rgb(15 23 42), 0 0 0 4px rgb(59 130 246 / 0.65);
}

html.dark .peer:checked ~ .toggle-track::after {
  background-color: #f8fafc !important;
  border-color: #93c5fd !important;
}

html.dark .email-status-sent { background: rgb(22 163 74 / 0.42) !important; color: #bbf7d0 !important; }
html.dark .email-status-failed { background: rgb(220 38 38 / 0.42) !important; color: #fecaca !important; }
html.dark .email-status-queued { background: rgb(37 99 235 / 0.42) !important; color: #bfdbfe !important; }
html.dark .email-status-skipped_no_email,
html.dark .email-status-skipped_disabled,
html.dark .email-status-skipped_smtp_not_configured,
html.dark .email-status-skipped_already_sent {
  background: rgb(180 83 9 / 0.42) !important;
  color: #fde68a !important;
}

/* Tables */
html.dark thead tr.bg-gray-50 {
  background-color: #243044 !important;
  color: #e2e8f0 !important;
}
html.dark thead tr.bg-gray-50 th {
  color: #e2e8f0 !important;
}
html.dark tbody.divide-y.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  border-color: #3b4a63 !important;
}
html.dark td.text-gray-500,
html.dark td.text-gray-500 .text-gray-300 {
  color: #cbd5e1 !important;
}
html.dark .inline-flex.bg-gray-100.text-gray-400,
html.dark .inline-flex.bg-gray-100.text-gray-600 {
  background-color: #475569 !important;
  color: #e2e8f0 !important;
  border: 1px solid #64748b;
}

/* Dashboard stat icon badges */
html.dark .w-8.h-8.bg-blue-50 {
  background-color: rgb(37 99 235 / 0.45) !important;
  border: 1px solid rgb(96 165 250 / 0.55);
  box-shadow: 0 0 0 1px rgb(37 99 235 / 0.15);
}
html.dark .w-8.h-8.bg-green-50 {
  background-color: rgb(22 163 74 / 0.45) !important;
  border: 1px solid rgb(74 222 128 / 0.55);
  box-shadow: 0 0 0 1px rgb(22 163 74 / 0.15);
}
html.dark .w-8.h-8.bg-red-50 {
  background-color: rgb(220 38 38 / 0.45) !important;
  border: 1px solid rgb(248 113 113 / 0.55);
  box-shadow: 0 0 0 1px rgb(220 38 38 / 0.15);
}
html.dark .w-8.h-8.bg-blue-50 .text-blue-600 { color: #bfdbfe !important; }
html.dark .w-8.h-8.bg-green-50 .text-green-600 { color: #bbf7d0 !important; }
html.dark .w-8.h-8.bg-red-50 .text-red-600 { color: #fecaca !important; }

/* Calendar sidebar, cards, and grid */
html.dark #inspection_calendar .bg-white.rounded-xl {
  background-color: #1a2438 !important;
}
html.dark #inspection_calendar .rounded-xl.border.border-gray-100,
html.dark #inspection_calendar .rounded-xl.border.border-gray-200,
html.dark #inspection_calendar .cal-week.border {
  border-color: #64748b !important;
  box-shadow: 0 0 0 1px rgb(100 116 139 / 0.22), 0 10px 28px rgb(2 6 23 / 0.28);
}
html.dark #inspection_calendar aside .cal-sidebar-panel,
html.dark #inspection_calendar aside .rounded-xl.border {
  background-color: #1a2438 !important;
}
html.dark #inspection_calendar #cal_customer_search {
  border-color: #64748b !important;
  background-color: #0f172a !important;
}
html.dark .cal-customer-item {
  background-color: #243044 !important;
  border-color: #64748b !important;
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.1);
}
html.dark .cal-customer-item:hover,
html.dark .cal-customer-item.hover\:border-blue-200:hover {
  border-color: #60a5fa !important;
  background-color: rgb(30 64 175 / 0.28) !important;
}
html.dark .cal-week .bg-gray-50 {
  background-color: #243044 !important;
}
html.dark .cal-week .border-gray-200,
html.dark .cal-week .border-gray-100,
html.dark .cal-week .border-gray-50,
html.dark .cal-week .border-r,
html.dark .cal-week .border-b,
html.dark .cal-week .border-l {
  border-color: #4b5f78 !important;
}
html.dark .cal-slot {
  border-color: #3b4a63 !important;
}
html.dark .cal-week .border-b.border-gray-100,
html.dark .cal-week .border-b.border-gray-50 {
  border-color: #4b5f78 !important;
}

/* Calendar content is generated at runtime. */
html.dark .cal-slot-drop-target {
  background-color: rgb(30 64 175 / 0.45) !important;
  outline-color: #60a5fa !important;
}

/* Calendar date picker (portaled to body) */
#cal_date_picker {
  position: fixed !important;
  z-index: 1000 !important;
  box-sizing: border-box;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 16px 40px rgb(15 23 42 / 0.22);
  pointer-events: auto;
}

#cal_date_picker.hidden {
  display: none !important;
}

#cal_date_picker .cal-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

#cal_date_picker .cal-picker-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

#cal_date_picker .cal-picker-nav {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.5rem;
  border: 0;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
}

#cal_date_picker .cal-picker-nav:hover {
  background: #e5e7eb;
}

#cal_date_picker .cal-picker-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.2rem;
}

#cal_date_picker .cal-picker-table th {
  padding: 0.125rem 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  text-align: center;
}

#cal_date_picker .cal-picker-table td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

#cal_date_picker .cal-picker-day {
  display: block;
  width: 100%;
  height: 2.125rem;
  margin: 0 auto;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 2.125rem;
  color: #374151;
  cursor: pointer;
}

#cal_date_picker .cal-picker-day:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

#cal_date_picker .cal-picker-day-selected {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

#cal_date_picker .cal-picker-day-today:not(.cal-picker-day-selected) {
  border-color: #93c5fd;
  color: #1d4ed8;
}

#cal_date_picker .cal-picker-summary {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
}

#cal_date_picker .cal-picker-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

#cal_date_picker .cal-picker-btn {
  flex: 1 1 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

#cal_date_picker .cal-picker-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

#cal_date_picker .cal-picker-btn-primary {
  background: #2563eb;
  color: #fff;
}

#cal_date_picker .cal-picker-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

html.dark #cal_date_picker {
  background: #1a2438 !important;
  border-color: #64748b !important;
  box-shadow: 0 12px 32px rgb(2 6 23 / 0.55);
}

html.dark #cal_date_picker .cal-picker-title {
  color: #f8fafc !important;
}

html.dark #cal_date_picker .cal-picker-nav,
html.dark #cal_date_picker .cal-picker-btn-secondary {
  background: #243044 !important;
  color: #e2e8f0 !important;
}

html.dark #cal_date_picker .cal-picker-table th,
html.dark #cal_date_picker .cal-picker-summary {
  color: #94a3b8 !important;
}

html.dark #cal_date_picker .cal-picker-day {
  color: #e2e8f0;
}

html.dark #cal_date_picker .cal-picker-day:hover {
  background: rgb(30 64 175 / 0.28);
  border-color: #60a5fa;
}

html.dark #cal_date_picker .cal-picker-day-today:not(.cal-picker-day-selected) {
  color: #93c5fd;
}

#inspection_calendar .cal-grid-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

#inspection_calendar .cal-time-grid-day .cal-day-col {
  min-width: 0;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle svg {
  pointer-events: none;
}

html:not(.dark) .theme-icon-sun,
html.dark .theme-icon-moon {
  display: none;
}

html.dark ::selection {
  background: #1d4ed8;
  color: #fff;
}

/* Inspect by Road — dark mode panels */
html.dark .road-address-card {
  background-color: #1a2438 !important;
  border-color: #475569 !important;
}
html.dark .road-address-card.border-blue-200 {
  border-color: #2563eb !important;
}
html.dark .road-meta-panel {
  background-color: #172033 !important;
  border-color: #475569 !important;
}
html.dark .road-meta-panel.border-blue-100 {
  background-color: rgb(30 58 138 / 0.22) !important;
  border-color: #2563eb !important;
}
html.dark .road-address-card .border-t {
  border-color: #475569 !important;
}
html.dark .road-address-card .bg-gray-50\/70 {
  background-color: rgb(23 32 51 / 0.85) !important;
}

/* Inspect by Road — schedule status badges and appointment panels */
/* Blaze orange for Scheduled so it stands out from unscheduled gray. */
.road-schedule-badge {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
html:not(.dark) .road-schedule-badge--scheduled {
  background-color: #ffedd5;
  color: #9a3412;
  border: 1px solid #ff6700;
  box-shadow: 0 0 0 1px rgb(255 103 0 / 0.12);
}
html:not(.dark) .road-schedule-badge--unscheduled {
  background-color: #e2e8f0;
  color: #334155;
  border: 1px solid #64748b;
  box-shadow: 0 0 0 1px rgb(100 116 139 / 0.08);
}
html:not(.dark) .road-address-card--scheduled {
  border-width: 3px !important;
  border-color: #ff6700 !important;
  box-shadow: 0 0 0 1px rgb(255 103 0 / 0.18);
}
html:not(.dark) .road-schedule-panel--scheduled {
  background-color: #fff7ed !important;
  border-color: #ff6700 !important;
}
html:not(.dark) .road-schedule-panel--scheduled .road-schedule-date {
  color: #c2410c;
}
html:not(.dark) .road-schedule-panel--scheduled .road-schedule-time {
  color: #ea580c;
}
html:not(.dark) .road-schedule-panel--unscheduled {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}
html:not(.dark) .road-schedule-empty {
  color: #475569;
}

html.dark .road-schedule-badge--scheduled {
  background-color: rgb(255 103 0 / 0.78) !important;
  color: #fff7ed !important;
  border: 1px solid #ffb066;
  box-shadow: 0 0 0 1px rgb(255 176 102 / 0.22);
}
html.dark .road-schedule-badge--unscheduled {
  background-color: rgb(71 85 105 / 0.72) !important;
  color: #f8fafc !important;
  border: 1px solid #94a3b8;
  box-shadow: 0 0 0 1px rgb(148 163 184 / 0.18);
}
html.dark .road-address-card--scheduled {
  border-width: 3px !important;
  border-color: #ff6700 !important;
  box-shadow: 0 0 0 1px rgb(255 103 0 / 0.35);
}
html.dark .road-schedule-panel--scheduled {
  background-color: rgb(255 103 0 / 0.22) !important;
  border-color: #ff6700 !important;
}
html.dark .road-schedule-panel--scheduled .road-schedule-date {
  color: #ffd4a8 !important;
}
html.dark .road-schedule-panel--scheduled .road-schedule-time {
  color: #ffb066 !important;
}
html.dark .road-schedule-panel--unscheduled {
  background-color: rgb(51 65 85 / 0.55) !important;
  border-color: #64748b !important;
}
html.dark .road-schedule-empty {
  color: #e2e8f0 !important;
}

/* Inspect by Road — Last inspection panel colors (pass / fail / follow-up only) */
html:not(.dark) .road-last-inspection-panel--pass {
  background-color: #f0fdf4 !important;
  border-color: #22c55e !important;
}
html:not(.dark) .road-last-inspection-panel--pass .road-last-inspection-date {
  color: #166534;
}
html:not(.dark) .road-last-inspection-panel--fail {
  background-color: #fef2f2 !important;
  border-color: #ef4444 !important;
}
html:not(.dark) .road-last-inspection-panel--fail .road-last-inspection-date {
  color: #991b1b;
}
html:not(.dark) .road-last-inspection-panel--followup {
  background-color: #faf5ff !important;
  border-color: #9333ea !important;
}
html:not(.dark) .road-last-inspection-panel--followup .road-last-inspection-date {
  color: #6b21a8;
}

html.dark .road-meta-panel.road-last-inspection-panel--pass {
  background-color: rgb(22 163 74 / 0.28) !important;
  border-color: #22c55e !important;
}
html.dark .road-meta-panel.road-last-inspection-panel--pass .road-last-inspection-date {
  color: #bbf7d0 !important;
}
html.dark .road-meta-panel.road-last-inspection-panel--fail {
  background-color: rgb(220 38 38 / 0.28) !important;
  border-color: #ef4444 !important;
}
html.dark .road-meta-panel.road-last-inspection-panel--fail .road-last-inspection-date {
  color: #fecaca !important;
}
html.dark .road-meta-panel.road-last-inspection-panel--followup {
  background-color: rgb(147 51 234 / 0.28) !important;
  border-color: #a855f7 !important;
}
html.dark .road-meta-panel.road-last-inspection-panel--followup .road-last-inspection-date {
  color: #e9d5ff !important;
}