/* @rozgor-part 5/10 — PUL CHIZIG'I, olingan holat, guruh (0016) akkordeoni
   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. */
/* PUL CHIZIG'I (0013 -> yangilangan). Ilgari ro'yxat OSTIDA edi, endi YOPISHGAN
   TEPA blokda (sarlavha bilan qidiruv orasida) — ro'yxat surilganda ham ko'rinib
   turadi. Narxli mahsulot bo'lmasa yashirin. Tarkibi: 6px chiziq + "sarflandi /
   kerak" + markazda "Jami". */
.list-total {
  margin: 0 12px 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  font-size: 15px;
  font-weight: 700;
}

/* Chiziq mahsulot chizig'i bilan BIR XIL uslubda: to'lgan qismi YASHIL, bo'sh
   qismi SARIQ. Sariq ataylab quyuq (0.55) — xira fon "chiziq to'lgan" degan
   yolg'on taassurot berardi (67% to'lgani ~90% ko'rinardi). */
.total-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(217, 138, 0, 0.55);
  overflow: hidden;
}

.total-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--done);
  transition: width 0.25s ease;
}

/* Chetlarda: chapda yashil "sarflandi", o'ngda sariq "kerak". */
.total-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.total-spent {
  color: var(--done);
}

.total-need {
  color: var(--warn);
}

/* Markazda kichik kulrang "Jami X so'm · N narxsiz". */
.total-sum {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-hint);
  font-variant-numeric: tabular-nums;
}

/* Qachon qo'shilgani — kichik, xira subsatr. 2-bosqichdan boshlab qatorda EMAS
   (bir vaqtda qo'shilgan 10 ta mahsulotda 10 marta takrorlanardi) — varaqda. */
.item-date {
  margin-top: 3px;
  font-size: 12px;
  color: var(--tg-hint);
  opacity: 0.85;
}

/* Olingan (bought) mahsulot — CHIZIQSIZ; matn + katak YASHIL (0010 D-qism). */
.item.bought .item-name {
  color: var(--done);
}

/* Yashil o'qilishi uchun umumiy xiralashtirishni yumshoq qoldiramiz (chiziqsiz). */
.item.bought {
  opacity: 0.85;
}

/* Varaqdagi "Olindi" qatorining QIYMATI — olingan miqdor ("2 kg"). Miqdor qiymati
   bilan bir xil ko'rinish (rangni pastdagi "olindi / qoldi" yozuvi beradi). */
.item-taken {
  font-size: 16px;
  font-weight: 700;
  color: var(--tg-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* "Olindi" endi TAHRIRLANADI (5-bosqich): qiymat tugma bo'lib, Miqdor maydoni
   bilan bir xil ko'rinadi (bir naqsh). Miqdorda son bo'lmagan mahsulotda esa
   oddiy span qoladi (tahrirlanmaydi) — quyidagi qoidalar unga tegmaydi. */
.sheet-value button.item-taken {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  min-height: 32px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

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

/* Hech narsa olinmagan -> "+ olindi" ishorasi ("+ narx" / "+ tur" bilan bir xil). */
.sheet-value .item-taken-empty {
  font-weight: 500;
  color: var(--tg-hint);
  opacity: 0.85;
}

/* Olingan miqdor maydoni — miqdor maydoni bilan bir xil (faqat torroq: son). */
/* font-size 16px — iOS zumlashiga qarshi. */
.item-taken-input {
  width: 110px;
  max-width: 40vw;
  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;
}

/* Varaqda chiziq ostidagi rangli yozuv: chap chetda "2 kg olindi" (yashil), o'ng
   chetda "3 kg qoldi" (sariq). */
.sheet-taken-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
}

/* QISMAN olingan mahsulot — sariq urg'u, tepada qoladi (hali to'liq olinmagan) */
.item.partial {
  background: var(--warn-bg);
  box-shadow: inset 3px 0 0 var(--warn);
}

/* Qisman olingan mahsulot katagi (checkbox) — SARIQ urg'u + qisman belgisi ("–")
   (to'liq olingan yashil "✓" dan farqli o'laroq). */
.item.partial .item-check::before {
  border-color: var(--warn);
}

.item.partial .item-check::after {
  content: "–";
  opacity: 1;
  color: var(--warn);
  font-size: 18px;
  font-weight: 700;
}

/* Qisman olish jarayoni chizig'i (progress bar) — olingan/kerakli ulushida to'ladi
   (0010). TO'LGAN qismi YASHIL (olindi), BO'SH qismi SARIQ fon (qoldi) — pastdagi
   "olindi / qoldi" yozuvining ranglari bilan bir xil til. Varaqda 5px. */
.item-progress {
  margin-top: 6px;
  height: 5px;
  border-radius: 999px;
  /* SARIQ (bo'sh) qism ataylab QUYUQ: 0.25 xira edi va chiziq to'lganday ko'rinardi
     (67% to'lgani ~90% dek). Hisob (takenFraction) to'g'ri edi — faqat rang. */
  background: rgba(217, 138, 0, 0.55);
  overflow: hidden;
}

/* Ro'yxat qatorida ingichkaroq (3px) — qator ikki satrga sig'ib, siqiq ko'rinmasin. */
.item-body .item-progress {
  margin-top: 4px;
  height: 3px;
}

.item-progress-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: var(--done);
  transition: width 0.25s ease;
}

/* "Olinganlar (N)" ajratuvchisi — olinmagan va olingan mahsulotlar orasida */
.list-divider {
  list-style: none;
  margin: 6px 2px 0;
  padding: 8px 2px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-hint);
  border-top: 1px solid rgba(128, 128, 128, 0.18);
}

