/* Navbar */
.navbar.bg-primary {
    background-color: var(--navbar-bg) !important;
    border-bottom: var(--navbar-underline);
    padding-top: 0;
    padding-bottom: 0;
}

/* Desktop brand header */
.site-header {
    border-bottom: 1px solid #dee2e6;
}

.site-header-logo {
    height: 85px;
    width: auto;
}

.site-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-heading-color);
}

.site-header-subtitle {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #6c757d;
}

/* Mobile: logo inside the navbar */
.navbar-brand img {
    height: 40px;
    width: auto;
}

/* Nav tab separators — centered, ~55% height, white */
.navbar-nav {
    align-self: stretch;
}

.navbar-nav .nav-item {
    display: flex;
    position: relative;
}

/* Pseudo-element separator: centered vertically, does not span full height */
.navbar-nav .nav-item + .nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 55%;
    background-color: var(--navbar-separator-color);
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--navbar-link-color) !important;
    text-transform: var(--navbar-link-text-transform);
    letter-spacing: var(--navbar-link-letter-spacing);
    border-bottom: 2px solid transparent;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--navbar-link-hover-color) !important;
    background-color: var(--navbar-link-hover-bg);
    border-bottom-color: var(--navbar-link-hover-underline-color);
}

/* Mobile: stacked — no pseudo separators, use a top border instead */
@media (max-width: 767.98px) {
    .navbar-nav {
        align-self: auto;
    }
    .navbar-nav .nav-item + .nav-item::before {
        display: none;
    }
    .navbar-nav .nav-item + .nav-item {
        border-top: 1px solid var(--navbar-separator-color-mobile);
    }
    .navbar-nav .nav-link {
        padding: 0.6rem 1rem;
    }
}

/* Buttons */
.btn {
    border-radius: 4px;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Links */
a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color);
}

/* Footer */
footer {
    background-color: #f8f9fa;
}

/* Table column widths — avoids inline style= on th elements */
.col-label    { width: 160px; }
.col-resource { width: 220px; }

/* Badges / alerts using primary */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

.alert-primary {
    background-color: var(--brand-alert-bg);
    border-color: var(--brand-alert-border);
    color: var(--brand-alert-color);
}