/* Kassa dasturi (Electron monoblok, sensorli ekran): faqat body.pos-desktop da ishlaydi.
   Maqsad: barmoq bilan bosishga qulay katta tugmalar, to'liq ekranli kassa, ekran klaviaturasi. */


:root { --vkb-h: 0px; }
body.pos-desktop {
  --pos-rail-w: 92px;
  --pos-topbar-h: 52px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body.pos-desktop input,
body.pos-desktop textarea { -webkit-user-select: text; user-select: text; }
body.pos-desktop button,
body.pos-desktop .btn,
body.pos-desktop label,
body.pos-desktop .pos-product-card { touch-action: manipulation; }

/* ---------- Chap yo'l (menyu): faqat Kassa / Smenalar / Qulflash ---------- */
body.pos-desktop .sidebar { width: var(--pos-rail-w); overflow: hidden; }
body.pos-desktop .app-content { margin-left: var(--pos-rail-w); }
body.pos-desktop .sidebar-brand { padding: 14px 6px 10px; text-align: center; }
body.pos-desktop .sidebar-brand-name { font-size: 11px; line-height: 1.2; word-break: break-word; }
body.pos-desktop .sidebar-brand-sub { display: none; }
body.pos-desktop .sidebar-link {
  flex-direction: column; justify-content: center; gap: 4px;
  min-height: 78px; margin: 6px 8px; padding: 8px 2px; text-align: center; font-size: 12px; line-height: 1.15;
}
body.pos-desktop .sidebar-link .nav-icon { width: 30px; height: 30px; }
body.pos-desktop .sidebar-link span { white-space: normal; }
body.pos-desktop .sidebar-bottom, body.pos-desktop .sidebar-footer { padding: 0; }
body.pos-desktop .sidebar-logout { min-height: 84px; }
body.pos-desktop .sidebar .sidebar-brand img,
body.pos-desktop .sidebar-platform-brand, body.pos-desktop .sidebar-platform-brand, body.pos-desktop .sidebar > .sidebar-head { display: none; }

/* ---------- Yuqori chiziq: ixcham ---------- */
body.pos-desktop .topbar { height: var(--pos-topbar-h); min-height: var(--pos-topbar-h); padding: 0 16px; }
body.pos-desktop .topbar-title { font-size: 18px; }
body.pos-desktop #page-help-btn,
body.pos-desktop .topbar-hamburger,
body.pos-desktop .theme-toggle,
body.pos-desktop .kassa-shortcuts,
body.pos-desktop #scan-btn,
body.pos-desktop .page-help,
body.pos-desktop #page-help-card { display: none !important; }

/* ---------- Kassa: butun ekran ---------- */
body.pos-desktop .view-kassa { padding: 10px 12px 10px 12px; }
body.pos-desktop .view-kassa .pos {
  grid-template-columns: minmax(0, 1fr) 430px; gap: 12px; align-items: stretch;
  height: calc(100vh - var(--pos-topbar-h) - 20px - var(--vkb-h));
}
body.pos-desktop .pos-left { display: flex; flex-direction: column; min-height: 0; }
body.pos-desktop .pos-search input { height: 60px; font-size: 18px; }
body.pos-desktop .pos-categories { padding: 10px 0 2px; gap: 10px; }
body.pos-desktop .pos-categories .kassa-category-chip { padding: 0 20px; height: 48px; font-size: 16px; }
body.pos-desktop .search-results { max-height: 40vh; overflow-y: auto; }
body.pos-desktop .view-kassa .kassa-products-grid {
  flex: 1; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px; align-content: start; padding-bottom: 8px;
}
body.pos-desktop .view-kassa .pos-product-card { min-height: 128px; padding: 14px; }
body.pos-desktop .view-kassa .pos-card-name { font-size: 16px; }
body.pos-desktop .view-kassa .pos-card-price { font-size: 20px; }
body.pos-desktop .view-kassa .pos-card-stock { font-size: 13px; }
body.pos-desktop .pos-product-card:active { transform: scale(.96); }
body.pos-desktop .kassa-products-grid::-webkit-scrollbar,
body.pos-desktop .pos-cart-items::-webkit-scrollbar { width: 12px; }

/* ---------- Chek (o'ng ustun) ---------- */
body.pos-desktop .pos-cart { position: static; max-height: none; height: 100%; }
body.pos-desktop .pos-status { padding: 8px 12px; font-size: 13.5px; gap: 8px 12px; }
body.pos-desktop .pos-status .link-btn,
body.pos-desktop .pos-cart-actions .link-btn {
  min-height: 44px; padding: 0 14px; font-size: 14px; border: 1.5px solid var(--border);
  border-radius: 12px; background: var(--card-bg); display: inline-flex; align-items: center;
}
body.pos-desktop .pos-cart-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.pos-desktop .pos-cart-head { padding: 10px 12px 6px; gap: 8px; }
body.pos-desktop .pos-cart-head h3 { font-size: 18px; }
body.pos-desktop .pos-customer { padding: 0 12px 8px; display: flex; gap: 8px; flex-wrap: wrap; }
body.pos-desktop .pos-customer-btn { min-height: 48px; font-size: 14.5px; width: auto; flex: 1 1 140px; }
body.pos-desktop .pos-cart-items { padding: 4px 12px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.pos-desktop .view-kassa .cart-table td { padding: 12px 0; }
body.pos-desktop .line-name { font-size: 16px; }
body.pos-desktop .qty-control { gap: 6px; }
body.pos-desktop .line-bottom { flex-wrap: wrap; gap: 8px; }
body.pos-desktop .line-bottom .qty-control { flex: 1 1 100%; }
body.pos-desktop .line-price { flex: 1 1 90px; min-width: 90px; }
body.pos-desktop .view-kassa .cart-price-input { width: 100%; max-width: none; }
body.pos-desktop .qty-btn { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
body.pos-desktop .qty-value-input { width: 72px; height: 52px; font-size: 20px; font-weight: 700; text-align: center; }
body.pos-desktop .view-kassa .cart-price-input { max-width: 110px; font-size: 16px; padding: 10px 4px; }
body.pos-desktop .cart-line-total { font-size: 18px; }
body.pos-desktop .cart-remove { width: 48px; height: 48px; font-size: 28px; display: inline-flex; align-items: center; justify-content: center; }
body.pos-desktop .pos-cart-foot { padding: 10px 12px 12px; }
body.pos-desktop .pos-total { font-size: 18px; }
body.pos-desktop .pos-total b { font-size: 32px; }
body.pos-desktop .pos-pay-btn { height: 78px; font-size: 24px; font-weight: 800; border-radius: 18px; }
body.pos-desktop .pos-pay-btn:active { transform: scale(.98); }

/* ---------- To'lov oynasi ---------- */
body.pos-desktop .checkout-modal { width: min(660px, 96vw); max-height: calc(100vh - var(--vkb-h) - 24px); overflow-y: auto; }
body.pos-desktop .co-total strong { font-size: 40px; }
body.pos-desktop .co-methods { grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.pos-desktop .co-method span { min-height: 76px; font-size: 16px; justify-content: center; }
body.pos-desktop .co-tendered { height: 70px; font-size: 32px; font-weight: 800; text-align: center; }
body.pos-desktop .checkout-quick-amounts { display: flex; flex-wrap: wrap; gap: 10px; }
body.pos-desktop .checkout-quick-amounts button { min-height: 56px; min-width: 96px; font-size: 17px; font-weight: 700; flex: 1 1 96px; }
body.pos-desktop .co-change strong { font-size: 30px; }
body.pos-desktop .co-print { min-height: 52px; font-size: 16px; }
body.pos-desktop .co-print input { width: 26px; height: 26px; }
body.pos-desktop .modal-actions .btn { min-height: 68px; font-size: 20px; font-weight: 700; border-radius: 16px; }
body.pos-desktop .modal .btn { min-height: 52px; }
body.pos-desktop .modal input[type=text], body.pos-desktop .modal input[type=number],
body.pos-desktop .modal input[type=tel], body.pos-desktop .modal select { min-height: 52px; font-size: 17px; }
body.pos-desktop.vkb-open .modal-backdrop { padding-bottom: var(--vkb-h); }

/* ---------- PIN ekrani ---------- */
body.pos-desktop .pin-pad button { min-height: 84px; font-size: 30px; }

/* ---------- Ekran klaviaturasi ---------- */
#vkb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: none;
  background: var(--card-bg, #fff); border-top: 1.5px solid var(--border, #d8dcea);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .18); padding: 10px 12px 12px; user-select: none; -webkit-user-select: none;
}
#vkb.open { display: block; }
#vkb .vkb-row { display: flex; gap: 8px; margin-bottom: 8px; justify-content: center; }
#vkb .vkb-row:last-child { margin-bottom: 0; }
#vkb button {
  flex: 1 1 0; min-width: 0; height: 54px; border-radius: 12px; border: 1.5px solid var(--border, #d8dcea);
  background: var(--bg, #eef0f8); color: var(--text, #1b2140); font: inherit; font-size: 22px; font-weight: 600; touch-action: manipulation;
}
#vkb button:active, #vkb button.on { background: var(--primary, #5b5bd6); color: #fff; border-color: transparent; }
#vkb button.wide { flex: 1.6 1 0; font-size: 16px; }
#vkb button.space { flex: 5 1 0; }
#vkb button.done { background: var(--primary, #5b5bd6); color: #fff; font-size: 17px; font-weight: 800; }
#vkb button.mute { font-size: 15px; }
/* raqamli klaviatura: ixcham panel, chap yoki o'ng pastda */
#vkb.num { left: auto; right: 12px; bottom: 12px; width: 360px; border: 1.5px solid var(--border, #d8dcea); border-radius: 18px; }
#vkb.num.left { right: auto; left: calc(var(--pos-rail-w, 92px) + 12px); }
#vkb.num button { height: 72px; font-size: 28px; }
#vkb.num button.mute { font-size: 18px; }
#vkb .vkb-title { font-size: 13px; color: var(--text-muted, #6b7280); margin: 0 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pos-desktop.vkb-open.vkb-num-open { --vkb-h: 0px; }

/* 1024 px kenglikdagi monobloklar */
@media (max-width: 1150px) {
  body.pos-desktop .view-kassa .pos { grid-template-columns: minmax(0, 1fr) 380px; }
  body.pos-desktop .view-kassa .kassa-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
body.pos-desktop input[type=number]::-webkit-inner-spin-button,
body.pos-desktop input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.pos-desktop input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Sensorli tasdiqlash oynasi ---------- */
.ui-dialog-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(20, 24, 50, .45); display: flex; align-items: center; justify-content: center; padding: 16px 16px calc(16px + var(--vkb-h)); }
.ui-dialog { width: min(520px, 100%); background: var(--card-bg, #fff); border-radius: 22px; padding: 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.ui-dialog-msg { margin: 0 0 18px; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--text, #1b2140); }
.ui-dialog-input { width: 100%; height: 60px; font-size: 20px; padding: 0 14px; margin-bottom: 18px; border: 1.5px solid var(--border, #d8dcea); border-radius: 14px; background: var(--input-bg, #fff); color: var(--text, #1b2140); box-sizing: border-box; }
.ui-dialog-actions { display: flex; gap: 12px; }
.ui-dialog-actions .btn { flex: 1; min-height: 64px; font-size: 20px; font-weight: 700; border-radius: 16px; }
body.pos-desktop .modal { max-height: calc(100vh - var(--vkb-h) - 24px); overflow-y: auto; }