/* ============================================================
   Budget Table — global stylesheet
   Mirrors ledgerwise-ui BudgetTable / BudgetLineItemRow / BudgetCategoryHeader
   ============================================================ */

/* ── Color tokens ──
   The --bt-* names are a local indirection consumed throughout this sheet;
   their VALUES come from the --lw-* token layer (re-plumbed 2026-07-12 --
   previously copied hex that drifted from the tokens: border was a hard
   smoke line instead of the hairline, danger was the old #B72136 red,
   foreground was #18181B). */
.budget-table-host {
    --bt-bg:                 var(--lw-white);
    --bt-border:             var(--lw-border);
    /* Reference row hover: bg-accent/30. */
    --bt-row-hover:          color-mix(in srgb, var(--lw-accent) 30%, transparent);
    --bt-header-bg:          var(--lw-bg-table-header);
    --bt-content-secondary:  var(--lw-gray-graphite);
    --bt-foreground:         var(--lw-text-primary);
    --bt-primary:            var(--lw-primary-blue);
    --bt-primary-dark:       var(--lw-primary-dark);
    --bt-success-dark:       var(--lw-success-dark);
    --bt-info-text:          var(--lw-status-info-fg);
    --bt-warning-bg:         var(--lw-status-warning-bg);
    --bt-warning-text:       var(--lw-status-warning-fg);
    --bt-danger:             var(--lw-destructive);

    /* Surface (border/radius/shadow) provided by the shared Card primitive;
       overflow clips the table corners to the card radius. */
    overflow: hidden;
}

/* ── Tab shell (ProjectBudget + ControlBudgetSetup) ──
   Same pattern as the Invoices/Payment Requests tabs: the MudTabs panel is
   full-bleed (PanelClass gotcha in Project.razor.css), the toolbar is the
   shared .lw-page-toolbar white bar, and .bt-body owns the muted inset. */
.bt-page {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bt-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    padding: 16px;
}

@media (min-width: 768px) {
    .bt-body {
        padding: 24px;
    }
}

/* ── Frozen column headers (inline tables) ──
   The <thead> is position:sticky top:0 and the footer is position:sticky
   bottom:0, but they only freeze when an ancestor is a bounded scroll
   container. Make the inline host that container so the header stays visible
   while the rows scroll. The fullscreen host (.fullscreen-budget-host) supplies
   its own height/overflow, so exclude it here. */
.budget-table-host:not(.fullscreen-budget-host) {
    max-height: max(240px, calc(100vh - 320px));
    overflow-x: hidden;
    overflow-y: auto;
}

/* Below md the reference scrolls the table horizontally (overflow-x-auto,
   no dedicated mobile cards). Trade the frozen header for scrollability:
   unbound the host and give the table a floor width. */
@media (max-width: 767px) {
    .budget-table-host:not(.fullscreen-budget-host) {
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
    }

    .budget-table-host .budget-table {
        min-width: 860px;
    }
}

/* ── Table reset ── */
.budget-table-host .budget-table,
.budget-table-host table.budget-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bt-bg);
    font-size: 0.875rem; /* reference cells: text-sm (14px) */
    color: var(--bt-foreground);
}

.budget-table-host .budget-table thead,
.budget-table-host .budget-table tbody,
.budget-table-host .budget-table tfoot {
    border: none;
}

.budget-table-host .budget-table th,
.budget-table-host .budget-table td {
    border: none;
    background: transparent;
}

/* ── Row defaults ── */
.budget-table-host .budget-table tbody tr {
    border-top: 1px solid var(--bt-border);
    transition: background-color 0.12s;
}

/* Reference line rows measure 49px (tr height acts as min-height). Seam
   rows stay zero-height; category rows are 45px (excluded here -- :not()
   adds specificity, so the cat-row rule below would otherwise lose). */
.budget-table-host .budget-table tbody tr:not(.bt-seam-row):not(.bt-cat-row) {
    height: 49px;
}

.budget-table-host .budget-table tbody tr.bt-seam-row {
    height: 0;
    border-top: none;
}

.budget-table-host .budget-table tbody tr:hover {
    background: var(--bt-row-hover);
}

.budget-table-host .budget-table td {
    vertical-align: middle;
}

