/* ===== Komponentlar (komponentlar.js) — yagona dizayn uslublari =====
   style.css'dan KEYIN yuklanadi. Ilovaning mavjud tokenlari va sinflari (.karta, .row, .icon-btn,
   .chevron-belgi, button.primary/.small/.secondary) qayta ishlatiladi — yangi ranglar kiritilmaydi. */

/* ---------- tugmalar ---------- */
.ui-tugmalar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ui-tugmalar > button { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
.ui-tugma-ikonli svg { vertical-align: -3px; }
.ui-ikon-tugma { border: 1px solid var(--border); width: 36px; height: 36px; color: var(--text); }
.ui-ikon-tugma.ui-kichik { width: 28px; height: 28px; }

/* ---------- kichik elementlar ---------- */
/* Och pastel dumaloq belgi: "+" yashil, "−" qizil */
.ui-pill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: none; margin-right: 6px; }
.ui-pill .ikon { vertical-align: 0; }
.ui-pill-plyus { background: color-mix(in srgb, var(--success) 16%, var(--bg)); color: var(--success); }
.ui-pill-minus { background: color-mix(in srgb, var(--danger) 14%, var(--bg)); color: var(--danger); }

.ui-katakcha { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.ui-katakcha input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; }

.ui-banner {
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.4;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.ui-banner .ikon { margin-top: 2px; flex: none; }
.ui-banner-muvaffaqiyat { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg)); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.ui-banner-ogohlantirish { color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--bg)); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.ui-banner-malumot { color: var(--link); background: color-mix(in srgb, var(--link) 8%, var(--bg)); border-color: color-mix(in srgb, var(--link) 30%, var(--border)); }
.ui-banner + .ui-banner, .ui-banner + .ui-tugmalar { margin-top: 6px; }

.ui-chegara-ogohlantirish { border-color: var(--warning); }
.ui-chegara-xavf { border-color: var(--danger); }

.ui-forma { display: flex; flex-direction: column; gap: 6px; }
.ui-forma > input, .ui-forma > select { margin: 0; }

.ui-kim { display: block; font-size: 10.5px; font-weight: 400; color: var(--hint); line-height: 1.35; white-space: normal; }

/* kassir katagi: farq belgisi + summa bir qatorda; summa bosilsa eslatma oynasi */
.ui-kassir-katak { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.ui-farq { font-size: 10.5px; font-weight: 700; }
.ui-eslatma { all: unset; cursor: pointer; border-bottom: 1px dotted var(--hint); }
.ui-eslatma:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ui-popover { position: fixed; z-index: 1000; max-width: min(260px, calc(100vw - 16px)); padding: 8px 10px; font-size: 12px; line-height: 1.4; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); white-space: normal; }
.ui-popover-nota { font-weight: 700; }
.ui-popover-izoh { margin-top: 3px; color: var(--hint); word-break: break-word; }
.ui-havola { all: unset; display: block; margin: 8px auto 0; font-size: 12px; color: var(--link); cursor: pointer; text-align: center; }

