/* ============================================================================
   form-table.css — the home-grown <table> used by FormTable<TItem>.

   Blazor port of the React shared sub-table (`.crf-sub-table` and friends in
   devtrac-ui/src/components/shared/ContractRequestForm.css, with the per-form
   overrides from BudgetTransferForm.css / SourceTransferForm.css folded in).
   Every value here is copied VERBATIM from the React rules — the fractional px
   (2.4 / 4.8 / 6.4 / 11.2 / 17.6 / 25.6) are authored under the page's ~0.7
   zoom, so do not round them.

   One structural change from React: React marks its group boundaries and its
   right-aligned money columns with `nth-child(n)` selectors re-declared per
   form (`.btf-line-table`, `.crf-contract-sov`, `.pcf-line-table`, ...).
   Because the column set is declared per page here, FormTable emits a class on
   the th/td instead — `.ft-col-divider` for a boundary, `.ft-th-right` /
   `.ft-cell-amount` for alignment — so no rule in this file needs to know how
   many columns a given page has.

   WHY THE `!important`s: css/app.css styles every table in the app globally and
   with `!important` — `div:not(.workplan-tree) th/td` forces font-size 11px and
   font-weight bold/500 plus a 3px/7px padding, `table th` forces WHITE 1px
   left/right borders, and `table thead tr th` forces a white bottom border. All
   of those out-specify or override a plain `.ft-headrow th`, so each property
   that collides is re-asserted here. Only the colliding properties carry it —
   everything else is a normal declaration. (flyout-form.css does the same for
   the Telerik grid chrome.)
   ========================================================================= */

.ft-wrap {
    border: 1px solid #d9d9d9;
    border-radius: 0 0 4.8px 4.8px;
    overflow: hidden;
    background: var(--ff-cream, #faf8f5);
}

.ft-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 10px;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

/* ---- Group header row (optional) — matches the panel-header chrome. Rendered
   only when at least one column declares a Group. -------------------------- */
.ft-table .ft-grouprow .ft-group {
    background: #d9d9d9;
    color: #222;
    font-weight: 700 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    text-align: center;
    padding: 0 11.2px !important;
    height: 25.6px;
    border-left: none !important;
    border-right: 1px solid #c5c5c5 !important;
    border-bottom: 1.6px solid #c5c5c5 !important;
}

.ft-table .ft-grouprow .ft-group:last-child {
    border-right: none !important;
}

/* ---- Column header row -------------------------------------------------- */
.ft-table .ft-headrow th {
    background: #d9d9d9;
    font-weight: 600 !important;
    text-align: left;
    padding: 4.8px 8px !important;
    height: 24px;
    border-left: none !important;
    border-bottom: 1.6px solid #c5c5c5 !important;
    border-right: 1px solid #c8c8c8 !important;
    font-size: 10px !important;
    color: #222;
    vertical-align: middle;
    line-height: 1.2;
}

.ft-table .ft-headrow th:last-child {
    border-right: none !important;
}

.ft-table .ft-headrow th.ft-th-right {
    text-align: right;
}

.ft-table .ft-headrow th.ft-th-center {
    text-align: center;
}

/* Required marker — hidden, same as React's `.crf-req { display: none }`. The
   element stays in the markup so turning the asterisks back on is one rule. */
.ft-req {
    display: none;
}

/* ---- Body cells --------------------------------------------------------- */
.ft-table tbody td {
    padding: 4px 6.4px !important;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    vertical-align: middle;
    font-size: 10px !important;
    /* app.css forces 500 on every td; React's body cells inherit normal and let
       the inner .ft-cell-* wrappers set their own weight. */
    font-weight: 400 !important;
}

.ft-table tbody td:last-child {
    border-right: none;
}

.ft-table tbody tr:last-child td {
    border-bottom: 1px solid #d9d9d9;
}

.ft-table.ft-striped tbody tr:nth-child(even) td {
    background: #fafaf7;
}

/* Group-boundary / column divider — darker than the inner hairline, and runs
   continuously through the group row, the header, the body, the add row and
   the total row. FormTable puts this class on every cell of a column that ends
   a group (or on every column when Dividers="All", the BTF/PCF look). */
.ft-table .ft-grouprow th.ft-col-divider,
.ft-table .ft-headrow th.ft-col-divider,
.ft-table tbody td.ft-col-divider,
.ft-table tbody tr.ft-addrow td.ft-col-divider,
.ft-table tfoot td.ft-col-divider {
    border-right: 1px solid #c5c5c5 !important;
}

.ft-table thead th:last-child,
.ft-table tbody td:last-child,
.ft-table tfoot td:last-child {
    border-right: none !important;
}

/* ---- Empty state -------------------------------------------------------- */
.ft-table tbody td.ft-empty-row {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 11.2px 6.4px !important;
}

/* ---- Money cells -------------------------------------------------------- */
.ft-cell-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #444;
}

