/* Books core (2026-10-28): QuickBooks automation + Books map (Settings → QuickBooks, Setup mode) and the monthly tie-out (QuickBooks page).
   public/js/qb-books-ui.js. New UI standard: wf-kpi-thin cards, .inv-kind-switch tabs, Invoices-style rows (.qcg-row from qb-cogs.css),
   44px targets, 24/16/12/8 spacing, theme tokens only (day + night). */

/* ── shared: the rows / pills come from qb-cogs.css; give them their tones outside #qb-cogs-wrap too ── */
#qb-tieout-wrap, .qbb-card { --qcg-amber: #b7791f; --qcg-green: #1f8a4c; --qcg-red: #c0392b; --qcg-grey: #7a8494; }
html[data-remodel-mode="night"] #qb-tieout-wrap, html[data-remodel-mode="night"] .qbb-card { --qcg-amber: #e0a33a; --qcg-green: #4cc282; --qcg-red: #ef6b5e; --qcg-grey: #9aa3b2; }

/* ── Settings: the two cards under Setup mode ── */
.qbb-card { display: flex; flex-direction: column; gap: 12px; }
.qbb-card[hidden], #qbb-auto:empty, #qbb-map:empty { display: none; }
.qbb-auto { padding: 16px 20px; border: 1px solid var(--wfs-line, var(--border)); border-radius: 14px; background: var(--bg-raised); }
.qbb-h { display: flex; flex-direction: column; gap: 4px; }
.qbb-h-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.qbb-h-row > div { min-width: 0; flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.qbb-btn { min-height: 44px; white-space: normal; }
.qbb-modes { align-self: flex-start; max-width: 100%; }
.qbb-modes .inv-kind-tab { min-height: 44px; }
.qbb-modes .inv-kind-tab[disabled] { cursor: default; }
.qbb-modes .inv-kind-tab[disabled]:not(.active) { opacity: .6; }
.qbb-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wfs-ink2, var(--off-white)); }
.qbb-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wfs-muted, var(--muted)); }
.qbb-grad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; color: var(--wfs-muted, var(--muted)); }
.qbb-grad-v { font: 700 15px/1.3 var(--font-body); color: var(--wfs-ink, var(--white)); font-variant-numeric: tabular-nums; }
.qbb-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--qcg-green) 8%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--qcg-green) 30%, transparent); }
.qbb-offer-t { flex: 1 1 220px; font-size: 13.5px; line-height: 1.45; color: var(--wfs-ink, var(--white)); }
.qbb-runs { border-top: 1px solid var(--wfs-line, var(--border)); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.qbb-run { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--wfs-ink2, var(--off-white)); }
.qbb-run-d { color: var(--wfs-muted, var(--muted)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qbb-sub { margin: 4px 0 0; font: 700 11px/1.3 var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--wfs-muted, var(--muted)); }
.qbb-tabs .inv-kind-tab { min-height: 44px; }
.qbb-map .qcg-card, #qb-tieout-wrap .qcg-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

/* the thin KPI rails (adopted by wfKpiRailScan): equal cards on a wide screen, one sliding row on a phone */
html body .wf-kpi-rail.qbb-kpis, html body .wf-kpi-rail.qbt-kpis, .qbb-kpis, .qbt-kpis { display: flex; margin: 0; }
/* the tie-out has 3 cards on a full-width page: equal cards. The Books map (4 cards in the narrower Settings column) keeps the rail's own
   card width and slides, so a $5,000,000.00 figure is never squeezed or clipped. */
@media (min-width: 601px) {
  html body .wf-kpi-rail.qbb-kpis { --wf-kpi-basis: 290px; --wf-kpi-cap: 290px; }
  /* the id outranks the rail's fit rules (FIT measured the figure's min-content too small and squeezed 4 cards into 182px) */
  /* F5 (verifier 10-28): the width follows the TEXT SIZE (em), so at 200% text a $5,487,520.31 figure still fits: equal cards, never a
     pillar, nothing clipped; at normal text it is the same 290px. The card's height is its content (no fixed height). */
  html body #qbb-map .wf-kpi-rail.qbb-kpis > .pay-kpi.qbb-k { flex: 0 0 auto !important; width: clamp(290px, 20em, 520px) !important; min-width: 290px !important; max-width: 520px !important; height: auto !important; min-height: 0 !important; }
  html body .wf-kpi-rail.qbt-kpis { --wf-kpi-cap: none; --wf-kpi-basis: 0px; }
  html body .wf-kpi-rail.qbt-kpis > .pay-kpi { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
  html body .wf-kpi-railwrap:has(> .qbt-kpis) .wf-kpi-progress { display: none; }
  html body .wf-kpi-rail.qbb-kpis .pay-kpi-footer, html body .wf-kpi-rail.qbt-kpis .pay-kpi-footer { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; display: block !important; }
}
html body .wf-kpi-rail.qbb-kpis .pay-kpi, html body .wf-kpi-rail.qbt-kpis .pay-kpi { cursor: pointer; }
html body .wf-kpi-rail.qbb-kpis .pay-kpi.is-on, html body .wf-kpi-rail.qbt-kpis .pay-kpi.is-on { border-color: var(--gold); }
html body .wf-kpi-rail.qbb-kpis .pay-kpi-value, html body .wf-kpi-rail.qbt-kpis .pay-kpi-value { line-height: 1.3 !important; overflow: visible !important; height: auto !important; }
html body .wf-kpi-rail.qbb-kpis .pay-kpi-label, html body .wf-kpi-rail.qbt-kpis .pay-kpi-label { white-space: normal !important; overflow-wrap: anywhere; overflow: visible !important; text-overflow: clip !important; }

/* ── QuickBooks page: the monthly tie-out card (same frame as the cost card above it) ── */
#qb-tieout-wrap { margin: 0 0 24px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card, var(--bg-raised)); display: flex; flex-direction: column; gap: 12px; }
#qb-tieout-wrap[hidden] { display: none !important; }
#qb-tieout-wrap .qcg-head { margin: 0; }
#qb-tieout-wrap .qcg-says { margin: 0; justify-content: space-between; }
.qbt-months { align-self: flex-start; max-width: 100%; }
.qbt-months .inv-kind-tab { min-height: 44px; }
.qbt-detail { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); }
.qbt-dh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.qbt-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.qbt-lines { display: flex; flex-direction: column; }
.qbt-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.qbt-l:first-child { border-top: 0; }
.qbt-l-t { color: var(--muted); min-width: 0; }
.qbt-l-v { color: var(--white); text-align: right; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.qbt-l-v.is-strong { font-weight: 700; }
.qbt-l-s { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.qbt-warn { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--white);
  background: color-mix(in srgb, var(--qcg-red) 8%, transparent); border: 1px solid color-mix(in srgb, var(--qcg-red) 30%, transparent); }
.qbt-list { margin-top: 0; }
#qb-tieout-wrap .qcg-pill[data-tone="grey"] { --qcg-tone: var(--qcg-grey); }

@media (max-width: 640px) {
  #qb-tieout-wrap { padding: 12px; }
  .qbb-auto { padding: 16px; }
  #qb-tieout-wrap .qcg-acts .btn { flex: 1 1 100%; }
  .qbb-modes, .qbt-months, .qbb-tabs { width: 100%; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .qbb-modes::-webkit-scrollbar, .qbt-months::-webkit-scrollbar, .qbb-tabs::-webkit-scrollbar { display: none; }
  .qbb-modes .inv-kind-tab, .qbt-months .inv-kind-tab, .qbb-tabs .inv-kind-tab { flex: 0 0 auto; white-space: nowrap; }
  .qbb-h-row .qbb-btn { flex: 1 1 100%; }
  /* the three automation choices are always all in view on a phone: they wrap instead of sliding */
  .qbb-modes { flex-wrap: wrap; overflow: visible; border-radius: 16px; }
  .qbb-modes .inv-kind-tab { flex: 1 1 auto; }
  html body .qbb-map .qcg-row, html body #qb-tieout-wrap .qcg-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  html body .qbb-map .qcg-c-amt, html body #qb-tieout-wrap .qcg-c-amt { align-items: flex-start; text-align: left; }
  /* a phone stacks each line: the label, then the figure (a $5,000,000.00 figure never runs past the card) */
  .qbt-l { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .qbt-l-v { text-align: left; align-items: flex-start; }
}