/* «Cheklar» ro'yxati va bitta chek kartochkasi. TZ 8.7–8.8.
 *
 * ⛔ Ro'yxat uslubi «Qarz» va «Tovar» bilan BIR XIL: `.found`
 * `debt.css` da, `.found-head` esa `base.css` da. Uchta bo'limda
 * uchta boshqa jadval bo'lsa, kassir har safar qaytadan o'qib
 * chiqadi. Bu yerda faqat ustunlar boshqa.
 *
 * ⛔ Izoh ilgari `.found-head` ni ham `debt.css` ga havola
 * qilardi va u YOLG'ON edi — u yerda bunday qoida yo'q. Sarlavha
 * shu sababdan umuman uslubsiz chizilardi (2026-09-16, suratda). */

/* ═══════════════════════════════════════════════════════════
   CHEK QATORI — AYNAN BILLZ SHAKLIDA (egasi 2026-09-16 da
   «huddi shunaqa qilib ber» dedi va suratni ko'rsatdi).

   ⛔ ENG KATTA FARQ: qator KARTOCHKA EMAS.

   Bizda `.found` oq fon + soya edi, ya'ni har chek alohida
   «ko'tarilgan sirt» bo'lib turardi. BILLZ da esa och kulrang
   fon va SOYA YO'Q. Farq ma'noda: kartochka «bu alohida narsa»
   deydi, chek esa ro'yxatning BO'LAGI — o'ntasiga o'nta soya
   solinsa ekran g'ovlab ketadi (DIZAYN.md 5.6 dagi bir xil
   mulohaza, u yerda jadval uchun aytilgan).

   ⛔ Ustun sarlavhasi ham olib tashlandi: BILLZ da yo'q va
   qator o'zi tushunarli.
   ═══════════════════════════════════════════════════════════ */
