/* Dark Mode Styles */
:root {
    --primary-color: #0275d8;
    --primary-dark: #025aa5;
    --secondary-color: #6c757d;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
}

body.dark-mode {
    background-color: #1a1a2e;
    color: #e6e6e6;
}

.dark-mode .navbar {
    background-color: #16213e !important;
}

.dark-mode .sidebar {
    background-color: #16213e;
    color: #e6e6e6;
}

.dark-mode .sidebar .nav-link {
    color: #e6e6e6;
}

.dark-mode .sidebar .nav-link:hover {
    background-color: #0f3460;
}

.dark-mode .card {
    background-color: #16213e;
    border-color: #0f3460;
}

.dark-mode .jumbotron {
    background-color: #0f3460 !important;
    color: #e6e6e6;
}

.dark-mode .btn-primary {
    background-color: #0f4c81;
    border-color: #0f4c81;
}

.dark-mode .btn-primary:hover {
    background-color: #0d3d66;
    border-color: #0d3d66;
}

.dark-mode .table {
    color: #e6e6e6;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .form-control {
    background-color: #2c3e50;
    border-color: #34495e;
    color: #e6e6e6;
}

.dark-mode .form-control:focus {
    background-color: #34495e;
    color: #ffffff;
}

.dark-mode .modal-content {
    background-color: #16213e;
    color: #e6e6e6;
}

.dark-mode .description-box {
    background: rgba(22, 33, 62, 0.9);
}

.dark-mode .location-icon i {
    background: #16213e;
    color: #e6e6e6;
}

.dark-mode .location-tooltip {
    background: #16213e;
    color: #e6e6e6;
}

.dark-mode footer {
    background-color: #16213e;
    color: #e6e6e6;
}

/* Dark mode toggle switch */
.dark-mode-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.dark-mode-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dark-mode-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.dark-mode-toggle .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.dark-mode-toggle input:checked + .slider {
    background-color: #0275d8;
}

.dark-mode-toggle input:checked + .slider:before {
    transform: translateX(26px);
}

.dark-mode-toggle .slider:before {
    content: "☀️";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dark-mode-toggle input:checked + .slider:before {
    content: "🌙";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}