/* /Components/ActivityList.razor.rz.scp.css */
/* The component's OWN styles. It used to borrow .contact-cards / .cc-card / .cc-head / .cc-note, which
   live in Customer.razor.css — a SCOPED sheet. Scoped CSS only matches elements carrying that page's
   b-xxxx attribute, so the moment this markup moved into a shared component the mobile cards matched
   nothing and collapsed into unstyled text: "09/01/2026Heather Coomer" with the note running off the
   side of the screen.

   Same trap as the .req-star asterisk. A shared component cannot depend on a page's private sheet. */

.al-cards[b-g8bnufuc9y] {
    padding: 0.5rem;
}

.al-card[b-g8bnufuc9y] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.al-card:last-child[b-g8bnufuc9y] {
    margin-bottom: 0;
}

/* Date on the left, who logged it pushed to the right edge. */
.al-head[b-g8bnufuc9y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.al-date[b-g8bnufuc9y] {
    font-size: 0.9rem;
    font-weight: 600;
}

.al-who[b-g8bnufuc9y] {
    min-width: 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* pre-line keeps the line breaks somebody typed; overflow-wrap:anywhere is what stops a pasted email
   address or ESIID - one unbroken 30-character token - from widening the whole page on a phone. */
.al-note[b-g8bnufuc9y] {
    padding: 0.45rem 0.6rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* /Components/ContactLookup.razor.rz.scp.css */
/* The menu floats over whatever follows it. In the + Add modal that is the next form row; without
   position:absolute the suggestions shove the rest of the dialog down as you type, which moves the
   Save button while somebody is reaching for it. */
.cl-wrap[b-ht0bn0vp3g] {
    position: relative;
}

.cl-menu[b-ht0bn0vp3g] {
    position: absolute;
    z-index: 1060;   /* above .lead-modal (1051) - this renders inside one */
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.15rem;
    max-height: 17rem;
    overflow-y: auto;
}

/* The rows carry three lines of detail, so the default list-group padding makes a short list tall
   enough to need scrolling on a laptop. */
.cl-menu .list-group-item[b-ht0bn0vp3g] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-fdemiimn2m] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-fdemiimn2m] {
    flex: 1;
}

.sidebar[b-fdemiimn2m] {
    background-image: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%);
}

.top-row[b-fdemiimn2m] {
    /* TRIAL option 3, not active: tint the top bar to the page colour so it recedes and the white logo
       plate stops being the brightest thing on screen. Swap which of the two lines is commented. */
    background-color: #ffffff;
    /* background-color: var(--page-bg, #f2edf3); */
    border-bottom: 1px solid #e6e7eb;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-fdemiimn2m]  .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--brand-charcoal);
    font-weight: 500;
}

.top-row[b-fdemiimn2m]  .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-pink);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
}

    .top-row[b-fdemiimn2m]  a, .top-row[b-fdemiimn2m]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-fdemiimn2m]  a:hover, .top-row[b-fdemiimn2m]  .btn-link:hover {
        text-decoration: underline;
    }

    /* The always-visible "+ New Lead" action sits flush-left and reads as a button, not a link. */
    .top-row[b-fdemiimn2m]  .new-lead-btn {
        margin-left: 0;
    }

    .top-row[b-fdemiimn2m]  .new-lead-btn:hover {
        text-decoration: none;
        color: #fff;
    }

    .top-row[b-fdemiimn2m]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-fdemiimn2m] {
        justify-content: space-between;
    }

    .top-row[b-fdemiimn2m]  a, .top-row[b-fdemiimn2m]  .btn-link {
        margin-left: 0;
    }

    /* Pin the mobile chrome so it stays reachable while the page scrolls: the nav banner (brand +
       hamburger) is the whole sidebar, pinned to the very top; the action bar (New Lead + Search)
       pins just beneath it. The sidebar sits above the action bar so the expanded menu overlays it.
       (On desktop the min-641 block pins these differently — a full-height left rail + top bar.) */
    .sidebar[b-fdemiimn2m] {
        position: sticky;
        top: 0;
        z-index: 1031;
    }

    .top-row[b-fdemiimn2m] {
        position: sticky;
        top: 3.5rem;
        z-index: 1030;
    }
}

@media (min-width: 641px) {
    .page[b-fdemiimn2m] {
        flex-direction: row;
    }

    /* Pinned by default: the menu holds its width exactly as it always has. Unpinned, it drops to an
       icon rail and previews on hover — but the page keeps reserving only the rail, and the sidebar is
       FIXED, so the preview OVERLAYS the content instead of pushing it. Pushing on hover would reflow
       the layout every time a pointer crossed the nav on its way somewhere else, and this app measures
       sticky offsets (dashboard tab strip, filter bars, table headers) that would re-run with it. */
    .page[b-fdemiimn2m] {
        --rail-w: 3.9rem;
        --nav-w: 250px;
        padding-left: var(--nav-w);
    }

    html.nav-unpinned .page[b-fdemiimn2m] {
        padding-left: var(--rail-w);
    }

    .sidebar[b-fdemiimn2m] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--nav-w);
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        z-index: 1040;           /* over the top bar (1030) so the preview covers it, under modals (1050) */
        transition: width 0.14s ease;
    }

    html.nav-unpinned .page .sidebar[b-fdemiimn2m] {
        width: var(--rail-w);
    }

    html.nav-unpinned .page .sidebar:hover[b-fdemiimn2m] {
        width: var(--nav-w);
        box-shadow: 4px 0 18px rgba(16, 17, 20, 0.14);
    }

    /* The nav list fills the column so the pin control can sit at the bottom. */
    .sidebar[b-fdemiimn2m]  .nav-scrollable {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* In the rail only, drop its scrollbar — it would eat 15px of a 62px rail and clip the icons.
       Pinned and previewing keep theirs, so a long menu still shows there's more below. */
    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .nav-scrollable {
        scrollbar-width: none;
    }

    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .nav-scrollable::-webkit-scrollbar {
        display: none;
    }

    /* Labels are clipped by the sidebar's overflow rather than hidden, so nothing reflows as it widens. */
    .sidebar[b-fdemiimn2m]  .nav-link {
        white-space: nowrap;
    }

    .sidebar[b-fdemiimn2m]  .navbar-brand,
    .sidebar[b-fdemiimn2m]  .nav-section {
        transition: opacity 0.12s ease;
    }

    /* Rail state — unpinned and not being previewed. The wordmark and the section captions don't fit,
       so they fade out and the icons carry the nav on their own. */
    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .navbar-brand,
    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .nav-section {
        opacity: 0;
    }

    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* !important because Sign out is a Bootstrap button carrying p-0, whose utility padding is itself
       !important — without this its icon sits flush against the rail edge while the others are centred.
       font-size:0 hides the labels outright: letting the rail's edge clip them leaves two-letter stubs
       ("Da", "Tr"). It can't be done with color:transparent — the icons are masks tinted by
       currentColor, so that would blank them too — but they're sized in rem and ignore the font. */
    html.nav-unpinned .page .sidebar:not(:hover)[b-fdemiimn2m]  .nav-link {
        padding-left: 1.35rem !important;
        font-size: 0;
    }

    /* Pin toggle — bottom of the nav, icon-only in the rail. */
    .nav-pin[b-fdemiimn2m] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.6rem 1.15rem;
        border: 0;
        /* Sidebar colours, not page colours. These three were charcoal-on-transparent from when the
           sidebar was white; against the plum panel the label was near-invisible and the divider and
           hover wash did nothing at all. Same tokens the nav links use, so the pin tracks the sidebar
           if it is ever re-skinned again. */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
        color: var(--sidebar-ink-muted, #5a5a5a);
        font-size: 0.8rem;
        cursor: pointer;
        white-space: nowrap;
    }

    .nav-pin:hover[b-fdemiimn2m] {
        background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.07));
        color: var(--sidebar-hover-ink, #2e2e2e);
    }

    .nav-pin-icon[b-fdemiimn2m] {
        font-size: 1rem;
        line-height: 1;
    }

    .nav-pin-icon[b-fdemiimn2m]::before {
        content: "\0000ab";
    }

    .nav-pin-text[b-fdemiimn2m]::before {
        content: "Unpin";
    }

    html.nav-unpinned .page .nav-pin-icon[b-fdemiimn2m]::before {
        content: "\0000bb";
    }

    html.nav-unpinned .page .nav-pin-text[b-fdemiimn2m]::before {
        content: "Pin";
    }

    html.nav-unpinned .page .sidebar:not(:hover) .nav-pin[b-fdemiimn2m] {
        padding-left: 1.45rem;
    }

    html.nav-unpinned .page .sidebar:not(:hover) .nav-pin-text[b-fdemiimn2m] {
        display: none;
    }

    /* The global top bar must sit ABOVE page content — the page's sticky table headers / filter bars
       pin just beneath it (top:3.5rem, z-index 2–3 in app.css) and search results are Bootstrap
       .list-group-item rows that bump to z-index 1 on hover. z-index:1 here tied with those, so results
       painted over the bar as they scrolled. 1030 (Bootstrap fixed-top tier) clears all content while
       staying below the app's modals/backdrops (1050/1051). */
    .top-row[b-fdemiimn2m] {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    .top-row.auth[b-fdemiimn2m]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-fdemiimn2m], article[b-fdemiimn2m] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-fdemiimn2m] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-fdemiimn2m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Mobile keeps the hamburger menu exactly as it was — no rail, no pin. */
@media (max-width: 640.98px) {
    .nav-pin[b-fdemiimn2m] {
        display: none;
    }
}

/* Phone gutters. px-4 on the content article is 1.5rem a side — 48px of a 390px screen spent on white
   space before anything renders, and with the card's own 0.7rem a side that is ~72px gone. The leads
   card's action row measures ~319px against the 318px that left, so a four-button row wrapped by about
   one pixel. Two-thirds of a gutter buys it back with room to spare, and nothing else on a phone was
   short of air. */
@media (max-width: 767.98px) {
    .top-row.px-4[b-fdemiimn2m],
    article.content.px-4[b-fdemiimn2m] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-7065pt5jop] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--brand-charcoal, #4b4d52);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(75, 77, 82, 0.35);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2875, 77, 82, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem;
}

.navbar-toggler:checked[b-7065pt5jop] {
    background-color: rgba(75, 77, 82, 0.12);
}

/* The logo is charcoal type with a pink block, drawn for a light ground: on the plum panel the word
   POWERED disappears. It keeps a white plate of its own rather than being recoloured - which would also
   take the pink out of it - and the plate keeps the mobile menu toggle readable for the same reason. */
.top-row[b-7065pt5jop] {
    min-height: 3.5rem;
    background-color: #fff;
}

.navbar-brand[b-7065pt5jop] {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.brand-logo[b-7065pt5jop] {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}

.bi[b-7065pt5jop] {
    display: inline-block;
    position: relative;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.6rem;
    top: -1px;
    /* Icons are drawn as masks tinted by the link's text colour (currentColor), so they follow the nav
       text automatically: grey normally, white when the item is active. Each .bi-*-nav-menu sets --icon. */
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.bi-speedometer2-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E %3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3E %3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3E %3C/svg%3E");
}

.bi-funnel-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-funnel-fill' viewBox='0 0 16 16'%3E %3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z'/%3E %3C/svg%3E");
}
.bi-table-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-table' viewBox='0 0 16 16'%3E %3Cpath d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5 0h4V4H6zm4 1H6v3h4z'/%3E %3C/svg%3E");
}
.bi-clipboard-data-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-clipboard-data' viewBox='0 0 16 16'%3E %3Cpath d='M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0z'/%3E %3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z'/%3E %3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z'/%3E %3C/svg%3E");
}



.bi-briefcase-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-briefcase-fill' viewBox='0 0 16 16'%3E %3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5'/%3E %3Cpath d='M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z'/%3E %3C/svg%3E");
}

.bi-graph-up-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-graph-up' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07z'/%3E %3C/svg%3E");
}

.bi-building-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill' viewBox='0 0 16 16'%3E %3Cpath d='M3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h3v-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V16h3a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zm1 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5M4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5m2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5m2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5'/%3E %3C/svg%3E");
}

.bi-bell-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bell-fill' viewBox='0 0 16 16'%3E %3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901'/%3E %3C/svg%3E");
}

.bi-receipt-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-receipt' viewBox='0 0 16 16'%3E %3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z'/%3E %3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5'/%3E %3C/svg%3E");
}

.bi-box-arrow-down-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-down' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M3.5 10a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 0 0 1h2A1.5 1.5 0 0 0 14 9.5v-8A1.5 1.5 0 0 0 12.5 0h-9A1.5 1.5 0 0 0 2 1.5v8A1.5 1.5 0 0 0 3.5 11h2a.5.5 0 0 0 0-1z'/%3E %3Cpath fill-rule='evenodd' d='M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z'/%3E %3C/svg%3E");
}

