/* ==========================================================================
   S16 Estimate Builder - the builder surface itself (shared by all concepts)
   Live math is real (cost x (1+markup) -> customer rate; margin =
   (income - cost) / income; 30% tenant floor). The seed data is illustrative
   S16 landscape work - mockups/ is the one place sample data is allowed.
   ========================================================================== */

/* ---- job header ------------------------------------------------------- */
.est-jobhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; padding: 4px 2px 16px; }
.est-jobhead .jh { display: flex; flex-direction: column; gap: 3px; }
.est-jobhead .jh .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.est-jobhead .jh .v { font-size: 15px; font-weight: 500; color: var(--fg-1); }
.est-jobhead .jh .v.big { font-size: 18px; }
.est-jobhead input.vin {
  font-family: inherit; font-size: 14px; color: var(--fg-1); font-weight: 500;
  border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: 5px 8px; width: 130px; background: #fff;
}
.est-jobhead input.vin:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); }
.est-status { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.est-status.draft { background: var(--surface-secondary); color: var(--fg-3); border: 1px solid var(--border-default); }
.est-status.ready { background: var(--success-soft); color: var(--success); }

/* ---- inline snapshot header (the house "start plain" metric strip) -----
   Matches the CRM Pipeline "LIVE SNAPSHOT" treatment: one lightweight row,
   no boxes. Bold numbers, muted labels, middot dividers, semantic color only
   where it means something (margin red when under the floor). Every number
   is still drillable (cursor + hover underline). */
.est-snapshot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 4px 2px 15px; margin-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.snap-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin-right: 6px; }
.snap-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); }
.snap-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--fg-3); cursor: pointer; }
.snap-stat b { font-size: 20px; font-weight: 700; color: var(--fg-1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.snap-stat:hover b { text-decoration: underline; text-underline-offset: 3px; }
.snap-sep { color: var(--border-default); }
.snap-stat.is-margin b { color: var(--success); }
.est-snapshot.below .snap-stat.is-margin b { color: var(--danger); }
.snap-flag { display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: 3px 11px; }
.est-snapshot.below .snap-flag { display: inline-flex; }

/* ---- toolbar ---------------------------------------------------------- */
.est-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.est-toolbar .grow { flex: 1; }
.toggle {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); cursor: pointer;
  border: 1px solid var(--border-default); border-radius: 999px; padding: 5px 12px 5px 10px; background: #fff; user-select: none;
}
.toggle:hover { border-color: var(--fg-3); }
.toggle .sw { width: 30px; height: 17px; border-radius: 999px; background: var(--border-default); position: relative; transition: background .14s ease; flex-shrink: 0; }
.toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .14s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle.on .sw { background: var(--brand); }
.toggle.on .sw::after { transform: translateX(13px); }
.view-note { font-size: 11.5px; color: var(--fg-3); }
.view-note b { color: var(--brand); }

/* ---- line grid (Concept A: QuickBooks parity) ------------------------- */
.est-grid { width: 100%; border-collapse: collapse; }
.est-grid thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3);
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border-default); white-space: nowrap;
}
.est-grid th.num, .est-grid td.num { text-align: right; }
.est-grid th.ctr, .est-grid td.ctr { text-align: center; }
.est-grid tbody td { padding: 3px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.est-grid tbody tr.line:hover { background: #fafbfd; }
.est-grid .sec-row td {
  background: var(--surface-secondary); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-2); padding: 8px 10px; border-bottom: 1px solid var(--border-default); border-top: 1px solid var(--border-default);
}
.est-grid .sec-row .sub { float: right; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.est-grid .sec-row .secname { border: none; background: transparent; font: inherit; color: inherit; text-transform: uppercase; letter-spacing: .05em; padding: 0; width: 60%; }
.est-grid .sec-row .secname:focus { outline: none; box-shadow: 0 1px 0 var(--brand); }

.est-grid .prod { font-weight: 500; color: var(--fg-1); }
.est-grid .cell-in {
  font-family: inherit; font-size: 13px; color: var(--fg-2); border: 1px solid transparent; background: transparent;
  border-radius: var(--r-sm); padding: 5px 7px; width: 100%;
}
.est-grid .cell-in:hover { border-color: var(--border-default); }
.est-grid .cell-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); background: #fff; }
.est-grid input.qty, .est-grid input.cost, .est-grid input.markup { text-align: right; font-variant-numeric: tabular-nums; }
.est-grid input.unit { text-align: center; width: 56px; }
.est-grid td.rate, .est-grid td.total { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-1); white-space: nowrap; }
.est-grid td.total { font-weight: 600; }
.est-grid .col-cost, .est-grid .col-markup { color: var(--fg-3); }
.est-grid .thin td.markup input, .est-grid .thin td.rate { color: var(--danger); }
.est-grid .del { color: var(--fg-3); cursor: pointer; font-size: 15px; opacity: 0; }
.est-grid tr.line:hover .del { opacity: 1; }
.est-grid .del:hover { color: var(--danger); }

