@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */

/* One-line footer, pinned to the bottom of the viewport.
   flex: 0 0 auto keeps it its natural height inside the .cc-layout column while .cc-content takes the
   remaining space and scrolls — so the bar never scrolls away, on a short page or a long one. */
.cc-footer[b-ymkv5utcwu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Right padding reserves the chat bubble's corner. ChatPanel is position:fixed at bottom/right 24px
       and 52px square, so it owns the last ~76px. While the footer scrolled with the page that collision
       was transient; pinned, the bubble would clip the tail of the company name and the SDS logo on
       every single portal page. Reserving the space here keeps the fix inside this layout rather than
       reaching across into another component's positioning. */
    padding: 0.55rem 5.5rem 0.55rem 1.25rem;
    font-size: 0.8rem;
    color: var(--cc-text-muted, #6b7280);
    background: var(--content-bg, #fff);
    border-top: 1px solid var(--cc-border, #e5e7eb);
}

    .cc-footer a[b-ymkv5utcwu] {
        color: inherit;
        text-decoration: none;
    }

    .cc-footer a:hover[b-ymkv5utcwu] {
        text-decoration: underline;
    }

    .cc-footer .cc-footer-sep[b-ymkv5utcwu] {
        margin: 0 0.5rem;
        opacity: 0.6;
    }

    /* Three zones: Stripe's badge left, policy links centred, our copyright hard right. The two ends
       size to their content and the links take what's left, so the bar reads as ours with Stripe
       credited rather than the two sharing a byline. */
    .cc-footer .cc-footer-links[b-ymkv5utcwu] {
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cc-footer .cc-footer-stripe[b-ymkv5utcwu] {
        flex: 0 0 auto;
        line-height: 0;
    }

    .cc-footer .cc-footer-copyright[b-ymkv5utcwu] {
        flex: 0 0 auto;
        text-align: right;
        white-space: nowrap;
    }

    .cc-footer .cc-footer-stripe img[b-ymkv5utcwu] {
        height: 22px;
        width: auto;
        opacity: 0.75;
        transition: opacity 0.15s ease;
    }

    .cc-footer .cc-footer-stripe:hover img[b-ymkv5utcwu] {
        opacity: 1;
    }

    /* SDS logo reads as part of the company name, so it shares the link and sits on the text baseline.
       It trails the name — leading, it broke "© 2026 … Software Development Services" mid-phrase. */
    .cc-footer .cc-footer-company img[b-ymkv5utcwu] {
        height: 16px;
        width: auto;
        opacity: 0.6;
        vertical-align: text-bottom;
        margin-left: 6px;
    }

    .cc-footer .cc-footer-company:hover img[b-ymkv5utcwu] {
        opacity: 0.85;
    }

/* Below ~900px three zones on one line genuinely don't fit, so the row wraps and everything centres
   rather than the copyright being clipped at the right edge. */
@media (max-width: 900px) {
    .cc-footer[b-ymkv5utcwu] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        /* Same bubble reservation as desktop — it stays bottom-right at every width, and a wrapped
           footer is taller, so its last row runs further under it. */
        padding: 0.6rem 5rem 0.6rem 1rem;
    }

        .cc-footer .cc-footer-links[b-ymkv5utcwu] {
            flex: 1 0 100%;
            white-space: normal;
        }

        .cc-footer .cc-footer-copyright[b-ymkv5utcwu] {
            text-align: center;
            white-space: normal;
        }
}

#blazor-error-ui[b-ymkv5utcwu] {
    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-ymkv5utcwu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Top nav bar ──────────────────────────────────────────────────── */
.cc-topnav[b-lxcswe8na0] {
    height: 58px;
    background: var(--sidebar-bg);
    display: flex;
    align-items: stretch;
    padding-left: 24px;
    padding-right: 20px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── Brand ────────────────────────────────────────────────────────── */
.cc-topnav-brand[b-lxcswe8na0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 24px;
    border-right: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
    text-decoration: none;
}

.cc-topnav-name[b-lxcswe8na0] {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
}

.cc-topnav-sub[b-lxcswe8na0] {
    color: rgba(255,255,255,.45);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 600;
}

/* ── Nav items (desktop) ──────────────────────────────────────────── */
.cc-topnav-items[b-lxcswe8na0] {
    display: flex;
    align-items: stretch;
    flex: 1;
    padding-left: 4px;
}

[b-lxcswe8na0] .cc-tn-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    height: 100%;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255,255,255,.62);
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}

[b-lxcswe8na0] .cc-tn-item i {
    font-size: 14px;
    flex-shrink: 0;
}

[b-lxcswe8na0] .cc-tn-item:hover {
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.07);
}

[b-lxcswe8na0] .cc-tn-item.active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--sidebar-active-bar);
}

[b-lxcswe8na0] .cc-tn-admin {
    opacity: .7;
}

/* Setup link — highlighted amber + pulsing when steps remain */
[b-lxcswe8na0] .cc-tn-setup-alert {
    color: #fbbf24 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-tn-setup-alert:hover {
    color: #fde68a !important;
    background: rgba(251,191,36,.12);
}

[b-lxcswe8na0] .cc-tn-setup-alert i {
    animation: setup-pulse-b-lxcswe8na0 2.4s ease-in-out infinite;
}

@keyframes setup-pulse-b-lxcswe8na0 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* Setup link — green when all required steps are complete */
[b-lxcswe8na0] .cc-tn-setup-done {
    color: #4ade80 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-tn-setup-done:hover {
    color: #86efac !important;
    background: rgba(74,222,128,.12);
}

/* ── Right section ────────────────────────────────────────────────── */
.cc-topnav-right[b-lxcswe8na0] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}

[b-lxcswe8na0] .cc-tn-icon {
    color: rgba(255,255,255,.55);
    font-size: 17px;
    padding: 6px 7px;
    text-decoration: none;
    transition: color .12s;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: var(--radius);
}

