/* 
 * This file is now simplified since we're using Bootstrap's built-in theming
 * via data-bs-theme attribute
 */

/* Any custom overrides that might still be needed */
[data-bs-theme=dark] .navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
}

[data-bs-theme=light] .navbar {
  --bs-navbar-color: rgba(0, 0, 0, 0.85);
  --bs-navbar-hover-color: #000;
  --bs-navbar-active-color: #000;
}

/* Fix any badges or components that need custom styling */
[data-bs-theme=dark] .badge.bg-light {
  color: #212529;
}

/* Custom navbar color to match HouseDuty logo green */
.bg-houseduty-green {
    background-color: #4CAF50 !important; /* Adjust this color to match exactly your logo green */
}

/* Text color for elements inside the green navbar */
.bg-houseduty-green .navbar-brand,
.bg-houseduty-green .nav-link {
    color: white !important;
}

/* Active link color in the navbar */
.bg-houseduty-green .nav-link.active,
.bg-houseduty-green .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Search Dropdown Styling */
.search-container {
    min-width: 250px;
}

.search-dropdown {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    color: var(--bs-body-color);
}

.search-dropdown .dropdown-item {
    border: none;
    transition: background-color 0.15s ease-in-out;
    color: var(--bs-body-color);
    text-decoration: none;
}

.search-dropdown .dropdown-item:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.search-dropdown .dropdown-item:focus {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

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

.search-dropdown .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Responsive search */
@media (max-width: 768px) {
    .search-container {
        min-width: 200px;
    }
}

@media (max-width: 576px) {
    .search-container {
        min-width: 150px;
    }
}