/*
 * quote-builder.css — quotations made in Tally (`tally:quote-builder`, 2026-10-25):
 * the builder (screens/quote-builder.js), the list (screens/quotes.js) and the
 * document itself (js/quote-doc.js, `.qdoc`). The screens use the tokens, so
 * all three designs and both modes follow; the document is always black on
 * white paper (it is what the client gets), with the business's accent only
 * where the app's own colour would not matter on print.
 */

/* ---- The screen ------------------------------------------------------------ */

#app.screen-quote-builder { max-inline-size: 1360px; padding-block-end: calc(120px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { #app.screen-quote-builder { padding-block-end: 48px; } }

.qb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 18px; }
.qb-title { margin: 0; }
.qb-chip {
  display: inline-flex; align-items: center; min-block-size: 28px; margin-block-start: 6px; padding-inline: 12px;
  border-radius: var(--radius-pill); background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted); font-size: 0.8125rem; font-weight: 600;
}
.qb-chip.is-dirty { color: var(--amber); }
.qb-chip.is-issued { color: var(--pos); }
.qb-top-actions { display: none; gap: 10px; }
@media (min-width: 1024px) { .qb-top-actions { display: flex; } }
.qb-btn { inline-size: auto; min-block-size: 46px; padding-inline: 18px; display: inline-flex; align-items: center; gap: 8px; }
.qb-ic { display: inline-flex; flex: none; }
.qb-ic svg { inline-size: 18px; block-size: 18px; }

.qb-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.qb-aside { display: none; }
@media (min-width: 1180px) {
  .qb-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .qb-aside { display: block; position: sticky; inset-block-start: 20px; }
}
.qb-aside-h { display: flex; justify-content: space-between; margin: 0 4px 10px; color: var(--text-muted); font-size: 0.8125rem; font-weight: 700; }
.qb-live-dot { display: inline-flex; align-items: center; gap: 6px; }
.qb-live-dot::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--pos); }
.qb-live { max-block-size: calc(100dvh - 120px); overflow: auto; border-radius: 10px; }

