/* Bank and Reconcile tabs (sk-books, 14 Nov 2026). Phone first (360-430 px), then tablet and desktop; builds on books.css
   (.card .stats .stat .chips .table .btn .pill .note .warn ...). Classes here start with bk- (Bank, view-bank.js) or rc- (Reconcile,
   view-reconcile.js) so they never meet another tab's rules. No horizontal page scroll: long narrations wrap, tables become cards
   below 720 px (books.css) and action buttons wrap. */

.bk-view, .bk-results, .rc-view { display: grid; gap: 12px; min-width: 0; }

/* ---------- tiles that are buttons (Bank types, Reconcile summary) ---------- */
.bk-tile, .rc-tile { display: block; width: 100%; text-align: left; cursor: pointer; }
.bk-tile:hover, .rc-tile:hover { border-color: #b9c8e0; background: #eef3fb; }
.bk-tile.active { color: var(--ink); background: var(--blue-soft); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bk-tile b.amount { white-space: normal; }
.bk-tile-unknown { background: var(--amber-soft); border-color: #f1d39b; }
.bk-tile-unknown span, .bk-tile-unknown b { color: var(--amber); }
.rc-tile.rc-open-count { background: var(--amber-soft); border-color: #f1d39b; }
.rc-tile.rc-open-count b { color: var(--amber); }
.rc-tile.rc-done em { color: var(--green); }

/* ---------- Bank: filter card ---------- */
.bk-search { max-width: 420px; }
.bk-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.chips .chip small { white-space: nowrap; }

/* ---------- Bank: lines ---------- */
.bk-narr small, .rc-narr small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.bk-type-box { display: grid; gap: 3px; justify-items: end; min-width: 0; }
.bk-kind {
  max-width: 100%; padding: 4px 8px; color: #34476a; background: var(--soft); border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.bk-kind:disabled { cursor: progress; opacity: .6; }
.bk-kind[data-kind="INCOME"], .bk-kind[data-kind="DIVIDEND"], .bk-kind[data-kind="INTEREST"] { color: var(--green); background: var(--green-soft); border-color: #bfe3cf; }
.bk-kind[data-kind="CHARGES"], .bk-kind[data-kind="TDS"] { color: var(--red); background: var(--red-soft); border-color: #efc2c2; }
.bk-kind[data-kind="BROKER"], .bk-kind[data-kind="OWN_TRANSFER"] { color: var(--blue); background: var(--blue-soft); border-color: #c6d4ea; }
.bk-kind[data-kind="INVESTMENT"], .bk-kind[data-kind="LOAN"] { color: #5b3f8f; background: #f1ecfa; border-color: #d9cdef; }
.bk-kind[data-kind="UNKNOWN"] { color: var(--amber); background: var(--amber-soft); border-color: #f1d39b; }
.bk-kind[data-kind="IGNORE"] { color: var(--muted); }
.bk-kind option { color: var(--ink); background: #fff; font-weight: 600; }
.bk-counted, .bk-matched { font-size: 11.5px; font-weight: 700; text-align: right; }
.bk-counted { color: var(--blue); }
.bk-matched { color: var(--green); }
.bk-link { padding: 0; color: var(--amber); background: none; border: 0; font-size: 11.5px; font-weight: 750; text-align: right; text-decoration: underline; text-underline-offset: 2px; }
.bk-offer { display: grid; gap: 8px; }
.bk-offer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table tr.bk-offer-row td { background: #f7f9fd; }

/* ---------- Reconcile ---------- */
.rc-note { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rc-amt { display: inline-grid; justify-items: end; gap: 1px; }
.rc-acct { display: inline-grid; gap: 1px; min-width: 0; }
.rc-amt small, .rc-kind { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-actions:empty { display: none; }
.rc-side { display: grid; gap: 2px; min-width: 0; }
.rc-side b { font-size: 13.5px; }
.rc-side small { color: var(--muted); font-size: 12px; font-weight: 600; }
.rc-dir { color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rc-good { color: var(--green); }
.rc-warn { color: var(--amber); font-weight: 750; }
.rc-stale-line { display: block; }
/* Short cells wrap between words only (the page breaks anywhere, which would squeeze a table column to one letter). */
.table td.rc-short { white-space: normal; overflow-wrap: break-word; }
.table tr.rc-row-open td { background: #f7f9fd; }

/* candidates under a row */
.rc-cands { display: grid; gap: 8px; min-width: 0; }
.rc-cands-head { color: #2e4a78; font-size: 12.5px; font-weight: 700; }
.rc-cands-empty { padding: 12px; background: #fff; border: 1px dashed var(--line); border-radius: 10px; }
.rc-cand-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rc-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start;
  padding: 9px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.rc-cand-main { display: grid; gap: 2px; min-width: 0; grid-column: 1 / -1; }
.rc-cand-main b { font-size: 13px; }
.rc-cand-main small { color: var(--muted); font-size: 12px; font-weight: 600; }
.rc-cand-main .rc-narr { font-size: 12.5px; }
.rc-cand-amount { display: grid; gap: 1px; min-width: 0; }
.rc-cand-amount .amount { font-weight: 800; }
.rc-cand-amount small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.rc-cand-amount small.rc-good { color: var(--green); }
.rc-cand-amount small.rc-warn { color: var(--amber); }
.rc-pair { align-self: center; justify-self: end; min-width: 92px; }

/* ---------- phone: tables are cards (books.css); fit the cells of these tabs ---------- */
@media (max-width: 719px) {
  .table td.bk-empty { display: none; }
  .table td.bk-type { align-items: center; }
  .table td.bk-type::before { align-self: center; }
  .bk-type-box { justify-items: end; }
  .table tr.bk-offer-row, .table tr.rc-cands-row { margin-top: -4px; border-color: #b9c8e0; background: var(--soft); }
  .table td.bk-offer-cell, .table td.rc-cands-cell { display: block; padding: 2px 0; text-align: left; }
  .table td.bk-upload-actions, .table td.rc-actions-cell { padding-top: 6px; }
  .table td.rc-actions-cell .rc-actions { width: 100%; justify-content: flex-start; }
  .rc-acct { justify-items: end; }
  .table td.rc-actions-cell:has(.rc-actions:empty) { display: none; }
  .table td.rc-block { display: block; text-align: left; padding: 5px 0; }
  .table td.rc-block::before { display: block; margin-bottom: 2px; }
  .table td.rc-block + td.rc-block { border-top: 1px dashed var(--line); }
  .rc-actions .btn { flex: 1 1 auto; }
}

/* ---------- tablet and desktop ---------- */
@media (min-width: 720px) {
  .bk-lines th:first-child, .rc-broker th:first-child, .rc-bank th:first-child, .rc-internal th:first-child, .rc-nomatch th:first-child { width: 104px; }
  .bk-lines th.num { width: 118px; }
  .bk-lines th:last-child { width: 176px; }
  .bk-type-box { justify-items: start; }
  .bk-counted, .bk-matched, .bk-link { text-align: left; }
  .table tr.bk-offer-row td, .table tr.rc-cands-row td { padding: 10px 12px 14px; background: var(--soft); }
  .rc-actions-cell { width: 1%; }
  .rc-actions { flex-direction: column; align-items: stretch; }
  .rc-actions .btn { white-space: nowrap; }
  .rc-cand { grid-template-columns: minmax(0, 1fr) minmax(130px, auto) auto; align-items: center; }
  .rc-cand-main { grid-column: auto; }
  .rc-cand-amount { justify-items: end; text-align: right; }
  .bk-upload-table td:last-child { width: 1%; }
}
@media (min-width: 1000px) {
  .rc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}