/* sana oralig'i qatori: ikki maydon + yangilash ikon-tugmasi */
.ui-sana-qator { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ui-sana-qator > input { flex: 1; min-width: 0; margin: 0; }

/* ---------- solishtiruv jadvali: Nomi | YesPOS | Kassir ---------- */
.ui-jadval { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ui-jadval th { font-size: 11px; font-weight: 700; color: var(--hint); text-align: right; padding: 4px 6px 6px; text-transform: none; letter-spacing: normal; }
.ui-jadval th:first-child, .ui-jadval td:first-child { text-align: left; }
.ui-jadval td { padding: 7px 6px; border-top: 1px solid var(--border); text-align: right; vertical-align: top; white-space: nowrap; }
.ui-jadval td:first-child { white-space: normal; color: var(--hint); min-width: 92px; }
.ui-nom { display: flex; align-items: center; }
.ui-nom .chevron-belgi { margin-left: 4px; }
.ui-nom .ui-pill { margin: 0 0 0 6px; }
.ui-jadval tr.ui-kuchli td { font-weight: 700; color: var(--text); }
.ui-jadval tr.ui-guruh td { color: var(--text); }
.ui-kim-ichki { font-size: 10.5px; font-weight: 400; color: var(--hint); }
.ui-jadval tr.ui-kuchli td:first-child, .ui-jadval tr.ui-guruh td:first-child { color: var(--text); }
.ui-jadval tr.ui-ichki td { border-top-style: dashed; font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
.ui-jadval tr.ui-ichki td:first-child { padding-left: 6px; }
.ui-jadval tr.ui-bos { cursor: pointer; }
.ui-jadval tr.ui-bos:active td { background: color-mix(in srgb, var(--hint) 10%, transparent); }
.ui-jadval tr.ui-yoz td { padding: 2px 6px 8px; background: color-mix(in srgb, var(--hint) 7%, transparent); text-align: left; white-space: normal; color: var(--text); }
.ui-keng td, .ui-keng th { white-space: nowrap; }
.ui-keng td:first-child { white-space: nowrap; color: var(--text); }
.ui-skroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- tranzaksiya qatori (kirim/chiqim ochilganda) ---------- */
.ui-tr { display: flex; align-items: flex-start; gap: 0; padding: 7px 0; font-size: 13px; }
.ui-tr + .ui-tr { border-top: 1px solid var(--border); }
.ui-tr .ui-pill { margin-top: 1px; }
.ui-tr-matn { flex: 1; min-width: 0; color: var(--text); font-weight: 400; }
.ui-tr-summa { margin-left: 10px; font-weight: 600; white-space: nowrap; }

/* ---------- menyu va orqaga ---------- */
.ui-menyu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ui-menyu-karta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; margin: 0;
  padding: 14px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ui-menyu-ikon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.ui-menyu-nom { font-weight: 700; font-size: 15px; }
.ui-menyu-izoh { font-size: 12px; color: var(--hint); font-weight: 400; line-height: 1.35; }
.ui-orqaga {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 12px; width: auto;
  font-weight: 700; font-size: 14px; color: var(--link);
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#soz-subtabs.soz-menyulashgan { display: none; }

/* ---------- bloklar ---------- */
.ui-blok { margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.ui-bolim-sarlavha { font-weight: 700; margin: 10px 0 6px; }
.ui-satr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- tovar istisnolari ---------- */
.ist-belgi { color: var(--hint); }
.ist-qaytar { color: var(--link); cursor: pointer; text-decoration: underline; }
.ist-pill { font-size: 11px; color: var(--hint); }
.ist-tanlov { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ist-tanlov label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ist-tanlov input { width: auto; margin: 0; }
.ist-chiplar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ist-tarix-havola { color: var(--link); cursor: pointer; margin-top: 6px; }
.qoldiq-eski { color: var(--warning); cursor: help; }
/* markazda chiqadigan kichik ogohlantirish oynasi (pastdan chiqadigan oynalardan farqli) */
.markaz-oyna { align-items: center; justify-content: center; }
.markaz-oyna .modal-box { width: auto; max-width: 340px; margin: 0 16px; border-radius: var(--radius); text-align: center; }
.markaz-oyna .modal-box::before { display: none; }

/* Bozor bloki xulosasi: Yo'lkira · Aravakash · Turargoh butun enga teng taqsimlanadi */
.savat-xarajat-qator { display: flex; justify-content: space-between; gap: 8px; }

/* ---------- Istisno oynasi: yonma-yon switch, kalendar eni, tugmalar ---------- */
.ist-tanlov { display: flex; flex-direction: row; gap: 8px; margin: 4px 0 10px; }
.ist-tanlov label {
  flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; cursor: pointer;
  padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.25;
}
.ist-tanlov label.tanlangan { border-color: var(--link); background: color-mix(in srgb, var(--link) 10%, var(--bg)); color: var(--link); font-weight: 600; }
.ist-tanlov input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* kalendar (type=date) ekrandan chiqib ketmasin: iOS'da u o'z o'lchamini oladi */
.ist-sana-input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 8px; -webkit-appearance: none; appearance: none; }
/* "Bekor qilish" va asosiy tugma yonma-yon bo'lganda bir xil balandlikda (modal va qatordagi formalar) */
.row:has(> button.secondary) > button, .modal-box .row > button {
  min-height: 46px; padding: 12px 14px; margin: 0; font-size: 14px; line-height: 1.2;
}
.row:has(> button.secondary) { align-items: stretch; }
.modal-box .row { align-items: stretch; gap: 8px; }
.modal-box .row > button.primary { flex: 1; }

/* ---------- Savat jadvali: qoldiq sanasi ---------- */
.sq-qoldiq-sana { margin-top: -1px; font-size: 8px; font-weight: 700; line-height: 1; text-transform: none; letter-spacing: normal; color: var(--hint); }

/* ---------- Tovarlar ro'yxati: har tovar alohida oq karta (ona + variantlar bitta kartada, orasi chiziq) ---------- */
.tv-karta { background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 3px; overflow: hidden; }
.tv-karta .result-item { border-bottom: none; padding: 11px 12px; }
.tv-karta .result-item + .result-item { border-top: 1px solid var(--border); }

/* Tovarlar: qidiruv qatori bilan birinchi karta orasi — kartalar orasidagi (3px) bilan bir xil */
.tv-qidiruv-qator { margin-bottom: 3px; }
#tv-qidiruv-input { margin-bottom: 0; }

/* Savat: "Kimdan" tanlovi (qidiruvli oyna) */
.kimdan-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 0 0 50%; width: auto; margin: 0;
  padding: 11px 12px; font-size: 16px; font-weight: 400; text-align: left; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.kimdan-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kimdan-royxat { display: flex; flex-direction: column; gap: 3px; }
.kimdan-element {
  display: block; width: 100%; margin: 0; padding: 11px 12px; text-align: left; font-size: 15px; font-weight: 400;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.kimdan-element.tanlangan { color: var(--link); border-color: var(--link); background: color-mix(in srgb, var(--link) 10%, var(--bg)); font-weight: 600; }

/* Tovar kartasi: narx guruhi a'zolari — shtrixkod teglari kabi rangli, yonma-yon */
.tv-guruhdoshlar { margin: 4px 0 8px; }
.tv-guruhdoshlar .shtrix-teglar { margin-top: 0; gap: 6px; }
.guruh-teg { font-size: 12px; padding: 3px 8px; }

/* Savat: "Kimdan" ro'yxati — sozlamalar ichida ochiladigan panel (modal emas) */
.kimdan-panel { margin: 0 0 8px; }
.kimdan-panel input { margin-bottom: 6px; }

/* Sozlamalar > Kontragentlar qidiruvi */
#supplier-qidiruv { margin-bottom: 8px; }

/* Smena jadvali: ochilgan kirim/chiqim tranzaksiyalari — jadval qatorlari (summa o'z ustunida) */
.ui-jadval tr.ui-yoz-qator td { padding: 5px 6px; font-size: 13px; text-align: right; white-space: nowrap; border-top: 1px dashed var(--border); }
.ui-jadval tr.ui-yoz-qator td:first-child { text-align: left; white-space: normal; }

/* Tovarlar: ma'lumot kelguncha aylanuvchi indikator */
.tv-yuklanmoqda { display: flex; justify-content: center; padding: 28px 0; }

/* Tovar guruhlari (Sozlamalar): taklif ichiga kirib -/+, mavjud guruh ichi */
.tg-taklif { margin-bottom: 3px; }
.tg-taklif-bosh { display: flex; gap: 6px; align-items: stretch; }
.tg-taklif-bosh .tg-nom { flex: 1; min-width: 0; text-align: left; }
.tg-taklif-bosh .tg-ochish { flex: none; align-self: stretch; margin: 0; }
.tg-azolar { margin: 2px 0 6px 10px; }
.tg-azo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--border); font-size: 13px; }
.tg-azo > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tg-azo.xira > span:first-child { opacity: 0.45; text-decoration: line-through; }
.tg-azo .icon-btn { flex: none; margin: 0; }
.tg-guruh-detal { margin: 4px 0 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }

/* Savat sozlamalari: "Xarid kuni" va "Kategoriya" qatorlari orasida chiziq yo'q */
#savat-sozlama-ichki .row + .row { border-top: none; }

/* Kirim/chiqim balansi ochilganda: har amal oldida +/− doira */
.ui-yoz-nom { display: flex; align-items: flex-start; gap: 6px; }
.ui-yoz-nom .ui-pill { margin: 1px 0 0 0; }

/* "!" tushuntirish tugmasi (nom yonida) va uning oynasidagi yig'indi jadvali */
.ui-info { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--hint); color: var(--hint); font-size: 10px; font-weight: 700; line-height: 1; flex: none; }
.ui-info:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ui-popover-jadval { border-collapse: collapse; margin-top: 4px; width: 100%; }
.ui-popover-jadval td { padding: 2px 0; }
.ui-popover-jadval td + td { text-align: right; padding-left: 14px; white-space: nowrap; }
.ui-popover-jami td { border-top: 1px solid var(--hint); font-weight: 700; padding-top: 3px; }

/* Kengaytirilgan izoh qatori: asosiy qatorga yopishib turadi (orasida chiziq yo'q), nom + YesPOS ustuni kengligida */
.ui-jadval tr.ui-izoh-keng td { border-top: 0; padding-top: 0; padding-bottom: 7px; text-align: left; white-space: normal; }
.ui-jadval tr.ui-izoh-tepa td { padding-bottom: 1px; }
.ui-jadval tr.ui-izoh-tepa td[rowspan] { padding-bottom: 7px; }

/* Topshirilgan pulni tasdiqlash: kichik tugma va "tasdiqlangan" belgisi (nom yonida) */
.ui-mini-tugma { all: unset; cursor: pointer; margin-top: 2px; padding: 1px 8px; font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--link); border: 1px solid var(--link); border-radius: 999px; }
.ui-mini-tugma:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ui-tasdiq-belgi { font-size: 10.5px; font-weight: 600; color: var(--success); white-space: nowrap; }

/* Validatsiya: bo'sh yoki xato to'ldirilgan maydon qizil chegara bilan */
input.ui-xato, .ui-forma input.ui-xato { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }

/* Yig'iladigan smena kartasi (yopilgan va tasdiqlangan): sarlavha bosilganda ochiladi */
.ui-yigiq-bosh { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.ui-yigiq-bosh .ui-yigiq-ok { display: inline-block; margin-left: 6px; color: var(--hint); transition: transform .15s; }
.ui-yigiq-bosh.ochiq .ui-yigiq-ok { transform: rotate(90deg); }

/* Oy tanlagich: ‹ Oktyabr 2026 › */
.ui-oy-qator { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }
.ui-oy-btn { all: unset; cursor: pointer; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: var(--link); border-radius: 50%; }
.ui-oy-btn:active { background: color-mix(in srgb, var(--hint) 15%, transparent); }