/* ---------- subcontractor quotes: the designer's changes (filter by job type, subcontractor picker, VAT amount, job files) ---------- */
/* filter by job type: the Contacts page's pills */
.q-filter{margin:0 0 12px;align-self:start;width:fit-content;max-width:100%}
.q-filter .tab .mono{font-size:11.5px;color:var(--muted);margin-left:2px}
.q-filter .tab[aria-pressed="true"] .mono{color:var(--ink-2)}

/* subcontractor picker: the list drawn under the Subcontractor field */
.q-pick{position:fixed;z-index:60;max-height:320px;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:4px;display:grid;gap:1px}
.q-pick-o{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer;min-width:0}
.q-pick-o b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.q-pick-o small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.q-pick-o:hover,.q-pick-o.on{background:var(--panel-2)}
.q-pick-new{align-items:center;color:var(--ink-2);border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:2px;padding-top:9px}
.q-pick-new svg{width:13px;height:13px;flex:none}
.q-pick-new span{white-space:nowrap;flex:none}
.q-pick-new b{color:var(--ink)}
.q-ct{display:block;font-size:11px;color:var(--muted);padding:1px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-ct a{color:inherit;text-decoration:none}
.q-ct a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* typed VAT amount: a second line in the VAT cell, which gets a little wider */
.q-row{grid-template-columns:minmax(110px,1.1fr) 84px 76px 96px 108px minmax(120px,1.4fr) 28px 126px}
.q-vat{flex-wrap:wrap;row-gap:1px}
.q-vamt{flex:0 0 100%;display:flex;align-items:center;gap:2px;min-width:0}
.q-vamt small{font-size:11px;color:var(--muted)}
.q-row .q-va{width:100%;min-width:0;padding:2px 3px;text-align:right;font-size:12px;color:var(--ink-2)}
.q-row .q-va.on{color:var(--ink);font-weight:600;background:var(--gold-1);border-color:var(--gold-3)}
.q-row .q-vp.ovr{color:var(--faint);text-decoration:line-through}
@container (max-width:780px){
  .q-row{grid-template-columns:minmax(0,1fr) 90px 78px 96px}
}
/* a phone: the four columns no longer fit (the prototype's rows clip there), so a row becomes two */
@container (max-width:460px){
  .q-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .q-row>span:nth-child(1),.q-row>span:nth-child(4),.q-row>span:nth-child(5),.q-row>span:nth-child(6){grid-column:1/-1}
  .q-row>span:nth-child(2),.q-row>span:nth-child(7){grid-column:1}
  .q-row>span:nth-child(3),.q-row>span:nth-child(8){grid-column:2}
  .q-row>span:nth-child(8){justify-content:flex-end}
  .q-act .fx-sel{white-space:nowrap}
}

/* files attached to a job */
.q-files{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:-2px 0 8px;font-size:12.5px}
.q-files-l{font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-right:2px}
.q-file{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:1px 3px 1px 4px;max-width:100%;min-width:0}
.q-file.dr{background:var(--panel-2)}
.q-file-o{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font-size:12.5px;padding:3px 6px;border-radius:999px;min-width:0;max-width:280px}
.q-file-o span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.q-file-o small{font-size:10.5px;color:var(--muted);background:var(--panel-2);border-radius:999px;padding:0 6px;flex:none}
.q-file.dr .q-file-o small{background:var(--panel)}
.q-file-o:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.q-file .fx-x{width:22px;height:22px}
.q-files-add{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.q-files-pick{min-width:200px;max-width:280px}
.q-files-pick select{font-size:12.5px;padding:5px 26px 5px 10px}

/* ---------- Budgeting: the designer's changes (typed VAT amount, invoice icon on item rows, paid by) ---------- */
/* VAT cell: the rate / amount switch in place of the "%" (the cost switch's look) */
.vat-unit{flex:none;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:0 5px;min-width:20px;font:inherit;font-family:var(--mono);font-size:10.5px;line-height:17px;color:var(--muted);cursor:pointer}
.vat-unit:hover{border-color:var(--ink-2);color:var(--ink)}
.vat-unit.on{background:var(--amber-soft);border-color:transparent;color:var(--amber);font-weight:600}
.ci.va{width:70px}
.btable.fit col.w-v{width:92px}
.btable.fit .ci.va{flex:1;width:auto;min-width:0;padding:5px 2px;text-align:right}
@container (max-width:760px){.btable.fit .c-vat .cv{flex-wrap:wrap;row-gap:2px}.btable.fit .ci.va{flex:1 1 44px;text-align:left}.btable.fit .vat-unit{min-width:16px;padding:0 3px}}
/* the invoice icon next to the Paid button (the Suppliers tab's invoice icon, a little smaller) */
.c-paid .inv-ic{margin-left:4px;padding:2px 7px;font-size:11.5px;vertical-align:middle}
.c-paid .inv-ic svg{width:13px;height:13px}
.c-paid .inv-ic.none svg:last-child{width:10px;height:10px}
.btable.fit col.w-pd{width:120px}
.btable.fit .c-paid{white-space:nowrap}
@container (max-width:760px){.btable.fit .c-paid{white-space:normal}.btable.fit .c-paid .inv-ic{margin:4px 4px 0 0}}
/* paid by: the payment form's select, the payer under a payment, the totals per payer */
.pay-add select.input.pay-by{flex:1 1 190px}
.pay-add .input.pay-by-name{flex:1 1 160px}
.pay-li .grow .pay-who{display:block}
.payers{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:12.5px}
.payers .label{margin-right:2px}
.payers .payer{white-space:nowrap;color:var(--ink-2)}
.payers .payer b{font-weight:600;margin-left:2px}
.pp-payers{padding:2px 2px 0}
.sup-payers{justify-content:flex-end;gap:0 8px;font-size:11px;margin:2px 0 0 auto;font-family:var(--sans);white-space:normal;max-width:240px}
.sup-payers .payer{color:var(--muted)}
.sup-payers .payer b{font-weight:500}
.sup-payers-all{margin-top:12px;padding:10px 4px 0;border-top:1px solid var(--line)}
.cash-payers{margin-top:10px;background:var(--panel-2);border-radius:14px;padding:10px 14px}
/* an FF&E row whose option brings its own VAT (specs 1, 8): the tick fixed on, a typed amount read-only */
.vat-ro{font-size:12px;color:var(--ink-2);padding:0 2px}
.vchk input:disabled{cursor:default;opacity:.55}

/* ---------- FF&E schedule: the designer's changes (VAT incl./excl., markup, rooms and categories that open and close) ---------- */
/* totals incl. VAT under the excl.-VAT figures */
.fx-kpis small.fx-vat{font-size:11px;color:var(--muted);white-space:nowrap}
.fx-total small.fx-vat{display:block;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.fx-meta.fx-vat{color:var(--faint)}
/* rooms and category sections open and close (everything starts closed) */
.fx-tog{border:0;background:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;padding:0}
.fx-tog:hover,.fx-tog:focus-visible{color:var(--ink);background:var(--panel-2)}
.fx-tog svg,.fx-cat-h svg{width:15px;height:15px;transition:transform .15s}
.fx-tog[aria-expanded="false"] svg,.fx-cat-h[aria-expanded="false"] svg{transform:rotate(-90deg)}
.fx-room-h:last-child{margin-bottom:0}
.fx-grp{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 2px 6px}
.fx-room-h+.fx-grp{margin-top:2px}
.fx-cat-s{margin-bottom:8px}
.fx-cat-s:last-child{margin-bottom:0}
.fx-cat-h{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 12px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.fx-cat-h:hover{border-color:var(--line-2)}
.fx-cat-h:focus-visible{outline:2px solid var(--gold-3);outline-offset:1px}
.fx-cat-h svg{color:var(--muted);flex:none}
.fx-cat-h b{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-cat-h[aria-expanded="true"]{margin-bottom:8px}
/* a product's markup (designer) */
.fx-mk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 10px;padding:6px 10px;border-radius:10px;background:var(--panel);font-size:12.5px;color:var(--ink-2)}
.fx-mk.on{background:var(--gold-1)}
.fx-mk-l{font-weight:600}
.fx-mk-sel{flex:none;min-width:150px}
.fx-mk-sel select{font-size:12.5px;padding:4px 28px 4px 8px}
.fx-mk .fx-mk-p{width:52px;text-align:center;padding:3px;font-size:13px}
.fx-mk-note{color:var(--muted);font-size:12px;flex:1;min-width:200px}
/* an option's VAT: the incl./excl. switch, a typed VAT amount, the client's price */
.fx-vrow{justify-content:flex-start;gap:8px}
.fx-vrow .fx-vtog{display:inline-block;margin:0 0 0 6px;flex:none}
.fx-vamt{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);flex:1;justify-content:flex-end;min-width:0}
.fx-opt .fx-vamt .fx-vat-in{width:84px;text-align:right;font-size:12.5px}
.fx-cl{font-size:11.5px;color:var(--amber);font-weight:600;padding:0 6px}
.fx-vline{font-size:11.5px;color:var(--muted);padding:0 6px}
@media (max-width:720px){.fx-room-h{flex-wrap:wrap}.fx-room-h .fx-room-name{flex:1 1 calc(100% - 44px)}.fx-cat-h{flex-wrap:wrap}.fx-cat-h b{flex-basis:calc(100% - 30px)}}