/* ═════════════════════════════════════════════════════════════════════════
   QuickBooks (2026-10-14, QuickBooks UX build, Stream D) — page, invoice panel, status badge, invoice-page
   header pill, Settings card. Everything is theme tokens (--white = ink, --muted, --border, --bg-raised …),
   so Day and Night both follow. The page rides the shared Invoices / Payment Tracker list styles
   (.wfil-pg in index.html: pills, toolbar, Filters, rows); only what those do not have lives here.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── tone colours (same values the Invoices list uses) ── */
html { --qbc-green: #1f8a4c; --qbc-amber: #b7791f; --qbc-red: #c0392b; --qbc-grey: #7a8494; --qbc-blue: #2b63c4; }
html[data-remodel-mode="night"] { --qbc-green: #4cc282; --qbc-amber: #e0a33a; --qbc-red: #ef6b5b; --qbc-grey: #9aa3b2; --qbc-blue: #82b2ff; }

/* ── the ONE status badge: wfQbBadgeHtml() — page rows, panel, invoice list, inventory rows ── */
.qb-badge { --qbt: var(--qbc-grey); display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; white-space: nowrap; border: 0;
  color: color-mix(in srgb, var(--qbt) 80%, var(--white)); background: color-mix(in srgb, var(--qbt) 13%, transparent); }
.qb-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--qbt); flex: 0 0 auto; }
.qb-badge[data-tone="green"] { --qbt: var(--qbc-green); }
.qb-badge[data-tone="amber"] { --qbt: var(--qbc-amber); }
.qb-badge[data-tone="red"] { --qbt: var(--qbc-red); }
.qb-badge-sm { font-size: 12px; padding: 2px 9px; gap: 6px; }
.qb-badge-lg { font-size: 15px; padding: 7px 16px; gap: 9px; min-height: 36px; }
.qb-badge-lg::before { width: 9px; height: 9px; }

/* ── official logo (day = black wordmark, night = white) ── */
.qb-logo { height: 46px; width: auto; display: block; }
.qb-logo-night { display: none; }
html[data-remodel-mode="night"] .qb-logo-day { display: none; }
html[data-remodel-mode="night"] .qb-logo-night { display: block; }

/* ═══ the page ═══ */
html body #page-quickbooks.wfil-pg { --wfil-ink: var(--white); --wfil-muted: var(--muted); --wfil-line: var(--border); --wfil-surface: var(--bg-raised); }
/* header (the Invoices header, which is scoped to #page-billing in index.html) */
html body #page-quickbooks .inv-header { flex-direction: row; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
html body #page-quickbooks .inv-header-left { flex: 1 1 auto; min-width: 0; }
html body #page-quickbooks .inv-header-rule { display: none; }
html body #page-quickbooks .inv-header-sub { display: block; font-size: 15px; color: var(--wfil-muted); margin-top: 6px; }
html body #page-quickbooks .qb-h1 { margin: 8px 0 0; line-height: 0; font-size: 0; }
html body #page-quickbooks .inv-header-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; align-self: flex-start; margin-top: 18px; }
html body #page-quickbooks .inv-header-actions .btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 12px; gap: 8px; flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; }
html body #page-quickbooks .inv-header-actions .btn-sm svg { width: 15px !important; height: 15px !important; margin: 0; }
html body #page-quickbooks .inv-header-actions .btn-ghost { background: var(--wfil-surface); border: 1px solid var(--wfil-line); color: var(--wfil-ink); }
html body #page-quickbooks .qb-more { width: 44px; padding: 0; justify-content: center; }
html body #page-quickbooks .qb-sendall[hidden] { display: none !important; }
html body #page-quickbooks .qb-sendall[disabled] { opacity: .5; }
.qb-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; margin-left: 2px; }
html body #page-quickbooks .wfil-popwrap { position: relative; }
html body #page-quickbooks .wfil-mi-danger { color: var(--wfil-red, var(--qbc-red)); }
html body #page-quickbooks .wfil-mi svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* one-line summary: company · pill · last sent */
html body #page-quickbooks .wfil-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -4px 0 14px; font-size: 13px; color: var(--wfil-muted); }
html body #page-quickbooks .wfil-sum[hidden] { display: none; }
html body #page-quickbooks .wfil-sum-v { font-weight: 700; color: var(--wfil-ink); font-size: 14.5px; }
.qb-conn { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--qbc-green); background: color-mix(in srgb, var(--qbc-green) 13%, transparent); }
.qb-conn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.qb-conn.is-bad { color: var(--qbc-red); background: color-mix(in srgb, var(--qbc-red) 12%, transparent); }
.qb-conn.is-off { color: var(--muted); background: var(--bg-hover); }
/* read-only lock (2026-10-27): html.wf-qb-ro hides every control that writes to QuickBooks, on every screen (read actions stay) */
html.wf-qb-ro .qb-write, html.wf-qb-ro .qb-sync-inline:empty { display: none !important; }
/* read-only lock badge (2026-10-27): calm, informational, never an alarm */
.qb-ro { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1.35;
  color: color-mix(in srgb, var(--qbc-blue) 78%, var(--white)); background: color-mix(in srgb, var(--qbc-blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--qbc-blue) 22%, transparent); }
