/* ==========================================================================
   S16 Estimate Builder - four formatting treatments of the estimate itself.
   Everything ABOVE the grid (chrome, job header, Live snapshot strip,
   toolbar) is identical across all four; only the line-item area + totals
   change. Each treatment is scoped to a class on .builder so they never
   collide. Base grid styles live in builder.css; these refine them.
   ========================================================================== */

/* ---- A · Refined ledger (airy accounting document) -------------------- */
.v-ledger .est-grid thead th { color: var(--fg-2); padding: 4px 12px 10px; border-bottom: 1.5px solid var(--fg-1); }
.v-ledger .est-grid tbody td { padding-top: 8px; padding-bottom: 8px; }
.v-ledger .est-grid tbody tr.line td { border-bottom: 1px solid var(--border-subtle); }
.v-ledger .sec-row td { background: transparent; border-top: none; border-bottom: 1.5px solid var(--fg-1);
  color: var(--fg-1); font-size: 12px; letter-spacing: .08em; padding: 22px 12px 7px; }
.v-ledger .sec-row .sub { font-size: 13.5px; font-weight: 700; }
.v-ledger .est-grid td.rate, .v-ledger .est-grid td.total { font-variant-numeric: tabular-nums; }
.v-ledger .est-grid td.total { font-weight: 700; color: var(--fg-1); }
.v-ledger .est-grid .prod { color: var(--fg-2); }
.v-ledger .est-foot { border-top: 1.5px solid var(--fg-1); }
.v-ledger .est-totals .row { padding: 2px 0; }
.v-ledger .est-totals .row.cust { border-top: 2px solid var(--fg-1); padding-top: 11px; }

/* ---- B · Banded phases (each section a tinted block) ------------------ */
.v-banded .est-grid { border-collapse: separate; border-spacing: 0; }
.v-banded .sec-row td { background: var(--brand-subtle); border: none; border-left: 3px solid var(--brand);
  color: var(--brand-deep); border-radius: var(--r-md) var(--r-md) 0 0; padding: 11px 14px; letter-spacing: .06em; }
.v-banded .sec-row .sub { color: var(--brand-deep); }
.v-banded .sec-row + tr.line td { border-top: none; }
.v-banded .est-grid tbody tr.line td { background: #fcfdfe; border-bottom: 1px solid #eef2f7; }
.v-banded .est-grid tbody tr.line td:first-child { border-left: 3px solid var(--brand-subtle); }
.v-banded .est-grid tbody tr.line td:last-child { border-right: 1px solid #eef2f7; }
.v-banded .est-grid tbody tr.line:hover td { background: #fff; }
.v-banded .est-grid tbody tr.line.thin td:first-child { border-left-color: var(--danger); }
/* breathing room before each new phase (skip the very first) */
.v-banded .sec-row:not(:first-child) td { border-top: 14px solid #fff; background-clip: padding-box; }

/* ---- C · Proposal document (client-facing letter styling) ------------- */
.v-proposal .est-toolbar { border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; }
/* the borderless editable-cell treatment (builder.css scopes it to .est-grid;
   the proposal renders outside a table, so restate it here so fields read as
   plain document text, not form boxes) */
.v-proposal .cell-in { font-family: inherit; font-size: 13px; color: var(--fg-2); border: 1px solid transparent;
  background: transparent; border-radius: var(--r-sm); padding: 4px 6px; }
.v-proposal .cell-in:hover { border-color: var(--border-default); }
.v-proposal .cell-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); background: #fff; }
.v-proposal .prop-sec { margin-bottom: 24px; }
.v-proposal .prop-sec-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--fg-1); margin-bottom: 4px; }
.v-proposal .pnum { font-size: 12px; font-weight: 700; color: #fff; background: var(--brand);
  border-radius: var(--r-sm); padding: 3px 9px; letter-spacing: .04em; }
.v-proposal .pname { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.v-proposal .pdesc-count { font-size: 12px; color: var(--fg-3); }
.v-proposal .grow { flex: 1; }
.v-proposal .psub { font-size: 17px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.v-proposal .prop-line { display: flex; align-items: flex-start; gap: 20px; padding: 13px 4px;
  border-bottom: 1px solid var(--border-subtle); }
.v-proposal .prop-line:hover { background: #fafbfd; }
.v-proposal .pl-body { flex: 1; min-width: 0; }
.v-proposal .pl-desc input { font-size: 15px; font-weight: 500; color: var(--fg-1); padding-left: 0; width: 100%; }
.v-proposal .pl-sub { font-size: 12.5px; color: var(--fg-3); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 1px; }
.v-proposal .pl-sub input { padding: 2px 5px; }
.v-proposal .pl-sub input.prod-in { width: 118px; color: var(--sky); }
.v-proposal .pl-sub input.qty { width: 44px; text-align: right; }
.v-proposal .pl-sub input.unit { width: 42px; }
.v-proposal .pl-int { font-size: 11.5px; color: var(--fg-3); margin-top: 5px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.v-proposal .pl-int input.cost { width: 74px; }
.v-proposal .pl-int input.markup { width: 42px; text-align: right; }
.v-proposal .prop-line.thin .pl-int { color: var(--danger); font-weight: 500; }
.v-proposal .pl-amount { font-size: 17px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums;
  min-width: 118px; text-align: right; flex-shrink: 0; }
.v-proposal .prop-line .del { align-self: center; }

/* ---- D · Compact power grid (dense, internal|customer bands) ---------- */
.v-power .est-grid thead th { padding: 4px 7px 6px; font-size: 10px; }
.v-power .est-grid tbody td { padding: 3px 7px; font-size: 12.5px; }
.v-power .est-grid .cell-in { padding: 3px 4px; font-size: 12.5px; }
.v-power .sec-row td { padding: 6px 9px; font-size: 10px; background: #2F3C4E; color: #fff; border: none; }
.v-power .sec-row .sub { color: #fff; }
.v-power .sec-row .secname { color: #fff; }
/* shade the internal (cost + markup) columns and divide them from customer */
.v-power .est-grid th.col-cost, .v-power .est-grid td.col-cost { background: var(--surface-secondary); }
.v-power .est-grid th.col-markup, .v-power .est-grid td.col-markup { background: var(--surface-secondary); border-right: 2px solid var(--border-default); }
.v-power .est-grid th.col-cost { border-left: 2px solid var(--border-default); }
.v-power .est-grid td.col-cost { border-left: 2px solid var(--border-default); }
.v-power .est-grid tbody tr.line:hover td { background: #f4f7fb; }
.v-power .est-grid tbody tr.line:hover td.col-cost, .v-power .est-grid tbody tr.line:hover td.col-markup { background: #e6ecf4; }
.v-power .est-grid td.total { font-weight: 700; }
/* group caption above the internal band */
.v-power .powgroups { display: flex; justify-content: flex-end; gap: 0; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
.v-power .powgroups .g-int { width: 178px; text-align: center; background: var(--surface-secondary);
  border: 1px solid var(--border-default); border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 3px 0; }
.v-power .powgroups .g-cust { width: 210px; text-align: center; color: var(--brand); padding: 3px 0; }
.v-power.hide-cost .powgroups { display: none; }