/* Light Theme */
:root,
[data-bs-theme=light] {
    /* Navbar Dimensions */
    --navbar-height: 80px;
    --navbar-padding: 0 2rem;

    /* Bootstrap Variables */
    --bs-blue: var(--theme-bs-blue);
    --bs-indigo: var(--theme-bs-indigo);
    --bs-purple: var(--theme-bs-purple);
    --bs-pink: var(--theme-bs-pink);
    --bs-red: var(--theme-bs-red);
    --bs-orange: var(--theme-bs-orange);
    --bs-yellow: var(--theme-bs-yellow);
    --bs-green: var(--theme-bs-green);
    --bs-teal: var(--theme-bs-teal);
    --bs-cyan: var(--theme-bs-cyan);
    --bs-black: var(--theme-bs-black);
    --bs-white: var(--theme-bs-white);
    --bs-gray: var(--theme-bs-gray);
    --bs-gray-dark: var(--theme-bs-gray-dark);
    --bs-gray-100: var(--theme-bs-gray-100);
    --bs-gray-200: var(--theme-bs-gray-200);
    --bs-gray-300: var(--theme-bs-gray-300);
    --bs-gray-400: var(--theme-bs-gray-400);
    --bs-gray-500: var(--theme-bs-gray-500);
    --bs-gray-600: var(--theme-bs-gray-600);
    --bs-gray-700: var(--theme-bs-gray-700);
    --bs-gray-800: var(--theme-bs-gray-800);
    --bs-gray-900: var(--theme-bs-gray-900);
    --bs-primary: var(--theme-bs-primary);
    --bs-secondary: var(--theme-bs-secondary);
    --bs-success: var(--theme-bs-success);
    --bs-info: var(--theme-bs-info);
    --bs-warning: var(--theme-bs-warning);
    --bs-danger: var(--theme-bs-danger);
    --bs-light: var(--theme-bs-light);
    --bs-dark: var(--theme-bs-dark);

    /* Theme Colors */
    --theme-primary: var(--theme-primary-color);
    --theme-secondary: var(--theme-secondary-color);
    --theme-success: var(--theme-success-color);
    --theme-background: var(--theme-background-color);
    
    /* Card */
    --theme-card-bg: var(--theme-card-background);
    --theme-card-border: var(--theme-card-border-color);
    --theme-card-shadow: var(--theme-card-shadow-color);
    --theme-card-hover: var(--theme-card-hover-color);
    
    /* Text */
    --theme-text-primary: var(--theme-text-primary-color);
    --theme-text-secondary: var(--theme-text-secondary-color);
    --theme-text-light: var(--theme-text-light-color);
    
    /* Button */
    --theme-btn-primary-bg: var(--theme-btn-primary-background);
    --theme-btn-primary-text: var(--theme-btn-primary-text-color);
    --theme-btn-primary-border: var(--theme-btn-primary-border-color);
    --theme-btn-primary-hover-bg: var(--theme-btn-primary-hover-background);
    --theme-btn-primary-hover-border: var(--theme-btn-primary-hover-border);
    
    --theme-btn-outline-bg: var(--theme-btn-outline-background);
    --theme-btn-outline-text: var(--theme-btn-outline-text-color);
    --theme-btn-outline-border: var(--theme-btn-outline-border-color);
    --theme-btn-outline-hover-bg: var(--theme-btn-outline-hover-background);
    --theme-btn-outline-hover-text: var(--theme-btn-outline-hover-text);
    
    /* Carousel */
    --theme-carousel-control-bg: var(--theme-carousel-control-background);
    --theme-carousel-control-icon: var(--theme-carousel-control-icon-color);
    
    /* Badge */
    --theme-badge-bg: var(--theme-badge-background);
    --theme-badge-text: var(--theme-badge-text-color);
    
    /* Spacing */
    --theme-card-padding: var(--theme-card-padding-size);
    --theme-card-margin: var(--theme-card-margin-size);
    --theme-section-padding: var(--theme-section-padding-size);
    
    /* Border */
    --theme-border-radius: var(--theme-border-radius-size);
    --theme-border-width: var(--theme-border-width-size);
    
    /* Transition */
    --theme-transition-duration: var(--theme-transition-duration-time);
}

/* Dark Theme */
[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
}

/* Navbar Styling */
.navbar.custom-navbar {
    background-color: var(--theme-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    height: var(--navbar-height);
    padding: var(--navbar-padding);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all var(--theme-transition-duration);
}

.navbar.custom-navbar .container-fluid {
    max-width: 100%;
    padding: 0;
}

.navbar.custom-navbar .nav-link,
.navbar.custom-navbar .navbar-toggler-icon {
    color: var(--theme-text-light);
    font-weight: 500;
    padding: 0.75rem 1rem;
}

.navbar.custom-navbar .nav-link:hover,
.navbar.custom-navbar .nav-link:focus {
    color: var(--theme-secondary);
    transform: translateY(-1px);
}

/* Add padding to body to account for fixed navbar */
body {
    padding-top: var(--navbar-height);
}

/* Content wrapper to push footer to the bottom */
.content-wrapper {
    
    display: flex;
    flex-direction: column;
}



/* Navbar brand styling */
.navbar.custom-navbar .navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--theme-text-light);
    text-decoration: none;
}

.navbar.custom-navbar .navbar-brand:hover {
    color: var(--theme-secondary);
}

/* Mobile navbar adjustments */
@media (max-width: 991.98px) {
    .navbar.custom-navbar {
        height: auto;
        min-height: var(--navbar-height);
    }
    
    body {
        padding-top: calc(var(--navbar-height) + 20px);
    }
    
    .navbar.custom-navbar .navbar-collapse {
        background-color: var(--theme-primary);
        margin-top: 1rem;
        border-radius: var(--theme-border-radius);
        padding: 1rem;
    }

    .navbar.custom-navbar .navbar-toggler {
        border-color: var(--theme-text-light);
        padding: 0.25rem 0.5rem;
    }

    .navbar.custom-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar.custom-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    }
}

/* Search styling */
.sb-search-wrapper {
    position: relative;
}

.sb-search-wrapper.fixed-search {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    padding: 1rem;
    background: var(--theme-card-bg);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    display: none;
    z-index: 1000;
}

.sb-search-wrapper.fixed-search.active {
    display: block;
}

.sb-search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    transition: all var(--theme-transition-duration);
}

.sb-search-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
}

.btn-primary {
    background-color: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-text);
    border-color: var(--theme-btn-primary-border);
    transition: all var(--theme-transition-duration);
}

.btn-primary:hover {
    background-color: var(--theme-btn-primary-hover-bg);
    border-color: var(--theme-btn-primary-hover-border);
}

.btn-outline-primary {
    background-color: var(--theme-btn-outline-bg);
    color: var(--theme-btn-outline-text);
    border-color: var(--theme-btn-outline-border);
    transition: all var(--theme-transition-duration);
}

.btn-outline-primary:hover {
    background-color: var(--theme-btn-outline-hover-bg);
    color: var(--theme-btn-outline-hover-text);
}

.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    box-shadow: 0 2px 4px var(--theme-card-shadow);
    padding: var(--theme-card-padding);
    margin: var(--theme-card-margin);
    border-radius: var(--theme-border-radius);
    transition: all var(--theme-transition-duration);
}

.card:hover {
    box-shadow: 0 4px 8px var(--theme-card-hover);
}

.badge {
    background-color: var(--theme-badge-bg);
    color: var(--theme-badge-text);
}

section {
    padding: var(--theme-section-padding);
}