.offcanvas-body .nav-link:hover {
    background-color: var(--bs-primary) !important;
}

.nav-tabs .nav-item.header-tab:hover,
.navbar-nav .nav-item.header-tab:hover {
    background-color: white !important;
}

.bg-purple {
    background-color: var(--bs-purple) !important;
}

.bg-purple-subtle {
    background-color: #e0d6ff !important;
}

.bg-green {
    background-color: var(--bs-success) !important;
}

.bg-green-subtle {
    background-color: var(--bs-success-bg-subtle) !important;
}

/* Preferences modal: outline when unselected, filled when checked.
   btn-outline-primary is handled natively by Bootstrap. */
.btn-outline-green {
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    background-color: transparent !important;
}

.btn-check:checked+.btn-outline-green {
    color: #fff !important;
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn-outline-purple {
    color: var(--bs-purple) !important;
    border-color: var(--bs-purple) !important;
    background-color: transparent !important;
}

.btn-check:checked+.btn-outline-purple {
    color: #fff !important;
    background-color: var(--bs-purple) !important;
    border-color: var(--bs-purple) !important;
}

/* Make navbar text white when bg-purple is set */
.bg-purple .navbar-brand,
.bg-green .navbar-brand {
    color: white !important;
}

.bg-purple .nav-link,
.bg-green .nav-link {
    color: white !important;
}

.bg-purple .navbar-toggler i,
.bg-green .navbar-toggler i {
    color: white !important;
}

.bg-purple .nav-link:not(.dropdown-toggle):hover,
.bg-green .nav-link:not(.dropdown-toggle):hover {
    color: var(--bs-dark) !important;
    background-color: white !important;
}

.bg-purple .nav-link.dropdown-toggle:hover,
.bg-green .nav-link.dropdown-toggle:hover {
    color: var(--bs-dark) !important;
    background-color: white !important;
}

/* Active state and active+hover all share the same white background. */
.bg-purple .nav-link.dropdown-toggle.active,
.bg-green .nav-link.dropdown-toggle.active,
.bg-primary .nav-link.dropdown-toggle.active,
.bg-purple .nav-link.dropdown-toggle.active:hover,
.bg-green .nav-link.dropdown-toggle.active:hover,
.bg-primary .nav-link.dropdown-toggle.active:hover {
    color: var(--bs-dark) !important;
    background-color: white !important;
}

/* Active nav link styling */
.bg-purple .nav-link.active,
.bg-green .nav-link.active {
    color: var(--bs-dark) !important;
    background-color: white !important;
}