/* ============ POS PGK — gaya utama ============ */
:root {
  --teal: #0F7173;
  --teal-gelap: #0B5456;
  --teal-pekat: #083E40;
  --merah: #DF3B57;
  --oranye: #EF8354;
  --lime: #C5D86D;
  --kanvas: #F4F6F7;
  --kartu: #FFFFFF;
  --tinta: #22333B;
  --tinta-muda: #6B7C85;
  --garis: #E3E9EC;
  --bayang: 0 1px 3px rgba(11, 84, 86, .08), 0 4px 14px rgba(11, 84, 86, .06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* elemen ber-atribut hidden harus benar-benar tersembunyi, walau punya display sendiri */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--kanvas);
  color: var(--tinta);
  font-size: 14px;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; font-size: 14px; }

#bingkai { display: flex; height: 100vh; }

/* ============ SIDEBAR ============ */
#sisi {
  width: 216px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--teal-gelap) 0%, var(--teal-pekat) 100%);
  color: #DDEBEC;
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
}
.sisi-merek { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.sisi-logo {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--lime), #9FBF3B);
  color: var(--teal-pekat); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.sisi-nama { font-weight: 700; font-size: 16px; letter-spacing: .5px; color: #fff; }
.sisi-ver { font-size: 11px; opacity: .65; }

#menu { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border-radius: 9px;
  color: #C7DCDD; font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background .15s;
}
.menu-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.menu-item:hover:not(:disabled) { background: rgba(255,255,255,.08); color: #fff; }
.menu-item.aktif { background: var(--lime); color: var(--teal-pekat); }

/* ============ AREA UTAMA ============ */
#utama { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#atas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: var(--kartu); border-bottom: 1px solid var(--garis);
}
#atas-judul { font-size: 19px; font-weight: 700; }
#atas-usaha { font-size: 12px; color: var(--tinta-muda); }
#atas-jam { font-size: 13px; font-weight: 600; color: var(--teal); text-align: right; }

.lihat { display: none; flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; }
.lihat.aktif { display: block; }
#lihat-kasir.aktif { display: flex; gap: 18px; overflow: hidden; }

/* ============ KASIR: KIRI ============ */
.kasir-kiri { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cari-baris { margin-bottom: 12px; }
.cari-kotak {
  display: flex; align-items: center; gap: 10px;
  background: var(--kartu); border: 1.5px solid var(--garis); border-radius: 11px;
  padding: 0 14px; box-shadow: var(--bayang);
}
.cari-kotak svg { width: 17px; height: 17px; fill: none; stroke: var(--tinta-muda); stroke-width: 2; stroke-linecap: round; }
.cari-kotak input { flex: 1; border: none; outline: none; padding: 12px 0; font-size: 14.5px; background: transparent; }
.cari-kotak:focus-within { border-color: var(--teal); }

.chip-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  padding: 7px 15px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--kartu); color: var(--tinta-muda); border: 1.5px solid var(--garis);
  transition: all .15s;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.aktif { background: var(--teal); border-color: var(--teal); color: #fff; }

.grid-produk {
  flex: 1; overflow-y: auto; padding-bottom: 8px; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px;
}
.p-kartu {
  background: var(--kartu); border-radius: 13px; padding: 12px;
  box-shadow: var(--bayang); border: 1.5px solid transparent;
  text-align: left; display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s, border-color .12s;
}
.p-kartu:hover { transform: translateY(-2px); border-color: var(--teal); }
.p-kartu:active { transform: scale(.97); }
.p-ikon {
  width: 100%; height: 58px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: #fff; letter-spacing: .5px;
}
.p-nama { font-weight: 600; font-size: 13px; line-height: 1.3; min-height: 34px; }
.p-bawah { display: flex; align-items: center; justify-content: space-between; }
.p-harga { font-weight: 700; font-size: 13.5px; color: var(--teal); }
.p-stok { font-size: 11px; color: var(--tinta-muda); }
.p-stok.tipis { color: var(--merah); font-weight: 700; }
.p-kartu.habis { opacity: .45; }
.p-kartu.habis:hover { transform: none; border-color: transparent; }

/* ============ KASIR: KERANJANG ============ */
.kasir-kanan {
  width: 340px; flex-shrink: 0;
  background: var(--kartu); border-radius: 15px; box-shadow: var(--bayang);
  display: flex; flex-direction: column; overflow: hidden;
}
.krj-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--garis);
  font-weight: 700; font-size: 15px;
}
.krj-daftar { flex: 1; overflow-y: auto; padding: 8px 12px; }
.krj-kosong { text-align: center; color: var(--tinta-muda); padding: 40px 10px; font-size: 13px; }
.krj-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 9px 6px; border-bottom: 1px dashed var(--garis);
}
.krj-nama { font-weight: 600; font-size: 13px; }
.krj-sub { font-weight: 700; font-size: 13px; text-align: right; align-self: center; }
.krj-kendali { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; }
.krj-btn {
  width: 24px; height: 24px; border-radius: 7px; font-weight: 700; font-size: 14px;
  background: var(--kanvas); color: var(--teal); border: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: center;
}
.krj-btn:hover { background: var(--teal); color: #fff; }
.krj-btn.hapus { color: var(--merah); margin-left: auto; }
.krj-btn.hapus:hover { background: var(--merah); color: #fff; }
.krj-qty { font-weight: 700; min-width: 20px; text-align: center; }
.krj-satuan { font-size: 11.5px; color: var(--tinta-muda); }

.krj-ringkas { border-top: 1px solid var(--garis); padding: 12px 16px 16px; }
.krj-baris {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0; font-size: 13.5px; color: var(--tinta-muda);
}
.krj-baris b { color: var(--tinta); }
#krj-diskon {
  width: 110px; text-align: right; padding: 5px 9px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none;
}
#krj-diskon:focus { border-color: var(--teal); }
.krj-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 12px; font-weight: 700;
}
.krj-total span { font-size: 13px; letter-spacing: 1px; }
.krj-total b { font-size: 25px; color: var(--teal-gelap); }