.budget-table-host .budget-table th,
.budget-table-host .budget-table td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Header cells: reference py-2.5 (10px) -- the generic th/td rule above
   (8px) out-specifies the scoped .bth-th, so re-assert here. */
.budget-table-host .budget-table thead th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* ── Canonical column widths (apply to th + td)
   `!important` is required to beat MudSimpleTable's .mud-table-cell padding. ── */
.budget-table-host .budget-table { table-layout: fixed; }

.budget-table-host .budget-table .bt-cell-expand {
    width: 2.5rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
.budget-table-host .budget-table .bt-cell-num {
    width: 4.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.5rem !important;
}
.budget-table-host .budget-table .bt-desc-cell {
    width: auto;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.budget-table-host .budget-table .bt-num-cell {
    /* Wide enough for "$9,999,999.99" once the "$" adornment is accounted for. */
    width: 10rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.75rem !important;
}
.budget-table-host .budget-table .bt-actions-cell {
    width: 4.5rem !important;
    padding-right: 0.5rem !important;
}

/* ── Cell alignment helpers ── */
.bt-num-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--lw-tracking-tight); /* reference MoneyText: tracking-tight */
    white-space: nowrap;
    font-weight: 400;
}

/* (Per-cell weight handled by .bt-num-emphasized — only category rows opt in.) */

.bt-line-num {
    color: var(--bt-content-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ── Category row ── */
.budget-table-host .budget-table tbody tr.bt-cat-row {
    /* Reference category header: bg-muted/60 over the card. */
    background: color-mix(in srgb, var(--lw-bg-muted) 60%, var(--lw-white));
    border-top: 1px solid var(--bt-border);
    font-weight: 600;
}

/* Reference category rows have NO hover state -- keep the resting fill. */
.budget-table-host .budget-table tbody tr.bt-cat-row:hover {
    background: color-mix(in srgb, var(--lw-bg-muted) 60%, var(--lw-white));
}

.budget-table-host .budget-table tbody tr.bt-cat-row .bt-cat-num,
.budget-table-host .budget-table tbody tr.bt-cat-row .bt-cat-name {
    color: var(--bt-foreground);
    font-weight: 700;
}

/* Category line-number doubles as an expand/collapse toggle (reference:
   text-[13px] font-semibold tabular-nums, hover brand-accent). */
.bt-cat-num-btn {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.12s;
}

.budget-table-host .budget-table tbody tr.bt-cat-row .bt-cat-num-btn:hover {
    color: var(--bt-primary);
}

/* Reference category rows measure 45px (tr height acts as min-height). */
.budget-table-host .budget-table tr.bt-cat-row {
    height: 45px;
}

/* Category-row numerics default to normal weight (.bt-num-cell already 400);
   only Current + Remaining (marked with .bt-num-emphasized) render bold. */
.budget-table-host .budget-table tbody tr.bt-cat-row .bt-num-cell {
    color: var(--bt-foreground);
}

/* ── Description cell — type pill + editable text ── */
.bt-desc-cell {
    padding: 0.375rem 0.75rem 0.375rem 1rem;
}

.bt-desc-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Indicator shown on a line item that has had remaining budget moved to contingency */
.bt-contingency-moved {
    cursor: help;
    flex-shrink: 0;
}

.bt-contingency-tip {
    text-align: left;
    line-height: 1.4;
}

.bt-contingency-tip > div {
    white-space: nowrap;
}

/* Indicator shown on line items (and their categories) with an unsubmitted
   change order. Deliberate deviation from the reference's abstract 8px
   square (co-indicator-dot.tsx): an explicit pending-actions icon reads
   better (Cody, 2026-07-13). Warning gold, 15px. */
.budget-table-host .bt-unsubmitted-dot.mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--bt-warning-text);
    cursor: help;
    flex-shrink: 0;
}

/* Em-dash placeholders in the persistent add-line-item rows
   (reference EmptyLineItemRow: text-sm text-muted-foreground). */
.bt-addrow-dash {
    color: var(--lw-gray-space);
}

/* Persistent "Add a category..." row (US-650): reuses the category-row chrome
   (bt-cat-row); the leading + glyph reads muted until the user commits. */
