/* =========================================================================
   theme.css — Universal Day / Night / Golden Mode System
   Consistent across all pages, subpages, views, navigation, forms, and modals.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Default / Day Mode (☀️)
   Explicit light color-scheme prevents OS Dark Mode from corrupting selects,
   inputs, scrollbars, and native option dropdowns in Day mode.
   ------------------------------------------------------------------------- */
:root,
html,
html[data-theme="light"],
html:not([data-theme="dark"]):not([data-theme="golden"]) {
  color-scheme: light !important;
}

:root select,
html[data-theme="light"] select,
html:not([data-theme="dark"]):not([data-theme="golden"]) select {
  color-scheme: light !important;
}

:root select option,
html[data-theme="light"] select option,
html:not([data-theme="dark"]):not([data-theme="golden"]) select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

:root select optgroup,
html[data-theme="light"] select optgroup,
html:not([data-theme="dark"]):not([data-theme="golden"]) select optgroup {
  background-color: #f8fafc !important;
  color: #334155 !important;
  color-scheme: light !important;
}

/* -------------------------------------------------------------------------
   Dark / Night Mode (🌙)
   ------------------------------------------------------------------------- */
html[data-theme="dark"], html.dark {
  color-scheme: dark !important;
}

html[data-theme="dark"] body,
html.dark body {
  background-color: #0b0f19 !important;
  color: #f1f5f9 !important;
}

/* App roots and main container viewports */
html[data-theme="dark"] #root,
html.dark #root,
html[data-theme="dark"] main,
html.dark main,
html[data-theme="dark"] .bg-slate-50:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-slate-50:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .bg-slate-100\/80:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-slate-100\/80:not(#id-card-print *):not(.bk-idcard) {
  background-color: #0b0f19 !important;
  color: #f1f5f9 !important;
}

/* Surfaces, Cards, and Containers */
html[data-theme="dark"] .bg-white:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-white:not(#id-card-print *):not(.bk-idcard) {
  background-color: #111827 !important;
  color: #f1f5f9 !important;
  border-color: #1f2937 !important;
}

/* Secondary / Muted Surfaces */
html[data-theme="dark"] .bg-slate-100:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-slate-100:not(#id-card-print *):not(.bk-idcard) {
  background-color: #1a2234 !important;
  color: #e2e8f0 !important;
  border-color: #242f44 !important;
}

html[data-theme="dark"] .bg-slate-200:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-slate-200:not(#id-card-print *):not(.bk-idcard) {
  background-color: #242f44 !important;
  color: #e2e8f0 !important;
  border-color: #374151 !important;
}

/* Typography Inversion */
html[data-theme="dark"] .text-slate-900:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-900:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .text-slate-850:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-850:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .text-slate-800:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-800:not(#id-card-print *):not(.bk-idcard) {
  color: #f8fafc !important;
}

