/* «Kassa» sahifasi — pul hozir qayerda va smenalar (4-qism, K16-B).
 *
 * ⛔ Figma maketi (egasi «Tavsiya», 2026-09-28): kompyuterda jadval,
 * telefonda har smena — kartochka.
 *
 * ⛔ HAMMA SINF `sb-` PREFIKSLI (DIZAYN.md 3): yalang‘och sinf boshqa
 * ekranga oqib o‘tadi. Chek qog‘ozi (`.sh-paper`) va do‘kon tugmasi
 * (`.chip`) — umumiy, bu yerda qayta ta'riflanmaydi.
 */

/* ⛔ KENGLIK CHEGARALANGAN (980): keng ekranda qator butun sahifaga
   cho‘zilsa, kassa nomi chap chekkada, summa o‘ng chekkada qolardi —
   ko‘z qaysi summa qaysi kassaniki ekanini yo‘qotardi. */
.sb-bar, .sb-now, .sb-tiles, .sb-head, .sb-rows { max-width: 980px; }

.sb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sb-places { display: flex; flex-wrap: wrap; gap: 6px; }

.sb-label {
  margin: 18px 0 6px;
  font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted);
}
.sb-card {
  padding: 14px 16px; border-radius: var(--card-r);
  background: var(--glass); box-shadow: var(--card-sh);
}
.sb-sub { font-size: var(--t-2); color: var(--muted); }
.sb-part { white-space: nowrap; }
/* ⛔ Summa o‘rtasidan SINMAYDI («1 180 / 000») */
.sb-money, .sb-big, .sb-tile-sum, .sb-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Hozir kassalarda ─────────────────────────────────────── */
.sb-now { display: flex; flex-direction: column; gap: 10px; }
.sb-big { font-size: var(--t-6); font-weight: var(--w-head); line-height: var(--lh-tight); }
.sb-till { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-till-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sb-till-name b { font-weight: var(--w-bold); }
.sb-money { font-weight: var(--w-bold); }

/* ── Tanlangan kunlar uchun ───────────────────────────────── */
.sb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-tile { display: flex; flex-direction: column; gap: 4px; }
.sb-tile-label { font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted); }
.sb-tile-sum { font-size: var(--t-6); font-weight: var(--w-head); line-height: var(--lh-tight); }

/* ── Smenalar ─────────────────────────────────────────────── */
/* ⛔ SARLAVHA VA QATOR BITTA PANJARADA — ustunlar ko‘z bilan ergashsin */
.sb-head, .sb-row {
  display: grid;
  grid-template-columns:
    96px minmax(0, 1.4fr) minmax(0, 1fr) 110px 150px 110px 100px;
  column-gap: 12px; align-items: center;
}
.sb-head { padding: 0 16px 6px; font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted); }
.sb-r { text-align: right; }
.sb-rows { display: flex; flex-direction: column; gap: 8px; }
/* ⛔ Butun qator — tugma: bozorda qo‘l qo‘pol, kichkina havolaga
   tegib bo‘lmaydi (DIZAYN 5.1, `--tap`). */
.sb-row {
  width: 100%; min-height: var(--tap); padding: 12px 16px;
  border: 0; border-radius: 12px; background: var(--glass);
  box-shadow: var(--ctl-sh); color: var(--ink); text-align: left;
  font: inherit; cursor: pointer;
}
/* ⛔ USTUN QO‘LDA: qatorda bolalar kompyuter tartibida emas (telefonda
   kassa va farq tepada turishi uchun), `sb-meta`/`sb-out` esa ko‘rinmas
   o‘ram — shuning uchun har katak o‘z ustuni va qatoriga qo‘yiladi. */
.sb-meta, .sb-out { display: contents; }
.sb-day { grid-area: 1 / 1; font-weight: var(--w-mid); }
.sb-reg { grid-area: 1 / 2; font-weight: var(--w-bold); overflow-wrap: anywhere; }
.sb-who { grid-area: 1 / 3; color: var(--muted); }
.sb-counted { grid-area: 1 / 4; }
.sb-status { grid-area: 1 / 5; }
.sb-taken { grid-area: 1 / 6; }
.sb-left { grid-area: 1 / 7; }
.sb-time { display: none; }
.sb-num { text-align: right; }
.sb-counted { font-weight: var(--w-bold); }
.sb-lbl { display: none; }
.sb-pill {
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--soft); color: var(--mid);
  font-size: var(--t-1); font-weight: var(--w-mid);
}

