/* @rozgor-part 6/10 — MAHSULOT VARAG'I: qatorlar, toifa ro'yxati, varaq jadvali, Saqlash/Bekor
   BO'LINDI (5d-blok): ilgari bitta `style.css` (3058 qator) edi. TARTIB MUHIM —
   keyingi qoida oldingisini bosadi, shuning uchun public/index.html dagi <link>
   teglari AYNAN shu raqamlar tartibida turishi SHART. */
/* --- Varaq qatorlari (3-bosqich): "<yorliq> ....... <qiymat>" -------------- */

.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
}

.sheet-label {
  flex: none;
  color: var(--tg-hint);
}

/* Qiymat o'ngda; tahrir elementi (tugma/input/chiplar) shu yerda o'sadi. */
.sheet-value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  text-align: right;
}

/* Mokabdagi "─────" ajratuvchilari. */
.sheet-sep {
  height: 1px;
  margin: 8px 0;
  background: rgba(128, 128, 128, 0.18);
}

.sheet-price {
  font-size: 15px;
}

/* Varaqdagi narx tugmalari ("Kilo narxi" va "Jami") — barmoq uchun kattaroq.
   Ikkalasi bir xil ko'rinadi: ular BITTA ma'lumotning ikki ko'rinishi. */
.sheet-price .item-price,
.sheet-price .item-unit-price {
  min-height: 32px;
  font-size: 16px;
}

.item-unit-price {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--tg-link);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.item-unit-price:active {
  opacity: 0.6;
}

/* Varaqdagi miqdor — bosib tahrirlanadigan tugma (narx bilan bir xil ko'rinish). */
.sheet-value .item-qty {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  min-height: 32px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--tg-text);
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sheet-value .item-qty:active {
  opacity: 0.6;
}

.sheet-value .item-qty-empty,
.sheet-value .item-cat-empty {
  font-weight: 500;
  color: var(--tg-hint);
  opacity: 0.85;
}

/* font-size 16px — iOS zumlashiga qarshi. */
.item-qty-input {
  width: 140px;
  max-width: 50vw;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--tg-button);
  background: var(--tg-bg);
  color: var(--tg-text);
  font-size: 16px;
  font-family: inherit;
  text-align: right;
}

/* Varaqdagi toifa tabletkasi — bosiladi, ostida ro'yxat ochiladi (akkordeon).
   Chevron `::after` bilan chiziladi: tugmaning MATNI sof qiymat bo'lib qolsin
   (ro'yxat holati aria-expanded da). */
.sheet-value .item-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  padding: 4px 10px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sheet-value .item-cat::after {
  content: "▾";
  font-size: 11px;
  line-height: 1;
  opacity: 0.75;
}

.sheet-value .item-cat[aria-expanded="true"]::after {
  content: "▴";
}

.sheet-value .item-cat:active {
  opacity: 0.6;
}

/* --- Toifa ro'yxati (akkordeon) — "Turi" qatori OSTIDA to'liq kenglikda -----
   Ilgari bu yerda 5 ta chip bor edi: o'ngga tekislangani uchun notekis o'ralardi
   (4 tasi bir qatorda, beshinchisi yolg'iz ikkinchi qatorda). Endi har toifa —
   alohida, chapga tekislangan qator; oralarida ingichka chiziq (border-top).
   Birinchi qatorning chizig'i "Turi" qatori ostidagi ajratuvchi vazifasini
   bajaradi (mokabdagidek), oxirgisidan keyin chiziq YO'Q. */
.cat-list {
  display: flex;
  flex-direction: column;
}

.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px; /* barmoq uchun eng kam bosish maydoni */
  padding: 10px 0;
  border: none;
  border-top: 1px solid rgba(128, 128, 128, 0.18);
  background: none;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cat-row-label {
  flex: 1 1 auto;
  text-align: left;
}

/* Tanlangan toifa — ko'k (varaqdagi boshqa faol qiymatlar bilan bir xil rang). */
.cat-row-active {
  color: var(--tg-link);
  font-weight: 700;
}

.cat-row-tick {
  flex: none;
  color: var(--tg-link);
  font-size: 15px;
}

.cat-row:active {
  opacity: 0.6;
}

/* Varaq pastidagi izoh qatori: "Ukam qo'shdi · bugun 09:15". */
.sheet-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sheet-dot {
  color: var(--tg-hint);
  opacity: 0.6;
}

/* Izoh qatori ichida tepa bo'shliq kerak emas (flex bir qatorda tekislaydi). */
.sheet-foot .item-who,
.sheet-foot .item-date {
  margin-top: 0;
}

/* "N marta olgansiz" — `freq` (Doim olinadigan hisoblagichi) ko'rinishi. Ilgari
   `freq` faqat "Doim olinadigan" saralashida ishlatilardi, hech qayerda ko'rinmasdi. */
.item-freq {
  margin-top: 3px;
  font-size: 12px;
  color: var(--tg-hint);
  opacity: 0.85;
}

/* --- Varaqdagi jadval: qatordagi bilan AYNAN bir xil, faqat KATTAROQ shrift +
   ustun sarlavhalari. Ustun kengliklari baribir grid'dan (max-content). ------- */
.taken-table-lg {
  margin-top: 8px;
  column-gap: 8px;
  row-gap: 3px;
  font-size: 14px;
}

.sheet-table-block .taken-unit-line {
  margin-top: 6px;
  font-size: 12px;
}

/* Varaqdagi ogohlantirishlar (BLOKLAMAYDI, faqat aytadi):
   sariq — miqdorda birlik yozilmagan; qizil — summa mantiqsiz katta. */
.sheet-warn,
.sheet-danger {
  margin: -2px 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.sheet-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.sheet-danger {
  background: rgba(229, 72, 77, 0.12);
  color: var(--danger);
}

/* --- "Saqlash" / "Bekor" — FAQAT o'zgarish bo'lganda chiziladi -------------
   Varaq pastida YOPISHIB turadi (sticky), shuning uchun uzun varaqda ham
   ko'rinadi va "saqlashni unutdim" holati bo'lmaydi. */
.sheet-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 0 4px;
  background: var(--tg-bg);
}

.sheet-save,
.sheet-cancel {
  flex: 1 1 0;
  min-height: 46px;
  padding: 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sheet-save {
  border: none;
  background: var(--tg-button);
  color: var(--tg-button-text);
}

.sheet-save:active {
  opacity: 0.8;
}

.sheet-save[disabled] {
  opacity: 0.55;
  cursor: default;
}

.sheet-cancel {
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: transparent;
  color: var(--tg-text);
  font-weight: 600;
}

.sheet-cancel:active {
  background: rgba(128, 128, 128, 0.15);
}

/* O'chirish — ilgari qatordagi kichik "×" edi (tasodifan bosilardi). Endi varaqda,
   ko'rinadigan va keng tugma; bosiladigan balandligi 44px dan kam emas. */
.sheet-del {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(229, 72, 77, 0.35);
  border-radius: var(--radius);
  background: transparent;
  color: var(--danger);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sheet-del:active {
  background: rgba(229, 72, 77, 0.15);
}

.empty {
  text-align: center;
  color: var(--tg-hint);
  padding: 48px 16px;
}

.empty p {
  margin: 4px 0;
}

.empty-hint {
  font-size: 14px;
}