/* 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.
 */

/* ── 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:14px 12px;min-height:120px}
  /* ⛔ Savdo qog‘ozi — `rows_to_html` (sale_paper.js): chetini qog‘ozning
     o‘zi beradi (`.rc` 4 mm), quti ikkinchi chet qo‘shmaydi */
  .paper-rc{padding:0;overflow:hidden}
}

/* ⛔ 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. */
/* ⛔ Monoshrift matn endi faqat QAYTARISH qog‘ozida (`sale_refund.js`:
   uning serverida HTML shakli yo‘q). Savdo qog‘ozi — `.paper-rc`.
   ⛔ 10px VA SIQIQ HARF ORALIG‘I (egasi, 2026-09-30: «chek juda
   cho‘zilib ketgan eniga», tanlovi — «ekranda ixcham»). 12px da
   48 belgilik qog‘oz 375 piksel edi, 11px da 321 — farqi ko‘zga
   ilinmaydi; 10px da 294 (chorakka yaqin). Qog‘oz O‘ZGARMADI:
   faqat ekrandagi ko‘rinish. Harf oralig‘i hamma belgiga BIR XIL
   — monoshriftda ustunlar tekisligicha qoladi. */
.paper-text{margin:0;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:-.04em;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. */
/* ⛔ KARTOCHKASIZ (BILLZ «A13»): summa ekranning eng katta yozuvi,
   uni ramka ichiga olish kerak emas — ramka uni kichik ko‘rsatardi. */
.pay-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:4px 2px;margin-bottom:14px}
/* ⛔ BILLZ «Итого: / К оплате:» (2026-09-27): yorliq ham yirik (16px,
   600), summa — ekran sarlavhasi o‘lchamida. Telefonda bir pog‘ona past:
   uch ustunda (qaytarish bilan) «−1 600 000» sig‘sin. */
.pay-nums .k{display:block;font-size:var(--t-4);font-weight:var(--w-bold);color:var(--muted)}
.pay-nums .v{font-size:var(--t-7);font-weight:var(--w-head);color:var(--ink);
  line-height:var(--lh-tight)}
@media (max-width:819px){.pay-nums .v{font-size:var(--t-6)}}
.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:auto 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}
.tn-ico{display:flex;color:var(--mid)}
.tn:disabled .tn-ico{color:var(--muted)}
/* «Balans» katagida mijoz puli — nom ostida, jim.

   ⛔ PUL KESILMAYDI (egasi, 2026-09-30, surat: «Balans 5 000 00»).
   Summa nom ichida turardi va nom ustuni tor katakda uni qirqardi —
   kassir 5 000 000 o‘rniga 500 000 ga o‘xshash son o‘qirdi. Endi u
   ikkinchi qatorda, belgidan o‘ngdagi BUTUN enni oladi («F4» va «+»
   ostini ham). Nom esa «…» bilan qisqaraveradi — u so‘z, pul emas. */
.tn{row-gap:0;align-content:center}
.tn-sub{grid-column:2/-1;grid-row:2;white-space:nowrap;
  font-size:var(--t-2);color:var(--ok)}
.tn-sub:empty{display:none}

/* ⛔ Tor katakda (besh to‘lov turi, kichik ekran) «F4» yorlig‘i
   ketadi: u eslatma, kalit baribir ishlaydi. Chegara katakning O‘Z
   eni bo‘yicha (`@container`), ekran eni emas — katak eni to‘lov
   turlari soniga ham bog‘liq. `inline-size` katakni ichidagi matn
   kengaytirmasin ham: ilgari tor ekranda uch katak to‘rdan chiqib
   ketardi (920 px da 3 × 142 > 338). */
.tn{container-type:inline-size}
@container (max-width:150px){.tn-key{display:none}}
/* Juda tor katakda (920 px ekran, besh tur — 107 px) summa belgi
   ostidan boshlanadi: busiz «5 000 000» chekkaga tegib turardi */
