/* ============================================================================
 * Commercial stage: the rate grid, terms and totals.
 *
 * Split out of app.css on 19-08-2026 (was lines 1221-1277). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* ------------------------------------------------------ Commercial stage */
/* A wide grid on a narrow screen scrolls inside its own box; the page itself
   must never scroll sideways. */
.table-scroll { overflow-x: auto; }

/* A field whose container supplies the spacing, so it adds none of its own. */
.field--flush { margin: 0; }
.newprop__site { min-width: 260px; }
.newprop__period { width: 180px; }

/* A computed row set apart from the table it summarises. */
.wrow--spaced { margin-top: 0.6rem; }

/* The rate is typed, never defaulted. Below the Wex-Sales selling price it
   turns red — the line still saves, but the proposal then needs authorising. */
.rate-input { width: 7rem; text-align: right; }
.rate-input--below {
    border-color: var(--logout-red, #e05c5c);
    color: var(--logout-red, #e05c5c);
    font-weight: 700;
}
.data-table tr.is-below td { background: #fdeeee; }

/*
 * Legend for the row colour above. The swatch is deliberately the SAME
 * declaration as the row background, not a hand-matched hex — a legend that
 * drifts from the thing it explains is worse than no legend.
 */
.grid-legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-size: 0.74rem;
    color: var(--slate, #55648A);
}

.grid-legend__swatch {
    width: 1.6rem;
    height: 0.8rem;
    border-radius: 2px;
    background: #fdeeee;
    border: 1px solid var(--logout-red, #e05c5c);
    flex: none;
}

.totals { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin-top: 0.9rem; }
.totals__row { display: flex; gap: 1.5rem; min-width: 16rem; justify-content: space-between; font-size: 0.8rem; }
.totals__label { color: var(--slate, #55648A); }
.totals__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-dark, #0F1E45); }
.totals__row--net {
    border-top: 2px solid var(--border-grey, #E3E4E9);
    padding-top: 0.35rem; margin-top: 0.2rem; font-size: 0.9rem;
}
.totals__row--net .totals__label,
.totals__row--net .totals__value { font-weight: 700; color: var(--text-dark, #0F1E45); }

/* The net amount in words — the same sentence the printed quotation carries,
   shown here so the seller reads on screen what the customer reads on paper.
   Capped in width and wrapping right-aligned: a crore-scale amount runs to two
   lines, and a single long line would push the totals column out of shape. */
.totals__words {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 0.15rem; margin-top: 0.5rem; max-width: 22rem; text-align: right;
}
.totals__words-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--slate, #55648A);
}
.totals__words-value {
    font-size: 0.8rem; font-weight: 700; color: var(--text-dark, #0F1E45);
}