/* Match my QuickBooks history (QuickBooks page, 2026-10-29). New UI standard: .inv-kind-switch tabs, wf-kpi-thin cards, Invoices-style rows.
   Scoped to #qbh-view and the .qbh-chip / .qbh-noteline link chips. Theme tokens only (day + night). */
#qbh-view, .qbh-chip, .qbh-noteline { --qbh-amber: #b7791f; --qbh-green: #1f8a4c; --qbh-grey: #7a8494; }
html[data-remodel-mode="night"] #qbh-view, html[data-remodel-mode="night"] .qbh-chip, html[data-remodel-mode="night"] .qbh-noteline { --qbh-amber: #e0a33a; --qbh-green: #4cc282; --qbh-grey: #9aa3b2; }
#qbh-view[hidden], #qbh-open-btn[hidden], .qbh-slot[hidden], .qbh-slot-note[hidden] { display: none !important; }
#page-quickbooks.qbh-on > .page-content > :not(#qbh-view) { display: none !important; }
#qbh-view { display: block; }
#qbh-view.is-busy { opacity: .6; pointer-events: none; }

.qbh-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin: 0 0 16px; }
.qbh-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised); color: var(--white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.qbh-back svg { width: 18px; height: 18px; }
.qbh-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.qbh-title { margin: 2px 0 0; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--white); }
.qbh-sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.qbh-lead { margin: 0 0 18px; max-width: 74ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.qbh-acts { display: flex; gap: 10px; align-items: center; }
.qbh-acts .btn { min-height: 44px; }
.qbh-acts .btn[disabled] { opacity: .5; }

.qbh-kpis { margin: 0 0 18px; }
html body #qbh-view .wf-kpi-rail.qbh-kpis { display: flex; margin: 0 0 18px; }
@media (min-width: 601px) {
  html body #qbh-view .wf-kpi-rail.qbh-kpis { --wf-kpi-cap: none; --wf-kpi-basis: 0px; }
  html body #qbh-view .wf-kpi-rail.qbh-kpis > .pay-kpi { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
  html body #qbh-view .wf-kpi-railwrap:has(> .qbh-kpis) .wf-kpi-progress { display: none; }
}
html body #qbh-view .qbh-kpis .pay-kpi { cursor: pointer; }
html body #qbh-view .qbh-kpis .pay-kpi.is-on { border-color: var(--gold); }
html body #qbh-view .wf-kpi-rail.qbh-kpis .pay-kpi-sub, html body #qbh-view .wf-kpi-rail.qbh-kpis .pay-kpi-footer { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; display: block !important; }

.qbh-tabs { margin: 0 0 14px; }
.qbh-tabs .inv-kind-tab { min-height: 44px; }
.qbh-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.qbh-search { flex: 1 1 280px; min-width: 0; max-width: 520px; position: relative; }
.qbh-search .search-input { width: 100%; min-height: 44px; }
.qbh-bulk { display: flex; gap: 10px; flex-wrap: wrap; }
.qbh-bulk .btn { min-height: 44px; display: inline-flex; align-items: center; }

.qbh-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 0 0 16px; }
.qbh-row { padding: 16px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.qbh-row:first-child { border-top: 0; }
.qbh-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.qbh-blk { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-base, transparent); }
.qbh-blk-empty { justify-content: center; }
.qbh-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
/* the four corners: number top-left, customer top-right, date bottom-left, total bottom-right. Same grid in BOTH blocks. */
.qbh-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tl tr" "bl br"; gap: 6px 12px; }
.qbh-q-tl { grid-area: tl; font-size: 15px; font-weight: 700; color: var(--white); overflow-wrap: anywhere; }
.qbh-q-tr { grid-area: tr; text-align: right; font-size: 14px; font-weight: 500; color: var(--white); overflow-wrap: anywhere; }
.qbh-q-bl { grid-area: bl; font-size: 13px; color: var(--muted); }
.qbh-q-br { grid-area: br; text-align: right; font-size: 15px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.qbh-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 -10px; font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; }
.qbh-open svg, .qbh-chip svg { width: 13px; height: 13px; }
.qbh-open:hover, .qbh-chip:hover { text-decoration: underline; }
.qbh-dash { color: var(--muted); font-size: 14px; }

