/* Self-hosted variable font (OFL, fonts/OFL.txt); one file covers every weight 100..900 */
@font-face { font-family: Vazirmatn; src: url(../fonts/Vazirmatn-var.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Color tokens: the only place colors are defined (R-CSS-1). Text colors are checked by `npm run contrast`.
   -ink = text/icon on a card or tint (>=4.5:1); the plain color = fill, line or bar (>=3:1). One color pair per card type. */
:root {
  --brand: #2457d6; --bar: #2457d6; --brand-strong: #2457d6; --brand-ink: #1d47b8; --on-brand: #fff; --on-bar: #fff;
  --bg: #f4f6fb; --card: #fff; --text: #14181f; --muted: #566074; --line: #e1e6ef;
  --bad: #d92d20; --bad-ink: #b42318; --warn: #d97706; --warn-ink: #93370d; --good: #0e9250; --good-ink: #067647;
  --c-customer: #0e7490; --c-customer-ink: #0b5e75;
  --c-supplier: #c2570c; --c-supplier-ink: #9a4509;
  --c-owner: #7c3aed; --c-owner-ink: #6d28d9;
  --c-partner: #db2777; --c-partner-ink: #be185d;
  --c-seller: #4d7c0f; --c-seller-ink: #3f6212;
  --font: Vazirmatn, system-ui, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  /* Scale levers (R-CSS-2, set by phase 26): --ui-scale = page size (every rem), --font-scale = text size only */
  --ui-scale: 1; --font-scale: 1;
  --fs-s: calc(.8125rem * var(--font-scale)); --fs-m: calc(.9375rem * var(--font-scale)); --fs-l: calc(1.125rem * var(--font-scale));
/* Motion (R-UI-6): spring = overshoot curve; feedback settles within --t-spring */
  --spring: cubic-bezier(.34, 1.56, .64, 1); --t-press: .08s; --t-spring: .3s;
  --hit: 2.75rem; /* touch target: 44px at default scale */
  --radius: 1.125rem; --nav-h: 3.75rem; --header-h: 3.5rem;
  color-scheme: light;
}

/* Header button, in-place panel and form fields (R-UI-1: panels open in place, never as a popup) */
.hbtn { min-width: var(--hit); min-height: var(--hit); display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--on-bar) 16%, transparent); color: var(--on-bar); }
.hbtn[aria-expanded=true] { background: color-mix(in srgb, var(--on-bar) 30%, transparent); }
.panel { display: grid; gap: .75rem; padding: 1rem; margin-bottom: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transform-origin: top; }
.panel-f { display: grid; gap: .25rem; min-width: 0; }
.panel-f small, .hint { color: var(--muted); font-size: var(--fs-s); }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.panel-in { width: 100%; min-height: var(--hit); padding: .5rem .875rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--bg); color: var(--text); font: inherit; }
textarea.panel-in { resize: none; }
.panel-in:focus { outline: 2px solid var(--brand); border-color: transparent; }
.ltr { text-align: end; }
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.type-chip { --c: var(--c-customer); --ink: var(--c-customer-ink); min-height: var(--hit); border-radius: 999px; border: 1px solid var(--c); background: var(--card); font-size: var(--fs-m); }
.type-chip[data-type=supplier] { --c: var(--c-supplier); --ink: var(--c-supplier-ink); }
.type-chip[aria-pressed=true] { background: color-mix(in srgb, var(--c) 14%, var(--card)); color: var(--ink); font-weight: 700; border-width: 2px; }
.btn { min-height: var(--hit); padding: .5rem 1rem; border-radius: .875rem; background: var(--brand-strong); color: var(--on-brand); font-weight: 700; }
.btn.ghost { background: transparent; color: var(--brand-ink); border: 1px solid var(--line); font-weight: 400; }
.btn:disabled { filter: grayscale(.6); }
.err { margin: 0; padding: .5rem .75rem; border-radius: .75rem; background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); font-size: var(--fs-s); }
.err:empty { display: none; }
.status { margin: 0 0 .75rem; color: var(--good-ink); font-weight: 700; }
.status:empty { display: none; }

