/**
 * theme-styles.css - Light and Dark theme styling for Cosmo Travels & Tours
 * This CSS handles styling for light and dark themes
 */

/* Base Styling - Applied to Both Themes */
body {
    background-color: var(--dark-secondary);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar Styling */
.navbar-dark {
    background-color: var(--dark-color) !important;
}

.navbar-light {
    background-color: var(--light-secondary) !important;
}

/* Top Bar Styling */
.top-bar.bg-dark {
    background-color: var(--dark-color) !important;
}

.top-bar.bg-light {
    background-color: var(--light-secondary) !important;
}

/* Dropdown Menu Styling */
.dropdown-menu.bg-dark {
    background-color: var(--dark-color) !important;
    border-color: var(--dark-border);
}

.dropdown-menu.bg-light {
    background-color: var(--light-secondary) !important;
    border-color: var(--light-border);
}

/* Card Styling */
.card {
    background-color: var(--dark-secondary);
    border-color: var(--dark-border);
}

/* Form Controls */
.form-control {
    background-color: var(--dark-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.form-select {
    background-color: var(--dark-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

/* Dividers */
.dropdown-divider {
    border-top-color: var(--dark-border) !important;
}

hr {
    border-color: var(--dark-border);
}

/* Smooth transitions for all themed elements */
.navbar, .nav-link, .dropdown-menu, .dropdown-item, .top-bar,
.form-select, .form-control, .card, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}