.qb-form { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.qb-pane {
  position: relative;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
}
.qb-pane .field { margin: 0; }
.qb-pane-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qb-pane-t { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.qb-pane-s { color: var(--text-muted); font-size: 0.8125rem; }
.qb-hint { margin: 4px 0 0; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.45; }
.qb-textarea { min-block-size: 70px; padding-block: 10px; line-height: 1.45; resize: vertical; }
.qb-grid { display: grid; gap: 12px; }
.qb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-grid--details { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .qb-grid--details { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.qb-small { inline-size: auto; min-block-size: 40px; padding-inline: 14px; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px; }
.qb-iconbtn {
  flex: none; inline-size: 40px; block-size: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); cursor: pointer;
}
.qb-iconbtn:disabled { opacity: 0.35; cursor: default; }

/* Suggestions (client, price list). */
.qb-sugg { max-block-size: 320px; overflow: auto; }
.qb-sugg-h { padding: 8px 12px 4px; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; }
.qb-opt { display: flex !important; align-items: center; gap: 10px; min-block-size: 50px; }
.qb-opt.is-active { background: var(--accent-soft); }
.qb-opt-ic { flex: none; inline-size: 32px; block-size: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.qb-opt-ic.is-service { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.qb-opt-ic.is-add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.qb-opt-tx { display: flex; flex-direction: column; min-inline-size: 0; flex: 1 1 auto; text-align: start; }
.qb-opt-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-opt-m { color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-opt-p { flex: none; font-weight: 600; font-size: 0.875rem; color: var(--text); }
.qb-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-start: -4px; color: var(--text-muted); font-size: 0.8125rem; }

/* Items. */
.qb-items { display: flex; flex-direction: column; gap: 8px; }
.qb-empty { padding: 22px 16px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text-muted); text-align: center; line-height: 1.6; font-size: 0.9375rem; }
.qb-item { border-radius: 18px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.15s, transform 0.15s; }
.qb-item.is-open { box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-sm); }
.qb-item.is-over { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(2px); }
.qb-item.is-dragging { opacity: 0.45; }
.qb-item-head { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 64px; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 18px; }
.qb-grip { flex: none; color: var(--text-muted); cursor: grab; display: flex; padding: 4px 0; }
@media (hover: none) { .qb-grip { display: none; } }
.qb-idx { flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 0.8125rem; font-weight: 700; }
.qb-item-tx { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.qb-item-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-item-n.is-blank { color: var(--text-muted); font-weight: 500; }
.qb-item-s { color: var(--text-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-item-tot { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.qb-item-tot b { font-size: 1rem; }
.qb-item-tot span { color: var(--text-muted); font-size: 0.6875rem; }
.qb-chev { flex: none; color: var(--text-muted); transition: transform 0.2s; display: flex; }
.qb-item.is-open .qb-chev { transform: rotate(180deg); }
.qb-editor { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border-block-start: 1px solid var(--border); }
.qb-editor .field { margin: 0; }
.qb-newtag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 0.75rem; font-weight: 700; }
.qb-newtag .qb-ic svg { inline-size: 14px; block-size: 14px; }
.qb-grid--qty { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.qb-qtyrow { display: flex; gap: 6px; }
.qb-stepper { flex: 1 1 auto; display: flex; align-items: center; min-block-size: 48px; border-radius: 14px; background: var(--bg-raise); box-shadow: inset 0 0 0 1px var(--border); min-inline-size: 0; }
.qb-stepper button { flex: none; inline-size: 38px; block-size: 46px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.qb-qty-input { flex: 1 1 auto; inline-size: 100%; min-inline-size: 0; block-size: 44px; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; color: var(--text); outline: none; }
.qb-unit { flex: none; inline-size: 74px; padding-inline: 8px; text-align: center; }
.qb-price-input { font-weight: 700; font-size: 1.0625rem; }
.qb-seg { display: flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.qb-seg button { flex: 1 1 0; min-block-size: 40px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.qb-seg button.is-on { background: var(--bg-raise); color: var(--accent); box-shadow: var(--shadow-sm); }
html[data-design="etched"] .qb-seg button.is-on { background: transparent; box-shadow: var(--clear-ring); }
.qb-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); }
.qb-line > span:first-child { display: flex; flex-direction: column; }
.qb-line-k { color: var(--text-muted); font-size: 0.8125rem; }
.qb-line-sub { color: var(--text-muted); font-size: 0.75rem; }
.qb-line-v { font-size: 1.125rem; font-weight: 700; color: var(--accent); }
.qb-ed-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qb-grow { flex: 1 1 auto; }
.qb-del { inline-size: auto; min-block-size: 40px; padding-inline: 10px; background: none; color: var(--neg); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: none; }

/* Totals. */
.qb-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 9px; }
.qb-sum + .qb-sum { border-block-start: 1px solid var(--border); }
.qb-sum-k { color: var(--text-muted); }
.qb-sum-v { font-weight: 600; }
.qb-sum.is-disc .qb-sum-v { color: var(--pos); }
.qb-sum.is-total { margin-block-start: 4px; padding-block-start: 14px; border-block-start: 1.5px solid var(--text); }
.qb-sum.is-total .qb-sum-k { color: var(--text); font-weight: 700; }
.qb-sum.is-total .qb-sum-v { font-size: 1.75rem; font-weight: 700; }
html[data-design="etched"] .qb-sum.is-total .qb-sum-v { font-family: "Heebo", system-ui, sans-serif; font-weight: 300; }
.qb-disc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border); }
.qb-disc-row { display: flex; align-items: center; gap: 8px; }
.qb-seg--disc { flex: none; }
.qb-seg--disc button { padding-inline: 12px; font-size: 0.875rem; }
.qb-seg--disc button { white-space: nowrap; } /* "אחוז (%)" stays on one line (Almon, 2026-10-25) */
.qb-disc-input { flex: 1 1 auto; min-inline-size: 0; font-weight: 700; }
.qb-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--amber) 8%, transparent); }
.qb-rates .qb-hint { flex-basis: 100%; margin: 0; }
.qb-rate { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.qb-rate-input { inline-size: 90px; min-block-size: 40px; text-align: center; }

/* Files. */
.qb-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qb-file { display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; min-block-size: 40px; padding-inline: 10px 4px; border-radius: 12px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.875rem; font-weight: 600; }
.qb-file a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 180px; }
.qb-file small { color: var(--text-muted); font-weight: 400; }
.qb-file button { inline-size: 30px; block-size: 30px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* The phone's action bar (the bottom menu is hidden on this screen). */
.qb-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: grid; grid-template-columns: 74px 74px minmax(0, 1fr); gap: 8px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent) 32%);
}
@media (min-width: 1024px) { .qb-bar { display: none; } }
.qb-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; block-size: 58px;
  border: 0; border-radius: 18px; background: var(--surface-strong); backdrop-filter: var(--surface-blur); -webkit-backdrop-filter: var(--surface-blur);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); color: var(--text); font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer; line-height: 1.15;
}
.qb-tool .qb-ic svg { inline-size: 20px; block-size: 20px; }
.qb-bar .qb-issue { block-size: 58px; border-radius: 18px; font-size: 1rem; justify-content: center; }

