/* Ledger: only what is its own. The base (theme tokens from the site theme, inputs, buttons, tabs, cards, notes, the
 * top bar, form grids and tables) is shared/biz/app.css. Here: the entry form's lines, the posted entries and the totals.
 * At 390 px the entry lines stack, and the wide tables scroll inside their own box, never the page. */
.base { font-size: 12px; color: var(--mute); }
.main { max-width: 1100px; }
.card .h2 { font-size: 20px; margin: 0 0 6px; }
.toolbar { align-items: center; margin: 8px 0; }
.grow { flex: 1 1 200px; min-width: 0; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--mute); min-width: 0; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 6px 0; }
input[type="text"], input[type="date"], input[type="search"], select { min-width: 0; width: 100%; color: var(--ink); }
.lines { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.line-row { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) 1fr 1fr auto; align-items: center; }
.line-row .l-acct { grid-column: 1 / -1; }
@media (min-width: 640px) { .line-row { grid-template-columns: minmax(0, 2fr) 1fr 1fr auto; } .line-row .l-acct { grid-column: auto; } }
.line-row input { text-align: right; }
.totals { font-variant-numeric: tabular-nums; color: var(--mute); margin: 6px 0; }
.empty { padding: 12px 0; }
.msg { color: var(--danger); margin: 6px 0; }
.note.msg { margin: 0; }
.note.ok { color: var(--ok); }
.count { color: var(--mute); font-size: 14px; font-weight: 400; }
.entries { display: flex; flex-direction: column; gap: 10px; }
.entry { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.e-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 6px; }
.memo { overflow-wrap: anywhere; flex: 1 1 140px; }
.tag { background: var(--chip); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--mute); }
.entry .note { margin: 6px 0 0; }
.e-actions { margin-top: 6px; }
.pair { white-space: nowrap; font-variant-numeric: tabular-nums; }
.orig, .arrow { color: var(--mute); }
.num { text-align: right !important; }
.plain { margin: 0; padding-left: 18px; }
/* Bank tab: a line's actions sit on its first text line, and wrap under each other only when the row is narrow */
#bkRows .toolbar { margin: 0; justify-content: flex-end; gap: 6px; }
#bkRows td { vertical-align: middle; }
/* Statements tab: the profit and loss and the balance sheet side by side on a wide screen, one under the other in print */
.fs-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.fs-sheet .fs-head th { padding-top: 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.fs-sheet .fs-total th { border-top: 1px solid var(--line); }
@media print { .fs-sheets { display: block; } .fs-sheet { break-inside: avoid; margin-bottom: 24px; } }
/* Import SIE: the plan and the report fit the dialog; long lists scroll inside it */
.sie-dlg { width: min(720px, calc(100vw - 32px)); }
.sie-plan .tablewrap, .sie-skipped { max-height: 40vh; overflow: auto; }
.sie-plan input[data-sie] { width: 6ch; }
.sie-plan .check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.sie-plan .check input { margin-top: 3px; flex: none; }