.budget-table-host .budget-table tbody tr.bt-addcat-row .bt-addcat-icon {
    color: var(--bt-content-secondary);
    display: block;
    margin: 0 auto;
}

/* Muted "computed from line items" hint in entry-form rows. */
.bt-form-hint {
    font-size: 11px;
    color: var(--bt-content-secondary);
    white-space: nowrap;
}

/* ── Type pill (32x24 reference; we use 24x24) ── */
.bt-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: var(--lw-radius-control); /* reference rounded-sm = 8px */
    font-size: 11px;
    font-weight: 700;
    color: var(--lw-white);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
    flex-shrink: 0;
}

.bt-pill-sm {
    height: 1.25rem;
    width: 1.25rem;
    font-size: 10px;
}

.bt-pill-xs {
    height: 1rem;
    width: 1rem;
    font-size: 9px;
}

.bt-pill-projected { background: var(--lw-status-info-fg); }
.bt-pill-firm      { background: var(--lw-success-dark); }
.bt-pill-allowance { background: var(--lw-status-warning-fg); }
.bt-pill-muted     { opacity: 0.4; }

/* ── Inline editable inputs ── */
.bt-desc-input,
.bt-amount-input {
    min-width: 0;
    flex: 1;
    border: 1px solid transparent;
    background: transparent;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--bt-foreground);
    transition: border-color 0.12s;
}

.bt-amount-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bt-desc-input::placeholder,
.bt-amount-input::placeholder {
    color: var(--bt-content-secondary);
}

.bt-desc-input:focus,
.bt-amount-input:focus {
    border-color: var(--bt-primary);
    outline: none;
}

/* ── Neutralize MudTextField look inside budget-table-host ──
   Reference editable-text.tsx states: transparent at REST (the fieldset
   background must be killed too -- Mud paints it and it reads as a white
   box on the muted category rows), hairline border on HOVER, brand-accent
   border + white fill on FOCUS. */
.budget-table-host .bt-edit .mud-input-outlined-border,
.budget-table-host .bt-edit fieldset {
    border-color: transparent !important;
    background: transparent !important;
    transition: border-color 0.12s, background-color 0.12s !important;
}

.budget-table-host .bt-edit:hover .mud-input-outlined-border,
.budget-table-host .bt-edit:hover fieldset {
    border-color: var(--bt-border) !important;
    border-width: 1px !important;
}

