.navbar {
    height: var(--navbar-height);
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--navbarbackground) !important;
}

    .navbar .nav-link, .navbar .nav-link:link, .navbar .nav-link:visited {
        color: var(--white) !important;
        padding: 0 .75rem;
        height: var(--navbar-height);
        display: flex;
        align-items: center;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .navbar .nav-link:hover {
            background-color: var(--nav-link-background-hover);
            color: var(--nav-link-hover-color) !important;
        }

    .navbar .navbar-brand {
        width: 35px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white) !important;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

        .navbar .navbar-brand:hover {
            background-color: #0784ad !important;
            color: var(--white) !important;
        }

        .navbar .navbar-brand.divider::after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 2px;
            height: 24px;
            background-color: #808080;
            margin-left: 6px;
            margin-right: 6px;
        }

/* Page title inside navbar */
.navbar .navbar-text {
    color: var(--navbar-text-color) !important;
    font-weight: 700;
    font-size: 12pt;
    margin-left: 10px !important;
    display: inline-block;
    line-height: var(--navbar-height);
    padding: 0;
    vertical-align: middle;
    text-decoration: none;
}

    .navbar .navbar-text.mx-auto {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

.navbar .nav-item .navbar-btn {
    height: var(--navbar-height) !important; /* match navbar height */
    display: flex; /* align text vertically */
    align-items: center;
    padding: 0 1rem; /* horizontal breathing space */
    font-weight: bold; /* make them stand out */
    line-height: 1; /* fix alignment issues */
    border-radius: 0; /* optional: flush with navbar */
}

/* On hover, keep Bootstrap’s own button colour transitions */
.navbar .nav-item .navbar-btn {
    opacity: 0.9;
}

/* Ensure mobile collapsed menu has background */
.navbar-collapse.collapse {
    background-color: var(--navbarbackground) !important;
    color: var(--white) !important;
}

    .navbar-collapse.collapse .nav-link {
        color: var(--white) !important;
        text-decoration: none;
    }

        .navbar-collapse.collapse .nav-link:hover {
            background-color: var(--nav-link-background-hover) !important;
            color: var(--nav-link-hover-color) !important;
        }

.dropdown-menu {
    background-color: var(--navbarbackground) !important;
    border: 1px solid #14508d;
}

    .dropdown-menu .dropdown-item {
        color: var(--white) !important;
    }

        .dropdown-menu .dropdown-item:hover {
            background-color: var(--white) !important;
            color: var(--navbarbackground-hover) !important;
        }