/* Page chrome: top nav, subnav, dropdowns, global search popup placement, fixed headers, fill-pane. */

nav {
    font-size: .9rem;
}

/* Mobile main nav search - below md, #searchForm (.jas-nav-search) is toggled by #mobileSearchToggle
   as an absolutely-positioned overlay rather than an unhidden flex row, so opening it never changes
   #mainNav's height. */
@media (max-width: 767.98px) {
    #mainNav {
        position: relative;
    }

    .jas-nav-search {
        display: none;
        position: absolute;
        top: 100%;
        right: .5rem;
        z-index: 1051;
        width: min(320px, calc(100vw - 1rem));
        margin-top: .25rem;
        padding: .5rem;
        background: var(--jas-bg, #fff);
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: .5rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }

    .jas-nav-search.show {
        display: block;
    }
}

/* A minimum, not a height: a pane whose content above the grid leaves less than the grid's floor grows, and the
   page scrolls, rather than the grid overhanging the card. */
.tab-content > .jas-fill-pane.active {
    display: flex;
    flex-direction: column;
    min-height: var(--jas-grid-dataarea-height);
}

/* A page whose grid fills the window below whatever is above it. body down to the page's root is a flex column at
   least the window's height, so a banner above the header (agent session, passkey offer) is absorbed rather than
   pushing the page past the window. Opt in with .jas-fill-page on the view's root element. */
body:has(.jas-fill-page) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

    body:has(.jas-fill-page) > .container-fluid,
    body:has(.jas-fill-page) > .container-fluid > main,
    .jas-fill-page {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
    }

    /* A page root is often max-width plus margin: 0 auto. Auto margins stop a flex item stretching, and it would size
       to its content instead - a grid's full column widths, wider than the window. */
    .jas-fill-page {
        width: 100%;
    }

/* A wrapper between the pane or page and its grid, filling what the content above it leaves. */
:is(.jas-fill-pane, .jas-fill-page) .jas-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
}

/* A .section-card is overflow: hidden, and a flex item that is not overflow: visible may shrink to nothing, so a
   short window clipped the card instead of scrolling the page. min-content keeps the content above the grid plus the
   grid's 350px floor. */
.jas-fill-page .jas-fill {
    min-height: min-content;
}

/* A grid a fill class sizes: the direct child of a pane, a page or a .jas-fill inside one. The data-area reset below
   names the same grids. */
:is(.jas-fill-pane, .jas-fill-page, :is(.jas-fill-pane, .jas-fill-page) .jas-fill) > .k-grid {
    flex: 1 1 0;
    min-height: 350px;
}

/* In block layout a grid's or wrapper's top margin (site/kendo.css gives these pages' grids .25rem) collapsed into the
   larger bottom margin of whatever sat above it. Flex margins add instead, so the margin above alone is the gap. */
.jas-fill-page .jas-fill > * + :is(.k-grid, .jas-fill) {
    margin-top: 0;
}

/* A grid below content that scrolls away, off the Details pages (the tenant-wide workspaces): the window's height
   below the pinned bars, so scrolled fully down it fills the window. On a Details tab the pane does this instead. */
.jas-fill-grid {
    height: var(--jas-grid-dataarea-height);
    min-height: 350px;
}

/* The data area of every grid sized above stretches to fill the grid. Kendo writes a pixel height onto it inline: 400px
   from a bare .Scrollable() when the grid is visible at init, or the grid's height at that moment, which goes stale
   when the grid's CSS height changes without a window resize. */
:is(.jas-fill-grid, :is(.jas-fill-pane, .jas-fill-page, :is(.jas-fill-pane, .jas-fill-page) .jas-fill) > .k-grid) > .k-grid-container > .k-grid-content {
    height: auto !important;
}

/* Trend: the summary beside the grid on a wide window, above it on a narrow one. The layout fills the pane in
   either direction; the summary keeps its own height. */
.jas-fill-pane > .account-trends-layout {
    flex: 1 1 0;
    align-items: stretch;
}

    .jas-fill-pane > .account-trends-layout > .account-trends-summary {
        align-self: flex-start;
    }

#fixed-header .fw-semibold {
    font-size: .95rem;
    color: var(--jas-text, #13111c);
}