.bi-currency-dollar-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-currency-dollar' viewBox='0 0 16 16'%3E %3Cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.06 1.523l1.294-.166C10.324 2.443 9.06 1.313 8 1.203V0H6.957v1.203C4.983 1.372 3.51 2.6 3.51 4.492c0 1.531.976 2.489 2.678 2.949l.771.203v3.844c-1.132-.16-1.926-.729-2.062-1.708zm5.6-3.223c-.058.008-.116.014-.176.021v3.4c1.24-.15 1.947-.797 1.947-1.73 0-.933-.616-1.442-1.771-1.691M6.966 2.5c-1.15.16-1.804.799-1.804 1.663 0 .84.526 1.36 1.804 1.653z'/%3E %3C/svg%3E");
}

.bi-lightning-charge-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-lightning-charge-fill' viewBox='0 0 16 16'%3E %3Cpath d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z'/%3E %3C/svg%3E");
}

.bi-briefcase-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-briefcase-fill' viewBox='0 0 16 16'%3E %3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5'/%3E %3Cpath d='M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z'/%3E %3C/svg%3E");
}

.bi-people-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E %3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E %3C/svg%3E");
}

.bi-signpost-split-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-signpost-split-fill' viewBox='0 0 16 16'%3E %3Cpath d='M7 16h2V6h5a1 1 0 0 0 .8-.4l.975-1.3a.5.5 0 0 0 0-.6L14.8 2.4A1 1 0 0 0 14 2H9v-.586a1 1 0 0 0-2 0V7H2a1 1 0 0 0-.8.4L.225 8.7a.5.5 0 0 0 0 .6l.975 1.3a1 1 0 0 0 .8.4h5z'/%3E %3C/svg%3E");
}

.bi-person-fill-gear-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill-gear' viewBox='0 0 16 16'%3E %3Cpath d='M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-9 8c0 1 1 1 1 1h5.256A4.5 4.5 0 0 1 8 12.5a4.5 4.5 0 0 1 1.544-3.393Q8.844 9.002 8 9c-5 0-6 3-6 4m9.886-3.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382zM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E %3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E %3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E %3C/svg%3E");
}

.bi-key-fill-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-key-fill' viewBox='0 0 16 16'%3E %3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2M2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E %3C/svg%3E");
}

.bi-box-arrow-left-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-left' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z'/%3E %3Cpath fill-rule='evenodd' d='M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z'/%3E %3C/svg%3E");
}

.bi-box-arrow-in-right-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-in-right' viewBox='0 0 16 16'%3E %3Cpath fill-rule='evenodd' d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z'/%3E %3Cpath fill-rule='evenodd' d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E %3C/svg%3E");
}

.nav-item[b-7065pt5jop] {
    font-size: 0.82rem;
    padding-bottom: 0.35rem;
}

/* Section dividers ("Reference", "Admin"). Tokenised for the TRIAL dark sidebar; the fallback is the grey
   they were on the light panel. */
.nav-section[b-7065pt5jop] {
    color: var(--sidebar-ink-muted, #5a5a5a);
}

    .nav-item:first-of-type[b-7065pt5jop] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-7065pt5jop] {
        padding-bottom: 1rem;
    }

    .nav-item[b-7065pt5jop]  .nav-link {
        /* The icons are masks painted with currentColor (see .bi above), so they follow this automatically -
           nothing else has to change for the panel to go dark. */
        color: var(--sidebar-ink, #454545);
        background: none;
        border: none;
        border-radius: 4px;
        height: 2.4rem;
        display: flex;
        align-items: center;
        line-height: 2.4rem;
        width: 100%;
    }

.nav-item[b-7065pt5jop]  a.active {
    background-color: var(--brand-pink);
    color: #fff;
    font-weight: 600;
}

.nav-item[b-7065pt5jop]  .nav-link:hover {
    background-color: var(--sidebar-hover-bg, rgba(0,0,0,0.07));
    color: var(--sidebar-hover-ink, #2e2e2e);
}

.nav-scrollable[b-7065pt5jop] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-7065pt5jop] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-7065pt5jop] {
        display: none;
    }

    .nav-scrollable[b-7065pt5jop] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Desktop nav is tighter than the touch menu: 44px per row (2.4rem link + 0.35rem gap) left more air
   between items than a mouse needs. Row pitch drops to 36px, which reclaims ~130px over 17 items.
   Deliberately not applied below 641px — the hamburger menu is tapped, and those targets should stay. */
@media (min-width: 641px) {
    .nav-item[b-7065pt5jop] {
        padding-bottom: 0.15rem;
    }

    /* The old 1rem tail pushed the list 7px past the panel and summoned a scrollbar for nothing. */
    .nav-item:last-of-type[b-7065pt5jop] {
        padding-bottom: 0.5rem;
    }

    /* Labels are clipped by the rail on purpose, so there is nothing to scroll to sideways. */
    .nav-scrollable[b-7065pt5jop] {
        overflow-x: hidden;
    }

    .nav-item:first-of-type[b-7065pt5jop] {
        padding-top: 0.5rem;
    }

    .nav-item[b-7065pt5jop]  .nav-link {
        height: 2.1rem;
        line-height: 2.1rem;
    }
}

/* Usage Reviews — a magnifier: the page is about asking the supplier to go and look. */
.bi-search-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-search' viewBox='0 0 16 16'%3E %3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.44.293.98.83l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.83-.98zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3E %3C/svg%3E");
}


/* Lead Links - a chain link, i.e. joining a contract back to its lead. */
.bi-link-nav-menu[b-7065pt5jop] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E %3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E %3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E %3C/svg%3E");
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9nkm7d5kl4],
.components-reconnect-repeated-attempt-visible[b-9nkm7d5kl4],
.components-reconnect-failed-visible[b-9nkm7d5kl4],
.components-pause-visible[b-9nkm7d5kl4],
.components-resume-failed-visible[b-9nkm7d5kl4],
.components-rejoining-animation[b-9nkm7d5kl4] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-retrying[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-failed[b-9nkm7d5kl4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9nkm7d5kl4] {
    display: block;
}


#components-reconnect-modal[b-9nkm7d5kl4] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9nkm7d5kl4 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9nkm7d5kl4 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9nkm7d5kl4 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9nkm7d5kl4]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9nkm7d5kl4 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9nkm7d5kl4 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9nkm7d5kl4 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9nkm7d5kl4 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9nkm7d5kl4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9nkm7d5kl4] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9nkm7d5kl4] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-9nkm7d5kl4] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-9nkm7d5kl4] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-9nkm7d5kl4] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9nkm7d5kl4] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9nkm7d5kl4 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9nkm7d5kl4] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9nkm7d5kl4 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/LeadsWorkspace.razor.rz.scp.css */
/* Capped table (dashboard): scroll pane with a sticky header so it doesn't dominate the page */
.ws-capped[b-zzn600e3uy] {
    overflow-y: auto;
}

.ws-capped thead th[b-zzn600e3uy] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-table-bg, #f8f9fa);
}

/* Wider search field — it carries the most-used filter (company / contact / DBA / MSCID) */
.ws-search[b-zzn600e3uy] {
    flex: 0 1 26rem;
    min-width: 0;
}

.ws-search .form-control[b-zzn600e3uy] {
    width: 100%;
}

/* ---- Card layout (dashboard open-leads) — one full-width card per row ---- */
.ws-capped-cards[b-zzn600e3uy] {
    overflow-y: auto;
}

.lead-card[b-zzn600e3uy] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid transparent;   /* accent reserved for attention states only */
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.12s ease;
}

.lead-card:last-child[b-zzn600e3uy] {
    margin-bottom: 0;
}