html[data-theme="dark"] .text-slate-700:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-700:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .text-slate-600:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-600:not(#id-card-print *):not(.bk-idcard) {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .text-slate-500:not(#id-card-print *):not(.bk-idcard),
html.dark .text-slate-500:not(#id-card-print *):not(.bk-idcard) {
  color: #94a3b8 !important;
}

/* Borders and Dividers */
html[data-theme="dark"] .border-slate-200:not(#id-card-print *):not(.bk-idcard),
html.dark .border-slate-200:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .border-slate-200\/80:not(#id-card-print *):not(.bk-idcard),
html.dark .border-slate-200\/80:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .border-slate-300:not(#id-card-print *):not(.bk-idcard),
html.dark .border-slate-300:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .border-slate-100:not(#id-card-print *):not(.bk-idcard),
html.dark .border-slate-100:not(#id-card-print *):not(.bk-idcard) {
  border-color: #1f2937 !important;
}

html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard) {
  border-color: #1f2937 !important;
}

/* Form Controls: Inputs, Selects, and Textareas */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not(#id-card-print *):not(.bk-idcard),
html.dark input:not([type="checkbox"]):not([type="radio"]):not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] select:not(#id-card-print *):not(.bk-idcard),
html.dark select:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] textarea:not(#id-card-print *):not(.bk-idcard),
html.dark textarea:not(#id-card-print *):not(.bk-idcard) {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
  border-color: #374151 !important;
}

html[data-theme="dark"] input::placeholder,
html.dark input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html[data-theme="dark"] select option,
html.dark select option {
  background-color: #111827 !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

html[data-theme="dark"] select optgroup,
html.dark select optgroup {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  color-scheme: dark !important;
}

/* Tables and Grids */
html[data-theme="dark"] table:not(#id-card-print *) thead,
html.dark table:not(#id-card-print *) thead,
html[data-theme="dark"] table:not(#id-card-print *) thead th,
html.dark table:not(#id-card-print *) thead th {
  background-color: #161f30 !important;
  color: #e2e8f0 !important;
  border-color: #1f2937 !important;
}

html[data-theme="dark"] table:not(#id-card-print *) tbody tr,
html.dark table:not(#id-card-print *) tbody tr {
  border-color: #1f2937 !important;
}

html[data-theme="dark"] table:not(#id-card-print *) tbody tr:hover,
html.dark table:not(#id-card-print *) tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

html[data-theme="dark"] table:not(#id-card-print *) td,
html.dark table:not(#id-card-print *) td {
  border-color: #1f2937 !important;
}

html[data-theme="dark"] tr[style*="background"],
html.dark tr[style*="background"] {
  background-color: #161f30 !important;
}

/* Modals and Overlays */
html[data-theme="dark"] .bg-white.rounded-2xl:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-white.rounded-2xl:not(#id-card-print *):not(.bk-idcard),
html[data-theme="dark"] .bg-white.rounded-3xl:not(#id-card-print *):not(.bk-idcard),
html.dark .bg-white.rounded-3xl:not(#id-card-print *):not(.bk-idcard) {
  background-color: #111827 !important;
  border-color: #374151 !important;
}

/* Soft colored status badges */
html[data-theme="dark"] .bg-blue-50:not(#id-card-print *),
html.dark .bg-blue-50:not(#id-card-print *) {
  background-color: rgba(30, 58, 138, 0.35) !important;
  color: #93c5fd !important;
  border-color: rgba(30, 58, 138, 0.5) !important;
}

html[data-theme="dark"] .bg-emerald-50:not(#id-card-print *),
html.dark .bg-emerald-50:not(#id-card-print *) {
  background-color: rgba(6, 78, 59, 0.35) !important;
  color: #6ee7b7 !important;
  border-color: rgba(6, 78, 59, 0.5) !important;
}

html[data-theme="dark"] .bg-amber-50:not(#id-card-print *),
html.dark .bg-amber-50:not(#id-card-print *) {
  background-color: rgba(120, 53, 15, 0.35) !important;
  color: #fcd34d !important;
  border-color: rgba(120, 53, 15, 0.5) !important;
}

html[data-theme="dark"] .bg-rose-50:not(#id-card-print *),
html.dark .bg-rose-50:not(#id-card-print *) {
  background-color: rgba(136, 19, 55, 0.35) !important;
  color: #fda4af !important;
  border-color: rgba(136, 19, 55, 0.5) !important;
}

html[data-theme="dark"] .bg-purple-50:not(#id-card-print *),
html.dark .bg-purple-50:not(#id-card-print *) {
  background-color: rgba(88, 28, 135, 0.35) !important;
  color: #d8b4fe !important;
  border-color: rgba(88, 28, 135, 0.5) !important;
}

/* -------------------------------------------------------------------------
   Golden Glow Mode (✨) — Warm Spiritual Stone Palette
   ------------------------------------------------------------------------- */
html[data-theme="golden"] {
  color-scheme: dark;
}

html[data-theme="golden"] body,
html[data-theme="golden"] #root,
html[data-theme="golden"] main,
html[data-theme="golden"] .bg-slate-50:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .bg-slate-100\/80:not(#id-card-print *):not(.bk-idcard) {
  background-color: #1c1917 !important;
  color: #fef3c7 !important;
}

html[data-theme="golden"] .bg-white:not(#id-card-print *):not(.bk-idcard) {
  background-color: #292524 !important;
  color: #fef3c7 !important;
  border-color: #44403c !important;
}

html[data-theme="golden"] .bg-slate-100:not(#id-card-print *):not(.bk-idcard) {
  background-color: #332d29 !important;
  color: #fef3c7 !important;
  border-color: #57534e !important;
}

html[data-theme="golden"] .bg-slate-200:not(#id-card-print *):not(.bk-idcard) {
  background-color: #44403c !important;
  color: #fef3c7 !important;
  border-color: #78716c !important;
}

html[data-theme="golden"] .text-slate-900:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .text-slate-850:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .text-slate-800:not(#id-card-print *):not(.bk-idcard) {
  color: #fef3c7 !important;
}

html[data-theme="golden"] .text-slate-700:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .text-slate-600:not(#id-card-print *):not(.bk-idcard) {
  color: #e7e5e4 !important;
}

html[data-theme="golden"] .text-slate-500:not(#id-card-print *):not(.bk-idcard) {
  color: #d6d3d1 !important;
}

html[data-theme="golden"] .border-slate-200:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .border-slate-200\/80:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .border-slate-300:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .border-slate-100:not(#id-card-print *):not(.bk-idcard) {
  border-color: #44403c !important;
}

html[data-theme="golden"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]):not(#id-card-print *):not(.bk-idcard) {
  border-color: #44403c !important;
}

html[data-theme="golden"] input:not([type="checkbox"]):not([type="radio"]):not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] select:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] textarea:not(#id-card-print *):not(.bk-idcard) {
  background-color: #1c1917 !important;
  color: #fef3c7 !important;
  border-color: #57534e !important;
}

html[data-theme="golden"] select option {
  background-color: #292524 !important;
  color: #fef3c7 !important;
  color-scheme: dark !important;
}

html[data-theme="golden"] select optgroup {
  background-color: #332d29 !important;
  color: #fde68a !important;
  color-scheme: dark !important;
}

html[data-theme="golden"] table:not(#id-card-print *) thead,
html[data-theme="golden"] table:not(#id-card-print *) thead th {
  background-color: #292524 !important;
  color: #fde68a !important;
  border-color: #44403c !important;
}

html[data-theme="golden"] table:not(#id-card-print *) tbody tr:hover {
  background-color: rgba(68, 64, 60, 0.6) !important;
}

html[data-theme="golden"] table:not(#id-card-print *) td {
  border-color: #44403c !important;
}

html[data-theme="golden"] .bg-white.rounded-2xl:not(#id-card-print *):not(.bk-idcard),
html[data-theme="golden"] .bg-white.rounded-3xl:not(#id-card-print *):not(.bk-idcard) {
  background-color: #292524 !important;
  border-color: #57534e !important;
}

/* -------------------------------------------------------------------------
   Theme Transition Smoothing & Utilities
   ------------------------------------------------------------------------- */
body, #root, main, .bg-white, .bg-slate-50, .bg-slate-100, header, aside {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Custom Scrollbars in Dark & Golden Modes */
html[data-theme="dark"] ::-webkit-scrollbar,
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track {
  background: #0b0f19;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

html[data-theme="golden"] ::-webkit-scrollbar-track {
  background: #1c1917;
}
html[data-theme="golden"] ::-webkit-scrollbar-thumb {
  background: #44403c;
  border-radius: 4px;
}
html[data-theme="golden"] ::-webkit-scrollbar-thumb:hover {
  background: #78716c;
}

/* ID Card & Finance Print protection: preserves pure white background and authentic palette */
#id-card-print,
#id-card-print *,
.bk-idcard,
.bk-idcard *,
#print-root,
#print-root *,
.slip,
.slip *,
.vslip,
.vslip * {
  color-scheme: light !important;
}

html[data-theme="dark"] #print-root,
html[data-theme="dark"] #print-root *,
html.dark #print-root,
html.dark #print-root *,
html[data-theme="golden"] #print-root,
html[data-theme="golden"] #print-root *,
html[data-theme="dark"] .slip,
html[data-theme="dark"] .slip *,
html.dark .slip,
html.dark .slip *,
html[data-theme="golden"] .slip,
html[data-theme="golden"] .slip * {
  color-scheme: light !important;
}