/* /Components/Layout/CheckoutLayout.razor.rz.scp.css */
/* Tokens, not the literals #f5f7fb / #fff / #e6e9f0 these were: this layout carries the one-time-code
   and set-password sign-in pages as well as checkout, and a hardcoded light shell under a dark card is
   the same break /account/login had. --swan-surface is the header's card-matching colour (see app.css). */
.checkout-shell[b-togvomfq9n] {
    min-height: 100vh;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
}

.checkout-header[b-togvomfq9n] {
    background: var(--swan-surface);
    border-bottom: 1px solid var(--swan-surface-line);
    padding: 1rem 1.5rem;
}

.checkout-brand[b-togvomfq9n] {
    display: inline-block;
}

.checkout-logo[b-togvomfq9n] {
    height: 32px;
    width: auto;
}

.checkout-main[b-togvomfq9n] {
    flex: 1 1 auto;
    padding: 2rem 1rem 3rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Enlarge the hamburger's tap target for touch, without moving the icon or its layout box.
   The theme fixes .sidebar-toggle at 26x26; an invisible ::after overlay expands the
   clickable area to a comfortable ~46px and clicks on it still fire the anchor. */
.sidebar-toggle[b-7znrdmzein] {
    position: relative;
}

.sidebar-toggle[b-7znrdmzein]::after {
    content: "";
    position: absolute;
    inset: -0.6rem;
}

/* The user menu that used to live in this bar (avatar chip, dropdown, sign-out) moved to the
   sidebar's footer band — its styles moved with it, into NavMenu.razor.css. */

.wrapper[b-7znrdmzein] {
    min-height: 100vh;
    display: flex;
}

.main[b-7znrdmzein] {
    width: 100%;
}

.content[b-7znrdmzein] {
    /* Token, not the literal #f5f7fb it used to be, so the page ground follows the colour mode.
       --bs-body-bg and not --bs-tertiary-bg: tertiary is #3e4555 in AppStack's dark build, LIGHTER
       than the #293042 cards sitting on it, which inverted the elevation — every card read as a hole
       in the page. body-bg is #f7f9fc / #202634, i.e. what AppStack's own demo grounds a page with. */
    background: var(--bs-body-bg);
    /* No min-height: the theme already gives .main `display: flex; flex-direction: column; min-height: 100vh`
       and .content `flex: 1`, so the ground fills the viewport below the top bar on its own. The
       calc(100vh - 56px) that used to be here guessed the bar at 56px when it measures 63px, which left
       every short page with a few pixels of pointless scroll. */
}

/* #blazor-error-ui now lives in the global wwwroot/app.css — see the comment there. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ---------- Brand ---------- */
.sidebar-brand[b-xf20ew5jmf] {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.sidebar-logo[b-xf20ew5jmf] {
    max-width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
}

/* ---------- Section headers ---------- */
/* Turn the theme's plain header into an understated, upper-cased section label. */
.sidebar-header[b-xf20ew5jmf] {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(233, 236, 239, 0.4);
    padding: 1.4rem 1.625rem 0.4rem;
    margin-top: 0;
}

/* ---------- Links ---------- */
/* Flex keeps the icon and label vertically centred and the labels aligned in a column. */
.sidebar-link[b-xf20ew5jmf],
a.sidebar-link[b-xf20ew5jmf] {
    display: flex;
    align-items: center;
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
}

/* Size the inline feather SVGs and give them consistent spacing next to the label. */
.sidebar-link .feather[b-xf20ew5jmf] {
    width: 18px;
    height: 18px;
    margin-right: 0.7rem;
    flex-shrink: 0;
}

/* Whole-row hover feedback (the theme only shifts the text colour). */
.sidebar-link:hover[b-xf20ew5jmf] {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Group toggles behave like links but carry no href. The dropdown caret and its
   rotation are drawn by the AppStack theme's [data-bs-toggle=collapse]:before rule. */
.sidebar-toggle-link[b-xf20ew5jmf] {
    cursor: pointer;
}

/* An expanded group reads as lightly "on" so its heading stands out from collapsed peers. */
.sidebar-toggle-link:not(.collapsed)[b-xf20ew5jmf] {
    color: rgba(233, 236, 239, 0.85);
}

/* ---------- Active states ---------- */
/* Blazor's NavLink stamps `.active` on the <a>, not the <li>, so the theme's
   `.sidebar-item.active` rules never fire — we key off the link itself.
   The accent bar is an inset box-shadow so it never nudges the label sideways. */
.sidebar-link.active[b-xf20ew5jmf] {
    color: #fff;
    background-color: rgba(74, 136, 235, 0.15);
    box-shadow: inset 3px 0 0 #4a88eb;
}

.sidebar-link.active .feather[b-xf20ew5jmf] {
    color: #6ea8fe;
}

.sidebar-dropdown .sidebar-link.active[b-xf20ew5jmf] {
    color: #fff;
    background-color: rgba(74, 136, 235, 0.12);
    box-shadow: inset 3px 0 0 #4a88eb;
}

/* ---------- Layout ---------- */
/* Three bands: the brand, the scrolling link list, and the profile footer — only the middle one moves,
   so the logo and the profile stay put while the links scroll under them.

   position: sticky is what keeps the profile reachable. The document is the scroll region here (.main only
   sets min-height), so a plain 100vh sidebar would scroll off the top of a long admin grid and take the
   footer with it. align-self overrides .wrapper's align-items: stretch, which would otherwise size the nav
   to the whole document height and defeat the 100vh outright.

   overflow: visible is insurance, not decoration: the footer's profile menu opens upward past the sidebar's
   bottom edge, and a scroll container here would clip it (and could not be escaped with position: fixed
   either). The scrollbar belongs to .sidebar-content below. */
.sidebar[b-xf20ew5jmf] {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* The brand band contributes its own height and nothing more. */
.sidebar-brand[b-xf20ew5jmf] {
    flex: 0 0 auto;
}

/* The menu band: takes whatever height the brand and the footer leave.
   flex-grow is what actually gives this band its height, and that is load-bearing rather than cosmetic.
   SimpleBar (js-simplebar, initialised by the theme's app.js) moves the link list into a
   .simplebar-mask that is position: absolute against this element — so once SimpleBar has run there is
   almost no in-flow content left here, and a band sized by its content would collapse to nothing and take
   the whole menu with it. Growing into the column's free space is what keeps it the right height, and the
   mask's top/bottom: 0 then span exactly that. Do NOT add position: static here either: SimpleBar's mask
   anchors to the position: relative that [data-simplebar] sets on this element.

   min-height: 0 lets it shrink below its content, and overflow-y is the fallback for the window BEFORE
   SimpleBar initialises (it runs on DOMContentLoaded) — without it a long admin menu would spill over the
   footer instead of scrolling, since .sidebar above is deliberately overflow: visible. Once SimpleBar has
   run, .simplebar-content-wrapper owns the scrolling and this never overflows.

   No display: flex, unlike before: [data-simplebar] sets flex-direction: column AND flex-wrap: wrap on this
   element without setting display: flex, so turning it into a flex container invites a too-tall child to
   wrap into a second column. Nothing here needs it now that the brand and the footer are siblings. */
.sidebar-content[b-xf20ew5jmf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sidebar-nav[b-xf20ew5jmf] {
    padding-bottom: 1.5rem;
}

/* ---------- Profile footer ---------- */
/* flex: 0 0 auto is the load-bearing part here: the band contributes its own height and nothing more, so a
   long link list can never squeeze it away. The palette is the sidebar's own (the ground stays dark in both
   colour modes — see the note in wwwroot/app.css) rather than a new one: to the user this row is the same
   kind of thing as a nav row, and a footer with its own colours would read as a different control. */
.sidebar-footer[b-xf20ew5jmf] {
    flex: 0 0 auto;
    border-top: 1px solid rgba(233, 236, 239, 0.12);
    padding: 0.375rem 0;
}

/* Matches a .sidebar-link's box: same horizontal padding, full width, no underline, and an explicit colour
   to out-specify Bootstrap's anchor colour. The band holds two of these — the colour-mode switch and the
   profile — one an <a> authored here and one a <button> rendered by the ThemeToggle child component, hence
   ::deep: a child component's root element never carries this component's scope attribute, so a plain
   .sidebar-footer-row would style the profile row and silently skip the switch.

   These out-specify app.css's own .theme-toggle chrome (0,3,0 against 0,1,0), which is what makes the button
   take the row's padding and colour; what it keeps from there is background: none, border: 0 and the
   focus-visible ring. */
.sidebar-footer[b-xf20ew5jmf]  .sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 1.625rem;
    font-size: 0.85rem;
    color: rgba(233, 236, 239, 0.85);
    text-decoration: none;
    cursor: pointer;
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
}

.sidebar-footer[b-xf20ew5jmf]  .sidebar-footer-row:hover,
.sidebar-footer[b-xf20ew5jmf]  .sidebar-footer-row:focus,
.sidebar-footer[b-xf20ew5jmf]  .sidebar-footer-row[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* The caret sits at the far right of the row rather than tight against the name. */
.sidebar-footer[b-xf20ew5jmf]  .sidebar-footer-row.dropdown-toggle::after {
    margin-left: auto;
    color: rgba(233, 236, 239, 0.45);
}

/* min-width: 0 is what lets the two labels below ellipsise at all — a flex item's default min-width: auto
   refuses to shrink past its content, so the row would overflow the sidebar instead. */
.sidebar-footer-label[b-xf20ew5jmf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.user-avatar[b-xf20ew5jmf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a88eb, #3b60d1);
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1;
    flex-shrink: 0;
}

/* An account name is arbitrary text and the sidebar's width is fixed, so both lines truncate rather than
   wrap; the full value stays available as the row's native tooltip and in the menu's header. */
.user-name[b-xf20ew5jmf],
.user-role[b-xf20ew5jmf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-name[b-xf20ew5jmf] {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.25;
}

.user-role[b-xf20ew5jmf] {
    font-size: 0.72rem;
    line-height: 1.25;
    color: rgba(233, 236, 239, 0.45);
}

/* No positioning rules for the upward-opening menu: the .dropup wrapper is enough, because the theme already
   ships .dropup .dropdown-menu[data-bs-popper] { bottom: 100%; top: auto }.

   The border is explicit because it is the ONLY thing separating the menu from its ground in dark mode —
   AppStack sets --bs-dropdown-bg to #293042 there, the same colour as the sidebar the menu opens over, and
   blanks --bs-dropdown-box-shadow. --bs-border-color resolves per mode (#dee6ed / #545968), so one rule
   reads correctly against both a white menu and a dark one. The shadow is cast UPWARD to match the
   direction the menu opens. */
.sidebar-footer .dropdown-menu[b-xf20ew5jmf] {
    min-width: 15rem;
    padding: 0.4rem 0;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.sidebar-footer .dropdown-header[b-xf20ew5jmf] {
    padding: 0.5rem 1.1rem;
    line-height: 1.3;
}

.sidebar-footer .dropdown-item[b-xf20ew5jmf] {
    padding: 0.5rem 1.1rem;
}

/* ::deep because the svg is rendered by the FeatherIcon child component, so it never carries this
   component's scope attribute — without it the selector silently matches nothing and the theme's global
   .feather (18px) stands. Same reason as the ::deep rules in Dashboard.razor.css. */
.sidebar-footer .dropdown-item[b-xf20ew5jmf]  .feather {
    width: 16px;
    height: 16px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-oue7sv9dqs],
.components-reconnect-repeated-attempt-visible[b-oue7sv9dqs],
.components-reconnect-failed-visible[b-oue7sv9dqs],
.components-pause-visible[b-oue7sv9dqs],
.components-resume-failed-visible[b-oue7sv9dqs],
.components-rejoining-animation[b-oue7sv9dqs] {
    display: none;
}

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


#components-reconnect-modal[b-oue7sv9dqs] {
    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-oue7sv9dqs 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-oue7sv9dqs {
    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/Pages/Account/LoginCode.razor.rz.scp.css */
.otp-inputs[b-t61rtjuqc0] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.otp-box[b-t61rtjuqc0] {
    width: 3rem;
    height: 3.5rem;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}

.otp-box:focus[b-t61rtjuqc0] {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

@media (max-width: 360px) {
    .otp-inputs[b-t61rtjuqc0] {
        gap: 0.35rem;
    }

    .otp-box[b-t61rtjuqc0] {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Account/PaymentMethods.razor.rz.scp.css */
/* feather icons in the action buttons (Add Card / Remove card) are rendered by the <FeatherIcon>
   child component, so the <svg> carries that component's scope, not this page's — reach it via
   ::deep. Sizing lives here (not as an inline style) so the markup stays clean. */
.btn[b-dptwhnyu02]  svg.feather {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}
/* /Components/Pages/Admin/AuditLogs.razor.rz.scp.css */
/* Audit Log — a categorised, colour-coded event feed.
   Every colour is derived from a single per-event --cat custom property, so one hue drives the
   accent bar, the icon chip and the detail tag in lockstep. Surfaces use Bootstrap theme variables
   (--bs-*) so the page tracks the AppStack light/dark themes without a second stylesheet. */

/* ---- Header ------------------------------------------------------------------------------------ */

.audit-head[b-s3in12wmsi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.audit-head h1[b-s3in12wmsi] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.audit-head[b-s3in12wmsi]  .audit-head-icon {
    width: 24px;
    height: 24px;
    color: var(--bs-primary, #3b7ddd);
    opacity: 0.9;
}

.audit-sub[b-s3in12wmsi] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9rem;
}

.audit-head-meta[b-s3in12wmsi] {
    line-height: 1.15;
}

.audit-head-count[b-s3in12wmsi] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.audit-head-count-label[b-s3in12wmsi] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color, #6c757d);
}

.audit-head-span[b-s3in12wmsi] {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.audit-loading[b-s3in12wmsi] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ---- Category chips ---------------------------------------------------------------------------- */

.cat-strip[b-s3in12wmsi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cat-chip[b-s3in12wmsi] {
    --chip-fg: color-mix(in srgb, var(--cat) 72%, var(--bs-body-color));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}

.cat-chip:hover[b-s3in12wmsi] {
    border-color: color-mix(in srgb, var(--cat) 55%, var(--bs-border-color));
    color: var(--chip-fg);
}

.cat-chip:active[b-s3in12wmsi] {
    transform: translateY(1px);
}

.cat-chip.is-active[b-s3in12wmsi] {
    background: color-mix(in srgb, var(--cat) 13%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--cat) 45%, transparent);
    color: var(--chip-fg);
}

.cat-chip-dot[b-s3in12wmsi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat);
    flex: none;
}

.cat-chip[b-s3in12wmsi]  .cat-chip-icon {
    width: 14px;
    height: 14px;
    color: var(--cat);
}

.cat-chip-count[b-s3in12wmsi] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    padding-left: 0.15rem;
    color: inherit;
    opacity: 0.85;
}

/* ---- Toolbar ----------------------------------------------------------------------------------- */

.audit-toolbar[b-s3in12wmsi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.audit-search[b-s3in12wmsi] {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}

.audit-search[b-s3in12wmsi]  .audit-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    z-index: 2;
}

.audit-search .form-control[b-s3in12wmsi] {
    padding-left: 2.2rem;
    border-radius: 8px;
}

.audit-entity-select[b-s3in12wmsi] {
    flex: 0 1 190px;
    border-radius: 8px;
}

.audit-sensitive[b-s3in12wmsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.audit-sensitive .form-check-input[b-s3in12wmsi] {
    margin: 0;
    cursor: pointer;
}

.audit-sensitive[b-s3in12wmsi]  .audit-sensitive-icon {
    width: 14px;
    height: 14px;
    color: #e0564f;
}

.audit-clear[b-s3in12wmsi] {
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.audit-result-line[b-s3in12wmsi] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

/* ---- Empty state ------------------------------------------------------------------------------- */

.audit-empty[b-s3in12wmsi] {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.audit-empty[b-s3in12wmsi]  .audit-empty-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-secondary-color, #adb5bd);
    margin-bottom: 0.5rem;
}

/* ---- Day divider ------------------------------------------------------------------------------- */

/* Dividers sit inside the bordered feed card, so inset them to match the row's left padding
   instead of running flush to the card edge. */
.day-divider[b-s3in12wmsi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.4rem;
    padding: 0 1.15rem;
}

.day-divider:first-child[b-s3in12wmsi] {
    margin-top: 0.7rem;
}

.day-divider span[b-s3in12wmsi] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.day-divider[b-s3in12wmsi]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bs-border-color, #e9ecef);
}

/* ---- Feed & event rows ------------------------------------------------------------------------- */

.audit-feed[b-s3in12wmsi] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.event[b-s3in12wmsi] {
    position: relative;
    border-top: 1px solid var(--bs-border-color, #eef0f2);
}

.event:first-child[b-s3in12wmsi] {
    border-top: none;
}

/* The category accent runs the full height of the row on the left edge. */
.event[b-s3in12wmsi]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cat);
    opacity: 0;
    transition: opacity .12s ease;
}

.event:hover[b-s3in12wmsi]::before,
.event.is-open[b-s3in12wmsi]::before {
    opacity: 1;
}

.event-row[b-s3in12wmsi] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 1.15rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease;
}

.event-row:hover[b-s3in12wmsi] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.event.is-open .event-row[b-s3in12wmsi] {
    background: color-mix(in srgb, var(--cat) 6%, var(--bs-body-bg));
}

.event-row:focus-visible[b-s3in12wmsi] {
    outline: 2px solid var(--bs-primary, #3b7ddd);
    outline-offset: -2px;
}

.event-icon[b-s3in12wmsi] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cat) 14%, transparent);
}

.event-icon[b-s3in12wmsi]  .feather {
    width: 17px;
    height: 17px;
    color: var(--cat);
}

.event-main[b-s3in12wmsi] {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.event-title[b-s3in12wmsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    line-height: 1.25;
}

.event-title[b-s3in12wmsi]  .event-flag {
    width: 13px;
    height: 13px;
    color: #e0564f;
}

.event-type[b-s3in12wmsi] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #8a929b);
    font-family: "SFMono-Regular", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
}

.event-entity[b-s3in12wmsi] {
    flex: 1.5 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.event-entity-type[b-s3in12wmsi] {
    font-size: 0.82rem;
    color: var(--bs-body-color, #495057);
}

.event-entity-id[b-s3in12wmsi],
.event-actor-mono[b-s3in12wmsi] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #8a929b);
    font-family: "SFMono-Regular", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-actor[b-s3in12wmsi] {
    flex: 1.2 1 0;
    min-width: 0;
    font-size: 0.8rem;
}

/* A resolved actor reads as an email in the body face; an unresolved id stays monospace (above). */
.event-actor-email[b-s3in12wmsi] {
    display: block;
    color: var(--bs-body-color, #495057);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-actor-system[b-s3in12wmsi] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #adb5bd);
}

.event-time[b-s3in12wmsi] {
    flex: none;
    width: 78px;
    text-align: right;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.event-caret[b-s3in12wmsi] {
    flex: none;
    display: inline-flex;
    color: var(--bs-secondary-color, #adb5bd);
}

.event-caret[b-s3in12wmsi]  .feather {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

.event-caret.is-open[b-s3in12wmsi]  .feather {
    transform: rotate(180deg);
}

/* ---- Expanded detail --------------------------------------------------------------------------- */

.event-detail[b-s3in12wmsi] {
    padding: 0.25rem 1rem 1rem 3.1rem;
    background: color-mix(in srgb, var(--cat) 4%, var(--bs-body-bg));
    border-top: 1px dashed var(--bs-border-color, #e9ecef);
}

.event-detail-grid[b-s3in12wmsi] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.35rem 1rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.83rem;
}

.event-detail-grid dt[b-s3in12wmsi] {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.event-detail-grid dd[b-s3in12wmsi] {
    margin: 0;
    color: var(--bs-body-color, #212529);
    word-break: break-word;
}

.event-detail-grid code[b-s3in12wmsi] {
    font-size: 0.78rem;
    color: var(--bs-body-color, #495057);
}

.cat-tag[b-s3in12wmsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--cat) 14%, transparent);
    color: color-mix(in srgb, var(--cat) 78%, var(--bs-body-color));
}

.cat-tag-dot[b-s3in12wmsi] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cat);
}

.json-head[b-s3in12wmsi] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.35rem;
}

.json-view[b-s3in12wmsi] {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--bs-dark, #1c2331);
    color: #e6edf3;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.5;
    font-family: "SFMono-Regular", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
    max-height: 360px;
    overflow: auto;
    white-space: pre;
}

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

/* While a filter/page change is in flight, the current results stay visible but dimmed and inert. */
.audit-feed.is-loading[b-s3in12wmsi] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity .1s ease;
}

/* ---- Pager ------------------------------------------------------------------------------------- */

.audit-pager[b-s3in12wmsi] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1rem;
}

.page-btn[b-s3in12wmsi],
.page-num[b-s3in12wmsi] {
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #495057);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.page-btn:hover:not(:disabled)[b-s3in12wmsi],
.page-num:hover:not(.is-current)[b-s3in12wmsi] {
    border-color: var(--bs-primary, #3b7ddd);
    color: var(--bs-primary, #3b7ddd);
}

.page-btn:disabled[b-s3in12wmsi] {
    opacity: 0.45;
    cursor: default;
}

.page-num.is-current[b-s3in12wmsi] {
    background: var(--bs-primary, #3b7ddd);
    border-color: var(--bs-primary, #3b7ddd);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.page-gap[b-s3in12wmsi] {
    padding: 0 0.15rem;
    color: var(--bs-secondary-color, #6c757d);
}

.page-btn:focus-visible[b-s3in12wmsi],
.page-num:focus-visible[b-s3in12wmsi] {
    outline: 2px solid var(--bs-primary, #3b7ddd);
    outline-offset: 1px;
}

/* ---- Responsive -------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .event-actor[b-s3in12wmsi] { display: none; }
}

@media (max-width: 860px) {
    .event-entity[b-s3in12wmsi] { display: none; }
    .event-detail[b-s3in12wmsi] { padding-left: 1rem; }
}

@media (max-width: 560px) {
    .event-time[b-s3in12wmsi] { display: none; }
    .event-detail-grid[b-s3in12wmsi] { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .event-detail-grid dt[b-s3in12wmsi] { margin-top: 0.5rem; }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* KPI tiles ------------------------------------------------------------------ */
.dash-tile[b-dpzqupku8z] {
    transition: transform .12s ease, box-shadow .12s ease;
}

.dash-tile:hover[b-dpzqupku8z] {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

.dash-tile__value[b-dpzqupku8z] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* The svg is rendered by the FeatherIcon child component, so it needs ::deep to size. */
.dash-tile[b-dpzqupku8z]  .feather {
    width: 2rem;
    height: 2rem;
}

/* Needs Attention ------------------------------------------------------------ */
.dash-attn[b-dpzqupku8z] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.dash-attn__item[b-dpzqupku8z] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border-left: 3px solid transparent;
    border-radius: .25rem;
    transition: background-color .12s ease;
}

.dash-attn__item:hover[b-dpzqupku8z] {
    background-color: rgba(0, 0, 0, .04);
}

.dash-attn__item--danger[b-dpzqupku8z] {
    border-left-color: var(--bs-danger, #dc3545);
}

.dash-attn__item--warning[b-dpzqupku8z] {
    border-left-color: var(--bs-warning, #ffc107);
}

.dash-attn__item--info[b-dpzqupku8z] {
    border-left-color: var(--bs-info, #0dcaf0);
}

.dash-attn__item[b-dpzqupku8z]  .feather {
    width: 1.25rem;
    height: 1.25rem;
}

.dash-attn__label[b-dpzqupku8z] {
    flex: 1 1 auto;
    font-weight: 500;
}

.dash-attn__count[b-dpzqupku8z] {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color, #6c757d);
    background-color: rgba(0, 0, 0, .05);
    padding: .15rem .55rem;
    border-radius: 1rem;
}

.dash-attn__chev[b-dpzqupku8z] {
    color: var(--bs-secondary-color, #6c757d);
}

.dash-attn__chev[b-dpzqupku8z]  .feather {
    width: 1rem;
    height: 1rem;
}

.dash-attn__clear-icon[b-dpzqupku8z]  .feather {
    width: 2rem;
    height: 2rem;
}

/* Header refresh button ------------------------------------------------------ */
.dash-refresh[b-dpzqupku8z]  .feather {
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
}
/* /Components/Pages/Admin/EmailLog.razor.rz.scp.css */
/* The stored message, rendered inside a script-less sandbox. */
.email-body[b-5hh4oaelgv] {
    width: 100%;
    height: 480px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    display: block;
    /* The stored HTML is authored for a white ground, so the sandbox stays light in both colour modes —
       darkening the frame would misrepresent what the recipient actually received. */
    background: #f3f4f6;
    color-scheme: light only;
}

/* Long relay errors truncate in the grid; the full text lives in the cell's title attribute. */
.error-cell[b-5hh4oaelgv] {
    max-width: 220px;
}
/* /Components/Pages/Admin/EmailTemplates.razor.rz.scp.css */
/* The preview iframe. Sized generously because email layouts are table-based and tall; the frame scrolls
   internally rather than growing the admin page. */
.email-preview[b-tdbu1jm96z] {
    width: 100%;
    height: 640px;
    border: 0;
    display: block;
    /* Stays light in both colour modes: this is a preview of what lands in the recipient's inbox, and a
       dark frame around light email HTML would misrepresent it. */
    background: #f3f4f6;
    color-scheme: light only;
}

/* Bootstrap's .nav-link expects an <a>; these are <button>s so the circuit can handle the click.
   Style them as underline tabs: the default button chrome reads as neither a link nor a tab, and
   merely swapping the background left the active tab indistinguishable on the light admin page. */
.nav-tabs[b-tdbu1jm96z] {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    gap: .25rem;
}

.nav-tabs .nav-link[b-tdbu1jm96z] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* drop the underline onto the container rail */
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.nav-tabs .nav-link:hover[b-tdbu1jm96z] {
    color: var(--bs-body-color, #212529);
    border-bottom-color: var(--bs-border-color, #dee2e6);
}

.nav-tabs .nav-link.active[b-tdbu1jm96z] {
    background: none;
    color: var(--bs-primary, #1f6feb);
    border-bottom-color: var(--bs-primary, #1f6feb);
}

/* Token chips read as clickable, not as static badges. */
.badge[b-tdbu1jm96z] {
    cursor: pointer;
    font-weight: 500;
}

.badge:hover[b-tdbu1jm96z] {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important;
}
/* /Components/Pages/Admin/Payments.razor.rz.scp.css */
/* Payment Transactions grid — readable, high-contrast refinement of the AppStack table.

   The AppStack theme's default text tokens are too faint for a data-dense admin grid:
   --bs-body-color is #6c757d and --bs-secondary-color is a *translucent* grey
   (hsla(208,7%,46%,.75)) that measures ~3:1 on white — below the WCAG AA 4.5:1 bar.
   So instead of borrowing those, this page defines its own solid ink scale (all >= AA
   on its ground) and routes every text element through it.

   EVERY colour on this page must resolve through a --pt-* token declared below, with no literal left in
   a rule. That is what lets the dark block at the foot of this file re-ground the whole page by
   redefining ~25 values — and it is also why the dark overrides are token-only: a `::deep` selector
   prefixed with `html[data-bs-theme=dark]` would have Blazor's scope attribute rewritten onto <html>
   instead of .pt-page, and silently match nothing. */

.pt-page[b-amringejda] {
    /* Ink scale — contrast measured on --pt-surface */
    --pt-ink: #1b2333;        /* primary text — ~14:1 */
    --pt-ink-2: #414b5c;      /* secondary text — ~8.3:1 */
    --pt-ink-3: #566072;      /* labels / de-emphasized — ~5.7:1 */
    --pt-line: #e3e8f0;       /* hairline dividers */
    --pt-line-strong: #cfd7e3;
    --pt-surface: #ffffff;
    --pt-surface-alt: #f5f8fc; /* zebra + expanded rows */
    --pt-hover: #eaf1fe;       /* row hover */
    --pt-accent: #2f6fed;      /* interactive / sort accent */
    --pt-on-accent: #ffffff;   /* text on an accent/danger fill */

    /* Table furniture */
    --pt-head-bg: #eef2f8;
    --pt-head-hover-bg: #e6edf9;
    --pt-highlight-bg: #fff3d6; /* the just-acted-on row */
    --pt-highlight-edge: #e5a54b;
    --pt-chip-bg: #e7edf6;

    /* Status pills — deeper text + border tones than the theme's subtle defaults, so labels stay legible */
    --pt-ok-bg: #d6efe0;       --pt-ok-ink: #17542e;       --pt-ok-line: #a9dcbd;
    --pt-info-bg: #d3e8f6;     --pt-info-ink: #0c405a;     --pt-info-line: #a4d1ea;
    --pt-warn-bg: #fbe9cf;     --pt-warn-ink: #6e4a15;     --pt-warn-line: #f2ca8f;
    --pt-bad-bg: #f7dad9;      --pt-bad-ink: #7c211f;      --pt-bad-line: #eeb1af;
    --pt-neutral-bg: #e5e8ec;  --pt-neutral-ink: #33393f;  --pt-neutral-line: #c9cfd6;

    /* Destructive action */
    --pt-danger: #c0392b;
    --pt-danger-hover: #a12f22;

    /* Callouts */
    --pt-info-ink-strong: #08324a;
    --pt-note-bg: #eef4ff;
    --pt-note-line: #cfe0ff;
}

/* Beat Bootstrap's .text-muted (which is !important) with a readable tone
   everywhere inside this page — the single biggest legibility win. */
.pt-page .text-muted[b-amringejda] {
    color: var(--pt-ink-3) !important;
}

[b-amringejda] .pt-toolbar {
    border: 1px solid var(--pt-line);
    box-shadow: none;
}

[b-amringejda] .pt-toolbar .form-label {
    color: var(--pt-ink-2);
}

[b-amringejda] .pt-search-group {
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-strong);
    border-radius: 999px;
    padding-inline-start: 0.65rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[b-amringejda] .pt-search-group:focus-within {
    border-color: var(--pt-accent);
    box-shadow: 0 0 0 0.2rem rgba(47, 111, 237, .15);
}

[b-amringejda] .pt-search-group svg {
    color: var(--pt-ink-3);
    flex: none;
    width: 15px;
    height: 15px;
}

[b-amringejda] .pt-search-group input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0.5rem !important;
    color: var(--pt-ink) !important;
}

[b-amringejda] .pt-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

/* ---- Header ---- */
[b-amringejda] .pt-table thead th {
    background: var(--pt-head-bg);
    border-bottom: 2px solid var(--pt-line-strong);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--pt-ink-2);
    padding: 0.8rem 1rem;
    white-space: nowrap;
    user-select: none;
}

[b-amringejda] .pt-table thead th.sortable {
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

[b-amringejda] .pt-table thead th.sortable:hover {
    color: var(--pt-accent);
    background: var(--pt-head-hover-bg);
}

[b-amringejda] .pt-table thead th .sort-caret {
    color: var(--pt-accent);
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

/* ---- Body rows ---- */
[b-amringejda] .pt-table tbody tr.pt-row {
    border-bottom: 1px solid var(--pt-line);
    transition: background-color .12s ease;
}

/* Zebra striping on the data rows only (detail rows opt out) to aid horizontal scanning. */
[b-amringejda] .pt-table tbody tr.pt-row:nth-of-type(even) {
    background-color: var(--pt-surface-alt);
}

[b-amringejda] .pt-table tbody tr.pt-row:hover {
    background-color: var(--pt-hover);
}

[b-amringejda] .pt-table tbody tr.pt-row.pt-row--highlight {
    background-color: var(--pt-highlight-bg);
    box-shadow: inset 4px 0 0 var(--pt-highlight-edge);
}

[b-amringejda] .pt-table tbody tr.pt-detail-row {
    border-bottom: 1px solid var(--pt-line);
    background-color: var(--pt-surface-alt);
}

[b-amringejda] .pt-table td {
    padding: 0.85rem 1rem;
    vertical-align: top;
    color: var(--pt-ink-2);
}

/* ---- Cell content ---- */
[b-amringejda] .pt-merchant {
    font-weight: 600;
    color: var(--pt-ink);
    font-size: 0.9rem;
    line-height: 1.35;
}

[b-amringejda] .pt-shopper {
    font-size: 0.8rem;
    color: var(--pt-ink-2);
    margin-top: 0.1rem;
}

[b-amringejda] .pt-source-app {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--pt-ink-2);
    background: var(--pt-chip-bg);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    margin-top: 0.4rem;
}

[b-amringejda] .pt-billtype {
    font-size: 0.82rem;
    color: var(--pt-ink-2);
}

[b-amringejda] .pt-paymethod {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--pt-ink-2);
}

[b-amringejda] .pt-paymethod svg {
    color: var(--pt-ink-3);
    width: 15px;
    height: 15px;
    flex: none;
}

[b-amringejda] .pt-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--pt-ink);
}

/* ---- Status pills ---- */
[b-amringejda] .pt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}

[b-amringejda] .pt-pill svg {
    width: 12px;
    height: 12px;
}

/* Deeper text + border tones than the theme's subtle defaults so labels stay legible. */
[b-amringejda] .pt-pill--success { background: var(--pt-ok-bg); color: var(--pt-ok-ink); border-color: var(--pt-ok-line); }
[b-amringejda] .pt-pill--info    { background: var(--pt-info-bg); color: var(--pt-info-ink); border-color: var(--pt-info-line); }
[b-amringejda] .pt-pill--warning { background: var(--pt-warn-bg); color: var(--pt-warn-ink); border-color: var(--pt-warn-line); }
[b-amringejda] .pt-pill--danger  { background: var(--pt-bad-bg); color: var(--pt-bad-ink); border-color: var(--pt-bad-line); }
[b-amringejda] .pt-pill--secondary { background: var(--pt-neutral-bg); color: var(--pt-neutral-ink); border-color: var(--pt-neutral-line); }

[b-amringejda] .pt-flag {
    display: inline-flex;
    margin-top: 0.45rem;
}

[b-amringejda] .pt-failure-text {
    font-size: 0.78rem;
    color: var(--pt-bad-ink);
    margin-top: 0.4rem;
    max-width: 22ch;
}

[b-amringejda] .pt-gwref {
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
    color: var(--pt-ink-2);
}

[b-amringejda] .pt-timestamp {
    font-size: 0.82rem;
    color: var(--pt-ink-2);
    white-space: nowrap;
}

/* ---- Action buttons ---- */
[b-amringejda] .pt-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Destructive action — self-styled (not btn-danger) for a refined, deeper red that
   sits on the same 32px baseline as the toggles beside it. */
[b-amringejda] .pt-reverse-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.75rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    background: var(--pt-danger);
    color: var(--pt-on-accent);
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .12s ease, box-shadow .12s ease;
}

[b-amringejda] .pt-reverse-btn svg {
    width: 14px;
    height: 14px;
}

[b-amringejda] .pt-reverse-btn:hover {
    background: var(--pt-danger-hover);
    box-shadow: 0 1px 3px rgba(160, 40, 30, .3);
}

[b-amringejda] .pt-reverse-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, .3);
}

/* Labeled row-expander toggles (Details, View/Hide reversal). Shared chrome so the two
   controls read as siblings on one baseline; the --chevron variant additionally flips its
   glyph when the panel is open. */
[b-amringejda] .pt-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 32px;
    padding: 0 0.6rem;
    border-radius: 0.45rem;
    border: 1px solid var(--pt-line-strong);
    background: var(--pt-surface);
    color: var(--pt-ink-2);
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

[b-amringejda] .pt-toggle-btn svg {
    width: 15px;
    height: 15px;
}

[b-amringejda] .pt-toggle-btn:hover {
    border-color: var(--pt-accent);
    background: var(--pt-hover);
    color: var(--pt-accent);
}

[b-amringejda] .pt-toggle-btn--active {
    border-color: var(--pt-accent);
    background: var(--pt-accent);
    color: var(--pt-on-accent);
}

[b-amringejda] .pt-toggle-btn--chevron svg {
    transition: transform .18s ease;
}

[b-amringejda] .pt-toggle-btn--chevron.pt-toggle-btn--active svg {
    transform: rotate(180deg);
}

/* ---- Expanded detail card ---- */
[b-amringejda] .pt-detail-card {
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-strong);
    border-radius: 0.5rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(27, 35, 51, .04);
}

[b-amringejda] .pt-detail-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pt-ink-3);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

[b-amringejda] .pt-detail-value {
    font-size: 0.85rem;
    color: var(--pt-ink);
}

/* Identity header — the full payment ID (moved out of the grid) sits on the left,
   the copy + link affordances anchor to the right, and a hairline separates the
   record's identity from its attributes below. */
[b-amringejda] .pt-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--pt-line);
}

[b-amringejda] .pt-detail-head .pt-detail-value {
    word-break: break-all;
}

[b-amringejda] .pt-detail-idactions {
    display: inline-flex;
    gap: 0.4rem;
    flex: none;
}

/* Attribute fields flow left at their natural width with an even rhythm, so short
   values ("—", "$10.80") don't get stretched across the whole row. */
[b-amringejda] .pt-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 3rem;
}

[b-amringejda] .pt-detail-field {
    min-width: 0;
}

/* Labeled sub-section (Breakdown / Reversal) fenced off with its own top hairline. */
[b-amringejda] .pt-detail-section {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--pt-line);
}

[b-amringejda] .pt-detail-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pt-ink-3);
    font-weight: 700;
}

[b-amringejda] .pt-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 0.35rem;
    border: 1px solid var(--pt-line-strong);
    background: var(--pt-surface);
    color: var(--pt-ink-3);
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

[b-amringejda] .pt-copy-btn svg {
    width: 14px;
    height: 14px;
}

[b-amringejda] .pt-copy-btn:hover {
    border-color: var(--pt-accent);
    background: var(--pt-hover);
    color: var(--pt-accent);
}

/* ---- Line items (Details) — cart items behind each merchant's charge ---- */
[b-amringejda] .pt-lineitems {
    margin-top: 0.6rem;
}

[b-amringejda] .pt-lineitems-merchant {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pt-ink-2);
    margin-bottom: 0.25rem;
}

[b-amringejda] .pt-lineitem-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-amringejda] .pt-lineitem {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--pt-line);
    font-size: 0.82rem;
    color: var(--pt-ink-2);
}

[b-amringejda] .pt-lineitem:last-child {
    border-bottom: 0;
}

[b-amringejda] .pt-lineitem-amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--pt-ink);
}

/* The source app's per-line reference (permit/account/bill number) — the thing operators search for, so
   give it a touch more prominence than the muted item name it sits under. Monospacing comes from the
   .font-monospace utility class on the element (same composition used elsewhere in this file). */
[b-amringejda] .pt-lineitem-ref {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--pt-ink);
}

[b-amringejda] .pt-return-fee-note {
    margin-top: 1rem;
    background: var(--pt-info-bg);
    border: 1px solid var(--pt-info-line);
    border-radius: 0.45rem;
    padding: 0.8rem 1.1rem;
    font-size: 0.82rem;
    color: var(--pt-info-ink);
}

[b-amringejda] .pt-return-fee-note strong {
    color: var(--pt-info-ink-strong);
}

/* ---- Multi-merchant child rows ----
   A split payment expands into one real table row per merchant, so each merchant's amount, status and
   Reverse control sit under the same columns as the parent rollup — read straight down the grid, no
   free-floating panel. The tinted band + the connector on the first cell tie the group to its parent. */
[b-amringejda] tr.pt-child-row > td {
    background: var(--pt-surface-alt);
    border-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    vertical-align: middle;
}

/* Close the group with a single divider under the last merchant, not between every child. */
[b-amringejda] tr.pt-child-row--last > td {
    border-bottom: 1px solid var(--pt-line-strong);
}

[b-amringejda] tr.pt-child-row--returned > td {
    opacity: 0.72;
}

/* Indented merchant name with an L-connector rising into the parent row above. */
[b-amringejda] .pt-child-merchant {
    position: relative;
    padding-left: 2.1rem !important;
}

[b-amringejda] .pt-child-merchant::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: -0.55rem;
    bottom: 50%;
    width: 0.6rem;
    border-left: 1.5px solid var(--pt-line-strong);
    border-bottom: 1.5px solid var(--pt-line-strong);
    border-bottom-left-radius: 6px;
}

[b-amringejda] .pt-child-name {
    font-weight: 600;
    color: var(--pt-ink);
    font-size: 0.85rem;
}

/* The leg's processor-facing merchant name, shown under the vendor name only when the two differ — a quiet
   secondary line so the vendor stays the primary identity while the merchant name isn't lost. */
[b-amringejda] .pt-child-merchant-sub {
    display: block;
    font-size: 0.74rem;
    color: var(--pt-ink-3);
}

[b-amringejda] .pt-child-fee {
    font-size: 0.74rem;
    color: var(--pt-info-ink);
    margin-top: 0.15rem;
}

/* Single-merchant reverse / view-reversal action, shown in the expanded detail card (multi-merchant
   payments act from their per-merchant rows instead). */
[b-amringejda] .pt-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ---- Reverse form: convenience-fee return toggle + preview ---- */
[b-amringejda] .pt-fee-return {
    background: var(--pt-note-bg);
    border: 1px solid var(--pt-note-line);
    border-radius: 0.5rem;
    padding: 0.8rem 0.95rem;
    margin-bottom: 0.5rem;
}

[b-amringejda] .pt-fee-return-note {
    font-size: 0.83rem;
    color: var(--pt-ink-2);
    margin-top: 0.4rem;
    padding-left: 1.6rem;
    line-height: 1.5;
}

[b-amringejda] .pt-fee-return-note strong {
    color: var(--pt-ink);
}

/* ---- Footer / pagination ---- */
[b-amringejda] .pt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--pt-line);
    color: var(--pt-ink-2);
}