.qb-ro strong { font-weight: 700; }
.qb-ro > svg { width: 13px; height: 13px; flex: 0 0 13px; }
@media (max-width: 600px) { html body #page-quickbooks .wfil-sum .qb-ro { flex: 1 1 100%; justify-content: flex-start; border-radius: 12px; padding: 7px 12px; font-size: 13px; } }
/* banners (reconnect / not connected) */
.qb-banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin: 0 0 16px; border-radius: 10px; font-size: 14px; line-height: 1.45; border: 1px solid color-mix(in srgb, var(--qbc-red) 35%, transparent); color: var(--qbc-red); background: color-mix(in srgb, var(--qbc-red) 9%, var(--bg-raised)); }
.qb-banner[hidden] { display: none; }
.qb-banner > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.qb-banner .qb-banner-t { flex: 1; min-width: 0; }
.qb-banner strong { color: inherit; }
.qb-banner .qb-reconnect { flex: 0 0 auto; min-height: 40px; background: var(--qbc-red); color: #fff; border: 0; border-radius: 8px; padding: 0 16px; font-weight: 600; cursor: pointer; }
.qb-banner.is-off { border-color: var(--border); color: var(--white); background: var(--bg-raised); }
.qb-banner.is-off .qb-reconnect { background: var(--gold); color: var(--on-accent); }
.qb-banner-ask { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
/* KPI row: three thin cards stretch the FULL width on a desktop (this row only; the shared rail caps a card at 320px); a phone keeps the swipe rail */
.qb-kpis { margin: 0 0 18px; }
html body #page-quickbooks .wf-kpi-rail.qb-kpis { display: flex; margin: 0 0 18px; }
@media (min-width: 601px) {
  html body #page-quickbooks .wf-kpi-rail.qb-kpis { --wf-kpi-cap: none; --wf-kpi-basis: 0px; }
  html body #page-quickbooks .wf-kpi-rail.qb-kpis > .pay-kpi { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
  html body #page-quickbooks .wf-kpi-railwrap:has(> .qb-kpis) .wf-kpi-progress { display: none; }
}
html body #page-quickbooks .qb-kpis .pay-kpi { cursor: pointer; }
html body #page-quickbooks .qb-kpis .pay-kpi:hover { border-color: var(--border-light, var(--gold-dim)); }
html body #page-quickbooks .wf-kpi-rail.qb-kpis .pay-kpi-sub { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; }
html body #page-quickbooks .wf-kpi-rail.qb-kpis .pay-kpi-footer { display: block !important; }
html body #page-quickbooks .qb-kpis .wf-kpi-ic[data-ic="watch"] svg { width: 18px; height: 18px; }
/* pills: the status dots (the shared pill row colours them by data-v) */
html body #page-quickbooks.wfil-pg .wfil-pill[data-v="needs_attention"] { background: color-mix(in srgb, var(--wfil-amber) 10%, var(--wfil-surface)); border-color: color-mix(in srgb, var(--wfil-amber) 22%, var(--wfil-line)); color: color-mix(in srgb, var(--wfil-amber) 78%, var(--wfil-ink)); }
html body #page-quickbooks.wfil-pg .wfil-pill[data-v="in_qb"] { background: color-mix(in srgb, var(--wfil-green) 9%, var(--wfil-surface)); border-color: color-mix(in srgb, var(--wfil-green) 20%, var(--wfil-line)); color: color-mix(in srgb, var(--wfil-green) 78%, var(--wfil-ink)); }
html body #page-quickbooks.wfil-pg .wfil-pill[data-v="needs_attention"].is-on, html body #page-quickbooks.wfil-pg .wfil-pill[data-v="in_qb"].is-on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
html body #page-quickbooks.wfil-pg .wfil-dot[data-v="needs_attention"] { background: var(--wfil-amber); }
html body #page-quickbooks.wfil-pg .wfil-dot[data-v="not_sent"] { background: var(--wfil-grey); }
html body #page-quickbooks.wfil-pg .wfil-dot[data-v="in_qb"] { background: var(--wfil-green); }
html body #page-quickbooks.wfil-pg .wfil-dot[data-v="month"] { display: none; }
html body #page-quickbooks.wfil-pg .wfil-pills { padding-bottom: 0; border-bottom: 0; margin-bottom: 4px; }
/* the list card (rounded container, like the Invoices list) */
html body #page-quickbooks .qb-list-card { background: var(--wfil-surface); border: 1px solid var(--wfil-line); border-radius: 16px; box-shadow: none; overflow: hidden; margin-bottom: 16px; }
html body #page-quickbooks .qb-list-card .wfil-thead[hidden] { display: none !important; }
html body #page-quickbooks .qb-empty { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
html body #page-quickbooks .qb-empty-t { font-size: 16px; font-weight: 600; color: var(--white); }
html body #page-quickbooks .qb-empty-s { font-size: 14px; color: var(--muted); max-width: 46ch; }
html body #page-quickbooks .qb-empty .btn { margin-top: 10px; }
/* 8 columns: Invoice · Customer · Watch/items · Issued · Amount · QuickBooks # · Status · ⋯ */
html body #page-quickbooks.wfil-pg .wfil-thead,
html body #page-quickbooks.wfil-pg .wfil-row { display: grid !important; grid-template-columns: 78px minmax(110px, 1.1fr) minmax(130px, 1.4fr) 104px 92px 118px minmax(210px, 1.3fr) 44px; column-gap: 12px; padding: 0 6px 0 18px; align-items: center; }
html body #page-quickbooks.wfil-pg .wfil-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; cursor: pointer; }
html body #page-quickbooks.wfil-pg .wfil-row.is-selected { background: color-mix(in srgb, var(--gold) 9%, var(--bg-raised)); }
html body #page-quickbooks.wfil-pg .wfil-c-num, html body #page-quickbooks.wfil-pg .wfil-c-date { white-space: nowrap; }
html body #page-quickbooks.wfil-pg .wfil-c-cust .wfil-meta { display: none; }
html body #page-quickbooks.wfil-pg .di-customer { font-weight: 500; color: var(--wfil-ink); overflow-wrap: anywhere; display: block; }
html body #page-quickbooks.wfil-pg .qb-c-watch { min-width: 0; color: var(--wfil-muted); overflow-wrap: anywhere; }
html body #page-quickbooks.wfil-pg .qb-more-items { display: block; font-size: 12px; opacity: .85; }
html body #page-quickbooks.wfil-pg .wfil-num { color: var(--wfil-link, var(--blue)); font-variant-numeric: tabular-nums; }
html body #page-quickbooks.wfil-pg .qb-qbn { color: var(--wfil-muted); font-variant-numeric: tabular-nums; }
.qb-c-qbn { padding-left: 14px; }
.qb-ph-only { display: none; }
.qb-dash { color: var(--muted); }
.qb-link { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); font-weight: 500; min-height: 0; cursor: pointer; }
.qb-link:hover { text-decoration: underline; }
html body #page-quickbooks.wfil-pg .wfil-c-st.qb-st { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: flex-start; justify-self: stretch; }
.qb-st-row { display: inline-flex; }
.qb-why { flex: 1 0 100%; order: 3; font-size: 12.5px; line-height: 1.35; color: var(--qbc-red); white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.qb-why-amber { color: color-mix(in srgb, var(--qbc-amber) 78%, var(--white)); }
.qb-why-muted { color: var(--wfil-muted); }
.qb-act { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.qb-act svg { width: 14px; height: 14px; }
.qb-act[disabled] { opacity: .45; pointer-events: none; }
html body #page-quickbooks.wfil-pg .wfil-thead .wfil-c-st { text-align: left; }
@media (max-width: 1100px) {
  html body #page-quickbooks.wfil-pg .wfil-thead, html body #page-quickbooks.wfil-pg .wfil-row { grid-template-columns: 72px minmax(90px, 1fr) minmax(100px, 1.2fr) 92px 80px 96px minmax(170px, 1.2fr) 40px; column-gap: 10px; padding-left: 14px; }
}
/* 10-27 (Fold 984 / tablets): eight columns needed ~810px, the card had ~680, so the QuickBooks status column (pill, Send,
   hint) was cut off at the right edge. Between phone and 1100px the watch moves under the customer and the QuickBooks #
   under it too, leaving six columns that fit. */
@media (min-width: 641px) and (max-width: 1100px) {
  html body #page-quickbooks.wfil-pg .wfil-thead, html body #page-quickbooks.wfil-pg .wfil-row { grid-template-columns: 72px minmax(120px, 1.4fr) 96px 84px minmax(170px, 1.2fr) 40px; }
  html body #page-quickbooks.wfil-pg .qb-c-watch, html body #page-quickbooks.wfil-pg .qb-c-qbn { display: none !important; }
  html body #page-quickbooks.wfil-pg .qb-ph-only.qb-watch-ph { display: block; margin-top: 2px; font-size: 13.5px; color: var(--wfil-muted); }
  html body #page-quickbooks.wfil-pg .qb-ph-only.qb-qbn-ph { display: block; margin-top: 2px; font-size: 12.5px; color: var(--wfil-muted); }
}
@media (max-width: 900px) {
  html body #page-quickbooks .inv-header-actions { margin-top: 0; }
}
@media (max-width: 640px) {
  html body #page-quickbooks .wfil-l-long { display: none; }
  html body #page-quickbooks .wfil-l-short { display: inline; }
  html body #page-quickbooks .inv-header { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0; }
  html body #page-quickbooks .inv-header-left { flex: 1 1 auto; min-width: 0; }
  html body #page-quickbooks .inv-header-eyebrow, html body #page-quickbooks .inv-header-sub { display: none; }
  html body #page-quickbooks .inv-header-actions { flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; width: auto; margin: 0; }
  html body #page-quickbooks .inv-header-actions .btn-sm { flex: 0 0 auto !important; width: auto !important; padding: 0 16px; }
  html body #page-quickbooks .inv-header-actions .qb-more { width: 44px !important; padding: 0; }
  html body #page-quickbooks .qb-logo { height: 30px; max-width: none; }
  html body #page-quickbooks .wfil-sum { margin: 2px 0 12px; gap: 6px 10px; }
  html body #page-quickbooks .wfil-sum .wfil-sum-l { display: none; }
  html body #page-quickbooks .wfil-sum-sub { display: none; }
  html body #page-quickbooks .qb-list-card { border-radius: 14px; margin: 0 -2px 16px; }
  html body #page-quickbooks .qb-list-card .wfil-thead, html body #page-quickbooks .qb-list-card [hidden].wfil-thead { display: none !important; }
  /* Phone card (Hal 10-27, "huge empty left area"): customer + watch + number/date stacked on the left with the amount
     beside the name; the status pill, the action button and its hint get their OWN full-width row, left-aligned, so
     nothing is crammed into a narrow right column. */
  html body #page-quickbooks.wfil-pg .wfil-row { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "cust amt menu" "st st st" !important; column-gap: 12px; row-gap: 12px; padding: 16px 4px 16px 16px; min-height: 84px; align-items: start; }
  html body #page-quickbooks.wfil-pg .wfil-c-cust { align-self: start; }
  html body #page-quickbooks.wfil-pg .wfil-c-amt { align-self: start; font-size: 18px; font-weight: 700; line-height: 24px; font-variant-numeric: tabular-nums; text-align: right; }
  html body #page-quickbooks.wfil-pg .wfil-c-menu { align-self: start; margin-top: -10px; }
  html body #page-quickbooks.wfil-pg .wfil-c-cust .wfil-meta { gap: 4px 6px; }
  .qb-ph-only { display: inline; }
  html body #page-quickbooks.wfil-pg .wfil-c-cust .wfil-meta { display: flex; }
  .qb-ph-only.qb-qbn-ph { flex: 1 0 100%; display: block; }
  .qb-watch-ph { display: block !important; margin-top: 2px; font-size: 14px; color: var(--wfil-ink); }
  html body #page-quickbooks.wfil-pg .qb-c-watch, html body #page-quickbooks.wfil-pg .qb-c-qbn { display: none !important; }
  html body #page-quickbooks.wfil-pg .wfil-c-st.qb-st { grid-area: st; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; justify-self: stretch; align-self: start; gap: 8px 12px; max-width: none; padding-right: 12px; }
  .qb-why { flex: 1 0 100%; max-width: none; text-align: left; order: 3; font-size: 13px; line-height: 1.4; }
  .qb-act { min-height: 44px; padding: 0 16px; font-size: 14.5px; min-width: 96px; justify-content: center; }
  .qb-banner { flex-wrap: wrap; }
  .qb-banner .qb-reconnect { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 600; }
}

/* ═══ the invoice panel: the shared .modal-overlay/.modal shell, wide + centered on a desktop, a stacked sheet on a phone ═══ */
.modal-overlay.qbd-ov { z-index: 100060; padding: 12px 20px; }
.modal.qbd { width: 1160px; max-width: 100%; max-height: min(calc(100vh - 24px), 890px); padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; }
.modal.qbd.qbd-single { width: 640px; }
html body .qbd { --qbd-ink: var(--white); }
.qbd .qbd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px 10px; border-bottom: 1px solid var(--border-light, var(--border)); flex: 0 0 auto; }
.qbd .qbd-head .modal-title { margin: 0; }
.qbd-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.qbd .modal-title { font-size: 24px; line-height: 1.15; }
.qbd-head-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.qbd-head-t .qbd-eyebrow { margin: 0; }
.qbd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 28px 10px; max-height: none !important; }
.qbd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; }
.modal.qbd-single .qbd-cols { grid-template-columns: minmax(0, 1fr); }
.qbd-main { min-width: 0; }
.qbd-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
.qbd-diff-host:not(:empty) { flex: 0 0 auto; }
.qbd-diff-host .qbd-sec { margin: 0; }
.qbd-pdf-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.qbd-pdf-host > .qbd-pdfwrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.qbd-pdf-host > .qbd-pdfwrap > .qbd-pdf { flex: 1 1 auto; height: auto; min-height: 300px; }
.qbd-hist-host .qbd-sec { margin: 0; }
.qbd-side[hidden] { display: none; }
.qbd-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
.qbd-amt { font-size: 32px; font-weight: 600; letter-spacing: -.01em; color: var(--white); font-variant-numeric: tabular-nums; line-height: 1; }
.qbd-top { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.qbd-k { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.qbd-v { font-size: 14.5px; font-weight: 600; color: var(--white); overflow-wrap: anywhere; line-height: 1.3; }
.qbd-f { min-width: 0; }
.qbd-sec { margin: 0 0 14px; }
.qbd-sec-t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.qbd-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); }
.qbd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 12px 16px; margin-bottom: 10px; }
.qbd-skel .qbd-v { background: var(--bg-hover); border-radius: 4px; min-height: 18px; animation: qbdPulse 1.2s ease-in-out infinite; }
.qbd-skel-cmp { height: 150px; animation: qbdPulse 1.2s ease-in-out infinite; }
@keyframes qbdPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .qbd-skel .qbd-v, .qbd-skel-cmp { animation: none; } }
.qbd-pdfwrap { margin: 0; }
.qbd-pdf { position: relative; height: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); padding: 14px 14px 0; }
.qbd-pdfwrap.is-open .qbd-pdf { height: 640px; }
.qbd-side .qbd-pdf-fade, .qbd-side .qbd-pdf-cap .qbd-link { display: none; }
.qbd-pdf-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12); }
.qbd-pdf-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--bg-base) 85%); pointer-events: none; }
.qbd-pdfwrap.is-open .qbd-pdf-fade { display: none; }
.qbd-pdf-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.qbd-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; min-height: 32px; text-decoration: none; }
a.qbd-link:hover, .qbd-link:hover { text-decoration: underline; }
.qbd-pdf-row { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base); color: var(--white); font: inherit; font-size: 14px; cursor: pointer; }
.qbd-pdf-act { color: var(--blue); font-weight: 600; }
.qbd-note { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--border); background: var(--bg-base); color: var(--off-white); margin: 0 0 10px; }
.qbd-note.is-amber { border-color: color-mix(in srgb, var(--qbc-amber) 38%, transparent); background: color-mix(in srgb, var(--qbc-amber) 10%, var(--bg-raised)); color: var(--white); }
.qbd-note.is-red { border-color: color-mix(in srgb, var(--qbc-red) 32%, transparent); background: color-mix(in srgb, var(--qbc-red) 8%, var(--bg-raised)); color: var(--white); }
.qbd-note strong { font-weight: 700; }
/* credit send job note (Waiting for QuickBooks / Credit being applied / Credit applied) */
.qbd-docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.qbd-doc { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-raised); font-size: 13px; }
.qbd-doc-l { color: var(--muted); font-weight: 600; }
.qbd-doc-n { color: var(--white); font-variant-numeric: tabular-nums; font-weight: 700; }
.qbd-job .qbd-help { text-align: left; margin: 4px 0 0; }
.qbd-empty { border: 1px dashed var(--border-light, var(--border)); border-radius: 12px; padding: 18px 16px; text-align: center; margin: 0 0 12px; background: var(--bg-base); }
.qbd-empty-t { font-size: 15px; font-weight: 600; color: var(--white); }
.qbd-empty-s { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.qbd-error { border: 1px solid color-mix(in srgb, var(--qbc-red) 32%, transparent); background: color-mix(in srgb, var(--qbc-red) 7%, var(--bg-raised)); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.qbd-error-t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--white); }
.qbd-error-t svg { width: 17px; height: 17px; color: var(--qbc-red); flex: 0 0 17px; }
.qbd-error-s { font-size: 13.5px; color: var(--off-white); margin: 4px 0 0 25px; }
.qbd-error-a { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0 25px; }
.qbd-error-a .btn { min-height: 40px; }
/* compare table */
.qbd-cmp { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-base); font-size: 13.5px; }
.qbd-cmp-h, .qbd-cmp-r { display: grid; grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.qbd-cmp-h { background: var(--bg-hover); font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.qbd-cmp-h span, .qbd-cmp-r span { padding: 6px 10px; min-width: 0; overflow-wrap: anywhere; }
.qbd-cmp-r { border-top: 1px solid var(--border); color: var(--white); }
.qbd-cmp-k { color: var(--muted); }
.qbd-cmp-r:not(.is-diff) .qbd-cmp-a, .qbd-cmp-r:not(.is-diff) .qbd-cmp-b { color: var(--off-white); }
.qbd-cmp-r.is-diff .qbd-cmp-a, .qbd-cmp-r.is-diff .qbd-cmp-b { background: color-mix(in srgb, var(--qbc-amber) 14%, transparent); font-weight: 600; }
.qbd-cmp-r.is-diff .qbd-cmp-b { box-shadow: inset 3px 0 0 var(--qbc-amber); }
.qbd-cmp-b em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--qbc-amber) 75%, var(--white)); margin-top: 2px; }
.qbd-ln { display: block; padding: 0 !important; }
.qbd-ln + .qbd-ln { margin-top: 3px; }
/* history timeline */
.qbd-tl { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.qbd-tl::before { content: ""; position: absolute; left: 8.5px; top: 8px; bottom: 12px; width: 2px; background: var(--border); }
.qbd-tl-i { position: relative; padding: 0 0 14px 26px; display: block; }
.qbd-tl-i:last-child { padding-bottom: 0; }
.qbd-tl-dot { position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--bg-raised); }
.qbd-tl-i.is-green .qbd-tl-dot { background: var(--qbc-green); }
.qbd-tl-i.is-amber .qbd-tl-dot { background: var(--qbc-amber); }
.qbd-tl-i.is-red .qbd-tl-dot { background: var(--qbc-red); }
.qbd-tl-t { font-size: 14px; color: var(--white); line-height: 1.35; }
/* footer */
.modal-footer.qbd-foot { margin: 0; flex: 0 0 auto; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px; padding: 12px 28px 14px; border-top: 1px solid var(--border-light, var(--border)); background: var(--bg-panel); }
/* desktop: one row, primary action rightmost; the help line sits on the left */
.qbd-foot .qbd-foot-h, .qbd-foot .qbd-foot-2 { display: contents; }
.qbd-foot .qbd-help { order: 99; flex: 1 1 260px; text-align: left; margin-right: auto; max-width: 440px; }
.qbd-foot .qbd-link-ext { order: 50; }
.qbd-btn { width: auto; justify-content: center; min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; text-decoration: none; box-sizing: border-box; }
.qbd-btn svg { width: 16px; height: 16px; }
.qbd-btn span { display: inline-flex; align-items: center; gap: 7px; }
.qbd-btn[disabled] { opacity: .45; pointer-events: none; }
.qbd-foot-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qbd-foot-2:has(> :only-child) { grid-template-columns: 1fr; }
.qbd-foot-2 .qbd-btn { font-size: 14px; padding: 0 8px; }
.qbd-foot-h { display: flex; flex-direction: column; gap: 7px; }
.qbd-help { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.qbd-help-warn { display: flex; gap: 7px; align-items: flex-start; justify-content: center; color: var(--off-white); text-align: left; }
.qbd-help-warn svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--qbc-amber); }
.qbd-a { color: var(--blue); font-weight: 600; text-decoration: none; }
.qbd-link-ext { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; font-size: 14.5px; }
.qbd-link-ext svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .modal-overlay.qbd-ov { align-items: flex-end; padding: 0; }
  .modal.qbd, .modal.qbd.qbd-single { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; margin: 0; }
  .qbd .qbd-head { padding: 2px 18px 10px; }
  .qbd-scroll { padding: 14px 18px 150px; }
  .qbd-cols { display: flex; flex-direction: column; gap: 0; }
  .qbd-main, .qbd-side { display: contents; }
  .qbd-main > * { order: 3; width: 100%; box-sizing: border-box; }
  .qbd-cols { align-items: stretch; }
  .qbd-side > * { width: 100%; box-sizing: border-box; }
  .qbd-main > .qbd-hero, .qbd-main > .qbd-top { order: 1; }
  .qbd-diff-host { order: 2; } .qbd-pdf-host { order: 4; } .qbd-hist-host { order: 5; }
  .qbd-side > div:not(:empty) { margin-bottom: 16px; }
  .qbd-side .qbd-pdf-cap .qbd-link { display: inline; }
  .qbd-side .qbd-pdf-fade { display: block; }
  .qbd-side .qbd-pdfwrap.is-open .qbd-pdf-fade { display: none; }
  .modal-footer.qbd-foot { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
  .qbd-foot .qbd-foot-h { display: flex; flex-direction: column; gap: 7px; }
  .qbd-foot .qbd-foot-2 { display: grid; }
  .qbd-foot .qbd-help { order: 0; max-width: none; text-align: center; margin: 0; flex: none; }
  .qbd-foot .qbd-link-ext { order: 0; }
  .qbd-btn { width: 100%; min-height: 44px; }
  .qbd-foot .qbd-help { font-size: 12px; line-height: 1.35; }
  .qbd-hero { margin-bottom: 12px; }
  .qbd-amt { font-size: 28px; }
  .qbd-top { grid-template-columns: 1fr 1fr; gap: 12px; }
  .qbd-top .qbd-f:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .qbd-pdf { height: 240px; }
  .qbd-pdfwrap.is-open .qbd-pdf { height: 520px; }
  .qbd-cmp-h, .qbd-cmp-r { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); }
  .qbd-cmp-h span, .qbd-cmp-r span { padding: 9px 8px; font-size: 13px; }
  .deal-drawer-footer.qbd-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
  .qbd-btn { min-height: 48px; }
  .qbd-foot-2 .qbd-btn { font-size: 13px; padding: 0 4px; }
}