.ft-cell-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The accounting box: `$` pinned left, value right. */
.ft-cell-acct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #333;
    height: 24px;
    padding: 0 4.8px;
    box-sizing: border-box;
}

/* Editable variant — adds the input chrome. */
.ft-cell-acct-editable {
    position: relative;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #ffffff;
}

.ft-cell-acct-editable:focus-within {
    border-color: var(--projectrac-primary-color, #5b9bd5);
    box-shadow: 0 0 0 1.6px color-mix(in srgb, var(--projectrac-primary-color, #5b9bd5) 18%, transparent);
}

/* Readonly (locked) money value — the Est Cont Impact / total-row look. */
.ft-cell-acct-readonly {
    background: #f5f5f5;
    color: #555;
}

/* Transparent readonly — a plain ledger value that still occupies the editable
   box's geometry, so `$` and digits column-align with the editable cell next
   to it (React `.btf-readonly-box`). */
.ft-cell-acct-transparent {
    background: transparent;
    border-color: transparent;
}

/* Awaiting — the row's prerequisite has not been chosen yet. */
.ft-cell-acct-awaiting {
    background: #f0f0f0;
    border-style: dashed;
    border-color: #cfcfcf;
}

.ft-cell-acct-awaiting:focus-within {
    border-color: #cfcfcf;
    box-shadow: none;
}

.ft-cell-acct-awaiting .ft-cell-acct-sign,
.ft-cell-acct-awaiting .ft-cell-acct-input,
.ft-cell-acct-awaiting .ft-acct,
.ft-cell-acct-awaiting .ft-acct-sym,
.ft-cell-acct-awaiting .ft-acct-num {
    color: #adadad;
    font-style: italic;
}

.ft-cell-acct-awaiting .ft-cell-acct-input {
    cursor: not-allowed;
    pointer-events: none;
}

.ft-cell-acct-empty,
.ft-cell-acct-empty .ft-cell-acct-sign {
    color: #b0b0b0;
}

/* Error. The ring is INSET on purpose: an outward `0 0 0 1px` shadow paints
   outside the border box, and the page is scaled with CSS `zoom` — Chrome then
   leaves the shadow's top edge un-repainted when the error clears, showing as a
   faint red hairline until the next unrelated repaint. */
.ft-cell-acct.ft-cell-acct-editable.ft-cell-error {
    border-color: #c0392b;
    box-shadow: inset 0 0 0 1px #c0392b;
}

.ft-cell-acct.ft-cell-error:not(.ft-cell-acct-editable) {
    border: 1px solid #c0392b;
    border-radius: 2.4px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #c0392b;
}

/* The `$` of an editable cell floats over the input's left padding. */
.ft-cell-acct-sign {
    flex-shrink: 0;
}

.ft-cell-acct-editable .ft-cell-acct-sign {
    position: absolute;
    left: 4.8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ft-cell-acct-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 4.8px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: #333;
    text-align: right;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.ft-cell-acct-input::placeholder {
    color: #b0b0b0;
    font-weight: 500;
    opacity: 1;
}

.ft-cell-acct-input::-webkit-outer-spin-button,
.ft-cell-acct-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- The 4-slot accounting layout (paren | $ | digits | paren) ----------
   Both paren slots are reserved on EVERY row at a fixed 6.4px, so the digits
   land at the same x whether the value is positive (slots empty) or negative
   (slots show the parens). Sign is shown by parens only — never a minus. */
.ft-acct {
    display: inline-flex;
    align-items: center;
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    font-weight: 500;
    color: #333;
}

.ft-acct-sym {
    flex: 0 0 auto;
    text-align: left;
}

.ft-acct-num-wrap {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}

.ft-acct-paren {
    flex: 0 0 6.4px;
}

.ft-acct-paren-l {
    text-align: right;
}

.ft-acct-paren-r {
    text-align: left;
}

.ft-acct-num {
    flex: 0 0 auto;
}

.ft-acct.is-empty,
.ft-acct.is-empty .ft-acct-sym {
    color: #b0b0b0;
}

.ft-acct.is-error,
.ft-acct.is-error .ft-acct-sym,
.ft-acct.is-error .ft-acct-paren {
    color: #c0392b;
}

/* ---- Locked text cell --------------------------------------------------- */
.ft-cell-locked {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 6.4px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #f5f5f5;
    color: #555;
    font-size: 10px;
    font-weight: 500;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

/* ---- Actions column ----------------------------------------------------- */
.ft-table .ft-cell-actions {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    text-align: center;
    padding: 0 !important;
}

.ft-row-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: #c0392b;
    padding: 1.6px 3.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.ft-row-delete svg {
    width: 11.2px;
    height: 11.2px;
}

.ft-row-delete:hover:not(:disabled) {
    color: #e74c3c;
}

.ft-row-delete:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---- Total (footer) row ------------------------------------------------- */
.ft-table .ft-totalrow td {
    background: rgb(234, 233, 231);
    font-weight: 700 !important;
    padding: 4px 6.4px !important;
    border-top: 1px solid #c5c5c5;
    border-right: 1px solid #ececec;
    font-size: 10px !important;
}

.ft-table .ft-totalrow td:last-child {
    border-right: none !important;
}

/* The amount renders as AcctSlots spans inside the readonly box — force 700
   onto the spans too (they do not inherit reliably). */
.ft-totalrow .ft-cell-acct,
.ft-totalrow .ft-cell-acct-input,
.ft-totalrow .ft-cell-acct-sign,
.ft-totalrow .ft-cell-acct .ft-acct,
.ft-totalrow .ft-cell-acct .ft-acct-sym,
.ft-totalrow .ft-cell-acct .ft-acct-num {
    font-weight: 700;
}

/* ---- Add row ------------------------------------------------------------ */
.ft-table tbody tr.ft-addrow td {
    background: #ffffff;
    padding: 4.8px 8px !important;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

.ft-table tbody tr.ft-addrow td:first-child {
    padding-left: 3.2px !important;
}

.ft-table tbody tr.ft-addrow td:last-child {
    border-right: none !important;
}

.ft-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    background: none;
    border: none;
    font-size: 10.5px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    padding: 1.6px 3.2px;
}

.ft-add-row-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17.6px;
    height: 17.6px;
    border-radius: 2.4px;
    background: var(--projectrac-primary-color, #5b9bd5);
    color: #fff;
    font-size: 14.4px;
    font-weight: 300;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s;
}

.ft-add-row-btn:hover {
    color: var(--projectrac-primary-color, #5b9bd5);
}

.ft-add-row-btn:hover .ft-add-row-plus {
    filter: brightness(0.88);
}

.ft-add-row-btn:disabled,
.ft-add-row-btn:disabled:hover {
    color: #b0b0b0;
    cursor: not-allowed;
}

.ft-add-row-btn:disabled .ft-add-row-plus,
.ft-add-row-btn:disabled:hover .ft-add-row-plus {
    background: #ccc;
    filter: none;
}

/* ---- Disabled host (a form fieldset in view mode dims its whole table) --- */
fieldset:disabled .ft-cell-locked,
fieldset:disabled .ft-add-row-btn,
fieldset:disabled .ft-row-delete {
    opacity: 0.75;
}