/* ── Smena cheki oynasi ───────────────────────────────────── */
.sb-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-sheet-title { font-size: var(--t-5); font-weight: var(--w-bold); }
.sb-x {
  display: grid; place-items: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 0; border-radius: 12px; background: var(--field); color: var(--ink);
}

@media (max-width: 560px) {
  .sb-tiles { grid-template-columns: 1fr; }
  .sb-tile-sum { font-size: var(--t-5); }
  /* ⛔ Telefonda jadval sarlavhasi YO‘Q — har raqam o‘z yorlig‘i bilan */
  .sb-head { display: none; }
  /* ⛔ TO‘RT QAVAT (maket): kassa va farq tepada, kun va kassir
     o‘rtada, sanaldi, keyin olib ketildi va qoldi */
  .sb-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "reg status" "meta meta" "counted counted" "out out";
    row-gap: 2px; column-gap: 8px;
  }
  .sb-reg { grid-area: reg; }
  .sb-status { grid-area: status; justify-self: end; }
  .sb-meta, .sb-out { display: block; font-size: var(--t-2); color: var(--muted); }
  .sb-meta { grid-area: meta; }
  .sb-out { grid-area: out; }
  .sb-day { font-weight: var(--w-text); }
  .sb-who::before { content: " · "; }
  .sb-time { display: inline; }
  .sb-counted { grid-area: counted; }
  .sb-num { text-align: left; font-size: var(--t-2); }
  .sb-left::before { content: " · "; }
  .sb-lbl { display: inline; margin-right: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   7-QISM: «KASSA AMALLARI» (maket «7-qism · Kassa», egasi «Ok»)

   ⛔ HAMMA SINF `ka-` PREFIKSLI («kassa amallari», DIZAYN.md 3).
   ⛔ Kenglik 980 — yuqoridagi `sb-` bloklari bilan bir chiziqda.
   ═══════════════════════════════════════════════════════════ */
.ka-tools, .ka-eq, .ka-hint, .ka-active, .ka-head, .ka-rows,
.ka-more, .ka-empty { max-width: 980px; }

/* ⛔ Tepadan 18px — `.sb-label` bilan bir qadam: sahifa ichidagi almashtirgich
   olib tashlangach (menyu o‘zi almashtiradi) qidiruv «Hozir kassalarda» ga
   yopishib qolgan edi (suratda, 2026-09-29). */
.ka-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 12px; }
.ka-q {
  flex: 1 1 240px; min-width: 0; min-height: var(--tap); padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--field); color: var(--ink);
  font: inherit; font-size: var(--t-4); /* ⛔ 16 — iPhone kattalashtirmasin (base.css) */
}
.ka-btn { display: inline-flex; align-items: center; gap: 6px; }
.ka-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--mid); color: var(--glass);
  font-size: var(--t-1); font-weight: var(--w-mid); text-align: center;
}

/* ── Tenglama ─────────────────────────────────────────────── */
/* ⛔ Summa o‘rtasidan SINMAYDI («1 180 / 000») */
.ka-eq {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-radius: var(--card-r); background: var(--glass); box-shadow: var(--card-sh);
}
.ka-cell { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.ka-lbl { font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted); }
.ka-cell b {
  font-size: var(--t-5); font-weight: var(--w-bold);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* ⛔ Oxirgi son KATTAROQ EMAS — og‘irroq: kattasi yozuvlarni bir chiziqdan
   chiqarardi (suratda «Kun oxirida» boshqalardan baland turdi) */
.ka-cell b.ka-end { font-weight: var(--w-head); }
.ka-op { font-style: normal; font-size: var(--t-5); font-weight: var(--w-bold); color: var(--muted); }
.ka-sign { display: none; font-style: normal; }
.ka-plus { color: var(--ok); }
.ka-bad { color: var(--danger); }
.ka-hint { margin: 6px 2px 0; font-size: var(--t-2); color: var(--muted); }

/* ── Qo‘yilgan filtrlar ───────────────────────────────────── */
.ka-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ka-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--field); color: var(--ink);
  font: inherit; font-size: var(--t-2); cursor: pointer;
}
.ka-chip.on { background: var(--soft); color: var(--mid); font-weight: var(--w-mid); }
.ka-link {
  min-height: 44px; padding: 0 8px; border: 0; background: none;
  color: var(--mid); font: inherit; font-weight: var(--w-mid); cursor: pointer;
}

