/* ═══════════════════════════════════════════════════════════════
   KIOSK — sensorli monoblok uchun karkas va ko'rinish
   Oraliqlar: 8 / 12 / 16 px    Burchaklar: 12 / 14 / 16 px
   ═══════════════════════════════════════════════════════════════ */

/* ───────────── 1. Karkas: hech narsa ekrandan chiqmaydi ───────────── */
.workstation{
  height:100vh; height:100dvh;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}
.pos-workspace,.warehouse-workspace{min-height:0;overflow:hidden}
.pos-workspace>*,.warehouse-workspace>*{min-height:0}

.check-panel{grid-template-rows:auto auto minmax(0,1fr) auto auto}
.check-lines{min-height:0;overflow-y:auto}

.catalog-area{grid-template-rows:auto minmax(0,1fr);min-height:0}
.catalog-content{
  min-height:0;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;align-content:start;
}
.catalog-content>#productGrid,.catalog-content>.table-grid{min-height:0;overflow-y:auto;align-content:start}
.catalog-content>.zone-title{margin:0}

.context-rail{overflow:hidden}
.context-list{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start}
.rail-footer{flex:0 0 auto;margin-top:0}

.warehouse-nav,.warehouse-summary,.warehouse-main{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal,.work-modal{max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain}

/* ───────────── 2. Skroll: chiziqsiz, barmoq bilan ───────────── */
.context-list,.check-lines,#productGrid,.table-grid,.catalog-content,
.modal-body,.work-modal,#warehouseContent{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
*{scrollbar-width:none}
.context-list::-webkit-scrollbar,.check-lines::-webkit-scrollbar,
#productGrid::-webkit-scrollbar,.table-grid::-webkit-scrollbar,
.catalog-content::-webkit-scrollbar,.check-tabs::-webkit-scrollbar,
.channel-nav::-webkit-scrollbar,.modal::-webkit-scrollbar,.work-modal::-webkit-scrollbar,
.warehouse-nav::-webkit-scrollbar,.warehouse-main::-webkit-scrollbar,
.warehouse-summary::-webkit-scrollbar,#warehouseContent::-webkit-scrollbar{width:0;height:0}

/* Pastda yana borligini bildiruvchi yumshoq soya */
.kiosk-scroll{position:relative}
.kiosk-more-below::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:24px;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95));
}
#productGrid.kiosk-more-below::after,.table-grid.kiosk-more-below::after{
  background:linear-gradient(to bottom,rgba(241,243,242,0),rgba(241,243,242,.95));
}
html.dark .kiosk-more-below::after{background:linear-gradient(to bottom,rgba(22,23,26,0),rgba(22,23,26,.95))}
html.dark #productGrid.kiosk-more-below::after,html.dark .table-grid.kiosk-more-below::after{
  background:linear-gradient(to bottom,rgba(16,17,19,0),rgba(16,17,19,.95));
}

/* ───────────── 3. Sensorli ergonomika ───────────── */
html,body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
body{user-select:none;-webkit-user-select:none;overscroll-behavior:none}
input,textarea,select,[contenteditable]{user-select:text;-webkit-user-select:text}
button,.btn,.context-button,.product-card,.table-card,.channel-button,
.rail-action,.header-pill,.check-tab,.touch-key{touch-action:manipulation;cursor:pointer}
.qty-actions button{min-width:44px;min-height:44px}
.kiosk-dragging,.kiosk-dragging *{cursor:grabbing !important}

/* ───────────── 4. Sarlavha — ixcham, tepa-pastdan nafas oladi ─────────────
   Kanal tugmalari juda katta va cho'zilgan edi. Endi barcha boshqaruv
   elementlari bir xil balandlikda (44px) va tepa-pastdan 10px joy qoladi. */
.work-header{min-width:0;overflow:hidden;gap:14px;padding:10px 16px}
.work-brand{flex:0 0 auto;min-width:0;gap:11px}
.brand-mark.small{width:40px;height:40px;border-radius:12px;font-size:16px;box-shadow:none}
.work-brand strong{font-size:19px;line-height:1.1}
.work-brand small{font-size:9px;margin-top:2px}

.channel-nav{min-width:0;flex:1 1 auto;overflow-x:auto;gap:8px;height:auto}
.channel-button{
  flex:0 0 auto;white-space:nowrap;
  height:44px;min-height:44px;min-width:0;
  border-radius:12px;padding:0 13px;
  grid-template-columns:19px 1fr;gap:9px;
}
.channel-button svg{width:19px;height:19px}
.channel-button b{font-size:13.5px;line-height:1.15}
.channel-button small{font-size:9px;line-height:1.1;opacity:.7}

.header-tools{flex:0 0 auto;gap:8px}
.header-pill{height:44px;min-height:44px;border-radius:12px;padding:0 13px;font-size:13.5px}
.header-pill svg{width:18px;height:18px}
#refreshButton svg{transition:transform .45s ease}
#refreshButton.spinning svg{transform:rotate(360deg)}
.staff-pill{height:44px;gap:9px}
.staff-pill>span{width:38px;height:38px;border-radius:11px;font-size:14px}
.staff-pill b{font-size:13.5px}
.exit-button{height:44px;min-height:44px;border-radius:12px;padding:0 13px;font-size:13.5px}