.budget-table-host .bt-edit .mud-input-slot {
    text-overflow: ellipsis; /* reference truncate */
    min-height: 2rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.budget-table-host .bt-edit.mud-input-control {
    /* Kill Mud's dense label/helper reserves so the 32px input centers
       exactly in the row (reference inputs sit dead-center). */
    margin: 0 !important;
    padding: 0 !important;
}

.budget-table-host .bt-edit .mud-input-root {
    height: 2rem !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

.budget-table-host .bt-edit input,
.budget-table-host .bt-edit .mud-input input {
    font-weight: 400 !important;
}

/* Border ONLY on focus — not on hover (use :focus-within on wrapper) */
.budget-table-host .bt-edit:focus-within .mud-input-outlined-border,
.budget-table-host .bt-edit:focus-within fieldset {
    border-color: var(--bt-primary) !important;
    border-width: 1px !important;
}

/* Reference focus:bg-white -- paint the INPUT, not the fieldset (Mud stacks
   the fieldset above the input; a fieldset fill hides the text). */
.budget-table-host .bt-edit:focus-within input.mud-input-slot {
    background: var(--lw-white) !important;
}

.budget-table-host .bt-edit .mud-input.mud-input-focused .mud-input-outlined-border,
.budget-table-host .bt-edit .mud-input.mud-input-focused fieldset,
.budget-table-host .bt-edit .mud-focused fieldset {
    border-color: var(--bt-primary) !important;
    border-width: 1px !important;
}

/* Right-align numeric input + tabular nums */
.budget-table-host .bt-edit.bt-edit-right input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Currency "$" adornment: keep it compact so the amount has maximum room. */
.budget-table-host .bt-edit .mud-input-adornment-start {
    margin-right: 0.125rem !important;
}
.budget-table-host .bt-edit .mud-input-adornment-start .mud-typography,
.budget-table-host .bt-edit .mud-input-adornment-start p {
    color: var(--bt-content-secondary);
    font-size: 0.875rem !important;
}

.budget-table-host .bt-edit label {
    display: none !important;
}

/* THE FIELD IS ALWAYS VISIBLE: editable cells render as a WHITE FIELD at
   rest (verified against the running reference and its computed styles --
   the reference's bg-transparent class string is overridden by its base
   layer). Hover adds the hairline border; focus adds the accent border.
   This rule must stay LAST in the bt-edit chain: the input carries BOTH
   .mud-input-slot and .mud-input-root, and the earlier transparent
   .mud-input-root rule wins on source order otherwise. */
.budget-table-host .bt-edit input.mud-input-slot,
.budget-table-host .bt-edit input.mud-input-root {
    background: var(--lw-white) !important;
}

/* Category NAME fields render semibold (reference EditableText bold ->
   font-semibold). Must follow the 400 !important neutralization above --
   same specificity, source order wins. Covers the entry forms
   (.bt-cat-name); the category ROWS now use the native .bt-cell-input--cat
   below. */
.budget-table-host .bt-edit.bt-edit-cat input,
.budget-table-host .bt-edit.bt-edit-cat .mud-input-slot,
.budget-table-host .bt-edit.bt-edit-cat .mud-input-root,
.budget-table-host .bt-edit.bt-cat-name input,
.budget-table-host .bt-edit.bt-cat-name .mud-input-slot,
.budget-table-host .bt-edit.bt-cat-name .mud-input-root {
    font-weight: 600 !important;
}

/* ── Native cell inputs (US-629: rows swap MudTextField for plain inputs to
   cut per-row render payload). Spec measured off the previous MudTextField
   rendering (2026-07-30): Inter 14px/400 (600 for category names), 32px
   tall, 0 8px padding, radius var(--lw-radius-control) (8px), white fill at
   rest, transparent border -> hairline on hover -> accent on focus (1px),
   ellipsis overflow, placeholder at 42% opacity, right-aligned tabular
   numerals for amounts, "$" prefix in --bt-content-secondary with a 2px gap.
   The .bt-edit Mud rules above stay for the remaining MudTextField entry
   forms (category form / new-line-item form). ── */
.budget-table-host .bt-cell-input {
    width: 100%;
    min-width: 0;
    height: 2rem;
    box-sizing: border-box;
    padding: 0 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.357;
    letter-spacing: normal;
    color: inherit;
    background: var(--lw-white);
    border: 1px solid transparent;
    border-radius: var(--lw-radius-control);
    outline: none;
    text-overflow: ellipsis;
    transition: border-color 0.12s, background-color 0.12s;
}

.budget-table-host .bt-cell-input:hover {
    border-color: var(--bt-border);
}

.budget-table-host .bt-cell-input:focus {
    border-color: var(--bt-primary);
    background: var(--lw-white);
}

.budget-table-host .bt-cell-input::placeholder {
    color: inherit;
    opacity: 0.42;
}

.budget-table-host .bt-cell-input--right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.budget-table-host .bt-cell-input--cat {
    font-weight: 600;
}

.budget-table-host .bt-desc-inner .bt-cell-input {
    flex: 1;
}

/* Amount cell with the "$" prefix: the wrapper carries the box chrome so
   prefix + input read as a single field (mirror of Mud's start adornment).
   The inner input drops its own border/fill and inherits the wrapper's
   hover/focus states via :focus-within. */
.budget-table-host .bt-amount-field {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 2rem;
    box-sizing: border-box;
    padding-left: 0.5rem;
    background: var(--lw-white);
    border: 1px solid transparent;
    border-radius: var(--lw-radius-control);
    transition: border-color 0.12s, background-color 0.12s;
}

.budget-table-host .bt-amount-field:hover {
    border-color: var(--bt-border);
}

.budget-table-host .bt-amount-field:focus-within {
    border-color: var(--bt-primary);
}

.budget-table-host .bt-amount-field .bt-amount-prefix {
    color: var(--bt-content-secondary);
    font-size: 0.875rem;
    margin-right: 0.125rem;
    flex-shrink: 0;
}

.budget-table-host .bt-amount-field .bt-cell-input {
    flex: 1;
    height: 100%;
    border: 0;
    border-radius: var(--lw-radius-control);
    background: transparent;
    padding-left: 0;
}

/* Pending-formula state: warning-tinted border at 60% (the intent of the old
   .bt-edit-pending rule, whose ::deep selector never matched in this global
   sheet). Applies to both the bare amount input and the prefixed wrapper. */
.budget-table-host .bt-cell-input.bt-edit-pending,
.budget-table-host .bt-amount-field.bt-edit-pending {
    border-color: color-mix(in srgb, var(--bt-warning-text) 60%, transparent);
}

/* ── Action icons (hover-revealed, except an active note which always shows) ── */
.bt-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    justify-content: flex-end;
}

/* Action buttons are ALWAYS visible for editors (reference
   confirm-delete-dialog trigger has no hover-reveal; verified live). */
.bt-actions .bt-iconbtn-sm {
    opacity: 1;
}

.bt-actions-cell {
    width: 5rem;
    text-align: right;
    padding-right: 0.75rem;
}

.bt-iconbtn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--bt-content-secondary);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

