/* QuickBooks payments review screen (2026-10-20, Job 9). Theme tokens only; fonts via var(--font-body). */
#page-qb-payments .qpp { font-family: var(--font-body); }
#page-qb-payments .qpp-run { min-height: 40px; }
#page-qb-payments .qpp-look-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
#page-qb-payments .qpp-look-l { font-size: 13px; color: var(--muted); margin-right: 2px; }
#page-qb-payments .qpp-look { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--white); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
#page-qb-payments .qpp-look.is-on { background: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); color: var(--on-accent); font-weight: 600; }
#page-qb-payments .qpp-look:focus-visible, #page-qb-payments .qpp-res:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#page-qb-payments .qpp-banner { padding: 12px 14px; margin: 0 0 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; border: 1px solid; }
#page-qb-payments .qpp-banner.is-err { color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--bg-raised)); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
#page-qb-payments .qpp-kpis { margin: 0 0 16px; }
#page-qb-payments .qpp-kpis .pay-kpi { cursor: pointer; }
#page-qb-payments .qpp-kpis .pay-kpi-value, #page-qb-payments .qpp-kpis .pay-kpi-sub { overflow-wrap: anywhere; }
#page-qb-payments .qpp-k-last .pay-kpi-value { font-size: 20px; }
#page-qb-payments .qpp-tabs { margin: 0 0 12px; }
#page-qb-payments .qpp-tabs .inv-kind-tab { min-height: 40px; }
#page-qb-payments .qpp-list { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#page-qb-payments .qpp-head, #page-qb-payments .qpp-row { display: grid; grid-template-columns: 130px 120px minmax(0, 1fr) 190px auto; gap: 14px; align-items: start; padding: 14px 16px; }
#page-qb-payments .qpp-head { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); border-bottom: 1px solid var(--border); padding-top: 11px; padding-bottom: 11px; }
#page-qb-payments .qpp-row { border-bottom: 1px solid var(--border); font-size: 14px; }
#page-qb-payments .qpp-row:last-child { border-bottom: 0; }
#page-qb-payments .qpp-date { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }
#page-qb-payments .qpp-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
#page-qb-payments .qpp-c-amt { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-qb-payments .qpp-c-sale { min-width: 0; }
#page-qb-payments .qpp-sale-l { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
#page-qb-payments .qpp-sale { overflow-wrap: anywhere; margin-bottom: 2px; }
#page-qb-payments .qpp-sale-n { color: var(--white); font-weight: 600; }
#page-qb-payments .qpp-sale-c { color: var(--white); }
#page-qb-payments .qpp-sale-m { color: var(--muted); font-size: 13px; white-space: nowrap; }
#page-qb-payments .qpp-why { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.4; }
#page-qb-payments .qpp-c-st { padding-top: 1px; }
#page-qb-payments .qb-badge[data-tone="grey"] { --qbt: var(--qbc-grey); }
#page-qb-payments .qpp-c-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
#page-qb-payments .qpp-c-act .btn { min-height: 36px; }
#page-qb-payments .qpp-empty { padding: 28px 18px; color: var(--muted); font-size: 14px; }
#page-qb-payments .qpp-pick { grid-column: 1 / -1; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-void, var(--bg-hover)); }
#page-qb-payments .qpp-pick-l { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
#page-qb-payments .qpp-pick .search-input { width: 100%; min-height: 44px; }
#page-qb-payments .qpp-results { margin-top: 8px; display: grid; gap: 6px; }
#page-qb-payments .qpp-res { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); color: var(--white); font: inherit; font-size: 14px; cursor: pointer; }
#page-qb-payments .qpp-res:hover { background: var(--bg-hover); }
#page-qb-payments .qpp-res-go { color: var(--blue); font-weight: 600; font-size: 13px; white-space: nowrap; }
@media (max-width: 860px) {
  #page-qb-payments .qpp-head { display: none; }
  #page-qb-payments .qpp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when amt" "sale sale" "st st" "act act"; gap: 8px 12px; padding: 14px 16px; }
  #page-qb-payments .qpp-c-when { grid-area: when; }
  #page-qb-payments .qpp-c-amt { grid-area: amt; text-align: right; font-size: 16px; }
  #page-qb-payments .qpp-c-sale { grid-area: sale; }
  #page-qb-payments .qpp-c-st { grid-area: st; }
  #page-qb-payments .qpp-c-act { grid-area: act; justify-content: flex-start; }
  #page-qb-payments .qpp-c-act .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  #page-qb-payments .qpp-run { width: 100%; min-height: 44px; justify-content: center; }
  #page-qb-payments .inv-header-actions { width: 100%; }
  #page-qb-payments .qpp-look { min-height: 44px; flex: 1 1 auto; }
  #page-qb-payments .qpp-tabs { width: 100%; }
  #page-qb-payments .qpp-tabs .inv-kind-tab { min-height: 44px; flex: 0 0 auto; }
}

/* KPI row: same treatment as the QuickBooks page (full-width thin cards on a desktop, swipe rail on a phone) */
html body #page-qb-payments .wf-kpi-rail.qpp-kpis { display: flex; margin: 0 0 18px; }
@media (min-width: 601px) {
  html body #page-qb-payments .wf-kpi-rail.qpp-kpis { --wf-kpi-cap: none; --wf-kpi-basis: 0px; }
  html body #page-qb-payments .wf-kpi-rail.qpp-kpis > .pay-kpi { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
  html body #page-qb-payments .wf-kpi-railwrap:has(> .qpp-kpis) .wf-kpi-progress { display: none; }
}
html body #page-qb-payments .wf-kpi-rail.qpp-kpis .pay-kpi-sub { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; }
html body #page-qb-payments .wf-kpi-rail.qpp-kpis .pay-kpi-footer { display: block !important; }

/* status pills: the Invoices pill look, tinted by what the pill means */
html body #page-qb-payments.wfil-pg .wfil-pill[data-v="unsure_match"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="ambiguous"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="no_match"],
html body #page-qb-payments.wfil-pg .wfil-pill[data-v="closed_books"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="already_logged"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="over_balance"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="other"] { 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) 70%, var(--wfil-ink)); }
html body #page-qb-payments.wfil-pg .wfil-pill[data-v="link"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="historical"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="manual"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="linked"] { 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) 70%, var(--wfil-ink)); }
html body #page-qb-payments.wfil-pg .wfil-pill[data-v="voided"], html body #page-qb-payments.wfil-pg .wfil-pill[data-v="deleted"] { background: color-mix(in srgb, var(--wfil-red) 8%, var(--wfil-surface)); border-color: color-mix(in srgb, var(--wfil-red) 20%, var(--wfil-line)); color: color-mix(in srgb, var(--wfil-red) 70%, var(--wfil-ink)); }
html body #page-qb-payments.wfil-pg .wfil-pill.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
html body #page-qb-payments.wfil-pg .wfil-dot[data-v="unsure_match"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="ambiguous"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="no_match"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="closed_books"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="already_logged"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="over_balance"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="other"] { background: var(--wfil-amber); }
html body #page-qb-payments.wfil-pg .wfil-dot[data-v="link"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="historical"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="manual"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="linked"] { background: var(--wfil-green); }
html body #page-qb-payments.wfil-pg .wfil-dot[data-v="voided"], html body #page-qb-payments.wfil-pg .wfil-dot[data-v="deleted"] { background: var(--wfil-red); }
#page-qb-payments .qpp-list { margin-top: 4px; }