app/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply bg-white text-gray-900;
}

/* Custom background color override */
html.dark,
html.dark body,
.dark {
  background-color: #0b0f19 !important;
  color: #f9fafb;
}

/* Override any gray backgrounds in dark mode */
.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .bg-gray-900,
.dark .bg-gray-950 {
  background-color: #0b0f19 !important;
}

/* Adjust slightly lighter backgrounds for cards/panels */
.dark .bg-gray-800,
.dark .bg-white {
  background-color: #0b0f19 !important;
}

/* Adjust border colors to complement the new background */
.dark .border-gray-700,
.dark .border-gray-600 {
  border-color: #2a3441 !important;
}

/* Adjust divide colors */
.dark .divide-gray-700 > * {
  border-color: #2a3441 !important;
}

/* Custom scrollbar for dark mode */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

.dark ::-webkit-scrollbar-track {
  background-color: #151b26 !important;
}

::-webkit-scrollbar-thumb {
  @apply rounded-full bg-gray-300;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #3a4553 !important;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #4a5563 !important;
}