/* 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}
.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;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 .pp{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-head .pos2-cart-close{margin-left:auto;display:flex;align-items:center;justify-content:center}
.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-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)}

@container (min-width:720px){
  .pos2-paymodal-box{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(440px,92%);max-height:88%;border-radius:18px}
}

.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}