:root{
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --brand:#0f172a; --accent:#0d9488; --accent2:#0891b2;
  --warn:#b45309; --danger:#b91c1c; --ok:#15803d;
  --r:14px; --sh:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;
  padding-bottom:78px;
}
.hide{display:none !important}

/* ---------- top bar ---------- */
header{
  position:sticky; top:0; z-index:30; background:var(--brand); color:#fff;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 8px rgba(15,23,42,.25);
}
header .t{font-weight:700; font-size:16px; line-height:1.2}
header .s{font-size:11.5px; opacity:.75; margin-top:1px}
header .grow{flex:1; min-width:0}
header .t,header .s{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.iconbtn{
  background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:10px;
  padding:7px 11px; font-size:13px; font-weight:600; cursor:pointer;
}
.iconbtn:active{background:rgba(255,255,255,.25)}

/* ---------- tabs ---------- */
nav.tabs{
  position:sticky; top:57px; z-index:25; display:flex; background:#fff;
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  flex:1 0 auto; min-width:88px; padding:11px 12px; border:0; background:none;
  font:600 13.5px/1 inherit; color:var(--muted); cursor:pointer;
  border-bottom:2.5px solid transparent; white-space:nowrap;
}
nav.tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- layout ---------- */
main{padding:12px; max-width:1100px; margin:0 auto}
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:14px; margin-bottom:12px}
.card h3{margin:0 0 10px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.row>*{min-width:0}
.grow{flex:1}
.sp{height:8px}
.muted{color:var(--muted); font-size:12.5px}
.right{text-align:right}
.center{text-align:center}

/* ---------- form ---------- */
label.f{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 4px}
input,select,textarea{
  width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:10px;
  font:15px/1.3 inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
input[type=number]{-moz-appearance:textfield}
textarea{resize:vertical; min-height:60px}
.field{margin-bottom:10px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.gtitle{grid-column:1/-1; font:700 12px/1 inherit; color:var(--accent2);
  text-transform:uppercase; letter-spacing:.05em; margin:4px 0 -2px}

button.b{
  padding:11px 16px; border:0; border-radius:11px; background:var(--accent); color:#fff;
  font:700 14.5px/1 inherit; cursor:pointer;
}
button.b:active{filter:brightness(.92)}
button.b[disabled]{opacity:.5}
button.b.alt{background:#e2e8f0; color:var(--ink)}
button.b.dark{background:var(--brand)}
button.b.danger{background:var(--danger)}
button.b.sm{padding:7px 11px; font-size:13px; border-radius:9px}
button.b.wide{width:100%}

/* ---------- totals strip ---------- */
.tot{display:flex; gap:8px; flex-wrap:wrap}
.tot div{
  flex:1 1 90px; background:#f8fafc; border:1px solid var(--line);
  border-radius:11px; padding:9px 10px;
}
.tot b{display:block; font-size:19px; line-height:1.15}
.tot span{font-size:11px; color:var(--muted)}
.tot .hi b{color:var(--accent)}

/* ---------- lists ---------- */
.item{
  border:1px solid var(--line); border-radius:12px; padding:10px 11px;
  margin-bottom:8px; background:#fff;
}
.item.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.item .hd{display:flex; align-items:center; gap:9px; cursor:pointer}
.item .nm{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .amt{font-weight:700; font-variant-numeric:tabular-nums}
.pill{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700;
  background:#e2e8f0; color:var(--muted);
}
.pill.ok{background:#dcfce7; color:var(--ok)}
.pill.no{background:#fee2e2; color:var(--danger)}
.pill.off{background:#fef3c7; color:var(--warn)}
.pill.adm{background:#e0e7ff; color:#4338ca}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{border:1px solid var(--line); padding:6px 8px; text-align:right; white-space:nowrap}
th{background:#f8fafc; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
td.l,th.l{text-align:left}
tr.total td{font-weight:800; background:#f1f5f9}
tbody tr:nth-child(even) td{background:#fcfdfe}

/* ---------- toast / modal ---------- */
#toast{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:11px;
  font-size:13.5px; z-index:80; max-width:88vw; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
#toast.err{background:var(--danger)}
#toast.ok{background:var(--ok)}
.modal{
  position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:60;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
.modal .box{
  background:#fff; width:100%; max-width:560px; border-radius:18px 18px 0 0;
  padding:16px; max-height:92vh; overflow:auto;
}
.modal h3{margin:0 0 12px; font-size:16px; text-transform:none; color:var(--ink)}
@media(min-width:640px){
  .modal{align-items:center; padding:16px}
  .modal .box{border-radius:16px}
}

/* ---------- login ---------- */
#login{max-width:380px; margin:8vh auto; padding:0 16px}
#login .logo{text-align:center; margin-bottom:18px}
#login .logo b{font-size:23px; display:block}
#login .logo span{color:var(--muted); font-size:13px}

/* ---------- print ---------- */
/* printBox usi page ke andar bhara jaata hai; print ke waqt baaki sab chhup jaata hai */
#printBox{display:none}
body.printing #printBox{display:block; background:#fff; padding:10px}
body.printing #shell,body.printing #login,body.printing #modalHost,body.printing #toast{display:none !important}
#printBox table{border-collapse:collapse; width:100%; font-size:11px}
#printBox th,#printBox td{border:1px solid #999; padding:3px 5px; text-align:right}
#printBox th{background:#eee}
#printBox td.l,#printBox th.l{text-align:left}
#printBox tr.total td{background:#eee; font-weight:800}

@media print{
  body{background:#fff; padding:0; font-size:11px}
  header,nav.tabs,.noprint,#toast{display:none !important}
  main{padding:0; max-width:none}
  .card{box-shadow:none; border-radius:0; padding:0; margin:0}
  table{font-size:10px; width:100%}
  th,td{padding:2px 4px; border:1px solid #999}
  th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  tr.total td{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .prthead{display:block !important}
  body.printing{padding:0}
  body.printing #printBox{padding:0}
  #printBox th,#printBox tr.total td{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:A4 landscape; margin:9mm}
}
.prthead{display:none; text-align:center; margin-bottom:8px}
.prthead b{font-size:15px}
.prthead div{font-size:11px}