/* To‘lov ekrani — `sale_pay.js`. TZ 7.4.
 *
 * ⛔ NEGA ALOHIDA FAYL
 *
 * `sale.css` 502 qatorga yetdi (chegara 500) va bo‘linish chizig‘i
 * allaqachon bor edi: u SAVATNI chizadi, bu yerdagi qoidalar esa
 * KEYINGI ekranga — to‘lovga tegishli. `sale_side.css` bilan bir
 * xil naqsh.
 *
 * ⛔ «To‘lanadi» qutisi (`.due-box`) bu yerda EMAS: uni qaytarish
 * ekrani ham ishlatadi, shuning uchun `base.css` da (sabab
 * o‘sha yerda).
 */

.tenders .trow{background:#f2f8f5;border-radius:9px;
  margin-bottom:4px;color:var(--ink);gap:10px}
/* ⛔ Summa o‘ng chetda EMAS — «✕» undan keyin turadi. Busiz
   tugma raqamga yopishib qolardi va tasodifan bosilardi. */
.tenders .trow .money{margin-left:auto}
/* ⛔ `--tap` dan kichik: bu qator ichidagi tugma va u yonida
   summa turibdi. Qator balandligi 44px dan katta, ya'ni barmoq
   nishoni baribir yetarli (DIZAYN.md 5.1 ning ma'nosi — nishon
   o‘lchovi, belgining o‘zi emas). */
.tdrop{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:8px;
  background:#fff;box-shadow:var(--ctl-sh);color:var(--muted);
  font:inherit;font-size:var(--t-3);line-height:1;cursor:pointer}
.tdrop:hover{color:var(--danger)}
.tdrop:disabled{opacity:.5;cursor:default}

/* ── Jonli chek (BILLZ, 2026-09-17 surati) ─────────────── */

/* ⛔ TELEFONDA QOG‘OZ YO‘Q. U yerda kassirga tugmalar kerak va
   390 pikselda chek to‘lov maydonlarini ekrandan pastga surib
   yuborardi. Qog‘oz baribir bosiladi — ekranda ko‘rish
   kompyuterdagi qulaylik, zarurat emas. */
.paper{display:none}
.pay-side{min-width:0}

@media (min-width:900px){
  /* ⛔ ENI CHEKNING O‘ZI BELGILAYDI (`auto`), piksel bilan
     EMAS. Birinchi urinishda 330px yozgandim va qog‘oz o‘ralib
     ketdi: 48 belgilik qator sig‘may, `-----` chizig‘i ikkiga
     bo‘lindi va «Jami dona:» bilan «1» boshqa qatorga tushdi.
     Suratda ko‘rindi (CLAUDE.md 1.4).

     ⛔ Kenglik do‘kon SOZLAMASI ham: 80 mm da 48 belgi, 58 mm
     da 32. Pikselga qotirilsa, 58 mm printerli do‘konda qog‘oz
     yarim bo‘sh turardi. */
  .pay-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:20px;align-items:start}
  .paper{display:block;background:#fff;border-radius:var(--card-r);
    box-shadow:var(--card-sh);padding:16px 14px;min-height:120px}
}

/* ⛔ Bir xil kenglikdagi shrift MAJBURIY: chek ustunlari probel
   bilan tekislanadi (`receipt_service.line`). Oddiy shriftda
   «450 000» o‘ng chekkaga tushmasdi va ekran qog‘ozdan boshqa
   narsa ko‘rsatardi. */
/* ⛔ `pre` — `pre-wrap` EMAS. O‘ralgan chek YOLG‘ON: qog‘ozda
   qator bir dona bo‘ladi va kassir ekranda boshqa narsa
   ko‘rardi. Shablon qator uzunligini O‘ZI kafolatlaydi
   (`receipt_service.line`), ya'ni o‘ralishning hojati yo‘q. */
.paper-text{margin:0;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-1);line-height:1.35;color:var(--ink)}

/* ── BILLZ shakli (2026-09-17, BILLZ.md) ───────────────── */

/* ⛔ «SOTISH» TEPADA. Ilgari u eng pastda edi va telefonda
   ekrandan chiqib ketardi: kassir har savdoda pastga surishga
   majbur edi (suratda ko‘rindi, CLAUDE.md 1.4). BILLZ da ham
   «Оплатить» tepada, «Назад» yonida. */
.pay-head{gap:10px}
.pay-go{width:auto;min-width:130px;margin:0 0 0 auto;padding:0 20px}

/* ⛔ IKKITA RAQAM, yonma-yon. Bitta «To‘lanadi» kamlik qilardi:
   kassir 400 000 kiritgach chekning JAMISI qancha ekanini
   ekrandan yo‘qotardi.

   «Jami» qora va qimirlamaydi, «To‘lash kerak» yashil va har
   to‘lovda kamayadi — rang farqi ma'noni aytadi. */
.pay-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:14px 16px;border-radius:14px;margin-bottom:14px;
  background:#fff;box-shadow:var(--card-sh)}
.pay-nums .k{display:block;font-size:var(--t-2);color:var(--muted)}
.pay-nums .v{font-size:var(--t-6);font-weight:600;color:var(--ink)}
.pay-nums .left .k,.pay-nums .left .v{color:var(--ok)}

