/* =====================================================================
   Mikode POS — Kasir (pesan.html) Fase 1 UI/UX
   Lapisan visual khusus halaman kasir di atas design system
   (css/mikode-theme.css: token + komponen .ui-*). File ini HANYA dimuat
   pesan.html. Semua warna/jarak/radius diambil dari token design system
   (dengan fallback nilai token saat ini) — tidak ada hex baru di luar
   alias token di bawah. Selector dibatasi body.pg-kasir agar tidak
   memengaruhi halaman lain.
   ===================================================================== */

body.pg-kasir {
    --k-bg: var(--bg, #FFFFFF);
    --k-bg-tint: var(--bg-tint, #F4F8FB);
    --k-surface: var(--surface, #EAF1F7);
    --k-ink: var(--ink, #0A1F33);
    --k-muted: var(--muted, var(--text-muted, #44596D));
    --k-faint: var(--faint, var(--text-faint, #5A6E82));
    --k-brand: var(--brand, #144262);
    --k-accent: var(--accent, #3E9BE6);
    --k-accent-soft: var(--accent-soft, rgba(62, 155, 230, .14));
    --k-line: var(--line, rgba(10, 31, 51, .10));
    --k-line-strong: var(--line-strong, rgba(10, 31, 51, .20));
    --k-success: var(--success, #17803D);
    --k-danger: var(--danger, #B42318);
    --k-warn: var(--warn, #B45309);
    --k-success-soft: var(--success-soft, #ECFDF5);
    --k-danger-soft: var(--danger-soft, #FEE2E2);
    --k-font-display: var(--font-display, 'Space Grotesk', 'Inter', system-ui, sans-serif);
    --k-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
    --k-sp-1: var(--sp-1, 4px);
    --k-sp-2: var(--sp-2, 8px);
    --k-sp-3: var(--sp-3, 12px);
    --k-sp-4: var(--sp-4, 16px);
    --k-sp-5: var(--sp-5, 20px);
    --k-sp-6: var(--sp-6, 24px);
    --k-r-sm: var(--r-sm, var(--radius-sm, 8px));
    --k-r-md: var(--r-md, var(--radius-md, 12px));
    --k-r-lg: var(--r-lg, var(--radius-lg, 16px));
    --k-r-full: var(--r-full, 999px);
    --k-sh-card: var(--sh-card, var(--shadow-card, 0 1px 2px rgba(10, 31, 51, .04), 0 10px 24px -18px rgba(10, 31, 51, .22)));
    --k-sh-pop: var(--sh-pop, var(--shadow-lift, 0 2px 4px rgba(10, 31, 51, .05), 0 24px 44px -24px rgba(10, 31, 51, .35)));
}

/* ---------- App shell (pola .ui-side / .ui-nav-item / .ui-topbar) ---------- */
.pg-kasir .ui-topbar .btn-toggle-sidebar {
    display: inline-flex; align-items: center; gap: var(--k-sp-2);
    min-height: 44px;
}
.pg-kasir .ui-topbar .btn-toggle-sidebar svg { width: 20px; height: 20px; flex-shrink: 0; }
.pg-kasir .ui-side .btn-close-sidebar {
    display: inline-flex; align-items: center; gap: var(--k-sp-1);
    min-height: 36px;
}
.pg-kasir .ui-side .btn-close-sidebar svg { width: 16px; height: 16px; flex-shrink: 0; }
.pg-kasir .ui-side .theme-toggle-btn svg { width: 20px; height: 20px; display: block; }

/* Harmonisasi pola shell dengan CSS lama — dicerminkan dari
   css/dashboard-ui.css (halaman contoh dashboard) agar kedua halaman
   berperilaku PERSIS sama: .ui-side tema menjadi drawer fixed pada
   <=980px, sedangkan tata letak lama memakai sidebar statis >=768px
   dan drawer .active <=767px (handleSidebarToggle). Rentang 768–980px
   dikembalikan ke perilaku lama. */
@media (min-width: 768px) and (max-width: 980px) {
    body.pg-kasir .ui-side { position: sticky; transform: none; }
}
/* Header mobile lama tetap gelap (logo putih) & tersembunyi di desktop,
   walau membawa class pola .ui-topbar. */
body.pg-kasir .mobile-header.ui-topbar {
    background: var(--side-bg, #0A1F33);
    color: var(--side-ink, #fff);
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 0;
}
@media (min-width: 768px) {
    body.pg-kasir .mobile-header.ui-topbar { display: none; }
}
/* Chip tenant di kaki sidebar diisi role-guard.js lewat
   #namaPerusahaanBadge, #userRoleBadge & #infoLangganan;
   sembunyikan bagian yang masih kosong. */
body.pg-kasir .ui-tenant-chip span:empty { display: none; }
body.pg-kasir .ui-tenant-chip:not(:has(span:not(:empty))) { display: none; }

/* ---------- Banner offline ---------- */
.pg-kasir .ks-offline-ikon { display: inline-flex; flex-shrink: 0; }
.pg-kasir .ks-offline-ikon svg { width: 18px; height: 18px; }
.pg-kasir .mk-offline-banner .ui-btn { min-height: 36px; }

/* ---------- Pencarian & barcode ---------- */
.pg-kasir .pv-search-wrap .ui-input { border: none; padding: 0; background: transparent; box-shadow: none; width: auto; flex: 1; min-height: 0; }
.pg-kasir .pv-barcode-row .ui-input { border: none; padding: var(--k-sp-1); background: transparent; box-shadow: none; width: auto; flex: 1; min-height: 0; }

/* ---------- Kategori (pill dinamis dari API) ---------- */
.pg-kasir .pv-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.pg-kasir .pv-pill-check { display: inline-flex; }
.pg-kasir .pv-pill-check svg { width: 14px; height: 14px; }

/* ---------- Kartu produk ---------- */
.pg-kasir .pv-card {
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-sh-card);
}
.pg-kasir .pv-card-img { aspect-ratio: 4 / 3; border-radius: var(--k-r-md); }
.pg-kasir .pv-card-name {
    font-size: var(--fs-14, 14px);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.pg-kasir .pv-card-price {
    font-weight: 600;
    font-size: var(--fs-14, 14px);
    color: var(--k-brand);
}
.pg-kasir .pv-habis-badge {
    position: absolute; top: var(--k-sp-2); right: var(--k-sp-2);
    z-index: 2;
}
.pg-kasir .pv-quick-add { width: 44px; height: 44px; bottom: var(--k-sp-2); right: var(--k-sp-2); }
.pg-kasir .pv-quick-add svg { width: 20px; height: 20px; }
.pg-kasir .ks-btn-add {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--k-r-sm);
    font-size: var(--fs-13, 13px);
}
.pg-kasir .ks-btn-add svg { width: 16px; height: 16px; }
.pg-kasir .pv-qty-stepper button {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pg-kasir .pv-qty-stepper button svg { width: 16px; height: 16px; }
.pg-kasir .pv-qty-stepper input { min-height: 40px; }
.pg-kasir .pv-note-input { min-height: 40px; }

/* ---------- Panel keranjang / pembayaran (kartu kanan) ---------- */
.pg-kasir .pv-cart {
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-sh-card);
}
/* .ui-card tema memberi padding + margin-bottom generik — panel kasir
   mengatur jaraknya sendiri lewat .pv-cart-scroll/.pv-cart-footer. */
.pg-kasir .pv-cart.ui-card { padding: 0; margin-bottom: 0; }
/* .ui-field tema = flex column; kepala keranjang lama memakai label
   blok biasa di atas input. */
.pg-kasir .pv-cart-head.ui-field { display: block; margin-bottom: 12px; }
.pg-kasir .pv-cart-footer {
    background: var(--k-bg);
    border-radius: 0 0 var(--k-r-lg) var(--k-r-lg);
}
.pg-kasir .pv-cart-head input.ui-input { min-height: 44px; }

/* Baris item + stepper qty */
.pg-kasir .ks-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--k-line-strong);
    border-radius: var(--k-r-sm);
    overflow: hidden;
}
.pg-kasir .ks-stepper button {
    min-width: 40px; min-height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--k-surface); color: var(--k-ink);
    border-radius: 0;
}
.pg-kasir .ks-stepper button svg { width: 16px; height: 16px; }
.pg-kasir .ks-stepper-val {
    min-width: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-14, 14px);
    border-left: 1px solid var(--k-line);
    border-right: 1px solid var(--k-line);
    font-variant-numeric: tabular-nums;
}
.pg-kasir .ks-item-remove {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 var(--k-sp-3);
}
.pg-kasir .ks-item-remove svg { width: 16px; height: 16px; }

/* Hierarki total */
.pg-kasir .pv-total-row { font-size: var(--fs-13, 13px); padding: 3px 0; }
.pg-kasir .pv-total-row span:last-child { font-variant-numeric: tabular-nums; }
.pg-kasir .pv-total-grand {
    font-family: var(--k-font-display);
    font-size: var(--fs-20, 20px);
    font-weight: 700;
    color: var(--k-ink);
}
.pg-kasir .pv-total-toggle {
    min-height: 48px;
    font-size: var(--fs-14, 14px);
}
.pg-kasir #pvGrandTotalMini {
    font-family: var(--k-font-display);
    font-size: var(--fs-16, 16px);
    font-weight: 700;
}
.pg-kasir .ks-caret { display: inline-flex; color: var(--k-faint); }
.pg-kasir .ks-caret svg { width: 18px; height: 18px; transition: transform .2s ease; }
.pg-kasir .pv-total-toggle.is-open .ks-caret svg { transform: rotate(180deg); }

/* Metode bayar: segmented chips */
.pg-kasir .pay-method {
    min-height: 40px;
    padding: var(--k-sp-2) var(--k-sp-3);
    font-size: var(--fs-13, 13px);
    border-radius: var(--k-r-full);
}

/* Input dibayar besar + kembalian badge */
.pg-kasir .ks-input-bayar {
    min-height: 52px;
    font-size: var(--fs-20, 20px);
    font-weight: 700;
    text-align: right;
}
.pg-kasir .pv-kembalian { align-items: center; }
.pg-kasir .pv-kembalian .ui-badge { font-size: var(--fs-14, 14px); padding: 4px 12px; }
.pg-kasir .pv-kembalian.is-kurang .ui-badge {
    background: var(--k-danger-soft);
    color: var(--k-danger);
}
.pg-kasir .quick-nominal button { min-height: 40px; padding: var(--k-sp-2) var(--k-sp-3); }

/* Tombol aksi utama sticky di panel */
.pg-kasir .pv-action-row { align-items: stretch; }
.pg-kasir .ks-btn-pay { min-height: 52px; height: 52px; font-size: var(--fs-16, 16px); width: 100%; }
.pg-kasir .ks-btn-hold { min-height: 52px; height: 52px; width: 100%; }

/* ---------- Modal (pola .ui-modal) ---------- */
/* .ui-modal tema adalah overlay yang selalu display:flex (dipakai
   UI.confirm yang membuatnya saat runtime). Modal statis kasir memakai
   pola lama .modal (display:none, dibuka JS lewat style.display inline)
   — kembalikan ke tersembunyi; style inline dari JS tetap menang saat
   modal dibuka. */
body.pg-kasir .modal.ui-modal { display: none; }
.pg-kasir .ui-modal .modal-content { border-radius: var(--k-r-lg); box-shadow: var(--k-sh-pop); }
.pg-kasir .ks-modal-title { margin-top: 0; font-family: var(--k-font-display); font-size: var(--fs-20, 20px); }
.pg-kasir .ks-modal-actions { margin-top: var(--k-sp-5); }
.pg-kasir .ks-modal-narrow { max-width: 420px; }
.pg-kasir .modal-actions .ui-btn svg { width: 16px; height: 16px; }

/* Daftar pesanan tertunda */
.pg-kasir .ks-held-empty { color: var(--k-faint); font-size: var(--fs-14, 14px); }
.pg-kasir .ks-held-card {
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-md);
    padding: var(--k-sp-3);
    margin-bottom: var(--k-sp-3);
    background: var(--k-bg);
}
.pg-kasir .ks-held-head {
    display: flex; justify-content: space-between; gap: var(--k-sp-3);
    font-weight: 700; font-size: var(--fs-14, 14px); color: var(--k-ink);
}
.pg-kasir .ks-held-meta { font-size: var(--fs-12, 12px); color: var(--k-faint); margin: var(--k-sp-1) 0 var(--k-sp-2); }
.pg-kasir .ks-held-actions { display: flex; gap: var(--k-sp-2); }
.pg-kasir .ks-held-lanjut { flex: 1; }

/* Review nota (tampilan rekap ala struk, BUKAN area cetak) */
.pg-kasir .ks-review-content { font-family: var(--k-font-mono, 'JetBrains Mono', ui-monospace, monospace); }
.pg-kasir .ks-review-head { text-align: center; margin-bottom: var(--k-sp-4); }
.pg-kasir .ks-review-brand { margin: 0 0 5px; letter-spacing: 1px; font-family: inherit; }
.pg-kasir .ks-review-sub { margin: 0; font-size: var(--fs-12, 12px); color: var(--k-muted); }
.pg-kasir .ks-review-sep { margin: 0; font-size: var(--fs-12,12px); color: var(--k-faint); }
.pg-kasir .ks-review-judul { font-size: var(--fs-13, 13px); color: var(--k-ink); }
.pg-kasir .ks-review-pelanggan { margin: var(--k-sp-1) 0 0; font-size: var(--fs-12, 12px); color: var(--k-ink); }
.pg-kasir .ks-review-table { width: 100%; font-size: var(--fs-13, 13px); border-collapse: collapse; margin-bottom: var(--k-sp-3); }
.pg-kasir .ks-review-table td { padding: var(--k-sp-1) 0; vertical-align: top; }
.pg-kasir .ks-rev-qty { text-align: center; }
.pg-kasir .ks-rev-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-kasir .ks-review-total {
    font-size: var(--fs-13, 13px);
    border-top: 1px dashed var(--k-line-strong);
    padding-top: var(--k-sp-2);
    display: flex; flex-direction: column; gap: var(--k-sp-1);
}
.pg-kasir .ks-rev-line { display: flex; justify-content: space-between; gap: var(--k-sp-3); }
.pg-kasir .ks-rev-line span:last-child { font-variant-numeric: tabular-nums; }
.pg-kasir .ks-rev-grand {
    font-weight: 700; font-size: var(--fs-16, 16px);
    margin-top: var(--k-sp-1);
    border-top: 1px dashed var(--k-line-strong);
    padding-top: var(--k-sp-1);
}
.pg-kasir .ks-rev-bayar { font-size: var(--fs-13, 13px); display: flex; flex-direction: column; gap: var(--k-sp-1); margin-top: var(--k-sp-2); }

/* Aksi struk */
.pg-kasir .struk-actions .ui-btn { min-height: 44px; }
.pg-kasir .struk-actions .ui-btn svg { width: 16px; height: 16px; }

/* ---------- FAB & panel pantau dapur ---------- */
.pg-kasir .dapur-monitor-fab svg { width: 24px; height: 24px; }
.pg-kasir .ks-dapur-head-label { display: inline-flex; align-items: center; gap: var(--k-sp-2); }
.pg-kasir .ks-dapur-head-label svg { width: 18px; height: 18px; }
.pg-kasir .dapur-monitor-panel-close { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.pg-kasir .dapur-monitor-panel-close svg { width: 16px; height: 16px; }

/* ---------- Mode gelap: penyesuaian seperlunya di atas style.css ---------- */
html[data-theme="dark"] .pg-kasir .ks-held-card { background: transparent; }
html[data-theme="dark"] .pg-kasir .pv-cart-footer { background: transparent; }
html[data-theme="dark"] .pg-kasir .ks-stepper button { background: var(--k-surface); }

/* ---------- HP: bilah total sticky bawah tetap, visual dirapikan ---------- */
@media (max-width: 640px) {
    .pg-kasir .pv-total-toggle { border-radius: var(--k-r-md); }
    .pg-kasir .ks-btn-pay, .pg-kasir .ks-btn-hold { min-height: 52px; }
}

@media print {
    .pg-kasir .dapur-monitor-fab, .pg-kasir .dapur-monitor-panel { display: none !important; }
}

/* Badge jumlah di kartu menu: atribut hidden HARUS menang atas display:flex
   dari style.css lama — badge tidak tampil saat jumlah masih 0. */
.pg-kasir .pv-card-qty-badge[hidden] { display: none !important; }

/* Fase 2 (B6): di HP, FAB pantau dapur diangkat menjauhi bilah total
   lengket (48px) + ruang aman, dan grid produk diberi bantalan bawah
   supaya baris terakhir bisa digulir bebas dari FAB & bilah total —
   tombol "+" kartu tidak lagi tertutup FAB. */
@media (max-width: 640px) {
    .pg-kasir .dapur-monitor-fab { bottom: 118px; right: 12px; }
    .pg-kasir .dapur-monitor-panel { bottom: 184px; }
    .pg-kasir .pv-grid { padding-bottom: 96px; }
}

/* Fase 3: pemilih outlet di panel pembayaran (multi-outlet). */
.pg-kasir .pv-outlet-box { margin-bottom: var(--sp-3, 12px); }
.pg-kasir .pv-outlet-box[hidden] { display: none !important; }
.pg-kasir .pv-outlet-box .pv-pay-label { display: block; margin-bottom: var(--sp-2, 8px); }

/* ---------- QRIS terverifikasi (gateway Midtrans tenant) ---------- */
.pg-kasir .pv-qris-info { font-size: var(--fs-13, 13px); color: var(--brand-ink); background: var(--accent-soft); border-radius: var(--k-r-md, 12px); padding: var(--k-sp-2) var(--k-sp-3); margin: var(--k-sp-2) 0; }
.pg-kasir .qris-content { text-align: center; }
.pg-kasir .qris-judul { margin: 0 0 6px; }
.pg-kasir .qris-sub { color: var(--k-muted, #44596D); font-size: var(--fs-13, 13px); margin: 0 0 14px; }
.pg-kasir .qris-img { width: 260px; height: 260px; max-width: 78vw; border: 1px solid var(--k-line, rgba(10,31,51,.12)); border-radius: 12px; background: #fff; }
.pg-kasir .qris-total { font-size: var(--fs-20, 20px); font-weight: 800; margin: 12px 0 2px; }
.pg-kasir .qris-status { font-weight: 700; color: var(--brand-ink); margin: 2px 0; }
.pg-kasir .qris-hitung { color: var(--k-muted, #44596D); font-size: var(--fs-13, 13px); margin: 2px 0 10px; font-variant-numeric: tabular-nums; }

/* ---------- Stepper jumlah di kartu menu (semua ukuran) ---------- */
.pg-kasir .pv-card-stepper { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 2px; background: var(--brand); color: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 6px 16px rgba(10,31,51,.28); z-index: 3; }
.pg-kasir .pv-card-stepper[hidden] { display: none; }
.pg-kasir .pv-step-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pg-kasir .pv-step-btn:active { background: rgba(255,255,255,.34); }
.pg-kasir .pv-step-btn svg { width: 16px; height: 16px; }
.pg-kasir .pv-card-stepper-val { min-width: 26px; text-align: center; font-weight: 800; font-size: var(--fs-14, 14px); font-variant-numeric: tabular-nums; }
.pg-kasir .pv-quick-add[hidden] { display: none; }

/* ---------- Bottom-sheet keranjang HP: ringkas + bisa diseret ---------- */
.pg-kasir .pv-sheet-handle { display: none; }
@media (max-width: 767px), (max-height: 520px) and (min-width: 768px) and (max-width: 1180px) {
  .pg-kasir .pv-layout { flex-direction: column-reverse; padding-bottom: 96px; }
  .pg-kasir .pv-cart { position: fixed !important; left: 0; right: 0; bottom: 0; width: auto; min-width: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.15); z-index: 9999; --peek: 124px; transform: translateY(calc(100% - var(--peek))); max-height: 82dvh; }
  .pg-kasir .pv-cart.pv-expanded { transform: translateY(0); }
  .pg-kasir .pv-cart.pv-dragging { transition: none !important; }
  .pg-kasir .pv-cart::before { display: none; }
  .pg-kasir .pv-sheet-handle { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 8px 12px 4px; background: transparent; border: 0; cursor: grab; touch-action: none; color: var(--k-muted, #44596D); }
  .pg-kasir .pv-sheet-handle:active { cursor: grabbing; }
  .pg-kasir .pv-sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--k-line-strong, #B9C9D6); }
  .pg-kasir .pv-sheet-label { font-size: var(--fs-12,12px); font-weight: 600; letter-spacing: .02em; }
}
.pg-kasir .pv-qris-statis-btn { width: 100%; margin: 6px 0 2px; }
.pg-kasir .pv-qris-statis-btn[hidden] { display: none; }

/* ---------- Rombak kasir HP (v39) ----------
   Grid menu dikunci 2 kolom di mode ringkas (aturan warisan auto-fill
   bisa menghasilkan 1 kolom raksasa di sebagian perangkat), foto kartu
   4:3 agar tidak memakan layar, nama maksimal 2 baris, kategori satu
   baris bisa digeser, dan baris cari/urutan boleh membungkus rapi. */
@media (max-width:767px), (max-height:520px) and (min-width:768px) and (max-width:1180px) {
  .pg-kasir .pv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pg-kasir .pv-card { padding: 10px; gap: 6px; }
  .pg-kasir .pv-card-img { aspect-ratio: 4/3; }
  .pg-kasir .pv-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pg-kasir .pv-card-options summary { padding: 4px 0; }
  .pg-kasir .pv-search-wrap { flex-wrap: wrap; }
  .pg-kasir .pv-search-wrap input[type="search"] { flex: 1 1 140px; min-width: 0; }
  .pg-kasir .pv-search-wrap select { flex: 0 1 auto; max-width: 48%; }
  .pg-kasir .pv-categories { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pg-kasir .pv-categories::-webkit-scrollbar { display: none; }
  .pg-kasir .pv-categories .pv-pill { flex: 0 0 auto; }
}

/* ---------- Akses bayar HP (v40) ----------
   Temuan uji: dengan keranjang terisi + kotak pembayaran lengkap,
   isi panel melebihi max-height dan tombol Bayar tumpah ke luar
   layar tanpa bisa digulir — tak terjangkau. Kini: panel flex,
   daftar item & footer masing-masing bisa menggulir, baris aksi
   (Simpan/Bayar) lengket di dasar footer sehingga SELALU terlihat.
   Saat tertutup, peek hanya menampilkan gagang + baris Total. */
.pg-kasir .pv-sheet-close { display: none; }
@media (max-width:767px), (max-height:520px) and (min-width:768px) and (max-width:1180px) {
  .pg-kasir .pv-cart { --peek: 124px; min-height: var(--peek); display: flex; flex-direction: column; overflow: hidden; max-height: 88dvh; }
  .pg-kasir .pv-cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .pg-kasir .pv-cart:not(.pv-expanded) .pv-cart-scroll { display: none; }
  .pg-kasir .pv-cart:not(.pv-expanded) .pv-pay-box,
  .pg-kasir .pv-cart:not(.pv-expanded) .pv-action-row { display: none; }
  .pg-kasir .pv-cart-footer { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .pg-kasir .pv-action-row { position: sticky; bottom: 0; background: var(--card, #fff); padding-top: 8px; box-shadow: 0 -10px 14px -12px rgba(10,31,51,.35); z-index: 1; }
  .pg-kasir .pv-sheet-handle { min-height: 40px; flex: none; }
  .pg-kasir .pv-cart.pv-expanded .pv-sheet-close { display: inline-flex; position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2, #EAF1F7); color: var(--ink, #0A1F33); border: 0; z-index: 2; cursor: pointer; }
  .pg-kasir .pv-layout { padding-bottom: 128px; }
  .pg-kasir .pv-search-wrap { padding: 8px 10px; }
  .pg-kasir .pv-barcode-row { padding: 8px 10px; margin-bottom: 8px; }
  .pg-kasir .pv-topbar { margin-bottom: 8px; }
}

/* ---------- Banner pengingat shift di kasir (v43) ---------- */
.pg-kasir .pv-shift-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FFF7E8; border: 1px solid #F2D492; color: #7A5410; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: var(--fs-14,14px); font-weight: 600; }
.pg-kasir .pv-shift-banner[hidden] { display: none; }
.pg-kasir .pv-shift-banner-btn { min-height: 40px; padding: 6px 14px; flex: none; }
html[data-theme="dark"] .pg-kasir .pv-shift-banner { background: #3A2E12; border-color: #6B5518; color: #F2D492; }

/* ---------- Grid menu 2 kolom sebagai bawaan (v44) ----------
   Pendekatan lama menaruh aturan 2 kolom di dalam media query;
   di perangkat tenant aturan itu tidak terpicu sehingga menu tampil
   1 kolom raksasa. Kini 2 kolom adalah BAWAAN — hanya desktop
   penuh yang kembali ke auto-fill lebar. */
.pg-kasir .pv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) and (min-height: 521px) {
  .pg-kasir .pv-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}
@media (max-width: 900px) {
  .pg-kasir .pv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pg-kasir .pv-card-img { aspect-ratio: 4/3; }
  .pg-kasir .pv-categories { margin-left: 0; margin-right: 0; }
}

/* ---------- Kehalusan tombol & sheet kasir (v44) ---------- */
@media (max-width:767px), (max-height:520px) and (min-width:768px) and (max-width:1180px) {
  .pg-kasir .pv-cart { transition: transform .3s cubic-bezier(.32,.72,.24,1); }
}
.pg-kasir .pv-pill { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.pg-kasir .pv-pill:active { transform: scale(.96); }
.pg-kasir .pv-step-btn, .pg-kasir .pv-quick-add { transition: background-color .18s ease, transform .12s ease, opacity .18s ease; }
.pg-kasir .pv-step-btn:active, .pg-kasir .pv-quick-add:active { transform: scale(.92); }
.pg-kasir .quick-nominal button { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.pg-kasir .quick-nominal button:active { transform: scale(.96); }
.pg-kasir .pv-total-toggle { transition: background-color .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .pg-kasir .pv-cart, .pg-kasir .pv-pill, .pg-kasir .pv-step-btn, .pg-kasir .pv-quick-add, .pg-kasir .quick-nominal button { transition: none !important; }
}

/* ---------- Bayar langsung dari intipan sheet (v58) ----------
   Keluhan pemakaian: untuk mencapai tombol Bayar, pengguna harus
   membuka sheet lebih dulu (atau, pada tampilan panel menempel,
   menggulir melewati seluruh menu). Kini saat sheet tertutup, baris
   aksi tetap tampil berisi tombol Bayar saja (Simpan disembunyikan);
   mengetuk Bayar membuka sheet ke panel pembayaran (logika di
   pesan-inline-2.js). Intipan diperbesar agar muat: gagang + baris
   Total + tombol Bayar. */
@media (max-width:767px), (max-height:520px) and (min-width:768px) and (max-width:1180px) {
  .pg-kasir .pv-cart { --peek: 176px; }
  .pg-kasir .pv-cart:not(.pv-expanded) .pv-action-row { display: grid; grid-template-columns: 1fr; margin-top: 8px; }
  .pg-kasir .pv-cart:not(.pv-expanded) .ks-btn-hold { display: none; }
  .pg-kasir .pv-cart:not(.pv-expanded) .ks-btn-pay { min-height: 48px; }
  .pg-kasir .pv-layout { padding-bottom: 196px; }
}