@import '_content/MyKhata360.Shared.UI/MyKhata360.Shared.UI.4adkf44dt9.bundle.scp.css';

/* /Components/Layout/AppShell.razor.rz.scp.css */
/* AppShell — DESIGN_RULES.md §1.3 + §7
   Every value is a var(--mk-*) from wwwroot/css/design-tokens.css.
   The only literals are the @media widths: CSS custom properties are not
   allowed in media queries, so --mk-bp-md/lg/xl are mirrored
   here by hand. Keep them in sync with the token file.
   Large-tier base (full sidebar), then narrowed downward. */

.shell[b-r3ba228xcn] {
    display: grid;
    grid-template-columns: var(--mk-sidebar) 1fr;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
    background: var(--mk-bg-app);
}

.shell:focus[b-r3ba228xcn] {
    /* Root only carries tabindex to catch Escape — it should never show a ring. */
    outline: none;
}

/* ---------- Sidebar ---------- */

.side[b-r3ba228xcn] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--mk-bg-nav);
    border-right: 1px solid var(--mk-border);
    color: var(--mk-text-2);
}

.side__brand[b-r3ba228xcn] {
    display: flex;
    align-items: center;
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}

.side__nav[b-r3ba228xcn] {
    flex: 1;
    padding: var(--mk-s4) 0 var(--mk-s2);
}

.side__footer[b-r3ba228xcn] {
    margin: auto var(--mk-s3) var(--mk-s4);
}

/* ---------- Default brand mark ---------- */

.brand[b-r3ba228xcn] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text-strong);
    text-decoration: none;
}

.brand__mark[b-r3ba228xcn] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    /* Inset dark edge = the cloth spine of a bahi khata. */
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-r3ba228xcn] {
    color:var(--mk-primary-ink);
}

/* ---------- Top bar ---------- */

.top[b-r3ba228xcn] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--mk-s4);
    height: var(--mk-topbar);
    padding: 0 var(--mk-s5);
    background: var(--mk-bg-surface);
    border-bottom: 1px solid var(--mk-border);
}

.top__start[b-r3ba228xcn] {
    flex: 1;
    min-width: 0;
    max-width: 420px;
}

.top__end[b-r3ba228xcn] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-left: auto;
}

[b-r3ba228xcn] .burger {
    display: none;
    place-items: center;
    width: var(--mk-icon-btn);
    height: var(--mk-icon-btn);
    padding: 0;
    border: 0;
    border-radius: var(--mk-r-sm);
    background: transparent;
    color: var(--mk-text-2);
    cursor: pointer;
}

[b-r3ba228xcn] .burger:hover {
    background: var(--mk-bg-app);
}

/* Three bars drawn from the current color so there is no icon-font dependency. */
.burger__bars[b-r3ba228xcn],
.burger__bars[b-r3ba228xcn]::before,
.burger__bars[b-r3ba228xcn]::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--mk-r-pill);
    background: currentColor;
}

.burger__bars[b-r3ba228xcn] {
    position: relative;
}

.burger__bars[b-r3ba228xcn]::before,
.burger__bars[b-r3ba228xcn]::after {
    content: "";
    position: absolute;
    left: 0;
}

.burger__bars[b-r3ba228xcn]::before { top: -6px; }
.burger__bars[b-r3ba228xcn]::after  { top: 6px; }

/* ---------- Main / content ---------- */

.main[b-r3ba228xcn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.body[b-r3ba228xcn] {
    display: flex;
    flex: 1;
    min-width: 0;
}

.content[b-r3ba228xcn] {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--mk-content-maxw);
    padding: var(--mk-s5);
}

.rail[b-r3ba228xcn] {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s2);
    width: var(--mk-icon-rail);
    padding: var(--mk-s4) 0;
    background: var(--mk-bg-surface);
    border-left: 1px solid var(--mk-border);
}

.scrim[b-r3ba228xcn] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--mk-bg-scrim);
}

/* ==========================================================================
   Medium (600–1024px): sidebar collapses to an icon-only rail (§7).
   Slot content is styled through ::deep because nav items are supplied by
   the consumer and so never carry this component's scope attribute.
   ========================================================================== */
@media (max-width: 1024.98px) {

    .shell[b-r3ba228xcn] {
        grid-template-columns: var(--mk-sidebar-sm);
    }

    .side__brand[b-r3ba228xcn] {
        justify-content: center;
        padding-inline: 0;
    }

    .brand__text[b-r3ba228xcn],
    .side[b-r3ba228xcn]  .nav-item__label,
    .side[b-r3ba228xcn]  .nav-group__label,
    .side__footer[b-r3ba228xcn] {
        display: none;
    }

    .side[b-r3ba228xcn]  .nav-item {
        justify-content: center;
        padding-inline: 0;
        border-left-color: transparent;
    }
}

/* ==========================================================================
   Small (below 600px): off-canvas drawer, labels return inside it (§7).
   ========================================================================== */
@media (max-width: 599.98px) {

    .shell[b-r3ba228xcn] {
        grid-template-columns: 1fr;
    }

    .side[b-r3ba228xcn] {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: var(--mk-sidebar);
        transform: translateX(-100%);
        transition: transform var(--mk-t);
        box-shadow: var(--mk-sh-lg);
    }

    .side.is-open[b-r3ba228xcn] {
        transform: translateX(0);
    }

    .side__brand[b-r3ba228xcn] {
        justify-content: flex-start;
        padding-inline: var(--mk-s4);
    }

    .brand__text[b-r3ba228xcn],
    .side[b-r3ba228xcn]  .nav-item__label,
    .side[b-r3ba228xcn]  .nav-group__label,
    .side__footer[b-r3ba228xcn] {
        display: revert;
    }

    .side[b-r3ba228xcn]  .nav-item {
        justify-content: flex-start;
        padding-inline: var(--mk-s3);
    }

    [b-r3ba228xcn] .burger {
        display: grid;
    }

    .top[b-r3ba228xcn] {
        padding: 0 var(--mk-s4);
    }

    /* §1.3: search collapses on mobile rather than squeezing the action row. */
    .top__start[b-r3ba228xcn] {
        display: none;
    }

    .content[b-r3ba228xcn] {
        padding: var(--mk-s4);
    }

    .rail[b-r3ba228xcn] {
        display: none;
    }
}

/* ==========================================================================
   XL (1441px and up): centre the content, widen the gutters (§7).
   ========================================================================== */
@media (min-width: 1441px) {

    .content[b-r3ba228xcn] {
        margin: 0 auto;
        padding: var(--mk-s6) var(--mk-s8);
    }
}

@media (prefers-reduced-motion: reduce) {

    .side[b-r3ba228xcn] {
        transition: none;
    }
}
/* /Components/Layout/AppShellNavGroup.razor.rz.scp.css */
/* AppShellNavGroup — DESIGN_RULES.md §2. Tokens only. */

.nav-group[b-sl5u9j6w9g] {
    padding: 0 var(--mk-s3) var(--mk-s4);
}

.nav-group__label[b-sl5u9j6w9g] {
    padding: 0 var(--mk-s3) var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mk-ls-label);
    color: var(--mk-text-muted);
}

.nav-group__list[b-sl5u9j6w9g] {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* /Components/Layout/AppShellNavItem.razor.rz.scp.css */
/* AppShellNavItem — DESIGN_RULES.md §2. Tokens only. */

[b-hsvc0wg03w] .nav-item {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    width: 100%;
    /* 9px block padding + a 20px line box clears the 44px touch floor (§0). */
    padding: 9px var(--mk-s3);
    margin-bottom: 2px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--mk-r-md) var(--mk-r-md) 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--mk-fs-sm);
    text-align: left;
    color: var(--mk-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mk-t-fast);
}

[b-hsvc0wg03w] .nav-item:hover {
    background: var(--mk-bg-nav-hover);
    text-decoration: none;
}

/* NavLink stamps `active` on the matching route. */
[b-hsvc0wg03w] .nav-item.active {
    background: var(--mk-bg-nav-active);
    border-left-color: var(--mk-primary);
    color: var(--mk-primary-hover);
    font-weight: var(--mk-fw-semibold);
}

.nav-item__icon[b-hsvc0wg03w] {
    flex: none;
    width: 18px;
    text-align: center;
    opacity: .9;
}

.nav-item__label[b-hsvc0wg03w] {
    flex: 1;
    min-width: 0;
}

/* Chevron drawn as a rotated border corner — no icon font needed. */
.nav-item__chevron[b-hsvc0wg03w] {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .7;
    transform: rotate(-45deg);
    transition: transform var(--mk-t-fast);
}

.nav-item__chevron.is-open[b-hsvc0wg03w] {
    transform: rotate(45deg);
}

.nav-item__children[b-hsvc0wg03w] {
    list-style: none;
    margin: 0;
    /* §2: children indent by one --mk-space-4 step. */
    padding: 0 0 0 var(--mk-s4);
}

/* Icon-only rail (Medium tier): the chevron would collide with the centred icon. */
@media (min-width: 600px) and (max-width: 1024.98px) {

    .nav-item__chevron[b-hsvc0wg03w] {
        display: none;
    }

    .nav-item__children[b-hsvc0wg03w] {
        padding-left: 0;
    }
}
/* /Components/Layout/AuthShell.razor.rz.scp.css */
/* AuthShell — DESIGN_RULES.md §1.2 + §7. Tokens only.
   @media widths are literal because custom properties cannot be used there;
   they mirror --mk-bp-md / --mk-bp-lg. */

.auth[b-mpj9lka2dl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
    background: var(--mk-bg-app);
    /* §1.2: a subtle geometric wash behind the card, never a busy image.
       Two flat diagonal wedges — ledger red and brand orange — at very low
       alpha. Written as rgba() literals because color-mix() on a custom
       property is not safe across the browsers this app targets; the channels
       are --mk-red and --mk-orange. */
    background-image:
        linear-gradient(135deg, rgba(157, 34, 38, .045) 0 40%, transparent 40%),
        linear-gradient(315deg, rgba(249, 115, 22, .05) 0 32%, transparent 32%);
}

.auth__main[b-mpj9lka2dl] {
    display: grid;
    flex: 1;
    place-items: center;
    padding: var(--mk-s5) var(--mk-s4);
}

.auth__card[b-mpj9lka2dl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: var(--mk-auth-card-maxw);
    overflow: hidden;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-lg);
}

.auth__card--solo[b-mpj9lka2dl] {
    grid-template-columns: 1fr;
    max-width: var(--mk-auth-card-maxw-solo);
}

.auth__pane[b-mpj9lka2dl] {
    padding: var(--mk-s8) var(--mk-s6);
}

.auth__content[b-mpj9lka2dl] {
    margin-top: var(--mk-s6);
}

.auth__aside[b-mpj9lka2dl] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    text-align: center;
    background: var(--mk-bg-warm);
    border-left: 1px solid var(--mk-cream-deep);
    /* Signature: faint horizontal rules, echoing a bahi-khata page. */
    background-image: repeating-linear-gradient(
        to bottom, transparent 0 31px, rgba(157, 34, 38, .09) 31px 32px);
}

.auth__foot[b-mpj9lka2dl] {
    padding: var(--mk-s5) var(--mk-s4);
    text-align: center;
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.auth__foot a[b-mpj9lka2dl] {
    color: var(--mk-text-link);
    text-decoration: none;
}

.auth__foot a:hover[b-mpj9lka2dl] {
    text-decoration: underline;
}

/* ---------- Default brand mark ---------- */

.brand[b-mpj9lka2dl] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text);
    text-decoration: none;
}

.brand__mark[b-mpj9lka2dl] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-mpj9lka2dl] {
    color:var(--mk-primary-ink);
}

/* ==========================================================================
   Medium and below — the benefit panel is the first thing to go (§1.2).
   ========================================================================== */
@media (max-width: 1024.98px) {

    .auth__card[b-mpj9lka2dl] {
        grid-template-columns: 1fr;
        max-width: var(--mk-auth-card-maxw-solo);
    }

    .auth__aside[b-mpj9lka2dl] {
        display: none;
    }
}

/* ==========================================================================
   Small — full-screen card, no float, no shadow (§1.2).
   ========================================================================== */
@media (max-width: 599.98px) {

    .auth__main[b-mpj9lka2dl] {
        align-items: stretch;
        padding: 0;
    }

    .auth__card[b-mpj9lka2dl] {
        align-content: center;
        min-height: 100vh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    .auth__pane[b-mpj9lka2dl] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Shell metrics (--sidebar-w, --bottomnav-h, --color-surface …) live in wwwroot/app.css. They
   cannot live here: this file is scoped, and a scoped :root becomes :root[b-…], which matches nothing. */

/* ── Shell ──────────────────────────────────────────────────────────── */
.page[b-2w8vnf1q37] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg);
}

/* ── Sidebar — mobile/tablet: fixed overlay drawer ───────────────────── */
.sidebar[b-2w8vnf1q37] {
    /* Leave one collapsed-rail width of the page peeking, so the drawer never
       covers the whole viewport on a narrow phone. */
    width: min(var(--sidebar-w), calc(100vw - var(--mk-sidebar-sm)));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--mk-z-drawer);
    /* White rail with a hairline edge (UI/UX spec v1.0 §7.1). */
    background: var(--mk-bg-nav);
    border-right: 1px solid var(--mk-border);
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.open[b-2w8vnf1q37] {
    transform: translateX(0);
    box-shadow: var(--shadow-sidebar);
}

/* ── Sidebar backdrop ───────────────────────────────────────────────── */
.sidebar-backdrop[b-2w8vnf1q37] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-drawer-backdrop);
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease);
}

.sidebar-backdrop.open[b-2w8vnf1q37] {
    opacity: 1;
    pointer-events: all;
}

/* ── Main area ──────────────────────────────────────────────────────── */
main[b-2w8vnf1q37] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--bottomnav-h);
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.top-row[b-2w8vnf1q37] {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--mk-z-topbar);
    box-shadow: var(--shadow-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    padding: 0 var(--mk-s4);
}

/* ── Hamburger ──────────────────────────────────────────────────────── */
[b-2w8vnf1q37] .hamburger {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 9px;
    transition: background var(--t-fast) var(--ease);
}

[b-2w8vnf1q37] .hamburger:hover { background:var(--mk-bg-subtle); }

/* Back to the page above this one (Services/PageParents). A pill with the parent's name on a wide
   screen; just the arrow on a phone, where the top bar has no room for words. */
.hdr-back[b-2w8vnf1q37] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    height: 36px;
    max-width: 200px;
    padding: 0 var(--mk-s3) 0 var(--mk-s2);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease);
}
.hdr-back:hover[b-2w8vnf1q37] { background: var(--mk-bg-subtle); color: var(--mk-text-strong); }
.hdr-back-label[b-2w8vnf1q37] { overflow: hidden; text-overflow: ellipsis; }

/* Personal Finance's bar already carries breadcrumbs, search, the period and + Add; its Back is
   the arrow alone (the parent's name is in the tooltip) so search keeps its width. */
.hdr-back--compact[b-2w8vnf1q37] { width: 36px; padding: 0; justify-content: center; }
.hdr-back--compact .hdr-back-label[b-2w8vnf1q37] { display: none; }

@media (max-width: 599.98px) {
    .hdr-back[b-2w8vnf1q37] { width: 36px; padding: 0; justify-content: center; }
    .hdr-back-label[b-2w8vnf1q37] { display: none; }
}

.hamburger span[b-2w8vnf1q37] {
    display: block;
    width: 17px;
    height: 2px;
    background: var(--mk-text-2);
    border-radius: 2px;
    transition: transform var(--t-fast) var(--ease),
                opacity   var(--t-fast) var(--ease);
}

/* ── Article ────────────────────────────────────────────────────────── */
article.content[b-2w8vnf1q37] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Bottom navigation (mobile only) ───────────────────────────────── */
.bottom-nav[b-2w8vnf1q37] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mk-z-bottomnav);
    height: var(--bottomnav-h);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: stretch;
    box-shadow: 0 -2px 16px rgba(0,0,0,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item,
.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color:var(--mk-text-muted);
    text-decoration: none;
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: 0.02em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: color var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item:hover,
.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item:hover {
    color:var(--mk-text-2);
}

.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item.active,
.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item.active {
    color: var(--color-brand);
}

.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item.active::before,
.bottom-nav[b-2w8vnf1q37]  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--color-brand);
    border-radius: 0 0 4px 4px;
}

.bn-icon[b-2w8vnf1q37] {
    font-size: var(--mk-t-section);
    line-height: 1;
}

/* ── Notification bell ──────────────────────────────────────────────── */
.notif-bell[b-2w8vnf1q37] { position: relative; display: inline-flex; align-items: center; }
.notif-badge[b-2w8vnf1q37] {
    position: absolute; top: -4px; right: -6px;
    background: var(--mk-danger-solid); color: var(--mk-text-oncolor); border-radius: var(--mk-r-pill);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold); min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; pointer-events: none; line-height: 1;
}
[b-2w8vnf1q37] .notif-bell-btn {
    width: var(--mk-btn-h); height: var(--mk-btn-h);
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--mk-text-2); font-size: var(--mk-t-card); line-height: 1;
    border-radius: var(--mk-r-md); transition: background .15s;
}
[b-2w8vnf1q37] .notif-bell-btn:hover { background:var(--mk-bg-subtle); }

/* ── Avatar button & dropdown ───────────────────────────────────────── */
[b-2w8vnf1q37] .avatar-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-bold); color: var(--mk-text-oncolor); line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--mk-primary);
    transition: opacity .15s;
}
[b-2w8vnf1q37] .avatar-btn:hover { opacity: .85; }
/* Replaces the package theme toggle; sized to sit alongside the avatar button. */
[b-2w8vnf1q37] .topbar-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mk-btn-h);
    height: var(--mk-btn-h);
    border: none;
    border-radius: var(--mk-r-md);
    background: transparent;
    color:var(--mk-text);
    font-size: var(--mk-t-card);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

[b-2w8vnf1q37] .topbar-theme-btn:hover {
    background: var(--mk-bg-hover);
    color:var(--mk-text-strong);
}

.avatar-menu[b-2w8vnf1q37] {
    /* position/top/right are set inline (fixed, root-level) — see MainLayout.razor
       comment for why: top-row's z-index:100 stacking context would otherwise trap
       an absolutely-positioned menu nested inside it below the close-on-outside-click
       backdrop, regardless of this class's own z-index. */
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    width: 300px;
    max-width: calc(100vw - var(--mk-s5));
    box-shadow: var(--mk-sh-md);
    border: 1px solid var(--mk-border);
    z-index: var(--mk-z-header-menu);
    overflow: hidden;
    /* The menu now carries the user- and tenant-level entries that used to be
       in the left rail, so on a short viewport it has to scroll rather than
       run off the bottom of the screen. */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--mk-topbar) - var(--mk-s5));
}

.avatar-menu .menu-scroll[b-2w8vnf1q37] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--mk-s1) 0;
}

.avatar-menu a[b-2w8vnf1q37], .avatar-menu[b-2w8vnf1q37]  button {
    display: flex; align-items: center; gap: var(--mk-s3);
    width: 100%; min-height: 42px; padding: var(--mk-s2) var(--mk-s4);
    background: none; border: none;
    font-family: inherit; font-size: var(--mk-fs-sm); font-weight: var(--mk-fw-medium);
    color: var(--mk-text); text-decoration: none;
    cursor: pointer; text-align: left; transition: background .1s;
}
.avatar-menu a:hover[b-2w8vnf1q37], .avatar-menu[b-2w8vnf1q37]  button:hover { background: var(--mk-bg-subtle); }
.avatar-menu a[b-2w8vnf1q37]  .lc, .avatar-menu button[b-2w8vnf1q37]  .lc { width: 16px; height: 16px; color: var(--mk-text-2); flex-shrink: 0; }
.avatar-menu a:hover[b-2w8vnf1q37]  .lc, .avatar-menu button:hover[b-2w8vnf1q37]  .lc { color:var(--mk-primary-ink); }

/* Identity header — not scrollable, stays pinned above the list. */
.avatar-menu .menu-head[b-2w8vnf1q37] {
    display: flex; align-items: center; gap: var(--mk-s3);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
    flex-shrink: 0;
}
.avatar-menu .menu-head-avatar[b-2w8vnf1q37] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mk-primary-soft); color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-bold); font-size: var(--mk-t-secondary);
}
.avatar-menu .menu-head-text[b-2w8vnf1q37] { min-width: 0; flex: 1; }
.avatar-menu .menu-head-badge[b-2w8vnf1q37] {
    display: inline-block; margin-top: var(--mk-s1);
    padding: 1px var(--mk-s2); border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle); color: var(--mk-text-2);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-head-name[b-2w8vnf1q37] {
    font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar-menu .menu-head-sub[b-2w8vnf1q37] {
    font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Group heading — same treatment as the sidebar's section labels so the two
   navigation surfaces read as one system. */
.avatar-menu .menu-group[b-2w8vnf1q37] {
    padding: var(--mk-s2) var(--mk-s4) var(--mk-s1);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--mk-text-2);
}
.avatar-menu .menu-scroll .menu-divider[b-2w8vnf1q37] { margin: var(--mk-s1) 0; }

.avatar-menu .menu-badge[b-2w8vnf1q37] {
    margin-left: auto;
    background: var(--mk-danger-solid); color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs); font-weight: var(--mk-fw-bold);
    padding: 1px 6px; border-radius: var(--mk-r-pill); line-height: 1.5;
}

.avatar-menu .menu-divider[b-2w8vnf1q37] { height: 1px; background: var(--mk-border); margin: 0; }
.avatar-menu .menu-signout[b-2w8vnf1q37] {
    color: var(--mk-danger); flex-shrink: 0;
    font-weight: var(--mk-fw-semibold);
}
.avatar-menu .menu-signout[b-2w8vnf1q37]  .lc { color: var(--mk-danger); }
.avatar-menu .menu-signout:hover[b-2w8vnf1q37] { background: var(--mk-danger-lt); }
.avatar-menu a:focus-visible[b-2w8vnf1q37], .avatar-menu[b-2w8vnf1q37]  button:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: -2px; }
.avatar-menu .menu-signout:hover[b-2w8vnf1q37]  .lc { color: var(--mk-danger); }

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

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

/* ── Tablet (640 px +): no bottom nav, overlay drawer still ─────────── */
/* Canonical tier edge — Medium starts at --mk-bp-md (600px). Was 640px,
   which put 600–639px in a dead zone where --rd-* had already switched to
   tablet sizing but this file was still in mobile layout. */
@media (min-width: 600px) {
    .bottom-nav[b-2w8vnf1q37] { display: none; }
    main[b-2w8vnf1q37] { padding-bottom: 0; }
    .top-row[b-2w8vnf1q37] { padding: 0 20px; }
}

/* ── Desktop (1024 px +): persistent sidebar, true full-screen ──────── */
/* Canonical tier edge — Large starts at --mk-bp-lg (1025px). */
@media (min-width: 1025px) {
    .page[b-2w8vnf1q37] {
        flex-direction: row;
        height: 100dvh;
        overflow: hidden;
    }

    /* Flush white column with a hairline edge (UI/UX spec v1.0 §7.1) — the floating,
       shadowed rail it replaces read as decoration the spec's "neutral surfaces, no
       heavy shadows" rule rules out. */
    .sidebar[b-2w8vnf1q37] {
        position: sticky;
        top: 0;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        flex-shrink: 0;
        transform: translateX(0);
        box-shadow: none;
        transition: width var(--t-med) var(--ease),
                    transform var(--t-med) var(--ease),
                    box-shadow var(--t-med) var(--ease);
        overflow: hidden;
    }

    .sidebar.desktop-collapsed[b-2w8vnf1q37] { width: var(--mk-sidebar-sm); }

    /* Collapsed rail relies on each link's native title= tooltip — a CSS ::after pill
       can't escape .nav-scrollable, which must keep overflow-y:auto (the browser then
       forces overflow-x to auto too, clipping any tooltip). */

    /* Icon-only collapsed mode */
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nl          { display: none; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nl-group    { display: none; }
    /* Section LABELS stay hidden at the collapsed width — there is no room for a word — but the rules
       between sections come back, because collapsing the sidebar now shows every
       module icon and an undivided column of ~50 identical-sized glyphs is unreadable.
       The rules are the only grouping the rail has left. */
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  hr.nl-group  { display: block; margin: var(--mk-s2) var(--mk-s3); }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-link    { justify-content: center; padding: var(--mk-s2) 0; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .ni          { margin: 0; width: 20px; height: 20px; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .ni-badge    { display: flex; position: absolute; top: 2px; right: 4px; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-link    { position: relative; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer  { padding: var(--mk-s3) 0; align-items: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer-id { justify-content: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .nav-footer-avatar { width: 30px; height: 30px; font-size: var(--mk-t-micro); }

    /* Labels are hidden at this width, so stack the three account actions vertically —
       side by side they overflow the collapsed rail and sign-out gets clipped. */
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .top-row     { padding-left: 0; justify-content: center; }
    .sidebar.desktop-collapsed[b-2w8vnf1q37]  .navbar-brand { justify-content: center; }

    .sidebar-backdrop[b-2w8vnf1q37] { display: none; }

    [b-2w8vnf1q37] .hamburger { display: none; }

    main[b-2w8vnf1q37] {
        height: 100dvh;
        overflow: hidden;
        padding-left: 0;
    }

    .top-row[b-2w8vnf1q37] {
        padding-left: var(--mk-s5);   /* 24px desktop page padding, spec §6.1 */
        padding-right: var(--mk-s5);
        flex-shrink: 0;
    }

    article.content[b-2w8vnf1q37] {
        flex: 1;
        height: 0; /* let flex calc the remaining height */
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
    }
}

/* ── Responsive top-bar ─────────────────────────────────────────────── */
.hdr-filter[b-2w8vnf1q37] { display: flex; }

.hdr-welcome[b-2w8vnf1q37] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    min-width: 0;
    overflow: hidden;
}

.hdr-welcome-text[b-2w8vnf1q37] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color:var(--mk-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-welcome-date[b-2w8vnf1q37] {
    font-size: var(--mk-t-micro);
    color:var(--mk-text-muted);
    white-space: nowrap;
}

/* Unlike the date, this stays on narrower screens: it says where an entry will land. */
.hdr-welcome-context[b-2w8vnf1q37] {
    font-size: var(--mk-t-micro);
    color:var(--mk-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Right cluster: Search | Period | + Add | Notifications | Theme | Profile ── */
.hdr-right[b-2w8vnf1q37] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-left: auto;
    min-width: 0;
}

/* ‹ month › — the picker keeps its own look; the steppers sit tight either side of it. */
.hdr-period[b-2w8vnf1q37] { display: flex; align-items: center; gap: 2px; }

/* The one primary action in the bar (guide §4.3). */
[b-2w8vnf1q37] .hdr-add {
    display: inline-flex; align-items: center; gap: var(--mk-s2);
    height: var(--mk-btn-h);
    padding: 0 var(--mk-s3);
    border: none; border-radius: var(--mk-r-md);
    background: var(--mk-primary); color: var(--mk-text-onprimary);
    font: inherit; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
    white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
[b-2w8vnf1q37] .hdr-add:hover { background: var(--mk-primary-hover); }
[b-2w8vnf1q37] .hdr-add-caret { width: 14px; height: 14px; opacity: .85; }

/* Split: main half = Quick Entry, caret = the full Add menu. Compound selectors so they outrank
   pf-prototype.css's `.pf-theme .hdr-add` padding/radius. */
.hdr-add-split[b-2w8vnf1q37] { display: inline-flex; align-items: stretch; gap: 1px; flex-shrink: 0; }
[b-2w8vnf1q37] .hdr-add.hdr-add-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
[b-2w8vnf1q37] .hdr-add.hdr-add-more {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    padding-left: var(--mk-s2); padding-right: var(--mk-s2);
}
[b-2w8vnf1q37] .hdr-add-more-ico { width: 16px; height: 16px; }

@media (max-width: 1440.98px) {
    .hdr-welcome-date[b-2w8vnf1q37] { display: none; }
}

@media (max-width: 1024.98px) {
    .hdr-filter[b-2w8vnf1q37] { display: none; }
    .hdr-add-label[b-2w8vnf1q37], [b-2w8vnf1q37] .hdr-add-caret { display: none; }
}

@media (max-width: 767px) {
    .hdr-welcome[b-2w8vnf1q37] { display: none; }
}

@media (max-width: 599.98px) {
}

/* ══════════════════════════════════════════════════════════════════════
   PERSONAL FINANCE — light chrome

   Both shells now have a white rail (UI/UX spec v1.0 §7.1). PF keeps a
   top bar that is glass rather than opaque so scroll position stays legible
   through it. Glassmorphism is deliberately confined to this one element —
   the design system reserves it for sticky navigation only, and using it on
   cards turns a depth cue into decoration.
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme.page[b-2w8vnf1q37] {
    background: var(--mk-bg-app);
}

.pf-theme .sidebar[b-2w8vnf1q37] {
    background: var(--mk-bg-surface);
    border-right: 1px solid var(--mk-border);
}

.pf-theme .top-row[b-2w8vnf1q37] {
    background: var(--mk-pf-glass);
    -webkit-backdrop-filter: blur(var(--mk-pf-glass-blur));
    backdrop-filter: blur(var(--mk-pf-glass-blur));
    border-bottom: 1px solid var(--mk-border);
    box-shadow: none;
}

.pf-theme .hamburger span[b-2w8vnf1q37] {
    background: var(--mk-pf-ink);
}

.pf-theme[b-2w8vnf1q37]  .hamburger:hover {
    background: var(--mk-bg-subtle);
}

/* Shown in place of a page that belongs to another business type (Services/RouteAccess). */
.mk-route-blocked[b-2w8vnf1q37] {
    max-width: 28rem;
    margin: var(--mk-s8) auto;
    padding: var(--mk-s6);
    text-align: center;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
    color: var(--mk-text-secondary);
}

.mk-route-blocked h1[b-2w8vnf1q37] {
    margin: var(--mk-s3) 0 var(--mk-s2);
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.mk-route-blocked p[b-2w8vnf1q37] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-et29ddwz77] {
    min-height: var(--mk-topbar);
    background-color: var(--mk-bg-nav);
    border-bottom: 1px solid var(--mk-border);
}

/* ── Rail collapse control ────────────────────────────────
   Lives in the sidebar's own brand row rather than the page top bar, so it never
   renders over the content area. Below the desktop tier the sidebar is a drawer
   (dismissed by the backdrop or the top-bar hamburger), so there is nothing to
   collapse and the button is hidden. */
.nav-brand-row[b-et29ddwz77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
}

[b-et29ddwz77] .nav-rail-toggle {
    display: none;
    width: var(--mk-s6);
    height: var(--mk-s6);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

[b-et29ddwz77] .nav-rail-toggle:hover {
    background: var(--mk-bg-nav-hover);
    border-color: var(--mk-border-strong);
    color: var(--mk-text-strong);
}

/* Canonical Large tier — the persistent rail starts at --mk-bp-lg (1025px). */
@media (min-width: 1025px) {
    [b-et29ddwz77] .nav-rail-toggle { display: inline-flex; }

    /* In the collapsed rail there is no room for the wordmark and a control side by side, so the rail
       keeps the control (Dashboard is the first nav row underneath). The container
       gutter goes too, so the button centres in the rail. */
    .nav-brand-row.rail[b-et29ddwz77] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .nav-brand-row.rail .navbar-brand[b-et29ddwz77] { display: none; }
}

.navbar-brand[b-et29ddwz77] {
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--mk-text-strong) !important;
    text-decoration: none;
}

/* ── Icon element ─────────────────────────────────────── */
/* ::deep because the icon is a Lucide <svg> rendered by LcIcon, which carries LcIcon's
   scope attribute rather than this component's. 18px glyph in a 22px slot. */
[b-et29ddwz77] .ni {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--mk-text-muted);
    margin: 0 var(--mk-s3) 0 2px;
    transition: color 0.15s;
}

/* ── Label element ────────────────────────────────────── */
.nl[b-et29ddwz77] {
    transition: opacity 0.15s;
}

/* ── Notification badge (icon-mode version) ──────────── */
.ni-badge[b-et29ddwz77] {
    display: none;
    margin-left: auto;
    background: var(--mk-danger-solid);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-bold);
    padding: 2px 5px;
    border-radius: var(--mk-r-pill);
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}

/* One gap on the column replaces the old per-item padding-bottom plus
   :first-of-type / :last-of-type padding, so every row — and every section
   label between them — sits on the same rhythm. */
.nav-scrollable .nav[b-et29ddwz77] {
    gap: 2px;
    padding-block: var(--mk-s2);
}

.nav-item[b-et29ddwz77] {
    font-size: var(--mk-fs-sm);
}

    .nav-item[b-et29ddwz77]  .nav-link {
        color: var(--mk-text-2);
        background: none;
        border: none;
        /* The 3px active edge (below) is drawn as a left border, so every row
           reserves it to keep labels from shifting when a row becomes active. */
        border-left: 3px solid transparent;
        border-radius: 0 var(--mk-r-md) var(--mk-r-md) 0;
        /* Touch floor on the drawer; the persistent desktop rail tightens to
           --mk-ctrl-h further down, where the pointer is a mouse. */
        min-height: 44px;
        height: auto;
        display: flex;
        align-items: center;
        line-height: 1.4;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: var(--mk-s2);
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

/* Active row (UI/UX spec v1.0 §7.1): primary-soft fill, orange-600 text, semibold,
   3px orange left edge. Colour is not the only cue — the edge and weight carry it too. */
.nav-item[b-et29ddwz77]  a.active {
    background: var(--mk-bg-nav-active);
    border-left-color: var(--mk-primary);
    color: var(--mk-primary-hover);
    font-weight: var(--mk-fw-semibold);
}

.nav-item[b-et29ddwz77]  a.active .ni {
    color:var(--mk-primary-ink);
}

.nav-item[b-et29ddwz77]  .nav-link:hover {
    background-color: var(--mk-bg-nav-hover);
    color: var(--mk-text-strong);
}

/* Hover must not repaint the active row. */
.nav-item[b-et29ddwz77]  a.active:hover {
    background: var(--mk-bg-nav-active);
    color: var(--mk-primary-hover);
}

.nav-item[b-et29ddwz77]  .nav-link:hover .ni {
    color: var(--mk-text-strong);
}

/* ── Always scrollable ───────────────────────────────── */
.nav-scrollable[b-et29ddwz77] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .nav-scrollable[b-et29ddwz77]::-webkit-scrollbar {
        width: 4px;
    }

    .nav-scrollable[b-et29ddwz77]::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollable[b-et29ddwz77]::-webkit-scrollbar-thumb {
        background: var(--mk-border-strong);
        border-radius: 2px;
    }

.nav-notif-badge[b-et29ddwz77] {
    margin-left: auto;
    background: var(--mk-danger-solid);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-bold);
    padding: 2px 6px;
    border-radius: var(--mk-r-pill);
    min-width: 18px;
    text-align: center;
    line-height: 1.5;
    flex-shrink: 0;
}

/* NOTE: section-header styling is NOT here — see wwwroot/app.css.
   RenderSectionHeader builds that element with a RenderTreeBuilder, so it never
   receives this file's b-<hash> scope attribute and no rule in this file can
   reach it. The rules that used to sit here had been dead for exactly that
   reason; they are in app.css now, where they apply. */

/* ── Large tier (1025px+): persistent rail, pointer is a mouse ─────────
   The 44px row height in the base is the touch-target floor for the mobile
   drawer. On the desktop rail it only costs vertical space — with 40+ rows
   that is a lot of extra scrolling — so rows tighten to the dense control
   height. Literal width mirrors --mk-bp-lg; custom properties are illegal
   inside @media. */
@media (min-width: 1025px) {

    /* 40px rows on the desktop rail, 44px under Comfortable Display (guide §3.3): the
       active row is the same height as its neighbours, only its fill and edge differ. */
    .nav-item[b-et29ddwz77]  .nav-link {
        min-height: 40px;
    }
}

/* Subgroup caption inside a long section (guide §3.2). A caption, not a destination:
   plain, small, muted, no hover and no click target. The icon rail hides it (nl-group). */
.nav-subgroup[b-et29ddwz77] {
    padding: var(--mk-s2) var(--mk-s4) 2px calc(var(--mk-s4) + 3px);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
    letter-spacing: .02em;
    -webkit-user-select: none;
    user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PERSONAL FINANCE

   PF used to invert a navy rail here. The base rules above are now the white
   spec rail, so PF needs nothing of its own except the glass top row.
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme .top-row[b-et29ddwz77] {
    background-color: transparent;
}
/* /Components/Layout/OnboardingCarouselShell.razor.rz.scp.css */
/* OnboardingCarouselShell — tokens only.
   @media widths are literal (custom properties are illegal in media queries);
   they mirror --mk-bp-sm / --mk-bp-md. */

.ob[b-5ktc2mkl20] {
    min-height: 100vh;
    /* Dynamic viewport unit: on a phone the URL bar collapses on scroll, and 100vh
       leaves a strip of page background below the flow at rest. Falls back to the
       100vh above wherever dvh is unsupported. */
    min-height: 100dvh;
    background: var(--mk-hero-bg);
    color: var(--mk-hero-fg);
    font-family: var(--mk-font);
    display: flex;
    justify-content: center;
    padding: var(--mk-s5) var(--mk-s4) var(--mk-s6);
}

.ob__inner[b-5ktc2mkl20] {
    width: 100%;
    max-width: 460px;
    /* The body row is the only flexible one: progress, headline and actions keep their
       natural height at every screen size, and the illustration absorbs what is left. */
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    align-content: start;
}

/* ---------- Progress ---------- */

.ob__top[b-5ktc2mkl20] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s5);
}

.ob__bars[b-5ktc2mkl20] {
    display: flex;
    gap: var(--mk-s2);
    flex: 1;
    min-width: 0;
}

.ob__bar[b-5ktc2mkl20] {
    height: 4px;
    flex: 1;
    border-radius: var(--mk-r-pill);
    background: var(--mk-hero-line);
    transition: background var(--mk-t-fast);
}

.ob__bar.is-done[b-5ktc2mkl20] {
    background: var(--mk-primary);
}

.ob__count[b-5ktc2mkl20] {
    flex: none;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
    font-variant-numeric: tabular-nums;
}

/* ---------- Back ---------- */

[b-5ktc2mkl20] .ob__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s5);
    padding: var(--mk-s2) 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color:var(--mk-primary-ink);
}

.ob__back span[b-5ktc2mkl20] {
    font-size: var(--mk-t-section-sm);
    line-height: 1;
}

/* ---------- Headline ---------- */

.ob__title[b-5ktc2mkl20] {
    margin: 0 0 var(--mk-s4);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-extrabold);
    line-height: 1.15;
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-hero-fg);
}

.ob__title-accent[b-5ktc2mkl20] {
    color:var(--mk-primary-ink);
}

.ob__sub[b-5ktc2mkl20] {
    margin: 0 0 var(--mk-s6);
    font-size: var(--mk-t-card-sm);
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

/* ---------- Body ---------- */

.ob__body[b-5ktc2mkl20] {
    /* Without this the 1fr row cannot shrink past its content and the actions get
       pushed below the fold on a short screen. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mk-s4);
    padding-bottom: var(--mk-s6);
}

.ob__hero[b-5ktc2mkl20] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Actions ---------- */

.ob__actions[b-5ktc2mkl20] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mk-s3);
}

[b-5ktc2mkl20] .ob__cta {
    width: 100%;
    padding: var(--mk-s4);
    border: none;
    border-radius: var(--mk-r-md);
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    font-family: inherit;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    cursor: pointer;
    transition: opacity var(--mk-t-fast);
}

[b-5ktc2mkl20] .ob__cta:hover:not(:disabled) {
    opacity: .9;
}

[b-5ktc2mkl20] .ob__cta:disabled {
    opacity: .45;
    cursor: not-allowed;
}

[b-5ktc2mkl20] .ob__skip,
.ob__hint[b-5ktc2mkl20] {
    margin: 0;
    text-align: center;
    font-size: var(--mk-t-body);
}

[b-5ktc2mkl20] .ob__skip {
    padding: var(--mk-s2);
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--mk-fw-semibold);
    color:var(--mk-primary-ink);
}

.ob__hint[b-5ktc2mkl20] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-hero-fg-2);
}

/* ==========================================================================
   Small (below 600px): the flow already owns the viewport, so only the
   headline needs to come down a step to keep two words per line.
   ========================================================================== */
@media (max-width: 599.98px) {

    .ob[b-5ktc2mkl20] {
        padding: var(--mk-s4) var(--mk-s4) var(--mk-s5);
    }

    .ob__title[b-5ktc2mkl20] {
        font-size: var(--mk-t-section);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ob__bar[b-5ktc2mkl20],
    .ob__cta[b-5ktc2mkl20] {
        transition: none;
    }
}
/* /Components/Layout/OnboardingShell.razor.rz.scp.css */
/* OnboardingShell — DESIGN_RULES.md §1.1 + §7. Tokens only.
   @media widths are literal (custom properties are illegal in media queries);
   they mirror --mk-bp-md / --mk-bp-lg. */

.split[b-kze88uk7xx] {
    display: grid;
    /* §1.1: ~45/55 in favour of the form. */
    grid-template-columns: 45fr 55fr;
    min-height: 100vh;
    font-family: var(--mk-font);
    color: var(--mk-text);
}

.split__promo[b-kze88uk7xx] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    background: var(--mk-bg-warm);
    /* Signature: faint horizontal rules, echoing a bahi-khata page. */
    background-image: repeating-linear-gradient(
        to bottom, transparent 0 31px, rgba(157, 34, 38, .09) 31px 32px);
}

.split__form[b-kze88uk7xx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--mk-s8) var(--mk-s6);
    background: var(--mk-bg-surface);
}

.split__inner[b-kze88uk7xx] {
    width: 100%;
    max-width: var(--mk-form-maxw);
    margin: 0 auto;
}

.split__content[b-kze88uk7xx] {
    margin-top: var(--mk-s5);
}

/* ---------- Carousel dots (§1.1, bottom-left of the promo panel) ---------- */

.dots[b-kze88uk7xx] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s6);
}

.dots__dot[b-kze88uk7xx] {
    width: 8px;
    height: 8px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-border-strong);
    transition: width var(--mk-t-fast), background var(--mk-t-fast);
}

.dots__dot.is-active[b-kze88uk7xx] {
    width: 20px;
    background: var(--mk-red);
}

/* ---------- Default brand mark ---------- */

.brand[b-kze88uk7xx] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
    color: var(--mk-text);
    text-decoration: none;
}

.brand__mark[b-kze88uk7xx] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-red);
    color: var(--mk-text-oncolor);
    font-weight: var(--mk-fw-bold);
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18);
}

.brand__360[b-kze88uk7xx] {
    color:var(--mk-primary-ink);
}

/* ==========================================================================
   Medium (600–1024px): promo becomes a short strip above the form (§1.1).
   ========================================================================== */
@media (max-width: 1024.98px) {

    .split[b-kze88uk7xx] {
        grid-template-columns: 1fr;
    }

    .split__promo[b-kze88uk7xx] {
        padding: var(--mk-s6) var(--mk-s5);
    }

    .split__form[b-kze88uk7xx] {
        padding: var(--mk-s6) var(--mk-s5);
    }
}

/* ==========================================================================
   Small (below 600px): promo hides entirely, the form owns the viewport.
   ========================================================================== */
@media (max-width: 599.98px) {

    .split__promo[b-kze88uk7xx] {
        display: none;
    }

    .split__form[b-kze88uk7xx] {
        padding: var(--mk-s6) var(--mk-s4);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dots__dot[b-kze88uk7xx] {
        transition: none;
    }
}
/* /Components/Layout/PeriodPicker.razor.rz.scp.css */
.pp[b-bxym8uwcvl] { position: relative; display: flex; align-items: center; gap: 2px; }

[b-bxym8uwcvl] .pp-step,
[b-bxym8uwcvl] .pp-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mk-btn-h);
    border: 1px solid transparent;
    border-radius: var(--mk-r-md);
    background: none;
    color: var(--mk-text-2);
    font: inherit;
    cursor: pointer;
}

[b-bxym8uwcvl] .pp-step { width: 32px; }
[b-bxym8uwcvl] .pp-step:hover { background: var(--mk-bg-subtle); color: var(--mk-text-strong); }

[b-bxym8uwcvl] .pp-trigger {
    gap: var(--mk-s2);
    padding: 0 var(--mk-s3);
    border-color: var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    white-space: nowrap;
}

[b-bxym8uwcvl] .pp-trigger:hover { border-color: var(--mk-border-strong); }
[b-bxym8uwcvl] .pp-trigger:focus-visible,
[b-bxym8uwcvl] .pp-step:focus-visible { outline: none; box-shadow: var(--mk-focus-ring); }

[b-bxym8uwcvl] .pp-cal { color: var(--mk-text-muted); }
[b-bxym8uwcvl] .pp-caret { color: var(--mk-text-muted); }

.pp-backdrop[b-bxym8uwcvl] { position: fixed; inset: 0; z-index: var(--mk-z-dropdown, 1000); }

.pp-pop[b-bxym8uwcvl] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    right: 0;
    width: 300px;
    padding: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-md);
    z-index: calc(var(--mk-z-dropdown, 1000) + 1);
}

.pp-presets[b-bxym8uwcvl] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-s2); }

[b-bxym8uwcvl] .pp-preset {
    min-height: 36px;
    padding: 0 var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    text-align: left;
    cursor: pointer;
}

[b-bxym8uwcvl] .pp-preset:hover { background: var(--mk-bg-subtle); }
[b-bxym8uwcvl] .pp-preset.is-on {
    border-color: var(--mk-primary);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pp-section[b-bxym8uwcvl] { margin-top: var(--mk-s4); padding-top: var(--mk-s3); border-top: 1px solid var(--mk-border); }

.pp-caption[b-bxym8uwcvl] {
    margin-bottom: var(--mk-s2);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.pp-range[b-bxym8uwcvl] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mk-s2); }
.pp-range label[b-bxym8uwcvl] { display: flex; flex-direction: column; gap: var(--mk-s1); font-size: var(--mk-t-micro); color: var(--mk-text-2); }
.pp-range[b-bxym8uwcvl]  input {
    height: var(--mk-btn-h);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
}

.pp-error[b-bxym8uwcvl] { margin-top: var(--mk-s2); color: var(--mk-danger); font-size: var(--mk-t-micro); }

[b-bxym8uwcvl] .pp-apply {
    width: 100%;
    height: var(--mk-btn-h);
    margin-top: var(--mk-s3);
    border: none;
    border-radius: var(--mk-r-md);
    background: var(--mk-primary);
    color: var(--mk-text-onprimary);
    font: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

[b-bxym8uwcvl] .pp-apply:hover { background: var(--mk-primary-hover); }

@media (max-width: 1024.98px) {
    [b-bxym8uwcvl] .pp-step { display: none; }
    .pp-label[b-bxym8uwcvl] { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ca8jkfnan2],
.components-reconnect-repeated-attempt-visible[b-ca8jkfnan2],
[b-ca8jkfnan2] .components-reconnect-failed-visible,
[b-ca8jkfnan2] .components-pause-visible,
[b-ca8jkfnan2] .components-resume-failed-visible,
.components-rejoining-animation[b-ca8jkfnan2] {
    display: none;
}

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


#components-reconnect-modal[b-ca8jkfnan2] {
    background-color: var(--mk-bg-surface);
    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-ca8jkfnan2 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal[b-ca8jkfnan2]  button {
    border: 0;
    background-color: var(--mk-primary);
    color: var(--mk-text-oncolor);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal[b-ca8jkfnan2]  button:hover {
        background-color: var(--mk-primary);
    }

    #components-reconnect-modal[b-ca8jkfnan2]  button:active {
        background-color: var(--mk-primary);
    }

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

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

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

@keyframes components-rejoining-animation-b-ca8jkfnan2 {
    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/Layout/TopbarSearch.razor.rz.scp.css */
.tbs[b-jayxzii0j7] {
    position: relative;
    width: clamp(220px, 24vw, 340px);
}

.tbs-icon[b-jayxzii0j7] {
    display: flex;
    position: absolute;
    left: var(--mk-s3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
    pointer-events: none;
}

[b-jayxzii0j7] .tbs-input {
    width: 100%;
    height: var(--mk-btn-h);
    padding: 0 64px 0 36px !important;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

[b-jayxzii0j7] .tbs-input:focus-within {
    background: var(--mk-bg-surface);
    border-color: var(--mk-primary);
    box-shadow: var(--mk-focus-ring);
}

[b-jayxzii0j7] .tbs-input input::-webkit-search-cancel-button { display: none; }

.tbs-kbd[b-jayxzii0j7] {
    position: absolute;
    right: var(--mk-s2);
    top: 50%;
    transform: translateY(-50%);
    padding: 1px var(--mk-s1);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-surface);
    color: var(--mk-text-muted);
    font: inherit;
    font-size: var(--mk-t-micro);
    pointer-events: none;
}

.tbs-input:focus-within + .tbs-kbd[b-jayxzii0j7] { display: none; }

.tbs-pop[b-jayxzii0j7] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    left: 0;
    right: 0;
    min-width: 320px;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: var(--mk-s1);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-md);
    z-index: var(--mk-z-dropdown, 1000);
}

.tbs-group[b-jayxzii0j7] {
    padding: var(--mk-s2) var(--mk-s3) var(--mk-s1);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

[b-jayxzii0j7] .tbs-row,
[b-jayxzii0j7] .tbs-all {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    min-height: 40px;
    padding: var(--mk-s2) var(--mk-s3);
    border: none;
    border-radius: var(--mk-r-md);
    background: none;
    color: var(--mk-text);
    font: inherit;
    font-size: var(--mk-t-secondary);
    text-align: left;
    cursor: pointer;
}

[b-jayxzii0j7] .tbs-row.is-active,
[b-jayxzii0j7] .tbs-row:hover,
[b-jayxzii0j7] .tbs-all:hover { background: var(--mk-primary-soft); }

[b-jayxzii0j7] .tbs-row-icon { color: var(--mk-text-2); flex-shrink: 0; }

.tbs-row-text[b-jayxzii0j7] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tbs-row-title[b-jayxzii0j7] { color: var(--mk-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbs-row-sub[b-jayxzii0j7] { color: var(--mk-text-muted); font-size: var(--mk-t-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbs-row-amt[b-jayxzii0j7] { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: var(--mk-fw-semibold); }

[b-jayxzii0j7] .tbs-all {
    margin-top: var(--mk-s1);
    border-top: 1px solid var(--mk-border);
    border-radius: 0 0 var(--mk-r-md) var(--mk-r-md);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.tbs-empty[b-jayxzii0j7] { padding: var(--mk-s3); color: var(--mk-text-muted); font-size: var(--mk-t-secondary); }

@media (max-width: 1024.98px) {
    .tbs[b-jayxzii0j7] { width: 220px; }
    .tbs-kbd[b-jayxzii0j7] { display: none; }
}

@media (max-width: 599.98px) {
    .tbs[b-jayxzii0j7] { display: none; }
}
/* /Components/Pages/Admin/SpecialPermissions.razor.rz.scp.css */
.sp-head[b-f7gtoyi3wl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.sp-title[b-f7gtoyi3wl] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.sp-sub[b-f7gtoyi3wl] {
    margin: var(--mk-s1) 0 0;
    max-width: 64ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sp-link[b-f7gtoyi3wl] {
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
}

.sp-scroll[b-f7gtoyi3wl] {
    overflow-x: auto;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.sp-table[b-f7gtoyi3wl] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-fs-sm);
}

.sp-table th[b-f7gtoyi3wl] {
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-weight: var(--mk-fw-semibold);
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    white-space: nowrap;
}

.sp-table td[b-f7gtoyi3wl] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    vertical-align: middle;
}

.sp-table tr:last-child td[b-f7gtoyi3wl] {
    border-bottom: 0;
}

.sp-action-col[b-f7gtoyi3wl] {
    text-align: left;
    min-width: 220px;
    position: sticky;
    left: 0;
    background: var(--mk-bg-surface);
    z-index: 1;
}

th.sp-action-col[b-f7gtoyi3wl] {
    background: var(--mk-bg-subtle);
}

.sp-name[b-f7gtoyi3wl] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.sp-desc[b-f7gtoyi3wl] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-xs);
}

.sp-role[b-f7gtoyi3wl],
.sp-cell[b-f7gtoyi3wl] {
    text-align: center;
}

.sp-cell-inner[b-f7gtoyi3wl] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
}

.sp-changed[b-f7gtoyi3wl] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .sp-action-col[b-f7gtoyi3wl] {
        min-width: 160px;
    }
}

[b-f7gtoyi3wl] .sp-limit {
    width: 72px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    padding: var(--mk-s1) !important;
    font-size: var(--mk-fs-xs);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
}
/* /Components/Pages/Billing.razor.rz.scp.css */
/* POS workspace: browse on the left, build and pay one bill on the right. */
/* Below the shell's own top bar, not over it: at 100dvh the page was one top bar taller than the
   window, so the bill footer — "Continue to payment" — sat half below the fold at 1440x900. */
.pos-root[b-c21u5us20y] { height: calc(100dvh - var(--topbar-h)); min-height: 0; color: var(--mk-text-strong); }
.pos-brand[b-c21u5us20y] { min-width: 160px; font-size: 18px; letter-spacing: -.4px; }
.pos-brand small[b-c21u5us20y] { display: block; margin-top: 2px; color: var(--mk-text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.pos-topbar[b-c21u5us20y] { height: 68px; padding: 10px 24px; gap: 12px; }
.pos-topbar[b-c21u5us20y]  .pos-search-wrap { max-width: 720px; }
.pos-topbar[b-c21u5us20y]  .pos-search-input { height: 46px; font-size: 16px; background: var(--mk-bg-subtle); border-radius: 12px; }
.pos-content[b-c21u5us20y] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 480px); flex: 1; min-height: 0; gap: 0; overflow: hidden; }
.pos-catalog[b-c21u5us20y] { min-width: 0; padding: 16px 24px 24px; overflow-y: auto; }
.pos-workspace-heading[b-c21u5us20y] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pos-workspace-heading h1[b-c21u5us20y], .pos-workspace-heading h2[b-c21u5us20y] { margin: 6px 0 0; font-size: 26px; font-weight: 750; color: var(--mk-text-strong); letter-spacing: -.6px; }
.pos-shortcut[b-c21u5us20y] { flex-shrink: 0; border: 1px solid var(--mk-border); padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--mk-text-muted); white-space: nowrap; }
/* One row that scrolls sideways: wrapped, eight categories took two or three rows above the first tile. */
.pos-catalog[b-c21u5us20y]  .pos-category-sidebar { width: 100%; display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 0 12px; margin-bottom: 4px; border: 0; background: transparent; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.pos-catalog[b-c21u5us20y]  .pos-category-item { flex: none; width: auto; display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--mk-border); border-radius: 24px; background: var(--mk-bg-surface); font-size: 13px; margin: 0; }
.pos-catalog[b-c21u5us20y]  .pos-category-item.active { background: var(--mk-primary-lt); color: var(--mk-primary-ink); border-color: var(--mk-primary); }
.pos-catalog[b-c21u5us20y]  .pos-product-grid-wrap { padding: 0; margin: 0; max-height: none; overflow: visible; border: 0; }
.pos-catalog[b-c21u5us20y]  .pos-product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pos-catalog[b-c21u5us20y]  .pos-product-card { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--mk-border); border-radius: 12px; box-shadow: none; }
.pos-catalog[b-c21u5us20y]  .pos-product-card:hover { border-color: var(--mk-primary); box-shadow: var(--mk-sh-sm); }
.pos-catalog[b-c21u5us20y]  .pos-product-thumb { flex: none; height: 104px; margin-bottom: 10px; border-radius: 8px; background: var(--mk-bg-subtle); }
/* Most shops have no product photos; a 110px grey box per tile was most of the screen. */
.pos-catalog[b-c21u5us20y]  .pos-product-thumb.is-placeholder { height: 52px; color: var(--mk-text-subtle); }
.pos-catalog[b-c21u5us20y]  .pos-product-name { font-size: 14px; line-height: 1.4; font-weight: 600; min-height: 0; }
.pos-catalog[b-c21u5us20y]  .pos-product-foot { margin-top: auto; padding-top: 8px; }
.pos-catalog[b-c21u5us20y]  .pos-product-price { margin: 0; font-size: 16px; color: var(--mk-primary-ink); }
.pos-catalog[b-c21u5us20y]  .pos-product-add { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-size: 18px; font-weight: 600; line-height: 1; }
.pos-catalog[b-c21u5us20y]  .pos-product-stock { align-self: flex-start; margin-top: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--mk-bg-subtle); }
.pos-catalog[b-c21u5us20y]  .pos-product-stock.tone-in  { background: var(--mk-success-lt); }
.pos-catalog[b-c21u5us20y]  .pos-product-stock.tone-low { background: var(--mk-warning-lt); }
.pos-catalog[b-c21u5us20y]  .pos-product-stock.tone-out { background: var(--mk-danger-lt); }
.pos-bill-workspace[b-c21u5us20y] { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--mk-bg-surface); border-left: 1px solid var(--mk-border); }
.pos-bill-heading[b-c21u5us20y] { flex-shrink: 0; padding: 14px 24px; margin: 0; border-bottom: 1px solid var(--mk-border); }
.pos-bill-heading h2[b-c21u5us20y] { margin: 0; font-size: 18px; letter-spacing: -.3px; }
.pos-item-count[b-c21u5us20y] { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-size: 13px; vertical-align: middle; }
.pos-bill-scroll[b-c21u5us20y] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px; }
.pos-bill-scroll .pos-card[b-c21u5us20y] { padding: 0; margin: 0 0 16px; border: 0; box-shadow: none; background: transparent; }
.pos-card-title[b-c21u5us20y] { margin-bottom: 8px; font-size: 12px; color: var(--mk-text-muted); letter-spacing: .6px; }
[b-c21u5us20y] .pos-customer-input { min-height: 44px; font-size: 16px; border-radius: 10px; background: var(--mk-bg-subtle); }
.pos-customer-benefits[b-c21u5us20y] { margin-top: 12px; }
.pos-customer-benefits summary[b-c21u5us20y] { min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--mk-primary-ink); cursor: pointer; }
.pos-cart-header[b-c21u5us20y] { display: none; }
.pos-cart-body[b-c21u5us20y] { flex: none; overflow: visible; }
/* Two rows — what it is, then qty · price · total — so a bill of five or six lines fits without
   scrolling. It was four rows (name, captions, inputs, a bordered "Line total" row) and two lines
   filled the column. The captions are hidden, not removed: both inputs carry their own aria-label. */
.pos-cart-row[b-c21u5us20y], .pos-cart-row.pos-simple[b-c21u5us20y] { position: relative; display: grid; grid-template-columns: auto minmax(84px, 1fr) auto; grid-template-areas: "name name name" "qty rate total"; gap: 8px 12px; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--mk-border); border-radius: 12px; background: var(--mk-bg-surface); align-items: center; }
.pos-cart-row:not(.pos-simple)[b-c21u5us20y] { grid-template-areas: "name name name" "qty rate total" "gst disc disc"; }
.pos-cart-name[b-c21u5us20y] { grid-area: name; min-width: 0; padding-right: 92px; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pos-cart-name .pos-cart-hsn[b-c21u5us20y] { display: block; font-weight: 400; }
.pos-cart-hsn[b-c21u5us20y] { white-space: normal; }
.pos-field-caption[b-c21u5us20y], .pos-cart-line-value > span[b-c21u5us20y] { display: none; }
.pos-cart-qty-wrap[b-c21u5us20y] { grid-area: qty; display: grid; grid-template-columns: 44px 52px 44px; gap: 0; align-items: center; }
[b-c21u5us20y] .pos-qty-btn, [b-c21u5us20y] .pos-qty-input { width: 100%; height: 44px; min-height: 44px; border-radius: 0; }
[b-c21u5us20y] .pos-qty-btn:first-of-type { border-radius: 8px 0 0 8px; }
[b-c21u5us20y] .pos-qty-btn:last-of-type { border-radius: 0 8px 8px 0; }
.pos-cart-rate[b-c21u5us20y] { grid-area: rate; min-width: 0; }
[b-c21u5us20y] .pos-rate-input { width: 100%; height: 44px; font-size: 16px; border-radius: 8px; }
.pos-cart-gst[b-c21u5us20y] { grid-area: gst; text-align: left !important; }
.pos-discount-wrap[b-c21u5us20y] { grid-area: disc; }
.pos-cart-line-value[b-c21u5us20y] { grid-area: total; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.pos-cart-total[b-c21u5us20y] { font-size: 16px; font-weight: 700; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
[b-c21u5us20y] .pos-row-expand, .pos-cart-row[b-c21u5us20y] >  .pos-cart-delete { position: absolute; top: 4px; width: 44px; min-width: 44px; height: 44px; }
[b-c21u5us20y] .pos-row-expand { right: 46px; }
.pos-cart-row[b-c21u5us20y] >  .pos-cart-delete { right: 4px; background: transparent; }
.pos-row-extra[b-c21u5us20y] { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; margin: -4px 0 16px; border-radius: 10px; }
.pos-bill-options[b-c21u5us20y] { border-block: 1px solid var(--mk-border); margin: 16px 0; }
[b-c21u5us20y] .pos-options-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 0; border: 0; background: none; color: var(--mk-text); text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-cart-discount-row[b-c21u5us20y] { flex-wrap: wrap; padding: 12px; margin: 8px 0; border: 1px solid var(--mk-border); background: var(--mk-bg-subtle); border-radius: 10px; }
.pos-bill-breakdown > summary[b-c21u5us20y] { min-height: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.pos-bill-breakdown > summary span[b-c21u5us20y] { font-size: 12px; color: var(--mk-text-muted); font-weight: 400; }
.pos-bill-footer[b-c21u5us20y] { flex-shrink: 0; padding: 16px 24px 20px; border-top: 1px solid var(--mk-border); background: var(--mk-bg-surface); }
.pos-bill-total[b-c21u5us20y] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pos-bill-total span[b-c21u5us20y] { display: block; font-size: 14px; font-weight: 600; }
.pos-bill-total small[b-c21u5us20y] { display: block; margin-top: 4px; font-size: 12px; color: var(--mk-text-muted); overflow-wrap: anywhere; }
.pos-bill-total strong[b-c21u5us20y] { font-size: 28px; letter-spacing: -.8px; white-space: nowrap; }
[b-c21u5us20y] .pos-checkout-btn { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 14px 18px; border-radius: 12px; font-size: 16px; box-shadow: none; }
.pos-cart-empty[b-c21u5us20y] { min-height: 220px; padding: 32px 16px; }
.pos-footer-bar[b-c21u5us20y] { height: 28px; padding-inline: 24px; }
.web-pos-steps[b-c21u5us20y], [b-c21u5us20y] .pos-mobile-cart, [b-c21u5us20y] .pos-add-more { display: none; }
.pos-modal[b-c21u5us20y] { max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 20px; }
.web-checkout-fields[b-c21u5us20y] { min-width: 0; border: 0; padding: 0; margin: 0; }
.web-checkout-help[b-c21u5us20y], .web-credit-note[b-c21u5us20y] { color: var(--mk-text-muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
[b-c21u5us20y] .web-split-toggle { margin-bottom: 16px; }
.web-view-invoice[b-c21u5us20y] { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 12px; border: 1px solid var(--mk-border); border-radius: 10px; color: var(--mk-primary-ink); text-decoration: none; font-weight: 600; }
[b-c21u5us20y] .pos-mode-tab, .pos-pay-btn[b-c21u5us20y], [b-c21u5us20y] .pos-modal-close, [b-c21u5us20y] .pos-topbar-btn, [b-c21u5us20y] .pos-split-remove { min-height: 44px; }
[b-c21u5us20y] .pos-modal-close, [b-c21u5us20y] .pos-split-remove { min-width: 44px; }
[b-c21u5us20y] .pos-split-input, [b-c21u5us20y] .pos-split-ref { min-height: 48px; font-size: 16px; }
.pos-split-row[b-c21u5us20y] { align-items: center; }
.pos-root[b-c21u5us20y]  input:not([type=checkbox]), .pos-root[b-c21u5us20y]  select { min-width: 0; max-width: 100%; font-size: 16px !important; min-height: 44px; }
.pos-root[b-c21u5us20y]  button { min-height: 44px; min-width: 44px; }
.pos-root :is(button,a,input,select):focus-visible[b-c21u5us20y], .pos-modal :is(button,a,input,select):focus-visible[b-c21u5us20y] { outline: 2px solid var(--mk-primary); outline-offset: 2px; }
@media (min-width: 1600px) { .pos-content[b-c21u5us20y] { grid-template-columns: minmax(0, 1fr) 540px; } }
@media (max-width: 1000px) {
    .pos-root[b-c21u5us20y] { height: auto; min-height: 100%; overflow: visible; }
    .pos-topbar[b-c21u5us20y] { height: auto; flex-wrap: wrap; padding: 16px; }
    .pos-brand[b-c21u5us20y] { flex: 1; min-width: 0; }
    .pos-topbar[b-c21u5us20y]  .pos-search-wrap { flex: 1 1 100%; order: 10; min-width: 0; max-width: none; }
    .is-bill .pos-topbar[b-c21u5us20y]  .pos-search-wrap { display: none; }
    .web-pos-steps[b-c21u5us20y] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; background: var(--mk-bg-surface); border-bottom: 1px solid var(--mk-border); }
    .web-pos-steps[b-c21u5us20y]  button { min-height: 48px; border: 1px solid var(--mk-border); border-radius: 10px; background: var(--mk-bg-surface); color: var(--mk-text-muted); font: inherit; font-size: 14px; }
    .web-pos-steps[b-c21u5us20y]  .is-active { border-color: var(--mk-primary); background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-weight: 700; }
    .web-pos-steps span[b-c21u5us20y] { margin-left: 6px; }
    .pos-content[b-c21u5us20y] { display: block; overflow: visible; flex: 1; }
    .pos-catalog[b-c21u5us20y] { padding: 20px 16px 100px; overflow: visible; }
    .pos-workspace-heading[b-c21u5us20y] { margin-bottom: 20px; }
    .pos-workspace-heading h1[b-c21u5us20y] { font-size: 24px; }
    .pos-shortcut[b-c21u5us20y], .pos-footer-bar[b-c21u5us20y] { display: none; }
    .is-bill .pos-catalog[b-c21u5us20y], .is-products .pos-bill-workspace[b-c21u5us20y] { display: none; }
    .pos-bill-workspace[b-c21u5us20y] { border: 0; min-height: calc(100dvh - 160px); }
    .pos-bill-heading[b-c21u5us20y] { padding: 20px 16px; margin: 0; }
    [b-c21u5us20y] .pos-add-more { display: block; }
    .pos-bill-scroll[b-c21u5us20y] { padding: 16px; overflow: visible; }
    .pos-bill-footer[b-c21u5us20y] { position: sticky; bottom: 0; z-index: 15; padding: 16px; box-shadow: 0 -4px 20px #00000008; }
    .pos-bill-total strong[b-c21u5us20y] { font-size: 26px; }
    [b-c21u5us20y] .pos-mobile-cart { position: sticky; bottom: 12px; z-index: 15; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; width: calc(100% - 32px); margin: 0 16px 16px; padding: 16px; min-height: 56px; border: 0; border-radius: 12px; background: var(--mk-primary); color: var(--mk-text-onprimary); box-shadow: var(--mk-sh-lg); font-size: 14px; }
    .pos-more-menu[b-c21u5us20y] { max-width: calc(100vw - 32px); }
}
@media (max-width: 600px) {
    .pos-modal-header[b-c21u5us20y], .pos-modal-body[b-c21u5us20y] { padding: 16px; }
    .pos-overlay[b-c21u5us20y] { padding: 8px; }
    .pos-mode-tabs[b-c21u5us20y] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    [b-c21u5us20y] .pos-mode-tab { white-space: normal; }
    .pos-split-row[b-c21u5us20y] { display: flex; flex-wrap: wrap; gap: 8px; }
    .pos-split-mode[b-c21u5us20y] { flex: 1 1 100%; }
    [b-c21u5us20y] .pos-split-input { width: 100%; flex: 1 1 100px; }
    [b-c21u5us20y] .pos-split-ref { width: 100%; flex: 1 1 100%; }
    .pos-catalog[b-c21u5us20y]  .pos-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .pos-cart-row[b-c21u5us20y], .pos-cart-row.pos-simple[b-c21u5us20y] { padding: 12px; gap: 12px 8px; }
}

/* ── Tender buttons (spec §4): one tap to the way the customer is paying ───────────────── */
.pos-tenders[b-c21u5us20y] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[b-c21u5us20y] .pos-tender { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 4px;
              border: 1px solid var(--mk-border-strong); border-radius: 12px; background: var(--mk-bg-surface); color: var(--mk-text-strong);
              font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
[b-c21u5us20y] .pos-tender:hover:not(:disabled) { border-color: var(--mk-primary); color: var(--mk-primary-ink); }
[b-c21u5us20y] .pos-tender.is-primary { border-color: var(--mk-primary); background: var(--mk-primary); color: var(--mk-text-onprimary); }
[b-c21u5us20y] .pos-tender.is-primary:hover:not(:disabled) { background: var(--mk-primary-hover); color: var(--mk-text-onprimary); }
[b-c21u5us20y] .pos-tender:disabled { opacity: .45; cursor: not-allowed; }

/* ── Payment and the saved bill, in the bill column instead of a popup ─────────────────── */
.pos-pay-panel[b-c21u5us20y] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.pos-pay-head[b-c21u5us20y] { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--mk-border); }
.pos-pay-title[b-c21u5us20y] { margin: 0; font-size: 18px; font-weight: 700; color: var(--mk-text-strong); }
[b-c21u5us20y] .pos-pay-back { width: 40px; height: 40px; border: 1px solid var(--mk-border); border-radius: 10px; background: var(--mk-bg-surface); color: var(--mk-text-strong); font-size: 18px; cursor: pointer; }
.pos-pay-body[b-c21u5us20y] { padding: 16px 24px 24px; }
/* The column is ~480px: the QR goes under the payment rows, not beside them. */
.pos-pay-panel .pos-checkout-grid[b-c21u5us20y] { grid-template-columns: minmax(0, 1fr); }

.pos-tendered[b-c21u5us20y] { order: 10; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
[b-c21u5us20y] .pos-tendered-chip { min-height: 44px; padding: 0 12px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); background: var(--mk-bg-surface);
                     color: var(--mk-text); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
[b-c21u5us20y] .pos-tendered-chip.is-active { border-color: var(--mk-primary); background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.pos-root[b-c21u5us20y]  .pos-tendered-chip { min-height: 44px; min-width: 0; }

@media (max-width: 1000px) {
    .pos-pay-panel[b-c21u5us20y] { overflow: visible; }
    .pos-pay-head[b-c21u5us20y], .pos-pay-body[b-c21u5us20y] { padding-inline: 16px; }
}
@media (max-width: 599.98px) {
    .pos-tenders[b-c21u5us20y] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pos-split-row[b-c21u5us20y] { flex-wrap: wrap; }

/* Keep quantity controls and money inside narrow bill columns. */
@media (max-width: 480px) {
    .pos-cart-row[b-c21u5us20y], .pos-cart-row.pos-simple[b-c21u5us20y] {
        grid-template-columns: minmax(140px, 1fr) minmax(0, 1fr);
        grid-template-areas: "name name" "qty total" "rate rate";
    }
    .pos-cart-row:not(.pos-simple)[b-c21u5us20y] { grid-template-areas: "name name" "qty total" "rate rate" "gst disc"; }
    .pos-cart-line-value[b-c21u5us20y] { min-width: 0; }
    .pos-cart-total[b-c21u5us20y] { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .pos-cart-rate .pos-field-caption[b-c21u5us20y] { display: block; margin-bottom: 4px; }
}
/* /Components/Pages/CashBank/CashBankAccountForm.razor.rz.scp.css */
/* Bank account form — a two-column field grid that collapses to one on a phone. */

.cbf-grid[b-c7fo3eo5xa] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.cbf-field[b-c7fo3eo5xa] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.cbf-label[b-c7fo3eo5xa] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbf-req[b-c7fo3eo5xa] {
    color: var(--mk-fin-negative-fg);
}

.cbf-hint[b-c7fo3eo5xa] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.cbf-readonly[b-c7fo3eo5xa] {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-app);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary-sm);
    font-variant-numeric: tabular-nums;
}

.cbf-checks[b-c7fo3eo5xa] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3);
}

@media (max-width: 599.98px) {
    .cbf-grid[b-c7fo3eo5xa] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/CashBankAccounts.razor.rz.scp.css */
/* Accounts list — the running total strip above the grid, and the toolbar toggle inside it. */

.cba-total[b-amcwsunk9z] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mk-space-4);
    padding: var(--mk-space-3) var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-subtle);
}

.cba-total-label[b-amcwsunk9z] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cba-total-value[b-amcwsunk9z] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

/* ::deep because the toggle arrives through ToolbarContent, which belongs to this page's scope
   but is rendered inside MkDataGrid's. */
[b-amcwsunk9z] .cba-inactive {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    white-space: nowrap;
    cursor: pointer;
}
/* /Components/Pages/CashBank/CashBankHub.razor.rz.scp.css */
/* Cash & Bank hub — the summary tiles and the section links beneath them. */

.cb-tiles[b-7c7cv9ppaz] {
    display: grid;
    /* auto-fit rather than a fixed column count: a tenant with only the cash drawer switched on
       gets one full-width tile, not one tile and three gaps. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-6);
}

[b-7c7cv9ppaz] .cb-tile {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}

[b-7c7cv9ppaz] .cb-tile:hover {
    border-color: var(--mk-primary);
    box-shadow: var(--mk-shadow-sm);
}

[b-7c7cv9ppaz] .cb-tile:focus-visible {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

.cb-tile-label[b-7c7cv9ppaz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cb-tile-value[b-7c7cv9ppaz] {
    margin-top: var(--mk-space-2);
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cb-tile-note[b-7c7cv9ppaz] {
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Section links ───────────────────────────────────────────────────────── */

.cb-links[b-7c7cv9ppaz] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3);
}

.cb-link[b-7c7cv9ppaz] {
    display: block;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    text-decoration: none;
    transition: border-color .14s ease;
}

.cb-link:hover[b-7c7cv9ppaz] {
    border-color: var(--mk-primary);
}

.cb-link-title[b-7c7cv9ppaz] {
    display: block;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    /* --mk-primary-ink, not --mk-primary: the brand orange is ~2.9:1 on white and fails AA at
       body size. */
    color: var(--mk-primary-ink);
}

.cb-link-sub[b-7c7cv9ppaz] {
    display: block;
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .cb-tiles[b-7c7cv9ppaz] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/CashBank/CashBankStatement.razor.rz.scp.css */
/* Account statement — the balance header, the inline entry pane, and the register grid. */

.cbs-head[b-ugb472k124] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-space-4);
    padding: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.cbs-balance[b-ugb472k124] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cbs-balance-label[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbs-balance-value[b-ugb472k124] {
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cbs-balance-value.is-negative[b-ugb472k124] {
    color: var(--mk-fin-negative-fg);
}

.cbs-balance-note[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

.cbs-actions[b-ugb472k124] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-2);
}

/* ── Inline entry pane ───────────────────────────────────────────────────── */

.cbs-pane-title[b-ugb472k124] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.cbs-form[b-ugb472k124] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

.cbs-field[b-ugb472k124] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.cbs-field-wide[b-ugb472k124] {
    grid-column: 1 / -1;
}

.cbs-label[b-ugb472k124] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.cbs-req[b-ugb472k124] {
    color: var(--mk-fin-negative-fg);
}

.cbs-hint[b-ugb472k124] {
    font-size: var(--mk-t-secondary-sm);
    line-height: 1.5;
    color: var(--mk-text-2);
}

.cbs-select[b-ugb472k124] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.cbs-select:focus[b-ugb472k124] {
    border-color: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .cbs-actions[b-ugb472k124] {
        width: 100%;
    }

    .cbs-form[b-ugb472k124] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/ChequeForm.razor.rz.scp.css */
/* Cheque form — a two-column field grid that collapses to one on a phone. */

.chf-grid[b-vfmf8867fp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.chf-field[b-vfmf8867fp] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.chf-field-wide[b-vfmf8867fp] {
    grid-column: 1 / -1;
}

.chf-label[b-vfmf8867fp] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chf-req[b-vfmf8867fp] {
    color: var(--mk-fin-negative-fg);
}

.chf-hint[b-vfmf8867fp] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.chf-select[b-vfmf8867fp] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.chf-select:focus[b-vfmf8867fp] {
    border-color: var(--mk-primary);
}

@media (max-width: 599.98px) {
    .chf-grid[b-vfmf8867fp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/Cheques.razor.rz.scp.css */
/* Cheque register — the "what is still out there" tiles, the toolbar filters and the
   clear/bounce pane. */

.chq-tiles[b-gv6mondw3c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.chq-tile[b-gv6mondw3c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

/* Cheques dated today or earlier and still unbanked are the one thing on this screen that needs
   acting on, so the tile carries the warning colour rather than a bare count. */
.chq-tile.is-due[b-gv6mondw3c] {
    border-color: var(--mk-fin-pending-br);
    background: var(--mk-fin-pending-lt);
}

.chq-tile-label[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chq-tile-value[b-gv6mondw3c] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.chq-tile.is-due .chq-tile-value[b-gv6mondw3c] {
    color: var(--mk-fin-pending-fg);
}

.chq-tile-note[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Pane ────────────────────────────────────────────────────────────────── */

.chq-pane[b-gv6mondw3c] {
    margin: 0 var(--mk-space-4) var(--mk-space-4);
}

.chq-pane-title[b-gv6mondw3c] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.chq-field[b-gv6mondw3c] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    margin-bottom: var(--mk-space-3);
    max-width: 420px;
}

.chq-label[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.chq-req[b-gv6mondw3c] {
    color: var(--mk-fin-negative-fg);
}

.chq-hint[b-gv6mondw3c] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.chq-select[b-gv6mondw3c] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.chq-select:focus[b-gv6mondw3c] {
    border-color: var(--mk-primary);
}

/* ::deep — these arrive through ToolbarContent, so they carry this page's scope attribute but
   render inside MkDataGrid's. An unwrapped select claims the whole toolbar row, which is why
   each one sits in a .mk-grid-filter div. */
[b-gv6mondw3c] .chq-toolbar-select {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

@media (max-width: 599.98px) {
    .chq-tiles[b-gv6mondw3c] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/CashBank/LoanDetail.razor.rz.scp.css */
/* Loan detail — the four summary tiles, the payment/close panes, and the payments vs schedule
   tab strip. */

.lnd-tiles[b-6i2t92bmei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.lnd-tile[b-6i2t92bmei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.lnd-tile-label[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnd-tile-value[b-6i2t92bmei] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.lnd-tile-note[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ── Panes ───────────────────────────────────────────────────────────────── */

.lnd-pane-title[b-6i2t92bmei] {
    margin-bottom: var(--mk-space-4);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.lnd-form[b-6i2t92bmei] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
}

.lnd-field[b-6i2t92bmei] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.lnd-label[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnd-req[b-6i2t92bmei] {
    color: var(--mk-fin-negative-fg);
}

.lnd-hint[b-6i2t92bmei] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.lnd-select[b-6i2t92bmei] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.lnd-select:focus[b-6i2t92bmei] {
    border-color: var(--mk-primary);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.lnd-tabs[b-6i2t92bmei] {
    display: flex;
    gap: var(--mk-space-1);
    margin-bottom: var(--mk-space-3);
    border-bottom: 1px solid var(--mk-border);
}

[b-6i2t92bmei] .lnd-tab {
    padding: var(--mk-space-2) var(--mk-space-4);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mk-text-2);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-medium);
    cursor: pointer;
}

[b-6i2t92bmei] .lnd-tab:hover {
    color: var(--mk-text-strong);
}

[b-6i2t92bmei] .lnd-tab.is-active {
    /* --mk-primary-ink rather than --mk-primary: this is body-size text on a light surface. */
    color: var(--mk-primary-ink);
    border-bottom-color: var(--mk-primary);
    font-weight: var(--mk-fw-bold);
}

@media (max-width: 599.98px) {
    .lnd-tiles[b-6i2t92bmei] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }

    .lnd-form[b-6i2t92bmei] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/LoanForm.razor.rz.scp.css */
/* Loan form — a two-column field grid that collapses to one on a phone. */

.lnf-grid[b-4goxr4g6bn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-space-4);
}

.lnf-field[b-4goxr4g6bn] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
    min-width: 0;
}

.lnf-field-wide[b-4goxr4g6bn] {
    grid-column: 1 / -1;
}

.lnf-label[b-4goxr4g6bn] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lnf-req[b-4goxr4g6bn] {
    color: var(--mk-fin-negative-fg);
}

.lnf-hint[b-4goxr4g6bn] {
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-muted);
}

.lnf-select[b-4goxr4g6bn] {
    width: 100%;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.lnf-select:focus[b-4goxr4g6bn] {
    border-color: var(--mk-primary);
}

/* A value the form shows but will not let you edit — the principal, once payments exist. */
.lnf-readonly[b-4goxr4g6bn] {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-app);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary-sm);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .lnf-grid[b-4goxr4g6bn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/CashBank/Loans.razor.rz.scp.css */
/* Loan list — the outstanding tiles and the status filter in the grid toolbar. */

.lns-tiles[b-gmojyrsyo9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mk-space-4);
    margin-bottom: var(--mk-space-4);
}

.lns-tile[b-gmojyrsyo9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
}

.lns-tile-label[b-gmojyrsyo9] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.lns-tile-value[b-gmojyrsyo9] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.lns-tile-note[b-gmojyrsyo9] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

/* ::deep — the filter arrives through ToolbarContent and renders inside MkDataGrid's scope. */
[b-gmojyrsyo9] .lns-toolbar-select {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

@media (max-width: 599.98px) {
    .lns-tiles[b-gmojyrsyo9] {
        grid-template-columns: 1fr;
        gap: var(--mk-space-3);
    }
}
/* /Components/Pages/Customers/CustomerWallet.razor.rz.scp.css */
.cw-page[b-8xiuuje4lz] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.cw-head[b-8xiuuje4lz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.cw-title[b-8xiuuje4lz] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.cw-grid[b-8xiuuje4lz] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s4);
}

.cw-label[b-8xiuuje4lz] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.cw-balance[b-8xiuuje4lz] {
    font-size: var(--mk-fs-2xl);
    font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}

.cw-muted[b-8xiuuje4lz] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
    margin: var(--mk-s2) 0 0;
}

.cw-form[b-8xiuuje4lz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.cw-actions[b-8xiuuje4lz] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
}

@media (max-width: 1024.98px) {
    .cw-grid[b-8xiuuje4lz],
    .cw-form[b-8xiuuje4lz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Distribution/RoutesPage.razor.rz.scp.css */
.rt-head[b-mnarcoe2vi] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.rt-title[b-mnarcoe2vi] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.rt-sub[b-mnarcoe2vi],
.rt-empty[b-mnarcoe2vi] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.rt-tabs[b-mnarcoe2vi] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

[b-mnarcoe2vi] .rt-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-mnarcoe2vi] .rt-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.rt-route[b-mnarcoe2vi] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    margin-bottom: var(--mk-s3);
}

.rt-route-head[b-mnarcoe2vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}

.rt-route-name[b-mnarcoe2vi] {
    font-weight: var(--mk-fw-semibold);
}

.rt-progress[b-mnarcoe2vi] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    font-variant-numeric: tabular-nums;
}

.rt-muted[b-mnarcoe2vi] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.rt-stop[b-mnarcoe2vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
    flex-wrap: wrap;
}

.rt-stop:last-child[b-mnarcoe2vi] {
    border-bottom: 0;
}

.rt-stop.is-done[b-mnarcoe2vi] {
    background: var(--mk-bg-subtle);
}

.rt-stop-name[b-mnarcoe2vi] {
    font-weight: var(--mk-fw-medium);
}

.rt-due[b-mnarcoe2vi] {
    color: var(--mk-warning-fg);
    font-weight: var(--mk-fw-medium);
    margin-right: var(--mk-s2);
}

.rt-done[b-mnarcoe2vi] {
    color: var(--mk-text-2);
    font-weight: var(--mk-fw-medium);
}

.rt-outcomes[b-mnarcoe2vi],
.rt-visit[b-mnarcoe2vi] {
    display: flex;
    gap: var(--mk-s1);
    align-items: center;
    flex-wrap: wrap;
}

.rt-visit .form-control[b-mnarcoe2vi] {
    width: 140px;
}

.rt-grid[b-mnarcoe2vi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.rt-label[b-mnarcoe2vi] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.rt-days[b-mnarcoe2vi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.rt-days .rt-label[b-mnarcoe2vi] {
    margin: 0;
}

.rt-day[b-mnarcoe2vi] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.rt-matches[b-mnarcoe2vi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s1);
    margin-top: var(--mk-s2);
}

[b-mnarcoe2vi] .rt-match {
    border: 1px dashed var(--mk-border);
    background: transparent;
    border-radius: var(--mk-r-sm);
    padding: var(--mk-s1) var(--mk-s2);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
    color: var(--mk-text);
}

.rt-stops[b-mnarcoe2vi] {
    margin: var(--mk-s3) 0 0;
    padding-left: var(--mk-s5);
}

.rt-stops li[b-mnarcoe2vi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-fs-sm);
}

.rt-stop-actions[b-mnarcoe2vi] {
    display: inline-flex;
    gap: var(--mk-s1);
}

[b-mnarcoe2vi] .rt-icon {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-sm);
    width: 28px;
    height: 28px;
    cursor: pointer;
}

[b-mnarcoe2vi] .rt-icon:disabled {
    opacity: 0.4;
    cursor: default;
}

.rt-actions[b-mnarcoe2vi],
.rt-toolbar[b-mnarcoe2vi] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin: var(--mk-s3) 0;
}
/* /Components/Pages/Hajari/HajariBook.razor.rz.scp.css */
.hj-datebar[b-qbh7p3dxeg] {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2);
    flex-wrap: wrap;
}

[b-qbh7p3dxeg] .hj-date {
    width: auto;
    min-width: 150px;
}

.hj-dayname[b-qbh7p3dxeg] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-sm);
}

/* ── KPI strip ───────────────────────────────────────────────────────── */
.hj-kpis[b-qbh7p3dxeg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--mk-space-2);
}

.hj-kpi[b-qbh7p3dxeg] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-1);
    padding: var(--mk-space-3);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
}

.hj-kpi span[b-qbh7p3dxeg] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-xs);
}

.hj-kpi strong[b-qbh7p3dxeg] {
    color: var(--mk-text-strong);
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}

.hj-kpi-due strong[b-qbh7p3dxeg] { color: var(--mk-financial-fg); }
.hj-kpi-warn strong[b-qbh7p3dxeg] { color: var(--mk-warning-fg); }

/* ── Muster ──────────────────────────────────────────────────────────── */
.hj-toolbar[b-qbh7p3dxeg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mk-space-3);
    flex-wrap: wrap;
}

.hj-toolbar > :first-child[b-qbh7p3dxeg] { margin-right: auto; }
.hj-toolbar-bottom > :first-child[b-qbh7p3dxeg] { margin-right: 0; }

.hj-unsaved[b-qbh7p3dxeg] {
    color: var(--mk-warning-fg);
    font-size: var(--mk-fs-sm);
}

.hj-list[b-qbh7p3dxeg] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
    background: var(--mk-bg-surface);
    overflow: hidden;
}

.hj-row[b-qbh7p3dxeg] {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) auto 90px 90px minmax(140px, 1fr);
    align-items: center;
    gap: var(--mk-space-3);
    padding: var(--mk-space-3) var(--mk-space-4);
    border-bottom: 1px solid var(--mk-border);
}

.hj-row:last-child[b-qbh7p3dxeg] { border-bottom: 0; }

/* An unmarked worker is the thing to act on, so it carries the accent edge. */
.hj-row-unmarked[b-qbh7p3dxeg] { box-shadow: inset 3px 0 0 var(--mk-warning); }

.hj-who[b-qbh7p3dxeg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hj-name[b-qbh7p3dxeg] {
    color: var(--mk-text-strong);
    font-weight: var(--mk-fw-semibold);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hj-name:hover[b-qbh7p3dxeg] { color: var(--mk-primary-ink); text-decoration: underline; }

.hj-meta[b-qbh7p3dxeg] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-xs);
}

.hj-marks[b-qbh7p3dxeg] {
    display: flex;
    gap: var(--mk-space-1);
}

[b-qbh7p3dxeg] .hj-mark {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--mk-space-2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

[b-qbh7p3dxeg] .hj-mark:hover { background: var(--mk-bg-hover); }

[b-qbh7p3dxeg] .hj-mark:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

[b-qbh7p3dxeg] .hj-mark-on {
    background: var(--mk-success);
    border-color: var(--mk-success);
    color: var(--mk-text-oncolor);
}

[b-qbh7p3dxeg] .hj-mark-on:hover { background: var(--mk-success); }

[b-qbh7p3dxeg] .hj-mark-absent.hj-mark-on {
    background: var(--mk-danger-solid);
    border-color: var(--mk-danger);
}

[b-qbh7p3dxeg] .hj-mark-clear {
    min-width: 32px;
    color: var(--mk-text-secondary);
    border-style: dashed;
}

.hj-num[b-qbh7p3dxeg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.hj-num span[b-qbh7p3dxeg] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-2xs);
}

.hj-amounts[b-qbh7p3dxeg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hj-day[b-qbh7p3dxeg] {
    color: var(--mk-text-strong);
    font-weight: var(--mk-fw-semibold);
}

.hj-bal[b-qbh7p3dxeg] { font-size: var(--mk-fs-xs); }
.hj-bal-due[b-qbh7p3dxeg] { color: var(--mk-financial-fg); }
.hj-bal-over[b-qbh7p3dxeg] { color: var(--mk-danger-fg); }
.hj-bal-zero[b-qbh7p3dxeg] { color: var(--mk-text-secondary); }

@media (max-width: 1024.98px) {
    .hj-row[b-qbh7p3dxeg] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "who amounts"
            "marks marks";
    }

    .hj-who[b-qbh7p3dxeg] { grid-area: who; }
    .hj-amounts[b-qbh7p3dxeg] { grid-area: amounts; }
    .hj-marks[b-qbh7p3dxeg] { grid-area: marks; flex-wrap: wrap; }
    [b-qbh7p3dxeg] .hj-mark { min-width: 44px; height: 44px; }
}

@media (max-width: 599.98px) {
    .hj-row[b-qbh7p3dxeg] { padding: var(--mk-space-3); }
    .hj-toolbar[b-qbh7p3dxeg] { justify-content: stretch; }
}
/* /Components/Pages/Hajari/HajariWorkerForm.razor.rz.scp.css */
/* The form is a 2- and 3-column grid from md up. Capped at --mk-form-maxw (420px, sized for the
   one-column auth/onboarding cards) it crushed those columns: labels wrapped word by word, the
   joining date was clipped, and Cancel stuck out of the card. */
.hj-form[b-rgteou67u8] {
    max-width: var(--mk-form-maxw-wide);
}
/* /Components/Pages/Hajari/ServiceDashboard.razor.rz.scp.css */
.service-home[b-l6jtgts8bk]{padding:24px;max-width:1200px;margin:auto;color:var(--mk-text)}
.service-hero[b-l6jtgts8bk]{display:flex;justify-content:space-between;gap:16px;padding:24px;border-radius:var(--mk-r-lg);background:var(--mk-primary-soft,var(--mk-bg-subtle));margin-bottom:16px}
h1[b-l6jtgts8bk]{font-size:var(--mk-t-page);font-weight:var(--mk-fw-bold);color:var(--mk-text-strong);margin:0 0 8px}h2[b-l6jtgts8bk]{font-size:var(--mk-t-section)}
.service-hero p[b-l6jtgts8bk]{margin:0 0 8px}[b-l6jtgts8bk] .service-refresh{background:var(--mk-bg-surface);color:var(--mk-text);border:1px solid var(--mk-border);border-radius:var(--mk-r-md);padding:10px;align-self:start;min-height:44px;cursor:pointer}
.service-actions[b-l6jtgts8bk],.service-kpis[b-l6jtgts8bk],.service-workers[b-l6jtgts8bk]{display:grid;gap:12px;margin:16px 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.service-actions a[b-l6jtgts8bk],.service-workers a[b-l6jtgts8bk]{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--mk-border);border-radius:var(--mk-r-md);color:var(--mk-text);background:var(--mk-bg-surface);text-decoration:none;min-height:44px}
.service-actions a[b-l6jtgts8bk]{font-weight:600;color:var(--mk-primary-ink)}
.service-kpis article[b-l6jtgts8bk]{padding:16px;background:var(--mk-bg-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-md)}
.service-kpis span[b-l6jtgts8bk],.service-workers span[b-l6jtgts8bk]{display:block;color:var(--mk-text-2)}
.service-kpis strong[b-l6jtgts8bk]{display:block;font-size:var(--mk-t-section);margin-top:8px}
.service-notice[b-l6jtgts8bk]{display:block;padding:14px;border:1px solid var(--mk-border);border-radius:var(--mk-r-md);color:var(--mk-primary-ink);margin:16px 0}
.service-error[b-l6jtgts8bk]{padding:16px;border:1px solid var(--mk-fin-negative);border-radius:var(--mk-r-md)}
a:focus-visible[b-l6jtgts8bk],[b-l6jtgts8bk] button:focus-visible{outline:2px solid var(--mk-primary-ink);outline-offset:3px}
@media(max-width:640px){.service-home[b-l6jtgts8bk]{padding:16px}.service-hero[b-l6jtgts8bk]{padding:16px}.service-kpis[b-l6jtgts8bk],.service-workers[b-l6jtgts8bk]{grid-template-columns:repeat(2,minmax(0,1fr))}.service-actions[b-l6jtgts8bk]{grid-template-columns:1fr}}
/* /Components/Pages/Hajari/WorkerKhata.razor.rz.scp.css */
.hk-head[b-ha1dfevrjy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-space-3);
    flex-wrap: wrap;
}

.hk-now[b-ha1dfevrjy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--mk-space-3) var(--mk-space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
    background: var(--mk-bg-surface);
    font-variant-numeric: tabular-nums;
}

.hk-now span[b-ha1dfevrjy],
.hk-now small[b-ha1dfevrjy] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-xs);
}

.hk-now strong[b-ha1dfevrjy] {
    font-size: var(--mk-fs-xl);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.hk-due strong[b-ha1dfevrjy] { color: var(--mk-financial-fg); }
.hk-over strong[b-ha1dfevrjy] { color: var(--mk-danger-fg); }

/* ── Entry kind switcher ─────────────────────────────────────────────── */
.hk-kinds[b-ha1dfevrjy] {
    display: flex;
    gap: var(--mk-space-2);
    flex-wrap: wrap;
}

[b-ha1dfevrjy] .hk-kind {
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-radius-pill);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    cursor: pointer;
}

[b-ha1dfevrjy] .hk-kind:hover { background: var(--mk-bg-hover); }

[b-ha1dfevrjy] .hk-kind:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

[b-ha1dfevrjy] .hk-kind-on,
[b-ha1dfevrjy] .hk-kind-on:hover {
    background: var(--mk-primary-soft);
    border-color: var(--mk-primary-border);
    color: var(--mk-primary-ink);
}

/* ── Period bar ──────────────────────────────────────────────────────── */
.hk-periodbar[b-ha1dfevrjy] {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2);
    flex-wrap: wrap;
}

.hk-periodbar[b-ha1dfevrjy]  input[type="date"] {
    width: auto;
}

.hk-actions[b-ha1dfevrjy] {
    display: flex;
    gap: var(--mk-space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

/* ── Statement ───────────────────────────────────────────────────────── */
.hk-table[b-ha1dfevrjy] {
    font-variant-numeric: tabular-nums;
}

/* The empty Actions header carries a .visually-hidden (position:absolute) label. With nothing
   positioned above it, it was placed against the page, ~670px across, and made a 390px phone
   scroll the whole page sideways. Positioning the wrapper keeps it inside the scrolling box. */
.table-responsive[b-ha1dfevrjy] {
    position: relative;
}

.hk-table th[b-ha1dfevrjy] {
    background: var(--mk-bg-table-head);
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

.hk-table td[b-ha1dfevrjy],
.hk-table th[b-ha1dfevrjy] {
    padding: var(--mk-space-2) var(--mk-space-3);
    vertical-align: top;
}

.hk-carry td[b-ha1dfevrjy] {
    color: var(--mk-text-secondary);
    font-style: italic;
}

.hk-absent td[b-ha1dfevrjy] { color: var(--mk-text-secondary); }

.hk-table tfoot th[b-ha1dfevrjy] {
    color: var(--mk-text-strong);
    font-size: var(--mk-fs-sm);
    border-top: 2px solid var(--mk-border-strong);
}

.hk-print-head[b-ha1dfevrjy] { display: none; }

.hk-summary[b-ha1dfevrjy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--mk-space-2);
}

.hk-summary > div[b-ha1dfevrjy] {
    display: flex;
    flex-direction: column;
    padding: var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    font-variant-numeric: tabular-nums;
}

.hk-summary span[b-ha1dfevrjy] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-xs);
}

.hk-summary strong[b-ha1dfevrjy] { color: var(--mk-text-strong); }

@media (max-width: 599.98px) {
    .hk-now[b-ha1dfevrjy] { align-items: flex-start; width: 100%; }
    .hk-actions[b-ha1dfevrjy] { margin-left: 0; }
}

@media print {
    .hk-noprint[b-ha1dfevrjy] { display: none !important; }

    .hk-print-head[b-ha1dfevrjy] {
        display: flex;
        justify-content: space-between;
        padding: var(--mk-space-3);
    }
}
/* /Components/Pages/Hamali/HamaliHome.razor.rz.scp.css */
.hm-kpis[b-4g4194ln0h] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.hm-kpi[b-4g4194ln0h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mk-s3) var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    min-width: 0;
}

.hm-kpi span[b-4g4194ln0h],
.hm-kpi small[b-4g4194ln0h] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.hm-kpi strong[b-4g4194ln0h] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 1024.98px) {
    .hm-kpis[b-4g4194ln0h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Pages/Hamali/HamaliJobForm.razor.rz.scp.css */
.hm-form[b-muuy6af08w] { max-width: var(--mk-content-maxw); }

.hm-lines th[b-muuy6af08w] { white-space: nowrap; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
.hm-lines td:first-child[b-muuy6af08w] { min-width: 220px; }
.hm-lines[b-muuy6af08w]  select { min-width: 120px; }
.hm-lines[b-muuy6af08w]  input[type="number"] { min-width: 90px; }

.hm-workers[b-muuy6af08w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--mk-s2);
}

.hm-worker[b-muuy6af08w] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    min-width: 0;
}

.hm-worker.is-picked[b-muuy6af08w] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
}

.hm-worker label[b-muuy6af08w] { flex: 1 1 auto; min-width: 0; }

[b-muuy6af08w] .hm-qty { width: 90px; flex: 0 0 auto; }

.hm-share[b-muuy6af08w] {
    flex: 0 0 auto;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Invoices/InvoiceDetail.razor.rz.scp.css */
.invoice-detail-web[b-gyo7zeh37v] { max-width: 1200px; padding: var(--mk-s4); margin-inline: auto; min-width: 0; }
.invoice-detail-toolbar[b-gyo7zeh37v], .invoice-toolbar-actions[b-gyo7zeh37v] { flex-wrap: wrap; }
.invoice-toolbar-actions[b-gyo7zeh37v] { gap: var(--mk-s2); }
.invoice-overview[b-gyo7zeh37v] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s3); margin-bottom: var(--mk-s3); }
.invoice-overview > div[b-gyo7zeh37v] { min-width: 0; display: flex; flex-direction: column; gap: var(--mk-s2); padding: var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-bg-surface); overflow-wrap: anywhere; }
.invoice-overview span[b-gyo7zeh37v] { font-size: var(--mk-t-secondary); color: var(--mk-text-muted); }
.invoice-overview strong[b-gyo7zeh37v] { font-size: var(--mk-t-section-sm); }
.invoice-overview > div:first-child[b-gyo7zeh37v] { background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.invoice-items-mobile[b-gyo7zeh37v] { display: none; }
.invoice-detail-web[b-gyo7zeh37v]  button { min-height: var(--mk-touch); }
.invoice-detail-web[b-gyo7zeh37v]  input, .invoice-detail-web[b-gyo7zeh37v]  select { font-size: max(16px, var(--mk-t-body)); }
@media (max-width: 600px) {
    .invoice-detail-web[b-gyo7zeh37v] { padding: var(--mk-s3); }
    .invoice-toolbar-actions[b-gyo7zeh37v] { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-overview[b-gyo7zeh37v] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-overview > div:first-child[b-gyo7zeh37v] { grid-column: 1 / -1; }
    .invoice-items-desktop[b-gyo7zeh37v] { display: none; }
    .invoice-items-mobile[b-gyo7zeh37v] { display: block; }
    .invoice-item-card[b-gyo7zeh37v] { padding: var(--mk-s3); border-bottom: 1px solid var(--mk-border); }
    .invoice-item-card > div[b-gyo7zeh37v] { display: flex; justify-content: space-between; gap: var(--mk-s2); flex-wrap: wrap; }
    .invoice-item-card strong[b-gyo7zeh37v] { overflow-wrap: anywhere; }
    .invoice-item-card p[b-gyo7zeh37v] { margin: var(--mk-s1) 0 0; color: var(--mk-text-muted); font-size: var(--mk-t-secondary); }
    .invoice-detail-web[b-gyo7zeh37v]  .d-flex { flex-wrap: wrap; }
}
/* /Components/Pages/Invoices/InvoicesList.razor.rz.scp.css */
.invoice-screen[b-0wedzkxsyb] { min-width: 0; color: var(--mk-text-strong); background: var(--mk-bg-app); }
.invoice-header[b-0wedzkxsyb] { padding: var(--mk-s4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-s3); background: var(--mk-hero-bg); color: var(--mk-hero-fg); }
.invoice-header > div[b-0wedzkxsyb] { flex: 1; min-width: 160px; }
.invoice-header h1[b-0wedzkxsyb] { font-size: var(--mk-t-section); margin: 0; }
.invoice-header p[b-0wedzkxsyb] { font-size: var(--mk-t-secondary-sm); margin: var(--mk-s1) 0 0; line-height: 1.5; color: var(--mk-hero-fg-2); }
.invoice-primary[b-0wedzkxsyb] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mk-touch); padding: var(--mk-s2) var(--mk-s3); border-radius: var(--mk-r-md); background: var(--mk-primary); color: var(--mk-text-onprimary); text-decoration: none; font-weight: var(--mk-fw-bold); }
.invoice-searchbar[b-0wedzkxsyb] { background: var(--mk-bg-surface); padding: var(--mk-s3) var(--mk-s4); border-bottom: 1px solid var(--mk-border); }
.invoice-searchbar label[b-0wedzkxsyb] { display: block; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold); margin-bottom: var(--mk-s1); }
.invoice-searchrow[b-0wedzkxsyb] { display: flex; gap: var(--mk-s2); }
.invoice-searchrow[b-0wedzkxsyb]  input { width: 100%; min-width: 0; min-height: var(--mk-input-h); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md); padding: var(--mk-s2) var(--mk-s3); background: var(--mk-bg-surface); color: var(--mk-text-strong); font: inherit; font-size: max(16px, var(--mk-t-body)); }
.invoice-screen[b-0wedzkxsyb]  button { min-height: var(--mk-touch); border: 1px solid var(--mk-border-strong); padding: var(--mk-s2); border-radius: var(--mk-r-md); color: var(--mk-text); background: var(--mk-bg-surface); cursor: pointer; font: inherit; font-size: var(--mk-t-secondary-sm); }
.invoice-filters[b-0wedzkxsyb] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s1); margin-top: var(--mk-s3); }
.invoice-filters[b-0wedzkxsyb]  .selected { color: var(--mk-primary-ink); background: var(--mk-primary-lt); border-color: var(--mk-primary); font-weight: var(--mk-fw-bold); }
.invoice-body[b-0wedzkxsyb] { padding: var(--mk-s3) var(--mk-s4) var(--mk-s4); }
.invoice-results[b-0wedzkxsyb] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mk-s2); margin-bottom: var(--mk-s3); color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }
.invoice-card[b-0wedzkxsyb] { background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); padding: var(--mk-s3); margin-bottom: var(--mk-s3); }
.invoice-card-top[b-0wedzkxsyb] { display: flex; justify-content: space-between; align-items: center; gap: var(--mk-s2); flex-wrap: wrap; }
.invoice-number[b-0wedzkxsyb] { color: var(--mk-primary-ink); font-weight: var(--mk-fw-bold); overflow-wrap: anywhere; min-height: var(--mk-touch); display: flex; align-items: center; }
.invoice-status[b-0wedzkxsyb] { border-radius: var(--mk-r-pill); padding: var(--mk-s1) var(--mk-s2); font-size: var(--mk-t-secondary-sm); background: var(--mk-bg-subtle); }
.invoice-status.paid[b-0wedzkxsyb] { background: var(--mk-fin-positive-lt); color: var(--mk-success-fg); }
.invoice-status.due[b-0wedzkxsyb] { background: var(--mk-fin-pending-lt); color: var(--mk-text-strong); }
.invoice-card h2[b-0wedzkxsyb] { margin: var(--mk-s1) 0; font-size: var(--mk-t-body); overflow-wrap: anywhere; }
.invoice-meta[b-0wedzkxsyb] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }
.invoice-amounts[b-0wedzkxsyb] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s2); margin-block: var(--mk-s3); }
.invoice-amounts div[b-0wedzkxsyb] { display: flex; flex-direction: column; gap: var(--mk-s1); overflow-wrap: anywhere; }
.invoice-amounts span[b-0wedzkxsyb] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }
.invoice-due[b-0wedzkxsyb] { color: var(--mk-danger-fg); }
.invoice-open[b-0wedzkxsyb] { display: flex; align-items: center; justify-content: center; min-height: var(--mk-touch); padding: var(--mk-s2); border: 1px solid var(--mk-primary-border); border-radius: var(--mk-r-md); background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-bold); text-decoration: none; }
.invoice-pagination[b-0wedzkxsyb] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mk-s2); font-size: var(--mk-t-secondary-sm); }
.invoice-screen[b-0wedzkxsyb]  button:disabled { opacity: .45; cursor: default; }
.invoice-empty[b-0wedzkxsyb] { text-align: center; padding: var(--mk-s6) var(--mk-s3); color: var(--mk-text-muted); }
.invoice-empty h2[b-0wedzkxsyb] { font-size: var(--mk-t-card); color: var(--mk-text-strong); }
.invoice-error[b-0wedzkxsyb] { padding: var(--mk-s3); background: var(--mk-fin-negative-lt); border-radius: var(--mk-r-md); color: var(--mk-danger-fg); }
.invoice-screen :is(button, input, a):focus-visible[b-0wedzkxsyb] { outline: 2px solid var(--mk-primary); outline-offset: 2px; }
@media (min-width: 600px) { .invoice-body[b-0wedzkxsyb] { max-width: 900px; margin-inline: auto; } }

.invoice-dates[b-0wedzkxsyb] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s3); }
.invoice-dates[b-0wedzkxsyb]  input { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--mk-touch); font: inherit; font-size: 16px; padding: var(--mk-s2); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md); background: var(--mk-bg-surface); color: var(--mk-text-strong); }
.invoice-datefilters summary[b-0wedzkxsyb] { display: flex; align-items: center; min-height: var(--mk-touch); color: var(--mk-primary-ink); cursor: pointer; font-size: var(--mk-t-secondary); }
@media (min-width: 1000px) { .invoice-body[b-0wedzkxsyb] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s3); max-width: 1200px; } .invoice-results[b-0wedzkxsyb], .invoice-pagination[b-0wedzkxsyb], .invoice-empty[b-0wedzkxsyb], .invoice-error[b-0wedzkxsyb] { grid-column: 1 / -1; } .invoice-card[b-0wedzkxsyb] { margin-bottom: 0; } }
/* /Components/Pages/Jewellery/JewelleryRates.razor.rz.scp.css */
.jw-head[b-vyngbki3b7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.jw-title[b-vyngbki3b7] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.jw-sub[b-vyngbki3b7],
.jw-empty[b-vyngbki3b7] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.jw-tabs[b-vyngbki3b7] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

[b-vyngbki3b7] .jw-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-vyngbki3b7] .jw-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.jw-route[b-vyngbki3b7] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    margin-bottom: var(--mk-s3);
}

.jw-route-head[b-vyngbki3b7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}


.jw-section[b-vyngbki3b7] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.jw-form[b-vyngbki3b7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mk-s3);
    align-items: end;
}

.jw-label[b-vyngbki3b7] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.jw-piece-head[b-vyngbki3b7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mk-s3);
}

.jw-actions[b-vyngbki3b7] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s3);
}

.jw-quote[b-vyngbki3b7] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
    font-variant-numeric: tabular-nums;
}

.jw-total[b-vyngbki3b7] {
    margin-top: var(--mk-s1);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.jw-muted[b-vyngbki3b7] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}
/* /Components/Pages/Khatabook/KhataPartyPage.razor.rz.scp.css */
[b-mg6xgq5nvh] button, [b-mg6xgq5nvh] input:not([type=checkbox]), select[b-mg6xgq5nvh] { min-height:44px; }
[b-mg6xgq5nvh] button { min-width:44px; }
[b-mg6xgq5nvh] button:focus-visible, a:focus-visible[b-mg6xgq5nvh], [b-mg6xgq5nvh] input:focus-visible, select:focus-visible[b-mg6xgq5nvh] { outline:3px solid var(--mk-primary); outline-offset:2px; }
/* /Components/Pages/Khatabook/PartyDetailPage.razor.rz.scp.css */
[b-st17hlji5a] button, [b-st17hlji5a] input:not([type=checkbox]), select[b-st17hlji5a] { min-height:44px; }
[b-st17hlji5a] button { min-width:44px; }
[b-st17hlji5a] button:focus-visible, a:focus-visible[b-st17hlji5a], [b-st17hlji5a] input:focus-visible, select:focus-visible[b-st17hlji5a] { outline:3px solid var(--mk-primary); outline-offset:2px; }
/* /Components/Pages/Khatabook/SharedKhataPage.razor.rz.scp.css */
.skp-note[b-3cyxm11on1] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
    line-height: 1.5;
}

.skp-totals[b-3cyxm11on1] {
    display: flex;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.skp-totals > div[b-3cyxm11on1] {
    flex: 1;
    padding: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.skp-totals-label[b-3cyxm11on1] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); margin-bottom: var(--mk-s1); }
.skp-totals-fig[b-3cyxm11on1] { font-size: var(--mk-t-card-sm); font-weight: var(--mk-fw-bold); font-variant-numeric: tabular-nums; }

[b-3cyxm11on1] .skp-row,
.skp-entry[b-3cyxm11on1] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3);
    border: none;
    border-bottom: 1px solid var(--mk-bg-subtle);
    background: none;
    color: var(--mk-text);
    text-align: left;
    font: inherit;
}

[b-3cyxm11on1] .skp-row { cursor: pointer; }
[b-3cyxm11on1] .skp-row:hover { background: var(--mk-bg-subtle); }
[b-3cyxm11on1] .skp-row:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: -2px; }

.skp-avatar[b-3cyxm11on1] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mk-primary-lt);
    color: var(--mk-primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--mk-fw-bold);
}

.skp-row-main[b-3cyxm11on1],
.skp-entry-main[b-3cyxm11on1] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.skp-row-name[b-3cyxm11on1],
.skp-entry-desc[b-3cyxm11on1] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skp-row-sub[b-3cyxm11on1] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }

.skp-row-fig[b-3cyxm11on1] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: var(--mk-fw-bold);
    font-size: var(--mk-t-body);
}

.skp-row-dir[b-3cyxm11on1] { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-regular); color: var(--mk-text-muted); }

.is-get[b-3cyxm11on1] { color: var(--mk-fin-positive); }
.is-give[b-3cyxm11on1] { color: var(--mk-fin-negative); }
.is-settled[b-3cyxm11on1] { color: var(--mk-text-muted); }

.skp-hero[b-3cyxm11on1] {
    text-align: center;
    padding: var(--mk-s5) var(--mk-s4);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-xl);
    background: var(--mk-bg-surface);
}

.skp-hero-fig[b-3cyxm11on1] {
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    line-height: 1;
}

.skp-hero-dir[b-3cyxm11on1] { margin-top: var(--mk-s2); font-weight: var(--mk-fw-bold); }

.skp-hero-meta[b-3cyxm11on1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mk-s1) var(--mk-s3);
    margin-top: var(--mk-s3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

.skp-empty[b-3cyxm11on1] {
    text-align: center;
    padding: var(--mk-s8) var(--mk-s4);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
}

.skp-empty > div[b-3cyxm11on1] { font-size: var(--mk-t-hero-lg); margin-bottom: var(--mk-s3); }
.skp-empty-title[b-3cyxm11on1] { font-size: var(--mk-t-card-sm); font-weight: var(--mk-fw-bold); color: var(--mk-text); margin-bottom: var(--mk-s1); }
/* /Components/Pages/Manufacturing/MfgBomEditor.razor.rz.scp.css */
.mfg-link[b-0l6yt4cnhq] {
    color: var(--mk-primary-ink);
}

.mfg-num-col[b-0l6yt4cnhq] {
    width: calc(var(--mk-space-8) * 4);
}
/* /Components/Pages/Manufacturing/MfgBoms.razor.rz.scp.css */
/* Links arrive through grid templates — ::deep reaches them. */
.mfg-link[b-69u7fgd0d9],
[b-69u7fgd0d9] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgCapacity.razor.rz.scp.css */
/* Capacity matrix. Tinted cells use the -lt/-fg pairs, which are redefined for dark mode. */
.mfg-cap-used[b-gvihrkg60d] {
    background: var(--mk-info-lt);
    color: var(--mk-info-fg);
}

.mfg-cap-over[b-gvihrkg60d] {
    background: var(--mk-danger-lt);
    color: var(--mk-danger-fg);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Manufacturing/MfgDashboard.razor.rz.scp.css */
/* Manufacturing dashboard. Tokens only — see docs/css-design-system.md. */

.mfg-kpi-link[b-oopsfg7tc6],
.mfg-row-link[b-oopsfg7tc6] {
    color: inherit;
    text-decoration: none;
    display: block;
}

.mfg-kpi-link:hover[b-oopsfg7tc6]  .card,
.mfg-kpi-link:focus-visible[b-oopsfg7tc6]  .card {
    box-shadow: var(--mk-shadow-md);
}

.mfg-link[b-oopsfg7tc6],
[b-oopsfg7tc6] .mfg-link {
    color: var(--mk-primary-ink);
}

.mfg-bars[b-oopsfg7tc6] {
    display: flex;
    align-items: flex-end;
    gap: var(--mk-space-1);
    height: calc(var(--mk-space-8) * 5); /* five of the largest spacing step — a chart-sized band */
}

.mfg-bar-col[b-oopsfg7tc6] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}

.mfg-bar[b-oopsfg7tc6] {
    background: var(--mk-financial);
    border-radius: var(--mk-radius-sm) var(--mk-radius-sm) 0 0;
    min-height: 2px;
}

.mfg-bar-label[b-oopsfg7tc6] {
    text-align: center;
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-secondary);
    margin-top: var(--mk-space-1);
}
/* /Components/Pages/Manufacturing/MfgInspection.razor.rz.scp.css */
.mfg-link[b-lxdc79tg41],
[b-lxdc79tg41] .mfg-link {
    color: var(--mk-primary-ink);
}

.qc-facts[b-lxdc79tg41] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--mk-space-8) * 4), 1fr));
    gap: var(--mk-space-2) var(--mk-space-4);
    padding: var(--mk-space-4);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
}

.qc-facts > div[b-lxdc79tg41] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qc-facts span[b-lxdc79tg41] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-sm);
}

.qc-facts b[b-lxdc79tg41] {
    color: var(--mk-text-strong);
    font-weight: var(--mk-fw-semibold);
    overflow-wrap: anywhere;
}

/* The measured value is the one thing typed on this row — give it room. */
.qc-results[b-lxdc79tg41]  .qc-input input,
.qc-results[b-lxdc79tg41]  .qc-input select {
    min-width: calc(var(--mk-space-8) * 3);
}

.qc-history[b-lxdc79tg41] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qc-history li[b-lxdc79tg41] {
    padding: var(--mk-space-2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.qc-history li:last-child[b-lxdc79tg41] {
    border-bottom: none;
}
/* /Components/Pages/Manufacturing/MfgInspectionNew.razor.rz.scp.css */
.mfg-link[b-wd6xcmbdkq] {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgJobCards.razor.rz.scp.css */
/* Links arrive through grid templates — ::deep reaches them. */
.mfg-link[b-4apddjfz18],
[b-4apddjfz18] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgNcr.razor.rz.scp.css */
.mfg-link[b-4golarixed] {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgNcrs.razor.rz.scp.css */
.mfg-link[b-7lm2midjiz],
[b-7lm2midjiz] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgOrderDetail.razor.rz.scp.css */
/* Production order screen. Tokens only — see docs/css-design-system.md. */

.mfg-link[b-rdotfiye4g],
[b-rdotfiye4g] .mfg-link {
    color: var(--mk-primary-ink);
}

.mfg-qty-col[b-rdotfiye4g] {
    width: calc(var(--mk-space-8) * 4);
}

.mfg-cost-line[b-rdotfiye4g] {
    padding: var(--mk-space-1) 0;
    border-bottom: 1px solid var(--mk-border);
}
/* /Components/Pages/Manufacturing/MfgOrderForm.razor.rz.scp.css */
/* Links and grid templates belong to this page's scope — ::deep reaches them. */
[b-p4h34v1t05] .mfg-link {
    color: var(--mk-primary-ink);
}

.mfg-link[b-p4h34v1t05] {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgOrders.razor.rz.scp.css */
/* Links arrive through MkDataGrid templates, which belong to this page's scope — ::deep reaches them. */
[b-0elwehpwi2] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgQuality.razor.rz.scp.css */
.mfg-link[b-4oays2afkj],
[b-4oays2afkj] .mfg-link {
    color: var(--mk-primary-ink);
}

.qc-strip[b-4oays2afkj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--mk-space-8) * 5), 1fr));
    gap: var(--mk-space-3);
}

.qc-strip > div[b-4oays2afkj] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-1);
    padding: var(--mk-space-3) var(--mk-space-4);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
}

.qc-strip-label[b-4oays2afkj] {
    color: var(--mk-text-secondary);
    font-size: var(--mk-fs-sm);
}

.qc-strip-value[b-4oays2afkj] {
    color: var(--mk-text-strong);
    font-size: var(--mk-fs-xl);
    font-weight: var(--mk-fw-semibold);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Manufacturing/MfgQualityPlanEditor.razor.rz.scp.css */
.mfg-link[b-afre1i8rob] {
    color: var(--mk-primary-ink);
}

/* Nine narrow columns: keep the inputs usable without pushing the row off a laptop screen. */
.qp-checks[b-afre1i8rob]  input,
.qp-checks[b-afre1i8rob]  select {
    min-width: calc(var(--mk-space-8) * 2);
}
/* /Components/Pages/Manufacturing/MfgQualityPlans.razor.rz.scp.css */
.mfg-link[b-401dygyt98],
[b-401dygyt98] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgRoutingEditor.razor.rz.scp.css */
.mfg-link[b-25m81fk8ey] {
    color: var(--mk-primary-ink);
}

/* Ten narrow numeric columns: let them shrink rather than push the row off a laptop screen. */
.mfg-ops[b-25m81fk8ey]  input {
    min-width: calc(var(--mk-space-8) * 2);
}
/* /Components/Pages/Manufacturing/MfgRoutings.razor.rz.scp.css */
/* Links arrive through grid templates — ::deep reaches them. */
.mfg-link[b-dqunmomlxz],
[b-dqunmomlxz] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgSettings.razor.rz.scp.css */
.mfg-link[b-8r4jldg73h] {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgShopFloor.razor.rz.scp.css */
/* Shop-floor tablet view: large touch targets, high contrast, one glance. Tokens only. */

.sf-page[b-kxj8mwq19c] {
    padding: var(--mk-space-4);
}

.sf-top[b-kxj8mwq19c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mk-space-3);
}

.sf-centre[b-kxj8mwq19c] {
    flex: 1 1 auto;
    max-width: calc(var(--mk-space-8) * 12);
}

.sf-operator[b-kxj8mwq19c] {
    display: flex;
    gap: var(--mk-space-2);
    align-items: center;
}

.sf-operator-name[b-kxj8mwq19c] {
    font-weight: var(--mk-fw-semibold);
}

.sf-body[b-kxj8mwq19c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--mk-space-4);
}

@media (max-width: 1024.98px) {
    .sf-body[b-kxj8mwq19c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sf-list[b-kxj8mwq19c] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
}

[b-kxj8mwq19c] .sf-tile {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-1);
    text-align: left;
    padding: var(--mk-space-3);
    background: var(--mk-surface);
    color: var(--mk-text);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
    cursor: pointer;
}

[b-kxj8mwq19c] .sf-tile-active {
    border-color: var(--mk-primary);
    box-shadow: var(--mk-shadow-md);
}

.sf-tile-head[b-kxj8mwq19c] {
    display: flex;
    justify-content: space-between;
    font-weight: var(--mk-fw-semibold);
}

.sf-tile-op[b-kxj8mwq19c] {
    color: var(--mk-text-secondary);
}

.sf-card[b-kxj8mwq19c] {
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-card);
    padding: var(--mk-space-4);
}

.sf-card-head[b-kxj8mwq19c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-space-3);
    margin-bottom: var(--mk-space-3);
}

.sf-card-title[b-kxj8mwq19c] {
    font-size: var(--mk-fs-xl);
    font-weight: var(--mk-fw-bold);
}

.sf-status[b-kxj8mwq19c] {
    font-size: var(--mk-fs-md);
}

.sf-counts[b-kxj8mwq19c] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--mk-space-2);
    margin-bottom: var(--mk-space-2);
}

@media (max-width: 599.98px) {
    .sf-counts[b-kxj8mwq19c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sf-count[b-kxj8mwq19c] {
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-2);
    text-align: center;
}

.sf-count-label[b-kxj8mwq19c] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-secondary);
}

.sf-count-value[b-kxj8mwq19c] {
    font-size: var(--mk-fs-2xl);
    font-weight: var(--mk-fw-bold);
}

.sf-grid[b-kxj8mwq19c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mk-space-8) * 5), 1fr));
    gap: var(--mk-space-2);
    margin-bottom: var(--mk-space-3);
}

[b-kxj8mwq19c] .sf-btn {
    min-height: calc(var(--mk-space-8) * 2);
    border-radius: var(--mk-radius-md);
    font-size: var(--mk-fs-md);
    font-weight: var(--mk-fw-bold);
    border: 1px solid transparent;
    cursor: pointer;
    padding: var(--mk-space-2) var(--mk-space-3);
}

[b-kxj8mwq19c] .sf-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tinted fills with their own -fg text: both pairs are redefined for dark mode, so the contrast
   holds in either theme (a solid fill with --mk-text-oncolor does not — dark --mk-success is pale). */
[b-kxj8mwq19c] .sf-btn-go {
    background: var(--mk-success-lt);
    color: var(--mk-success-fg);
    border-color: var(--mk-success-fg);
}

[b-kxj8mwq19c] .sf-btn-warn {
    background: var(--mk-warning-lt);
    color: var(--mk-warning-fg);
    border-color: var(--mk-warning-fg);
}

[b-kxj8mwq19c] .sf-btn-stop {
    background: var(--mk-danger-lt);
    color: var(--mk-danger-fg);
    border-color: var(--mk-danger-fg);
}

[b-kxj8mwq19c] .sf-btn-done {
    background: var(--mk-primary-lt);
    color: var(--mk-primary-ink);
    border-color: var(--mk-primary-ink);
}

[b-kxj8mwq19c] .sf-btn-outline {
    background: var(--mk-surface);
    color: var(--mk-text);
    border-color: var(--mk-border-strong);
}

[b-kxj8mwq19c] .sf-btn-ghost {
    background: transparent;
    color: var(--mk-text-secondary);
}

.sf-report[b-kxj8mwq19c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-2);
    align-items: flex-end;
    margin-bottom: var(--mk-space-3);
}

.sf-qty[b-kxj8mwq19c] {
    min-width: calc(var(--mk-space-8) * 4);
}

[b-kxj8mwq19c] .sf-complete {
    width: 100%;
}

.sf-history[b-kxj8mwq19c] {
    margin-top: var(--mk-space-4);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-secondary);
    border-top: 1px solid var(--mk-border);
    padding-top: var(--mk-space-2);
}
/* /Components/Pages/Manufacturing/MfgShortages.razor.rz.scp.css */
/* Links arrive through grid templates — ::deep reaches them. */
.mfg-link[b-8hzngspnpw],
[b-8hzngspnpw] .mfg-link {
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Manufacturing/MfgWorkCenters.razor.rz.scp.css */
/* A status select inside a grid row — narrow, so the row-actions column stays compact. */
[b-zjt73326tp] .mfg-status-select {
    min-width: calc(var(--mk-space-8) * 4);
}
/* /Components/Pages/Marketing/Campaigns.razor.rz.scp.css */
.cp-head[b-95doshtuba] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.cp-head-actions[b-95doshtuba] {
    display: flex;
    gap: var(--mk-s3);
    align-items: center;
    flex-wrap: wrap;
}

.cp-title[b-95doshtuba] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.cp-sub[b-95doshtuba] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.cp-tabs[b-95doshtuba] {
    display: flex;
    gap: var(--mk-s2);
}

[b-95doshtuba] .cp-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-95doshtuba] .cp-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.cp-off[b-95doshtuba] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.cp-off a[b-95doshtuba] {
    color: var(--mk-primary-ink);
}

.cp-grid[b-95doshtuba] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.cp-span[b-95doshtuba] {
    grid-column: 1 / -1;
}

.cp-label[b-95doshtuba] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.cp-section[b-95doshtuba] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.cp-picked[b-95doshtuba],
.cp-chip[b-95doshtuba] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s1) var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.cp-combo[b-95doshtuba] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.cp-x[b-95doshtuba] {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    cursor: pointer;
    font-size: var(--mk-fs-md, var(--mk-fs-sm));
    line-height: 1;
}

.cp-days[b-95doshtuba] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.cp-days .cp-label[b-95doshtuba] {
    margin: 0;
}

.cp-day[b-95doshtuba],
.cp-check[b-95doshtuba] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.cp-hint[b-95doshtuba] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.cp-actions[b-95doshtuba] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.cp-period[b-95doshtuba] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
    flex-wrap: wrap;
}

.cp-period .cp-label[b-95doshtuba] {
    margin: 0;
}

.cp-period .form-control[b-95doshtuba] {
    width: auto;
}

[b-95doshtuba] .cp-live {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-95doshtuba] .cp-row-actions {
    display: inline-flex;
    gap: var(--mk-s1);
}

.cp-preview[b-95doshtuba] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.cp-result-head[b-95doshtuba] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-result-title[b-95doshtuba] {
    margin: 0;
    font-weight: var(--mk-fw-semibold);
}

.cp-kpis[b-95doshtuba] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--mk-s2);
    margin: var(--mk-s3) 0;
}

.cp-kpi[b-95doshtuba] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s2) var(--mk-s3);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.cp-kpi span[b-95doshtuba] {
    display: block;
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Marketing/Promotions.razor.rz.scp.css */
.pr-head[b-kjqep5x2h2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.pr-head-actions[b-kjqep5x2h2] {
    display: flex;
    gap: var(--mk-s3);
    align-items: center;
    flex-wrap: wrap;
}

.pr-title[b-kjqep5x2h2] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.pr-sub[b-kjqep5x2h2] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pr-tabs[b-kjqep5x2h2] {
    display: flex;
    gap: var(--mk-s2);
}

[b-kjqep5x2h2] .pr-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-kjqep5x2h2] .pr-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pr-off[b-kjqep5x2h2] {
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.pr-off a[b-kjqep5x2h2] {
    color: var(--mk-primary-ink);
}

.pr-grid[b-kjqep5x2h2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pr-span[b-kjqep5x2h2] {
    grid-column: 1 / -1;
}

.pr-label[b-kjqep5x2h2] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.pr-section[b-kjqep5x2h2] {
    margin: var(--mk-s4) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.pr-picked[b-kjqep5x2h2],
.pr-chip[b-kjqep5x2h2] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s1) var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.pr-combo[b-kjqep5x2h2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

[b-kjqep5x2h2] .pr-x {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    cursor: pointer;
    font-size: var(--mk-fs-md, var(--mk-fs-sm));
    line-height: 1;
}

.pr-days[b-kjqep5x2h2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s3);
    margin-top: var(--mk-s3);
}

.pr-days .pr-label[b-kjqep5x2h2] {
    margin: 0;
}

.pr-day[b-kjqep5x2h2],
.pr-check[b-kjqep5x2h2] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    font-size: var(--mk-fs-sm);
}

.pr-hint[b-kjqep5x2h2] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.pr-actions[b-kjqep5x2h2] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.pr-period[b-kjqep5x2h2] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
    flex-wrap: wrap;
}

.pr-period .pr-label[b-kjqep5x2h2] {
    margin: 0;
}

.pr-period .form-control[b-kjqep5x2h2] {
    width: auto;
}

[b-kjqep5x2h2] .pr-live {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-kjqep5x2h2] .pr-row-actions {
    display: inline-flex;
    gap: var(--mk-s1);
}
/* /Components/Pages/Onboarding/OnboardingFlow.razor.rz.scp.css */
/* OnboardingFlow — the bodies that sit inside OnboardingCarouselShell.
   Everything here lives on the hero gradient, so it wears --mk-hero-* foregrounds and
   translucent white fills rather than the page's surface tokens: a --mk-bg-surface card
   would punch a white hole in the middle of a dark first-run screen. */

/* ---------- Grouped rows (language / theme) ---------- */

.ob-card[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    background: var(--mk-hero-fill);
    overflow: hidden;
}

.ob-row[b-koz09xeb8x] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-hero-line);
}

.ob-row:last-child[b-koz09xeb8x] {
    border-bottom: none;
}

.ob-row__icon[b-koz09xeb8x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-primary);
    font-size: var(--mk-t-body);
}

.ob-row__label[b-koz09xeb8x] {
    flex: 1;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg);
}

.ob-row__select[b-koz09xeb8x] {
    flex: none;
    max-width: 55%;
    padding: var(--mk-s2) var(--mk-s3);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg);
    font-family: inherit;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

/* The dropdown list itself is painted by the OS, not by this page — on a dark hero the
   options would otherwise be white-on-white in several browsers. */
.ob-row__select option[b-koz09xeb8x] {
    color: var(--mk-text);
    background: var(--mk-bg-surface);
}

/* ---------- Quote ---------- */

.ob-quote[b-koz09xeb8x] {
    margin: var(--mk-s4) 0 0;
    padding: var(--mk-s4);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    font-size: var(--mk-t-body);
    font-style: italic;
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

.ob-quote cite[b-koz09xeb8x] {
    display: block;
    margin-top: var(--mk-s2);
    font-style: normal;
    font-weight: var(--mk-fw-semibold);
    color:var(--mk-primary-ink);
}

/* ---------- Start choice cards ---------- */

.ob-choices[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.ob-choice[b-koz09xeb8x] {
    display: flex;
    align-items: flex-start;
    gap: var(--mk-s4);
    width: 100%;
    padding: var(--mk-s4);
    border: 1.5px solid var(--mk-hero-line);
    border-radius: var(--mk-r-lg);
    background: var(--mk-hero-fill);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--mk-t-fast), background var(--mk-t-fast);
}

.ob-choice:hover:not(:disabled)[b-koz09xeb8x] {
    border-color: var(--mk-primary);
}

/* Selection is carried by the border AND the tick in ::after, never by colour alone. */
[b-koz09xeb8x] .ob-choice.is-picked {
    border-color: var(--mk-primary);
    background: var(--mk-primary-lt);
}

.ob-choice.is-picked .ob-choice__title[b-koz09xeb8x]::after {
    content: " ✓";
    color:var(--mk-primary-ink);
}

.ob-choice:disabled[b-koz09xeb8x] {
    opacity: .5;
    cursor: not-allowed;
}

.ob-choice__art[b-koz09xeb8x] {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    border: 1px solid var(--mk-hero-line);
    font-size: var(--mk-t-section-sm);
}

.ob-choice__text[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    min-width: 0;
}

.ob-choice__title[b-koz09xeb8x] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-hero-fg);
}

.ob-choice__desc[b-koz09xeb8x] {
    font-size: var(--mk-t-body);
    line-height: 1.45;
    color: var(--mk-hero-fg-2);
}

/* A picked card sits on --mk-primary-lt, which is a LIGHT tint — hero foregrounds would
   vanish on it, so the text swaps back to the ordinary ink tokens. */
.ob-choice.is-picked .ob-choice__title[b-koz09xeb8x] {
    color: var(--mk-text-strong);
}

.ob-choice.is-picked .ob-choice__desc[b-koz09xeb8x] {
    color: var(--mk-text-2);
}

/* ---------- First-account form ---------- */

.ob-field[b-koz09xeb8x] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    padding: var(--mk-s4);
    border-bottom: 1px solid var(--mk-hero-line);
}

.ob-field:last-child[b-koz09xeb8x] {
    border-bottom: none;
}

.ob-field__label[b-koz09xeb8x] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
}

[b-koz09xeb8x] .ob-field__input {
    width: 100%;
    padding: var(--mk-s3) !important;
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-sm);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg);
    font-family: inherit;
    font-size: var(--mk-t-card-sm);
    outline: none;
}

[b-koz09xeb8x] .ob-field__input input::placeholder {
    color: var(--mk-hero-fg-2);
}

[b-koz09xeb8x] .ob-field__input:focus-within {
    border-color: var(--mk-primary);
}

.ob-types[b-koz09xeb8x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s2);
}

[b-koz09xeb8x] .ob-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s1);
    padding: var(--mk-s3);
    border: 1.5px solid var(--mk-hero-line);
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    color: var(--mk-hero-fg-2);
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    transition: border-color var(--mk-t-fast), color var(--mk-t-fast);
}

.ob-type__icon[b-koz09xeb8x] {
    font-size: var(--mk-t-card-sm);
    line-height: 1;
}

[b-koz09xeb8x] .ob-type.is-picked {
    border-color: var(--mk-primary);
    color:var(--mk-primary-ink);
}

/* ---------- Footnotes ---------- */

.ob-note[b-koz09xeb8x],
.ob-error[b-koz09xeb8x] {
    margin: var(--mk-s3) 0 0;
    text-align: center;
    font-size: var(--mk-t-secondary);
}

.ob-note[b-koz09xeb8x] {
    color: var(--mk-hero-fg-2);
}

.ob-error[b-koz09xeb8x] {
    color: var(--mk-fin-negative-on-hero);
    font-weight: var(--mk-fw-semibold);
}

@media (max-width: 599.98px) {

    .ob-choice__art[b-koz09xeb8x] {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ob-choice[b-koz09xeb8x],
    .ob-type[b-koz09xeb8x] {
        transition: none;
    }
}
/* /Components/Pages/Opticals/OpticalCustomerPicker.razor.rz.scp.css */
.opt-picker-chosen[b-yyrhqe7oss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-3);
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-surface);
}

.opt-picker-results[b-yyrhqe7oss] {
    margin-top: var(--mk-space-1);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-surface);
    overflow: hidden;
}

[b-yyrhqe7oss] .opt-picker-row {
    display: block;
    width: 100%;
    text-align: start;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 0;
    border-bottom: 1px solid var(--mk-border);
    background: transparent;
    color: var(--mk-text);
}

[b-yyrhqe7oss] .opt-picker-row:last-child {
    border-bottom: 0;
}

[b-yyrhqe7oss] .opt-picker-row:hover,
[b-yyrhqe7oss] .opt-picker-row:focus-visible {
    background: var(--mk-bg-hover);
}
/* /Components/Pages/Opticals/OpticalOrderPage.razor.rz.scp.css */
.opt-results[b-24898mi6q2] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-surface);
    overflow: hidden;
}

[b-24898mi6q2] .opt-result {
    display: block;
    width: 100%;
    text-align: start;
    padding: var(--mk-space-2) var(--mk-space-3);
    border: 0;
    border-bottom: 1px solid var(--mk-border);
    background: transparent;
    color: var(--mk-text);
}

[b-24898mi6q2] .opt-result:last-child {
    border-bottom: 0;
}

[b-24898mi6q2] .opt-result:hover,
[b-24898mi6q2] .opt-result:focus-visible {
    background: var(--mk-bg-hover);
}

.opt-job[b-24898mi6q2] {
    padding: var(--mk-space-2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.opt-job:last-child[b-24898mi6q2] {
    border-bottom: 0;
}

.opt-order[b-24898mi6q2]  table {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Opticals/Prescriptions.razor.rz.scp.css */
.opt-rx-entry[b-t6ja4qkrhu] {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: var(--mk-space-1);
    font-variant-numeric: tabular-nums;
}

.opt-rx-entry thead th[b-t6ja4qkrhu] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-secondary);
    text-align: center;
}

.opt-rx-entry tbody th[b-t6ja4qkrhu] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
    white-space: nowrap;
    padding-inline-end: var(--mk-space-2);
}

.opt-rx-entry .form-control[b-t6ja4qkrhu] {
    text-align: center;
}
/* /Components/Pages/Opticals/RxTable.razor.rz.scp.css */
.opt-rx[b-6y173yb2zp] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: var(--mk-fs-sm);
}

.opt-rx th[b-6y173yb2zp],
.opt-rx td[b-6y173yb2zp] {
    padding: var(--mk-space-2);
    border-bottom: 1px solid var(--mk-border);
    text-align: center;
    color: var(--mk-text);
}

.opt-rx thead th[b-6y173yb2zp] {
    color: var(--mk-text-secondary);
    font-weight: var(--mk-fw-semibold);
    background: var(--mk-bg-table-head);
}

.opt-rx tbody th[b-6y173yb2zp] {
    text-align: start;
    font-weight: var(--mk-fw-semibold);
    white-space: nowrap;
}
/* /Components/Pages/Payroll/AttendanceRegister.razor.rz.scp.css */
/* Attendance register — a staff x day grid.
   The grid is the one place in HR that genuinely needs custom CSS: it scrolls
   horizontally inside its own container (never the page body) with the name
   column pinned. All values are --mk-* tokens per docs/css-design-system.md §1. */

.att-scroll[b-8u83o6is6j] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.att-grid[b-8u83o6is6j] {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--mk-t-secondary);
}

.att-grid th[b-8u83o6is6j],
.att-grid td[b-8u83o6is6j] {
    border-bottom: 1px solid var(--mk-border);
    padding: var(--mk-space-2);
    white-space: nowrap;
}

.att-grid thead th[b-8u83o6is6j] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mk-bg-subtle);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

/* Pinned employee column. Higher z-index on the header cell so it stays above
   both the sticky row and the sticky column where they intersect. */
.att-sticky-col[b-8u83o6is6j] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 160px;
    background: var(--mk-bg-surface);
    border-right: 1px solid var(--mk-border);
}

.att-grid thead .att-sticky-col[b-8u83o6is6j] {
    z-index: 3;
    background: var(--mk-bg-subtle);
}

.att-day[b-8u83o6is6j] {
    text-align: center;
    min-width: 30px;
}

.att-day-off[b-8u83o6is6j] { color: var(--mk-primary-ink); }

.att-cell[b-8u83o6is6j] {
    text-align: center;
    font-family: var(--mk-font-num);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

.att-present[b-8u83o6is6j]  { background: var(--mk-success-lt);  color: var(--mk-success-fg); }
.att-half[b-8u83o6is6j]     { background: var(--mk-warning-lt);  color: var(--mk-warning-fg); }
.att-leave[b-8u83o6is6j]    { background: var(--mk-info-lt);     color: var(--mk-info-fg); }
.att-unpaid[b-8u83o6is6j]   { background: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.att-absent[b-8u83o6is6j]   { background: var(--mk-danger-lt);   color: var(--mk-danger-fg); }
.att-off[b-8u83o6is6j]      { background: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.att-holiday[b-8u83o6is6j]  { background: var(--mk-primary-lt);  color: var(--mk-primary-ink); }

.att-total[b-8u83o6is6j] {
    text-align: right;
    font-family: var(--mk-font-num);
    background: var(--mk-bg-subtle);
}

.att-lop[b-8u83o6is6j] { color: var(--mk-danger-fg); font-weight: var(--mk-fw-semibold); }

/* ── Today's quick-mark list ───────────────────────────────────────────── */

.att-today[b-8u83o6is6j] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-2);
}

.att-today-row[b-8u83o6is6j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-3);
    flex-wrap: wrap;
    padding-bottom: var(--mk-space-2);
    border-bottom: 1px solid var(--mk-border);
}

.att-today-row:last-child[b-8u83o6is6j] { border-bottom: 0; padding-bottom: 0; }

.att-today-name[b-8u83o6is6j] { min-width: 140px; }

.att-today-actions[b-8u83o6is6j] {
    display: flex;
    gap: var(--mk-space-2);
}

[b-8u83o6is6j] .att-chip {
    /* 44px floor: this is the primary tap target on a phone. */
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    transition: background var(--mk-dur-fast) var(--mk-ease-out),
                border-color var(--mk-dur-fast) var(--mk-ease-out);
}

[b-8u83o6is6j] .att-chip:hover:not(:disabled) { border-color: var(--mk-primary-border); }

[b-8u83o6is6j] .att-chip-on {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    color: var(--mk-text-oncolor);
}

[b-8u83o6is6j] .att-chip:disabled { opacity: .5; cursor: default; }

[b-8u83o6is6j] .att-chip:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

@media (min-width: 1025px) {
    [b-8u83o6is6j] .att-chip { min-width: var(--mk-ctrl-h); min-height: var(--mk-ctrl-h); }
}

/* ── Legend ────────────────────────────────────────────────────────────── */

.att-legend[b-8u83o6is6j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

.att-legend-item[b-8u83o6is6j] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2);
}

.att-legend-swatch[b-8u83o6is6j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--mk-radius-sm);
    border: 1px solid var(--mk-border);
}

@media (prefers-reduced-motion: reduce) {
    [b-8u83o6is6j] .att-chip { transition: none; }
}
/* /Components/Pages/Payroll/HrHub.razor.rz.scp.css */
/* HR hub — stat cards and module tiles.
   Every value here is a --mk-* token per docs/css-design-system.md §1. */

.hr-stat-label[b-zln2hz35mk] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    margin-bottom: var(--mk-space-1);
}

.hr-stat-value[b-zln2hz35mk] {
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    line-height: 1.1;
    color: var(--mk-text);
}

.hr-stat-good[b-zln2hz35mk] { color: var(--mk-success); }
.hr-stat-warn[b-zln2hz35mk] { color: var(--mk-warning-fg); }

.hr-empty-glyph[b-zln2hz35mk] { font-size: var(--mk-fs-2xl); }

[b-zln2hz35mk] .hr-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mk-space-1);
    width: 100%;
    /* 44px floor is the rule below 1025px; this sits well above it at every tier. */
    min-height: 108px;
    padding: var(--mk-space-4);
    text-align: left;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-sm);
    cursor: pointer;
    transition: border-color var(--mk-dur-fast) var(--mk-ease-out),
                box-shadow var(--mk-dur-fast) var(--mk-ease-out),
                transform var(--mk-dur-fast) var(--mk-ease-out);
}

[b-zln2hz35mk] .hr-tile:hover {
    border-color: var(--mk-primary-border);
    box-shadow: var(--mk-shadow-md);
    transform: translateY(-2px);
}

[b-zln2hz35mk] .hr-tile:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
}

.hr-tile-icon[b-zln2hz35mk] { font-size: var(--mk-fs-xl); line-height: 1; }

.hr-tile-title[b-zln2hz35mk] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.hr-tile-sub[b-zln2hz35mk] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    [b-zln2hz35mk] .hr-tile { transition: none; }
    [b-zln2hz35mk] .hr-tile:hover { transform: none; }
}
/* /Components/Pages/Payroll/PayslipDetail.razor.rz.scp.css */
/* Payslip — an A4-ish sheet that is meant to be printed and handed over.
   All values are --mk-* tokens per docs/css-design-system.md §1. */

.pay-sheet[b-bql7o8u6h4] {
    max-width: 820px;
    padding: var(--mk-space-6);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-sm);
}

.pay-head[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-space-4);
    padding-bottom: var(--mk-space-4);
    border-bottom: 2px solid var(--mk-primary);
}

.pay-title[b-bql7o8u6h4] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.pay-sub[b-bql7o8u6h4] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.pay-meta[b-bql7o8u6h4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-space-2) var(--mk-space-4);
    padding: var(--mk-space-4) 0;
    border-bottom: 1px solid var(--mk-border);
}

.pay-meta-item[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-space-2);
    font-size: var(--mk-t-secondary);
}

.pay-meta-label[b-bql7o8u6h4] { color: var(--mk-text-2); }
.pay-meta-value[b-bql7o8u6h4] { color: var(--mk-text); font-weight: var(--mk-fw-medium); }

.pay-cols[b-bql7o8u6h4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mk-space-5);
    padding: var(--mk-space-4) 0;
}

.pay-col-head[b-bql7o8u6h4] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--mk-space-2);
}

.pay-table[b-bql7o8u6h4] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-t-body);
}

.pay-table td[b-bql7o8u6h4] {
    padding: var(--mk-space-2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.pay-table tfoot td[b-bql7o8u6h4] {
    font-weight: var(--mk-fw-semibold);
    border-bottom: 0;
    border-top: 2px solid var(--mk-border);
}

.pay-amt[b-bql7o8u6h4] {
    text-align: right;
    font-family: var(--mk-font-num);
    white-space: nowrap;
}

.pay-net[b-bql7o8u6h4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-space-4);
    padding: var(--mk-space-4);
    background: var(--mk-primary-lt);
    border-radius: var(--mk-radius-md);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.pay-net-value[b-bql7o8u6h4] {
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-primary-ink);
}

.pay-employer[b-bql7o8u6h4],
.pay-foot[b-bql7o8u6h4] {
    margin-top: var(--mk-space-4);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.pay-adjust[b-bql7o8u6h4] { margin-top: var(--mk-space-5); }

@media (min-width: 600px) {
    .pay-cols[b-bql7o8u6h4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Printing: only the sheet itself. App chrome (sidebar, top bar, toasts) is
   stripped globally by wwwroot/css/print.css — CSS isolation cannot reach the
   layout from here — so all this file does is hide the page's own on-screen
   controls and drop the sheet framing. */
@media print {
    .pay-noprint[b-bql7o8u6h4] { display: none !important; }

    .pay-sheet[b-bql7o8u6h4] {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}
/* /Components/Pages/PersonalFinance/AddInvestmentPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-6e650naavo] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-6e650naavo]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-6e650naavo]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-6e650naavo]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-6e650naavo]  button:focus-visible, .wealth-page[b-6e650naavo]  a:focus-visible,
.wealth-page[b-6e650naavo]  summary:focus-visible, .wealth-page[b-6e650naavo]  input:focus-visible,
.wealth-page[b-6e650naavo]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-6e650naavo]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-6e650naavo]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-6e650naavo]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-6e650naavo]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-6e650naavo]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-6e650naavo]  .wealth-actions { width: 100%; }
    .wealth-page[b-6e650naavo]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/BillsInvestmentsReportPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-4bfl6qo5a1] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-4bfl6qo5a1]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-4bfl6qo5a1]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-4bfl6qo5a1]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-4bfl6qo5a1]  button:focus-visible, .wealth-page[b-4bfl6qo5a1]  a:focus-visible,
.wealth-page[b-4bfl6qo5a1]  summary:focus-visible, .wealth-page[b-4bfl6qo5a1]  input:focus-visible,
.wealth-page[b-4bfl6qo5a1]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-4bfl6qo5a1]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-4bfl6qo5a1]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-4bfl6qo5a1]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-4bfl6qo5a1]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-4bfl6qo5a1]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-4bfl6qo5a1]  .wealth-actions { width: 100%; }
    .wealth-page[b-4bfl6qo5a1]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/CashFlowPage.razor.rz.scp.css */
.cf-page[b-yrin54ubge] { max-width: 1200px; }

.cf-link[b-yrin54ubge] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    color: var(--mk-primary-ink);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    text-decoration: none;
}

.cf-sum[b-yrin54ubge],
.cf-fc-grid[b-yrin54ubge] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.cf-sum .cf-kpi[b-yrin54ubge],
.cf-card[b-yrin54ubge] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-sm);
}

.cf-sum .cf-kpi[b-yrin54ubge] { padding: var(--mk-s4); }

.cf-card[b-yrin54ubge] { padding: var(--mk-s5); margin-bottom: var(--mk-s4); }

.cf-card-head[b-yrin54ubge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.cf-title[b-yrin54ubge] {
    margin: 0;
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.cf-k[b-yrin54ubge] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
}

.cf-v[b-yrin54ubge] {
    margin-top: var(--mk-s1);
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.cf-fc-grid .cf-v[b-yrin54ubge] { font-size: var(--mk-t-card); }

.cf-sub[b-yrin54ubge] { margin-top: var(--mk-s1); font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.cf-muted[b-yrin54ubge] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary); }

.cf-pos[b-yrin54ubge] { color: var(--mk-fin-positive); }
.cf-neg[b-yrin54ubge] { color: var(--mk-fin-negative); }

.cf-chart[b-yrin54ubge] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--mk-s3);
    align-items: end;
    height: 220px;
}

.cf-col[b-yrin54ubge] { display: flex; flex-direction: column; align-items: center; gap: var(--mk-s1); height: 100%; min-width: 0; }

.cf-bars[b-yrin54ubge] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--mk-s1);
    border-bottom: 1px solid var(--mk-border);
}

.cf-bars span[b-yrin54ubge] { width: min(22px, 40%); min-height: 2px; border-radius: var(--mk-r-sm) var(--mk-r-sm) 0 0; }
.cf-bars .in[b-yrin54ubge], .cf-legend .in[b-yrin54ubge] { background: var(--mk-fin-positive); }
.cf-bars .out[b-yrin54ubge], .cf-legend .out[b-yrin54ubge] { background: var(--mk-fin-negative); }
.cf-lbl[b-yrin54ubge] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }

.cf-legend[b-yrin54ubge] { display: flex; gap: var(--mk-s4); margin-top: var(--mk-s2); font-size: var(--mk-t-micro); color: var(--mk-text-2); }
.cf-legend i[b-yrin54ubge] { display: inline-block; width: var(--mk-s2); height: var(--mk-s2); border-radius: 2px; margin-right: var(--mk-s1); }

.cf-table[b-yrin54ubge] {
    width: 100%;
    margin-top: var(--mk-s4);
    border-collapse: collapse;
    font-size: var(--mk-t-secondary);
    font-variant-numeric: tabular-nums;
}

.cf-table th[b-yrin54ubge],
.cf-table td[b-yrin54ubge] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    text-align: right;
}

.cf-table th:first-child[b-yrin54ubge] { text-align: left; }
.cf-table thead th[b-yrin54ubge] { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); color: var(--mk-text-2); background: var(--mk-bg-subtle); }
.cf-table tbody th[b-yrin54ubge] { font-weight: var(--mk-fw-medium); color: var(--mk-text-strong); }
.cf-row-neg[b-yrin54ubge] { background: var(--mk-fin-negative-lt); }

.cf-seg[b-yrin54ubge] { display: inline-flex; border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); overflow: hidden; }

.cf-seg[b-yrin54ubge]  button {
    min-height: 32px;
    padding: 0 var(--mk-s3);
    border: none;
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    font: inherit;
    font-size: var(--mk-t-secondary);
    cursor: pointer;
}

.cf-seg button[b-yrin54ubge] +  button { border-left: 1px solid var(--mk-border); }
.cf-seg[b-yrin54ubge]  button.is-on { background: var(--mk-primary-soft); color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }

.cf-alert[b-yrin54ubge] {
    display: flex;
    gap: var(--mk-s3);
    align-items: flex-start;
    margin-bottom: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border: 1px solid var(--mk-warning);
    border-radius: var(--mk-r-md);
    background: var(--mk-warning-lt);
    color: var(--mk-warning-fg);
    font-size: var(--mk-t-secondary);
}

.cf-alert-title[b-yrin54ubge] { font-weight: var(--mk-fw-semibold); }

@media (max-width: 599.98px) {
    .cf-card[b-yrin54ubge] { padding: var(--mk-s4); }
    .cf-chart[b-yrin54ubge] { height: 160px; gap: var(--mk-s1); }
    .cf-table th[b-yrin54ubge], .cf-table td[b-yrin54ubge] { padding: var(--mk-s2); }
}
/* /Components/Pages/PersonalFinance/ConsolidatedPositionPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-jcqwo6aw5q] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-jcqwo6aw5q]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-jcqwo6aw5q]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-jcqwo6aw5q]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-jcqwo6aw5q]  button:focus-visible, .wealth-page[b-jcqwo6aw5q]  a:focus-visible,
.wealth-page[b-jcqwo6aw5q]  summary:focus-visible, .wealth-page[b-jcqwo6aw5q]  input:focus-visible,
.wealth-page[b-jcqwo6aw5q]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-jcqwo6aw5q]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-jcqwo6aw5q]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-jcqwo6aw5q]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-jcqwo6aw5q]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-jcqwo6aw5q]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-jcqwo6aw5q]  .wealth-actions { width: 100%; }
    .wealth-page[b-jcqwo6aw5q]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/EmergencyFundPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-zwovhb2gsj] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-zwovhb2gsj]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-zwovhb2gsj]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-zwovhb2gsj]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-zwovhb2gsj]  button:focus-visible, .wealth-page[b-zwovhb2gsj]  a:focus-visible,
.wealth-page[b-zwovhb2gsj]  summary:focus-visible, .wealth-page[b-zwovhb2gsj]  input:focus-visible,
.wealth-page[b-zwovhb2gsj]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-zwovhb2gsj]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-zwovhb2gsj]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-zwovhb2gsj]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-zwovhb2gsj]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-zwovhb2gsj]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-zwovhb2gsj]  .wealth-actions { width: 100%; }
    .wealth-page[b-zwovhb2gsj]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/FreshStartPage.razor.rz.scp.css */
.fs-hero[b-yz9m624j6c] {
    background: var(--mk-hero-bg);
    padding: var(--mk-s5) var(--mk-s5) 70px;
}
.fs-hero-row[b-yz9m624j6c] { display: flex; align-items: center; gap: var(--mk-s3); max-width: 560px; margin-inline: auto; }
[b-yz9m624j6c] .fs-back {
    width: 38px;
    height: 38px;
    border-radius: var(--mk-r-md);
    background: var(--mk-hero-fill);
    border: none;
    cursor: pointer;
    color: var(--mk-hero-fg);
    font-size: var(--mk-t-section-sm);
}
.fs-hero-kicker[b-yz9m624j6c] {
    font-size: var(--mk-t-micro);
    color: var(--mk-hero-fg-2);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
}
.fs-hero-title[b-yz9m624j6c] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-hero-fg);
    margin-top: var(--mk-s1);
}

.fs-actions[b-yz9m624j6c] { display: flex; gap: var(--mk-s2); }
.fs-actions[b-yz9m624j6c]  .fs-btn { flex: 1; }
[b-yz9m624j6c] .fs-btn.fs-btn-plain {
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    border: 1.5px solid var(--mk-border);
}

.fs[b-yz9m624j6c] {
    padding: 0 var(--mk-s5) var(--mk-s6);
    margin: -50px auto 0;
    max-width: 560px;
    position: relative;
}

.fs-card[b-yz9m624j6c] {
    display: block;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s3);
}

.fs-warn[b-yz9m624j6c] { background: var(--mk-fin-negative-lt); border-color: var(--mk-fin-negative-br); }
.fs-warn-title[b-yz9m624j6c] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-fin-negative-fg);
    margin-bottom: var(--mk-s1);
}

.fs-h[b-yz9m624j6c] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s2);
}
.fs-p[b-yz9m624j6c] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-text-2); line-height: 1.5; }

.fs-row[b-yz9m624j6c] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s3);
    padding: var(--mk-s2) 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text);
}
.fs-row:last-child[b-yz9m624j6c] { border-bottom: none; }
.fs-row-note[b-yz9m624j6c] { color: var(--mk-text-muted); font-size: var(--mk-t-micro); }
.fs-count[b-yz9m624j6c] { font-weight: var(--mk-fw-bold); color: var(--mk-fin-negative); }

.fs-export[b-yz9m624j6c] {
    display: flex;
    gap: var(--mk-s2);
    align-items: flex-start;
    background: var(--mk-fin-info-lt);
    border-color: var(--mk-fin-info-br);
    color: var(--mk-fin-info-fg);
    font-size: var(--mk-t-secondary);
    text-decoration: none;
    line-height: 1.5;
}

.fs-label[b-yz9m624j6c] {
    display: block;
    margin: var(--mk-s3) 0 var(--mk-s1);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}
.fs-label:first-child[b-yz9m624j6c] { margin-top: 0; }
[b-yz9m624j6c] .fs-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: var(--mk-s2) var(--mk-s3) !important;
    border: 1.5px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-size: var(--mk-t-body);
    letter-spacing: .08em;
}

.fs-error[b-yz9m624j6c] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    font-size: var(--mk-t-secondary);
}

[b-yz9m624j6c] .fs-btn {
    width: 100%;
    min-height: 48px;
    margin-top: var(--mk-s4);
    border: none;
    border-radius: var(--mk-r-md);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-bold);
    cursor: pointer;
}
[b-yz9m624j6c] .fs-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Ink-on-tint rather than white on a solid fill: the fin-* solids turn pastel in dark mode. */
[b-yz9m624j6c] .fs-btn-danger {
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    border: 1.5px solid var(--mk-fin-negative-br);
}
[b-yz9m624j6c] .fs-btn-primary { background: var(--mk-primary); color: var(--mk-primary-foreground); }

.fs-done[b-yz9m624j6c] { text-align: center; }
.fs-done-ico[b-yz9m624j6c] { font-size: var(--mk-t-hero-sm); line-height: 1; margin-bottom: var(--mk-s2); }
.fs-done-title[b-yz9m624j6c] {
    font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s2);
}
/* /Components/Pages/PersonalFinance/ImportContactsPage.razor.rz.scp.css */
/* Imported-contacts list on /pf/import-contacts. Personal Finance keeps its own card/list
   layouts (exempt from MkDataGrid), and every colour is a theme-reactive --mk-* token so the
   list follows the app into dark mode. */

.ic-card[b-4y9aes4dtb] {
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s5);
    box-shadow: var(--mk-sh-sm);
    margin-top: var(--mk-s4);
}

.ic-head[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.ic-title[b-4y9aes4dtb] {
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.ic-sub[b-4y9aes4dtb] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    margin-top: 2px;
}

[b-4y9aes4dtb] .ic-search {
    flex: 0 1 280px;
    min-width: 0;
    padding: var(--mk-s2) var(--mk-s3) !important;
    border-radius: var(--mk-r-md);
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-subtle);
    color: var(--mk-text);
    font-size: var(--mk-t-secondary);
}

[b-4y9aes4dtb] .ic-search:focus-within { outline: none; box-shadow: var(--mk-focus-ring); border-color: var(--mk-primary); }

.ic-empty[b-4y9aes4dtb] {
    padding: var(--mk-s5) var(--mk-s3);
    text-align: center;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.ic-list[b-4y9aes4dtb] { list-style: none; margin: 0; padding: 0; }

.ic-list li + li[b-4y9aes4dtb] { border-top: 1px solid var(--mk-border); }

.ic-row[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s2);
    border-radius: var(--mk-r-md);
    text-decoration: none;
    color: inherit;
}

.ic-row:hover[b-4y9aes4dtb] { background: var(--mk-bg-subtle); }

.ic-avatar[b-4y9aes4dtb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mk-bg-app);
    color: var(--mk-text-strong);
    font-weight: var(--mk-fw-bold);
    font-size: var(--mk-t-body);
}

.ic-main[b-4y9aes4dtb] { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ic-name[b-4y9aes4dtb] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-meta[b-4y9aes4dtb] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-new[b-4y9aes4dtb] {
    flex-shrink: 0;
    padding: 1px var(--mk-s2);
    border-radius: var(--mk-r-pill);
    background: var(--mk-fin-positive-lt);
    color: var(--mk-fin-positive-fg);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
}

.ic-bal[b-4y9aes4dtb] {
    flex-shrink: 0;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    font-variant-numeric: tabular-nums;
}

.ic-bal.is-in[b-4y9aes4dtb]  { color: var(--mk-fin-positive-fg); }
.ic-bal.is-out[b-4y9aes4dtb] { color: var(--mk-fin-negative-fg); }

.ic-more[b-4y9aes4dtb] {
    padding-top: var(--mk-s3);
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .ic-card[b-4y9aes4dtb] { padding: var(--mk-s4); }
    [b-4y9aes4dtb] .ic-search { flex-basis: 100%; }
    .ic-bal[b-4y9aes4dtb] { max-width: 38%; text-align: right; white-space: normal; }
}
/* /Components/Pages/PersonalFinance/InsurancePage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-yqugvai1nr] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-yqugvai1nr]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-yqugvai1nr]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-yqugvai1nr]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-yqugvai1nr]  button:focus-visible, .wealth-page[b-yqugvai1nr]  a:focus-visible,
.wealth-page[b-yqugvai1nr]  summary:focus-visible, .wealth-page[b-yqugvai1nr]  input:focus-visible,
.wealth-page[b-yqugvai1nr]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-yqugvai1nr]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-yqugvai1nr]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-yqugvai1nr]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-yqugvai1nr]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-yqugvai1nr]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-yqugvai1nr]  .wealth-actions { width: 100%; }
    .wealth-page[b-yqugvai1nr]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/InvestmentDashboardPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-i9mcryss1q] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-i9mcryss1q]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-i9mcryss1q]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-i9mcryss1q]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-i9mcryss1q]  button:focus-visible, .wealth-page[b-i9mcryss1q]  a:focus-visible,
.wealth-page[b-i9mcryss1q]  summary:focus-visible, .wealth-page[b-i9mcryss1q]  input:focus-visible,
.wealth-page[b-i9mcryss1q]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-i9mcryss1q]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-i9mcryss1q]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-i9mcryss1q]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-i9mcryss1q]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-i9mcryss1q]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-i9mcryss1q]  .wealth-actions { width: 100%; }
    .wealth-page[b-i9mcryss1q]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/InvestmentHoldingPage.razor.rz.scp.css */
/* Local to wealth screens; use the existing light/dark theme tokens. */
.wealth-page[b-a2p3rnwupw] {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px !important;
    margin-inline: auto;
    min-width: 0;
    font-size: 1rem;
}
.wealth-page[b-a2p3rnwupw]  button,
.wealth-page[b-a2p3rnwupw]  summary { min-height: 44px; }
.wealth-page[b-a2p3rnwupw]  button { white-space: normal; height: auto; }
.wealth-page[b-a2p3rnwupw]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-a2p3rnwupw]  select {
    min-height: 44px;
    max-width: 100%;
    font-size: 1rem;
}
.wealth-page[b-a2p3rnwupw]  input,
.wealth-page[b-a2p3rnwupw]  select { box-sizing: border-box; min-width: 0; }
.wealth-page[b-a2p3rnwupw]  button:focus-visible,
.wealth-page[b-a2p3rnwupw]  summary:focus-visible,
.wealth-page[b-a2p3rnwupw]  a:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 3px;
}
.wealth-disclosure > summary[b-a2p3rnwupw] {
    cursor: pointer;
    color: var(--mk-text-strong);
    font-size: 1rem;
    font-weight: var(--mk-fw-bold);
    padding-block: 12px;
    line-height: 1.5;
}
.wealth-disclosure[open] > summary[b-a2p3rnwupw] { margin-bottom: 16px; border-bottom: 1px solid var(--mk-border); }
.wealth-history[b-a2p3rnwupw] { margin-top: 20px; }
.wealth-history table[b-a2p3rnwupw] { width: 100%; border-collapse: collapse; color: var(--mk-text); font-variant-numeric: tabular-nums; }
.wealth-history th[b-a2p3rnwupw], .wealth-history td[b-a2p3rnwupw] { padding: 12px 8px; border-bottom: 1px solid var(--mk-border); text-align: start; }
.wealth-history td[b-a2p3rnwupw], .wealth-history thead th:last-child[b-a2p3rnwupw] { text-align: end; }
.wealth-history caption[b-a2p3rnwupw], .wealth-chart-note[b-a2p3rnwupw] { color: var(--mk-text-muted); font-size: 0.875rem; text-align: start; margin-bottom: 12px; }
@media (max-width: 599.98px) {
    .wealth-page[b-a2p3rnwupw]  button { max-width: 100%; overflow-wrap: anywhere; }
    .wealth-page[b-a2p3rnwupw]  .ih-grid { grid-template-columns: minmax(0, 1fr); }
}

.wealth-page[b-a2p3rnwupw]  .ih-card { padding: clamp(16px, 2vw, 24px); border-radius: var(--mk-r-lg); }
.wealth-page[b-a2p3rnwupw]  .ih-h { font-size: 1rem; }
.wealth-page[b-a2p3rnwupw]  .ih-fig-l, .wealth-page[b-a2p3rnwupw]  .ih-lbl { font-size: 0.8125rem; text-transform: none; letter-spacing: normal; }
.wealth-page[b-a2p3rnwupw]  .ih-fig-v { font-size: clamp(1.25rem, 2vw, 1.75rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wealth-page[b-a2p3rnwupw]  .ih-hint, .wealth-page[b-a2p3rnwupw]  .ih-fig-s { font-size: 0.8125rem; line-height: 1.5; }
.wealth-page[b-a2p3rnwupw]  .ih-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wealth-page[b-a2p3rnwupw]  .ih-tabs { gap: 8px; }
.wealth-page[b-a2p3rnwupw]  .ih-tab { min-width: 140px; padding: 10px 16px; font-size: 0.875rem; }
@media (max-width: 599.98px) {
    .wealth-page[b-a2p3rnwupw]  .ih-grid { grid-template-columns: minmax(0, 1fr); }
    .wealth-page[b-a2p3rnwupw]  .ih-tab { flex: 1; min-width: 0; }
}

.wealth-page[b-a2p3rnwupw]  [style*="font-size:var(--mk-t-micro)"] { font-size: 0.8125rem !important; }
.wealth-page[b-a2p3rnwupw]  [style*="font-size:var(--mk-t-card-sm)"] { font-size: 1.125rem !important; }

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-a2p3rnwupw] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-a2p3rnwupw]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-a2p3rnwupw]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-a2p3rnwupw]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-a2p3rnwupw]  button:focus-visible, .wealth-page[b-a2p3rnwupw]  a:focus-visible,
.wealth-page[b-a2p3rnwupw]  summary:focus-visible, .wealth-page[b-a2p3rnwupw]  input:focus-visible,
.wealth-page[b-a2p3rnwupw]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-a2p3rnwupw]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-a2p3rnwupw]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-a2p3rnwupw]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-a2p3rnwupw]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-a2p3rnwupw]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-a2p3rnwupw]  .wealth-actions { width: 100%; }
    .wealth-page[b-a2p3rnwupw]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/InvestmentPlannerPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-wpt14oompx] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-wpt14oompx]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-wpt14oompx]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-wpt14oompx]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-wpt14oompx]  button:focus-visible, .wealth-page[b-wpt14oompx]  a:focus-visible,
.wealth-page[b-wpt14oompx]  summary:focus-visible, .wealth-page[b-wpt14oompx]  input:focus-visible,
.wealth-page[b-wpt14oompx]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-wpt14oompx]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-wpt14oompx]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-wpt14oompx]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-wpt14oompx]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-wpt14oompx]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-wpt14oompx]  .wealth-actions { width: 100%; }
    .wealth-page[b-wpt14oompx]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/NetWorthPage.razor.rz.scp.css */
/* Local to wealth screens; use the existing light/dark theme tokens. */
.wealth-page[b-amhzf3mmk6] {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px !important;
    margin-inline: auto;
    min-width: 0;
    font-size: 1rem;
}
.wealth-page[b-amhzf3mmk6]  button,
.wealth-page[b-amhzf3mmk6]  summary { min-height: 44px; }
.wealth-page[b-amhzf3mmk6]  button { white-space: normal; height: auto; }
.wealth-page[b-amhzf3mmk6]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-amhzf3mmk6]  select {
    min-height: 44px;
    max-width: 100%;
    font-size: 1rem;
}
.wealth-page[b-amhzf3mmk6]  input,
.wealth-page[b-amhzf3mmk6]  select { box-sizing: border-box; min-width: 0; }
.wealth-page[b-amhzf3mmk6]  button:focus-visible,
.wealth-page[b-amhzf3mmk6]  summary:focus-visible,
.wealth-page[b-amhzf3mmk6]  a:focus-visible {
    outline: 2px solid var(--mk-primary);
    outline-offset: 3px;
}
.wealth-disclosure > summary[b-amhzf3mmk6] {
    cursor: pointer;
    color: var(--mk-text-strong);
    font-size: 1rem;
    font-weight: var(--mk-fw-bold);
    padding-block: 12px;
    line-height: 1.5;
}
.wealth-disclosure[open] > summary[b-amhzf3mmk6] { margin-bottom: 16px; border-bottom: 1px solid var(--mk-border); }
.wealth-history[b-amhzf3mmk6] { margin-top: 20px; }
.wealth-history table[b-amhzf3mmk6] { width: 100%; border-collapse: collapse; color: var(--mk-text); font-variant-numeric: tabular-nums; }
.wealth-history th[b-amhzf3mmk6], .wealth-history td[b-amhzf3mmk6] { padding: 12px 8px; border-bottom: 1px solid var(--mk-border); text-align: start; }
.wealth-history td[b-amhzf3mmk6], .wealth-history thead th:last-child[b-amhzf3mmk6] { text-align: end; }
.wealth-history caption[b-amhzf3mmk6], .wealth-chart-note[b-amhzf3mmk6] { color: var(--mk-text-muted); font-size: 0.875rem; text-align: start; margin-bottom: 12px; }
@media (max-width: 599.98px) {
    .wealth-page[b-amhzf3mmk6]  button { max-width: 100%; overflow-wrap: anywhere; }
    .wealth-page[b-amhzf3mmk6]  .ih-grid { grid-template-columns: minmax(0, 1fr); }
}

.wealth-page[b-amhzf3mmk6]  [style*="font-size:var(--mk-t-micro)"] { font-size: 0.8125rem !important; }
.wealth-page[b-amhzf3mmk6]  [style*="font-size:var(--mk-t-card-sm)"] { font-size: 1.125rem !important; }

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-amhzf3mmk6] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-amhzf3mmk6]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-amhzf3mmk6]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-amhzf3mmk6]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-amhzf3mmk6]  button:focus-visible, .wealth-page[b-amhzf3mmk6]  a:focus-visible,
.wealth-page[b-amhzf3mmk6]  summary:focus-visible, .wealth-page[b-amhzf3mmk6]  input:focus-visible,
.wealth-page[b-amhzf3mmk6]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-amhzf3mmk6]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-amhzf3mmk6]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-amhzf3mmk6]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-amhzf3mmk6]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-amhzf3mmk6]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-amhzf3mmk6]  .wealth-actions { width: 100%; }
    .wealth-page[b-amhzf3mmk6]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PersonalFinance/PersonalInvestmentsPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-zilwxev6f8] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-zilwxev6f8]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-zilwxev6f8]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-zilwxev6f8]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-zilwxev6f8]  button:focus-visible, .wealth-page[b-zilwxev6f8]  a:focus-visible,
.wealth-page[b-zilwxev6f8]  summary:focus-visible, .wealth-page[b-zilwxev6f8]  input:focus-visible,
.wealth-page[b-zilwxev6f8]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-zilwxev6f8]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-zilwxev6f8]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-zilwxev6f8]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-zilwxev6f8]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-zilwxev6f8]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-zilwxev6f8]  .wealth-actions { width: 100%; }
    .wealth-page[b-zilwxev6f8]  .wealth-actions button { flex: 1 1 auto; }
}

.wealth-page[b-zilwxev6f8]  .hold-row { flex-wrap: wrap; }
.wealth-page[b-zilwxev6f8]  .price-edit-row { flex-wrap: wrap; }
@media (max-width: 899.98px) {
    .wealth-page[b-zilwxev6f8]  .wealth-holdings-layout { grid-template-columns: minmax(0, 1fr) !important; }
}
/* /Components/Pages/PersonalFinance/PrivacyPage.razor.rz.scp.css */
/* Guide §8.2: three groups by meaning, each on its own card. */
.pv-card[b-fjs7wg9llp] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s5);
    box-shadow: var(--mk-sh-sm);
    margin-bottom: var(--mk-s4);
}

.pv-group[b-fjs7wg9llp] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--mk-s2);
}

.pv-sub[b-fjs7wg9llp] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s2);
}
/* /Components/Pages/PersonalFinance/RetirementPage.razor.rz.scp.css */

/* Wealth-wide interaction baseline; scoped to this screen. */
.wealth-page[b-jobvqn0hd1] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1200px !important; margin-inline: auto; }
.wealth-page[b-jobvqn0hd1]  button { min-height: 44px; min-width: 44px; height: auto; white-space: normal; }
.wealth-page[b-jobvqn0hd1]  input:not([type="checkbox"]):not([type="file"]),
.wealth-page[b-jobvqn0hd1]  select { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 1rem; }
.wealth-page[b-jobvqn0hd1]  button:focus-visible, .wealth-page[b-jobvqn0hd1]  a:focus-visible,
.wealth-page[b-jobvqn0hd1]  summary:focus-visible, .wealth-page[b-jobvqn0hd1]  input:focus-visible,
.wealth-page[b-jobvqn0hd1]  select:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 3px; }
.wealth-page[b-jobvqn0hd1]  .wealth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wealth-page[b-jobvqn0hd1]  .wealth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mk-primary-ink); text-underline-offset: 3px; }
.wealth-page[b-jobvqn0hd1]  .wealth-table-scroll { overflow-x: auto; max-width: 100%; }
.wealth-page[b-jobvqn0hd1]  .wealth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599.98px) {
    .wealth-page[b-jobvqn0hd1]  .wealth-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .wealth-page[b-jobvqn0hd1]  .wealth-actions { width: 100%; }
    .wealth-page[b-jobvqn0hd1]  .wealth-actions button { flex: 1 1 auto; }
}
/* /Components/Pages/PlatformAdmin/ErpReview.razor.rz.scp.css */
.erp-review[b-nzhd0tdqt5] { display: grid; gap: var(--mk-s5); }
.erp-head-actions[b-nzhd0tdqt5] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); }
.erp-eyebrow[b-nzhd0tdqt5], .erp-kicker[b-nzhd0tdqt5] { color: var(--mk-primary-ink); font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold); letter-spacing: .04em; text-transform: uppercase; }
.erp-intro[b-nzhd0tdqt5] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-s5); padding: var(--mk-s5); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-bg-surface); }
.erp-intro h2[b-nzhd0tdqt5] { margin: var(--mk-s2) 0; color: var(--mk-text-strong); font-size: var(--mk-t-section); }
.erp-intro p[b-nzhd0tdqt5], .erp-section-head p[b-nzhd0tdqt5] { margin: 0; color: var(--mk-text-2); }
.erp-intro-meta[b-nzhd0tdqt5] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mk-s2); }
.erp-stats[b-nzhd0tdqt5] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s3); }
.erp-stat[b-nzhd0tdqt5], .erp-card[b-nzhd0tdqt5] { border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-bg-surface); }
.erp-stat[b-nzhd0tdqt5] { display: grid; gap: var(--mk-s1); padding: var(--mk-s4); }
.erp-stat span[b-nzhd0tdqt5] { color: var(--mk-text-2); font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-medium); }
.erp-stat strong[b-nzhd0tdqt5] { color: var(--mk-text-strong); font-size: var(--mk-t-section); }
.erp-stat small[b-nzhd0tdqt5] { color: var(--mk-text-muted); }
.erp-section-nav[b-nzhd0tdqt5] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); padding: var(--mk-s2); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); background: var(--mk-bg-surface); }
.erp-section-nav a[b-nzhd0tdqt5] { padding: var(--mk-s2) var(--mk-s3); border-radius: var(--mk-r-md); color: var(--mk-primary-ink); font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); text-decoration: none; }
.erp-section-nav a:hover[b-nzhd0tdqt5] { background: var(--mk-primary-soft); }
.erp-card[b-nzhd0tdqt5] { display: grid; gap: var(--mk-s4); padding: var(--mk-s5); scroll-margin-top: calc(var(--mk-topbar) + var(--mk-s3)); }
.erp-section-head[b-nzhd0tdqt5] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-s3); }
.erp-section-head h2[b-nzhd0tdqt5] { margin: 0 0 var(--mk-s1); color: var(--mk-text-strong); font-size: var(--mk-t-card); }
.erp-business-grid[b-nzhd0tdqt5] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s2); }
.erp-business-card[b-nzhd0tdqt5] { display: flex; align-items: center; gap: var(--mk-s3); min-width: 0; padding: var(--mk-s3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); }
.erp-business-mark[b-nzhd0tdqt5] { display: grid; place-items: center; width: var(--mk-btn-h); height: var(--mk-btn-h); flex: 0 0 var(--mk-btn-h); border-radius: var(--mk-r-md); background: var(--mk-primary-soft); color: var(--mk-primary-ink); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold); }
.erp-business-copy[b-nzhd0tdqt5] { display: grid; flex: 1; min-width: 0; gap: 2px; }
.erp-business-copy strong[b-nzhd0tdqt5] { color: var(--mk-text-strong); }
.erp-business-copy span[b-nzhd0tdqt5], .erp-module-meta[b-nzhd0tdqt5], .erp-profile-card span[b-nzhd0tdqt5] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }
.erp-module-grid[b-nzhd0tdqt5] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s3); }
.erp-module-card[b-nzhd0tdqt5] { display: grid; align-content: start; gap: var(--mk-s2); padding: var(--mk-s3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); }
.erp-module-title[b-nzhd0tdqt5] { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s2); color: var(--mk-text-strong); }
.erp-review-dot[b-nzhd0tdqt5] { width: var(--mk-s2); height: var(--mk-s2); flex: 0 0 var(--mk-s2); border-radius: 50%; background: var(--mk-warning); }
.erp-link-button[b-nzhd0tdqt5] { justify-self: start; min-height: var(--mk-btn-h); color: var(--mk-primary-ink); }
.erp-role-strip[b-nzhd0tdqt5] { display: grid; gap: var(--mk-s2); padding-top: var(--mk-s3); border-top: 1px solid var(--mk-border); color: var(--mk-text-strong); }
.erp-chip-list[b-nzhd0tdqt5] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); }
.erp-chip[b-nzhd0tdqt5] { padding: 4px var(--mk-s2); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); color: var(--mk-text-2); font-size: var(--mk-t-secondary-sm); }
.erp-profile-grid[b-nzhd0tdqt5] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s3); }
.erp-profile-card[b-nzhd0tdqt5] { display: grid; align-content: start; justify-items: start; gap: var(--mk-s2); padding: var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg); }
.erp-profile-card h3[b-nzhd0tdqt5] { margin: 0; color: var(--mk-text-strong); font-size: var(--mk-t-card); }
.erp-profile-card p[b-nzhd0tdqt5] { margin: 0; color: var(--mk-text-2); }
.erp-two-col[b-nzhd0tdqt5] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.erp-two-col > div[b-nzhd0tdqt5] { min-width: 0; }
.erp-check-list[b-nzhd0tdqt5] { display: grid; gap: var(--mk-s2); margin: var(--mk-s3) 0 0; padding: 0; list-style: none; }
.erp-check-list li[b-nzhd0tdqt5] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-s2); padding: var(--mk-s2) 0; border-top: 1px solid var(--mk-border); color: var(--mk-text-2); }
.erp-table-scroll[b-nzhd0tdqt5] { max-width: 100%; overflow-x: auto; }
.erp-compare[b-nzhd0tdqt5] { width: 100%; border-collapse: collapse; }
.erp-compare th[b-nzhd0tdqt5], .erp-compare td[b-nzhd0tdqt5] { padding: var(--mk-s3); border-bottom: 1px solid var(--mk-border); text-align: left; vertical-align: top; }
.erp-compare th[b-nzhd0tdqt5] { background: var(--mk-bg-table-head); color: var(--mk-text-strong); font-size: var(--mk-t-w-th); }
.erp-compare td[b-nzhd0tdqt5] { color: var(--mk-text-2); }
.erp-compare td:first-child[b-nzhd0tdqt5] { min-width: 145px; color: var(--mk-text-strong); }
.erp-issue-filters[b-nzhd0tdqt5] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-s2); }
.erp-issue-filters > .mk-grid-search[b-nzhd0tdqt5] { flex: 1 1 220px; }
.erp-issue-filters > .mk-grid-filter[b-nzhd0tdqt5] { flex: 1 1 145px; }

@media (max-width: 1024.98px) {
    .erp-stats[b-nzhd0tdqt5] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .erp-module-grid[b-nzhd0tdqt5] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .erp-intro[b-nzhd0tdqt5] { flex-direction: column; }
    .erp-intro-meta[b-nzhd0tdqt5] { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
    .erp-review[b-nzhd0tdqt5] { gap: var(--mk-s3); }
    .erp-intro[b-nzhd0tdqt5], .erp-card[b-nzhd0tdqt5] { padding: var(--mk-s3); }
    .erp-stats[b-nzhd0tdqt5], .erp-business-grid[b-nzhd0tdqt5], .erp-module-grid[b-nzhd0tdqt5], .erp-profile-grid[b-nzhd0tdqt5], .erp-two-col[b-nzhd0tdqt5] { grid-template-columns: 1fr; }
    .erp-business-card[b-nzhd0tdqt5] { flex-wrap: wrap; }
    .erp-business-card .erp-business-copy[b-nzhd0tdqt5] { flex-basis: calc(100% - var(--mk-btn-h) - var(--mk-s3)); }
    .erp-business-card .erp-business-copy + *[b-nzhd0tdqt5] { margin-left: calc(var(--mk-btn-h) + var(--mk-s3)); }
    .erp-check-list li[b-nzhd0tdqt5] { flex-direction: column; }
}
/* /Components/Pages/PlatformAdmin/ErpReviewIssue.razor.rz.scp.css */
.erp-issue-page[b-lacu8dullw] { display: grid; align-content: start; gap: var(--mk-s4); }
.erp-issue-card[b-lacu8dullw] { display: grid; gap: var(--mk-s4); }
.erp-issue-fields[b-lacu8dullw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s4); }
.erp-issue-fields .pa-field[b-lacu8dullw] { min-width: 0; }
.erp-issue-fields .pa-field[b-lacu8dullw]  .pa-select { width: 100%; }
.erp-field-wide[b-lacu8dullw] { grid-column: 1 / -1; }
.erp-field-hint[b-lacu8dullw] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }
.erp-issue-actions[b-lacu8dullw] { display: flex; justify-content: flex-end; gap: var(--mk-s2); padding-top: var(--mk-s3); border-top: 1px solid var(--mk-border); }

@media (max-width: 599.98px) {
    .erp-issue-fields[b-lacu8dullw] { grid-template-columns: 1fr; }
    .erp-field-wide[b-lacu8dullw] { grid-column: auto; }
    .erp-issue-actions[b-lacu8dullw] { flex-direction: column-reverse; }
    .erp-issue-actions[b-lacu8dullw]  .stack-button { width: 100%; }
}
/* /Components/Pages/Pos/PosShifts.razor.rz.scp.css */
.pz-head[b-4078jxfqnv] {
    margin-bottom: var(--mk-s4);
}

.pz-title[b-4078jxfqnv] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.pz-sub[b-4078jxfqnv] {
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pz-section[b-4078jxfqnv] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.pz-cards[b-4078jxfqnv],
.pz-usage[b-4078jxfqnv],
.pz-presets[b-4078jxfqnv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pz-card[b-4078jxfqnv],
.pz-meter[b-4078jxfqnv],
.pz-preset[b-4078jxfqnv] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.pz-tabs[b-4078jxfqnv] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

[b-4078jxfqnv] .pz-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-4078jxfqnv] .pz-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.pz-head[b-4078jxfqnv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.pz-title-sm[b-4078jxfqnv] {
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s2);
}

.pz-form[b-4078jxfqnv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--mk-s3);
    align-items: end;
}

.pz-label[b-4078jxfqnv] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.pz-check[b-4078jxfqnv] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-sm);
}

.pz-kpis[b-4078jxfqnv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.pz-kpi[b-4078jxfqnv] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    padding: var(--mk-s2) var(--mk-s3);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.pz-kpi span[b-4078jxfqnv] {
    display: block;
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
    font-variant-numeric: tabular-nums;
}

.pz-kpi.is-main[b-4078jxfqnv] {
    border-color: var(--mk-primary-border);
}

.pz-moves[b-4078jxfqnv] {
    margin: var(--mk-s3) 0 0;
    padding-left: var(--mk-s4);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-2);
}

.pz-diff[b-4078jxfqnv] {
    margin: var(--mk-s3) 0 0;
    font-weight: var(--mk-fw-semibold);
}

.pz-diff.is-short[b-4078jxfqnv],
[b-4078jxfqnv] .pz-short {
    color: var(--mk-danger);
}

.pz-toolbar[b-4078jxfqnv] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--mk-s3);
}
/* /Components/Pages/Products/Categories.razor.rz.scp.css */
.cat-page[b-myzxgq1n8v] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.cat-head[b-myzxgq1n8v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.cat-title[b-myzxgq1n8v] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.cat-sub[b-myzxgq1n8v],
.cat-muted[b-myzxgq1n8v] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.cat-sub[b-myzxgq1n8v] {
    margin: var(--mk-s1) 0 0;
}

.cat-grid[b-myzxgq1n8v] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.cat-label[b-myzxgq1n8v] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.cat-check[b-myzxgq1n8v] {
    display: flex;
    gap: var(--mk-s2);
    align-items: center;
}

.cat-actions[b-myzxgq1n8v] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.cat-list[b-myzxgq1n8v] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    background: var(--mk-bg-surface);
    overflow: hidden;
}

.cat-row[b-myzxgq1n8v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s3);
    padding-top: var(--mk-s2);
    padding-bottom: var(--mk-s2);
    padding-right: var(--mk-s4);
    border-top: 1px solid var(--mk-border);
}

.cat-row:first-child[b-myzxgq1n8v] {
    border-top: 0;
}

.cat-row.is-off .cat-name[b-myzxgq1n8v] {
    color: var(--mk-text-muted);
}

.cat-name[b-myzxgq1n8v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    color: var(--mk-text);
}

.cat-chip[b-myzxgq1n8v] {
    font-size: var(--mk-fs-xs);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
    color: var(--mk-text-2);
}

.cat-row-actions[b-myzxgq1n8v] {
    display: flex;
    gap: var(--mk-s1);
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    .cat-grid[b-myzxgq1n8v] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Products/ProductExtraBarcodes.razor.rz.scp.css */
/* Extra barcodes panel — tokens only (docs/css-design-system.md). */

.xb[b-17vvfyosbo] {
    margin-top: var(--mk-s3);
    padding-top: var(--mk-s3);
    border-top: 1px dashed var(--mk-border);
}

.xb-head[b-17vvfyosbo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s2);
}

.xb-hint[b-17vvfyosbo],
.xb-note[b-17vvfyosbo] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.xb-list[b-17vvfyosbo] {
    list-style: none;
    margin: 0 0 var(--mk-s2);
    padding: 0;
}

.xb-list li[b-17vvfyosbo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
}

.xb-list li:last-child[b-17vvfyosbo] { border-bottom: 0; }

.xb-code[b-17vvfyosbo] {
    font-family: var(--mk-font-mono);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-strong);
    overflow-wrap: anywhere;
}

.xb-tag[b-17vvfyosbo] {
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-medium);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    border: 1px solid var(--mk-border-strong);
    color: var(--mk-text);
}

[b-17vvfyosbo] .xb-remove {
    margin-left: auto;
    color: var(--mk-danger-fg);
}

.xb-add[b-17vvfyosbo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

[b-17vvfyosbo] .xb-input { flex: 2 1 10rem; min-width: 0; }
.xb-kind[b-17vvfyosbo],
.xb-size[b-17vvfyosbo]  { flex: 1 1 8rem; min-width: 0; }
[b-17vvfyosbo] .xb-pack  { flex: 0 1 5rem; min-width: 0; }

.xb-error[b-17vvfyosbo] {
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-xs);
    color: var(--mk-danger-fg);
}
/* /Components/Pages/Purchases/GoodsReceiptPage.razor.rz.scp.css */
/* "Read lot, expiry and MRP from the label" on a lot-tracked receipt line. */
.grn-label-photo[b-v8i96znuhk] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-1);
    margin: var(--mk-space-1) 0 0;
    color: var(--mk-financial);
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.grn-label-photo.is-busy[b-v8i96znuhk] {
    opacity: .6;
    pointer-events: none;
}

/* The supplier's bill / challan, captured with the goods. */
.grn-bill-row[b-v8i96znuhk] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--mk-s3); }
@media (max-width: 599.98px) { .grn-bill-row[b-v8i96znuhk] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Pages/Purchases/PurchaseDashboard.razor.rz.scp.css */
/* Purchase dashboard — tokens only (docs/css-design-system.md). */

.pd-filters[b-lpol4vyk0e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.pd-tiles[b-lpol4vyk0e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.pd-tile[b-lpol4vyk0e] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    padding: var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    box-shadow: var(--mk-sh-xs);
    color: var(--mk-text);
    text-decoration: none;
    transition: border-color var(--mk-dur-fast) var(--mk-ease);
}

.pd-tile:hover[b-lpol4vyk0e],
.pd-tile:focus-visible[b-lpol4vyk0e] {
    border-color: var(--mk-border-strong);
    color: var(--mk-text);
}

.pd-tile:focus-visible[b-lpol4vyk0e] {
    outline: none;
    box-shadow: var(--mk-focus-ring);
}

/* Colour only supports the words — every warning tile also says what is wrong. */
.pd-warn[b-lpol4vyk0e] { border-left: 3px solid var(--mk-warning); }
.pd-bad[b-lpol4vyk0e]  { border-left: 3px solid var(--mk-danger); }

.pd-label[b-lpol4vyk0e] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
}

.pd-value[b-lpol4vyk0e] {
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.pd-sub[b-lpol4vyk0e] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.pd-sub-bad[b-lpol4vyk0e] { color: var(--mk-danger-fg); }

.pd-grid[b-lpol4vyk0e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-s3);
}

@media (max-width: 1024.98px) {
    .pd-grid[b-lpol4vyk0e] { grid-template-columns: minmax(0, 1fr); }
}

.pd-card[b-lpol4vyk0e] {
    padding: var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    box-shadow: var(--mk-sh-xs);
}

.pd-card-title[b-lpol4vyk0e] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s3);
}

.pd-legend[b-lpol4vyk0e] {
    display: flex;
    gap: var(--mk-s4);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s2);
}

.pd-swatch[b-lpol4vyk0e] {
    display: inline-block;
    width: var(--mk-s3);
    height: var(--mk-s3);
    border-radius: var(--mk-r-sm);
    margin-right: var(--mk-s1);
    vertical-align: middle;
}

.pd-swatch-p[b-lpol4vyk0e], .pd-bar-p[b-lpol4vyk0e] { background: var(--mk-financial); }
.pd-swatch-e[b-lpol4vyk0e], .pd-bar-e[b-lpol4vyk0e] { background: var(--mk-chart-2); }

.pd-trend[b-lpol4vyk0e],
.pd-rank[b-lpol4vyk0e] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-trend li[b-lpol4vyk0e] {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s1) 0;
}

.pd-trend-label[b-lpol4vyk0e] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

.pd-bars[b-lpol4vyk0e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-bar[b-lpol4vyk0e] {
    display: block;
    height: var(--mk-s2);
    min-width: 2px;
    border-radius: var(--mk-r-sm);
}

.pd-trend-val[b-lpol4vyk0e] {
    font-size: var(--mk-fs-xs);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mk-text);
}

.pd-trend-val small[b-lpol4vyk0e] { color: var(--mk-text-2); }

.pd-rank li[b-lpol4vyk0e] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s3);
    padding: var(--mk-s2) 0;
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-fs-sm);
}

.pd-rank li:last-child[b-lpol4vyk0e] { border-bottom: 0; }

.pd-rank-name[b-lpol4vyk0e] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--mk-text);
}

.pd-rank-name small[b-lpol4vyk0e] {
    display: block;
    color: var(--mk-text-2);
}

.pd-rank-val[b-lpol4vyk0e] {
    font-weight: var(--mk-fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--mk-text-strong);
    white-space: nowrap;
}

.pd-more[b-lpol4vyk0e] {
    display: inline-block;
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-sm);
    color: var(--mk-primary-ink);
}
/* /Components/Pages/Purchases/ScanPurchaseDocument.razor.rz.scp.css */
.sp-card[b-v7wfjqmzpo] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    padding: var(--mk-space-4);
    margin-bottom: var(--mk-space-3);
}

.sp-photo[b-v7wfjqmzpo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mk-space-2);
    min-height: 160px;
    border: 2px dashed var(--mk-border-strong);
    border-radius: var(--mk-radius-lg);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
    margin: 0;
}

.sp-photo:hover[b-v7wfjqmzpo] { background: var(--mk-bg-subtle); }
.sp-photo.is-busy[b-v7wfjqmzpo] { opacity: .6; pointer-events: none; }
.sp-photo-icon[b-v7wfjqmzpo] { font-size: var(--mk-fs-xl); }

.sp-check[b-v7wfjqmzpo] {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2);
    font-size: var(--mk-fs-sm);
    margin: 0;
}

.sp-alert[b-v7wfjqmzpo] {
    background: var(--mk-fin-negative-lt);
    border: 1px solid var(--mk-fin-negative-br);
    color: var(--mk-danger-fg);
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-2) var(--mk-space-3);
    font-size: var(--mk-fs-sm);
}

.sp-warn[b-v7wfjqmzpo] {
    background: var(--mk-warning-lt);
    border: 1px solid var(--mk-warning);
    color: var(--mk-warning-fg);
    border-radius: var(--mk-radius-md);
    padding: var(--mk-space-2) var(--mk-space-3);
    font-size: var(--mk-fs-sm);
    margin-bottom: var(--mk-space-2);
}

.sp-done-title[b-v7wfjqmzpo] {
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-success-fg);
}

.sp-lines td[b-v7wfjqmzpo] { vertical-align: top; }
.sp-excluded[b-v7wfjqmzpo] { opacity: .45; }
.sp-ok[b-v7wfjqmzpo] { color: var(--mk-success-fg); font-weight: var(--mk-fw-bold); }
[b-v7wfjqmzpo] .sp-num { width: 96px; margin-left: auto; }
[b-v7wfjqmzpo] .sp-gst { width: 72px; }
.sp-link[b-v7wfjqmzpo] { color: var(--mk-primary-ink); display: inline-block; margin-top: var(--mk-space-1); }

.sp-problem[b-v7wfjqmzpo] {
    color: var(--mk-warning-fg);
    font-size: var(--mk-fs-sm);
    margin-top: var(--mk-space-1);
}

[b-v7wfjqmzpo] .sp-suggest {
    display: inline-block;
    border: 1px solid var(--mk-border-strong);
    background: var(--mk-bg-subtle);
    color: var(--mk-text);
    border-radius: var(--mk-radius-md);
    padding: 2px var(--mk-space-2);
    margin: 0 var(--mk-space-1) var(--mk-space-1) 0;
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-v7wfjqmzpo] .sp-suggest:hover { border-color: var(--mk-primary); }
/* /Components/Pages/Register/BusinessSetup.razor.rz.scp.css */
.bs-page[b-abb1y4ol2j] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-bg-app);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4) var(--mk-s7);
    box-sizing: border-box;
}

.bs-card[b-abb1y4ol2j] {
    width: 100%;
    max-width: 520px;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-xl);
    box-shadow: var(--mk-sh-lg);
    padding: var(--mk-s6);
}

@media (max-width: 599.98px) {
    .bs-card[b-abb1y4ol2j] { padding: var(--mk-s5) var(--mk-s4); }
}

.bs-pill[b-abb1y4ol2j] {
    display: inline-block;
    margin-bottom: var(--mk-s3);
    padding: 2px var(--mk-s3);
    border-radius: var(--mk-r-pill);
    border: 1px solid var(--mk-fin-positive-br);
    background: var(--mk-fin-positive-lt);
    color: var(--mk-fin-positive-fg);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
}

.bs-title[b-abb1y4ol2j] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-text-strong);
}

.bs-sub[b-abb1y4ol2j] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
}

.bs-field[b-abb1y4ol2j] { margin-bottom: var(--mk-s4); }

.bs-label[b-abb1y4ol2j] {
    display: block;
    margin-bottom: var(--mk-s1);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.bs-req[b-abb1y4ol2j] { color: var(--mk-fin-negative); }
.bs-opt[b-abb1y4ol2j] { font-weight: var(--mk-fw-regular); color: var(--mk-text-muted); }

.bs-hint[b-abb1y4ol2j] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.bs-err[b-abb1y4ol2j] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); color: var(--mk-fin-negative-fg); }

.bs-select[b-abb1y4ol2j] {
    width: 100%;
    min-height: var(--mk-input-h);
    padding: 0 var(--mk-s3);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    font-family: var(--mk-font);
    font-size: var(--mk-t-body);
}
.bs-select:focus-visible[b-abb1y4ol2j] { outline: none; box-shadow: var(--mk-focus-ring); border-color: var(--mk-primary); }

.bs-logo[b-abb1y4ol2j] { display: flex; align-items: center; gap: var(--mk-s4); }

.bs-logo-preview[b-abb1y4ol2j] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    overflow: hidden;
    font-size: var(--mk-t-page-sm);
}
.bs-logo-preview img[b-abb1y4ol2j] { width: 100%; height: 100%; object-fit: contain; }

.bs-logo-actions[b-abb1y4ol2j] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mk-s1); }

.bs-file[b-abb1y4ol2j] {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mk-s4);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-md);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
    cursor: pointer;
}
.bs-file:focus-within[b-abb1y4ol2j] { box-shadow: var(--mk-focus-ring); }

/* The real file input stays in the label's box so keyboard and screen-reader users reach it. */
[b-abb1y4ol2j] .bs-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

[b-abb1y4ol2j] .bs-link, [b-abb1y4ol2j] .bs-skip {
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
    text-decoration: underline;
    cursor: pointer;
}

[b-abb1y4ol2j] .bs-cta { min-height: 44px; margin-top: var(--mk-s2); }

[b-abb1y4ol2j] .bs-skip {
    display: block;
    margin: var(--mk-s3) auto 0;
    min-height: 44px;
    color: var(--mk-text-2);
}
/* /Components/Pages/Register/SetupQuestionsWizard.razor.rz.scp.css */
/* Same card as BusinessSetup.razor.css (the step before), a little wider for the yes/no rows. */
.sw-page[b-zouxdfug6o] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-bg-app);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4) var(--mk-s7);
    box-sizing: border-box;
}

.sw-card[b-zouxdfug6o] {
    width: 100%;
    max-width: 680px;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-xl);
    box-shadow: var(--mk-sh-lg);
    padding: var(--mk-s6);
}

@media (max-width: 599.98px) {
    .sw-page[b-zouxdfug6o] { padding: var(--mk-s4) var(--mk-s3) var(--mk-s6); }
    .sw-card[b-zouxdfug6o] { padding: var(--mk-s5) var(--mk-s4); }
}

.sw-pill[b-zouxdfug6o] {
    display: inline-block;
    margin-bottom: var(--mk-s3);
    padding: 2px var(--mk-s3);
    border-radius: var(--mk-r-pill);
    border: 1px solid var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
}

.sw-title[b-zouxdfug6o] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-text-strong);
}

.sw-sub[b-zouxdfug6o] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
}

.sw-skipped[b-zouxdfug6o] {
    margin-top: var(--mk-s3);
    font-size: var(--mk-t-secondary);
    color: var(--mk-warning-fg);
}

[b-zouxdfug6o] .sw-link, [b-zouxdfug6o] .sw-skip {
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
    text-decoration: underline;
    cursor: pointer;
}

[b-zouxdfug6o] .sw-cta { min-height: 44px; margin-top: var(--mk-s5); }

[b-zouxdfug6o] .sw-skip {
    display: block;
    margin: var(--mk-s3) auto 0;
    min-height: 44px;
    color: var(--mk-text-2);
}
/* /Components/Pages/Register/VerifyAccount.razor.rz.scp.css */
.va-page[b-mwq6lofwwt] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-bg-app);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4) var(--mk-s7);
    box-sizing: border-box;
}

.va-card[b-mwq6lofwwt] {
    width: 100%;
    max-width: 480px;
    background: var(--mk-bg-surface);
    border-radius: var(--mk-r-xl);
    box-shadow: var(--mk-sh-lg);
    padding: var(--mk-s6);
}

@media (max-width: 599.98px) {
    .va-card[b-mwq6lofwwt] { padding: var(--mk-s5) var(--mk-s4); }
}

.va-title[b-mwq6lofwwt] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-extrabold);
    color: var(--mk-text-strong);
    line-height: var(--mk-lh-tight);
}

.va-sub[b-mwq6lofwwt], .va-muted[b-mwq6lofwwt] {
    margin: 0 0 var(--mk-s5);
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
    line-height: var(--mk-lh);
}

.va-channel[b-mwq6lofwwt] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s4);
}
.va-channel.is-verified[b-mwq6lofwwt] { border-color: var(--mk-fin-positive-br); background: var(--mk-fin-positive-lt); }

.va-channel-head[b-mwq6lofwwt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.va-channel-title[b-mwq6lofwwt] {
    margin: 0;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.va-badge-ok[b-mwq6lofwwt] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-fin-positive-fg);
}

.va-dest[b-mwq6lofwwt] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

[b-mwq6lofwwt] .va-link {
    background: none;
    border: 0;
    padding: 0;
    min-height: 24px;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
    text-decoration: underline;
    cursor: pointer;
}
[b-mwq6lofwwt] .va-link:disabled { color: var(--mk-text-muted); cursor: default; }
[b-mwq6lofwwt] .va-link:focus-visible { outline: none; box-shadow: var(--mk-focus-ring); border-radius: var(--mk-r-sm); }

[b-mwq6lofwwt] .va-verify { margin-top: var(--mk-s3); min-height: 44px; }
[b-mwq6lofwwt] .va-cta { min-height: 44px; }

.va-resend[b-mwq6lofwwt] {
    margin: var(--mk-s2) 0 0;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    text-align: center;
}

.va-error[b-mwq6lofwwt] {
    margin: var(--mk-s2) 0 0;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-fin-negative-fg);
}

.va-info[b-mwq6lofwwt] {
    margin: 0 0 var(--mk-s3);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.va-soon[b-mwq6lofwwt] {
    margin: 0 0 var(--mk-s4);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
}

.va-edit[b-mwq6lofwwt] { display: flex; flex-direction: column; gap: var(--mk-s2); }
.va-label[b-mwq6lofwwt] { font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); color: var(--mk-text); }
.va-edit-actions[b-mwq6lofwwt] { display: flex; gap: var(--mk-s2); flex-wrap: wrap; }

.va-footer[b-mwq6lofwwt] {
    margin: var(--mk-s5) 0 0;
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-muted);
    text-align: center;
}

.va-done[b-mwq6lofwwt] { text-align: center; }
.va-done-mark[b-mwq6lofwwt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--mk-s3);
    border-radius: var(--mk-r-pill);
    background: var(--mk-fin-positive);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-t-page);
    font-weight: var(--mk-fw-bold);
}
/* /Components/Pages/Reports/ReportsHub.razor.rz.scp.css */
.reports-hub[b-196q3qcimz] {
    padding: var(--mk-s5);
    max-width: 860px;
}

.rh-head[b-196q3qcimz] {
    margin-bottom: var(--mk-s4);
}

.rh-title[b-196q3qcimz] {
    font-size: var(--mk-t-page-sm);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin: 0;
}

.rh-sub[b-196q3qcimz] {
    font-size: var(--mk-t-body);
    color: var(--mk-text-2);
    margin: var(--mk-s1) 0 0;
}

.rh-centre[b-196q3qcimz] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s8) 0;
}

.rh-empty[b-196q3qcimz] {
    text-align: center;
    padding: var(--mk-s6) var(--mk-s4);
}

.rh-empty i[b-196q3qcimz] {
    font-size: var(--mk-t-hero-sm);
    color: var(--mk-text-muted);
    display: block;
    margin-bottom: var(--mk-s3);
}

/* ── Search ─────────────────────────────────────────────────────────────── */
.rh-search[b-196q3qcimz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.rh-search i[b-196q3qcimz] {
    color: var(--mk-text-muted);
    font-size: var(--mk-t-body);
}

.rh-search[b-196q3qcimz]  input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: var(--mk-s3) 0;
    font-family: var(--mk-font);
    font-size: var(--mk-t-body);
    color: var(--mk-text-strong);
}

[b-196q3qcimz] .rh-search-clear {
    border: 0;
    background: transparent;
    color: var(--mk-text-muted);
    font-size: var(--mk-t-section-sm);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--mk-s1);
}

.rh-noresult[b-196q3qcimz] {
    margin: 0 0 var(--mk-s4);
}

/* ── Folder ─────────────────────────────────────────────────────────────── */
.rh-folder[b-196q3qcimz] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    margin-bottom: var(--mk-s3);
    overflow: hidden;
}

[b-196q3qcimz] .rh-folder-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s4);
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--mk-font);
}

[b-196q3qcimz] .rh-folder-head:hover {
    background: var(--mk-bg-subtle);
}

.rh-chevron[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    width: 12px;
}

.rh-folder-icon[b-196q3qcimz] {
    font-size: var(--mk-t-section-sm);
    color: var(--mk-primary-ink);
}

.rh-folder-title[b-196q3qcimz] {
    flex: 1;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
}

.rh-tag[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-pill);
    padding: 2px var(--mk-s2);
}

.rh-count[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-muted);
    min-width: 1.25rem;
    text-align: center;
}

/* ── Report entries ────────────────────────────────────────────────────── */
.rh-list[b-196q3qcimz] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mk-border);
}

.rh-item[b-196q3qcimz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s4);
    text-decoration: none;
    border-top: 1px solid var(--mk-bg-app);
}

.rh-list li:first-child .rh-item[b-196q3qcimz] {
    border-top: 0;
}

.rh-item:hover[b-196q3qcimz] {
    background: var(--mk-primary-lt);
}

.rh-item-icon[b-196q3qcimz] {
    font-size: var(--mk-t-card-sm);
    color: var(--mk-text-2);
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.rh-item-body[b-196q3qcimz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rh-item-title[b-196q3qcimz] {
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-strong);
}

.rh-item-desc[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
}

.rh-item-go[b-196q3qcimz] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    flex-shrink: 0;
}
/* /Components/Pages/Sales/ChallanReturnDetail.razor.rz.scp.css */
.crd-page[b-gkfetov1ip] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.crd-head[b-gkfetov1ip] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.crd-title[b-gkfetov1ip] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crd-status[b-gkfetov1ip] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.crd-facts[b-gkfetov1ip] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.crd-facts dt[b-gkfetov1ip] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.crd-facts dd[b-gkfetov1ip] {
    margin: 0;
}

.crd-facts a[b-gkfetov1ip] {
    color: var(--mk-primary-ink);
}

.crd-actions[b-gkfetov1ip],
.crd-save[b-gkfetov1ip] {
    display: flex;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.crd-save[b-gkfetov1ip] {
    justify-content: flex-end;
}

.crd-r[b-gkfetov1ip] {
    text-align: right;
}

.crd-lines td[b-gkfetov1ip] {
    vertical-align: middle;
}
/* /Components/Pages/Sales/ChallanReturnNew.razor.rz.scp.css */
.crn-page[b-pc4ajadisx] {
    padding: var(--mk-s4);
    max-width: 900px;
}

.crn-head[b-pc4ajadisx] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.crn-title[b-pc4ajadisx] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crn-grid[b-pc4ajadisx] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s3);
}

.crn-label[b-pc4ajadisx] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.crn-r[b-pc4ajadisx] {
    text-align: right;
}

.crn-lines td[b-pc4ajadisx] {
    vertical-align: middle;
}

[b-pc4ajadisx] .crn-qty {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.crn-save[b-pc4ajadisx] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 599.98px) {
    .crn-grid[b-pc4ajadisx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/ChallanReturns.razor.rz.scp.css */
.crl-page[b-ntxrudiq9n] {
    padding: var(--mk-s4);
}

.crl-head[b-ntxrudiq9n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.crl-title[b-ntxrudiq9n] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.crl-sub[b-ntxrudiq9n] {
    margin: var(--mk-s1) 0 0;
    max-width: 75ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

[b-ntxrudiq9n] .crl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Sales/CounterReturnDetail.razor.rz.scp.css */
.srd-page[b-q0ji71i010] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.srd-head[b-q0ji71i010] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.srd-title[b-q0ji71i010] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srd-status[b-q0ji71i010] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.srd-grid[b-q0ji71i010] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s4);
}

.srd-facts[b-q0ji71i010] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.srd-facts dt[b-q0ji71i010] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.srd-facts dd[b-q0ji71i010] {
    margin: 0;
}

.srd-facts a[b-q0ji71i010] {
    color: var(--mk-primary-ink);
}

.srd-sum[b-q0ji71i010] {
    display: flex;
    justify-content: space-between;
    padding: var(--mk-s1) 0;
    font-variant-numeric: tabular-nums;
    color: var(--mk-text-2);
}

.srd-total[b-q0ji71i010] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.srd-note[b-q0ji71i010] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.srd-actions[b-q0ji71i010] {
    display: flex;
    gap: var(--mk-s2);
}

@media (max-width: 1024.98px) {
    .srd-grid[b-q0ji71i010] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/CounterReturnNew.razor.rz.scp.css */
.rt-page[b-z00643naxt] {
    padding: var(--mk-s4);
    max-width: 1100px;
}

.rt-head[b-z00643naxt] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.rt-title[b-z00643naxt] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.rt-muted[b-z00643naxt] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.rt-label[b-z00643naxt] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.rt-num[b-z00643naxt] {
    font-variant-numeric: tabular-nums;
}

.rt-r[b-z00643naxt] {
    text-align: right;
}

.rt-find[b-z00643naxt] {
    display: flex;
    gap: var(--mk-s2);
}

.rt-find[b-z00643naxt]  .w-full {
    flex: 1;
}

.rt-results[b-z00643naxt] {
    display: flex;
    flex-direction: column;
    margin-top: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    overflow: hidden;
}

[b-z00643naxt] .rt-result {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr auto;
    gap: var(--mk-s3);
    padding: var(--mk-s2) var(--mk-s3);
    border: 0;
    border-top: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    text-align: left;
    cursor: pointer;
}

[b-z00643naxt] .rt-result:first-child {
    border-top: 0;
}

[b-z00643naxt] .rt-result:hover,
[b-z00643naxt] .rt-result:focus-visible {
    background: var(--mk-bg-hover);
}

.rt-result-no[b-z00643naxt],
.rt-bill-no[b-z00643naxt] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}

.rt-bill[b-z00643naxt] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.rt-bill-figs[b-z00643naxt] {
    display: flex;
    gap: var(--mk-s4);
    color: var(--mk-text-2);
    font-size: var(--mk-fs-sm);
}

.rt-lines td[b-z00643naxt] {
    vertical-align: middle;
}

[b-z00643naxt] .rt-qty {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.rt-done-line td[b-z00643naxt] {
    color: var(--mk-text-muted);
}

.rt-grid[b-z00643naxt] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--mk-s4);
}

.rt-methods[b-z00643naxt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

.rt-method[b-z00643naxt] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    cursor: pointer;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text);
}

.rt-method.is-on[b-z00643naxt] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
}

.rt-sum[b-z00643naxt] {
    display: flex;
    justify-content: space-between;
    padding: var(--mk-s1) 0;
    color: var(--mk-text-2);
}

.rt-sum-strong[b-z00643naxt] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.rt-note[b-z00643naxt] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
    margin: var(--mk-s2) 0 0;
}

.rt-done-title[b-z00643naxt] {
    font-size: var(--mk-fs-lg);
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s2);
}

.rt-settle[b-z00643naxt] {
    margin: 0 0 var(--mk-s3);
    padding-left: var(--mk-s5);
    color: var(--mk-text-2);
}

.rt-actions[b-z00643naxt] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

@media (max-width: 1024.98px) {
    .rt-grid[b-z00643naxt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599.98px) {
    .rt-result[b-z00643naxt] {
        grid-template-columns: 1fr auto;
    }
}
/* /Components/Pages/Sales/CounterReturns.razor.rz.scp.css */
.srl-page[b-vm56au7ato] {
    padding: var(--mk-s4);
}

.srl-head[b-vm56au7ato] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.srl-title[b-vm56au7ato] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srl-sub[b-vm56au7ato] {
    margin: var(--mk-s1) 0 0;
    max-width: 70ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.srl-loading[b-vm56au7ato] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s7) 0;
}

[b-vm56au7ato] .srl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

[b-vm56au7ato] .srl-status {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    border: 1px solid var(--mk-border-strong);
    color: var(--mk-text);
    white-space: nowrap;
}

[b-vm56au7ato] .srl-wait {
    border-color: var(--mk-warning);
    color: var(--mk-warning-fg);
}

[b-vm56au7ato] .srl-ok {
    border-color: var(--mk-success);
    color: var(--mk-success-fg);
}

[b-vm56au7ato] .srl-off {
    color: var(--mk-text-muted);
}

[b-vm56au7ato] .srl-actions {
    display: flex;
    gap: var(--mk-s1);
    justify-content: flex-end;
}
/* /Components/Pages/Sales/DeliveryChallanDetail.razor.rz.scp.css */
.dcd-page[b-urhp0h7zqx] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.dcd-head[b-urhp0h7zqx] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.dcd-head-right[b-urhp0h7zqx] {
    margin-left: auto;
}

.dcd-title[b-urhp0h7zqx] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcd-status[b-urhp0h7zqx] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.dcd-facts[b-urhp0h7zqx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--mk-s2) var(--mk-s4);
    margin: 0;
}

.dcd-facts dt[b-urhp0h7zqx] {
    color: var(--mk-text-muted);
    font-weight: var(--mk-fw-regular);
}

.dcd-facts dd[b-urhp0h7zqx] {
    margin: 0;
}

.dcd-facts a[b-urhp0h7zqx] {
    color: var(--mk-primary-ink);
}

.dcd-pack[b-urhp0h7zqx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

.dcd-actions[b-urhp0h7zqx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

@media (max-width: 599.98px) {
    .dcd-pack[b-urhp0h7zqx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/DeliveryChallanNew.razor.rz.scp.css */
.dcn-page[b-xuku7tf7pi] {
    padding: var(--mk-s4);
    max-width: 960px;
}

.dcn-head[b-xuku7tf7pi] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.dcn-title[b-xuku7tf7pi] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcn-grid[b-xuku7tf7pi] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--mk-s3);
}

.dcn-label[b-xuku7tf7pi] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.dcn-r[b-xuku7tf7pi] {
    text-align: right;
}

.dcn-lines td[b-xuku7tf7pi] {
    vertical-align: middle;
}

[b-xuku7tf7pi] .dcn-qty {
    width: 96px;
    margin-left: auto;
    text-align: right;
}

.dcn-muted[b-xuku7tf7pi] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.dcn-save[b-xuku7tf7pi] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s3);
}

@media (max-width: 599.98px) {
    .dcn-grid[b-xuku7tf7pi] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/DeliveryChallans.razor.rz.scp.css */
.dcl-page[b-3icyflih8l] {
    padding: var(--mk-s4);
}

.dcl-head[b-3icyflih8l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.dcl-title[b-3icyflih8l] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.dcl-sub[b-3icyflih8l] {
    margin: var(--mk-s1) 0 0;
    max-width: 70ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.dcl-loading[b-3icyflih8l] {
    display: flex;
    justify-content: center;
    padding: var(--mk-s7) 0;
}

[b-3icyflih8l] .dcl-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Sales/SalesOrderBill.razor.rz.scp.css */
.sob-page[b-yb69dpoxfu] {
    padding: var(--mk-s4);
    max-width: 960px;
}

.sob-head[b-yb69dpoxfu] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
}

.sob-title[b-yb69dpoxfu] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.sob-muted[b-yb69dpoxfu] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
    max-width: 75ch;
}

.sob-sum[b-yb69dpoxfu] {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--mk-s4);
}

.sob-pay[b-yb69dpoxfu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.sob-label[b-yb69dpoxfu] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.sob-save[b-yb69dpoxfu] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s4);
}

@media (max-width: 599.98px) {
    .sob-pay[b-yb69dpoxfu] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Sales/SalesOrderDetail.razor.rz.scp.css */
.sod-page[b-lj9vvr2hsf] {
    padding: var(--mk-s4);
    max-width: 1100px;
}

.sod-head[b-lj9vvr2hsf] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.sod-title[b-lj9vvr2hsf] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.sod-status[b-lj9vvr2hsf] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    padding: 0 var(--mk-s2);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.sod-top[b-lj9vvr2hsf] {
    display: flex;
    justify-content: space-between;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.sod-cust[b-lj9vvr2hsf] {
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-fs-lg);
}

.sod-muted[b-lj9vvr2hsf] {
    color: var(--mk-text-muted);
    font-size: var(--mk-fs-sm);
}

.sod-total[b-lj9vvr2hsf] {
    font-size: var(--mk-fs-xl);
    font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}

.sod-actions[b-lj9vvr2hsf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-lj9vvr2hsf] .sod-link {
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}
/* /Components/Pages/Settings/BranchesSettings.razor.rz.scp.css */
.br-head[b-5oi2ac6dyc] {
    margin-bottom: var(--mk-s4);
}

.br-title[b-5oi2ac6dyc] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.br-sub[b-5oi2ac6dyc] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.br-section[b-5oi2ac6dyc] {
    margin-bottom: var(--mk-s6);
}

.br-section-head[b-5oi2ac6dyc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    flex-wrap: wrap;
}

.br-section-title[b-5oi2ac6dyc] {
    margin: 0;
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.br-hint[b-5oi2ac6dyc] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.br-hint a[b-5oi2ac6dyc] {
    color: var(--mk-primary-ink);
}

.br-grid[b-5oi2ac6dyc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.br-label[b-5oi2ac6dyc] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin-bottom: var(--mk-s1);
}

.br-checks[b-5oi2ac6dyc] {
    display: flex;
    gap: var(--mk-s4);
    flex-wrap: wrap;
}

.br-check[b-5oi2ac6dyc] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-fs-sm);
}

.br-actions[b-5oi2ac6dyc] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-5oi2ac6dyc] .br-tag {
    display: inline-block;
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-size: var(--mk-fs-xs);
}

@media (max-width: 599.98px) {
    .br-grid[b-5oi2ac6dyc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/FeaturesSettings.razor.rz.scp.css */
.ft-head[b-eyrwo8ouhu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.ft-title[b-eyrwo8ouhu] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ft-sub[b-eyrwo8ouhu] {
    margin: var(--mk-s1) 0 0;
    max-width: 60ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ft-search[b-eyrwo8ouhu] {
    min-width: 240px;
    flex: 0 1 320px;
}

.ft-chips[b-eyrwo8ouhu] {
    display: flex;
    gap: var(--mk-s2);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.ft-chip[b-eyrwo8ouhu] {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

.ft-chip.is-on[b-eyrwo8ouhu] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.ft-group[b-eyrwo8ouhu] {
    margin-bottom: var(--mk-s5);
}

.ft-group-title[b-eyrwo8ouhu] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
    margin: 0 0 var(--mk-s2);
}

.ft-list[b-eyrwo8ouhu] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-card);
    background: var(--mk-bg-surface);
    overflow: hidden;
}

.ft-row[b-eyrwo8ouhu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border-top: 1px solid var(--mk-border);
}

.ft-row:first-child[b-eyrwo8ouhu] {
    border-top: 0;
}

.ft-row.is-child[b-eyrwo8ouhu] {
    padding-left: var(--mk-s7);
}

.ft-text[b-eyrwo8ouhu] {
    min-width: 0;
}

.ft-name[b-eyrwo8ouhu] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.ft-desc[b-eyrwo8ouhu],
.ft-note[b-eyrwo8ouhu] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
    margin-top: 2px;
}

.ft-note a[b-eyrwo8ouhu] {
    color: var(--mk-primary-ink);
}

.ft-actions[b-eyrwo8ouhu] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    flex-shrink: 0;
}

.ft-always[b-eyrwo8ouhu] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ft-empty[b-eyrwo8ouhu] {
    color: var(--mk-text-muted);
}

@media (max-width: 599.98px) {
    .ft-search[b-eyrwo8ouhu] {
        flex-basis: 100%;
    }

    .ft-row.is-child[b-eyrwo8ouhu] {
        padding-left: var(--mk-s5);
    }
}

.ft-setup-link[b-eyrwo8ouhu] {
    align-self: center;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-primary-ink);
}

.feature-accordion-heading[b-eyrwo8ouhu]{margin:0 0 8px;font-size:inherit}
[b-eyrwo8ouhu] .feature-accordion-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--mk-border);border-radius:var(--mk-r-md);background:var(--mk-bg-surface);color:var(--mk-text);text-align:left;font:inherit;font-weight:600;cursor:pointer}
[b-eyrwo8ouhu] .feature-accordion-toggle[aria-expanded="true"]{background:var(--mk-primary-soft);color:var(--mk-primary-ink)}
[b-eyrwo8ouhu] .feature-accordion-toggle:focus-visible{outline:2px solid var(--mk-primary-ink);outline-offset:3px}
.feature-accordion-count[b-eyrwo8ouhu]{margin-left:auto;font-size:.85em;font-weight:400}
[hidden][b-eyrwo8ouhu]{display:none!important}

/* /Components/Pages/Settings/NotificationRules.razor.rz.scp.css */
.nr-head[b-7uuh3bhzi9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--mk-s4);
    margin-bottom: var(--mk-s4);
    flex-wrap: wrap;
}

.nr-title[b-7uuh3bhzi9] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.nr-sub[b-7uuh3bhzi9] {
    margin: var(--mk-s1) 0 0;
    max-width: 64ch;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.nr-tabs[b-7uuh3bhzi9] {
    display: flex;
    gap: var(--mk-s2);
}

[b-7uuh3bhzi9] .nr-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-7uuh3bhzi9] .nr-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

.nr-event[b-7uuh3bhzi9] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s4);
    margin-bottom: var(--mk-s3);
}

.nr-event.is-off[b-7uuh3bhzi9] {
    opacity: 0.7;
}

.nr-event-name[b-7uuh3bhzi9] {
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    flex-wrap: wrap;
}

.nr-aud[b-7uuh3bhzi9],
.nr-custom[b-7uuh3bhzi9] {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-medium);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
}

.nr-event-desc[b-7uuh3bhzi9] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
    margin-top: var(--mk-s1);
}

.nr-note[b-7uuh3bhzi9],
.nr-blocked[b-7uuh3bhzi9] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
    margin-top: var(--mk-s1);
}

.nr-note a[b-7uuh3bhzi9] {
    color: var(--mk-primary-ink);
}

.nr-channels[b-7uuh3bhzi9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
}

.nr-channel[b-7uuh3bhzi9] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s2) var(--mk-s3);
}

.nr-channel-row[b-7uuh3bhzi9] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
}

.nr-channel-name[b-7uuh3bhzi9] {
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
}

.nr-spacer[b-7uuh3bhzi9] {
    flex: 1;
}

.nr-editor[b-7uuh3bhzi9] {
    margin-top: var(--mk-s3);
    padding-top: var(--mk-s3);
    border-top: 1px solid var(--mk-border);
}

.nr-editor-title[b-7uuh3bhzi9] {
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-fs-sm);
    margin-bottom: var(--mk-s2);
}

.nr-label[b-7uuh3bhzi9] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    margin: var(--mk-s2) 0 var(--mk-s1);
}

.nr-placeholders[b-7uuh3bhzi9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s1);
    margin-top: var(--mk-s2);
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

[b-7uuh3bhzi9] .nr-ph {
    border: 1px dashed var(--mk-border-strong, var(--mk-border));
    background: transparent;
    color: var(--mk-text-2);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    cursor: pointer;
}

.nr-preview[b-7uuh3bhzi9] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.nr-preview-subject[b-7uuh3bhzi9] {
    font-weight: var(--mk-fw-semibold);
    margin-bottom: var(--mk-s1);
}

.nr-preview-body[b-7uuh3bhzi9] {
    white-space: pre-wrap;
}

.nr-actions[b-7uuh3bhzi9] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-top: var(--mk-s3);
    flex-wrap: wrap;
}

[b-7uuh3bhzi9] .nr-status {
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
}

[b-7uuh3bhzi9] .nr-status-sent {
    color: var(--mk-success-fg, var(--mk-success));
}

[b-7uuh3bhzi9] .nr-status-skipped {
    color: var(--mk-text-muted);
}

[b-7uuh3bhzi9] .nr-status-failed {
    color: var(--mk-danger);
}

[b-7uuh3bhzi9] .nr-log-body {
    display: inline-block;
    max-width: 48ch;
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-2);
}

@media (max-width: 599.98px) {
    .nr-channels[b-7uuh3bhzi9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/PlanAndScale.razor.rz.scp.css */
.ps-head[b-ivo432389d] {
    margin-bottom: var(--mk-s4);
}

.ps-title[b-ivo432389d] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ps-sub[b-ivo432389d] {
    margin: var(--mk-s1) 0 var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ps-section[b-ivo432389d] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.ps-cards[b-ivo432389d],
.ps-usage[b-ivo432389d],
.ps-presets[b-ivo432389d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mk-s3);
}

.ps-card[b-ivo432389d],
.ps-meter[b-ivo432389d],
.ps-preset[b-ivo432389d] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.ps-label[b-ivo432389d] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-text-muted);
}

.ps-value[b-ivo432389d] {
    font-size: var(--mk-fs-lg, var(--mk-fs-md));
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.ps-warn[b-ivo432389d],
.ps-meter-note[b-ivo432389d] {
    margin-top: var(--mk-s1);
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
}

.ps-meter-top[b-ivo432389d] {
    display: flex;
    justify-content: space-between;
    font-size: var(--mk-fs-sm);
    font-variant-numeric: tabular-nums;
}

.ps-bar[b-ivo432389d] {
    height: 6px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-bg-subtle);
    margin-top: var(--mk-s2);
    overflow: hidden;
}

.ps-bar span[b-ivo432389d] {
    display: block;
    height: 100%;
    background: var(--mk-financial, var(--mk-primary));
}

.ps-meter.is-near .ps-bar span[b-ivo432389d] {
    background: var(--mk-warning);
}

.ps-meter.is-at .ps-bar span[b-ivo432389d],
.ps-meter.is-over .ps-bar span[b-ivo432389d] {
    background: var(--mk-danger-solid);
}

.ps-preset[b-ivo432389d] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    align-items: flex-start;
}

.ps-preset.is-on[b-ivo432389d] {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
}

.ps-preset-name[b-ivo432389d] {
    font-weight: var(--mk-fw-semibold);
}

.ps-preset-desc[b-ivo432389d],
.ps-preset-plan[b-ivo432389d] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.ps-result[b-ivo432389d] {
    margin-top: var(--mk-s3);
    padding: var(--mk-s3);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-fs-sm);
}

.ps-result a[b-ivo432389d] {
    color: var(--mk-primary-ink);
}

.ps-scroll[b-ivo432389d] {
    overflow-x: auto;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.ps-table[b-ivo432389d] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mk-fs-sm);
}

.ps-table th[b-ivo432389d],
.ps-table td[b-ivo432389d] {
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    text-align: center;
    white-space: nowrap;
}

.ps-table th[b-ivo432389d] {
    background: var(--mk-bg-subtle);
    font-weight: var(--mk-fw-semibold);
}

.ps-table th.is-current[b-ivo432389d] {
    color: var(--mk-primary-ink);
}

.ps-first[b-ivo432389d] {
    text-align: left !important;
    position: sticky;
    left: 0;
    background: var(--mk-bg-surface);
}

th.ps-first[b-ivo432389d] {
    background: var(--mk-bg-subtle);
}

.ps-num[b-ivo432389d] {
    font-variant-numeric: tabular-nums;
}

.ps-chip[b-ivo432389d] {
    margin-left: var(--mk-s1);
    padding: 0 var(--mk-s2);
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-size: var(--mk-fs-xs);
}
/* /Components/Pages/Settings/PrintTemplates.razor.rz.scp.css */
.pt-page[b-7y4hiexn2p] {
    padding: var(--mk-s4);
    max-width: 1000px;
}

.pt-head[b-7y4hiexn2p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mk-s3);
    flex-wrap: wrap;
    margin-bottom: var(--mk-s4);
}

.pt-title[b-7y4hiexn2p] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.pt-sub[b-7y4hiexn2p] {
    margin: var(--mk-s1) 0 0;
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.pt-grid[b-7y4hiexn2p] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mk-s3);
}

.pt-label[b-7y4hiexn2p] {
    display: block;
    font-size: var(--mk-fs-sm);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-2);
    margin-bottom: var(--mk-s1);
}

.pt-toggles[b-7y4hiexn2p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mk-s2) var(--mk-s4);
    margin: var(--mk-s4) 0;
    color: var(--mk-text);
}

.pt-toggles label[b-7y4hiexn2p] {
    display: flex;
    gap: var(--mk-s2);
    align-items: center;
}

.pt-actions[b-7y4hiexn2p] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}

[b-7y4hiexn2p] .pt-row-actions {
    display: flex;
    gap: var(--mk-s1);
    justify-content: flex-end;
}

@media (max-width: 1024.98px) {
    .pt-grid[b-7y4hiexn2p],
    .pt-toggles[b-7y4hiexn2p] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 599.98px) {
    .pt-grid[b-7y4hiexn2p],
    .pt-toggles[b-7y4hiexn2p] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/RegionsSettings.razor.rz.scp.css */
.rg-head[b-elk706jhrc] {
    margin-bottom: var(--mk-s4);
}

.rg-title[b-elk706jhrc] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.rg-sub[b-elk706jhrc],
.rg-muted[b-elk706jhrc] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.rg-sub[b-elk706jhrc] {
    margin: var(--mk-s1) 0 0;
}

.rg-section[b-elk706jhrc] {
    margin: var(--mk-s5) 0 var(--mk-s2);
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.rg-add[b-elk706jhrc] {
    display: flex;
    gap: var(--mk-s2);
    max-width: 480px;
    margin-bottom: var(--mk-s3);
}

.rg-regions[b-elk706jhrc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--mk-s3);
}

.rg-region[b-elk706jhrc],
.rg-card[b-elk706jhrc] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    padding: var(--mk-s3) var(--mk-s4);
}

.rg-region-name[b-elk706jhrc] {
    font-weight: var(--mk-fw-semibold);
}

.rg-cluster[b-elk706jhrc] {
    font-size: var(--mk-fs-sm);
    padding: var(--mk-s1) 0;
    border-bottom: 1px solid var(--mk-border);
}

.rg-row[b-elk706jhrc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--mk-s3);
    align-items: center;
    padding: var(--mk-s2) 0;
    border-bottom: 1px solid var(--mk-border);
}

.rg-row:last-child[b-elk706jhrc] {
    border-bottom: 0;
}

.rg-branch[b-elk706jhrc] {
    font-weight: var(--mk-fw-medium);
}

.rg-tabs[b-elk706jhrc] {
    display: flex;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
}

[b-elk706jhrc] .rg-tab {
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-pill);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-elk706jhrc] .rg-tab.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

@media (max-width: 599.98px) {
    .rg-row[b-elk706jhrc] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings/SalesReturnSettings.razor.rz.scp.css */
.srs-page[b-hf6tjhf0cd] {
    padding: var(--mk-s4);
    max-width: 760px;
}

.srs-head[b-hf6tjhf0cd] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.srs-title[b-hf6tjhf0cd] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
}

.srs-row[b-hf6tjhf0cd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) 0;
    border-top: 1px solid var(--mk-border);
}

.srs-row:first-child[b-hf6tjhf0cd] {
    border-top: 0;
}

.srs-child[b-hf6tjhf0cd] {
    padding-left: var(--mk-s5);
}

.srs-name[b-hf6tjhf0cd] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.srs-desc[b-hf6tjhf0cd] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

[b-hf6tjhf0cd] .srs-num {
    width: 120px;
    text-align: right;
}

.srs-group[b-hf6tjhf0cd] {
    margin: var(--mk-s4) 0 0;
    font-size: var(--mk-fs-xs);
    font-weight: var(--mk-fw-semibold);
    letter-spacing: var(--mk-ls-label);
    text-transform: uppercase;
    color: var(--mk-text-muted);
}

.srs-save[b-hf6tjhf0cd] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mk-s4);
}
/* /Components/Pages/Settings/SetupQuestions.razor.rz.scp.css */
/* article.content has no padding on desktop — each page brings its own (spec §6.1: 24px). */
.sq-page[b-1tt5aggu81] {
    max-width: 760px;
    padding: var(--mk-s5);
}

@media (max-width: 599.98px) {
    .sq-page[b-1tt5aggu81] { padding: var(--mk-s4); }
}

.sq-title[b-1tt5aggu81] {
    margin: 0;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong, var(--mk-text));
}

.sq-sub[b-1tt5aggu81] {
    margin: var(--mk-s1) 0 var(--mk-s4);
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sq-sub a[b-1tt5aggu81] {
    color: var(--mk-primary-ink);
}

.sq-skipped[b-1tt5aggu81] {
    margin-top: var(--mk-s3);
    font-size: var(--mk-fs-sm);
    color: var(--mk-warning-fg);
}

.sq-actions[b-1tt5aggu81] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
    margin-top: var(--mk-s4);
}
/* /Components/Pages/Website/DeleteAccount.razor.rz.scp.css */
.deletion-page[b-bfghwbkqh6] { max-width: 860px; margin: 0 auto; padding: 64px 24px; color: #1e293b; }
.eyebrow[b-bfghwbkqh6] { color: var(--brand-ink); font-weight: 700; }
h1[b-bfghwbkqh6] { font-size: clamp(28px, 5vw, 44px); line-height: 1.2; margin: 12px 0 20px; }
h2[b-bfghwbkqh6] { font-size: 22px; margin-bottom: 14px; }
p[b-bfghwbkqh6], li[b-bfghwbkqh6] { line-height: 1.8; margin-bottom: 12px; }
section[b-bfghwbkqh6] { margin-top: 36px; }
ol[b-bfghwbkqh6] { padding-left: 24px; }
a[b-bfghwbkqh6] { color: var(--brand-ink); overflow-wrap: anywhere; text-decoration: underline; }
.request-card[b-bfghwbkqh6] { padding: 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; }
.request-button[b-bfghwbkqh6] { display: inline-block; background: var(--brand); color: white; padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; margin: 8px 0 16px; }
a:focus-visible[b-bfghwbkqh6] { outline: 3px solid #0f172a; outline-offset: 4px; }
.hint[b-bfghwbkqh6] { font-size: 14px; color: #475569; }
@media (max-width: 540px) { .deletion-page[b-bfghwbkqh6] { padding: 40px 16px; } .request-card[b-bfghwbkqh6] { padding: 18px; } }
/* /Components/Pages/Website/PricingPlans.razor.rz.scp.css */
/* One pricing card per audience, with the billing period switched inside it.

   Colours are the marketing site's theme-fixed --mk-site-* tokens (design-tokens.css §15),
   not the app's theme-reactive --mk-* surfaces: the site is deliberately light, and a card
   wired to --mk-success-fg once rendered "Save 16%" at ~1.6:1 when a signed-in visitor's
   .dark class flipped the ink but not the white card beneath it. */

.pp-toggle-wrap[b-xx0ysq92yj] { text-align: center; margin-top: 36px; }

.pp-toggle[b-xx0ysq92yj] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--mk-site-r-pill);
    background: var(--mk-site-paper-alt);
    border: 1px solid var(--mk-site-border);
}

[b-xx0ysq92yj] .pp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 22px;
    border-radius: var(--mk-site-r-pill);
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-muted);
    transition: background var(--mk-site-m-fast) ease, color var(--mk-site-m-fast) ease;
}

[b-xx0ysq92yj] .pp-toggle-btn:hover { color: var(--mk-site-ink); }

[b-xx0ysq92yj] .pp-toggle-btn.is-on {
    background: var(--mk-site-ink);
    color: var(--mk-site-on-ink);
}

.pp-card[b-xx0ysq92yj] {
    max-width: 520px;
    margin: 32px auto 0;
    background: var(--mk-site-surface);
    border: 1.5px solid var(--mk-site-ink);
    border-radius: var(--mk-site-r-lg);
    padding: 36px 32px 32px;
    box-shadow: var(--mk-site-sh-md);
}

.pp-name[b-xx0ysq92yj] {
    font-size: var(--mk-site-h4);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-site-ink);
}

.pp-track-label[b-xx0ysq92yj] {
    margin-top: 4px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-dur[b-xx0ysq92yj] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    margin: 24px 0 26px;
    padding: 4px;
    border-radius: var(--mk-site-r-btn);
    background: var(--mk-site-paper-alt);
    border: 1px solid var(--mk-site-border);
}

[b-xx0ysq92yj] .pp-dur-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--mk-site-r-sm);
    background: transparent;
    cursor: pointer;
    font-family: var(--mk-site-font);
    font-size: var(--mk-site-small);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-muted);
    transition: background var(--mk-site-m-fast) ease, color var(--mk-site-m-fast) ease, box-shadow var(--mk-site-m-fast) ease;
}

[b-xx0ysq92yj] .pp-dur-btn:hover { color: var(--mk-site-ink); }

[b-xx0ysq92yj] .pp-dur-btn.is-on {
    background: var(--mk-site-surface);
    color: var(--mk-site-ink);
    box-shadow: var(--mk-site-sh-sm);
}

.pp-best[b-xx0ysq92yj] {
    font-size: 0.6875rem;
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-site-success);
}

.pp-amount[b-xx0ysq92yj] {
    font-size: 3rem;
    font-weight: var(--mk-fw-bold);
    color: var(--mk-site-ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pp-amount span[b-xx0ysq92yj] {
    font-size: var(--mk-site-body);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-site-muted);
    letter-spacing: 0;
}

.pp-sub[b-xx0ysq92yj] { font-size: var(--mk-site-small); margin: 10px 0 24px; min-height: 20px; color: var(--mk-site-muted); }

.pp-save[b-xx0ysq92yj] {
    color: var(--mk-site-success);
    font-weight: var(--mk-fw-semibold);
}

.pp-list[b-xx0ysq92yj] {
    list-style: none;
    margin: 0 0 28px;
    padding: 20px 0 0;
    border-top: 1px dashed var(--mk-site-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.pp-list li[b-xx0ysq92yj] {
    font-size: var(--mk-site-small);
    color: var(--mk-site-text);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.pp-list li .bi[b-xx0ysq92yj] {
    color: var(--mk-site-success);
    flex-shrink: 0;
    margin-top: 1px;
}

.pp-cta[b-xx0ysq92yj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mk-site-btn-h);
    border-radius: var(--mk-site-r-btn);
    background: var(--mk-site-cta);
    color: var(--mk-site-on-ink);
    font-weight: var(--mk-fw-semibold);
    font-size: var(--mk-site-body);
    text-decoration: none;
    transition: background var(--mk-site-m-fast) ease;
}

.pp-cta:hover[b-xx0ysq92yj] { background: var(--mk-site-cta-hover); color: var(--mk-site-on-ink); }

[b-xx0ysq92yj] .pp-toggle-btn:focus-visible,
[b-xx0ysq92yj] .pp-dur-btn:focus-visible,
.pp-cta:focus-visible[b-xx0ysq92yj] {
    outline: none;
    box-shadow: var(--mk-site-cta-ring);
}

.pp-foot[b-xx0ysq92yj] {
    text-align: center;
    margin-top: 20px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-loading[b-xx0ysq92yj], .pp-error[b-xx0ysq92yj] {
    text-align: center;
    margin-top: 36px;
    font-size: var(--mk-site-small);
    color: var(--mk-site-muted);
}

.pp-error[b-xx0ysq92yj] { color: var(--mk-site-red); }

/* Breakpoints are 600 / 1025 / 1441 with .98 maxima — literals because CSS forbids
   custom properties inside @media. */
@media (max-width: 599.98px) {
    .pp-toggle[b-xx0ysq92yj] { display: flex; width: 100%; }
    [b-xx0ysq92yj] .pp-toggle-btn { flex: 1; justify-content: center; padding: 0 10px; }
    .pp-card[b-xx0ysq92yj] { padding: 28px 20px 22px; }
    .pp-amount[b-xx0ysq92yj] { font-size: 2.5rem; }
    .pp-list[b-xx0ysq92yj] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
/* Welcome — tokens only. Sits on the hero gradient, like the onboarding flow it leads into,
   so signing up reads as one continuous surface rather than three different products. */

.wp[b-fuq4qz07y1] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mk-hero-bg);
    color: var(--mk-hero-fg);
    font-family: var(--mk-font);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mk-s6) var(--mk-s4);
}

.wp-inner[b-fuq4qz07y1] {
    width: 100%;
    max-width: 460px;
}

/* ---------- Brand ---------- */

.wp-brand[b-fuq4qz07y1] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s8);
}

.wp-brand__mark[b-fuq4qz07y1] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
}

.wp-brand__name[b-fuq4qz07y1] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    letter-spacing: var(--mk-ls-tight);
}

.wp-brand__360[b-fuq4qz07y1] {
    color:var(--mk-primary-ink);
}

/* ---------- Headline ---------- */

.wp-title[b-fuq4qz07y1] {
    margin: 0 0 var(--mk-s4);
    font-size: var(--mk-t-hero-sm);
    font-weight: var(--mk-fw-extrabold);
    line-height: 1.15;
    letter-spacing: var(--mk-ls-tight);
}

.wp-title__accent[b-fuq4qz07y1] {
    color:var(--mk-primary-ink);
}

.wp-sub[b-fuq4qz07y1] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-card-sm);
    line-height: 1.5;
    color: var(--mk-hero-fg-2);
}

.wp-sub--hi[b-fuq4qz07y1] {
    margin-bottom: var(--mk-s6);
    font-size: var(--mk-t-body);
}

/* ---------- Value props ---------- */

.wp-points[b-fuq4qz07y1] {
    list-style: none;
    margin: 0 0 var(--mk-s8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
}

.wp-point[b-fuq4qz07y1] {
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    font-size: var(--mk-t-body);
    color: var(--mk-hero-fg);
}

.wp-point__icon[b-fuq4qz07y1] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-hero-fill);
    border: 1px solid var(--mk-hero-line);
    font-size: var(--mk-t-secondary);
}

/* ---------- Actions ---------- */

.wp-actions[b-fuq4qz07y1] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s6);
}

.wp-btn[b-fuq4qz07y1] {
    display: block;
    padding: var(--mk-s4);
    border-radius: var(--mk-r-md);
    text-align: center;
    text-decoration: none;
    font-size: var(--mk-t-card-sm);
    font-weight: var(--mk-fw-bold);
    transition: opacity var(--mk-t-fast), border-color var(--mk-t-fast);
}

.wp-btn--primary[b-fuq4qz07y1] {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
}

.wp-btn--primary:hover[b-fuq4qz07y1] {
    opacity: .9;
    color: var(--mk-text-oncolor);
}

.wp-btn--ghost[b-fuq4qz07y1] {
    background: transparent;
    border: 1.5px solid var(--mk-hero-line);
    color: var(--mk-hero-fg);
}

.wp-btn--ghost:hover[b-fuq4qz07y1] {
    border-color: var(--mk-primary);
    color: var(--mk-hero-fg);
}

/* ---------- Language ---------- */

.wp-lang[b-fuq4qz07y1] {
    display: block;
    text-align: center;
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg-2);
    text-decoration: none;
}

.wp-lang:hover[b-fuq4qz07y1] {
    color:var(--mk-primary-ink);
}

@media (max-width: 599.98px) {

    .wp[b-fuq4qz07y1] {
        padding: var(--mk-s5) var(--mk-s4);
        align-items: flex-start;
    }

    .wp-brand[b-fuq4qz07y1] {
        margin-bottom: var(--mk-s6);
    }

    .wp-title[b-fuq4qz07y1] {
        font-size: var(--mk-t-section);
    }
}

@media (prefers-reduced-motion: reduce) {

    .wp-btn[b-fuq4qz07y1] {
        transition: none;
    }
}
/* /Components/Shared/AgriAlertStrip.razor.rz.scp.css */
/* Surface fill with a coloured left edge rather than a pastel tile: the -lt fills are not
   redefined for dark mode, so a pastel tile with themed text goes unreadable there. */
.agri-strip[b-eu81pqdmua] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--mk-s3);
    margin-bottom: var(--mk-s4);
}

.agri-stat[b-eu81pqdmua] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s1);
    padding: var(--mk-s3) var(--mk-s4);
    background: var(--mk-surface);
    border: 1px solid var(--mk-border);
    border-left: 3px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    color: var(--mk-text);
    text-decoration: none;
}

.agri-stat:hover[b-eu81pqdmua] { border-color: var(--mk-primary); }
.agri-stat.warn[b-eu81pqdmua] { border-left-color: var(--mk-warning); }
.agri-stat.danger[b-eu81pqdmua] { border-left-color: var(--mk-danger); }
.agri-stat.info[b-eu81pqdmua] { border-left-color: var(--mk-info); }

.agri-stat-value[b-eu81pqdmua] {
    font-size: var(--mk-t-h3, 1.25rem);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

.agri-stat.warn .agri-stat-value[b-eu81pqdmua] { color: var(--mk-warning-fg); }
.agri-stat.danger .agri-stat-value[b-eu81pqdmua] { color: var(--mk-danger-fg); }

.agri-stat-label[b-eu81pqdmua] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

@media (max-width: 1440.98px) {
    .agri-strip[b-eu81pqdmua] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
    .agri-strip[b-eu81pqdmua] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Shared/AuthBrandPanel.razor.rz.scp.css */
/* Brand panel styling, moved here wholesale from Login.razor's <style> block so the
   panel is self-contained: markup, copy model and looks travel together.

   Scoped CSS is safe for all of it — every element below is plain markup in this
   component, so each one receives the b-<hash> scope attribute. (An element built through
   RenderTreeBuilder would not, and would be unreachable from this file.) The <svg> inside
   each LcIcon belongs to LcIcon's scope, so it is sized by its Size parameter and coloured
   through currentColor from the badge around it — never styled from here. */

.login-brand[b-okdsm8zf3g] {
    flex: 1;
    position: sticky;
    top: 0;
    align-self: flex-start;
    isolation: isolate;
    background: var(--mk-hero-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ambient depth — a warm brand bloom top-left, a soft cool fill bottom-right,
   both well beneath the copy so the panel reads lit rather than flat. */
.login-brand[b-okdsm8zf3g]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(max(680px, 45%) max(460px, 35%) at 4% -6%, color-mix(in srgb, var(--mk-primary) 26%, transparent), transparent 60%),
        radial-gradient(max(520px, 35%) max(520px, 40%) at 106% 110%, var(--mk-hero-fill), transparent 55%);
    pointer-events: none;
}

/* Brand-orange hairline down the seam between the panels. */
.login-brand[b-okdsm8zf3g]::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--mk-primary), transparent 60%);
    pointer-events: none;
}

/* --auth-scale is set per big-screen tier on .auth, in auth.css. */
.login-brand-inner[b-okdsm8zf3g] { position: relative; z-index: 1; width: 100%; max-width: 540px; zoom: var(--auth-scale, 1); }

/* ── Logo lockup ─────────────────────────────────────────────── */
.lb-logo[b-okdsm8zf3g] {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--mk-t-page-sm); font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg);
    letter-spacing: -.4px; margin-bottom: 44px;
    text-decoration: none; width: fit-content;
    transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.lb-logo:hover[b-okdsm8zf3g] { opacity: .85; color: var(--mk-hero-fg); }
.lb-logo-icon[b-okdsm8zf3g] {
    width: 46px; height: 46px; flex-shrink: 0;
    filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--mk-primary) 45%, transparent));
}
/* Was ".lb-blue", which had not been blue since the brand went orange. */
/* --mk-orange-ink, the same token WebsiteLayout uses for .s-logo-k. The mark is
   brand identity, so it does NOT follow the auth theme's blue. */
.lb-brand-accent[b-okdsm8zf3g] { color: var(--mk-orange-ink); }

/* ── Copy ────────────────────────────────────────────────────── */
.lb-eyebrow[b-okdsm8zf3g] {
    display: block;
    font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-bold); letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--mk-primary-ink);
    margin-bottom: 14px;
}
.lb-headline[b-okdsm8zf3g] {
    font-size: clamp(26px, 2.6vw, 42px);
    font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg);
    letter-spacing: -.6px; line-height: 1.15;
    margin-bottom: 16px;
}
.lb-sub[b-okdsm8zf3g] {
    font-size: var(--mk-t-card-sm); color: var(--mk-hero-fg-2); line-height: 1.6;
    margin-bottom: 32px; max-width: 440px;
}

/* ── Tones ───────────────────────────────────────────────────
   One custom property per tint, so a tile and a phone row share the mapping. The
   badge is the tone mixed into the surface rather than a *-lt token, because .auth
   keeps these screens light even when .dark is on <html> and the *-lt tokens would
   flip with it. The mockup's purple is off-palette; teal is its stand-in. */
.lb-tone-orange[b-okdsm8zf3g] { --lb-tone: var(--mk-primary-ink); }
.lb-tone-green[b-okdsm8zf3g]  { --lb-tone: var(--mk-fin-positive); }
.lb-tone-blue[b-okdsm8zf3g]   { --lb-tone: var(--mk-fin-info); }
.lb-tone-teal[b-okdsm8zf3g]   { --lb-tone: var(--mk-financial); }

/* ── Feature tiles ───────────────────────────────────────────── */
.lb-features[b-okdsm8zf3g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mk-s4);
    margin-bottom: 28px;
}
.lb-feat[b-okdsm8zf3g] { display: flex; flex-direction: column; gap: var(--mk-s1); min-width: 0; }
.lb-feat-icon[b-okdsm8zf3g] {
    width: 48px; height: 48px; margin-bottom: var(--mk-s2);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--mk-r-lg);
    color: var(--lb-tone);
    background: color-mix(in srgb, var(--lb-tone) 13%, var(--mk-bg-surface));
    border: 1px solid color-mix(in srgb, var(--lb-tone) 22%, transparent);
}
.lb-feat-title[b-okdsm8zf3g] {
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-bold);
    color: var(--mk-hero-fg); line-height: 1.3;
}
.lb-feat-cap[b-okdsm8zf3g] { font-size: var(--mk-t-micro); color: var(--mk-hero-fg-2); line-height: 1.45; }

/* ── Stats strip ─────────────────────────────────────────────── */
.lb-stats[b-okdsm8zf3g] {
    display: flex; margin-bottom: var(--mk-s5);
    max-width: 480px;
    background: color-mix(in srgb, var(--mk-bg-surface) 70%, transparent);
    border: 1px solid var(--mk-hero-line);
    border-radius: var(--mk-r-xl); overflow: hidden;
}
.lb-stat[b-okdsm8zf3g] {
    flex: 1;
    display: flex; align-items: center; gap: var(--mk-s3);
    padding: var(--mk-s4) var(--mk-s5);
    border-right: 1px solid var(--mk-hero-line);
}
.lb-stat:last-child[b-okdsm8zf3g] { border-right: none; }
.lb-stat-icon[b-okdsm8zf3g] {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--mk-r-pill);
    color: var(--mk-primary-ink);
    background: color-mix(in srgb, var(--mk-primary) 14%, var(--mk-bg-surface));
}
.lb-stat-num[b-okdsm8zf3g] { font-size: var(--mk-t-section); font-weight: var(--mk-fw-extrabold); color: var(--mk-hero-fg); line-height: 1; }
.lb-stat-lbl[b-okdsm8zf3g] { font-size: var(--mk-t-micro); color: var(--mk-hero-fg-2); margin-top: 4px; letter-spacing: .3px; }

/* ── Showcase: tagline + device illustration ─────────────────── */
.lb-showcase[b-okdsm8zf3g] {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--mk-s4);
}
/* Kalam, the handwriting accent the site and notebook skins already load. English
   only — Kalam has no Devanagari, and this line is not translated. */
.lb-tagline[b-okdsm8zf3g] {
    flex: 0 1 190px;
    position: relative;
    margin: 0 0 var(--mk-s6);
    font-family: var(--mk-font-script);
    font-size: var(--mk-t-section);
    line-height: 1.35;
    color: var(--mk-hero-fg);
    transform: rotate(-6deg);
}
.lb-tagline[b-okdsm8zf3g]::after {
    content: '';
    position: absolute; left: 4px; right: 12px; bottom: -10px;
    height: 3px; border-radius: var(--mk-r-pill);
    background: var(--mk-primary);
    transform: rotate(-2deg);
}

.lb-devices[b-okdsm8zf3g] { position: relative; flex: 0 0 320px; height: 210px; }

.lb-laptop[b-okdsm8zf3g] { position: absolute; right: 0; bottom: 0; width: 250px; }
.lb-laptop-screen[b-okdsm8zf3g] {
    display: flex; height: 150px;
    border: 7px solid var(--mk-hero-fg);
    border-radius: var(--mk-r-md) var(--mk-r-md) 0 0;
    background: var(--mk-bg-surface);
    overflow: hidden;
}
.lb-laptop-rail[b-okdsm8zf3g] { flex: 0 0 34px; background: color-mix(in srgb, var(--mk-hero-fg) 88%, transparent); }
.lb-laptop-body[b-okdsm8zf3g] { flex: 1; display: flex; flex-direction: column; gap: var(--mk-s2); padding: var(--mk-s2) var(--mk-s3); }
.lb-bars[b-okdsm8zf3g] {
    flex: 1; display: flex; align-items: flex-end; gap: 6px;
    border-bottom: 1px solid var(--mk-border);
}
.lb-bars i[b-okdsm8zf3g] { flex: 1; border-radius: 3px 3px 0 0; background: var(--mk-fin-info); }
.lb-bars i:nth-child(1)[b-okdsm8zf3g] { height: 38%; }
.lb-bars i:nth-child(2)[b-okdsm8zf3g] { height: 62%; background: var(--mk-primary); }
.lb-bars i:nth-child(3)[b-okdsm8zf3g] { height: 48%; }
.lb-bars i:nth-child(4)[b-okdsm8zf3g] { height: 80%; background: var(--mk-fin-positive); }
.lb-bars i:nth-child(5)[b-okdsm8zf3g] { height: 66%; background: var(--mk-primary); }
.lb-laptop-row[b-okdsm8zf3g] { display: flex; align-items: center; gap: var(--mk-s3); }
.lb-donut[b-okdsm8zf3g] {
    width: 30px; height: 30px; flex-shrink: 0; box-sizing: border-box;
    border-radius: var(--mk-r-pill);
    border: 6px solid var(--mk-fin-info);
    border-top-color: var(--mk-primary);
    border-right-color: var(--mk-fin-positive);
}
.lb-lines[b-okdsm8zf3g] { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.lb-lines i[b-okdsm8zf3g] { height: 5px; border-radius: var(--mk-r-pill); background: var(--mk-border); }
.lb-lines i:nth-child(2)[b-okdsm8zf3g] { width: 70%; }
.lb-lines i:nth-child(3)[b-okdsm8zf3g] { width: 45%; }
.lb-laptop-base[b-okdsm8zf3g] {
    height: 10px; margin: 0 -18px;
    border-radius: 0 0 var(--mk-r-md) var(--mk-r-md);
    background: color-mix(in srgb, var(--mk-hero-fg) 30%, var(--mk-border));
}

.lb-phone[b-okdsm8zf3g] {
    position: absolute; left: 0; bottom: -6px;
    width: 112px; height: 200px;
    display: flex; flex-direction: column; gap: 7px;
    padding: 16px 9px 10px;
    box-sizing: border-box;
    border: 5px solid var(--mk-hero-fg);
    border-radius: 20px;
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-lg);
}
.lb-phone-brand[b-okdsm8zf3g] {
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
    color: var(--mk-hero-fg); margin-bottom: 4px;
}
.lb-phone-brand b[b-okdsm8zf3g] { color: var(--mk-primary-ink); }
.lb-phone-row[b-okdsm8zf3g] {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px;
    border-radius: var(--mk-r-sm);
    background: var(--mk-bg-subtle);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold);
    color: var(--mk-hero-fg);
}
.lb-phone-ico[b-okdsm8zf3g] {
    width: 18px; height: 18px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--mk-r-sm);
    color: var(--mk-bg-surface);
    background: var(--lb-tone);
}

@media (prefers-reduced-motion: no-preference) {
    .lb-phone[b-okdsm8zf3g] { animation: lb-float-b-okdsm8zf3g 6s var(--mk-ease) infinite; }
}
@keyframes lb-float-b-okdsm8zf3g {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ── Responsive: width tiers ─────────────────────────────────── */
/* Laptop — four tiles become a 2 × 2 with the icon beside the title. */
@media (max-width: 1300px) {
    .login-brand[b-okdsm8zf3g] { padding: 40px; }
    .lb-headline[b-okdsm8zf3g] { font-size: clamp(24px, 2.3vw, 32px); }
    .lb-features[b-okdsm8zf3g] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-feat[b-okdsm8zf3g] { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--mk-s3); }
    .lb-feat-icon[b-okdsm8zf3g] { width: 40px; height: 40px; margin-bottom: 0; }
    .lb-feat-title[b-okdsm8zf3g] { flex: 1 1 0; }
    .lb-feat-cap[b-okdsm8zf3g] { flex-basis: 100%; }
}
/* Below ~1100px the 45% column cannot hold the devices beside the tagline. */
@media (max-width: 1100px) {
    .lb-devices[b-okdsm8zf3g] { display: none; }
    .lb-tagline[b-okdsm8zf3g] { margin-bottom: 0; }
}
/* Tablet — tiles are the first thing to go; the headline still carries the pitch. */
@media (max-width: 1024px) {
    .lb-features[b-okdsm8zf3g] { display: none; }
    .lb-sub[b-okdsm8zf3g] { font-size: var(--mk-t-body); margin-bottom: 24px; }
}
/* Phone — the panel gives way entirely to the form. */
@media (max-width: 768px) {
    .login-brand[b-okdsm8zf3g] { display: none; }
}
/* Ultrawide — don't let the brand copy stretch thin across the panel. */
@media (min-width: 1600px) {
    .login-brand-inner[b-okdsm8zf3g] { max-width: 600px; margin: 0 auto; }
}

/* ── Responsive: height tiers ────────────────────────────────── */
/* A laptop with browser chrome eating vertical space is width-wise a "laptop" but
   cannot fit the full panel. Trim by height rather than letting content overflow
   past the sticky viewport — the illustration first, then the stats, then tiles. */
@media (min-width: 769px) and (max-height: 860px) {
    .lb-showcase[b-okdsm8zf3g] { display: none; }
}
@media (min-width: 769px) and (max-height: 640px) {
    .lb-stats[b-okdsm8zf3g] { display: none; }
}
@media (min-width: 769px) and (max-height: 520px) {
    .lb-features[b-okdsm8zf3g] { display: none; }
    .login-brand[b-okdsm8zf3g] { padding-top: 24px; padding-bottom: 24px; }
}
/* /Components/Shared/BusinessSettingsPanel.razor.rz.scp.css */
/* Business settings — one grouped list of switch rows per settings section.

   Every colour, size, radius and font here is a --mk-* token. The only literals are the @media
   widths (CSS forbids custom properties inside a media query) and one 1px hairline. */

.bs-panel[b-va8m1hnhl1] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-5);
}

.bs-loading[b-va8m1hnhl1] {
    display: flex;
    justify-content: center;
    padding: var(--mk-space-8);
}

/* ── Group ───────────────────────────────────────────────────────────────── */

.bs-group[b-va8m1hnhl1] {
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    overflow: hidden;
}

.bs-group-head[b-va8m1hnhl1] {
    padding: var(--mk-space-3) var(--mk-space-4);
    background: var(--mk-bg-subtle);
    border-bottom: 1px solid var(--mk-border);
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}

.bs-rows[b-va8m1hnhl1] {
    display: flex;
    flex-direction: column;
}

/* ── Row ─────────────────────────────────────────────────────────────────── */

.bs-row[b-va8m1hnhl1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-4);
    padding: var(--mk-space-3) var(--mk-space-4);
    border-bottom: 1px solid var(--mk-border);
}

.bs-row:last-child[b-va8m1hnhl1] {
    border-bottom: none;
}

/* A row whose parent switch is off stays readable but visibly inert — the control is disabled
   too, so this is a cue rather than the enforcement. */
.bs-row.is-disabled .bs-row-text[b-va8m1hnhl1] {
    opacity: .5;
}

.bs-row-text[b-va8m1hnhl1] {
    /* min-width:0 lets a long hint wrap instead of forcing the row wider than the card. */
    flex: 1;
    min-width: 0;
}

.bs-row-title[b-va8m1hnhl1] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text-strong);
}

.bs-row-hint[b-va8m1hnhl1] {
    margin-top: 2px;
    font-size: var(--mk-t-micro);
    line-height: 1.45;
    color: var(--mk-text-2);
}

.bs-row-control[b-va8m1hnhl1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ── Toggle ──────────────────────────────────────────────────────────────── */

.bs-toggle[b-va8m1hnhl1] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.bs-toggle[b-va8m1hnhl1]  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bs-toggle-track[b-va8m1hnhl1] {
    position: absolute;
    inset: 0;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-border-strong);
    transition: background .16s ease;
}

.bs-toggle-track[b-va8m1hnhl1]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: var(--mk-bg-surface);
    box-shadow: var(--mk-shadow-sm);
    transition: transform .16s ease;
}

.bs-toggle input:checked + .bs-toggle-track[b-va8m1hnhl1] {
    background: var(--mk-primary);
}

.bs-toggle input:checked + .bs-toggle-track[b-va8m1hnhl1]::before {
    transform: translateX(18px);
}

.bs-toggle input:focus-visible + .bs-toggle-track[b-va8m1hnhl1] {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

.bs-toggle input:disabled + .bs-toggle-track[b-va8m1hnhl1] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Select / text ───────────────────────────────────────────────────────── */

.bs-select[b-va8m1hnhl1],
[b-va8m1hnhl1] .bs-text {
    min-width: 180px;
    padding: var(--mk-space-2) var(--mk-space-3) !important;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary-sm);
    outline: none;
}

.bs-select:focus[b-va8m1hnhl1],
[b-va8m1hnhl1] .bs-text:focus-within {
    border-color: var(--mk-primary);
}

.bs-select:disabled[b-va8m1hnhl1],
[b-va8m1hnhl1] .bs-text:disabled {
    background: var(--mk-bg-app);
    color: var(--mk-text-muted);
    cursor: not-allowed;
}

/* ── Number stepper ──────────────────────────────────────────────────────── */

.bs-stepper[b-va8m1hnhl1] {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2);
}

[b-va8m1hnhl1] .bs-step {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    line-height: 1;
    cursor: pointer;
}

[b-va8m1hnhl1] .bs-step:hover:not(:disabled) {
    background: var(--mk-bg-subtle);
    border-color: var(--mk-border-strong);
}

[b-va8m1hnhl1] .bs-step:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.bs-step-value[b-va8m1hnhl1] {
    min-width: 24px;
    text-align: center;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    font-variant-numeric: tabular-nums;
}

/* ── States ──────────────────────────────────────────────────────────────── */

.bs-empty[b-va8m1hnhl1] {
    padding: var(--mk-space-8);
    text-align: center;
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.bs-error[b-va8m1hnhl1] {
    padding: var(--mk-space-3) var(--mk-space-4);
    border: 1px solid var(--mk-fin-negative-br);
    border-radius: var(--mk-radius-md);
    background: var(--mk-fin-negative-lt);
    color: var(--mk-fin-negative-fg);
    font-size: var(--mk-t-secondary-sm);
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */
/* Below 600px the control drops under the label: a 180px select beside a wrapping two-line hint
   leaves the label about eight characters wide. */

@media (max-width: 599.98px) {
    .bs-row[b-va8m1hnhl1] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mk-space-2);
    }

    .bs-row-control[b-va8m1hnhl1] {
        justify-content: flex-start;
    }

    .bs-select[b-va8m1hnhl1],
    [b-va8m1hnhl1] .bs-text {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/Dashboard/RetailOverviewDashboard.razor.rz.scp.css */
/* Retail overview (spec §3). Tokens only — see docs/css-design-system.md. */
.ro-page[b-33dj1bdh86] { display: flex; flex-direction: column; gap: var(--mk-s4); padding: var(--mk-s5); width: 100%; box-sizing: border-box; max-width: 1600px; margin: 0 auto; color: var(--mk-text); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.ro-head[b-33dj1bdh86] { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mk-s4); flex-wrap: wrap; }
.ro-eyebrow[b-33dj1bdh86] { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--mk-text-muted); }
.ro-head h1[b-33dj1bdh86] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-page); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); }
.ro-head p[b-33dj1bdh86] { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-secondary); color: var(--mk-text-muted); }
.ro-head-actions[b-33dj1bdh86] { display: flex; gap: var(--mk-s2); flex-wrap: wrap; }

[b-33dj1bdh86] .ro-btn { display: inline-flex; align-items: center; gap: var(--mk-s2); min-height: 40px; padding: 0 var(--mk-s4); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md);
          background: var(--mk-bg-surface); color: var(--mk-text-strong); font: inherit; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); text-decoration: none; cursor: pointer; }
[b-33dj1bdh86] .ro-btn:hover { background: var(--mk-bg-hover); }
.ro-btn-primary[b-33dj1bdh86] { background: var(--mk-primary); border-color: var(--mk-primary); color: var(--mk-text-onprimary); }
.ro-btn-primary:hover[b-33dj1bdh86] { background: var(--mk-primary-hover); }

/* ── Period toolbar ─────────────────────────────────────────────────────── */
/* One line at every width: the chips scroll sideways rather than pushing Refresh onto its own row. */
.ro-toolbar[b-33dj1bdh86] { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s3); }
.ro-periods[b-33dj1bdh86] { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--mk-s2); overflow-x: auto; scrollbar-width: thin; }
[b-33dj1bdh86] .ro-chip { flex: none; min-height: 36px; padding: 0 var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); background: var(--mk-bg-surface);
           color: var(--mk-text); font: inherit; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium); cursor: pointer; white-space: nowrap; }
[b-33dj1bdh86] .ro-chip.is-active { border-color: var(--mk-primary); background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }
.ro-toolbar-end[b-33dj1bdh86] { display: flex; align-items: center; gap: var(--mk-s2); }
.ro-range[b-33dj1bdh86] { font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); white-space: nowrap; }
[b-33dj1bdh86] .ro-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); background: var(--mk-bg-surface); color: var(--mk-text); cursor: pointer; }
[b-33dj1bdh86] .ro-icon-btn:disabled { opacity: .5; cursor: default; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.ro-warning[b-33dj1bdh86] { display: flex; align-items: center; gap: var(--mk-s3); padding: var(--mk-s3) var(--mk-s4); border: 1px solid var(--mk-warning); border-radius: var(--mk-r-card);
              background: var(--mk-warning-lt); color: var(--mk-warning-fg); font-size: var(--mk-t-secondary); text-decoration: none; }
.ro-warning-go[b-33dj1bdh86] { margin-left: auto; font-weight: var(--mk-fw-semibold); white-space: nowrap; }
.ro-error[b-33dj1bdh86] { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s3); padding: var(--mk-s4); border: 1px solid var(--mk-danger); border-radius: var(--mk-r-card);
            background: var(--mk-danger-lt); color: var(--mk-danger-fg); }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.ro-kpis[b-33dj1bdh86] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s3); }
.ro-kpi[b-33dj1bdh86] { display: flex; flex-direction: column; gap: var(--mk-s1); min-height: 112px; padding: var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
          background: var(--mk-bg-surface); color: inherit; text-decoration: none; transition: border-color var(--mk-t-fast), box-shadow var(--mk-t-fast); }
a.ro-kpi:hover[b-33dj1bdh86] { border-color: var(--mk-primary-border); box-shadow: var(--mk-sh-sm); }
.ro-kpi-label[b-33dj1bdh86] { font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium); color: var(--mk-text-muted); }
.ro-kpi-value[b-33dj1bdh86] { font-size: var(--mk-t-section); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ro-kpi-value.is-neg[b-33dj1bdh86] { color: var(--mk-danger-fg); }
.ro-kpi-value.is-warn[b-33dj1bdh86] { color: var(--mk-warning-fg); }
.ro-kpi-sub[b-33dj1bdh86] { margin-top: auto; font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.ro-skeleton[b-33dj1bdh86] { background: var(--mk-bg-subtle); border-color: transparent; animation: ro-pulse-b-33dj1bdh86 1.2s ease-in-out infinite; }
@keyframes ro-pulse-b-33dj1bdh86 { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ro-skeleton[b-33dj1bdh86] { animation: none; } }

/* ── Sections ───────────────────────────────────────────────────────────── */
.ro-grid[b-33dj1bdh86] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s3); }
.ro-card[b-33dj1bdh86] { min-width: 0; padding: var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-bg-surface); }
.ro-span-2[b-33dj1bdh86] { grid-column: span 2; }
.ro-card-head[b-33dj1bdh86] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mk-s2); margin-bottom: var(--mk-s3); }
.ro-card-head h2[b-33dj1bdh86] { margin: 0; font-size: var(--mk-t-card); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.ro-card-head a[b-33dj1bdh86] { font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold); color: var(--mk-primary-ink); text-decoration: none; white-space: nowrap; }
.ro-empty[b-33dj1bdh86] { margin: 0; padding: var(--mk-s5) 0; text-align: center; font-size: var(--mk-t-secondary); color: var(--mk-text-muted); }
.ro-muted[b-33dj1bdh86] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }

/* Trend: plain flex bars — no chart library, nothing to fail during prerender. */
.ro-bars[b-33dj1bdh86] { display: flex; align-items: flex-end; gap: 2px; height: 200px; padding-top: var(--mk-s2); }
.ro-bar-col[b-33dj1bdh86] { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--mk-s1); }
.ro-bar[b-33dj1bdh86] { width: 100%; max-width: 40px; border-radius: var(--mk-r-sm) var(--mk-r-sm) 0 0; background: var(--mk-financial); }
.ro-bar-col:hover .ro-bar[b-33dj1bdh86] { background: var(--mk-primary); }
.ro-bar-label[b-33dj1bdh86] { height: 14px; font-size: var(--mk-t-micro); color: var(--mk-text-muted); white-space: nowrap; }

.ro-split[b-33dj1bdh86] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mk-s3); }
.ro-split-row[b-33dj1bdh86] { display: flex; justify-content: space-between; gap: var(--mk-s2); font-size: var(--mk-t-secondary); }
.ro-split-row strong[b-33dj1bdh86] { font-variant-numeric: tabular-nums; color: var(--mk-text-strong); }
.ro-meter[b-33dj1bdh86] { height: 6px; margin: var(--mk-s1) 0; border-radius: var(--mk-r-pill); background: var(--mk-bg-subtle); overflow: hidden; }
.ro-meter span[b-33dj1bdh86] { display: block; height: 100%; background: var(--mk-financial); }

.ro-list[b-33dj1bdh86] { list-style: none; margin: 0; padding: 0; }
.ro-list li[b-33dj1bdh86] { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s3); min-height: 48px; padding: var(--mk-s2) 0; border-top: 1px solid var(--mk-border); }
.ro-list li:first-child[b-33dj1bdh86] { border-top: 0; }
.ro-list a[b-33dj1bdh86] { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.ro-list a:hover .ro-list-main[b-33dj1bdh86] { color: var(--mk-primary-ink); }
.ro-list-main[b-33dj1bdh86] { font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-medium); color: var(--mk-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-list strong[b-33dj1bdh86] { flex: none; font-size: var(--mk-t-secondary); font-variant-numeric: tabular-nums; color: var(--mk-text-strong); }
.ro-list strong.is-warn[b-33dj1bdh86] { color: var(--mk-warning-fg); }
.ro-doc-end[b-33dj1bdh86] { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.ro-pill[b-33dj1bdh86], .ro-status[b-33dj1bdh86] { flex: none; padding: 2px var(--mk-s2); border-radius: var(--mk-r-sm); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); white-space: nowrap; }
.ro-pill.is-low[b-33dj1bdh86], .ro-status-warn[b-33dj1bdh86] { background: var(--mk-warning-lt); color: var(--mk-warning-fg); }
.ro-pill.is-out[b-33dj1bdh86], .ro-status-bad[b-33dj1bdh86] { background: var(--mk-danger-lt); color: var(--mk-danger-fg); }
.ro-status-ok[b-33dj1bdh86] { background: var(--mk-success-lt); color: var(--mk-success-fg); }
.ro-status-neutral[b-33dj1bdh86] { background: var(--mk-bg-subtle); color: var(--mk-text-2); }

:is(.ro-btn, .ro-chip, .ro-icon-btn, .ro-kpi, .ro-list a, .ro-card-head a, .ro-warning):focus-visible[b-33dj1bdh86] { outline: 2px solid var(--mk-primary); outline-offset: 2px; }

/* ── Breakpoints (600 / 1025 / 1441) ────────────────────────────────────── */
@media (max-width: 1440.98px) { .ro-grid[b-33dj1bdh86] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024.98px) {
    .ro-page[b-33dj1bdh86] { padding: var(--mk-s4); }
    .ro-kpis[b-33dj1bdh86] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    .ro-page[b-33dj1bdh86] { padding: var(--mk-s3) var(--mk-s4); }
    .ro-grid[b-33dj1bdh86] { grid-template-columns: minmax(0, 1fr); }
    .ro-span-2[b-33dj1bdh86] { grid-column: auto; }
    .ro-kpi[b-33dj1bdh86] { min-height: 96px; padding: var(--mk-s3); }
    .ro-kpi-value[b-33dj1bdh86] { font-size: var(--mk-t-card); }
    .ro-hide-sm[b-33dj1bdh86] { display: none; }
    .ro-head-actions[b-33dj1bdh86] { width: 100%; }
    .ro-head-actions[b-33dj1bdh86]  .ro-btn { flex: 1 1 0; justify-content: center; }
    .ro-range[b-33dj1bdh86] { display: none; }
}


/* Compact, wrapping access to trade-specific work without expanding the navigation rail. */
.ro-specialist[b-33dj1bdh86] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); }
.ro-specialist[b-33dj1bdh86]  .ro-btn { min-height: 44px; }
.ro-page [hidden][b-33dj1bdh86] { display: none !important; }
@media (pointer: coarse) {
    [b-33dj1bdh86] .ro-chip { min-height: 44px; }
    [b-33dj1bdh86] .ro-icon-btn { width: 44px; height: 44px; }
}

/* Labels, party names and large balances must fit without horizontal page scrolling. */
.ro-head-text[b-33dj1bdh86] { min-width: 0; overflow-wrap: anywhere; }
.ro-card-head[b-33dj1bdh86] { flex-wrap: wrap; }
.ro-card-head h2[b-33dj1bdh86] { min-width: 0; overflow-wrap: anywhere; }
.ro-list li[b-33dj1bdh86] { flex-wrap: wrap; }
.ro-list a[b-33dj1bdh86] { flex: 1 1 8rem; }
.ro-list strong[b-33dj1bdh86], .ro-doc-end[b-33dj1bdh86] { max-width: 100%; overflow-wrap: anywhere; }
.ro-split-row[b-33dj1bdh86] { flex-wrap: wrap; }
.ro-warning[b-33dj1bdh86] { flex-wrap: wrap; }
.ro-warning > span:not(.ro-warning-go)[b-33dj1bdh86], .ro-error > span[b-33dj1bdh86] { min-width: 0; overflow-wrap: anywhere; }
.ro-error[b-33dj1bdh86] { flex-wrap: wrap; }
[b-33dj1bdh86] .ro-btn { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.ro-list a:not([href])[b-33dj1bdh86] { cursor: default; }
.ro-list a:not([href]):hover .ro-list-main[b-33dj1bdh86] { color: var(--mk-text-strong); }
@media (pointer: coarse) {
    [b-33dj1bdh86] .ro-btn { min-height: 44px; }
}
@media (max-width: 599.98px) {
    .ro-toolbar[b-33dj1bdh86] { flex-wrap: wrap; }
    .ro-periods[b-33dj1bdh86] { flex-basis: 100%; padding: 3px; }
    .ro-toolbar-end[b-33dj1bdh86] { width: 100%; justify-content: space-between; }
    .ro-range[b-33dj1bdh86] { display: inline; white-space: normal; }
    .ro-specialist[b-33dj1bdh86]  .ro-btn { flex: 1 1 8rem; }
}
.ro-list .ro-muted[b-33dj1bdh86] { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599.98px) {
    .ro-kpis-wide[b-33dj1bdh86] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/KhataAccountPicker.razor.rz.scp.css */
/* The dropdown itself is StackSelect, styled like every other Personal Finance account field.
   Only the two things that are the picker's own live here. */

/* Quick-add bar: StackSelect renders w-full, so hold it to a width beside the amount box. */
.kap-compact[b-myohsgv0cj] { width: 180px; max-width: 40%; flex-shrink: 0; }

.kap-compact[role="alert"][b-myohsgv0cj] { font-size: var(--mk-t-micro); color: var(--mk-text); }

.kap-status[b-myohsgv0cj] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
    font-size: var(--mk-t-secondary-sm); color: var(--mk-text);
}

.kap-choice[b-myohsgv0cj] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); }

.kap-hint[b-myohsgv0cj] { font-size: var(--mk-t-micro); color: var(--mk-text-muted); margin-top: var(--mk-s1); }
.kap-hint a[b-myohsgv0cj] { color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }
/* /Components/Shared/KhataShareBadge.razor.rz.scp.css */
.mk-share-badge[b-4ljz2m7f3s] {
    display: flex;
    align-items: flex-start;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-md);
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-subtle);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
    line-height: 1.45;
    margin-bottom: var(--mk-s3);
}

.mk-share-badge strong[b-4ljz2m7f3s] { color: var(--mk-text-strong); font-weight: var(--mk-fw-semibold); }

.mk-share-badge.is-on[b-4ljz2m7f3s] {
    border-color: var(--mk-fin-positive-br);
    background: var(--mk-fin-positive-lt);
}

.mk-share-badge-icon[b-4ljz2m7f3s] { flex-shrink: 0; }
/* /Components/Shared/MkDataGrid.razor.rz.scp.css */
/* MkDataGrid — every value is a --mk-* token: see docs/css-design-system.md.
   Dark mode needs no block of its own here: the tokens below all flip with `.dark`. */

.mk-dg[b-7bv9iwfggo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.mk-dg-toolbar[b-7bv9iwfggo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
}

/* The grid's own search box. Hand-drawn rather than a StackInput: the package input is
   `w-full` and would need the same wrapper class every host currently supplies for its
   own controls, and the magnifier here is an inline SVG so it does not depend on a
   Tailwind utility the app's prebuilt bundle may not contain. */
.mk-dg-search[b-7bv9iwfggo] {
    position: relative;
    display: flex; align-items: center;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 0;
}

.mk-dg-search svg[b-7bv9iwfggo] {
    position: absolute; left: var(--mk-s2);
    width: var(--mk-s4); height: var(--mk-s4);
    color: var(--mk-text-muted);
    pointer-events: none;
}

.mk-dg-search input[b-7bv9iwfggo] {
    width: 100%;
    height: var(--mk-s6);
    padding: 0 var(--mk-s2) 0 var(--mk-s6);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-body);
}

.mk-dg-search input[b-7bv9iwfggo]::placeholder { color: var(--mk-text-muted); }
.mk-dg-search input:focus[b-7bv9iwfggo] { outline: none; border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }

/* Toolbar controls come from the page through ToolbarContent, so they carry the *page's*
   scope, not this component's — ::deep is the only way to reach them from here.
   MyStackBlazor sizes its input and select at `h-10` (40px) and BarcodeScanInput matches
   them, which makes the toolbar taller than three of the rows underneath it. `!important`
   answers Bootstrap's own `!important` on `.py-2`; without it the box shrinks to 32px but
   keeps 8px of padding top and bottom and clips its own text. */
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-grid-search input,
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-grid-filter select,
.mk-dg-compact .mk-dg-toolbar[b-7bv9iwfggo]  .mk-scan-input {
    height: var(--mk-s6);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: var(--mk-t-body);
    line-height: normal;
}

/* ── Table ──────────────────────────────────────────────────────────────── */

/* Normally the table scrolls sideways rather than wrapping its cells. While a filter
   menu is open that has to become `visible`, or the menu is clipped by this very box —
   it is a child of the <th> it belongs to, so there is nowhere else to hang it without
   measuring the header in JS. */
.mk-dg-scroll[b-7bv9iwfggo] {
    overflow-x: auto;
}

.mk-dg-scroll-open[b-7bv9iwfggo] {
    overflow: visible;
}

.mk-dg-table[b-7bv9iwfggo] {
    width: 100%;
    border-collapse: collapse;
    color: var(--mk-text);
    font-size: var(--mk-t-body);
}

.mk-dg-compact .mk-dg-table[b-7bv9iwfggo] {
    font-size: var(--mk-t-secondary);
}

.mk-dg-table thead th[b-7bv9iwfggo] {
    /* Spec §8.4: #F8FAFC header, 13px semibold labels, header stays put on a long list. */
    position: sticky;
    top: 0;
    /* Above the pinned last-column cells (z 1), so a header filter menu opened near the
       right edge is not painted under them. */
    z-index: 3;
    height: var(--mk-row-h);
    background: var(--mk-bg-table-head);
    border-bottom: 1px solid var(--mk-border);
    padding: var(--mk-s2) var(--mk-s3);
    text-align: left;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-t-w-th);
    color: var(--mk-text-2);
    white-space: nowrap;
    vertical-align: middle;
}

.mk-dg-compact .mk-dg-table thead th[b-7bv9iwfggo] {
    height: auto;
    padding: var(--mk-s1) var(--mk-s2);
}

.mk-dg-table tbody td[b-7bv9iwfggo] {
    height: var(--mk-row-h);   /* 48px rows, spec §8.4 */
    padding: var(--mk-s2) var(--mk-s3);
    border-bottom: 1px solid var(--mk-border);
    white-space: nowrap;
    vertical-align: middle;
}

.mk-dg-compact .mk-dg-table tbody td[b-7bv9iwfggo] {
    height: auto;
    padding: var(--mk-s1) var(--mk-s2);
}

.mk-dg-table tbody tr:last-child td[b-7bv9iwfggo] {
    border-bottom: 0;
}

.mk-dg-table tbody tr:hover td[b-7bv9iwfggo] {
    background: var(--mk-bg-hover);
}

.mk-dg-center[b-7bv9iwfggo] { text-align: center; }
.mk-dg-end[b-7bv9iwfggo] { text-align: right; }
/* The header's own `text-align: left` outranks the two classes above, so aligned headers
   need the extra weight — a right-aligned amount column with a left-aligned title reads
   as two columns. The label goes to the right edge, the funnel to the left. */
.mk-dg-table thead th.mk-dg-end[b-7bv9iwfggo] { text-align: right; }
.mk-dg-table thead th.mk-dg-end .mk-dg-head[b-7bv9iwfggo] { flex-direction: row-reverse; }
.mk-dg-table thead th.mk-dg-center[b-7bv9iwfggo] { text-align: center; }
.mk-dg-table thead th.mk-dg-center .mk-dg-head[b-7bv9iwfggo] { justify-content: center; }
/* Numeric columns: tabular figures so a column of amounts lines up digit for digit. */
.mk-dg-num[b-7bv9iwfggo] { font-variant-numeric: tabular-nums; }

.mk-dg-empty td[b-7bv9iwfggo] {
    padding: var(--mk-s5) var(--mk-s3);
    text-align: center;
    color: var(--mk-text-muted);
    white-space: normal;
}

/* Row actions come in through a Template, so they belong to the *page's* CSS scope, not
   this component's — ::deep is the only way to reach them from here. */
.mk-dg-compact[b-7bv9iwfggo]  td .btn-sm {
    padding: var(--mk-s1) var(--mk-s2);
    font-size: var(--mk-t-secondary-sm);
    line-height: 1.35;
}

/* ── Header controls ────────────────────────────────────────────────────── */

.mk-dg-head[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
    justify-content: space-between;
}

.mk-dg-sort[b-7bv9iwfggo],
.mk-dg-funnel[b-7bv9iwfggo] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.mk-dg-sort[b-7bv9iwfggo] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
}

.mk-dg-sort:hover[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
}

.mk-dg-caret[b-7bv9iwfggo] {
    color: var(--mk-text-muted);
    font-size: var(--mk-t-micro);
}

.mk-dg-caret.is-on[b-7bv9iwfggo] {
    color: var(--mk-primary-ink);
}

.mk-dg-funnel[b-7bv9iwfggo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--mk-s4);
    height: var(--mk-s4);
    border-radius: var(--mk-r-sm);
    color: var(--mk-text-muted);
}

.mk-dg-funnel svg[b-7bv9iwfggo] {
    width: 100%;
    height: 100%;
}

.mk-dg-funnel:hover[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
    background: var(--mk-bg-surface);
}

/* An applied filter is filled, not just tinted: on a header this small a colour change
   alone is easy to miss, and "why is this list short?" is the question it answers. */
.mk-dg-funnel.is-on[b-7bv9iwfggo] {
    color: var(--mk-primary-ink);
}

.mk-dg-funnel.is-on svg path[b-7bv9iwfggo] {
    fill: currentColor;
}

/* ── Filter menu ────────────────────────────────────────────────────────── */

.mk-dg-menu[b-7bv9iwfggo] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    margin-top: var(--mk-s1);
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    width: 15rem;
    padding: var(--mk-s3);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-shadow-lg);
    white-space: normal;
}

/* The last columns' menus would otherwise hang off the right edge of the card. */
.mk-dg-table thead th:nth-last-child(-n + 3) .mk-dg-menu[b-7bv9iwfggo] {
    left: auto;
    right: 0;
}

.mk-dg-menu-op[b-7bv9iwfggo],
.mk-dg-menu-value[b-7bv9iwfggo] {
    width: 100%;
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-t-body);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
}

.mk-dg-menu-op:focus[b-7bv9iwfggo],
.mk-dg-menu-value:focus[b-7bv9iwfggo] {
    outline: none;
    border-color: var(--mk-primary);
    box-shadow: var(--mk-focus-ring);
}

.mk-dg-menu-value:disabled[b-7bv9iwfggo] {
    background: var(--mk-bg-subtle);
    color: var(--mk-text-muted);
}

.mk-dg-menu-actions[b-7bv9iwfggo] {
    display: flex;
    justify-content: flex-end;
    gap: var(--mk-s2);
}

/* Clear is the neutral of the pair, and a *filled* grey one cannot be: --mk-text-2 is a dark
   slate in light mode but a pale sand in dark, so white-on-it fails contrast on one theme
   whichever way round it is set. A bordered surface button reads correctly in both. */
.mk-dg-btn[b-7bv9iwfggo] {
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
    background: var(--mk-bg-subtle);
    border: 1px solid var(--mk-border-strong);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-btn-primary[b-7bv9iwfggo] {
    color: var(--mk-text-oncolor);
    background: var(--mk-primary);
    border-color: var(--mk-primary);
}

.mk-dg-btn:hover[b-7bv9iwfggo] {
    filter: brightness(1.06);
}

.mk-dg-btn:disabled[b-7bv9iwfggo] { opacity: .6; cursor: default; }

/* ── Saved views ────────────────────────────────────────────────────────── */

/* Pushed to the right end of the toolbar, after the page's own controls. */
.mk-dg-views[b-7bv9iwfggo] {
    position: relative;
    margin-left: auto;
}

.mk-dg-views-btn[b-7bv9iwfggo] {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-s1);
    height: var(--mk-s6);
    max-width: 16rem;
    padding: 0 var(--mk-s3);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-views-btn span[b-7bv9iwfggo] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dg-views-btn svg[b-7bv9iwfggo] { flex: none; width: var(--mk-s4); height: var(--mk-s4); color: var(--mk-text-muted); }
.mk-dg-views-btn:hover[b-7bv9iwfggo] { border-color: var(--mk-border-strong); }
.mk-dg-views-btn.is-on[b-7bv9iwfggo] { border-color: var(--mk-primary-border); background: var(--mk-primary-soft); color: var(--mk-primary-ink); }
.mk-dg-views-btn.is-on svg[b-7bv9iwfggo] { color: var(--mk-primary-ink); }

.mk-dg-views-menu[b-7bv9iwfggo] {
    position: absolute;
    z-index: 40;
    top: 100%;
    right: 0;
    margin-top: var(--mk-s1);
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    width: 19rem;
    max-width: calc(100vw - var(--mk-s6));
    padding: var(--mk-s3);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-shadow-lg);
}

.mk-dg-views-note[b-7bv9iwfggo] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-text-secondary); }

.mk-dg-views-list[b-7bv9iwfggo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
}

.mk-dg-views-list li[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
    border-radius: var(--mk-r-sm);
}

.mk-dg-views-list li:hover[b-7bv9iwfggo] { background: var(--mk-bg-hover); }
.mk-dg-views-list li.is-active[b-7bv9iwfggo] { background: var(--mk-primary-soft); }

.mk-dg-views-apply[b-7bv9iwfggo] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--mk-s1) var(--mk-s2);
    text-align: left;
    font-size: var(--mk-t-body);
    color: var(--mk-text);
    background: none;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.mk-dg-views-list li.is-active .mk-dg-views-apply[b-7bv9iwfggo] { color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }

.mk-dg-views-tag[b-7bv9iwfggo] {
    flex: none;
    font-size: var(--mk-fs-2xs);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-financial-fg);
    border: 1px solid var(--mk-financial-border);
    border-radius: var(--mk-r-sm);
    padding: 0 var(--mk-s1);
}

.mk-dg-views-icon[b-7bv9iwfggo] {
    flex: none;
    width: var(--mk-s6);
    height: var(--mk-s6);
    color: var(--mk-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-views-icon:hover[b-7bv9iwfggo] { color: var(--mk-text-strong); background: var(--mk-bg-subtle); }
.mk-dg-views-icon.is-on[b-7bv9iwfggo] { color: var(--mk-warning-fg); }

.mk-dg-views-save[b-7bv9iwfggo] {
    display: flex;
    flex-direction: column;
    gap: var(--mk-s2);
    padding-top: var(--mk-s2);
    border-top: 1px solid var(--mk-border);
}

.mk-dg-views-share[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text);
}

.mk-dg-views-error[b-7bv9iwfggo] { margin: 0; font-size: var(--mk-t-secondary); color: var(--mk-danger-fg); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.mk-dg-footer[b-7bv9iwfggo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-top: 1px solid var(--mk-border);
}

.mk-dg-footer-left[b-7bv9iwfggo] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--mk-s2) var(--mk-s4);
}

.mk-dg-count[b-7bv9iwfggo] {
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
}

.mk-dg-size[b-7bv9iwfggo] {
    display: inline-flex; align-items: center; gap: var(--mk-s2);
    color: var(--mk-text-muted);
    font-size: var(--mk-t-secondary);
}

.mk-dg-size select[b-7bv9iwfggo] {
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    color: var(--mk-text);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary);
    cursor: pointer;
}

.mk-dg-size select:focus-visible[b-7bv9iwfggo] { outline: none; box-shadow: var(--mk-focus-ring); }

.mk-dg-pager[b-7bv9iwfggo] {
    display: flex;
    align-items: center;
    gap: var(--mk-s1);
}

.mk-dg-page[b-7bv9iwfggo] {
    min-width: var(--mk-s6);
    height: var(--mk-s6);
    padding: 0 var(--mk-s2);
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-sm);
    cursor: pointer;
}

.mk-dg-page:hover:not(:disabled)[b-7bv9iwfggo] {
    color: var(--mk-text-strong);
    border-color: var(--mk-border-strong);
}

.mk-dg-page:disabled[b-7bv9iwfggo] {
    color: var(--mk-text-muted);
    cursor: default;
    opacity: .55;
}

.mk-dg-page.is-current[b-7bv9iwfggo] {
    color: var(--mk-text-oncolor);
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    font-weight: var(--mk-fw-semibold);
}

.mk-dg-gap[b-7bv9iwfggo] {
    padding: 0 var(--mk-s1);
    color: var(--mk-text-muted);
}

/* Small screens: the caption and the pager each get a line rather than fighting for one. */
@media (max-width: 599.98px) {
    .mk-dg-footer[b-7bv9iwfggo] {
        justify-content: center;
    }
}

/* ── Pinned last column ─────────────────────────────────────────────────── */

/* Needs an opaque background of its own, or the scrolling cells show through it. The
   hover rule is repeated here for the same reason: `tr:hover td` would be painted under
   this cell's own background, not over it. */
.mk-dg-sticky-last .mk-dg-table thead th:last-child[b-7bv9iwfggo],
.mk-dg-sticky-last .mk-dg-table tbody td:last-child[b-7bv9iwfggo] {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -1px 0 0 var(--mk-border);
}

.mk-dg-sticky-last .mk-dg-table thead th:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-table-head);
    z-index: 4;
}

.mk-dg-sticky-last .mk-dg-table tbody td:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-surface);
}

.mk-dg-sticky-last .mk-dg-table tbody tr:hover td:last-child[b-7bv9iwfggo] {
    background: var(--mk-bg-hover);
}
/* /Components/Shared/ModuleGate.razor.rz.scp.css */
.mg-locked[b-2w71qgw2xp] {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--mk-s3);
    padding: var(--mk-s3) var(--mk-s4);
    background: var(--mk-bg-surface);
    border: 1px dashed var(--mk-border-strong);
    border-radius: var(--mk-r-card);
}
.mg-locked-text[b-2w71qgw2xp] { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.mg-locked-title[b-2w71qgw2xp] { font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.mg-locked-sub[b-2w71qgw2xp] { font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); }
.mg-locked-link[b-2w71qgw2xp] {
    display: inline-flex; align-items: center; min-height: var(--mk-touch);
    font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}
/* /Components/Shared/OtpCodeField.razor.rz.scp.css */
.otp-code[b-34jrmf3d9s] {
    position: relative;
    width: 100%;
    max-width: calc(6 * var(--mk-otp-w) + 5 * var(--mk-s2));
}

/* The real input covers the boxes and takes every click, key, paste and autofill; it is only
   made invisible, never removed, so focus and assistive tech still land on it. */
[b-34jrmf3d9s] .otp-code-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    font-size: var(--mk-t-body);
    cursor: text;
    z-index: 1;
}

.otp-code-boxes[b-34jrmf3d9s] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--mk-s2);
}

.otp-code-box[b-34jrmf3d9s] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--mk-otp-h);
    min-height: 44px;
    border: 2px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    font-family: var(--mk-font-num);
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}

.otp-code-box.is-filled[b-34jrmf3d9s] { border-color: var(--mk-border-strong); }
.otp-code-box.is-active[b-34jrmf3d9s] { border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }

.is-invalid .otp-code-box[b-34jrmf3d9s] { border-color: var(--mk-fin-negative); }
.is-disabled .otp-code-box[b-34jrmf3d9s] { background: var(--mk-bg-subtle); color: var(--mk-text-muted); }
/* /Components/Shared/PfAppTour.razor.rz.scp.css */
/* Guided tour overlay. Top of the ladder below a modal (design-tokens.css §3b): it
   spotlights the header controls, so it has to out-rank their own dropdowns and the
   toasts — a tour card hidden under a toast is a tour nobody can finish. */
.tour[b-x3l4xw52gj] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-tour);
    font-family: var(--mk-font);
}

.tour__blocker[b-x3l4xw52gj] {
    position: absolute;
    inset: 0;
}

.tour__dim[b-x3l4xw52gj] {
    position: absolute;
    inset: 0;
    background: var(--mk-bg-scrim);
}

/* The hole in the scrim: one box whose enormous spread shadow *is* the scrim, so the
   target shows through at full brightness with no clip-path or SVG mask. */
.tour__spot[b-x3l4xw52gj] {
    position: absolute;
    border-radius: var(--mk-r-md);
    box-shadow: 0 0 0 200vmax var(--mk-bg-scrim);
    outline: 2px solid var(--mk-primary);
    outline-offset: 2px;
    pointer-events: none;
    transition: top var(--mk-dur-slow) var(--mk-ease),
                left var(--mk-dur-slow) var(--mk-ease),
                width var(--mk-dur-slow) var(--mk-ease),
                height var(--mk-dur-slow) var(--mk-ease);
}

.tour__card[b-x3l4xw52gj] {
    position: absolute;
    width: min(var(--mk-tour-w), calc(100vw - 2 * var(--mk-s4)));
    max-height: calc(100vh - 2 * var(--mk-s4));
    overflow-y: auto;
    padding: var(--mk-s5);
    background: var(--mk-bg-surface);
    color: var(--mk-text-strong);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-lg);
}

.tour__card.is-centered[b-x3l4xw52gj] {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.tour__card.is-anchored[b-x3l4xw52gj] {
    left: clamp(var(--mk-s4),
                calc(var(--tour-x) - var(--mk-tour-w) / 2),
                calc(100vw - var(--mk-tour-w) - var(--mk-s4)));
}

.tour__meta[b-x3l4xw52gj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-s2);
    margin-bottom: var(--mk-s3);
}

.tour__count[b-x3l4xw52gj] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
}

[b-x3l4xw52gj] .tour__skip {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-primary-ink);
}

[b-x3l4xw52gj] .tour__skip:hover { text-decoration: underline; }

.tour__icon[b-x3l4xw52gj] {
    font-size: var(--mk-t-page-sm);
    line-height: 1;
    margin-bottom: var(--mk-s2);
}

.tour__title[b-x3l4xw52gj] {
    margin: 0 0 var(--mk-s2);
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.tour__body[b-x3l4xw52gj] {
    margin: 0;
    font-size: var(--mk-t-body);
    line-height: 1.55;
    color: var(--mk-text-2);
}

.tour__dots[b-x3l4xw52gj] {
    display: flex;
    gap: var(--mk-s1);
    margin: var(--mk-s4) 0;
}

.tour__dot[b-x3l4xw52gj] {
    width: 6px;
    height: 6px;
    border-radius: var(--mk-r-pill);
    background: var(--mk-border);
    transition: width var(--mk-dur-fast) var(--mk-ease), background var(--mk-dur-fast) var(--mk-ease);
}

.tour__dot.is-on[b-x3l4xw52gj] {
    width: var(--mk-s4);
    background: var(--mk-primary);
}

.tour__actions[b-x3l4xw52gj] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--mk-s2);
}

[b-x3l4xw52gj] .tour__btn {
    height: var(--mk-ctrl-h);
    padding: 0 var(--mk-s4);
    border-radius: var(--mk-r-sm);
    font: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}

[b-x3l4xw52gj] .tour__btn--ghost {
    background: transparent;
    color: var(--mk-text-strong);
    border: 1px solid var(--mk-border);
}

[b-x3l4xw52gj] .tour__btn--primary {
    background: var(--mk-primary);
    color: var(--mk-text-oncolor);
    border: 1px solid var(--mk-primary);
}

[b-x3l4xw52gj] .tour__btn:focus-visible,
[b-x3l4xw52gj] .tour__skip:focus-visible {
    outline: 2px solid var(--mk-primary-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tour__spot[b-x3l4xw52gj],
    .tour__dot[b-x3l4xw52gj] { transition: none; }
}
/* /Components/Shared/PfQuickNav.razor.rz.scp.css */
/* Quick links strip — see PfQuickNav.razor. Four columns on a phone, eight across on a
   desktop, so the whole set sits on one line where there is room for it. */
.pf-qn-wrap[b-6vcu07vzwz] {
    position: relative;
    margin-bottom: var(--rd-gap, var(--mk-s4));
    /* Above the alert toasts, which otherwise cover the open popup. Stays BELOW the top
       bar's own dropdowns (--mk-z-header-menu) — see design-tokens.css §3b. */
    z-index: var(--mk-z-page-pop);
}

/* A tab row (inside-app guide §12), not a second menu: five destinations plus More. It
   scrolls sideways on a narrow phone rather than wrapping into a grid. */
.pf-qn[b-6vcu07vzwz] {
    display: flex;
    gap: var(--mk-s1);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--mk-border);
}
.pf-qn[b-6vcu07vzwz]::-webkit-scrollbar { display: none; }

/* NavLink renders the <a>, which belongs to NavLink's scope, not this file's, so the
   link rules go through ::deep. */
.pf-qn[b-6vcu07vzwz]  .pf-qn-link,
.pf-qn[b-6vcu07vzwz]  .pf-qn-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--mk-s3);
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.pf-qn[b-6vcu07vzwz]  .pf-qn-link:hover,
.pf-qn[b-6vcu07vzwz]  .pf-qn-more:hover { color: var(--mk-text-strong); }

.pf-qn[b-6vcu07vzwz]  .pf-qn-link.active {
    color: var(--mk-primary-ink);
    border-bottom-color: var(--mk-primary);
}

.pf-qn[b-6vcu07vzwz]  .pf-qn-link:focus-visible,
.pf-qn[b-6vcu07vzwz]  .pf-qn-more:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: -2px; }

.pf-qn[b-6vcu07vzwz]  .pf-qn-more { margin-left: auto; }

.pf-qn-backdrop[b-6vcu07vzwz] {
    position: fixed;
    inset: 0;
    z-index: var(--mk-z-page-pop);
}

.pf-qn-pop[b-6vcu07vzwz] {
    position: absolute;
    top: calc(100% + var(--mk-s1));
    right: 0;
    z-index: var(--mk-z-page-pop-panel);
    min-width: 240px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--mk-s2);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-md);
    box-shadow: var(--mk-sh-lg);
}

.pf-qn-item[b-6vcu07vzwz] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    padding: var(--mk-s2) var(--mk-s3);
    border-radius: var(--mk-r-sm);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    text-decoration: none;
    white-space: nowrap;
}

.pf-qn-item:hover[b-6vcu07vzwz] { background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.pf-qn-item-ico[b-6vcu07vzwz] { font-size: var(--mk-t-card-sm); line-height: 1; }
/* /Components/Shared/PrivacyToggle.razor.rz.scp.css */
/* Label + helper on the left, the switch on one vertical axis on the right (guide §8.3). */
.pt-row[b-bkclxzxrgs] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) 0;
    border-bottom: 1px solid var(--mk-bg-subtle);
}

.pt-row:last-child[b-bkclxzxrgs] { border-bottom: none; }

.pt-label[b-bkclxzxrgs] {
    display: flex;
    align-items: center;
    gap: var(--mk-s2);
    font-size: var(--mk-t-body);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-strong);
    cursor: pointer;
}

.pt-hint[b-bkclxzxrgs] {
    font-size: var(--mk-t-secondary);
    color: var(--mk-text-2);
    margin-top: 2px;
    line-height: 1.5;
}

.pt-reason[b-bkclxzxrgs] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-fin-pending-fg);
    margin-top: var(--mk-s1);
}

.pt-lock[b-bkclxzxrgs] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }

.is-disabled .pt-label[b-bkclxzxrgs] { cursor: default; }

/* The switch is StackSwitch; dim it, not the explanation, when the row is disabled. */
.is-disabled[b-bkclxzxrgs]  [role="switch"] { opacity: .45; }
/* /Components/Shared/RegisterStepper.razor.rz.scp.css */
.reg-stepper[b-2u57yymer0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mk-s2);
    list-style: none;
    margin: 0 0 var(--mk-s5);
    padding: 0;
}

.reg-stepper-item[b-2u57yymer0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-s1);
    position: relative;
    text-align: center;
}

/* The connecting rule, drawn from each dot to the next one. */
.reg-stepper-item:not(:last-child)[b-2u57yymer0]::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--mk-border);
}
.reg-stepper-item.is-done:not(:last-child)[b-2u57yymer0]::after { background: var(--mk-fin-positive); }

.reg-stepper-dot[b-2u57yymer0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--mk-r-pill);
    border: 2px solid var(--mk-border-strong);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
}

.reg-stepper-label[b-2u57yymer0] {
    font-size: var(--mk-t-micro);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-muted);
}

.is-current .reg-stepper-dot[b-2u57yymer0] {
    border-color: var(--mk-primary);
    color: var(--mk-primary-ink);
    box-shadow: var(--mk-focus-ring);
}
.is-current .reg-stepper-label[b-2u57yymer0] { color: var(--mk-text-strong); }

.is-done .reg-stepper-dot[b-2u57yymer0] {
    border-color: var(--mk-fin-positive);
    background: var(--mk-fin-positive);
    color: var(--mk-text-oncolor);
}
.is-done .reg-stepper-label[b-2u57yymer0] { color: var(--mk-fin-positive-fg); }
/* /Components/Shared/SetupQuestionList.razor.rz.scp.css */
.sq-list[b-06ypejhmrr] {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
}

.sq-q[b-06ypejhmrr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mk-s4);
    padding: var(--mk-s3) var(--mk-s4);
    border-bottom: 1px solid var(--mk-border);
}

.sq-q:last-child[b-06ypejhmrr] {
    border-bottom: 0;
}

.sq-q-title[b-06ypejhmrr] {
    font-weight: var(--mk-fw-medium);
    color: var(--mk-text);
}

.sq-help[b-06ypejhmrr] {
    font-size: var(--mk-fs-sm);
    color: var(--mk-text-muted);
}

.sq-locked[b-06ypejhmrr] {
    font-size: var(--mk-fs-xs);
    color: var(--mk-warning-fg);
    margin-top: var(--mk-s1);
}

.sq-choice[b-06ypejhmrr] {
    display: flex;
    gap: var(--mk-s1);
    flex-shrink: 0;
}

[b-06ypejhmrr] .sq-btn {
    min-width: 56px;
    min-height: 36px;
    border: 1px solid var(--mk-border);
    background: var(--mk-bg-surface);
    color: var(--mk-text-2);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s1) var(--mk-s3);
    font-size: var(--mk-fs-sm);
    cursor: pointer;
}

[b-06ypejhmrr] .sq-btn:focus-visible {
    outline: none;
    box-shadow: var(--mk-focus-ring);
}

[b-06ypejhmrr] .sq-btn.is-on {
    border-color: var(--mk-primary-border);
    background: var(--mk-primary-soft);
    color: var(--mk-primary-ink);
    font-weight: var(--mk-fw-semibold);
}

@media (max-width: 599.98px) {
    .sq-q[b-06ypejhmrr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mk-s2);
    }

    [b-06ypejhmrr] .sq-btn {
        min-height: var(--mk-touch);
        min-width: 72px;
    }
}
/* /Components/Shared/SharedKhataLink.razor.rz.scp.css */
[b-282h2cbfr1] .mk-shared-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--mk-s3);
    text-align: left;
    padding: var(--mk-s3);
    margin-bottom: var(--mk-s3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    background: var(--mk-bg-surface);
    color: var(--mk-text);
    cursor: pointer;
    font: inherit;
}

[b-282h2cbfr1] .mk-shared-link:hover { border-color: var(--mk-border-strong); }
[b-282h2cbfr1] .mk-shared-link:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; }

.mk-shared-link-icon[b-282h2cbfr1] { font-size: var(--mk-t-section-sm); flex-shrink: 0; }

.mk-shared-link-text[b-282h2cbfr1] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-shared-link-text strong[b-282h2cbfr1] { color: var(--mk-text-strong); font-weight: var(--mk-fw-semibold); font-size: var(--mk-t-body); }
.mk-shared-link-text span[b-282h2cbfr1] { color: var(--mk-text-muted); font-size: var(--mk-t-secondary-sm); }

.mk-shared-link-figs[b-282h2cbfr1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    font-variant-numeric: tabular-nums;
}

.mk-shared-link-figs .is-get[b-282h2cbfr1] { color: var(--mk-fin-positive); }
.mk-shared-link-figs .is-give[b-282h2cbfr1] { color: var(--mk-fin-negative); }
/* /Components/Shared/SkipInstalment.razor.rz.scp.css */
.sk-row[b-24x7x766qz] { display: flex; align-items: center; gap: var(--mk-s2); flex-wrap: wrap; margin-top: var(--mk-s2); font-size: var(--mk-t-micro); color: var(--mk-text-2); }
.sk-state[b-24x7x766qz] { font-weight: var(--mk-fw-semibold); }
[b-24x7x766qz] .sk-link { background: none; border: none; padding: var(--mk-s1); color: var(--mk-primary-ink); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold); cursor: pointer; }
[b-24x7x766qz] .sk-btn { margin-top: var(--mk-s2); background: none; border: 1px dashed var(--mk-border-strong); border-radius: var(--mk-r-sm); padding: var(--mk-s1) var(--mk-s3); min-height: 32px; color: var(--mk-text-2); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); cursor: pointer; }
[b-24x7x766qz] .sk-btn:hover { border-color: var(--mk-primary); color: var(--mk-primary-ink); }
.sk-confirm[b-24x7x766qz] { margin-top: var(--mk-s2); padding: var(--mk-s2) var(--mk-s3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); background: var(--mk-bg-subtle); max-width: 480px; }
.sk-q[b-24x7x766qz] { font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); }
.sk-note[b-24x7x766qz] { font-size: var(--mk-t-micro); color: var(--mk-text-2); margin: var(--mk-s1) 0 var(--mk-s2); line-height: 1.45; }
.sk-actions[b-24x7x766qz] { display: flex; gap: var(--mk-s2); }
[b-24x7x766qz] .sk-keep, [b-24x7x766qz] .sk-go { flex: 1; min-height: 36px; border-radius: var(--mk-r-sm); font-weight: var(--mk-fw-bold); cursor: pointer; }
[b-24x7x766qz] .sk-keep { border: 1.5px solid var(--mk-border); background: var(--mk-bg-surface); color: var(--mk-text); }
[b-24x7x766qz] .sk-go { border: none; background: var(--mk-primary); color: var(--mk-primary-foreground); }
.sk-err[b-24x7x766qz] { margin-top: var(--mk-s1); font-size: var(--mk-t-micro); color: var(--mk-fin-negative-fg); }
/* /Components/Shared/SupportContactCard.razor.rz.scp.css */
.support-card[b-6qt6f3kqna] {
    display: flex;
    gap: var(--mk-s3);
    align-items: flex-start;
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-left: 3px solid var(--mk-primary);
    border-radius: var(--mk-r-md);
    padding: var(--mk-s4);
    margin: var(--mk-s5) 0;
}

.support-card-icon[b-6qt6f3kqna] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mk-r-sm);
    background: var(--mk-primary-lt);
    color: var(--mk-primary-ink);
    font-size: var(--mk-t-card);
}

.support-card-body[b-6qt6f3kqna] { min-width: 0; }

.support-card-title[b-6qt6f3kqna] {
    font-size: var(--mk-t-card);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
    margin-bottom: var(--mk-s1);
}

.support-card-text[b-6qt6f3kqna] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
    line-height: 1.6;
    margin-bottom: var(--mk-s2);
}

/* --mk-primary is ~2.9:1 on white; body-size text must use the ink variant. */
.support-card-link[b-6qt6f3kqna] {
    font-size: var(--mk-t-secondary);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-primary-ink);
    text-decoration: none;
    word-break: break-all;
}

.support-card-link:hover[b-6qt6f3kqna] { text-decoration: underline; }

.support-card-hours[b-6qt6f3kqna] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-muted);
    margin-top: var(--mk-s1);
}
/* /Components/Shared/UpiPaymentQr.razor.rz.scp.css */
/* The QR itself always sits on white. A UPI symbol needs its light quiet zone to decode, so this
   one panel deliberately does not follow the surface into dark mode — the frame around it does. */
.upi-qr-box[b-3yt8su7gll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mk-space-1);
    padding: var(--mk-space-3);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-bg-surface);
    text-align: center;
}

.upi-qr-head[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text-2);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.upi-qr-amount[b-3yt8su7gll] {
    font-size: var(--mk-t-section);
    font-weight: var(--mk-fw-bold);
    color: var(--mk-text-strong);
}

.upi-qr-svg[b-3yt8su7gll] {
    /* Literal white, deliberately: a QR code needs a white quiet zone around dark
       modules to stay scannable, so this surface must NOT follow the theme. Same
       reasoning as .login-qr-frame and the --mk-brand-mark-* tokens. */
    background: #fff;
    padding: var(--mk-space-2);
    border-radius: var(--mk-radius-md);
    line-height: 0;
}

.upi-qr-svg[b-3yt8su7gll]  svg { width: 100%; height: 100%; display: block; }

.upi-qr-vpa[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    font-weight: var(--mk-fw-semibold);
    color: var(--mk-text);
}

.upi-qr-vpa span[b-3yt8su7gll] {
    display: block;
    font-weight: var(--mk-fw-regular);
    color: var(--mk-text-2);
    word-break: break-all;
}

.upi-qr-apps[b-3yt8su7gll] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
}

.upi-qr-note[b-3yt8su7gll] {
    font-size: var(--mk-t-micro);
    color: var(--mk-text-2);
    line-height: 1.4;
    max-width: 240px;
}

.upi-qr-msg[b-3yt8su7gll] {
    font-size: var(--mk-t-secondary-sm);
    color: var(--mk-text-2);
}

.upi-qr-warn[b-3yt8su7gll] {
    color: var(--mk-fin-negative);
    background: var(--mk-fin-negative-lt);
    border-color: var(--mk-fin-negative-br);
}
/* /Components/Shared/ZenTransactionInput.razor.rz.scp.css */
/* Quick Entry sheet. Centred dialog on tablet/desktop, bottom sheet on a phone (thumb reach).
   LcIcon renders its own element, so any rule styling an icon needs ::deep. */

.qe-scrim[b-7do1qan9ny] {
    position: fixed; inset: 0; z-index: 2147483000; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    padding: var(--mk-s4);
    background: var(--mk-bg-scrim);
    overflow-y: auto;
    -webkit-tap-highlight-color: transparent;
}

.qe-panel[b-7do1qan9ny] {
    width: 100%; max-width: 460px; margin: auto;
    display: flex; flex-direction: column; gap: var(--mk-s3);
    padding: var(--mk-s4) var(--mk-s5) var(--mk-s5);
    background: var(--mk-bg-surface);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-r-lg);
    box-shadow: var(--mk-sh-lg);
    font-family: var(--mk-font);
}

/* ── Header ── */
.qe-head[b-7do1qan9ny] { display: flex; align-items: center; gap: var(--mk-s3); }
.qe-seg[b-7do1qan9ny] {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 2px; border-radius: var(--mk-r-md); background: var(--mk-bg-subtle);
}
[b-7do1qan9ny] .qe-seg-btn {
    min-height: 40px; border: none; border-radius: var(--mk-r-md);
    background: transparent; color: var(--mk-text-2);
    font: inherit; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}
[b-7do1qan9ny] .qe-seg-btn.qe-on-exp { background: var(--mk-bg-surface); color: var(--mk-fin-negative-fg); box-shadow: var(--mk-sh-md); }
[b-7do1qan9ny] .qe-seg-btn.qe-on-inc { background: var(--mk-bg-surface); color: var(--mk-fin-positive-fg); box-shadow: var(--mk-sh-md); }
[b-7do1qan9ny] .qe-icon-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--mk-r-md);
    background: transparent; color: var(--mk-text-2); cursor: pointer;
}
[b-7do1qan9ny] .qe-icon-btn:hover { background: var(--mk-bg-subtle); }

/* ── Repeats ── */
.qe-repeats[b-7do1qan9ny] {
    display: flex; align-items: center; gap: var(--mk-s2);
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.qe-repeats[b-7do1qan9ny]::-webkit-scrollbar { display: none; }
.qe-repeats-label[b-7do1qan9ny] {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--mk-s1);
    font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
    color: var(--mk-text-muted); text-transform: uppercase; letter-spacing: .05em;
}
[b-7do1qan9ny] .qe-repeat {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--mk-s1);
    max-width: 210px; min-height: 36px; padding: 0 var(--mk-s3);
    border: 1px dashed var(--mk-border-strong); border-radius: var(--mk-r-pill);
    background: var(--mk-bg-surface); color: var(--mk-text-strong);
    font: inherit; font-size: var(--mk-t-secondary-sm); cursor: pointer;
}
[b-7do1qan9ny] .qe-repeat:hover { border-color: var(--mk-primary); background: var(--mk-primary-lt); }
[b-7do1qan9ny] .qe-repeat:disabled { opacity: .6; cursor: default; }
.qe-repeat-name[b-7do1qan9ny] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-repeat-amt[b-7do1qan9ny] { font-weight: var(--mk-fw-semibold); font-variant-numeric: tabular-nums; }

/* ── Amount ── */
.qe-amount[b-7do1qan9ny] {
    display: flex; align-items: center; justify-content: center; gap: var(--mk-s2);
    padding: var(--mk-s2) 0;
    border-bottom: 2px solid var(--mk-fin-negative-br);
    color: var(--mk-fin-negative-fg);
}
.qe-amount.qe-amount-inc[b-7do1qan9ny] { border-bottom-color: var(--mk-fin-positive-br); color: var(--mk-fin-positive-fg); }
.qe-amount:focus-within[b-7do1qan9ny] { border-bottom-color: currentColor; }
.qe-rupee[b-7do1qan9ny] { font-size: var(--mk-t-section); font-weight: var(--mk-fw-semibold); }
.qe-amount-input[b-7do1qan9ny] {
    width: 100%; max-width: 260px; min-width: 0;
    border: none; outline: none; background: transparent;
    color: var(--mk-text-strong); text-align: center;
    font: inherit; font-size: var(--mk-t-page); font-weight: var(--mk-fw-bold);
    font-variant-numeric: tabular-nums;
}
.qe-amount-input[b-7do1qan9ny]::placeholder { color: var(--mk-text-muted); }

/* ── Category chips ── */
.qe-chips[b-7do1qan9ny] { display: flex; flex-wrap: wrap; gap: var(--mk-s2); justify-content: center; }
[b-7do1qan9ny] .qe-chip {
    display: inline-flex; align-items: center; gap: var(--mk-s1);
    min-height: 36px; padding: 0 var(--mk-s3);
    border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill);
    background: var(--mk-bg-app); color: var(--mk-text-2);
    font: inherit; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold);
    cursor: pointer;
}
[b-7do1qan9ny] .qe-chip.qe-chip-on { border-color: var(--mk-primary); background: var(--mk-primary-lt); color: var(--mk-primary-ink); }

/* ── Note ── */
[b-7do1qan9ny] .qe-note {
    width: 100%; box-sizing: border-box; min-height: var(--mk-touch);
    padding: 0 var(--mk-s3) !important;
    border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md);
    background: var(--mk-bg-surface); color: var(--mk-text-strong);
    font: inherit; font-size: var(--mk-t-body);
}
[b-7do1qan9ny] .qe-note:focus-within { outline: 2px solid var(--mk-primary); outline-offset: -1px; }

/* ── Account + day ── */
.qe-meta[b-7do1qan9ny] { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s3); flex-wrap: wrap; }
.qe-acct[b-7do1qan9ny] {
    display: inline-flex; align-items: center; gap: var(--mk-s1); min-width: 0;
    font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted);
}
.qe-acct[b-7do1qan9ny]  select {
    min-width: 0; max-width: 200px; min-height: 36px;
    border: none; background: transparent; cursor: pointer;
    color: var(--mk-primary-ink); font: inherit; font-weight: var(--mk-fw-semibold);
}
.qe-day[b-7do1qan9ny] { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--mk-r-pill); background: var(--mk-bg-subtle); }
[b-7do1qan9ny] .qe-day-btn {
    min-height: 32px; padding: 0 var(--mk-s3);
    border: none; border-radius: var(--mk-r-pill); background: transparent;
    color: var(--mk-text-2); font: inherit; font-size: var(--mk-t-secondary-sm); cursor: pointer;
}
[b-7do1qan9ny] .qe-day-btn.qe-day-on { background: var(--mk-bg-surface); color: var(--mk-text-strong); font-weight: var(--mk-fw-semibold); box-shadow: var(--mk-sh-md); }

.qe-error[b-7do1qan9ny] { font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold); color: var(--mk-danger-fg); text-align: center; }

/* ── Save ── */
[b-7do1qan9ny] .qe-save {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--mk-s2);
    width: 100%; min-height: 48px;
    border: none; border-radius: var(--mk-r-md);
    background: var(--mk-primary); color: var(--mk-text-onprimary);
    font: inherit; font-size: var(--mk-t-body); font-weight: var(--mk-fw-bold);
    cursor: pointer; box-shadow: var(--mk-sh-md);
}
[b-7do1qan9ny] .qe-save:hover:not(:disabled) { background: var(--mk-primary-hover); }
[b-7do1qan9ny] .qe-save:disabled { opacity: .7; cursor: default; }

/* ── Footer links ── */
.qe-foot[b-7do1qan9ny] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mk-s1) var(--mk-s4); }
.qe-foot a[b-7do1qan9ny] {
    display: inline-flex; align-items: center; gap: var(--mk-s1); min-height: 36px;
    color: var(--mk-primary-ink); text-decoration: none;
    font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-semibold);
}
.qe-foot a:hover[b-7do1qan9ny] { text-decoration: underline; }

/* ── Undo snackbar ── */
.qe-snack[b-7do1qan9ny] {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 2147483000;
    display: flex; align-items: center; gap: var(--mk-s3);
    max-width: calc(100vw - 32px);
    padding: var(--mk-s2) var(--mk-s2) var(--mk-s2) var(--mk-s4);
    border-radius: var(--mk-r-md);
    background: var(--mk-text-strong); color: var(--mk-bg-surface);
    box-shadow: var(--mk-sh-lg);
    font-family: var(--mk-font); font-size: var(--mk-t-secondary-sm);
}
.qe-snack-text[b-7do1qan9ny] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-7do1qan9ny] .qe-snack-undo {
    flex-shrink: 0; min-height: 36px; padding: 0 var(--mk-s3);
    border: none; border-radius: var(--mk-r-md); background: transparent; cursor: pointer;
    color: inherit; font: inherit; font-weight: var(--mk-fw-bold); text-decoration: underline; text-transform: uppercase;
}

/* Phone: a bottom sheet in thumb reach, and the snackbar clears the tab bar. */
@media (max-width: 599.98px) {
    .qe-scrim[b-7do1qan9ny] { align-items: flex-end; padding: 0; }
    .qe-panel[b-7do1qan9ny] {
        max-width: none; margin: 0;
        border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0;
        border-bottom: none;
        padding-bottom: calc(var(--mk-s5) + env(safe-area-inset-bottom));
    }
    .qe-snack[b-7do1qan9ny] { bottom: 84px; }
}