/* Two deliberate rows: navigation above, customer and account controls below. */
.portal-layout { padding-top: 0; }
.portal-layout > .portal-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: block;
    padding: 0;
}
.portal-navbar > .container-fluid {
    padding-inline: clamp(.75rem, 2vw, 2rem);
    gap: .5rem 1rem;
}
.portal-navbar .portal-nav-primary { min-height: 64px; padding-block: .4rem; }
.portal-navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0 .75rem 0 0;
    min-width: 0;
    white-space: nowrap;
}
.portal-navbar .navbar-collapse,
.portal-navbar .navbar-nav,
.portal-navbar .nav-item { min-width: 0; }
.portal-navbar .navbar-nav .nav-link {
    min-height: 44px;
    padding: .6rem .75rem !important;
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}
.portal-navbar .navbar-nav { flex-wrap: wrap; }
.portal-navbar .portal-nav-secondary {
    min-height: 56px;
    padding-block: .25rem;
    border-top: 1px solid var(--portal-line);
    background: var(--portal-surface);
    flex-wrap: wrap;
}
.portal-customer-context {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex: 1 1 18rem;
    min-width: min(100%, 18rem);
    font-size: .875rem;
}
.portal-context-label { color: var(--portal-muted); flex-shrink: 0; }
.portal-context-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.portal-context-number { white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.portal-navbar .portal-account-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: .25rem;
}
.portal-navbar .portal-theme-control:not([hidden]) { margin: 0 .25rem 0 0; }
.portal-navbar .portal-noc-link,
.portal-navbar #portal-account-toggle { gap: .5rem; }
.portal-account-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.portal-navbar .portal-account-menu {
    position: absolute;
    inset-inline: auto 0;
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(28rem, calc(100dvh - var(--portal-header-height, 10rem) - .75rem));
    overflow-y: auto;
}
.portal-account-details { display: flex; flex-direction: column; padding: .5rem 1rem; overflow-wrap: anywhere; }
.portal-account-menu .dropdown-item { min-height: 44px; white-space: normal; }
.portal-navbar .dropdown-menu { max-width: calc(100vw - 1.5rem); }
.portal-nav-primary .dropdown-menu { width: max-content; }
.portal-navbar .dropdown-item { white-space: normal; overflow-wrap: anywhere; }

@media (min-width: 1200px) {
    .portal-nav-primary .dropdown-menu {
        max-height: calc(100dvh - var(--portal-header-height, 8rem) - 1rem);
        overflow-y: auto;
    }
}
@media (max-width: 1199.98px) {
    .portal-navbar .navbar-collapse { max-height: 55dvh; overflow-y: auto; }
    .portal-navbar .portal-noc-label { display: none; }
    .portal-navbar .portal-nav-primary > .navbar-collapse { flex-basis: 100%; }
}
@media (max-width: 767.98px) {
    .portal-navbar .portal-nav-secondary { flex-wrap: wrap; gap: .2rem .5rem; }
    .portal-customer-context { flex-basis: 100%; }
    .portal-navbar .portal-account-actions { width: 100%; justify-content: flex-end; }
    .portal-account-name { max-width: 10rem; }
    .portal-context-label { font-size: .75rem; }
}
@media (max-width: 399.98px) {
    .portal-navbar .navbar-brand { font-size: 1rem; margin-right: 0; }
    .portal-navbar .portal-account-name { display: none; }
    .portal-navbar .portal-theme-control label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* The maintenance page keeps its disabled login visible without JavaScript. */
.maintenance-page .portal-navbar .navbar-collapse { display: none; }
.maintenance-page .portal-navbar > .portal-nav-secondary { flex-wrap: nowrap; }
.maintenance-page .maintenance-overlay { padding-top: 140px; }