/* ==========================================================================================
   Dark ground
   ==========================================================================================
   Token-only, for the reason given at the top of this file: a `::deep` rule prefixed with
   html[data-bs-theme="dark"] would get Blazor's scope attribute rewritten onto <html> and match
   nothing. Redefining the scale on .pt-page re-grounds every rule above it at once.

   Not an inversion of the light values — the ink scale is re-measured against the dark surface, and
   the pill fills move to low-saturation tints (a light pill fill on a dark row glares and pulls the
   eye away from the amounts, which are what this grid is read for). */
html[data-bs-theme="dark"] .pt-page[b-amringejda] {
    --pt-ink: #e8edf5;         /* primary text — ~13:1 on --pt-surface */
    --pt-ink-2: #b3bdcc;       /* secondary text — ~8:1 */
    --pt-ink-3: #8e99a9;       /* labels / de-emphasized — ~5:1 */
    --pt-line: #2b3441;
    --pt-line-strong: #3c4757;
    --pt-surface: #1a212b;
    --pt-surface-alt: #202836;
    --pt-hover: #263346;
    --pt-accent: #6ea8fe;      /* lifted so it still reads as interactive on the dark ground */
    --pt-on-accent: #10161d;   /* dark text on a light accent fill */

    --pt-head-bg: #202836;
    --pt-head-hover-bg: #26303f;
    --pt-highlight-bg: #3a2f13;
    --pt-highlight-edge: #e5a54b;
    --pt-chip-bg: #2b3441;

    --pt-ok-bg: #14321f;       --pt-ok-ink: #7ddba4;       --pt-ok-line: #245c37;
    --pt-info-bg: #12303f;     --pt-info-ink: #7fc8ec;     --pt-info-line: #245b74;
    --pt-warn-bg: #37290f;     --pt-warn-ink: #e6b566;     --pt-warn-line: #6b4f1c;
    --pt-bad-bg: #3a1a19;      --pt-bad-ink: #f09b96;      --pt-bad-line: #6d2e2b;
    --pt-neutral-bg: #262c35;  --pt-neutral-ink: #b6bdc7;  --pt-neutral-line: #3d4551;

    --pt-danger: #c94436;
    --pt-danger-hover: #de5344;

    --pt-info-ink-strong: #aadcf6;
    --pt-note-bg: #172232;
    --pt-note-line: #2a3b52;
}
/* /Components/Pages/Admin/Reversals.razor.rz.scp.css */
/* Reversals — operational console. Follows the same token conventions as the Users/audit-log redesign
   (--bs-* theme variables, so the page tracks the AppStack light theme without a second stylesheet) and
   reuses their pager chrome verbatim. */

