/* "Ledger" look, the same as the Financial Statements Utility: green-grey paper colours, a deep green accent,
   IBM Plex Sans on the screens and Source Serif 4 for page titles and the statements. Loaded after app.css; it changes
   colours and type only, never the layout. Customer documents (invoices, credit / debit notes) keep their own look. */
:root {
  --bg: #eef2f0; --surface: #ffffff; --sunk: #f6f8f7;
  --ink: #15221e; --ink-2: #3f4f4a; --muted: #5a6964;
  --line: #d3dcd8; --line-2: #c2ccc8;
  --primary: #0e5a4b; --primary-ink: #ffffff; --primary-soft: #dcebe6; --primary-hover: #0b4a3e;
  --side: #ffffff; --side-ink: #15221e;
  --danger: #b3261e; --ok: #217346; --warn: #8a5a00; --warn-soft: #fbf1db; --err-soft: #fbe6e4; --ok-soft: #e3f1e8;
  --series-1: #0e5a4b; --series-2: #c27c2c;
  --shadow: none;
  --ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', Cambria, 'Times New Roman', serif;
}
body { font-family: var(--ui); }
h1 { font-family: var(--serif); font-weight: 600; font-size: 25px; letter-spacing: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
:focus-visible { outline-color: var(--primary); }
/* customer documents: unchanged */
.inv-sheet, .inv-x { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* side bar: white, like the utility's step rail */
.side { border-right: 1px solid var(--line); }
.brand { color: var(--ink); }
.logo-mark { background: transparent; border: 2px solid var(--primary); border-radius: 4px; font-size: 0; color: transparent; position: relative; }
.logo-mark::before, .logo-mark::after { content: ''; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--primary); }
.logo-mark::before { top: 8px; }
.logo-mark::after { top: 14px; box-shadow: 0 6px 0 var(--primary); }
.side .brand-name::before { content: 'Sarathi Books'; display: block; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.side nav a { color: var(--ink); }
.side nav a svg { color: var(--muted); }
.side nav a:hover { background: var(--sunk); color: var(--ink); }
.side nav a.on { background: var(--primary-soft); color: var(--ink); }
.side nav a.on svg { color: var(--primary); }
.nav-h { color: var(--muted); }
.side-foot { border-top-color: var(--line); }
.side-foot a, .install-link, a.install-link { color: var(--primary); }
.mode.cloud { color: var(--ok); } .mode.local { color: var(--warn); } .mode.file { color: var(--primary); }
@media screen and (max-width: 860px) { .side.open { box-shadow: 0 0 32px rgba(0, 0, 0, .18); } }

/* top bar */
.top-search { background: var(--sunk); border-color: var(--line); }
.top-search:hover { background: var(--surface); border-color: var(--line-2); }
.avatar { background: var(--primary); }
.icon-btn:hover { background: var(--sunk); }

/* buttons: outlined in green, the main action filled */
.btn { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.btn:hover { background: var(--primary-soft); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--danger); border-color: #e3b5b1; }
.btn.danger:hover, .icon-btn.danger:hover, .dd-item.danger:hover { background: var(--err-soft); }
.btn-split > .btn.primary + .dd > .btn.primary { border-left-color: rgba(255, 255, 255, .35); }

/* fields */
.input { background: var(--sunk); border-color: var(--line); border-radius: 5px; }
.input:focus { background: var(--surface); outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--line); }
.input[readonly], .input:disabled { background: var(--bg); color: var(--ink-2); }
.seg { background: var(--surface); border-color: var(--line); }

/* cards, tables, lists */
.card, .kpi, .acc-card, .brs { border-color: var(--line); }
.tbl th { background: var(--surface); color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.tbl tfoot td, .tbl.stack tfoot tr { background: var(--sunk); }
.tbl tr.click:hover td, .report .tbl tbody tr:hover td, .co-row:hover, .co-row:focus-visible { background: var(--sunk); }
.tbl tr.grp td, .rep-tbl tr.grp td { background: var(--primary-soft); color: var(--ink); }
.tbl.stack tbody tr:nth-child(even) { background: var(--sunk); }
.row-on td { background: #eef6f3; }
.acc-card.on { box-shadow: 0 0 0 2px rgba(14, 90, 75, .15); }
.party-box, .tds-box, .rep-tools, .modal-foot, .pal-foot { background: var(--sunk); }
.rep-tbl tbody tr:not(.grp) td { color: var(--ink); }
.b-paid { background: var(--ok-soft); color: var(--ok); }
.b-partial { background: var(--warn-soft); color: var(--warn); }
.b-unpaid { background: var(--err-soft); color: var(--danger); }
.b-draft { background: var(--sunk); }
.note, .lock-note { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
.bk-bar { background: var(--line); }
.chart .grid { stroke: #e2e8e5; } .chart .axis { stroke: var(--line-2); } .chart .hit.on { fill: rgba(14, 90, 75, .06); }

/* pop-ups and messages */
.modal-back, .pal-back { background: rgba(21, 34, 30, .45); }
.toast { background: var(--ink); color: var(--bg); }
.toast.err { background: var(--danger); color: #fff; }
.update-bar { background: var(--ink); }

/* statements on paper, in the serif type of the utility's printed set */
.stmt { font-family: var(--serif); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.fs-tbl { font-size: 13.5px; }
.fs-tbl td.c a { color: var(--primary); }
.rep-head .rep-co, .fs-co { font-family: var(--serif); }
@media print { .stmt { box-shadow: none; } }