/* Layar kasir: layar penuh, dua kolom, tombol besar untuk layar sentuh. */
.kasir-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.kasir-atas { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--kartu); border-bottom: 1px solid var(--garis); }
.kasir-atas .spasi { flex: 1; }
.logo-kecil .logo-tanda { width: 30px; height: 30px; }
.kasir-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kasir { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); min-height: 0; }
.kasir-kiri { display: flex; flex-direction: column; padding: 14px; gap: 10px; min-height: 0; }
.kasir-kanan { display: flex; flex-direction: column; background: var(--kartu); border-left: 1px solid var(--garis); min-height: 0; }

.cari-besar { display: flex; align-items: center; gap: 10px; background: var(--kartu); border: 2px solid var(--merek); border-radius: 10px; padding: 6px 10px; }
.cari-besar .ikon { color: var(--merek); width: 22px; height: 22px; }
.cari-besar input { border: 0; outline: 0; font-size: 18px; padding: 8px 4px; background: transparent; }
.cari-besar input:focus { outline: 0; }
#cari { flex: 1; }
#qty-cepat { width: 70px; text-align: center; border-left: 1px solid var(--garis); border-radius: 0; }

.hasil-cari { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; }
.kartu-produk { background: var(--kartu); border: 1px solid var(--garis); border-radius: 10px; padding: 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.kartu-produk:hover, .kartu-produk.pilih { border-color: var(--merek); box-shadow: 0 0 0 2px var(--merek-muda); }
.kartu-produk img, .kartu-produk .tanpa-foto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; background: var(--latar); display: grid; place-items: center; color: var(--teks-3); }
.kartu-produk .nama { font-weight: 600; font-size: 13px; line-height: 1.3; }
.kartu-produk .harga { color: var(--merek); font-weight: 700; }
.petunjuk { display: flex; flex-wrap: wrap; gap: 12px; }
kbd { background: var(--latar); border: 1px solid var(--garis); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; }

.pelanggan-baris { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--garis); }
.keranjang { flex: 1; overflow-y: auto; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--garis); }
.item .nama { font-weight: 600; }
.item .rinci { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--teks-2); }
.item .jumlah { text-align: right; font-weight: 700; }
.qty-kontrol { display: inline-flex; align-items: center; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; }
.qty-kontrol button { border: 0; background: var(--latar); width: 30px; height: 30px; font-size: 16px; cursor: pointer; color: var(--teks); }
.qty-kontrol input { width: 56px; border: 0; text-align: center; padding: 4px; border-radius: 0; }
.item select { width: auto; padding: 4px 6px; }
.item .hapus { border: 0; background: none; color: var(--bahaya); cursor: pointer; font-size: 13px; }
.item .coret { text-decoration: line-through; color: var(--teks-3); }
.item.kurang { background: var(--peringatan-latar); }

.ringkasan { padding: 10px 14px; border-top: 1px solid var(--garis); }
.baris-r { display: flex; justify-content: space-between; padding: 2px 0; }
.baris-r.total { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
/* flex, bukan grid: jumlah tombol berubah (Diskon nota hanya untuk yang berizin). BAYAR mengisi sisa ruang. */
.aksi-kasir { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--garis); }
.tombol-bayar { font-size: 20px; padding: 14px; justify-content: center; flex: 1 1 160px; }

.dialog { border: 0; border-radius: 14px; padding: 22px; width: min(600px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.3); background: var(--kartu); color: var(--teks); }
.dialog::backdrop { background: rgba(15, 23, 42, .55); }
.total-bayar { display: flex; justify-content: space-between; align-items: baseline; font-size: 28px; font-weight: 800; margin: 6px 0 12px; }
.baris-bayar { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 150px) 32px; gap: 8px; margin-bottom: 8px; align-items: center; }
.baris-bayar input { font-size: 18px; min-width: 0; }
.baris-bayar input.ref { font-size: 14px; }
.baris-bayar .tombol-teks { font-size: 20px; padding: 0; }
.uang-cepat { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.aksi-dialog { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.angka-raksasa { font-size: 48px; font-weight: 800; color: var(--merek); letter-spacing: -.02em; }
.daftar-pilih { max-height: 50vh; overflow-y: auto; margin-top: 10px; }
.daftar-pilih button { display: block; width: 100%; text-align: left; padding: 10px; border: 0; border-bottom: 1px solid var(--garis); background: none; cursor: pointer; font: inherit; color: inherit; }
.daftar-pilih button:hover { background: var(--latar); }

@media (max-width: 900px) {
  .kasir-body { height: auto; overflow: auto; }
  .kasir { grid-template-columns: 1fr; }
  .kasir-kanan { border-left: 0; border-top: 1px solid var(--garis); }
  .hasil-cari { max-height: 40vh; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .baris-bayar { grid-template-columns: 1fr 1fr; }
  .kasir-info { display: none; }
  .kasir-atas { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .kasir-atas .lencana.mono { display: none; }
  .kasir-atas .tombol { padding: 6px 10px; }
  .petunjuk { display: none; }
  .aksi-kasir > .tombol { flex: 1 1 0; }
  .aksi-kasir .tombol-bayar { flex-basis: 100%; }
  .kasir-kiri { padding: 10px; }
  .cari-besar input { font-size: 16px; } /* 16px: iOS tidak memperbesar layar saat fokus */
}

/* nota luring */
.daftar-pilih .baris-luring { padding: 10px; border-bottom: 1px solid var(--garis); }
.daftar-pilih .baris-luring button { display: inline-block; width: auto; padding: 4px 8px; border: 0; margin-right: 6px; }
#status-luring { cursor: pointer; }