/* ---- Header ------------------------------------------------------------------------------------ */

.rev-head[b-ken6edjt1k] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.rev-head h1[b-ken6edjt1k] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rev-head[b-ken6edjt1k]  .rev-head-icon {
    width: 24px;
    height: 24px;
    color: var(--bs-primary, #3b7ddd);
    opacity: 0.9;
}

.rev-sub[b-ken6edjt1k] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9rem;
    max-width: 44rem;
}

.rev-sub a[b-ken6edjt1k] {
    text-decoration: none;
}

.rev-stats[b-ken6edjt1k] {
    display: flex;
    gap: 1.5rem;
}

.rev-stat[b-ken6edjt1k] {
    text-align: right;
    line-height: 1.15;
}

.rev-stat-value[b-ken6edjt1k] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.rev-stat-value--warn[b-ken6edjt1k] { color: var(--swan-warn-ink); }

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

.rev-loading[b-ken6edjt1k] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ---- Toolbar ----------------------------------------------------------------------------------- */

.rev-toolbar[b-ken6edjt1k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.rev-search[b-ken6edjt1k] {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}

.rev-search[b-ken6edjt1k]  .rev-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    z-index: 2;
}

.rev-search .form-control[b-ken6edjt1k] {
    padding-left: 2.2rem;
    border-radius: 8px;
}