/* ═══ the invoice page header: pill / button / line ═══ */
.qb-slot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.qb-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; white-space: nowrap; font-family: inherit; }
button.qb-pill { cursor: pointer; }
.qb-pill-ok { color: var(--qbc-green); background: color-mix(in srgb, var(--qbc-green) 13%, transparent); }
.qb-pill-ok:hover { background: color-mix(in srgb, var(--qbc-green) 20%, transparent); }
.qb-pill-new { color: var(--muted); background: var(--bg-hover); border-color: var(--border); }
.qb-pill-fail { color: var(--qbc-red); background: color-mix(in srgb, var(--qbc-red) 14%, transparent); border-color: color-mix(in srgb, var(--qbc-red) 40%, transparent); }
.qb-pill-chg { color: color-mix(in srgb, var(--qbc-amber) 72%, var(--white)); background: color-mix(in srgb, var(--qbc-amber) 16%, transparent); }
.qb-hbtn-wrap { display: contents; }
/* the header action: compact, inline next to the pill; RED for Review / Pull */
.qb-hbtn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; position: relative; border: 1px solid var(--border); background: var(--bg-raised); color: var(--off-white); }
.qb-hbtn-pill::after { content: ''; position: absolute; inset: -6px -2px; } /* 44px tap area without a taller pill */
.qb-hbtn-pill.qb-hbtn-red { background: var(--qbc-red); border-color: var(--qbc-red); color: #fff; }
.qb-hbtn-pill.qb-hbtn-red:hover { filter: brightness(.93); }
html[data-remodel-mode="night"] .qb-hbtn-pill.qb-hbtn-red { color: #1b0b08; }
.qb-pill-fail { font-weight: 700; }
.qb-hbtn[disabled] { opacity: .45; pointer-events: none; }
.qb-hbtn svg { width: 15px; height: 15px; }
.qb-line-host { margin: 0; }
.qb-why-line { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--qbc-red) 8%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--qbc-red) 30%, transparent); display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--qbc-red); }
.qb-why-line svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.qb-why-line.is-amber { background: color-mix(in srgb, var(--qbc-amber) 10%, var(--bg-raised)); border-color: color-mix(in srgb, var(--qbc-amber) 38%, transparent); color: color-mix(in srgb, var(--qbc-amber) 70%, var(--white)); }
.qb-why-line.is-muted { background: var(--bg-raised); border-color: var(--border); color: var(--off-white); }
.qb-why-line a { color: var(--blue); font-weight: 600; }
@media (max-width: 640px) {
  .qb-pill { min-height: 30px; }
  .qb-hbtn-pill { min-height: 32px; padding: 0 12px; }
  #invoice-detail-overlay.wfid .wfid-head .wfid-titlebox { grid-column: 2 / -1; padding-right: 40px; }
  #invoice-detail-overlay.wfid .wfid-pills { flex-wrap: wrap; gap: 6px; }
  .qb-slot { flex-wrap: wrap; gap: 6px; } /* a long label (Changed in QuickBooks) pushes the button to a second line instead of off the screen */
  #invoice-detail-overlay.wfid .wfid-pills .wfid-status { padding: 3px 4px; }
  #invoice-detail-overlay.wfid .wfid-pills .qb-pill { padding: 0 9px; font-size: 12.5px; }
}