/* customer view hides the two internal columns */
.builder.hide-cost .col-cost, .builder.hide-cost .col-markup { display: none; }
.internal-only { font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: .04em; text-transform: uppercase; }
.builder.hide-cost .internal-only { display: none; }

.addrow { display: flex; gap: 10px; margin: 12px 2px 0; }
.addrow button {
  font-family: inherit; font-size: 12.5px; color: var(--brand); font-weight: 500; background: transparent;
  border: 1px dashed var(--border-default); border-radius: var(--r-md); padding: 7px 13px; cursor: pointer;
}
.addrow button:hover { border-color: var(--brand); background: var(--brand-subtle); }

/* ---- totals + terms footer -------------------------------------------- */
.est-foot { display: grid; grid-template-columns: 1fr 300px; gap: 26px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.est-terms h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: 7px; }
.est-terms textarea {
  font-family: inherit; font-size: 13px; color: var(--fg-2); line-height: 1.5; width: 100%; min-height: 78px;
  border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 9px 11px; resize: vertical; background: #fff;
}
.est-terms textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); }
.est-totals { display: flex; flex-direction: column; gap: 7px; }
.est-totals .row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--fg-2); }
.est-totals .row.cust { font-size: 20px; font-weight: 700; color: var(--fg-1); padding-top: 9px; border-top: 2px solid var(--border-default); margin-top: 3px; }
.est-totals .row .val { font-variant-numeric: tabular-nums; }
.est-totals .dep { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--fg-3); }

/* ---- Concept B: section cards ----------------------------------------- */
.sec-cards { display: flex; flex-direction: column; gap: 14px; }
.sec-card { border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.sec-card > header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); }
.sec-card > header .name { font-size: 14.5px; font-weight: 600; color: var(--fg-1); }
.sec-card > header .grow { flex: 1; }
.sec-card > header .sub { font-size: 15px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.sec-card .mbar { width: 120px; }
.mbar .track { height: 6px; border-radius: 999px; background: var(--border-default); overflow: hidden; }
.mbar .fill { height: 100%; border-radius: 999px; background: var(--success); }
.mbar.below .fill { background: var(--danger); }
.mbar .lab { font-size: 10.5px; color: var(--fg-3); margin-top: 3px; display: flex; justify-content: space-between; }
.mbar .lab b { color: var(--fg-2); }
.mbar.below .lab b { color: var(--danger); }
.sec-card .body { padding: 4px 6px 8px; }

/* ---- Concept C: simple / guided --------------------------------------- */
.g-lines { display: flex; flex-direction: column; gap: 9px; }
.g-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; padding: 13px 16px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: #fff; }
.g-line .gdesc { font-size: 14.5px; font-weight: 500; color: var(--fg-1); }
.g-line .gmeta { font-size: 12px; color: var(--fg-3); }
.g-line .gmeta .code { color: var(--sky); font-weight: 500; }
.g-line .gright { text-align: right; }
.g-line .gprice { font-size: 17px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.g-line .gcost { font-size: 11.5px; color: var(--fg-3); }
.g-line.thin { border-color: var(--danger); }
.g-line.thin .gcost b { color: var(--danger); }
.g-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--border-default); border-radius: var(--r-md); background: #fbfcfe; }
.g-add .step { font-size: 12px; color: var(--fg-3); }
.g-add select, .g-add input {
  font-family: inherit; font-size: 13px; color: var(--fg-2); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 6px 9px; background: #fff;
}
.g-add input { width: 90px; }
.chip { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--fg-2); border: 1px solid var(--border-default); background: #fff; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.chip:hover { border-color: var(--brand); }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- greyed "designed-in but dark" future slots ----------------------- */
.future { position: relative; }
.future .lock { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); background: var(--surface-secondary); border: 1px dashed var(--border-default); border-radius: 999px; padding: 3px 9px; }

@media (max-width: 900px) {
  .est-margins { grid-template-columns: 1fr 1fr; }
  .est-foot { grid-template-columns: 1fr; }
}