/* GOODLOAD — एक ग्राहक के हिसाब का रूप
   ═══════════════════════════════════════════════════════════════
   सिर्फ़ `#khataek` पर्दे के अंदर की चीज़ें, और खाते के पन्ने का
   वह एक छोटा बटन जो यहाँ लाता है। यह file हटा दीजिए तो बाक़ी app
   वैसी की वैसी चलती रहेगी।

   ⚠️ कहीं pixel में चौड़ाई नहीं (css/01-rang.css का नियम) — सब
      rem, %, flex और grid में, ताकि 320px वाले पुराने फ़ोन पर और
      200% बड़े अक्षरों पर भी पन्ना बाहर न निकले।
   ═══════════════════════════════════════════════════════════════ */

/* ── ऊपर के तीन आँकड़े ───────────────────────────────────── */
#khataek .ke-top{ padding:.85rem .9rem; }

#khataek .ke-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
}
#khataek .ke-3 > div{
  background:var(--bg2);
  border-radius:.7rem;
  padding:.55rem .35rem;
  text-align:center;
  min-width:0;
}
#khataek .ke-3 b{
  display:block;
  font-size:.95rem; font-weight:800; color:var(--txt);
  line-height:1.2;
  /* ⚠️ बड़ी रकम (₹12,45,000) तोड़नी ही पड़ती है, वरना तीन खानों
     वाला grid चौड़ा होकर पूरा पन्ना बग़ल में खिसका देता है। */
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
#khataek .ke-3 b.ok{ color:var(--green); }
#khataek .ke-3 b.na{ color:var(--red); }
#khataek .ke-3 span{
  display:block; margin-top:.15rem;
  font-size:.63rem; font-weight:700; color:var(--txt3);
}
#khataek .ke-kitne{
  display:block; margin-top:.6rem; text-align:center;
  font-size:.7rem; font-weight:700; color:var(--txt3);
}

/* ── एक बिल की पंक्ति ────────────────────────────────────── */
#khataek .ke-bill{ cursor:pointer; }
#khataek .ke-bill .row-t{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
}
#khataek .ke-bill .row-s{
  /* तारीख़ + दो रकमें — छोटे पर्दे पर टूटकर दिखें, कटें नहीं */
  overflow-wrap:anywhere;
}
#khataek .ke-bill .row-amt{
  font-variant-numeric:tabular-nums;
}

/* चुका हुआ / बाक़ी — रंग के साथ शब्द भी, सिर्फ़ रंग पर भरोसा नहीं */
#khataek .ke-tag{
  font-size:.6rem; font-weight:800;
  padding:.1em .45em; border-radius:.3rem;
  white-space:nowrap;
}
#khataek .ke-tag.ok{ background:#E7F4EE; color:#0A6D4E; }
#khataek .ke-tag.na{ background:#FDECEE; color:#9C2530; }

/* ── खाते के पन्ने पर "पूरा हिसाब" वाला छोटा बटन ───────────
   यह `#khataek` के बाहर है क्योंकि यह खाते की पंक्ति पर लगता है। */
.kh-entry .ke-jao{
  grid-column:1 / -1;
  justify-self:end;
  background:none; border:none;
  font-size:.72rem; font-weight:800; color:var(--p2);
  padding:.35rem .1rem 0;
  cursor:pointer;
  text-decoration:underline;
}
.kh-entry .ke-jao:active{ opacity:.7; }

/* ग्राहक बदलने वाले पर्दे पर वही रास्ता */
#grahaknew .ke-jao-bada{ margin-top:.2rem; }