/* Books check (Accounting → Bookkeeping, 2026-11-02). public/js/books-check-ui.js, utils/booksCheck.js.
   Same look as the Accounting hub (public/css/accounting-hub.css): thin KPI tiles, cards with one big number, compact rows, a centered popup.
   App font (Absans via var(--font-body)), theme tokens only, 44px targets, icon-only buttons are circles. Inert unless #page-bookkeeping.bkc-on. */

/* while the Books check view is showing, the manual worklist sits behind "All lines" */
#page-bookkeeping.bkc-on:not(.bkc-all) :is(#bk-view-switch, #bk-kpis, #bk-alert, #bk-duo, #bk-work, #bk-bills, #bk-window, .bk-head-acts) { display: none !important; }
#page-bookkeeping .bkc[hidden] { display: none !important; }
#page-bookkeeping .bkc, #page-bookkeeping .bkc button, .bkc-pop, .bkc-pop button { font-family: var(--font-body); }
#page-bookkeeping.bkc-on .bk-head { margin-bottom: 10px; }

.bkc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.bkc-sw { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--muted) 11%, transparent); }
.bkc-sw-b { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--off-white); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.bkc-sw-b.active { background: var(--bg-raised); color: var(--white); box-shadow: 0 1px 2px rgba(15, 24, 34, .08), 0 2px 8px rgba(15, 24, 34, .06); }
.bkc-sw-b:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 1px; }
#page-bookkeeping.bkc-all .bkc-body, #page-bookkeeping.bkc-all .bkc-stamp { display: none; }
.bkc-stamp { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bkc-stamp > span { display: inline-flex; align-items: center; gap: 6px; }
.bkc-stamp svg { width: 16px; height: 16px; color: var(--wfs-in, var(--green)); }

.bkc-icon-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; aspect-ratio: 1 / 1;
  box-sizing: border-box; padding: 0; line-height: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-raised); color: var(--off-white); cursor: pointer; }
.bkc-icon-btn:hover { color: var(--white); border-color: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--border)); }
.bkc-icon-btn svg { width: 16px; height: 16px; }
.bkc-icon-btn:disabled { opacity: .5; cursor: default; }

/* KPI tiles: Home's thin tile, the hub's sizing */
.bkc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.bkc-kpis > .pay-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; min-height: 0; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--border-light, var(--border)); box-shadow: 0 1px 2px rgba(15, 24, 34, .04); transition: border-color .15s, box-shadow .15s; }
.bkc-kpis > .pay-kpi::after { content: none; }
.bkc-kpis > .pay-kpi:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 40%, var(--border)); }
.bkc-kpis > .pay-kpi.is-active { border-color: var(--accent, var(--gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent); }
.bkc-kpis > .pay-kpi:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
.bkc-kpis .wf-kpi-body, .bkc-kpis .pay-kpi-footer { min-width: 0; max-width: 100%; }
.bkc-kpis .pay-kpi-value { font-family: var(--font-body); font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkc-kpis .pay-kpi-label { font-size: 10.5px; line-height: 16px; letter-spacing: 1.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkc-kpis .pay-kpi-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkc-kpis .is-ok .pay-kpi-value { color: var(--wfs-in, var(--green)); }
.bkc-kpis .is-alert .pay-kpi-value { color: var(--accent, var(--gold)); }

.bkc-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.bkc-sec-h:empty { display: none; }
.bkc-sec-t { margin: 0; font-size: 15px; font-weight: 700; color: var(--white); }
.bkc-sec-n { font-size: 13px; color: var(--muted); }

/* reason cards */
.bkc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 22px; }
.bkc-g { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; border: 1px solid var(--border-light, var(--border)); border-radius: 16px; background: var(--bg-raised); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 24, 34, .04), 0 6px 18px rgba(15, 24, 34, .05); transition: border-color .15s, box-shadow .15s; }
.bkc-g:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 40%, var(--border)); }
.bkc-g.is-active { border-color: var(--accent, var(--gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent); }
.bkc-g:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 2px; }
.bkc-g-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.bkc-g-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--accent, var(--gold)) 12%, transparent); color: var(--accent, var(--gold)); }
.bkc-g.is-part .bkc-g-ic { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.bkc-g-ic svg { width: 18px; height: 18px; }
.bkc-g-tag { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.bkc-g-n { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.bkc-g-l { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--off-white); line-height: 1.35; }
.bkc-g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bkc-g-chips span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 11%, transparent); font-size: 11.5px; font-weight: 600; color: var(--off-white); white-space: nowrap; }

