/* 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:var(--w-bold); }

/* ⛔ O‘Z QATORI O‘CHIQ (K6): o‘z ish vaqtini o‘zi yozmaydi. Qator
   ko‘rinadi, lekin bosilmaydi — izoh sababini aytadi.
   ⛔ Butun qatorga `opacity` EMAS: qator ichida och-to‘q chiziqlar
   paydo bo‘lardi (suratda ko‘rindi) — faqat matn kulrang. */
.wt-self .wt-who { cursor: default; }
.wt-self .wt-who span { color: var(--muted); }
/* Soat maydoni ham yozib bo‘ladigandek oq turmasin */
.wt-self .wt-hours { background: transparent; }
.wt-who .wt-note {
  display: block;
  font-size: var(--t-1); font-weight: var(--w-text); color: var(--muted);
}

.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: `base.css` dagi qoida `:not(:has())` argumentining
   og‘irligini oladi va oddiy `.pr-acts .go` undan YUTQAZADI — birinchi
   urinishda chek kartochkasida tugma 560 bo‘lib qolgan edi (suratda). */
main:not(:has(.sale-wrap)) .pr-acts .go { max-width: none; }

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

/* ⛔ Sarlavha va qator BITTA to‘r: ustunlar bir chiziqda turmasa,
   «Hisob qaysi kundan» qaysi maydonga tegishli ekani bilinmasdi.
   Tanlov kengligi 170: «belgilanmagan» 150 da qirqilardi. */
.sr-row, .sr-head {
  display: grid;
  grid-template-columns: 1fr 170px 140px 170px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.sr-row { background: var(--field); border-radius: 12px; }
.sr-head {
  margin-top: 8px; padding-top: 0; padding-bottom: 0;
  font-size: var(--t-1); font-weight: var(--w-mid); color: var(--muted);
}

.sr-who { font-weight:var(--w-bold); }

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

.sr-rate { text-align: right; }
.sr-since { width: 100%; }
/* Keng ekranda yorliq SARLAVHADA — qatorda takrorlanmaydi */
.sr-when-t { display: none; }
.sr-note { max-width: 720px; }

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

/* Telefonda to‘rt ustun sig‘maydi — uch qavat bo‘ladi, sana
   o‘z yorlig‘i bilan (sarlavha telefonda ko‘rinmaydi) */
@media (max-width: 560px) {
  .sr-row { grid-template-columns: 1fr 120px; }
  .sr-who, .sr-when { grid-column: 1 / -1; }
  .sr-head { display: none; }
  .sr-when-t {
    display: block; margin-bottom: 4px;
    font-size: var(--t-1); color: var(--muted);
  }
}

/* ── 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; }
/* ⛔ QATOR — TO‘RT BO‘LAK, IKKI QAVAT (Figma maketi, 2026-09-28):
     ism          qarz        To‘lash
     nima uchun   nimadan
   Summa va «ishladi · oldi» USTMA-UST: qarz va olingan pul ikki xil
   savol va ular yonma-yon tursa, ko‘z qaysi biri qaysiligini har
   safar qaytadan ajratardi. */
.pb-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name owed pay" "desc info pay";
  align-items: center; column-gap: 12px; row-gap: 2px;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.pb-row:nth-child(odd) { background: #f7f8fa; }
.pb-name { grid-area: name; }
/* Ism — tugma (xodim kartasi): brauzer bezagi olinadi, bosish joyi `--tap` */
.pb-open {
  justify-self: start; min-height: var(--tap); padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pb-chev { color: var(--muted); }
.pb-desc { grid-area: desc; font-size: var(--t-2); color: var(--muted); }
.pb-owed {
  grid-area: owed; justify-self: end; white-space: nowrap;
  font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
}
.pb-info {
  grid-area: info; justify-self: end; text-align: right;
  font-size: var(--t-1); color: var(--muted);
}
/* ⛔ Summa o‘rtasidan SINMAYDI («oldi 300 / 000» — maketning
   birinchi suratida shunday chiqdi). */
.pb-part { white-space: nowrap; }
/* ⛔ «Ishdan ketgan» — SARIQ, qizil emas: bu xato emas, holat.
   Qarzi to‘lanmaguncha qator shu belgi bilan turadi (K5). */
.pb-left {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: #fdf1e0; color: var(--warn);
  font-size: var(--t-1); font-weight: var(--w-mid);
}
/* ⛔ 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 { grid-area: pay; min-height: var(--tap); padding: 0 16px; }
.pb-none {
  grid-column: 2 / -1; grid-row: 1 / span 2; justify-self: end;
  font-size: var(--t-2); color: var(--muted);
}
.pb-say { margin: 2px 12px 10px; }
@media (max-width: 560px) {
  /* ⛔ Telefonda UCH QAVAT (maket): ism va qarz tepada, «nima uchun»
     o‘rtada, «nimadan» va tugma pastda — qator qisilib qolmasin */
  .pb-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name owed" "desc desc" "info pay";
    row-gap: 4px;
  }
  .pb-info { justify-self: start; text-align: left; }
  .pb-part { display: block; }
  .pb-sep { display: none; }
  .pb-none { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* ── 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; }
/* ⛔ QULFLANGAN SANA (X3, 2026-09-28) — maydonga O‘XSHAMAYDI: oq
   emas, halqasiz. Maydonga o‘xshasa direktor uni bosib o‘zgartirmoqchi
   bo‘lardi va hech narsa bo‘lmasdi. Yonida — nega o‘zgarmaydi. */
.pc-lock {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  max-width: 560px; padding: 13px 14px; border-radius: 10px;
  background: #f1f3f6;
}
.pc-lock .sub { font-size: var(--t-2); color: var(--muted); }
.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:var(--w-bold); font-variant-numeric: tabular-nums; }
.pc-sum .sub { font-size: var(--t-1); color: var(--muted); }
/* ⛔ «Nima uchun» ISM OSTIDA, yonida emas (surat, 2026-09-28):
   yonida turganda «ishdan ketgan» belgisi bilan qator uzilib,
   «19.09 / dan» bo‘lib qolardi. «Oyliklar» qatori ham shunday. */
.pc-row .who .sub { display: block; }
/* ⛔ 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%; }
}

/* ═══════════════════════════════════════════════════════════
   «OYLIKLAR → XODIM» — NEOKARTA (egasi, 2026-09-29; `payroll_person.js`)

   ⛔ Karta, tugmalar, belgilar, pastki tugma — `neokarta.css` (`nk-`).
   Bu yerda FAQAT joylashuv (`po-`): ikki ustun, hisob qatori, telefon.
   ═══════════════════════════════════════════════════════════ */
.po-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.po-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.po-lines { display: flex; flex-direction: column; }
.po-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 0;
}
.po-what { display: flex; flex-direction: column; min-width: 0; }
.po-what b { font-weight: var(--w-mid); }
.po-off { opacity: .72; }
.po-off .po-amt { text-decoration: line-through; color: var(--muted); }
.po-side .field { margin-bottom: 12px; }
.po .go { background: #12996b; }

@media (max-width: 1100px) {
  .po-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ⛔ Pastki tugma menyu ustida — sabab `expense.css` dagi `.xp-dock` */
.po .po-dock { position: sticky; bottom: 0; }
@media (max-width: 560px) {
  .po .po-dock { padding-left: 0; padding-right: 0; }
  .po-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .po-col { display: contents; }
  .po-hero { order: 0; }
  .po-acts { order: 1; }
  .po-list { order: 2; }
  .po-side { order: 3; }
  .po:not(.po-writing) .po-side { display: none; }
  .po-writing .po-dock { display: none; }
}