/* ── Ro‘yxat ──────────────────────────────────────────────── */
/* ⛔ SARLAVHA VA QATOR BITTA PANJARADA — ustunlar ko‘z bilan ergashsin */
/* ⛔ USTUNLAR EKRAN ENIGA MOSLASHADI (DIZAYN 5.4): 1024 da qat’iy
   ustunlar «Izoh» ga 18 px qoldirardi va matn harfma-harf bo‘linardi
   (suratda topildi). Vaqt va summa — qat’iy, qolgani — ulush bilan. */
.ka-head, .ka-row {
  display: grid;
  grid-template-columns:
    64px minmax(90px, 1fr) minmax(110px, 1.2fr) minmax(0, 2fr) minmax(70px, .8fr) 120px;
  column-gap: 12px; align-items: center;
}
.ka-head { padding: 12px 16px 6px; font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted); }
.ka-rows { display: flex; flex-direction: column; gap: 6px; }
/* ⛔ Butun qator — tugma (smena cheki ochiladi): bozorda qo‘l qo‘pol */
.ka-row {
  width: 100%; min-height: var(--tap); padding: 10px 16px;
  border: 0; border-radius: 12px; background: var(--glass); box-shadow: var(--ctl-sh);
  color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
/* Voqea («Smena ochildi») — amal emas, summasi yo‘q: xira tasma */
.ka-row.ka-ev { background: var(--field); box-shadow: none; color: var(--muted); }
.ka-when { font-size: var(--t-2); color: var(--muted); }
.ka-reg { display: flex; flex-direction: column; min-width: 0; }
.ka-reg b { font-weight: var(--w-mid); overflow-wrap: anywhere; }
.ka-br { font-size: var(--t-1); color: var(--muted); }
.ka-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: var(--w-mid); }
.ka-ev .ka-kind, .ka-cancel .ka-kind, .ka-cancel .ka-reg b { color: var(--muted); }
.ka-note { min-width: 0; font-size: var(--t-2); color: var(--muted); overflow-wrap: anywhere; }
.ka-who { min-width: 0; overflow-wrap: anywhere; }
.ka-sum {
  text-align: right; font-weight: var(--w-bold);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ka-dim { color: var(--muted); }
.ka-struck { text-decoration: line-through; }
.ka-pill {
  padding: 1px 8px; border-radius: 999px; background: #fdecec; color: var(--danger);
  font-size: var(--t-1); font-weight: var(--w-mid);
}
.ka-more { width: 100%; margin-top: 10px; }
.ka-empty { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }

/* ── Oynalar: filtr va hisobot ────────────────────────────── */
.ka-card { display: flex; flex-direction: column; gap: 14px; }
.ka-block { display: flex; flex-direction: column; gap: 8px; }
.ka-block > b { font-size: var(--t-2); font-weight: var(--w-mid); color: var(--muted); }
.ka-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ka-pick select, .ka-range input {
  min-height: var(--tap); padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--field); color: var(--ink); font: inherit; font-size: var(--t-4);
}
.ka-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ka-range input { min-width: 0; }
/* ⛔ Filtr tugmalari PASTDA QOTGAN (savdo filtri qoidasi): telefonda
   oyna ekrandan uzun — «Ko‘rsatish» ni qidirib surish kerak bo‘lmasin.
   Oyna o‘z chegarasiga (`shell.css`) sig‘ishi uchun O‘RTASI qisqaradi va
   o‘zi suriladi (`min-height: 0`); pastki chekka qanday bo‘lmasin (iPhone
   «uy chizig‘i»), tugmalar uning ustida qoladi. Oynaga `overflow: hidden`
   ATAYLAB berilmagan: o‘rta qisqarmay qolsa ham oyna eskicha suriladi —
   hech narsa kesilib, yetib bo‘lmaydigan joyda qolmaydi. */