/* ═══ Settings → Connections: the QuickBooks card ═══ */
#page-settings .qb-conn-wrap { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 14px 0; }
#page-settings .qb-conn-wrap[hidden] { display: none; }
#qb-conn-card { padding: 0; }
.qbs-top { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.qbs-logo { display: block; line-height: 0; }
.qbs-logo img { height: 40px; width: auto; display: block; }
.qbs-tag { font-size: 14px; color: var(--muted); }
.qbs-err { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--red, #b42318); border-radius: 10px; background: color-mix(in srgb, var(--red, #b42318) 8%, transparent); color: var(--red, #b42318); font-size: 14px; line-height: 1.4; }
#qb-conn-card .qb-conn-item { grid-template-columns: minmax(0, 1fr) auto; }
.qb-set-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-explain, .qb-ask { color: var(--off-white) !important; max-width: 46ch; }
.qb-ask { color: var(--white) !important; font-weight: 500; }
.qb-connect { white-space: nowrap; }
#qb-conn-card .wfs-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 768px) {
  #qb-conn-card .qb-conn-item { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px !important; }
  #qb-conn-card .wfs-conn-actions { width: 100%; }
  #qb-conn-card .wfs-conn-actions .btn { width: 100%; min-height: 46px; }
}
.qbs-logo img.qb-logo-night { display: none; }
html[data-remodel-mode="night"] .qbs-logo img.qb-logo-day { display: none; }
html[data-remodel-mode="night"] .qbs-logo img.qb-logo-night { display: block; }

/* ── QB-match (2026-10-15): payments list, compare block, settings pickers ── */
.qbd-note.is-green { border-color: color-mix(in srgb, var(--qbc-green) 32%, transparent); background: color-mix(in srgb, var(--qbc-green) 8%, var(--bg-raised)); color: var(--white); }
.qbd-pays { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qbd-pay { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); min-height: 44px; }
.qbd-pay-a { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--white); }
.qbd-pay-m { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbd-pay-r { grid-column: 1 / -1; font-size: 12.5px; color: var(--qbc-amber); }
.qbd-pay .qb-badge[data-tone="grey"] { --qbt: var(--qbc-grey); }
.qbd-cmp-act { margin: 10px 0 8px; }
.qbs-extra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.qbs-extra-h { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--white); }
.qbs-extra-s { font-size: 13px; color: var(--muted); }
.qbs-f { display: flex; flex-direction: column; gap: 6px; }
.qbs-f-l { font-size: 13px; font-weight: 600; color: var(--white); }
.qbs-f-h { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.qbs-make { align-self: flex-start; }
.qbs-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); cursor: pointer; min-height: 44px; }
.qbs-switch-i { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gold, #c9a96e); cursor: pointer; }
.qbs-switch-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qbs-sel { min-height: 44px; width: 100%; max-width: 420px; }
@media (max-width: 640px) { .qbd-pay { grid-template-columns: 1fr auto; } .qbd-pay-m { grid-column: 1 / -1; grid-row: 2; } .qbs-sel { max-width: none; } }

/* ── invoice modal layout (2026-10-16): compact payments, inline compare, tidy close ── */
.qbd-x svg { width: 12px; height: 12px; }
.qbd-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.qbd-pay { grid-template-columns: 1fr auto; grid-template-areas: "a b" "m m" "r r"; padding: 8px 12px; gap: 2px 8px; min-height: 0; }
.qbd-pay-a { grid-area: a; } .qbd-pay-m { grid-area: m; } .qbd-pay-r { grid-area: r; }
.qbd-pay > .qb-badge { grid-area: b; }
.qbd-pay-note { margin-bottom: 8px; }
.qbd-sec .qbd-help { text-align: left; }
.qbd-cmp-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; }
.qbd-cmp-act .qbd-btn { min-height: 38px; font-size: 14px; }
.qbd-cmp-act .qbd-help { flex: 1 1 160px; }
.qbd-foot .qbd-help { flex-basis: 100%; max-width: none; }
.qbd-tl-i { padding-bottom: 7px; }
@media (max-width: 640px) {
  .qbd-pays { grid-template-columns: 1fr; }
  .qbd-side { gap: 12px; margin-top: 8px; }
  .qbd-pdf-host > .qbd-pdfwrap > .qbd-pdf { flex: none; height: 240px; }
  .qbd-pdf-host > .qbd-pdfwrap.is-open > .qbd-pdf { height: 520px; }
}