/* Ledger header search: a magnifier that turns into a box. No close "x" (R-UI-2): the magnifier inside the box closes it. */
[hidden] { display: none !important; }
.header-body > :first-child { margin-inline-start: auto; }
.hs { display: flex; align-items: center; }
.hs-box { display: none; flex: 1; min-width: 0; align-items: center; gap: .25rem; padding-inline: .25rem .875rem; border-radius: 999px; background: color-mix(in srgb, var(--on-bar) 16%, transparent); }
.hs-box:focus-within { outline: 2px solid var(--on-bar); }
.hs-close { flex: none; min-width: var(--hit); min-height: var(--hit); display: grid; place-items: center; color: var(--on-bar); }
.hs-input { flex: 1; min-width: 0; min-height: var(--hit); border: 0; background: none; color: var(--on-bar); font: inherit; }
.hs-input:focus { outline: none; }
.hs-input::placeholder { color: color-mix(in srgb, var(--on-bar) 72%, transparent); }
.hs.open { flex: 1; margin-inline-start: 0; }
.hs.open > .hbtn { display: none; }
.hs.open .hs-box { display: flex; }
.header-body.searching > .hbtn-add { display: none; }

/* Ledger list: type chips with counts and one colored card per contact (R-CARD-1: one color pair per card type) */
.chip-row { margin-bottom: .75rem; }
.type-chip .n { margin-inline-start: .375rem; font-weight: 400; }
.note { margin: 0 0 .75rem; padding: 1rem; text-align: center; color: var(--muted); }
.note:empty { display: none; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; transform-origin: top; }
.card { --c: var(--c-customer); --ink: var(--c-customer-ink); position: relative; display: grid; gap: .625rem; padding: .625rem .75rem; background: var(--card); border: 1px solid var(--line); border-inline-start: .3125rem solid var(--c); border-radius: var(--radius); }
.card-top { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }
.card[data-type=supplier] { --c: var(--c-supplier); --ink: var(--c-supplier-ink); }
.card[data-type=owner] { --c: var(--c-owner); --ink: var(--c-owner-ink); }
.card[data-type=partner] { --c: var(--c-partner); --ink: var(--c-partner-ink); }
.card[data-type=seller] { --c: var(--c-seller); --ink: var(--c-seller-ink); }
.card-main { flex: 1; min-width: 0; display: grid; }
.card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-m); }
.card-sub { justify-self: start; color: var(--muted); font-size: var(--fs-s); }
.card-bal { flex: none; display: grid; justify-items: end; gap: .125rem; text-align: end; }
.card-bal small { font-size: var(--fs-s); color: var(--muted); }
.balance { padding: .125rem .75rem; border-radius: .75rem; white-space: nowrap; font-size: var(--fs-m); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--text) 8%, var(--card)); color: var(--text); }
.balance.pos { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); }
.balance.neg { background: color-mix(in srgb, var(--good) 16%, var(--card)); color: var(--good-ink); }
.more { width: 100%; margin-top: .75rem; }
.card-av { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); }
.card-av-i { display: grid; place-items: center; font-weight: 700; font-size: var(--fs-m); background: color-mix(in srgb, var(--c) 18%, var(--card)); color: var(--ink); }
.photo-row { display: flex; align-items: center; gap: .75rem; }
.photo-prev { flex: none; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.photo-btn { display: inline-flex; align-items: center; cursor: pointer; }
.photo-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Card swipe and the in-card panels (phase 9, 10). touch-action keeps vertical scroll native while horizontal drags reach the gesture code;
   the dragged card shows a color hint by meaning (payment = good, debt = bad; instant, nothing fades) and springs back. An open panel is part of the card. */
.card { touch-action: pan-y; }
.card.swiping { transition: none; user-select: none; }
.card.spring-back { transition: transform var(--t-spring) var(--spring); }
.card-hint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; visibility: hidden; }
.card.dir-r .card-hint { visibility: visible; background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 16%, transparent), transparent 55%); }
.card.dir-l .card-hint { visibility: visible; background: linear-gradient(270deg, color-mix(in srgb, var(--good) 16%, transparent), transparent 55%); }
.card.open { box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--c) 18%, transparent); }
.card-panel { padding-top: .625rem; border-top: 1px dashed var(--line); transform-origin: top; }
.card-panel > .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.panel-title { font-size: var(--fs-m); }
.debt-rows { display: grid; gap: .5rem; }
.debt-row { display: grid; grid-template-columns: 1fr 7rem auto; gap: .5rem; align-items: center; }
.hbtn.row-x { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); }
.debt-sum { color: var(--muted); font-size: var(--fs-s); }
.btn.ghost { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }

