/* Cards register (2026-11-02, key qbCardRegister). Read-only mirror of the QuickBooks credit card registers + WatchFlow match status.
   Scoped to .qbc (the mount root: #qbc-root on #/cards-register, or the Accounting hub's "Banks & cards" tab). WatchFlow's own look:
   Absans via var(--font-body), navy #0f1822 + blue #2967b0, theme tokens for surfaces (day + night), 44px targets, >=16px inputs on phone. */
.qbc { --qbc-navy: #0f1822; --qbc-blue: #2967b0; --qbc-blue-soft: rgba(41, 103, 176, .10); --qbc-green: #1d7a52; --qbc-amber: #a5620b; --qbc-red: #b3261e; --qbc-line: var(--border, #d9dee5); --qbc-field: #eef2f7;
  font-family: var(--font-body); color: var(--white, #0f1822); position: relative; }
html[data-remodel-mode="night"] .qbc { --qbc-navy: #e8eef6; --qbc-blue: #6ea2e0; --qbc-blue-soft: rgba(110, 162, 224, .14); --qbc-green: #4fbf8a; --qbc-amber: #e0a24a; --qbc-red: #ef6b5b; --qbc-field: var(--bg-void); }
.qbc button, .qbc input, .qbc select { font-family: var(--font-body); }
.qbc .qbc-num { font-variant-numeric: tabular-nums; }

.qbc .qbc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--qbc-blue); border-radius: 999px; background: var(--qbc-blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qbc .qbc-btn-ghost { background: transparent; color: var(--qbc-blue); }
.qbc .qbc-btn[disabled] { opacity: .5; cursor: default; }
.qbc .qbc-btn:focus-visible, .qbc .qbc-row:focus-visible, .qbc .qbc-parent:focus-visible, .qbc .qbc-tr:focus-visible { outline: 2px solid var(--qbc-blue); outline-offset: 2px; }
.qbc .qbc-linkbtn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--qbc-blue); font-size: 14px; font-weight: 600; cursor: pointer; }

.qbc .qbc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.qbc .qbc-stamp { font-size: 13px; color: var(--muted); line-height: 1.5; }
.qbc .qbc-live { color: var(--qbc-blue); font-weight: 600; }
.qbc .qbc-warn-t { color: var(--qbc-amber); }
.qbc .qbc-empty { padding: 28px 18px; text-align: center; font-size: 14px; color: var(--muted); border: 1px dashed var(--qbc-line); border-radius: 14px; }

.qbc .qbc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.qbc .qbc-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--qbc-line); border-radius: 14px; background: var(--bg-raised); }
.qbc .qbc-kpi-l { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); }
.qbc .qbc-kpi strong { font-size: 24px; font-weight: 700; color: var(--qbc-navy); line-height: 1.2; }
.qbc .qbc-kpi-s { font-size: 12.5px; color: var(--muted); }

.qbc .qbc-group { margin: 0 0 16px; border: 1px solid var(--qbc-line); border-radius: 14px; background: var(--bg-raised); overflow: hidden; }
.qbc .qbc-ghead { padding: 14px 18px 10px; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); border-bottom: 1px solid var(--qbc-line); }
.qbc .qbc-parent { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--qbc-line); background: var(--qbc-blue-soft); color: inherit; text-align: left; cursor: pointer; }
.qbc .qbc-p-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qbc .qbc-p-tag { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--qbc-blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .4px; }
.qbc .qbc-p-name { font-size: 17px; font-weight: 700; color: var(--qbc-navy); overflow-wrap: anywhere; }
.qbc .qbc-p-sub { font-size: 12.5px; color: var(--muted); }
.qbc .qbc-p-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.qbc .qbc-bal { font-size: 22px; font-weight: 700; color: var(--qbc-navy); }
.qbc .qbc-chev { flex: 0 0 20px; width: 20px; height: 20px; color: var(--muted); }
.qbc .qbc-chev svg { width: 20px; height: 20px; display: block; }
.qbc .qbc-need { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(165, 98, 11, .12); color: var(--qbc-amber); font-size: 12px; font-weight: 600; white-space: nowrap; }
.qbc .qbc-need.is-warn { background: rgba(179, 38, 30, .1); color: var(--qbc-red); }