.rev-filter-select[b-ken6edjt1k] {
    flex: 0 1 180px;
    border-radius: 8px;
}

.rev-date[b-ken6edjt1k] {
    flex: 0 1 150px;
    border-radius: 8px;
}

.rev-clear[b-ken6edjt1k] {
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.rev-result-line[b-ken6edjt1k] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

/* ---- Empty state --------------------------------------------------------------------------------- */

.rev-empty[b-ken6edjt1k] {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.rev-empty[b-ken6edjt1k]  .rev-empty-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-secondary-color, #adb5bd);
    margin-bottom: 0.5rem;
}

/* ---- Table --------------------------------------------------------------------------------------- */

.rev-table-card[b-ken6edjt1k] {
    overflow: hidden;
    transition: opacity .1s ease;
}

.rev-table-card.is-loading[b-ken6edjt1k] {
    opacity: 0.5;
    pointer-events: none;
}

[b-ken6edjt1k] .rev-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

[b-ken6edjt1k] .rev-table td {
    vertical-align: middle;
}

.rev-payer[b-ken6edjt1k],
.rev-reason[b-ken6edjt1k] {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-reason[b-ken6edjt1k] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
}

.rev-fee-cell[b-ken6edjt1k] {
    white-space: nowrap;
}

.rev-fee-amount[b-ken6edjt1k] {
    font-variant-numeric: tabular-nums;
}

/* ---- Fee-status pill ----------------------------------------------------------------------------- */

.fee-pill[b-ken6edjt1k] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.15rem;
}