:root[data-theme=dark] {
  --brand: #5b8cff; --bar: #16275c; --brand-strong: #3d6bf0; --brand-ink: #8fb0ff; --on-brand: #fff; --on-bar: #fff;
  --bg: #0f1319; --card: #171d26; --text: #e8ecf3; --muted: #9aa5b8; --line: #283140;
  --bad: #f04438; --bad-ink: #fda29b; --warn: #fdb022; --warn-ink: #fec84b; --good: #32d583; --good-ink: #6ce9a6;
  --c-customer: #22d3ee; --c-customer-ink: #67e8f9;
  --c-supplier: #fb923c; --c-supplier-ink: #fdba74;
  --c-owner: #a78bfa; --c-owner-ink: #c4b5fd;
  --c-partner: #f472b6; --c-partner-ink: #f9a8d4;
  --c-seller: #a3e635; --c-seller-ink: #bef264;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The one fixed-px value: the base of the rem scale. Everything else is rem/em (R-CSS-2). */
html { font-size: calc(16px * var(--ui-scale)); -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: var(--fs-m) / 1.7 var(--font); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { display: inline-flex; }
.ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.boot { padding: 1.5rem; text-align: center; }

/* Shell: fixed frame = header, scrolling view, bottom tab bar. position: fixed + inset 0 = exactly the visible area. */
#app { position: fixed; inset: 0; width: 100%; max-width: 56rem; margin-inline: auto; display: flex; flex-direction: column; background: var(--bg); }
.header { flex: none; background: var(--bar); color: var(--on-bar); padding: env(safe-area-inset-top) 1rem 0; }
.header-body { min-height: var(--header-h); display: flex; align-items: center; gap: .75rem; }
.view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }

.empty { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 3.5rem 1.5rem; }
.empty h2 { font-size: var(--fs-l); font-weight: 700; }
.empty p { color: var(--muted); max-width: 32ch; }

.nav { flex: none; display: flex; gap: .25rem; background: var(--card); border-top: 1px solid var(--line); padding: .375rem .5rem calc(env(safe-area-inset-bottom) + .375rem); }
.nav-item { flex: 1; min-height: calc(var(--nav-h) - .75rem); display: grid; justify-items: center; align-content: center; gap: .125rem; font-size: var(--fs-s); color: var(--muted); border-radius: .875rem; }
.nav-item.on { background: var(--brand-strong); color: var(--on-brand); font-weight: 700; }

/* Motion (R-UI-6): springy/jelly, transform only. Never opacity: nothing fades or dissolves. */
a, button, [data-sfx], .press { transition: transform var(--t-spring) var(--spring); }
a:active, button:active, [data-sfx]:active, .press:active { transform: scale(.92, .88); transition-duration: var(--t-press); }
.nav-item.on .ico { animation: jelly var(--t-spring) var(--spring) 1; }
.pop { animation: pop var(--t-spring) var(--spring) 1; }
@keyframes jelly { 0% { transform: scale(.6, 1.25); } 45% { transform: scale(1.25, .8); } 100% { transform: none; } }
@keyframes pop { from { transform: translateY(.75rem) scale(.94); } }
/* Reduced motion removes every animation and transition; sound and haptics stay (they have their own mute) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }