:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1c1f24; --muted: #6b7280; --line: #e3e6ea;
  --accent: #1f5eff; --accent-ink: #fff; --pos: #157347; --neg: #b3261e; --warn: #9a6700; --warn-bg: #fff8e1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14161a; --panel: #1d2026; --ink: #e7e9ee; --muted: #9aa3b2; --line: #2c3139;
          --accent: #6b93ff; --accent-ink: #0b0d10; --pos: #4cc38a; --neg: #ff7b72; --warn: #e3b341; --warn-bg: #2b2412; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header { background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 20px; display: flex; align-items: center; gap: 18px; height: 50px; position: sticky; top: 0; z-index: 5; }
header .brand { font-weight: 700; margin-right: 8px; }
header nav a { padding: 6px 8px; border-radius: 6px; color: var(--ink); }
header nav a.active, header nav a:hover { background: var(--bg); text-decoration: none; }
header .spacer { flex: 1; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600; }
main { max-width: 1400px; margin: 0 auto; padding: 20px; }
h1 { font-size: 20px; margin: 0 0 14px; } h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--muted); font-size: 12px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td.num, th.num { text-align: right; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--muted); }
tr.uncat td:first-child { border-left: 3px solid var(--warn); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
form.inline { display: inline; }
input, select, button, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
select.cat { max-width: 260px; }
select.cat.saved { border-color: var(--pos); } select.cat.err { border-color: var(--neg); }
button, .btn { cursor: pointer; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; padding: 6px 12px; display: inline-block; }
button.secondary, .btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); font-weight: 500; }
button.danger { background: transparent; color: var(--neg); border-color: var(--line); font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.flash { background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; }
.bulkbar { display: none; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; margin-bottom: 10px; }
.bulkbar.show { display: flex; }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow: auto; font-size: 12px; }
dl { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; margin: 0; } dt { color: var(--muted); } dd { margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.bar { height: 8px; background: var(--accent); border-radius: 4px; }
.bar.income { background: var(--pos); margin-bottom: 2px; } .bar.expense { background: var(--neg); }
.truncate { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: middle; letter-spacing: .02em; }
.pill .code { background: var(--panel); margin-right: 5px; }
td .code { min-width: 40px; text-align: center; }

tr.excluded td { opacity: .6; } tr.excluded td:first-child { border-left: 3px solid var(--line); }
.pill.excl { background: var(--bg); color: var(--muted); text-decoration: line-through; }
.excl-panel { border-color: var(--warn); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
tr.uncat td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
tr.uncat td:first-child { border-left: 3px solid var(--warn); }
tr.done td { background: color-mix(in srgb, var(--pos) 12%, transparent); transition: opacity .8s; opacity: .3; }
button.suggest { background: transparent; border: 1px dashed var(--accent); color: var(--accent); font-weight: 500; padding: 2px 8px; margin-left: 6px; font-size: 12px; }
button.suggest .code { margin-right: 4px; }
button.suggest:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pager { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.btn.disabled { opacity: .4; pointer-events: none; }

tr.entry-first td { border-top: 2px solid var(--line); }
tr.totals td { font-weight: 600; }
button:disabled { opacity: .45; cursor: not-allowed; }

.who { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.who img { width: 22px; height: 22px; border-radius: 50%; }
/* viewers see everything but can change nothing (server enforces this too) */
body.role-viewer form[method="post"]:not(.logout), body.role-viewer .bulkbar, body.role-viewer button.suggest,
body.role-viewer a[href$="/rules"][title], body.role-viewer input.sel, body.role-viewer #selall { display: none !important; }
body.role-viewer select.cat { pointer-events: none; opacity: .7; }


/* ---------- responsive ---------- */
.navtoggle { display: none; background: transparent; color: var(--ink); border-color: var(--line); font-size: 18px; padding: 4px 10px; line-height: 1; }
.navtoggle .badge { margin-left: 6px; font-size: 11px; vertical-align: middle; }
.navwrap { display: contents; }
main { padding: 16px; }
table { max-width: 100%; }
.panel { overflow-x: auto; }               /* wide tables scroll inside their panel instead of the page */
input, select, textarea { max-width: 100%; }
.filters > .btn, .filters > button { align-self: flex-end; }

@media (max-width: 1100px) {
  header { flex-wrap: wrap; height: auto; min-height: 50px; padding: 8px 14px; gap: 10px; }
  .navtoggle { display: inline-block; margin-left: auto; }
  .navwrap { display: none; flex-basis: 100%; flex-direction: column; gap: 8px; padding: 8px 0 4px; border-top: 1px solid var(--line); }
  .navwrap.open { display: flex; }
  .navwrap nav { display: flex; flex-direction: column; }
  .navwrap nav a { padding: 10px 8px; border-radius: 6px; font-size: 15px; }
  .navwrap .spacer { display: none; }
  .navwrap form, .navwrap .who, .navwrap > .pill { align-self: flex-start; margin-left: 8px; }
  h1 { font-size: 18px; }
}

@media (max-width: 700px) {
  main { padding: 12px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 10px 12px; } .stat .value { font-size: 18px; }
  .filters { gap: 8px; }
  .filters label { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .filters label:has(input[name=search]), .filters label:has(input[name=memo]), .filters label:has(select[name=account_id]),
  .filters label:has(input[type=file]), .filters label:has(input[type=email]), .filters label:has(select[name=category]) { flex-basis: 100%; }
  .filters label input, .filters label select { width: 100% !important; }
  .filters > .btn, .filters > button, .filters > span { flex: 1 1 auto; text-align: center; }
  .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs a { padding: 8px 10px; }
  dl { grid-template-columns: 1fr; gap: 0 } dt { margin-top: 8px; font-size: 12px; } dd { word-break: break-word; }
  .truncate { max-width: none; white-space: normal; }
  .pager { flex-wrap: wrap; gap: 8px; }
  .bulkbar { flex-wrap: wrap; } .bulkbar input, .bulkbar select { flex: 1 1 100%; max-width: none; }
  th, td { padding: 6px 6px; }
  pre { font-size: 11px; }
  .who { display: none; }

  /* transactions list becomes cards */
  table.tx, table.tx tbody { display: block; }
  table.tx tr:first-child { display: none; }                      /* header row */
  table.tx tr { display: grid; grid-template-columns: 24px 1fr auto; grid-template-areas:
      "sel date amount" "sel payee amount" "sel desc desc" "sel kind fee" "sel cat cat" "sel rule rule";
      gap: 2px 8px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
  table.tx tr:hover td { background: transparent; }
  table.tx td { display: block; border: 0; padding: 0; background: transparent !important; }
  table.tx tr.uncat { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); }
  table.tx tr.excluded { opacity: .6; }
  table.tx td.c-sel { grid-area: sel; padding-top: 2px; }
  table.tx td.c-date { grid-area: date; font-size: 12px; color: var(--muted); }
  table.tx td.c-payee { grid-area: payee; font-weight: 600; }
  table.tx td.c-desc { grid-area: desc; color: var(--muted); font-size: 13px; }
  table.tx td.c-kind { grid-area: kind; }
  table.tx td.c-amount { grid-area: amount; font-size: 16px; font-weight: 600; text-align: right; align-self: start; }
  table.tx td.c-fee { grid-area: fee; text-align: right; font-size: 12px; }
  table.tx td.c-cat { grid-area: cat; margin-top: 4px; }
  table.tx td.c-cat select.cat { width: 100%; max-width: none; }
  table.tx td.c-cat button.suggest { margin: 6px 0 0; display: inline-block; }
  table.tx td.c-rule { grid-area: rule; font-size: 12px; }
  table.tx tr td[colspan] { grid-column: 1 / -1; }
}

@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, button, .btn, textarea { min-height: 40px; font-size: 16px; }   /* no iOS zoom, easy to tap */
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; }
  select.cat, button.suggest, .navtoggle { min-height: 40px; }
  table button, table .btn { min-height: 34px; padding: 4px 10px; font-size: 14px; }
  table td a { padding: 4px 0; display: inline-block; }
}
@media (max-width: 700px) {
  .hide-m { display: none !important; }
  /* journal entry lines stack: account on its own row, debit/credit side by side */
  #jelines { min-width: 0 !important; max-width: none !important; }
  #jelines tr:first-child { display: none; }
  #jelines tr { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
  #jelines td { display: block; border: 0; padding: 0; }
  #jelines td:first-child { grid-column: 1 / -1; }
  #jelines tr.totals { grid-template-columns: auto 1fr 1fr; }
  #jelines tr.totals td:first-child { grid-column: auto; }
  #jelines tr.totals td:last-child { grid-column: 1 / -1; text-align: right; }
}
/* grid/flex children must not inherit a wide table's intrinsic width; scroll inside the panel instead */
.two > *, .grid > *, .panel, main { min-width: 0; }
html, body { overflow-x: hidden; }

/* header: keep items on one line, trim on medium desktops */
header { gap: 12px; }
header .brand, header nav a, header .who, header button, header .pill { white-space: nowrap; }
header nav a { padding: 6px 7px; }
@media (max-width: 1400px) { header .who span:not(.pill), header .who img { display: none; } }
/* tablets (701-1100px): transactions stay a table but drop description and fee */
@media (min-width: 701px) and (max-width: 1100px) {
  table.tx th:nth-child(4), table.tx td.c-desc, table.tx th:nth-child(7), table.tx td.c-fee { display: none; }
  table.tx th:nth-child(8) { min-width: 200px !important; }
  table.tx td.c-cat select.cat { max-width: 200px; }
}