.bt-iconbtn-sm:hover:not(:disabled) {
    border-color: var(--bt-border);
    color: var(--bt-foreground);
    background: var(--bt-bg);
}

.bt-iconbtn-sm:focus-visible {
    outline: 2px solid var(--bt-primary);
    outline-offset: 1px;
}

.bt-iconbtn-sm.bt-iconbtn-active {
    color: var(--bt-info-text);
    opacity: 1;
}

.bt-iconbtn-sm.bt-iconbtn-destructive:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lw-destructive) 10%, transparent);
    color: var(--bt-danger);
    border-color: color-mix(in srgb, var(--lw-destructive) 30%, transparent);
}

.bt-iconbtn-sm .mud-icon-root {
    font-size: 0.9375rem !important;
    line-height: 1 !important;
}

/* ── Delta / Remaining coloring (scoped to .budget-table-host to beat table-wide color) ──
   Delta = Current - Control. Reference semantics (delta-text.tsx): positive
   (over control) = WARNING GOLD, zero and negative = muted -- over-budget is
   deliberately not red; red is reserved for negative Remaining. ── */
.budget-table-host .bt-delta-pos {
    color: var(--bt-warning-text) !important;
    font-weight: 400 !important;
}

.budget-table-host .bt-delta-neg {
    color: var(--bt-content-secondary) !important;
    font-weight: 400 !important;
}

.budget-table-host .bt-delta-zero {
    color: var(--bt-content-secondary) !important;
    font-weight: 400 !important;
}

/* Category-row deltas render semibold in the reference (MoneyText bold /
   font-semibold zero variant); line-row deltas stay 400. */
.budget-table-host tr.bt-cat-row .bt-delta-pos,
.budget-table-host tr.bt-cat-row .bt-delta-neg,
.budget-table-host tr.bt-cat-row .bt-delta-zero {
    font-weight: 600 !important;
}

.budget-table-host .bt-remain-pos {
    color: var(--bt-foreground);
}

.budget-table-host .bt-remain-neg {
    color: var(--bt-danger) !important;
    font-weight: 400 !important;
}

.budget-table-host .bt-muted {
    color: var(--bt-content-secondary) !important;
    font-weight: 400 !important;
}

/* ── Emphasized numeric (Current + Remaining on category rows only) ── */
.budget-table-host .budget-table .bt-num-emphasized {
    font-weight: 700 !important;
    color: var(--bt-foreground);
}

.bt-em-dash {
    color: var(--bt-content-secondary);
}

/* ── Formula badge ── */
.bt-formula-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    padding: 0 0.375rem;
    height: 1.125rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bt-info-text);
    background: color-mix(in srgb, var(--lw-status-info-fg) 8%, transparent);
    font-variant-numeric: tabular-nums;
}

.bt-formula-badge .mud-icon-root {
    font-size: 0.75rem !important;
}

/* ============================================================
   Footer (rendered as <div> blocks outside the <table>)
   ============================================================ */
