/* /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;
}

.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);
}
/* /Features/Reports/CoaTree.razor.rz.scp.css */
.coa-tree-page[b-370t6usrdl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.coa-tree-toolbar[b-370t6usrdl] {
    display: flex;
    align-items: end;
}

.coa-tree-table[b-370t6usrdl] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.coa-tree-header[b-370t6usrdl] {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-raised);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-strong);
}

.coa-tree-node-label[b-370t6usrdl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    text-align: left;
}

.coa-tree-node-code[b-370t6usrdl] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.coa-tree-node-name[b-370t6usrdl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coa-tree-amount[b-370t6usrdl] {
    width: 8rem;
    flex-shrink: 0;
    text-align: right;
    color: var(--text-primary);
    padding-left: var(--space-3);
}

/* Indentation itself comes from TreeView's own .tree-children { margin-left } cascading with each
   recursion level -- this just makes the top level visually stand out as the account groupings. */
.coa-tree-body .tree-level-1[b-370t6usrdl] {
    font-weight: 600;
}

@media (max-width: 767px) {
    .coa-tree-amount[b-370t6usrdl] {
        width: 5rem;
        font-size: var(--text-xs);
    }

    .coa-tree-node-code[b-370t6usrdl] {
        display: none;
    }
}
/* /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);
}

.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;
}
/* /Features/Reports/Form1099K.razor.rz.scp.css */
.f1099k-page[b-ktb8dtyls8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

.f1099k-toolbar[b-ktb8dtyls8] {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.f1099k-hint[b-ktb8dtyls8] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.f1099k-grid[b-ktb8dtyls8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.f1099k-months[b-ktb8dtyls8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--space-2);
}

.f1099k-notes[b-ktb8dtyls8] {
    resize: vertical;
}

.f1099k-ok[b-ktb8dtyls8] {
    color: var(--success);
    font-size: var(--text-sm);
    margin: 0;
}

.f1099k-err[b-ktb8dtyls8] {
    color: var(--danger);
    font-size: var(--text-sm);
    margin: 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;
    }
}
/* /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/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);
}
/* /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/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;
}

/* 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);
}

.trn-edit-fields[b-fsgo3htxjz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    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;
}

.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);
}

@media (max-width: 640px) {
    .trn-edit-fields[b-fsgo3htxjz] {
        grid-template-columns: 1fr;
    }
}
/* /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;
}

.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);
    }
}