/* Dark mode override to use class strategy instead of media queries */

/* Override Tailwind's media-based dark mode with class-based dark mode */
.dark .dark\:bg-gray-900 {
    background-color: rgb(17 24 39);
}

.dark .dark\:bg-gray-800 {
 background-color: rgb(31 41 55);
}

.dark .dark\:bg-gray-700 {
    background-color: rgb(55 65 81);
}

.dark .dark\:bg-gray-600 {
    background-color: rgb(75 85 99);
}

.dark .dark\:text-white {
    color: rgb(255 255 255);
}

.dark .dark\:text-gray-300 {
    color: rgb(209 213 219);
}

.dark .dark\:text-gray-200 {
 color: rgb(229 231 235);
}

.dark .dark\:text-gray-100 {
    color: rgb(243 244 246);
}

.dark .dark\:border-gray-700 {
    border-color: rgb(55 65 81);
}

.dark .dark\:border-gray-600 {
    border-color: rgb(75 85 99);
}

.dark .dark\:hover\:bg-gray-700:hover {
    background-color: rgb(55 65 81);
}

.dark .dark\:hover\:bg-gray-800:hover {
    background-color: rgb(31 41 55);
}

.dark .dark\:hover\:bg-gray-600:hover {
    background-color: rgb(75 85 99);
}

.dark .dark\:hover\:bg-gray-500:hover {
    background-color: rgb(107 114 128);
}

/* Additional dark mode utilities */
.dark .dark\:bg-blue-900 {
    background-color: rgb(30 58 138);
}

.dark .dark\:text-blue-200 {
  color: rgb(191 219 254);
}

.dark .dark\:border-blue-700 {
    border-color: rgb(29 78 216);
}

.dark .dark\:bg-red-900 {
    background-color: rgb(127 29 29);
}

.dark .dark\:text-red-200 {
    color: rgb(254 202 202);
}

.dark .dark\:bg-green-900 {
    background-color: rgb(20 83 45);
}

.dark .dark\:text-green-200 {
    color: rgb(187 247 208);
}

.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(55 65 81);
}

.dark .dark\:text-gray-400 {
  color: rgb(156 163 175);
}