.budget-table-host .bt-footer {
    display: flex;
    flex-direction: column;
    background: var(--bt-bg);
    position: sticky;
    bottom: 0;
    z-index: 20;
    border-top: 1px solid var(--bt-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.bt-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bt-content-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Subtotal bar — first row inside the expanded fees panel.
   Horizontal padding lives on the cells (not the bar) so each subtotal
   lines up under its table column (.bt-num-cell: 10rem, 0.5rem/0.75rem
   padding; .bt-actions-cell: 4.5rem). ── */
.budget-table-host .bt-foot-subtotal-bar {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    background: var(--bt-bg);
    color: var(--bt-foreground);
}

.budget-table-host .bt-foot-sub-label {
    flex: 1;
    min-width: 0;
    padding-left: 1rem;
}

/* Color intentionally inherits from the bar so .bt-muted / .bt-delta-* (defined
   earlier at equal specificity) can restyle individual cells. */
.budget-table-host .bt-foot-sub-cell {
    flex: none;
    width: 10rem;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: right;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.budget-table-host .bt-foot-sub-actions {
    flex: none;
    width: 4.5rem;
    padding-right: 0.5rem;
}

.budget-table-host .bt-foot-subtotal-amount {
    font-weight: 700;
}

/* ── Fees expanded section (subtotal + fee lines + fees total) ── */
.budget-table-host .bt-fees-section {
    display: flex;
    flex-direction: column;
    background: var(--bt-bg); /* reference: subtotal + fee rows on bg-card */
    max-height: 360px;
    overflow-y: auto;
}

.budget-table-host .bt-fees-header-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.bt-fees-header-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bt-content-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.budget-table-host .bt-fee-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--bt-border);
}

.bt-fee-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.bt-fee-label {
    font-size: 0.875rem;
    color: var(--bt-foreground);
    font-weight: 400;
}

.bt-fee-lock .mud-icon-root {
    font-size: 0.75rem !important;
    color: var(--bt-content-secondary);
}

.bt-fee-formula {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bt-content-secondary);
    background: var(--bt-header-bg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bt-fee-amount {
    width: 8rem;
    text-align: right;
    font-size: 0.875rem;
    color: var(--bt-foreground);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* ── Fees total bar ── */
.budget-table-host .bt-fees-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: color-mix(in srgb, var(--lw-bg-muted) 60%, var(--lw-white)); /* reference fees-total: bg-muted/60 */
    border-top: 1px solid var(--bt-border);
}

.bt-fees-total-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bt-foreground);
}

.bt-fees-total-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bt-foreground);
    font-variant-numeric: tabular-nums;
}

/* ── Total Cost of Construction button (anchored inside the sticky footer) ── */
.budget-table-host .bt-grand-total-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.5rem; /* reference: py-3.5 px-6 */
    background: var(--bt-header-bg);
    border: none;
    border-top: 1px solid var(--bt-border);
    cursor: pointer;
    transition: background-color 0.12s;
    font-family: inherit;
    text-align: left;
}

.budget-table-host .bt-grand-total-btn:hover {
    background: color-mix(in srgb, var(--lw-bg-table-header) 80%, var(--lw-white)); /* reference: hover table-header-bg/80 */
}

.bt-grand-total-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bt-grand-total-left .mud-icon-root {
    font-size: 1rem !important;
    color: var(--bt-content-secondary);
}

.bt-grand-total-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bt-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bt-grand-total-hint {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bt-content-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bt-grand-total-amount {
    font-size: 1.125rem;
    font-weight: 600; /* reference MoneyText bold = font-semibold */
    color: var(--bt-foreground);
    font-variant-numeric: tabular-nums;
}

/* ── Pending-edit highlight (live mode) ── */
/* Reference highlighted/pending rows: bg-warning-badge-bg/40. */
.budget-table-host .budget-table tr.bt-pending {
    background: color-mix(in srgb, var(--bt-warning-bg) 40%, transparent);
}

/* Reference pending positive delta: dashed underline, offset 4px. */
.budget-table-host tr.bt-pending .bt-delta-pos {
    text-decoration: underline dashed;
    text-underline-offset: 4px;
}

/* ── Pending edit input — warning border ── */
.budget-table-host .bt-edit-pending ::deep .mud-input-outlined-border,
.budget-table-host .bt-edit-pending ::deep fieldset {
    border-color: var(--bt-warning-text) !important;
    opacity: 0.6;
}

/* ── Wrapper to host the new chrome ── */
.budget-table-host {
    background: var(--bt-bg);
}

/* ── Insertion seam row ──
   Reveals a centered ⊕ when the cursor hovers the gap between two rows.
   Pattern mirrors ledgerwise-ui InsertionSeamRow. */
.budget-table-host .budget-table tbody tr.bt-seam-row,
.budget-table-host .budget-table tbody tr.bt-seam-row:hover {
    height: 0;
    border: none !important;
    background: transparent !important;
}

.budget-table-host .budget-table tbody tr.bt-seam-row > td.bt-seam-cell {
    position: relative;
    height: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.bt-seam-hotzone {
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    bottom: -8px;
    z-index: 50;
    pointer-events: auto;
}

.bt-seam-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.bt-seam-hotzone:hover .bt-seam-reveal {
    opacity: 1;
    pointer-events: auto;
}

.bt-seam-line {
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--lw-primary-blue) 55%, transparent);
}