.qbh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qbh-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.qbh-ck { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.qbh-ck.is-yes { color: var(--qbh-green); background: color-mix(in srgb, var(--qbh-green) 13%, transparent); }
.qbh-ck.is-no { color: var(--qbh-amber); background: color-mix(in srgb, var(--qbh-amber) 14%, transparent); }
.qbh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qbh-hint { font-size: 12.5px; color: var(--muted); }
.qbh-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--qbh-green); background: color-mix(in srgb, var(--qbh-green) 13%, transparent); }
.qbh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--qbh-green); }
.qbh-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qbh-btns.qbh-end { justify-content: flex-start; }
.qbh-act, .qbh-num { min-height: 44px; padding: 0 16px; white-space: nowrap; }
.qbh-num { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.qbh-reason { font-size: 14px; font-weight: 600; color: var(--qbh-amber); }
.qbh-cands { display: flex; flex-direction: column; gap: 12px; }
.qbh-cand { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.qbh-cand:first-child { border-top: 0; padding-top: 0; }
.qbh-why { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--white); }
.qbh-row-rev > .qbh-blk { max-width: 520px; }

.qbh-empty { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qbh-empty-t { font-size: 16px; font-weight: 600; color: var(--white); }
.qbh-empty-s { font-size: 14px; color: var(--muted); max-width: 46ch; }
.qbh-moreb { display: flex; justify-content: center; }
.qbh-moreb:not(:empty) { padding: 14px; border-top: 1px solid var(--border); }
.qbh-moreb .btn { min-height: 44px; }

/* the "QuickBooks #… ↗" chip on invoice / deal / watch, and its one-line version in a notes card */
.qbh-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--qbh-green); background: color-mix(in srgb, var(--qbh-green) 12%, transparent); text-decoration: none; white-space: nowrap; }
.qbh-more { margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.qbh-slot { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qbh-slot-note { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.qbh-noteline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.qbh-noteline-t { font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  .qbh-pair { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .qbh-head { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
  .qbh-back { grid-column: 1; justify-self: start; }
  .qbh-titles { grid-column: 1 / -1; grid-row: 2; }
  .qbh-acts { grid-column: 2; grid-row: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .qbh-title { font-size: 20px; line-height: 26px; }
  /* the five tabs are ONE row that slides sideways (the standard .inv-kind-switch pattern), never stacked */
  .qbh-tabs { width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; gap: 4px; padding: 4px; border-radius: 999px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .qbh-tabs::-webkit-scrollbar { display: none; }
  .qbh-tabs .inv-kind-tab { flex: 0 0 auto; padding: 10px 16px; white-space: nowrap; scroll-snap-align: center; }
  .qbh-tools { flex-direction: column; align-items: stretch; }
  .qbh-search { max-width: none; flex-basis: auto; }
  .qbh-bulk .btn { flex: 1 1 auto; justify-content: center; }
  .qbh-card { border-radius: 14px; }
  .qbh-row { padding: 14px 16px; }
  .qbh-foot { flex-direction: column; align-items: stretch; }
  .qbh-btns { justify-content: stretch; }
  .qbh-btns .btn { flex: 1 1 auto; }
  .qbh-row-rev > .qbh-blk { max-width: none; }
}

#inv-detail-qbhist-note { padding: 12px 16px 0; margin: 0; }
#inv-detail-qbhist-note .qbh-noteline { padding: 0 0 4px; }

/* a chip from a previously connected QuickBooks company: no link, quietly marked */
.qbh-chip.is-old { color: var(--muted); background: color-mix(in srgb, var(--qbh-grey) 14%, transparent); cursor: default; }
.qbh-chip.is-old:hover { text-decoration: none; }
/* touch: the chip is a real 44px tap target (the pill itself stays 28px tall to look right; the hit area grows around it) */
@media (pointer: coarse), (max-width: 900px) {
  a.qbh-chip { position: relative; min-height: 44px; padding: 0 14px; }
  .qbh-slot, .qbh-noteline { min-height: 44px; }
  .qbh-act, .qbh-num { min-height: 44px; }
}

/* How your books look (2026-10-30): a plain-words card between the lead and the KPI cards. */
.qbh-conv { margin: 0 0 18px; padding: 16px 18px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; }
.qbh-conv-t { margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--white); }
.qbh-conv-s { margin: 0; max-width: 74ch; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.qbh-conv-l { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.qbh-conv-l li { font-size: 13.5px; line-height: 1.5; color: var(--white); overflow-wrap: anywhere; }
.qbh-conv-l li b { color: var(--gold); font-weight: 700; }
@media (min-width: 900px) { .qbh-conv-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; } }

/* the "some deals were kept" notice after an undo (titanium surface, amber status accent; never gold) */
.qbh-warn { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px; background: color-mix(in srgb, var(--qbh-amber) 10%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--qbh-amber) 45%, var(--border)); border-left: 4px solid var(--qbh-amber); border-radius: 16px; }
.qbh-warn[hidden] { display: none; }
.qbh-warn-b { flex: 1; min-width: 0; }
.qbh-warn-t { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--white); }
.qbh-warn-s { margin: 4px 0 0; max-width: 74ch; font-size: 13.5px; line-height: 1.5; color: var(--white); overflow-wrap: anywhere; }
.qbh-warn-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qbh-warn-a { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; }
.qbh-warn-x { flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -8px 0 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.qbh-warn-x svg { width: 16px; height: 16px; }