.qbd-sec-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.qbd-sec-row .qbd-sec-t { margin: 0; }
.qbd-sec-tt { min-width: 0; }
.qbd-sec-hint { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.qbd-sec-aside { font-size: 13px; font-weight: 600; color: var(--off-white); white-space: nowrap; }
.qbd-sec-row .qbd-btn { min-height: 36px; font-size: 13.5px; padding: 0 14px; width: auto; flex: 0 0 auto; }
.qbd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
@media (max-width: 640px) { .qbd-facts { grid-template-columns: 1fr 1fr; } .qbd-sec-row { flex-wrap: wrap; } .qbd-sec-row .qbd-btn { width: 100%; } }
.qbd-sec-pay .qbd-sec-hint { margin: -2px 0 8px; }
.qbd-side:has(.qbd-diff-host:not(:empty)) .qbd-pdf-host > .qbd-pdfwrap > .qbd-pdf { min-height: 70px; }
@media (max-width: 640px) { .qbd-side:has(.qbd-diff-host:not(:empty)) .qbd-pdf-host > .qbd-pdfwrap > .qbd-pdf { min-height: 0; } }
@media (min-width: 641px) {
  .qbd-side .qbd-pdf-frame { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 14px); }
  .qbd-side .qbd-pdf { min-height: 300px; }
  .qbd-side:has(.qbd-diff-host:not(:empty)) .qbd-pdf-host > .qbd-pdfwrap > .qbd-pdf { min-height: 70px; }
}

