/* The books an accountant asks for (js/books2.js): the trial balance, the
 * journal, the chart of accounts, ageing and the bank statement. Figures are
 * the content, so everything here serves reading a column of them. */

/* The box Statements draws empty for a Books2 tab to fill. */
.st-books2 { padding-top: 4px; }

/* ── Trial balance ─────────────────────────────────────────────────── */
/* Balanced is the whole point of the page, so it is the first thing said —
   green when it is, red with the difference when it is not. */
.kpi.tb-ok { border-color: #86c9a3; background: #eefbf3; }
.kpi.tb-ok b { color: #15803d; }
.kpi.tb-off { border-color: #e5a3a3; background: #fdf1f1; }
.kpi.tb-off b { color: #b91c1c; }
.kpi.bad b { color: #b91c1c; }
.kpi small { display: block; font-size: 11px; }
.tb-t td:first-child { min-width: 220px; }
.tb-t tr.tb-group td { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; background: #f4f7ff; padding-top: 8px; }
.tb-t tr.tb-suspense td { color: #b45309; }
.tb-t tr.tb-total td { font-weight: 800; border-top: 1.5px solid #c9d1de; background: #f4f7ff; }

/* ── Chart of accounts ─────────────────────────────────────────────── */
.ch-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; margin: 0 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ch-add .s-field { flex: 1 1 180px; margin: 0; }
.ch-add .ch-note { flex: 2 1 260px; }
.ch-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.ch-group { min-width: 0; }
.ch-group tr.ch-closed td { color: #94a3b8; }
.ch-group tr.ch-closed b { text-decoration: line-through; }
.ch-acts { white-space: nowrap; }

/* ── Journal ───────────────────────────────────────────────────────── */
.jn-list td { vertical-align: top; }
.jn-lines { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.jn-narr { grid-column: 1 / -1; }
.jn-grid { width: 100%; margin-top: 12px; }
.jn-grid td select { width: 100%; font: inherit; font-size: 12.5px; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; }
.jn-amt { width: 120px; font: inherit; font-size: 12.5px; text-align: right; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 5px; }
.jn-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* Read before the button is pressed: an entry that does not add up says so
   the moment the second amount is typed. */
.jn-sum { font-size: 12.5px; font-weight: 600; color: #15803d; }
.jn-sum.bad { color: var(--danger); }

/* ── Ageing & MSME ─────────────────────────────────────────────────── */
.ag-asof { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ag-asof input[type="date"] { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid #b8c2d3; border-radius: 7px; background: #fff; }
.ag-body { padding-top: 4px; }
.ag-t td.late { color: #b91c1c; font-weight: 600; }

/* ── Bank statement ────────────────────────────────────────────────── */
.rc-body { padding-top: 4px; }
.rc-t td { vertical-align: middle; }
/* The three states read as a stripe before they read as words. */
.rc-t tr.rc-matched td:first-child { box-shadow: inset 3px 0 0 #15803d; }
.rc-t tr.rc-open td:first-child { box-shadow: inset 3px 0 0 #b45309; }
.rc-t tr.rc-ignored td { color: #94a3b8; }
.rc-t tr.rc-ignored td:first-child { box-shadow: inset 3px 0 0 #cbd5e1; }
.rc-tick { color: #15803d; font-weight: 800; }
.rc-stale { font-size: 10.5px; font-weight: 700; color: #b91c1c; background: #fdf1f1; border: 1px solid #e5a3a3; border-radius: 999px; padding: 1px 7px; }
.rc-acts { white-space: nowrap; }
.rc-t select { max-width: 260px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; }
.rc-pick { max-height: 320px; overflow: auto; }
.rc-preview { max-height: 220px; overflow: auto; margin-top: 8px; }