/* Bookkeeping -> Bills to enter (Hal 10-27, decision A). public/js/qb-bills-ui.js paints it.
   The Invoices / Bookkeeping list look: same --bkl-* tokens, wfil pills, .inv-kind-switch tabs, 16px cards, 24/12/16/8 rhythm. */
#page-bookkeeping .bk-view-switch { margin: 16px 0 16px; }
#page-bookkeeping .bk-view-switch .inv-kind-tab { min-height: 44px; }
#page-bookkeeping .bkb-tab-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Bills mode: the worklist's KPIs, alert, closing card, list and CSV export step aside */
#page-bookkeeping.bk-mode-bills :is(#bk-kpis, #bk-alert, #bk-duo, #bk-work, .bk-head-acts) { display: none !important; }
#page-bookkeeping .bk-bills[hidden] { display: none !important; }
#page-bookkeeping .bk-bills { display: block; container-type: inline-size; container-name: bkbills; }

#page-bookkeeping .bkb-intro { display: flex; align-items: center; gap: 16px; padding: 16px; margin: 0 0 16px; border: 1px solid var(--bkl-line); border-radius: 16px; background: var(--bkl-surface); }
#page-bookkeeping .bkb-intro-main { flex: 1 1 auto; min-width: 0; }
#page-bookkeeping .bkb-intro-t { font-size: 15px; line-height: 1.45; color: var(--bkl-ink); }
#page-bookkeeping .bkb-intro-s { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--bkl-muted); }
/* r2: "Book watch bills to <clearing account>" (only with the cost entries on) */
#page-bookkeeping .bkb-books { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: var(--bg-panel); font-size: 13px; line-height: 1.45; color: var(--bkl-muted); }
#page-bookkeeping .bkb-books-k { color: var(--bkl-ink); }
#page-bookkeeping .bkb-books-a { color: var(--bkl-ink); font-weight: 600; overflow-wrap: anywhere; }
#page-bookkeeping .bkb-books-s { flex: 1 1 260px; min-width: 0; }
#page-bookkeeping .bkb-books-s b { color: var(--bkl-ink); font-weight: 600; }
#page-bookkeeping .bkb-intro-acts { flex: 0 0 auto; }
#page-bookkeeping .bkb-intro-acts .btn { min-height: 44px; }

#page-bookkeeping .bkb-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
#page-bookkeeping .bkb-search-wrap { flex: 1 1 260px; min-width: 0; max-width: none; }
#page-bookkeeping #bkb-search { box-sizing: border-box; width: 100%; height: 48px; min-height: 48px; border-radius: 12px; font-size: 15px; background: var(--bkl-surface); border: 1px solid var(--bkl-line); }
#page-bookkeeping .bkb-group-switch { margin: 0; flex: 0 0 auto; }
#page-bookkeeping .bkb-group-switch .inv-kind-tab { min-height: 40px; }
#page-bookkeeping .bkb-pills { margin: 0 0 12px; }
#page-bookkeeping .bkb-meta { margin: 0 0 8px; font-size: 13px; color: var(--bkl-muted); font-variant-numeric: tabular-nums; }