.qbc .qbc-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 18px; border: 0; border-bottom: 1px solid var(--qbc-line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.qbc .qbc-subs .qbc-row:last-child { border-bottom: 0; }
.qbc .qbc-row:hover, .qbc .qbc-parent:hover { background: var(--bg-hover); }
/* main card groups: collapsed by default, a full-width toggle with a summary line (2026-11-02) */
.qbc .qbc-gtoggle { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 16px 18px; border: 0; background: var(--bg-raised); color: inherit; text-align: left; cursor: pointer; font-family: var(--font-body); }
.qbc .qbc-gtoggle:hover { background: var(--bg-hover); }
.qbc .qbc-gtoggle:focus-visible { outline: 2px solid var(--qbc-blue); outline-offset: -2px; }
.qbc .qbc-group.is-open .qbc-gtoggle { border-bottom: 1px solid var(--qbc-line); }
.qbc .qbc-gtoggle .qbc-p-sub { font-size: 13px; color: var(--off-white); }
.qbc .qbc-gchev { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; flex: 0 0 36px; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 0;
  border: 1px solid var(--qbc-line); color: var(--qbc-blue); transition: transform .15s ease; }
.qbc .qbc-gchev svg { width: 18px; height: 18px; }
.qbc .qbc-group.is-open .qbc-gchev { transform: rotate(180deg); }
.qbc .qbc-gbody[hidden] { display: none; }
.qbc .qbc-gbody .qbc-parent { min-height: 56px; padding: 12px 18px; }
.qbc .qbc-gbody .qbc-parent .qbc-p-name { font-size: 15px; color: var(--qbc-blue); }
.qbc .qbc-row.is-sub { padding-left: 42px; position: relative; }
.qbc .qbc-row.is-sub::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 50%; width: 10px; border-left: 1.5px solid var(--qbc-line); border-bottom: 1.5px solid var(--qbc-line); border-bottom-left-radius: 6px; }
.qbc .qbc-r-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qbc .qbc-r-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.qbc .qbc-r-sub { font-size: 12.5px; color: var(--muted); }
.qbc .qbc-r-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.qbc .qbc-r-bal { font-size: 16px; font-weight: 700; }
.qbc .is-credit { color: var(--qbc-green); }

.qbc .qbc-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 2px; margin: 0 0 6px; border: 0; background: none; color: var(--qbc-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.qbc .qbc-back svg { width: 18px; height: 18px; }
.qbc .qbc-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.qbc .qbc-rtitle { margin: 0 0 2px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--qbc-navy); overflow-wrap: anywhere; }
.qbc .qbc-rsub { font-size: 13px; color: var(--off-white); margin: 0 0 2px; overflow-wrap: anywhere; }
.qbc .qbc-rhead-r { text-align: right; }
.qbc .qbc-rbal-l { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); }
.qbc .qbc-rbal { font-size: 26px; font-weight: 700; color: var(--qbc-navy); }
.qbc .qbc-tie { font-size: 12.5px; color: var(--qbc-amber); }
.qbc .qbc-tie.is-ok { color: var(--qbc-green); }
.qbc .qbc-explain { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--qbc-blue); background: var(--qbc-blue-soft); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.5; color: var(--off-white); }

