/* _content/NepalBrokers.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout (shell) — Blazor scoped CSS: this component's own plain-HTML elements — the topbar
   brand (<a>), the search box and its results dropdown, the sync pill, the mobile bottom tab bar,
   and the auth-loading splash. The MudBlazor-internal shell chrome and the portaled bits live in
   app.css (see NB-MAINLAYOUT-CHROME): the --nb-topbar-h root var, .nb-topbar (MudAppBar),
   .nb-topbar .mud-toolbar, .nb-main-content (MudMainContent), the .nb-drawer overlay rules,
   .nb-topbar-brand/.nb-hamburger visibility, the .nb-newlisting-btn MudButton touch rules, and the
   PORTALED .nb-notif-popover and its rows (a MudPopover renders at the document root, outside this
   component, so Blazor scoping can't reach it). */

/* Topbar brand — a plain <a> (NB-LOGO-HOME). */
.nb-brand[b-ayamnq5c3t] {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.nb-brand:hover[b-ayamnq5c3t] { text-decoration: none; color: inherit; }
.nb-brand-mark[b-ayamnq5c3t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0F7A4A 0%, #0B5E39 100%);
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(15,122,74,.25);
    flex: none;
}
.nb-brand-text[b-ayamnq5c3t] {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 19px;
    color: #0F172A;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.nb-brand-accent[b-ayamnq5c3t] { color: #0F7A4A; }

/* Topbar identity meta (rendered when present). */
.nb-user-meta[b-ayamnq5c3t] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.nb-user-name[b-ayamnq5c3t] {
    font-size: 12.5px;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
}
.nb-user-role[b-ayamnq5c3t] {
    font-size: 10.5px;
    color: #0F7A4A;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
@media (max-width: 720px) {
    .nb-user-meta[b-ayamnq5c3t] { display: none; }
}

.topbar-search[b-ayamnq5c3t] { position: relative; }
/* NB-DB-007: pin placeholder colour so the search prompt clears WCAG AA contrast (#64748B on
   white = 4.96:1) instead of the browser default light grey. opacity:1 keeps Firefox from
   fading it back below 4.5:1. */
.topbar-search input[b-ayamnq5c3t]::placeholder {
    color: #64748B;
    opacity: 1;
}
.search-dropdown[b-ayamnq5c3t] {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(15,23,42,.18);
    max-height: 440px;
    overflow-y: auto;
    z-index: 9999;
}
.search-dropdown .sec-head[b-ayamnq5c3t] {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: #F6F7F5;
    border-bottom: 1px solid #F1F5F9;
}
.search-dropdown .sec-row[b-ayamnq5c3t] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
    color: #0F172A;
    cursor: pointer;
}
.search-dropdown .sec-row:hover[b-ayamnq5c3t] {
    background: #ECF7EF;
}
.search-dropdown .sec-empty[b-ayamnq5c3t] {
    padding: 24px 14px;
    text-align: center;
    font-size: 13px;
    color: #64748B;
}
.sync-pill[b-ayamnq5c3t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-right: 8px;
    background: #F1F5F9;
    border-radius: 14px;
    font-size: 11.5px;
    color: #475569;
    font-weight: 600;
}
.sync-dot[b-ayamnq5c3t] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94A3B8;
}
.sync-dot.ok[b-ayamnq5c3t] { background: #16A34A; }
.sync-dot.pending[b-ayamnq5c3t] {
    background: #F59E0B;
    animation: sync-pulse-b-ayamnq5c3t 1.4s infinite;
}
@keyframes sync-pulse-b-ayamnq5c3t {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* Mobile bottom tab bar — visible only on small screens (display:flex flips in at <=959.98px). */
.mtabs[b-ayamnq5c3t] {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 12px rgba(15,23,42,.08);
    /* Bottom inset clears the iOS home indicator; left/right clear the landscape notch. */
    padding: 4px env(safe-area-inset-right, 0px) calc(4px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px);
}
.mtabs button[b-ayamnq5c3t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    padding: 6px 4px;
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    min-height: 52px;
}
.mtabs button.active[b-ayamnq5c3t] {
    color: var(--mud-palette-primary, #0F7A4A);
    font-weight: 700;
}
.mtabs .mtab-icon[b-ayamnq5c3t] {
    font-size: 20px;
    line-height: 1;
}
.mtabs .mtab-label[b-ayamnq5c3t] {
    font-size: 11px;
}
/* 960px == the drawer's Responsive breakpoint (Md): below it the drawer is a temporary overlay
   and the bottom tab bar takes over as primary nav; above it the persistent sidebar is enough and
   the tabs hide. (The paired .nb-main-content / .nb-drawer overlay rules for this breakpoint live
   in app.css — they target MudBlazor internals.) */
@media (max-width: 959.98px) {
    .mtabs[b-ayamnq5c3t] { display: flex; }
}

/* ===== Narrow-phone condensing ===== */
@media (max-width: 599.98px) {
    .nb-brand-text[b-ayamnq5c3t] { font-size: 17px; }
    .sync-pill .sync-text[b-ayamnq5c3t] { display: none; }   /* dot-only status on phones */
    .sync-pill[b-ayamnq5c3t] { padding: 4px 7px; margin-right: 4px; }
    .nb-newlisting-label[b-ayamnq5c3t] { display: none; }    /* icon-only add button (label span is plain HTML) */
}
@media (max-width: 360px) {
    .nb-brand-text[b-ayamnq5c3t] { display: none; }    /* tightest phones: keep just the N mark */
}

.nb-auth-loading[b-ayamnq5c3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60dvh;
}
/* _content/NepalBrokers.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu (shell) — Blazor scoped CSS: this component's own visual elements.
   The drawer-chrome rules (.nb-drawer .mud-drawer-content flex layout and .nb-drawer .mud-navmenu
   scroll + scrollbars) target MudBlazor drawer internals that have no plain-HTML ancestor to
   anchor ::deep on in the all-Mud shell (MudLayout / MudDrawer), so they live in app.css next to
   the other .nb-drawer overrides — not here. The rail-footer's MudAvatar and MudIconButton are
   reached with ::deep through the plain .rail-footer. */

/* Brand */
.nav-brand-mark[b-hr06182dfg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--nb-primary) 0%, var(--nb-primary-dark) 100%);
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 19px;
    font-weight: 700;
    flex: none;
    border: none;
}
.nav-brand-text[b-hr06182dfg] {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: var(--nb-fg);
}
.nav-brand-accent[b-hr06182dfg] { color: var(--nb-primary); }
.nav-brand-sub[b-hr06182dfg] {
    font-size: 10.5px;
    color: var(--nb-fg-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 3px;
}

.scope-pill[b-hr06182dfg] {
    margin: 0 12px 12px;
    padding: 8px 12px;
    background: var(--nb-primary-bg);
    border: 1px solid var(--nb-primary-ring);
    border-radius: 8px;
    font-size: 11px;
    color: var(--nb-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    overflow: hidden;
}
.scope-pill .dot[b-hr06182dfg] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nb-primary);
    box-shadow: 0 0 0 3px var(--nb-primary-ring);
    flex: none;
}
.scope-pill-label[b-hr06182dfg] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail-footer[b-hr06182dfg] {
    margin: 16px 12px 12px;
    padding: 10px;
    background: var(--nb-bg);
    border: 1px solid var(--nb-border-soft);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    overflow: hidden;
}
/* NB-FOOTER-DEEP: the avatar and the sign-out/settings icon buttons are MudBlazor components;
   reach them via ::deep through the plain .rail-footer. */
.rail-footer[b-hr06182dfg]  .mud-avatar { flex: none; }
.rail-foot-meta[b-hr06182dfg] {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}
.rail-foot-name[b-hr06182dfg] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nb-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-foot-role[b-hr06182dfg] {
    font-size: 11px;
    color: var(--nb-fg-muted);
}
.rail-footer[b-hr06182dfg]  .mud-icon-button { color: var(--nb-fg-muted) !important; }
.rail-footer[b-hr06182dfg]  .mud-icon-button:hover { background: var(--nb-primary-bg) !important; }

.nav-skeleton[b-hr06182dfg] {
    padding: 8px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nav-skel-row[b-hr06182dfg] {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 100%);
    background-size: 200% 100%;
    animation: nav-skel-shimmer-b-hr06182dfg 1.3s infinite linear;
}
.nav-skel-row:nth-child(odd)[b-hr06182dfg] { width: 70%; }
.nav-skel-row:nth-child(even)[b-hr06182dfg] { width: 86%; }
@keyframes nav-skel-shimmer-b-hr06182dfg {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* _content/NepalBrokers.Web/Components/Pages/AddListing.razor.rz.scp.css */
/* Add Listing page — Blazor scoped CSS (moved from the page's global style block).
   The form is a MudPaper (.nb-quickadd) and its touch targets are MudButtons, whose roots do not
   carry this component's [b-hash]. The markup wraps the form in a plain .nb-quickadd-host div so
   ::deep can anchor the scope; every rule that targets the MudPaper or a MudBlazor control inside
   it hangs off that host. The plain-HTML blocks (.vis-card, .photo-*) scope normally; the one
   MudBlazor target among them is .photo-remove (a MudIconButton), reached via ::deep through the
   plain .photo-preview. */

.nb-quickadd-host[b-7ec2hoitfp]  .nb-quickadd { max-width: 100%; overflow-x: hidden; }

/* NB-MOBILE: the client's brokers are on 320 px handsets. Nothing in this form may push the
   page sideways, and every tappable thing must clear 44 px. */
/* NB-MOBILE-MODERATE (2026-09-07): quick-add tap targets 44/48 → 40 (compact but tappable). */
.nb-quickadd-host[b-7ec2hoitfp]  .nb-tap { min-height: 40px; }
.nb-quickadd-host[b-7ec2hoitfp]  .nb-more-toggle { min-height: 40px; font-weight: 600; }
/* The suggestion carries a whole title in its label, which is longer than a button normally
   holds. MudBlazor keeps button labels on one line, so both the root and the label have to be
   let go — otherwise a 320 px screen scrolls sideways to read it. */
.nb-quickadd-host[b-7ec2hoitfp]  .nb-title-suggest,
.nb-quickadd-host[b-7ec2hoitfp]  .nb-title-suggest .mud-button-label {
    min-height: 40px;
    text-align: left;
    white-space: normal;
}

@media (max-width: 420px) {
    /* Stack the action row so Save owns a full line instead of competing for width. Reversed
       so Save — the thing they came for — sits on top, under the thumb. */
    .nb-quickadd-host[b-7ec2hoitfp]  .nb-actions { flex-direction: column-reverse; align-items: stretch; }
    .nb-quickadd-host[b-7ec2hoitfp]  .nb-actions .mud-button-root { width: 100%; }
}

.vis-card[b-7ec2hoitfp] {
    border: 2px solid #E5E7EB;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all .12s ease;
    /* 44 px minimum touch target, and it must never be wider than its column. */
    min-height: 44px;
    max-width: 100%;
}
.vis-card:hover[b-7ec2hoitfp] { border-color: #0F7A4A; }
.vis-card .title[b-7ec2hoitfp] { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.vis-card .desc[b-7ec2hoitfp]  { color: #64748B; font-size: 12px; }
.vis-card.selected[b-7ec2hoitfp] { background: #ECF7EF; }
.vis-card.selected.private[b-7ec2hoitfp] { border-color: #D2385A; }
.vis-card.selected.team[b-7ec2hoitfp]    { border-color: #7C3AED; }
.vis-card.selected.public[b-7ec2hoitfp]  { border-color: #C6922A; }

.photo-preview-row[b-7ec2hoitfp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.photo-preview[b-7ec2hoitfp] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
}
.photo-preview img[b-7ec2hoitfp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* NB-PHOTOREMOVE-DEEP: .photo-remove is a MudIconButton; reach it via ::deep through the plain
   .photo-preview. */
.photo-preview[b-7ec2hoitfp]  .photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255,255,255,0.92);
}
.photo-preview .photo-meta[b-7ec2hoitfp] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15,23,42,0.65);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    text-align: center;
}
/* _content/NepalBrokers.Web/Components/Pages/AdminApprovals.razor.rz.scp.css */
/* Admin Approvals page — Blazor scoped CSS (moved from the page's global <style>).
   Page-local classes on plain HTML this component renders (no child-component styling). */

/* NB-REG-INTAKE: expanded review details on a pending registration row. */
.reg-detail-row td[b-90h1vil5v5] { background: #FAFBFA; }
.reg-detail[b-90h1vil5v5] { padding: 10px 12px; }
.reg-detail-grid[b-90h1vil5v5] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 24px; font-size: 13px;
}
.reg-detail-grid .k[b-90h1vil5v5] {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: #64748B; font-weight: 700;
}
.reg-detail-grid .v[b-90h1vil5v5] { display: block; color: #1F2937; }

/* NB-REG-PLACE: the placement picker sits in the detail grid but needs the full row — a
   province name plus a ward box does not fit a 220px column. */
.reg-detail-grid .reg-place[b-90h1vil5v5] { grid-column: 1 / -1; }
/* NB-GEO: the fill-in-the-gaps panel. Boxed and tinted so it reads as the one editable region
   in a detail block that is otherwise a read-out. */
.reg-fill[b-90h1vil5v5] {
    border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px;
    background: #FBFDFC; margin-bottom: 14px;
}
.reg-fill-head[b-90h1vil5v5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.reg-fill-head .k[b-90h1vil5v5] {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #64748B;
}

/* The blocker belongs on the row, not in a snackbar after a failed click. */
.reg-needs[b-90h1vil5v5] {
    display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px;
    background: #FBF4E3; color: #B45309; border: 1px solid #E8CE7A;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}

/* NB-KYC-UPLOAD: document links on a pending KYC row. */
.kyc-docs[b-90h1vil5v5] { display: flex; flex-wrap: wrap; gap: 6px; }
.kyc-doc-link[b-90h1vil5v5] {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 999px;
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    color: #0F172A; text-decoration: none; max-width: 100%;
}
.kyc-doc-link:hover[b-90h1vil5v5] { border-color: #0F7A4A; color: #0F7A4A; }
.kyc-doc-link span[b-90h1vil5v5] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kyc-doc-link .k-type[b-90h1vil5v5] { color: #64748B; font-weight: 500; }
/* _content/NepalBrokers.Web/Components/Pages/Appointments.razor.rz.scp.css */
/* Appointments page — Blazor scoped CSS (moved from the page's global <style>).
   Page-local classes; all target plain HTML this component renders (no child-component styling). */
.appt-day[b-hersaj46au] {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--nb-fg-muted, #6b7280); margin: 18px 0 8px;
}

.appt-row[b-hersaj46au] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--nb-line, #e6e8e6); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px;
}

/* NB-APPT-REASSIGN: whose appointment this is, shown to managers only. */
.appt-owner[b-hersaj46au] {
    font-size: 12px; color: var(--nb-fg-muted, #6b7280); white-space: nowrap;
    background: var(--nb-bg, #f6f7f6); border-radius: 999px; padding: 3px 10px;
}

.appt-time[b-hersaj46au] { min-width: 62px; text-align: center; }
.appt-hh[b-hersaj46au] { font-weight: 700; font-size: 15px; }
.appt-dur[b-hersaj46au] { font-size: 11px; color: var(--nb-fg-muted, #6b7280); }
.appt-body[b-hersaj46au] { flex: 1; min-width: 220px; }
.appt-title[b-hersaj46au] { font-weight: 600; margin-bottom: 2px; }
.appt-meta[b-hersaj46au] { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--nb-fg-muted, #6b7280); }
.appt-meta a[b-hersaj46au] { color: var(--nb-primary, #2f6b46); text-decoration: none; }
.appt-meta a:hover[b-hersaj46au] { text-decoration: underline; }
.appt-notes[b-hersaj46au] { font-style: italic; }
.appt-actions[b-hersaj46au] { display: flex; gap: 6px; flex-wrap: wrap; }
/* _content/NepalBrokers.Web/Components/Pages/Brokers.razor.rz.scp.css */
/* Brokers page — Blazor scoped CSS (moved from the page's global style block).
   Classes on plain HTML this component renders are scoped normally; classes that sit on a
   MudBlazor child (MudPaper/MudAvatar/MudIcon) are reached with ::deep because the child's
   root element does not carry this component's [b-hash] scope attribute. */

/* NB-BROKERS-STATS: currently unused (the page renders its KPIs via the shared .nb-kpis grid).
   Kept for parity and future use; the responsive tier steps live here because scoping raises
   the grid's specificity enough to tie the shared stat-grid rule in app.css and win on source
   order, so mobile/tablet would otherwise stay 4-up. 4 cols desktop / 2 tablet / 1 mobile. */
.b-stats[b-b79lkhej3k] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 959.98px) { .b-stats[b-b79lkhej3k] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .b-stats[b-b79lkhej3k] { grid-template-columns: 1fr; } }
.b-stats .stat-card[b-b79lkhej3k] {
    padding: 14px 16px;
    border-radius: 12px;
}
.b-stats .lbl[b-b79lkhej3k] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
}
.b-stats .cnt[b-b79lkhej3k] {
    font-family: 'JetBrains Mono', monospace;
    /* NB-MOBILE-MODERATE (2026-09-07): use the shared KPI token (26 desktop / 20 mobile) instead
       of a fixed 26 so the stat figure compacts on phones like every other KPI. */
    font-size: var(--kpi-fs);
    font-weight: 700;
    margin-top: 4px;
}
.b-stats .sub[b-b79lkhej3k] {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Agent directory grid + cards. */
.agent-grid[b-b79lkhej3k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
/* NB-CARD-DEEP: .agent-card sits on a MudPaper, so its root needs ::deep to inherit this
   component's scope through the .agent-grid ancestor (a plain div that carries the hash). */
.agent-grid[b-b79lkhej3k]  .agent-card {
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.agent-grid[b-b79lkhej3k]  .agent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15,122,74,.08);
}
.agent-card-head[b-b79lkhej3k] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* NB-AVATAR-DEEP: .agent-avatar is a MudAvatar; reach it through the plain .agent-card-head. */
.agent-card-head[b-b79lkhej3k]  .agent-avatar {
    font-weight: 700;
}
.agent-card-id[b-b79lkhej3k] {
    flex: 1;
    min-width: 0;
}
.agent-name[b-b79lkhej3k] {
    font-weight: 700;
    font-size: 14px;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-meta[b-b79lkhej3k] {
    font-size: 11.5px;
    color: #64748B;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-card-row[b-b79lkhej3k] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.agent-card-detail[b-b79lkhej3k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #F1F5F9;
    padding-top: 10px;
}
.detail-row[b-b79lkhej3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}
/* NB-ICON-DEEP: .detail-icon is a MudIcon; reach it through the plain .detail-row row. */
.detail-row[b-b79lkhej3k]  .detail-icon {
    color: #94A3B8;
}
.rating-row[b-b79lkhej3k] {
    gap: 6px;
}
.rating-meta[b-b79lkhej3k] {
    font-size: 11.5px;
    color: #64748B;
}

/* Read-only KYC status row. */
.kyc-readonly[b-b79lkhej3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 14px;
    flex-wrap: wrap;
}
.kyc-readonly > div:first-child[b-b79lkhej3k] {
    min-width: 0;
}
.kyc-readonly .k-lbl[b-b79lkhej3k] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
    margin-bottom: 4px;
}
.kyc-readonly .k-reason[b-b79lkhej3k] {
    font-size: 12px;
    color: #B4232F;
    margin-top: 6px;
    max-width: 340px;
}
/* _content/NepalBrokers.Web/Components/Pages/Chat.razor.rz.scp.css */
/* Chat page — Blazor scoped CSS (moved from the page's global style block).
   The conversation UI is wrapped in a plain .nb-chat-root div so ::deep can reach the many
   MudBlazor targets whose roots don't carry this component's [b-hash] (thread rows on
   MudListItem, the thread-pane MudItem, the back-button MudTooltip, the header MudToolBar,
   message bubbles on MudPaper, the delete MudIconButton, and the composer/attachment MudButton
   and MudInput internals). The original rules used a .nb-main-content prefix purely to out-
   specify MudBlazor; ::deep from a scoped ancestor does the same without a global selector. */

/* Message rows are plain HTML; the delete button is a MudIconButton reached via ::deep. */
.chat-msg-row[b-ofgd8crq5w]  .chat-msg-delete { opacity: 0; transition: opacity .15s ease; }
.chat-msg-row:hover[b-ofgd8crq5w]  .chat-msg-delete { opacity: 1; }
@media (hover: none) {
    /* CHAT-5: touch devices have no persistent hover state, so the hover-only delete
       icon above would otherwise stay invisible/undiscoverable on phones and tablets. */
    .chat-msg-row[b-ofgd8crq5w]  .chat-msg-delete { opacity: 1; }
}
.chat-msg-selected[b-ofgd8crq5w] { background: rgba(15,122,74,.08); border-radius: 8px; }

/* Message bubbles: mine = green & right-squashed; theirs = white-bordered & left-squashed.
   .nb-bubble is a MudPaper, reached via ::deep through the plain .chat-msg-row. */
.chat-msg-row[b-ofgd8crq5w]  .nb-bubble { max-width: 72%; border-radius: 12px !important; box-shadow: none !important; font-size: 13px; overflow-wrap: break-word; }
.chat-msg-row[b-ofgd8crq5w]  .nb-bubble.me { background: var(--nb-primary); color: #fff; border: 1px solid var(--nb-primary); border-bottom-right-radius: 4px !important; }
.chat-msg-row[b-ofgd8crq5w]  .nb-bubble.them { background: #fff; color: var(--nb-fg); border: 1px solid var(--nb-border); border-bottom-left-radius: 4px !important; }
/* Thread list rows (MudListItem): soft green hover/active like the prototype's .thread-item. */
.nb-chat-root[b-ofgd8crq5w]  .nb-thread-item:hover, .nb-chat-root[b-ofgd8crq5w]  .nb-thread-item.active { background: var(--nb-primary-bg); }
/* Attachment row buttons (MudButtons) → soft rounded chips. */
.nb-attach[b-ofgd8crq5w]  .mud-button-root { background: var(--nb-bg); border: 1px solid var(--nb-border); border-radius: 8px; color: var(--nb-fg-muted); min-width: 0; }
.nb-attach[b-ofgd8crq5w]  .mud-button-root:hover { background: var(--nb-primary-bg); color: var(--nb-primary); border-color: var(--nb-primary-ring); }
/* Composer input (MudTextField) → rounded pill. */
.nb-composer[b-ofgd8crq5w]  .mud-input.mud-input-outlined, .nb-composer[b-ofgd8crq5w]  .mud-input-outlined-border { border-radius: 999px !important; }
.nb-composer[b-ofgd8crq5w]  .mud-input-outlined .mud-input-slot { padding-left: 8px; padding-right: 8px; }

/* ── CHAT-1: collapse the two-pane layout to a single pane below the Md breakpoint (960px) ──
   .nb-thread-pane-selected (on the thread-list MudItem) hides on mobile so only the conversation
   pane shows. .nb-chat-back-btn is a plain <span> wrapping the back button's MudTooltip — the
   class is on the span, not the tooltip, because MudBlazor 7 portals a tooltip's Class to a hidden
   popover at the document root. The span carries this component's [b-hash], so it scopes directly
   (no ::deep): hidden on desktop where both panes are visible, shown on mobile as the way back to
   the thread list. */
.nb-chat-back-btn[b-ofgd8crq5w] { display: none; }
@media (max-width: 960px) {
    /* Put on the thread-list MudItem only while a thread is selected, so mobile shows just
       the conversation pane instead of the full list stacked above it. */
    .nb-chat-root[b-ofgd8crq5w]  .nb-thread-pane-selected { display: none !important; }
    /* "Back to threads": mobile/tablet only. */
    .nb-chat-back-btn[b-ofgd8crq5w] { display: inline-flex !important; }
}

/* NB-CHAT-TOOLBAR-WRAP: the conversation header is a MudToolBar with flex-wrap so its
   right-hand actions (channel chip, "Add to Inquiries", select-messages) can drop to a
   second row when the thread title is long or the viewport is narrow. MudToolBar pins a
   FIXED dense height (48px), so the wrapped second row overflowed the bar and painted on
   top of the first message (the "Add to Inquiries overlaps the chat" report). Letting the
   bar grow to fit its wrapped content fixes it. height:auto only changes anything WHEN it
   wraps — on a single row it still measures 48px, so desktop is untouched. */
.nb-chat-root[b-ofgd8crq5w]  .mud-toolbar.flex-wrap {
    height: auto !important;
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
    row-gap: 6px;
}
/* _content/NepalBrokers.Web/Components/Pages/Crm.razor.rz.scp.css */
/* CRM page — Blazor scoped CSS (moved from the page's global style block).
   The inq- / col- / kanban- / summary- classes are the page's own copies (Inquiries and
   CrmPipeline keep their own separate copies), and .empty / .mono / .muted-sm are used only on
   this component's markup, so scoping is safe. */

/* NB-CRM-TABS: currently inert — MudTabs' root (.mud-tabs) is already transparent, so this
   never changed anything. Scoping leaves it inert (it no longer matches the MudTabs root, which
   stays transparent by default). If it ever needs to bite the MudTabs root, reach it with
   ::deep through a plain-HTML ancestor. */
.crm-tabs[b-1y5zgb9jw2] { background: transparent; }
.filter-label[b-1y5zgb9jw2] {
    font-size: 11px;
    color: #64748B;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
    align-self: center;
}

/* Pipeline summary strip (scrolls horizontally on narrow screens). */
.pipeline-summary[b-1y5zgb9jw2] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* NB-SUMMARY-DEEP: .summary-card sits on a MudPaper, so its root needs ::deep through the plain
   .pipeline-summary ancestor. Its .lbl/.cnt children are plain divs authored here, so they are
   scoped normally (their own [b-hash] plus the .summary-card ancestor class is enough). */
.pipeline-summary[b-1y5zgb9jw2]  .summary-card {
    padding: 10px 12px;
    background: #FAFBFA;
    border-radius: 10px;
    min-width: 130px;
}
.summary-card .lbl[b-1y5zgb9jw2] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.summary-card .cnt[b-1y5zgb9jw2] { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; margin-top: 4px; }
/* NB-MOBILE-MODERATE (2026-09-07): compact the summary figure on phones. */
@media (max-width: 600px) { .summary-card .cnt[b-1y5zgb9jw2] { font-size: 20px; } }

/* Kanban board (scrolls horizontally; columns keep a min-width). */
.kanban-board[b-1y5zgb9jw2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(200px, 1fr));
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.kanban-col[b-1y5zgb9jw2] { background: #FAFBFA; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px; min-height: 240px; transition: background .12s ease; }
.kanban-col.nb-drop-over[b-1y5zgb9jw2] { background: #ECF7EF; border-color: #0F7A4A; }
.col-head[b-1y5zgb9jw2] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.col-title[b-1y5zgb9jw2] { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.kanban-card[b-1y5zgb9jw2] { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .1s ease, box-shadow .1s ease; }
.kanban-card:hover[b-1y5zgb9jw2] { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.kanban-card.nb-dragging[b-1y5zgb9jw2] { opacity: .55; cursor: grabbing; transform: rotate(1.5deg); }
.kanban-card .name[b-1y5zgb9jw2] { font-weight: 600; font-size: 13px; }
.kanban-card .sub[b-1y5zgb9jw2] { color: #64748B; font-size: 11px; margin-top: 2px; }
.kanban-card .budget[b-1y5zgb9jw2] { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; margin-top: 6px; color: #0F172A; }
.empty[b-1y5zgb9jw2] { text-align: center; padding: 20px; color: #94A3B8; font-size: 12px; }

/* Inquiries-style list rows (this page's own copy). */
.inq-list[b-1y5zgb9jw2] { display: flex; flex-direction: column; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inq-row[b-1y5zgb9jw2] {
    display: grid;
    grid-template-columns: 1.6fr .8fr 1fr 1fr 1fr 1.8fr;
    gap: 10px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid #E2E8F0; font-size: 13px;
}
.inq-row.inq-head[b-1y5zgb9jw2] { background: #F8FAFC; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748B; font-weight: 700; border-bottom: 1px solid #CBD5E1; }
.inq-row:last-child[b-1y5zgb9jw2] { border-bottom: none; }
.col-name[b-1y5zgb9jw2] { display: flex; gap: 10px; align-items: center; }
.col-name .avatar[b-1y5zgb9jw2] { width: 32px; height: 32px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.col-name .nm[b-1y5zgb9jw2] { font-weight: 600; }
.col-name .ph[b-1y5zgb9jw2] { font-size: 11px; color: #64748B; }
.col-actions[b-1y5zgb9jw2] { display: flex; gap: 6px; justify-content: flex-end; }
.mono[b-1y5zgb9jw2] { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.muted-sm[b-1y5zgb9jw2] { font-size: 11px; color: #64748B; margin-top: 2px; }
/* _content/NepalBrokers.Web/Components/Pages/CrmPipeline.razor.rz.scp.css */
/* CRM Pipeline page — Blazor scoped CSS (moved from the page's global style block).
   The kanban- / summary- / pipeline- / col- / filter- / empty classes are this page's own
   copies (Crm keeps its own separate copies), all used only on this component's markup.
   Two classes sit on a MudPaper whose root does not carry this component's [b-hash] scope
   attribute, so they are reached with ::deep through a plain-HTML ancestor. */

/* NB-NOTIF-DEEP: .notif-banner is a MudPaper with no plain-HTML parent authored on the page, so
   the markup wraps it in .nb-notif-host purely to give ::deep an ancestor to hang the scope on.
   The banner's own children (.banner-icon/.banner-text and its strong/div) are plain HTML
   authored here, so they scope normally (subject carries the hash; .notif-banner matches by
   class). */
.nb-notif-host[b-a81qtg23x8]  .notif-banner {
    background: linear-gradient(90deg, #FEF3C7, #FFFBEB);
    border: 1px solid #F59E0B;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.notif-banner .banner-icon[b-a81qtg23x8] { font-size: 20px; }
.notif-banner .banner-text[b-a81qtg23x8] { flex: 1; font-size: 13px; }
.notif-banner .banner-text strong[b-a81qtg23x8] { color: #92400E; }
.notif-banner .banner-text div[b-a81qtg23x8] { color: #78350F; margin-top: 2px; }

.filter-label[b-a81qtg23x8] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
    align-self: center;
}

/* Pipeline summary strip (scrolls horizontally on narrow screens). */
.pipeline-summary[b-a81qtg23x8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* NB-SUMMARY-DEEP: .summary-card is a MudPaper; reach it through the plain .pipeline-summary
   ancestor. Its .lbl/.cnt/.bud children are plain divs authored here and scope normally. */
.pipeline-summary[b-a81qtg23x8]  .summary-card {
    padding: 10px 12px;
    background: #FAFBFA;
    border-radius: 10px;
    min-width: 140px;
}
.summary-card .lbl[b-a81qtg23x8] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748B;
}
.summary-card .cnt[b-a81qtg23x8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
}
/* NB-MOBILE-MODERATE (2026-09-07): compact the summary figure on phones. */
@media (max-width: 600px) { .summary-card .cnt[b-a81qtg23x8] { font-size: 20px; } }
.summary-card .bud[b-a81qtg23x8] {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}

/* Kanban board (scrolls horizontally; columns keep a min-width). */
.kanban-board[b-a81qtg23x8] {
    display: grid;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.kanban-col[b-a81qtg23x8] {
    background: #FAFBFA;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 10px;
    min-height: 240px;
    transition: background .12s ease;
}
.kanban-col.nb-drop-over[b-a81qtg23x8] {
    background: #ECF7EF;
    border-color: #0F7A4A;
}
.col-head[b-a81qtg23x8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.col-title[b-a81qtg23x8] {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kanban-card[b-a81qtg23x8] {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .1s ease, box-shadow .1s ease;
}
.kanban-card:hover[b-a81qtg23x8] { box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.kanban-card.nb-dragging[b-a81qtg23x8] {
    opacity: .55;
    cursor: grabbing;
    transform: rotate(1.5deg);
}
.kanban-card .name[b-a81qtg23x8] { font-weight: 600; font-size: 13px; }
.kanban-card .sub[b-a81qtg23x8]  { color: #64748B; font-size: 11px; margin-top: 2px; }
.kanban-card .budget[b-a81qtg23x8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    margin-top: 6px;
    color: #0F172A;
}
.kanban-card .tags[b-a81qtg23x8] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.kanban-card .tag[b-a81qtg23x8] {
    background: #ECF7EF;
    color: #0F7A4A;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
}
.empty[b-a81qtg23x8] {
    text-align: center;
    padding: 20px;
    color: #94A3B8;
    font-size: 12px;
}
/* _content/NepalBrokers.Web/Components/Pages/Customers.razor.rz.scp.css */
/* Customers page — Blazor scoped CSS (isolated to this component).
   Moved out of the page's global <style> block: these classes are page-local
   filter chrome, and CSS isolation keeps them from leaking to or being
   overridden by other pages. All selectors target plain HTML this component
   renders (no child-component styling), so no deep selectors are needed. */
.status-group[b-8iwg9u16nn] {
    margin-bottom: 12px;
}

.status-group-head[b-8iwg9u16nn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
}

.filter-label[b-8iwg9u16nn] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #64748B);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
    align-self: center;
}
/* _content/NepalBrokers.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* Dashboard page — Blazor scoped CSS (moved from the page's global style block).
   All selectors target this component's own markup. .mono and .nb-kpi have base rules in
   app.css that still apply globally; these scoped rules only add Dashboard-specific bits. */
.code-chip-sm[b-btla3ys3z0] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 1px 6px;
    border-radius: 4px;
}
.mono[b-btla3ys3z0] { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* NB-HERO-PLAIN: page header, not a band. Deliberately no background, border or shadow. The
   greeting is the page title; the green on this screen belongs to the rail and primary actions. */
.dash-head[b-btla3ys3z0] { margin-bottom: 18px; }
.dash-greeting[b-btla3ys3z0] {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--nb-fg);
    margin: 0;
}
.dash-meta[b-btla3ys3z0] {
    font-size: 12.5px;
    color: var(--nb-fg-muted);
    margin-top: 3px;
}
@media (max-width: 600px) {
    .dash-greeting[b-btla3ys3z0] { font-size: 21px; }
    .dash-head[b-btla3ys3z0] { margin-bottom: 14px; }
}

/* Dashboard parity helpers (prototype-matched) */
.nb-sec[b-btla3ys3z0] { margin-bottom: 16px; }
.nb-sec:last-child[b-btla3ys3z0] { margin-bottom: 0; }
.nb-band-emoji[b-btla3ys3z0] { font-size: 16px; line-height: 1; }
.nb-dline[b-btla3ys3z0] { font-size: 13px; color: var(--nb-fg-muted); line-height: 1.7; }
.nb-empty[b-btla3ys3z0] { color: var(--nb-fg-muted); font-size: 13px; padding: 16px; }
.nb-check[b-btla3ys3z0] { width: 16px; height: 16px; accent-color: var(--nb-primary); cursor: pointer; flex: none; }
.nb-likebtn[b-btla3ys3z0] { background: transparent; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; border-radius: 6px; transition: background var(--nb-transition); }
.nb-likebtn:hover[b-btla3ys3z0] { background: var(--nb-bg); }

/* NB-KPI-CLICK: the tiles are plain divs with role="button", so every affordance is declared by
   hand — pointer, lift on hover, and a visible focus ring for keyboard users. */
.nb-kpi.clickable[b-btla3ys3z0] { cursor: pointer; transition: box-shadow var(--nb-transition), transform var(--nb-transition), border-color var(--nb-transition); }
.nb-kpi.clickable:hover[b-btla3ys3z0] { box-shadow: var(--nb-shadow-md); transform: translateY(-1px); border-color: var(--nb-primary); }
.nb-kpi.clickable:focus-visible[b-btla3ys3z0] { outline: 2px solid var(--nb-primary); outline-offset: 2px; }
/* Respect users who have asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) { .nb-kpi.clickable:hover[b-btla3ys3z0] { transform: none; } }

/* NB-RECENT-MAP: the per-row map action. Sits between the title block and the type chip. */
.nb-hl-map[b-btla3ys3z0] { background: transparent; border: none; cursor: pointer; font-size: 14px; line-height: 1; padding: 5px; border-radius: 6px; flex: none; transition: background var(--nb-transition); }
.nb-hl-map:hover[b-btla3ys3z0] { background: var(--nb-primary-bg); }
.nb-hl-map:focus-visible[b-btla3ys3z0] { outline: 2px solid var(--nb-primary); outline-offset: 1px; }

/* NB-FOLLOWUP-CLICK: only the text block of a task row is clickable — never the checkbox. */
.nb-task-open[b-btla3ys3z0] { cursor: pointer; border-radius: 6px; }
.nb-task-open:hover .ti[b-btla3ys3z0] { color: var(--nb-primary); }
.nb-task-open:focus-visible[b-btla3ys3z0] { outline: 2px solid var(--nb-primary); outline-offset: 2px; }

/* NB-DB-001 / NB-DB-008 step 3: reserve vertical room for the three list widgets in the middle
   row (Recent Listings, VIP Customers, Today's Follow-ups) so first paint before the second-wave
   data does not collapse the card and flex the row oddly. */
.nb-list-widget[b-btla3ys3z0] {
    min-height: 280px;
}

/* NB-DB-006: visually separate Posts vs Team threads inside Team Chatter so two different action
   UIs (thumbs-up + count vs unread chip) do not read as the same kind of widget. */
.chatter-section-head[b-btla3ys3z0] {
    font-size: 10.5px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 6px 8px 4px;
    border-top: 1px solid #F1F5F9;
    margin-top: 4px;
}
.chatter-section-head:first-child[b-btla3ys3z0] {
    border-top: none;
    margin-top: 0;
}
/* _content/NepalBrokers.Web/Components/Pages/ForgotPassword.razor.rz.scp.css */
/* Forgot Password page — Blazor scoped CSS (moved from the page's global <style>).
   .nb-login-card is the shared auth card (base rules live in app.css); these are
   ForgotPassword-only additions and now scope to this component. */
.nb-login-card .fp-note[b-pckcnyqc6e] {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--nb-primary-bg); border: 1px solid var(--nb-primary-ring);
    border-radius: 12px; padding: 14px 16px; margin: 4px 0 18px;
    font-size: 13px; color: var(--nb-fg); line-height: 1.5;
}
.nb-login-card .fp-note .ic[b-pckcnyqc6e] { font-size: 18px; line-height: 1.2; }
/* _content/NepalBrokers.Web/Components/Pages/Inquiries.razor.rz.scp.css */
/* Inquiries page — Blazor scoped CSS (moved from the page's global style block).
   Generic class names (.lbl/.cnt/.sub/.avatar/.nm/.ph/.mono) are either nested under the
   page-unique inq- and col- containers or sit on this component's own row markup, so scoping
   is safe (nothing here styles a child component). */
/* NB-INQ-DEADSTATUS: 3 cards now (Unassigned / Assigned / Closed) after the dead
   "In Progress" card was removed.
   NOTE: keep comments OUTSIDE declaration blocks in scoped .razor.css — Blazor's
   scoped-CSS rewriter drops the block's declarations if a comment sits inside it. */
/* Own the responsive columns here: scoping adds the [b-hash] attribute, which raises this
   rule's specificity to (0,2,0) — tying the shared stat-grid rule in app.css and winning on
   source order — so the tier steps must live in the scoped file too, or mobile/tablet would
   stay 3-up. 3 cols desktop / 2 tablet / 1 mobile, matching the canonical tiers. */
.inq-stats[b-62tnyfeqt9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 959.98px) { .inq-stats[b-62tnyfeqt9] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .inq-stats[b-62tnyfeqt9] { grid-template-columns: 1fr; } }
.inq-stats .stat-card[b-62tnyfeqt9] {
    padding: 14px 16px;
    border-radius: 12px;
}
.inq-stats .lbl[b-62tnyfeqt9] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
}
.inq-stats .cnt[b-62tnyfeqt9] {
    font-family: 'JetBrains Mono', monospace;
    /* NB-MOBILE-MODERATE (2026-09-07): shared KPI token (26 desktop / 20 mobile) so the stat
       figure compacts on phones instead of staying a fixed 26. */
    font-size: var(--kpi-fs);
    font-weight: 700;
    margin-top: 4px;
}
.inq-stats .sub[b-62tnyfeqt9] {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}
.inq-list[b-62tnyfeqt9] { display: flex; flex-direction: column; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inq-row[b-62tnyfeqt9] {
    display: grid;
    grid-template-columns: 40px 1.4fr .8fr .9fr .8fr 1fr 1fr 1.4fr;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 13px;
}
.inq-row.inq-head[b-62tnyfeqt9] {
    background: #F8FAFC;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
    font-weight: 700;
    border-bottom: 1px solid #CBD5E1;
}
.inq-row:last-child[b-62tnyfeqt9] { border-bottom: none; }
.col-name[b-62tnyfeqt9] { display: flex; gap: 10px; align-items: center; }
.col-name .avatar[b-62tnyfeqt9] {
    width: 32px; height: 32px; border-radius: 50%;
    background: #E2E8F0; color: #475569;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
}
.col-name .nm[b-62tnyfeqt9] { font-weight: 600; }
.col-name .ph[b-62tnyfeqt9] { font-size: 11px; color: #64748B; }
.col-actions[b-62tnyfeqt9] { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.col-check[b-62tnyfeqt9] { display: flex; align-items: center; }
.mono[b-62tnyfeqt9] { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.muted-sm[b-62tnyfeqt9] { font-size: 11px; color: #64748B; margin-top: 2px; }
/* DEF-05-01: the lead's own words, clamped so a long message can't blow up the row. */
.inq-msg[b-62tnyfeqt9] {
    font-size: 11px; color: #64748B; font-style: italic; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
/* _content/NepalBrokers.Web/Components/Pages/LandConverterPortal.razor.rz.scp.css */
/* Land Converter portal — Blazor scoped CSS (page chrome only).
   The tool's own styles live under .nb-lc in the shared land-converter.css; these are just
   the page heading/lede, now scoped to this component. */
.nb-lc-portal[b-ij0v8o8r6z] { padding: 4px 2px 40px; }
.nb-lc-title[b-ij0v8o8r6z] {
    font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
    font-variation-settings: "wdth" 112, "wght" 760; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem);
    line-height: 1.1; letter-spacing: -.028em; margin: 0 0 .3rem; color: var(--nb-fg, #10160F);
}
.nb-lc-np[b-ij0v8o8r6z] { font-family: "Noto Sans Devanagari", sans-serif; color: #0F7A4A; }
.nb-lc-lede[b-ij0v8o8r6z] { margin: 0 0 1.3rem; color: var(--nb-fg-muted, #4A5645); max-width: 62ch; }
/* _content/NepalBrokers.Web/Components/Pages/ListingDetail.razor.rz.scp.css */
/* Listing Detail page — Blazor scoped CSS (moved from the page's global style block).
   All classes are used only on this component's markup. The one MudBlazor target is the photo
   delete button (.photo-del sits on a MudIconButton), reached with ::deep through the plain
   .photo-thumb; everything else is plain HTML. */

/* Hero photo carousel */
.hero-photo[b-1gxhj79x0g] {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.hero-photo img[b-1gxhj79x0g] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.hero-nav[b-1gxhj79x0g] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255,255,255,.9);
    color: #1F2937;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 6px rgba(0,0,0,.22);
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 2;
}
.hero-photo:hover .hero-nav[b-1gxhj79x0g] { opacity: 1; }
.hero-prev[b-1gxhj79x0g] { left: 14px; }
.hero-next[b-1gxhj79x0g] { right: 14px; }
.hero-count[b-1gxhj79x0g] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(17,24,39,.62);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    z-index: 2;
}
.hero-dots[b-1gxhj79x0g] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.hero-dot[b-1gxhj79x0g] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    cursor: pointer;
}
.hero-dot.on[b-1gxhj79x0g] { background: #fff; }

.code-chip-lg[b-1gxhj79x0g] {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #0F7A4A;
    background: #ECF7EF;
    border: 1px solid #B2CEB9;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}
.mono[b-1gxhj79x0g] { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.photo-gallery[b-1gxhj79x0g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.photo-thumb[b-1gxhj79x0g] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: #F1F4F1;
}
.photo-thumb img[b-1gxhj79x0g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* NB-PHOTODEL-DEEP: .photo-del sits on a MudIconButton; reach it via ::deep through the plain
   .photo-thumb (the MudIconButton root does not carry this component's [b-hash]). */
.photo-thumb[b-1gxhj79x0g]  .photo-del {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.photo-thumb:hover[b-1gxhj79x0g]  .photo-del { opacity: 1; }
/* LD-2 (touch): opacity:0 + :hover reveal leaves these controls permanently invisible
   on touch devices (no hover state). .hero-nav is partly mitigated by the always-visible
   .hero-dots, but .photo-del has no fallback at all. Force both visible on hover:none
   (touch) devices while leaving desktop's hover-only behavior untouched. */
@media (hover: none) {
    .hero-nav[b-1gxhj79x0g] { opacity: 1; }
    .photo-thumb[b-1gxhj79x0g]  .photo-del { opacity: 1; }
}
.cmp-frame[b-1gxhj79x0g] {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.cmp-frame img[b-1gxhj79x0g] { width: 100%; height: 100%; object-fit: cover; }
/* Inline video player (16:9 responsive) for YouTube/Vimeo embeds + direct files. */
.nb-video-wrap[b-1gxhj79x0g] { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.nb-video-wrap iframe[b-1gxhj79x0g] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* CR-6: Instagram Reels / TikTok embeds are portrait — cap width so they don't stretch. */
.nb-video-portrait[b-1gxhj79x0g] { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
.nb-video-el[b-1gxhj79x0g] { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; display: block; }
/* _content/NepalBrokers.Web/Components/Pages/Listings.razor.rz.scp.css */
/* Listings page — Blazor scoped CSS (moved from the page's global style block).
   The cards and the action menu are deliberately plain HTML (NB-PARITY: they replaced MudPaper
   and MudMenu), so every selector here targets this component's own markup and none needs ::deep.
   Shared names (.nb-crumbs, .nb-tbl*, .nb-fsel, .nb-iconbtn, .mono) also exist in app.css, which
   covers every other page; this component's scoped copies only add its own look on this page. */

/* ── prototype-matched breadcrumb + table (scoped to Listings) ── */
.nb-crumbs[b-k3yf4v3xx7] { font-size: 12px; color: var(--nb-fg-muted); margin-bottom: 4px; }
.nb-crumbs span[b-k3yf4v3xx7] { color: var(--nb-fg-soft); margin: 0 3px; }

.nb-tbl-wrap[b-k3yf4v3xx7] { background: #fff; border: 1px solid var(--nb-border); border-radius: var(--nb-radius); overflow: hidden; box-shadow: var(--nb-shadow-sm); }
/* BUG: this component's own scoped .nb-tbl-wrap rule above (Blazor CSS
   isolation gives it higher specificity than a plain class selector)
   always beat app.css's shared ".nb-tbl-scroll { overflow-x: auto }"
   helper, which this table also carries on the same div (see the
   nb-tbl-wrap nb-tbl-scroll markup below). Net effect: overflow-x stayed
   hidden and the table (827px of content in this component vs a ~344px
   phone viewport) silently clipped its right-hand columns instead of
   scrolling, on every narrow screen. Re-declare the scroll behavior here
   too so it can't lose to the wrap rule (keep it AFTER .nb-tbl-wrap). */
.nb-tbl-scroll[b-k3yf4v3xx7] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nb-tbl[b-k3yf4v3xx7] { width: 100%; border-collapse: collapse; font-size: 13px; }
.nb-tbl th[b-k3yf4v3xx7] { text-align: left; padding: 10px 14px; background: var(--nb-bg); border-bottom: 1px solid var(--nb-border); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--nb-fg-muted); font-weight: 700; }
.nb-tbl td[b-k3yf4v3xx7] { padding: 11px 14px; border-bottom: 1px solid var(--nb-border-soft); vertical-align: middle; color: var(--nb-fg); }
.nb-tbl tbody tr[b-k3yf4v3xx7] { cursor: pointer; transition: background var(--nb-transition); }
.nb-tbl tbody tr:hover td[b-k3yf4v3xx7] { background: #FAFBFA; }
.nb-tbl tbody tr:last-child td[b-k3yf4v3xx7] { border-bottom: none; }
.nb-tbl .t-thumb[b-k3yf4v3xx7] { font-size: 20px; text-align: center; }
.nb-tbl .t-title[b-k3yf4v3xx7] { font-weight: 600; line-height: 1.25; }
.nb-tbl .t-sub[b-k3yf4v3xx7] { font-size: 11px; color: var(--nb-fg-muted); margin-top: 1px; }
.nb-tbl .t-muted[b-k3yf4v3xx7] { color: var(--nb-fg-muted); }
.nb-tbl .t-price[b-k3yf4v3xx7] { font-weight: 600; }
.nb-tbl .t-link[b-k3yf4v3xx7] { color: var(--nb-primary); font-weight: 500; cursor: pointer; }
.nb-tbl .t-link:hover[b-k3yf4v3xx7] { text-decoration: underline; }
.nb-tbl .t-dash[b-k3yf4v3xx7] { color: var(--nb-fg-soft); }
.nb-tbl .status-chip[b-k3yf4v3xx7] { text-transform: none; font-weight: 600; letter-spacing: 0; }

/* NB-DEDUPE (2026-09-06): .nb-chip (+ variants) removed — identical to the shared
   definition in app.css, which now applies here. Single source of truth. */

/* ── prototype-matched page header + filter row (scoped to Listings) ── */
.lst-pagehead[b-k3yf4v3xx7] { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lst-h1[b-k3yf4v3xx7] { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 26px; margin: 0; letter-spacing: -.01em; color: var(--nb-fg); line-height: 1.15; }
/* NB-MOBILE-MODERATE (2026-09-07): the serif page title had no mobile step, so it stayed 26 on
   phones. Bring it to 21 (matching the Dashboard greeting) so it reads like a page title, not a hero. */
@media (max-width: 600px) { .lst-h1[b-k3yf4v3xx7] { font-size: 21px; } }
.lst-sub[b-k3yf4v3xx7] { color: var(--nb-fg-muted); font-size: 13px; margin-top: 6px; line-height: 1.5; max-width: 760px; }
.lst-actions[b-k3yf4v3xx7] { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* NB-DEDUPE (2026-09-06): .nb-seg and .nb-btn (+ states) removed — byte-identical to the
   shared definitions in app.css, which now apply here. Single source of truth; the
   (pointer:coarse) touch floors in app.css still apply to them unchanged. */

.lst-body[b-k3yf4v3xx7] { width: 100%; }
.lst-filters[b-k3yf4v3xx7] { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lst-search[b-k3yf4v3xx7] { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.lst-search input[b-k3yf4v3xx7] { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--nb-border); border-radius: 8px; background: #fff; font-size: 13px; font-family: inherit; color: var(--nb-fg); outline: none; transition: border-color var(--nb-transition), box-shadow var(--nb-transition); }
.lst-search input:focus[b-k3yf4v3xx7] { border-color: var(--nb-primary); box-shadow: 0 0 0 3px var(--nb-primary-ring); }
.lst-search-ic[b-k3yf4v3xx7] { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--nb-fg-muted); display: inline-flex; pointer-events: none; }
.nb-fsel[b-k3yf4v3xx7] { border: 1px solid var(--nb-border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; background: #fff; color: var(--nb-fg); cursor: pointer; font-family: inherit; outline: none; }
.nb-fsel:focus[b-k3yf4v3xx7] { border-color: var(--nb-primary); box-shadow: 0 0 0 3px var(--nb-primary-ring); }

/* NB-LST-COMPACT (2026-09-07): the client flagged the whole filter block as too big on a phone.
   Make the search + selects + type toggle denser and tighten the gaps so listings sit higher —
   the controls stay tappable (>= WCAG 24px). Desktop/tablet unchanged. */
@media (max-width: 600px) {
    .lst-filters[b-k3yf4v3xx7] { gap: 6px; margin-bottom: 10px; }
    .lst-search[b-k3yf4v3xx7] { min-width: 100%; }
    .lst-search input[b-k3yf4v3xx7] { padding: 6px 10px 6px 32px; font-size: 12.5px; }
    .nb-fsel[b-k3yf4v3xx7] { padding: 5px 8px; font-size: 12px; }
    .lst-filters .nb-seg button[b-k3yf4v3xx7] { min-height: 32px; padding: 5px 9px; font-size: 12px; }
}

.listing-grid[b-k3yf4v3xx7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
/* NB-PARITY: plain card shell (was MudPaper). Card overflow stays visible so the fixed
   action menu is never clipped; the photo block does its own corner clipping. */
.listing-card[b-k3yf4v3xx7] {
    background: #fff;
    border: 1px solid var(--nb-border);
    box-shadow: var(--nb-shadow-sm);
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.listing-card:hover[b-k3yf4v3xx7] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,122,74,.08);
}
.listing-card .photo[b-k3yf4v3xx7] {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.listing-card .photo-icon[b-k3yf4v3xx7] { font-size: 42px; }
.listing-card .photo .cover-img[b-k3yf4v3xx7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Card photo carousel (multi-photo listings): arrows fade in on hover, dots always visible. */
.listing-card .car-btn[b-k3yf4v3xx7] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255,255,255,.88);
    color: #1F2937;
    font-size: 17px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 2;
}
.listing-card .photo:hover .car-btn[b-k3yf4v3xx7] { opacity: 1; }
.listing-card .car-prev[b-k3yf4v3xx7] { left: 8px; }
.listing-card .car-next[b-k3yf4v3xx7] { right: 8px; }
.listing-card .car-dots[b-k3yf4v3xx7] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.listing-card .car-dot[b-k3yf4v3xx7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    cursor: pointer;
}
.listing-card .car-dot.on[b-k3yf4v3xx7] { background: #fff; }
/* LST-2 (touch): arrows are opacity:0 + :hover reveal, invisible on touch devices.
   .car-dot indicators are always visible, but the arrows themselves need their own
   touch fallback — same treatment as ListingDetail's hero-nav/photo-del fix, so the
   hover-none behavior is consistent across the app. Desktop hover-only look is unchanged. */
@media (hover: none) {
    .listing-card .car-btn[b-k3yf4v3xx7] { opacity: 1; }
}
.t-thumb-img[b-k3yf4v3xx7] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}
.listing-card .vis-badge[b-k3yf4v3xx7] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
}
.vis-badge.public[b-k3yf4v3xx7] { color: #C6922A; }
.vis-badge.private[b-k3yf4v3xx7] { color: #D2385A; }
.vis-badge.team[b-k3yf4v3xx7] { color: #7C3AED; }
.type-chip-tl[b-k3yf4v3xx7] {
    position: absolute;
    top: 10px;
    left: 10px;
}
.listing-card .body[b-k3yf4v3xx7] { padding: 12px 14px 14px; }
.listing-card .price[b-k3yf4v3xx7] {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
    color: #0F7A4A;
}
.mono[b-k3yf4v3xx7] { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.listing-card .title[b-k3yf4v3xx7] {
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.code-chip[b-k3yf4v3xx7] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 1px 6px;
    border-radius: 4px;
}
.listing-card .code-chip[b-k3yf4v3xx7] { margin-bottom: 6px; }
.listing-card .meta[b-k3yf4v3xx7] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #64748B;
    align-items: center;
}
.listing-card .owner-row[b-k3yf4v3xx7] {
    margin-top: 6px;
}
.type-pill[b-k3yf4v3xx7] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.type-pill.type-sale[b-k3yf4v3xx7] { background: #FEF3C7; color: #92400E; }
.type-pill.type-rent[b-k3yf4v3xx7] { background: #DBEAFE; color: #1E3A8A; }
.listing-card .address[b-k3yf4v3xx7] {
    margin-top: 8px;
    font-size: 11.5px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listing-card .row-actions[b-k3yf4v3xx7] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    z-index: 2;
}
.tag-row[b-k3yf4v3xx7] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.tag-pill[b-k3yf4v3xx7] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #475569;
    text-transform: capitalize;
}
.tag-pill.tag-premium[b-k3yf4v3xx7]  { background: #FEF3C7; color: #92400E; }
.tag-pill.tag-urgent[b-k3yf4v3xx7]   { background: #FEE2E2; color: #991B1B; }
.tag-pill.tag-favorite[b-k3yf4v3xx7] { background: #FCE7F3; color: #9D174D; }
.tag-pill.tag-vip[b-k3yf4v3xx7]      { background: #DDD6FE; color: #5B21B6; }
.tag-pill.tag-hot[b-k3yf4v3xx7]      { background: #FFE4E6; color: #BE123C; }
.tag-pill.tag-new[b-k3yf4v3xx7]      { background: #DCFCE7; color: #166534; }
.status-chip[b-k3yf4v3xx7] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}
.status-chip.live[b-k3yf4v3xx7]     { background: #DCFCE7; color: #166534; }
.status-chip.pending[b-k3yf4v3xx7]  { background: #FEF3C7; color: #92400E; }
.status-chip.draft[b-k3yf4v3xx7]    { background: #E2E8F0; color: #475569; }
.status-chip.rejected[b-k3yf4v3xx7] { background: #FEE2E2; color: #991B1B; }
.status-chip.sold[b-k3yf4v3xx7]     { background: #DDD6FE; color: #5B21B6; }
.status-chip.reserved[b-k3yf4v3xx7] { background: #FCE7F3; color: #9D174D; }
.cat-chip[b-k3yf4v3xx7] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #EEF2F7;
    color: #334155;
}
.status-chip.expired[b-k3yf4v3xx7]  { background: #F3F4F6; color: #6B7280; }
.status-chip.rented[b-k3yf4v3xx7]   { background: #DDD6FE; color: #5B21B6; }
.status-chip.withdrawn[b-k3yf4v3xx7]{ background: #F3F4F6; color: #6B7280; }
.linked-customer[b-k3yf4v3xx7] {
    margin-top: 8px;
    padding: 6px 10px;
    background: #ECF7EF;
    color: #0F7A4A;
    font-size: 11.5px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease;
}
.linked-customer:hover[b-k3yf4v3xx7] { background: #D8EFDF; }

/* ── NB-PARITY: plain-HTML action menu + trigger (replaces MudMenu) ── */
.nb-iconbtn[b-k3yf4v3xx7] {
    width: 28px; height: 28px;
    display: inline-grid; place-items: center;
    border: none; background: transparent;
    border-radius: 50%;
    font-size: 16px; line-height: 1; font-family: inherit;
    color: var(--nb-fg-muted); cursor: pointer;
    transition: background var(--nb-transition), color var(--nb-transition);
}
.nb-iconbtn:hover[b-k3yf4v3xx7] { background: var(--nb-bg); color: var(--nb-fg); }

/* NB-KEBAB-CLICK: MudBlazor's dialog layer sits at 1400 and its overlay at 1301 — the menu used
   to sit at 1311, so anything MudBlazor had mounted could paint straight over it. Both layers are
   lifted clear of every MudBlazor z-index, and the menu caps its height so a long action list
   scrolls instead of running off the bottom of the screen. */
.nb-menu-back[b-k3yf4v3xx7] { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.nb-menu[b-k3yf4v3xx7] {
    position: fixed; z-index: 2001;
    min-width: 200px;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--nb-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    padding: 6px;
}
.nb-menu button[b-k3yf4v3xx7] {
    display: block; width: 100%;
    text-align: left;
    border: none; background: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: var(--nb-fg);
    cursor: pointer;
    transition: background var(--nb-transition);
}
.nb-menu button:hover[b-k3yf4v3xx7] { background: var(--nb-bg); }
.nb-menu button.danger[b-k3yf4v3xx7] { color: var(--nb-red); }
.nb-menu .sep[b-k3yf4v3xx7] { height: 1px; background: var(--nb-border-soft); margin: 5px 4px; }

.nb-error[b-k3yf4v3xx7] {
    background: #FBE7EC;
    border: 1px solid #F3B5C4;
    color: var(--nb-red);
    border-radius: var(--nb-radius);
    padding: 12px 16px;
    font-size: 13px; font-weight: 500;
    margin-top: 12px;
}
/* _content/NepalBrokers.Web/Components/Pages/Logout.razor.rz.scp.css */
/* Logout page — Blazor scoped CSS (moved from the page's global <style>). */
.logout-bg[b-s29pt871hv] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(1200px 600px at 50% -100px, #DFF1E4 0%, #F6F7F5 60%);
}

.logout-card[b-s29pt871hv] {
    padding: 28px 36px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* _content/NepalBrokers.Web/Components/Pages/Profile.razor.rz.scp.css */
/* Profile page — Blazor scoped CSS (moved from the page's global style block).
   All selectors target this component's own plain HTML (no MudBlazor child styling). The
   kyc-doc, sec-row and nb-*-cols classes are used only on this component's markup — MainLayout
   styles its own .sec-row buttons under .search-dropdown, so scoping here does not affect them.
   None of these grids are in the shared stat-grid :is() rule, so their own 720px steps are
   self-contained. */
.kyc-doc-list[b-3iufl35del] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kyc-doc[b-3iufl35del] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 12px;
    background: #FCFCFB;
}
.kyc-doc-body[b-3iufl35del] { flex: 1; min-width: 0; }
.kyc-doc-name[b-3iufl35del] {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kyc-doc-meta[b-3iufl35del] {
    font-size: 11.5px;
    color: #64748B;
    margin-top: 1px;
}

.sec-row[b-3iufl35del] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* NB-PROFILE-ROW (mobile fix): the row is a text block + an action MudButton. On a narrow
       phone the button was squeezed until its label wrapped ("Set sponsor" -> "Set / sponso…")
       and clipped. Let the row wrap so the button drops below the text when there isn't room,
       and let the text block shrink instead of starving the button. */
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
}
.sec-row > div[b-3iufl35del] { min-width: 0; }
/* Keep the row's action button (a MudButton) at its natural width with a one-line label so it
   can't wrap-and-clip inside a squeezed box (reached via ::deep — the MudButton root and label
   don't carry this component's [b-hash]). */
.sec-row[b-3iufl35del]  .mud-button-root { flex: none; }
.sec-row[b-3iufl35del]  .mud-button-label { white-space: nowrap; }
.sec-row:last-child[b-3iufl35del] {
    border-bottom: none;
}

/* NB-PROFILE-COLS: 1fr tracks don't shrink below content min-size, so the referral card refused
   to compress on a narrow phone and clipped off-screen. Given a class here so it stacks to one
   column below 720px like every other 2-column layout. */
.nb-profile-cols[b-3iufl35del] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: flex-start;
}
@media (max-width: 720px) {
    .nb-profile-cols[b-3iufl35del] {
        grid-template-columns: 1fr;
    }
}

/* PROF-1: same "1fr tracks don't shrink" fix on the My Stats mini-grid — the unbroken monospace
   Wallet Balance figure couldn't compress on a narrow phone. Stack to one column below 720px. */
.nb-stats-cols[b-3iufl35del] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .nb-stats-cols[b-3iufl35del] {
        grid-template-columns: 1fr;
    }
}
/* _content/NepalBrokers.Web/Components/Pages/Referral.razor.rz.scp.css */
/* Referral page — Blazor scoped CSS (moved from the page's global style block).
   The tree markup is produced by the RenderNode RenderFragment in this same component, so those
   elements receive this component's [b-hash] scope and are styled normally. The only MudBlazor
   target is the stat card (.stat-card sits on a MudPaper), reached with ::deep through the plain
   .ref-stats grid; its .lbl/.cnt/.sub children are plain divs and scope normally. */

/* .ref-stats is in the shared stat-grid :is() rule in app.css (which owns the tablet/mobile
   steps). Scoping ties that rule and the scoped bundle loads last, so declare the tier steps
   here: 4 cols desktop / 2 tablet / 1 mobile. */
.ref-stats[b-t5ang3ib88] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 959.98px) { .ref-stats[b-t5ang3ib88] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ref-stats[b-t5ang3ib88] { grid-template-columns: 1fr; } }
/* NB-STATCARD-DEEP: .stat-card is a MudPaper; reach it via ::deep through the plain .ref-stats. */
.ref-stats[b-t5ang3ib88]  .stat-card {
    padding: 14px 16px;
    border-radius: 12px;
}
.ref-stats .lbl[b-t5ang3ib88] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748B;
}
.ref-stats .cnt[b-t5ang3ib88] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
}
/* NB-MOBILE-COMPACT (2026-09-08): compact the referral stat figure on phones, like the other KPIs. */
@media (max-width: 600px) { .ref-stats .cnt[b-t5ang3ib88] { font-size: 20px; } }
.ref-stats .sub[b-t5ang3ib88] {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

.lvl-pill[b-t5ang3ib88] {
    font-size: 10px;
    font-weight: 700;
    background: #F6F7F5;
    color: #64748B;
    padding: 2px 8px;
    border-radius: 999px;
}

.payout-banner[b-t5ang3ib88] {
    font-size: 13px;
    padding: 10px 12px;
    background: #ECF7EF;
    border-radius: 6px;
    color: #0F7A4A;
}

.credit-row[b-t5ang3ib88] {
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    gap: 10px;
    align-items: center;
}
.credit-row:last-child[b-t5ang3ib88] { border-bottom: none; }

/* Tree (from prototype) */
.tree[b-t5ang3ib88] {
    font-family: 'Inter', sans-serif;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tree ul[b-t5ang3ib88] {
    list-style: none;
    padding-left: 22px;
    margin: 0;
    border-left: 1.5px dashed #CBD5E1;
}
.tree > ul[b-t5ang3ib88] {
    border-left: none;
    padding-left: 0;
}
.tree li[b-t5ang3ib88] {
    margin: 6px 0;
    padding-left: 10px;
    position: relative;
}
.tree li[b-t5ang3ib88]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 16px;
    width: 12px;
    height: 1.5px;
    background: #CBD5E1;
}
.tree > ul > li[b-t5ang3ib88]::before { display: none; }
.tree > ul > li[b-t5ang3ib88] { padding-left: 0; }

.tree-node[b-t5ang3ib88] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
}
.tree-node .lvl[b-t5ang3ib88] {
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    background: #F6F7F5;
    padding: 2px 8px;
    border-radius: 999px;
}
.tree-node .name[b-t5ang3ib88] {
    font-weight: 700;
    color: #1F2937;
}
.tree-node .role[b-t5ang3ib88] {
    color: #64748B;
    font-size: 11px;
}
.tree-node .listings[b-t5ang3ib88] {
    font-size: 10px;
    color: #475569;
    padding: 2px 7px;
    background: #F1F5F9;
    border-radius: 999px;
}
.tree-node .pct[b-t5ang3ib88] {
    font-size: 11.5px;
    color: #0F7A4A;
    font-weight: 700;
}
.tree-node.me[b-t5ang3ib88] {
    background: #ECF7EF;
    border-color: #0F7A4A;
}
.tree-node.me .lvl[b-t5ang3ib88] {
    background: #0F7A4A;
    color: #fff;
}
.tree-node .me-badge[b-t5ang3ib88] {
    background: #0F7A4A;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .04em;
}
/* NB-REF-SEARCH: member search results + per-node collapse toggle. */
.search-results[b-t5ang3ib88] { display: flex; flex-direction: column; margin-top: 6px; }
.search-hit[b-t5ang3ib88] {
    display: flex; align-items: baseline; gap: 10px; text-align: left;
    background: none; border: none; border-bottom: 1px solid #F1F5F9;
    padding: 8px 6px; cursor: pointer; font: inherit; min-height: 44px;
}
.search-hit:hover[b-t5ang3ib88] { background: #F6F7F5; }
.search-hit:last-child[b-t5ang3ib88] { border-bottom: none; }
.tree-node .tree-toggle[b-t5ang3ib88] {
    font-size: 10px; font-weight: 700; color: #0284C7;
    border: 1px solid #BAE6FD; background: #F0F9FF;
    padding: 1px 7px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.tree-node .tree-toggle:hover[b-t5ang3ib88] { background: #E0F2FE; }
@media (pointer: coarse) {
    .tree-node .tree-toggle[b-t5ang3ib88] {
        min-height: 44px; min-width: 44px; padding: 0 12px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* NB-REF-ADD: per-node "place a member here" affordance, Super Admin only. */
.tree-node .add-under[b-t5ang3ib88] {
    font-size: 10px;
    font-weight: 700;
    color: #0F7A4A;
    border: 1px dashed #0F7A4A;
    padding: 1px 7px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.tree-node .add-under:hover[b-t5ang3ib88] { background: #ECF7EF; }
/* The "me" node already sits on #ECF7EF, so its hover needs a step darker to read as a hover. */
.tree-node.me .add-under:hover[b-t5ang3ib88] { background: #DCEEE2; }

/* NB-TOUCH-44: measured at 18px tall on a 320px phone — the smallest control found anywhere in
   the product, and it sits inches from its siblings in a dense tree where a mis-tap places a
   member under the WRONG sponsor. That is a money mistake, not a cosmetic one.

   The pill keeps its size; the TARGET grows around it with padding, so the tree stays compact
   while the thing a thumb has to hit reaches the floor. Coarse pointers only — on a mouse
   18px is fine and inflating it would push the rows apart for no benefit. */
@media (pointer: coarse) {
    .tree-node .add-under[b-t5ang3ib88] {
        min-height: 44px;
        min-width: 44px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* _content/NepalBrokers.Web/Components/Pages/Register.razor.rz.scp.css */
/* Register page — Blazor scoped CSS (moved from the page's global <style>).
   .nb-login-card is the shared auth card (base in app.css); these are Register-only
   additions/overrides, now scoped to this component. */
.nb-login-card.nb-register-card[b-jcqfjp8cg4] { max-width: 460px; }
.nb-login-card .approval-note[b-jcqfjp8cg4] {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--nb-primary-bg); border: 1px solid var(--nb-primary-ring);
    border-radius: 12px; padding: 14px 16px; margin: 4px 0 18px;
    font-size: 13px; color: var(--nb-fg); line-height: 1.5;
}
.nb-login-card .approval-note .ic[b-jcqfjp8cg4] { font-size: 18px; line-height: 1.2; }
.nb-register-card .opt[b-jcqfjp8cg4] { text-transform: none; font-weight: 600; color: var(--nb-fg-soft); }

.step-hint[b-jcqfjp8cg4] { font-size: 13px; color: var(--nb-fg-soft); line-height: 1.5; margin: 12px 0 2px; }

.ref-check[b-jcqfjp8cg4] { font-size: 12px; font-weight: 600; margin: -6px 0 10px; }
.ref-check.ok[b-jcqfjp8cg4] { color: var(--nb-primary, #0F7A4A); }
.ref-check.bad[b-jcqfjp8cg4] { color: #B42318; }

/* NB-REG-SIMPLE: the step-indicator, document-upload, plan-card, payment-box and
   back/next button-row rules went with the four-step wizard they styled. */
/* _content/NepalBrokers.Web/Components/Pages/Reports.razor.rz.scp.css */
/* Reports page — Blazor scoped CSS (moved from the page's global style block).
   All classes are used only on this component's markup. Three targets sit on MudBlazor
   components (a MudPaper KPI card, and inside each perf-row a MudText value and a
   MudProgressLinear bar), so they are reached with ::deep; everything else is plain HTML. */

/* .kpi-grid is in the shared stat-grid :is() rule in app.css (which owns the tablet/mobile
   steps). Scoping adds [b-hash] (+1 specificity), tying that rule, and the scoped bundle loads
   last — so declare the tier steps here. Desktop keeps the auto-fit track (as many 190px+
   columns as fit); tablet 2 / mobile 1 match the canonical tiers and the behaviour the shared
   rule already produced before scoping. */
.kpi-grid[b-1bau6dh281] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
@media (max-width: 959.98px) { .kpi-grid[b-1bau6dh281] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kpi-grid[b-1bau6dh281] { grid-template-columns: 1fr; } }
/* NB-KPICARD-DEEP: .kpi-card is a MudPaper; reach it via ::deep through the plain .kpi-grid. */
.kpi-grid[b-1bau6dh281]  .kpi-card { padding: 16px 18px; border-radius: 12px; }

.grid-2[b-1bau6dh281] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* NB-RPT-ROW (2026-08-02): was a 160px/1fr/100px grid, but the value cell
   ("6 listings · 9 customers") is wider than 100px, so it painted past the card edge
   and collided with the bar at ordinary desktop widths. Two-line layout instead:
   label + value share the top line (the value column sizes to its content), the bar
   spans the full width underneath — nothing can overlap or clip at any card width.
   The value (.mono) and the bar (MudProgressLinear) sit on MudBlazor components, so their
   grid placement is applied with ::deep; the first child is plain HTML and scopes normally. */
.perf-row[b-1bau6dh281] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 5px;
    align-items: center;
    padding: 8px 0;
}
.perf-row > :first-child[b-1bau6dh281] { grid-column: 1; grid-row: 1; min-width: 0; }
.perf-row[b-1bau6dh281]  .mono { grid-column: 2; grid-row: 1; white-space: nowrap; }
.perf-row[b-1bau6dh281]  .mud-progress-linear { grid-column: 1 / -1; grid-row: 2; }
.status-row[b-1bau6dh281] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
}
.status-row:last-child[b-1bau6dh281] { border-bottom: none; }
.status-dot[b-1bau6dh281] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}
.vip-row[b-1bau6dh281] { padding: 6px 8px; border-radius: 8px; transition: background-color .15s ease; }
.vip-row:hover[b-1bau6dh281] { background-color: rgba(0,0,0,0.04); }

.donut-wrap[b-1bau6dh281] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: center;
}
.donut-legend[b-1bau6dh281] { display: flex; flex-direction: column; gap: 8px; }
.legend-row[b-1bau6dh281] {
    display: grid;
    grid-template-columns: 14px 1fr auto 60px;
    gap: 10px;
    align-items: center;
    font-size: 13px;
}
.legend-dot[b-1bau6dh281] { width: 12px; height: 12px; border-radius: 3px; }
.legend-label[b-1bau6dh281] { font-weight: 600; }
.legend-count[b-1bau6dh281] { color: #1F2937; font-weight: 700; }
.legend-pct[b-1bau6dh281] { color: #64748B; font-size: 12px; text-align: right; }

@media (max-width: 960px) {
    .grid-2[b-1bau6dh281] { grid-template-columns: 1fr; }
    /* NB-RPT-ROW: no .perf-row override here any more — the two-line layout above is
       content-sized, so it holds at every width including phones. */
    .donut-wrap[b-1bau6dh281] { grid-template-columns: 1fr; }
}
/* _content/NepalBrokers.Web/Components/Pages/RolesAccess.razor.rz.scp.css */
/* Roles & Access page — Blazor scoped CSS (moved from the page's global <style>).
   Page-unique classes on plain HTML this component renders. @@media unescaped to @media. */

/* Two-pane: roles directory (left) beside the permission matrix (right); stacks on mobile. */
.roles-2pane[b-kl427umo2g] { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .roles-2pane[b-kl427umo2g] { grid-template-columns: 1fr; } }

/* Roles directory rows (prototype .role-row): clickable, active = soft green. */
.role-row[b-kl427umo2g] { display: grid; grid-template-columns: 1fr 64px 1.3fr 92px; gap: 8px; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--nb-border-soft); font-size: 13px; cursor: pointer; }
.role-row:last-child[b-kl427umo2g] { border-bottom: none; }
.role-row.role-head[b-kl427umo2g] { background: var(--nb-bg); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--nb-fg-muted); font-weight: 700; cursor: default; }
.role-row:not(.role-head):hover[b-kl427umo2g] { background: #FAFBFA; }
.role-row.active[b-kl427umo2g] { background: var(--nb-primary-bg); }
.role-row .role-scope[b-kl427umo2g] { font-size: 12px; color: var(--nb-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile: the two fixed-pixel tracks (64px/92px) never shrink and squeeze Scope to near-zero
   width on a 360-390px phone. Collapse to two tracks (name+scope stacked / members+type trailing)
   via grid placement only — no markup change, so the header row and desktop layout are untouched. */
@media (max-width: 480px) {
    .role-row:not(.role-head)[b-kl427umo2g] { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 2px; }
    .role-row:not(.role-head) > strong[b-kl427umo2g] { grid-column: 1; grid-row: 1; }
    .role-row:not(.role-head) > .role-scope[b-kl427umo2g] { grid-column: 1; grid-row: 2; }
    .role-row:not(.role-head) > :nth-child(2)[b-kl427umo2g] { grid-column: 2; grid-row: 1; justify-self: end; }
    .role-row:not(.role-head) > :nth-child(4)[b-kl427umo2g] { grid-column: 2; grid-row: 2; justify-self: end; }
}

.perm-matrix[b-kl427umo2g] { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-matrix th[b-kl427umo2g] { text-align: center; padding: 8px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: #64748B; border-bottom: 1px solid #E5E7EB; background: #F6F7F5; }
.perm-matrix th.perm-name-col[b-kl427umo2g] { text-align: left; width: 230px; }
.perm-matrix td[b-kl427umo2g] { padding: 8px 12px; border-bottom: 1px solid #EFF1EE; }
.perm-matrix td.perm-cell[b-kl427umo2g] { text-align: center; }
.perm-matrix tr.perm-group-row td[b-kl427umo2g] { background: #ECF7EF; padding: 6px 10px;
    font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: #0F7A4A; border-bottom: 1px solid rgba(15,122,74,0.2); }
/* Active role column highlight (set by clicking a directory row). */
.perm-matrix th.col-active[b-kl427umo2g], .perm-matrix td.col-active[b-kl427umo2g] { background: var(--nb-primary-bg) !important; }
.perm-na[b-kl427umo2g] { color: #CBD5E1; font-size: 13px; }
/* _content/NepalBrokers.Web/Components/Pages/Todo.razor.rz.scp.css */
/* Todo page — Blazor scoped CSS (moved from the page's global style block).
   Every class is used only on this component's own plain HTML. The single MudBlazor target is
   the filter chips inside the bar (.mud-chip), reached with ::deep through the plain .todo-bar. */

/* NB-007: enlarge the done-toggle hit area without shifting layout. Negative
   margin offsets the padding so the row spacing is unchanged. */
.todo-check[b-zrmqrlufuj] {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: -10px -6px;
    border-radius: 10px;
    cursor: pointer;
}
.todo-check:hover[b-zrmqrlufuj] {
    background: rgba(15, 122, 74, 0.08);
}

.priority-badge[b-zrmqrlufuj] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.priority-badge.high[b-zrmqrlufuj]   { background:#FEE2E2; color:#991B1B; }
.priority-badge.medium[b-zrmqrlufuj] { background:#FEF3C7; color:#92400E; }
.priority-badge.low[b-zrmqrlufuj]    { background:#DBEAFE; color:#1E3A8A; }

/* ---- Clean task card (demo todo-card: round check + colored left rule) ---- */
.todo-card[b-zrmqrlufuj] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 8px;
    background: #fff; border: 1px solid var(--nb-border); border-radius: 10px;
    box-shadow: var(--nb-shadow-sm); transition: box-shadow var(--nb-transition);
}
.todo-card:hover[b-zrmqrlufuj] { box-shadow: var(--nb-shadow-md); }
.todo-card.overdue[b-zrmqrlufuj] { border-left: 3px solid var(--nb-red); }
.todo-card.today[b-zrmqrlufuj]   { border-left: 3px solid var(--nb-amber); }
.todo-card.is-closed[b-zrmqrlufuj] { opacity: .55; }
.nb-round-check[b-zrmqrlufuj] {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid #CBD5E1;
    display: grid; place-items: center; flex: none; transition: all .15s;
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.nb-round-check.on[b-zrmqrlufuj] { background: var(--nb-primary); border-color: var(--nb-primary); }
.nb-round-check.on[b-zrmqrlufuj]::after { content: "✓"; }
.nb-round-check.cancelled[b-zrmqrlufuj] { color: #94A3B8; }
.todo-cat[b-zrmqrlufuj] { font-size: 18px; flex: none; }
.todo-main[b-zrmqrlufuj] { flex: 1; min-width: 0; cursor: pointer; }
.todo-title-row[b-zrmqrlufuj] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.todo-title[b-zrmqrlufuj] { font-size: 14px; font-weight: 600; color: var(--nb-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-title.done[b-zrmqrlufuj] { text-decoration: line-through; font-weight: 400; color: var(--nb-fg-muted); }
.todo-sub[b-zrmqrlufuj] { font-size: 12px; color: var(--nb-fg-muted); margin-top: 2px; }

/* ---- Dashed quick-add bar (demo) ---- */
.todo-quickadd[b-zrmqrlufuj] { background: #fff; border: 1.5px dashed var(--nb-border); border-radius: 12px; padding: 14px 16px; }
.todo-qa-plus[b-zrmqrlufuj] { color: var(--nb-primary); font-size: 18px; font-weight: 700; flex: none; }
.todo-qa-input[b-zrmqrlufuj] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; font-family: inherit; color: var(--nb-fg); padding: 6px 4px; }
.todo-qa-input[b-zrmqrlufuj]::placeholder { color: var(--nb-fg-soft); }
.todo-range-sep[b-zrmqrlufuj] { color: var(--nb-fg-soft); }

/* NB-TODO-LEAN: one filter bar, built mobile-first. Every row wraps and every flex child
   carries min-width:0, so nothing can push the page sideways at a 320px viewport; every
   control clears 44px in both directions; nothing is revealed only on hover. */
.todo-bar[b-zrmqrlufuj] {
    background: #fff;
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 12px;
    padding: 10px 12px;
}
.todo-bar-row[b-zrmqrlufuj] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.todo-bar-icon[b-zrmqrlufuj] { font-size: 16px; flex: none; line-height: 1; }
.todo-search[b-zrmqrlufuj] {
    flex: 1 1 180px;
    min-width: 0;
    min-height: 40px;   /* NB-MOBILE-MODERATE: filter-bar controls 40 (mobile) / 38 (desktop, below) */
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: 15px;   /* 16px-ish: anything smaller makes iOS Safari zoom on focus */
    background: #fff;
    color: inherit;
}
.todo-select[b-zrmqrlufuj] {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: inherit;
}
.todo-adv-toggle[b-zrmqrlufuj] {
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 40px;
    padding: 8px 14px;
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--nb-fg-muted);
    cursor: pointer;
}
.todo-adv-toggle.on[b-zrmqrlufuj] {
    border-color: var(--nb-primary, #0F7A4A);
    color: var(--nb-primary, #0F7A4A);
    background: rgba(15, 122, 74, 0.08);
}
.todo-search:focus[b-zrmqrlufuj], .todo-select:focus[b-zrmqrlufuj], .todo-adv-toggle:focus-visible[b-zrmqrlufuj], .todo-range-input:focus[b-zrmqrlufuj] {
    outline: 2px solid var(--nb-primary, #0F7A4A);
    outline-offset: 1px;
}
.todo-bar-status[b-zrmqrlufuj] { font-size: 12.5px; color: var(--nb-fg-muted); margin-top: 8px; }

.todo-adv[b-zrmqrlufuj] { display: none; }
.todo-adv.open[b-zrmqrlufuj] {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--nb-border, #E3E8E4);
}
.todo-adv-group[b-zrmqrlufuj] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.todo-adv-label[b-zrmqrlufuj] {
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nb-fg-soft);
}
/* Reset the MudChip margins inside the bar so the filter row stays tight. The chips' touch
   target is owned app-wide by controls.css — on pointer:coarse, .mud-chip.mud-chip-size-small
   gets --chip-touch-h (32px min-height) + 24px min-width, clearing WCAG 2.5.8 AA. An old
   min-height:44px lived here but was overridden by that floor (verified at runtime) and is
   removed: forcing 44px back would re-introduce the chunkiness the app-wide de-chunk fixed.
   Reached with ::deep because the chips are MudChips whose roots don't carry this component's
   [b-hash]. */
.todo-bar[b-zrmqrlufuj]  .mud-chip { margin: 0; }
.todo-adv-clear[b-zrmqrlufuj] {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--nb-fg-muted);
    cursor: pointer;
}
.todo-range-input[b-zrmqrlufuj] {
    flex: 1 1 130px;
    min-width: 0;
    max-width: 180px;
    min-height: 40px;
    border: 1px solid var(--nb-border, #E3E8E4);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: inherit;
}
.todo-stage-note[b-zrmqrlufuj] { color: var(--nb-fg-soft); font-style: italic; }

/* NB-MOBILE-MODERATE (2026-09-07): the filter-bar controls above are 40px on mobile (the
   compact tap target the owner asked for). On desktop, where a mouse points, the standard is
   tighter still — 38px — so the bar reads like a toolbar, not a stack of chunky boxes. */
@media (min-width: 960px) {
    .todo-search[b-zrmqrlufuj],
    .todo-select[b-zrmqrlufuj],
    .todo-adv-toggle[b-zrmqrlufuj],
    .todo-adv-clear[b-zrmqrlufuj],
    .todo-range-input[b-zrmqrlufuj] {
        min-height: 38px;
    }
}
/* _content/NepalBrokers.Web/Components/Pages/Wallet.razor.rz.scp.css */
/* Wallet page — Blazor scoped CSS (moved from the page's global style block).
   .kpi-grid / .kpi-card are this page's own copies (Reports keeps its own separate copies);
   every other class here is Wallet-specific. */

/* .kpi-grid is in the shared stat-grid :is() rule in app.css (which owns the 2-col tablet /
   1-col mobile steps). Scoping adds [b-hash] (+1 specificity), tying that rule, and the scoped
   bundle loads last — so the base would win at tablet/mobile. Declare the tier steps here:
   4 cols desktop / 2 tablet / 1 mobile, matching the canonical tiers. */
.kpi-grid[b-i2hvrnkvn8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 959.98px) { .kpi-grid[b-i2hvrnkvn8] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kpi-grid[b-i2hvrnkvn8] { grid-template-columns: 1fr; } }
/* NB-KPICARD-DEEP: .kpi-card sits on a MudPaper, so reach it via ::deep through the plain
   .kpi-grid ancestor (the MudPaper root does not carry this component's [b-hash]). */
.kpi-grid[b-i2hvrnkvn8]  .kpi-card { border-radius: 10px; }

.wallet-hero[b-i2hvrnkvn8] {
    background: linear-gradient(135deg, #0F7A4A 0%, #14A05F 100%);
    color: white;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15,122,74,.18);
}
.hero-balances[b-i2hvrnkvn8] {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.hero-secondary[b-i2hvrnkvn8] {
    display: flex;
    gap: 24px;
    margin-left: auto;
    flex-wrap: wrap;
}
.earn-row[b-i2hvrnkvn8] {
    display: grid;
    grid-template-columns: 160px 1fr 110px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
}
@media (max-width: 600px) {
    .earn-row[b-i2hvrnkvn8] { grid-template-columns: 1fr; }
}
/* _content/NepalBrokers.Web/Components/Shared/EmptyState.razor.rz.scp.css */
/* Empty State (shared) — Blazor scoped CSS (moved from the component's global style block).
   .nb-empty and .nb-empty-emoji are this component's own plain HTML. .nb-empty-title sits on a
   MudText, so it is reached with ::deep through the plain .nb-empty (the MudText root does not
   carry this component's [b-hash]). */
.nb-empty[b-c24ao53tm7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    color: #94A3B8;
    background: #FAFBFA;
    border: 1px dashed #E5E7EB;
    border-radius: 12px;
}
.nb-empty-emoji[b-c24ao53tm7] {
    font-size: 44px;
    margin-bottom: 10px;
    line-height: 1;
}
.nb-empty[b-c24ao53tm7]  .nb-empty-title {
    font-weight: 700 !important;
    color: #0F172A;
    margin-bottom: 4px !important;
}
/* _content/NepalBrokers.Web/Components/Shared/FeatureGate.razor.rz.scp.css */
/* Feature Gate (shared) — Blazor scoped CSS (moved from the component's global style block).
   .feature-gate-wrap is this component's own plain HTML; .feature-gate-card sits on a MudPaper,
   so it is reached with ::deep through the plain .feature-gate-wrap. */
.feature-gate-wrap[b-hx0z0omcc3] {
    display: grid;
    place-items: center;
    padding: 48px 16px;
}
.feature-gate-wrap[b-hx0z0omcc3]  .feature-gate-card {
    max-width: 520px;
    text-align: center;
    border-radius: 14px;
}
/* _content/NepalBrokers.Web/Components/Shared/ListingDetailDialog.razor.rz.scp.css */
/* Listing Detail Dialog (shared) — Blazor scoped CSS (moved from the component's global style
   block). All selectors target this dialog's own plain HTML. */
.code-dialog-grid[b-qidoiy48jv] { display: flex; flex-direction: column; gap: 8px; }
.code-dialog-grid .cd-row[b-qidoiy48jv] {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #F1F5F9;
}
.code-dialog-grid .cd-row:last-child[b-qidoiy48jv] { border-bottom: none; }
.code-dialog-grid .cd-lbl[b-qidoiy48jv] { color: #64748B; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.code-dialog-grid .cd-val[b-qidoiy48jv] { font-size: 14px; color: #0F172A; overflow-wrap: anywhere; }
.code-dialog-grid .mono[b-qidoiy48jv] { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* _content/NepalBrokers.Web/Components/Shared/LoadingPlaceholder.razor.rz.scp.css */
/* Loading Placeholder (shared) — Blazor scoped CSS (moved from the component's global style
   block). Targets this component's own plain HTML. */
.nb-loading[b-482j66cbxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: #64748B;
}
.nb-loading.compact[b-482j66cbxm] { padding: 16px; gap: 6px; }
/* _content/NepalBrokers.Web/Components/Shared/MarkPaidDialog.razor.rz.scp.css */
/* Mark Paid Dialog (shared) — Blazor scoped CSS (moved from the component's global style block).
   Targets this dialog's own plain HTML. */
.nb-paid-summary[b-y8l6hlowfe] { background:#F8FAF9; border:1px solid #EFF1EE; border-radius:10px; padding:10px 14px; }
.nb-paid-summary > div[b-y8l6hlowfe] { display:flex; justify-content:space-between; gap:16px; padding:3px 0; font-size:14px; }
.nb-paid-summary span[b-y8l6hlowfe] { color:#64748B; }
/* _content/NepalBrokers.Web/Components/Shared/Pagination.razor.rz.scp.css */
/* Pagination (shared) — Blazor scoped CSS (moved from the component's global style block).
   All classes are this component's own plain HTML; the Prev/Next buttons are MudButtons, so the
   phone-width touch-target bump is reached with ::deep through the plain .nb-pager-controls. */
.nb-pager[b-9xx5wee0h8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px 4px;
    font-size: 12.5px;
    color: #475569;
    flex-wrap: wrap;
}
.nb-pager-info strong[b-9xx5wee0h8] {
    color: #0F172A;
    font-family: 'JetBrains Mono', monospace;
}
.nb-pager-controls[b-9xx5wee0h8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.nb-pager-page[b-9xx5wee0h8] {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
    min-width: 90px;
    text-align: center;
}
/* PAG-2: bump Previous/Next to a compact touch target on phone widths only;
   Size.Small stays as-is on tablet/desktop. NB-MOBILE-MODERATE (2026-09-07): 44→40. */
@media (max-width: 480px) {
    .nb-pager-controls[b-9xx5wee0h8]  .mud-button-root {
        min-height: 40px !important;
    }
}
/* _content/NepalBrokers.Web/Components/Shared/PhotoComparePickerDialog.razor.rz.scp.css */
/* Photo Compare Picker Dialog (shared) — Blazor scoped CSS (moved from the component's global
   style block). Targets this dialog's own plain HTML. */
.cmp-pick-row[b-hiatdx1u3y] { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-pick[b-hiatdx1u3y] {
    width: 84px; height: 64px; border-radius: 8px; overflow: hidden;
    border: 2px solid var(--mud-palette-lines-default); cursor: pointer; background: #F1F4F1;
}
.cmp-pick img[b-hiatdx1u3y] { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-pick.sel-before[b-hiatdx1u3y] { border-color: #C6922A; box-shadow: 0 0 0 2px #C6922A33; }
.cmp-pick.sel-after[b-hiatdx1u3y] { border-color: #0F7A4A; box-shadow: 0 0 0 2px #0F7A4A33; }