/* KASSE v0.4.2 — statement-grade refresh */
:root {
  --bg: #f5f6f5;            /* cool near-white ground */
  --white: #ffffff;
  --ink: #1d2733;           /* navy-black statement ink */
  --ink-soft: #5d6671;
  --rule: #e2e6e3;          /* hairline */
  --rule-mid: #c9d0cb;
  --rule-strong: #1e4d3a;   /* deep ledger green */
  --deposit: #1e6e46;
  --payment: #963a2b;
  --gold: #c2a06b;          /* muted brass, wordmark only */
  --head: #16202b;          /* topbar */
  --focus: rgba(30, 77, 58, .55);

  --paper: var(--bg);       /* legacy aliases */
  --paper-deep: #edf0ee;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 26px;
  background: var(--head); color: #eef1f3;
  border-bottom: 1px solid rgba(194, 160, 107, .35);
}
.brand { display: flex; align-items: center; gap: 16px; }
.wordmark {
  font-weight: 800; letter-spacing: .22em; font-size: 15px; color: var(--gold);
  padding-right: 16px; border-right: 1px solid rgba(255,255,255,.14);
}
.company { font-weight: 600; font-size: 14px; letter-spacing: .01em; opacity: .92; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.version { font-family: "IBM Plex Mono", monospace; font-size: 11px; opacity: .45; }

.tabs { display: inline-flex; gap: 2px; margin-left: 10px; }
.tab {
  background: transparent; border: none; color: #eef1f3; opacity: .55;
  padding: 7px 13px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: .02em; border-bottom: 2px solid transparent; border-radius: 0;
}
.tab.active { opacity: 1; border-bottom-color: var(--gold); }
.tab:hover { opacity: .9; }

.user-chip {
  position: relative; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 5px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; font-size: 13px;
}
.user-chip:hover { border-color: rgba(255,255,255,.35); }
.user-chip .role { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--white); color: var(--ink); border: 1px solid var(--rule-mid); border-radius: 4px;
  box-shadow: 0 10px 28px rgba(22, 32, 43, .18); min-width: 190px; overflow: hidden;
}
.user-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 14px; cursor: pointer; font: inherit; font-size: 13px;
}
.user-menu button:hover { background: var(--paper-deep); }

/* ---------- layout / toolbar ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 22px 26px 64px; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.field .lbl, .balance-block .lbl {
  display: block; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px; font-weight: 600;
}
.balance-block { text-align: right; }
.balance { font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
select, input, button { font: inherit; color: inherit; }
select {
  background: var(--white); border: 1px solid var(--rule-mid); border-radius: 3px;
  padding: 7px 10px; min-width: 220px; font-size: 13.5px;
}
select:focus, input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

h2 { font-weight: 700; letter-spacing: .01em; font-size: 16px; margin: 26px 0 10px; }
.muted { color: var(--ink-soft); font-size: 13px; }

/* ---------- ledger table ---------- */
.ledger-wrap {
  background: var(--white); border: 1px solid var(--rule-mid); border-radius: 4px;
  overflow: visible; box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  text-align: left; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; padding: 11px 10px 9px;
  border-bottom: 1px solid var(--ink);             /* thin… */
  box-shadow: 0 2px 0 -1px var(--rule-mid);        /* …over hairline: statement double rule */
}
.ledger td { padding: 6px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-size: 13.5px; }
.ledger .num, .ledger .c-amt, td.amt { text-align: right; }
th.c-amt { text-align: right; }
td.amt, .ledger .mono { font-size: 13px; }
.c-date { width: 116px; } .c-num { width: 64px; } .c-amt { width: 112px; } .c-act { width: 96px; }

