/* Light mode variables (default) */
:root {
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-color: #dee2e6;
    --bs-navbar-color: rgba(0, 0, 0, 0.65);
    --bs-navbar-hover-color: rgba(0, 0, 0, 0.8);
    --bs-navbar-active-color: rgba(0, 0, 0, 1);
    --bs-card-bg: #fff;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-link-color: #212529;
    --bs-dropdown-link-hover-bg: #f8f9fa;
    --bs-white: #fff;
    --bs-light: #f8f9fa;
    --bs-text-white: #fff;
    --bs-text-dark: #212529;
}

/* Dark mode variables */
[data-bs-theme="dark"] {
    --bs-body-color: #e4e6eb;
    --bs-body-bg: #1a1a1a;
    --bs-border-color: #000000;
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.9);
    --bs-navbar-active-color: #ffffff;
    --bs-card-bg: #000000;
    --bs-dropdown-bg: #000000;
    --bs-dropdown-link-color: #e4e6eb;
    --bs-dropdown-link-hover-bg: #262626;
    --bs-white: #000000;
    --bs-light: #000000;
    --bs-text-white: #e4e6eb;
    --bs-text-dark: #fff;
}

/* Apply theme colors */
body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Override Bootstrap utility classes */
.bg-white {
    background-color: var(--bs-white) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.text-white {
    color: var(--bs-text-white) !important;
}

.text-dark {
    color: var(--bs-text-dark) !important;
}

/* Navbar specific styles */
.navbar {
    background-color: var(--bs-navbar-bg);
}

.dropdown-menu {
    background-color: var(--bs-dropdown-bg);
    border-color: var(--bs-border-color);
}

.dropdown-item {
    color: var(--bs-dropdown-link-color);
}

.dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg);
}

.card {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

/* Additional dark mode specific overrides */
[data-bs-theme="dark"] .bg-white {
    color: var(--bs-text-white);
}

[data-bs-theme="dark"] .text-white {
    color: var(--bs-text-white) !important;
}

/* Handle images in dark mode */
[data-bs-theme="dark"] img {
    filter: brightness(.9) contrast(1.1);
}

/* Handle form controls */
[data-bs-theme="dark"] .form-control {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--bs-white);
    color: var(--bs-body-color);
}

/* Handle buttons */
[data-bs-theme="dark"] .btn-light {
    background-color: var(--bs-light);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Handle navigation */
[data-bs-theme="dark"] .nav-link {
    color: var(--bs-navbar-color);
}

[data-bs-theme="dark"] .nav-link:hover {
    color: var(--bs-navbar-hover-color);
}

/* Handle tables */
[data-bs-theme="dark"] .table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Handle modal dialogs */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
}

/* Handle alerts */
[data-bs-theme="dark"] .alert {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Add subtle transitions */
body,
.bg-white,
.bg-light,
.card,
.dropdown-menu,
.modal-content,
.form-control {
    transition: background-color 0.3s ease, color 0.3s ease;
}