/* ⛔ UCH USTUN — BILLZ dagidek. Katak soni do‘konga qarab
   o‘zgaradi: ro‘yxat sozlamadan keladi, to‘r shakli esa
   ko‘chirilgan (CLAUDE.md 1.3). */
.tn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tn{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:8px;min-height:var(--tap);padding:0 12px;border:0;border-radius:12px;
  background:#fff;box-shadow:var(--ctl-sh);font:inherit;
  font-size:var(--t-3);color:var(--ink);text-align:left;cursor:pointer}
.tn:hover{background:var(--soft)}
.tn:disabled{opacity:.45;cursor:not-allowed}
.tn-name{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* ⛔ Yorliq JIM: u eslatma, ta'kid emas. */
.tn-key{padding:1px 5px;border-radius:5px;background:#eef0f4;
  font-size:var(--t-1);color:var(--muted)}
.tn-plus{color:var(--mid);font-size:var(--t-5);line-height:1}

/* ── To‘lov uyalari ────────────────────────────────────── */

/* ⛔ BO‘SH UYA UZUQ CHIZIQ bilan turadi va bu ataylab: kassir
   «yana qo‘shsam bo‘ladi» ekanini KO‘RADI. Aralash to‘lov
   kunda uchraydi, lekin ilgari ekranda unga ishora yo‘q edi. */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-top:10px}
.slot{min-height:84px;border:1px dashed var(--line);border-radius:12px}
.slot.full,.slot.draft{border:0;background:#fff;box-shadow:var(--ctl-sh);
  padding:8px 10px}
.slot-top{display:flex;align-items:center;gap:6px}
.slot-name{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--t-2);color:var(--muted)}
/* ⛔ `--tap` dan kichik, lekin uya balandligi 84px: barmoq
   nishoni yetarli (DIZAYN.md 5.1 — nishon o‘lchovi, belgi emas). */
.slot-x{flex:0 0 auto;margin-left:auto;width:26px;height:26px;border:0;
  border-radius:7px;background:transparent;color:var(--muted);
  font:inherit;font-size:var(--t-2);line-height:1;cursor:pointer}
.slot-x:hover{color:var(--danger)}
.slot-sum{display:block;margin-top:8px;font-size:var(--t-5);
  font-weight:600;color:var(--ink);text-align:center}
.slot-in{height:36px;margin-top:6px;padding:0 8px;text-align:center}
.slot-ok{width:100%;height:30px;margin-top:6px;border:0;border-radius:8px;
  background:var(--mid);color:#fff;font:inherit;font-size:var(--t-2);
  cursor:pointer}
.slot-ok:disabled{opacity:.4;cursor:not-allowed}

/* ── «Yangi qarz» oynasi ───────────────────────────────── */

.dsh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:14px}
.dsh-hint{grid-column:1/-1;padding:12px;border-radius:12px;
  background:#f4f6f9;font-size:var(--t-2);color:var(--muted);
  text-align:center}
.dsh-box{padding:10px 12px;border-radius:12px;background:#f4f6f9}
.dsh-box .k{display:block;font-size:var(--t-1);color:var(--muted)}
.dsh-box b{font-size:var(--t-4);font-weight:600;color:var(--ink)}
.dsh-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ⛔ Telefonda uch ustun tor: ikkita. Bir ustunga tushirilmaydi —
   uzun ro‘yxat to‘lov ekranini yana pastga cho‘zib yuborardi. */
@media (max-width:560px){
  .tn-grid,.slots,.dsh-stats{grid-template-columns:repeat(2,1fr)}
  .dsh-two{grid-template-columns:1fr}
}

/* ⛔ `hidden` QO‘RIQCHISI MAJBURIY: `display` o‘rnatilgan sinf
   `hidden` atributini bosib ketadi (DIZAYN.md, uch marta
   takrorlangan xato). */
.pay-who{display:block;margin:-6px 0 10px;padding:0 2px;
  font-size:var(--t-2);color:var(--muted)}
.pay-who[hidden]{display:none}


/* ⛔ DIKTOFON USLUBI OLIB TASHLANDI (2026-09-17).
   Egasi: «ko'rinmas joyda yozilish kerak, ogohlantirish ham
   shartmas». Ekranda hech narsa chizilmaydi, ya'ni chizadigan
   uslub ham kerak emas (`debt_audio.js`). */

/* ⛔ Sotuvchi qatori — to‘lov ekranida (2026-09-17, egasi).
   Chip emas, keng tugma: u yagona qolgan to‘siq va ko‘rinib
   tursin. Tanlanmagani KO‘K chiziq bilan chaqiradi. */
.pay-seller{display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--tap);margin:-6px 0 12px;padding:0 14px;border:0;
  border-left:3px solid var(--mid);border-radius:12px;background:#fff;
  box-shadow:var(--ctl-sh);font:inherit;font-size:var(--t-3);
  color:var(--ink);text-align:left;cursor:pointer}
.pay-seller .k{color:var(--muted);font-size:var(--t-2)}
.pay-seller b{margin-left:auto;font-weight:600;color:var(--mid)}
/* Tanlangach chaqiruv ketadi — ish bajarilgan */
.pay-seller.on{border-left-color:transparent}
.pay-seller.on b{color:var(--ink)}