/* Preview sheet. */
.qb-sheet { z-index: 220; }
.qb-sheet__card { max-inline-size: 860px; max-block-size: calc(100dvh - 24px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.qb-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.qb-sheet-h .confirm-sheet__title { margin: 0; }
.qb-sheet-body { flex: 1 1 auto; overflow: auto; padding: 4px 12px 12px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.qb-sheet-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 12px 16px 16px; }

/* Busy cover while issuing. */
.qb-busy { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qb-busy-t { margin: 0; font-weight: 700; }
.qb-spinner { inline-size: 40px; block-size: 40px; border-radius: 50%; border: 4px solid var(--accent-soft); border-block-start-color: var(--accent); animation: qb-spin 0.8s linear infinite; }
@keyframes qb-spin { to { transform: rotate(360deg); } }
.qb-toast { z-index: 270; }

/* Issued. */
.qb-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-block-end: 14px; border-radius: 16px; background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); font-weight: 600; }
.qb-banner.is-warn { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.qb-issued-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.qb-issued-actions .qb-btn { min-block-size: 44px; }
.qb-issued-actions { margin-block-end: 8px; }

/* `tally:documents` — the VAT type picker in the totals. */
.qb-vat-field { margin-block-end: 10px; }
.qb-vat-field .qb-hint:empty { display: none; }

/* Sending: busy → "sent ✓" with a ring → a small tick that stays. */
.qb-send { position: relative; overflow: visible; transition: transform .15s ease, background-color .25s ease, color .25s ease; }
.qb-send .qb-send-tick { position: absolute; inset-block-start: -5px; inset-inline-start: -5px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  display: none; place-items: center; background: var(--pos); color: #fff; box-shadow: 0 0 0 2px var(--bg, #fff); }
.qb-send .qb-send-tick .qb-ic svg { inline-size: 11px; block-size: 11px; stroke-width: 3; }
.qb-send.was-sent .qb-send-tick { display: grid; }
.qb-send.is-busy { pointer-events: none; opacity: .85; }
.qb-send.is-busy > .qb-ic:first-child { animation: qb-spin .8s linear infinite; }
.qb-send.is-sent { background: var(--pos) !important; color: #fff !important; border-color: transparent !important; animation: qb-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.qb-send.is-sent::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 55%, transparent); animation: qb-ring .9s ease-out; pointer-events: none; }
.qb-send.is-sent .qb-send-tick { animation: qb-tick-in .35s .15s both; }
.qb-send.is-failed { animation: qb-shake .45s; }
@keyframes qb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes qb-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
@keyframes qb-tick-in { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes qb-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes qb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qb-send, .qb-send.is-sent, .qb-send.is-sent::after, .qb-send.is-busy > .qb-ic:first-child { animation: none; } }
.qb-sent-line { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--pos); font-size: 0.8125rem; font-weight: 600; }
.qb-sent-line .qb-ic svg { inline-size: 15px; block-size: 15px; }
.qb-sent-line[hidden] { display: none; }
.qb-mail-card { display: flex; flex-direction: column; gap: 12px; inline-size: min(460px, 100%); }
.qb-mail-card .confirm-sheet__body { margin: 0; }
.qb-issued-doc { max-inline-size: 900px; }

/* The list. */
.quotes-row__no { flex: none; min-inline-size: 52px; block-size: 38px; padding-inline: 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.quotes-row__no.is-draft { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); font-size: 0.75rem; }

/* ---- The document (js/quote-doc.js) — white paper, in em so it scales ------- */

.qdoc-fit { inline-size: 100%; }
.qdoc {
  position: relative;
  inline-size: 61em;
  max-inline-size: 100%;
  box-sizing: border-box;
  padding: 3.4em 3.2em 2.6em;
  background: #ffffff;
  color: #1d232c;
  border-radius: 0.4em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1.4em 3em -1.4em rgba(20, 24, 40, 0.35);
  font-family: "Assistant", "Heebo", sans-serif;
  font-size: 1em;
  line-height: 1.45;
  text-align: start; /* the document's own dir (rtl, or ltr in English) decides */
  overflow: hidden;
}
.qdoc-fit .qdoc { inline-size: 61em; }
.qd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; padding-block-end: 1.3em; border-block-end: 0.16em solid #1d232c; }
.qd-biz { display: flex; gap: 1em; align-items: center; min-inline-size: 0; }
.qd-logo { inline-size: 5em; block-size: 5em; object-fit: contain; flex: none; border-radius: 0.6em; }
.qd-logo--initial { display: flex; align-items: center; justify-content: center; background: #1d232c; color: #fff; font-weight: 800; font-size: 2em; inline-size: 2.5em; block-size: 2.5em; border-radius: 0.4em; }
.qd-biz-name { font-weight: 800; font-size: 1.35em; }
.qd-biz-meta { color: #5d6470; font-size: 0.85em; margin-block-start: 0.2em; }
.qd-kind { text-align: end; flex: none; }
.qd-kind-t { font-size: 1.9em; font-weight: 800; line-height: 1.1; }
.qd-kind-n { color: #5d6470; font-size: 1em; font-variant-numeric: tabular-nums; }
.qd-meta { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1.2em; padding-block: 1.2em; font-size: 0.95em; }
.qd-meta > div { display: flex; flex-direction: column; }
.qd-k { color: #5d6470; font-size: 0.82em; }
.qd-v { font-weight: 700; }
.qd-s { color: #5d6470; font-size: 0.85em; }
.qd-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.qd-desc { margin: 0 0 1.2em; padding: 0.9em 1.1em; background: #f4f5f8; border-radius: 0.5em; font-size: 0.95em; white-space: pre-line; }
.qd-th, .qd-tr { display: grid; grid-template-columns: 2em minmax(0, 1fr) 6.2em 7em 7.6em; gap: 0.7em; align-items: start; }
/* `tally:credit-receipt` — a receipt's payments: #, method + details, date, amount. */
.qd-table--pay .qd-th, .qd-table--pay .qd-tr { grid-template-columns: 2em minmax(0, 1fr) 7em 8em; }
.qd-th { padding-block: 0.55em; border-block-end: 0.08em solid #1d232c; color: #5d6470; font-size: 0.78em; font-weight: 800; }
.qd-tr { padding-block: 0.7em; border-block-end: 0.06em solid #e4e6eb; font-size: 0.92em; }
.qd-c { text-align: end; }
.qd-item { display: flex; flex-direction: column; }
.qd-item-n { font-weight: 700; }
.qd-item-d { color: #5d6470; font-size: 0.88em; white-space: pre-line; }
.qd-empty { padding: 1.4em 0; color: #8a909b; text-align: center; border-block-end: 0.06em solid #e4e6eb; }
.qd-totals { inline-size: 22em; max-inline-size: 100%; margin-block-start: 1.1em; margin-inline-start: auto; font-size: 0.95em; }
.qd-r { display: flex; justify-content: space-between; gap: 1em; padding-block: 0.32em; }
.qd-r--grand { margin-block-start: 0.35em; padding-block-start: 0.6em; border-block-start: 0.16em solid #1d232c; font-weight: 800; font-size: 1.18em; }
.qd-fx { margin: 0.6em 0 0; color: #5d6470; font-size: 0.8em; text-align: end; }
.qd-notes { margin-block-start: 1.5em; font-size: 0.88em; color: #3c424c; display: flex; flex-direction: column; white-space: pre-line; }
.qd-notes b { color: #1d232c; margin-block-end: 0.2em; }
.qd-foot { display: flex; justify-content: space-between; gap: 1em; margin-block-start: 2em; padding-block-start: 0.8em; border-block-start: 0.06em solid #e4e6eb; color: #7a808b; font-size: 0.75em; }
.qd-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: rgba(29, 35, 44, 0.06); font-size: 9em; font-weight: 800; transform: rotate(-18deg); }

/* `tally:documents` parts: tagline, VAT note, fixed text, signature, a line with no VAT. */
.qd-tagline { color: #3c424c; font-size: 0.9em; margin-block-start: 0.1em; }
.qd-vatnote { margin: 0.6em 0 0; color: #5d6470; font-size: 0.8em; text-align: end; }
.qd-novat { display: inline-block; margin-inline-start: 0.5em; padding: 0 0.45em; border-radius: 0.3em; background: #f0f1f4; color: #5d6470; font-size: 0.75em; font-weight: 600; vertical-align: 0.1em; }
.qd-fixed { margin-block-start: 1.4em; padding: 0.8em 1em; border: 0.06em solid #e4e6eb; border-radius: 0.5em; color: #3c424c; font-size: 0.82em; white-space: pre-line; }
.qd-sign { display: flex; flex-direction: column; align-items: flex-end; margin-block-start: 1.6em; }
.qd-sign-img { max-inline-size: 13em; max-block-size: 5em; object-fit: contain; }
.qd-sign-k { min-inline-size: 13em; margin-block-start: 0.2em; padding-block-start: 0.3em; border-block-start: 0.06em solid #9aa0aa; color: #5d6470; font-size: 0.75em; text-align: center; }

/* ---- The five designs (Documents → settings) ------------------------------- */

/* 2 · modern — a band of colour, a shaded table, a tinted total. */
.qdoc--modern { padding-block-start: 0; }
.qdoc--modern .qd-head { display: block; margin-inline: -3.2em; padding: 0; border: 0; }
.qdoc--modern .qd-band { display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 2.2em 3.2em 2em; background: linear-gradient(120deg, #3b4fd8, #5b6cf0); color: #fff; }
.qdoc--modern .qd-logo { background: #fff; padding: 0.35em; }
.qdoc--modern .qd-logo--initial { background: #fff; color: #3b4fd8; }
.qdoc--modern .qd-biz-meta, .qdoc--modern .qd-tagline, .qdoc--modern .qd-kind-n { color: rgba(255, 255, 255, 0.82); }
.qdoc--modern .qd-kind-t { font-size: 1.5em; letter-spacing: 0.01em; }
.qdoc--modern .qd-meta { margin-block-start: 1.2em; }
.qdoc--modern .qd-k { color: #3b4fd8; font-weight: 700; }
.qdoc--modern .qd-th { background: #eef0fd; border: 0; border-radius: 0.4em; padding-inline: 0.6em; color: #3b4fd8; }
.qdoc--modern .qd-tr { padding-inline: 0.6em; }
.qdoc--modern .qd-tr:nth-child(odd) { background: #fafbff; }
.qdoc--modern .qd-desc { background: #f4f5fe; border-inline-start: 0.25em solid #3b4fd8; border-radius: 0.2em; }
.qdoc--modern .qd-totals { background: #f4f5fe; padding: 0.7em 1em; border-radius: 0.6em; }
.qdoc--modern .qd-r--grand { border-color: #3b4fd8; color: #3b4fd8; }

/* 3 · minimal — centred head, hairlines, light figures. */
.qdoc--minimal { padding-inline: 4em; color: #2a2f37; }
.qdoc--minimal .qd-head { flex-direction: column; align-items: center; text-align: center; gap: 0.6em; padding-block-end: 1.6em; border-block-end: 0.05em solid #d9dce2; }
.qdoc--minimal .qd-logo { inline-size: 4em; block-size: 4em; }
.qdoc--minimal .qd-biz-name { font-weight: 600; font-size: 1.2em; letter-spacing: 0.02em; }
.qdoc--minimal .qd-kind { text-align: center; margin-block-start: 0.8em; }
.qdoc--minimal .qd-kind-t { font-weight: 300; font-size: 1.6em; letter-spacing: 0.12em; }
.qdoc--minimal .qd-kind-n { font-size: 0.85em; letter-spacing: 0.08em; }
.qdoc--minimal .qd-meta { padding-block: 1.6em; }
.qdoc--minimal .qd-desc { background: none; padding-inline: 0; border-block: 0.05em solid #eceef1; border-radius: 0; }
.qdoc--minimal .qd-th { border-block-end-width: 0.05em; border-color: #c9cdd4; font-weight: 600; letter-spacing: 0.04em; }
.qdoc--minimal .qd-tr { border-color: #f0f1f3; }
.qdoc--minimal .qd-item-n { font-weight: 600; }
.qdoc--minimal .qd-r--grand { border-block-start-width: 0.05em; font-weight: 400; font-size: 1.5em; }
.qdoc--minimal .qd-fixed { border: 0; padding-inline: 0; text-align: center; }

/* 4 · bold — a dark head block, a strong total box. */
.qdoc--bold { padding-block-start: 0; }
.qdoc--bold .qd-head { margin-inline: -3.2em; padding: 2.2em 3.2em; background: #1d232c; color: #fff; border: 0; align-items: center; }
.qdoc--bold .qd-kind { text-align: start; }
.qdoc--bold .qd-kind-t { font-size: 2.4em; font-weight: 900; letter-spacing: -0.01em; color: #ff8a65; }
.qdoc--bold .qd-kind-n { color: #c3c8d2; font-size: 1.05em; }
.qdoc--bold .qd-biz { flex-direction: row-reverse; text-align: end; }
.qdoc--bold .qd-biz-meta, .qdoc--bold .qd-tagline { color: #c3c8d2; }
.qdoc--bold .qd-logo { background: #fff; padding: 0.35em; }
.qdoc--bold .qd-logo--initial { background: #ff8a65; color: #1d232c; }
.qdoc--bold .qd-meta { margin-block-start: 1em; }
.qdoc--bold .qd-v { font-size: 1.05em; }
.qdoc--bold .qd-th { border-block-end-width: 0.2em; color: #1d232c; }
.qdoc--bold .qd-item-n { font-weight: 800; }
.qdoc--bold .qd-totals { inline-size: 24em; }
.qdoc--bold .qd-r--grand { margin-block-start: 0.6em; padding: 0.7em 0.9em; border: 0; border-radius: 0.5em; background: #1d232c; color: #fff; font-size: 1.3em; }

/* 5 · elegant — a double frame, centred serif title between ornament lines. */
.qdoc--elegant { padding: 3.6em 3.6em 2.8em; color: #2b2622; font-family: "Frank Ruhl Libre", "Assistant", serif; }
.qdoc--elegant::before { content: ""; position: absolute; inset: 1.1em; border: 0.08em solid #9c7c54; pointer-events: none; }
.qdoc--elegant::after { content: ""; position: absolute; inset: 1.45em; border: 0.04em solid #c9b08c; pointer-events: none; }
.qdoc--elegant .qd-head { flex-direction: column; align-items: center; gap: 1em; border: 0; padding-block-end: 0.6em; text-align: center; }
.qdoc--elegant .qd-biz { flex-direction: column; text-align: center; gap: 0.5em; }
.qdoc--elegant .qd-biz-name { font-weight: 700; font-size: 1.5em; }
.qdoc--elegant .qd-tagline { font-style: italic; color: #6b5a45; }
.qdoc--elegant .qd-orn { display: flex; align-items: center; gap: 1em; inline-size: 100%; }
.qdoc--elegant .qd-orn-l { flex: 1; border-block-start: 0.06em solid #9c7c54; }
.qdoc--elegant .qd-kind { text-align: center; }
.qdoc--elegant .qd-kind-t { font-weight: 500; font-size: 1.6em; letter-spacing: 0.06em; color: #7a5c3e; }
.qdoc--elegant .qd-kind-n { color: #7a6a58; }
.qdoc--elegant .qd-k { color: #8a7660; }
.qdoc--elegant .qd-desc { background: #faf6ef; }
.qdoc--elegant .qd-th { border-color: #9c7c54; color: #7a5c3e; }
.qdoc--elegant .qd-tr { border-color: #ece3d5; }
.qdoc--elegant .qd-r--grand { border-color: #9c7c54; color: #5a4128; }
.qdoc--elegant .qd-fixed { border-color: #e2d4be; background: #fdfaf5; }
.qdoc--elegant .qd-watermark { color: rgba(156, 124, 84, 0.07); }

/* The page the PDF is drawn from: A4 width, off screen. */
.qdoc-print-host { position: fixed; inset-inline-start: -10000px; inset-block-start: 0; font-size: 13px; inline-size: 61em; }
.qdoc-print-host .qdoc { border-radius: 0; box-shadow: none; max-inline-size: none; }

/* The job's quote tab: "+ יצירת הצעת מחיר" and its drafts. */
.quote-make { margin-block-end: 12px; }
.quote-drafts:empty { display: none; }
.quote-drafts { margin-block-end: 14px; }
.quote-drafts__h { margin: 0 0 6px; color: var(--text-muted); font-size: 0.8125rem; font-weight: 700; }
.quote-drafts__row { inline-size: 100%; border: 0; background: var(--surface-strong); border-radius: 14px; font: inherit; color: inherit; text-align: start; cursor: pointer; margin-block-end: 6px; }

/* ---- Tax invoices + the allocation number (`tally:invoices`, `tally:allocation`, 2026-10-25) ---- */
/* On the document (printed colours, like the rest of .qdoc). */
.qd-mark { display: inline-block; margin-block-start: 0.35em; padding: 0.1em 0.7em; border: 1.5px solid currentColor; border-radius: 0.3em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; color: #1d232c; }
.qd-mark.is-copy { color: #5d6470; border-style: dashed; }
.qdoc--modern .qd-mark, .qdoc--bold .qd-mark { color: #fff; }
.qd-alloc { display: flex; align-items: baseline; gap: 0.5em; margin: 0.9em 0 0; padding: 0.55em 0.9em; border: 1.5px solid #1d232c; border-radius: 0.4em; font-size: 1.05em; inline-size: fit-content; }
.qd-alloc b { font-size: 1.15em; letter-spacing: 0.08em; }
.qd-alloc.is-missing { border-color: #b3261e; color: #b3261e; font-weight: 700; }
.qd-ref { margin: 0.6em 0 0; color: #5d6470; font-size: 0.85em; }

/* In the builder. */
.qb-tax { display: grid; gap: 12px; margin-block: 4px 12px; }
.qb-seg--kind button { font-size: 0.875rem; padding-inline: 8px; }
.qb-tax-ok { display: block; margin-block-start: 4px; color: var(--pos); font-size: 0.8125rem; font-weight: 600; min-block-size: 1em; }
.qb-tax-ok.is-bad { color: var(--neg); }
/* An empty wrap must not take a slot in the pane's 14px gap (2026-10-25, Almon:
   "no reason for ALL this space" above the allocation note). */
.qb-alloc-wrap:empty, .qb-rates-wrap:empty, .qb-biz-wrap:empty { display: none; }
.qb-alloc-wrap:has(> .qb-alloc-note) { margin-block-start: -4px; }
.qb-alloc { padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--amber) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 32%, transparent); }
.qb-alloc-h { display: flex; align-items: center; gap: 8px; color: var(--amber); }
.qb-alloc .field { margin-block-start: 10px; }
.qb-alloc-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); font-size: 0.8125rem; }
.qb-alloc-note .qb-ic { color: var(--pos); }
.qb-alloc-note svg, .qb-alloc-h svg { inline-size: 16px; block-size: 16px; }

/* An issued invoice: allocation, payment, job income. */
.qb-inv { display: grid; gap: 8px; margin-block-end: 14px; }
.qb-inv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.qb-inv-row > .qb-ic { color: var(--text-muted); }
.qb-inv-row > .qb-ic svg { inline-size: 18px; block-size: 18px; }
.qb-inv-row.is-ok > .qb-ic { color: var(--pos); }
.qb-inv-row.is-warn { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.qb-inv-row.is-warn > .qb-ic { color: var(--amber); }
.qb-inv-row.is-late > .qb-ic, .qb-inv-row.is-late strong { color: var(--neg); }
.qb-inv-tx { flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-inline-size: 0; }
.qb-inv-tx bdi { font-weight: 700; letter-spacing: 0.06em; }
.qb-inv-s { flex-basis: 100%; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.4; }
.qb-inv-s:empty { display: none; }
.qb-inv-add { display: flex; gap: 8px; flex-basis: 100%; }
.qb-inv-add .field-input { flex: 1 1 auto; min-inline-size: 0; }
.qb-made-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -6px 0 14px; color: var(--text-muted); font-size: 0.8125rem; }
.qb-made-line svg { inline-size: 15px; block-size: 15px; }
.qb-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.qb-inv-add .btn { flex: none; white-space: nowrap; }

/* `tally:invoice-setup` — the business's own dealer number, asked for at the top of an invoice. */
.qb-biz { display: flex; flex-direction: column; gap: 8px; }
.qb-biz .qb-hint { margin: 0; line-height: 1.55; }
.qb-biz .field { margin: 4px 0 0; }
.qb-biz-row { display: flex; gap: 8px; align-items: stretch; }
.qb-biz-row .field-input { flex: 1 1 0; inline-size: auto; min-inline-size: 0; font-weight: 700; letter-spacing: 0.04em; }
.qb-biz-save { flex: 0 0 auto; inline-size: auto; min-inline-size: 96px; padding-inline: 20px; }
.qb-biz-more { align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.qb-biz-ok { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--pos) 9%, transparent); color: var(--text); }

/* `tally:credit-receipt` — a receipt's payments, one block each. */
.qb-pays { display: grid; gap: 14px; margin-block-end: 12px; }
.qb-pay { display: grid; gap: 10px; padding-block-end: 12px; border-block-end: 1px solid var(--border); }
.qb-pay-n { color: var(--text-muted); font-size: 0.8125rem; }
/* `tally:doc-links` — the document picker. */
.qb-pick-list { display: grid; gap: 4px; margin-block-start: 10px; max-block-size: 60vh; overflow-y: auto; }