/* pos-app.css — layar Kasir "app-like", 3 tata letak pilihan + responsif landscape/portrait.
   Dipakai oleh panels/cashier.js. Scoped di .pos2 supaya tak bentrok panel lain. */

.pos2{
  --pos-bg:#eef2f6; --pos-surface:#fff; --pos-surface-2:#f7f9fc; --pos-surface-3:#eef2f7;
  --pos-border:#e4e9f0; --pos-border-strong:#d5dce6;
  --pos-text:#0f172a; --pos-muted:#64748b; --pos-faint:#94a3b8;
  --pos-accent:#059669; --pos-accent-strong:#047857; --pos-accent-soft:#ecfdf5; --pos-accent-ring:#6ee7b7;
  --pos-danger:#e11d48;
  --pos-radius:14px; --pos-radius-sm:10px;
  --pos-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -14px rgba(15,23,42,.22);
  --pos-shadow-lg:0 -8px 40px -12px rgba(15,23,42,.3);
  --pos-cart-w:340px;
  position:relative; height:100%; container-type:inline-size;
  display:flex; flex-direction:column; background:var(--pos-bg);
  color:var(--pos-text); font-variant-numeric:tabular-nums;
}
.pos2 .num{font-variant-numeric:tabular-nums}
.pos2 button{font-family:inherit}

/* ---------- toolbar ---------- */
.pos2-tools{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--pos-surface);border-bottom:1px solid var(--pos-border);flex-shrink:0;flex-wrap:wrap}
.pos2-search{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;background:var(--pos-surface-2);border:1px solid var(--pos-border);border-radius:12px;padding:0 12px;min-height:46px}
.pos2-search i{color:var(--pos-faint)}
.pos2-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--pos-text);font-size:.9rem;outline:none;padding:11px 0}
.pos2-tbtn{min-height:46px;min-width:46px;padding:0 13px;border-radius:12px;border:1px solid var(--pos-border);background:var(--pos-surface-2);color:var(--pos-muted);font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.pos2-tbtn:active{transform:scale(.97)}
.pos2-tbtn.accent{color:var(--pos-accent-strong);background:var(--pos-accent-soft);border-color:var(--pos-accent-ring)}
.pos2-tbtn.warn{color:#b45309;background:#fffbeb;border-color:#fde68a}
.pos2-shift{margin-left:auto;font-size:.72rem;font-weight:700;padding:8px 12px;border-radius:999px;white-space:nowrap;border:1px solid transparent}

/* layout switcher popover */
.pos2-lay{position:relative}
.pos2-lay-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:14px;box-shadow:var(--pos-shadow);padding:6px;width:210px;display:none}
.pos2-lay-menu.open{display:block}
.pos2-lay-opt{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--pos-text)}
.pos2-lay-opt:hover{background:var(--pos-surface-2)}
.pos2-lay-opt.on{background:var(--pos-accent-soft)}
.pos2-lay-opt .ic{width:30px;height:24px;border-radius:6px;border:1.5px solid var(--pos-border-strong);flex-shrink:0;display:flex;overflow:hidden}
.pos2-lay-opt .ic span{background:var(--pos-accent-ring)}
.pos2-lay-opt .ic .a{flex:1;border-right:1.5px solid var(--pos-border-strong)}
.pos2-lay-opt .ic .b{width:9px;background:var(--pos-surface-3)}
.pos2-lay-opt.rev .ic{flex-direction:row-reverse}
.pos2-lay-opt.rev .ic .a{border-right:0;border-left:1.5px solid var(--pos-border-strong)}
.pos2-lay-opt .tx b{font-size:.82rem;font-weight:700;display:block;line-height:1.15}
.pos2-lay-opt .tx span{font-size:.7rem;color:var(--pos-muted)}

/* ---------- body / catalog ---------- */
.pos2-body{flex:1;min-height:0;display:flex}
.pos2-catalog{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--pos-bg)}
.pos2-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px;align-content:start;overscroll-behavior:contain}
.pos2-cats{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 2px;flex-shrink:0;scrollbar-width:none}
.pos2-cats::-webkit-scrollbar{display:none}
.pos2-cat{flex:none;padding:5px 13px;border:1px solid var(--pos-border);background:var(--pos-surface);
  color:var(--pos-muted);border-radius:999px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.pos2-cat.on{background:var(--pos-accent);border-color:var(--pos-accent);color:#fff}
.pos2-cat:active{transform:scale(.97)}
.pos2-tile{text-align:left;border:1px solid var(--pos-border);background:var(--pos-surface);border-radius:var(--pos-radius);padding:11px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-height:96px;height:auto;transition:transform .06s,border-color .12s;position:relative}
.pos2-tile:hover{border-color:var(--pos-accent-ring)}
.pos2-tile:active{transform:scale(.97)}
.pos2-tile .nm{font-size:.85rem;font-weight:600;line-height:1.3;padding-right:22px;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.pos2-tile .pr{font-size:.98rem;font-weight:800;color:var(--pos-accent-strong);margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:6px}
/* Stok angka kecil kalem di kanan harga (owner 2026-07-31): abu halus,
   amber saat tipis, merah lembut saat 0 — tetap kecil, tak mencolok. */
.pos2-tile .stk{font-size:.62rem;font-weight:600;color:#a3aab6;letter-spacing:.01em;flex:none}
.pos2-tile .stk.tipis{color:#c08a2d}
.pos2-tile .stk.kosong{color:#c2554f}
.pos2-tile.out{opacity:.5}
/* --- Tekan-tahan kartu -> SKU & stok (owner 2026-07-29) -------------------
   Kartu default cuma Nama + Harga. Garis di kaki kartu terisi selama ditahan
   sbg umpan balik, lalu panel info naik dari bawah. Semua animasi dihormati
   prefers-reduced-motion. */
.pos2-tile{overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.pos2-tile .tile-hold{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--pos-accent);
  transform:scaleX(0);transform-origin:left;border-radius:0 3px 3px 0;pointer-events:none;opacity:0}
.pos2-tile.holding .tile-hold{opacity:1;transform:scaleX(1);transition:transform .42s linear,opacity .1s}
.pos2-tile.holding{border-color:var(--pos-accent-ring)}

.pos2-tile .tile-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;
  padding:9px 10px;background:color-mix(in srgb,var(--pos-text) 92%,transparent);color:#fff;
  border-radius:0 0 var(--pos-radius) var(--pos-radius);
  transform:translateY(102%);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .16s}
.pos2-tile.show-info .tile-info{transform:translateY(0);opacity:1}
.pos2-tile.show-info{border-color:var(--pos-accent);box-shadow:var(--pos-shadow)}
.tile-info .ti-row{display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;line-height:1.2}
.tile-info .ti-row i{width:12px;font-size:.62rem;opacity:.75;flex-shrink:0}
.tile-info .ti-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-info .ti-chip{padding:1px 7px;border-radius:999px;font-size:.64rem;font-weight:800;letter-spacing:.01em}
.tile-info .ti-chip.aman{background:#065f46;color:#d1fae5}
.tile-info .ti-chip.tipis{background:#92400e;color:#fef3c7}
.tile-info .ti-chip.kosong{background:#9f1239;color:#ffe4e6}
.tile-info .ti-chip.unknown{background:#334155;color:#e2e8f0}

@media (prefers-reduced-motion:reduce){
  .pos2-tile.holding .tile-hold{transition:none}
  .pos2-tile .tile-info{transition:none}
}

.pos2-tile .bdg{position:absolute;top:8px;right:8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--pos-accent);color:#fff;font-size:.66rem;font-weight:800;display:none;align-items:center;justify-content:center}
.pos2-tile.inCart .bdg{display:inline-flex}
.pos2-empty{grid-column:1/-1;text-align:center;color:var(--pos-faint);padding:44px 0;font-size:.85rem}

/* ---------- cart (default = BOTTOM SHEET) ---------- */
.pos2-cart{position:absolute;left:0;right:0;bottom:0;z-index:24;height:92%;max-height:100%;background:var(--pos-surface);border-radius:22px 22px 0 0;box-shadow:var(--pos-shadow-lg);display:flex;flex-direction:column;transform:translateY(101%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.pos2-cart.open{transform:translateY(0)}
.pos2-grab{align-self:center;width:42px;height:5px;border-radius:999px;background:var(--pos-border-strong);margin:9px 0 2px;flex-shrink:0}
.pos2-cart-head{display:flex;align-items:center;gap:8px;padding:6px 15px 11px;border-bottom:1px solid var(--pos-border);flex-shrink:0}
.pos2-cart-head b{font-size:.98rem;font-weight:800}
.pos2-cart-head .ct{font-size:.72rem;font-weight:700;color:var(--pos-accent-strong);background:var(--pos-accent-soft);border:1px solid var(--pos-accent-ring);padding:2px 8px;border-radius:999px}
/* Kepala keranjang ringkas (owner 2026-07-29): ikon + jumlah + Total + ">".
   Total mengambil sisa ruang dan rata kanan supaya angkanya menonjol. */
.pos2-cart-ic{font-size:1rem;color:var(--pos-accent-strong);flex-shrink:0}
.pos2-head-clear{flex-shrink:0;width:24px;height:24px;border-radius:8px;border:1px solid var(--pos-border);
  background:var(--pos-surface-2);color:var(--pos-danger);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color .12s,border-color .12s}
.pos2-head-clear:hover{background:#fff1f2;border-color:#fecdd3}
.pos2-head-clear:active{transform:scale(.94)}
.pos2-head-clear.hidden{display:none}

/* Bar "Urungkan" — muncul di kaki daftar item setelah keranjang dikosongkan. */
.pos2-undo{flex-shrink:0;display:flex;align-items:center;gap:10px;margin:0 13px 11px;padding:9px 12px;
  border-radius:12px;background:var(--pos-text);color:#fff;font-size:.76rem;font-weight:600;
  animation:pos2UndoIn .2s cubic-bezier(.22,1,.36,1)}
.pos2-undo.hidden{display:none}
.pos2-undo button{margin-left:auto;border:0;background:transparent;color:var(--pos-accent-ring);
  font-size:.78rem;font-weight:800;cursor:pointer;padding:2px 4px}
.pos2-undo button:active{opacity:.7}
@keyframes pos2UndoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pos2-undo{animation:none}}

.pos2-head-total{flex:1;min-width:0;text-align:right;font-size:1.02rem;font-weight:800;color:var(--pos-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos2-head-go{flex-shrink:0;width:38px;height:38px;border-radius:10px;border:0;background:var(--pos-accent);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color .12s}
.pos2-head-go:not(:disabled):active{background:var(--pos-accent-strong);transform:scale(.97)}
.pos2-head-go:disabled{background:var(--pos-border-strong);color:var(--pos-faint);cursor:not-allowed}
.pos2-cart-close{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--pos-border);background:var(--pos-surface-2);color:var(--pos-muted);cursor:pointer;font-size:16px}

.pos2-lines{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 13px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.pos2-line{display:flex;align-items:center;gap:10px;background:var(--pos-surface-2);border:1px solid var(--pos-border);border-radius:12px;padding:9px 10px}
.pos2-line .li-nm{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.pos2-line .li-nm b{font-size:.84rem;font-weight:600;display:block;line-height:1.2}
.pos2-line .li-nm span{font-size:.72rem;color:var(--pos-muted)}
.pos2-step{display:flex;align-items:center;gap:2px;background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:10px;padding:2px}
.pos2-step button{width:38px;height:38px;border:0;background:transparent;color:var(--pos-text);font-size:19px;font-weight:700;cursor:pointer;border-radius:8px}
.pos2-step button:active{background:var(--pos-surface-3)}
.pos2-step .q{min-width:26px;text-align:center;font-weight:700;font-size:.9rem}
/* Kolom edit di baris keranjang: harga satuan (pos_cart_line_price_edit_enabled)
   dan jumlah pecahan (pos_weighted_product_enabled). Dipakai hanya bila tenant
   mengaktifkannya — kalau mati, baris tampil seperti semula. */
.pos2-line .li-price{width:88px;font-size:.72rem;font-weight:700;color:var(--pos-text);background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:8px;padding:2px 6px;text-align:right}
.pos2-step .q-input{width:58px;height:34px;border:0;background:transparent;color:var(--pos-text);font-weight:700;font-size:.9rem;text-align:center;padding:0}
.pos2-step .q-input:focus{outline:2px solid var(--pos-accent-ring);border-radius:6px}
.pos2-line .li-rm{width:36px;height:36px;border:0;background:transparent;color:var(--pos-danger);cursor:pointer;font-size:15px;border-radius:8px;flex-shrink:0}
.pos2-cart-empty{margin:auto;text-align:center;color:var(--pos-faint);font-size:.82rem;padding:26px 0}
.pos2-cart-empty .big{font-size:32px;opacity:.5;margin-bottom:6px}


/* ringkasan jadi SATU baris; diskon/pajak menyelip inline saat aktif */
.pos2-sumline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.74rem;color:var(--pos-muted);font-weight:600}
.pos2-sumline b{color:var(--pos-text);font-weight:800}
.pos2-inline{display:flex;align-items:center;gap:5px}
/* Lencana "Member" di label pelanggan kasir. Aturan dasar ditulis SEBELUM blok
   @media mana pun: dengan spesifisitas selector yang sama, urutan SUMBER yang
   menang — aturan dasar yang ditulis sesudah @media diam-diam menimpanya di
   layar kecil dan perbaikannya tak pernah aktif. */
.pos2-member-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:11px;font-weight:700;
  vertical-align:middle;white-space:nowrap}
.pos2-inline input{width:88px;padding:5px 7px;border:1px solid var(--pos-border);border-radius:8px;font-size:.8rem;font-weight:700;color:var(--pos-text);background:var(--pos-surface-2)}
/* Bayar & Metode BERDAMPINGAN — dulu dua baris penuh */
.pos2-payrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Kembali & Split bayar berdampingan */
.pos2-changerow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pos2-paymodal-body .row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--pos-muted)}
.pos2-paymodal-body .row.total{color:var(--pos-text);font-weight:800;font-size:1.18rem}
.pos2-paymodal-body .row.total .v{color:var(--pos-accent-strong)}
.pos2-field{font-size:.72rem;color:var(--pos-muted);font-weight:600;display:flex;flex-direction:column;gap:3px}
.pos2-field input,.pos2-field select{border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);color:var(--pos-text);padding:10px 11px;font-size:.9rem;min-height:44px;outline:none}
.pos2-field input:focus,.pos2-field select:focus{border-color:var(--pos-accent-ring)}
.pos2-inline{display:flex;gap:8px}
.pos2-inline>*{flex:1;min-width:0}
.pos2-check{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--pos-muted);font-weight:600}
.pos2-check input{width:20px;height:20px;accent-color:var(--pos-accent)}
.pos2-change{font-size:.76rem;color:var(--pos-muted);font-weight:600}
/* Tanggal transaksi mundur (owner saja) — sengaja MENCOLOK saat aktif: modal
   ini dipakai puluhan kali sehari dan tanggal yang lupa dimatikan akan
   diam-diam menempel ke transaksi berikutnya. */
.pos2-txdate{border:1px dashed var(--pos-border);border-radius:11px;padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.pos2-txdate.on{border-style:solid;border-color:#f59e0b;background:#fffbeb}
.pos2-txdate input[type=datetime-local]{border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);color:var(--pos-text);padding:9px 11px;font-size:.88rem;min-height:44px;outline:none;width:100%}
.pos2-txdate.on input[type=datetime-local]{border-color:#f59e0b;background:#fff}
.pos2-txdate-hint{font-size:.72rem;line-height:1.45;color:#92400e;font-weight:600;margin:0}
.pos2-txdate-hint.warn{color:#b91c1c}
.pos2-pay.mundur{background:#b45309;border-color:#b45309}

.pos2-change b{font-size:.95rem;color:var(--pos-accent-strong);font-weight:800}

.pos2-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pos2-key{min-height:46px;border:1px solid var(--pos-border);background:var(--pos-surface-2);color:var(--pos-text);border-radius:11px;font-size:1.05rem;font-weight:700;cursor:pointer}
.pos2-key:active{background:var(--pos-surface-3);transform:scale(.97)}
.pos2-key.cash{font-size:.78rem;color:var(--pos-accent-strong);background:var(--pos-accent-soft);border-color:var(--pos-accent-ring)}

.pos2-pay{width:100%;min-height:52px;padding:0 18px;border:0;border-radius:14px;background:var(--pos-accent);color:#fff;font-size:1.02rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--pos-accent) 65%,transparent)}
.pos2-pay:disabled{background:var(--pos-border-strong);box-shadow:none;color:var(--pos-faint);cursor:not-allowed}
.pos2-pay:not(:disabled):active{transform:scale(.99);background:var(--pos-accent-strong)}
.pos2-pay .pos2-pay-amt{margin-left:auto}

/* portrait pay-bar (sheet trigger) */
.pos2-bar{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:var(--pos-surface);border-top:1px solid var(--pos-border);box-shadow:0 -6px 24px -14px rgba(15,23,42,.3);transition:transform .2s}
.pos2-bar.hide{transform:translateY(130%)}
@media (max-width:719px){
  .pos2-bar{position:fixed}
  /* sisakan ruang agar produk terakhir tak tertutup bar */
  .pos2-grid{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
/* Grid Fokus di layar lebar juga memakai bar bawah — tanpa ruang ini baris
   produk terakhir terpotong (bug UI, owner 2026-07-24). */
.pos2[data-cashier-layout="grid"] .pos2-grid{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.pos2-bar .meta{line-height:1.15;min-width:0}
.pos2-bar .meta b{font-size:.98rem;font-weight:800;display:block}
.pos2-bar .meta span{font-size:.7rem;color:var(--pos-muted)}
.pos2-bar .go{margin-left:auto;min-height:48px;padding:0 20px;border:0;border-radius:12px;background:var(--pos-accent);color:#fff;font-size:.92rem;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:9px}
.pos2-bar .go .cnt{background:rgba(255,255,255,.24);border-radius:999px;padding:1px 8px;font-size:.76rem}
.pos2-bar.empty .go{background:var(--pos-border-strong);color:var(--pos-faint);pointer-events:none}

/* ---------- modal Pembayaran (owner 2026-07-29) ----------
   Seluruh kendali bayar pindah ke sini supaya sisi kanan hanya berisi daftar
   item. Di layar kecil tampil sebagai lembar penuh dari bawah; di layar lebar
   sebagai kotak di tengah. */
.pos2-paymodal{position:absolute;inset:0;z-index:40;display:none}
.pos2-paymodal.on{display:block}
.pos2-paymodal-scrim{position:absolute;inset:0;background:rgba(2,6,23,.45)}
.pos2-paymodal-box{position:absolute;left:0;right:0;bottom:0;max-height:94%;background:var(--pos-surface);
  border-radius:20px 20px 0 0;box-shadow:var(--pos-shadow-lg);display:flex;flex-direction:column}
.pos2-paymodal-head{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--pos-border);flex-shrink:0}
.pos2-paymodal-head b{font-size:.98rem;font-weight:800}
.pos2-paymodal-close{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--pos-border);
  background:var(--pos-surface-2);color:var(--pos-muted);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pos2-paymodal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 15px;display:flex;flex-direction:column;gap:9px}
.pos2-paycol{display:flex;flex-direction:column;gap:9px;min-width:0}
.pos2-paymodal-foot{flex-shrink:0;padding:11px 15px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--pos-border);background:var(--pos-surface);display:flex;gap:10px;align-items:stretch}
.pos2-paymodal-foot .pos2-pay{flex:1;width:auto;min-width:0}
/* Salin rincian tagihan (ikon) di kiri Bayar — owner 23 Okt 2026. */
.pos2-copy{flex:0 0 52px;min-height:52px;border:1px solid var(--pos-border-strong);border-radius:14px;background:var(--pos-surface);color:var(--pos-accent);font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pos2-copy:hover:not(:disabled){background:var(--pos-accent-soft)}
.pos2-copy:disabled{color:var(--pos-faint);cursor:not-allowed}
.pos2-copy:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pos-accent-ring)}
/* Ponsel/tablet (owner 23 Okt 2026: modal "kayak ter zoom", tombol Bayar
   hampir tak terlihat): browser ponsel MEMPERBESAR halaman saat kolom ber-font
   < 16px difokus. 16px di semua isian modal Pembayaran = tak ada zoom. */
@media (pointer:coarse){
  .pos2-paymodal .pos2-paymodal-box input,
  .pos2-paymodal .pos2-paymodal-box select,
  .pos2-paymodal .pos2-paymodal-box textarea{font-size:16px}
}

/* Layar lebar: kotak di tengah, DUA kolom berdampingan (rincian | cara bayar).
   Satu kolom 440px dulu menyembunyikan Catatan/Kembali/Split di balik gulir
   pada layar pendek — 111px di laptop 1366x657, 161px di tablet 1024x600. */
@container (min-width:720px){
  .pos2-paymodal-box{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(760px,94%);max-height:calc(100% - 24px);border-radius:18px}
  .pos2-paymodal-body{flex-direction:row;align-items:flex-start;gap:18px}
  .pos2-paycol{flex:1 1 0}
}

/* ---------- modal "Transaksi berhasil" (owner 2026-10-16) ----------
   Memakai kerangka .pos2-paymodal (kotak, kepala, badan dua kolom, kaki).
   Kiri: ringkasan transaksi. Kanan: pilihan cetak — struk baru keluar saat
   salah satu tombol di sini diklik. */
.pos2-sukses{z-index:41}
.pos2-sukses-ikon{width:28px;height:28px;border-radius:999px;background:var(--pos-accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.pos2-sukses-total{display:flex;flex-direction:column;gap:2px}
.pos2-sukses-total .num{font-size:1.6rem;font-weight:800;color:var(--pos-accent-strong);line-height:1.1}
.pos2-sukses-total small{font-size:.74rem;color:var(--pos-muted);font-weight:600}
.pos2-sukses-items{list-style:none;margin:0;padding:8px 0;border-top:1px dashed var(--pos-border);border-bottom:1px dashed var(--pos-border);
  display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto;overscroll-behavior:contain}
.pos2-sukses-items li{display:flex;align-items:baseline;gap:8px;font-size:.8rem;color:var(--pos-text)}
.pos2-sukses-items li .q{color:var(--pos-muted);font-weight:700;min-width:28px}
.pos2-sukses-items li .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.pos2-sukses-items li .nm small{color:var(--pos-muted)}
.pos2-sukses-items li .v{font-weight:700;white-space:nowrap}
.pos2-sukses-items li.kosong{color:var(--pos-faint)}
.pos2-sukses-kv{display:flex;flex-direction:column;gap:3px}
.pos2-sukses-kv .row.total{font-size:1rem;padding:3px 0}
.pos2-sukses-kv .warn{color:#b45309}
.pos2-sukses-sub{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--pos-muted)}
.pos2-sukses-devs{display:flex;flex-direction:column;gap:7px}
.pos2-sukses-dev{display:flex;align-items:stretch;gap:6px}
.pos2-sukses-cetakbtn{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border:1px solid var(--pos-accent-ring);border-radius:12px;background:var(--pos-accent-soft);color:var(--pos-accent-strong);
  font-size:.86rem;font-weight:700;cursor:pointer;text-align:left}
.pos2-sukses-cetakbtn span:not(.st){flex:1;min-width:0;overflow-wrap:anywhere}
.pos2-sukses-cetakbtn .st{font-size:.72rem;font-weight:800;white-space:nowrap}
.pos2-sukses-cetakbtn.ok{border-color:var(--pos-accent);background:#d1fae5}
.pos2-sukses-cetakbtn:disabled{opacity:.6;cursor:wait}
.pos2-sukses-cetakbtn.browser{border-color:var(--pos-border);background:var(--pos-surface-2);color:var(--pos-text)}
.pos2-sukses-ubah{width:44px;flex-shrink:0;border:1px solid var(--pos-border);border-radius:12px;background:var(--pos-surface-2);
  color:var(--pos-muted);cursor:pointer}
.pos2-sukses-ubah.simpan{color:#fff;background:var(--pos-accent);border-color:var(--pos-accent)}
.pos2-sukses-nama{flex:1;min-width:0;min-height:48px;border:1px solid var(--pos-accent-ring);border-radius:12px;padding:0 12px;
  font-size:.88rem;color:var(--pos-text);background:var(--pos-surface);outline:none}
.pos2-sukses-catatan{margin:0;font-size:.76rem;line-height:1.45;color:var(--pos-muted);font-weight:600}
/* Status perangkat (owner 2026-10-16): titik + keterangan di bawah nama.
   Hijau = aplikasi terbuka sekarang, kuning = hari ini, abu = tidak aktif. */
.pos2-sukses-cetakbtn .lbl{display:flex;flex-direction:column;gap:1px;padding:5px 0}
.pos2-sukses-cetakbtn .lbl .nm{overflow-wrap:anywhere}
.pos2-sukses-cetakbtn .ket{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--pos-muted)}
.pos2-sukses-cetakbtn .ket .dot{width:7px;height:7px;border-radius:999px;background:var(--pos-faint);flex-shrink:0}
.pos2-sukses-cetakbtn.st-aktif .ket{color:var(--pos-accent-strong)}
.pos2-sukses-cetakbtn.st-aktif .ket .dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.pos2-sukses-cetakbtn.st-hari_ini .ket .dot{background:#f59e0b}
/* Hijau HANYA untuk yang aktif sekarang; sisanya netral supaya mata langsung
   menemukan perangkat yang pasti menerima perintah cetak. */
.pos2-sukses-cetakbtn.st-hari_ini{border-color:var(--pos-border);background:var(--pos-surface);color:var(--pos-text)}
.pos2-sukses-cetakbtn.st-tidak_aktif{border-color:var(--pos-border);background:var(--pos-surface-2);color:var(--pos-muted)}
.pos2-sukses-ubah.lupakan{color:var(--pos-danger)}
.pos2-sukses-pasif{display:block}
.pos2-sukses-pasif>summary{cursor:pointer;font-size:.76rem;font-weight:700;color:var(--pos-muted);padding:4px 0}
.pos2-sukses-pasif>*+*{margin-top:7px}
.pos2-sukses-sub{display:flex;align-items:center;justify-content:space-between}
.pos2-sukses-muat{width:30px;height:30px;border:1px solid var(--pos-border);border-radius:9px;background:var(--pos-surface-2);
  color:var(--pos-muted);cursor:pointer;font-size:12px}
.pos2-sukses-galat{margin:0;font-size:.76rem;line-height:1.45;color:var(--pos-danger);font-weight:700}

.pos2-scrim{position:absolute;inset:0;z-index:23;background:rgba(2,6,23,.42);opacity:0;visibility:hidden;transition:opacity .25s}
.pos2-scrim.on{opacity:1;visibility:visible}

/* ============ WIDE (container ≥720px) → dock cart for klasik/struk ============ */
@container (min-width:720px){
  .pos2[data-cashier-layout="klasik"] .pos2-cart,
  .pos2[data-cashier-layout="struk"] .pos2-cart{
    position:static;transform:none;height:auto;flex:0 0 var(--pos-cart-w);width:var(--pos-cart-w);
    border-radius:0;border-left:1px solid var(--pos-border);box-shadow:none;z-index:auto;
  }
  .pos2[data-cashier-layout="klasik"] .pos2-grab,.pos2[data-cashier-layout="klasik"] .pos2-cart-close,
  .pos2[data-cashier-layout="struk"] .pos2-grab,.pos2[data-cashier-layout="struk"] .pos2-cart-close{display:none}
  .pos2[data-cashier-layout="klasik"] .pos2-cart-head,.pos2[data-cashier-layout="struk"] .pos2-cart-head{padding:14px 16px}
  .pos2[data-cashier-layout="klasik"] .pos2-bar,.pos2[data-cashier-layout="klasik"] .pos2-scrim,
  .pos2[data-cashier-layout="struk"] .pos2-bar,.pos2[data-cashier-layout="struk"] .pos2-scrim{display:none}

  /* struk = keranjang KIRI (ledger), lebih lebar */
  .pos2[data-cashier-layout="struk"]{--pos-cart-w:380px}
  .pos2[data-cashier-layout="struk"] .pos2-cart{order:-1;border-left:0;border-right:1px solid var(--pos-border)}

  /* grid = keranjang tetap sheet + bar (produk full-width) */
  .pos2[data-cashier-layout="grid"] .pos2-grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}
}

/* very wide: tampilkan lebih banyak kolom di klasik/struk */
@container (min-width:1180px){
  .pos2[data-cashier-layout="klasik"] .pos2-grid,.pos2[data-cashier-layout="struk"] .pos2-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
}

/* pastikan toggle .hidden (dipakai JS utk diskon/pajak/split/tombol) tetap menang */
.pos2 .hidden{display:none !important}

/* ---- shell jadi frame app tetap (100dvh) supaya tak page-scroll & tak kena bug URL-bar ---- */
html,body{height:100%;margin:0}
#app{height:100vh;height:100dvh;overflow:hidden}
/* panel-root wajib flex-column supaya .pos2 (height:100%) dapat tinggi definit */
#panel-root{display:flex;flex-direction:column}
#panel-root>*{flex:1;min-height:0}
#app>*{min-height:0 !important}
.pos-sidebar{min-height:0 !important}
@media (max-width:767px){ .pos-sidebar{height:100dvh} }

/* =========================================================================
   Halaman non-kasir (Laporan, Pengaturan, dll) — komponen app-like bersama.
   Scoped di .pp. Tabel-lebar diganti kartu supaya tak scroll-horizontal.
   ========================================================================= */
.pp{
  --pos-bg:#eef2f6; --pos-surface:#fff; --pos-surface-2:#f7f9fc; --pos-surface-3:#eef2f7;
  --pos-border:#e4e9f0; --pos-border-strong:#d5dce6;
  --pos-text:#0f172a; --pos-muted:#64748b; --pos-faint:#94a3b8;
  --pos-accent:#059669; --pos-accent-strong:#047857; --pos-accent-soft:#ecfdf5; --pos-accent-ring:#6ee7b7;
  --pos-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -14px rgba(15,23,42,.22);
  height:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding:16px; padding-bottom:56px; display:flex; flex-direction:column; gap:14px;
  background:var(--pos-bg); color:var(--pos-text); font-variant-numeric:tabular-nums;
}
.pp .num{font-variant-numeric:tabular-nums}
.pp .hidden{display:none !important}
.pp-card{background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:16px;box-shadow:var(--pos-shadow);padding:16px}
.pp-card>h3{font-size:.92rem;font-weight:800;margin:0 0 10px}
.pp-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:16px;padding:14px;box-shadow:var(--pos-shadow)}
.pp-field{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:600;color:var(--pos-muted)}
.pp-field input,.pp-field select,.pp-inp{border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);color:var(--pos-text);padding:10px 12px;font-size:.9rem;min-height:44px;outline:none;width:100%;font-family:inherit}
.pp-field input:focus,.pp-field select:focus,.pp-inp:focus{border-color:var(--pos-accent-ring)}
/* NILAI CADANGAN WAJIB di setiap var() tombol (owner 2026-08-11, laporan
   kedua utk gejala yang sama). Variabel --pos-* di-scope ke .pp / .pos2,
   sedangkan MODAL ditempel ke <body> — di luar scope itu var() gagal resolve,
   sehingga background jadi transparan sementara color:#fff tetap: tombol
   putih di atas kartu putih, benar-benar tak terlihat. Dulu ditambal dengan
   menyalin blok variabel ke #lembar-opsi (lihat komentarnya di bawah); itu
   menyembuhkan satu modal saja dan modal berikutnya kena lagi. Cadangan di
   sini membuat .pp-btn AMAN DI KONTEKS MANA PUN — termasuk modal yang belum
   ditulis. Jangan hapus cadangannya. */
.pp-btn{min-height:44px;padding:0 18px;border-radius:11px;border:1px solid var(--pos-border,#e4e9f0);background:var(--pos-surface-2,#f7f9fc);color:var(--pos-text,#0f172a);font-size:.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.pp-btn:active{transform:scale(.98)}
.pp-btn.primary{background:var(--pos-accent,#059669);border-color:var(--pos-accent,#059669);color:#fff;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--pos-accent,#059669) 60%,transparent)}
.pp-btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}
.pp-btn.block{width:100%;min-height:50px;font-size:.95rem}

.pp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.pp-stat{background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:16px;padding:14px 16px;box-shadow:var(--pos-shadow)}
.pp-stat .k{font-size:.72rem;color:var(--pos-muted);font-weight:600}
.pp-stat .v{font-size:1.35rem;font-weight:800;color:var(--pos-accent-strong);margin-top:3px}

.pp-grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.pp-grid2{grid-template-columns:1fr 1fr}}

.pp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.pp-item{background:var(--pos-surface);border:1px solid var(--pos-border);border-radius:14px;padding:13px 15px;box-shadow:var(--pos-shadow);display:flex;flex-direction:column;gap:7px}
.pp-item .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-item .top b{font-size:.9rem;font-weight:700}
.pp-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem}
.pp-kv .k{color:var(--pos-muted)}
.pp-kv .v{font-weight:700}
.pp-badge{font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.pp-badge.ok{background:var(--pos-accent-soft);color:var(--pos-accent-strong);border:1px solid var(--pos-accent-ring)}
.pp-badge.mut{background:var(--pos-surface-3);color:var(--pos-muted)}
.pp-empty{color:var(--pos-faint);text-align:center;padding:34px 0;font-size:.85rem;grid-column:1/-1}

.pp-rows{display:flex;flex-direction:column;max-height:340px;overflow-y:auto}
.pp-rows .r{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;font-size:.85rem;border-top:1px solid var(--pos-border)}
.pp-rows .r:first-child{border-top:0}
.pp-rows .r .v{font-weight:700}
.pp-rows .r small{color:var(--pos-faint);font-weight:600}

.pp-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--pos-border);cursor:pointer}
.pp-switch:first-of-type{border-top:0}
.pp-switch .lb{font-size:.9rem;font-weight:600}
.pp-switch input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--pos-border-strong);position:relative;cursor:pointer;transition:background .18s;flex-shrink:0;margin:0}
.pp-switch input:checked{background:var(--pos-accent)}
.pp-switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pp-switch input:checked::after{transform:translateX(18px)}
.pp-note{font-size:.75rem;color:var(--pos-muted);margin:0}

/* Transaksi Kasir (OSO): selaraskan tap target + sudut supaya konsisten app-like */
.oso-page .oso-btn{min-height:42px}
.oso-page .oso-btn.oso-btn-sm{min-height:36px}
.oso-page .oso-input,.oso-page input[type="text"],.oso-page input[type="tel"],.oso-page input[type="number"]{min-height:44px}

/* ── Varian/Add-on/Timbang + Kupon kasir (owner 2026-08-01) ───────────────── */
.li-opsi{display:block;font-size:.68rem;color:var(--pos-muted);font-weight:600;margin:1px 0 2px}
.pos2-kupon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.pos2-kupon input{flex:0 1 160px;min-height:38px;border:1px solid var(--pos-border);border-radius:10px;padding:0 10px;font-size:.8rem;text-transform:uppercase;background:var(--pos-surface-2);color:var(--pos-text)}
.pos2-kupon input:disabled{background:var(--pos-accent-soft);border-color:var(--pos-accent-ring);color:var(--pos-accent-strong);font-weight:700}
.pos2-kupon button{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--pos-accent-ring);background:var(--pos-accent-soft);color:var(--pos-accent-strong);font-size:.78rem;font-weight:700;cursor:pointer}
.pos2-kupon button:disabled{opacity:.5;cursor:wait}
#kupon-status{font-size:.72rem;font-weight:600;color:var(--pos-muted)}
#kupon-status.ok{color:var(--pos-accent-strong)}
#kupon-status.err{color:#dc2626}
/* #lembar-opsi ditempel ke document.body (portal, lolos overflow panel) --
   BUKAN keturunan .pos2, jadi token warna .pos2 tak terwaris ke sini.
   Salin subset yang dipakai (owner laporan: teks putih tak terlihat --
   var(--pos-accent) dkk gagal resolve di luar .pos2, background tombol
   Tambah jadi transparan sementara teksnya putih tetap). */
#lembar-opsi{
  --pos-surface:#fff; --pos-surface-2:#f7f9fc;
  --pos-border:#e4e9f0; --pos-text:#0f172a; --pos-muted:#64748b;
  --pos-accent:#059669; --pos-accent-soft:#ecfdf5; --pos-accent-ring:#6ee7b7;
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
#lembar-opsi .lo-back{position:absolute;inset:0;background:rgba(15,23,42,.45)}
#lembar-opsi .lo-card{position:relative;width:min(440px,100%);max-height:82vh;max-height:82dvh;display:flex;flex-direction:column;background:var(--pos-surface,#fff);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.25)}
@media(min-width:640px){#lembar-opsi{align-items:center}#lembar-opsi .lo-card{border-radius:18px}}
#lembar-opsi .lo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--pos-border);font-size:.95rem}
#lembar-opsi .lo-x{border:0;background:transparent;color:var(--pos-muted);font-size:1rem;cursor:pointer;min-width:34px;min-height:34px}
#lembar-opsi .lo-body{overflow:auto;padding:10px 16px;display:flex;flex-direction:column;gap:12px}
#lembar-opsi .lo-sec>b{display:block;font-size:.78rem;margin-bottom:4px;color:var(--pos-text)}
#lembar-opsi .lo-sec small{color:var(--pos-muted);font-weight:600}
#lembar-opsi .lo-opt{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--pos-border);border-radius:11px;margin-bottom:6px;cursor:pointer;font-size:.84rem}
#lembar-opsi .lo-opt:has(input:checked){border-color:var(--pos-accent-ring);background:var(--pos-accent-soft)}
#lembar-opsi .lo-opt input{accent-color:var(--pos-accent)}
#lembar-opsi .lo-opt input:disabled+span{opacity:.45}
#lembar-opsi .lo-opt .lo-pr{margin-left:auto;font-size:.76rem;color:var(--pos-muted);font-weight:700}
#lembar-opsi .lo-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;font-weight:700;color:var(--pos-text)}
#lembar-opsi .lo-qty input{width:110px;min-height:42px;border:1px solid var(--pos-border);border-radius:10px;text-align:center;font-size:.95rem;font-weight:700}
#lembar-opsi .lo-step{display:flex;align-items:center;gap:6px}
#lembar-opsi .lo-step button{min-width:42px;min-height:42px;border-radius:10px;border:1px solid var(--pos-border);background:var(--pos-surface-2);font-size:1.1rem;cursor:pointer}
#lembar-opsi .lo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--pos-border);font-size:.85rem}
#lembar-opsi .lo-foot #lo-add{min-height:46px;padding:0 22px;border-radius:12px;border:0;background:var(--pos-accent);color:#fff;font-weight:800;font-size:.88rem;cursor:pointer}


/* =========================================================================
   Papan Transaksi Bertahap (18 Sep 2026)
   -------------------------------------------------------------------------
   `.pp` adalah kolom flex yang menggulir, dan anak flex MENGECIL menurut
   bawaannya. Akibatnya dulu dua bagian panel ini diperas alih-alih meluap:
   baris chip status jadi 13px (label chipnya terpotong habis — dari layar ia
   tampak seperti pil abu-abu kosong), dan papannya sendiri jadi 359px padahal
   isinya 1178px. Karena `#stg-list` meluap `visible` sementara `.pp` mengira
   semuanya muat, TAK ADA batang gulir yang muncul: kartu di bawah lipatan
   benar-benar tak bisa dijangkau. Diukur di harness tangkapan layar, bukan
   ditebak.

   Perbaikannya dua lapis: bagian atas dikunci pada ukuran aslinya
   (`flex:0 0 auto`), dan papannya diberi SISA tinggi layar lalu menggulir
   sendiri — lajur penuh dari atas ke bawah, bukan kotak pendek yang
   mengurung kartu.
   ========================================================================= */
.pp-board{gap:10px}
.pp-board > *{flex:0 0 auto}
.pp-board .pp-filter{padding:10px 12px}
.pp-board #stg-chips{min-height:44px}

/* Tiap piksel di atas papan adalah piksel yang dirampas dari kartu. Kartu
   ringkasan karena itu dibuat SATU BARIS (label kiri, angka kanan) alih-alih
   dua tingkat, dan `.pp-card-head` — kelas yang ternyata tak pernah punya
   aturan CSS, jadi judul & jumlahnya turun ke dua baris — diganti kepala
   sendiri yang memang satu baris. Dua perubahan ini saja mengembalikan ±70px
   ke papan pada layar 900px. */
.pp-board .pp-stat{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:9px 13px}
.pp-board .pp-stat .k{margin:0;min-width:0}
.pp-board .pp-stat .v{font-size:1.05rem;margin:0}
/* Catatan "kurang Rp…" turun ke barisnya sendiri; disandingkan dengan angka
   utama ia memeras keduanya sampai labelnya patah dua baris. */
.pp-board .pp-stat #stg-sum-paid-note{flex:1 0 100%;text-align:right;margin:0}
/* Alat cari & saring — SATU baris rapat, bukan tiga tingkat.
   Sebelumnya: kartu penyaring (kolom cari + urutan + muat ulang), lalu baris
   chip, lalu judul "Board Transaksi Bertahap" beserta keterangannya. Judul itu
   mengulang kepala halaman, dan tiga tingkat itu memakan ~150px sebelum kartu
   pertama terlihat. Sekarang: satu bilah alat, satu baris chip yang jumlahnya
   duduk di ujung kanan. */
.pp-board .stg-alat{
  display:flex;align-items:center;gap:8px;
  background:var(--pos-surface);border:1px solid var(--pos-border);
  border-radius:14px;padding:8px 10px;box-shadow:var(--pos-shadow);
}
.pp-board .stg-cari{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.pp-board .stg-cari i{position:absolute;left:12px;font-size:12px;color:var(--pos-faint);pointer-events:none}
.pp-board .stg-cari input{
  width:100%;min-height:40px;padding:8px 12px 8px 32px;
  border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);
  color:var(--pos-text);font:inherit;font-size:.88rem;outline:none;
}
.pp-board .stg-cari input:focus{border-color:var(--pos-accent);box-shadow:0 0 0 3px var(--pos-accent-soft)}
.pp-board .stg-urut{
  flex:0 0 auto;min-height:40px;padding:0 10px;font:inherit;font-size:.8rem;font-weight:600;
  border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);
  color:var(--pos-text);cursor:pointer;
}
.pp-board .stg-muat{
  flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--pos-border);border-radius:10px;background:var(--pos-surface-2);
  color:var(--pos-muted);cursor:pointer;font-size:13px;
}
.pp-board .stg-muat:active{transform:scale(.96)}

.pp-board .stg-saring{display:flex;align-items:center;gap:10px;min-width:0}
.pp-board .stg-chips{display:flex;gap:6px;overflow-x:auto;flex:1 1 auto;min-width:0;
  scrollbar-width:none;padding:1px}
.pp-board .stg-chips::-webkit-scrollbar{display:none}
.pp-board .stg-jumlah{flex:0 0 auto;font-size:.72rem;color:var(--pos-muted);white-space:nowrap}
.pp-board .stg-chip{
  flex:0 0 auto;min-height:32px;padding:0 12px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--pos-border);background:var(--pos-surface);
  color:var(--pos-muted);font:inherit;font-size:.74rem;font-weight:650;cursor:pointer;
}
.pp-board .stg-chip.is-aktif{
  background:var(--pos-accent);border-color:var(--pos-accent);color:#fff;
  box-shadow:0 4px 12px -6px var(--pos-accent);
}

/* Ringkasan angka duduk DI BAWAH papan: ia dibaca sekali-sekali, sedangkan
   kartu pesanan dibaca terus-menerus. Garis tipis di atasnya menandai bahwa
   ia milik seluruh papan, bukan lajur terakhir yang kebetulan di atasnya. */
.pp-board .stg-ringkas{padding-top:10px;border-top:1px solid var(--pos-border)}

/* Layar sempit: keterangan "N transaksi ditampilkan" dibuang — tiap chip sudah
   menyebut jumlahnya sendiri, dan di 390px ia memakan ruang chip yang justru
   harus bisa digeser. Bilah alat boleh melipat supaya kolom cari tak menyusut
   jadi sekadar ikon. */
@media (max-width:520px){
  .pp-board .stg-jumlah{display:none}
  .pp-board .stg-alat{flex-wrap:wrap}
  .pp-board .stg-cari{flex:1 1 100%}
}

.stg-lanes{display:flex;gap:12px;align-items:stretch;min-width:max-content;padding:2px 2px 8px}
.stg-lane{
  width:280px;flex:0 0 280px;max-width:280px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:10px;
  border:1px solid;border-radius:14px;padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.stg-lane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.stg-lane-body{display:flex;flex-direction:column;gap:10px;min-height:0}

/* Layar lebar: papan mengisi sisa tinggi, tiap lajur menggulir SENDIRI supaya
   judul lajur tetap terlihat sementara kartunya digulir. */
@media (min-width:768px){
  .pp-board{overflow-y:hidden}
  .pp-board #stg-list{flex:1 1 auto;min-height:0;overflow:auto;touch-action:auto}
  .stg-lane{height:100%}
  .stg-lane-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:contain;padding-right:2px}
}

/* Layar sempit: lajur setinggi isinya dan HALAMAN yang menggulir — papan
   setinggi layar di ponsel hanya menyisakan beberapa puluh piksel untuk
   kartu, karena kartu ringkasan & penyaring sudah memakan sebagian besar. */
@media (max-width:767.98px){
  .pp-board #stg-list{flex:0 0 auto;overflow-x:auto;overflow-y:visible}
  .stg-lane{min-height:200px}
}

/* ── Pesanan Ojol (2026-09-23) ─────────────────────────────────────────── */
.pos2-tbtn.on{color:#fff;background:#b45309;border-color:#b45309}
.pos2-ojol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px 0}
.pos2-ojchip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--pos-border);background:var(--pos-surface);color:var(--pos-muted);font-size:.78rem;font-weight:600;cursor:pointer}
.pos2-ojchip.on{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.pos2-ojnote{font-size:.72rem;color:#92400e;padding-left:4px}
.pos2.ojol-on .pos2-cart{box-shadow:inset 0 3px 0 #f59e0b}
.oj-sembunyi{display:none!important}
.pos2-ojolform{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.pos2-ojolform .oj-kanal{font-size:.78rem;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:8px 10px;margin:0}
.pos2-ojolform .oj-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pos2-ojolform .pos2-field{min-width:0}
.pos2-ojolform .pos2-field input{width:100%;min-width:0;box-sizing:border-box}
.pos2-ojolform .oj-wajib{font-size:.68rem;font-weight:600;color:#b45309;margin-left:4px}
.pos2-ojolform .oj-hint{font-size:.72rem;color:var(--pos-muted);margin:0;font-weight:500}
.pos2-ojolform .oj-hint.warn{color:var(--pos-danger)}
.pos2-ojolform .oj-bersih input{font-size:1.1rem;font-weight:700}
.pos2-ojolform input[readonly]{background:var(--pos-surface-3)}
@media (max-width:420px){.pos2-ojolform .oj-grid{grid-template-columns:1fr}}