[b-lxcswe8na0] .cc-tn-icon:hover,
[b-lxcswe8na0] .cc-tn-icon.active { color: #fff; }

[b-lxcswe8na0] .cc-feedback-top-btn {
    color: rgba(255,255,255,.55);
}
[b-lxcswe8na0] .cc-feedback-top-btn:hover { color: #f4a261; }

.cc-topnav-avatar[b-lxcswe8na0] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-left: 4px;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

.cc-hamburger[b-lxcswe8na0] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: 4px;
    border-radius: var(--radius);
    transition: color .12s;
}
.cc-hamburger:hover[b-lxcswe8na0] { color: #fff; }

/* ── Mobile drawer ────────────────────────────────────────────────── */
/* Capped at the viewport and scrolls itself. Without the cap the drawer ran off the bottom of a short
   phone screen (552px open + the 58px bar ≈ 610px; an iPhone SE with its browser chrome, or any phone in
   landscape, has less), and the rows past the bottom edge were out of reach (prod, 2026-09-24): Guides,
   Settings, Send feedback, Sign out, and on a CSA farm one more.

   Two max-heights on purpose. 100vh first as the fallback; 100dvh second so a browser that understands it
   overrides. dvh matters here specifically: on iOS Safari and Chrome for Android 100vh is the LARGE
   viewport, measured as if the toolbars were hidden, so a vh-only cap still tucks the last row under the
   browser chrome. The 58px is this rule's own `top`, which is the bar's height; MobileDrawerScrollsTests
   pins all three together.

   overscroll-behavior: contain stops a flick past the drawer's end from scrolling the page behind it. */
.cc-mobile-drawer[b-lxcswe8na0] {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - 58px);
    max-height: calc(100dvh - 58px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.cc-mobile-drawer.open[b-lxcswe8na0] { display: block; }

[b-lxcswe8na0] .cc-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .1s;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
}

[b-lxcswe8na0] .cc-drawer-item i { font-size: 15px; flex-shrink: 0; }

[b-lxcswe8na0] .cc-drawer-item:hover {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
}

[b-lxcswe8na0] .cc-drawer-item.active {
    color: #fff;
    font-weight: 600;
    border-left-color: var(--sidebar-active-bar);
    background: rgba(255,255,255,.1);
}

/* The CSA page you are on, at the right of the drawer's CSA row (approved, M7): small, muted, and never
   the only way to tell where you are — the row itself is highlighted too. */
[b-lxcswe8na0] .cc-drawer-here {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
}

/* Setup link in mobile drawer — highlighted amber when steps remain */
[b-lxcswe8na0] .cc-drawer-setup-alert {
    color: #fbbf24 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-drawer-setup-alert:hover {
    color: #fde68a !important;
    background: rgba(251,191,36,.08);
}

[b-lxcswe8na0] .cc-drawer-setup-alert i {
    animation: setup-pulse-b-lxcswe8na0 2.4s ease-in-out infinite;
}

/* Setup link in mobile drawer — green when complete */
[b-lxcswe8na0] .cc-drawer-setup-done {
    color: #4ade80 !important;
    font-weight: 600;
}

[b-lxcswe8na0] .cc-drawer-setup-done:hover {
    color: #86efac !important;
    background: rgba(74,222,128,.08);
}

.cc-drawer-divider[b-lxcswe8na0] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
    padding: 12px 20px 4px;
}

.cc-drawer-footer[b-lxcswe8na0] {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 6px 0;
}

/* ::deep, because the first of the three footer rows (Settings) is a <NavLink>: Blazor's scope attribute is
   on this component's own elements, not on the <a> NavLink renders, so the plain scoped selector styled
   Send feedback and Sign out and never reached Settings. It rendered in the global link colour (orange)
   with no padding, out of line with the two rows under it. ::deep compiles to "[scope] .cc-drawer-settings",
   which matches all three through the drawer that wraps them. Same fix as every other NavLink rule here. */
[b-lxcswe8na0] .cc-drawer-settings {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255,255,255,.5);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .1s, color .1s;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
}
[b-lxcswe8na0] .cc-drawer-settings:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }

.cc-drawer-feedback-btn[b-lxcswe8na0] { }

.cc-drawer-signout:hover[b-lxcswe8na0] { color: #ff8a80 !important; }

/* ── Responsive ───────────────────────────────────────────────────────────────
   ONE breakpoint, at 1024px (#234 D.6).

   There used to be two, and the band between them was the problem: from 640px to 1023px the labels
   were hidden and the row stayed, so a merchant got nine unlabelled glyphs and nothing else. That is
   the TABLET range, and tablets are the primary device class this product is sold for — the title
   attribute added to compensate is a hover affordance, and a finger cannot hover.

   Below 1024px the drawer takes over instead, and every item in it carries its word. A labelled list
   behind one tap beats nine unlabelled icons in front of none. Reducing the item count so the labels
   genuinely fit is the better fix and belongs with the merchant/operator split (#234 D.0); this is
   the one that can ship today.

   Consequence worth stating: the drawer is now the whole navigation on a tablet, not a phone-only
   fallback, so anything missing from it is missing on a real device class. That is why CRM was added
   to the drawer in the same change. */
@media (max-width: 1023px) {
    .cc-topnav-items[b-lxcswe8na0]    { display: none; }
    .cc-hamburger[b-lxcswe8na0]       { display: flex; }
    .cc-topnav-subtitle[b-lxcswe8na0] { display: none; }
    /* ::deep because the gear is a <NavLink>, i.e. a child component: Blazor's scope attribute is on
       this component's own elements, not on the <a> NavLink renders, so the unscoped selector this
       replaced never matched and the gear never hid. It mattered little at 639px; it matters at
       1023px, where the drawer is the navigation and a stray gear beside the hamburger is the
       duplicate route this block exists to remove. Every other NavLink rule in this file is ::deep. */
    [b-lxcswe8na0] .cc-topnav-settings { display: none; }
    /* Guides hides with the gear, and for the same reason: below 1024px the drawer IS the navigation
       and it carries a labelled "Guides" row. Leaving an icon-only book beside the hamburger would be
       a second route to the same page with no word on it - exactly what the gear rule above removed.
       ::deep because NavLink renders the <a>, so the scope attribute is not on it. */
    [b-lxcswe8na0] .cc-topnav-guides { display: none; }
}

/* ── Phone width: the bar has to fit a global admin's tenant switcher ────────────────────────────────
   Measured 2026-09-24: with the TenantSwitcher in it, the right cluster was ~366px wide and could not
   shrink (flex-shrink: 0), so on a phone the bar ran past the right edge and .cc-layout's overflow:hidden
   cut off the HAMBURGER itself - the one control that opens the navigation at this width. That happened at
   every width up to 414px.

   Three things buy the room, and none of them removes a route:
   - the bar's padding tightens;
   - the avatar goes. It is an initial with the email as a hover tooltip and cursor: default, and a finger
     cannot hover, so on a phone it is decoration occupying a thumb's width of the bar;
   - the right cluster may shrink, which hands the squeeze to the switcher's label (it ellipsises, and
     TenantSwitcher.razor.css drops it on the narrowest phones) instead of to the hamburger. */
@media (max-width: 575.98px) {
    .cc-topnav[b-lxcswe8na0]        { padding-left: 16px; padding-right: 12px; }
    .cc-topnav-brand[b-lxcswe8na0]  { padding-right: 16px; }
    .cc-topnav-right[b-lxcswe8na0]  { padding-left: 8px; flex-shrink: 1; min-width: 0; }
    .cc-topnav-avatar[b-lxcswe8na0] { display: none; }
}

/* /Components/Layout/TenantSwitcher.razor.rz.scp.css */
.cc-tenant-switch[b-numjlv6pky] {
    position: relative;
    display: inline-flex;
}

.cc-tenant-btn[b-numjlv6pky] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: .35rem .6rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2dbd0);
    border-radius: 8px;
    color: var(--text, #1c2a1e);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s, background .12s;
}