/* one card's lines */
.bkc-list { margin: 0 0 24px; border: 1px solid var(--border-light, var(--border)); border-radius: 16px; background: var(--bg-raised); overflow: hidden; }
.bkc-list[hidden] { display: none; }
.bkc-list-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border-light, var(--border)); }
.bkc-list-t { font-size: 15px; font-weight: 700; color: var(--white); }
.bkc-list-n { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bkc-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 18px; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); cursor: pointer; }
.bkc-r:last-child { border-bottom: 0; }
.bkc-r:hover { background: var(--bg-hover); }
.bkc-r:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: -2px; }
.bkc-r-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--off-white); }
.bkc-r-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg-raised); }
.bkc-r-ic svg { width: 18px; height: 18px; }
.bkc-r-main { min-width: 0; }
.bkc-r-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bkc-r-title { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkc-r-kind { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.bkc-r-s { font-size: 12.5px; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bkc-r-side { text-align: right; }
.bkc-r-amt { font-size: 13.5px; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bkc-r-d { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bkc-r-go { display: flex; color: var(--muted); }
.bkc-r-go svg { width: 16px; height: 16px; }
.bkc-more { display: block; width: calc(100% - 32px); margin: 8px 16px 14px; }

.bkc-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.bkc-pill.is-ok { background: color-mix(in srgb, var(--wfs-in, var(--green)) 14%, transparent); color: var(--wfs-in, var(--green)); }
.bkc-pill.is-alert { background: color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent); color: var(--accent, var(--gold)); }
.bkc-pill.is-part { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue); }
.bkc-pill.is-person { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--off-white); }

.bkc-empty, .bkc-loading { padding: 22px 16px; text-align: center; font-size: 14px; color: var(--muted); }
.bkc-kpis > .bkc-loading, .bkc-kpis > .bkc-empty { grid-column: 1 / -1; }
.bkc-empty-ok { display: flex; align-items: center; justify-content: center; gap: 8px; grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 16px; }
.bkc-empty-ok svg { width: 18px; height: 18px; color: var(--wfs-in, var(--green)); }

/* the line popup: centered on desktop and phone */
#bkc-pop-ov { align-items: center !important; justify-content: center !important; padding: 16px; box-sizing: border-box; z-index: 1300; }
.bkc-pop { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(86dvh, 760px); border-radius: 18px; background: var(--bg-panel, var(--bg-raised)); border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 24, 34, .28); overflow: hidden; touch-action: pan-y; }
.bkc-pop-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.bkc-pop-hl { min-width: 0; }
.bkc-pop-eb { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--off-white); }
.bkc-pop-t { margin: 4px 0 0; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--white); }
.bkc-pop-s { margin-top: 3px; font-size: 13px; color: var(--off-white); }
.bkc-pop-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 14px; overscroll-behavior: contain; }
.bkc-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.bkc-pop-amt { font-size: 18px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.bkc-miss { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent, var(--gold)) 10%, transparent); }
.bkc-miss.is-part { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.bkc-miss.is-ok { background: color-mix(in srgb, var(--wfs-in, var(--green)) 10%, transparent); }
.bkc-miss.is-person { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.bkc-miss-t { font-size: 14px; font-weight: 700; color: var(--white); }
.bkc-miss-d { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--off-white); }
.bkc-pop-sec { margin: 4px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--off-white); }
.bkc-evs, .bkc-hist { list-style: none; margin: 0 0 14px; padding: 0; }
.bkc-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--border-light, var(--border)); border-radius: 12px; background: var(--bg-raised); }
.bkc-ev-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--wfs-in, var(--green)) 12%, transparent); color: var(--wfs-in, var(--green)); }
.bkc-ev.is-part .bkc-ev-ic { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.bkc-ev-ic svg { width: 17px; height: 17px; }
.bkc-ev-main { min-width: 0; }
.bkc-ev-t { font-size: 13.5px; font-weight: 600; color: var(--white); }
.bkc-ev-t em { font-style: normal; font-weight: 600; color: var(--blue); }
.bkc-ev-d { font-size: 12px; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.bkc-ev-m { font-size: 12.5px; color: var(--off-white); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bkc-none { margin: 0 0 14px; font-size: 13px; color: var(--off-white); }
.bkc-rule { margin: -4px 0 14px; font-size: 12px; color: var(--muted); }
.bkc-hist li { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 12.5px; color: var(--off-white); }
.bkc-hist li:last-child { border-bottom: 0; }
.bkc-hist b { color: var(--white); font-weight: 600; }
.bkc-hist span { margin-left: auto; color: var(--muted); white-space: nowrap; }
.bkc-pop-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border-light, var(--border)); }
.bkc-pop-f .btn { min-height: 40px; }

@media (max-width: 1100px) { .bkc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bkc-bar { margin-bottom: 14px; }
  .bkc-sw { width: 100%; }
  .bkc-sw-b { flex: 1 1 0; }
  .bkc-kpis { gap: 10px; margin-bottom: 20px; }
  .bkc-kpis > .pay-kpi { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .bkc-kpis > .pay-kpi > .wf-kpi-ic { display: none; }
  .bkc-kpis .pay-kpi-value { font-size: 19px; line-height: 24px; }
  .bkc-kpis .pay-kpi-label { white-space: normal; line-height: 14px; letter-spacing: 1px; }
  .bkc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bkc-g { padding: 13px 14px; border-radius: 14px; }
  .bkc-g-n { font-size: 24px; }
  .bkc-g-l { font-size: 12.5px; }
  .bkc-g-chips { display: none; }
  .bkc-r { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; }
  .bkc-r-ic { width: 36px; height: 36px; }
  .bkc-r-st, .bkc-r-go { display: none; }
  .bkc-r-kind { display: none; }
  #bkc-pop-ov { padding: 12px; }
  .bkc-pop { max-height: 88dvh; border-radius: 16px; }
  .bkc-pop-h { padding: 16px 16px 10px; }
  .bkc-pop-b { padding: 0 16px 12px; }
  .bkc-pop-f { padding: 10px 16px 14px; }
  .bkc-pop-f .btn { flex: 1 1 auto; }
  .bkc-ev { grid-template-columns: 30px minmax(0, 1fr); }
  .bkc-ev-m { grid-column: 2; text-align: left; }
}
/* a bank / card evidence line opens the line popup (window.wfLinePopup) when that build is live */
.bkc-ev.is-link { cursor: pointer; }
.bkc-ev.is-link:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--border)); }
.bkc-ev.is-link:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 1px; }