/* Dark theme companion — loaded after Tailwind. Uses html.dark (class strategy). */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: rgb(2 6 23) !important;
  color: rgb(248 250 252) !important;
}

html.dark .text-slate-900 {
  color: rgb(248 250 252) !important;
}
html.dark .text-slate-800 {
  color: rgb(226 232 240) !important;
}
html.dark .text-slate-700 {
  color: rgb(203 213 225) !important;
}
html.dark .text-slate-600 {
  color: rgb(148 163 184) !important;
}
html.dark .text-slate-500 {
  color: rgb(148 163 184) !important;
}
html.dark .text-slate-400 {
  color: rgb(100 116 139) !important;
}

html.dark .bg-white {
  background-color: rgb(30 41 59) !important;
}
html.dark .bg-slate-50 {
  background-color: rgb(15 23 42) !important;
}
html.dark .bg-slate-100 {
  background-color: rgb(30 41 59) !important;
}

html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/50 {
  background-color: rgb(30 41 59 / 0.75) !important;
}
html.dark .bg-slate-100\/80 {
  background-color: rgb(30 41 59 / 0.85) !important;
}
html.dark .bg-white\/90,
html.dark .bg-white\/80 {
  background-color: rgb(30 41 59 / 0.92) !important;
}
html.dark .bg-white\/95 {
  background-color: rgb(30 41 59 / 0.95) !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-slate-200\/80 {
  border-color: rgb(51 65 85) !important;
}
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85) !important;
}
html.dark .divide-violet-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(67 56 202 / 0.25) !important;
}

html.dark #sidebar {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(51 65 85) !important;
}

html.dark header.fixed {
  border-color: rgb(51 65 85) !important;
  background-color: rgb(30 41 59 / 0.95) !important;
}

html.dark .hover\:bg-slate-50:hover {
  background-color: rgb(51 65 85 / 0.45) !important;
}
html.dark .hover\:bg-slate-100:hover {
  background-color: rgb(51 65 85) !important;
}

html.dark .bg-brand-50 {
  background-color: rgba(79, 70, 229, 0.22) !important;
}
html.dark .bg-brand-100 {
  background-color: rgba(79, 70, 229, 0.28) !important;
}

html.dark thead.bg-slate-50\/80,
html.dark .bg-slate-50\/80 {
  background-color: rgb(30 41 59 / 0.9) !important;
}

html.dark input,
html.dark textarea {
  background-color: rgb(30 41 59) !important;
  border-color: rgb(51 65 85) !important;
  color: rgb(226 232 240) !important;
}

html.dark .border-violet-200,
html.dark .border-violet-200\/80,
html.dark .ring-violet-200 {
  border-color: rgb(76 29 149 / 0.45) !important;
  --tw-ring-color: rgb(76 29 149 / 0.35);
}

/* OmniDash AI gradient panel (index) — single compound selector */
html.dark .bg-gradient-to-br.from-violet-50\/90.via-white.to-indigo-50\/60 {
  background-image: linear-gradient(
    to bottom right,
    rgb(76 29 149 / 0.22),
    rgb(30 41 59),
    rgb(49 46 129 / 0.18)
  ) !important;
}

html.dark .border-orange-100,
html.dark .border-orange-200 {
  border-color: rgb(124 45 18 / 0.5) !important;
}
html.dark .bg-\[\#FDFBF7\] {
  background-color: rgb(30 27 24) !important;
}
html.dark .bg-\[\#131921\] {
  background-color: rgb(15 23 42) !important;
}

html.dark #ai-chat-panel {
  background-color: rgb(30 41 59) !important;
  border-color: rgb(51 65 85) !important;
}
html.dark #ai-chat-panel .border-slate-200 {
  border-color: rgb(51 65 85) !important;
}
html.dark #ai-chat-panel .bg-slate-50\/80 {
  background-color: rgb(15 23 42 / 0.85) !important;
}
html.dark #ai-chat-panel .bg-white {
  background-color: rgb(30 41 59) !important;
}

html.dark .text-\[\#0f1111\] {
  color: rgb(241 245 249) !important;
}
html.dark .text-\[\#565959\] {
  color: rgb(148 163 184) !important;
}