.sl-row{width:100%;display:flex;align-items:center;gap:12px;
  text-align:left;border:0;cursor:pointer;font-family:inherit;
  color:var(--ink);padding:12px 14px;margin-bottom:8px;
  min-height:var(--tap);border-radius:var(--card-r);
  background:#f5f6f7}
.sl-row:active{background:#eef0f2}
/* ⛔ Oxirgi qator varaqning pastida bo'shliq qoldirmasin */
.sl-row:last-child{margin-bottom:0}
/* ⛔ Bekor qilingani JIMROQ: u tarixda qoladi (8.8), lekin
   ko'zni o'ziga tortmasin. */
.sl-row.off{opacity:.72}

/* ⛔ Dona CHAPDA, oq pilyulada — BILLZ dagidek. Ko'z chapdan
   o'qiydi va «nechta» birinchi savol. */
.sl-qty{flex:0 0 auto;min-width:62px;text-align:center;
  background:#fff;border-radius:9px;padding:6px 8px;
  font-size:var(--t-2);color:var(--muted);white-space:nowrap}

.sl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sl-mid b{font-size:var(--t-3);font-weight:600}
.sl-when{color:var(--muted);font-size:var(--t-2);
  font-variant-numeric:tabular-nums}
/* ⛔ Mijoz ismi PILYULADA — BILLZ da ham shunday. U qatorning
   qo'shimchasi, sarlavhasi emas. */
.sl-who{align-self:flex-start;display:inline-flex;align-items:center;
  gap:5px;margin-top:2px;background:#fff;
  border-radius:8px;padding:3px 9px;font-size:var(--t-2);
  color:var(--muted);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* ⛔ Odam belgisi — BILLZ dagidek (egasi 2026-09-16 da suratda
   ko'rsatdi: «👤 Murod aka Nam»). Belgi MA'NO tashiydi: pilyula
   do'kon nomi emas, MIJOZ ekanini bir qarashda aytadi. */
.sl-face{font-size:var(--t-1);opacity:.55}

.sl-end{flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:2px}
/* ⛔ Summa KO'K — qatordagi eng muhim raqam (BILLZ da ham). */
.sl-sum{color:var(--mid);font-weight:600;font-size:var(--t-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⛔ O'q DOIRA ichida — BILLZ dagidek (egasi 2026-09-16 da
   suratni ko'rsatdi).
 *
 * ⛔ U TUGMA EMAS: butun qator bosiladi. Doira faqat «bu qator
 * ochiladi» degan ishora — shuning uchun oq fon va jim rang,
 * ko'k tugma emas. Ko'k bo'lsa, kassir aynan o'sha nuqtaga
 * bosishga urinardi va qatorning qolgani «bosilmaydi» deb
 * o'qilardi. */
.sl-go{flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#fff;color:#aeb5bf;font-size:var(--t-2);
  line-height:1}
.sl-row:active .sl-go{color:var(--mid)}

@media (max-width:560px){
  /* ⛔ Telefonda o'q ketadi: barmoq butun qatorga tegadi va
     o'q faqat joy egallardi. */
  .sl-go{display:none}
  .sl-qty{min-width:54px;padding:5px 6px}
  .row-4 .debt{width:96px}
}

/* Holat — rangli yozuv, tugma emas: bosiladigan narsa emas. */
.st{font-size:var(--t-1);font-weight:500}
.st.ok{color:var(--ok)}
.st.bad{color:var(--danger)}
.st.wait{color:var(--warn)}

/* ── Bitta chek ────────────────────────────────────────── */

/* ⛔ Kenglik cheklangan: bitta chekda 1–5 qator bo'ladi va ular
   1600 piksel bo'ylab cho'zilsa, nom chapda, summa o'ng chekkada
   qolib ko'z ular orasida yuguradi. */
.sale-card{max-width:720px;padding:14px;border-radius:var(--radius);
  background:#f7f9fc}
.sc-top{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px}
.sc-top .money{font-size:20px;font-weight:600}
/* ⛔ Bekor qilish sababi CHEK USTIDA turadi, tarixda emas: «nega
   bu chek bekor qilingan» degan savol aynan shu yerda tug'iladi. */
.sc-why{margin-bottom:10px;padding:8px 10px;border-radius:var(--radius-sm);
  background:rgba(217,58,82,.07);color:var(--danger);font-size:var(--t-2)}
/* ⛔ Izoh — chekning O'ZIDA emas, kartochkada. U kassirning ichki
   eslatmasi (8.11) va qog'ozga tushmaydi; shuning uchun ko'rinishi
   ham boshqacha — sariq, «yozib qo'yilgan qog'oz» kabi. */
.sc-note{margin-bottom:10px;padding:8px 10px;border-radius:var(--radius-sm);
  background:rgba(178,106,0,.08);color:#8a5400;font-size:var(--t-2);
  line-height:1.5;white-space:pre-wrap}

.sale-card .lines{margin-top:0}
.sale-card .line{background:#fff}
.sale-card .line:hover{background:#fff}

.sale-acts-col{max-width:720px;margin-top:14px;display:flex;
  flex-direction:column;gap:8px}
.sale-acts-col .go{margin-top:0}
/* ⛔ Tugma KARTOCHKA enida (720), `base.css` dagi 560 emas:
   chek qatorlari kengroq joy so‘raydi va tugma ulardan tor
   tursa ustun qiyshiq ko‘rinardi.
   ⛔ Selektor `base.css` dagi qoidaning O‘ZI + sinf: `:not(:has())`
   argumentining og‘irligini oladi va oddiy `.sale-acts-col .go`
   undan YUTQAZADI — birinchi urinishda tugma 560 bo‘lib qoldi,
   suratda ko‘rindi. */
main:not(:has(.sale-wrap)) .sale-acts-col .go{max-width:none}
/* ⛔ Bekor qilish — QIZIL YOZUV, qizil tugma emas. Qizil tugma
   ko'zni tortadi va kassir uni tasodifan bosadi; bu esa kamdan-kam
   va qaytarib bo'lmaydigan amal (8.8). */
.danger-text{color:var(--danger)}
.danger-text:hover:not(:disabled){background:rgba(217,58,82,.08)}

/* Ikkita almashtirgich — to'rttalik chiplar bilan bir xil uslubda. */
/* ⛔ Kenglik cheklangan: keng ekranda ikkita chip butun panelni
   egallab, «tugma» emas «tasma» bo'lib qolardi. */
.chips.two{grid-template-columns:repeat(2,1fr);gap:8px;
  max-width:420px;margin:0 0 14px}
.chips.two .chip{min-height:var(--tap)}
/* ⛔ MATN KO‘K FONDA KO‘K EDI — ya'ni KO‘RINMASDI.
 *
 * Bu yerda `--bright` «och rang» deb o‘ylangan; aslida u `--mid`
 * bilan BIR XIL ko‘k (#2f6fed). Natijada tanlangan chip bo‘m-bo‘sh
 * ko‘k to‘rtburchak bo‘lib turardi va «Cheklar» so‘zi yo‘qolgandi.
 *
 * Buni test emas, SURAT topdi (2026-09-12) — DIZAYN.md 6 dagi
 * ro‘yxat yana bir qator uzaydi. */
.chips.two .chip.on{background:var(--mid);color:#fff}

/* ── Sana, qidiruv va kun yakuni (egasi BILLZ ni ko'rsatdi) ──

   ⛔ Ikki marta o'zgardi va ikkalasi ham EGASI ko'rsatgani:

     `‹ sana ›`    →  oltita chip        (2026-09-16 ertalab)
     oltita chip   →  bitta tanlagich   (2026-09-16 kechqurun)

   Ikkinchisi BILLZ kalendarining surati bilan keldi: u yerda
   bitta tugma bosiladi va oynada kalendar ham, tez tugmalar
   ham, qo'lda terish ham bor. Uslub `datepick.css` da — u
   hisobot ekranlariga ham kerak bo'ladi. */
/* ⛔ Faqat ORALIQ: tanlagichning o'zi `.dp-open`. Yalang'och
   sinf global qoida bermasin (DIZAYN.md). */
.sl-period{margin-bottom:12px}

/* ⛔ DO'KON NOMI qator ichida (BILLZ: «● Miss Ferena»).
   Egasida ikki do'kon bor va direktor ikkalasini bir ro'yxatda
   ko'radi — do'kon yozilmasa, qaysi biri ekani bilinmasdi. */
.sl-place{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-2);color:var(--muted);white-space:nowrap}
/* ⛔ O'Z NUQTASI, `debt.css` dagi `.dot` EMAS.
   Avval o'shani ishlatgandim va qo'riqchi darhol qizardi
   (`test_bare_layout_class_does_not_leak`) — u haq: qarz
   ro'yxatida nuqta ikki qatorli matn yonida turadi va
   `margin-top:6px` oladi, bu yerda esa matn bir qatorda.
   Bitta sinf ikki ekranda ikki ma'no olsa, biri jimgina
   buziladi (DIZAYN.md 3). */
.sl-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

/* Kun yakuni — ro'yxat TEPASIDA: «shu kuni qancha» degan savol
   cheklarni birma-bir sanashdan oldin tug'iladi. */
.day-sum{padding:14px 16px;margin-bottom:12px;
  border-radius:var(--card-r);
  background:#fff;box-shadow:var(--card-sh)}
.day-sum-head{font-size:var(--t-2);color:var(--muted);margin-bottom:4px}
/* ⛔ Qator uslubi `sale.css` dagi `.trow` dan keladi va BU YERDA
   qayta ta'riflanmaydi: bitta sinf ikki faylda ikki ma'no olsa,
   ekranlardan biri jimgina buziladi (DIZAYN 3, testi bor). */

/* ⛔ Sana va kun yakuni keng ekranda TASMA bo‘lib qolardi: sana
   900 piksellik qutining o‘rtasida yolg‘iz turardi (2026-09-12,
   suratda ko‘rindi). */
@media (min-width:820px){
  .day-sum{max-width:560px}
}

/* ═══════════════════════════════════════════════════════════
   STATISTIKA USTUNI — BILLZ naqshi (egasi 2026-09-16 da
   «huddi shunaqa qilib ber» dedi va suratni ko'rsatdi).

   ⛔ SHAKL BILLZ dan, MAZMUN bizdan: u yerdagi «Подарочные
   сертификаты» va «Баланс клиентов» bizda umuman yo'q
   narsalar. Ularni «0» qilib chizish nusxa emas, YOLG'ON
   bo'lardi (1.3) — sabab `sales_stats.js` boshida.
   ═══════════════════════════════════════════════════════════ */

/* ⛔ Ustun O'NGDA, ro'yxat CHAPDA — ikkovi bir vaqtda ko'rinsin.
   Telefonda pastga tushadi (bitta ustunli grid), yashirilmaydi:
   do'kondor ko'pincha telefonda qaraydi. */
.sl-wrap{display:grid;gap:14px;align-items:start}
/* ⛔ RO'YXAT OQ VARAQ USTIDA — DIZAYN.md 5.6 dagi birinchi fon
   modeli, va BILLZ da ham aynan shunday.
 *
 * Birinchi urinishimda varaq yo'q edi: sahifa foni `#f4f5f7`,
 * qator foni `#f5f6f7` — ikkovi deyarli bir xil va qator fonga
 * QO'SHILIB ketgandi (suratda ko'rindi). BILLZ da kulrang qator
 * ajralib turadi, chunki u OQ varaq ustida yotadi.
 *
 * ⛔ Zebra YO'Q: bu yerda qatorlar orasida bo'shliq bor, ya'ni
 * ular allaqachon ajralgan. Zebra faqat yopishgan jadvalda
 * kerak (katalog). */
/* ⛔ Chap ustun: qidiruv, filtr va ro‘yxat BIRGA.
   Ilgari qidiruv `.sl-wrap` dan TASHQARIDA edi va butun
   kenglikni egallab, statistika ustunini pastga itarardi. */
.sl-left{display:flex;flex-direction:column;min-width:0}
.sl-main{min-width:0;background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:12px}
.sl-side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ⛔ 1100px dan: BILLZ da yon ustun ~290px va u SIQILMAYDI —
   «60 885 000 UZS» bir qatorda turishi kerak. */
@media (min-width:1100px){
  .sl-wrap{grid-template-columns:minmax(0,1fr) 300px}
}

/* ⛔ «HISOBOTNI CHOP ETISH» — ustunning ENG TEPASIDA.
   Egasi: «BILLZ dagidek — o'ng tepada, statistika ustuni
   ustida» (2026-09-16). U yerda ham ustun kengligida, ko'k va
   o'ng chekkasida o'q bilan turadi.

   ⛔ `.go` DAN O'SADI, nusxa emas: balandlik, rang va o'chiq
   holat bir joyda (base.css). Bu yerda faqat FARQ — o'q va
   uning joyi. */
.st-print{display:flex;align-items:center;justify-content:center;
  gap:10px;margin:0 0 4px}
/* ⛔ O'q O'NG CHEKKAGA suriladi, matn esa MARKAZDA qoladi —
   BILLZ dagidek. `margin-left:auto` bo'lsa matn chapga siljirdi. */
.st-arrow{position:absolute;right:18px;font-size:var(--t-3)}
.st-print{position:relative}

.st-card{background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:14px 16px}
.st-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px}
/* ⛔ Yorliq JIM, son KATTA va KO'K — BILLZ dagi ierarxiya.
   Ko'z avval raqamga tushadi, yorliq esa uni izohlaydi. */
.st-k{display:block;color:var(--muted);font-size:var(--t-2)}
.st-big{color:var(--mid);font-size:var(--t-6);font-weight:600;
  line-height:var(--lh-tight);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
/* ⛔ Belgi JIM kulrang doirada: u bezak, ma'no tashimaydi.
   BILLZ da ham shunday — rangli bo'lsa raqam bilan
   raqobatlashardi. */
.st-mark{flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--page);display:flex;align-items:center;
  justify-content:center;font-size:var(--t-2);opacity:.7}

/* ⛔ CHIZIQ emas, ORALIQ + yupqa chiziq: DIZAYN.md 5.2 chiziqni
   man qilmaydi, u «chiziq bilan KESMA» deydi. Bu yerda chiziq
   kartochka ichidagi ikki qismni ajratadi va BILLZ da ham bor. */
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.st-cell{min-width:0}
.st-cell .st-k{font-size:var(--t-1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* ⛔ Katak qiymati ham KO'K: BILLZ da shunday va sabab bor —
   bular BOSILADIGAN raqamlar bo'lishi mumkin (keyinchalik
   filtrga aylanadi). Hozircha rang shaklni saqlaydi. */
.st-v{display:block;color:var(--mid);font-size:var(--t-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⛔ KAMOMAD QIZIL — yagona rangli katak. Smena farqi raqam
   emas, OGOHLANTIRISH: kassada pul kam chiqqan. Qolgan hamma
   katak ko'k bo'lgani uchun u darhol ko'zga tashlanadi. */
.st-v.st-bad{color:var(--danger)}

/* ⛔ KUN AJRATGICHI — punktir chiziq, o‘rtasida sana (BILLZ).
   Ro‘yxat davr bo‘yicha chiziladi va bitta haftada 40 ta chek
   bo‘lsa, qaysi biri qaysi kunga tegishli ekani bilinmasdi.

   ⛔ Chiziq bu yerda O‘RINLI (DIZAYN.md 5.2 chiziqni man
   qilmaydi, «chiziq bilan KESMA» deydi): u ro‘yxatni kesmaydi,
   ikki kun ORASIDA turadi va sana uni uzib turadi. */
.sl-day{display:flex;align-items:center;gap:10px;
  margin:14px 0 10px;color:var(--muted);font-size:var(--t-2)}
.sl-day::before,.sl-day::after{content:'';flex:1;
  border-top:1px dashed var(--line)}
.sl-day span{flex:0 0 auto;background:var(--page);
  border-radius:20px;padding:3px 12px;white-space:nowrap}
/* ⛔ Birinchi ajratgich tepada bo‘shliq qoldirmasin */
.sl-day:first-child{margin-top:0}

/* Ko‘rinish tanlash oynasidagi joriy satr */
.sl-view.on .who{color:var(--mid);font-weight:600}
.sl-view.on::after{content:'✓';color:var(--mid);margin-left:auto}

/* ── FILTR PANELI — BILLZ naqshi (egasi 2026-09-16) ─────────
   ⛔ Qidiruv va «Filtrlar» BIR QATORDA: ikkovi ham ro'yxatni
   toraytiradi, ya'ni bitta savolning ikki yo'li. */
.sf-bar{display:flex;gap:10px;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:10px}
.sf-bar .field{flex:1 1 260px;margin-bottom:0}
.sf-open{margin:0;flex:0 0 auto;height:var(--tap)}
/* ⛔ Nechta filtr qo'yilgani YOPIQ turganda ham ko'rinadi:
   busiz do'kondor «ro'yxat nega bo'sh» deb o'ylardi. BILLZ da
   bu sanoq yo'q va bu ularning kamchiligi. */
.sf-count{background:var(--mid);color:#fff;border-radius:20px;
  padding:1px 7px;font-size:var(--t-1);font-weight:600;
  margin-left:4px}
.sf-open.on{border-color:var(--mid);background:var(--soft);
  color:#2a5bbf}

.sf-card{background:var(--glass);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:14px 16px;margin-bottom:12px}
/* ⛔ «dan — gacha» BITTA qutida: ular bitta savolning ikki
   chekkasi, ikkita alohida savol emas (BILLZ dagidek). */
.sf-range{display:flex;align-items:center;gap:8px}
.sf-range input{flex:1;min-width:0}
.sf-dash{flex:0 0 auto;color:var(--muted)}
/* ⛔ CHEGARA OLIB TASHLANDI (2026-09-17). Ilgari bu yerda
   `max-width:700px` turardi — «panel tasma bo‘lmasin» (5.3).
   Qoida to‘g‘ri edi, lekin panel endi CHAP USTUN ichida va
   ustunning o‘zi chegara bo‘lib turibdi. Ikkita chegara qo‘shilib
   panelni ustun ichida ham toraytirardi va yonida yana bo‘sh
   joy qolardi.

   ⛔ QIDIRUV MAYDONIGA TEGILMAYDI. Men uni ham cho‘zmoqchi
   bo‘ldim (`max-width:none`) va ekran YOMONLASHDI: maydon
   930 pikselga cho‘zilib, «Filtrlar» tugmasi ustunning narigi
   chekkasiga uchib ketdi — ikkovi bir qatorda turishining
   ma'nosi yo‘qoldi. Suratda ko‘rindi, qaytarib olindi.

   ⛔ Maydon kengligi UCH joyda cheklangan ekan:
   `base.css` `.field` 560, `shell.css` `input` 520, shu yerda
   panel 700. Uchtasi ham mening qo‘limdan chiqqan va ular
   BIRGA ishlaganda tepa o‘ngda bo‘sh joy qolgandi. Endi
   chegarani USTUN beradi (3.2: bitta manba). */

/* ⛔ «Yuklab olish» sahifalash qatorida — BILLZ dagi «Скачать».
   U ro'yxatning DAVOMI: ekranda ko'rinmagan qatorlar ham faylga
   tushadi, ya'ni savol bitta — «shu ro'yxat». */
.sl-save{color:var(--mid);white-space:nowrap}

/* ── Chekni tuzatish (8.11) ──────────────────────────────── */

/* ⛔ Prefiksli sinflar: yalang‘och sinf boshqa ekranga oqib
   o‘tadi (DIZAYN.md; `.sale-acts` xatosi 2026-09-19). */
.se-log {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--field);
  border-radius: 10px;
  margin-top: 6px;
}

.se-was { color: var(--muted); }

.se-cust:empty { display: none; }

/* ⛔ Izoh maydoni boshqa maydonlar bilan BIR KENGLIKDA va BIR
   KO‘RINISHDA: umumiy qoida `input` ga yozilgan, `textarea`
   undan tashqarida qolgandi — suratda avval kichkina, keyin oq
   ramkali quti bo‘lib ko‘rindi (DIZAYN.md 5.7: maydon
   to‘ldirilgan, soyasiz). */
.se-note {
  width: 100%;
  max-width: 560px;
  background: var(--field);
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
}

.se-note:focus { background: var(--field-on); box-shadow: var(--ring); }

/* ⛔ Sarlavha izohi maydondan AJRALIB tursin: yopishib turganda
   u «Sotuvchi» yorlig‘ining izohidek o‘qilardi. */
[data-se-hint] { margin-bottom: 14px; }