@container (max-width:120px){.tn-sub{grid-column:1/-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)}
/* ⛔ Summa — TUGMA (2026-09-25): to‘lov turi bosilganda qolgan summa
   darhol qo‘shiladi (BILLZ), o‘zgartirish uchun summa bosiladi. */
.slot-sum{display:block;width:100%;margin-top:8px;padding:4px 0;border:0;
  border-radius:8px;background:transparent;font:inherit;font-size:var(--t-5);
  font-weight:var(--w-bold);color:var(--ink);text-align:center;cursor:pointer}
.slot-sum:hover{background:var(--field)}
.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:var(--w-bold);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:var(--w-bold);color:var(--mid)}
/* Tanlangach chaqiruv ketadi — ish bajarilgan */
.pay-seller.on{border-left-color:transparent}
.pay-seller.on b{color:var(--ink)}
/* ⛔ «‹ Savatga B» (BILLZ «A13»). Sarlavha `.sale-wrap` dan TASHQARIDA
   chiziladi — savatdagi `.kbd` uslubi bu yerga yetmaydi va «B» oddiy
   harf bo‘lib qolardi (surat). Telefonda klaviatura yo‘q — yashirin. */
.pay-head .kbd{min-width:22px;height:22px;margin-left:6px;padding:0 6px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-2);font-weight:var(--w-mid);color:var(--muted)}
@media (max-width:819px){.pay-head .kbd{display:none}}

/* ⛔ SAVATDAGI QAYTARISH (sale_return.js, 2026-09-25): qaytgan summa
   «to‘lash kerak» dan ayiriladi — qizg‘ish, uchinchi raqam bo‘lib
   (⛔ `.back` EMAS — u «‹ Savatga» tugmasining sinfi, fon olib kelardi);
   uyada ✕ siz turadi (u savatda o‘zgaradi). Pul qaytarish ekrani
   (sale_refund.js) ham shu katakchalarni ishlatadi. */
.pay-nums .minus .k,.pay-nums .minus .v{color:var(--danger)}
.pay-nums:has(.pn:nth-child(3)){grid-template-columns:repeat(3,1fr)}
.slot.fixed{background:#fdf3f2;box-shadow:none}
.slot.fixed .slot-sum{color:var(--danger)}
.refund-ways .tn{grid-template-columns:1fr;min-height:64px}
.refund-ways .tn.on{background:var(--soft);box-shadow:var(--ring)}

/* ⛔ NAQD QAYTIM (sale_change.js, 2026-09-26): «Qaytim» — ekranning eng
   katta yashil raqami, «To‘lash kerak» o‘rnida; tez tugmalar — mijoz
   bergan yaxlit pul; qanday hisoblangani — pastdagi «ochiq hisob». */
.pay-nums .change .k,.pay-nums .change .v{color:var(--ok)}
.cash-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.cash-quick .k{font-size:var(--t-2);color:var(--muted);margin-right:4px}
.cash-quick .chip{font-variant-numeric:tabular-nums}

/* ⛔ OCHIQ HISOB (sale_change.js `calcHtml`, 2026-09-27, egasi «A»):
   mijoz bergani → kurs → to‘lovga → qaytim. Chiziq yo‘q — bo‘shliq
   (DIZAYN.md); qaytim qatori yashil va katta, tepadagi «Qaytim» bilan
   bir rangda. Raqamlar ustun bo‘lib turadi (`tabular-nums`); kenglik
   cheklangan — keng ekranda raqam yorlig‘idan uzoqlashib ketmasin. */
.cash-calc{background:#fff;border-radius:14px;padding:12px 16px;margin:0 0 12px;
  max-width:440px;font-variant-numeric:tabular-nums}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0}
.cc-row .money{white-space:nowrap}
.cc-given,.cc-given .money{font-weight:var(--w-bold)}
.cc-dim{color:var(--muted);font-size:var(--t-2)}
.cc-back{margin-top:8px;color:var(--ok);font-weight:var(--w-bold)}
.cc-back .money{font-size:1.35em;font-weight:var(--w-bold)}