.tombol-besar {
  width: 100%; padding: 14px; border-radius: 11px;
  background: linear-gradient(135deg, var(--teal), var(--teal-gelap));
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1.5px;
  box-shadow: 0 4px 14px rgba(15, 113, 115, .35);
  transition: transform .12s, opacity .15s;
}
.tombol-besar:hover:not(:disabled) { transform: translateY(-1px); }
.tombol-besar:disabled { opacity: .35; cursor: default; box-shadow: none; }

.tombol-isi {
  padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: 13px;
  background: var(--teal); color: #fff;
}
.tombol-isi:hover { background: var(--teal-gelap); }
.tombol-teks { color: var(--tinta-muda); font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 8px; }
.tombol-teks:hover { color: var(--merah); background: var(--kanvas); }

/* ============ KARTU & TABEL ============ */
.kartu {
  background: var(--kartu); border-radius: 15px; box-shadow: var(--bayang);
  overflow: hidden; margin-bottom: 18px;
}
.kartu.sempit { max-width: 560px; }
.kartu-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--garis);
  font-weight: 700; font-size: 15px;
}
.kartu-kepala input[type="date"] {
  padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta);
}
.tabel-bungkus { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  text-align: left; padding: 11px 20px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--tinta-muda); background: #FAFBFC;
  border-bottom: 1px solid var(--garis);
}
.tabel td { padding: 11px 20px; border-bottom: 1px solid var(--garis); }
.tabel tr:last-child td { border-bottom: none; }
.tabel tr:hover td { background: #F6FAF9; }
.tabel .ka { text-align: right; }
.tabel-aksi { display: flex; gap: 6px; justify-content: flex-end; }
.mini-btn {
  padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600;
  background: var(--kanvas); color: var(--teal); border: 1px solid var(--garis);
}
.mini-btn:hover { background: var(--teal); color: #fff; }
.mini-btn.merah { color: var(--merah); }
.mini-btn.merah:hover { background: var(--merah); color: #fff; }
.tag-metode {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; background: #E7F0F6; color: var(--teal-gelap);
}

/* ============ LAPORAN ============ */
.stat-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-kartu {
  border-radius: 14px; padding: 16px 18px; color: #fff;
  box-shadow: var(--bayang);
}
.stat-kartu .s-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.stat-kartu .s-nilai { font-size: 23px; font-weight: 800; margin-top: 5px; }

/* ============ LAPORAN: PERIODE & GRAFIK ============ */
.periode-baris {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 15px;
}
.periode-baris .chip-baris { margin-bottom: 0; }
.periode-kanan { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-muda); }
.periode-kanan input[type="date"] {
  padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px;
  outline: none; color: var(--tinta); background: var(--kartu);
}
.tombol-isi.kecil { padding: 8px 14px; font-size: 12.5px; }
.lap-2kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.grafik-bungkus { padding: 14px 18px 18px; overflow-x: auto; }
.grafik-bungkus svg { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: var(--tinta-muda); }
.leg::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; background: var(--c); margin-right: 6px;
}
.grafik-kosong { text-align: center; color: var(--tinta-muda); padding: 34px 10px; font-size: 13px; }
.tabel-tinggi { max-height: 330px; overflow-y: auto; }

/* ============ FORM ============ */
.form-isi { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; }
.form-isi label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
.form-isi input {
  padding: 10px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 14px; color: var(--tinta);
}
.form-isi input:focus { border-color: var(--teal); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-kanan { display: flex; justify-content: flex-end; }
.form-isi select {
  padding: 10px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 14px; color: var(--tinta); background: #fff;
}
.form-isi select:focus { border-color: var(--teal); }
.form-isi input:disabled { background: var(--kanvas); color: var(--tinta-muda); font-weight: 700; }
.cek { flex-direction: row !important; align-items: center; gap: 8px !important; }
.cek input { width: 16px; height: 16px; accent-color: var(--teal); }
.kepala-kanan { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.kepala-kanan b { color: var(--teal-gelap); }
.kartu-kepala input[type="month"] {
  padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta);
}

/* ============ MODAL ============ */
.modal-latar {
  position: fixed; inset: 0; background: rgba(8, 62, 64, .5);
  display: none; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(2px);
}
.modal-latar.buka { display: flex; }
.modal {
  background: var(--kartu); border-radius: 17px; width: 560px; max-width: 94vw;
  max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 20px 60px rgba(8, 62, 64, .35);
  animation: modalMasuk .18s ease;
}
.modal-xl { width: 1000px; }
.modal-penuh { width: 1560px; max-width: 97vw; }
@keyframes modalMasuk { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-kepala { padding: 18px 22px 4px; font-size: 17px; font-weight: 700; }
.modal-kaki { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 18px 18px; }

.bayar-total {
  margin: 12px 22px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal), var(--teal-gelap)); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.bayar-total b { font-size: 23px; }
.bayar-metode { display: flex; gap: 8px; padding: 2px 22px 12px; }
.metode {
  flex: 1; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13px;
  border: 1.5px solid var(--garis); color: var(--tinta-muda); background: var(--kartu);
}
.metode.aktif { border-color: var(--teal); background: #E9F4F2; color: var(--teal-gelap); }
#bayar-tunai-area { padding: 0 22px; }
.bayar-label { font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
#bayar-uang {
  width: 100%; margin-top: 5px; padding: 12px 14px; font-size: 19px; font-weight: 700;
  text-align: right; border: 1.5px solid var(--garis); border-radius: 10px; outline: none;
}
#bayar-uang:focus { border-color: var(--teal); }
.bayar-cepat { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.cepat {
  padding: 7px 13px; border-radius: 8px; font-weight: 700; font-size: 12.5px;
  background: var(--kanvas); border: 1px solid var(--garis); color: var(--teal-gelap);
}
.cepat:hover { background: var(--teal); color: #fff; }
.bayar-kembali {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding: 11px 15px; border-radius: 10px; background: var(--kanvas);
  font-weight: 600; color: var(--tinta-muda);
}
.bayar-kembali b { font-size: 19px; color: var(--teal-gelap); }
.bayar-kembali.kurang b { color: var(--merah); }

/* ============ STRUK ============ */
.modal-struk { width: 340px; }
#area-struk {
  font-family: "Consolas", "Courier New", monospace; font-size: 12px; line-height: 1.5;
  background: #fff; padding: 20px 18px 8px; color: #111;
}
.struk-tengah { text-align: center; }
.struk-judul { font-size: 14px; font-weight: 700; }
.struk-garis { border-top: 1px dashed #999; margin: 7px 0; }
.struk-baris { display: flex; justify-content: space-between; gap: 10px; }
.struk-total { font-weight: 700; font-size: 13px; }

@media print {
  body > #bingkai, .modal-kaki, #modal-bayar, #modal-produk { display: none !important; }
  body { overflow: visible; background: #fff; }
  .modal-latar#modal-struk { position: static; display: block !important; background: none; backdrop-filter: none; }
  .modal-struk { width: 80mm; max-width: 80mm; box-shadow: none; border-radius: 0; margin: 0; max-height: none; }
  #area-struk { padding: 0; }
}

/* ============ LAYAR KUNCI (login PIN) ============ */
#layar-kunci {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, var(--teal-gelap), var(--teal-pekat));
  display: flex; align-items: center; justify-content: center;
}
#layar-kunci[hidden] { display: none; }
.kunci-kotak {
  background: var(--kartu); border-radius: 20px; padding: 34px 38px;
  width: 360px; max-width: 92vw; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.kunci-logo {
  width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--lime), #9FBF3B);
  color: var(--teal-pekat); font-weight: 800; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
}
.kunci-judul { font-size: 21px; font-weight: 800; letter-spacing: 1px; }
.kunci-sub { font-size: 12.5px; color: var(--tinta-muda); margin: 4px 0 16px; }
.kunci-daftar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.kunci-orang {
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  border: 1.5px solid var(--garis); color: var(--tinta-muda); background: var(--kartu);
}
.kunci-orang.aktif { border-color: var(--teal); background: #E9F4F2; color: var(--teal-gelap); }
#kunci-pin {
  width: 100%; padding: 12px; font-size: 22px; text-align: center; letter-spacing: 8px;
  border: 1.5px solid var(--garis); border-radius: 11px; outline: none; margin-bottom: 8px;
}
#kunci-pin:focus { border-color: var(--teal); }
.kunci-galat { min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--merah); margin-bottom: 6px; }
.kunci-goyang { animation: goyang .35s; }
@keyframes goyang { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ============ SESI (pengguna aktif) ============ */
#sesi-info {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-top: 6px; border-radius: 10px;
  background: rgba(255,255,255,.07);
}
.sesi-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--oranye); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sesi-teks { flex: 1; min-width: 0; }
#sesi-nama { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sesi-peran { font-size: 10.5px; opacity: .65; text-transform: capitalize; }
#btn-keluar { color: #C7DCDD; padding: 4px; border-radius: 6px; }
#btn-keluar:hover { background: rgba(255,255,255,.12); color: #fff; }
#btn-keluar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ============ KERANJANG: ALAT ============ */
.krj-alat { display: flex; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--garis); }
.alat-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--kanvas); color: var(--teal-gelap); border: 1px solid var(--garis);
}
.alat-btn:hover { border-color: var(--teal); }
.alat-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#btn-pilih-pelanggan { flex: 1; min-width: 0; }
#btn-pilih-pelanggan span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lencana-mini {
  background: var(--teal); color: #fff; border-radius: 20px;
  font-size: 10px; padding: 1px 6px; font-weight: 800;
}
#krj-catatan {
  width: 150px; text-align: right; padding: 5px 9px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none; font-size: 12.5px;
}
#krj-catatan:focus { border-color: var(--teal); }
.krj-item-catatan { grid-column: 1 / -1; }
.krj-item-catatan input {
  width: 100%; padding: 5px 9px; font-size: 12px;
  border: 1.5px dashed var(--garis); border-radius: 7px; outline: none; color: var(--tinta-muda);
}
.krj-item-catatan input:focus { border-color: var(--teal); }
.krj-btn.nota-btn { font-size: 11px; width: auto; padding: 0 7px; }

