/* /Features/Amazon/AmazonImport.razor.rz.scp.css */
.amz-import-page[b-zr8hlpw3l5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 32rem;
    margin: 0 auto;
}

.amz-import-title[b-zr8hlpw3l5] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.amz-import-form[b-zr8hlpw3l5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.amz-import-filename[b-zr8hlpw3l5] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.amz-import-success[b-zr8hlpw3l5] {
    color: var(--success);
    font-size: var(--text-sm);
    margin: 0;
}

.amz-import-help-link[b-zr8hlpw3l5] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--accent);
}

/* Bug 26 (2026-08-11): `.amz-import-page-wide` and the `.amz-review-breakdown*` rules are gone with
   the markup they styled. The review state no longer renders a transaction grid or a per-type
   breakdown, so it has not "earned" full width under 0-LAYOUT rule 4 -- it is a short summary plus
   two buttons, and stretching that to 1400px would look broken rather than generous. */

.amz-review-subtitle[b-zr8hlpw3l5] {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.amz-review-summary[b-zr8hlpw3l5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Item 11 (2026-08-07 pen): the inline import-history list below the Upload form -- see the
   type-level comment for why this exists alongside SecAccountList.razor rather than replacing it. */
.amz-import-history[b-zr8hlpw3l5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.amz-import-history-head[b-zr8hlpw3l5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.amz-import-history-title[b-zr8hlpw3l5] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.amz-import-history-link[b-zr8hlpw3l5] {
    font-size: var(--text-sm);
    color: var(--accent);
}

/* /Features/Dashboard/Dashboard.razor.rz.scp.css */
.dashboard-page[b-etmtiji8m4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* DASHBOARD-SPEC.md §6.2: icon+label tabs, inactive at the design system's own 65% opacity token,
   active full-opacity with the diagnostic teal underline. Hover brings an inactive tab to full
   opacity as a transition cue before it's clicked -- the underline itself only ever appears on the
   active tab, never on hover (hover != selection). */
.dashboard-tabs[b-etmtiji8m4] {
    display: flex;
    flex-wrap: wrap;
    /* 0-HEADERS (2026-08-06): was var(--space-5) -- that unprefixed alias was never defined (tokens.css's
       alias block jumps --space-4 straight to --space-6), so gap silently computed to nothing and every
       tab label ran into the next with zero space between them. --st-space-5 is the real, defined token. */
    gap: var(--st-space-5);
    border-bottom: 1px solid var(--border);
}

.dashboard-tab[b-etmtiji8m4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3) 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    opacity: var(--st-inactive-opacity);
    transition: opacity var(--st-duration-fast) var(--st-ease);
}

.dashboard-tab:hover[b-etmtiji8m4] {
    opacity: 1;
}

.dashboard-tab-active[b-etmtiji8m4] {
    opacity: 1;
    border-bottom-color: var(--st-dashboard-tab-active);
}

.dashboard-tab-icon[b-etmtiji8m4] {
    width: 18px;
    height: 18px;
}

/* 01.E.0033 part (4): freshness line above the chart grid -- muted by default (a fact, not a
   warning), the nudge span only renders when the server flips IsDataStale (2+ months behind). */
.dashboard-freshness[b-etmtiji8m4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.dashboard-freshness-text[b-etmtiji8m4] {
    color: var(--text-muted);
}

.dashboard-freshness-nudge[b-etmtiji8m4] {
    color: var(--warning);
    background: var(--warning-muted);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
}

.dashboard[b-etmtiji8m4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* One 12-column grid PER metadata row (rpt_dynamic_chart.row_number) -- widths within a row are
   authored to sum to <= 12, so this is the layout the seed data actually intends, unlike the old
   single-masonry-grid-with-span-capped-at-3 formula it replaces. */
.dashboard-row[b-etmtiji8m4] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.dashboard-card[b-etmtiji8m4] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    grid-column: span var(--dashboard-card-span, 12);
    min-width: 0;
    /* DASHBOARD-SPEC.md §6, "Sizing": floors at the CELL, independent of width -- a 12-wide chart
       and a 4-wide chart sharing a row are the same height, just different widths. */
    min-height: 300px;
}

/* SPRINT-QA 2026-08-14 #15 -- Mazhar on Profit Composition: "first big row with only five rows in
   middle, acres of empty space." That empty space is this 300px floor, and the floor is a CHART rule
   (DASHBOARD-SPEC.md §6 sizing) applied to a card that holds no chart: a row of five stat tiles is
   ~110px of content centred inside a 300px box, so roughly two thirds of the card is padding. A stat
   tile has no plot area to squash, so it does not need the floor. Note `align-items: stretch` on
   .dashboard-row is untouched -- when a stat-tile card SHARES a row with a real chart it still
   stretches to match its neighbour, so this only densifies the case he actually saw, a tile row alone
   on its own row. */
.dashboard-card-stattile[b-etmtiji8m4] {
    min-height: 0;
}

@media (max-width: 767px) {
    .dashboard-row[b-etmtiji8m4] {
        grid-template-columns: 1fr;
    }

    .dashboard-card[b-etmtiji8m4] {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .dashboard-card[b-etmtiji8m4] {
        min-height: 250px;
    }

    /* #15: this block is LATER in the file than .dashboard-card-stattile and has equal specificity,
       so without this the floor would come back on narrow screens -- where the tiles stack and the
       waste is worst. */
    .dashboard-card-stattile[b-etmtiji8m4] {
        min-height: 0;
    }
}

.dashboard-card-title[b-etmtiji8m4] {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.dashboard-card-empty[b-etmtiji8m4] {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.dashboard-card-fallback-note[b-etmtiji8m4] {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-style: italic;
    margin: 0 0 var(--space-2) 0;
}

.dashboard-card-table[b-etmtiji8m4] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.dashboard-card-table th[b-etmtiji8m4] {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    padding: var(--space-2);
    border-bottom: 1px solid var(--border-strong);
}

.dashboard-card-table td[b-etmtiji8m4] {
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.dashboard-card-table tbody tr:last-child td[b-etmtiji8m4] {
    border-bottom: none;
}

/* 0ba (DASHBOARD-CHART-SPEC-V2.md, 2026-08-06): stattile (type 30) -- "label small, value large,
   --st-font-num/tabular, negative values in the standard negative treatment" (that treatment is
   --danger, the only precedent for a negative VALUE in this app -- chart-bar-negative already uses
   it for the SVG bar chart's own negative fill). auto-fit rather than a fixed 5-up: the spec's own
   sizing rule says "3-6 tiles," and a fixed column count would either crowd a 6-tile row or leave a
   3-tile row stretched thin. Each tile gets --surface-raised (the same "a box nested inside a card"
   token DynamicReport/CoaTree already use) so tiles read as distinct from the card's own background,
   not just floating text. */
.dashboard-stattile-row[b-etmtiji8m4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    height: 100%;
    align-content: center;
}

.dashboard-stattile[b-etmtiji8m4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.dashboard-stattile-label[b-etmtiji8m4] {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.dashboard-stattile-value[b-etmtiji8m4] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-stattile-value-negative[b-etmtiji8m4] {
    color: var(--danger);
}

/* 01.E.0034 (S2, "Key Numbers tile upgrade"): the delta line sits under the value, small like the
   label above it -- deliberately its own color per direction (up/down) rather than reusing
   --dashboard-stattile-value-negative, since a tile's own value can be negative (a loss month) while
   its delta is a positive improvement (up vs last month), and the two must never share a color rule. */
.dashboard-stattile-delta[b-etmtiji8m4] {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
}

.dashboard-stattile-delta-up[b-etmtiji8m4] {
    color: var(--success);
}

.dashboard-stattile-delta-down[b-etmtiji8m4] {
    color: var(--danger);
}

.dashboard-stattile-delta-flat[b-etmtiji8m4] {
    color: var(--text-secondary);
}
/* /Features/Dashboard/SkuWaterfallCard.razor.rz.scp.css */
.sku-waterfall-card[b-y6tdpo4ebz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.sku-waterfall-picker-label[b-y6tdpo4ebz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.sku-waterfall-picker-label select[b-y6tdpo4ebz] {
    flex: 1;
    max-width: 320px;
}
/* /Features/Onboarding/OnboardingWizard.razor.rz.scp.css */
.onboarding-page[b-0d4m1klwm1] {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.onboarding-progress[b-0d4m1klwm1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.onboarding-step[b-0d4m1klwm1] {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--st-surface-subtle, #f0f0f0);
    color: var(--st-text-muted, #666);
}

.onboarding-step-current[b-0d4m1klwm1] {
    background: var(--st-accent, #2b6cb0);
    color: #fff;
}

.onboarding-step-done[b-0d4m1klwm1] {
    color: var(--st-success, #2f855a);
}

.onboarding-step-clickable[b-0d4m1klwm1] {
    cursor: pointer;
}

.onboarding-step-clickable:hover[b-0d4m1klwm1] {
    text-decoration: underline;
}

.onboarding-back-btn[b-0d4m1klwm1] {
    margin-bottom: 0.75rem;
}

.onboarding-actions[b-0d4m1klwm1] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.onboarding-setup-row[b-0d4m1klwm1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--st-border-subtle, #e2e2e2);
}

.onboarding-checklist[b-0d4m1klwm1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.onboarding-checklist li[b-0d4m1klwm1] {
    padding: 0.35rem 0;
}

.onboarding-note[b-0d4m1klwm1] {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--st-text-muted, #666);
}
/* /Features/Reports/BalanceSheetStatement.razor.rz.scp.css */
/* 01.B.0152: purpose-built Balance Sheet layout -- two-column ASSETS | EQUITY & LIABILITIES grid,
   deliberately NOT the wide full-browser grid every other report on this screen uses. Same shape as
   ProfitLossStatement.razor.css. */

.bs-statement[b-060ka83pp2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.bs-statement-title[b-060ka83pp2] {
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid var(--st-border-color, #d9dde3);
    padding: 8px 24px;
}

.bs-statement-title-line[b-060ka83pp2] {
    font-weight: 700;
    font-size: 1.05rem;
}

.bs-statement-table[b-060ka83pp2] {
    width: 100%;
    max-width: 960px;
    border-collapse: collapse;
}

.bs-statement-table td[b-060ka83pp2] {
    border: 1px solid var(--st-border-color, #d9dde3);
    padding: 6px 12px;
    font-size: 0.95rem;
}

.bs-statement-table td:nth-child(2)[b-060ka83pp2],
.bs-statement-table td:nth-child(4)[b-060ka83pp2] {
    text-align: right;
    width: 130px;
}

.bs-bold td[b-060ka83pp2] {
    font-weight: 700;
}
/* /Features/Reports/ChartOfAccounts.razor.rz.scp.css */
/* 01.B.0152: flat Chart of Accounts grid -- full-width, unlike P&L/Balance Sheet's narrow centered
   statement tables, since this is a plain listing rather than a formatted financial statement. */

.coa-report[b-c19l4k7wko] {
    margin-top: 16px;
}

.coa-table[b-c19l4k7wko] {
    width: 100%;
    border-collapse: collapse;
}

.coa-table th[b-c19l4k7wko],
.coa-table td[b-c19l4k7wko] {
    border: 1px solid var(--st-border-color, #d9dde3);
    padding: 6px 12px;
    font-size: 0.95rem;
    text-align: left;
}

.coa-table th[b-c19l4k7wko] {
    font-weight: 700;
}

.coa-amount[b-c19l4k7wko] {
    text-align: right;
    width: 150px;
}

.coa-bold[b-c19l4k7wko] {
    font-weight: 700;
}

/* ST-0178: per-head (Type) collapsible group row.
   ST-0025 (Mazhar 09-10): was var(--st-surface-muted, #f4f6fa) -- --st-surface-muted is never
   defined in tokens.css, so this always fell back to the light-gray literal in EVERY theme. Light
   mode happened to look right by coincidence (the fallback IS roughly what a muted light surface
   should be); dark mode did not -- the row kept that light-gray literal while the text themed to
   --st-text-primary's dark-mode light color, so header text went light-on-light. --st-surface-alt
   is the real themed token (light #f5f7f9 / dark #212930), already used elsewhere for this exact
   "slightly off surface" role. */
.coa-head-row td[b-c19l4k7wko] {
    background: var(--st-surface-alt);
}

.coa-head-toggle[b-c19l4k7wko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.coa-head-chevron[b-c19l4k7wko] {
    display: inline-block;
    transition: transform 0.15s ease;
}

.coa-head-chevron-open[b-c19l4k7wko] {
    transform: rotate(90deg);
}
/* /Features/Reports/ComparativeProfitLossStatement.razor.rz.scp.css */
/* 01.B.0164: same purpose-built layout as ProfitLossStatement.razor.css, widened for the extra
   Previous/Variance/Variance % columns (5 columns total vs. P&L's 3). */

.pl-statement[b-zst8ptpyud] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.pl-statement-title[b-zst8ptpyud] {
    text-align: center;
    margin-bottom: 16px;
}

.pl-statement-title-line[b-zst8ptpyud] {
    font-weight: 700;
    font-size: 1.05rem;
}

.pl-statement-table[b-zst8ptpyud] {
    width: 100%;
    max-width: 680px;
    border-collapse: collapse;
}

.pl-statement-table-comparative[b-zst8ptpyud] {
    max-width: 920px;
}

.pl-statement-table td[b-zst8ptpyud] {
    border: 1px solid var(--st-border-color, #d9dde3);
    padding: 8px 12px;
    font-size: 0.95rem;
}

.pl-statement-table td:first-child[b-zst8ptpyud] {
    text-align: left;
}

.pl-statement-table-comparative td:nth-child(2)[b-zst8ptpyud],
.pl-statement-table-comparative td:nth-child(3)[b-zst8ptpyud],
.pl-statement-table-comparative td:nth-child(4)[b-zst8ptpyud],
.pl-statement-table-comparative td:nth-child(5)[b-zst8ptpyud] {
    text-align: right;
    width: 110px;
}

.pl-comparative-header td[b-zst8ptpyud] {
    font-weight: 700;
    border-bottom: 2px solid var(--st-border-color, #d9dde3);
}

.pl-section-header td[b-zst8ptpyud] {
    font-weight: 700;
    text-transform: uppercase;
}

.pl-bold td[b-zst8ptpyud] {
    font-weight: 700;
}

.pl-final td[b-zst8ptpyud] {
    border-top: 2px solid var(--st-border-color, #d9dde3);
}

.pl-spacer td[b-zst8ptpyud] {
    border: none;
    padding: 4px 0;
}
/* /Features/Reports/DynamicReport.razor.rz.scp.css */
.report-page[b-14u912w37j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ROUND 2 (2026-08-15): the .report-breadcrumb rules MOVED OUT of this scoped file into
   wwwroot/Styles/kernel.css. Chart of Account Tree now renders the same breadcrumb (Mazhar: "no path
   back to top"), and scoped CSS is per-component by definition -- the identical markup on CoaTree
   would have rendered as bare buttons and slashes, which reads as a new bug rather than a fix.
   Shared, so the two report screens cannot drift apart on what a breadcrumb looks like. */

.report-folder-list[b-14u912w37j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 32rem;
}

.report-folder-item[b-14u912w37j] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.report-folder-item:hover[b-14u912w37j] {
    background: var(--surface-raised);
}

.report-folder-item-folder[b-14u912w37j] {
    font-weight: 500;
}

.report-folder-chevron[b-14u912w37j] {
    color: var(--text-secondary);
}

.report-folder-item-disabled[b-14u912w37j] {
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.7;
}

.report-folder-item-disabled:hover[b-14u912w37j] {
    background: var(--surface);
}

.report-params[b-14u912w37j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.report-fields[b-14u912w37j] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4);
}

.report-field[b-14u912w37j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.report-field-label[b-14u912w37j] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.report-input[b-14u912w37j] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 38px;
}

/* W532: a checkbox slot sits in the same field row as the inputs, so it needs the 38px line the other
   controls have -- without it the box aligns to the top of the label and reads as a stray tick. */
.report-check[b-14u912w37j] {
    align-self: flex-start;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 10px 0;
    accent-color: var(--brand, var(--text-primary));
}

/* 0-LAYOUT rule 2: date fields date-wide, not stretched by their flex-item container. */
.report-input[type="date"][b-14u912w37j] {
    max-width: 160px;
}

.report-actions[b-14u912w37j] {
    display: flex;
    gap: var(--space-2);
}

.report-btn[b-14u912w37j] {
    height: 38px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
}

.report-btn-primary[b-14u912w37j] {
    border: none;
    background: var(--accent);
    color: var(--text-on-accent);
}

.report-btn-primary:hover[b-14u912w37j] {
    background: var(--accent-hover);
}

.report-btn:disabled[b-14u912w37j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.report-error[b-14u912w37j] {
    color: var(--danger);
    background: var(--danger-muted);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.report-warning[b-14u912w37j] {
    color: var(--warning);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.report-result-block[b-14u912w37j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.report-result-block-title[b-14u912w37j] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
}

/* A76(b): the 1099-K report's payment-transaction count is a report-level stat, not a grid row --
   sits above the grid, pinned to the upper-right, outside the table entirely. */
.report-summary-stat[b-14u912w37j] {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.report-summary-stat-label[b-14u912w37j] {
    color: var(--text-secondary);
}

.report-summary-stat-value[b-14u912w37j] {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* 01.B.0156: Inventory Register's "Item | <name>" header row, sits above the grid on the opposite
   side from the report-summary-stat box (which the same report reuses for Balance Qty/Balance Value). */
.report-item-header[b-14u912w37j] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.report-item-header-label[b-14u912w37j] {
    color: var(--text-secondary);
}

.report-item-header-value[b-14u912w37j] {
    font-weight: 600;
    color: var(--text-primary);
}

.report-pager[b-14u912w37j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.report-pager button[b-14u912w37j] {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.report-pager button:disabled[b-14u912w37j] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .report-fields[b-14u912w37j] {
        flex-direction: column;
        align-items: stretch;
    }

    .report-actions[b-14u912w37j] {
        flex-direction: column;
    }
}

/* W96 (2026-08-11): number columns right-align so the digits line up on the decimal point -- the
   alignment half of the "reports send numbers, the client formats them" shape. tabular-nums keeps
   the columns straight in a proportional font, where a 1 is otherwise narrower than an 8. Applied
   from the COLUMN's declared kind, never per cell, so a 0 sitting in a money column aligns with the
   1,234.56 above it instead of drifting left. */
.report-result-block td.report-cell-number[b-14u912w37j] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 01.B.0151: a report's section-header/TOTAL rows (Balance Sheet's own is_bold column, generic across
   any report that returns one -- see DynamicReport.razor's DisplayColumns/RowClassFor). `.report-row-bold`
   is set on the <tr>, which is DataGrid.razor's OWN markup, not this component's -- ::deep reaches past
   that scope boundary, same pattern as DataGrid.razor.css's own `.data-grid-row:hover ::deep td`. */
.report-result-block[b-14u912w37j]  tr.report-row-bold td {
    font-weight: 700;
}
/* /Features/Reports/ProfitLossStatement.razor.rz.scp.css */
/* 01.E.0049: purpose-built P&L layout -- narrow/centered/bordered, deliberately NOT the wide
   full-browser grid every other report on this screen uses. */

.pl-statement[b-u8il4r7mh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.pl-statement-title[b-u8il4r7mh8] {
    text-align: center;
    margin-bottom: 16px;
}

.pl-statement-title-line[b-u8il4r7mh8] {
    font-weight: 700;
    font-size: 1.05rem;
}

.pl-statement-table[b-u8il4r7mh8] {
    width: 100%;
    max-width: 680px;
    border-collapse: collapse;
}

.pl-statement-table td[b-u8il4r7mh8] {
    border: 1px solid var(--st-border-color, #d9dde3);
    padding: 8px 12px;
    font-size: 0.95rem;
}

.pl-statement-table td:first-child[b-u8il4r7mh8] {
    text-align: left;
}

.pl-statement-table td:nth-child(2)[b-u8il4r7mh8],
.pl-statement-table td:nth-child(3)[b-u8il4r7mh8] {
    text-align: right;
    width: 130px;
}

.pl-section-header td[b-u8il4r7mh8] {
    font-weight: 700;
    text-transform: uppercase;
}

.pl-bold td[b-u8il4r7mh8] {
    font-weight: 700;
}

.pl-final td[b-u8il4r7mh8] {
    border-top: 2px solid var(--st-border-color, #d9dde3);
}

.pl-spacer td[b-u8il4r7mh8] {
    border: none;
    padding: 4px 0;
}
/* /Features/Settings/AccountSettings.razor.rz.scp.css */
.settings-page[b-fmqq6v6c1o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 32rem;
    margin: 0 auto;
}

.settings-readonly-value[b-fmqq6v6c1o] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
}

.settings-note[b-fmqq6v6c1o] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.settings-saved[b-fmqq6v6c1o] {
    color: var(--success);
    font-size: var(--text-sm);
    margin: 0;
}
/* /Features/Settings/ChangePassword.razor.rz.scp.css */
.changepassword-fields[b-zqmwi9fa5w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 24rem;
    margin-bottom: var(--space-4);
}

/* SPRINT-QA 2026-08-14 #36: show-password toggle. Mirrors .inviteuser-checkbox-label rather than
   inventing a shared kernel class mid-sprint -- there is no kernel checkbox style yet, and adding
   one is a design decision, not a QA fix. */
.changepassword-checkbox-label[b-zqmwi9fa5w] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
}
/* /Features/Settings/InviteUser.razor.rz.scp.css */
.inviteuser-page[b-36n6lmevxa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.inviteuser-subtitle[b-36n6lmevxa] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.inviteuser-form[b-36n6lmevxa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inviteuser-checkbox-label[b-36n6lmevxa] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
}
/* /Features/SubAccounts/SubAccountEdit.razor.rz.scp.css */
.sub-account-edit-page[b-xp1c9t6k7r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 48rem;
    margin: 0 auto;
}

.sub-account-edit-title[b-xp1c9t6k7r] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.sub-account-edit-fields[b-xp1c9t6k7r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.sub-account-checkbox-field[b-xp1c9t6k7r] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
    align-self: center;
}

/* 0bs item 5 (2026-08-09): the checkbox row gained a hint line under its label -- stack label+hint
   in their own column so they wrap under the checkbox instead of fighting it for one flex row. */
.sub-account-checkbox-field-text[b-xp1c9t6k7r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: 0.1em;
}

.sub-account-section-title[b-xp1c9t6k7r] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

@media (max-width: 767px) {
    .sub-account-edit-fields[b-xp1c9t6k7r] {
        grid-template-columns: 1fr;
    }
}

/* A107b (2026-08-20): Priority + SKU as one grid item containing a flex row, so they always render
   on the same line regardless of how many columns the outer auto-fit grid happens to land on. */
.sub-account-priority-sku-group[b-xp1c9t6k7r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    grid-column: span 2;
}

.sub-account-priority-sku-group > .kernel-field[b-xp1c9t6k7r] {
    flex: 1 1 200px;
}

@media (max-width: 767px) {
    .sub-account-priority-sku-group[b-xp1c9t6k7r] {
        grid-column: span 1;
    }
}

/* A83 (2026-08-19): the Vendors tab's ValueTemplate cell now carries three inputs (SKU, default
   qty, default price) instead of one -- laid out as their own small flex row so they read as one
   "buying details" group rather than three unrelated boxes crammed into a table cell. Wraps on
   narrow screens the same way sub-account-edit-fields already does. */
.vendor-item-value-cell[b-xp1c9t6k7r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vendor-item-value-field[b-xp1c9t6k7r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.vendor-item-value-field input[b-xp1c9t6k7r] {
    width: 6.5rem;
}
/* /Features/SubAccounts/SubAccountSearch.razor.rz.scp.css */
.sub-account-search-page[b-9qcjwp4b1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ROUND 2 (2026-08-15): .sub-account-search-header is GONE, and its own comment is why. 0-REVIEW-9 #4
   had already reduced it to "this row holds only the button" once the title moved into the topbar
   ribbon; moving Add down into the filter bar left it holding nothing at all. An empty flex row that
   still contributes the page's --space-4 gap is invisible in the markup and visible on the screen, so
   the wrapper went with the rule rather than being left as a mystery blank strip above the filters. */

/* /Features/SuperAdmin/ImportHistory.razor.rz.scp.css */
/* 01.B.0119: any import that posted fewer rows than the file contained, or was refused outright,
   is flagged RED and sorted to the top of the grid by the code-behind's sortedRuns/IsIncomplete. */
.import-health-alert[b-dxhv5kstur] {
    color: var(--danger);
    background: var(--danger-muted);
}

/* 01.B.0149 part (1)(c): the CRITICAL banner's own row list -- one clickable line per quarantined
   header, listing account/period/count/error, matching the danger palette above. */
.import-health-critical-list[b-dxhv5kstur] {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.import-health-critical-list li[b-dxhv5kstur] {
    background: var(--danger-muted);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
}

.import-health-critical-list .kernel-link-btn[b-dxhv5kstur] {
    color: var(--danger);
    text-align: left;
    width: 100%;
}
/* /Features/Support/ContactSupport.razor.rz.scp.css */
.contact-support-page[b-uf5m9bqfp8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-support-header-bar[b-uf5m9bqfp8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.contact-support-title[b-uf5m9bqfp8] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.contact-support-back[b-uf5m9bqfp8] {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
}

.contact-support-back:hover[b-uf5m9bqfp8] {
    color: var(--text-primary);
}

.contact-support-form[b-uf5m9bqfp8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.contact-support-message-field[b-uf5m9bqfp8] {
    max-width: none;
}

.contact-support-list[b-uf5m9bqfp8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-support-row[b-uf5m9bqfp8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.contact-support-row:hover[b-uf5m9bqfp8] {
    background: var(--st-surface-hover);
}

.contact-support-row-subject[b-uf5m9bqfp8] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-support-row-date[b-uf5m9bqfp8] {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.contact-support-status[b-uf5m9bqfp8] {
    flex: 0 0 auto;
    padding: 2px var(--space-2);
    border-radius: var(--st-radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    background: var(--st-surface-alt);
    color: var(--text-secondary);
}

.contact-support-status-open[b-uf5m9bqfp8] {
    background: var(--st-accent-subtle);
    color: var(--st-accent-on-subtle);
}

.contact-support-status-closed[b-uf5m9bqfp8] {
    background: var(--st-surface-alt);
    color: var(--text-muted);
}

.contact-support-thread[b-uf5m9bqfp8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-support-message[b-uf5m9bqfp8] {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

.contact-support-message-admin[b-uf5m9bqfp8] {
    background: var(--st-accent-subtle);
    border-color: var(--st-accent-subtle);
}

.contact-support-message-author[b-uf5m9bqfp8] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.contact-support-message-body[b-uf5m9bqfp8] {
    margin-top: var(--space-1);
    color: var(--text-primary);
    white-space: pre-wrap;
}

.contact-support-message-date[b-uf5m9bqfp8] {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.contact-support-reply[b-uf5m9bqfp8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* A227 (2026-08-22): the pending-file list on the new-ticket/reply forms, and the attached-file
   links inside a posted message -- same list shape, different content, one style. */
.contact-support-attachment-list[b-uf5m9bqfp8] {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.contact-support-attachment-link[b-uf5m9bqfp8] {
    border: none;
    background: transparent;
    color: var(--st-accent-on-subtle);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}

.contact-support-attachment-link:hover[b-uf5m9bqfp8] {
    color: var(--text-primary);
}
/* /Features/Tags/TagEdit.razor.rz.scp.css */
.tag-edit-page[b-ntjid1zti6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 48rem;
    margin: 0 auto;
}

.tag-edit-fields[b-ntjid1zti6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.tag-edit-checkbox-field[b-ntjid1zti6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

@media (max-width: 767px) {
    .tag-edit-fields[b-ntjid1zti6] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Tags/TagSearch.razor.rz.scp.css */
.tag-search-page[b-qgv8312hf0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* /Features/Terms/PrivacyView.razor.rz.scp.css */
.terms-view-page[b-8nto8i7qp7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}

.terms-view-back[b-8nto8i7qp7] {
    align-self: flex-start;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.terms-view-back:hover[b-8nto8i7qp7] {
    color: var(--text-primary);
    text-decoration: underline;
}

.terms-view-title[b-8nto8i7qp7] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.terms-view-meta[b-8nto8i7qp7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.terms-view-content[b-8nto8i7qp7] {
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
/* /Features/Terms/TermsAcceptance.razor.rz.scp.css */
.terms-acceptance-page[b-1184klh444] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-surface-app);
    padding: var(--space-4);
}

.terms-acceptance-panel[b-1184klh444] {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

.terms-acceptance-title[b-1184klh444] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.terms-acceptance-subtitle[b-1184klh444] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.terms-acceptance-content[b-1184klh444] {
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--st-surface-alt);
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.terms-acceptance-changes[b-1184klh444] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.terms-acceptance-checkbox-label[b-1184klh444] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-sm);
}
/* /Features/Terms/TermsView.razor.rz.scp.css */
.terms-view-page[b-vhwo3orhd7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}

.terms-view-back[b-vhwo3orhd7] {
    align-self: flex-start;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.terms-view-back:hover[b-vhwo3orhd7] {
    color: var(--text-primary);
    text-decoration: underline;
}

.terms-view-title[b-vhwo3orhd7] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.terms-view-meta[b-vhwo3orhd7] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.terms-view-content[b-vhwo3orhd7] {
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
/* /Features/Transactions/JournalVoucherEdit.razor.rz.scp.css */
/* Subset of TrnEdit.razor.css's rules this page still needs -- Blazor scoped CSS is per-component, so
   TrnEdit's own file (its scoping attribute) never reaches markup rendered by this component even
   though the class names are shared on purpose (same visual language as every other transaction
   screen). Kept identical to the source rules rather than reinvented. */

.trn-edit-page[b-x5lqil5bm6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trn-edit-fields[b-x5lqil5bm6] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}

.trn-edit-add-actions[b-x5lqil5bm6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.trn-edit-narrow[b-x5lqil5bm6] {
    width: 100px;
}

.trn-edit-description-field[b-x5lqil5bm6] {
    max-width: 800px;
}

.trn-edit-debit[b-x5lqil5bm6] {
    color: var(--debit);
}

.trn-edit-credit[b-x5lqil5bm6] {
    color: var(--credit);
}

.trn-edit-total-box[b-x5lqil5bm6] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
}

.trn-edit-total-box > span:first-child[b-x5lqil5bm6]::after {
    content: ":";
}

.trn-edit-actionbar-left[b-x5lqil5bm6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.trn-edit-balance-chip[b-x5lqil5bm6] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-sm);
    font-weight: 600;
}

.trn-edit-balance-chip-ok[b-x5lqil5bm6] {
    background: var(--st-success-subtle);
    color: var(--st-success-on-subtle);
}

.trn-edit-balance-chip-bad[b-x5lqil5bm6] {
    background: var(--danger-muted);
    color: var(--danger);
}
/* /Features/Transactions/TransactionSearch.razor.rz.scp.css */
.txn-search-page[b-yj00irxmml] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* 0-REVIEW-9 #4 (2026-08-06): was justify-content: space-between, balancing the title against the
   New transaction button -- the title moved into the topbar ribbon (ScreenHeader renders nothing
   in-page now), so this row holds only the button. */
.txn-search-header-bar[b-yj00irxmml] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.txn-search-footer[b-yj00irxmml] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.txn-search-pager button[b-yj00irxmml] {
    margin-left: var(--space-2);
}

/* /Features/Transactions/TrnEdit.razor.rz.scp.css */
.trn-edit-page[b-fsgo3htxjz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trn-edit-clone-frame[b-fsgo3htxjz] {
    border: 2px solid var(--warning);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.trn-edit-clone-banner[b-fsgo3htxjz] {
    background: var(--warning-muted);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* 01.A.0038: the "created from"/"billed status"/child-links block, relocated below the Save/Cancel
   action bar -- a light top border marks it as secondary, trailing content rather than part of the
   primary form. */
.trn-edit-chain-footer[b-fsgo3htxjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle, var(--border));
}

/* W27 (Mazhar, ruled 08-08/08-10): the inline "add a sub-account, right here" prompt that replaces
   the old dead-end. Accent border, not warning -- this isn't an error state, it's the unblock path. */
.trn-edit-inline-subaccount[b-fsgo3htxjz] {
    background: var(--surface-raised);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.trn-edit-inline-subaccount-prompt[b-fsgo3htxjz] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.trn-edit-header-bar[b-fsgo3htxjz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.trn-edit-title[b-fsgo3htxjz] {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-primary);
}

/* A33 (2026-08-18): was a CSS grid with equal-width auto-fit columns. .kernel-field children each
   cap their own max-width differently (400px generic, 160px date, 140px number -- kernel.css --
   plus Transaction # forces its <input> to 100px via .trn-edit-narrow while its label wrapper stays
   at the 400px generic cap). A grid gives every column the SAME track width regardless of that cap,
   so whichever field's content is narrower than its column left a different amount of dead space
   before the next field started -- read as "random gaps between header fields." Flex instead: each
   field sizes to its own capped width, so the one declared `gap` is the only space between any two
   fields, matching .kernel-filter-bar's own established pattern for this exact shape (kernel.css,
   "a horizontal row of .kernel-field controls, each already capped to its own content-appropriate
   width, that wraps to additional rows"). */
.trn-edit-fields[b-fsgo3htxjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}

.trn-edit-add-actions[b-fsgo3htxjz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.trn-edit-narrow[b-fsgo3htxjz] {
    width: 100px;
}

/* A247 (Mazhar 08-23): "double its current width" -- .kernel-field's own generic cap is 400px
   (kernel.css), sized for a date/number/short dropdown, not the one free-text field on this screen. */
.trn-edit-description-field[b-fsgo3htxjz] {
    max-width: 800px;
}

.trn-edit-debit[b-fsgo3htxjz] {
    color: var(--debit);
}

.trn-edit-credit[b-fsgo3htxjz] {
    color: var(--credit);
}

/* Item 8 (2026-08-07 pen): was flex-direction: column -- a stacked label-over-value box that ate
   vertical space an entry screen's grid needs more (screenshot on file). Compact one-line pill
   instead: label, colon, value, all inline -- same information, none of the height. */
.trn-edit-total-box[b-fsgo3htxjz] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-sm);
}

.trn-edit-total-box > span:first-child[b-fsgo3htxjz]::after {
    content: ":";
}

/* PEN-2 item 6 (2026-08-08, amended item 8 ruling): the chip + both totals + the add-line buttons
   (when present) all live in this one left-hand group now, opposite .st-actionbar__primary --
   .st-actionbar's own space-between still only ever sees 2 children, unchanged. flex-wrap here (not
   on the shared .st-actionbar) is what gives "same row, wrap to the next line only if it doesn't
   fit" without touching a class other screens also use. */
.trn-edit-actionbar-left[b-fsgo3htxjz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Claude Design's chip pattern: solid tinted background + on-tint text, not an outline like
   .trn-edit-total-box next to it -- the chip is a status signal, the totals are data, and looking
   different from each other is what makes that distinction readable at a glance. */
.trn-edit-balance-chip[b-fsgo3htxjz] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-sm);
    font-weight: 600;
}

.trn-edit-balance-chip-ok[b-fsgo3htxjz] {
    background: var(--st-success-subtle);
    color: var(--st-success-on-subtle);
}

.trn-edit-balance-chip-bad[b-fsgo3htxjz] {
    background: var(--danger-muted);
    color: var(--danger);
}

/* A185 partial-billing ruling: reuses .trn-edit-balance-chip's same solid-tint pattern for the
   Open/Partially Billed/Billed badge -- Open is neutral (nothing has happened yet), Partial is the
   same warning tint the clone banner uses (an in-progress state worth noticing), Billed is the same
   success tint the balance chip uses (a completed, good state). */
.trn-edit-billed-chip-open[b-fsgo3htxjz] {
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.trn-edit-billed-chip-partial[b-fsgo3htxjz] {
    background: var(--warning-muted);
    color: var(--text-primary);
}

.trn-edit-billed-chip-full[b-fsgo3htxjz] {
    background: var(--st-success-subtle);
    color: var(--st-success-on-subtle);
}

/* A70/W169 step 3: the two section headers on the opening-balances screen (see IsOpeningBalanceMode
   in TrnEdit.razor). Same weight/size relationship as .trn-edit-title has to the page around it, one
   level down -- a section inside the page, not a second page title. */
.trn-edit-opening-section-title[b-fsgo3htxjz] {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .trn-edit-fields[b-fsgo3htxjz] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Kernel/Components/AccountTreePicker.razor.rz.scp.css */
.acct-picker[b-djn40m3das] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.acct-picker-trigger[b-djn40m3das] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.acct-picker-trigger-label[b-djn40m3das] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-picker-trigger-caret[b-djn40m3das] {
    flex: none;
    opacity: 0.6;
}

.acct-picker-panel[b-djn40m3das] {
    position: fixed;
    z-index: 1100;
    min-width: 320px;
    max-width: 480px;
    background: var(--st-surface-overlay);
    border: 1px solid var(--st-border);
    color: var(--st-text-primary);
    border-radius: 6px;
    box-shadow: var(--st-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.15));
    padding: 0.5rem;
}

.acct-picker-search[b-djn40m3das] {
    width: 100%;
    margin-bottom: 0.5rem;
}

.acct-picker-tree[b-djn40m3das] {
    max-height: 320px;
    overflow-y: auto;
}

.acct-picker-empty[b-djn40m3das] {
    padding: 0.5rem;
    color: var(--st-text-muted);
    font-size: 0.9rem;
}

.acct-picker-node-group[b-djn40m3das] {
    font-weight: 600;
}

.acct-picker-node-selectable[b-djn40m3das] {
    cursor: pointer;
}

.acct-picker-node-selectable:hover[b-djn40m3das] {
    text-decoration: underline;
}

.acct-picker-panel-footer[b-djn40m3das] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Kernel/Components/ChainLinkNav.razor.rz.scp.css */
.st-chain-link-nav[b-49hb2wwpk4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.st-chain-link-nav-label[b-49hb2wwpk4] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.st-chain-link-nav-select[b-49hb2wwpk4] {
    min-width: 12rem;
}
/* /Kernel/Components/ChartOfAccountSubAccountTreePicker.razor.rz.scp.css */
.coa-tree-filter[b-fwcmztgj86] {
    position: relative;
    display: inline-block;
    width: 100%;
}

.coa-tree-filter-trigger[b-fwcmztgj86] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.coa-tree-filter-trigger-label[b-fwcmztgj86] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coa-tree-filter-trigger-caret[b-fwcmztgj86] {
    flex: none;
    opacity: 0.6;
}

.coa-tree-filter-panel[b-fwcmztgj86] {
    position: fixed;
    z-index: 1100;
    min-width: 320px;
    max-width: 480px;
    background: var(--st-surface-overlay);
    border: 1px solid var(--st-border);
    color: var(--st-text-primary);
    border-radius: 6px;
    box-shadow: var(--st-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.15));
    padding: 0.5rem;
}

.coa-tree-filter-search[b-fwcmztgj86] {
    width: 100%;
    margin-bottom: 0.5rem;
}

.coa-tree-filter-tree[b-fwcmztgj86] {
    max-height: 320px;
    overflow-y: auto;
}

.coa-tree-filter-empty[b-fwcmztgj86] {
    padding: 0.5rem;
    color: var(--st-text-muted);
    font-size: 0.9rem;
}

.coa-tree-filter-node-selectable[b-fwcmztgj86] {
    cursor: pointer;
}

.coa-tree-filter-node-selectable:hover[b-fwcmztgj86] {
    text-decoration: underline;
}

.coa-tree-filter-node-all[b-fwcmztgj86] {
    display: block;
    padding: 0.25rem 0;
    font-weight: 600;
    border-bottom: 1px solid var(--st-border);
    margin-bottom: 0.25rem;
}

.coa-tree-filter-panel-footer[b-fwcmztgj86] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
/* /Kernel/Components/DataGrid.razor.rz.scp.css */
/* COMPONENT-SPECS.md §1 (data grid) -- table-based rather than the spec's CSS-grid layout (a
   structural rewrite means changing RowTemplate's shape, a breaking change for every consuming
   screen -- Dashboard, TransactionSearch, SubAccountSearch, DynamicReport, TrnEdit -- and no CI
   evidence has ever shown the table itself causing a real defect, unlike the shell chrome task 28
   part 1 fixed). Token values, row height, header fill, zebra striping, and the sticky header
   (thead { position: sticky }, below) already match spec. Still genuinely missing: the full row-state
   matrix (selected/flagged/inactive) -- no screen has a selection or flagging CONCEPT yet, so there's
   nothing real to wire the states to -- and the phone card transform, which (unlike sticky header)
   needs per-cell data-label attributes RowTemplate would have to supply, touching all 5 screens.
   Roving-tabindex arrow-key row navigation (spec's Keyboard table) is the one piece that's both real
   spec compliance AND achievable without touching any consuming screen -- flagged as the next
   candidate, not attempted this pass to avoid rushing a focus-management change without time left to
   verify it properly.

   Bug ledger #18 (2026-08-10, Mazhar, REOPENED "reported at least twice before"): root-caused live
   against beta, not guessed -- every `td` rule below has NEVER actually applied to a single real data
   cell, on any screen, ever. `<table>`/`<thead>`/`<tr>` are authored directly in DataGrid.razor, so
   Blazor's CSS isolation stamps them with DataGrid's own scope attribute and this file's selectors
   (auto-suffixed with that same scope) match them correctly -- confirmed live, header height renders
   exactly per spec. But `<td>` content comes from RowTemplate, a RenderFragment whose markup is
   physically authored in each CONSUMING screen's own .razor file (TransactionSearch, SubAccountSearch,
   etc.) -- Blazor scopes by WHERE markup is textually written, not by the runtime component tree, so
   those td elements carry the CONSUMER's scope instead, and `.data-grid td[b-datagrids-own-hash]`
   never matches them. Measured live: a real SubAccountSearch row's `<td>` had 1px padding and 21px
   line-height with NO trace of this file's 8px/12px padding, 36px row-height, or 1.2 line-height --
   just browser table-cell defaults plus inherited body typography. Every previous "row height" fix to
   this file (0-ROW-SPACING, PEN-2 item 4) was correct in the SOURCE and simply never took effect,
   which is exactly why Mazhar kept re-finding the same symptom. Fix: Blazor's `::deep` combinator,
   built for precisely this "reach past a child's own scope boundary" case -- inserted once per
   selector, right before the first `td` (the actual RowTemplate-owned boundary); everything before
   `::deep` (`.data-grid`, `.data-grid-row`, `tr:nth-child`) still needs no change, since those already
   match correctly.

   CORRECTION 2026-08-13: the `::deep` fix described above WORKED and is not the remaining problem --
   `obj/.../SellerTally.WebApp.styles.css` emits `.data-grid[b-z1cwlmfn2o] td`, which matches
   RowTemplate cells. The measurement that reopened bug 18 (52px data row vs 40px header) is a
   SECOND, unrelated cause, explained in full on the `td` rule below: a 36px control inside a cell
   plus the cell's own vertical padding, with `height` on a table cell being a minimum rather than a
   cap. Do not re-attempt the scoping; read the `td` rule's comment instead. */
.data-grid-wrapper[b-z1cwlmfn2o] {
    /* Wide grids scroll inside their own container, never the page body -- BLAZOR-REBUILD-SPEC.md
       responsive rule. */
    overflow-x: auto;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-surface);
}

.data-grid[b-z1cwlmfn2o] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--st-text-sm);
}

.data-grid thead[b-z1cwlmfn2o] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-grid th[b-z1cwlmfn2o] {
    text-align: left;
    background: var(--st-accent-fill);
    color: var(--st-text-on-fill);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 600;
    height: var(--st-grid-header-h);
    padding: 0 var(--st-space-3);
    white-space: nowrap;
}

/* SPRINT-QA 2026-08-14 #37: the header of a numeric column, right-aligned so it sits over its own
   figures instead of at the far side of the column. Not ::deep -- the <th> is this component's own
   markup, unlike the caller-supplied <td>s below. */
.data-grid th.data-grid-th-number[b-z1cwlmfn2o] {
    text-align: right;
}

/* R4 A42 (Mazhar 08-18): sortable column headers. The button fills the <th> and inherits its type
   styling rather than looking like a default browser button -- it is the header, not a control sitting
   inside it. */
.data-grid-sort-btn[b-z1cwlmfn2o] {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.data-grid-sort-btn:hover[b-z1cwlmfn2o],
.data-grid-sort-btn:focus-visible[b-z1cwlmfn2o] {
    text-decoration: underline;
}

/* R4 B19 (Mazhar, 2026-08-17): "the delete icon goes to the EXTREME right edge of the row." Today it
   sits wherever the row-action column's share of `table-layout: auto` happens to leave it, which on a
   narrow grid is nowhere near the edge -- and it differs per screen, which is the part he is actually
   seeing.

   `width: 1%` is the standard table idiom for "shrink this column to its content": with auto layout the
   browser distributes the surplus to the OTHER columns rather than honouring a literal 1%, so the action
   column ends up exactly as wide as the glyph and the row's real right edge is where the glyph lands.
   `text-align: right` then handles the leftover padding. Keyed on the EMPTY `data-label`, which is
   already this app's convention for a row-action column (TrnEdit's remove-line, SecAccountList's and
   AmazonImport's delete all use `data-label=""` today) rather than on `:last-child`, so a grid whose
   last column is real data is untouched. `::deep` because these <td>s are the caller's markup, not this
   component's -- the same split the <th> rule above calls out. */
.data-grid[b-z1cwlmfn2o]  td[data-label=""] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.data-grid th:last-child:empty[b-z1cwlmfn2o] {
    width: 1%;
}

/* A200 (Mazhar 08-21): the screen's primary Add button, moved out of the filter row and into this
   header cell (see DataGrid.razor's HeaderAction). text-align: right keeps it pinned to the grid's
   own right edge -- the same edge the row-action column (this same <th>) already anchors to via the
   width:1%/text-align:right rules above -- and kernel-btn-sm (32px, the same in-grid-control anchor
   --st-row-h's own comment already uses) is what makes it fit inside the 40px header with room to
   spare, instead of growing the header row to fit a full-size --st-control-h button. */
.data-grid-th-action[b-z1cwlmfn2o] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* 01.A.0036 (Mazhar 08-26): kernel-btn-primary is the same accent-fill color as this <th>'s own
   background, so the Add button reads as a blank patch instead of a button. Invert it here so it
   stands out against the header it lives inside, without touching kernel-btn-primary's look
   everywhere else it's used (on neutral-background pages, where it's already fine). */
.data-grid-th-action[b-z1cwlmfn2o]  .kernel-btn-primary {
    background: var(--st-surface);
    border-color: var(--st-surface);
    color: var(--st-accent-fill);
}

/* 01.B.0052 (2026-08-26) fix: --st-surface-hover is a translucent overlay token (tokens.css,
   rgba alpha 0.05-0.06), meant to composite over an opaque card/page background. Here the button's
   own background is the local invert two rules up (var(--st-surface), solid) sitting on TOP of the
   <th>'s own accent-fill (blue) background -- a near-transparent hover overlay let that blue bleed
   back through almost fully, landing the effective hover background back near --st-accent-fill,
   the SAME color as this button's (unchanged on hover) accent-fill text. That is the literal
   foreground=background bug Mazhar reported. Hover now keeps the same solid surface color, dimmed
   only by the brightness filter already here -- visible feedback with nothing left to bleed through. */
.data-grid-th-action[b-z1cwlmfn2o]  .kernel-btn-primary:hover {
    background: var(--st-surface);
    filter: brightness(0.95);
}

.data-grid[b-z1cwlmfn2o]  td {
    height: var(--st-row-h);
    /* Bug 18, REOPENED 2026-08-13 -- MEASURED on beta, then explained by arithmetic that fits the
       measurement exactly: data row 52px against a 40px header, i.e. TALLER than the header, the
       opposite direction from Mazhar's original complaint. It is NOT a `::deep` scoping failure
       (the ledger row's standing hypothesis) -- the compiled bundle emits
       `.data-grid[b-z1cwlmfn2o] td`, which matches RowTemplate cells correctly, and the proof is the
       52 itself: it can only arise if this rule's own padding IS applying. 52 = a 36px
       `.kernel-btn` (--st-control-h) in SecAccountList's row-action cell, PLUS this cell's 8+8px
       vertical padding. For a table cell `height` is a MINIMUM, not a cap, so any --st-control-h
       control inside the cell -- the Delete button here, TrnEdit's line inputs -- pushes the row to
       36+16 = 52 no matter what --st-row-h says. Retuning --st-row-h could never fix that, which is
       why every previous attempt (0-ROW-SPACING, PEN-2 item 4) failed on exactly the screens that
       have a control in a cell.
       So: the vertical padding is REMOVED and --st-row-h alone owns the row height. 0-ROW-SPACING's
       concern (text flush against the row edges) does not return -- table cells are
       vertical-align:middle, so a 16.8px text line inside a 36px minimum leaves ~9.6px above and
       below, which is the breathing room that padding was added to buy. In-grid controls are capped
       at --st-control-h-sm below, the token whose own comment already reads "in-grid controls".
       CORRECTED 2026-08-13 (W516): the first version of this fix set the vertical padding to a flat
       `0`, which turned `DataGridRows_HaveRealVerticalPadding_NotFlushAgainstTheRowEdge` red -- that
       test guards 0-ROW-SPACING's rule by asserting computed `padding-top != 0px`, and "the 36px
       minimum supplies the breathing room" is a true argument that the assertion does not accept.
       2px is the value that satisfies BOTH rules at once, and it is arithmetic rather than taste:
       the tallest thing a data cell may now contain is a 32px --st-control-h-sm control, and
       32 + 2 + 2 = 36 = --st-row-h, so the row still lands exactly on the --st-control-h anchor the
       header-vs-row test measures. 4px would make it 40px and tie the 40px header, failing bug 18
       again. Do not raise it without re-reading both tests. */
    padding: 2px var(--st-space-3);
    /* PEN-2 item 4 (2026-08-08): the inherited body line-height (--st-leading-sm: 1.5) at this 14px
       font computes to a 21px line box; 1.2 puts it at 16.8px. Still correct and still needed --
       with the padding gone the budget is the full 36px, but a prose line-height in a grid row is
       wrong on its own terms. */
    line-height: 1.2;
    border-bottom: 1px solid var(--st-border-subtle);
    color: var(--st-text-primary);
}

/* Bug 18: a control in a data cell must fit INSIDE the row, not define it. --st-control-h-sm (32px)
   is the token tokens.css already labels "in-grid controls, pager" -- so a row with a Delete button
   or an editable input stays at --st-row-h (36px) with 2px clear above and below, and every grid row
   in the app measures the same height whether or not its cells hold controls. Not scoped to
   `.kernel-btn` alone: inputs and selects in TrnEdit's line grid have the same 36px default and the
   same effect on the row. The phone-card block at the bottom of this file overrides this
   deliberately (--st-tap-min) and, being later and more specific, still wins there. */
.data-grid[b-z1cwlmfn2o]  td .kernel-btn,
.data-grid[b-z1cwlmfn2o]  td .kernel-input,
.data-grid[b-z1cwlmfn2o]  td .kernel-select,
.data-grid[b-z1cwlmfn2o]  td input:not([type="checkbox"]):not([type="radio"]),
.data-grid[b-z1cwlmfn2o]  td select {
    height: var(--st-control-h-sm);
}

.data-grid tbody tr:nth-child(even)[b-z1cwlmfn2o]  td {
    background: var(--st-surface-alt);
}

.data-grid tbody tr:last-child[b-z1cwlmfn2o]  td {
    border-bottom: none;
}

/* Whole row is the click target -- cursor + hover/focus feedback signal that, not any one cell. */
.data-grid-row[b-z1cwlmfn2o] {
    cursor: pointer;
    transition: background var(--st-duration-fast) var(--st-ease);
}

.data-grid-row:hover[b-z1cwlmfn2o]  td {
    background: var(--st-surface-hover);
}

.data-grid-row:focus-visible[b-z1cwlmfn2o] {
    outline: 2px solid var(--st-focus-ring);
    outline-offset: -2px;
}

.data-grid-row:focus-visible[b-z1cwlmfn2o]  td {
    background: var(--st-surface-hover);
}

/* 0-NIGHT-RUN (2026-08-05), COMPONENT-SPECS.md §1 "Phone": task 28's own scoped-out remainder,
   unparked now that the consuming-screen work (data-label on every real DataGrid RowTemplate) is
   right-sized. Below 640px the header row disappears and each row becomes its own card; column
   captions return per-cell via the RowTemplate's own `data-label` attribute (added on every real
   consumer -- TransactionSearch, SubAccountSearch, PeriodClose, AmazonImport, SecAccountList,
   DynamicReport, TrnEdit; CoaTree's own RowTemplate belongs to TreeView, a different component, and
   is untouched). A cell with an EMPTY data-label ("") is this app's existing convention for a row-
   action column (SecAccountList's Delete button, TrnEdit's remove-line button both already use ""
   as their ColumnHeaders entry) -- reused here rather than inventing a second marker: it moves to
   the top of the card via `order: -1` and drops its (empty) caption, so the action reads as the
   card's header action, not just another labelled field at the bottom. */
@media (max-width: 640px) {
    .data-grid-wrapper[b-z1cwlmfn2o] {
        overflow-x: visible;
        border: none;
        background: transparent;
    }

    .data-grid thead[b-z1cwlmfn2o] {
        display: none;
    }

    .data-grid[b-z1cwlmfn2o], .data-grid tbody[b-z1cwlmfn2o] {
        display: block;
        width: 100%;
    }

    .data-grid tbody tr[b-z1cwlmfn2o] {
        display: flex;
        flex-direction: column;
        background: var(--st-surface);
        border: 1px solid var(--st-border);
        border-radius: var(--st-radius-md);
        padding: var(--st-space-3);
        margin-bottom: var(--st-space-3);
    }

    .data-grid tbody tr:last-child[b-z1cwlmfn2o] {
        margin-bottom: 0;
    }

    /* Zebra striping is a wide-table convention -- every row is already its own bordered card here,
       so a second, cell-level background would just look like a stray highlight. */
    .data-grid tbody tr:nth-child(even)[b-z1cwlmfn2o]  td {
        background: transparent;
    }

    .data-grid[b-z1cwlmfn2o]  td {
        display: flex;
        align-items: baseline;
        gap: var(--st-space-3);
        height: auto;
        padding: var(--st-space-1) 0;
        border-bottom: none;
        white-space: normal;
    }

    .data-grid[b-z1cwlmfn2o]  td::before {
        content: attr(data-label);
        flex: 0 0 15ch;
        font-family: var(--st-font-ui);
        font-size: var(--st-text-xs);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--st-text-muted);
    }

    /* Row-action cell (empty data-label -- see the block comment above): header of the card, not a
       labelled field. --st-tap-min matches spec's own "moves to the card header at --st-tap-min". */
    .data-grid[b-z1cwlmfn2o]  td[data-label=""] {
        order: -1;
        justify-content: flex-end;
        padding-top: 0;
        margin-bottom: var(--st-space-2);
    }

    .data-grid[b-z1cwlmfn2o]  td[data-label=""]::before {
        content: none;
    }

    .data-grid[b-z1cwlmfn2o]  td[data-label=""] .kernel-btn {
        height: var(--st-tap-min);
    }
}
/* /Kernel/Shell/MenuTestPage.razor.rz.scp.css */
/* A64: Blazor CSS isolation scopes every one of these to MenuTestPage.razor's own markup (a unique
   [b-xxxxx] attribute gets appended by the build) -- kernel.css's .shell-nav-* rules cannot reach in
   here, and these rules cannot leak out either. That is the whole point: prove the collapse/expand
   transition clean, with nothing legacy in the cascade to blame or to accidentally inherit the bug
   from.

   Root-cause guess about the original jitter, carried over from A55's own finding (not re-litigated,
   just applied consistently everywhere here too): `justify-content` (e.g. center-when-collapsed,
   flex-start-when-expanded) is not an animatable property, so a rail that swaps it on collapse jumps
   in one frame instead of transitioning. Every rule below only ever animates `width`/`padding`/
   `opacity` -- properties the browser can actually interpolate -- and layout alignment stays constant
   (`flex-start`) in both states; the icon's fixed width plus the label's own width/opacity animation is
   what makes it LOOK centered when collapsed, without ever touching justify-content. */

.mt-page[b-z0h6cnrvx5] {
    min-height: 100vh;
    background: var(--st-surface, #f4f6f8);
    color: var(--st-text, #1c2126);
    font-family: var(--st-font, system-ui, sans-serif);
}

.mt-banner[b-z0h6cnrvx5] {
    padding: var(--st-space-3, 12px) var(--st-space-4, 16px);
    background: #fff3cd;
    color: #664d03;
    font-size: var(--st-text-sm, 14px);
    border-bottom: 1px solid #ffe69c;
}

.mt-shell[b-z0h6cnrvx5] {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 48px);
}

.mt-nav[b-z0h6cnrvx5] {
    display: flex;
    flex-direction: column;
    background: #1a2026;
    color: var(--st-text-on-chrome, #fff);
    width: 210px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Only width is animated -- the one property that actually needs to change on toggle. */
    transition: width 0.3s ease;
}

.mt-nav-collapsed[b-z0h6cnrvx5] {
    width: 70px;
}

.mt-nav-header[b-z0h6cnrvx5] {
    display: flex;
    justify-content: flex-end;
    padding: var(--st-space-2, 8px);
    flex-shrink: 0;
}

.mt-collapse-toggle[b-z0h6cnrvx5] {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 16px;
}

.mt-collapse-toggle:hover[b-z0h6cnrvx5] {
    background: rgba(255, 255, 255, 0.08);
}

.mt-nav-divider[b-z0h6cnrvx5] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0 var(--st-space-2, 8px) 0;
    flex-shrink: 0;
}

.mt-nav-loading[b-z0h6cnrvx5] {
    padding: var(--st-space-3, 12px);
    font-size: var(--st-text-sm, 14px);
    opacity: 0.7;
}

/* A86: mirrors kernel.css's .shell-nav-session-error -- own copy because this page's CSS is isolated
   (see the file-header comment) and cannot reach kernel.css's scoped selector, only its global .kernel-btn
   utility class (which is not scoped, so that part is reused as-is on the Retry button in the .razor file). */
.mt-nav-error[b-z0h6cnrvx5] {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2, 8px);
    padding: var(--st-space-3, 12px);
    margin-bottom: var(--st-space-2, 8px);
    font-size: var(--st-text-xs, 12px);
}

.mt-nav-error p[b-z0h6cnrvx5] {
    margin: 0;
}

.mt-nav-error .kernel-btn[b-z0h6cnrvx5] {
    align-self: flex-start;
}

/* Every direct row (link, group trigger, disabled row) shares this shape -- fixed height so the rail
   never lets flexbox shrink a row down to its own min-content (that was bug #56 in the real shell;
   flex-shrink:0 here sidesteps it from the start rather than needing a later fix). Alignment stays
   flex-start in BOTH nav states -- nothing here ever touches justify-content.
   A77 (Mazhar 08-19): "vertical gap on the /menutest rebuild is still too large -- reduce by 40%".
   This page has no separate `gap` property (rows are already flush, like the real shell's own
   pre-bug-#23 "before" state) -- the visible spacing IS this row height, so that's the lever here.
   44px * 0.6 = 26.4, rounded to 26px. This is deliberately NOT the same value as kernel.css's
   --st-nav-item-h (44px at the time this comment was written, pinned to --st-tap-min by R4 B17's
   tap-target ruling; A181, 2026-08-20 night, later overrode that pin to 36px -- see tokens.css) --
   that token is about the REAL shell nav a customer clicks; this page is the dev-only comparison
   sandbox A64 built specifically so a smaller value could be tried without touching the real one. */
.mt-nav-item[b-z0h6cnrvx5] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--st-space-2, 8px);
    height: 26px;
    flex-shrink: 0;
    padding: 0 var(--st-space-3, 12px);
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--st-text-sm, 14px);
    box-sizing: border-box;
}

.mt-nav-item:hover[b-z0h6cnrvx5] {
    background: rgba(255, 255, 255, 0.08);
}

.mt-nav-item-disabled[b-z0h6cnrvx5] {
    opacity: 0.45;
    cursor: default;
}

/* A86-UPDATE (OldApp 08-20): wraps MenuIcon's rendered output (a plain HTML element written directly
   in THIS markup, not a child component's root) so the 18x18 box is guaranteed regardless of whether
   .mt-nav-icon's own scoped rule reliably reaches MenuIcon's root element for every variant it can
   render. That matters here specifically: MenuIcon has two render paths (a masked <div> and, for
   "dashboards"/"reports", an inline <svg> with no width/height attribute of its own -- sizing for that
   variant depends entirely on CSS). A bare unscoped SVG defaults to a large intrinsic box (~300x150 in
   most browsers) if its sizing rule doesn't land, which reads exactly like "a big garbage icon" and
   also explains why the rail's width transition looked broken -- an oversized child blows the row (and
   with it the rail) wider than the CSS collapse animation intends. overflow:hidden here caps it no
   matter which path fires or whether the scope attribute made it onto the child's root. */
.mt-nav-icon-box[b-z0h6cnrvx5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    overflow: hidden;
}

.mt-nav-icon[b-z0h6cnrvx5] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* The label itself is what shrinks away on collapse -- width/opacity, both animatable, in lockstep
   with the rail's own width transition so the text visually recedes instead of vanishing mid-frame. */
.mt-nav-label[b-z0h6cnrvx5] {
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    max-width: 160px;
    transition: max-width 0.3s ease, opacity 0.2s ease;
}

.mt-nav-collapsed .mt-nav-label[b-z0h6cnrvx5] {
    max-width: 0;
    opacity: 0;
}

.mt-nav-chevron[b-z0h6cnrvx5] {
    margin-left: auto;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.mt-nav-chevron-open[b-z0h6cnrvx5] {
    transform: rotate(90deg);
}

.mt-nav-collapsed .mt-nav-chevron[b-z0h6cnrvx5] {
    opacity: 0;
    width: 0;
    margin-left: 0;
}

.mt-nav-group[b-z0h6cnrvx5] {
    display: flex;
    flex-direction: column;
}

/* Inline accordion in both nav states for this test page (no hover flyout -- see the .razor file's
   own comment for why that is deliberately out of scope here). max-height + opacity, not display:none
   -- same reasoning AppShell's own PEN-2 item 8 fix already established: a property that cannot
   animate can't produce a transition, display:none included. */
.mt-nav-children[b-z0h6cnrvx5] {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.mt-nav-children-open[b-z0h6cnrvx5] {
    max-height: 400px;
    opacity: 1;
}

/* A174 (Mazhar 08-20): "ours runs from bottom to top" -- the real shell's only transform-based group-
   open motion is the COLLAPSED rail's hover flyout (kernel.css .shell-nav-collapsed .shell-nav-children),
   which this page never reproduced (A64's own scope cut). Values match kernel.css exactly, own mt-*
   selector -- same translateY(-4px) -> translateY(0) reveal, same position: fixed (escapes .mt-nav's
   own overflow-y: auto the same way bug #17 needed it there), same timing. */
.mt-nav-collapsed .mt-nav-children[b-z0h6cnrvx5] {
    position: fixed;
    min-width: 200px;
    background: var(--st-surface-overlay, #fff);
    box-shadow: var(--st-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));
    border-radius: var(--st-radius-md, 8px);
    padding: var(--st-space-2, 8px);
    z-index: 20;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.mt-nav-collapsed .mt-nav-children.mt-nav-children-open[b-z0h6cnrvx5] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Same re-pairing kernel.css does for its flyout (bug #17 follow-up): *-on-chrome tokens are tuned for
   the dark rail background (inline-accordion case); the flyout sits on --st-surface-overlay, a light
   popover, so it needs the light-surface token pair instead or it reads as invisible white-on-white. */
.mt-nav-collapsed .mt-nav-children .mt-nav-subitem[b-z0h6cnrvx5] {
    color: var(--st-text-primary, #1c2126);
    padding-left: var(--st-space-3, 12px);
}

/* A77: same 40% row-height reduction as .mt-nav-item above, applied to the sub-item's vertical
   padding since that's what sets ITS height (8px * 0.6 = 4.8, rounded to 5px). Horizontal padding
   and the 40px indent are untouched -- those aren't "vertical spacing". */
.mt-nav-subitem[b-z0h6cnrvx5] {
    display: block;
    padding: 5px var(--st-space-3, 12px) 5px 40px;
    font-size: var(--st-text-sm, 14px);
    color: var(--st-text-on-chrome-muted, rgba(255, 255, 255, 0.72));
}

.mt-nav-subitem-disabled[b-z0h6cnrvx5] {
    opacity: 0.6;
}

.mt-main[b-z0h6cnrvx5] {
    flex: 1;
    padding: var(--st-space-4, 16px);
}