#page-bookkeeping .bkb-list { display: flex; flex-direction: column; gap: 16px; }
#page-bookkeeping .bkb-group { border: 1px solid var(--bkl-line); border-radius: 16px; background: var(--bkl-surface); overflow: hidden; }
#page-bookkeeping .bkb-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bkl-line); background: color-mix(in srgb, var(--bkl-surface) 92%, var(--bg-base)); }
#page-bookkeeping .bkb-group-n { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#page-bookkeeping .bkb-group-name { font-size: 15px; font-weight: 600; color: var(--bkl-ink); overflow-wrap: anywhere; }
#page-bookkeeping .bkb-group-sub { font-size: 13px; color: var(--bkl-muted); overflow-wrap: anywhere; }
#page-bookkeeping .bkb-group-t { flex: 0 0 auto; font-size: 13px; color: var(--bkl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* desktop row: main | date | amount | state | action, one grid for every row */
#page-bookkeeping .bkb-row { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(96px, .8fr) minmax(104px, .8fr) minmax(150px, 1.1fr) minmax(132px, auto); align-items: center; column-gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--bkl-line); font-size: 15px; color: var(--bkl-ink); }
#page-bookkeeping .bkb-row:last-child { border-bottom: 0; }
#page-bookkeeping .bkb-row > * { min-width: 0; }
#page-bookkeeping .bkb-title { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
#page-bookkeeping .bkb-sub { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--bkl-muted); overflow-wrap: anywhere; }
#page-bookkeeping .bkb-desc { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 0 0 12px; border-radius: 8px; background: var(--bg-panel); max-width: 100%; }
#page-bookkeeping .bkb-desc-t { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; line-height: 1.45; padding: 6px 0; color: var(--bkl-ink); background: none; overflow-wrap: anywhere; white-space: normal; }
#page-bookkeeping .bkb-copy { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--bkl-muted); cursor: pointer; border-radius: 8px; }
#page-bookkeeping .bkb-copy:hover { color: var(--gold); }
#page-bookkeeping .bkb-copy svg { width: 17px; height: 17px; }
#page-bookkeeping .bkb-why { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--bkl-red); overflow-wrap: anywhere; }
#page-bookkeeping .bkb-why.is-history { color: var(--bkl-muted); } /* imported / before-connect history: a note, not an error */
#page-bookkeeping .bkb-c-date { font-size: 14px; line-height: 1.35; color: var(--bkl-muted); font-variant-numeric: tabular-nums; }
#page-bookkeeping .bkb-due { display: block; font-size: 12px; margin-top: 2px; }
#page-bookkeeping .bkb-c-amt { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-bookkeeping .bkb-c-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#page-bookkeeping .bkb-pill { --t: var(--bkl-grey); display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.35; color: color-mix(in srgb, var(--t) 80%, var(--bkl-ink)); background: color-mix(in srgb, var(--t) 13%, transparent); overflow-wrap: anywhere; }
#page-bookkeeping .bkb-pill.is-amber { --t: var(--bkl-amber); } #page-bookkeeping .bkb-pill.is-blue { --t: var(--bkl-blue); }
#page-bookkeeping .bkb-pill.is-green { --t: var(--bkl-green); } #page-bookkeeping .bkb-pill.is-red { --t: var(--bkl-red); }
#page-bookkeeping .bkb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t); flex: 0 0 auto; }
#page-bookkeeping .bkb-by { font-size: 12px; color: var(--bkl-muted); }
#page-bookkeeping .bkb-c-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
#page-bookkeeping .bkb-act { min-height: 44px; white-space: nowrap; }
#page-bookkeeping .bkb-undo { min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; background: none; color: var(--bkl-link); font: inherit; font-size: 13px; cursor: pointer; }
#page-bookkeeping .bkb-empty { padding: 24px 16px; text-align: center; border: 1px solid var(--bkl-line); border-radius: 16px; background: var(--bkl-surface); color: var(--bkl-muted); }
#page-bookkeeping .bkb-empty-t { font-size: 15px; font-weight: 600; color: var(--bkl-ink); margin-bottom: 4px; }
#page-bookkeeping .bkb-empty .btn { margin-top: 12px; min-height: 44px; }
#page-bookkeeping .bkb-more { display: flex; justify-content: center; padding: 8px 0 24px; }
#page-bookkeeping .bkb-more .btn { min-height: 44px; }

/* phone / narrow: the two-line Invoices row — title + amount, then the line, then state left, action right */
@container bkbills (max-width: 48rem) {
  #page-bookkeeping .bkb-intro { flex-direction: column; align-items: stretch; gap: 12px; }
  #page-bookkeeping .bkb-intro-acts .btn { width: 100%; }
  #page-bookkeeping .bkb-toolbar { flex-direction: column; align-items: stretch; }
  #page-bookkeeping .bkb-search-wrap { flex: 0 0 auto; }
  #page-bookkeeping .bkb-group-switch { width: 100%; }
  #page-bookkeeping .bkb-group-switch .inv-kind-tab { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 9px 8px; }
  #page-bookkeeping .bkb-group-h { padding: 12px; }
  #page-bookkeeping .bkb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "date amt" "st act"; row-gap: 8px; column-gap: 12px; padding: 12px; }
  #page-bookkeeping .bkb-c-main { grid-area: main; }
  #page-bookkeeping .bkb-c-amt { grid-area: amt; align-self: center; font-weight: 600; font-size: 16px; }
  #page-bookkeeping .bkb-c-date { grid-area: date; align-self: center; font-size: 13px; }
  #page-bookkeeping .bkb-due { display: inline; margin: 0 0 0 8px; }
  #page-bookkeeping .bkb-c-state { grid-area: st; align-self: center; }
  #page-bookkeeping .bkb-c-act { grid-area: act; align-self: center; }
  #page-bookkeeping .bkb-pills .wfil-pill { flex: 1 1 auto; padding: 0 12px; font-size: 14px; }
}
/* the list-page magnifier (same icon as the Inventory / Bookkeeping search), not the old ⌕ glyph */
#page-bookkeeping .bkb-search-wrap { position: relative; }
#page-bookkeeping .bkb-search-wrap::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); z-index: 1;
  background: center/contain no-repeat; opacity: .85; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a867e' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}
#page-bookkeeping #bkb-search { padding-left: 44px; }