/* --- Guruh (0016) akkordeoni — YAXLIT blok (Part A) ----------------------- */

/* Butun guruh (sarlavha + a'zolar) BITTA konteyner bo'lib turadi: nozik fon +
   chap urg'u chizig'i (accent, ilova ko'k rangi) blok bo'ylab yaxlit tushadi;
   burchaklar yumaloq, ichki burchaklar kesiladi (overflow). Guruhsiz mahsulotlar
   bu blokdan TASHQARIDA — o'z kartochkasi bilan, urg'u/fonsiz — ajralib turadi. */
.group-block {
  list-style: none;
  padding: 0;
  background: rgba(36, 129, 204, 0.07);
  border-left: 3px solid var(--tg-button);
  border-radius: var(--radius);
  overflow: hidden;
}

/* To'liq olingan guruh — butun blok xiralashadi + urg'u kulrang (bought uslubi). */
.group-block.done {
  opacity: 0.6;
  border-left-color: var(--tg-hint);
}

/* Guruh sarlavha qatori — endi blok ICHIDAGI div; o'z foni/radiusi/chegarasi YO'Q
   (blok beradi). Bosilsa ochilib/yopiladi. */
.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.group-header:active {
  background: rgba(36, 129, 204, 0.1);
}

.group-chevron {
  flex: none;
  width: 16px;
  color: var(--tg-hint);
  font-size: 11px;
  text-align: center;
}

.group-icon {
  flex: none;
  font-size: 16px;
}

.group-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  word-break: break-word;
}

.group-count {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--tg-hint);
  font-variant-numeric: tabular-nums;
}

/* YOPIQ guruh holat yozuvi (B, 0016) — qisman SARIQ, olindi/hammasi olindi YASHIL.
   A'zolar ichidagi partial/taken uslubi bilan bir xil rang (parity). */
.group-count--partial {
  color: var(--warn);
}

.group-count--taken {
  color: var(--done);
}

/* YOPIQ guruh mini progress chizig'i (C, 0016) — sarlavha ostida yupqa chiziq,
   guruh yaxlit bajarilishini ko'rsatadi. Faqat yopiq guruhda chiziladi (ochiqda
   a'zolarning o'z chizig'i bor — takror bo'lmasin). Standart to'lgich SARIQ
   (partial); .taken -> YASHIL. Track neytral kulrang (ikkala mavzuda ham o'qiladi). */
.group-progress {
  height: 4px;
  margin: -2px 14px 10px 38px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.2);
  overflow: hidden;
}

.group-progress-fill {
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: var(--warn);
  transition: width 0.25s ease;
}

.group-progress.taken .group-progress-fill {
  background: var(--done);
}

/* A'zolar konteyneri — blok ICHIDA, ichkariga surilgan (indent). Blok foni ustida
   turadi; a'zolar orasida ozgina masofa. */
.group-items {
  list-style: none;
  margin: 0;
  padding: 4px 8px 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Guruh a'zosi — blok ichida SHAFFOF (blok foni ko'rinib tursin), alohida
   kartochka EMAS: "guruh ichida" o'qilsin. Olingan/qisman uslublari o'zgarmaydi. */
.item.item-in-group {
  margin-left: 0;
  background: transparent;
  padding: 2px 4px 2px 0;
  border-radius: 8px;
}

.item.item-in-group:active {
  background: rgba(128, 128, 128, 0.12);
}

/* --------------------------------------------------------------------------
   Mahsulot varag'i (item sheet) — 2-bosqich. Qatordan olib tashlangan MA'LUMOT
   (kategoriya, sana, kim qo'shgani, to'liq holat yozuvi) va AMALLAR (narx
   tahrirlash, o'chirish) shu pastdan chiqadigan varaqda. z-index oila ekranidan
   (100) yuqori, kirish darvozasidan (200) past — darvoza hamma narsa ustida.
   -------------------------------------------------------------------------- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.sheet-overlay[hidden] {
  display: none;
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--tg-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
}

/* Tepadagi kichik "tutqich" chizig'i — varaq ekanini bildiradi (bezak). */
.sheet-grip {
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.35);
}

.sheet-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-hint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

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

/* Sarlavha yopish tugmasi ("✕") ostiga tushmasin. To'ldirma FAQAT sarlavhada —
   quyidagi "O'chirish" tugmasi to'liq kenglikda, simmetrik qolishi uchun. */
.sheet-title {
  padding-right: 40px;
  font-size: 19px;
  font-weight: 700;
  word-break: break-word;
}