.ka-body {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0; overflow-y: auto;
}
.ka-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.ka-foot .go { margin-top: 0; }
.ka-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  border: 0; border-radius: 12px; background: var(--field); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ka-opt b { font-weight: var(--w-bold); }

@media (max-width: 560px) {
  /* ⛔ Telefonda tenglama ustma-ust: chapda nomi, o‘ngda ishorali summa */
  .ka-eq { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px; }
  .ka-cell { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ka-cell b { font-size: var(--t-4); }
  .ka-cell b.ka-end { font-size: var(--t-5); }
  /* ⛔ Qidiruv to‘liq enda, ikki tugma ostida teng: «Hisobot» yolg‘iz
     qatorda osilib qolardi (suratda topildi) */
  .ka-q { flex-basis: 100%; }
  .ka-btn { flex: 1 1 0; justify-content: center; }
  .ka-cell:last-child { padding-top: 6px; }
  .ka-op { display: none; }
  .ka-sign { display: inline; }
  .ka-head { display: none; }
  /* ⛔ UCH QAVAT (maket): amal va summa tepada, vaqt · kassa · kim
     o‘rtada, izoh pastda */
  .ka-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "kind kind sum" "when reg who" "note note note";
    row-gap: 2px; column-gap: 8px; padding: 10px 14px;
  }
  .ka-kind { grid-area: kind; }
  .ka-sum { grid-area: sum; }
  .ka-when { grid-area: when; }
  .ka-reg { grid-area: reg; flex-direction: row; flex-wrap: wrap; gap: 0 6px; font-size: var(--t-2); color: var(--muted); }
  .ka-reg b { font-weight: var(--w-text); }
  .ka-who { grid-area: who; font-size: var(--t-2); color: var(--muted); }
  .ka-note { grid-area: note; }
}

/* ── 2-bosqich: «+ Qo‘shish», tafsilot, bekor qilish (maket 6–12) ─
   ⛔ `km-` — «kassa amali» oynalari; oyna o‘zi `ka-card` (filtr bilan bir). */
/* ⛔ Asosiy amal — o‘ngda, ko‘k: sahifadagi yagona «yozadigan» tugma */
.ka-tools .ka-add { width: auto; height: auto; min-height: var(--tap); margin: 0; padding: 0 16px; }
.km-opt .sb-sub, .km-till .sb-sub { font-weight: var(--w-text); }
.km-form .go { margin-top: 8px; }
.km-none { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--field); }
.km-one { font-weight: var(--w-bold); }
.km-tills { display: flex; flex-direction: column; gap: 6px; }
.km-till {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap); padding: 8px 14px;
  border: 2px solid transparent; border-radius: 12px; background: var(--field);
  color: var(--ink); font: inherit; font-weight: var(--w-mid); text-align: left; cursor: pointer;
}
.km-till.on { border-color: var(--mid); background: var(--soft); }
.km-till:disabled { cursor: not-allowed; color: var(--muted); }
.km-err { color: var(--danger); }
/* ⛔ Tugmalar soni o‘zgaradi (ruxsatga qarab 1 yoki 2): ustun soni ham
   shunga qarab — yolg‘iz tugma yarim enda qolmasin (suratda topildi) */
