/* Dark Mode Color Palette */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --input-bg: #ffffff;
    --border-color: #dddddd;
    --sidebar-bg: #f8f9fa;
    --nav-link-color: #333333;
    --hero-overlay: rgba(0, 0, 0, 0.4);
    --secondary-text: #666666;
    --footer-bg: #0B111D;
    /* Footer is already dark, keep it consistent */
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --header-bg: #1e1e1e;
    --card-bg: #1e1e1e;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --input-bg: #2d2d2d;
    --border-color: #333333;
    --sidebar-bg: #1a1a1a;
    --nav-link-color: #e0e0e0;
    --hero-overlay: rgba(0, 0, 0, 0.7);
    --secondary-text: #b0b0b0;
}

/* Base Elements */
body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Header & Nav */
body.dark-mode .main-header {
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

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

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    color: #4A90E2;
}

/* Search & Utility */
body.dark-mode .search-card,
body.dark-mode .filters-card,
body.dark-mode .car-card,
body.dark-mode .booking-card,
body.dark-mode .sidebar-card,
body.dark-mode .contact-card,
body.dark-mode .login-box,
body.dark-mode .signup-box,
body.dark-mode .dashboard-header {
    background-color: var(--card-bg) !important;
    box-shadow: var(--card-shadow);
    color: var(--text-color);
}

body.dark-mode .car-info,
body.dark-mode .car-footer {
    border-top-color: var(--border-color);
}

body.dark-mode .car-details,
body.dark-mode .welcome-subtitle,
body.dark-mode .section-subtitle,
body.dark-mode .catalog-count,
body.dark-mode .footer-text,
body.dark-mode .filter-label,
body.dark-mode .detail-label {
    color: var(--secondary-text);
}

/* Inputs & Forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text,
body.dark-mode .newsletter-input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: #4A90E2;
}

/* Tables & Lists */
body.dark-mode .booking-table,
body.dark-mode .table {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .table th {
    background: #252525;
    color: #fff;
    border-bottom: 2px solid var(--border-color);
}

body.dark-mode .table td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-mode .booking-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dashboard Specifics */
body.dark-mode .sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
}

body.dark-mode .right-sidebar {
    border-left: 1px solid var(--border-color);
}

body.dark-mode .summary-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body.dark-mode .card-label {
    color: var(--secondary-text);
}

body.dark-mode .card-value {
    color: var(--text-color);
}

/* Modal Fixes */
body.dark-mode .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .modal-header {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .modal-footer {
    border-top: 1px solid var(--border-color);
}

body.dark-mode .btn-close {
    filter: invert(1);
}

/* Premium Mode Toggle Switch Styles */
.theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 65px;
    height: 32px;
    border-radius: 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin: 0 15px;
}

.theme-toggle i {
    font-size: 14px;
    z-index: 1;
    transition: all 0.4s ease;
}

.theme-toggle .fa-moon {
    color: #666;
}

.theme-toggle .fa-sun {
    color: #f1c40f;
}

/* The sliding circle */
.theme-toggle::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background: #4A90E2;
    border-radius: 50%;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Dark Mode State for Toggle */
body.dark-mode .theme-toggle {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .theme-toggle::after {
    left: 34px;
    background: #FF0000;
    /* Use brand red or amber? Let's use red for horizone */
}

body.dark-mode .theme-toggle .fa-moon {
    color: #ffffff;
}

body.dark-mode .theme-toggle .fa-sun {
    color: rgba(255, 255, 255, 0.3);
}

.theme-toggle:hover {
    transform: scale(1.05);
}

/* Alert compatibility */
body.dark-mode .custom-alert-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
}

/* Car Details Specifics */
body.dark-mode .car-details-card,
body.dark-mode .booking-form-card {
    background-color: var(--card-bg);
    color: var(--text-color);
}

body.dark-mode .spec-item {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .spec-label {
    color: var(--secondary-text);
}

/* Contact Page Specifics */
body.dark-mode .contact-info-card {
    background-color: var(--card-bg);
}

body.dark-mode .info-text h4 {
    color: var(--text-color);
}

/* Footer Compatibility */
body.dark-mode .main-footer {
    background: #05080c;
    /* Slightly darker than default in dark mode */
}