/* ============ STATUS TRANSAKSI ============ */
.tag-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.tag-status.selesai { background: #E3F2E8; color: #2C6A4A; }
.tag-status.void { background: #F1F2F4; color: #6B7C85; text-decoration: line-through; }
.tag-status.refund { background: #FBE5E9; color: var(--merah); }
tr.baris-batal td { opacity: .55; }
.merah-isi { background: var(--merah) !important; }
.merah-isi:hover { background: #C22F49 !important; }

/* ============ DAFTAR PILIHAN (varian / bill / pelanggan) ============ */
.varian-daftar, .bill-daftar, .plg-pilih-daftar {
  padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 7px;
  max-height: 320px; overflow-y: auto;
}
.pilih-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1.5px solid var(--garis); border-radius: 11px;
  font-size: 13.5px; font-weight: 600; text-align: left; width: 100%;
  background: var(--kartu); transition: border-color .12s;
}
.pilih-baris:hover { border-color: var(--teal); }
.pilih-baris .kanan { color: var(--teal); font-weight: 700; white-space: nowrap; }
.pilih-baris .sub { font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; }
.pilih-baris.nonaktif { opacity: .45; }
.bill-aksi { display: flex; gap: 6px; }

/* ============ TUTUP KASIR ============ */
.ts-baris { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tinta-muda); }
.ts-baris b { color: var(--tinta); }
.ts-tebal { font-weight: 800; padding-top: 6px; border-top: 1px dashed var(--garis); }
.ts-tebal b { color: var(--teal-gelap); font-size: 15px; }
.ts-selisih-minus b { color: var(--merah) !important; }

/* ============ PAKET / KOMPONEN ============ */
.modal-lebar { width: 720px; }
.paket-judul { font-size: 12.5px; font-weight: 700; color: var(--tinta-muda); margin-bottom: 7px; }
.paket-tambah { display: flex; gap: 7px; margin-bottom: 6px; }
.paket-tambah select { flex: 1; padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; }
.paket-tambah input { padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; text-align: center; }
.paket-tambah input:focus { border-color: var(--teal); }
#p-komp-cari, #rsp-bahan-cari { flex: 1; text-align: left; }
.paket-bantuan { font-size: 11.5px; color: var(--tinta-muda); margin-bottom: 10px; }
#modal-bahan { z-index: 60; }
.paket-daftar { display: flex; flex-direction: column; gap: 5px; }
.paket-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; background: var(--kanvas); border-radius: 8px; font-size: 12.5px; font-weight: 600;
}

/* master resep: pratinjau bahan yang diwarisi produk + ringkasan biaya */
.resep-pratinjau {
  border: 1.5px dashed var(--garis); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; color: var(--tinta); margin-bottom: 10px; background: var(--kanvas);
}
.resep-pratinjau .rp-judul { font-weight: 700; font-size: 12px; color: var(--tinta-muda); margin-bottom: 6px; }
.resep-pratinjau ul { margin: 0; padding-left: 17px; }
.resep-pratinjau li { margin-bottom: 2px; }
.resep-ringkas {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 9px 12px; margin: 8px 0 4px;
  background: var(--kanvas); border-radius: 9px; font-size: 12.5px;
}
.resep-ringkas b { display: block; font-size: 14px; color: var(--teal); }
.resep-ringkas span { color: var(--tinta-muda); font-size: 11.5px; }

/* ============ LAIN-LAIN ============ */
.cari-kecil { padding: 8px 12px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; width: 180px; }
.cari-kecil:focus { border-color: var(--teal); }
.kartu-catatan { padding: 12px 20px 16px; font-size: 12.5px; color: var(--tinta-muda); line-height: 1.5; }
.kepala-kanan select { padding: 7px 10px; border: 1.5px solid var(--garis); border-radius: 8px; outline: none; color: var(--tinta); }
.tabel-tinggi2 { max-height: 55vh; overflow-y: auto; }
.tabel input.sel-input {
  width: 100%; padding: 6px 9px; text-align: right;
  border: 1.5px solid var(--garis); border-radius: 7px; outline: none;
}
.tabel input.sel-input:focus { border-color: var(--teal); }
.bayar-poin-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 22px 4px; font-size: 13px; font-weight: 600; color: var(--tinta-muda);
}
.bayar-poin-baris input {
  width: 90px; text-align: right; padding: 7px 10px;
  border: 1.5px solid var(--garis); border-radius: 8px; outline: none; font-weight: 700;
}
.bayar-poin-nilai { padding: 0 22px 8px; font-size: 12px; font-weight: 700; color: var(--teal-gelap); text-align: right; }
.stok-merah { color: var(--merah) !important; font-weight: 800; }

