/* Munshi: Hisaab Kitaab - simple, big, easy. Logical properties make Urdu (RTL) flip automatically. */
@font-face { font-family: 'Noto Nastaliq Urdu'; src: url('/fonts/NotoNastaliqUrdu-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Noto Nastaliq Urdu'; src: url('/fonts/NotoNastaliqUrdu-Bold.ttf'); font-weight: 700; }

:root { --in:#15803d; --in-bg:#dcfce7; --out:#b91c1c; --out-bg:#fee2e2; --brand:#1e3a8a; --bg:#f3f4f6; --card:#fff; --line:#e5e7eb; --text:#111827; --muted:#6b7280; }
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height:1.5; }
html[dir=rtl] body, html[dir=rtl] input, html[dir=rtl] select, html[dir=rtl] textarea, html[dir=rtl] button { font-family:'Noto Nastaliq Urdu', serif; line-height:2.1; }
a { color: var(--brand); text-decoration:none; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; } h2 { font-size:1.15rem; margin:0 0 .6rem; }
.num { direction:ltr; unicode-bidi:isolate; display:inline-block; font-variant-numeric: tabular-nums; }

/* Top bar + navigation */
.top { background:var(--brand); color:#fff; display:flex; align-items:center; gap:.6rem; padding:.5rem 1rem; position:sticky; top:0; z-index:5; }
.top .brand { font-weight:700; font-size:1.1rem; color:#fff; flex:1; }
.top a, .top button.link { color:#fff; background:none; border:0; font-size:.9rem; cursor:pointer; padding:.3rem .5rem; }
.lang a { border:1px solid #fff8; border-radius:6px; margin-inline-start:.2rem; }
.lang a.on { background:#fff; color:var(--brand); }
.nav { display:flex; gap:.4rem; overflow-x:auto; padding:.6rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.nav a { white-space:nowrap; padding:.5rem .8rem; border-radius:10px; color:var(--text); font-weight:600; font-size:.95rem; }
.nav a.on { background:var(--brand); color:#fff; }
.wrap { max-width:1000px; margin:0 auto; padding:1rem; }

/* Cards, buttons, forms */
.card { background:var(--card); border-radius:14px; padding:1rem; box-shadow:0 1px 3px #0001; margin-bottom:1rem; }
.grid { display:grid; gap:.8rem; } .g2 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .g4 { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.btn { display:inline-block; border:0; border-radius:12px; padding:.8rem 1.2rem; font-size:1rem; font-weight:700; cursor:pointer; background:var(--brand); color:#fff; text-align:center; }
.btn.in { background:var(--in); } .btn.out { background:var(--out); } .btn.gray { background:#e5e7eb; color:var(--text); } .btn.small { padding:.4rem .8rem; font-size:.85rem; border-radius:8px; } .btn.danger { background:#fff; color:var(--out); border:2px solid var(--out); }
.btn.big { padding:1.4rem 1rem; font-size:1.4rem; width:100%; }
label { display:block; font-weight:700; margin:.9rem 0 .3rem; }
input, select, textarea { width:100%; padding:.8rem; font-size:1rem; border:2px solid #d1d5db; border-radius:10px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); }
input[type=checkbox], input[type=radio] { width:auto; }
input.amount { font-size:2rem; font-weight:700; text-align:center; direction:ltr; }
.hint { color:var(--muted); font-size:.85rem; font-weight:400; }
.err { color:var(--out); font-size:.9rem; margin:.2rem 0; } .ok { background:var(--in-bg); color:var(--in); padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; font-weight:700; } .bad { background:var(--out-bg); color:var(--out); padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; font-weight:700; }
.methods { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; } .methods label { margin:0; } .methods input { display:none; }
.methods span { display:block; text-align:center; padding:.7rem .2rem; border:2px solid #d1d5db; border-radius:10px; font-weight:700; font-size:.9rem; cursor:pointer; }
.methods input:checked + span { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Money */
.in-c { color:var(--in); } .out-c { color:var(--out); }
.stat { text-align:center; } .stat .v { font-size:1.5rem; font-weight:800; } .stat .l { color:var(--muted); font-size:.85rem; }
.balance { background:var(--brand); color:#fff; text-align:center; padding:1.2rem; border-radius:16px; margin-bottom:1rem; } .balance .v { font-size:2.2rem; font-weight:800; }
.tile { display:block; background:#fff; border-radius:14px; text-align:center; padding:1rem .5rem; font-weight:700; color:var(--text); box-shadow:0 1px 3px #0001; position:relative; } .tile .ic { font-size:2rem; display:block; }
.badge { background:var(--out); color:#fff; border-radius:99px; font-size:.75rem; padding:0 .5rem; position:absolute; top:6px; inset-inline-end:10px; }
.pill { display:inline-block; padding:.1rem .6rem; border-radius:99px; font-size:.8rem; font-weight:700; background:#e5e7eb; }
.pill.pending { background:#fef3c7; color:#92400e; } .pill.partial { background:#dbeafe; color:#1e40af; } .pill.paid, .pill.active { background:var(--in-bg); color:var(--in); } .pill.blocked { background:var(--out-bg); color:var(--out); }

/* Lists and tables */
.row { display:flex; align-items:center; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--line); } .row:last-child { border:0; }
.row .grow { flex:1; min-width:0; } .row .t { font-weight:700; } .row .s { color:var(--muted); font-size:.85rem; }
.dot { width:14px; height:14px; border-radius:50%; flex:none; }
.amt { font-weight:800; font-size:1.05rem; white-space:nowrap; }
.tbl-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.85rem; } th { background:#000080; color:#fff; padding:.5rem; } td { padding:.5rem; border-bottom:1px solid var(--line); vertical-align:top; } td.r { text-align:end; direction:ltr; } tr.tot td { font-weight:800; border-top:2px solid #000; background:#f3f4f6; }
.bars { display:flex; gap:4px; align-items:flex-end; height:140px; overflow-x:auto; padding-top:.5rem; } .bars .b { flex:1 0 22px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; } .bars .b i { display:block; width:45%; min-height:2px; } .bars .b small { font-size:.6rem; color:var(--muted); }
.pie { width:140px; height:140px; border-radius:50%; margin:auto; }
.tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.8rem; } .tabs a { padding:.5rem 1rem; border-radius:99px; background:#e5e7eb; color:var(--text); font-weight:700; } .tabs a.on { background:var(--brand); color:#fff; }
.auth { max-width:420px; margin:2rem auto; } .center { text-align:center; } .mt { margin-top:1rem; } .right { text-align:end; } .flex { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
img.receipt { max-width:100%; border-radius:10px; } img.avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; background:#e5e7eb; }
@media (min-width:700px) { html { font-size:17px; } }
@media print { .top, .nav, .btn { display:none; } }