tbody#rows tr:hover { background: #f2f6f3; cursor: pointer; }
.pay { color: var(--payment); }
.dep { color: var(--deposit); }
.neg { color: var(--payment); }
.reconciled-mark {
  color: var(--rule-strong); font-weight: 700; margin-left: 7px; font-size: 10px;
  border: 1px solid currentColor; border-radius: 2px; padding: 0 3px; vertical-align: 1px;
}
.opening-row td { color: var(--ink-soft); font-size: 12.5px; border-bottom: none; background: #fbfcfb; }

/* ---------- entry row ---------- */
.entry-row { background: #f7faf8; }
.entry-row td { border-bottom: 2px solid var(--rule-strong); position: relative; }
.entry-row input {
  width: 100%; border: 1px solid var(--rule-mid); border-radius: 3px;
  padding: 6px 8px; background: var(--white); font-size: 13.5px;
}
.entry-row input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.amt-in { text-align: right; }
.entry-note { color: var(--ink-soft); font-size: 11.5px; text-align: right; }
.entry-row.editing { background: #f2efe2; }

/* ---------- typeahead ---------- */
.ta-cell { position: relative; }
.ta-menu {
  position: absolute; top: calc(100% - 4px); left: 10px; right: 10px; z-index: 30;
  background: var(--white); border: 1px solid var(--rule-mid); border-top: 2px solid var(--rule-strong);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 10px 26px rgba(22, 32, 43, .16); max-height: 240px; overflow-y: auto;
}
.ta-item { padding: 7px 10px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; }
.ta-item.active, .ta-item:hover { background: var(--paper-deep); }
.ta-item .hint { color: var(--ink-soft); font-size: 12px; }
.ta-item .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--rule-strong); align-self: center; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--rule-strong); background: var(--rule-strong); color: #f4f7f5;
  border-radius: 3px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
  letter-spacing: .01em;
}
.btn:hover { background: #25624a; border-color: #25624a; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-mid); font-weight: 500; opacity: 1; }
.btn.ghost:hover { border-color: var(--ink-soft); background: var(--paper-deep); }
.topbar .btn.ghost { color: #eef1f3; border-color: rgba(255,255,255,.25); }
.topbar .btn.ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.danger { background: var(--payment); border-color: var(--payment); }
.btn.danger:hover { background: #a8483a; border-color: #a8483a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; }
tbody#rows tr:hover .row-actions { opacity: 1; }
.link-btn {
  background: none; border: none; color: var(--rule-strong); font-weight: 600;
  cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: #25624a; }

/* ---------- dialogs ---------- */
dialog {
  border: 1px solid var(--rule-mid); border-top: 3px solid var(--rule-strong); border-radius: 5px;
  background: var(--white); color: var(--ink);
  width: min(540px, 92vw); padding: 24px 26px;
  box-shadow: 0 18px 50px rgba(22, 32, 43, .28);
}
dialog::backdrop { background: rgba(22, 32, 43, .45); }
dialog h2 { margin: 0 0 16px; font-family: "Source Serif 4", Georgia, serif; font-weight: 700; font-size: 19px; }
dialog h2 ~ h2 { margin-top: 22px; font-size: 14px; font-family: "Archivo", sans-serif; font-weight: 700; }
dialog .field { display: block; margin: 12px 0; }
dialog .field input { width: 100%; border: 1px solid var(--rule-mid); border-radius: 3px; padding: 8px 10px; }
.cat-new { display: flex; gap: 8px; margin-bottom: 14px; }
.cat-new input { flex: 1; border: 1px solid var(--rule-mid); border-radius: 3px; padding: 7px 10px; }
.cat-new select { min-width: 120px; }
#catList { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--rule-mid); margin-bottom: 16px; }
.cat-row { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.cat-row .type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); align-self: center; }
.error { color: var(--payment); margin-bottom: 10px; font-size: 13px; }

.set-row { display: flex; gap: 8px; align-items: center; margin: 7px 0; }
.set-row input { border: 1px solid var(--rule-mid); border-radius: 3px; padding: 6px 9px; }
.set-row .grow { flex: 1; }
.set-row .w90 { width: 90px; }
.rec-row { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--rule); }
.rec-row .grow { flex: 1; }
.rec-row .meta { color: var(--ink-soft); font-size: 12px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--head); color: #eef1f3; padding: 10px 20px; border-radius: 4px; font-size: 13.5px;
  border-left: 3px solid var(--rule-strong);
  box-shadow: 0 10px 28px rgba(0,0,0,.28); z-index: 50;
}
.toast.err { border-left-color: var(--payment); }

/* ---------- reconcile ---------- */
.recon-start {
  background: var(--white); border: 1px solid var(--rule-mid); border-radius: 4px;
  padding: 20px 22px 22px; box-shadow: 0 1px 2px rgba(22, 32, 43, .05);
}
.recon-start h2 { margin-top: 0; }
.recon-form { display: flex; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
.recon-form input { border: 1px solid var(--rule-mid); border-radius: 3px; padding: 7px 10px; background: var(--white); min-width: 180px; }
.recon-extra { margin: 8px 0 18px; }
.recon-extra summary { cursor: pointer; color: var(--rule-strong); font-weight: 600; font-size: 13px; }

.recon-stats {
  display: flex; gap: 30px; align-items: flex-end; flex-wrap: wrap;
  background: var(--head); color: #eef1f3; border-radius: 4px; padding: 15px 20px; margin-bottom: 14px;
  border-bottom: 2px solid var(--gold);
}
.recon-stats .lbl { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; font-weight: 600; }
.recon-stats .mono { font-size: 15.5px; }
.recon-stats .diff .mono { font-size: 20px; font-weight: 500; color: #e08a76; }
.recon-stats .diff.zero .mono { color: #7fd49a; }
.stat-actions { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.c-check { width: 44px; }
#reconRows input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--rule-strong); cursor: pointer; }
#reconRows tr.cleared { background: #f1f6f2; }
.recon-history h2 { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; }

/* ---------- reports ---------- */
.report-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.report-controls input { border: 1px solid var(--rule-mid); border-radius: 3px; padding: 7px 10px; background: var(--white); }
.report-sheet {
  background: var(--white); border: 1px solid var(--rule-mid); border-radius: 4px;
  padding: 40px 52px 46px; max-width: 860px; margin: 0 auto;
  box-shadow: 0 1px 3px rgba(22, 32, 43, .07);
}
.report-head { text-align: center; margin-bottom: 26px; padding-bottom: 14px; position: relative; }
.report-head::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 0;
  border-bottom: 1px solid var(--ink); box-shadow: 0 2px 0 -1px var(--rule-mid);
}
.report-head .co { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: .01em; }
.report-head .rn { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; margin-top: 3px; font-weight: 600; color: var(--ink-soft); }
.report-head .rng { color: var(--ink-soft); font-size: 11.5px; margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }
table.report { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.report td { padding: 5px 8px; border-bottom: 1px solid var(--rule); }
table.report td.amt { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 13px; }
table.report tr.sect td {
  font-weight: 700; border-bottom: 1px solid var(--ink); color: var(--ink);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .11em; padding-top: 20px;
}
table.report tr.subtotal td { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
table.report tr.grand td {
  font-weight: 700; border-top: 1px solid var(--ink); font-size: 14px; padding-top: 7px;
  border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 -1px var(--ink);  /* double rule under totals */
}
table.report tr.acct-head td { font-weight: 600; padding-top: 14px; border-bottom: none; color: var(--rule-strong); }
table.report td.indent { padding-left: 30px; }
table.report tr.note td { border-bottom: none; color: var(--ink-soft); font-size: 12px; padding-top: 12px; }

/* ---------- print ---------- */
@media print {
  .topbar, .toolbar, .report-controls, .toast { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .report-sheet { border: none; padding: 0; max-width: none; box-shadow: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .c-memo, td:nth-child(5) { display: none; }
  main { padding: 12px 10px 60px; }
  .report-sheet { padding: 24px 18px; }
}