/* ============ TIPE PENJUALAN & KASBON ============ */
.bayar-tipe-baris {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 22px 10px; font-size: 12.5px; font-weight: 600; color: var(--tinta-muda);
  flex-wrap: wrap;
}
.bayar-tipe { display: flex; gap: 6px; flex-wrap: wrap; }
.bayar-tipe .chip { padding: 5px 12px; font-size: 11.5px; }
#bayar-kasbon-area { padding-bottom: 4px; }
.tag-bayar { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.tag-bayar.lunas { background: #E3F2E8; color: #2C6A4A; }
.tag-bayar.belum { background: #FBE5E9; color: var(--merah); }
.tag-terlambat { color: var(--merah); font-weight: 800; font-size: 12px; }
.tag-tempo-ok { color: var(--tinta-muda); font-size: 12px; }
.rp-baris { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tinta-muda); }
.rp-baris b { color: var(--tinta); }
.rp-baris.total { font-weight: 800; padding-top: 8px; border-top: 1px dashed var(--garis); }
.rp-baris.total b { color: var(--teal-gelap); font-size: 16px; }
.rp-baris.info b { color: var(--merah); }

/* ============ PENGATURAN: SAKELAR, TAB, STRUK ============ */
.sakelar-baris {
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 14px !important; padding: 10px 0; border-bottom: 1px solid var(--garis);
  font-size: 13.5px; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.sakelar-baris:last-child { border-bottom: none; }
.sakelar-baris .ket { font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; display: block; margin-top: 2px; }
.sakelar { display: inline-block; position: relative; width: 46px; height: 25px; flex-shrink: 0; }

/* input teks yang menyertai sebuah sakelar (mis. isi teks footer / QR) */
.teks-elemen { display: flex; flex-direction: column; gap: 5px; padding: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--tinta-muda); }
.teks-elemen input {
  padding: 9px 12px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 13px; color: var(--tinta); background: #fff;
}
.teks-elemen input:focus { border-color: var(--teal); }
.sakelar input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.sakelar-tuas {
  position: absolute; inset: 0; border-radius: 20px; background: #CBD5D8;
  transition: background .16s; pointer-events: none;
}
.sakelar-tuas::after {
  content: "OFF"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 8px; font-weight: 800; color: #fff; letter-spacing: .3px;
}
.sakelar-tuas::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: transform .16s; z-index: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sakelar input:checked + .sakelar-tuas { background: var(--teal); }
.sakelar input:checked + .sakelar-tuas::before { transform: translateX(21px); }
.sakelar input:checked + .sakelar-tuas::after { content: "ON"; right: auto; left: 8px; }

.tab-garis { display: flex; gap: 4px; border-bottom: 1.5px solid var(--garis); margin-bottom: 14px; }
.tab-item {
  padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: var(--tinta-muda);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; background: none;
}
.tab-item:hover { color: var(--teal); }
.tab-item.aktif { color: var(--teal); border-bottom-color: var(--teal); }

.struk-atur { display: grid; grid-template-columns: minmax(320px, 1fr) 330px; gap: 22px; padding: 16px 20px 20px; }
.struk-kiri { min-width: 0; }
.struk-kelompok { font-size: 13.5px; font-weight: 800; color: var(--tinta); margin: 16px 0 2px; }
.struk-kelompok:first-child { margin-top: 0; }
.struk-kelompok .ket { display: block; font-size: 11.5px; color: var(--tinta-muda); font-weight: 500; margin-top: 2px; }
.struk-kanan { position: sticky; top: 10px; }
.struk-pratinjau-judul { font-size: 12px; font-weight: 700; color: var(--tinta-muda); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .8px; }
.struk-kertas {
  background: #fff; border: 1px solid var(--garis); border-radius: 6px; padding: 16px 14px;
  font-family: "Consolas", "Courier New", monospace; font-size: 11px; line-height: 1.45; color: #111;
  max-height: 560px; overflow-y: auto; box-shadow: var(--bayang);
}
.struk-pratinjau-catatan { font-size: 11px; color: var(--tinta-muda); margin-top: 8px; font-style: italic; }
.struk-logo { display: block; max-width: 120px; max-height: 70px; margin: 0 auto 6px; }
.struk-qr { display: block; width: 110px; height: 110px; margin: 6px auto 2px; }

.logo-baris { display: flex; gap: 16px; align-items: flex-start; }
.logo-kotak {
  width: 130px; height: 88px; border: 1.5px dashed var(--garis); border-radius: 11px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--kanvas); flex-shrink: 0; padding: 6px;
}
.logo-kotak span { font-size: 11.5px; color: var(--tinta-muda); text-align: center; }
.logo-kotak img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-aksi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.atur-panel[hidden] { display: none; }

@media (max-width: 1180px) {
  .struk-atur { grid-template-columns: 1fr; }
  .struk-kanan { position: static; }
}

/* ============ SAKELAR ELEMEN & IZIN ============ */
.elemen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px 14px; }
.elemen-grid label {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.elemen-grid input { width: 16px; height: 16px; accent-color: var(--teal); }
.elemen-grid .sekat {
  grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--tinta-muda); font-weight: 800; margin-top: 8px;
}