/* ── "Updated, needs sync with QuickBooks" (Ana 2026-10-19): QuickBooks page + Invoices page list, watch card button ── */
.qb-sync-card { margin: 0 0 16px; border: 1px solid color-mix(in srgb, var(--qbc-amber) 38%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--qbc-amber) 7%, var(--bg-raised)); padding: 12px 14px; font-family: var(--font-body); }
.qb-sync-h { display: flex; gap: 10px; align-items: flex-start; color: color-mix(in srgb, var(--qbc-amber) 72%, var(--white)); }
.qb-sync-h > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.qb-sync-ht { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.4; }
.qb-sync-ht strong { color: var(--white); font-weight: 600; }
.qb-sync-ht span { color: var(--off-white); font-size: 13px; }
.qb-sync-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.qb-sync-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-void); border: 1px solid var(--border); min-width: 0; }
.qb-sync-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--white); font: inherit; }
.qb-sync-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.qb-sync-cust { color: var(--off-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.qb-sync-what { color: color-mix(in srgb, var(--qbc-amber) 72%, var(--white)); font-size: 13px; }
.qb-sync-more { font-size: 13px; color: var(--off-white); padding: 2px 10px; }
.qb-sync-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.qb-sync-btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
.qb-sync-inline { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.qb-sync-inline .qb-sync-sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 640px) {
  .qb-sync-row { flex-wrap: wrap; }
  .qb-sync-row .qb-sync-btn { width: 100%; justify-content: center; min-height: 40px; }
  .qb-sync-cust { max-width: 100%; }
  .qb-sync-inline { display: flex; margin: 8px 0 0; }
  .qb-sync-inline .qb-sync-sm { width: 100%; justify-content: center; min-height: 36px; }
}

/* ── Track B (2026-10-20): the one status + actions layer on deal cards, payment rows and the tile menus ── */
.wf-deal-qb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; vertical-align: middle; }
.wf-deal-qb .qb-sync-inline { display: inline-flex; }
.dml-meta-right .wf-deal-qb { margin-right: 6px; }
.pt-c-status .wf-deal-qb { display: flex; margin-top: 4px; }
.dd-crosslink-qb { display: inline-flex; align-items: center; margin-left: 8px; }
.am-qb-line { margin-top: 0; }
.am-tile[data-qb-act].am-tile-locked { opacity: 0.55; }
.qb-act[disabled] { cursor: not-allowed; }
@media (max-width: 640px) {
  .wf-deal-qb .qb-act { min-height: 44px; }
}
/* QuickBooks button directly under Share (desktop invoice detail) */

/* Review before update (2026-10-20): what Update QuickBooks overwrites, what stays, the choice when both sides changed */
.qbd-cmp-n { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.qbd-cmp-n.is-qb { color: color-mix(in srgb, var(--qbc-amber) 75%, var(--white)); }
.qbd-review { border: 1px solid color-mix(in srgb, var(--qbc-amber) 38%, transparent); background: color-mix(in srgb, var(--qbc-amber) 8%, var(--bg-raised)); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--white); transition: box-shadow .3s; }
.qbd-review.is-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qbc-amber) 55%, transparent); }
.qbd-review-h { font-weight: 700; margin-bottom: 8px; }
.qbd-review-t { margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.qbd-review-l, .qbd-review-s { list-style: none; margin: 0; padding: 0; }
.qbd-review-l li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.qbd-review-l li:first-child { border-top: 0; }
.qbd-review-k { color: var(--muted); }
.qbd-review-v { min-width: 0; overflow-wrap: anywhere; }
.qbd-review-v s { opacity: .7; }
.qbd-review-s li { padding: 2px 0 2px 14px; position: relative; color: var(--off-white); }
.qbd-review-s li::before { content: ''; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--qbc-green); }
.qbd-review-p { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.qbd-review-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.qbd-review-a .qbd-btn { min-height: 44px; width: 100%; justify-content: center; white-space: nowrap; padding-inline: 10px; }
.qbd-review > .qbd-help, .qbd-price > .qbd-help { text-align: left; margin-top: 10px; }
.qbd-review .qbd-help { text-align: left; margin-top: 8px; }
@media (max-width: 640px) { .qbd-review-a { grid-template-columns: minmax(0, 1fr); } .qbd-review-l li { grid-template-columns: 82px minmax(0, 1fr); } }

/* tile menus: tiles keep one size so a lone Void / Archive tile does not stretch across the row */
.am-tilegrid-fit .am-tile { flex: 0 0 calc(20% - 8px); min-width: 0; }
@media (max-width: 640px) { .am-tilegrid-fit .am-tile { flex: 0 0 calc(33.333% - 7px); } }

/* Use QuickBooks price (2026-10-21): the preview card inside the review block */
.qbd-price { margin: 12px 0 0; padding-top: 4px; border-top: 1px solid var(--border); }
.qbd-price .qbd-help { margin-top: 8px; }
.qbd-price.is-no .qbd-price-n { color: var(--off-white); }
.qbd-price-ask { margin: 10px 0 8px; padding: 8px 10px; border-radius: 10px; font-weight: 700; background: color-mix(in srgb, var(--qbc-amber) 16%, transparent); }

/* ═══ New-UI action sheet (invoice row menu, payment / QuickBooks row menus): wfKebabSheetShow() ═══ */
html { --wfk-blue: #2b63c4; --wfk-violet: #7c4dce; --wfk-teal: #0e8a84; --wfk-amber: #b7791f; --wfk-indigo: #4f56d6; --wfk-rose: #c2407a; --wfk-slate: #5d6879; --wfk-red: #c0392b; --wfk-qb: #1f8a4c; }
html[data-remodel-mode="night"] { --wfk-blue: #82b2ff; --wfk-violet: #b79bff; --wfk-teal: #52d1c8; --wfk-amber: #e0a33a; --wfk-indigo: #9ea4ff; --wfk-rose: #ff8fbd; --wfk-slate: #a3acbb; --wfk-red: #ef6b5b; --wfk-qb: #4cc282; }
#action-modal-overlay.am-wfk .action-modal { width: 460px; max-width: 94vw; border-radius: 20px; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); box-shadow: 0 24px 70px rgba(0,0,0,.32); animation: amPopIn .2s cubic-bezier(.16,1,.3,1); }
#action-modal-overlay.am-wfk .am-close-x { top: 14px; right: 14px; z-index: 2; }
.wfk-head { display: flex; align-items: center; gap: 14px; padding: 20px 56px 16px 20px; border-bottom: 1px solid var(--border); background: transparent; }
.wfk-head-ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--wfk-blue); background: color-mix(in srgb, var(--wfk-blue) 13%, var(--bg-void)); border: 1px solid color-mix(in srgb, var(--wfk-blue) 25%, transparent); }
.wfk-head-ic svg { width: 24px; height: 24px; }
.wfk-head-t { min-width: 0; flex: 1 1 auto; }
.wfk-num { font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfk-cust { margin-top: 3px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfk-amt { flex: 0 0 auto; font-size: 17px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.wfk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 16px 16px 14px; }
.wfk-tile { --a: var(--wfk-slate); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 92px; padding: 14px 8px; border-radius: 16px; background: var(--bg-void); border: 1px solid var(--border); color: var(--off-white); font: 600 13.5px/1.2 var(--font-body); text-align: center; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.wfk-tile:hover { background: var(--bg-hover); border-color: color-mix(in srgb, var(--a) 55%, var(--border)); }
.wfk-tile:active { transform: translateY(1px); }
.wfk-tile:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.wfk-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--a) 28%, transparent); }
.wfk-ic svg { width: 20px; height: 20px; }
.wfk-lb { overflow-wrap: anywhere; }
.wfk-a-blue { --a: var(--wfk-blue); } .wfk-a-violet { --a: var(--wfk-violet); } .wfk-a-teal { --a: var(--wfk-teal); } .wfk-a-amber { --a: var(--wfk-amber); }
.wfk-a-indigo { --a: var(--wfk-indigo); } .wfk-a-rose { --a: var(--wfk-rose); } .wfk-a-slate { --a: var(--wfk-slate); }
.wfk-a-red { --a: var(--wfk-red); color: var(--wfk-red); }
.wfk-a-qb { --a: var(--wfk-qb); background: color-mix(in srgb, var(--wfk-qb) 9%, var(--bg-void)); border-color: color-mix(in srgb, var(--wfk-qb) 38%, var(--border)); }
.wfk-tile.is-locked { opacity: .5; }
.wfk-qbline { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--wfk-qb) 8%, var(--bg-void)); border: 1px solid color-mix(in srgb, var(--wfk-qb) 26%, var(--border)); font-size: 13px; color: var(--off-white); }
.wfk-qbchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--wfk-qb); color: #fff; font-size: 12px; font-weight: 700; }
html[data-remodel-mode="night"] .wfk-qbchip { color: #06210f; }
.wfk-qbchip svg { width: 18px; height: 18px; color: rgba(255,255,255,.28); }
html[data-remodel-mode="night"] .wfk-qbchip svg { color: rgba(0,0,0,.2); }
.wfk-qbtxt { min-width: 0; overflow-wrap: anywhere; }
.am-tile.am-tile-qb { color: var(--wfk-qb); border-color: color-mix(in srgb, var(--wfk-qb) 40%, var(--border)); background: color-mix(in srgb, var(--wfk-qb) 8%, var(--bg-void)); }
.am-tile.am-tile-qb .am-tile-ic { color: var(--wfk-qb); background: color-mix(in srgb, var(--wfk-qb) 12%, transparent); border-color: color-mix(in srgb, var(--wfk-qb) 32%, transparent); }
@media (max-width: 768px) {
  #action-modal-overlay.am-wfk { align-items: flex-end; }
  #action-modal-overlay.am-wfk .action-modal { width: 100vw; max-width: 100vw; margin: 0; border-radius: 22px 22px 0 0 !important; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0); max-height: 88vh; animation: amSheetSlideIn .28s cubic-bezier(.16,1,.3,1); }
  #action-modal-overlay.am-wfk .action-modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border); margin: 8px auto 0; }
  .wfk-head { padding: 12px 52px 14px 16px; }
  .wfk-grid { padding: 14px 14px 12px; gap: 8px; }
  .wfk-tile { min-height: 88px; padding: 12px 6px; font-size: 13px; }
  .wfk-qbline { margin: 0 14px 16px; }
}

/* deal cards: the QuickBooks badge never competes with the buyer / stage / ⋮ line. Phone: its own small line under it. */
.deals-mobile-row .dml-qb { grid-column: 2 / -1; grid-row: 3; min-width: 0; }
.deals-mobile-row .dml-qb .wf-deal-qb { display: flex; }
.deals-mobile-row .dml-qb .qb-badge { max-width: 100%; }
.deals-mobile-row .dml-qb .qb-badge-l { overflow: hidden; text-overflow: ellipsis; }
/* board cards (desktop): badge on its line, the action button right under it, no side-by-side squeeze */
.pipeline-card .pipeline-card-status-row .wf-deal-qb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; }
.pipeline-card .wf-deal-qb .qb-sync-inline { margin-left: 0; }
.pipeline-card .wf-deal-qb .qb-badge { max-width: 100%; }
.pipeline-card .wf-deal-qb .qb-sync-sm { min-height: 28px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
/* Review / Pull buttons on cards and lists: RED outline, like the invoice header's Review */
.qb-act.qb-act-attn { color: var(--qbc-red); border-color: color-mix(in srgb, var(--qbc-red) 55%, var(--border)); background: color-mix(in srgb, var(--qbc-red) 8%, transparent); font-weight: 700; }
.qb-act.qb-act-attn:hover { background: color-mix(in srgb, var(--qbc-red) 16%, transparent); }

/* deal page: ONE grid for the Invoices rows and the Payment history rows (class wfdr), so they read as siblings.
   Left: amount, then ONE meta line on one baseline. Right: the buttons, same height / padding / gap, centred on the card.
   Desktop: only the QuickBooks action keeps its word, the rest are 32px icon buttons (title + aria-label carry the name). Phone: buttons on their own row, with words, 44px. */
.wfdr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions"; align-items: center; column-gap: 12px; row-gap: 10px; padding: 12px 14px; min-height: 66px; box-sizing: border-box; }
.dd-mount .dd-dc-pay .wfdr { padding: 12px 14px; }
.wfdr .deal-payment-row-main { grid-area: main; min-width: 0; display: block; }
.wfdr .deal-payment-row-amount { font-size: 14px; line-height: 20px; white-space: nowrap; }
.wfdr .deal-payment-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 4px 0 0; min-height: 20px; line-height: 20px; font-size: 11.5px; }
.wfdr .deal-payment-row-meta > * { line-height: 20px; }
.wfdr .deal-payment-row-meta .invoice-status-badge, .wfdr .deal-payment-row-meta .wfqb-hit { display: inline-flex; align-items: center; margin: 0; }
.wfdr .deal-payment-row-meta .qb-badge { padding: 1px 9px; font-size: 11.5px; line-height: 18px; }
.wfdr .deal-payment-invoice-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.wfdr .deal-payment-row-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; margin: 0; }
.wfdr .deal-payment-row-actions .qb-sync-inline { margin: 0; display: inline-flex; }
.wfdr .deal-payment-row-actions .btn-xs { height: 32px; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; box-sizing: border-box; }
@media (min-width: 769px) {
  .wfdr .deal-payment-row-actions .btn-xs:not(.qb-act):not(.wfdr-keep) { width: 32px; padding: 0; }
  .wfdr .deal-payment-row-actions .btn-xs:not(.qb-act):not(.wfdr-keep) .wfdr-lb { display: none; }
}
@media (max-width: 768px) {
  .wfdr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions"; padding: 12px 14px; }
  .wfdr .deal-payment-row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .wfdr .deal-payment-row-actions .btn-xs { height: 44px; min-height: 44px; padding: 0 14px; font-size: 12.5px; }
}
/* the two section headers (Invoices / Payment history) share one height and alignment */
.deal-payment-history-header { min-height: 36px; box-sizing: border-box; align-items: center; padding-top: 14px; }
.deal-payment-history-header .deal-payment-history-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 8px; box-sizing: border-box; }
.deal-payment-history-header .wf-void-toggle { min-height: 28px; }
.deal-payment-history-list { gap: 8px; margin-top: 10px; }
#action-modal-overlay.am-wfk .action-modal, #action-modal-overlay.am-wfk .wfk-head, #action-modal-overlay.am-wfk .action-modal-body, #action-modal-overlay.am-wfk .wfk-grid { background: var(--bg-raised) !important; }
#action-modal-overlay.am-wfk .action-modal-body { padding: 0 0 2px !important; }

