/* Control Colombia CSS - Dark & Light Mode Theming */

/* Light Mode (Default) */
[data-bs-theme="light"] {
    /* Base colors */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-heading-color: #212529;
    
    /* Link colors */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    
    /* Border colors */
    --bs-border-color: #dee2e6;
    
    /* Card colors */
    --bs-card-bg: #ffffff;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    
    /* Form controls */
    --bs-form-control-bg: #ffffff;
    
    /* Custom light mode variables */
    --custom-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --navbar-bg: #212529;
    --navbar-color: #fff;
    --navbar-link-color: rgba(255, 255, 255, 0.85);
    --navbar-link-hover-color: #fff;
    --navbar-link-active-color: #fff;
    --navbar-link-active-bg: rgba(255, 255, 255, 0.1);
    --btn-outline-themed-color: #fff;
    --btn-outline-themed-border: #fff;
    --btn-outline-themed-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Dark Mode */
[data-bs-theme="dark"] {
    /* Base colors */
    --bs-body-bg: #222;
    --bs-body-color: #e1e1e1;
    --bs-heading-color: #f8f9fa;
    
    /* Link colors */
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
    
    /* Border colors */
    --bs-border-color: #495057;
    
    /* Card colors */
    --bs-card-bg: #2d2d2d;
    --bs-card-cap-bg: rgba(255, 255, 255, 0.05);
    
    /* Form controls */
    --bs-form-control-bg: #2d2d2d;
    
    /* Custom dark mode variables */
    --custom-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
    --navbar-bg: #181818;
    --navbar-color: #e1e1e1;
    --navbar-link-color: rgba(225, 225, 225, 0.85);
    --navbar-link-hover-color: #fff;
    --navbar-link-active-color: #fff;
    --navbar-link-active-bg: rgba(255, 255, 255, 0.1);
    --btn-outline-themed-color: #e1e1e1;
    --btn-outline-themed-border: #e1e1e1;
    --btn-outline-themed-hover-bg: rgba(225, 225, 225, 0.1);
}

/* Apply custom variables to elements */
.navbar {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-color) !important;
}

/* Navbar styling for both light and dark modes */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-text {
    color: var(--navbar-color);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--navbar-link-color);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--navbar-link-hover-color);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--navbar-link-active-color);
    background-color: var(--navbar-link-active-bg);
    border-radius: 0.25rem;
}

/* Custom themed outline button */
.btn-outline-themed {
    color: var(--btn-outline-themed-color);
    border-color: var(--btn-outline-themed-border);
}

.btn-outline-themed:hover {
    background-color: var(--btn-outline-themed-hover-bg);
    color: var(--btn-outline-themed-color);
}

/* Dark mode switch styling */
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Card styling */
.card {
    box-shadow: var(--custom-shadow);
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

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

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

/* Additional accessibility for dark mode */
[data-bs-theme="dark"] .form-control {
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Custom styling for dark mode switch */
#darkModeSwitch:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.dark-mode-label {
    cursor: pointer;
}

/* Card header text and background in dark mode */
[data-bs-theme="dark"] .card-header.bg-dark {
    background-color: #181818 !important;
    color: #e1e1e1 !important;
}

/* Fix list items in dark mode */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Fix badges in dark mode */
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background-color: #495057 !important;
    color: #e1e1e1 !important;
}

[data-bs-theme="dark"] .badge.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Fix buttons in dark mode */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #e1e1e1;
    border-color: #e1e1e1;
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
    color: #212529;
    background-color: #e1e1e1;
}

/* Fix text color in any elements with hardcoded classes */
[data-bs-theme="dark"] .text-dark {
    color: #e1e1e1 !important;
}

/* Fix links in cards for dark mode */
[data-bs-theme="dark"] .card a:not(.btn),
[data-bs-theme="dark"] .list-group-item a {
    color: var(--bs-link-color);
}

[data-bs-theme="dark"] .card a:not(.btn):hover,
[data-bs-theme="dark"] .list-group-item a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* Form controls inside cards */
[data-bs-theme="dark"] .card .form-control {
    background-color: #333;
    border-color: #555;
    color: var(--bs-body-color);
}