/**
 * Dark Mode Override CSS
 * Targeted overrides for legacy Bootstrap and third-party CSS that conflicts
 * with Tailwind's dark mode. Only uses !important where necessary.
 *
 * NOTE: Most dark mode styling is handled by Tailwind's dark: prefix in templates.
 * This file only addresses edge cases where Bootstrap/legacy CSS takes precedence.
 */

/* =============================================================================
   CRITICAL BASE STYLES - Override Bootstrap's light-mode defaults
   ============================================================================= */

/* Override Bootstrap's body color and background */
html.dark body {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

/* Override Bootstrap's heading colors */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: #ffffff !important;
}

/* =============================================================================
   FORMS AND INPUTS - Override Bootstrap form-control styles
   ============================================================================= */

html.dark .form-control,
html.dark .form-select {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

html.dark .form-control::placeholder {
    color: #9ca3af !important;
}

html.dark .form-control:focus,
html.dark .form-select:focus {
    background-color: #374151 !important;
    border-color: #ffd700 !important;
    outline: none !important;
}

/* =============================================================================
   BOOTSTRAP CARDS AND MODALS - Override .card, .modal classes
   ============================================================================= */

html.dark .card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}

html.dark .modal-content {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark .modal-header {
    border-bottom-color: #374151 !important;
}

html.dark .modal-footer {
    border-top-color: #374151 !important;
}

/* =============================================================================
   BOOTSTRAP DROPDOWN AND MEGA MENU - Override .dropdown-menu
   ============================================================================= */

html.dark .dropdown-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .dropdown-menu a {
    color: #f3f4f6 !important;
}

html.dark .dropdown-menu a:hover {
    background-color: #374151 !important;
    color: #ffd700 !important;
}

/* =============================================================================
   BOOTSTRAP TABLES - Override table styles
   ============================================================================= */

html.dark table {
    color: #f3f4f6 !important;
}

html.dark table thead {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark table tbody tr {
    border-color: #374151 !important;
}

html.dark table tbody tr:hover {
    background-color: #374151 !important;
}

/* =============================================================================
   SCROLLBAR - Dark mode scrollbar
   ============================================================================= */

html.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #ffd700;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #e6c200;
}

/* =============================================================================
   FOCUS RING - Ensure consistent gold focus ring in dark mode
   ============================================================================= */

html.dark *:focus-visible {
    outline-color: #ffd700 !important;
}