/* ==========================================================================
   Sarjana ATK POS — gaya dasar. Padat, cepat, keyboard-first.
   Warna utama hijau Sarjana ATK (#0F9D58), aksen netral.
   ========================================================================== */
:root {
  --hijau: #0F9D58; --hijau-tua: #0B7C45; --hijau-muda: #E6F5EE;
  --bg: #F3F5F7; --panel: #FFFFFF; --garis: #DCE1E7; --garis-2: #EEF1F4;
  --teks: #1F2937; --teks-2: #5B6472; --teks-3: #8A94A3;
  --merah: #DC2626; --merah-muda: #FEE2E2; --kuning: #D97706; --kuning-muda: #FEF3C7; --biru: #2563EB; --biru-muda: #DBEAFE;
  --radius: 6px; --bayang: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: 13.5px; color: var(--teks); background: var(--bg); line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: var(--hijau-tua); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.mono { font-family: var(--mono); }
.kanan { text-align: right; }
.tengah { text-align: center; }
.redup { color: var(--teks-3); }
.kecil { font-size: 12px; }
.tebal { font-weight: 600; }
.hijau { color: var(--hijau-tua); } .merah { color: var(--merah); } .kuning { color: var(--kuning); } .biru { color: var(--biru); }
.sembunyi { display: none !important; }

/* ---------- Rangka ---------- */
.rangka { display: flex; flex-direction: column; height: 100vh; }
.topbar { height: 46px; background: var(--panel); border-bottom: 1px solid var(--garis); display: flex; align-items: center; padding: 0 12px; gap: 6px; flex-shrink: 0; }
.topbar .merek { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hijau-tua); margin-right: 10px; white-space: nowrap; }
.topbar .merek .logo { width: 26px; height: 26px; border-radius: 6px; background: var(--hijau); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.topbar nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.topbar nav a { padding: 6px 11px; border-radius: var(--radius); color: var(--teks-2); font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.topbar nav a:hover { background: var(--garis-2); color: var(--teks); }
.topbar nav a.aktif { background: var(--hijau-muda); color: var(--hijau-tua); }
.topbar nav a svg { width: 15px; height: 15px; }
.topbar .kanan-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lencana { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--garis-2); color: var(--teks-2); white-space: nowrap; }
.lencana.hijau { background: var(--hijau-muda); color: var(--hijau-tua); }
.lencana.merah { background: var(--merah-muda); color: var(--merah); }
.lencana.kuning { background: var(--kuning-muda); color: var(--kuning); }
.lencana.biru { background: var(--biru-muda); color: var(--biru); }
.titik { width: 8px; height: 8px; border-radius: 50%; background: var(--teks-3); display: inline-block; }
.titik.on { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.titik.off { background: var(--merah); box-shadow: 0 0 0 3px rgba(220,38,38,.2); }
.isi { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.isi.penuh { padding: 0; display: flex; flex-direction: column; }
.statusbar { height: 26px; background: var(--hijau-tua); color: #fff; font-size: 12px; display: flex; align-items: center; padding: 0 12px; gap: 14px; flex-shrink: 0; white-space: nowrap; overflow: hidden; }
.statusbar .jam { margin-left: auto; font-family: var(--mono); }
.statusbar kbd { background: rgba(255,255,255,.18); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 11px; }

/* ---------- Komponen ---------- */
.panel { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); }
.panel-judul { padding: 10px 14px; border-bottom: 1px solid var(--garis-2); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.panel-judul .aksi { margin-left: auto; display: flex; gap: 6px; }
.panel-isi { padding: 12px 14px; }
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--panel); cursor: pointer; font-weight: 500; white-space: nowrap; transition: background .1s, border-color .1s; line-height: 1.2; }
.tombol:hover { background: var(--garis-2); }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tombol.utama { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.tombol.utama:hover { background: var(--hijau-tua); }
.tombol.bahaya { color: var(--merah); border-color: #FCA5A5; }
.tombol.bahaya:hover { background: var(--merah-muda); }
.tombol.biru { background: var(--biru); border-color: var(--biru); color: #fff; }
.tombol.kuning { background: var(--kuning); border-color: var(--kuning); color: #fff; }
.tombol.besar { padding: 11px 18px; font-size: 15px; }
.tombol.kecil { padding: 4px 9px; font-size: 12px; }
.tombol kbd { font-family: var(--mono); font-size: 11px; opacity: .75; }
.tombol svg { width: 15px; height: 15px; }
.input, select.input, textarea.input { width: 100%; padding: 7px 9px; border: 1px solid var(--garis); border-radius: var(--radius); background: #fff; outline: none; }
.input:focus { border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(15,157,88,.15); }
.input.kanan { text-align: right; font-family: var(--mono); }
.input[readonly] { background: var(--garis-2); color: var(--teks-2); }
.input.kecil { padding: 4px 7px; font-size: 12.5px; }
label.label { display: block; font-size: 12px; color: var(--teks-2); margin-bottom: 3px; font-weight: 500; }
.field { margin-bottom: 10px; }
.baris { display: flex; gap: 10px; align-items: center; }
.baris > * { min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: 7px 9px; border-bottom: 1px solid var(--garis-2); text-align: left; vertical-align: middle; }
.tabel th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--teks-2); background: #FAFBFC; position: sticky; top: 0; z-index: 1; font-weight: 600; }
.tabel tbody tr:hover { background: #F7FAF8; }
.tabel tbody tr.pilih { background: var(--hijau-muda); }
.tabel td.angka, .tabel th.angka { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabel.padat th, .tabel.padat td { padding: 5px 8px; }
.tabel-bungkus { overflow: auto; }
.kosong { padding: 30px; text-align: center; color: var(--teks-3); }
.chip { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--garis-2); color: var(--teks-2); }
.chip.hijau { background: var(--hijau-muda); color: var(--hijau-tua); } .chip.merah { background: var(--merah-muda); color: var(--merah); }
.chip.kuning { background: var(--kuning-muda); color: var(--kuning); } .chip.biru { background: var(--biru-muda); color: var(--biru); }

/* Modal */
.modal-latar { position: fixed; inset: 0; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: var(--panel); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; }
.modal.lebar { max-width: 860px; } .modal.sempit { max-width: 420px; }
.modal-judul { padding: 12px 16px; border-bottom: 1px solid var(--garis-2); font-weight: 600; font-size: 15px; display: flex; align-items: center; }
.modal-judul .tutup { margin-left: auto; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--teks-3); line-height: 1; }
.modal-isi { padding: 14px 16px; overflow: auto; }
.modal-kaki { padding: 10px 16px; border-top: 1px solid var(--garis-2); display: flex; gap: 8px; justify-content: flex-end; }

/* Toast */
.toast-wadah { position: fixed; top: 56px; right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1F2937; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-weight: 500; max-width: 380px; animation: masuk .15s ease-out; }
.toast.ok { background: var(--hijau-tua); } .toast.galat { background: var(--merah); } .toast.info { background: var(--biru); }
@keyframes masuk { from { transform: translateY(-6px); opacity: 0 } to { transform: none; opacity: 1 } }

/* Stat card (dashboard) */
.kartu-stat { padding: 12px 14px; }
.kartu-stat .judul { font-size: 12px; color: var(--teks-2); font-weight: 500; }
.kartu-stat .nilai { font-size: 22px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
.kartu-stat .sub { font-size: 12px; color: var(--teks-3); margin-top: 2px; }
.bar-h { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; }
.bar-h .lbl { width: 90px; color: var(--teks-2); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-h .bar { flex: 1; background: var(--garis-2); border-radius: 3px; height: 14px; overflow: hidden; }
.bar-h .bar i { display: block; height: 100%; background: var(--hijau); }
.bar-h .nil { width: 90px; text-align: right; font-family: var(--mono); }

/* ---------- Layar Kasir ---------- */
.kasir { display: grid; grid-template-rows: auto auto 1fr auto auto; height: 100%; gap: 8px; padding: 10px 12px; background: var(--bg); }
.kasir-kepala { display: grid; grid-template-columns: 420px 1fr; gap: 10px; }
.kasir-kepala .form-kepala { display: grid; grid-template-columns: 90px 1fr; gap: 6px 8px; align-items: center; font-size: 13px; }
.kasir-kepala .form-kepala .lbl { color: var(--teks-2); text-align: right; }
.layar-total { background: #111827; color: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 8px 20px; min-height: 100px; position: relative; overflow: hidden; }
.layar-total .angka { font-size: 58px; font-weight: 700; font-family: var(--mono); letter-spacing: -1px; line-height: 1; }
.layar-total .ket { font-size: 12px; color: #9CA3AF; margin-top: 6px; display: flex; gap: 14px; }
.layar-total .item-terakhir { position: absolute; left: 16px; top: 10px; font-size: 13px; color: #D1D5DB; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layar-total .item-terakhir b { color: #fff; }
.kasir-input { display: flex; gap: 10px; align-items: center; }
.kasir-input .lbl { color: var(--teks-2); }
.kasir-input .qty { width: 90px; text-align: right; font-family: var(--mono); font-size: 15px; padding: 8px; }
.kasir-input .kode { flex: 1; max-width: 520px; font-size: 15px; padding: 8px 10px; }
.kasir-input .saran { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--garis); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.18); width: 620px; max-height: 360px; overflow: auto; }
.saran .baris-saran { display: grid; grid-template-columns: 110px 1fr 80px 110px 70px; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--garis-2); align-items: center; }
.saran .baris-saran:hover, .saran .baris-saran.aktif { background: var(--hijau-muda); }
.saran .baris-saran .h { font-family: var(--mono); text-align: right; }
.kasir-grid { background: #fff; border: 1px solid var(--garis); border-radius: var(--radius); overflow: auto; min-height: 0; }
.kasir-grid .tabel td, .kasir-grid .tabel th { padding: 6px 9px; }
.kasir-grid .tabel tbody tr { cursor: default; }
.kasir-grid .tabel tbody tr.pilih td { background: var(--hijau-muda); }
.kasir-grid input.qty-inline { width: 64px; text-align: right; font-family: var(--mono); padding: 2px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.kasir-grid input.qty-inline:focus { border-color: var(--hijau); background: #fff; }
.kasir-kaki { display: grid; grid-template-columns: 1fr 460px; gap: 10px; align-items: start; }
.kasir-kaki .tombol-baris { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.kasir-kaki .form-kaki { display: grid; grid-template-columns: 90px 220px; gap: 6px 8px; align-items: center; }
.kasir-kaki .form-kaki .lbl { color: var(--teks-2); text-align: right; }
.ringkas { display: grid; grid-template-columns: 90px 90px 120px 30px 90px 130px; gap: 6px 6px; align-items: center; font-size: 13px; }
.ringkas .lbl { text-align: right; color: var(--teks-2); }
.ringkas .input { padding: 5px 7px; }
.ringkas .subtotal { font-family: var(--mono); font-weight: 700; font-size: 15px; text-align: right; }
.kasir-aksi { display: flex; gap: 6px; align-items: center; }
.kasir-aksi .tombol { padding: 9px 14px; }
.kasir-aksi .spasi { flex: 1; }

/* Pembayaran */
.bayar-total { background: #111827; color: #fff; border-radius: 8px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bayar-total .angka { font-family: var(--mono); font-size: 30px; font-weight: 700; }
.bayar-baris { display: grid; grid-template-columns: 150px 1fr 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.bayar-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bayar-cepat .tombol { padding: 6px 10px; font-family: var(--mono); }
.bayar-ringkas { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; font-size: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--garis); }
.bayar-ringkas .angka { font-family: var(--mono); text-align: right; font-weight: 600; }
.bayar-ringkas .kembali { font-size: 24px; color: var(--hijau-tua); }
.bayar-ringkas .kurang { font-size: 20px; color: var(--merah); }

/* Login */
.login-latar { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, #0B7C45 0%, #0F9D58 45%, #E6F5EE 45.1%, #F3F5F7 100%); padding: 20px; }
.login-kotak { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; padding: 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.login-kotak .merek { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.login-kotak .merek .logo { width: 40px; height: 40px; border-radius: 10px; background: var(--hijau); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.login-kotak .merek h1 { font-size: 18px; } .login-kotak .merek .sub { font-size: 12px; color: var(--teks-3); }
.peringatan { padding: 9px 12px; border-radius: var(--radius); background: var(--merah-muda); color: var(--merah); font-size: 13px; margin-bottom: 12px; }
.peringatan.info { background: var(--biru-muda); color: var(--biru); }
.peringatan.kuning { background: var(--kuning-muda); color: var(--kuning); }

/* Filter bar */
.filter { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 10px; }
.filter .field { margin: 0; }
.filter .input { min-width: 140px; }
.paginasi { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 8px 12px; font-size: 12.5px; color: var(--teks-2); }

/* Tab */
.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--garis); margin-bottom: 12px; }
.tab a, .tab button { padding: 8px 14px; border: 0; background: none; cursor: pointer; color: var(--teks-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab .aktif { color: var(--hijau-tua); border-bottom-color: var(--hijau); }

@media (max-width: 1100px) {
  .kasir-kepala { grid-template-columns: 1fr; }
  .layar-total .angka { font-size: 40px; } .layar-total { min-height: 70px; }
  .kasir-kaki { grid-template-columns: 1fr; }
  .ringkas { grid-template-columns: 90px 1fr 1fr; }
  .kasir-input .saran { width: calc(100vw - 40px); }
}
@media (max-width: 720px) {
  .topbar nav a span { display: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .kasir-kepala .form-kepala { grid-template-columns: 80px 1fr; }
}
@media print { .topbar, .statusbar { display: none !important; } .isi { padding: 0; overflow: visible; } }

/* ---------- Ribbon (menu dua tingkat) ---------- */
.topbar nav.tab-utama a { padding: 6px 12px; font-weight: 600; }
.ribbon { background: var(--panel); border-bottom: 1px solid var(--garis); padding: 6px 12px 4px; display: flex; flex-shrink: 0; overflow-x: auto; }
.ribbon.tutup { display: none; }
.ribbon-tab { display: flex; gap: 0; }
.ribbon-grup { display: flex; flex-direction: column; align-items: center; padding: 0 10px; border-right: 1px solid var(--garis-2); }
.ribbon-grup:last-child { border-right: 0; }
.ribbon-tombol { display: flex; gap: 2px; }
.ribbon-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 8px; min-width: 72px; max-width: 110px; border-radius: var(--radius); color: var(--teks); text-align: center; font-size: 12px; line-height: 1.15; }
.ribbon-item svg { width: 26px; height: 26px; color: var(--hijau-tua); }
.ribbon-item:hover { background: var(--garis-2); }
.ribbon-item.aktif { background: var(--hijau-muda); }
.ribbon-label { font-size: 11px; color: var(--teks-3); margin-top: 3px; text-transform: none; }
@media (max-width: 900px) { .ribbon-item { min-width: 60px; } .ribbon-item svg { width: 20px; height: 20px; } }
@media print { .ribbon { display: none !important; } }

/* ---------- Jendela Cari Item & Pembayaran (ala kasir desktop) ---------- */
.modal.cari-item { max-width: 96vw; width: 1400px; height: 92vh; }
.modal.cari-item .modal-isi { display: flex; flex-direction: column; gap: 8px; }
.cari-filter { display: grid; grid-template-columns: 110px 380px 90px 220px 110px 220px; gap: 6px 8px; align-items: center; }
.cari-filter label { text-align: right; color: var(--teks-2); }
.cari-filter .cari-total { grid-column: 1 / -1; text-align: right; font-weight: 600; }
.cari-tabel { flex: 1; min-height: 0; border: 1px solid var(--garis); border-radius: var(--radius); }
.cari-tabel .tabel tbody tr { cursor: pointer; }
.modal.bayar-jendela { max-width: 840px; }
.bayar-grid { display: grid; grid-template-columns: 150px 1fr; gap: 8px 10px; align-items: center; }
.bayar-grid .lbl { text-align: right; color: var(--teks); font-size: 15px; }
.bayar-grid .lbl.besar { font-size: 20px; }
/* Kolom nominal, pilihan bank, dan no. ref dikunci lebarnya supaya SEMUA baris
   metode berbaris lurus ke bawah. Tanpa ini tiap baris melebar sendiri
   mengikuti panjang nama banknya, dan angkanya jadi tidak bisa dibandingkan
   sekilas. */
.bayar-grid .bayar-nom { font-size: 18px; padding: 8px 10px; width: 200px; flex: none; }
.bayar-grid .bayar-metode, .bayar-grid .bayar-ref { width: 148px; flex: none; }
.bayar-grid .bayar-ket { width: 48px; flex: none; text-align: right; white-space: nowrap; }
/* No. ref sejajar di kanan, bukan turun ke baris bawah. */
.bayar-baris2 { flex-wrap: nowrap; gap: 8px; align-items: center; }
.bayar-baris2.bisa-wrap { flex-wrap: wrap; gap: 6px; }
/* Satu sel untuk nominal + tombol cepat + keterangan, jadi grid dua kolomnya
   tidak pernah pecah walau keterangannya panjang. */
.bayar-sel { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bayar-sel .ket { color: var(--teks-3); font-size: 12px; line-height: 1.4; }
/* Pesan galat membentang penuh. Waktu disembunyikan ia hilang utuh — kalau
   dibuat dua sel, salah satunya tertinggal dan menggeser seluruh grid. */
.bayar-pesan { grid-column: 1 / -1; margin: 2px 0 0; }
.bayar-cepat-kecil { display: flex; gap: 4px; flex-wrap: wrap; }
.bayar-kotak { font-family: var(--mono); font-size: 42px; font-weight: 700; text-align: right; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--garis); line-height: 1.1; }
.bayar-kotak.kuning { background: #FFF200; color: #111; font-size: 52px; }
.bayar-kotak.hijau { background: #A6E9A0; color: #111; }
.bayar-kotak.hijau-tua { background: var(--hijau); color: #fff; }
.bayar-kotak.oranye { background: #FF9800; color: #111; }
/* Non-tunai melebihi total: bukan kembalian, tapi kesalahan yang harus dibetulkan kasir. */
.bayar-kotak.merah { background: #D92D20; color: #fff; }
@media (max-width: 900px) { .cari-filter { grid-template-columns: 90px 1fr; } .bayar-grid { grid-template-columns: 1fr; } .bayar-grid .lbl { text-align: left; }
  .bayar-baris2 { flex-wrap: wrap; } .bayar-grid .bayar-nom, .bayar-grid .bayar-metode, .bayar-grid .bayar-ref { width: 100%; } }

/* ---------- Indikator memuat ---------- */
.memuat { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 300; background: #111827; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; }
.memuat-putar { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
body.sedang-memuat { cursor: progress; }
body.sedang-memuat .kasir-input .kode { background-image: linear-gradient(90deg, transparent, rgba(15,157,88,.12), transparent); background-size: 200% 100%; animation: kilau 1s linear infinite; }
@keyframes kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kosong.memuat-teks-tabel::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--garis); border-top-color: var(--hijau); border-radius: 50%; animation: putar .7s linear infinite; margin-right: 8px; vertical-align: -2px; }

/* ---------- Ringkasan kasir (Sub Total / Potongan / Pajak / Biaya lain / Voucher) ---------- */
.ringkas-panel { padding: 8px 12px; }
.ringkas-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.ringkas-tabel td { padding: 3px 4px; vertical-align: middle; }
.ringkas-tabel td.lbl { width: 110px; text-align: right; color: var(--teks-2); white-space: nowrap; }
.ringkas-tabel .input { padding: 5px 7px; width: 86px; }
.ringkas-tabel .input.lebar { width: 150px; }
.ringkas-tabel td:last-child { text-align: right; width: 160px; }
.ringkas-tabel .nilai { font-family: var(--mono); font-weight: 700; font-size: 18px; text-align: right; color: var(--teks); }
.ringkas-tabel .nilai-kecil { font-family: var(--mono); font-weight: 600; text-align: right; padding-right: 12px; color: var(--teks-2); border: 1px solid var(--garis); border-radius: 4px; width: 60px; background: var(--latar-2, #f8fafc); }

/* Satuan bisa diganti langsung di grid */
.kasir-grid select.unit-inline { padding: 2px 4px; border: 1px solid var(--garis); border-radius: 4px; background: #fff; font: inherit; font-size: 12px; max-width: 105px; }
.kasir-grid tr.kunci td { background: #f1f5f9; }
.tombol.ppob { border-color: #1d4ed8; color: #1d4ed8; }
.tombol.ppob:hover { background: #dbeafe; }

/* Baris terpilih di jendela daftar (Cari Item / Pelanggan / PPOB): kontras jelas untuk navigasi panah */
.cari-tabel .tabel tbody tr.pilih td { background: var(--hijau-muda); }
.cari-tabel .tabel tbody tr.pilih td:first-child { box-shadow: inset 3px 0 0 var(--hijau); }
.cari-tabel .tabel tbody tr:hover td { background: #f3f4f6; }
.cari-tabel .tabel tbody tr.pilih:hover td { background: var(--hijau-muda); }
.cari-tabel .tabel thead th { position: sticky; top: 0; background: var(--latar-2, #f8fafc); z-index: 1; }
.tabel tbody tr.pilih td { background: var(--hijau-muda); }
.alur-transfer { margin: -4px 0 8px; }
tr.baris-selisih td { background: #fee2e2 !important; }

/* Status Print Service di statusbar */
.ps-status { font-size: 11.5px; white-space: nowrap; }
#ps-status { margin-left: auto; color: rgba(255,255,255,.85); } #ps-status.on { color: #bbf7d0; } #ps-status.warn { color: #fde68a; }
.statusbar .jam { margin-left: 0; }
/* Selesai kilat (tanpa popup) & jendela QRIS */
.selesai-kilat { position: fixed; right: 18px; bottom: 44px; z-index: 250; background: #111827; color: #fff; padding: 14px 22px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); text-align: center; min-width: 260px; cursor: pointer; animation: muncul .15s ease-out; }
.selesai-kilat .kembali { font-size: 40px; font-weight: 700; color: #86efac; line-height: 1.1; }
.selesai-kilat .kuning { color: #fde68a; }
@keyframes muncul { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.qris-jendela .qris-nominal { font-size: 28px; font-weight: 700; color: var(--hijau-tua); }
.qris-jendela .qris-gambar { width: 260px; height: 260px; max-width: 100%; display: block; margin: 8px auto; border: 1px solid var(--garis); border-radius: 8px; background: #fff; }
.qris-jendela .qris-status { margin-top: 8px; font-weight: 600; }

/* ---------- Navbar bawah untuk layar kecil ---------- */
.navbar-mobile { display: none; }
.lembar-latar { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 320; display: flex; align-items: flex-end; justify-content: center; }
.lembar { background: #fff; width: 100%; max-width: 560px; max-height: 82vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,.25); margin-bottom: 64px; }
.lembar-judul { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--garis); }
.lembar-judul .tutup { border: 0; background: var(--hijau-muda); color: var(--hijau-tua); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.lembar-isi { overflow: auto; padding: 6px 8px 14px; }
.lembar-grup { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teks-2); padding: 12px 10px 4px; }
.lembar-item { display: flex; align-items: center; gap: 14px; padding: 11px 10px; color: var(--teks); text-decoration: none; border-radius: 10px; font-size: 15px; }
.lembar-item:hover, .lembar-item:active { background: var(--hijau-muda); }
.lembar-item svg { width: 22px; height: 22px; color: var(--hijau); flex-shrink: 0; }
.lembar-item small { display: block; font-size: 12px; }
@media (max-width: 720px) {
  .topbar nav.tab-utama, .ribbon, #ribbon-toggle { display: none !important; }
  .topbar .kanan-bar .lencana:not(#tombol-cabang) { display: none; }
  .navbar-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 62px; background: #fff; border-top: 1px solid var(--garis); box-shadow: 0 -4px 16px rgba(0,0,0,.08); z-index: 310; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
  .navbar-mobile a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--teks-2); font-size: 11px; font-weight: 500; }
  .navbar-mobile a svg { width: 22px; height: 22px; }
  .navbar-mobile a.aktif { color: var(--hijau-tua); }
  .navbar-mobile a.tambah .bulat { width: 52px; height: 52px; border-radius: 50%; background: var(--hijau); color: #fff; font-size: 30px; line-height: 52px; text-align: center; margin-top: -26px; box-shadow: 0 6px 16px rgba(15,157,88,.4); }
  .isi { padding-bottom: 72px; }
  .statusbar { display: none; }
}

/* =====================================================================
 * Mode HP & tablet (≤ 720px) — dirapikan 12 Sep 2026
 *
 * Aturan umum: satu kolom, isian selebar layar, tabel lebar boleh digeser
 * kanan-kiri (bukan dipaksa muat), modal jadi lembar dari bawah, dan
 * pintasan keyboard disembunyikan (tidak ada gunanya di layar sentuh).
 * ===================================================================== */
.hanya-mobile { display: none !important; }
/* Ikon hapus baris kasir hanya muncul di HP setelah barisnya digeser. */
.kasir-grid td.k-no .hapus-geser { display: none; }

@media (max-width: 720px) {
  .hanya-mobile { display: inline-flex !important; }
  .tanpa-mobile { display: none !important; }

  /* Tata letak umum */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .isi { padding: 10px 10px 78px; }
  .panel-judul { flex-wrap: wrap; padding: 10px 12px; }
  .panel-judul .aksi { margin-left: 0; width: 100%; }
  .panel-judul .aksi .tombol { flex: 1; justify-content: center; }
  .kartu-stat { padding: 10px 12px; }
  .kartu-stat .nilai { font-size: 17px; }
  kbd { display: none !important; }

  /* Saringan (filter) */
  .filter { gap: 6px 8px; }
  .filter .field { flex: 1 1 46%; min-width: 0; margin: 0; }
  .filter .field .input, .filter .input, .filter select.input { min-width: 0; width: 100%; }
  .filter > .tombol, .filter > button { flex: 1 1 100%; padding: 10px; }
  .filter > .baris { width: 100%; }
  .filter > .baris .tombol { flex: 1; justify-content: center; }
  .baris-aksi-daftar { flex-wrap: wrap; gap: 6px; }
  .baris-aksi-daftar .tombol { flex: 1 1 auto; }

  /* Tabel: digeser, bukan diperas */
  .tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabel-bungkus > table { min-width: 640px; }
  .tabel th, .tabel td { padding: 8px 8px; }

  /* Modal jadi lembar dari bawah, tombolnya besar */
  .modal-latar { padding: 0; align-items: flex-end; }
  .modal, .modal.lebar, .modal.sempit, .modal.bayar-jendela { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .modal.cari-item { max-width: 100%; width: 100%; height: 92vh; }
  .modal-kaki { flex-wrap: wrap; gap: 6px; }
  .modal-kaki .tombol { flex: 1 1 45%; justify-content: center; padding: 11px 10px; }
  .modal-kaki .tombol.utama { flex-basis: 100%; }
  .cari-filter { grid-template-columns: 1fr; }
  .pel-form { grid-template-columns: 1fr; }

  /* ---------- Layar kasir ---------- */
  /* Di HP layarnya digulung ke bawah (bukan dipaksa satu layar penuh), supaya
     grid item tidak gepeng dan semua bagian tetap kebaca. */
  .isi.penuh { padding: 0; overflow: auto; }
  .kasir { display: flex; flex-direction: column; height: auto; min-height: 100%; padding: 8px 8px 12px; }
  .kasir-grid { min-height: 34vh; max-height: 50vh; }
  .layar-total { min-height: 64px; padding: 8px 14px; }
  .layar-total .angka { font-size: 34px; }
  .layar-total .ket { font-size: 11px; gap: 8px; flex-wrap: wrap; }
  .layar-total .item-terakhir { position: static; max-width: 100%; align-self: flex-start; }
  .kasir-input { flex-wrap: wrap; }
  .kasir-input .kode { flex: 1 1 100%; }
  .kasir-input #k-hint { display: none; }
  .kasir-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kasir-grid > table { min-width: 720px; }
  .kasir-kaki .form-kaki { grid-template-columns: 88px 1fr; }
  .kasir-kaki .tombol-baris { gap: 6px; }
  .ringkas-panel { width: 100%; }

  /* Baris item: geser ke kanan → ikon hapus, ketuk → detail item */
  /* transform tidak berlaku untuk <tr>, jadi tandanya: latar merah muda +
     garis merah di tepi kiri baris, plus ikon hapus menggantikan nomor. */
  .kasir-grid tbody tr.geser-hapus td, .kasir-grid .tabel tbody tr.geser-hapus td { background: #FEE2E2 !important; }
  .kasir-grid tbody tr.geser-hapus td:first-child { box-shadow: inset 5px 0 0 #dc2626; }
  .kasir-grid td.k-no { position: relative; }
  .kasir-grid td.k-no .hapus-geser { display: none; }
  .kasir-grid tr.geser-hapus td.k-no .no { display: none; }
  .kasir-grid tr.geser-hapus td.k-no .hapus-geser { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--merah, #dc2626); color: #fff; font-size: 16px; cursor: pointer; }

  /* Tombol aksi kasir: Daftar Pending · Pending · PPOB · Batal · BAYAR */
  .kasir-aksi { flex-wrap: wrap; gap: 6px; }
  .kasir-aksi .spasi { display: none; }
  .kasir-aksi .tombol { flex: 1 1 30%; justify-content: center; padding: 11px 8px; font-size: 13px; }
  .kasir-aksi #btn-dft-pending { order: 1; }
  .kasir-aksi #btn-pending { order: 2; }
  .kasir-aksi #btn-ppob-m { order: 3; }
  .kasir-aksi #btn-batal { order: 4; }
  .kasir-aksi #btn-bayar { order: 5; flex: 1 1 100%; font-size: 18px; padding: 14px; }
}

/* Layar sangat kecil (≤ 400px): dua kolom kartu jadi satu */
@media (max-width: 400px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .filter .field { flex: 1 1 100%; }
}

/* ============ Promo & voucher di layar kasir ============
   Ditaruh di bawah ringkasan supaya kasir melihat "kurang berapa lagi"
   tanpa harus memindahkan pandangan dari kolom total. */
.promo-strip { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.promo-baris { display: flex; justify-content: space-between; gap: 8px; align-items: center;
               padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35; }
.promo-baris.dapat { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.promo-baris.dapat b { white-space: nowrap; }
.promo-baris.kurang { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }

.voucher-info { font-size: 12.5px; padding: 5px 8px; border-radius: 6px; }
.voucher-info.ok { background: #dcfce7; color: #14532d; }
.voucher-info.galat { background: #fee2e2; color: #7f1d1d; }

@media (prefers-color-scheme: dark) {
  .promo-baris.dapat { background: #052e16; color: #bbf7d0; border-color: #166534; }
  .promo-baris.kurang { background: #422006; color: #fde68a; border-color: #854d0e; }
  .voucher-info.ok { background: #052e16; color: #bbf7d0; }
  .voucher-info.galat { background: #450a0a; color: #fecaca; }
}

/* Pilihan bank yang belum diisi padahal nominalnya sudah ada. Ditandai merah
   di tempat, bukan cuma lewat toast yang keburu hilang. */
.input.bayar-bank.galat { border-color: var(--merah); box-shadow: 0 0 0 2px rgba(220, 38, 38, .18); }


/* ==================================================================
   Pemberitahuan pesanan online (lonceng di topbar)
   ================================================================== */
.notif-bungkus{position:relative;display:inline-flex}
#notif-lonceng{border:0;cursor:pointer;position:relative;padding:5px 9px;line-height:0}
/* SVG di berkas ini tidak membawa width/height sendiri — ukurannya selalu
   datang dari CSS tempat ia dipasang. Tanpa baris ini loncengnya "ada" tapi
   tidak kelihatan sama sekali. */
#notif-lonceng svg{width:16px;height:16px;display:block}
#notif-lonceng.ada{animation:notif-goyang 1.1s ease-in-out 3}
@keyframes notif-goyang{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.notif-jumlah{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:#dc3545;color:#fff;font-size:.66rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--permukaan,#fff)}
/* `display:flex` di atas MENGALAHKAN aturan bawaan atribut hidden
   (`[hidden]{display:none}`), jadi lencananya tetap kelihatan walau sudah
   disembunyikan lewat JavaScript. Baris ini yang mengembalikannya. */
.notif-jumlah[hidden]{display:none}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:60vh;overflow:auto;
  background:var(--permukaan,#fff);border:1px solid var(--garis,#d8dbe0);border-radius:10px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.28);z-index:200}
.notif-panel-kepala{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--garis,#e5e7eb);
  font-weight:700;font-size:.85rem;position:sticky;top:0;background:inherit}
.notif-item{display:block;padding:10px 12px;border-bottom:1px solid var(--garis,#eee);text-decoration:none;color:inherit}
.notif-item:hover{background:rgba(0,0,0,.035)}
.notif-item b{display:block;font-size:.85rem}
.notif-item .ket{font-size:.76rem;opacity:.72;display:block;margin-top:2px}
.notif-item .waktu{font-size:.7rem;opacity:.55}
.notif-kosong{padding:26px 12px;text-align:center;font-size:.82rem;opacity:.6}
.notif-toast{position:fixed;right:16px;bottom:16px;z-index:9999;max-width:340px;
  background:#1e7e34;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px -6px rgba(0,0,0,.4);
  font-size:.86rem;animation:notif-masuk .25s ease-out}
.notif-toast b{display:block;margin-bottom:2px}
@keyframes notif-masuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:720px){ .notif-panel{position:fixed;left:8px;right:8px;width:auto;top:56px} }

/* ===== Pilih varian saat scan (satu barcode, beberapa warna) =====
   Barisnya dibuat TINGGI dan angkanya besar: kasir memilih sambil berdiri,
   sering tanpa melihat tetikus, dan yang dia cari pertama adalah angka
   pintasannya — bukan tulisan namanya. */
.daftar-varian { display: flex; flex-direction: column; gap: 6px; }
.pilihan-varian {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
  background: var(--panel); border: 1px solid var(--garis); border-radius: 10px;
  padding: 10px 12px; text-align: left; font: inherit; color: inherit;
}
.pilihan-varian:hover { border-color: var(--hijau); background: var(--hijau-muda); }
.pilihan-varian.sorot, .pilihan-varian:focus-visible {
  border-color: var(--hijau); box-shadow: 0 0 0 3px var(--hijau-muda); outline: none;
}
.pilihan-varian .nomor {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--garis-2); color: var(--teks-2); font-weight: 800; font-size: 14px;
}
.pilihan-varian.sorot .nomor { background: var(--hijau); color: #fff; }
.pilihan-varian .isi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pilihan-varian .isi b { font-size: 15px; }
.pilihan-varian .kanan { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }

/* Stok kosong tetap BISA dipilih — cuma ditandai. Melarangnya berarti kasir
   tidak bisa menjual barang yang stoknya memang belum sempat dicatat. */
.pilihan-varian.habis { background: #fcfcfd; }
.pilihan-varian.habis .isi b { color: var(--teks-2); }

/* ---------- Kotak kode ambil (layar Toko Online) ----------
   Isian dibuat besar dan berjarak: enam angka rapat adalah cara tercepat
   salah ketik, dan kasir mengetiknya sambil pembeli menunggu di depan meja. */
.kode-ambil-kotak{margin-bottom:12px}
.ka-baris{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 14px}
.ka-judul{font-weight:700}
.ka-isian{width:180px;font-size:1.5rem;letter-spacing:.16em;text-align:center;
  font-variant-numeric:tabular-nums;padding:6px 10px}

/* ---------- Halaman login: latar dari SSO ---------- */
.login-latar.berfoto { background: linear-gradient(160deg, rgba(4,40,24,.55) 0%, rgba(4,40,24,.25) 60%, rgba(4,40,24,.55) 100%), var(--latar-login) center / cover no-repeat, #0B7C45; }
.login-latar.berfoto .login-kotak { box-shadow: 0 30px 80px rgba(0,0,0,.35); }

/* ---------- Panel SOP & pengumuman (KANAN tengah, 30 Sep 2026) ----------
   Riwayat: kanan → kiri (23 Sep, disamakan dengan panel portal SSO) → kanan
   lagi (30 Sep, permintaan Abid: "standart sop dan pengumuman kiri ganti ke
   kanan"). Panel portal SSO juga sudah di kanan. */
.info-panel { position: fixed; right: 0; top: 50%; z-index: 60; width: min(340px, 92vw); max-height: 72vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--garis); border-right: 0; border-radius: 14px 0 0 14px; box-shadow: -10px 12px 34px rgba(16,24,40,.16);
  transform: translate(105%, -50%); transition: transform .28s cubic-bezier(.2,.9,.3,1); }
.info-panel.buka { transform: translate(0, -50%); }
.info-panel-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--garis-2);
  font-weight: 700; color: var(--hijau-tua); background: var(--hijau-muda); border-radius: 14px 0 0 0; }
.info-panel-judul .tutup { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--teks-2); cursor: pointer; padding: 0 4px; }
.info-panel-isi { overflow-y: auto; padding: 10px 14px 14px; }
.sop-daftar { margin: 0; padding-left: 20px; }
.sop-daftar li { padding: 5px 0; line-height: 1.4; }
.sop-daftar li + li { border-top: 1px dashed var(--garis-2); }
.sop-daftar li.penting { color: var(--merah); font-weight: 600; }
.info-sub { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-3); }
.info-umum { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 1px solid var(--garis-2); background: #fff; border-radius: 8px;
  padding: 7px 9px; margin-bottom: 6px; cursor: pointer; font: inherit; color: inherit; }
.info-umum:hover { border-color: var(--hijau); }
.info-umum b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titik-baru { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--merah); flex: 0 0 auto; }
.info-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 59; width: 26px; height: 64px; border: 1px solid var(--garis); border-right: 0;
  border-radius: 12px 0 0 12px; background: var(--hijau); color: #fff; cursor: pointer; box-shadow: -4px 6px 16px rgba(16,24,40,.18);
  display: grid; place-items: center; padding: 0; }
.info-tab span { font-size: 24px; line-height: 1; font-weight: 700; margin-left: -2px; }
.info-tab .titik-baru { position: absolute; top: 6px; left: 5px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--hijau); }
.info-tab:hover { width: 30px; }
.info-modal { max-width: 560px; }
.info-artikel + .info-artikel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--garis-2); }
.info-artikel h3 { font-size: 16px; margin: 6px 0 2px; }
.info-artikel p { margin: 8px 0 0; line-height: 1.5; }
@media print { .info-panel, .info-tab { display: none !important; } }
/* Papan serbaguna (30 Sep 2026): [Promo Berjalan] · [Pengumuman] · SOP.
   Sejak 30 Sep 2026, malam berupa HALAMAN di dalam papan (bukan lipatan), dengan
   tombol ‹ di judul untuk kembali. */
.info-panel.papan { width: min(360px, 92vw); height: min(78vh, 620px); max-height: 80vh; }  /* tinggi tetap: pindah halaman tidak membuat papan melompat */
.info-panel.papan .info-panel-judul { justify-content: flex-start; }
.papan-judul { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papan-balik { border: 0; background: rgba(255,255,255,.7); color: var(--hijau-tua); width: 30px; height: 30px; border-radius: 8px;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 0 3px; flex: 0 0 auto; }
.papan-balik:hover { background: #fff; }
.papan-isi-halaman { overflow-x: hidden; }
.papan-halaman.masuk-kanan { animation: papanKanan .22s ease-out; }
.papan-halaman.masuk-kiri { animation: papanKiri .22s ease-out; }
@keyframes papanKanan { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes papanKiri { from { transform: translateX(-36px); opacity: 0; } to { transform: none; opacity: 1; } }
.papan-menu { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--garis); border-radius: 12px; background: #fff;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; color: var(--teks); text-align: left; }
.papan-menu:hover { border-color: var(--hijau); background: #FAFDFB; }
.papan-menu-ikon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: 0 0 auto; }
.papan-menu-ikon.promo { background: var(--hijau-muda); color: var(--hijau-tua); }
.papan-menu-ikon.umum { background: var(--biru-muda); color: var(--biru); }
.papan-menu-teks, .papan-baris-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.papan-menu-teks small, .papan-baris-teks small { font-size: 11.5px; color: var(--teks-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papan-baris-teks b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.papan-jumlah { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--garis-2); color: var(--teks-2); font-size: 12px; text-align: center; }
.papan-menu[data-ke="promo"] .papan-jumlah { background: var(--hijau); color: #fff; }
.papan-menu .panah, .papan-baris .panah { font-style: normal; color: var(--teks-3); font-size: 20px; line-height: 1; }
.info-umum.papan-baris { padding: 8px 10px; }
.papan-kosong { padding: 4px 2px 8px; }
.papan-sop-judul { margin-top: 14px; }
.promo-rinci { font-size: 13px; line-height: 1.45; }
.promo-ket { margin: 0 0 6px; color: var(--teks-2); }
.promo-rinci-baris { display: grid; grid-template-columns: 62px 1fr; gap: 6px; padding: 3px 0; }
.promo-rinci-baris + .promo-rinci-baris { border-top: 1px dashed var(--garis-2); }
.promo-rinci-baris > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teks-3); padding-top: 2px; }

/* =====================================================================
 * Kasir di HP — 22 Sep 2026
 * 1) Konten diberi jarak dari navbar bawah (dulu tombol bawah tertutup
 *    karena .isi.penuh menghapus padding bawah).
 * 2) Tombol BAYAR melayang di atas navbar, menampilkan totalnya.
 * 3) Jendela Pembayaran dirapikan: lebih ringkas, di atas navbar.
 * ===================================================================== */
.bayar-mengambang-total { display: none; }
@media (max-width: 720px) {
  /* Jarak bawah dipasang di .kasir, BUKAN di .isi: .isi.penuh adalah kotak
     flex yang bisa digulung, dan padding bawah kotak flex seperti itu tidak
     ikut dihitung saat digulung — itu sebabnya versi 22 Sep pagi tombol
     Ambil / Daftar Pending masih tertutup tombol BAYAR. */
  .isi.penuh { display: block; }
  .isi.penuh > .kasir { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .kasir-aksi #btn-bayar { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 305; flex: none; width: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-radius: 14px; font-size: 17px; letter-spacing: .04em;
    box-shadow: 0 10px 24px -6px rgba(15,157,88,.55), 0 2px 6px rgba(0,0,0,.12); }
  .kasir-aksi #btn-bayar:active { transform: scale(.98); }
  .bayar-mengambang-total { display: inline; font-family: var(--mono); font-size: 19px; font-weight: 700; }
  /* Modal harus di atas navbar bawah & tombol melayang */
  .modal-latar { z-index: 330; }
  .modal.bayar-jendela .modal-isi { padding: 10px 12px; }
  .bayar-grid { grid-template-columns: 92px 1fr; gap: 6px 8px; }
  .bayar-grid .lbl, .bayar-grid .lbl.besar { text-align: right; font-size: 13px; }
  .bayar-grid .bayar-nom { font-size: 17px; padding: 9px 10px; }
  .bayar-grid .bayar-ket { width: auto; text-align: left; }
  .bayar-kotak { font-size: 24px; padding: 6px 10px; }
  .bayar-kotak.kuning { font-size: 30px; }
  .bayar-cepat-kecil .tombol { padding: 7px 9px; font-size: 12px; }
  .bayar-pintasan, .bayar-grid .bayar-ket { display: none; }
  .modal.bayar-jendela .modal-kaki { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .bayar-grid { grid-template-columns: 1fr; } .bayar-grid .lbl, .bayar-grid .lbl.besar { text-align: left; } }

/* =====================================================================
 * HP — tombol jendela & tombol daftar (22 Sep 2026, sore)
 * ===================================================================== */
@media (max-width: 720px) {
  /* Kaki jendela: baris 1 = ← 1/1 →, baris 2 = tombol biasa + Tutup,
     baris 3 = tombol utama selebar layar. */
  .modal-kaki { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .modal-kaki .tombol { flex: 1 1 30%; min-width: 0; padding: 10px 8px; font-size: 13px; order: 2; }
  .modal-kaki .tombol.kaki-hal { order: 1; flex: 0 0 52px; padding: 8px 0; font-size: 16px; }
  .modal-kaki .tombol.kaki-hal:has(span) { flex: 1 1 auto; font-size: 13px; background: var(--latar-2, #f8fafc); pointer-events: none; }
  .modal-kaki .tombol.kaki-tutup { order: 3; }
  .modal-kaki .tombol.utama { order: 4; flex: 1 1 100%; padding: 12px 10px; font-size: 15px; }

  /* Saringan di jendela cari: label kecil rata kiri di atas isian */
  .cari-filter { gap: 4px 6px; }
  .cari-filter label { text-align: left; font-size: 12px; margin-top: 2px; }
  .cari-filter .cari-total { text-align: left; font-size: 12px; font-weight: 500; }
  .modal.cari-item .modal-isi { padding: 10px 10px 6px; }

  /* Tombol di bilah saringan halaman daftar: berbagi baris, bukan satu
     tombol satu baris penuh. */
  .filter > .tombol, .filter > button, .filter > a.tombol { flex: 1 1 30%; margin-left: 0 !important; padding: 10px 8px; justify-content: center; }
  .filter > .tombol.utama { flex-basis: 100%; }

  /* Paginasi daftar halaman */
  .paginasi { justify-content: space-between; padding: 8px 4px; }
  .paginasi .tombol { padding: 8px 16px; font-size: 15px; }

}

/* ---------- Kartu member (Daftar Pelanggan) — 22 Sep 2026 ---------- */
.kartu-member-daftar { display: flex; flex-wrap: wrap; gap: 12px; }
.kartu-member-bungkus { width: 300px; max-width: 100%; }
.kartu-member { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 12px; overflow: hidden;
  background: #0f9d58 center / cover no-repeat; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); }
.kartu-member.polos { background: linear-gradient(135deg, #0f9d58, #0b7a44 60%, #075c33); }
.kartu-member .km-merek { position: absolute; left: 7cqw; top: 7cqw; color: #fff; font-weight: 700; font-size: 5.5cqw; letter-spacing: .02em; }
.kartu-member .km-nomor { position: absolute; font-family: var(--mono); font-weight: 700; white-space: nowrap; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.kartu-member-bungkus .km-ket { margin-top: 5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------- Tab status Penjualan Toko Online — 22 Sep 2026 ---------- */
.tab-status-online { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; margin-bottom: 8px; }
.tab-status-online a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tab-status-online a.redup { opacity: .6; }
.tab-status-online .chip { font-size: 11px; padding: 1px 7px; }

/* ---------- Tukar barang di kasir — 22 Sep 2026 ---------- */
.tukar-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin: 0 0 6px; }
/* Pita tukar berdiri di atas .kasir (keduanya anak .isi.penuh yang flex kolom):
   .kasir diberi flex:1 + min-height:0 supaya mengecil memberi ruang pita,
   bukan meluber ke bawah layar. */
.isi.penuh > .tukar-banner { flex: none; margin: 8px 12px 0; }
.isi.penuh > .kasir { flex: 1 1 auto; min-height: 0; }
.bayar-nom[data-tipe=TUKAR] { background: #FFF7E0; font-weight: 700; }
.kartu-member.polos .km-nomor { font-size: 6.5cqw !important; left: 7cqw !important; bottom: 9cqw !important; }

/* ==================================================================
 * APLIKASI ANDROID — TABLET (html.app-tablet, dipasang jembatan.js dari
 * aplikasi www/app_pos). 30 Sep 2026.
 *
 * Laporan Abid: "saat di tab tabel tempat barang yang di scan jadi kecil".
 * Kasir PC dirancang untuk layar ≥900px tingginya; tablet mendatar (Redmi
 * Pad SE) cuma ±750px, dan kepala + kaki kasir memakan hampir semuanya —
 * tabel barang tinggal ±190px (5 baris). Di tablet: bilah bawah pintasan
 * F-key disembunyikan (layar sentuh), label <kbd> di tombol disembunyikan
 * (tombol muat satu baris), kepala dijadikan 2 baris, isian kaki & ringkasan
 * dipadatkan. Browser & aplikasi PC tidak terpengaruh.
 * ================================================================== */
html.app-tablet .statusbar { display: none; }
/* Label pintasan (F9, F12, …) di tombol disembunyikan di layar sentuh — KECUALI
   keyboard fisik tersambung ke tablet (Bluetooth / USB, termasuk scanner
   barcode): jembatan.js memasang html.app-keyboard dan labelnya muncul lagi,
   karena pintasannya memang bisa dipakai (30 Sep 2026, malam). */
html.app-tablet:not(.app-keyboard) .tombol kbd { display: none; }
html.app-tablet .kasir { gap: 6px; padding: 8px 10px; }
html.app-tablet .kasir-kepala { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 8px; }
html.app-tablet .kasir-kepala > .panel { padding: 6px 10px !important; }
html.app-tablet .kasir-kepala .form-kepala { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px 6px; font-size: 12.5px; }
html.app-tablet .kasir-kepala .form-kepala .lbl, html.app-tablet .kasir-kaki .form-kaki .lbl { white-space: nowrap; }
html.app-tablet .kasir-kepala .form-kepala .baris { gap: 4px; min-width: 0; }
html.app-tablet .kasir-kepala .form-kepala .input { min-width: 0; }
html.app-tablet #k-nomor, html.app-tablet #k-tanggal { width: 100% !important; }
html.app-tablet .layar-total { min-height: 0; padding: 6px 16px; }
html.app-tablet .layar-total .angka { font-size: 44px; }
html.app-tablet .layar-total .ket { margin-top: 3px; }
html.app-tablet .layar-total .item-terakhir { top: 6px; }
html.app-tablet .kasir-input .qty, html.app-tablet .kasir-input .kode { padding: 6px 8px; }
html.app-tablet .kasir-grid { min-height: 200px; }
html.app-tablet .kasir-kaki { grid-template-columns: minmax(0, 1fr) 470px; gap: 8px; }
html.app-tablet .kasir-kaki .tombol-baris { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px; }
html.app-tablet .kasir-kaki .tombol-baris .tombol { white-space: nowrap; padding: 7px 11px; }
html.app-tablet .kasir-kaki .form-kaki { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 5px 6px; }
html.app-tablet .ringkas-panel { padding: 4px 10px; }
html.app-tablet .ringkas-tabel td { padding: 2px 4px; white-space: nowrap; }
html.app-tablet .ringkas-tabel td.lbl { width: 96px; }
html.app-tablet .ringkas-tabel .input { padding: 3px 6px; width: 72px; }
html.app-tablet .ringkas-tabel .input.lebar { width: 140px; }
html.app-tablet .kasir-aksi .tombol { padding: 8px 14px; }

/* Geser-hapus baris kasir di TABLET & layar sentuh lain (30 Sep 2026).
   Dulu hanya di HP (≤720px). Permintaan Abid: "kalau aku geser ke kanan
   nanti akan muncul icon hapus di kiri". Geser baris ke kanan → baris merah
   muda + ikon tong sampah menggantikan nomor; ketuk ikonnya = hapus. */
html.app-tablet .kasir-grid td.k-no { position: relative; }
html.app-tablet .kasir-grid .tabel tbody tr.geser-hapus td { background: #FEE2E2 !important; }
html.app-tablet .kasir-grid .tabel tbody tr.geser-hapus td:first-child { box-shadow: inset 5px 0 0 #dc2626; }
html.app-tablet .kasir-grid tr.geser-hapus td.k-no .no { display: none; }
html.app-tablet .kasir-grid tr.geser-hapus td.k-no .hapus-geser { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--merah, #dc2626); color: #fff; font-size: 16px; cursor: pointer; }
@media (hover: none) and (pointer: coarse) {
  .kasir-grid td.k-no { position: relative; }
  .kasir-grid .tabel tbody tr.geser-hapus td { background: #FEE2E2 !important; }
  .kasir-grid .tabel tbody tr.geser-hapus td:first-child { box-shadow: inset 5px 0 0 #dc2626; }
  .kasir-grid tr.geser-hapus td.k-no .no { display: none; }
  .kasir-grid tr.geser-hapus td.k-no .hapus-geser { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--merah, #dc2626); color: #fff; font-size: 16px; cursor: pointer; }
}

/* ---------- Stok lokasi internal di Cari Item / Daftar Item (30 Sep 2026) ---------- */
.stok-lok-sel { white-space: nowrap; }
.stok-lok { display: inline-block; padding: 1px 6px; margin: 1px 3px 1px 0; border-radius: 6px; background: var(--garis-2); font-size: 11.5px; color: var(--teks-2); }
.stok-lok b { color: var(--teks); }
.stok-lok.aktif { background: var(--hijau-muda); color: var(--hijau-tua); box-shadow: inset 0 0 0 1px var(--hijau); }
.stok-lok.habis b { color: var(--merah); }
.ci-lain { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #F8FAFB; border: 1px dashed var(--garis); }
tr.stok-sub td { font-size: 12.5px; color: var(--teks-2); background: #FAFCFB; }
/* Item Transfer Internal: kolom "Dipindahkan oleh" dikunci ke akun login. */
.kunci-user { display: flex; align-items: center; gap: 4px; white-space: nowrap; background: #F3F5F7; color: var(--teks); cursor: not-allowed; min-width: 180px; }