.lead-card:hover[b-zzn600e3uy] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Colour draws the eye only to leads that need action now */
.lead-card.lc-overdue[b-zzn600e3uy] {
    border-left-color: var(--bs-danger, #dc3545);
}

.lead-card.lc-today[b-zzn600e3uy] {
    border-left-color: var(--bs-warning, #ffc107);
}

/* Header: customer + status (left), owner + follow-up (right) */
.lc-head[b-zzn600e3uy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Overdue cards get a subtle danger header so they stand out at a glance */
.lead-card.lc-overdue .lc-head[b-zzn600e3uy] {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border-bottom-color: var(--bs-danger-border-subtle, #f1aeb5);
}

.lc-head-title[b-zzn600e3uy] {
    min-width: 0;
}

/* Customer name is the card's title — keep the app-wide pink .cust-name link so it matches every other
   dashboard section; just bump the size a touch as the card title. (The inline Edit link beside it is
   .ll-edit-inline, so it keeps its own grey styling.) */
.lc-head-title a.cust-name[b-zzn600e3uy] {
    font-size: 1.02rem;
}

/* Sub-line under the customer name: DBA */
.lc-sub[b-zzn600e3uy] {
    margin-top: 0.1rem;
}

.lc-head-meta[b-zzn600e3uy] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.lc-inline[b-zzn600e3uy] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lc-label[b-zzn600e3uy] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
}

/* Body: contact stack (left) beside editable notes (right) */
.lc-body[b-zzn600e3uy] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
}

.lc-contact[b-zzn600e3uy] {
    flex: 0 1 15rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Lead source chip sits at the bottom of the contact column, just above the actions */
.lc-source-chip[b-zzn600e3uy] {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Contact email/phone are secondary detail — neutral until hovered, so pink stays meaningful */
.lc-contact a[b-zzn600e3uy] {
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}

.lc-contact a:hover[b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
    text-decoration: underline;
}

.lc-notes[b-zzn600e3uy] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Notes textarea grows; the History icon sits to its right, vertically centered */
.lc-notes-row[b-zzn600e3uy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lc-notes-field[b-zzn600e3uy] {
    flex: 1 1 auto;
    min-width: 0;
}

/* "History" icon beside the notes textarea — plain icon button */
.lc-history-btn[b-zzn600e3uy] {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
}

.lc-history-btn:hover[b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
}

/* Footer: actions (left), created/updated meta (right) */
.lc-foot[b-zzn600e3uy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.7rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ===== List view (sandbox: /test-leads) — rows/columns with a notes sub-row ===== */

/* Table text size is the app-wide default (.table in app.css). */

/* One <tbody> per lead = its main row + notes sub-row as a single unit: no divider
   between them, one row divider only after the group's last row. */
.ll-table > tbody > tr > td[b-zzn600e3uy] {
    border-bottom-width: 0;
}

.ll-table > tbody > tr:last-child > td[b-zzn600e3uy] {
    border-bottom-width: var(--bs-border-width, 1px);
}

/* Hovering anywhere in a lead highlights the whole group together */
.ll-table > tbody:hover > tr > td[b-zzn600e3uy] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Attention accent runs down the left edge of the whole group */
.ll-table > tbody > tr > td:first-child[b-zzn600e3uy] {
    border-left: 3px solid transparent;
}

.ll-table > tbody.lc-overdue > tr > td:first-child[b-zzn600e3uy] {
    border-left-color: var(--bs-danger, #dc3545);
}

.ll-table > tbody.lc-today > tr > td:first-child[b-zzn600e3uy] {
    border-left-color: var(--bs-warning, #ffc107);
}

/* Contact email/phone: neutral until hovered, so pink stays meaningful */
.ll-contact-link[b-zzn600e3uy] {
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}

.ll-contact-link:hover[b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
    text-decoration: underline;
}

/* The email address reads as a real hyperlink (pink + underlined, normal weight); phone stays neutral */
.ll-contact-link[href^="mailto:"][b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
    text-decoration: underline;
}

.ll-contact-link[href^="mailto:"]:hover[b-zzn600e3uy] {
    color: var(--brand-charcoal, #4b4d52);   /* calm to charcoal on hover, no underline (matches .cust-name) */
    text-decoration: none;
}

/* Notes sub-row: indented under its lead, reads as an inline italic note */
.ll-sub > td[b-zzn600e3uy] {
    padding-top: 0.1rem;
    padding-bottom: 0.45rem;
    padding-left: 2.2rem;
}

/* Last-call line: the most recent logged call, read-only, prefixed with its date */
.ll-lastcall[b-zzn600e3uy] {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--bs-body-color, #212529);
}

.ll-lastcall-date[b-zzn600e3uy] {
    /* italic + weight inherited from .ll-lastcall; just render it a touch lighter than the note body */
    color: var(--bs-secondary-color, #6c757d);
}

/* ===== Row actions (Option A): quiet ghost links — icon + label, no button chrome. Each takes its
   semantic colour, darkening on hover. Indented under the customer name on the desktop row; sitting in
   the card foot on mobile. ===== */
/* The row a host just sent us to. Tinted rather than animated: the point is to still be obvious a few
   seconds later, when the eye has finished travelling from the tile that was clicked. It clears on the
   next reload, so it marks "this just happened" and not "this is special". */
/* The tint runs the width of the row; the spotlight edge belongs to the row, so it goes on the FIRST cell
   only. On every cell (which is what `> td` alone does - a table row cannot paint a border itself) it
   reads as a rule between columns rather than a marker down the side. */
.ll-row-new > td[b-zzn600e3uy] {
    background: var(--brand-pink-050, #fbeef6);
}

.ll-row-new > td:first-child[b-zzn600e3uy] {
    box-shadow: inset 3px 0 0 0 var(--brand-pink, #f56ec4);
}

.lead-card.ll-row-new[b-zzn600e3uy] {
    background: var(--brand-pink-050, #fbeef6);
    border-color: var(--brand-pink, #f56ec4);
}

.ll-actions[b-zzn600e3uy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

/* Desktop row only: indent the line under the customer name, into the tall contact column white space.
   inline-flex so the box stops at the last button: as a block-level flex row it spanned the full row
   width, and since it swallows clicks (so a button press cannot also toggle the row), the empty space
   beside the buttons looked clickable — cursor and all — but did nothing. */
.ll-table .ll-actions[b-zzn600e3uy] {
    display: inline-flex;
    margin-top: 0.4rem;
    margin-left: 0.9rem;
}

.ll-action[b-zzn600e3uy] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.15rem 0.65rem;
    border: 1px solid currentColor;   /* pill outline takes each action's own colour */
    border-radius: var(--bs-border-radius, 0.375rem);   /* rounded rect, matching the Business Snapshot labels (Bootstrap .badge) */
    background: none;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    color: var(--brand-charcoal, #4b4d52);
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.ll-action:hover[b-zzn600e3uy] {
    text-decoration: none;
}

/* Tinted buttons off the app-wide action tokens (app.css) — a soft wash instead of a hard saturated
   outline. Hover steps the SAME colour one notch deeper (background + border) and leaves the text
   alone: a solid fill with inverted white text was too big a jump for "the cursor is here", and it
   made a whole row flash as you moved down it. Active presses one step further. */
.ll-action-contract[b-zzn600e3uy] { color: var(--act-positive-text); background: var(--act-positive-bg); border-color: var(--act-positive-border); }
.ll-action-contract:hover[b-zzn600e3uy] { background: var(--act-positive-bg-hover); border-color: var(--act-positive-border-hover); }
.ll-action-call[b-zzn600e3uy] { color: var(--act-call-text); background: var(--act-call-bg); border-color: var(--act-call-border); }
.ll-action-call:hover[b-zzn600e3uy] { background: var(--act-call-bg-hover); border-color: var(--act-call-border-hover); }
.ll-action-close[b-zzn600e3uy] { color: var(--act-danger-text); background: var(--act-danger-bg); border-color: var(--act-danger-border); }
.ll-action-close:hover[b-zzn600e3uy] { background: var(--act-danger-bg-hover); border-color: var(--act-danger-border-hover); }
/* Secondary actions on a closed lead — neutral tint so a row never mixes tinted buttons with outlines. */
.ll-action-view[b-zzn600e3uy], .ll-action-reopen[b-zzn600e3uy] { color: var(--act-neutral); background: var(--act-neutral-bg); border-color: var(--act-neutral-border); }
.ll-action-view:hover[b-zzn600e3uy], .ll-action-reopen:hover[b-zzn600e3uy] { background: var(--act-neutral-bg-hover); border-color: var(--act-neutral-border-hover); }

/* Pressed: the border goes to the full accent for a beat, so the click still lands with feedback. */
.ll-action-call:active[b-zzn600e3uy] { border-color: var(--act-call); }
.ll-action-contract:active[b-zzn600e3uy] { border-color: var(--act-positive); }
.ll-action-close:active[b-zzn600e3uy] { border-color: var(--act-danger); }
.ll-action-view:active[b-zzn600e3uy], .ll-action-reopen:active[b-zzn600e3uy] { border-color: var(--act-neutral); }

/* Mobile card: salesperson name is a small sub-line under the customer name */
.lc-owner[b-zzn600e3uy] {
    font-size: 0.8rem;
}

/* Full-resolution list: a bounded scroll region so the column headers stay pinned while the rows
   scroll, and the wide table's horizontal scroll is contained here instead of on the page. */
.ll-scrollwrap[b-zzn600e3uy] {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.ll-scrollwrap thead th[b-zzn600e3uy] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-table-bg, #f8f9fa);
}

/* Sortable column headers */
.ll-sort[b-zzn600e3uy] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ll-sort:hover[b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
}

.ll-caret[b-zzn600e3uy] {
    color: var(--brand-pink, #cf4a9b);
    font-size: 0.7rem;
}

/* Follow-up field carries the status colour itself (no badge): danger = overdue, warning = today */
.ll-fu[b-zzn600e3uy]  .ll-fu-overdue {
    background-color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    color: #fff;
}

.ll-fu[b-zzn600e3uy]  .ll-fu-overdue::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.ll-fu[b-zzn600e3uy]  .ll-fu-today {
    background-color: var(--bs-warning, #ffc107);
    border-color: var(--bs-warning, #ffc107);
    color: #212529;
}

/* The expiry chip that used to live here is now .exp-chip in app.css - the dashboard renders the
   same fact and a scoped sheet cannot reach it. */

/* Expandable call note: the whole row is the affordance, with a caret that turns when open. */
.ll-row-x[b-zzn600e3uy] {
    cursor: pointer;
}

.ll-x-caret[b-zzn600e3uy] {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6c757d);
    transition: transform 0.12s ease;
}

.ll-x-caret.open[b-zzn600e3uy] {
    transform: rotate(90deg);
}

/* Bucket tabs. The count rides inside the button so the tab is one target, not a button next to a badge. */
.lw-buckets .lw-count[b-zzn600e3uy] {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: .6rem;
    background: rgba(0, 0, 0, .08);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
}
.lw-buckets .btn-primary .lw-count[b-zzn600e3uy] { background: rgba(255, 255, 255, .28); }

/* Follow-up state. Overdue is the loud one on purpose: a parked lead nobody picked up is exactly the
   opportunity this whole mechanism exists to protect. */
.lead-fu[b-zzn600e3uy] {
    display: inline-block;
    padding: 0 .3rem;
    border-radius: .25rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.lead-fu-late[b-zzn600e3uy]   { background: #dc3545; color: #fff; }
.lead-fu-due[b-zzn600e3uy]    { background: #fde2e1; color: #a32724; }
.lead-fu-soon[b-zzn600e3uy]   { background: #fdf5e0; color: #7a5c00; }
.lead-fu-parked[b-zzn600e3uy] { background: transparent; color: #6c757d; font-weight: 500; }

/* Punt sits with the other row actions but reads as a deferral, not a decision. */
.ll-action-punt[b-zzn600e3uy] { color: #6c757d; }
.ll-action-punt:hover[b-zzn600e3uy] { color: #495057; }

/* Phone: the card's own gutter comes in with the page's, so the action row is not fighting for the last
   few pixels. Head and body stay aligned with each other. */
@media (max-width: 767.98px) {
    .lc-head[b-zzn600e3uy], .lc-body[b-zzn600e3uy] { padding-left: 0.55rem; padding-right: 0.55rem; }
    .ll-actions[b-zzn600e3uy] { gap: 0.3rem; }
}
/* /Components/LinkLeadModal.razor.rz.scp.css */
/* Same overlay shape as the other no-JS modals in the app. */
.ll-modal-backdrop[b-fsf6dx2e9e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.ll-modal[b-fsf6dx2e9e] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    width: min(560px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.ll-modal-body[b-fsf6dx2e9e] {
    overflow: auto;
    padding: 1rem;
}

/* A customer with a dozen old leads should not push the create-a-lead option off the bottom. */
.ll-list[b-fsf6dx2e9e] {
    max-height: 40vh;
    overflow: auto;
}
/* /Components/Pages/Customer.razor.rz.scp.css */
/* Contracts and Leads sit one above the other, so they have to agree. The Leads cells carry .small,
   which lands at 11.9px on top of .table's 0.85rem; the Contracts cells carried none and read larger.
   Both now take --data-sm, which IS that 11.9px, named in app.css. */
.contract-table tbody td[b-2oeoprj49f] {
    font-size: var(--data-sm, 0.745rem);
}

/* Recent Activity is a list-group rather than a table, so .table's size never reached it at all -
   .small there computes against 1rem and lands at 14px, which is why it read larger than the lists
   beside it. The entry, its date caption and its note all take the same --data-sm. */
.cx-activity[b-2oeoprj49f] {
    font-size: var(--data-sm, 0.745rem);
}

/* Section-table headers were the default 1rem — larger than the rest of the app. Bring them into line. */
thead th[b-2oeoprj49f] {
    font-size: 0.8rem;
}

/* Edit-customer modal (no Bootstrap JS needed) */
.ce-modal-backdrop[b-2oeoprj49f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.ce-modal[b-2oeoprj49f] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    width: min(680px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.ce-modal-body[b-2oeoprj49f] {
    overflow: auto;
    padding: 1rem;
}

/* .cx-linkbtn moved to app.css as .linkbtn. It had drifted to --brand-pink-dark (#b23d86 - the pink
   --brand-pink replaced) with an underline on hover, while every other link in the app is --brand-pink
   calming to charcoal with none. It lives beside the `a, .btn-link` rule it has to match now. */

/* The Managed by row: its controls sit on the line with the name rather than stacking under it. */
.cx-managed[b-2oeoprj49f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}

.cx-mgr-note[b-2oeoprj49f] {
    color: var(--act-positive-text, #256b55);
    font-size: 0.78rem;
}

/* New Contract chooser. Same shape as the renewal modal's route buttons (RenewalLaunch .rn-choice), so
   the two steps of one decision look like one decision. Scoped CSS cannot reach across components,
   hence the copy rather than a shared class. */
.nc-modal[b-2oeoprj49f] {
    width: min(520px, 94vw);
}

.nc-choices[b-2oeoprj49f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nc-choice[b-2oeoprj49f] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.nc-choice:hover:not(:disabled)[b-2oeoprj49f] {
    border-color: var(--act-positive-border, #d2e9e1);
    background: var(--act-positive-bg, #f3faf7);
    color: inherit;
}

.nc-choice:disabled[b-2oeoprj49f] {
    opacity: 0.55;
    cursor: not-allowed;
}

.nc-choice-t[b-2oeoprj49f] {
    font-weight: 600;
}

.nc-choice-d[b-2oeoprj49f] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.3;
}

.nc-deal-top[b-2oeoprj49f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.nc-worked[b-2oeoprj49f] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

/* ===== Page header — same treatment as the contract page (DealEdit): customer name on line 1
   (truncates with ellipsis), badge + Edit / Show All on line 2, so the buttons stop stacking into a
   tall box on narrow screens. ===== */
/* Name on the left, actions floated right on the same line. min-width:0 on the title is what lets it
   ellipsis inside the flex row instead of shoving the buttons off the end. */
.cust-head-top[b-2oeoprj49f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cust-head-top .cust-head-title[b-2oeoprj49f] {
    min-width: 0;
}

.cust-head-title[b-2oeoprj49f] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cust-head-row[b-2oeoprj49f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

/* Account Manager beside the badge: a quiet label with the name carrying the weight, so the row reads
   "what this account is, and whose it is" without competing with the customer name above it. */
.cx-owner[b-2oeoprj49f] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.cx-owner-name[b-2oeoprj49f] {
    font-weight: 600;
    color: var(--bs-body-color, #474a52);
}

/* Sits right after the name, NOT pushed to the far edge. margin-left:auto was fine when this block was
   the only thing on its row, but on the title line of a 2000px screen it stranded the button an inch of
   whitespace away from everything - the same no-man's-land, one row up. Adjacency is the whole point:
   Edit belongs to the name it edits, so it sits beside it and the rest of the line stays empty. */
.cust-head-actions[b-2oeoprj49f] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

/* ===== Contracts, mobile (< md): the sortable table is replaced by one collapsed card per contract,
   mirroring the dashboard renewal / confirm cards. ===== */
.contract-cards[b-2oeoprj49f] {
    max-height: 30rem;
    overflow-y: auto;
    padding: 0.5rem;
}

.cc-card[b-2oeoprj49f] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.cc-card:last-child[b-2oeoprj49f] {
    margin-bottom: 0;
}

/* Head: contract pill + supplier, status chip pushed to the right edge */
.cc-head[b-2oeoprj49f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cc-supplier[b-2oeoprj49f] {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-state[b-2oeoprj49f] {
    margin-left: auto;
    white-space: nowrap;
    /* Hold its size: nowrap alone does not stop a flex item being shrunk, and .cc-card clips what is
       left, so the status badge lost its last letters on a narrow phone. */
    flex: 0 0 auto;
}

/* Body: the remaining columns as a compact label-over-value grid */
.cc-details[b-2oeoprj49f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.2rem 0.9rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
}

.cc-details > div[b-2oeoprj49f] {
    display: flex;
    flex-direction: column;
}

.cc-label[b-2oeoprj49f] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
}

/* Contract status badges are app-wide now (wwwroot/app.css + Services/ContractStage.cs) — the local
   .chip / .flowing-dot styles that used to live here are gone with them. Keep the status column from
   wrapping mid-badge in the narrow cards. */
.cc-state .badge[b-2oeoprj49f],
.contract-table .badge[b-2oeoprj49f] {
    white-space: nowrap;
}
/* ===== Leads, mobile (< md): same collapsed-card treatment as the contracts (shares .cc-*) ===== */
.lead-cards[b-2oeoprj49f] {
    padding: 0.5rem;
}

.cc-contact[b-2oeoprj49f] {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Email / phone: tap targets on their own line under the detail grid */
.cc-links[b-2oeoprj49f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    padding: 0 0.6rem 0.45rem;
    font-size: 0.82rem;
}

/* ===== Documents / Contacts, mobile (< md): same collapsed-card treatment (shares .cc-*) ===== */
.contact-cards[b-2oeoprj49f] {
    padding: 0.5rem;
}

/* The Documents card body already has padding, so its card list needs none of its own. */
.doc-cards[b-2oeoprj49f] {
    padding: 0;
}

/* Document heading = the description (or file name when there is none); wraps rather than truncating,
   since it is the only thing identifying the file. */
.cc-doc-title[b-2oeoprj49f] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* File name under the grid — secondary to the description that heads the card */
.cc-file[b-2oeoprj49f] {
    padding: 0 0.6rem 0.45rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow-wrap: anywhere;
}

/* Contact job title — quiet, sits right of the name */
.cc-title[b-2oeoprj49f] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

/* Contact cards have no detail grid, so the links row supplies its own top padding. */
.cc-head + .cc-links[b-2oeoprj49f] {
    padding-top: 0.45rem;
}

/* Contracts status filter in the card header — narrow enough to leave the title room */
.cc-filter[b-2oeoprj49f] {
    max-width: 9.5rem;
    width: auto;
}

/* Document heads wrap their title over several lines — keep the delete button pinned at the top right
   instead of letting it drop onto a line of its own. */
.doc-cards .cc-head[b-2oeoprj49f] {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.doc-cards .cc-state[b-2oeoprj49f] {
    flex: 0 0 auto;
}

/* ===== Collapsible sections — MOBILE ONLY =====
   Headers toggle on every size (the state is remembered), but only below the md breakpoint does a
   collapsed section actually hide its body: the desktop two-column layout reads fine expanded, and a
   section collapsed on a phone should never leave a card looking empty on a desktop. */
/* Desktop: these headers are NOT interactive. Collapsing only hides a body below the md breakpoint
   (see the media query), so on a desktop a click on the header does nothing you can see - yet Bootstrap
   reboot gives every [role="button"] a pointer cursor, so the whole page invited clicks that led nowhere.
   Below md the header really is the collapse control and gets the pointer back. */
.cx-header[b-2oeoprj49f] {
    cursor: default;
}

.cx-chevron[b-2oeoprj49f] {
    display: none;
    font-size: 0.75em;
    transition: transform 0.15s ease;
}

@media (max-width: 767.98px) {
    .cx-chevron[b-2oeoprj49f] {
        display: inline-block;
    }

    .cx-header[b-2oeoprj49f] {
        cursor: pointer;
        user-select: none;
    }

    /* !important beats the Bootstrap display utilities on the children (.d-md-none card lists). */
    .cx-section.collapsed > :not(.card-header)[b-2oeoprj49f] {
        display: none !important;
    }

    .cx-section.collapsed .cx-chevron[b-2oeoprj49f] {
        transform: rotate(-90deg);
    }

    .cx-section.collapsed > .card-header[b-2oeoprj49f] {
        border-bottom: 0;
        border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
        border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
    }
}

/* Activity note under its date / type head */
.cc-note[b-2oeoprj49f] {
    padding: 0.45rem 0.6rem;
    white-space: pre-line;
    /* size and italics come from .call-note in app.css, so a note reads the same here as on desktop */
}

/* Header controls that only act on the hidden body (the status filter, the ESIID filter) go away with
   it — unlike the "+ Add" buttons, which expand the section they add to. */
@media (max-width: 767.98px) {
    .cx-section.collapsed .cx-hide-collapsed[b-2oeoprj49f] {
        display: none !important;
    }
}

/* A lone detail (a location's ESIID) spans the grid instead of sitting in one narrow column, where a
   22-digit meter id wrapped mid-number. */
.cc-details > div:only-child[b-2oeoprj49f] {
    grid-column: 1 / -1;
}

/* Site names are long and worth reading in full — wrap them rather than truncating like a person's name. */
.location-cards .cc-contact[b-2oeoprj49f] {
    white-space: normal;
    overflow: visible;
}

/* Actions parked in a section header — they sit beside the collapse chevron, so they must not look
   like part of the heading, and their clicks must not toggle the section (stopPropagation in markup). */
.cx-hdr-actions[b-2oeoprj49f] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/* The way on from an already-worked contract. Indented under its row and separated by a hairline so it
   reads as belonging to the contract above rather than as another contract in the list. */
.nc-onward[b-2oeoprj49f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.25rem 0 0.5rem 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--bs-border-color, #ebedf2);
}
/* /Components/Pages/Customers.razor.rz.scp.css */
/* ===== Customers list — the leads/deals treatment: sortable sticky table + mobile cards, with a
   per-row call-log button and the customer-grid column set. Mirrors Deals.razor.css. ===== */

/* Wider search field — carries the most-used filter (company / DBA) */
.ws-search[b-qvmovxp8rr] {
    flex: 0 1 26rem;
    min-width: 0;
}

.ws-search .form-control[b-qvmovxp8rr] {
    width: 100%;
}

/* Table text size is the app-wide default (.table in app.css). */

.cl-table .badge[b-qvmovxp8rr],
.cust-card .badge[b-qvmovxp8rr] {
    font-size: 0.78rem;
}

/* Row hover highlight */
.cl-table > tbody > tr:hover > td[b-qvmovxp8rr] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* DBA sub-line under the company name */
.cl-dba[b-qvmovxp8rr] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
}

/* Sortable column headers */
.cl-sort[b-qvmovxp8rr] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cl-sort:hover[b-qvmovxp8rr] {
    color: var(--brand-pink, #cf4a9b);
}

.cl-caret[b-qvmovxp8rr] {
    color: var(--brand-pink, #cf4a9b);
    font-size: 0.7rem;
}

/* Call button — matches the dashboard/leads "yellow square": btn-outline-warning + a subtle amber fill +
   a darker amber phone icon, so the log-call action is consistent across the app (see LeadsWorkspace .ll-act/.ll-chip). */
.cl-act[b-qvmovxp8rr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.7rem;
    line-height: 1;
}

.cl-act.btn-outline-warning[b-qvmovxp8rr] {
    --bs-btn-bg: var(--bs-warning-bg-subtle);
}

.cl-chip[b-qvmovxp8rr] {
    color: #b8860b;   /* darker amber icon, legible on the subtle amber fill */
}

.cl-chip:hover[b-qvmovxp8rr] {
    color: #000;
}

/* ===== Mobile (< md): one card per customer ===== */
.cust-card[b-qvmovxp8rr] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.12s ease;
}

.cust-card:last-child[b-qvmovxp8rr] {
    margin-bottom: 0;
}

.cust-card:hover[b-qvmovxp8rr] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.cc-head[b-qvmovxp8rr] {
    padding: 0.45rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cc-head-title[b-qvmovxp8rr] {
    min-width: 0;
}

.cc-owner[b-qvmovxp8rr] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.cc-body[b-qvmovxp8rr] {
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cc-details[b-qvmovxp8rr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.2rem 0.9rem;
    font-size: 0.85rem;
}

.cc-details > div[b-qvmovxp8rr] {
    display: flex;
    flex-direction: column;
}

.cc-label[b-qvmovxp8rr] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
}

/* ===== Log-call modal (customer-level) — matches the app's modal layering (1050/1051) ===== */
.cl-modal-backdrop[b-qvmovxp8rr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.cl-call-modal[b-qvmovxp8rr] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(32rem, 94vw);
    max-height: 88vh;
    overflow: auto;
    z-index: 1051;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.cl-call-history[b-qvmovxp8rr] {
    max-height: 42vh;
    overflow-y: auto;
}

.cl-call-item[b-qvmovxp8rr] {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cl-call-item:last-child[b-qvmovxp8rr] {
    border-bottom: 0;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.metrics-total td[b-a0zb9jjj0g] {
    border-top: 2px solid var(--brand-charcoal);
    vertical-align: top;
}

/* Goal tracker + business-snapshot read best as a centered, bounded column, not full-bleed */
.dash-narrow[b-a0zb9jjj0g] {
    max-width: 64rem;
    margin-inline: auto;
}

/* Collapsible sections (accordion-style): click a section header to hide/show everything below it. */
.dash-header[b-a0zb9jjj0g] {
    cursor: pointer;
    user-select: none;
}

.dash-header:hover[b-a0zb9jjj0g] {
    filter: brightness(0.98);
}

.dash-chevron[b-a0zb9jjj0g] {
    display: inline-block;
    font-size: 0.75em;
    transition: transform 0.15s ease;
}

/* !important beats Bootstrap display utilities on the children (d-flex toolbar, d-md-block table, etc.) */
.dash-section.collapsed > :not(.card-header)[b-a0zb9jjj0g] {
    display: none !important;
}

.dash-section.collapsed .dash-chevron[b-a0zb9jjj0g] {
    transform: rotate(-90deg);
}

.dash-section.collapsed > .card-header[b-a0zb9jjj0g] {
    border-bottom: 0;
    border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
    border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
}

/* Content size for these tables is the app-wide default (.table in app.css).
   Keep the wide Pending Contracts / Confirms headers on one line. */
.pending-table th[b-a0zb9jjj0g] {
    white-space: nowrap;
}

/* Each contract + its DBA/note sub-rows is its own <tbody> = one visual unit: no dividers
   inside the group, a single row divider only after the group's last row. */
.pending-table > tbody > tr > td[b-a0zb9jjj0g] {
    border-bottom-width: 0;
}

.pending-table > tbody > tr:last-child > td[b-a0zb9jjj0g] {
    border-bottom-width: var(--bs-border-width, 1px);
}

/* Row-hover shading, consistent with Upcoming Renewals (.exp-table). Pending Contracts groups each contract
   in its own <tbody> (main + DBA/note sub-rows) so we hover the whole group; Recent Confirms is one flat
   <tbody> so we hover the single row. */
.pending-grouped > tbody:hover > tr > td[b-a0zb9jjj0g] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.confirms-table > tbody > tr:hover > td[b-a0zb9jjj0g] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* DBA / internal-note sub-rows: indented, italic, attached to their contract row */
.pending-sub td[b-a0zb9jjj0g] {
    padding-top: 0.05rem;
    padding-bottom: 0.35rem;
    padding-left: 2.2rem;
    font-size: 0.8rem;
    font-style: italic;
    white-space: normal;
}

.pending-dba[b-a0zb9jjj0g] {
    color: var(--bs-secondary-color, #6c757d);
}

.pending-note[b-a0zb9jjj0g] {
    color: var(--bs-blue, #0d6efd);
}

/* Mobile pending cards: contain + scroll, with a little breathing room under the section header. */
.pending-cards[b-a0zb9jjj0g] {
    max-height: 600px;
    overflow-y: auto;
    padding-top: 0.5rem;
}

/* Awaiting signature (info) / PMVI-late (danger) carry the list-view row colour onto the card:
   left edge + tinted header, mirroring the Deals-page card treatment. */
.exp-card.pending-await[b-a0zb9jjj0g] {
    border-left: 3px solid var(--bs-info, #0dcaf0);
}

.exp-card.pending-late[b-a0zb9jjj0g] {
    border-left: 3px solid var(--bs-danger, #dc3545);
}

.pending-cards .pending-dba[b-a0zb9jjj0g],
.pending-cards .pending-note[b-a0zb9jjj0g] {
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Legend swatches reuse the Bootstrap row-tint variables so they match the row colours exactly */
.legend-swatch[b-a0zb9jjj0g] {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-table-bg, transparent);
    vertical-align: -2px;
    margin-right: 0.15rem;
}

/* Status badge in the Pending Contracts / Recent Confirms tables matches the Contracts list (.dl-table .badge). */
.pending-table .badge:not(.contract-pill)[b-a0zb9jjj0g] {
    font-size: 0.78rem;
}

/* The ROW LABEL is the control: each snapshot row opens its drill-in from a status badge carrying the
   app-wide contract-status colour (ContractStages.BadgeClass), so the snapshot reads in the same
   vocabulary as every other badge. The count next to it is plain text. */
.snap-label[b-a0zb9jjj0g] {
    cursor: pointer;
    margin-left: 0.9rem;   /* indent the pills under their group heading */
    font-size: 0.8rem;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

/* Next Month sits below the totals, not under a group heading, so the pill indent has nothing to
   line up with — it just looks nudged. */
.snap-next .snap-label[b-a0zb9jjj0g] {
    margin-left: 0;
}

.snap-label:hover:not(:disabled)[b-a0zb9jjj0g] {
    filter: brightness(0.94);
    box-shadow: 0 0 0 2px var(--bs-tertiary-bg, #f8f9fa);
}

.snap-label:disabled[b-a0zb9jjj0g] {
    opacity: 0.55;
    cursor: default;
}

/* Pending Confirm: outlined in the brand pink rather than filled like the stage badges beside it. The
   stage palette is a vocabulary - each colour means a state a contract IS in - and "waiting on the
   supplier" is the gap between two of them, so it borrows none of those colours. */
.badge.snap-label--pending[b-a0zb9jjj0g] {
    background: transparent;
    border: 1px solid var(--brand-pink, #f56ec4);
    color: var(--brand-pink-dark, #b23d86);
}

.snap-count[b-a0zb9jjj0g] {
    font-variant-numeric: tabular-nums;
}

/* Business-snapshot header row: no shading, just bold text. */
.snapshot-head th[b-a0zb9jjj0g] {
    background: transparent;
    font-weight: 600;
}

/* Group bands: the month cohort vs the live "open now" states — they are counted on different bases,
   so they are never presented as one list. */
.snap-group td[b-a0zb9jjj0g] {
    padding-top: 0.55rem;
    padding-bottom: 0.15rem;
    border-bottom: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.snap-group-note[b-a0zb9jjj0g] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
}

/* Mobile ledger — a compact stacked read of the current month + YTD totals so the
   snapshot needs no horizontal scroll on a phone. Two section bands, right-aligned amounts. */
.snapshot-mobile .sm-table td[b-a0zb9jjj0g] {
    padding: 0.4rem 0.15rem;
    border-color: var(--bs-border-color-translucent, #e8e9ee);
}
.snapshot-mobile .sm-section td[b-a0zb9jjj0g] {
    padding-top: 0.7rem;
    padding-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    border-top: none;
}
/* First section band shouldn't push extra space above the table. */
.snapshot-mobile .sm-table tr:first-child.sm-section td[b-a0zb9jjj0g] {
    padding-top: 0.2rem;
}
.snapshot-mobile .sm-table td.text-end[b-a0zb9jjj0g] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Chip column: keep it tight so the amount column gets the room. */
.snapshot-mobile .sm-table td:nth-child(2)[b-a0zb9jjj0g] {
    width: 1%;
    white-space: nowrap;
}

/* Lightweight modal (no Bootstrap JS needed) */
.dash-modal-backdrop[b-a0zb9jjj0g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}
.dash-modal[b-a0zb9jjj0g] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 1rem 1.25rem;
    width: min(1100px, 96vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
/* The Next-month commission summary is a short bucket list, not the wide drill-in table. */
.dash-nextmonth-modal[b-a0zb9jjj0g] {
    width: min(460px, 96vw);
}
.dash-modal .table-responsive[b-a0zb9jjj0g] {
    max-height: 70vh;
}

/* Match the call-history modal's lighter type in the drill-in contracts table */
.dash-modal .table[b-a0zb9jjj0g] {
    font-size: 0.85rem;
}

/* Mobile: Customer / Contract / Salesperson / Signed / Deal value. Term, start, mils and at-risk go -
   they are reference figures, while those five are what identifies a row and what it is worth. Five
   columns only fit because the name truncates and the salesperson drops to a first name; without both
   the table scrolls sideways and none of it is readable. */
@media (max-width: 767.98px) {
    .dm-table thead th:nth-child(5)[b-a0zb9jjj0g],
    .dm-table thead th:nth-child(6)[b-a0zb9jjj0g],
    .dm-table thead th:nth-child(7)[b-a0zb9jjj0g],
    .dm-table thead th:nth-child(9)[b-a0zb9jjj0g],
    .dm-table tbody td:nth-child(5)[b-a0zb9jjj0g],
    .dm-table tbody td:nth-child(6)[b-a0zb9jjj0g],
    .dm-table tbody td:nth-child(7)[b-a0zb9jjj0g],
    .dm-table tbody td:nth-child(9)[b-a0zb9jjj0g] {
        display: none;
    }

    /* One line, cut with an ellipsis. Wrapping was what made a long name three rows tall. */
    .dm-table td:first-child .cust-name[b-a0zb9jjj0g],
    .dm-table td:first-child .text-muted[b-a0zb9jjj0g] {
        display: block;
        max-width: 9.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dash-modal[b-a0zb9jjj0g] { padding: 0.75rem 0.6rem; }
    .dm-table th[b-a0zb9jjj0g], .dm-table td[b-a0zb9jjj0g] { padding-left: 0.3rem; padding-right: 0.3rem; }
    .dm-table[b-a0zb9jjj0g] { font-size: 0.78rem; }
}

/* Business-snapshot drill-down modal: sticky, sortable column headers. */
.dash-modal thead th[b-a0zb9jjj0g] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-tertiary-bg, #f1f3f5);
}

.dash-sort[b-a0zb9jjj0g] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.dash-sort:hover[b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
}

.dash-caret[b-a0zb9jjj0g] {
    font-size: 0.7rem;
}

/* ---- Expiring — renew: one contract per full-width card (mirrors the open-leads cards) ---- */
.exp-cards[b-a0zb9jjj0g] {
    max-height: 640px;
    overflow-y: auto;
}

.exp-card[b-a0zb9jjj0g] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.exp-card:last-child[b-a0zb9jjj0g] {
    margin-bottom: 0;
}

.exp-head[b-a0zb9jjj0g] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Header: name + MSC on top, owner/expiry small below (left); renewal action floats right */
.exp-head-title[b-a0zb9jjj0g] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* Customer name renders as the pink link colour (like the Leads/Deals lists), bold via .cust-name */
.exp-title[b-a0zb9jjj0g] {
    font-size: 1.02rem;
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-title:hover[b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
}

/* Compact stacked header lines: pill + status + meta (line 2), the renewal action + salesperson (line 3). */
.exp-line2[b-a0zb9jjj0g],
.exp-line3[b-a0zb9jjj0g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.exp-sp[b-a0zb9jjj0g] {
    color: var(--bs-secondary-color, #6c757d);
}

/* Owner + expiry: small metadata under the customer name */
.exp-submeta[b-a0zb9jjj0g] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.exp-head-action[b-a0zb9jjj0g] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exp-renewal[b-a0zb9jjj0g] {
    max-width: 13rem;
}

/* Definite flex basis (not form-control's width:100% capped by max-width, which sized the header controls
   right to their edge and wrapped "My renewals only" to a second line); shrinks instead of forcing a wrap. */
.exp-search[b-a0zb9jjj0g] {
    flex: 0 1 18rem;
    min-width: 0;
}

.exp-inline[b-a0zb9jjj0g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.exp-label[b-a0zb9jjj0g] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
}

.exp-body[b-a0zb9jjj0g] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
}

.exp-contact[b-a0zb9jjj0g] {
    flex: 0 0 15rem;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}

.exp-link[b-a0zb9jjj0g] {
    color: var(--bs-body-color, #212529);
    text-decoration: none;
}

.exp-link:hover[b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
    text-decoration: underline;
}

/* Email renders as a real hyperlink (pink + underlined), like the leads/deals contact email; phone stays neutral */
.exp-link[href^="mailto:"][b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
    text-decoration: underline;
}

.exp-link[href^="mailto:"]:hover[b-a0zb9jjj0g] {
    color: var(--brand-charcoal, #4b4d52);   /* calm to charcoal on hover, no underline (matches .cust-name) */
    text-decoration: none;
}

.exp-details[b-a0zb9jjj0g] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.35rem 0.75rem;
    align-content: start;
}

.exp-details > div[b-a0zb9jjj0g] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 0.875rem;
}

/* Mobile: pin the renewals filter under the stacked top chrome (banner + action bar), the way the
   leads filter (.pf-filter) does, so the 90/60/30 chips + filters don't slide behind the top bars.
   Desktop leaves it in flow — there the table's own sticky header handles pinning. */
@media (max-width: 640.98px) {
    /* Tidy stacked layout: Filter (full row), Salesperson (full row), then a compact refine row of
       My Items (left) + the 90/60/30-day chips (right). !important overrides the d-flex utilities. */
    .exp-toolbar[b-a0zb9jjj0g] {
        position: sticky;
        top: var(--app-chrome-top, 7rem);
        z-index: 3;
        background: var(--bs-body-bg, #fff);
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem !important;
        align-items: end !important;
    }

    .exp-toolbar > .form-check[b-a0zb9jjj0g],
    .exp-toolbar > .ms-auto[b-a0zb9jjj0g] {
        align-self: end !important;
        margin-left: 0 !important;
    }

    /* Row 1 = Filter, row 2 = Salesperson (both full width); row 3 = My Items (left) + chips (right). */
    .exp-toolbar > .exp-search[b-a0zb9jjj0g]  { grid-column: 1 / -1; order: 1; }
    .exp-toolbar > .exp-spfield[b-a0zb9jjj0g] { grid-column: 1 / -1; order: 2; }
    .exp-toolbar > .form-check[b-a0zb9jjj0g]  { order: 3; justify-self: start; }
    .exp-toolbar > .ms-auto[b-a0zb9jjj0g]     { order: 4; justify-self: end; }
}

.exp-foot[b-a0zb9jjj0g] {
    padding: 0.4rem 0.7rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ===== Renewals row/table trial (desktop ≥ md) — mirrors the leads / pending-contracts tables ===== */
.exp-table[b-a0zb9jjj0g] {
    font-size: 0.85rem;
}

/* one <tbody> per renewal = main row + contact sub-row as a single unit (divider only after the group) */
.exp-table > tbody > tr > td[b-a0zb9jjj0g] {
    border-bottom-width: 0;
}

.exp-table > tbody > tr:last-child > td[b-a0zb9jjj0g] {
    border-bottom-width: var(--bs-border-width, 1px);
}

.exp-table > tbody:hover > tr > td[b-a0zb9jjj0g] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* contact sub-row: indented, like the leads call-text / pending DBA sub-row */
.exp-sub > td[b-a0zb9jjj0g] {
    padding-top: 0.05rem;
    padding-bottom: 0.4rem;
    padding-left: 2.2rem;
}

.exp-contactrow[b-a0zb9jjj0g] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.82rem;
}

.exp-table .exp-renewal[b-a0zb9jjj0g] {
    width: 9.5rem;
}

/* Sortable renewal column headers */
.exp-sort[b-a0zb9jjj0g] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.exp-sort:hover[b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
}

.exp-caret[b-a0zb9jjj0g] {
    color: var(--brand-pink, #cf4a9b);
    font-size: 0.7rem;
}

/* No left-edge accent and no per-section colour: those existed to tie a stacked section to its tile
   and to separate sections from each other. With one panel at a time and the active tile tinted, both
   jobs are already done — the stripe was just decoration. */
.dash-section[b-a0zb9jjj0g] {
    scroll-margin-top: calc(var(--app-chrome-top, 3.5rem) + 0.5rem);
}

/* Recent Confirms: subtle tint on just the +/- delta cell (desktop) / detail (mobile) — actual over the
   estimate = green, under = red. */
td.rc-up[b-a0zb9jjj0g],
.exp-details > .rc-up[b-a0zb9jjj0g] {
    color: var(--bs-success, #198754);
    font-weight: 600;
}

td.rc-down[b-a0zb9jjj0g],
.exp-details > .rc-down[b-a0zb9jjj0g] {
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

/* Year totals sit apart from the two status groups above them — give the band room to breathe on a
   phone, where everything is one narrow column. */
.snapshot-mobile .sm-section--totals td[b-a0zb9jjj0g] {
    padding-top: 1.35rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Filled status badges (Pending Drop is the only one that shows here) carry no border of their own,
   so as a <button> they picked up the browser's default button border — a grey hairline around the
   amber. Transparent rather than none, so filled and outline labels stay the same size. */
.snap-label.text-bg-warning[b-a0zb9jjj0g],
.snap-label.text-bg-success[b-a0zb9jjj0g],
.snap-label.text-bg-danger[b-a0zb9jjj0g],
.snap-label.text-bg-secondary[b-a0zb9jjj0g] {
    border: 1px solid transparent;
}

/* ===== Tile row as a tab strip =====
   The tiles select which section renders below (one at a time). The active one gets a filled brand
   underline + a lifted surface so the connection between "the number I clicked" and "the list I'm
   reading" is visible — an unselected tile is just the count, as before. */
.dash-tab[b-a0zb9jjj0g] {
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Hover has to colour the tab indicator too, not just the card border: .metric-tile:hover takes all
   four sides to charcoal, so leaving the 3px bottom light grey made the tile look like it had lost its
   bottom edge. */
.dash-tab:hover:not(.active)[b-a0zb9jjj0g] {
    border-bottom-color: var(--brand-charcoal, #4b4d52);
}

/* Violet, like every other selected state in the app. These tiles are role="tab" - pressing one changes
   which panel you are looking at and touches no record - which is the same thing Working / Parked, the
   120-90-60 horizon and the Trends metric chips do. Those went violet through .btn-group > .btn-primary;
   the tiles are not a button group, so the rule never reached them and the app ended up with two colours
   meaning "this tab is selected". Pink is left to mean the one action that matters on a screen. */
.dash-tab.active[b-a0zb9jjj0g] {
    border-bottom-color: var(--violet, #b66dff);
    background: var(--violet-050, #f3eaff);
}

.dash-tab.active .metric-value[b-a0zb9jjj0g] {
    color: var(--violet-deep, #7a3fb8);
}

/* "Next Month" opens a modal instead of switching panels — no tab affordance, so it can't be mistaken
   for one. */
.metric-tile--aside[b-a0zb9jjj0g] {
    border-bottom: 3px solid transparent;
}

/* ===== Tab strip stays anchored =====
   The whole point is navigation: scrolling 91 open leads and then having to scroll back up to switch
   panels would defeat it. The strip pins under the top chrome, and the two sticky layers INSIDE the
   panel (the leads filter, then its table header) are pushed down by its height — see app.css, which
   owns those offsets because the elements belong to a child component. */
.dash-tabs[b-a0zb9jjj0g] {
    position: sticky;
    top: var(--app-chrome-top, 3.5rem);
    scroll-margin-top: var(--app-chrome-top, 3.5rem);
    z-index: 4;
    background: var(--page-bg, #f5f6f8);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Mobile: the full tiles stack 2-up into a ~537px block — far too tall to pin. They collapse to a
   single row of compact chips that scrolls sideways, so the strip costs ~3rem instead of a third of
   the screen. */
@media (max-width: 640.98px) {
    /* Four equal columns, the same even split the desktop grid gives — no horizontal scroll, and the
       strip reads as one row of tabs rather than a left-packed list. The value stays stacked over the
       label (as on desktop) so each chip is only as wide as its longest line. */
    .dash-tabs[b-a0zb9jjj0g] {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    .dash-tabs > [class*="col-"][b-a0zb9jjj0g] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }

    .dash-tabs .metric-tile[b-a0zb9jjj0g] {
        padding: 0.3rem 0.4rem;
        text-align: center;
    }

    .dash-tabs .metric-value[b-a0zb9jjj0g] { font-size: 0.95rem; }

    .dash-tabs .metric-label[b-a0zb9jjj0g] {
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-tabs .metric-badge[b-a0zb9jjj0g] { display: none; }
}

/* The month band closes on its commission, so it gets a hairline rule to sit on - lighter than the
   2px the year total carries, since it subtotals a section rather than the card. */
.snapshot-mobile .snap-mcomm td[b-a0zb9jjj0g] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.45rem;
}

/* Mobile: Commission is what the year totals add up to, so it gets a totals rule rather than bold
   text alone — heavier than the section hairlines above it, the way a subtotal reads on paper. */
.snapshot-mobile .snap-total td[b-a0zb9jjj0g] {
    border-top: 2px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.5rem;
}

/* And Next Month sits apart from the total it follows, with room below it instead of hugging the
   card edge — the same breathing space the "TOTALS" heading gets above. */
.snapshot-mobile .snap-next td[b-a0zb9jjj0g] {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Next month's commission, now a row in the Business Snapshot instead of a tile. */
.snap-next td[b-a0zb9jjj0g] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.snap-next-btn[b-a0zb9jjj0g] {
    font-weight: 600;
    color: var(--act-positive-text, #256b55);
    text-decoration: none;
}

.snap-next-btn:hover[b-a0zb9jjj0g] {
    color: var(--act-positive, #26775f);
    text-decoration: underline;
}

/* Mobile chips use the short label ("Pending" not "Pending Contracts") so all four fit across a phone
   without swiping. */
.tab-label-short[b-a0zb9jjj0g] { display: none; }

@media (max-width: 640.98px) {
    .tab-label-full[b-a0zb9jjj0g] { display: none; }
    .tab-label-short[b-a0zb9jjj0g] { display: inline; }
}

/* Next Month gets the same rounded, indented treatment as the snapshot's status labels — it behaves
   like them (click to drill in), it just isn't a contract status, so it has its own money-green. */
.badge-money[b-a0zb9jjj0g] {
    background-color: #fff;
    border: 1px solid var(--act-positive-border, #d2e9e1);
    color: var(--act-positive-text, #256b55);
}

.badge-money:hover[b-a0zb9jjj0g] {
    background-color: var(--act-positive-bg, #ecf7f3);
    border-color: var(--act-positive, #26775f);
}

.snap-next-amt[b-a0zb9jjj0g] {
    font-weight: 600;
    color: var(--act-positive-text, #256b55);
    font-variant-numeric: tabular-nums;
}

/* Mobile: every panel fills at least the screen below the pinned strip.
   Sticky only LOOKS sticky when there is enough below it to scroll — Renewals and Leads run for
   thousands of pixels so the strip parks at the top, while Pending (9 rows) and Recent (10) ran out
   and behaved differently. A viewport-height floor makes all four feel identical: click a tile, the
   strip goes to the top and stays there. Content-dependent height above the floor is unaffected.
   100dvh (not 100vh) so the phone's collapsing address bar doesn't leave a gap. */
@media (max-width: 640.98px) {
    .dash-section[b-a0zb9jjj0g] {
        min-height: calc(100dvh - var(--app-chrome-top, 7rem) - var(--dash-tabs-h, 4.4rem));
        /* Scroll headroom. The floor alone left Recent Confirms with 13px of slack — enough to pin in
           a test, not enough to survive a phone whose address bar changes the viewport height. */
        margin-bottom: 4rem;
    }
}

/* Renewal dispositions sit under the customer name, mirroring the open-leads row. */
.exp-actions[b-a0zb9jjj0g] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

/* The renewals toolbar pins under the tab strip the way the leads filter does — it was static, so it
   scrolled away and left its table header floating with a gap where it used to be. */
.exp-toolbar[b-a0zb9jjj0g] {
    position: sticky;
    top: calc(var(--app-chrome-top, 3.5rem) + var(--dash-tabs-h, 5.5rem) - 1px);   /* -1px: overlap the tab strip rather than leave a hairline seam */
    z-index: 3;
    background: var(--bs-body-bg, #fff);
}

/* At-risk banding in the Pending Drop drill-down. The colour carries the reading — how much of the
   contract is still exposed, i.e. how early it dropped — so the percentage sits beside the money rather
   than in a column of its own. Tinted rather than filled: a table of solid red cells reads as an outage. */
.risk-pill[b-a0zb9jjj0g] {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .1rem .4rem;
    border-radius: .35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.risk-pct[b-a0zb9jjj0g] { font-size: .72rem; font-weight: 500; opacity: .85; }

/* No border: the tint alone carries the band, the way the expiry chip does. An outline drew the
   shape of something that already had a fill.
   The three bands read from the --act-* families, the same three colours the expiry chip and every
   semantic button use. They were hand-picked hex triples that happened to look close to those families
   but were not them - so a palette edit at the top of app.css moved everything except this table. */
.risk-hi[b-a0zb9jjj0g]  { background: var(--act-danger-bg);   color: var(--act-danger-text); }
.risk-mid[b-a0zb9jjj0g] { background: var(--act-warning-bg);  color: var(--act-warning-text); }
.risk-lo[b-a0zb9jjj0g]  { background: var(--act-positive-bg); color: var(--act-positive-text); }

/* Next Month modal: the per-year detail lines under New / Existing / True-up. They belong to the group
   row above, so no rule between them - just enough air to read as a sub-list. */
.nm-part td[b-a0zb9jjj0g] {
    border-top: 0;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* Money going back out. Red, and tabular so the minus signs line up down the column - the sign is the
   whole reason this figure is worth showing, and a proportional font hides it at the left edge. */
.snap-clawback[b-a0zb9jjj0g] {
    color: var(--act-danger-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/DealEdit.razor.rz.scp.css */
/* Label / value / fill styling is now GLOBAL (wwwroot/app.css). This file keeps only the
   deal-screen-specific bits below (section headers, confirm spotlight, verify flags, modal). */

/* Page header: customer name on its own line (truncates), then a row of status/renewed badges with the
   Delete + "Show All" actions pushed to the right — keeps the Show All button from wrapping into a tall box. */
.deal-title[b-zvkzm9gll9] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.deal-head-row[b-zvkzm9gll9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.deal-head-actions[b-zvkzm9gll9] {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* In-form section headers — distinct from field labels (bolder, darker, ruled) */
.section-head[b-zvkzm9gll9] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-charcoal, #4b4d52);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.2rem;
    margin: 0.85rem 0 0.65rem;
}
.section-sub[b-zvkzm9gll9] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

/* Confirm-flow spotlight: when the user sets Stage=Confirmed, draw the eye to the Confirmation fields
   in the matching success green (mirrors the green Confirmed stage button). */
.section-head.section-active[b-zvkzm9gll9] {
    color: var(--bs-success, #198754);
    border-bottom-color: var(--bs-success, #198754);
}
.row.confirm-active[b-zvkzm9gll9] {
    margin-left: 0;
    margin-right: 0;
    background: rgba(25, 135, 84, 0.07);
    border-left: 3px solid var(--bs-success, #198754);
    border-radius: 0 0.4rem 0.4rem 0;
    padding: 0.5rem 0.25rem 0.05rem 0.5rem;
}

/* Upstream email fields flagged during confirm so back-office can tick through the whole email */
.verify-field .form-label[b-zvkzm9gll9] {
    color: var(--bs-success, #198754);
}
.verify-field .form-label[b-zvkzm9gll9]::before {
    content: "●";
    margin-right: 0.3em;
    font-size: 0.6em;
    vertical-align: middle;
}
/* Gently green-tint the fields to verify (no heavy glow). The green label + bullet already mark each field;
   the one the cursor is in still gets the focus ring on top, so the active field pops. */
.verify-field[b-zvkzm9gll9]  .form-control:not(:focus),
.verify-field[b-zvkzm9gll9]  .form-select:not(:focus) {
    border-color: rgba(25, 135, 84, 0.5);
}

/* Required at this stage is marked with the app-wide .req asterisk (app.css), the same one the New Lead
   form uses. Nothing local: what was here before recoloured every required LABEL and tinted every
   required field BORDER in the stage colour - blue for Not Signed, mustard for Submitted - so a
   Submitted contract arrived as a wall of colour with the data competing against its own chrome. */

/* Commission Schedule card: match the compact text of the deal form (its default 1rem looked oversized). */
.cs-card[b-zvkzm9gll9] {
    font-size: 0.85rem;
}

/* …but keep the card header at the standard 1rem so it matches the Contract card's header. */
.cs-card .card-header[b-zvkzm9gll9] {
    font-size: 1rem;
}

/* Schedule row actions mirror the dashboard Open-Leads row buttons: compact soft-fill outline icon buttons —
   gray pencil (Edit), red X-circle (Void/cancel) — same SVGs as LeadsWorkspace. */
.cs-act[b-zvkzm9gll9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    line-height: 1;
}

/* Edit takes the neutral action tint. Void needs no override at all — .btn-outline-danger is tinted
   app-wide now (app.css); the old --bs-danger-bg-subtle override was beating it. */
.cs-act.btn-outline-secondary[b-zvkzm9gll9] {
    --bs-btn-color: var(--act-neutral);
    --bs-btn-bg: var(--act-neutral-bg);
    --bs-btn-border-color: var(--act-neutral-border);
    --bs-btn-hover-color: var(--act-neutral);
    --bs-btn-hover-bg: var(--act-neutral-bg-hover);
    --bs-btn-hover-border-color: var(--act-neutral-border-hover);
}

/* Confirm-from-email panel: paste box + reconciliation table */
.ce-panel[b-zvkzm9gll9] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.ce-paste[b-zvkzm9gll9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.35;
}
.ce-review th[b-zvkzm9gll9],
.ce-review td[b-zvkzm9gll9] {
    font-size: 0.8rem;
    padding: 0.28rem 0.5rem;
}
.ce-review th[b-zvkzm9gll9] {
    color: var(--bs-secondary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}
/* Action column: shrink to its content so "Use email value" never wraps. */
.ce-review td:last-child[b-zvkzm9gll9],
.ce-review th:last-child[b-zvkzm9gll9] {
    width: 1%;
    white-space: nowrap;
}
.ce-ok[b-zvkzm9gll9] {
    color: var(--bs-success, #198754);
    font-weight: 700;
}

/* ===== Save feedback at the button =====
   The success banner sits at the top of the page and this form is long, so after clicking Save the
   confirmation was often off-screen. The chip answers "did that work?" where the click happened, and
   the Dashboard link is there for the common case: saved the contract, done, going back. */
.save-ok[b-zvkzm9gll9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--act-positive-border, #b7e0d0);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: var(--act-positive-bg, #ecf7f3);
    color: var(--act-positive-text, #256b55);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    /* Fades out on its own: a "Saved" chip that lingers while you carry on editing starts lying. */
    animation: save-ok-fade-b-zvkzm9gll9 0.35s ease 7s forwards;
}

@keyframes save-ok-fade-b-zvkzm9gll9 {
    to { opacity: 0; visibility: hidden; }
}

/* The link outlives the chip — it's navigation, not status. */
.save-back[b-zvkzm9gll9] {
    margin-left: 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .save-ok[b-zvkzm9gll9] { animation: none; }
}

/* ===== Contract header on a phone =====
   The stage strip and BOX Confirm sit beside the contract number, which fits on a desktop and runs off
   the right edge of a phone — the last stage was cut in half and unreachable. Below 641px the header
   stacks, the strip takes the full width with equal-width chips, and the labels shrink to fit rather
   than wrapping to two lines (which made the chips tall as well as cramped). */
@media (max-width: 640.98px) {
    .deal-hdr[b-zvkzm9gll9] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .deal-hdr > div[b-zvkzm9gll9] {
        width: 100%;
        justify-content: flex-start !important;
    }

    .stage-switch[b-zvkzm9gll9] {
        width: 100%;
    }

    .stage-switch .btn[b-zvkzm9gll9] {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.25rem 0.15rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }
}
/* /Components/Pages/Deals.razor.rz.scp.css */
/* ===== Deals list — mirrors the LeadsWorkspace treatment (sortable sticky table + mobile cards),
   with the dashboard "Pending Contracts" column set and an indented DBA / internal-note sub-row. ===== */

/* Wider search field — carries the most-used filter (customer / MSCID / DBA) */
.ws-search[b-km9qe0pgny] {
    flex: 0 1 26rem;
    min-width: 0;
}

.ws-search .form-control[b-km9qe0pgny] {
    width: 100%;
}

/* Bounded scroll region so the column headers stay pinned while the rows scroll, and the wide table's
   horizontal scroll is contained here instead of on the page. */
.dl-scrollwrap[b-km9qe0pgny] {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
}

.dl-scrollwrap thead th[b-km9qe0pgny] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-table-bg, #f8f9fa);
}

/* Table text size is the app-wide default (.table in app.css). */

/* Customer name is the row's bold anchor everywhere (shared global .cust-name in app.css); the mobile
   card additionally recolours it charcoal — see .dc-head-title a.cust-name below. */

/* Status / problem / contract badges run a touch larger across the deals list (per request; may revisit) */
.dl-table .badge[b-km9qe0pgny],
.deal-card .badge[b-km9qe0pgny] {
    font-size: 0.78rem;
}

/* One <tbody> per deal = its main row + note sub-row as a single unit: no divider between them,
   one row divider only after the group's last row. */
.dl-table > tbody > tr > td[b-km9qe0pgny] {
    border-bottom-width: 0;
}

.dl-table > tbody > tr:last-child > td[b-km9qe0pgny] {
    border-bottom-width: var(--bs-border-width, 1px);
}

/* Hovering anywhere in a deal highlights the whole group together */
.dl-table > tbody:hover > tr > td[b-km9qe0pgny] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Note sub-row: indented under its deal, reads as an inline italic note (like the leads call text) */
.dl-sub > td[b-km9qe0pgny] {
    padding-top: 0.1rem;
    padding-bottom: 0.45rem;
    padding-left: 2.2rem;
}

.dl-noterow[b-km9qe0pgny] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Internal note = the primary italic text; DBA = a lighter italic prefix */
.dl-note[b-km9qe0pgny] {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--bs-blue, #0d6efd);   /* matches the dashboard Pending Contracts internal-note colour */
    white-space: pre-line;   /* dated notes are appended with newlines */
}

.dl-dba[b-km9qe0pgny] {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--bs-secondary-color, #6c757d);
}

/* Sortable column headers */
.dl-sort[b-km9qe0pgny] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.dl-sort:hover[b-km9qe0pgny] {
    color: var(--brand-pink, #cf4a9b);
}

.dl-caret[b-km9qe0pgny] {
    color: var(--brand-pink, #cf4a9b);
    font-size: 0.7rem;
}

/* Compact "Open" action — the soft-fill outline treatment from the leads row buttons */
.dl-act[b-km9qe0pgny] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.7rem;
    line-height: 1;
}

.dl-act.btn-outline-secondary[b-km9qe0pgny] {
    --bs-btn-bg: var(--bs-secondary-bg-subtle);
}

/* Legend swatches under the table */
.dl-swatch[b-km9qe0pgny] {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: 0.15rem;
}

.dl-swatch-info[b-km9qe0pgny] {
    background: var(--bs-info-bg-subtle, #cff4fc);
    border: 1px solid var(--bs-info-border-subtle, #9eeaf9);
}

.dl-swatch-danger[b-km9qe0pgny] {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border: 1px solid var(--bs-danger-border-subtle, #f1aeb5);
}

/* ===== Mobile (< md): one card per deal ===== */
.deal-card[b-km9qe0pgny] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: box-shadow 0.12s ease;
}

.deal-card:last-child[b-km9qe0pgny] {
    margin-bottom: 0;
}

.deal-card:hover[b-km9qe0pgny] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Full-card tint (mirrors the full-row tint on the table) */
.deal-card.dl-awaiting[b-km9qe0pgny] {
    background: var(--bs-info-bg-subtle, #cff4fc);
    border-color: var(--bs-info-border-subtle, #9eeaf9);
}

.deal-card.dl-delayed[b-km9qe0pgny] {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
}

.dc-head[b-km9qe0pgny] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.7rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* On a tinted card the header is transparent (shows the card tint); only its divider takes the tint colour */
.deal-card.dl-awaiting .dc-head[b-km9qe0pgny] {
    background: transparent;
    border-bottom-color: var(--bs-info-border-subtle, #9eeaf9);
}

.deal-card.dl-delayed .dc-head[b-km9qe0pgny] {
    background: transparent;
    border-bottom-color: var(--bs-danger-border-subtle, #f1aeb5);
}

.dc-head-title[b-km9qe0pgny] {
    flex: 1 1 auto;   /* fill the header so the status badge (ms-auto) floats to the card's right edge */
    min-width: 0;
}

.dc-owner[b-km9qe0pgny] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.dc-body[b-km9qe0pgny] {
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dc-details[b-km9qe0pgny] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.2rem 0.9rem;
    font-size: 0.85rem;
}

.dc-details > div[b-km9qe0pgny] {
    display: flex;
    flex-direction: column;
}

.dc-label[b-km9qe0pgny] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Pages/LeadLinks.razor.rz.scp.css */
/* Contract-ID pill, matching the /deals list. */
.ll-pill[b-vaw9jgcyne] {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-decoration: none;
}

.ll-pill:hover[b-vaw9jgcyne] {
    border-color: var(--act-neutral-border, #c9ccd1);
    text-decoration: underline;
}

.ll-search[b-vaw9jgcyne] {
    width: min(260px, 60vw);
}

.ll-card[b-vaw9jgcyne] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.5rem;
}
/* /Components/Pages/MetricsByMonth.razor.rz.scp.css */
.mbm-table th[b-7gfy3seblc],
.mbm-table td[b-7gfy3seblc] {
    font-size: 0.82rem;
    white-space: nowrap;
}

.mbm-table thead th[b-7gfy3seblc] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
    font-weight: 600;
}

/* Month drill-down link = a standard app link: brand pink, matched to the table text size, no underline,
   calming to charcoal on hover (like the customer-name / contact links elsewhere). */
.mbm-month[b-7gfy3seblc] {
    font-size: inherit;
    font-weight: 400;
    color: var(--brand-pink, #cf4a9b);
    text-decoration: none;
}

.mbm-month:hover[b-7gfy3seblc] {
    color: var(--brand-charcoal, #4b4d52);
    text-decoration: none;
}

/* Drillable numbers (Signed / Confirms) — same treatment as the month link beside them: brand pink so
   they read as clickable at a glance, no underline so a column of them stays calm. Plain figures were
   too quiet; underlined links were too loud. */
.mbm-drill[b-7gfy3seblc] {
    font-size: inherit;
    font-weight: 400;
    color: var(--brand-pink, #cf4a9b);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.mbm-drill:hover[b-7gfy3seblc] {
    color: var(--brand-charcoal, #4b4d52);
    text-decoration: none;
}

/* Month drill-down modal (no Bootstrap JS needed) */
.mbm-modal-backdrop[b-7gfy3seblc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.mbm-modal[b-7gfy3seblc] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    width: min(1080px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.mbm-modal-body[b-7gfy3seblc] {
    overflow: auto;
    padding: 0 1rem 1rem;
}

/* The inner .table-responsive would be its own scroll container and steal the sticky context — let the
   modal body be the sole scroller so the header sticks to the top of the modal. */
.mbm-modal .table-responsive[b-7gfy3seblc] {
    overflow: visible;
}

/* Header stays put while the deal list scrolls inside the modal. */
.mbm-modal .mbm-table thead th[b-7gfy3seblc] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Mobile: condense the month drill-down modal to Customer / Contract / Value / Commission so it doesn't
   scroll sideways.

   This was a list of :nth-child(2..7). Adding the Contract column shifted every index by one and silently
   changed which columns a phone hides - the header said one thing and the rule did another. The columns
   that collapse now say so themselves, with .mbm-hide-sm on the th and the td, so inserting a column
   cannot move the rule off its target. */
@media (max-width: 767.98px) {
    .mbm-modal .mbm-table .mbm-hide-sm[b-7gfy3seblc] {
        display: none;
    }
}

/* The customer column is capped and clips with an ellipsis. Every other cell is nowrap, so the table's
   minimum width was the sum of its longest values, and anything past the modal had nowhere to go but a
   horizontal scrollbar - 238px of it with a worst-case row (a 60-character legal name, seven-figure
   usage, four-figure money).

   16rem, measured, not guessed. A viewport-relative cap looks smarter and is wrong: above ~1125px the
   modal stops growing (min(1080px, 96vw)) while vw keeps going, so 24vw resolves past the space that
   actually exists and 13px of scroll comes back at 1500px. A fixed cap clears at both 1119px and 1500px.

   The cap goes on the cell and the clipping on the two blocks inside it, because text-overflow needs a
   block with a width to work against; a max-width on the td alone is advisory under table-layout: auto.
   Every row stays one line - the full name is in the title attribute and the row still links through. */
.mbm-modal .mbm-table td:first-child[b-7gfy3seblc] {
    max-width: 16rem;
}

.mbm-modal .mbm-table td:first-child > a[b-7gfy3seblc],
.mbm-modal .mbm-table td:first-child > div[b-7gfy3seblc] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: the 12-column Monthly Performance grid is unreadable on a phone. Keep only the headline
   columns — Month (1), Confirms (5), Total Value (7), Commission (12) — and hide the rest. Scoped to
   .mbm-perf so the drill-down modal table (also .mbm-table) keeps all its columns. */
@media (max-width: 767.98px) {
    .mbm-perf thead th:nth-child(2)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(3)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(4)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(6)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(8)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(9)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(10)[b-7gfy3seblc],
    .mbm-perf thead th:nth-child(11)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(2)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(3)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(4)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(6)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(8)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(9)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(10)[b-7gfy3seblc],
    .mbm-perf tbody td:nth-child(11)[b-7gfy3seblc] {
        display: none;
    }
}

.dl-caret[b-7gfy3seblc] {
    font-size: 0.7em;
    opacity: 0.85;
}

/* Monthly Performance: no overflow box on desktop, so its sticky headings pin to the PAGE (see the
   markup). On a phone the columns need somewhere to go, so the box comes back and sticky stops applying. */
.mbm-scroll[b-7gfy3seblc] {
    overflow-x: visible;
}

@media (max-width: 767.98px) {
    .mbm-scroll[b-7gfy3seblc] {
        overflow-x: auto;
    }
}

/* ===== Rolling 12-month trend chart ===== */
/* Bound the chart to the dashboard business-snapshot width (a centered column), not full-bleed —
   full width made the aspect-scaled SVG tall. The wide table below keeps its own full width. */
.chart-card[b-7gfy3seblc] {
    max-width: 64rem;
    margin-inline: auto;
}

/* Keep the chart legible on phones: it holds a readable min width and scrolls sideways instead of
   crushing 12 columns into a few hundred pixels. */
.chart-wrap[b-7gfy3seblc] {
    overflow-x: auto;
}

.chart-inner[b-7gfy3seblc] {
    min-width: 620px;
}

/* Mobile chart (trailing 6 months): drop the readable min-width so the 6 bars fill the phone width
   with no sideways scroll. */
.chart-inner--fit[b-7gfy3seblc] {
    min-width: 0;
}

.trend-chart[b-7gfy3seblc] {
    display: block;
    width: 100%;
    height: auto;
}

/* Value + month labels live in HTML (Razor reserves the SVG <text> tag); the bars span the full
   chart width with no side padding, so a flex row of equal cells lines each label up under its column.
   The value sits right under its bar (the data point), the month below it. */
.chart-values[b-7gfy3seblc] {
    display: flex;
    margin-top: 3px;
}

.chart-value[b-7gfy3seblc] {
    flex: 1 1 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-charcoal, #4b4d52);
    white-space: nowrap;
}

.chart-value.sel[b-7gfy3seblc] {
    color: var(--brand-pink-dark, #b23d86);
}

.chart-xlabels[b-7gfy3seblc] {
    display: flex;
    margin-top: 1px;
}

.chart-xlabel[b-7gfy3seblc] {
    flex: 1 1 0;
    text-align: center;
    font-size: 0.68rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.chart-xlabel.sel[b-7gfy3seblc] {
    color: var(--brand-pink-dark, #b23d86);
    font-weight: 600;
}

.chart-axis[b-7gfy3seblc] {
    stroke: var(--bs-border-color, #dee2e6);
    stroke-width: 1;
}

/* Whole column slot is the click target (opens the month's confirmed-deals modal). */
.chart-col[b-7gfy3seblc] {
    cursor: pointer;
}

.chart-hit[b-7gfy3seblc] {
    fill: transparent;
    pointer-events: all;   /* capture clicks across the whole column, not just the painted bar */
}

/* The same pink the row actions wear (.act-btn--action): a pale tint inside a pink edge, rather than twelve
   solid bars of it. A tint alone would vanish on a white card, so the border is what gives each bar its
   shape - exactly how those buttons hold theirs. Hover takes the button's hover tint; the selected month
   keeps that fill but darkens its edge, so "hovered" and "chosen" do not look the same. */
.chart-bar[b-7gfy3seblc] {
    fill: var(--brand-pink-050, #fbeef6);
    stroke: #f3cde5;
    stroke-width: 1;
    transition: fill 0.12s ease, stroke 0.12s ease;
}

.chart-col:hover .chart-bar[b-7gfy3seblc] {
    fill: #f7e0ef;
    stroke: var(--brand-pink, #f56ec4);
}

.chart-bar.sel[b-7gfy3seblc] {
    fill: #f7e0ef;
    stroke: var(--brand-pink-dark, #b23d86);
    stroke-width: 1.5;
}

/* Least-squares trend line drawn over the bars */
.chart-trend[b-7gfy3seblc] {
    stroke: var(--brand-charcoal, #4b4d52);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: none;
    opacity: 0.85;
}

/* Mobile: shrink the metric chips so the two-word labels (New Sales / Total Value) fit on one line
   instead of wrapping inside the buttons. */
@media (max-width: 640.98px) {
    .chart-chips .btn[b-7gfy3seblc] {
        font-size: 0.66rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        white-space: nowrap;
    }
}
/* /Components/Pages/NewDeal.razor.rz.scp.css */
/* Lightweight open-lead / create-lead modal (no Bootstrap JS needed) */
.deal-modal-backdrop[b-hfef4x1936] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.deal-modal[b-hfef4x1936] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    width: min(500px, 94vw);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
/* /Components/Pages/Reconciliation.razor.rz.scp.css */
/* One table, auto layout → each column sizes to its content ONCE, so every year-block lines up.
   (Outer-column edge spacing is handled app-wide in app.css for tables flush in a card.) */
.recon-table[b-d96mlll4d6] {
    width: 100%;   /* text size is the app-wide table default (.table in app.css) */
}

/* Sticky column headers as you scroll the page through the blocks. Pin them just beneath the fixed top
   chrome (the app-wide --app-chrome-top), so they never slide up under the banner. The table is
   desktop-only (mobile uses the card list below), where the chrome is a single 3.5rem bar. */
.recon-table thead th[b-d96mlll4d6] {
    position: sticky;
    top: var(--app-chrome-top, 3.5rem);
    z-index: 2;
    background: var(--bs-table-bg, #f8f9fa);
    white-space: nowrap;
}

/* Year-block section header row: the bucket label + its totals, visually separating the blocks */
.recon-table .recon-section td[b-d96mlll4d6] {
    background: var(--bs-tertiary-bg, #f2f2f4);
    border-top: 2px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* No divider above the very first block (it sits right under the header) */
.recon-table tbody.recon-block:first-of-type .recon-section td[b-d96mlll4d6] {
    border-top: 0;
}

/* Per-block subtotal row */
.recon-table .recon-subtotal td[b-d96mlll4d6] {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ===== Filter: tidy wrapping row on desktop, compact stacked groups on mobile ===== */
.recon-filter[b-d96mlll4d6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.recon-filter .rf-field[b-d96mlll4d6] {
    display: flex;
    flex-direction: column;
}

.recon-filter .rf-dates[b-d96mlll4d6] {
    display: flex;
    gap: 0.5rem;
}

.recon-filter .rf-actions[b-d96mlll4d6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 640.98px) {
    /* From + To share one row; Salesperson and the action buttons each take their own full-width row. */
    .recon-filter .rf-dates[b-d96mlll4d6] {
        flex: 1 1 100%;
    }

    .recon-filter .rf-dates .rf-field[b-d96mlll4d6] {
        flex: 1 1 0;
    }

    .recon-filter .rf-sp[b-d96mlll4d6] {
        flex: 1 1 100%;
    }

    .recon-filter .rf-actions[b-d96mlll4d6] {
        flex: 1 1 100%;
    }

    .recon-filter .rf-actions .btn-group[b-d96mlll4d6] {
        margin-left: auto;   /* push This month / YTD to the right, Run stays left */
    }
}

/* ===== Mobile card list (replaces the wide table under md) ===== */
.recon-cards .recon-group[b-d96mlll4d6] {
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.recon-cards .recon-group-head[b-d96mlll4d6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg, #f2f2f4);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.recon-cards .recon-line[b-d96mlll4d6] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color, #ececf0);
}

.recon-cards .recon-line:last-child[b-d96mlll4d6] {
    border-bottom: 0;
}

.recon-cards .recon-line-main[b-d96mlll4d6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.recon-cards .recon-amt[b-d96mlll4d6] {
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* Report cards — the shelf. Same surface language as the dashboard metric tiles, minus the tab behaviour. */
.rpt-card[b-lxp1zppgdd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid #e8e9ee;
    border-radius: 0.6rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.rpt-card:hover[b-lxp1zppgdd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 17, 20, 0.10);
    border-color: var(--brand-charcoal, #4b4d52);
    text-decoration: none;
}

.rpt-title[b-lxp1zppgdd] {
    font-weight: 700;
    color: var(--brand-charcoal, #4b4d52);
}

/* The date basis reads as part of the title, not as body text: it's what distinguishes this report
   from the one that counts the same contracts on their start date. */
.rpt-basis[b-lxp1zppgdd] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-pink-dark, #b23d86);
}

.rpt-desc[b-lxp1zppgdd] {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.45;
}
/* /Components/Pages/StatementReconcile.razor.rz.scp.css */
/* Sticky, scrollable table panes — headers stay put while the body scrolls. */
.tbl-scroll[b-9g6xj12v24] {
    max-height: 30rem;
    overflow: auto;
}
.tbl-scroll table[b-9g6xj12v24] {
    margin-bottom: 0;
    /* Sticky cells and COLLAPSED borders do not mix. With border-collapse the table owns the borders, so a
       sticky cell is painted at a rounded offset with its edges drawn elsewhere, and a hairline of the
       scrolling row shows through. Separate borders belong to the cell and travel with it. Bootstrap only
       sets a bottom border per cell, so nothing doubles up. */
    border-collapse: separate;
    border-spacing: 0;
}
/* Same treatment as the totals row, for the same reason — the header just hides it better, sitting
   against the card edge rather than over scrolling rows. Separate borders mean the rule under the
   header now travels with the cell instead of being left behind by the table. */
.tbl-scroll thead th[b-9g6xj12v24] {
    position: sticky;
    top: -1px;
    z-index: 2;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
/* Totals row stays pinned to the bottom of the scroll pane.
   bottom is -1px, not 0: row heights are fractional, so the sticky offset rounds and leaves a sub-pixel
   gap at the pane's bottom edge through which the scrolling row shows as a 1px seam. Pulling it down a
   pixel swallows the gap; the pixel lost off the bottom is inside the scroll container and invisible. */
.tbl-scroll tfoot td[b-9g6xj12v24] {
    position: sticky;
    bottom: -1px;
    z-index: 3;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-top: 2px solid var(--bs-border-color, #dee2e6);
    border-bottom: 0;
}

/* Sortable column headers */
th.sortable[b-9g6xj12v24] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover[b-9g6xj12v24] {
    color: var(--brand-pink, #cf4a9b);
}

/* One standardized chip vocabulary — outlined pill, white fill, colored text/border. */
.chip[b-9g6xj12v24] {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
}
.chip-success[b-9g6xj12v24]   { border-color: var(--bs-success, #198754);   color: var(--bs-success, #198754); }
.chip-danger[b-9g6xj12v24]    { border-color: var(--bs-danger, #dc3545);    color: var(--bs-danger, #dc3545); }
.chip-warning[b-9g6xj12v24]   { border-color: var(--bs-warning, #ffc107);   color: #8a6d00; }
.chip-info[b-9g6xj12v24]      { border-color: var(--bs-info, #0dcaf0);      color: #087990; }
.chip-secondary[b-9g6xj12v24] { border-color: var(--bs-secondary, #6c757d); color: var(--bs-secondary, #6c757d); }

/* MSC / contract chip that links to the deal */
a.chip-link[b-9g6xj12v24] {
    border-color: var(--brand-pink, #cf4a9b);
    color: var(--brand-pink, #cf4a9b);
    font-family: var(--bs-font-monospace, monospace);
}
a.chip-link:hover[b-9g6xj12v24] {
    background: var(--brand-pink, #cf4a9b);
    color: #fff;
}
/* /Components/RenewalLaunch.razor.rz.scp.css */
/* Renewal action modals — no-JS overlay. Moved here from Dashboard.razor.css when the modals became a
   shared component: scoped CSS follows the markup, so the rules had to travel with it. */
.rn-modal-backdrop[b-yck3vpdmf6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.rn-modal[b-yck3vpdmf6] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    width: min(560px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.rn-modal-sm[b-yck3vpdmf6] {
    width: min(460px, 94vw);
}

.rn-modal-body[b-yck3vpdmf6] {
    overflow: auto;
    padding: 1rem;
}

/* The two routes out of a contract page: stacked full-width targets rather than a button row, because
   each needs a line of explanation and they are not equal-weight choices you scan across. */
.rn-choices[b-yck3vpdmf6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rn-choice[b-yck3vpdmf6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: #fff;
}

.rn-choice:hover:not(:disabled)[b-yck3vpdmf6] {
    border-color: var(--act-positive-border, #d2e9e1);
    background: var(--act-positive-bg, #f3faf7);
}

.rn-choice:disabled[b-yck3vpdmf6] {
    opacity: 0.6;
}

.rn-choice-t[b-yck3vpdmf6] {
    font-weight: 600;
}

.rn-choice-d[b-yck3vpdmf6] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.3;
}