/* Dark Mode Override CSS
 * This file provides dark mode styles using html.dark selector
 * because Tailwind's :is(.dark *) format doesn't work in all browsers
 */

/* ===== Base Elements ===== */
html.dark body {
    background-color: #171717 !important;
    background-image: linear-gradient(to bottom right, #171717, #1e3a5f, #1a1a2e) !important;
    color: #f5f5f5 !important;
}

html.dark {
    color-scheme: dark;
}

/* ===== Background Colors ===== */
html.dark .bg-white {
    background-color: #262626 !important;
}

html.dark .bg-neutral-50,
html.dark .bg-gray-50 {
    background-color: #1f1f1f !important;
}

html.dark .bg-neutral-100,
html.dark .bg-gray-100 {
    background-color: #262626 !important;
}

html.dark .bg-neutral-200,
html.dark .bg-gray-200 {
    background-color: #333333 !important;
}

/* ===== Text Colors ===== */
html.dark .text-neutral-900,
html.dark .text-gray-900 {
    color: #f5f5f5 !important;
}

html.dark .text-neutral-800,
html.dark .text-gray-800 {
    color: #e5e5e5 !important;
}

html.dark .text-neutral-700,
html.dark .text-gray-700 {
    color: #d4d4d4 !important;
}

html.dark .text-neutral-600,
html.dark .text-gray-600 {
    color: #a3a3a3 !important;
}

html.dark .text-neutral-500,
html.dark .text-gray-500 {
    color: #737373 !important;
}

/* ===== Border Colors ===== */
html.dark .border-neutral-200,
html.dark .border-gray-200 {
    border-color: #404040 !important;
}

html.dark .border-neutral-300,
html.dark .border-gray-300 {
    border-color: #525252 !important;
}

/* ===== Cards and Containers ===== */
html.dark .card,
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-white\/95 {
    background-color: rgba(38, 38, 38, 0.9) !important;
}

/* ===== Sidebar ===== */
html.dark #sidebar {
    background-color: rgba(23, 23, 23, 0.95) !important;
    border-color: #404040 !important;
}

html.dark #sidebar .border-neutral-200,
html.dark #sidebar .border-neutral-200\/50 {
    border-color: #404040 !important;
}

/* ===== Forms ===== */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #262626 !important;
    border-color: #404040 !important;
    color: #f5f5f5 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #737373 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #3b82f6 !important;
}

/* ===== Tables ===== */
html.dark table {
    background-color: #262626 !important;
}

html.dark th {
    background-color: #1f1f1f !important;
    color: #e5e5e5 !important;
}

html.dark td {
    border-color: #404040 !important;
}

html.dark tr:hover {
    background-color: #333333 !important;
}

/* ===== Dropdowns and Modals ===== */
html.dark .dropdown-menu,
html.dark [role="menu"] {
    background-color: #262626 !important;
    border-color: #404040 !important;
}

html.dark .modal-content {
    background-color: #262626 !important;
}

/* ===== Scrollbar ===== */
html.dark ::-webkit-scrollbar-track {
    background-color: #262626 !important;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #525252 !important;
}

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

/* ===== Dividers ===== */
html.dark .divide-neutral-200 > * + *,
html.dark .divide-gray-200 > * + * {
    border-color: #404040 !important;
}

/* ===== Stats Cards ===== */
html.dark .bg-gradient-to-br.from-neutral-50,
html.dark .bg-gradient-to-r.from-neutral-50 {
    background-image: linear-gradient(to bottom right, #262626, #1f1f1f) !important;
}

/* ===== Shadows for dark mode ===== */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}