:root {
    --bs-primary: #44693d;
    --bs-primary-rgb: 68, 105, 61;
    --bs-secondary: #6c757d;
    --bs-success: #5f8f52;
    --bs-info: #5a7b9a;
    --bs-warning: #d4a017;
    --bs-danger: #b14b4b;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    --bs-btn-hover-bg: #f0f0f0;
}

/* Optional: override specific elements to use the new primary */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #375731; /* Slightly darker for hover */
    border-color: #375731;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-primary);
}

.nav-link {
    color: var(--bs-primary);
}

.nav-link:hover,
.nav-link:focus {
    color: #375731;
}

a {
    color: var(--bs-primary);
}

a:hover {
    color: #375731;
    text-decoration: underline;
}

/* Optional: form controls focus ring */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
}

/* Optional: adjust navbar brand or header colors */
.navbar-light .navbar-brand,
.navbar-light .nav-link {
    color: var(--bs-primary);
}

.navbar-light .nav-link:hover {
    color: #375731;
}

/* Active or selected item */
.list-group-item.active {
    background-color: #44693d;
    border-color: #44693d;
    color: #fff; /* white text for contrast */
}

/* Hover state for clickable items */
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(68, 105, 61, 0.1); /* light green tint */
    color: #44693d;
}

/* Optional: make all list group borders use your brand green */
.list-group-item {
    border-color: #44693d;
}

/* Optional: highlight selected with a subtle shadow */
.list-group-item.active {
    box-shadow: inset 0 0 0 1px #44693d;
}

/* === Primary color wrapper for the menu bar === */
.menu-bar-wrapper {
    background-color: #44693d; /* your logo green */
}

/* Optional: make the buttons stand out against the primary background */
.menu-bar-wrapper .btn,
.menu-bar-wrapper .dropdown-menu {
    /* Example: use light buttons on dark bg */
}

.menu-bar-wrapper .btn {
    background-color: #ffffff;
    color: #44693d;
    border-color: transparent;
}

.menu-bar-wrapper .btn:hover {
    background-color: #f0f0f0;
    color: #375731; /* darker green on hover */
}

.menu-bar-wrapper .btn.disabled {
    background-color: transparent;
    color: #ffffff;
    border: none;
}

.menu-bar-wrapper .dropdown-menu {
    /* dropdowns appear over the green bar normally */
}

/* Optional: If you have nav pills/links, make their text white by default */
.menu-bar-wrapper .nav-link {
    color: #ffffff;
}

.menu-bar-wrapper .nav-link:hover {
    color: #dddddd;
}

.menu-bar-wrapper .btn-primary {
    background-color: #ffffff;
    color: #44693d;
    border: none;
}

.menu-bar-wrapper .btn-primary:hover {
    background-color: #f0f0f0;
    color: #375731;
}

.menu-brand {
    background-color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
}

.btn-primary.active {
    background-color: #f0f0f0; /* Bootstrap’s hover bg for primary */
    border-color: #f0f0f0;     /* Bootstrap’s hover border for primary */
    color: #375731;               /* Bootstrap’s hover text for primary */
}

.dropdown-item.active {
    background-color: #f0f0f0; /* Bootstrap’s hover bg for primary */
    border-color: #f0f0f0;     /* Bootstrap’s hover border for primary */
    color: #375731;               /* Bootstrap’s hover text for primary */
}