/* Katalog jadvali — DIZAYN.md 5.6 dagi IKKINCHI fon modeli.
 *
 * ⛔ OQ VARAQ + ZEBRA, kartochka EMAS.
 *
 * Qolgan ekranlarda fon kulrang va har blok oq kartochka bo‘lib
 * suzadi. Jadval boshqacha: o‘nta qatorga o‘nta soya solinsa
 * ekran g‘ovlab ketadi. Kartochka «bu alohida narsa» degani,
 * jadval qatori esa ro‘yxatning BO‘LAGI — zebra ko‘zni qator
 * bo‘ylab olib ketadi, soya esa har qatorda to‘xtatadi.
 *
 * Sabab va tarix DIZAYN.md 5.6 da (egasi 2026-09-16 da so‘radi:
 * «bilzda oq va och seriy table, bizda qanaqa?»).
 */

/* ⛔ Varaq — `.pane.primary` kulrang fon ustida. Faqat SHU ekran:
   `main:has()` bilan emas, o‘z sinfi bilan cheklangan. */
.cat-sheet {
  background: var(--glass); border-radius: var(--card-r);
  box-shadow: var(--card-sh); overflow: hidden; margin-top: 10px;
}

/* ⛔ Yonga suriladi, SIQILMAYDI. BILLZ ham shunday qiladi:
   17 ta ustunni 390px ga tiqishning iloji yo‘q, siqilgan ustun
   esa o‘qib bo‘lmas darajada ingichka bo‘lardi. */
.cat-scroll { overflow-x: auto; container-type: inline-size;
  container-name: cat; }

/* ⛔ TOR JOYDA MATN USTUNI KETADI, RAQAM QOLADI.
 *
 * Telefonda beshta ustundan «Chakana» o‘ngga chiqib ketardi
 * va aynan u — do‘kondorning asosiy savoli. Shtrix-kod va
 * artikul esa ALLAQACHON nom ostida turibdi (`.cat-sub`), ya'ni
 * ustunini olib tashlash hech narsani yo‘qotmaydi.
 *
 * ⛔ Qaysi ustun ketishi RO‘YXATDA emas, ustun TURIDA hal
 * bo‘ladi (`catalog.js` dagi `cls()`): raqam bo‘lsa qoladi.
 * Ro‘yxat bo‘lganda yangi ustun qo‘shgan odam uni bu yerga
 * qo‘shishni ESDAN CHIQARARDI.
 *
 * ⛔ Oyna kengligi emas, KONTEYNER kengligi: bu jadval ertaga
 * tor ustunda ham chizilishi mumkin (`report.css` dagi bir xil
 * qaror — sabab o‘sha yerda). */
@container cat (max-width: 620px) {
  .cat-tbl .cat-hide { display: none; }
}

.cat-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.cat-tbl th {
  font-weight: 400; color: var(--muted); font-size: var(--t-2); text-align: left;
  padding: 12px 14px; white-space: nowrap;
}
.cat-tbl td { padding: 13px 14px; vertical-align: middle; }

/* ⛔ ZEBRA. `nth-child(even)` — qator RAQAMI bo‘yicha, sinf
   bo‘yicha emas: sahifa almashganda ham naqsh buzilmaydi. */