/* "From QuickBooks" mark (2026-10-21): the same green as the QuickBooks tile, on every note, activity row and payment row a pull wrote */
.qb-from { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap; color: var(--qbc-green); background: color-mix(in srgb, var(--qbc-green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--qbc-green) 40%, transparent); }
.qb-from::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--qbc-green); }
.note-item--qb { border-left-color: var(--qbc-green) !important; }

/* WHY it needs review: red, like the pill and the Review button. Light + dark readable. */
.qb-why-line.is-red { background: color-mix(in srgb, var(--qbc-red) 9%, var(--bg-raised)); border-color: color-mix(in srgb, var(--qbc-red) 45%, transparent); color: color-mix(in srgb, var(--qbc-red) 82%, var(--white)); font-weight: 600; }
.qb-why-line.is-red svg { color: var(--qbc-red); }
html[data-remodel-mode="night"] .qb-why-line.is-red { color: color-mix(in srgb, var(--qbc-red) 55%, #fff); }
.deal-payment-history-header { justify-content: flex-start; gap: 8px; }
.deal-payment-history-header > :last-child:not(:first-child):not(.deal-payment-history-count) { margin-left: auto; }

@media (min-width: 769px) { .wfdr { min-height: 80px; } }
@media (max-width: 768px) { .wfdr .deal-payment-row-actions .btn-xs { padding: 0 12px; } }
.wfdr .deal-payment-row-meta .invoice-status-badge { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; line-height: 20px; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
@media (max-width: 768px) { .wfdr .deal-payment-row-meta { gap: 4px 10px; } .wfdr .deal-payment-row-meta .dot { display: none; } }

/* Invoice detail toolbar: QuickBooks actions are real wfid-btn buttons next to Record payment (Hal 2026-10-22). */
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-btn { gap: 8px; }
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-btn[disabled] { opacity: .5; pointer-events: none; }
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-red,
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-red:hover { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 700; } /* white on #c0392b = 5.4:1 in day AND night */
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-red:hover { filter: brightness(.93); }
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-red[disabled] { opacity: .6; }
#invoice-detail-overlay.wfid .wfid-actions .qb-tb-logo { display: block; height: 18px; width: auto; flex: 0 0 auto; }
@media (max-width: 700px) {
  #invoice-detail-overlay.wfid .wfid-actions .qb-tb-btn { grid-column: span 2; align-self: stretch; }
  #invoice-detail-overlay.wfid .wfid-actions:has(.qb-tb-btn) .wfid-act-deal { grid-column: span 4; } /* no orphan half-row */
  #invoice-detail-overlay.wfid .wfid-actions .qb-tb-logo { height: 20px; }
}

/* Connection history + "Connected by" (Hal 10-27, decision B). 24/12/16/8 rhythm; rows align on one grid. */
.qbs-by { display: block; margin-top: 4px; }
.qbs-log { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border, rgba(0,0,0,.08)); }
.qbs-log-h { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #6b7280); margin-bottom: 8px; }
.qbs-log-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; min-height: 32px; font-size: 14px; }
.qbs-log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted, #9ca3af); }
.qbs-log-dot.is-on { background: var(--green, #1f8f4e); }
.qbs-log-t { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary, inherit); }
.qbs-log-d { color: var(--text-muted, #6b7280); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 10-27: on a phone the invoice page's QuickBooks button sat alone in half a row under the four action tiles; it takes the
   full row like "Open deal" below it, label centred. */
@media (max-width: 640px) {
  #invoice-detail-overlay.wfid .wfid-actions > .qb-tb-btn[data-qb-hdr] { grid-column: 1 / -1 !important; width: 100% !important; justify-content: center; }
}