/* GOODLOAD — तीन लकीर वाला मेनू
   ═══════════════════════════════════════════════════════════════
   बाईं तरफ़ से सरककर आता है। पीछे काला पर्दा, ताकि साफ़ पता चले
   कि अभी मेनू ऊपर है और बाक़ी app पीछे।

   ⚠️ नाप का वही नियम — चौड़ाई rem और % में, pixel में नहीं।
      320px वाले फ़ोन पर भी पूरा दिखे और बड़े फ़ोन पर भद्दा न लगे।
   ═══════════════════════════════════════════════════════════════ */

#menu-parda{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,18,36,.45);
  opacity:0; transition:opacity .2s ease;
}
#menu-parda.on{ opacity:1; }
#menu-parda[hidden]{ display:none; }

#menu{
  position:fixed; z-index:61;
  inset-block:0; inset-inline-start:0;
  width:min(82%, 19rem);
  background:var(--bg2);
  box-shadow:0 0 40px rgba(10,33,68,.3);
  display:flex; flex-direction:column;
  transform:translateX(-102%);
  transition:transform .22s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}
#menu.on{ transform:none; }
#menu[hidden]{ display:none; }

/* दाईं से बाईं लिखने वाली भाषा में दूसरी तरफ़ से आए */
[dir="rtl"] #menu{ transform:translateX(102%); }
[dir="rtl"] #menu.on{ transform:none; }

/* ── ऊपर का हिस्सा — कौन अंदर आया हुआ है ─────────────────── */
.mn-sir{
  display:flex; align-items:center; gap:11px;
  background:var(--p); color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 15px 14px;
}
.mn-av{
  flex:none; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--acc); color:#fff;
  display:grid; place-items:center;
  font-size:1.1rem; font-weight:800;
}
.mn-sir div{ min-width:0; }
.mn-sir b{ display:block; font-size:.92rem; font-weight:800; line-height:1.3;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mn-sir small{ display:block; font-size:.68rem; font-weight:600; opacity:.8; margin-top:1px; }

/* ── पंक्तियाँ ──────────────────────────────────────────── */
#mn-list{ padding:8px 0 14px; }

.mn-row{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:2.9rem; padding:10px 15px;
  appearance:none; border:0; background:none; font:inherit;
  text-align:start; cursor:pointer; color:var(--txt);
}
.mn-row:active{ background:#E6EDFA; }
.mn-row .ci{ flex:none; width:var(--ic-md); height:var(--ic-md); color:var(--p2); }
.mn-t{ flex:1; min-width:0; font-size:.86rem; font-weight:700; line-height:1.25; }
.mn-t small{ display:block; font-size:.64rem; font-weight:600; color:var(--txt3); line-height:1.3; }

.mn-row.bahar .ci{ color:var(--red); }
.mn-row.bahar .mn-t{ color:var(--red); }

/* काग़ज़ की तारीख़ निकल रही हो तो लाल गिनती */
.mn-chet{
  flex:none; min-width:1.35rem; height:1.35rem; padding:0 .35rem;
  border-radius:1rem; background:var(--red); color:#fff;
  display:grid; place-items:center;
  font-size:.66rem; font-weight:800;
}

.mn-lakeer{ height:1px; background:var(--border); margin:7px 15px; }