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

@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;
    }
}

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

/* 0-PARITY ruling 1 (2026-08-05): folder drill-down replaces the flat grouped <select>. */
.report-breadcrumb[b-14u912w37j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.report-breadcrumb-link[b-14u912w37j] {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--accent);
    font-size: var(--text-sm);
    cursor: pointer;
}

.report-breadcrumb-link:hover[b-14u912w37j] {
    text-decoration: underline;
}

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

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

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

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

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

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

.data-grid[b-z1cwlmfn2o]  td {
    height: var(--st-row-h);
    /* 0-ROW-SPACING (2026-08-05): was `0 --st-space-3` -- zero top/bottom padding left row text
       flush against its own row edges, so the only visual separator between rows was a 1px border.
       Real vertical padding here (plus --st-row-h's own bump, tokens.css) is what actually reads
       as "space between rows," not just a taller row with the same cramped text placement. */
    padding: var(--st-space-2) var(--st-space-3);
    /* PEN-2 item 4 (2026-08-08): this is the actual arithmetic behind "row height regressed" --
       height:36px minus this padding's 16px (8px top+bottom) leaves a 20px content budget, but the
       inherited body line-height (--st-leading-sm: 1.5) at this 14px font computes to a 21px text
       line box -- 1px too tall to fit, so border-box's own height cap doesn't hold and the row grows
       past 36px to fit the text, quietly eating the 4px gap tokens.css's own comment says should
       exist between this and --st-grid-header-h (40px). A tighter, table-row-appropriate line-height
       (1.5 is a prose value, not a grid-row one) puts the text at 16.8px, safely inside the 20px
       budget -- the token values were already right, this just stops the overflow that defeated them. */
    line-height: 1.2;
    border-bottom: 1px solid var(--st-border-subtle);
    color: var(--st-text-primary);
}

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