/* ============================================================================
   BLANK Sales v3 · quotes — layout glue for the Quote library, the Quotation builder and Approvals.
   Everything around the quote uses CORE's own tokens and components (styles.css). The ONE exception is the quote
   document itself (.dq, bottom of this file): it is Daniel's A4 template, copied from the prototype's document styles,
   so the paper looks exactly like the quote owners already receive.
   ============================================================================ */

/* ---- lists grouped by condo ------------------------------------------------ */
.qgroup { display: grid; gap: 8px; }
.qgroup .month-h { padding: 6px 4px 0; }
.qrows .rowi .end b.num { font-size: 15px; font-weight: 800; white-space: nowrap; }
.qrows .rowi .t { white-space: normal; }
@media (min-width: 1180px) {
  .qrows { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .qrows .rowi { height: 100%; }
}
.q-bar { align-items: center; gap: 12px; }
.q-tools { align-items: center; flex-wrap: wrap; }
.ph-actions .search.inline { min-width: 220px; }

/* ---- the builder: form left, total + live A4 preview right (Calvin: use the width) ---- */
.qb-grid, .qd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.qb-form, .qb-side { min-width: 0; }
.qdoc-card, .qb-side .qdoc-card { display: none; }
@media (min-width: 1180px) {
  .qb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qb-side { position: sticky; top: 16px; max-height: calc(100dvh - 32px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  .qb-side .qdoc-card { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 260px; overflow: hidden; }
  .qb-side .qdoc-scroll { overflow: auto; min-height: 0; border-radius: var(--r-tile); }
  .qd-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .qd-grid .qdoc-card { display: grid; }
  .qb-phone-only { display: none !important; }
}
@media (min-width: 1500px) { .qb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.qdoc-card { grid-template-columns: minmax(0, 1fr); }
.qdoc-scroll { background: var(--sunken); padding: 12px; border-radius: var(--r-tile); min-width: 0; }

/* the A4 page scaled to its box (sales-quotes.js sets the scale); the paper never changes its own ratio */
.qdoc-fit { position: relative; overflow: hidden; width: 100%; }
.qdoc-fit > .dq.paper { transform-origin: top left; }
.qdoc-fit[data-zoom="full"] { width: 794px; overflow: visible; }

/* the big total */
.qbig { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.qtotal .rs-money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.q-facts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* one item row: name and option | price | quantity | amount */
.qi-list { display: grid; }
.qi { display: grid; grid-template-columns: minmax(0, 1fr) 112px 128px 92px; grid-template-areas: "main price qty amt"; gap: 8px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.qi:first-child { border-top: 0; padding-top: 2px; }
.qi.off .qi-t, .qi.off .qi-amt { color: var(--text-3); }
.qi-main { grid-area: main; min-width: 0; display: grid; gap: 4px; }
.qi-t { font-weight: 600; font-size: 14px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.qi-t .chip { margin-left: 4px; vertical-align: 1px; }
.qi-main > .qi-d, .qi-main > .qi-opt { margin-left: 32px; width: calc(100% - 32px); }
.qi-t .qi-no { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.qi-d { font-size: 12px; color: var(--text-3); }
.qi-opt { width: 100%; max-width: 100%; margin-top: 2px; }
.qi-price { grid-area: price; display: grid; justify-items: end; gap: 2px; min-width: 0; }
.qi-price .linkish { padding: 0; font-size: 14px; font-weight: 600; color: var(--text-1); text-decoration-color: var(--line); white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.qi-price small { font-size: 12px; color: var(--text-3); }
.qi-qty { grid-area: qty; display: flex; align-items: center; gap: 4px; justify-content: center; }
.qi-n { width: 48px; height: 32px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); color: var(--text-1); font-variant-numeric: tabular-nums; padding: 0 4px; -moz-appearance: textfield; appearance: textfield; }
.qi-n:focus, .qi-pin:focus { outline: 0; border-color: var(--text-1); box-shadow: 0 0 0 3px var(--track); }
.qi-pin { width: 100%; max-width: 112px; height: 32px; text-align: right; border: 1px solid var(--bad); border-radius: var(--r-ctl); background: var(--bad-bg); color: var(--text-1); padding: 0 8px; }
.qi-pin.ok { border-color: var(--line); background: var(--card); }
.qi-amt { grid-area: amt; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 6px; }
.qi-uom { font-size: 12px; color: var(--text-3); }
.qsec-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qsec .card-tools b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.qset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.qset-grid .field.wide { grid-column: 1 / -1; }
.q-disc { max-width: 160px; }

/* the quote no. check on the booking (display only, never blocks): CORE's red pair when it does not match */
.q-match { display: inline-flex; gap: 6px; align-items: flex-start; padding: 6px 10px; border-radius: var(--r-ctl); font-size: 12px; font-weight: 600; }
.q-match svg.ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.q-match.bad { background: var(--bad-bg); color: var(--bad); }
.q-match.good { background: var(--good-bg); color: var(--good); }

/* the role switch: CORE's profile block as a button */
button.side-profile { width: 100%; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: box-shadow 140ms var(--ease); }
button.side-profile:hover { box-shadow: inset 0 0 0 1px var(--text-1); }
.rowi[aria-pressed="true"] { background: var(--sunken); }

/* the quote document full screen (phones: one tap away; computers: Full screen) */
.qdoc-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.qdoc-full .sheet-head { padding: 12px 12px 12px 20px; box-shadow: 0 1px 0 var(--line); }
.qdoc-full .sheet-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qdoc-body { overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.qdoc-body .qdoc-fit:not([data-zoom="full"]) { max-width: 900px; margin: 0 auto; }

/* a narrow item list (phones, and the form column beside the preview): two lines per item,
   name + amount, then price + quantity */
.qb-form { container-type: inline-size; }
@container (max-width: 640px) {
  .qi { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amt" "price qty"; gap: 6px 10px; }
  .qi-price { justify-items: start; justify-content: start; align-self: center; grid-auto-flow: column; align-items: center; gap: 6px; padding-left: 32px; }
  .qi-qty { justify-content: flex-end; }
  .qi-amt { padding-top: 0; }
}
@container (max-width: 420px) { .qset-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .main .tabs button { height: 44px; }
  .qi-n { height: 44px; width: 52px; }
  .qi-pin { height: 44px; }
  .qi-price .linkish { min-height: 44px; }
  .main .qi-opt { height: 44px; }
  .qbig { font-size: 34px; }
  .q-tools, .q-tools .search.inline, .ph-actions .search.inline { width: 100%; flex: 1 1 100%; min-width: 0; }
  .q-tools .pill-select { flex: 1 1 100%; }
  .main .ph-actions .search.inline input { height: 44px; }
  .page-head .ph-actions:has(.search) { flex: 1 1 100%; }
  .qsec-foot .more { min-height: 44px; }
  .main:is([data-page="library"], [data-page="lib"], [data-page="quotes"], [data-page="q"], [data-page="approvals"], [data-page="ap"]) .btn { height: 44px; }
  .main:is([data-page="q"]) .field input, .main:is([data-page="q"]) .field select { min-height: 44px; }
  .side-mini .btn.icon.small { width: 44px; height: 44px; }
  .qdoc-full .sheet-head [data-close], .qdoc-full .seg button { min-width: 44px; height: 44px; }
  /* the full-screen paper sits outside .main and the sheet: its Download PDF needs its own 44 px */
  .qdoc-full .sheet-tools .btn { height: 44px; }
  .qdoc-full .sheet-tools .btn.icon { width: 44px; }
  .qdoc-full .sheet-head { padding-left: 14px; }
  .qdoc-body { padding: 10px; }
  .main .rowi .more { min-height: 44px; }
}

/* ============================================================================
   The quote document: Daniel's A4 template (from the prototype's .dq styles, read-only rows only).
   Its own fonts and colours on purpose: this is the paper the owner signs, not the app.
   ============================================================================ */
.dq { --ink: #1A1D21; --muted: #6B7176; --rule: #D8DCDA; --rule-strong: #1A1D21; --pacc: #17604B; --danger: #B4452F; --danger-soft: #FBEDE9; --danger-ink: #9B3B24;
  color-scheme: light; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.45; overflow-wrap: normal; text-align: left; letter-spacing: 0; }
.dq.paper { width: 794px; max-width: none; background: #fff; color: var(--ink); box-shadow: 0 2px 24px rgba(0, 0, 0, .18); padding: 15mm 14mm 12mm; font-size: 13px; box-sizing: border-box; }
.dq h1, .dq h3, .dq h4 { margin: 0; }
.dq .draftstamp { margin: 0 0 14px; padding: 7px 12px; border: 1.5px dashed var(--danger); border-radius: 5px; background: var(--danger-soft); color: var(--danger-ink); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.dq .doc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px solid var(--rule-strong); }
.dq .co { display: flex; gap: 14px; align-items: flex-start; }
.dq .logo-slot { width: 150px; height: 60px; flex: 0 0 auto; }
.dq .logo-slot img { display: block; width: 150px; height: 60px; object-fit: contain; object-position: left center; }
.dq .co-name { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.dq .co-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.dq .doc-title { text-align: right; }
.dq .doc-title h1 { font-size: 27px; font-weight: 800; letter-spacing: .12em; color: var(--pacc); line-height: 1.45; }
.dq .doc-title .sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.dq .meta { margin-top: 10px; font-size: 12px; display: grid; grid-template-columns: auto auto; gap: 2px 10px; justify-content: end; }
.dq .meta .k { color: var(--muted); text-align: right; }
.dq .meta .v { font-weight: 600; text-align: right; min-width: 90px; }
.dq .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px 0 4px; }
.dq .party .lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pacc); font-weight: 700; margin-bottom: 4px; }
.dq .party .row { font-size: 12.5px; display: flex; gap: 6px; flex-wrap: nowrap; align-items: stretch; }
.dq .party .row .k { color: var(--muted); min-width: 64px; }
.dq .party .row .v { font-weight: 600; min-width: 120px; }
.dq .scope-note { font-size: 11px; color: var(--muted); font-style: italic; padding: 2px 0 10px; }
.dq .eb { display: flex; align-items: stretch; margin: 14px 0 4px; border: 2px solid var(--pacc); border-radius: 6px; overflow: hidden; background: var(--pacc); color: #fff; }
.dq .eb-badge { background: #F0B429; color: #1A1D21; font-weight: 900; font-size: 13px; line-height: 1.05; letter-spacing: .06em; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; text-align: center; flex: 0 0 auto; }
.dq .eb-main { flex: 1; padding: 11px 15px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.dq .eb-title { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.dq .eb-title strong { color: #F0B429; font-weight: 900; }
.dq .eb-sub { font-size: 11px; line-height: 1.45; opacity: .92; }
.dq .eb-worth { flex: 0 0 auto; padding: 11px 16px; text-align: right; display: flex; flex-direction: column; justify-content: center; border-left: 1px dashed rgba(255, 255, 255, .45); }
.dq .eb-worth-l { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.dq .eb-worth-v { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; color: #F0B429; text-decoration: line-through; text-decoration-thickness: 2px; }
.dq .eb-urge { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed #F0B429; border-radius: 5px; background: #FFF9EC; color: #7A5200; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.6; }
.dq .eb-count { display: inline-block; background: #1A1D21; color: #F0B429; font-weight: 900; font-size: 11px; letter-spacing: .1em; padding: 3px 9px; border-radius: 99px; margin-right: 7px; }
.dq tr.freebie .pval { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.dq tr.freebie .amt { color: var(--pacc); font-weight: 800; letter-spacing: .04em; }
.dq tr.freebie .iname::after { content: " — EARLY BIRD GIFT"; color: #B07A00; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.dq table.items { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--ink); }
.dq td.desc { word-wrap: break-word; overflow-wrap: anywhere; }
.dq .part-title { padding: 16px 0 6px; }
.dq .part-title h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pacc); display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.dq .part-title h3 .pn { color: var(--muted); font-weight: 600; }
.dq thead th { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-align: left; padding: 6px 6px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.dq thead th.num, .dq td.num { text-align: right; }
.dq thead th.ctr, .dq td.ctr { text-align: center; }
.dq tbody td { padding: 7px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dq td.no { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dq .iname { font-weight: 600; }
.dq .idesc { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.dq td.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dq td.uom { font-size: 12px; color: var(--muted); }
.dq td.amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dq tr.subtotal td { border-bottom: 2px solid var(--rule-strong); padding-top: 8px; padding-bottom: 8px; }
.dq tr.subtotal .lab { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dq tr.subtotal .amt { color: var(--pacc); }
.dq .wrap-cols { display: flex; gap: 28px; margin-top: 20px; align-items: flex-start; }
.dq .summary { flex: 1 1 55%; }
.dq .summary h4, .dq .totals h4, .dq .pay h4, .dq .tnc h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pacc); margin-bottom: 6px; }
.dq .summary table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dq .summary td { padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.dq .summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dq .totals { flex: 1 1 45%; }
.dq .totals .trow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 6px; border-bottom: 1px solid var(--rule); font-size: 13px; align-items: center; }
.dq .totals .trow .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.dq .totals .grand { border-top: 2px solid var(--rule-strong); border-bottom: 3px double var(--rule-strong); padding: 9px 6px; font-size: 15px; font-weight: 800; }
.dq .totals .grand .v { color: var(--pacc); font-size: 17px; }
.dq .muted-s { font-size: 11px; color: var(--muted); }
.dq .pay { margin-top: 20px; }
.dq .pay .prow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 6px; border-bottom: 1px solid var(--rule); font-size: 12.5px; max-width: 420px; align-items: center; }
.dq .pay .prow .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.dq .bank { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.dq .bank b { color: var(--ink); }
.dq .tnc { margin-top: 20px; }
.dq .tnc ol { padding-left: 18px; margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; display: grid; gap: 4px; }
.dq .tnc li::marker { color: var(--pacc); font-weight: 700; }
.dq .sigs { display: flex; gap: 24px; margin-top: 34px; }
.dq .sig { flex: 1; min-width: 0; }
.dq .sig .sigspace { height: 44px; }
.dq .sig .line { border-top: 1px solid var(--ink); padding-top: 5px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dq .sig .fields { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.8; }