/* ---- Jameel Noori Nastaleeq (Urdu) ---- */
@font-face{font-family:"JameelNoori";src:url("../fonts/JameelNoori.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Urdu letters only (Arabic script ranges) - so Urdu data typed/shown in English mode also uses Jameel Noori */
@font-face{font-family:"JameelNooriUrdu";src:url("../fonts/JameelNoori.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:140%;
 unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:root{--minfs:0px;--ff:"JameelNooriUrdu","Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif}
html[lang=ur]{--minfs:20px;--ff:"JameelNoori","Segoe UI",Arial,sans-serif}
:root{--bg:#f1f5f9;--card:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--primary:#4f46e5;--primary2:#7c3aed;
--in:#10b981;--in-bg:#d1fae5;--out:#ef4444;--out-bg:#fee2e2;--shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);--input:#f8fafc}
[data-theme=dark]{--bg:#0b1220;--card:#111a2e;--text:#e5e7eb;--muted:#94a3b8;--border:#1f2a44;--in-bg:rgba(16,185,129,.15);--out-bg:rgba(239,68,68,.15);--shadow:0 8px 24px rgba(0,0,0,.35);--input:#0d1526}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff);background:var(--bg);color:var(--text);font-size:max(14.5px,var(--minfs))}
a{color:var(--primary);text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:248px;background:linear-gradient(180deg,#0f172a 0%,#1e1b4b 100%);color:#cbd5e1;position:fixed;inset-block:0;inset-inline-start:0;display:flex;flex-direction:column;z-index:50;transition:transform .25s}
.brand{padding:22px 20px;display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;font-size:max(20px,var(--minfs));color:#fff;flex:none}
.brand b{color:#fff;font-size:max(16px,var(--minfs));display:block;line-height:1.2}.brand small{color:#94a3b8;font-size:max(11.5px,var(--minfs))}
.nav{padding:14px 12px;flex:1;overflow:auto}
.nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;color:#cbd5e1;margin-bottom:4px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.4)}
.nav .sep{font-size:max(11px,var(--minfs));text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:14px 14px 6px}
.nav a.g{color:#6ee7b7}.nav a.r{color:#fca5a5}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:max(12px,var(--minfs));color:#94a3b8}
.main{margin-inline-start:248px;flex:1;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:max(19px,var(--minfs));margin:0;flex:1}
.burger{display:none;background:none;border:0;font-size:max(24px,var(--minfs));color:var(--text);cursor:pointer}
.chip{background:var(--input);border:1px solid var(--border);padding:7px 12px;border-radius:999px;font-size:max(13px,var(--minfs));color:var(--text)}
.content{padding:26px 28px 50px;max-width:1500px}
.grid{display:grid;gap:18px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g21{grid-template-columns:2fr 1fr}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 14px;font-size:max(15.5px,var(--minfs));display:flex;align-items:center;justify-content:space-between;gap:10px}
.stat{position:relative;overflow:hidden}
.stat .lbl{color:var(--muted);font-size:max(13px,var(--minfs));font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:max(27px,var(--minfs));font-weight:800;margin-top:8px;letter-spacing:-.02em}
.stat .sub{font-size:max(12.5px,var(--minfs));color:var(--muted);margin-top:6px}
.stat .ic{position:absolute;inset-inline-end:16px;top:16px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:max(20px,var(--minfs))}
.stat.bal{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:0}.stat.bal .lbl,.stat.bal .sub{color:#e0e7ff}.stat.bal .ic{background:rgba(255,255,255,.2)}
.stat.in .ic{background:var(--in-bg)}.stat.out .ic{background:var(--out-bg)}.stat.pp .ic{background:#ede9fe}
.stat.in .val,.pos{color:var(--in)}.stat.out .val,.neg{color:var(--out)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 18px;font-weight:600;font-size:max(14px,var(--minfs));cursor:pointer;background:var(--primary);color:#fff;font-family:inherit}
.btn:hover{filter:brightness(1.08)}.btn.in{background:var(--in)}.btn.out{background:var(--out)}
.btn.ghost{background:var(--input);color:var(--text);border:1px solid var(--border)}.btn.sm{padding:6px 11px;font-size:max(13px,var(--minfs));border-radius:8px}.btn.lg{padding:14px 26px;font-size:max(16px,var(--minfs))}
.btn.danger{background:var(--out-bg);color:var(--out)}
label{display:block;font-weight:600;font-size:max(13px,var(--minfs));margin-bottom:6px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--input);color:var(--text);font-size:max(14.5px,var(--minfs));font-family:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.field{margin-bottom:16px}.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}.filters>div{flex:1;min-width:140px}.filters .field{margin:0}
table{width:100%;border-collapse:collapse}
th{text-align:start;font-size:max(12px,var(--minfs));text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--input)}
.tr{text-align:end}.tw{overflow-x:auto}
.badge{padding:4px 11px;border-radius:999px;font-size:max(12px,var(--minfs));font-weight:700;display:inline-block}
.badge.in{background:var(--in-bg);color:var(--in)}.badge.out{background:var(--out-bg);color:var(--out)}
.muted{color:var(--muted)}.empty{text-align:center;color:var(--muted);padding:32px 10px}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-weight:600}
.flash.success{background:var(--in-bg);color:var(--in)}.flash.error{background:var(--out-bg);color:var(--out)}
.tabs{display:flex;gap:6px;background:var(--input);padding:5px;border-radius:12px;border:1px solid var(--border);width:fit-content;margin-bottom:16px;flex-wrap:wrap}
.tabs a,.tabs button{padding:8px 16px;border-radius:9px;color:var(--muted);font-weight:600;border:0;background:none;cursor:pointer;font-size:max(14px,var(--minfs));font-family:inherit}
.tabs .on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.type-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.type-pick input{display:none}
.type-pick label{margin:0;padding:18px;border-radius:14px;border:2px solid var(--border);text-align:center;font-size:max(16px,var(--minfs));font-weight:800;cursor:pointer;color:var(--muted);background:var(--input)}
.type-pick input[value=in]:checked+label{border-color:var(--in);background:var(--in-bg);color:var(--in)}
.type-pick input[value=out]:checked+label{border-color:var(--out);background:var(--out-bg);color:var(--out)}
.amount{font-size:max(26px,var(--minfs))!important;font-weight:800;padding:14px!important}
.chart-wrap{position:relative;width:100%}canvas{width:100%;display:block}
.tip{position:absolute;pointer-events:none;background:#0f172a;color:#fff;padding:8px 11px;border-radius:8px;font-size:max(12.5px,var(--minfs));display:none;z-index:5;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.legend{display:flex;gap:16px;font-size:max(13px,var(--minfs));color:var(--muted);flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.list-item:last-child{border:0}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.flex{display:flex;align-items:center;gap:12px}.gap{gap:8px}.sp{justify-content:space-between}.wrap{flex-wrap:wrap}.mt{margin-top:18px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px}.pager a,.pager span{padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:var(--card)}.pager .cur{background:var(--primary);color:#fff;border-color:var(--primary)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:center;z-index:100;padding:16px}.modal.open{display:grid}.modal .card{width:100%;max-width:440px}
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#4f46e5 0,#1e1b4b 45%,#0f172a 100%);padding:20px}
.login .card{width:100%;max-width:400px;padding:34px}.login .logo{margin:0 auto 14px;width:60px;height:60px;font-size:max(30px,var(--minfs))}
.print-only{display:none}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g21,.g3{grid-template-columns:1fr}}
@media(max-width:820px){.sidebar{transform:translateX(-100%)}[dir=rtl] .sidebar{transform:translateX(100%)}.sidebar.open,[dir=rtl] .sidebar.open{transform:none}.main{margin-inline-start:0}.burger{display:block}.content{padding:16px}.topbar{padding:12px 16px}.g2,.row{grid-template-columns:1fr}.chip.hide-m{display:none}}
@media(max-width:520px){.g4{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.no-print,.flash{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:1px solid #ccc}body{background:#fff;color:#000}.print-only{display:block}}

/* ---- Urdu data in English mode: inputs/cells at least 18px so Nastaleeq stays readable ---- */
input,select,textarea{font-size:max(16px,var(--minfs))}
/* ---- Urdu language mode: Jameel Noori, bold, minimum 18px, right-to-left ---- */
html[lang=ur] body,html[lang=ur] input,html[lang=ur] select,html[lang=ur] textarea,html[lang=ur] button,html[lang=ur] .btn,html[lang=ur] .tip{font-family:var(--ff);font-weight:700}
html[lang=ur] body{font-size:21px;line-height:1.9}
html[lang=ur] b,html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3,html[lang=ur] th{font-weight:700}
html[lang=ur] th{text-transform:none;letter-spacing:0}
html[lang=ur] .stat .lbl{text-transform:none;letter-spacing:0}
html[lang=ur] .nav .sep{text-transform:none;letter-spacing:0}
html[lang=ur] .topbar h1{line-height:2}
html[lang=ur] .btn{line-height:1.9;padding:6px 18px 12px}
html[lang=ur] .btn.sm{padding:3px 12px 8px}
html[lang=ur] .btn.lg{padding:10px 26px 16px}
html[lang=ur] .chip{line-height:1.9;padding:3px 14px 9px}
html[lang=ur] .badge{line-height:1.8;padding:2px 12px 7px}
html[lang=ur] .tabs a,html[lang=ur] .tabs button{padding:5px 16px 10px;line-height:1.9}
html[lang=ur] input,html[lang=ur] select,html[lang=ur] textarea{line-height:1.9;padding:6px 13px 10px}
html[lang=ur] input.amount{line-height:1.6}
html[lang=ur] label{margin-bottom:2px;line-height:1.9}
html[lang=ur] .nav a{padding:6px 14px 10px}
html[lang=ur] .stat .val{line-height:1.5}
html[lang=ur] td,html[lang=ur] th{padding-top:8px;padding-bottom:12px}
html[lang=ur] .avatar{line-height:1;padding-bottom:6px}
html[lang=ur] .type-pick label{line-height:1.8}
html[lang=ur] .type-pick label small{font-weight:700}
html[lang=ur] input[type=date],html[lang=ur] input[type=number],html[lang=ur] input[type=tel],html[lang=ur] .amount{direction:ltr;text-align:right}
html[lang=ur] .chart-wrap{direction:ltr}
html[lang=ur] .tip{direction:rtl;text-align:right}
html[lang=ur] .pager a,html[lang=ur] .pager span{padding:3px 13px 8px}
html[lang=ur] .login .card{text-align:center}
/* language chip */
.lang-chip{cursor:pointer;font-weight:700;white-space:nowrap}
.lang-chip b{opacity:.45}.lang-chip b.cur{opacity:1;color:var(--primary)}
.phone-sub{font-size:max(12px,var(--minfs))}
.tip{font-size:max(12.5px,var(--minfs))}
html[lang=ur] body,html[lang=ur] .btn,html[lang=ur] input{word-spacing:.3em}

/* ================= Cash Book PWA additions ================= */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.boot{min-height:100vh;display:grid;place-items:center;font-size:64px}
button{font-family:inherit}
.show-m{display:none}
/* sync chip */
.chip.sync{cursor:pointer;white-space:nowrap;border:1px solid var(--border);font-family:inherit}
.chip.sync.off{background:var(--out-bg);color:var(--out)}
.chip.sync.pend{background:#fef3c7;color:#92400e}
.chip.sync.busy{background:#e0e7ff;color:#3730a3}
[data-theme=dark] .chip.sync.pend{background:rgba(245,158,11,.18);color:#fbbf24}
[data-theme=dark] .chip.sync.busy{background:rgba(99,102,241,.2);color:#a5b4fc}
/* banners */
.banner{margin:0;padding:10px 28px;font-weight:600;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner.warn{background:#fef3c7;color:#92400e}.banner.err{background:var(--out-bg);color:var(--out)}
[data-theme=dark] .banner.warn{background:rgba(245,158,11,.15);color:#fbbf24}
/* toast */
.toast{position:fixed;inset-inline:16px;bottom:calc(84px + env(safe-area-inset-bottom));margin:auto;max-width:520px;padding:13px 18px;border-radius:14px;font-weight:700;z-index:300;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .35s;pointer-events:none;color:#fff;text-align:center}
.toast.success{background:#059669}.toast.error{background:#dc2626}
@media(min-width:821px){.toast{bottom:28px}}
/* sidebar backdrop + bottom nav (mobile) */
.sb-bd{display:none}
.bottomnav{display:none}
@media(max-width:820px){
  .sb-bd{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:none}
  .sidebar.open+.sb-bd{display:block}
  .topbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));gap:8px;flex-wrap:wrap}
  .topbar h1{font-size:max(17px,var(--minfs));min-width:90px}
  .banner{padding:10px 14px}
  .content{padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
  .hide-m{display:none!important}.show-m{display:block}
  .bottomnav{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.08)}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--muted);font-size:max(11.5px,var(--minfs));font-weight:700;padding:4px 2px;border-radius:12px;line-height:1.4}
  .bottomnav a i{font-style:normal;font-size:22px;line-height:1.3}
  .bottomnav a.on{color:var(--primary);background:var(--input)}
  .bottomnav a.g.on{color:var(--in)}.bottomnav a.r.on{color:var(--out)}
  html[lang=ur] .bottomnav a{font-size:15px;line-height:1.5}
  .stat .val{font-size:max(24px,var(--minfs))}
  .filters>div{min-width:44%}
  .btn.lg{padding:12px 20px}
  .card{padding:16px;border-radius:14px}
  th,td{padding:10px 8px}
  .tabs{width:100%}.tabs a,.tabs button{flex:1;text-align:center;padding:8px 8px}
  .login .card{padding:26px}
}
@media(max-width:520px){.dash-btns .btn{flex:1;justify-content:center}}
.sidebar{padding-top:env(safe-area-inset-top)}
/* ---------- receipt page ---------- */
body.rcpt{background:#e5e7eb}
.rp{padding:20px;color:#111}
.rp .bar{text-align:center;margin-bottom:16px}
.rp .bar button{padding:6px 16px 10px;border:0;border-radius:8px;background:#4f46e5;color:#fff;font-weight:600;cursor:pointer;margin:3px 4px;font-size:max(14px,var(--minfs));line-height:1.8}
.rp .bar .g{background:#fff;color:#111;border:1px solid #cbd5e1}
.rp .r{background:#fff;margin:auto;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.15);width:80mm;max-width:100%;font-size:max(13px,var(--minfs));color:#111}
.rp .r.a5{width:140mm;font-size:max(15px,var(--minfs));padding:34px}
.rp .c{text-align:center}.rp h2{margin:0 0 2px;font-size:1.3em}.rp .sm{color:#555;font-size:max(.88em,var(--minfs))}
.rp hr{border:0;border-top:1px dashed #888;margin:12px 0}
.rp .row{display:flex;justify-content:space-between;padding:4px 0;gap:10px}.rp .row b{text-align:end}
.rp .type{display:inline-block;border:2px solid;padding:3px 14px 8px;border-radius:6px;font-weight:800;margin:6px 0}
html[lang=en] .rp .type{letter-spacing:.06em}
.rp .in{color:#059669}.rp .out{color:#dc2626}
.rp .amt{font-size:2em;font-weight:800;text-align:center;margin:8px 0;direction:ltr}
.rp .sign{display:flex;justify-content:space-between;margin-top:36px}.rp .sign div{border-top:1px solid #333;padding-top:4px;width:44%;text-align:center;font-size:max(.85em,var(--minfs))}
@media print{
  body.rcpt{background:#fff}.rp{padding:0}.rp .r{box-shadow:none;margin:0}
  .bottomnav,.toast,.sb-bd,.banner{display:none!important}
  @page{margin:6mm}
}
/* ---- mobile polish ---- */
@media(max-width:820px){
  .topbar{flex-wrap:nowrap}
  .topbar h1{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .topbar .chip{padding:5px 9px;font-size:max(12px,var(--minfs));flex:none}
  html[lang=ur] .topbar .chip{padding:1px 10px 6px;font-size:16px}
  html[lang=ur] .topbar h1{font-size:20px}
  .row{gap:0 16px}
}
@media(max-width:520px){
  .g4{grid-template-columns:repeat(2,1fr);gap:12px}
  .g4>.stat.bal{grid-column:1/-1}
  .g4 .stat .val{font-size:max(20px,var(--minfs))}
  .g4 .stat .lbl{font-size:max(12px,var(--minfs))}
  .stat .ic{width:36px;height:36px}
}
@media(max-width:520px){
  .g4>.stat:not(.bal) .ic{display:none}
  .g4 .stat .val{font-size:max(18px,var(--minfs));word-break:break-word}
  .g4 .stat{padding:14px}
}