.cc-tenant-btn:hover[b-numjlv6pky] { border-color: var(--accent, #d97746); }

.cc-tenant-label[b-numjlv6pky] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.cc-tenant-caret[b-numjlv6pky] { font-size: .65rem; opacity: .6; }

.cc-tenant-menu[b-numjlv6pky] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2dbd0);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    z-index: 1080;
    overflow: hidden;
}

.cc-tenant-search[b-numjlv6pky] { padding: .5rem; border-bottom: 1px solid var(--border, #e2dbd0); }

/* 340px, or less when the screen is shorter than the menu. A phone on its side is ~360px tall, and the
   menu opens 64px down with a search box on top, so a flat 340px ran the list's end off the screen. The
   first line is the fallback for a browser without min()/dvh; the last one it understands wins. */
.cc-tenant-list[b-numjlv6pky] {
    max-height: 340px;
    max-height: min(340px, calc(100vh - 140px));
    max-height: min(340px, calc(100dvh - 140px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .25rem;
}

.cc-tenant-opt[b-numjlv6pky] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: .4rem .55rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text, #1c2a1e);
    font-size: .82rem;
    cursor: pointer;
}

.cc-tenant-opt:hover[b-numjlv6pky] { background: var(--hover, #f4efe6); }

.cc-tenant-opt.active[b-numjlv6pky] {
    background: var(--accent, #d97746);
    color: #fff;
}

.cc-tenant-opt.active .cc-tenant-sub[b-numjlv6pky],
.cc-tenant-opt.active .text-muted[b-numjlv6pky] { color: rgba(255, 255, 255, .85) !important; }

.cc-tenant-name[b-numjlv6pky] { font-weight: 600; }
.cc-tenant-sub[b-numjlv6pky] { font-size: .72rem; color: var(--text-secondary, #4f6855); }

.cc-tenant-empty[b-numjlv6pky] {
    padding: .6rem .55rem;
    font-size: .8rem;
    color: var(--text-secondary, #4f6855);
}

/* Phone width. NavMenu lets its right cluster shrink at this breakpoint; these rules make the switcher the
   thing that gives way, so the hamburger beside it stays on screen (it was pushed off the bar at every
   width up to 414px, 2026-09-24).
   - The switch and its button may shrink below their content, and the label ellipsises into what is left.
     The caret goes: the building icon on a button already says "press me".
   - The menu stops hanging off the button's right edge. Anchored there, a 320px-wide menu on a button
     near the middle of a 375px screen started off the LEFT edge. Fixed under the bar, full width less a
     gutter, instead. */
@media (max-width: 575.98px) {
    .cc-tenant-switch[b-numjlv6pky] { min-width: 0; }
    .cc-tenant-btn[b-numjlv6pky]    { min-width: 0; max-width: 100%; }
    .cc-tenant-caret[b-numjlv6pky]  { display: none; }

    .cc-tenant-menu[b-numjlv6pky] {
        position: fixed;
        top: 64px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
}

/* The narrowest phones (320px): a label squeezed to two letters and an ellipsis tells nobody anything, so
   the button is the icon alone. The tenant being viewed is still in the button's accessible name and
   tooltip (TenantSwitcher.razor), and highlighted in the menu it opens. */
@media (max-width: 359.98px) {
    .cc-tenant-label[b-numjlv6pky] { display: none; }
}
/* /Components/Pages/CustomerDetail.razor.rz.scp.css */
/* Customer detail (docs/design/PORTAL_UI_STANDARD.md; mockup M11 for the phone layout). Tokens only —
   colours, radii and spacing come from app.css and portal-ui.css. One breakpoint: 767.98px. */

.ccd[b-r1twvk1kvi] { max-width: 1180px; }

.ccd-crumb[b-r1twvk1kvi] { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.ccd-crumb a[b-r1twvk1kvi] { color: var(--text-secondary); text-decoration: none; }
.ccd-crumb a:hover[b-r1twvk1kvi] { color: var(--text-primary); }

/* ── Header: avatar, name, contact, Edit ───────────────────────────────────────────────────────── */
.ccd-head[b-r1twvk1kvi] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.ccd-av[b-r1twvk1kvi] {
    width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cc-green-md); color: var(--text-inverse);
    font-weight: 700; font-size: var(--text-md);
}
.ccd-id[b-r1twvk1kvi] { min-width: 0; flex: 1 1 auto; }
.ccd-name[b-r1twvk1kvi] { font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.ccd-sub[b-r1twvk1kvi] { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.ccd-edit[b-r1twvk1kvi] { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; }

/* ── Two columns on a desktop: the summary on the left, history on the right ──────────────────── */
.ccd-grid[b-r1twvk1kvi] { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ccd-side[b-r1twvk1kvi], .ccd-main[b-r1twvk1kvi] { display: grid; gap: var(--space-4); min-width: 0; }

.ccd-card[b-r1twvk1kvi] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--card-pad-sm);
}
.ccd-card-h[b-r1twvk1kvi] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.ccd-card-h .ccd-h[b-r1twvk1kvi] { margin: 0; }
.ccd-h[b-r1twvk1kvi] {
    display: flex; align-items: center; gap: 2px;
    font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-3);
}
.ccd-muted[b-r1twvk1kvi] { font-size: var(--text-sm); color: var(--text-secondary); }
.ccd-empty[b-r1twvk1kvi] { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; margin: 0; }
.ccd-lab[b-r1twvk1kvi] {
    display: block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-secondary);
}

/* ── The summary card: balance, next box, actions (M11) ───────────────────────────────────────── */
.ccd-summary[b-r1twvk1kvi] { padding: 0; }
.ccd-sec[b-r1twvk1kvi] { padding: var(--space-3) var(--card-pad-sm); border-bottom: 1px solid var(--border); }
.ccd-sec:last-child[b-r1twvk1kvi] { border-bottom: 0; }

.ccd-bal[b-r1twvk1kvi] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ccd-amt[b-r1twvk1kvi] { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ccd-amt.is-owes[b-r1twvk1kvi]   { color: var(--danger-text); }
.ccd-amt.is-credit[b-r1twvk1kvi] { color: var(--success-text); }
.ccd-amt.is-paid[b-r1twvk1kvi]   { color: var(--text-secondary); }
.ccd-amt-note[b-r1twvk1kvi] { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }

.ccd-box[b-r1twvk1kvi] { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); flex-wrap: wrap; }
.ccd-code[b-r1twvk1kvi] {
    font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xl); letter-spacing: .02em;
    background: var(--code-bg); color: var(--text-primary); padding: 1px 10px; border-radius: var(--radius-md);
}
.ccd-code-sm[b-r1twvk1kvi] { font-size: var(--text-sm); padding: 0 6px; }
.ccd-box-where[b-r1twvk1kvi] { font-size: var(--text-sm); color: var(--text-secondary); }

.ccd-actions[b-r1twvk1kvi] { display: grid; gap: var(--space-2); }
.ccd-actions .btn[b-r1twvk1kvi] { width: 100%; min-height: var(--cc-tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.ccd-actions .ccd-adjust[b-r1twvk1kvi] { color: var(--text-secondary); font-weight: 600; }
.ccd-err[b-r1twvk1kvi] { font-size: var(--text-sm); color: var(--danger-text); }
.ccd-block[b-r1twvk1kvi] { width: 100%; min-height: var(--cc-tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }

/* ── Details ──────────────────────────────────────────────────────────────────────────────────── */
.ccd-kv[b-r1twvk1kvi] { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-sm); }
.ccd-kv dt[b-r1twvk1kvi] { color: var(--text-muted); font-weight: 500; }
.ccd-kv dd[b-r1twvk1kvi] { margin: 0; overflow-wrap: anywhere; }
.ccd-note[b-r1twvk1kvi] {
    display: flex; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

/* ── History: a readable list, one row per movement (CcGrid replaces it — see the TODO) ───────── */
.ccd-repair[b-r1twvk1kvi] { margin-left: auto; padding: 0; min-height: 32px; }
.ccd-hist[b-r1twvk1kvi] { list-style: none; margin: 0; padding: 0; }
.ccd-hist-row[b-r1twvk1kvi] {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    grid-template-areas: "when what amt" "when what after";
    column-gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
}
.ccd-hist-row:last-child[b-r1twvk1kvi] { border-bottom: 0; }
.ccd-hist-when[b-r1twvk1kvi]  { grid-area: when; color: var(--text-secondary); white-space: nowrap; }
.ccd-hist-what[b-r1twvk1kvi]  { grid-area: what; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); min-width: 0; }
.ccd-hist-note[b-r1twvk1kvi]  { overflow-wrap: anywhere; }
.ccd-hist-by[b-r1twvk1kvi]    { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.ccd-hist-amt[b-r1twvk1kvi]   { grid-area: amt; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccd-hist-after[b-r1twvk1kvi] { grid-area: after; text-align: right; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* ── Boxes and orders ─────────────────────────────────────────────────────────────────────────── */
.ccd-orders[b-r1twvk1kvi] { list-style: none; margin: 0; padding: 0; }
.ccd-orders li + li[b-r1twvk1kvi] { border-top: 1px solid var(--border); }
.ccd-order[b-r1twvk1kvi] {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--cc-tap); padding: var(--space-2) 0;
    color: var(--text-primary); text-decoration: none; font-size: var(--text-sm);
}
.ccd-order:hover[b-r1twvk1kvi] { color: var(--text-primary); background: var(--content-bg); }
.ccd-order-when[b-r1twvk1kvi] { width: 104px; flex: 0 0 auto; color: var(--text-secondary); }
.ccd-order-what[b-r1twvk1kvi] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.ccd-order-go[b-r1twvk1kvi] { color: var(--text-muted); }

/* ── Phone (plan U7, mockup M11): one column, summary first, 44px targets ─────────────────────── */
@media (max-width: 767.98px) {
    .ccd-head[b-r1twvk1kvi] { margin-bottom: var(--space-4); }
    .ccd-av[b-r1twvk1kvi] { width: 42px; height: 42px; font-size: var(--text-base); }
    .ccd-name[b-r1twvk1kvi] { font-size: var(--text-xl); }
    .ccd-edit[b-r1twvk1kvi] { min-height: var(--cc-tap); min-width: var(--cc-tap); justify-content: center; }
    .ccd-edit span[b-r1twvk1kvi] { display: none; }

    .ccd-grid[b-r1twvk1kvi] { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .ccd-amt[b-r1twvk1kvi] { font-size: var(--text-xl); }

    .ccd-hist-row[b-r1twvk1kvi] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "what amt" "when after";
        row-gap: 2px;
    }
    .ccd-hist-when[b-r1twvk1kvi] { font-size: var(--text-xs); }
    .ccd-repair[b-r1twvk1kvi] { min-height: var(--cc-tap); }
    .ccd-order-when[b-r1twvk1kvi] { width: auto; }
}
/* /Components/Pages/Customers.razor.rz.scp.css */
/* Customers (mockup M8). The grid itself is CcGrid's; these are the page's own header and cell content. */

.ccm-head[b-qn4rscwvv8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ccm-lede[b-qn4rscwvv8] {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 2px 0 0;
    max-width: 760px;
}

.ccm-actions[b-qn4rscwvv8] { display: flex; gap: 8px; flex-wrap: wrap; }
.ccm-actions .btn[b-qn4rscwvv8] { display: inline-flex; align-items: center; }

.ccm-name[b-qn4rscwvv8] { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.ccm-name:hover[b-qn4rscwvv8] { text-decoration: underline; }

/* Money that is owed reads as a debt; credit reads as the merchant's word for it, never a minus sign. */
.ccm-owe[b-qn4rscwvv8]    { color: var(--danger-text);  font-weight: 600; font-variant-numeric: tabular-nums; }
.ccm-credit[b-qn4rscwvv8] { color: var(--success-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.ccm-bal-f[b-qn4rscwvv8] { min-width: 150px; text-align: left; }

/* The phone card's primary action: a 44px target (plan §U7 rule 8). */
.ccm-pay[b-qn4rscwvv8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 13.5px;
    padding-left: 14px;
    padding-right: 14px;
    background: #fff;
}

@media (max-width: 767.98px) {
    .ccm-actions .btn[b-qn4rscwvv8] { min-height: 44px; }
}
/* /Components/Pages/SharePlans.razor.rz.scp.css */
/* SharePlans.razor — the New share panel (docs/design/PORTAL_UI_STANDARD.md; mockup M5).

   Scoped to this page: the detail/edit view's own pricing table is a separate stream's territory and is
   NOT touched by this stylesheet (it has no cc-newshare-* classes to match). Phone breakpoint matches the
   Portal-wide one pinned by PortalUiStylesheetTests (768px, @media (max-width: 767.98px)) even though this
   file is not itself scanned by that test — new UI should still agree with the one everybody else uses. */

.cc-newshare-section[b-dq5rm1i13x] {
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--cc-muted, #6c757d);
}

.cc-th-sub[b-dq5rm1i13x] {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--cc-muted, #6c757d);
}

/* ── Default box: an editable list of crops (U2 item 9, decision D2) ─────────────────────────────── */

.cc-default-box-rows[b-dq5rm1i13x] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.cc-default-box-row[b-dq5rm1i13x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-default-box-name[b-dq5rm1i13x] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-default-box-qty[b-dq5rm1i13x] {
    width: 4.5rem;
    flex: 0 0 auto;
}

.cc-default-box-unit[b-dq5rm1i13x] {
    /* Read-only text (independent review of #538, must-fix 3 — no per-component Unit column to save one
       into), not an input: min-width rather than a fixed width so it never truncates a longer unit word. */
    min-width: 3rem;
    flex: 0 0 auto;
    color: var(--cc-muted, #6c757d);
    font-size: 0.875rem;
    text-align: right;
}

.cc-default-box-remove[b-dq5rm1i13x] {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.cc-default-box-add[b-dq5rm1i13x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-default-box-add-btn[b-dq5rm1i13x] {
    flex: 0 0 auto;
}

.cc-default-box-candidates[b-dq5rm1i13x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.cc-default-box-candidates button[b-dq5rm1i13x] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── The pricing table becomes one card per site below 768px (U7 rule 2; U2 item 8) ─────────────────
   Each <td> carries data-cc-label (set from the razor markup) so its own value stays legible without a
   column header row, the same technique CcGrid's own phone card layout uses for the same reason. */

@media (max-width: 767.98px) {
    .cc-newshare-sites[b-dq5rm1i13x],
    .cc-newshare-sites thead[b-dq5rm1i13x],
    .cc-newshare-sites tbody[b-dq5rm1i13x],
    .cc-newshare-sites tr[b-dq5rm1i13x],
    .cc-newshare-sites td[b-dq5rm1i13x] {
        display: block;
        width: 100%;
    }

    .cc-newshare-sites thead[b-dq5rm1i13x] {
        position: absolute;
        left: -9999px; /* keep the headers for a screen reader; the labels below carry them visually */
    }

    .cc-newshare-sites tr[b-dq5rm1i13x] {
        border: 1px solid var(--cc-border, #dee2e6);
        border-radius: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.625rem;
    }

    .cc-newshare-sites td[b-dq5rm1i13x] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.3rem 0;
        text-align: right;
        border: none;
    }

    .cc-newshare-sites td[data-cc-label][b-dq5rm1i13x]::before {
        content: attr(data-cc-label);
        font-weight: 600;
        text-align: left;
        flex: 0 0 auto;
    }

    /* The "Site" cell (checkbox + name + badge) reads top to bottom, not as a label/value pair. */
    .cc-newshare-sites td[data-cc-label="Site"][b-dq5rm1i13x] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .cc-newshare-sites td[data-cc-label="Site"][b-dq5rm1i13x]::before {
        display: none;
    }

    .cc-newshare-sites .input-group[b-dq5rm1i13x] {
        max-width: 9rem;
    }
}
/* /Components/Shared/CcGrid.razor.rz.scp.css */
/* CcGrid — the approved M1/M8/M9 grid, on the Portal tokens (app.css :root).

   Scoped CSS: elements CcGrid.razor draws carry its scope attribute, including the header templates it
   hands QuickGrid. The <table>, <th> and <td> are QuickGrid's own and do not, so they are reached with
   ::deep from .ccg-scroll. Cell CONTENT belongs to the page that declared the column and is styled there. */

/* ── Card, count bar, chips ─────────────────────────────────────────────── */
.ccg-card[b-k7clv0zgb9] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    margin-bottom: 16px;
}

.ccg-bar[b-k7clv0zgb9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    min-height: 52px;
}

.ccg-count[b-k7clv0zgb9] { font-size: 13px; color: var(--text-secondary); }
.ccg-count b[b-k7clv0zgb9] { color: var(--text-primary); font-weight: 700; }

.ccg-chips[b-k7clv0zgb9] { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }

.ccg-chip[b-k7clv0zgb9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-light);
    border: 1px solid #f3cdb8;
    border-radius: var(--radius-full);
    padding: 2px 4px 2px 10px;
}
.ccg-chip button[b-k7clv0zgb9] {
    border: 0;
    background: none;
    color: inherit;
    padding: 0 4px;
    line-height: 1;
    font-size: 14px;
    min-width: 24px;
    min-height: 24px;
}

.ccg-clear[b-k7clv0zgb9] {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ccg-clear:hover[b-k7clv0zgb9] { color: var(--text-primary); }

.ccg-loading[b-k7clv0zgb9] { font-size: 12.5px; color: var(--text-muted); }
.ccg-toolbar[b-k7clv0zgb9] { margin-left: auto; display: flex; gap: 8px; }

.ccg-status[b-k7clv0zgb9] { padding: 16px; font-size: 13px; color: var(--text-muted); font-style: italic; }

.ccg-error[b-k7clv0zgb9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 16px;
    padding: 10px 14px;
    background: var(--danger-light);
    color: var(--danger-text);
    border: 1px solid #f3c2c2;
    border-radius: var(--radius);
    font-size: 13px;
}
.ccg-error .btn[b-k7clv0zgb9] { margin-left: auto; background: #fff; }

.ccg-empty[b-k7clv0zgb9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
}

/* ── The table (QuickGrid's) ────────────────────────────────────────────── */
.ccg-scroll[b-k7clv0zgb9] { overflow-x: auto; }
/* A range popover is open: stop clipping it. overflow-x:auto forces overflow-y to auto, so with a few rows
   (or "no matches") the popover's lower half vanished into an inner scrollbar. The table cannot scroll
   sideways while the popover is up, which is the lesser cost. */
.ccg-scroll.ccg-scroll-pop[b-k7clv0zgb9] { overflow: visible; }

.ccg-scroll[b-k7clv0zgb9]  table.ccg-table { width: 100%; border-collapse: collapse; }

.ccg-scroll[b-k7clv0zgb9]  table.ccg-table.loading tbody { opacity: .55; transition: opacity .15s; }

.ccg-scroll[b-k7clv0zgb9]  .ccg-table thead th {
    padding: 0;
    text-align: left;
    vertical-align: top;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* QuickGrid pads a short last page with empty rows so its height does not jump. The approved design ends
   the table at the last real row, so those padding rows (the only rows with no aria-rowindex) are hidden. */
.ccg-scroll[b-k7clv0zgb9]  .ccg-table tbody tr:not([aria-rowindex]) { display: none; }

.ccg-scroll[b-k7clv0zgb9]  .ccg-table tbody td {
    padding: 10px 16px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ccg-scroll[b-k7clv0zgb9]  .ccg-table tbody tr[aria-rowindex]:hover { background: var(--content-bg); }
.ccg-scroll[b-k7clv0zgb9]  .ccg-table tbody tr[aria-rowindex]:last-of-type td { border-bottom: 0; }

.ccg-scroll[b-k7clv0zgb9]  .ccg-table .col-header-content { display: block; }
.ccg-scroll[b-k7clv0zgb9]  .ccg-table .text-end .ccg-h { justify-content: flex-end; }
.ccg-scroll[b-k7clv0zgb9]  .ccg-table td.ccg-actions { text-align: right; white-space: nowrap; }

/* Title row of the header cell. */
.ccg-h[b-k7clv0zgb9] { display: flex; align-items: center; padding: 9px 8px 8px; min-height: 34px; }
th:first-child .ccg-h[b-k7clv0zgb9] { padding-left: 16px; }

.ccg-sort[b-k7clv0zgb9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.ccg-sort i[b-k7clv0zgb9] { font-size: 11px; color: #a9b5ac; }
.ccg-sort.on[b-k7clv0zgb9] { color: var(--text-primary); }
.ccg-sort.on i[b-k7clv0zgb9] { color: var(--accent-strong); }
.ccg-sort:focus-visible[b-k7clv0zgb9] { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* The filter row: the lower half of every header cell. Its top rule is continuous across the table
   because every cell draws it, filterable or not. */
.ccg-f[b-k7clv0zgb9] {
    position: relative;
    padding: 8px 8px 10px;
    border-top: 1px solid var(--border);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    min-height: 49px;
}
th:first-child .ccg-f[b-k7clv0zgb9] { padding-left: 12px; }

/* ::deep so a page's Custom filter control (drawn in the page's own scope) gets the same size as the
   grid's own — the Balance select on Customers is one. */
.ccg-f[b-k7clv0zgb9]  .form-control,
.ccg-f[b-k7clv0zgb9]  .form-select,
.ccg-fbtn[b-k7clv0zgb9] {
    height: 30px;
    font-size: 12.5px;
    padding-top: 4px;
    padding-bottom: 4px;
    min-width: 0;
    width: 100%;
}
.ccg-f[b-k7clv0zgb9]  .form-control { padding-left: 9px; padding-right: 9px; }
/* TODO(#511): the select's right padding (text under the chevron) is fixed globally in app.css by #511;
   no scoped copy of that fix here. */
.ccg-f[b-k7clv0zgb9]  .form-select { padding-left: 9px; }
.ccg-f[b-k7clv0zgb9]  .input-group-text { height: 30px; font-size: 12px; padding: 4px 8px; }
/* An input inside an input group shares the row with its label; the full-width rule above must not push
   it onto a line of its own. */
.ccg-f[b-k7clv0zgb9]  .input-group > .form-control { width: 1%; flex: 1 1 auto; }

.ccg-fbtn[b-k7clv0zgb9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text-muted);
    padding-left: 9px;
    padding-right: 6px;
    white-space: nowrap;
    text-align: left;
    min-width: 120px;
}
.ccg-fbtn .v[b-k7clv0zgb9] { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.is-on[b-k7clv0zgb9],
.ccg-f[b-k7clv0zgb9]  .is-on,
.ccg-sheet-b[b-k7clv0zgb9]  .is-on {
    border-color: var(--accent) !important;
    background-color: var(--accent-light) !important;
    color: var(--accent-strong) !important;
    font-weight: 600;
}

/* Range popover under a date/number range button. Anchored to the cell's RIGHT edge: range filters sit in
   the right-hand columns (dates, money), and a popover anchored left ran off the table's edge. */
.ccg-pop[b-k7clv0zgb9] {
    position: absolute;
    top: 42px;
    right: 8px;
    /* #510's z-index scale (portal-ui.css): a menu-like overlay within the page. */
    z-index: var(--z-dropdown);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 8px;
    align-items: center;
    width: 250px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ccg-pop-f[b-k7clv0zgb9] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

/* ── Footer and pager ───────────────────────────────────────────────────── */
.ccg-foot[b-k7clv0zgb9] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ccg-foot b[b-k7clv0zgb9] { color: var(--text-primary); }

.ccg-rpp[b-k7clv0zgb9] { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ccg-rpp .form-select[b-k7clv0zgb9] {
    width: auto;
    height: 30px;
    font-size: 12.5px;
    padding-top: 3px;
    padding-bottom: 3px;
    /* TODO(#511): room for the chevron comes from #511's global .form-select fix in app.css. */
}

.ccg-pager[b-k7clv0zgb9] { display: inline-flex; gap: 4px; margin-left: auto; }
.ccg-pg[b-k7clv0zgb9] {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text-primary);
    font-size: 12.5px;
}
.ccg-pg.on[b-k7clv0zgb9] { background: var(--cc-green); border-color: var(--cc-green); color: #fff; font-weight: 700; }
.ccg-pg:disabled[b-k7clv0zgb9] { color: #b9c2bb; }

/* ── Phone: card list ───────────────────────────────────────────────────── */
.ccg-pm-tools[b-k7clv0zgb9] { display: flex; gap: 8px; margin-bottom: 8px; }
.ccg-pm-tools .input-group[b-k7clv0zgb9] { flex: 1; }
.ccg-pm-tools .btn[b-k7clv0zgb9],
.ccg-pm-tools .form-control[b-k7clv0zgb9],
.ccg-pm-tools .input-group-text[b-k7clv0zgb9] { min-height: 44px; }
.ccg-filter-btn[b-k7clv0zgb9] { white-space: nowrap; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }

.ccg-pm-sort[b-k7clv0zgb9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ccg-pm-sort .ccg-count[b-k7clv0zgb9] { margin-right: auto; }
.ccg-pm-sort-label[b-k7clv0zgb9] { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
/* 44px: a phone target (plan §U7 rule 8). */
.ccg-pm-sort .form-select[b-k7clv0zgb9] { width: auto; min-height: 44px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; }

.ccg-phone .ccg-chips[b-k7clv0zgb9] { margin-bottom: 10px; }
/* The ✕ is a 44px target without making the chip 44px tall: the hit area overhangs the chip. */
.ccg-phone .ccg-chip button[b-k7clv0zgb9] { min-width: 44px; min-height: 44px; margin: -12px -8px -12px -6px; }

.ccg-pm-list[b-k7clv0zgb9] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* The whole card is the link to the row (the title's ::after covers it), so a card with no action - every
   "Paid up" member - is one 60px+ target rather than a 24px word. The action row sits above the overlay. */
.ccg-pm-row[b-k7clv0zgb9] { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ccg-pm-row:last-child[b-k7clv0zgb9] { border-bottom: 0; }
.ccg-r1[b-k7clv0zgb9] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ccg-nm[b-k7clv0zgb9] { font-weight: 700; font-size: 14px; color: var(--text-primary); text-decoration: none; min-height: 24px; }
a.ccg-nm:hover[b-k7clv0zgb9] { text-decoration: underline; }
a.ccg-nm[b-k7clv0zgb9]::after { content: ''; position: absolute; inset: 0; }
.ccg-st[b-k7clv0zgb9] { flex: 0 0 auto; }
.ccg-r2[b-k7clv0zgb9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ccg-r3[b-k7clv0zgb9] { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.ccg-go[b-k7clv0zgb9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: auto;
    text-decoration: none;
}

.ccg-pm-more[b-k7clv0zgb9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.ccg-pm-more .btn[b-k7clv0zgb9] { min-height: 44px; font-size: 14px; background: #fff; }

.ccg-phone .ccg-error[b-k7clv0zgb9],
.ccg-phone .ccg-empty[b-k7clv0zgb9] { margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.ccg-phone .ccg-error[b-k7clv0zgb9] { background: var(--danger-light); }

/* ── Phone: filter sheet ──────────────────────────────────────────────────
   The sheet itself (backdrop, bottom-sheet shape, focus, z-index, footer) is #510's ModalShell. These are
   only the filter sections inside it. */
.ccg-sheet-b[b-k7clv0zgb9] { padding: 10px 0 0; }
.ccg-sheet-b[b-k7clv0zgb9]  .form-control,
.ccg-sheet-b[b-k7clv0zgb9]  .form-select { min-height: 44px; }

.ccg-fs-sec[b-k7clv0zgb9] { margin-bottom: 18px; }
.ccg-fs-lab[b-k7clv0zgb9] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ccg-opts[b-k7clv0zgb9] { display: flex; flex-wrap: wrap; gap: 8px; }
.ccg-oc[b-k7clv0zgb9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: #fff;
    font-size: 13.5px;
    color: var(--text-primary);
}
.ccg-oc.on[b-k7clv0zgb9] { background: var(--cc-green); border-color: var(--cc-green); color: #fff; font-weight: 600; }

.ccg-range[b-k7clv0zgb9] { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; font-size: 13px; }
/* /Components/Shared/CustomerEditorPanel.razor.rz.scp.css */
/* Add / Edit customer (mockup M8). Layout comes from the shared panel, section and FormField styles in
   css/portal-ui.css and Bootstrap's grid; only the two section-level link buttons need anything here. */
.cce-sec-act[b-m69yfft4h0] {
    margin-left: auto;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-secondary);
}

.cce-add[b-m69yfft4h0] {
    padding-left: 0;
    min-height: var(--cc-tap);
    color: var(--accent-strong);
    font-weight: 600;
}
/* /Components/Shared/PickupDayPicker.razor.rz.scp.css */
/* PickupDayPicker — drawn from the approved mockups M1 (popover), M1 "Other day…" (sheet) and M6 (phone
   chips). Phone-first rules are the ones under the 768px query; the desktop button and popover are the
   base. Both layouts are in the markup and CSS shows one. */

.pdp-root[b-j6ukn6r6w9] { position: relative; }

/* ── Which layout ─────────────────────────────────────────── */
.pdp-phone[b-j6ukn6r6w9] { display: none; }
@media (max-width: 767.98px) {
    .pdp-desk[b-j6ukn6r6w9]  { display: none; }
    .pdp-phone[b-j6ukn6r6w9] { display: block; }
}

.pdp-lab[b-j6ukn6r6w9] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* ── Desktop: the button ─────────────────────────────────── */
.pdp-btn[b-j6ukn6r6w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 260px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    padding: 0 12px;
    font-size: 13.5px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.pdp-btn .pdp-val[b-j6ukn6r6w9] { font-weight: 600; }
.pdp-btn .pdp-c[b-j6ukn6r6w9] { color: var(--text-muted); font-size: 12.5px; margin-left: auto; }
.pdp-btn .pdp-chev[b-j6ukn6r6w9] { color: var(--text-muted); font-size: 12px; }
.pdp-btn .pdp-c + .pdp-chev[b-j6ukn6r6w9] { margin-left: 0; }
.pdp-btn .pdp-val + .pdp-chev[b-j6ukn6r6w9] { margin-left: auto; }
.pdp-btn.open[b-j6ukn6r6w9],
.pdp-btn:focus-visible[b-j6ukn6r6w9] { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; }

/* ── Desktop: the popover ────────────────────────────────── */
.pdp-scrim[b-j6ukn6r6w9] { position: fixed; inset: 0; z-index: 1070; background: transparent; }
.pdp-pop[b-j6ukn6r6w9] {
    position: absolute;
    z-index: 1080;
    top: calc(100% + 6px);
    left: 0;
    width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 36px rgba(17, 26, 20, .18), 0 2px 6px rgba(17, 26, 20, .06);
    padding: 14px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}
.pdp-chips[b-j6ukn6r6w9] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.pdp-chip[b-j6ukn6r6w9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 9px;
    font-size: 12.5px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
}
.pdp-chip small[b-j6ukn6r6w9] { color: var(--text-muted); font-size: 11.5px; }
.pdp-chip.on[b-j6ukn6r6w9] { background: var(--accent-light); border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }
.pdp-chip.on small[b-j6ukn6r6w9] { color: var(--accent-strong); }

/* ── The calendar (popover and sheet) ────────────────────── */
.pdp-mh[b-j6ukn6r6w9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2px 0 6px;
    font-weight: 700;
    font-size: 13.5px;
}
.pdp-mh button[b-j6ukn6r6w9] {
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: var(--radius);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    cursor: pointer;
}
.pdp-cal[b-j6ukn6r6w9] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.pdp-dow[b-j6ukn6r6w9] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 0 4px;
}
.pdp-d[b-j6ukn6r6w9] {
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: #b3bcb5;
    border-radius: var(--radius-md);
    position: relative;
    line-height: 1.1;
    border: 1px solid transparent;
    background: none;
    padding: 0;
}
.pdp-d.oth[b-j6ukn6r6w9] { color: #d0d6d1; }
.pdp-d.en[b-j6ukn6r6w9] {
    color: var(--text-primary);
    font-weight: 700;
    background: #f4f7f4;
    border-color: #d5e0d8;
    cursor: pointer;
}
.pdp-d.en small[b-j6ukn6r6w9] { font-size: 9.5px; font-weight: 500; color: var(--text-secondary); }
.pdp-d.en.past[b-j6ukn6r6w9] { background: var(--card-bg); }
.pdp-d.en:hover[b-j6ukn6r6w9],
.pdp-d.en:focus-visible[b-j6ukn6r6w9] { border-color: var(--accent); outline: none; }
.pdp-d.warn[b-j6ukn6r6w9] { border-color: #f6d55c; background: var(--warning-light); }
.pdp-d.warn small[b-j6ukn6r6w9] { color: var(--warning-text); }
.pdp-d.warn[b-j6ukn6r6w9]::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
}
.pdp-d.sel[b-j6ukn6r6w9] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pdp-d.sel small[b-j6ukn6r6w9] { color: #fff; }
.pdp-d.today[b-j6ukn6r6w9] { box-shadow: inset 0 0 0 1.5px var(--cc-green-md); color: var(--text-secondary); }
.pdp-d.today.en[b-j6ukn6r6w9] { color: var(--text-primary); }
.pdp-d.today.sel[b-j6ukn6r6w9] { color: #fff; }

.pdp-leg[b-j6ukn6r6w9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}
.pdp-leg i[b-j6ukn6r6w9] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.pdp-key-en[b-j6ukn6r6w9]    { background: #f4f7f4; border: 1px solid #d5e0d8; }
.pdp-key-warn[b-j6ukn6r6w9]  { background: var(--warning-light); border: 1px solid #f6d55c; }
.pdp-key-today[b-j6ukn6r6w9] { box-shadow: inset 0 0 0 1.5px var(--cc-green-md); }
.pdp-hint[b-j6ukn6r6w9] { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Phone: the four run chips (M6) ──────────────────────── */
.pdp-pk[b-j6ukn6r6w9] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pdp-pkc[b-j6ukn6r6w9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    line-height: 1.2;
    padding: 4px 2px;
    cursor: pointer;
}
.pdp-pkc b[b-j6ukn6r6w9] { font-size: 13.5px; font-weight: 700; }
.pdp-pkc small[b-j6ukn6r6w9] { font-size: 10.5px; color: var(--text-muted); }
.pdp-pkc.on[b-j6ukn6r6w9] {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.pdp-pkc.on small[b-j6ukn6r6w9] { color: var(--accent-strong); }
.pdp-other[b-j6ukn6r6w9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-strong);
    min-height: 44px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* ── Phone: the "Other day…" sheet (M1 other-day) ─────────
   This component's own small sheet, to move onto the shared one ux/ux-foundations builds. */
.pdp-sheet-dim[b-j6ukn6r6w9] { position: fixed; inset: 0; z-index: 1055; background: rgba(17, 26, 20, .5); }
.pdp-sheet[b-j6ukn6r6w9] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: var(--card-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 36px rgba(17, 26, 20, .25);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
}
.pdp-sheet[b-j6ukn6r6w9]::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d7d0c4;
    margin: 8px auto 0;
    flex: 0 0 auto;
}
.pdp-sheet-h[b-j6ukn6r6w9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.pdp-sheet-h h2[b-j6ukn6r6w9] { font-size: 17px; font-weight: 700; margin: 6px 0 0; }
.pdp-x[b-j6ukn6r6w9] {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 18px;
    color: var(--text-muted);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
}
.pdp-sheet-b[b-j6ukn6r6w9] { padding: 14px 16px 4px; overflow: auto; }
.pdp-sheet-b .pdp-d[b-j6ukn6r6w9] { height: 46px; font-size: 14px; }
.pdp-sheet-f[b-j6ukn6r6w9] { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.pdp-sheet-f .btn[b-j6ukn6r6w9] { flex: 1; min-height: 44px; font-size: 14px; }
.pdp-pop.right[b-j6ukn6r6w9] { right: 0; left: auto; }

/* Focus management: the dialogs take focus (tabindex=-1) without drawing a ring round the whole panel,
   and the sheet's two focus-trap sentinels are invisible. */
.pdp-pop:focus[b-j6ukn6r6w9], .pdp-sheet:focus[b-j6ukn6r6w9] { outline: none; }
.pdp-sentinel[b-j6ukn6r6w9] { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.pdp-mh button:disabled[b-j6ukn6r6w9] { opacity: .4; cursor: default; }