/* ============ MULTI-PEMBAYARAN ============ */
.bayar-split { padding: 0 22px 4px; text-align: right; }
#bayar-daftar:not(:empty) { padding: 2px 22px 8px; display: flex; flex-direction: column; gap: 5px; }
.bayar-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border-radius: 9px; background: var(--kanvas); font-size: 13px; font-weight: 600;
}
.bayar-item b { margin-left: auto; }
.bayar-sisa {
  display: flex; justify-content: space-between; padding: 8px 22px 2px;
  font-size: 13px; font-weight: 700; color: var(--merah);
}

/* ============ LAPORAN AKUNTANSI ============ */
.lap-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
table.lap { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.lap td { padding: 7px 20px; border-bottom: 1px solid var(--garis); }
table.lap tr.kelompok td {
  font-weight: 800; color: var(--teal-gelap); background: #FAFBFC;
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .8px; padding-top: 12px;
}
table.lap tr.sub td { font-weight: 700; border-top: 1px solid var(--garis); background: #F6FAF9; }
table.lap tr.total td {
  font-weight: 800; font-size: 15px; color: #fff; background: var(--teal-gelap);
  border: none; padding: 11px 20px;
}
table.lap tr.total.merah td { background: var(--merah); }
table.lap .ka { text-align: right; }
table.lap .kode { color: var(--tinta-muda); font-size: 12px; width: 78px; }
.lap-kosong { padding: 34px; text-align: center; color: var(--tinta-muda); }
.jurnal-blok { border-bottom: 1px solid var(--garis); padding: 11px 20px; }
.jurnal-kepala { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.jurnal-kepala b { color: var(--tinta); }
.jurnal-kepala span { color: var(--tinta-muda); }
.jurnal-baris { display: grid; grid-template-columns: 1fr 120px 120px; font-size: 13px; padding: 2px 0; }
.jurnal-baris.kredit { padding-left: 26px; color: var(--tinta-muda); }
.jurnal-baris .ka { text-align: right; }
.seimbang-ok { color: #2C6A4A; font-weight: 800; }
.seimbang-x { color: var(--merah); font-weight: 800; }

/* ============ DONAT KATEGORI ============ */
.donat-baris { display: flex; align-items: center; gap: 18px; }
.grafik-bungkus svg.donat-svg, .donat-svg { width: 150px; height: 150px; flex-shrink: 0; }
.donat-legenda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.donat-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.donat-leg b { margin-left: auto; color: var(--teal-gelap); }
.donat-titik { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donat-nama { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ KARYAWAN & PAYROLL ============ */
.form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.form-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.wajib { color: var(--merah); }
.modal-tab { padding: 10px 22px 0; margin-bottom: 0; }
.kartu.sedang { max-width: 820px; }
.kepala-alat { display: flex; align-items: center; gap: 8px; }
.kepala-alat input[type="text"], .kepala-alat input[type="date"], .kepala-alat select {
  padding: 8px 11px; border: 1.5px solid var(--garis); border-radius: 9px;
  outline: none; font-size: 13px; color: var(--tinta); background: #fff;
}
.kepala-alat input[type="text"] { width: 210px; }
.kepala-alat input:focus, .kepala-alat select:focus { border-color: var(--teal); }
.sampai-teks { font-size: 12.5px; color: var(--tinta-muda); }

/* ringkasan kartu kecil di atas tabel */
.ringkas-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ringkas-kartu {
  background: var(--kartu); border-radius: 14px; padding: 14px 17px; box-shadow: var(--bayang);
  border-left: 4px solid var(--teal);
}
.ringkas-kartu .label { font-size: 11.5px; font-weight: 700; color: var(--tinta-muda); text-transform: uppercase; letter-spacing: .4px; }
.ringkas-kartu .nilai { font-size: 21px; font-weight: 800; color: var(--teal-gelap); margin-top: 3px; }
.ringkas-kartu .kaki { font-size: 11.5px; color: var(--tinta-muda); margin-top: 2px; }
.ringkas-kartu.oranye { border-left-color: var(--oranye); }
.ringkas-kartu.merah { border-left-color: var(--merah); }
.ringkas-kartu.lime { border-left-color: #8FAE2F; }

/* daftar peran */
.peran-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px 20px; }
.peran-kartu {
  border: 1.5px solid var(--garis); border-radius: 13px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s;
}
.peran-kartu:hover { border-color: var(--teal); box-shadow: var(--bayang); }
.peran-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.peran-nama { font-size: 15px; font-weight: 800; color: var(--teal-gelap); }
.peran-kode { font-size: 11px; color: var(--tinta-muda); font-family: Consolas, monospace; }
.peran-izin { display: flex; flex-wrap: wrap; gap: 5px; }
.izin-cip {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  background: #EAF3F3; color: var(--teal-gelap);
}
.izin-cip.penuh { background: var(--teal); color: #fff; }
.peran-kaki { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--tinta-muda); }

/* form karyawan */
.ky-atas { display: flex; gap: 20px; align-items: flex-start; }
.ky-foto { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; flex-shrink: 0; }
.foto-kotak {
  width: 130px; height: 130px; border-radius: 14px; border: 2px dashed var(--garis);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--tinta-muda); font-size: 11.5px; text-align: center; background: var(--kanvas);
}
.foto-kotak img { width: 100%; height: 100%; object-fit: cover; }
.ky-isian { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.ky-akses { padding: 4px 0; }
.izin-ringkas {
  background: var(--kanvas); border-radius: 11px; padding: 11px 14px;
  font-size: 12.5px; color: var(--tinta-muda); line-height: 1.6;
}
.izin-ringkas b { color: var(--teal-gelap); }
.sakelar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 16px; }
.sakelar-baris.kiri { justify-content: flex-start; border-bottom: none; padding: 6px 0; }
.sakelar-teks { font-size: 13px; font-weight: 600; color: var(--tinta); }
.sakelar-teks b { color: var(--teal-gelap); }
.form-isi label > .lbl { display: flex; align-items: center; gap: 4px; }
.komp-tambah { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.komp-tambah input, .komp-tambah select {
  padding: 9px 11px; border: 1.5px solid var(--garis); border-radius: 9px; outline: none;
  font-size: 13px; color: var(--tinta); background: #fff;
}
.komp-tambah input:focus, .komp-tambah select:focus { border-color: var(--teal); }
.komp-tambah input#kk-nama { flex: 1; min-width: 200px; }
.gaji-ringkas-kotak {
  background: linear-gradient(135deg, #EAF3F3, #F4F8F8); border-radius: 12px;
  padding: 12px 16px; font-size: 13px; line-height: 1.7; color: var(--tinta);
}
.gaji-ringkas-kotak b { color: var(--teal-gelap); }
.tabel-mini { max-height: 210px; overflow-y: auto; }

/* tabel penggajian */
.pg-atas { padding-bottom: 8px; }
.pg-alat { display: flex; align-items: center; gap: 12px; }
.pg-info { font-size: 12.5px; color: var(--tinta-muda); }
.pg-tabel { max-height: 52vh; overflow: auto; border-top: 1px solid var(--garis); }
.tabel-rapat th, .tabel-rapat td { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
.tabel-rapat th.pot { color: var(--merah); }
.tabel-rapat input.sel {
  width: 96px; text-align: right; padding: 5px 7px; border: 1.5px solid var(--garis);
  border-radius: 7px; outline: none; font-size: 12.5px; color: var(--tinta);
}
.tabel-rapat input.sel:focus { border-color: var(--teal); background: #F7FBFB; }
.tabel-rapat input.sel.pot { color: var(--merah); }
.tabel-rapat td.neto { font-weight: 800; color: var(--teal-gelap); }
.pg-total td { font-weight: 800; background: var(--kanvas); color: var(--teal-gelap); position: sticky; bottom: 0; }
.pg-catatan { flex: 1; flex-direction: row !important; align-items: center; gap: 8px !important;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-muda); }
.pg-catatan input { flex: 1; padding: 8px 11px; border: 1.5px solid var(--garis); border-radius: 9px; outline: none; }
.pg-catatan input:focus { border-color: var(--teal); }

/* status slip & karyawan */
.lencana-status { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; }
.lencana-status.draf { background: #F1F4F5; color: var(--tinta-muda); }
.lencana-status.dikunci { background: #FDF0E6; color: #B45A1E; }
.lencana-status.dibayar { background: #E7F4EC; color: #2C6A4A; }
.lencana-status.aktif { background: #E7F4EC; color: #2C6A4A; }
.lencana-status.nonaktif { background: #FBE9EC; color: var(--merah); }

/* slip gaji */
.slip-isi { padding: 4px 22px 10px; }
.slip-orang { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.slip-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.slip-ava img { width: 100%; height: 100%; object-fit: cover; }
.slip-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.slip-kolom h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-muda); margin-bottom: 6px; }
.slip-baris { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--garis); }
.slip-baris.jumlah { font-weight: 800; color: var(--teal-gelap); border-bottom: none; border-top: 1.5px solid var(--garis); margin-top: 4px; padding-top: 7px; }
.slip-neto { margin-top: 14px; padding: 13px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--teal), var(--teal-gelap)); color: #fff;
  display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.slip-neto b { font-size: 22px; }
.slip-pilih { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 12px; }

/* baris karyawan di tabel */
.kar-orang { display: flex; align-items: center; gap: 10px; }
.kar-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.kar-ava img { width: 100%; height: 100%; object-fit: cover; }
.kar-nip { font-size: 11px; color: var(--tinta-muda); font-family: Consolas, monospace; }
.tombol-garis {
  padding: 9px 16px; border-radius: 9px; border: 1.5px solid var(--teal);
  color: var(--teal); font-weight: 700; font-size: 13.5px; background: #fff;
}
.tombol-garis:hover { background: #EAF3F3; }

/* dokumen tambahan pada modal struk */
.struk-dokumen { display: flex; gap: 6px; justify-content: center; padding: 4px 18px 0; flex-wrap: wrap; }

/* ============ MEJA & DENAH ============ */
.meja-denah { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 22px; }
.meja-denah.mode-atur .meja-kotak { border-style: dashed; }
.meja-area-judul {
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--tinta-muda); margin-bottom: 10px;
}
.meja-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.meja-kotak {
  border: 2px solid var(--garis); border-radius: 14px; padding: 14px 12px; min-height: 104px;
  background: var(--kartu); font: inherit; color: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.meja-kotak:hover { border-color: var(--teal); box-shadow: var(--bayang); transform: translateY(-1px); }
.meja-kotak:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.meja-kotak.terisi { border-color: var(--teal); background: linear-gradient(160deg, #E9F3F3, #F6FAFA); }
.meja-kotak.telat { border-color: var(--merah); background: linear-gradient(160deg, #FCEDEF, #FDF6F7); }
.meja-nama { font-weight: 800; font-size: 15.5px; color: var(--teal-gelap); }
.meja-kap { font-size: 11.5px; color: var(--tinta-muda); }
.meja-nilai { font-weight: 700; margin-top: auto; color: var(--tinta); }
.meja-waktu { font-size: 11px; color: var(--tinta-muda); }
.meja-kotak.telat .meja-waktu { color: var(--merah); font-weight: 700; }
.meja-kosong-teks { margin-top: auto; font-size: 12px; color: var(--tinta-muda); font-style: italic; }

/* ============ PISAH TAGIHAN ============ */
.orang-pilih { display: flex; gap: 4px; }
.orang-btn {
  width: 28px; height: 26px; border-radius: 7px; border: 1.5px solid var(--garis);
  background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--tinta-muda); cursor: pointer;
}
.orang-btn:hover { border-color: var(--teal); color: var(--teal); }
.orang-btn.aktif { background: var(--teal); border-color: var(--teal); color: #fff; }
.orang-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.sp-ringkas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  padding: 14px 22px 4px;
}
.sp-orang { border: 1.5px solid var(--teal); border-radius: 11px; padding: 10px 13px; background: #F3F9F9; }
.sp-orang.kosong { border-color: var(--garis); background: var(--kanvas); opacity: .6; }
.sp-orang-label { font-size: 11.5px; font-weight: 700; color: var(--tinta-muda); text-transform: uppercase; letter-spacing: .4px; }
.sp-orang-nilai { font-size: 18px; font-weight: 800; color: var(--teal-gelap); }
.sp-orang-ket { font-size: 11.5px; color: var(--tinta-muda); }

/* ============ PILIH SATUAN (MULTISATUAN) ============ */
.satuan-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 14px 22px 6px; }
.satuan-pilih {
  border: 1.5px solid var(--garis); border-radius: 12px; padding: 13px 15px; text-align: left;
  background: var(--kartu); font: inherit; color: inherit; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.satuan-pilih:hover { border-color: var(--teal); box-shadow: var(--bayang); transform: translateY(-1px); }
.satuan-pilih:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.satuan-nama { font-weight: 700; font-size: 15px; color: var(--teal-gelap); }
.satuan-isi { font-size: 11.5px; color: var(--tinta-muda); margin: 2px 0 6px; }
.satuan-harga { font-weight: 700; color: var(--tinta); }

/* ============ PROMO ============ */
.hari-baris { display: flex; gap: 4px; flex-wrap: wrap; }
.hari-kotak { position: relative; cursor: pointer; }
.hari-kotak input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hari-kotak span {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 8px 4px; border: 1.5px solid var(--garis); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--tinta-muda); background: #fff;
  transition: background .12s, color .12s, border-color .12s;
}
.hari-kotak input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.hari-kotak input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 1px; }
.tanda-promo {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 4px; background: var(--oranye); color: #fff;
  vertical-align: 1px; margin-right: 4px;
}
#krj-kupon { text-transform: uppercase; }

/* saldo awal: dua kolom harta vs kewajiban */
.lap-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
#akt-isi input.sel { width: 170px; }
#akt-isi .tabel-rapat td { white-space: normal; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C9D6DA; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #A9BCC2; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ TATA LETAK LAYAR KECIL (HP & TABLET) ============
   Ditambahkan 18 Sep 2026 setelah aplikasi diuji di iPhone sungguhan, lalu disusun ulang
   supaya ikut menyesuaikan saat HP diputar. Berlaku juga untuk jendela Electron yang
   dikecilkan — tidak ada yang berubah di layar besar. */

/* Tinggi kerangka.
   Di iOS SEMUA browser memakai mesin Safari (Apple mewajibkannya), dan di sana 100vh dihitung
   TANPA memperhitungkan bilah alamat. Akibatnya kerangka lebih tinggi daripada layar yang
   terlihat, bagian bawah sidebar — Pemilik, Tutup Kasir, Pengaturan — terdorong keluar layar,
   dan karena body ber-overflow:hidden halaman tidak bisa digeser untuk menjangkaunya.
   100dvh mengikuti tinggi yang BENAR-BENAR terlihat, dan otomatis menyesuaikan saat diputar.
   Baris 100vh di atasnya sengaja dipertahankan sebagai cadangan untuk browser lama. */
#bingkai { height: 100vh; height: 100dvh; }

#btn-sisi {
  display: none; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: var(--kanvas); color: var(--teal-pekat);
}
#btn-sisi svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
#tirai-sisi { display: none; }

/* ---------- LACI SIDEBAR ----------
   Syaratnya SEMPIT **atau** PENDEK, bukan sempit saja.
   HP yang diputar ke lanskap menjadi lebar ±844px tapi tingginya cuma ±390px. Kalau patokannya
   hanya lebar, sidebar 216px menempel kembali di layar setinggi 390px dan memakan ruang yang
   justru paling langka di posisi itu.

   Batas lebarnya 900px, bukan 760px, dan itu disengaja untuk TABLET POTRET. Di lebar 768px,
   sidebar menempel 216px menyisakan hanya ±150px untuk kisi produk setelah keranjang 340px —
   satu kolom sempit yang tidak layak dipakai jualan. Dengan sidebar jadi laci, ruangnya menjadi
   ±380px alias tiga kolom produk. Tablet lanskap (1024px ke atas) tetap memakai sidebar
   menempel seperti biasa. */
@media (max-width: 900px), (max-height: 520px) {
  #sisi {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(8, 62, 64, .45);
    overflow-y: auto;            /* seluruh isi laci bisa digulir, bukan cuma bagian menunya */
    -webkit-overflow-scrolling: touch;
  }
  #sisi.buka { transform: none; }

  /* Penggulir dipindah ke #sisi, kalau tidak bagian bawah laci tetap tidak terjangkau. */
  #menu { flex: none; overflow: visible; }

  #tirai-sisi {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(8, 62, 64, .45);
  }
  #tirai-sisi[hidden] { display: none; }

  #btn-sisi { display: inline-flex; }

  /* Kepala dipadatkan: di lanskap, tiap piksel tegak berharga. */
  #atas { padding: 9px 14px; gap: 12px; justify-content: flex-start; }
  #atas > div:first-of-type { margin-right: auto; min-width: 0; }
  #atas-judul { font-size: 17px; }
  #atas-usaha { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #atas-jam { font-size: 11px; line-height: 1.35; }

  .lihat { padding: 12px 14px; }
}

/* ---------- ISI BERTUMPUK ----------
   Hanya saat layar benar-benar SEMPIT. Di lanskap (lebar tapi pendek) keranjang justru LEBIH
   BAIK tetap di samping: ruang tegaknya sedikit sementara ruang mendatarnya berlimpah, jadi
   menumpuknya malah memaksa menggulir terus-menerus saat melayani pembeli. */
@media (max-width: 760px) {
  #lihat-kasir.aktif { flex-direction: column; overflow-y: auto; gap: 12px; }
  .kasir-kiri { flex: none; }
  .grid-produk {
    overflow: visible; flex: none;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 9px;
  }
  .p-ikon { height: 46px; font-size: 16px; }
  .p-nama { font-size: 12px; min-height: 0; }
  .kasir-kanan { width: auto; flex-shrink: 1; overflow: visible; }

  /* Kepala kartu dibiarkan turun baris supaya tombol aksinya tidak pernah terpotong —
     sebelumnya tombol seperti "+ Pelanggan Baru" tertahan di luar layar dan baru terlihat
     setelah kartunya digeser, padahal itu tombol yang paling sering dipakai. */
  .kartu-kepala { flex-wrap: wrap; gap: 8px; }
  .kepala-kanan { flex-wrap: wrap; width: 100%; }
  .kepala-kanan .cari-kecil { flex: 1; min-width: 0; }

  /* Baris penyaring & alat. Ditemukan lewat penyapuan seluruh halaman di lebar 390px:
     hanya wadah inilah yang isinya menonjol keluar layar, karena flex tanpa izin turun baris.
     Akibatnya kolom tanggal, kotak cari, dan tombol ekspor tidak terjangkau sama sekali di
     halaman Riwayat, Akuntansi, Karyawan, dan Produk. */
  .periode-kanan, .kepala-alat { flex-wrap: wrap; width: 100%; }
  .periode-kanan > *, .kepala-alat > * { min-width: 0; }
  .periode-kanan input[type="date"], .kepala-alat input[type="date"] { flex: 1 1 130px; }
  .kepala-alat input[type="text"] { width: auto; flex: 1 1 100%; }
  .kepala-alat select { flex: 1 1 130px; }

  /* Formulir dua & tiga kolom jadi satu kolom — di lebar HP, kolom yang dibagi dua membuat
     kotak isian terlalu sempit untuk diketik dengan nyaman. */
  .form-2, .form-3 { grid-template-columns: 1fr; }

  /* ---------- TABEL JADI KARTU ----------
     Tabel 6-8 kolom tidak akan pernah muat di layar 400px, dan memaksa kasir menggeser ke
     samping untuk melihat harga atau tombol aksi itu tidak bisa diterima saat tangannya penuh
     melayani pembeli. Jadi di layar sempit tiap BARIS tabel diubah jadi satu kartu bertumpuk:
     nama kolom di kiri, isinya di kanan, semuanya muat tanpa digeser sama sekali.

     Nama kolomnya diambil otomatis dari <thead> oleh labeliTabel() di aplikasi.js dan
     dipasang sebagai data-kolom pada tiap sel — jadi ini berlaku untuk SELURUH tabel di
     aplikasi tanpa perlu menyentuh kode yang menggambarnya satu per satu. */
  .kartu table, .kartu tbody, .kartu tr, .kartu td { display: block; width: auto; }
  .kartu thead { display: none; }

  .kartu tbody tr {
    border: 1.5px solid var(--garis); border-radius: 11px;
    margin: 0 0 9px; padding: 9px 12px; background: var(--kartu);
  }
  .kartu tbody tr:last-child { margin-bottom: 0; }

  .kartu tbody td {
    display: grid; grid-template-columns: 38% 1fr; gap: 10px; align-items: baseline;
    padding: 5px 0; border: 0; white-space: normal; text-align: left;
  }
  .kartu tbody td::before {
    content: attr(data-kolom);
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--tinta-muda); line-height: 1.5;
    /* Sebagian sel mewarisi rata-kanan dari tabel aslinya (kolom angka). Nama kolom harus
       tetap rata kiri supaya deretan labelnya lurus dan mudah dipindai mata. */
    text-align: left;
  }
  /* Sel tanpa nama kolom (mis. kolom tombol aksi) memakai lebar penuh, tidak dipaksa dua kolom. */
  .kartu tbody td:not([data-kolom]) { display: block; }
  /* Baris pesan kosong seperti "Belum ada pelanggan." tetap tampil apa adanya, bukan kartu. */
  .kartu tbody td[colspan] { display: block; text-align: center; padding: 10px 0; }
  .kartu tbody td[colspan]::before { content: none; }
  .kartu tbody tr:has(td[colspan]) { border: 0; padding: 0; background: none; }
}

/* ---------- LANSKAP PENDEK ----------
   Ruang tegak sangat sempit (HP diputar). Yang dikorbankan tinggi, bukan lebar. */
@media (max-height: 520px) and (min-width: 761px) {
  .lihat { padding: 10px 16px; }
  .grid-produk { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 9px; }
  .p-ikon { height: 38px; font-size: 15px; }
  .p-nama { min-height: 0; font-size: 12px; }
}