.nav-arrow-icon {
    color: var(--jas-accent, #16C4F6);
}

    .nav-arrow-icon:hover {
        color: var(--jas-accent, #10bcde);
    }

.backToTopNav {
    margin-top: 1px;
}

.jas-controller-admin .row {
    margin-bottom: .5rem;
}

a.nav-link.subnav-link.dropdown-toggle.show {
    color: var(--jas-text, #495057) !important;
}

.nav-pill {
    color: var(--jas-text, #495057) !important;
    font-weight: 500;
    border-radius: 10px;
    padding: .55rem 1rem !important;
    margin: 0 .15rem;
    transition: all .2s ease;
    position: relative;
}

    .nav-pill:hover {
        background: rgba(13, 202, 240, 0.12);
        color: var(--jas-primary, #337ab7) !important;
    }


.nav-link.nav-pill.active {
    background: #16C4F640;
    color: var(--jas-primary, #337ab7) !important;
}

.nav-pill.active:hover {
    background: #16C4F660;
}

.dropdown-menu {
    border: none;
    border-radius: 16px;
    padding: .5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    animation: dropdownFade .14s ease;
}

.dropdown-item {
    border-radius: 8px;
    padding: .6rem .85rem;
    transition: .15s ease;
}

    .dropdown-item:hover {
        background: rgba(13, 202, 240, 0.1);
        color: var(--jas-primary, #337ab7);
    }

/* SUB NAV CONTAINER */
.subnav-container {
    background: var(--jas-bg, #ffffff);
    border-bottom: 1px solid var(--jas-divider, #e9ecef);
    padding: .4rem .75rem;
    gap: .35rem;
    /* Reserves the row's height while it is still empty. _Layout.cshtml renders this container with no
       links in it and subnav_async.js fills it a moment later, so without this the whole sticky header -
       and every page under it - shifts down by a row the instant they land. Matches one .subnav-link:
       .55rem of padding top and bottom around a ~1.5em line, plus this container's own .4rem twice. */
    min-height: 3.15rem;
}

/* subnav_async.js moves what does not fit into its More menu, so the row stays one line. */
.subnav-container.subnav-managed {
    flex-wrap: nowrap !important;
}

/* Applied by subnav_async.js once the markup is in and turns out to contain no links at all - a
   Specialist, or a factoring-tenant Collector with every count at zero. Reserving a row for a bar that
   is never going to hold anything just puts an empty bordered strip under the navbar on every page. */
.subnav-container.subnav-empty {
    min-height: 0;
    padding: 0;
    border-bottom: 0;
}

/* MAIN SUB NAV LINKS */
.subnav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem !important;
    border: none;
    border-radius: 10px;
    color: var(--jas-text, #242627);
    font-weight: 600;
    transition: all .2s ease;
    position: relative;
    white-space: nowrap;
}

    .subnav-link:hover {
        background: rgba(13, 202, 240, 0.12);
        color: var(--jas-primary, #337ab7);
        transform: translateY(-1px);
    }

    .subnav-link.active {
        background: var(--jas-accent, #16C4F6);
        color: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
    }

    .nav-pill.subnav-link.active {
        background: #16C4F640;
        box-shadow: none !important;
    }

        .subnav-link.active:hover {
            background: #0dc1e5;
            color: #fff;
            box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
        }

    .dropdown-item.active, .dropdown-item:active {
        background: #16C4F640;
        color: var(--jas-text, #333);
    }

    .subnav-link .badge,
    .subnav-dropdown-item .badge {
        font-weight: 600;
        border-radius: 999px;
        padding: .35rem .5rem;
        font-size: .72rem;
    }

    .subnav-link.active .badge {
        background: rgb(1 21 97 / 22%) !important;
        color: white;
    }

.subnav-dropdown-item {
    border-radius: 10px;
    padding: .65rem .9rem;
    transition: .18s ease;
    font-weight: 500;
}

    .subnav-dropdown-item:hover {
        background: rgba(13,202,240,.08);
        color: var(--jas-primary, #337ab7);
    }

    .subnav-dropdown-item.active {
        background: rgba(13,202,240,.14);
        color: var(--jas-primary, #337ab7);
    }

nav .bi-person-circle, nav .bi-envelope-paper {
    color: var(--jas-accent, #47baed);
}

    @keyframes dropdownFade {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Main-nav correspondence badge (_Layout.cshtml / correspondence_nav.js) - a slow pulse so it reads
       as "something's actively happening," distinct from the static bg-secondary counts _SubNav.cshtml
       uses for routine Dashboard tallies. */
    .jas-correspondence-badge {
        position: absolute;
        top: 0;
        left: 100%;
        /* translate (not a fixed margin) so the badge stays centered on the icon's corner no matter how
           wide the count text is - a fixed pixel pullback was tuned for a single digit and let a
           double-digit count (e.g. "15") bleed into the next nav item. */
        transform: translate(-60%, -50%);
        animation: jas-badge-pulse 2s ease-in-out infinite;
    }

    @keyframes jas-badge-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(233,185,47,.6);
        }

        50% {
            box-shadow: 0 0 0 4px rgba(233,185,47,0);
        }
    }

    /* Queue.cshtml row hint for a request whose Heartbeat has gone quiet without reaching a terminal
       state - the worker that owned it is probably gone (app restart/deploy); Cancel is still always
       effective on a row like this (Correspondence.CancelAsync finalizes it immediately when stale). */
    .jas-correspondence-stale {
        opacity: .6;
        font-style: italic;
    }