:root {
  --color-brand-500: #264c8a;
  --color-brand-600: #264c8add;
  --color-gray-900: #111827;
  --sidebar-bg: #e9f2fb;
  --sidebar-text: #264c8a;
  --sidebar-active-bg: #e7ff2e;
  --sidebar-active-text: #264c8a;
  --header-bg: #ffffff;
  --header-text: #111827;
  --main-bg: #ffffff;
  --card-bg: #ffffff;
  --card-text: #111827;
}


.contrast-auto { color-scheme: light dark; }

body:not(.dark) {
  background-color: var(--main-bg) !important;
  color: var(--color-gray-900) !important;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

header, header.bg-white, header.dark\:bg-gray-900 {
  background-color: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

main .bg-white,
main .bg-gray-50\/50,
main .dark\:bg-gray-900,
.rounded-2xl.bg-white,
.rounded-xl.bg-white,
.shadow-theme-xs.bg-white {
  background-color: var(--card-bg) !important;
  color: var(--card-text);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

.sidebar {
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item {
  color: var(--sidebar-text) !important;
  border-radius: 0.5rem;
  margin: 0 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.menu-item svg {
  color: var(--sidebar-text); opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.menu-item-active {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600;
}
.menu-item-active svg { color: var(--sidebar-active-text) !important; opacity: 1 !important; }
.menu-item:hover {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
}
.menu-item:hover svg { color: var(--sidebar-active-text) !important; opacity: 1 !important; }
.menu-group-title {
  color: var(--sidebar-text) !important;
  opacity: 0.75;
  font-weight: 700;
  letter-spacing: 0.025em;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

.sidebar-submenu a { color: var(--sidebar-text) !important; opacity: 0.7; }
.sidebar-submenu a:hover { color: var(--sidebar-active-text) !important; opacity: 1; }
.sidebar-submenu
a.flex.items-center.gap-2.py-2.text-sm.transition-colors.text-brand-500.font-bold {
  color: var(--sidebar-active-text) !important; opacity: 1;
}

.dark {
  --main-bg: #0d1a12;
  --card-bg: #12261b;
  --header-bg: #12261b;
  --sidebar-bg: #0d1a12;
  --sidebar-active-bg: #1a2e23;
  --card-text: #f8fafc;
  --header-text: #f8fafc;
  --sidebar-text: #cbd5e1;
  --sidebar-active-text: #2bee79;
}

.dark body {
  background-color: #0d1a12 !important;
  color: #f8fafc !important;
}

.dark .text-black,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #f8fafc !important;
}

.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-gray-400 {
  color: #94a3b8 !important;
}

.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-slate-50 {
  background-color: #12261b !important;
  color: #f8fafc !important;
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-white:hover,
.dark table tr:hover,
.dark tbody tr:hover {
  background-color: #1a2e23 !important;
  color: #f8fafc !important;
}

.dark border,
.dark .border,
.dark .border-gray-200,
.dark .border-gray-100 {
  border-color: #1a2e23 !important;
}

.dark input:not([type="submit"]):not([type="button"]),
.dark select,
.dark textarea {
  background-color: #1a2e23 !important;
  border-color: #28392f !important;
  color: #f8fafc !important;
}

.dark input::placeholder {
  color: #64748b !important;
}

:root {
  --color-brand-50: color-mix(in srgb, var(--color-brand-500) 8%, white);
  --color-brand-100: color-mix(in srgb, var(--color-brand-500) 15%, white);
  --color-brand-300: color-mix(in srgb, var(--color-brand-500) 40%, white);
  --color-brand-700: color-mix(in srgb, var(--color-brand-500) 70%, black);
  --color-brand-800: color-mix(in srgb, var(--color-brand-500) 80%, black);
}

.bg-brand-50 { background-color: var(--color-brand-50) !important; }
.text-brand-700 { color: var(--color-brand-700) !important; }
.text-brand-800 { color: var(--color-brand-800) !important; }
.ring-brand-500\/20 {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-500) 20%, transparent) !important;
}

.bg-error-100 {
  background-color: color-mix(in srgb, var(--color-error-500) 15%, white) !important;
}
.text-error-700 { color: var(--color-error-700) !important; }
.ring-error-600\/20 {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-error-500) 20%, transparent) !important;
}

.ring-gray-600\/20 {
  box-shadow: inset 0 0 0 1px rgba(156, 163, 175, 0.2) !important;
}

.dark .dark\:bg-brand-500\/20 {
  background-color: color-mix(in srgb, var(--color-brand-500) 20%, transparent) !important;
}
.dark .dark\:text-brand-300 {
  color: color-mix(in srgb, var(--color-brand-500) 45%, white) !important;
}
.dark .dark\:bg-brand-900\/30 {
  background-color: color-mix(in srgb, var(--color-brand-500) 30%, transparent) !important;
}
.dark .dark\:text-brand-400 {
  color: color-mix(in srgb, var(--color-brand-500) 55%, white) !important;
}
.dark .dark\:bg-error-500\/20 {
  background-color: color-mix(in srgb, var(--color-error-500) 20%, transparent) !important;
}
.dark .dark\:text-error-400 {
  color: color-mix(in srgb, var(--color-error-500) 55%, white) !important;
}
.dark .dark\:bg-gray-500\/20 {
  background-color: rgba(156, 163, 175, 0.2) !important;
}
.dark .dark\:text-gray-400 { color: #94a3b8 !important; }

.app-layout {
  overflow: clip;
  height: 100vh;
}

[x-cloak] { display: none !important; }

.sidebar-collapsed-init .sidebar { width: 90px !important; }
.sidebar-collapsed-init .sidebar .logo,
.sidebar-collapsed-init .sidebar .menu-group-title,
.sidebar-collapsed-init .sidebar .menu-item-text { display: none !important; }
.sidebar-collapsed-init .sidebar .logo-icon { display: block !important; }

.htmx-request { transition: opacity 0.2s ease-in-out; }
.htmx-swapping { opacity: 0; }
.htmx-settling { opacity: 0; transition: opacity 0.2s ease-in-out; }

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; pointer-events: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

main { contain: layout style; }

/* Auth-specific theme overrides */
.auth-card {
  background-color: var(--card-bg) !important;
}

.bg-brand-500 { background-color: var(--color-brand-500) !important; }
.hover\:bg-brand-600:hover { background-color: var(--color-brand-600) !important; }
.text-brand-500 { color: var(--color-brand-500) !important; }
.text-brand-600 { color: var(--color-brand-500) !important; }
.focus\:ring-brand-500:focus { --tw-ring-color: var(--color-brand-500) !important; }

/* Alert colors missing from Tailwind bundle */
.bg-red-50 { background-color: #fef2f2 !important; }
.text-red-800 { color: #991b1b !important; }
.border-red-100 { border-color: #fee2e2 !important; }
.dark .dark\:text-red-400 { color: #f87171 !important; }
.dark .dark\:text-red-500 { color: #ef4444 !important; }
.dark .dark\:border-red-900 { border-color: #450a0a !important; }

.bg-blue-50 { background-color: #eff6ff !important; }
.text-blue-800 { color: #1e40af !important; }
.border-blue-100 { border-color: #dbeafe !important; }
.dark .dark\:text-blue-400 { color: #60a5fa !important; }
.dark .dark\:border-blue-900 { border-color: #1e3a8a !important; }

.text-red-600 { color: #dc2626 !important; }

.bg-rose-50 { background-color: #fff1f2 !important; }
.text-rose-800 { color: #9f1239 !important; }
.border-rose-100 { border-color: #ffe4e6 !important; }
.dark .dark\:border-rose-900 { border-color: #4c0519 !important; }

.bg-amber-50 { background-color: #fffbeb !important; }
.text-amber-800 { color: #92400e !important; }
.border-amber-100 { border-color: #fef3c7 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.dark .dark\:border-amber-900 { border-color: #451a03 !important; }

.bg-emerald-50 { background-color: #ecfdf5 !important; }
.text-emerald-600 { color: #059669 !important; }
.border-emerald-100 { border-color: #d1fae5 !important; }
.dark .dark\:text-emerald-400 { color: #34d399 !important; }
.dark .dark\:border-emerald-900 { border-color: #064e3b !important; }