/* Plain, high-legibility styles. Focus is readability and accessibility, not visual design. */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #4a4a4a;
  --line: #c8c8c8;
  --card: #f4f6f8;
  --accent: #0b5394;
  --accent-fg: #ffffff;
  --good: #0a6b2d;
  --bad: #b00020;
  --warn: #8a5300;
  --bar-bg: #dde3ea;
  --focus: #ffbf47;
  --scale: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    --bg: #121417; --fg: #f1f1f1; --muted: #c2c2c2; --line: #4a4f57; --card: #1d2126;
    --accent: #7db8f0; --accent-fg: #0b1a2a; --good: #6fdc8c; --bad: #ff8a8a; --warn: #ffc56b;
    --bar-bg: #333a42; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121417; --fg: #f1f1f1; --muted: #c2c2c2; --line: #4a4f57; --card: #1d2126;
  --accent: #7db8f0; --accent-fg: #0b1a2a; --good: #6fdc8c; --bad: #ff8a8a; --warn: #ffc56b;
  --bar-bg: #333a42; color-scheme: dark;
}
:root[data-theme="contrast"] {
  --bg: #000000; --fg: #ffffff; --muted: #ffffff; --line: #ffffff; --card: #000000;
  --accent: #ffff00; --accent-fg: #000000; --good: #00ff66; --bad: #ff6666; --warn: #ffff00;
  --bar-bg: #444444; --focus: #00ffff; color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: calc(18px * var(--scale)); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, "Segoe UI", Arial, sans-serif; line-height: 1.5;
  padding-bottom: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: 1rem; top: 1rem; background: var(--bg); padding: .5rem; z-index: 10; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--line);
}
.app-name { font-weight: 700; }
.sync-status { font-size: .85rem; color: var(--muted); }

main { padding: 1rem; max-width: 46rem; margin: 0 auto; }
main:focus, h1:focus { outline: none; }
table.compact { font-size: .9rem; }
table.compact th, table.compact td { padding: .4rem .2rem; }
h1 { font-size: 1.5rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Numbers: keep digits, sign and ₪ together in RTL text */
.num { unicode-bidi: isolate; direction: ltr; display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; margin: .75rem 0; }
.headline { font-size: 1.1rem; }
.headline .big { font-size: 2rem; font-weight: 700; display: block; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: 0; }
.kpis div { background: var(--card); border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; }
.kpis dt { color: var(--muted); font-size: .9rem; }
.kpis dd { margin: 0; font-size: 1.25rem; font-weight: 700; }

table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
caption { text-align: start; font-weight: 700; padding: .25rem 0; }
th, td { text-align: start; padding: .5rem .35rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .9rem; color: var(--muted); font-weight: 600; }
td.n, th.n { text-align: end; }
.table-wrap { overflow-x: auto; }

/* Visual bar (decorative; the same info is always written as text) */
.bar { height: .6rem; background: var(--bar-bg); border-radius: .3rem; overflow: hidden; margin-top: .25rem; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.over > span { background: var(--bad); }
.bar.near > span { background: var(--warn); }

details { border: 1px solid var(--line); border-radius: .5rem; margin: .5rem 0; padding: .25rem .75rem; }
summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

form .field { margin: 0 0 1rem; }
label, legend { display: block; font-weight: 600; margin-bottom: .25rem; }
fieldset { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem 1rem 1rem; margin: 0 0 1rem; }
input, select, textarea, button {
  font: inherit; color: inherit; min-height: 3rem;
}
input, select, textarea {
  width: 100%; padding: .5rem .75rem; background: var(--bg);
  border: 2px solid var(--line); border-radius: .4rem;
}
input[type="radio"], input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0; accent-color: var(--accent); }
.choice { display: flex; align-items: center; gap: .5rem; min-height: 3rem; font-weight: 400; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 10rem; }
.amount-input { font-size: 1.75rem; font-weight: 700; direction: ltr; text-align: right; }
.hint { color: var(--muted); font-size: .9rem; margin: .25rem 0 0; }
.error { color: var(--bad); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--bad); }

button, .btn {
  padding: .5rem 1rem; border-radius: .4rem; border: 2px solid var(--accent);
  background: var(--bg); color: var(--accent); cursor: pointer; font-weight: 600;
}
button.primary { background: var(--accent); color: var(--accent-fg); width: 100%; font-size: 1.15rem; }
button.danger { border-color: var(--bad); color: var(--bad); }
button.link { border: none; padding: .25rem; min-height: 2.75rem; text-decoration: underline; }
button:disabled { opacity: .6; cursor: not-allowed; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

.month-picker { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.month-picker h1 { margin: 0; text-align: center; flex: 1; font-size: 1.35rem; }
.month-picker button { min-width: 3rem; }

.tx-day { margin-top: 1rem; }
.tx-day h2 { font-size: 1rem; margin: 0 0 .25rem; color: var(--muted); }
.tx { list-style: none; padding: 0; margin: 0; }
.tx li { border-bottom: 1px solid var(--line); padding: .5rem 0; display: flex; gap: .75rem; align-items: center; }
.tx .desc { flex: 1; min-width: 0; }
.tx .desc .meta { color: var(--muted); font-size: .9rem; }
.tx .amt { font-weight: 700; }
.tx button { min-height: 2.75rem; padding: .25rem .75rem; }

.tabs {
  position: fixed; bottom: 0; inset-inline: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg); border-top: 2px solid var(--line); z-index: 5;
}
.tabs button { border: none; border-radius: 0; min-height: 3.75rem; color: var(--fg); font-weight: 600; padding: .25rem; font-size: .95rem; }
.tabs button[aria-current="page"] { color: var(--accent); box-shadow: inset 0 4px 0 var(--accent); }

.toast {
  position: fixed; bottom: 4.5rem; inset-inline: 1rem; max-width: 30rem; margin: 0 auto;
  background: var(--fg); color: var(--bg); padding: .75rem 1rem; border-radius: .5rem;
  font-weight: 600; display: none; z-index: 6;
}
.toast.show { display: block; }
.loading { text-align: center; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code { font-size: 1.75rem; font-weight: 700; letter-spacing: .3rem; direction: ltr; display: inline-block; }

.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-card { border-bottom: 1px solid var(--line); padding: .5rem 0 .75rem; }
.cat-card h3 { margin: 0; font-size: 1.1rem; }
.cat-card h3 .link { padding: 0; min-height: 2.75rem; font-size: inherit; }
.cat-card p { margin: .15rem 0; }