/* ───────────── 5. Chap panel ─────────────
   Yuqorida — kategoriyalar (to'ldirilgan tugmalar).
   Pastda — bo'limlar: chegarasiz, ixcham "panel" ko'rinishi. */
.context-icon{display:none}                 /* bo'sh band olib tashlandi */
/* Kategoriya nomlari qisqarib qolmasin — panel biroz kengroq */
.pos-workspace{grid-template-columns:202px minmax(430px,1fr) minmax(390px,540px)}
.context-list{padding:12px;gap:8px}
.context-button{
  min-height:56px;border-radius:14px;padding:0 14px;gap:10px;
  font-size:15px;font-weight:800;border:0;
}
.context-thumb{width:28px;height:28px;border-radius:8px;background:transparent;flex:none}
.context-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rail-footer{
  display:flex;flex-wrap:wrap;gap:8px;padding:12px;
  background:#f7f9f8;border-top:1px solid var(--line);
}
.rail-action{
  flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-height:58px;padding:8px 4px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:11px;font-weight:750;line-height:1.15;color:#2c4a40;text-align:center;
}
.rail-action:active{background:#eef2f0;border-color:#c9d6d0}
.rail-action svg{width:21px;height:21px;flex:none;margin:0;color:#417c67}
.rail-action span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-action.hidden{display:none}
/* Printer xatosi — to'liq enli, qizil, darrov ko'zga tashlanadi */
.rail-action.warn{
  flex:1 1 100%;min-width:100%;flex-direction:row;gap:8px;
  min-height:46px;padding:0 12px;font-size:12px;font-weight:800;
  background:#fdecea;color:#a4372f;border:1px solid #f2c7c1;border-radius:12px;margin-top:0;
}
.rail-action.warn svg{width:18px;height:18px;color:#c0463a}

html.dark .rail-footer{background:#131417;border-top-color:#26272b}
html.dark .rail-action{background:#1b1c1f;border-color:#2e2f34;color:#d3dad7}
html.dark .rail-action:active{background:#232428}
html.dark .rail-action svg{color:#8fd0b2}
html.dark .rail-action.warn{background:#2a1c1a;border-color:#5a2f2a;color:#e08b85}
html.dark .rail-action.warn svg{color:#e08b85}

/* ───────────── 6. Chek paneli ───────────── */
.check-lines{padding-bottom:8px}
.check-totals{padding:14px 16px}
.check-actions{padding:14px 16px 16px;gap:12px;grid-template-columns:1fr 1.15fr}
.check-actions .btn{height:64px;font-size:17px;border-radius:16px}
.paytype-btn{min-height:64px;border-radius:16px}

/* ───────────── 7. Taomlar — bir qatorda 4 ta, ixcham karta ───────────── */
.catalog-toolbar{padding:10px 18px}
.catalog-toolbar h1{font-size:22px;margin:2px 0 0}
.catalog-content{padding:14px 16px 0}
#productGrid,.table-grid{padding-bottom:14px}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.product-card{min-height:148px;padding:12px;border-radius:14px}
.product-image{width:46px;height:46px;font-size:25px;border-radius:12px}
.product-card h3{font-size:14.5px;line-height:1.25;margin:10px 0 3px}
.product-card p{font-size:10.5px}
.product-card b{font-size:15.5px}

/* Stol xaritasi — taom kartalari bilan bir xil o'lchovda */
.zone-title{margin:0 2px 2px;font-size:15px;font-weight:800}
.table-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:0}
.table-card{min-height:110px;padding:12px;border-radius:14px;border-width:1.5px;border-color:#dce3e0}
.table-card h3{font-size:20px;line-height:1.1}
.table-card p{margin:6px 0 0;font-size:12.5px}
.table-card small{font-size:11px}
.table-card footer{margin-top:auto;padding:6px 8px;border-radius:8px;font-size:10.5px}
.table-card.selected{outline:2px solid #184f40;outline-offset:-1px}

/* Tor ekranda 3 ta */
@media(max-width:1150px){
  .product-grid,.table-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ───────────── 8. Ekran o'lchamiga moslashish ───────────── */
@media(max-height:820px){
  .context-button{min-height:50px;font-size:14px}
  .context-list{padding:10px;gap:7px}
  .rail-footer{padding:10px;gap:7px}
  .rail-action{min-height:52px;font-size:10.5px;flex-basis:calc(50% - 3.5px);min-width:calc(50% - 3.5px)}
  .rail-action svg{width:19px;height:19px}
  .work-header{padding:8px 14px}
  .channel-button{height:42px;min-height:42px}
  .header-pill,.exit-button,.staff-pill{height:42px;min-height:42px}
  .check-actions .btn,.paytype-btn{height:56px;min-height:56px}
  .check-actions{padding:12px 14px 14px}
}
@media(max-width:1280px){
  .pos-workspace{grid-template-columns:176px minmax(380px,1fr) minmax(340px,420px)}
  .context-button{font-size:14px;padding:0 12px;gap:8px}
}
@media(max-width:1500px){
  .work-brand small{display:none}
  #refreshButton span,#networkButton span{display:none}
  #refreshButton,#networkButton{padding:0 13px}
}
@media(max-width:1180px){
  .staff-pill div{display:none}
  .exit-button span{display:none}
}