.cat-tbl tbody tr:nth-child(even) { background: #f7f8fa; }
.cat-tbl tbody tr:hover { background: var(--soft); }
/* Butun qator bosiladi (UX_TANQID 3.6) */
.cat-tbl tbody tr { cursor: pointer; }

/* ⛔ Nom ustuni YOPISHIB turadi. BILLZ da yopishmaydi va o‘ngga
   surilganda ekranda raqamlar qoladi-yu, QAYSI tovar ekani
   yo‘qoladi — suratda ko‘rindi (2026-09-16). */
.cat-tbl .fix { position: sticky; left: 0; background: var(--glass); }
.cat-tbl tbody tr:nth-child(even) .fix { background: #f7f8fa; }
.cat-tbl tbody tr:hover .fix { background: var(--soft); }
/* ⛔ Butun qator bosiladi, lekin nomning o‘zi ham barmoq o‘lchovida
   (44px) bo‘lsin: sensor auditi shuni talab qiladi. */
.cat-name {
  color: var(--mid); font-weight: 500; background: none; border: 0;
  padding: 0; font-family: inherit; font-size: var(--t-2); text-align: left;
  cursor: pointer; min-width: 0; min-height: 44px;
  /* ⛔ Rasm (2026-09-19) nomning CHAPIDA: qator, ichida matn ustuni */
  display: flex; align-items: center; gap: 10px;
}
.cat-txt { display: flex; flex-direction: column; justify-content: center;
  min-width: 0; }
.cat-sub { display: block; color: var(--muted); font-size: var(--t-1);
  font-weight: 400; margin-top: 1px; }
/* ⛔ `th` ning `text-align:left` i (0,1,1) `.cat-n` dan (0,1,0)
   kuchli va SARLAVHA chapda qolib ketardi: «Qoldiq» chapda,
   raqamlar o‘ngda — ko‘z ustunni yo‘qotardi (suratda ko‘rindi). */
.cat-tbl th.cat-n, .cat-tbl td.cat-n {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ⛔ Nol qoldiq — qizil: «Qoldiq nol» tugmasini bosgan odam
   nimani qidirayotganini ko‘rib tursin. */
.cat-zero { color: var(--danger); font-weight: 600; }
/* ⛔ Kam qoldiq — SARIQ, qizil emas: tugagan (nol) va tugayotgan
   bir rangda bo‘lsa, «qaysi biri shoshilinch» degan savol
   javobsiz qolardi. */
.cat-low { color: var(--warn); font-weight: 600; }
/* «kam: Yangi Bozor» ikkinchi qatorda — ustun kengaymasin */
.cat-tbl td.cat-low { white-space: pre-line; }
.sh-qty.cat-low::before { background: var(--warn); }
.cat-off { color: var(--muted); }
/* Kartochkadagi «Qoldiq» qatori: chegara nom ostida, kichik.
   ⛔ `.row` bu yerda YOZILMAYDI (u shell.css niki, qo‘riqchi bor) —
   sinf o‘z nomi bilan. */
.lim { display: block; font-size: var(--t-1); color: var(--muted); }
.lim.low { color: var(--warn); font-weight: 600; }

/* ⛔ Sanoq tugmalari CHAPDA, ⚙ O‘NG CHEKKADA — BILLZ naqshi.
   `flex-wrap`: telefonda tugmalar ikki qatorga tushadi, ⚙ esa
   o‘z joyida, tepada qoladi. */
.cat-top { display: flex; align-items: flex-start; gap: 10px; }
.cat-top [data-tabs] { flex: 1 1 auto; min-width: 0; }
/* ⛔ ⚙ — kvadrat va JIM. U kundalik tugma emas: ustun bir marta
   tanlanadi va oylab tegilmaydi. «+ Yangi tovar» bilan bir xil
   og‘irlikda tursa, ko‘z ikkalasida ikkilanardi. */
.cat-gear { flex: 0 0 auto; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 10px; background: #fff;
  box-shadow: var(--ctl-sh); color: var(--muted); font-size: 16px;
  cursor: pointer; }
.cat-gear:active { background: var(--page); }

/* ── Do‘kon ustuni: mini-ro‘yxat (BILLZ naqshi) ──────────────
   ⛔ Qoldiq va narxlar USTMA-UST. Sabab `catalog.js` da. */
.cat-tbl th.cat-shop, .cat-tbl td.cat-shop {
  /* ⛔ Chapdan chiziq: do‘kon ustunlari umumiy ustunlardan
     BOSHQA narsa — «shu do‘konda» degan alohida blok. BILLZ da
     ham shu yerda chiziq turadi. */
  border-left: 1px solid var(--line); text-align: left;
  white-space: nowrap; min-width: 150px;
}
.sh-line { display: flex; align-items: center; gap: 6px;
  font-size: var(--t-2); line-height: 1.7;
  font-variant-numeric: tabular-nums; }
/* ⛔ Yorliq JIM va TOR: u qiymatni tushuntiradi, o‘zi qiymat
   emas. Kenglik qat'iy — to‘rtta raqam bir chiziqda tursin. */
.sh-k { flex: 0 0 auto; width: 50px; color: var(--muted);
  font-size: var(--t-1); }

/* ⛔ NUQTA — BILLZ dagi rangli belgi. Yonida so‘z ham turadi
   (egasi, 2026-09-16): rang ajratadi, so‘z tushuntiradi.
   `::before` — belgi MATN emas, nusxa olinganda tushmaydi. */
.sh-line::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px;
  border-radius: 50%; background: var(--line);
}
/* ⛔ Ranglar loyihaning O‘Z ranglaridan, BILLZ dan ko‘chirilmadi:
   qoldiq — yashil (bor/yo‘q), kelish — kulrang (ichki son),
   chakana — ko‘k (asosiy amal), ulgurji — binafsha (ikkinchi
   narx). Egasi BILLZ da ham ko‘k chakana, binafsha ulgurji
   ekanini tasdiqladi. */
.sh-qty::before { background: var(--ok); }
.sh-buy::before { background: #c3c9d4; }
.sh-sell::before { background: var(--mid); }
.sh-opt::before { background: #7b4bd6; }
/* ⛔ Nol qoldiq — nuqtasi ham qizil: qator qizil bo‘lib,
   nuqtasi yashil qolsa, ikkisi bir-biriga zid gapirardi. */
.sh-qty.cat-zero::before { background: var(--danger); }

/* Qidiruv va amallar BIR QATORDA — BILLZ naqshi */
.cat-bar { display: flex; gap: 10px; align-items: flex-start;
  flex-wrap: wrap; margin-bottom: 4px; }
.cat-bar .field { flex: 1 1 260px; margin-bottom: 0; }
.cat-bar .oc { margin: 0; flex: 0 0 auto; }

.cat-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; }
.cat-pg { min-width: 44px; height: 44px; border-radius: 22px; border: 0;
  background: none; font-family: inherit; font-size: var(--t-2);
  color: var(--muted); cursor: pointer; padding: 0 10px; }
.cat-pg.on { background: var(--mid); color: #fff; font-weight: 500; }
.cat-pg[disabled] { opacity: .35; cursor: default; }
.cat-count { margin-left: auto; color: var(--muted); font-size: var(--t-2); }

/* ⛔ Qator soni — BILLZ dagi «Показать по 10» (2026-09-16).
   Ro‘yxat YUQORIGA ochiladi: tugma sahifaning pastida turadi va
   pastga ochilsa ekrandan chiqib ketardi. */
.cat-per { position: relative; margin-left: 10px; }
.cat-per-btn {
  background: #f1f2f4; border: 0; border-radius: 8px; height: 44px;
  padding: 0 14px; font-family: inherit; font-size: var(--t-2);
  color: var(--ink); cursor: pointer;
}
.cat-per-list {
  position: absolute; right: 0; bottom: 50px; z-index: 20;
  background: var(--glass); border-radius: 10px; padding: 6px;
  box-shadow: var(--sh-3); min-width: 150px;
}
.cat-per-list[hidden] { display: none; }
.cat-per-row {
  display: block; width: 100%; text-align: left; border: 0;
  background: none; font-family: inherit; font-size: var(--t-2);
  color: var(--ink); padding: 9px 12px; border-radius: 7px;
  cursor: pointer;
}
.cat-per-row:hover { background: var(--page); }
/* ⛔ Joriy qiymat BELGILANADI — BILLZ da ✓ turadi */
.cat-per-row.on { color: var(--mid); font-weight: 500; }
.cat-per-row.on::after { content: ' ✓'; }

/* ── ⚙ «Jadval ustunlari» oynasi (19.6) ────────────────────
   ⛔ Oynaning O‘ZI `.sheet` — sotuvchi tanlash bilan bir xil
   (`shell.css`). Bu yerda faqat ICHI. */

/* ⛔ TUGMA SURILMAYDI, RO‘YXAT SURILADI.
   Telefonda to‘qqizta ustun oynaga sig‘maydi va «Qo‘llash»
   pastda ko‘rinmay qolgandi (suratda topildi). `.sheet-card`
   dagi `overflow-y:auto` shu yerda ICHKI qutiga ko‘chadi. */
.k-card { display: flex; flex-direction: column; overflow: hidden; }
.k-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.k-apply { flex: 0 0 auto; margin-top: 12px; }

.k-lbl { display: block; color: var(--muted); font-size: var(--t-2);
  margin-bottom: 6px; }
/* ⛔ Ikkita tugma KICHIK qoladi. Birinchi urinishimda ular
   `.chips.two` edi — butun kenglikni egallagan ikkita baland
   tasma, va oynadagi eng ko‘zga tashlanadigan narsa «Yo‘q»
   bo‘lib qolgandi. Bu tanlov qo‘shimcha, sarlavha emas. */
.k-seg { display: flex; gap: 8px; margin-bottom: 16px; }
/* ⛔ Bu izoh, ogohlantirish emas — shuning uchun jim kulrang */
.k-note { color: var(--muted); font-size: var(--t-2); margin: 0 0 6px; }
.k-cols { display: grid; gap: 2px; }
/* ⛔ Butun qator bosiladi, faqat katak emas: bozorda qo‘l qo‘pol
   va 16 piksellik kataklarni nishonga olish qiyin (2.1). */
.k-col { display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 0 4px; border-radius: 8px;
  font-size: var(--t-3); cursor: pointer; }
.k-col:hover { background: var(--page); }
.k-col input { width: 18px; height: 18px; accent-color: var(--mid); }

/* ── Rasm (2026-09-19) ─────────────────────────────────────── */
/* ⛔ Katalog va kartochkadagi rasm: `photo.js` `<img>` ni keyin
   qo‘yadi — o‘rni avvaldan bir xil o‘lchamda tursin, qator sakramasin. */
.has-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cat-pic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px;
  background: #eef1f5; overflow: hidden; }
.picked.with-pic { display: flex; gap: 14px; align-items: flex-start; }
.picked-text { flex: 1 1 auto; min-width: 0; }
.card-pic { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 12px;
  background: #eef1f5; overflow: hidden; }
/* Rasm formasi: oldindan ko‘rish chapda, tugma va izoh o‘ngda */
.ph-row { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.ph-preview { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 12px;
  background: #eef1f5; overflow: hidden; }
.ph-preview img { width: 100%; height: 100%; object-fit: cover; }
.ph-side { flex: 1 1 auto; min-width: 0; }
.ph-side .oc { margin: 0; }