/* Oylik poydevori: ish vaqti va stavkalar. TZ 15.3.
 *
 * ⛔ HAMMA SINF PREFIKSLI (`wt-`, `sr-`). DIZAYN.md: yalang‘och
 * sinf global qoida beradi va boshqa ekranga oqib o‘tadi —
 * aynan shu xato 2026-09-19 da telefonda qaytarish ekranining
 * ikki tugmasini yo‘q qilgandi.
 */

/* ── Ish vaqti ───────────────────────────────────────────── */

/* ⛔ Ro‘yxat KENGLIGI cheklangan. Keng ekranda qator butun
   sahifaga cho‘zilsa, ism chap chekkada, maydon o‘ng chekkada
   qolardi — ko‘z ikki karra yo‘l bosadi va qaysi maydon kimniki
   ekani bilinmasdi (suratda ko‘rindi). */
.wt-list, .sr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.wt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--field);
  border-radius: 12px;
}

/* ⛔ Butun yozuv bosiladi, faqat kichkina katakcha emas: bozorda
   qo‘l qo‘pol va 44 px qoidasi shuni talab qiladi (DIZAYN 5.1). */
.wt-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: var(--tap);
  cursor: pointer;
}

.wt-who input { width: 22px; height: 22px; }

/* ⛔ ISM QORA, KULRANG EMAS. `.wt-who` — `<label>`, va umumiy
   qoida yorliqni so‘nik qiladi: ism O‘CHIRILGAN tugmadek
   ko‘rinardi. Bu DIZAYN.md dagi «Sozlamalar/Xodimlar so‘nik
   ko‘rindi» xatosining aynan o‘zi. */
.wt-who span { color: var(--ink); font-weight: 600; }

.wt-hours {
  width: 96px;
  min-height: var(--tap);
  text-align: right;
  background: var(--field-on);
}

/* ⛔ Saqlash tugmasi ro‘yxat bilan bir kenglikda (720) —
   `base.css` dagi umumiy 560 bu yerda ochiladi. */
.pr-acts { max-width: 720px; }
/* ⛔ `main:not(...)` bilan — sabab `sales.css` dagi `.sale-acts-col` da */
main:not(:has(.sale-wrap)) .pr-acts .go { max-width: none; }

/* ── Stavkalar ───────────────────────────────────────────── */

.sr-row {
  display: grid;
  /* ⛔ Tanlov kengligi 170: «belgilanmagan» 150 da qirqilardi */
  grid-template-columns: 1fr 170px 140px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--field);
  border-radius: 12px;
}

.sr-who { font-weight: 600; }

.sr-kind, .sr-rate { min-height: var(--tap); background: var(--field-on); }

.sr-rate { text-align: right; }

/* ⛔ O‘chirilgan maydon SHAFFOF, yashirin emas: «bu yerda summa
   bo‘lmaydi» degan gap ko‘rinib tursin. */
.sr-rate:disabled { opacity: .45; }

/* Telefonda uch ustun sig‘maydi — ikki qator bo‘ladi */
@media (max-width: 560px) {
  .sr-row { grid-template-columns: 1fr 120px; }
  .sr-who { grid-column: 1 / -1; }
}

/* ── Oyliklar: jonli hisob (15.3) ──────────────────────────
   ⛔ «pb» qo‘shimchasi bilan: yalang‘och `.row` yoki `.sum`
   boshqa ekranning elementini jimgina o‘zgartirardi
   (DIZAYN.md 3). */
/* ⛔ USTUN TOR (720). Keng monitorda ism chap chekkada, summa
   o‘ng chekkada qolib, ko‘z ular orasida yugurardi — suratda
   ko‘rindi. O‘lcham `.sale-card` va `.pr-acts` bilan bir xil:
   uchalasi ham «bir necha qatorli ro‘yxat» va bir xil turishi
   kerak. */
.pb-total, .pb-list { max-width: 720px; }
.pb-list { margin-top: 10px; }
.pb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.pb-row:nth-child(odd) { background: #f7f8fa; }
/* ⛔ Summa va «oldi» USTMA-UST: qarz va olingan pul ikki xil
   savol va ular bir qatorda yonma-yon tursa, ko‘z qaysi biri
   qaysiligini har safar qaytadan ajratardi. */
.pb-sum {
  margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; text-align: right; white-space: nowrap;
}
.pb-sum .money { font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-sum .sub { font-size: var(--t-1); color: var(--muted); }
/* ⛔ MINUS — QIZIL EMAS, kulrang-qizg‘ish: bu xato emas, holat.
   Xodim oldindan olgan va u keyingi oyga o‘zi o‘tadi. Qizil
   qilsak, direktor har kuni «xato bor» deb o‘qirdi. */
.pb-minus { color: #a4553f; }
.pb-pay { min-height: var(--tap); padding: 0 16px; flex: 0 0 auto; }
.pb-none { margin-left: auto; font-size: var(--t-2); color: var(--muted); }
.pb-say { margin: 2px 12px 10px; }
@media (max-width: 560px) {
  /* Telefonda tugma pastga tushadi — qator qisilib qolmasin */
  .pb-row { flex-wrap: wrap; }
  .pb-pay { margin-left: auto; }
}

/* ── Oy yakuni (15.3) ──────────────────────────────────────
   ⛔ «pc» qo‘shimchasi bilan — yalang‘och sinf boshqa ekranga
   oqib o‘tardi (DIZAYN.md 3). */
.pb-close { margin-bottom: 12px; }
/* ⛔ USTUN MAYDONLAR ENIDA (560), 720 emas. Ustidagi sana
   maydonlari 560 da to‘xtaydi va ro‘yxat undan keng bo‘lsa,
   ustun o‘rtasidan sakrab ketardi — suratda ko‘rindi.
   «Oyliklar» ro‘yxati (`.pb-*`) 720 da qoladi: u yerda
   maydon yo‘q va solishtiradigan narsa ham yo‘q. */
.pc-total, .pc-list, .pc-pers, .pc-calc, .pc-say, .pc-head {
  max-width: 560px;
}
.pc-head { margin-top: 18px; }
.pc-list { margin-top: 10px; }
.pc-row, .pc-per {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.pc-row:nth-child(odd), .pc-per:nth-child(odd) { background: #f7f8fa; }
.pc-sum {
  margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; text-align: right; white-space: nowrap;
}
.pc-sum .money { font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-sum .sub { font-size: var(--t-1); color: var(--muted); }
/* ⛔ Tuzatish maydoni TOR va o‘ng tomonda: u kamdan-kam
   to‘ldiriladi va ismdan kengroq bo‘lib turmasin. */
.pc-fix {
  flex: 0 0 auto; width: 104px; min-height: var(--tap);
  text-align: right; background: var(--field-on);
}
.pc-mini { flex: 0 0 auto; min-height: var(--tap); padding: 0 14px; }
.pc-say { margin: 2px 0 12px; }
@media (max-width: 560px) {
  .pc-row, .pc-per { flex-wrap: wrap; }
  .pc-fix { width: 100%; }
}