.bt-seam-button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -11px 4px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: var(--bt-primary);
    color: var(--lw-white);
    cursor: pointer;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--lw-primary-dark) 25%, transparent);
    transition: transform 120ms ease-out;
}

.bt-seam-button:hover {
    transform: scale(1.12);
}

.bt-seam-button .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--lw-white);
}

/* ── Fullscreen mode (CSS, single tree) ──
   Maximizing no longer renders a second copy of the table into a dialog; the
   host toggles .bt-page--fullscreen on the SAME .bt-page, which pins it over
   the viewport. Zero re-render on maximize, and inline/fullscreen parity is
   automatic because there is only one table. Esc handling + body scroll lock
   live in blazor-helpers.js (lwBudgetFullscreen). */
.bt-page--fullscreen {
    position: fixed;
    inset: 0;
    /* Above the drawer/sidebar (1100) and below Mud popovers (1200),
       dialogs (1400) and snackbars (1500) so row menus, the notes modal and
       toasts all stack on top of the maximized table. The appbar sits at
       1300, so it is hidden for the duration instead (rule below) -- chrome
       has no business showing over a fullscreen view anyway. */
    z-index: 1150;
    background: var(--lw-white);
    padding: 0.75rem 1rem 1rem;
    overflow: hidden;
}

.bt-fullscreen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--lw-border);
    margin-bottom: 0.75rem;
}

.bt-fullscreen-title {
    font-family: var(--lw-font-family-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lw-text-primary);
}

.bt-page--fullscreen .bt-body {
    flex: 1;
    min-height: 0;
}

/* Already maximized: the toolbar's maximize button is redundant (the title
   bar carries the exit control and the Esc hint), so hide it for the
   duration. Covers both toolbars (BudgetToolbar / ControlBudgetToolbar). */
.bt-page--fullscreen button[aria-label="Fullscreen"] {
    display: none;
}

/* The maximized host becomes the bounded scroll container (sticky header and
   footer keep freezing against it), stretching to the viewport instead of the
   inline max-height cap. */
.bt-page--fullscreen .budget-table-host.fullscreen-budget-host {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: auto;
}

/* Body scroll lock while the budget is maximized (toggled by JS), and hide
   the appbar for the duration -- its z-index (1300) would otherwise sit above
   the maximized table, and dropping the overlay below it keeps Mud popovers
   (1200) stacking over the fullscreen layer. */
body.lw-budget-fullscreen-lock {
    overflow: hidden;
}

body.lw-budget-fullscreen-lock .mud-appbar {
    display: none;
}

/* ── Fullscreen exit hint ──
   Title-bar affordance in the maximized budget view that tells the user the
   Esc key closes full screen (paired with the lwBudgetFullscreen Esc
   listener). */
.fullscreen-exit-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fullscreen-esc-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--lw-gray-graphite);
    white-space: nowrap;
}

.fullscreen-esc-key {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--lw-gray-graphite);
    background: var(--lw-bg-secondary);
    border: 1px solid var(--lw-border);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    box-shadow: 0 1px 0 var(--lw-border);
}

/* Hide the wordy hint where the title bar is tight; the icon button's
   "Exit full screen (Esc)" tooltip still conveys the shortcut. */
@media (max-width: 700px) {
    .fullscreen-esc-hint {
        display: none;
    }
}