.fee-pill--outstanding[b-ken6edjt1k] {
    background: color-mix(in srgb, #d9820a 16%, transparent);
    color: var(--swan-warn-ink);
}

.fee-pill--paid[b-ken6edjt1k] {
    background: color-mix(in srgb, #1f9d6b 14%, transparent);
    color: var(--swan-ok-ink);
}

.fee-pill--waived[b-ken6edjt1k] {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
}

/* ---- Type badge ---------------------------------------------------------------------------------- */

.rev-type[b-ken6edjt1k] {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.rev-type--ach[b-ken6edjt1k] {
    background: color-mix(in srgb, #7b61c9 13%, transparent);
    color: var(--swan-info-ink);
}

.rev-type--card[b-ken6edjt1k] {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #495057);
}

/* ---- Row actions --------------------------------------------------------------------------------- */

.rev-actions[b-ken6edjt1k] {
    white-space: nowrap;
}

.rev-actions-row[b-ken6edjt1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}

.rev-view[b-ken6edjt1k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--bs-secondary-color, #adb5bd);
    transition: background-color .12s ease, color .12s ease;
}

.rev-view:hover[b-ken6edjt1k] {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-primary, #3b7ddd);
}

.rev-actions[b-ken6edjt1k]  .rev-view-chevron {
    width: 16px;
    height: 16px;
}

.confirm-inline[b-ken6edjt1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}

.confirm-inline-q[b-ken6edjt1k] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

/* ---- Pager (shared chrome with the users/audit-log redesign) ------------------------------------- */

.rev-pager[b-ken6edjt1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1rem;
}

.page-btn[b-ken6edjt1k],
.page-num[b-ken6edjt1k] {
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #495057);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.page-btn:hover:not(:disabled)[b-ken6edjt1k],
.page-num:hover:not(.is-current)[b-ken6edjt1k] {
    border-color: var(--bs-primary, #3b7ddd);
    color: var(--bs-primary, #3b7ddd);
}

.page-btn:disabled[b-ken6edjt1k] {
    opacity: 0.45;
    cursor: default;
}

.page-num.is-current[b-ken6edjt1k] {
    background: var(--bs-primary, #3b7ddd);
    border-color: var(--bs-primary, #3b7ddd);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.page-gap[b-ken6edjt1k] {
    padding: 0 0.15rem;
    color: var(--bs-secondary-color, #6c757d);
}

.page-btn:focus-visible[b-ken6edjt1k],
.page-num:focus-visible[b-ken6edjt1k] {
    outline: 2px solid var(--bs-primary, #3b7ddd);
    outline-offset: 1px;
}

/* ---- Responsive: shed lower-priority columns as width shrinks ------------------------------------- */

@media (max-width: 1100px) {
    .rev-table th:nth-child(8)[b-ken6edjt1k],
    [b-ken6edjt1k] .rev-table td:nth-child(8) { display: none; } /* Reason */
}

@media (max-width: 920px) {
    .rev-table th:nth-child(9)[b-ken6edjt1k],
    [b-ken6edjt1k] .rev-table td:nth-child(9) { display: none; } /* By */
}

@media (max-width: 780px) {
    .rev-table th:nth-child(5)[b-ken6edjt1k],
    [b-ken6edjt1k] .rev-table td:nth-child(5) { display: none; } /* Fee returned */
}
/* /Components/Pages/Admin/SiteReadiness.razor.rz.scp.css */
/* Site Readiness — an operated screen, not a read one. Readiness is encoded in form as well as text so
   what needs attention reads at a glance; colour is spent only on problems, so warnings pop against a calm
   field instead of competing with decoration.

   Colours come from two places, both of which follow the colour mode: --bs-* for chrome and for the vivid
   solid marks (--bs-warning / --bs-success are vivid in both builds, so ticks and stripes use them), and
   --swan-*-ink / -tint for semantic TEXT and fills. Bootstrap's own *-text-emphasis / *-bg-subtle families
   are deliberately absent — AppStack's dark build leaves them at light-ground values, so they render
   near-black on the dark page. See the palette in wwwroot/app.css. */

.verdict[b-hkqp3c5fak] {
    border-left: 4px solid var(--bs-warning);
}

.verdict-clear[b-hkqp3c5fak] {
    border-left-color: var(--bs-success);
}

/* Keeps the headline from stretching to the tallies on a wide screen. */
.verdict-text[b-hkqp3c5fak] {
    max-width: 68ch;
}

.tally-group[b-hkqp3c5fak] {
    padding-left: 1.25rem;
    border-left: 1px solid var(--bs-border-color);
}

.tally[b-hkqp3c5fak] {
    min-width: 4.5rem;
    text-align: right;
}

.tally-num[b-hkqp3c5fak] {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tally-label[b-hkqp3c5fak] {
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ---- filters + quiet actions ----
   Bootstrap's .btn-dark active state is invisible on a dark page, and .btn-outline-secondary's border all
   but disappears there. Both are driven off tokens instead, so "selected" reads in either mode: the active
   pill takes the theme's emphasis colour as its FILL and the page ground as its text, which inverts
   correctly (black-on-pale in light, white-on-dark in dark). */

.filter-btn[b-hkqp3c5fak],
.quiet-btn[b-hkqp3c5fak] {
    border: 1px solid var(--bs-border-color);
    background-color: transparent;
    color: var(--bs-body-color);
}

.filter-btn:hover[b-hkqp3c5fak],
.quiet-btn:hover[b-hkqp3c5fak] {
    border-color: var(--swan-accent-ink);
    color: var(--swan-accent-ink);
    background-color: transparent;
}

.filter-btn--on[b-hkqp3c5fak],
.filter-btn--on:hover[b-hkqp3c5fak] {
    background-color: var(--bs-emphasis-color);
    border-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
}

.filter-count[b-hkqp3c5fak] {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    margin-left: 0.2rem;
}

/* ---- app panel ---- */

.app-panel .card-body[b-hkqp3c5fak] {
    padding-bottom: 0;
}

/* A panel whose app has no sites ends on a card-body rather than the site table, so it has to pay for its
   own bottom padding — otherwise the "no sites yet" line sits flush against the card edge. */
.app-panel .card-body:last-child[b-hkqp3c5fak] {
    padding-bottom: 1rem;
}

.app-disabled .app-identity[b-hkqp3c5fak],
.app-disabled .gauge[b-hkqp3c5fak] {
    opacity: 0.6;
}

.app-identity[b-hkqp3c5fak] {
    min-width: 0;
}

.issuer[b-hkqp3c5fak] {
    font-family: var(--bs-font-monospace);
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
    word-break: break-all;
}

/* ---- completion gauge: one tick per site ---- */

.gauge[b-hkqp3c5fak] {
    text-align: right;
    flex: none;
}

.gauge-ticks[b-hkqp3c5fak] {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    /* A single tick alone reads as an artifact; a floor width makes it read as a gauge with one mark. */
    min-width: 3.5rem;
    margin-bottom: 0.3rem;
}

.gauge-tick[b-hkqp3c5fak] {
    width: 11px;
    height: 22px;
    border-radius: 1px;
}

.gauge-tick-live[b-hkqp3c5fak] {
    background: var(--bs-success);
}

/* Hatched, so the two states differ in texture as well as hue. */
.gauge-tick-blocked[b-hkqp3c5fak] {
    background: repeating-linear-gradient(135deg,
        var(--bs-warning) 0 2px, transparent 2px 4px);
    box-shadow: inset 0 0 0 1px var(--bs-warning);
}

.gauge-caption[b-hkqp3c5fak] {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- signal strip: one line, hairline-separated, quiet unless there's a problem ---- */

.signal-strip[b-hkqp3c5fak] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    font-size: 0.8rem;
}

.signal[b-hkqp3c5fak] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.15rem 0.75rem;
    color: var(--bs-secondary-color);
    border-left: 1px solid var(--bs-border-color);
}

.signal:first-child[b-hkqp3c5fak] {
    padding-left: 0;
    border-left: none;
}

.signal-label[b-hkqp3c5fak] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.signal-dot[b-hkqp3c5fak] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
    transform: translateY(-1px);
}

.signal-dot-ok[b-hkqp3c5fak] {
    background: var(--bs-success);
}

.signal-dot-idle[b-hkqp3c5fak] {
    background: var(--bs-secondary-color);
    opacity: 0.45;
}

.signal-ok .signal-value[b-hkqp3c5fak] {
    color: var(--bs-success);
}

/* The only signal that earns colour: something is actually wrong. */
.signal-warn .signal-value[b-hkqp3c5fak],
.signal-warn .signal-label[b-hkqp3c5fak] {
    color: var(--swan-warn-ink);
}

.signal-warn .signal-dot[b-hkqp3c5fak] {
    background: var(--bs-warning);
}

/* Reachability costs a network round trip, so it is asked for — and must look askable. */
.signal-link[b-hkqp3c5fak] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--swan-accent-ink);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.signal-link:hover:not(:disabled)[b-hkqp3c5fak] {
    text-decoration-thickness: 2px;
}

.signal-link:disabled[b-hkqp3c5fak] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    cursor: progress;
}

/* ---- site rows: no header band. Five columns of visually distinct content label themselves. ---- */

.site-table[b-hkqp3c5fak] {
    border-top: 1px solid var(--bs-border-color);
}

.site-table > tbody > tr > td[b-hkqp3c5fak] {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.site-table .site-cell[b-hkqp3c5fak] {
    /* Absorbs the severity stripe so the site name doesn't shift against it. */
    padding-left: 1.25rem;
    position: relative;
}

.row-blocked .site-cell[b-hkqp3c5fak]::before,
.row-live .site-cell[b-hkqp3c5fak]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.row-blocked .site-cell[b-hkqp3c5fak]::before {
    background: var(--bs-warning);
}

.row-live .site-cell[b-hkqp3c5fak]::before {
    background: var(--bs-success);
}

.id-cell code[b-hkqp3c5fak] {
    font-size: 0.78rem;
    /* Reference data, not a semantic value: it should be findable, not loud. Bootstrap's --bs-code-color
       (#e83e8c in both builds) made the site id the brightest thing in the row, outshouting the state
       badge beside it. */
    color: var(--bs-body-color);
}

.state-cell[b-hkqp3c5fak] {
    white-space: nowrap;
}

/* Own pills rather than Bootstrap's .bg-*-subtle / .text-*-emphasis pairing: those stay light-ground in
   the dark build, so a "Live" badge came out as a bright patch on a dark row. */
.state-pill[b-hkqp3c5fak] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    border-radius: 0.25rem;
    border: 1px solid;
}

.state-pill--live[b-hkqp3c5fak] {
    background: var(--swan-ok-tint);
    border-color: var(--swan-ok-line);
    color: var(--swan-ok-ink);
}

.state-pill--blocked[b-hkqp3c5fak] {
    background: var(--swan-warn-tint);
    border-color: var(--swan-warn-line);
    color: var(--swan-warn-ink);
}

.missing-lead[b-hkqp3c5fak] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-right: 0.35rem;
}

.missing-tags[b-hkqp3c5fak] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.missing-tag[b-hkqp3c5fak] {
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    padding: 0.05rem 0.35rem;
    border: 1px dashed var(--bs-warning);
    color: var(--swan-warn-ink);
    white-space: nowrap;
}

/* ---- inline drawer ---- */

.drawer-row > td[b-hkqp3c5fak] {
    background: var(--bs-tertiary-bg);
    border-top: 1px dashed var(--bs-border-color);
    padding: 1.1rem 1.25rem 1.3rem;
}

.drawer-title[b-hkqp3c5fak] {
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.7rem;
}

/* ---- add-site dialog ----
   Three questions in sequence rather than two columns of equal-weight boxes: hairlines mark where one
   question ends, and the only optional group is collapsed so an empty form shows what is actually required. */

.form-rule[b-hkqp3c5fak] {
    margin: 1.25rem 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 1; /* Bootstrap's <hr> is a 0.25-opacity currentColor rule — invisible on the dark card. */
}

.req[b-hkqp3c5fak] {
    color: var(--swan-warn-ink);
    font-weight: 600;
}

/* Reads as a control, not a heading: the caption carries the reason it is safe to leave shut. */
.disclosure[b-hkqp3c5fak] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.disclosure:hover[b-hkqp3c5fak] {
    color: var(--swan-accent-ink);
}

.disclosure-caret[b-hkqp3c5fak] {
    font-family: var(--bs-font-monospace);
    width: 0.9rem;
    flex: none;
    color: var(--bs-secondary-color);
}

.disclosure-note[b-hkqp3c5fak] {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* Indented under the disclosure so the three fields read as its contents. */
.credential-group[b-hkqp3c5fak] {
    margin: 0.9rem 0 0 0.9rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--bs-border-color);
}

/* Two lines, only once a source is chosen — the boundary matters at the moment of copying, not before. */
.copy-note[b-hkqp3c5fak] {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.copy-note .mark[b-hkqp3c5fak] {
    font-family: var(--bs-font-monospace);
    flex: none;
}

.copy-note-yes .mark[b-hkqp3c5fak] {
    color: var(--bs-success);
}

.copy-note-no .mark[b-hkqp3c5fak] {
    color: var(--swan-warn-ink);
}

.copy-list[b-hkqp3c5fak] {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.copy-list li[b-hkqp3c5fak] {
    display: flex;
    gap: 0.5rem;
    padding: 0.18rem 0;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.copy-list li:last-child[b-hkqp3c5fak] {
    border-bottom: none;
}

.copy-list .mark[b-hkqp3c5fak] {
    font-family: var(--bs-font-monospace);
    flex: none;
    width: 1rem;
}

.copy-list .mark-yes[b-hkqp3c5fak] {
    color: var(--bs-success);
}

.copy-list .mark-no[b-hkqp3c5fak] {
    color: var(--swan-warn-ink);
}

@media (max-width: 575.98px) {
    .tally-group[b-hkqp3c5fak] {
        padding-left: 0;
        border-left: none;
    }

    .signal[b-hkqp3c5fak] {
        padding-left: 0;
        border-left: none;
        flex-basis: 100%;
    }
}
/* /Components/Pages/Admin/UserDetail.razor.rz.scp.css */
/* User detail — drill-in page. Shares token conventions with the Users list and audit-log pages
   (--bs-* theme variables) but each page keeps its own copy of shared idioms (pills, empty/loading
   states) since Blazor scoped CSS doesn't cross component files — same approach as the rest of /admin. */

/* ---- Empty / loading states (mirrors Users.razor.css) -------------------------------------------- */

.user-empty[b-0l4m5lddqb] {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.user-empty[b-0l4m5lddqb]  .user-empty-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-secondary-color, #adb5bd);
    margin-bottom: 0.5rem;
}

.user-loading[b-0l4m5lddqb] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ---- Header ------------------------------------------------------------------------------------ */

.user-detail-head[b-0l4m5lddqb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.user-detail-identity[b-0l4m5lddqb] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.user-avatar-lg[b-0l4m5lddqb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a88eb, #3b60d1);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.user-actions[b-0l4m5lddqb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.confirm-inline[b-0l4m5lddqb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--bs-body-color, #495057);
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
}

/* ---- Section cards ------------------------------------------------------------------------------ */

.user-section[b-0l4m5lddqb] {
    height: 100%;
}

.user-section .card-header[b-0l4m5lddqb] {
    background: transparent;
    font-weight: 600;
}

.user-section .card-header[b-0l4m5lddqb]  .feather {
    width: 16px;
    height: 16px;
    color: var(--bs-primary, #3b7ddd);
}

.user-section--stub[b-0l4m5lddqb] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-style: dashed;
}

.user-section--stub .card-header[b-0l4m5lddqb]  .feather {
    color: var(--bs-secondary-color, #adb5bd);
}

/* ---- Definition-list detail grid ------------------------------------------------------------------ */

.detail-grid[b-0l4m5lddqb] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.87rem;
}

.detail-grid dt[b-0l4m5lddqb] {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.detail-grid dd[b-0l4m5lddqb] {
    margin: 0;
    color: var(--bs-body-color, #212529);
    word-break: break-word;
}

/* ---- Roles ------------------------------------------------------------------------------------- */

.role-toggle-list[b-0l4m5lddqb] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.role-toggle-row[b-0l4m5lddqb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color, #eef0f2);
}

.role-toggle-row:first-child[b-0l4m5lddqb] {
    border-top: 0;
}

.role-toggle-name[b-0l4m5lddqb] {
    font-weight: 600;
    font-size: 0.88rem;
}

/* ---- Saved payment methods ---------------------------------------------------------------------- */

.pm-list[b-0l4m5lddqb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pm-row[b-0l4m5lddqb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.87rem;
}

.pm-row[b-0l4m5lddqb]  .pm-icon {
    width: 15px;
    height: 15px;
    color: var(--bs-secondary-color, #6c757d);
}

.pm-label[b-0l4m5lddqb] {
    font-weight: 500;
}

/* ---- Status pill (mirrors Users.razor.css) ------------------------------------------------------ */

.status-pill[b-0l4m5lddqb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.status-pill-dot[b-0l4m5lddqb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-pill--active[b-0l4m5lddqb] {
    background: color-mix(in srgb, #1f9d6b 14%, transparent);
    color: var(--swan-ok-ink);
}

.status-pill--active .status-pill-dot[b-0l4m5lddqb] { background: var(--bs-success); }

.status-pill--inactive[b-0l4m5lddqb] {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
}

.status-pill--inactive .status-pill-dot[b-0l4m5lddqb] { background: var(--bs-secondary-color, #adb5bd); }

/* ---- Activity / list rows (vendors, payments, carts, audit) -------------------------------------- */

.activity-list[b-0l4m5lddqb] {
    display: flex;
    flex-direction: column;
}

.activity-row[b-0l4m5lddqb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--bs-border-color, #eef0f2);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}

.activity-list li:first-child .activity-row[b-0l4m5lddqb] {
    border-top: 0;
}

a.activity-row:hover[b-0l4m5lddqb] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.activity-row--static[b-0l4m5lddqb] {
    cursor: default;
}

.activity-main[b-0l4m5lddqb] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.activity-title[b-0l4m5lddqb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-sub[b-0l4m5lddqb] {
    font-size: 0.76rem;
    color: var(--bs-secondary-color, #6c757d);
}

.activity-amount[b-0l4m5lddqb] {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.87rem;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Users — list page. Follows the same token conventions as the audit-log redesign (--bs-* theme
   variables, so the page tracks the AppStack light theme without a second stylesheet) and reuses its
   pager chrome verbatim. */

/* ---- Header ------------------------------------------------------------------------------------ */

.user-head[b-kt5sauwwzm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.user-head h1[b-kt5sauwwzm] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.user-head[b-kt5sauwwzm]  .user-head-icon {
    width: 24px;
    height: 24px;
    color: var(--bs-primary, #3b7ddd);
    opacity: 0.9;
}

.user-sub[b-kt5sauwwzm] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9rem;
}

.user-stats[b-kt5sauwwzm] {
    display: flex;
    gap: 1.5rem;
}

.user-stat[b-kt5sauwwzm] {
    text-align: right;
    line-height: 1.15;
}

.user-stat-value[b-kt5sauwwzm] {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.user-stat-value--active[b-kt5sauwwzm] { color: var(--swan-ok-ink); }
.user-stat-value--inactive[b-kt5sauwwzm] { color: var(--bs-secondary-color, #6c757d); }

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

.user-loading[b-kt5sauwwzm] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ---- Toolbar ----------------------------------------------------------------------------------- */

.user-toolbar[b-kt5sauwwzm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.user-search[b-kt5sauwwzm] {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}

.user-search[b-kt5sauwwzm]  .user-search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    z-index: 2;
}

.user-search .form-control[b-kt5sauwwzm] {
    padding-left: 2.2rem;
    border-radius: 8px;
}

.user-filter-select[b-kt5sauwwzm] {
    flex: 0 1 190px;
    border-radius: 8px;
}

.user-clear[b-kt5sauwwzm] {
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.user-result-line[b-kt5sauwwzm] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

/* ---- Empty state --------------------------------------------------------------------------------- */

.user-empty[b-kt5sauwwzm] {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.user-empty[b-kt5sauwwzm]  .user-empty-icon {
    width: 28px;
    height: 28px;
    color: var(--bs-secondary-color, #adb5bd);
    margin-bottom: 0.5rem;
}

/* ---- Table --------------------------------------------------------------------------------------- */

.user-table-card[b-kt5sauwwzm] {
    overflow: hidden;
    transition: opacity .1s ease;
}

.user-table-card.is-loading[b-kt5sauwwzm] {
    opacity: 0.5;
    pointer-events: none;
}

[b-kt5sauwwzm] .user-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

[b-kt5sauwwzm] .user-row {
    cursor: pointer;
}

.user-cell[b-kt5sauwwzm] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.user-avatar-sm[b-kt5sauwwzm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a88eb, #3b60d1);
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
}

.user-cell-text[b-kt5sauwwzm] {
    min-width: 0;
}

.user-cell-name[b-kt5sauwwzm] {
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    font-size: 0.88rem;
}

.user-cell-roles[b-kt5sauwwzm] {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.role-chip[b-kt5sauwwzm] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary, #3b7ddd) 14%, transparent);
    color: color-mix(in srgb, var(--bs-primary, #3b7ddd) 80%, var(--bs-body-color));
}

.source-pill[b-kt5sauwwzm] {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #495057);
}

.source-pill--provisioned[b-kt5sauwwzm] {
    background: color-mix(in srgb, #3b7ddd 12%, transparent);
    color: var(--swan-accent-ink);
}

.source-pill--seeded[b-kt5sauwwzm] {
    background: color-mix(in srgb, #7b61c9 12%, transparent);
    color: var(--swan-info-ink);
}

.source-pill--admin[b-kt5sauwwzm] {
    background: color-mix(in srgb, #2e9e6b 12%, transparent);
    color: var(--swan-ok-ink);
}

.status-pill[b-kt5sauwwzm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.status-pill-dot[b-kt5sauwwzm] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-pill--active[b-kt5sauwwzm] {
    background: color-mix(in srgb, #1f9d6b 14%, transparent);
    color: var(--swan-ok-ink);
}

.status-pill--active .status-pill-dot[b-kt5sauwwzm] { background: var(--bs-success); }

.status-pill--inactive[b-kt5sauwwzm] {
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
}

.status-pill--inactive .status-pill-dot[b-kt5sauwwzm] { background: var(--bs-secondary-color, #adb5bd); }

.user-table[b-kt5sauwwzm]  .user-row-chevron {
    width: 16px;
    height: 16px;
    color: var(--bs-secondary-color, #adb5bd);
}

/* ---- Pager (shared chrome with the audit-log redesign) ------------------------------------------- */

.user-pager[b-kt5sauwwzm] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1rem;
}

.page-btn[b-kt5sauwwzm],
.page-num[b-kt5sauwwzm] {
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #495057);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.page-btn:hover:not(:disabled)[b-kt5sauwwzm],
.page-num:hover:not(.is-current)[b-kt5sauwwzm] {
    border-color: var(--bs-primary, #3b7ddd);
    color: var(--bs-primary, #3b7ddd);
}

.page-btn:disabled[b-kt5sauwwzm] {
    opacity: 0.45;
    cursor: default;
}

.page-num.is-current[b-kt5sauwwzm] {
    background: var(--bs-primary, #3b7ddd);
    border-color: var(--bs-primary, #3b7ddd);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.page-gap[b-kt5sauwwzm] {
    padding: 0 0.15rem;
    color: var(--bs-secondary-color, #6c757d);
}

.page-btn:focus-visible[b-kt5sauwwzm],
.page-num:focus-visible[b-kt5sauwwzm] {
    outline: 2px solid var(--bs-primary, #3b7ddd);
    outline-offset: 1px;
}

/* ---- Responsive ------------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .user-table th:nth-child(3)[b-kt5sauwwzm],
    [b-kt5sauwwzm] .user-table td:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
    .user-table th:nth-child(5)[b-kt5sauwwzm],
    [b-kt5sauwwzm] .user-table td:nth-child(5) { display: none; }
}
/* /Components/Pages/Checkout/Checkout.razor.rz.scp.css */
/* ============================================================
   Checkout — refined, trustworthy fintech.
   A clear numbered 3-step flow (Contact → Payment → Review),
   payment methods as selectable tiles, strong typographic
   hierarchy, and a single-column-until-desktop layout.

   Guidance applied (Baymard / Stripe / Shopify / WCAG):
   - body text ≥ 16px, helper text ≥ 14px, line-height ≥ 1.4
   - high-contrast ink for headings; muted slate for support
   - 48px input height & tap targets (also stops iOS zoom)
   - icons are rendered by the <FeatherIcon> child component, so the
     <svg> carries that component's scope, not this one — reach it
     via ::deep (NOT feather.replace, which mutates the DOM out from
     under Blazor and breaks diffing of any toggled subtree).

   EVERY colour below must resolve through a token declared on .co-wrap, with no literal left in a
   rule. CheckoutLayout's shell follows the colour mode (--bs-body-bg), so a hardcoded light palette
   here put near-black ink and white cards on a #202634 ground — the page title vanished outright.
   Routing everything through tokens is what lets the dark block at the foot of this file re-ground
   the page by redefining values, and it is also why those overrides are token-only: a `::deep`
   selector prefixed with html[data-bs-theme=dark] would have Blazor's scope attribute rewritten
   onto <html> instead of .co-wrap, and silently match nothing.
   ============================================================ */

.co-wrap[b-6znz5uzw1u] {
    /* Design tokens — defined here so they cascade to every
       descendant, including ::deep child-component content. */
    --ink: #0f172a;
    --ink-2: #1e293b;
    --muted: #5b6b81;
    --faint: #94a3b8;
    --line: #e7ecf3;
    --line-strong: #d3dce8;
    --line-hover: #b9c6d8;
    --surface: #ffffff;
    --surface-sunken: #f7f8fa;   /* an unselectable tile */
    --field: #ffffff;            /* input / tile ground (recessed from the card in dark) */
    --placeholder: #aab4c2;
    --hover: #fafcfe;
    --brand: #1b6ec2;
    --brand-ink: #155a9c;
    --brand-deep: #0b4f8a;
    --on-brand: #ffffff;         /* ink on a solid --brand fill (the Default pill) */
    --tint: #f1f7fd;
    --tint-2: #e4eefb;
    --tint-soft: #fbfdff;        /* the dashed new-card well */
    --tab-active: rgba(27, 110, 194, .06);
    --danger: #d62d2d;
    --danger-tint: #fdf1f1;
    --danger-line: #f3cccc;
    --danger-ink: #8f2020;
    --danger-ink-2: #9a4444;
    --warn-ink: #9a3412;
    --success: #0e9f6e;
    --on-success: #ffffff;       /* the check inside the done badge */
    --disabled-bg: #e8edf3;
    --disabled-ink: #9aa6b4;
    --badge-bg: #0f172a;         /* quantity dot — deliberately the highest-contrast mark on the card */
    --badge-ink: #ffffff;
    --avatar-bg: linear-gradient(150deg, var(--tint-2), #d5e4f8);
    --avatar-line: #cfe0f6;
    --summary-bg: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
    --focus-ring: 0 0 0 3px rgba(27, 110, 194, .16);
    --focus-ring-strong: 0 0 0 3px rgba(27, 110, 194, .18);
    --focus-ring-danger: 0 0 0 3px rgba(214, 45, 45, .14);
    --pay-btn-bg: linear-gradient(180deg, #2079cf 0%, var(--brand) 55%, var(--brand-ink) 100%);
    --pay-btn-ink: #ffffff;
    --pay-btn-shadow: 0 6px 18px -8px rgba(27, 110, 194, .7), 0 1px 2px rgba(15, 23, 42, .12);
    --pay-btn-shadow-hover: 0 10px 24px -8px rgba(27, 110, 194, .8), 0 1px 2px rgba(15, 23, 42, .12);
    --radius: 16px;
    --radius-sm: 11px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -16px rgba(15, 23, 42, .18);

    max-width: 1080px;
    margin: 0 auto;
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
}

/* ---- Page header ---- */
.co-head[b-6znz5uzw1u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.co-title[b-6znz5uzw1u] {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.co-secure[b-6znz5uzw1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted);
}

.co-secure[b-6znz5uzw1u]  svg.feather {
    width: 15px;
    height: 15px;
    color: var(--success);
}

/* ============================================================
   Step cards
   ============================================================ */
.co-steps[b-6znz5uzw1u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.co-step[b-6znz5uzw1u] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.co-step.is-open[b-6znz5uzw1u] {
    border-color: var(--line-strong);
}

/* Step header (the clickable summary bar) */
.co-step-head[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1.05rem 1.25rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.co-step-head--static[b-6znz5uzw1u] {
    cursor: default;
}

.co-step-head:hover:not(.co-step-head--static)[b-6znz5uzw1u] {
    background: var(--hover);
}

/* Numbered badge — turns into a green check once the step is satisfied */
.co-step-num[b-6znz5uzw1u] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tint-2);
    color: var(--brand-ink);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.co-step-num.is-done[b-6znz5uzw1u] {
    background: var(--success);
    color: var(--on-success);
}

.co-step-num.is-done[b-6znz5uzw1u]  svg.feather {
    width: 1em;
    height: 1em;
    stroke-width: 3;
}

.co-step-heading[b-6znz5uzw1u] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.co-step-title[b-6znz5uzw1u] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.co-step-value[b-6znz5uzw1u] {
    font-size: 0.92rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-step-tail[b-6znz5uzw1u] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.co-step-edit[b-6znz5uzw1u] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand);
}

/* CSS chevron — crisp at any size, rotates on open */
.co-caret[b-6znz5uzw1u] {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--faint);
    border-bottom: 2px solid var(--faint);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
}

.co-step.is-open .co-caret[b-6znz5uzw1u] {
    transform: translateY(2px) rotate(-135deg);
    border-color: var(--brand);
}

/* Step body */
.co-step-body[b-6znz5uzw1u] {
    padding: 0.35rem 1.25rem 1.4rem;
    animation: co-reveal-b-6znz5uzw1u .22s ease;
}

.co-field[b-6znz5uzw1u] {
    margin-bottom: 0.25rem;
}

/* ---- Form fields (reach child-component inputs via ::deep) ---- */
.co-step-body[b-6znz5uzw1u]  .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 0.4rem;
}

.co-step-body[b-6znz5uzw1u]  .form-control,
.co-step-body[b-6znz5uzw1u]  .form-select {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.7rem 0.9rem;
    min-height: 48px;
    color: var(--ink);
    background-color: var(--field);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.co-step-body[b-6znz5uzw1u]  .form-control::placeholder {
    color: var(--placeholder);
}

.co-step-body[b-6znz5uzw1u]  .form-control:focus,
.co-step-body[b-6znz5uzw1u]  .form-select:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.co-step-body[b-6znz5uzw1u]  .form-control.is-invalid {
    border-color: var(--danger);
}

.co-step-body[b-6znz5uzw1u]  .form-control.is-invalid:focus {
    box-shadow: var(--focus-ring-danger);
}

/* Card-number brand chip (rendered by CardNumberField) */
.co-step-body[b-6znz5uzw1u]  .input-group-text {
    border: 1.5px solid var(--line-strong);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--tint);
    color: var(--brand-ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.co-step-body[b-6znz5uzw1u]  .input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Helper / hint text */
.co-hint[b-6znz5uzw1u] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0.5rem 0 0;
}

.co-hint--switch[b-6znz5uzw1u] {
    margin-top: 0.9rem;
}

.co-step-body a[b-6znz5uzw1u] {
    color: var(--brand-ink);
    font-weight: 600;
}

/* Inline text-button styled as a link (guest switch, policy links, set default) */
.co-linkbtn[b-6znz5uzw1u] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.co-linkbtn:hover:not(:disabled)[b-6znz5uzw1u] {
    color: var(--brand-deep);
}

.co-linkbtn:disabled[b-6znz5uzw1u] {
    color: var(--faint);
    cursor: default;
    text-decoration: none;
}

/* ---- Inline notes (info / error) ---- */
.co-note[b-6znz5uzw1u] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

.co-note[b-6znz5uzw1u]  svg.feather {
    flex: none;
    margin-top: 0.1rem;
    width: 1.05em;
    height: 1.05em;
}

.co-note--info[b-6znz5uzw1u] {
    background: var(--tint);
    border: 1px solid var(--tint-2);
    color: var(--ink-2);
}

.co-note--info[b-6znz5uzw1u]  svg.feather {
    color: var(--brand);
}

.co-note--error[b-6znz5uzw1u] {
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    color: var(--danger-ink);
    margin-top: 0;
    margin-bottom: 1.1rem;
}

.co-note--error[b-6znz5uzw1u]  svg.feather {
    color: var(--danger);
}

.co-note-title[b-6znz5uzw1u] {
    font-weight: 600;
}

.co-note-sub[b-6znz5uzw1u] {
    margin-top: 0.2rem;
    color: var(--danger-ink-2);
}

.co-note-link[b-6znz5uzw1u] {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.875rem;
}

/* Sign-in note shown while the contact step is collapsed: it renders outside the (absent) step
   body, so this wrapper carries the step's horizontal padding itself. */
.co-step-tailnote[b-6znz5uzw1u] {
    padding: 0 1.25rem 1.15rem;
}

.co-step-tailnote .co-note[b-6znz5uzw1u] {
    margin-top: 0;
}

/* ============================================================
   Payment method tiles
   ============================================================ */
.co-pay-list[b-6znz5uzw1u] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.co-pay[b-6znz5uzw1u] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.co-pay:hover[b-6znz5uzw1u] {
    border-color: var(--line-hover);
}

.co-pay.is-selected[b-6znz5uzw1u] {
    border-color: var(--brand);
    background: var(--tint);
    box-shadow: 0 0 0 1px var(--brand) inset;
}

.co-pay:focus-within[b-6znz5uzw1u] {
    box-shadow: var(--focus-ring-strong);
}

/* ACH turned off for this cart: the saved bank account stays visible for context but can't be
   selected (radio disabled). Dashed, muted, and un-hoverable so it reads as unavailable. */
.co-pay.is-disabled[b-6znz5uzw1u],
.co-pay.is-disabled:hover[b-6znz5uzw1u] {
    cursor: not-allowed;
    background: var(--surface-sunken);
    border-color: var(--line-strong);
    border-style: dashed;
    box-shadow: none;
}

.co-pay.is-disabled .co-pay-name[b-6znz5uzw1u],
.co-pay.is-disabled .co-pay-mark[b-6znz5uzw1u],
.co-pay.is-disabled[b-6znz5uzw1u]  svg.feather {
    opacity: 0.55;
}

.co-pay-sub--warn[b-6znz5uzw1u] {
    color: var(--warn-ink);
    font-weight: 500;
}

/* Real radio kept for accessibility, visually replaced by .co-pay-mark */
.co-pay-radio[b-6znz5uzw1u] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.co-pay-mark[b-6znz5uzw1u] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--field);
    transition: border-color .15s ease;
}

.co-pay.is-selected .co-pay-mark[b-6znz5uzw1u] {
    border-color: var(--brand);
    background: radial-gradient(circle at center, var(--brand) 0 6px, var(--field) 7px);
}

.co-pay[b-6znz5uzw1u]  svg.feather {
    width: 22px;
    height: 22px;
    color: var(--muted);
    flex: none;
}

.co-pay.is-selected[b-6znz5uzw1u]  svg.feather {
    color: var(--brand-ink);
}

.co-pay-info[b-6znz5uzw1u] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1 1 auto;
    min-width: 0;
}

.co-pay-line[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.co-pay-name[b-6znz5uzw1u] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.co-pay-sub[b-6znz5uzw1u] {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.co-tag[b-6znz5uzw1u] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.co-pay-actions[b-6znz5uzw1u] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

.co-pay-actions .co-linkbtn[b-6znz5uzw1u] {
    font-size: 0.85rem;
    white-space: nowrap;
}

.co-iconbtn[b-6znz5uzw1u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.co-iconbtn:hover:not(:disabled)[b-6znz5uzw1u] {
    background: var(--danger-tint);
}

.co-iconbtn--danger:hover:not(:disabled)[b-6znz5uzw1u] {
    color: var(--danger);
}

.co-iconbtn:disabled[b-6znz5uzw1u] {
    opacity: 0.45;
    cursor: default;
}

.co-iconbtn[b-6znz5uzw1u]  svg.feather {
    width: 18px;
    height: 18px;
    color: inherit;
}

/* New-card fields revealed under the tiles */
.co-newcard[b-6znz5uzw1u] {
    margin-top: 0.9rem;
    padding: 1rem 1rem 0.4rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--tint-soft);
}

.co-newcard--bare[b-6znz5uzw1u] {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Card vs. bank-account (ACH) selector shown above the new-method fields */
.co-method-tabs[b-6znz5uzw1u] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.co-method-tab[b-6znz5uzw1u] {
    flex: 1 1 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.co-method-tab.is-active[b-6znz5uzw1u] {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--tab-active);
}

.co-ach-help[b-6znz5uzw1u] {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--brand);
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   Step 3 — Review & pay
   ============================================================ */
.co-step--pay[b-6znz5uzw1u] {
    border-color: var(--line-strong);
}

.co-terms[b-6znz5uzw1u] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 1.1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-2);
    cursor: pointer;
}

.co-terms[b-6znz5uzw1u]  .form-check-input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.12rem;
    border: 1.5px solid var(--line-strong);
    cursor: pointer;
}

.co-terms[b-6znz5uzw1u]  .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.co-terms[b-6znz5uzw1u]  .form-check-input:focus {
    box-shadow: var(--focus-ring-strong);
    border-color: var(--brand);
}

/* The big pay action */
.co-pay-btn[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--pay-btn-ink);
    background: var(--pay-btn-bg);
    box-shadow: var(--pay-btn-shadow);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.co-pay-btn:hover:not(:disabled)[b-6znz5uzw1u] {
    box-shadow: var(--pay-btn-shadow-hover);
    transform: translateY(-1px);
}

.co-pay-btn:active:not(:disabled)[b-6znz5uzw1u] {
    transform: translateY(0);
}

.co-pay-btn:disabled[b-6znz5uzw1u] {
    background: var(--disabled-bg);
    color: var(--disabled-ink);
    box-shadow: none;
    cursor: not-allowed;
}

.co-pay-btn[b-6znz5uzw1u]  svg.feather {
    width: 1.05em;
    height: 1.05em;
}

.co-payfoot[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.co-payfoot[b-6znz5uzw1u]  svg.feather {
    width: 0.95em;
    height: 0.95em;
    color: var(--success);
}

/* ============================================================
   Order summary
   ============================================================ */
.summary-panel[b-6znz5uzw1u] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.summary-panel--mobile[b-6znz5uzw1u] {
    padding: 1.1rem 1.25rem;
}

.summary-sticky[b-6znz5uzw1u] {
    position: sticky;
    top: 1.5rem;
    background: var(--summary-bg);
}

.summary-heading[b-6znz5uzw1u] {
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* Line items */
.summary-item[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.summary-item:has(+ .summary-subtotal)[b-6znz5uzw1u] {
    border-bottom: 0;
}

.summary-item-media[b-6znz5uzw1u] {
    position: relative;
    flex: 0 0 auto;
}

.summary-item-avatar[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--avatar-bg);
    border: 1px solid var(--avatar-line);
    color: var(--brand-deep);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

.summary-item-qtybadge[b-6znz5uzw1u] {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-ink);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--surface);
}

.summary-item-info[b-6znz5uzw1u] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.summary-item-name[b-6znz5uzw1u] {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.summary-item-desc[b-6znz5uzw1u] {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 0.1rem;
}

.summary-item-qty[b-6znz5uzw1u] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

.summary-item-total[b-6znz5uzw1u] {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Vendor group breakout (multi-vendor carts) */
.summary-group-header[b-6znz5uzw1u] {
    margin-top: 0.6rem;
    padding-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand);
}

.summary-group-subtotal[b-6znz5uzw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0 0.85rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--line);
}

/* The last item in a vendor group sits above its subtotal, not the divider. */
.summary-item:has(+ .summary-group-subtotal)[b-6znz5uzw1u] {
    border-bottom: 0;
}

/* The final group's subtotal butts against the overall Subtotal row (which draws its own top border). */
.summary-group-subtotal:has(+ .summary-subtotal)[b-6znz5uzw1u] {
    border-bottom: 0;
}

/* Subtotal / fee rows */
.summary-subtotal[b-6znz5uzw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.summary-fee[b-6znz5uzw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.summary-fee-info[b-6znz5uzw1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.summary-fee-info:hover[b-6znz5uzw1u] {
    color: var(--brand);
}

.summary-fee-info[b-6znz5uzw1u]  svg.feather {
    width: 13px;
    height: 13px;
    color: var(--faint);
}

/* Total */
.summary-total[b-6znz5uzw1u] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.7rem;
    padding-top: 0.9rem;
    border-top: 2px solid var(--line-strong);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.summary-total span:last-child[b-6znz5uzw1u] {
    font-size: 1.5rem;
    color: var(--brand-ink);
    letter-spacing: -0.01em;
}

/* Trust line at the foot of the summary */
.summary-secure[b-6znz5uzw1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

.summary-secure[b-6znz5uzw1u]  svg.feather {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--success);
}

/* ---- Mobile/tablet collapsible summary header ---- */
.summary-toggle[b-6znz5uzw1u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--brand-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.summary-toggle-label[b-6znz5uzw1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-toggle[b-6znz5uzw1u]  svg.feather {
    width: 18px;
    height: 18px;
    color: var(--brand);
}

.summary-caret[b-6znz5uzw1u] {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.summary-caret.is-open[b-6znz5uzw1u] {
    transform: translateY(2px) rotate(-135deg);
}

.summary-toggle-total[b-6znz5uzw1u] {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.summary-panel--mobile .summary-content[b-6znz5uzw1u] {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

/* ---- Default Bootstrap alert fallbacks (no-cart / not-found states) ---- */
.co-wrap > .alert[b-6znz5uzw1u] {
    border-radius: var(--radius-sm);
}

/* ============================================================
   Dark ground
   ============================================================
   Token-only, for the reason given at the top of this file. Not an inversion of the light values:
   the ink scale is re-measured against the dark card (#293042, the same --swan-surface the layout's
   header bar uses, so the chrome and the cards stay one surface), and the fields recess BELOW the
   card rather than sitting white on it — a white input on a dark card is the single loudest thing on
   the page and pulls the eye off the amounts.

   The blue also has to move. #1b6ec2 measures ~3:1 on the dark card, so `--brand` lifts to #6ea8fe
   (matching --swan-accent-ink in app.css) and the --brand-ink/--brand-deep "more emphasis" steps go
   LIGHTER instead of darker, since emphasis on a dark ground means more luminance, not less. The pay
   button keeps white-on-blue: it is the one element that should still read as a solid, saturated
   action, so its gradient is defined outright rather than derived from --brand. */
html[data-bs-theme="dark"] .co-wrap[b-6znz5uzw1u] {
    --ink: #e9eef7;              /* primary text — ~12:1 on --surface */
    --ink-2: #c9d2df;            /* body / labels — ~8.5:1 */
    --muted: #9aa7b8;            /* helper + summary rows — ~5.2:1 */
    --faint: #6f7b8c;            /* carets, idle icon buttons */
    --line: #363f52;
    --line-strong: #464f63;
    --line-hover: #5a6478;
    --surface: #293042;          /* = AppStack dark's --bs-card-bg */
    --surface-sunken: #232937;
    --field: #1f2634;
    --placeholder: #6f7b8c;
    --hover: #2f3749;
    --brand: #6ea8fe;
    --brand-ink: #9cc3ff;
    --brand-deep: #c2d9ff;
    --on-brand: #10192a;         /* dark ink on the light-blue pill */
    --tint: #22304a;
    --tint-2: #2c3d5c;
    --tint-soft: #232b3c;
    --tab-active: rgba(110, 168, 254, .16);
    --danger: #f3766f;
    --danger-tint: #351d1c;
    --danger-line: #6d322e;
    --danger-ink: #f7a49e;
    --danger-ink-2: #d5928c;
    --warn-ink: #e6b566;
    --success: #3ddc97;
    --on-success: #0c2b1e;       /* the check reads as a cut-out, not white-on-mint */
    --disabled-bg: #2f3749;
    --disabled-ink: #79808f;
    --badge-bg: #e9eef7;         /* the dot inverts with the ground and stays the loudest mark */
    --badge-ink: #16202e;
    --avatar-bg: linear-gradient(150deg, #2f4162, #26375a);
    --avatar-line: #3a4f76;
    --summary-bg: linear-gradient(180deg, #2c3448 0%, #272e3e 100%);
    --focus-ring: 0 0 0 3px rgba(110, 168, 254, .28);
    --focus-ring-strong: 0 0 0 3px rgba(110, 168, 254, .32);
    --focus-ring-danger: 0 0 0 3px rgba(243, 118, 111, .26);
    --pay-btn-bg: linear-gradient(180deg, #4f93f7 0%, #3b7fe3 55%, #2f6ecb 100%);
    --pay-btn-ink: #ffffff;
    --pay-btn-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .4);
    --pay-btn-shadow-hover: 0 10px 24px -8px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .7);
}

/* ============================================================
   Motion — staggered entrance, disabled for reduced-motion
   ============================================================ */
@keyframes co-reveal-b-6znz5uzw1u {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes co-rise-b-6znz5uzw1u {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.co-step[b-6znz5uzw1u],
.summary-sticky[b-6znz5uzw1u] {
    animation: co-rise-b-6znz5uzw1u .4s cubic-bezier(.22, 1, .36, 1) both;
}

.co-steps .co-step:nth-child(1)[b-6znz5uzw1u] { animation-delay: .02s; }
.co-steps .co-step:nth-child(2)[b-6znz5uzw1u] { animation-delay: .08s; }
.co-steps .co-step:nth-child(3)[b-6znz5uzw1u] { animation-delay: .14s; }
.summary-sticky[b-6znz5uzw1u] { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
    .co-step[b-6znz5uzw1u],
    .summary-sticky[b-6znz5uzw1u],
    .co-step-body[b-6znz5uzw1u] {
        animation: none;
    }

    .co-caret[b-6znz5uzw1u],
    .summary-caret[b-6znz5uzw1u],
    .co-pay-btn[b-6znz5uzw1u],
    .co-step[b-6znz5uzw1u],
    .co-pay[b-6znz5uzw1u] {
        transition: none;
    }
}
/* /Components/Pages/Checkout/CheckoutResult.razor.rz.scp.css */
/* Result + account-setup cards — match the checkout's readable type scale and contrast.

   Same rule as Checkout.razor.css: every colour resolves through a token on .cr-wrap, because
   CheckoutLayout's ground follows the colour mode. The literals these replaced (#111827 headings,
   #1f2937 table cells) were invisible on the dark card. */
.cr-wrap[b-iwgwyrr2vc] {
    --ink: #111827;
    --ink-2: #1f2937;
    --muted: #475569;
    --faint: #64748b;
    --line: #e2e8f0;
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

html[data-bs-theme="dark"] .cr-wrap[b-iwgwyrr2vc] {
    --ink: #e9eef7;
    --ink-2: #d5dce7;
    --muted: #a9b4c4;
    --faint: #9aa7b8;
    --line: #363f52;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.card[b-iwgwyrr2vc] {
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
}

.card-body h2[b-iwgwyrr2vc] {
    color: var(--ink);
}

/* Lead text under the status icon */
.card-body > p.text-muted[b-iwgwyrr2vc] {
    font-size: 1.05rem;
    color: var(--muted) !important;
}

/* Detail table: 16px rows, higher-contrast labels than the default muted gray */
.table[b-iwgwyrr2vc] {
    font-size: 1rem;
}

.table th[b-iwgwyrr2vc],
.table td[b-iwgwyrr2vc] {
    padding: 0.6rem 0.25rem;
    vertical-align: middle;
}

.table th.text-muted[b-iwgwyrr2vc] {
    color: var(--muted) !important;
    font-weight: 500;
}

.table td[b-iwgwyrr2vc] {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* "Save your details for next time" prompt */
.card-body h3[b-iwgwyrr2vc] {
    color: var(--ink);
}

.card-body p.small[b-iwgwyrr2vc] {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--faint);
}
/* /Components/Shared/Hint.razor.rz.scp.css */
/* Hover/focus hint glyph + description bubble. The bubble commits to an inverted fill so it reads as a
   distinct floating layer over the page — which means it flips with the colour mode (dark ink on a light
   page, light paper on a dark one) rather than being dark in both. */

.pt-hint[b-vt7t3rlikj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3rem;
    color: var(--bs-secondary-color); /* faint until hovered — present but never shouting */
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
    outline: none;
    transition: color .12s ease;
}

.pt-hint[b-vt7t3rlikj]  svg {
    width: 13px;
    height: 13px;
}

.pt-hint:hover[b-vt7t3rlikj],
.pt-hint:focus-visible[b-vt7t3rlikj] {
    color: var(--bs-primary);
}

.pt-hint:focus-visible[b-vt7t3rlikj] {
    box-shadow: 0 0 0 0.15rem rgba(47, 111, 237, .25);
}

/* ---- Bubble ---- */
.pt-hint-bubble[b-vt7t3rlikj] {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: 50;
    width: max-content;
    max-width: 250px;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
    font-family: var(--bs-font-sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    /* Headers set uppercase / tracking / nowrap — reset all of it inside the bubble. */
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: left;
    box-shadow: 0 8px 24px rgba(27, 35, 51, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.pt-hint:hover .pt-hint-bubble[b-vt7t3rlikj],
.pt-hint:focus-visible .pt-hint-bubble[b-vt7t3rlikj] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Upward-pointing caret, tucked under the top edge of the bubble. */
.pt-hint-bubble[b-vt7t3rlikj]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--bs-emphasis-color);
}

/* ---- Edge-aware placement ---- */
.pt-hint--start .pt-hint-bubble[b-vt7t3rlikj] {
    left: 0;
    transform: translateY(-4px);
}
.pt-hint--start:hover .pt-hint-bubble[b-vt7t3rlikj],
.pt-hint--start:focus-visible .pt-hint-bubble[b-vt7t3rlikj] {
    transform: translateY(0);
}
.pt-hint--start .pt-hint-bubble[b-vt7t3rlikj]::before {
    left: 9px;
    transform: none;
}

.pt-hint--end .pt-hint-bubble[b-vt7t3rlikj] {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}
.pt-hint--end:hover .pt-hint-bubble[b-vt7t3rlikj],
.pt-hint--end:focus-visible .pt-hint-bubble[b-vt7t3rlikj] {
    transform: translateY(0);
}
.pt-hint--end .pt-hint-bubble[b-vt7t3rlikj]::before {
    left: auto;
    right: 9px;
    transform: none;
}