.km-foot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.km-foot .go { margin-top: 0; }
/* ⛔ Bekor qilish oynasida — xavfli tugma tepada, «Orqaga» ostida */
.km-foot-col { grid-auto-flow: row; }
.km-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.km-line > span:last-child { text-align: right; overflow-wrap: anywhere; }
.km-big { font-size: var(--t-6); font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
.km-box { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--field); }
.km-warn { background: #fdecec; }
.km-warn b { color: var(--danger); }
.km-shift { min-height: 0; padding: 0; text-align: right; }
.km-danger { color: var(--danger); }
.km-go-danger { background: var(--danger); }

/* ── Chop etish: A4, oq-qora, butun ro‘yxat ───────────────── */
/* ⛔ Varaq `body` da (`shift_ledger.js`), ekranda ko‘rinmaydi. Chopda FAQAT
   u qoladi — qoida o‘zida, `labels.css` ning umumiy qoidasiga tayanmaydi. */
#kaPrint { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body:has(#kaPrint) { background: #fff; }
  body:has(#kaPrint) > *:not(#kaPrint) { display: none !important; }
  #kaPrint { display: block !important; color: #000; font-size: 11px; }
  #kaPrint h1 { margin: 0 0 4px; font-size: 18px; font-weight: var(--w-bold); }
  #kaPrint p { margin: 2px 0 6px; }
  #kaPrint table { width: 100%; border-collapse: collapse; }
  #kaPrint th, #kaPrint td {
    padding: 3px 4px; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top;
  }
  #kaPrint .ka-p-sum { text-align: right; white-space: nowrap; }
  #kaPrint .ka-p-off td { color: #777; text-decoration: line-through; }
  #kaPrint .ka-p-eq { font-weight: var(--w-bold); }
  #kaPrint .ka-p-foot { margin-top: 10px; color: #555; }
}

/* ═══════════════════════════════════════════════════════════
   SAVDO EKRANIDAGI SMENA PANELI — «NeoKarta» (egasi, 2026-09-29:
   kompyuterda «A», telefonda «2»; `shift.js`)

   ⛔ Karta, tugmalar, ro‘yxat, pastki tugma — UMUMIY qismlar,
   `neokarta.css` (`nk-`). Bu yerda FAQAT panelning o‘ziga xosi (`sp-`):
   ikki ustun, yopish kartasi, ulush chizig‘i, telefondagi tartib.
   ═══════════════════════════════════════════════════════════ */
.sp { display: flex; flex-direction: column; gap: 16px; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sp-sub-title { font-weight: var(--w-bold); margin-top: 6px; }
/* ⛔ Limit eslatmasi — o‘z sinfi `.cash-over` (stock.css), karta ichida ham
   o‘sha och sariq quti: ogohlantirish ko‘k fonda ham ogohlantirish bo‘lib qolsin */

/* ── Yopish kartasi ───────────────────────────────────────── */
.sp-lock { width: 36px; height: 36px; border-radius: 10px; }
.sp-close .field { margin: 0; }
.sp-gap { padding: 12px 14px; border-radius: 12px; background: var(--field); }
.sp-gap[hidden], .sp-split[hidden] { display: none; }
.sp-split {
  display: flex; height: 40px; border-radius: 12px; overflow: hidden;
  font-size: var(--t-2); font-weight: var(--w-mid);
}
.sp-split span { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.sp-take { background: var(--soft); color: var(--mid); }
.sp-keep { background: #e3f6ee; color: var(--ok); }
.sp .go.danger { background: var(--danger); }
.sp .go.danger:disabled { background: #e8b9b8; box-shadow: none; }
.sp-status { flex-direction: row; align-items: center; }
.sp-status > span:last-child { display: flex; flex-direction: column; }

@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sp { padding-bottom: 88px; }
  /* Tugmalar karta ostidan chiqishi uchun ular karta KETIDAN keladi: panelda
     karta va tugmalar orasida eslatmalar turadi (ochilishdagi farq) */
  .sp-col > .sp-acts { order: 1; }
  .sp-col > .sp-hero { order: 0; }
  .sp-col > .sp-flow, .sp-col > .hint { order: 2; }
  /* Telefonda «Bugungi harakat» — faqat ro‘yxat, ulush chizig‘isiz */
  .sp-flow { gap: 4px; }
  .sp-flowbar { display: none; }
  /* Yopish kartasi — pastki tugma bosilgandagina. ⛔ Faqat MUDIRDA (`sp-boss`):
     kassirning sanash kartasi yig‘ilsa, u sanay olmasdi (suratda topildi) */
  .sp-boss:not(.sp-closing) .sp-close { display: none; }
  .sp-closing .sp-dock { display: none; }
}