/* SecureBand dark mode: applied when <html class="sb-dark"> */
html.sb-dark { color-scheme: dark; }
html.sb-dark body { background-color: #0b1220 !important; color: #e2e8f0; }
html.sb-dark .bg-\[\#F4F6F9\], html.sb-dark .bg-gray-50\/80, html.sb-dark .bg-gray-50\/50 { background-color: #0b1220 !important; }
html.sb-dark .bg-white { background-color: #1a2436 !important; }
html.sb-dark .bg-white\/80, html.sb-dark .bg-white\/90 { background-color: rgba(26,36,54,.9) !important; }
html.sb-dark .bg-gray-50 { background-color: #151f31 !important; }
html.sb-dark .bg-gray-100 { background-color: #223049 !important; }
html.sb-dark .bg-gray-200 { background-color: #2c3b55 !important; }
html.sb-dark .hover\:bg-gray-50:hover, html.sb-dark .hover\:bg-gray-100:hover { background-color: #223049 !important; }
html.sb-dark .hover\:bg-gray-200:hover { background-color: #2c3b55 !important; }
html.sb-dark .text-gray-900, html.sb-dark .text-gray-800, html.sb-dark .text-black { color: #f1f5f9 !important; }
html.sb-dark .text-gray-700 { color: #e2e8f0 !important; }
html.sb-dark .text-gray-600 { color: #cbd5e1 !important; }
html.sb-dark .text-gray-500 { color: #9fb0c7 !important; }
html.sb-dark .text-gray-400 { color: #8496b0 !important; }
html.sb-dark .border-gray-100, html.sb-dark .border-gray-200, html.sb-dark .border-gray-300,
html.sb-dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.sb-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2f3e57 !important; }
html.sb-dark .border-b, html.sb-dark .border-t { border-color: #2f3e57; }
/* tinted (pastel) surfaces */
html.sb-dark .bg-blue-50, html.sb-dark .bg-indigo-50, html.sb-dark .bg-sky-50 { background-color: #15264a !important; }
html.sb-dark .bg-blue-100 { background-color: #1e3a8a !important; }
html.sb-dark .bg-emerald-50, html.sb-dark .bg-green-50 { background-color: #0c2e29 !important; }
html.sb-dark .bg-emerald-100, html.sb-dark .bg-green-100 { background-color: #0f3d36 !important; }
html.sb-dark .bg-red-50 { background-color: #3a161d !important; }
html.sb-dark .bg-red-100 { background-color: #4a1a22 !important; }
html.sb-dark .bg-amber-50, html.sb-dark .bg-yellow-50, html.sb-dark .bg-orange-50 { background-color: #3a2c0c !important; }
html.sb-dark .bg-amber-100, html.sb-dark .bg-yellow-100 { background-color: #4a370f !important; }
html.sb-dark .border-blue-200, html.sb-dark .border-indigo-200 { border-color: #2c4a85 !important; }
html.sb-dark .border-emerald-200, html.sb-dark .border-emerald-300 { border-color: #1b6b5c !important; }
html.sb-dark .border-red-200, html.sb-dark .border-red-300 { border-color: #7f2a35 !important; }
html.sb-dark .border-amber-200, html.sb-dark .border-amber-300 { border-color: #7a5a14 !important; }
html.sb-dark .text-blue-600, html.sb-dark .text-blue-700, html.sb-dark .text-blue-800, html.sb-dark .text-blue-900, html.sb-dark .text-indigo-600, html.sb-dark .text-indigo-700 { color: #93c5fd !important; }
html.sb-dark .text-emerald-600, html.sb-dark .text-emerald-700, html.sb-dark .text-emerald-800, html.sb-dark .text-green-600, html.sb-dark .text-green-700 { color: #6ee7b7 !important; }
html.sb-dark .text-red-500, html.sb-dark .text-red-600, html.sb-dark .text-red-700, html.sb-dark .text-red-800 { color: #fca5a5 !important; }
html.sb-dark .text-amber-500, html.sb-dark .text-amber-600, html.sb-dark .text-amber-700, html.sb-dark .text-amber-800 { color: #fcd34d !important; }
/* form controls */
html.sb-dark input:not([type=checkbox]):not([type=radio]):not([type=range]), html.sb-dark textarea, html.sb-dark select { background-color: #151f31; color: #e2e8f0; border-color: #2f3e57; }
html.sb-dark input::placeholder, html.sb-dark textarea::placeholder { color: #7c8da6; }
html.sb-dark select option { background-color: #1a2436; color: #e2e8f0; }
/* tables & custom rows */
html.sb-dark table thead, html.sb-dark thead th { background-color: #151f31 !important; }
html.sb-dark tr.row-hover:hover > td { background-color: #223a66 !important; }
html.sb-dark tr.row-hover:has(+ tr.detail-row:not(.hidden)) > td { background-color: #1e3a6b !important; }
html.sb-dark tr.row-hover:hover > td:first-child { box-shadow: inset 4px 0 0 #60a5fa; }
html.sb-dark tr.row-hover:has(+ tr.detail-row:not(.hidden)) > td:first-child { box-shadow: inset 4px 0 0 #93c5fd; }
html.sb-dark .notif-item.row-hover:hover { background-color: #223a66 !important; }
html.sb-dark .notif-item.row-hover.sb-unread:hover { background-color: #27478a !important; }
html.sb-dark .sb-combo-list { background: #1a2436; border-color: #2f3e57; }
html.sb-dark .sb-combo-list .sb-opt { color: #e2e8f0; }
html.sb-dark .sb-combo-list .sb-opt:hover, html.sb-dark .sb-combo-list .sb-opt.active { background: #223a66; color: #fff; }
html.sb-dark .shadow-sm, html.sb-dark .shadow-md, html.sb-dark .shadow-xl { --tw-shadow-color: rgba(0,0,0,.5); }
html.sb-dark .flatpickr-calendar { background: #1a2436; color: #e2e8f0; }
html.sb-dark .flatpickr-day, html.sb-dark .flatpickr-weekday, html.sb-dark .flatpickr-current-month, html.sb-dark .numInputWrapper input, html.sb-dark .flatpickr-monthDropdown-months { color: #e2e8f0 !important; background: transparent; }
html.sb-dark .flatpickr-day:hover { background: #223a66; }
html.sb-dark ::-webkit-scrollbar-track { background: #0b1220; }

/* hover / selected highlights on light-tinted utility classes */
html.sb-dark .hover\:bg-blue-50:hover, html.sb-dark .hover\:bg-indigo-50:hover { background-color: #25488f !important; }
html.sb-dark .bg-blue-50\/70, html.sb-dark .bg-blue-50\/50 { background-color: #1c3a78 !important; }
html.sb-dark .hover\:bg-emerald-50:hover { background-color: #11524a !important; }
html.sb-dark .hover\:bg-red-50:hover { background-color: #5a1f29 !important; }
html.sb-dark .hover\:bg-amber-50:hover { background-color: #5a4310 !important; }
html.sb-dark .hover\:bg-white:hover { background-color: #223049 !important; }
html.sb-dark .event-picker-item:hover { background-color: #25488f !important; }
html.sb-dark .event-picker-item:hover * { color: #fff !important; }
html.sb-dark #eventPickerPanel { background-color: #1a2436 !important; border-color: #2f3e57 !important; }
html.sb-dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #26344d !important; }

/* gradient page backgrounds (Login) */
html.sb-dark body[class*="bg-gradient"] { background-image: linear-gradient(135deg, #0b1220 0%, #101a30 50%, #0f1f3d 100%) !important; }
/* navy brand text / navy buttons need to stay readable on dark surfaces */
html.sb-dark .text-\[\#1B263B\] { color: #e2e8f0 !important; }
html.sb-dark button.bg-\[\#1B263B\], html.sb-dark a.bg-\[\#1B263B\] { background-color: #2f4f8f !important; }
html.sb-dark button.hover\:bg-black:hover, html.sb-dark a.hover\:bg-black:hover { background-color: #3b63b3 !important; }
html.sb-dark header.bg-white { background-color: #131d31 !important; border-color: #2f3e57 !important; }

/* support-ticket conversation */
html.sb-dark .chat-bg { background-color: #0f1827 !important; background-image: radial-gradient(#1f2c43 1px, transparent 1px) !important; }
html.sb-dark #chatMessages .bg-\[\#1B263B\] { background-color: #2f5bb5 !important; color: #fff !important; }
html.sb-dark #chatMessages .bg-white { background-color: #223049 !important; color: #e2e8f0 !important; border-color: #2f3e57 !important; }
html.sb-dark .ticket-item.active-ticket { background: #1e3a6b !important; border-color: #3b82f6 !important; box-shadow: inset 0 0 0 1px #3b82f6; }

/* avatars + slate/orange badges */
.sb-avatar { background-color: #1B263B; color: #fff; }
html.sb-dark .sb-avatar { background-color: #2a3b5a !important; color: #f1f5f9 !important; box-shadow: inset 0 0 0 1px #3a4b69; }
html.sb-dark .bg-slate-100 { background-color: #2a3650 !important; }
html.sb-dark .text-slate-600, html.sb-dark .text-slate-500 { color: #cbd5e1 !important; }
html.sb-dark .bg-orange-100 { background-color: #4a2e12 !important; }
html.sb-dark .text-orange-700 { color: #fdba74 !important; }

/* ------------------------------------------------------------------
   Contrast fixes: kulay na wala pa sa taas (purple, indigo-800/900, orange, yellow, sky...)
   at mga hover / opacity variant ng mga tinted na background.
   ------------------------------------------------------------------ */
/* text: madilim na shades -> maliwanag */
html.sb-dark .text-blue-400, html.sb-dark .text-indigo-400, html.sb-dark .text-indigo-500,
html.sb-dark .text-indigo-800, html.sb-dark .text-indigo-900, html.sb-dark .text-sky-600,
html.sb-dark .text-sky-700, html.sb-dark .text-sky-800, html.sb-dark .text-cyan-600,
html.sb-dark .text-cyan-700, html.sb-dark .text-teal-600, html.sb-dark .text-teal-700 { color: #93c5fd !important; }
html.sb-dark .text-purple-400, html.sb-dark .text-purple-500, html.sb-dark .text-purple-600, html.sb-dark .text-purple-700,
html.sb-dark .text-purple-800, html.sb-dark .text-purple-900, html.sb-dark .text-violet-600,
html.sb-dark .text-violet-700, html.sb-dark .text-violet-800, html.sb-dark .text-fuchsia-600,
html.sb-dark .text-fuchsia-700 { color: #d8b4fe !important; }
html.sb-dark .text-emerald-900, html.sb-dark .text-green-800, html.sb-dark .text-green-900,
html.sb-dark .text-lime-700, html.sb-dark .text-lime-800 { color: #6ee7b7 !important; }
html.sb-dark .text-red-900, html.sb-dark .text-rose-600, html.sb-dark .text-rose-700,
html.sb-dark .text-rose-800 { color: #fca5a5 !important; }
html.sb-dark .text-amber-900, html.sb-dark .text-yellow-600, html.sb-dark .text-yellow-700,
html.sb-dark .text-yellow-800, html.sb-dark .text-yellow-900 { color: #fcd34d !important; }
html.sb-dark .text-orange-600, html.sb-dark .text-orange-800, html.sb-dark .text-orange-900 { color: #fdba74 !important; }
html.sb-dark .text-pink-600, html.sb-dark .text-pink-700 { color: #f9a8d4 !important; }

/* backgrounds (pastel -> dark tint) */
html.sb-dark .bg-purple-50, html.sb-dark .bg-violet-50, html.sb-dark .bg-fuchsia-50, html.sb-dark .bg-pink-50 { background-color: #2a1a47 !important; }
html.sb-dark .bg-purple-100, html.sb-dark .bg-violet-100, html.sb-dark .bg-fuchsia-100, html.sb-dark .bg-pink-100 { background-color: #3b2466 !important; }
html.sb-dark .bg-purple-200 { background-color: #4c2f85 !important; }
html.sb-dark .bg-indigo-100, html.sb-dark .bg-sky-100, html.sb-dark .bg-cyan-100 { background-color: #1b2f6b !important; }
html.sb-dark .bg-blue-200, html.sb-dark .bg-indigo-200 { background-color: #1e3a8a !important; }
html.sb-dark .bg-teal-50, html.sb-dark .bg-cyan-50, html.sb-dark .bg-lime-50 { background-color: #0c2e29 !important; }
html.sb-dark .bg-teal-100, html.sb-dark .bg-lime-100 { background-color: #0f3d36 !important; }
html.sb-dark .bg-emerald-200, html.sb-dark .bg-green-200 { background-color: #115e51 !important; }
html.sb-dark .bg-red-200, html.sb-dark .bg-rose-50, html.sb-dark .bg-rose-100 { background-color: #5a1f29 !important; }
html.sb-dark .bg-amber-200, html.sb-dark .bg-yellow-200, html.sb-dark .bg-orange-200 { background-color: #5a4310 !important; }
/* opacity variants */
html.sb-dark .bg-indigo-50\/40, html.sb-dark .bg-indigo-50\/50, html.sb-dark .bg-indigo-50\/70,
html.sb-dark .bg-blue-50\/40, html.sb-dark .bg-blue-100\/60 { background-color: #1c3a78 !important; }
html.sb-dark .bg-amber-50\/50, html.sb-dark .bg-amber-50\/40 { background-color: #3a2c0c !important; }
html.sb-dark .bg-emerald-50\/50, html.sb-dark .bg-emerald-50\/40 { background-color: #0c2e29 !important; }
html.sb-dark .bg-red-50\/50, html.sb-dark .bg-red-50\/40 { background-color: #3a161d !important; }
html.sb-dark .bg-purple-50\/50, html.sb-dark .bg-purple-50\/40 { background-color: #2a1a47 !important; }

/* borders */
html.sb-dark .border-blue-100, html.sb-dark .border-blue-300, html.sb-dark .border-blue-400,
html.sb-dark .border-indigo-100, html.sb-dark .border-indigo-300, html.sb-dark .border-indigo-400,
html.sb-dark .border-sky-200, html.sb-dark .border-sky-300 { border-color: #2c4a85 !important; }
html.sb-dark .border-purple-100, html.sb-dark .border-purple-200, html.sb-dark .border-purple-200\/60,
html.sb-dark .border-purple-300, html.sb-dark .border-violet-200 { border-color: #4c2f85 !important; }
html.sb-dark .border-emerald-100, html.sb-dark .border-emerald-400, html.sb-dark .border-green-200,
html.sb-dark .border-green-300 { border-color: #1b6b5c !important; }
html.sb-dark .border-red-100, html.sb-dark .border-red-400 { border-color: #7f2a35 !important; }
html.sb-dark .border-amber-100, html.sb-dark .border-amber-400, html.sb-dark .border-amber-400\/40,
html.sb-dark .border-yellow-200, html.sb-dark .border-orange-200 { border-color: #7a5a14 !important; }

/* hover backgrounds / text */
html.sb-dark .hover\:bg-blue-100:hover, html.sb-dark .hover\:bg-indigo-100:hover, html.sb-dark .hover\:bg-indigo-50\/40:hover { background-color: #25488f !important; }
html.sb-dark .hover\:bg-purple-100:hover, html.sb-dark .hover\:bg-purple-50:hover { background-color: #3b2466 !important; }
html.sb-dark .hover\:bg-emerald-100:hover { background-color: #11524a !important; }
html.sb-dark .hover\:bg-red-100:hover { background-color: #5a1f29 !important; }
html.sb-dark .hover\:bg-amber-100:hover { background-color: #5a4310 !important; }
html.sb-dark .hover\:text-blue-700:hover, html.sb-dark .hover\:text-blue-900:hover,
html.sb-dark .hover\:text-indigo-700:hover, html.sb-dark .hover\:text-indigo-800:hover { color: #bfdbfe !important; }
html.sb-dark .hover\:text-red-600:hover, html.sb-dark .hover\:text-red-700:hover { color: #fecaca !important; }
html.sb-dark .hover\:text-amber-600:hover, html.sb-dark .hover\:text-amber-700:hover { color: #fde68a !important; }
/* ------------------------------------------------------------------
   Round 3 (audit): remaining light surfaces / hovers that were not covered
   ------------------------------------------------------------------ */
html.sb-dark .bg-gray-300 { background-color: #3a4a66 !important; }
html.sb-dark .bg-gray-400 { background-color: #4a5b78 !important; }
html.sb-dark .hover\:bg-gray-300:hover { background-color: #44557a !important; }
html.sb-dark .hover\:bg-gray-400:hover { background-color: #53668a !important; }
/* switch toggles: gray track when off, bright blue when on (the navy "on" colour is invisible on dark) */
html.sb-dark .peer:checked ~ .peer-checked\:bg-\[\#1B263B\] { background-color: #3b82f6 !important; }
/* opacity variants of white / gray surfaces */
html.sb-dark .bg-gray-50\/30, html.sb-dark .bg-gray-50\/70 { background-color: rgba(21,31,49,.7) !important; }
html.sb-dark .hover\:bg-gray-50\/80:hover { background-color: #223049 !important; }
html.sb-dark .bg-white\/95 { background-color: rgba(26,36,54,.95) !important; }
html.sb-dark .focus\:bg-white:focus { background-color: #1a2436 !important; }
html.sb-dark .border-gray-50, html.sb-dark .border-gray-200\/80 { border-color: #26344d !important; }
/* hover text on dark surfaces */
html.sb-dark .hover\:text-gray-800:hover, html.sb-dark .hover\:text-gray-900:hover { color: #f8fafc !important; }
html.sb-dark .hover\:text-gray-600:hover { color: #e2e8f0 !important; }
html.sb-dark .hover\:text-gray-500:hover { color: #cbd5e1 !important; }
html.sb-dark .hover\:border-blue-200:hover, html.sb-dark .hover\:border-blue-300:hover, html.sb-dark .hover\:border-indigo-400:hover { border-color: #3b82f6 !important; }
/* gradient helpers (light page gradients) */
html.sb-dark .from-slate-50, html.sb-dark .via-slate-100, html.sb-dark .to-blue-50 { --tw-gradient-from: #0b1220; --tw-gradient-via: #101a30; --tw-gradient-to: #0f1f3d; }