.qbc .qbc-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding: 2px 0; scrollbar-width: none; }
.qbc .qbc-tabs::-webkit-scrollbar { display: none; }
.qbc .qbc-tab { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--qbc-line); border-radius: 999px; background: transparent; color: var(--off-white); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qbc .qbc-tab.is-on { border-color: var(--qbc-blue); background: var(--qbc-blue); color: #fff; }
.qbc .qbc-tab-n { font-variant-numeric: tabular-nums; opacity: .8; }

.qbc .qbc-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px; margin: 0 0 12px; border: 1px solid var(--qbc-line); border-radius: 14px; background: var(--bg-raised); }
.qbc .qbc-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); }
.qbc .qbc-f-search { flex: 1 1 260px; min-width: 0; }
.qbc .qbc-f input, .qbc .qbc-f select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--qbc-line); border-radius: 8px; background: var(--qbc-field); color: var(--white); font-size: 14px; letter-spacing: 0; text-transform: none; box-sizing: border-box; }
.qbc .qbc-f input:focus, .qbc .qbc-f select:focus { outline: none; border-color: var(--qbc-blue); box-shadow: 0 0 0 3px var(--qbc-blue-soft); }
.qbc .qbc-f select { min-width: 170px; }
.qbc .qbc-tool-btns { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.qbc .qbc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.qbc .qbc-sum strong { color: var(--white); font-weight: 600; }
.qbc .qbc-table-wrap { border: 1px solid var(--qbc-line); border-radius: 14px; overflow: auto; background: var(--bg-raised); }
.qbc .qbc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qbc .qbc-table th { position: sticky; top: 0; z-index: 1; padding: 10px 10px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); background: var(--bg-panel); border-bottom: 1px solid var(--qbc-line); white-space: nowrap; }
.qbc .qbc-table td { padding: 10px 10px; vertical-align: top; border-bottom: 1px solid var(--qbc-line); }
.qbc .qbc-table tbody tr:last-child td { border-bottom: 0; }
.qbc .qbc-tr { cursor: pointer; }
.qbc .qbc-tr:hover td { background: var(--bg-hover); }
.qbc .qbc-rt, .qbc .qbc-c-chg, .qbc .qbc-c-crd, .qbc .qbc-c-bal { text-align: right; white-space: nowrap; }
.qbc .qbc-c-date, .qbc .qbc-c-type, .qbc .qbc-c-wf { white-space: nowrap; }
.qbc .qbc-c-crd { color: var(--qbc-green); }
.qbc .qbc-c-bal { font-weight: 600; }
.qbc .qbc-num-s { display: block; font-size: 12px; color: var(--muted); }
.qbc .qbc-c-card { min-width: 100px; max-width: 170px; font-weight: 600; color: var(--qbc-navy); }
.qbc .qbc-c-name { min-width: 100px; max-width: 180px; overflow-wrap: anywhere; }
.qbc .qbc-c-memo { min-width: 160px; max-width: 260px; }
.qbc .qbc-c-type { max-width: 150px; white-space: normal !important; }
.qbc .qbc-table td.qbc-c-wf { padding-right: 16px; }
.qbc .qbc-memo { display: block; overflow-wrap: anywhere; }
.qbc .qbc-split { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.qbc .qbc-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.qbc .qbc-table .qbc-chip, .qbc .qbc-chip { display: inline-flex; align-items: center; height: auto; min-height: 0; max-height: none; padding: 3px 10px; margin: 0; border-radius: 999px; font-size: 12px; line-height: 1.35; font-weight: 600; white-space: nowrap; border: 1px solid transparent; box-sizing: border-box; vertical-align: top; }
.qbc .qbc-chip-in { background: rgba(29, 122, 82, .12); color: var(--qbc-green); }
.qbc .qbc-chip-prob { background: var(--qbc-blue-soft); color: var(--qbc-blue); }
.qbc .qbc-chip-none { background: rgba(165, 98, 11, .12); color: var(--qbc-amber); }
.qbc .qbc-chip-xfer { background: transparent; border-color: var(--qbc-line); color: var(--muted); }
.qbc .qbc-chip-ign { background: transparent; border-color: var(--qbc-line); color: var(--muted); text-decoration: line-through; }

/* the line sheet */
.qbc .qbc-sheet-ov { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 24, 34, .45); }
.qbc .qbc-sheet { width: min(560px, 100%); max-height: 88dvh; display: flex; flex-direction: column; border-radius: 16px; background: var(--bg-panel); box-shadow: 0 20px 60px rgba(15, 24, 34, .3); overflow: hidden; }
.qbc .qbc-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--qbc-line); }
.qbc .qbc-sh-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--qbc-navy); }
.qbc .qbc-x { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; flex: 0 0 36px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; padding: 0; line-height: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--qbc-line); background: transparent; color: var(--off-white); cursor: pointer; }
.qbc .qbc-x svg { width: 16px; height: 16px; }
.qbc .qbc-sh-body { padding: 16px 18px 20px; overflow: auto; }
.qbc .qbc-sh-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.qbc .qbc-sh-amt { font-size: 24px; font-weight: 700; color: var(--qbc-navy); }
.qbc .qbc-sh-meta { font-size: 13px; color: var(--off-white); }
.qbc .qbc-sh-kv { display: flex; gap: 12px; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--qbc-line); }
.qbc .qbc-sh-kv span { flex: 0 0 76px; color: var(--off-white); }
.qbc .qbc-sh-kv strong { font-weight: 500; overflow-wrap: anywhere; }
.qbc .qbc-sh-why { margin: 12px 0 0; font-size: 13.5px; color: var(--off-white); line-height: 1.5; }
.qbc .qbc-sh-rec { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--qbc-blue-soft); font-size: 13px; }
.qbc .qbc-sh-l { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); margin: 0 0 6px; }
.qbc .qbc-sh-sec { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--qbc-line); }
.qbc .qbc-sh-acts { margin: 16px 0 0; }
.qbc .qbc-sh-none { margin: 0; font-size: 13px; color: var(--muted); }
.qbc .qbc-sh-row { display: flex; gap: 10px; margin: 0 0 10px; }
.qbc .qbc-sh-row .qbc-f { flex: 1 1 0; min-width: 0; }
.qbc .qbc-sh-row .qbc-f input, .qbc .qbc-sh-row .qbc-f select { width: 100%; }
.qbc .qbc-cand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--qbc-line); font-size: 13px; }
.qbc .qbc-cand div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qbc .qbc-cand span { color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .qbc .qbc-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qbc .qbc-kpi { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 12px 14px; }
  .qbc .qbc-kpi strong { font-size: 20px; }
  .qbc .qbc-kpi-s { flex-basis: 100%; }
  .qbc .qbc-parent { position: relative; flex-wrap: wrap; padding: 14px 44px 14px 14px; gap: 8px; align-items: flex-start; }
  .qbc .qbc-parent .qbc-chev { position: absolute; top: 16px; right: 14px; }
  .qbc .qbc-p-main { flex: 1 1 100%; }
  .qbc .qbc-p-right { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-align: left; }
  .qbc .qbc-r-bal { font-size: 15px; }
  .qbc .qbc-row { position: relative; }
  .qbc .qbc-bar { margin-bottom: 12px; }
  .qbc .qbc-p-name { font-size: 16px; }
  .qbc .qbc-gtoggle { padding: 14px; gap: 10px; align-items: flex-start; flex-wrap: wrap; position: relative; padding-right: 60px; }
  .qbc .qbc-gtoggle .qbc-gchev { position: absolute; top: 14px; right: 14px; }
  .qbc .qbc-gtoggle .qbc-p-right { display: none; } /* the summary line already says N cards · balance · N need you */
  .qbc .qbc-bal { font-size: 18px; }
  .qbc .qbc-row { padding: 10px 14px; }
  .qbc .qbc-row.is-sub { padding-left: 34px; }
  .qbc .qbc-row.is-sub::before { left: 18px; }
  .qbc .qbc-f input, .qbc .qbc-f select { font-size: 16px; width: 100%; min-width: 0; }
  .qbc .qbc-tools { padding: 12px; }
  .qbc .qbc-f { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .qbc .qbc-f-search, .qbc .qbc-f:has(select) { flex-basis: 100%; }
  .qbc .qbc-tool-btns { width: 100%; margin-left: 0; }
  .qbc .qbc-tool-btns .qbc-btn { flex: 1 1 0; padding: 0 10px; }
  .qbc .qbc-rhead-r { text-align: left; }
  /* the register becomes one card per line */
  .qbc .qbc-table-wrap { border: 0; background: none; overflow: visible; }
  .qbc .qbc-table thead { display: none; }
  .qbc .qbc-table, .qbc .qbc-table tbody { display: block; }
  .qbc .qbc-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 14px; margin: 0 0 8px; border: 1px solid var(--qbc-line); border-radius: 12px; background: var(--bg-raised); }
  .qbc .qbc-table td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; background: none !important; }
  .qbc .qbc-table td:empty { display: none; }
  .qbc .qbc-c-date { grid-column: 1; grid-row: 1; font-size: 12.5px; color: var(--muted); }
  .qbc .qbc-c-type { grid-column: 1; grid-row: 2; font-weight: 600; }
  .qbc .qbc-c-card { grid-column: 1; grid-row: 3; min-width: 0; }
  .qbc .qbc-c-name { grid-column: 1; grid-row: 4; min-width: 0; }
  .qbc .qbc-c-memo { grid-column: 1 / -1; grid-row: 5; font-size: 12.5px; color: var(--off-white); }
  .qbc .qbc-c-chg, .qbc .qbc-c-crd { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 16px; font-weight: 700; }
  .qbc .qbc-c-crd:not(:empty)::before { content: '−'; }
  .qbc .qbc-c-bal { grid-column: 2; grid-row: 3; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .qbc .qbc-c-bal::before { content: 'Balance '; }
  .qbc .qbc-c-wf { grid-column: 2; grid-row: 4; justify-self: end; }
  .qbc .qbc-sheet-ov { align-items: flex-end; padding: 0; }
  .qbc .qbc-sheet { width: 100%; border-radius: 16px 16px 0 0; }
  .qbc .qbc-sh-row { flex-direction: column; gap: 8px; }
}