.page-breadcrumb .breadcrumb {
    font-size: .8rem;
    text-transform: none;
}

.page-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.page-breadcrumb .breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--tblr-secondary-color);
    text-decoration: none;
    cursor: pointer;
}

.page-breadcrumb .breadcrumb-item.active,
.page-breadcrumb .breadcrumb a:hover {
    color: var(--tblr-primary);
    text-decoration: none;
}

.page-nav .nav-underline {
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: scroll;
    scrollbar-width: none;
}

.page-nav .nav-underline .nav-link {
    --tblr-nav-link-hover-bg: transparent;
    border-radius: 0 !important;
    padding-inline: 0.25rem;
}

.page-nav .nav-underline .nav-link.active {
    color: var(--tblr-primary);
    border-bottom-color: var(--tblr-primary);
}

/* PAGE_ACTIONS/PAGE_NAV rendered as a bordered pill bar (templates/menu/actions.html.twig) —
   plain .nav has no Bootstrap active styling of its own (that's scoped to .nav-pills/.nav-tabs),
   so matcher.isCurrent(item)'s "active" class on .nav-link was a no-op without this. */
.nav.border.rounded .nav-link.active {
    background-color: var(--tblr-primary);
    color: #fff;
}