/* ============================================================
   Dark mode — retrofit override layer
   Active only under html.dark (toggled in the top header,
   persisted in localStorage, applied pre-paint from <head>).
   Strategy: remap the NEUTRAL Tailwind palette the app is
   built on; tint pastel callouts; brighten colored text.
   Hand-written static file — not part of the Vite build, so
   deploys never require `npm run build`.
   ============================================================ */

html.dark { color-scheme: dark; background-color: #0f172a; }
html.dark body { background-color: #0f172a; color: #cbd5e1; }

/* ---- neutral surfaces ---- */
html.dark .bg-white        { background-color: #1e293b; }
html.dark .bg-gray-50      { background-color: #0f172a; }
html.dark .bg-gray-100     { background-color: #24324a; }
html.dark .bg-gray-200     { background-color: #334155; }
html.dark .bg-gray-300     { background-color: #3e4f6b; }
html.dark .bg-slate-50,
html.dark .bg-slate-100    { background-color: #24324a; }
/* hover variants (Tailwind emits separate classes) */
html.dark .hover\:bg-gray-50:hover   { background-color: #24324a; }
html.dark .hover\:bg-gray-100:hover  { background-color: #2e3d57; }
html.dark .hover\:bg-gray-200:hover  { background-color: #3a4a66; }
html.dark .hover\:bg-white:hover     { background-color: #1e293b; }

/* ---- neutral text ---- */
html.dark .text-gray-900, html.dark .text-slate-900,
html.dark .text-black      { color: #f1f5f9; }
html.dark .text-gray-800   { color: #e2e8f0; }
html.dark .text-gray-700   { color: #cbd5e1; }
html.dark .text-gray-600   { color: #9fb0c5; }
html.dark .text-gray-500   { color: #8195ad; }
html.dark .text-gray-400   { color: #64748b; }
html.dark .text-gray-300   { color: #475569; }
html.dark .hover\:text-gray-700:hover { color: #e2e8f0; }
html.dark .hover\:text-gray-900:hover { color: #f8fafc; }
/* text-white stays white — it sits on colored/dark elements */

/* ---- borders & dividers ---- */
html.dark .border-gray-100 { border-color: #243248; }
html.dark .border-gray-200 { border-color: #293850; }
html.dark .border-gray-300 { border-color: #34445f; }
html.dark .border-gray-400 { border-color: #46587a; }
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #243248; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #293850; }
html.dark .border-white    { border-color: #1e293b; }

/* ---- shadows: soften on dark ---- */
html.dark .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,.4); }
html.dark .shadow,
html.dark .shadow-md  { box-shadow: 0 4px 10px -2px rgba(0,0,0,.5); }
html.dark .shadow-lg,
html.dark .shadow-xl  { box-shadow: 0 12px 30px -6px rgba(0,0,0,.6); }

/* ---- forms (beats the inline `select{background:#fff}` head rule) ---- */
html.dark input:not([type='checkbox']):not([type='radio']),
html.dark select,
html.dark textarea,
html.dark .form-control {
    background-color: #1a2537;
    border-color: #34445f;
    color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b; }
html.dark select option { background-color: #1a2537; color: #e2e8f0; }
html.dark input:disabled, html.dark select:disabled,
html.dark textarea:disabled { background-color: #16202f; color: #64748b; }

/* ---- tables ---- */
html.dark table thead      { background-color: #1a2537; }

/* ---- scrollbars ---- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #46587a; }

/* ---- sidebar: already dark (bg-rr-brown-900). Keep its white logo
       strip white so the brand logo stays visible. ---- */
html.dark .bg-rr-brown-900 .bg-white { background-color: #ffffff; }

/* ============================================================
   Pastel callouts & badges: bg-{color}-50/100 with dark colored
   text. Remap to translucent tints + brighten the text shades.
   ============================================================ */
html.dark .bg-green-50   { background-color: rgba(74,222,128,.10); }
html.dark .bg-green-100  { background-color: rgba(74,222,128,.16); }
html.dark .bg-red-50     { background-color: rgba(248,113,113,.10); }
html.dark .bg-red-100    { background-color: rgba(248,113,113,.16); }
html.dark .bg-amber-50   { background-color: rgba(251,191,36,.10); }
html.dark .bg-amber-100  { background-color: rgba(251,191,36,.16); }
html.dark .bg-yellow-50  { background-color: rgba(250,204,21,.10); }
html.dark .bg-yellow-100 { background-color: rgba(250,204,21,.16); }
html.dark .bg-blue-50    { background-color: rgba(96,165,250,.10); }
html.dark .bg-blue-100   { background-color: rgba(96,165,250,.16); }
html.dark .bg-indigo-50  { background-color: rgba(129,140,248,.10); }
html.dark .bg-indigo-100 { background-color: rgba(129,140,248,.16); }
html.dark .bg-purple-50  { background-color: rgba(192,132,252,.10); }
html.dark .bg-purple-100 { background-color: rgba(192,132,252,.16); }
html.dark .bg-violet-50  { background-color: rgba(167,139,250,.10); }
html.dark .bg-pink-50    { background-color: rgba(244,114,182,.10); }
html.dark .bg-pink-100   { background-color: rgba(244,114,182,.16); }
html.dark .bg-rose-50    { background-color: rgba(251,113,133,.10); }
html.dark .bg-orange-50  { background-color: rgba(251,146,60,.10); }
html.dark .bg-orange-100 { background-color: rgba(251,146,60,.16); }
html.dark .bg-emerald-50 { background-color: rgba(52,211,153,.10); }
html.dark .bg-emerald-100{ background-color: rgba(52,211,153,.16); }
html.dark .bg-teal-50    { background-color: rgba(45,212,191,.10); }
html.dark .bg-teal-100   { background-color: rgba(45,212,191,.16); }
html.dark .bg-cyan-50    { background-color: rgba(34,211,238,.10); }
html.dark .bg-cyan-100   { background-color: rgba(34,211,238,.16); }
html.dark .bg-sky-50     { background-color: rgba(56,189,248,.10); }
html.dark .bg-sky-100    { background-color: rgba(56,189,248,.16); }
html.dark .bg-lime-50    { background-color: rgba(163,230,53,.10); }
html.dark .bg-dc-olive-50  { background-color: rgba(163,172,58,.10); }
html.dark .bg-dc-olive-100 { background-color: rgba(163,172,58,.16); }

/* colored borders on those callouts */
html.dark .border-green-200,  html.dark .border-green-300  { border-color: rgba(74,222,128,.35); }
html.dark .border-red-200,    html.dark .border-red-300    { border-color: rgba(248,113,113,.35); }
html.dark .border-amber-200,  html.dark .border-amber-300  { border-color: rgba(251,191,36,.35); }
html.dark .border-yellow-200, html.dark .border-yellow-300 { border-color: rgba(250,204,21,.35); }
html.dark .border-blue-200,   html.dark .border-blue-300   { border-color: rgba(96,165,250,.35); }
html.dark .border-indigo-200  { border-color: rgba(129,140,248,.35); }
html.dark .border-purple-200  { border-color: rgba(192,132,252,.35); }
html.dark .border-orange-200  { border-color: rgba(251,146,60,.35); }
html.dark .border-emerald-200 { border-color: rgba(52,211,153,.35); }
html.dark .border-dc-olive-200{ border-color: rgba(163,172,58,.35); }

/* brighten dark colored text so it reads on dark surfaces */
html.dark .text-green-900, html.dark .text-green-800,
html.dark .text-green-700  { color: #86efac; }
html.dark .text-green-600  { color: #4ade80; }
html.dark .text-red-900, html.dark .text-red-800,
html.dark .text-red-700    { color: #fca5a5; }
html.dark .text-red-600    { color: #f87171; }
html.dark .text-amber-900, html.dark .text-amber-800,
html.dark .text-amber-700  { color: #fcd34d; }
html.dark .text-amber-600  { color: #fbbf24; }
html.dark .text-yellow-800, html.dark .text-yellow-700 { color: #fde047; }
html.dark .text-blue-900, html.dark .text-blue-800,
html.dark .text-blue-700   { color: #93c5fd; }
html.dark .text-blue-600   { color: #60a5fa; }
html.dark .text-indigo-800, html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-600 { color: #818cf8; }
html.dark .text-purple-800, html.dark .text-purple-700 { color: #d8b4fe; }
html.dark .text-purple-600 { color: #c084fc; }
html.dark .text-pink-800, html.dark .text-pink-700 { color: #f9a8d4; }
html.dark .text-orange-800, html.dark .text-orange-700 { color: #fdba74; }
html.dark .text-orange-600 { color: #fb923c; }
html.dark .text-emerald-800, html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-teal-800, html.dark .text-teal-700 { color: #5eead4; }
html.dark .text-cyan-800, html.dark .text-cyan-700 { color: #67e8f9; }
html.dark .text-sky-800, html.dark .text-sky-700   { color: #7dd3fc; }
html.dark .text-rose-800, html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-dc-olive-900, html.dark .text-dc-olive-800,
html.dark .text-dc-olive-700 { color: #c5cb74; }
html.dark .text-dc-olive-600 { color: #a3ac3a; }

/* ============================================================
   Header global-search dropdown: built with inline styles, so
   it needs !important overrides scoped to its class hooks.
   ============================================================ */
html.dark .gs-dropdown { background: #1e293b !important; border-color: #34445f !important; }
html.dark .gs-dropdown [style*="color:#1f2937"] { color: #e2e8f0 !important; }
html.dark .gs-dropdown [style*="color:#6b7280"] { color: #8195ad !important; }
html.dark .gs-dropdown [style*="background:#f3f4f6"] { background: #334155 !important; color: #cbd5e1 !important; }
html.dark .search-result-item { border-bottom-color: #293850 !important; }
html.dark .search-result-item:hover { background: #24324a; }

/* ============================================================
   v2 — sidebar, gradients, inline-styled widgets, chat canvas
   ============================================================ */

/* ---- sidebar (bg-rr-brown-900 is dark in BOTH themes): restore the
       original light grays that the global text remap darkened ---- */
html.dark .bg-rr-brown-900 .text-gray-300 { color: #d1d5db; }
html.dark .bg-rr-brown-900 .text-gray-400 { color: #9ca3af; }
html.dark .bg-rr-brown-900 .text-gray-500 { color: #9ca3af; }
html.dark .bg-rr-brown-900 .text-gray-600 { color: #9ca3af; }
html.dark .bg-rr-brown-900 .hover\:text-gray-700:hover,
html.dark .bg-rr-brown-900 .hover\:text-gray-900:hover { color: #f9fafb; }

/* ---- pastel GRADIENT cards (bg-gradient-to-* from-*-50 to-*-100):
       gradients are background-image, so remap their stop variables ---- */
html.dark .from-blue-50   { --tw-gradient-from: rgba(96,165,250,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(96,165,250,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-blue-100    { --tw-gradient-to: rgba(96,165,250,.22) var(--tw-gradient-to-position); }
html.dark .from-green-50  { --tw-gradient-from: rgba(74,222,128,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(74,222,128,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-green-100   { --tw-gradient-to: rgba(74,222,128,.22) var(--tw-gradient-to-position); }
html.dark .from-red-50    { --tw-gradient-from: rgba(248,113,113,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(248,113,113,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-red-100     { --tw-gradient-to: rgba(248,113,113,.22) var(--tw-gradient-to-position); }
html.dark .from-amber-50  { --tw-gradient-from: rgba(251,191,36,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(251,191,36,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-amber-100   { --tw-gradient-to: rgba(251,191,36,.22) var(--tw-gradient-to-position); }
html.dark .from-purple-50 { --tw-gradient-from: rgba(192,132,252,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(192,132,252,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-purple-100  { --tw-gradient-to: rgba(192,132,252,.22) var(--tw-gradient-to-position); }
html.dark .from-indigo-50 { --tw-gradient-from: rgba(129,140,248,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(129,140,248,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-indigo-100  { --tw-gradient-to: rgba(129,140,248,.22) var(--tw-gradient-to-position); }
html.dark .to-pink-50     { --tw-gradient-to: rgba(244,114,182,.16) var(--tw-gradient-to-position); }
html.dark .to-emerald-50  { --tw-gradient-to: rgba(52,211,153,.16) var(--tw-gradient-to-position); }
html.dark .from-gray-50   { --tw-gradient-from: rgba(148,163,184,.06) var(--tw-gradient-from-position); --tw-gradient-to: rgba(148,163,184,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-gray-100    { --tw-gradient-to: rgba(148,163,184,.14) var(--tw-gradient-to-position); }
html.dark .from-dc-olive-50  { --tw-gradient-from: rgba(163,172,58,.12) var(--tw-gradient-from-position); --tw-gradient-to: rgba(163,172,58,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.dark .to-dc-olive-100   { --tw-gradient-to: rgba(163,172,58,.22) var(--tw-gradient-to-position); }

/* ---- rescue net for INLINE-styled elements (sticky table headers,
       dashboard widgets, pending-approvals page, search dropdown rows).
       Attribute selectors match the style text, so !important is required. */
html.dark [style*="background:#fff"], html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"], html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"] { background-color: #1e293b !important; }
html.dark [style*="background:#f9fafb"], html.dark [style*="background: #f9fafb"],
html.dark [style*="background:#f8fafc"], html.dark [style*="background:#f3f4f6"],
html.dark [style*="background: #f3f4f6"] { background-color: #1a2537 !important; }
html.dark [style*="background:#f0fdf4"] { background-color: rgba(74,222,128,.10) !important; }
html.dark [style*="color:#111827"], html.dark [style*="color: #111827"],
html.dark [style*="color:#1f2937"], html.dark [style*="color: #1f2937"] { color: #e2e8f0 !important; }
html.dark [style*="color:#374151"], html.dark [style*="color: #374151"],
html.dark [style*="color:#4b5563"], html.dark [style*="color: #4b5563"] { color: #cbd5e1 !important; }
html.dark [style*="color:#6b7280"], html.dark [style*="color: #6b7280"] { color: #8195ad !important; }
html.dark [style*="border:1px solid #e5e7eb"], html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border-bottom:1px solid #f3f4f6"] { border-color: #2e3d55 !important; }

/* ---- WhatsApp chat screen ---- */
/* wallpaper: inline light-green gradient on the messages canvas */
html.dark [style*="#e8f5e9"] { background: #0c1710 !important; }
/* outgoing staff bubble: arbitrary WhatsApp green -> WhatsApp dark green */
html.dark .bg-\[\#d9fdd3\] { background-color: #005c4b !important; }
html.dark .bg-\[\#d9fdd3\] .text-gray-800 { color: #e7f6ef; }
html.dark .bg-\[\#d9fdd3\] .text-gray-600 { color: #9ed8c3; }
/* translucent white pills (date separators, load-older, empty state) */
html.dark .bg-white\/80 { background-color: rgba(30,41,59,.85); }
html.dark .bg-white\/50 { background-color: rgba(30,41,59,.6); }
html.dark .bg-white\/90 { background-color: rgba(30,41,59,.9); }
html.dark .bg-gray-200\/70 { background-color: rgba(51,65,85,.7); }
html.dark .bg-gray-100\/50 { background-color: rgba(36,50,74,.6); }
html.dark .bg-dc-olive-50\/50 { background-color: rgba(163,172,58,.08); }

/* ---- theme toggle icon swap (no JS needed for the swap) ---- */
html:not(.dark) .theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: none; }

/* ---- HR letters: the letter stays a white paper sheet in dark mode
       (its content pins its own dark inline colors, like the PDF) ---- */
html.dark .letter-paper { background-color: #ffffff; color: #1f2937; }