/* ============================================================
   KASIR TOKO MANJADDA WAJADA KUBU - tampilan
   Semua warna, jarak, dan lengkungan diatur lewat variabel di :root,
   jadi mengubah gaya seluruh aplikasi cukup dari satu tempat.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* permukaan */
  --bg:#eef1f8;
  --bg-hias:#dfe5f5;
  --kartu:#ffffff;
  --kartu-2:#f8fafc;
  --garis:#e5e9f2;
  --sorot:#eef2ff;

  /* tulisan */
  --teks:#0f172a;
  --lemah:#64748b;

  /* warna pokok */
  --utama:#4f46e5;
  --utama-gelap:#4338ca;
  --utama-muda:#e0e7ff;
  --sukses:#15a34a;
  --sukses-muda:#dcfce7;
  --bahaya:#e11d48;
  --bahaya-muda:#ffe4e6;
  --peringatan:#d97706;
  --peringatan-muda:#fef3c7;
  --ungu:#7c3aed;
  --jingga:#ea580c;
  --coklat:#b45309;
  --abu:#475569;

  /* bentuk */
  --lengkung:18px;
  --lengkung-kecil:12px;
  --bayang-1:0 1px 2px rgba(15,23,42,.05);
  --bayang-2:0 2px 4px rgba(15,23,42,.04), 0 12px 28px -12px rgba(15,23,42,.18);
  --bayang-3:0 18px 45px -18px rgba(15,23,42,.35);
  --cincin:0 0 0 3px rgba(79,70,229,.28);
}

[data-tema="gelap"]{
  --bg:#0a0f1c;
  --bg-hias:#121a2e;
  --kartu:#141c2e;
  --kartu-2:#1a2337;
  --garis:#263149;
  --sorot:#1e2a45;
  --teks:#e8edf7;
  --lemah:#93a3bd;
  --utama:#818cf8;
  --utama-gelap:#6366f1;
  --utama-muda:#312e81;
  --sukses:#4ade80;
  --sukses-muda:#14532d;
  --bahaya:#fb7185;
  --bahaya-muda:#4c0519;
  --peringatan:#fbbf24;
  --peringatan-muda:#451a03;
  --bayang-1:0 1px 2px rgba(0,0,0,.4);
  --bayang-2:0 2px 4px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
  --bayang-3:0 18px 45px -18px rgba(0,0,0,.8);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 12% -12%, var(--bg-hias), transparent 62%),
    radial-gradient(900px 480px at 108% 4%, var(--bg-hias), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--teks);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

.aplikasi{ max-width:1200px; margin:0 auto; padding:0 16px 48px; }
.isi{ padding-top:20px; }
.tersembunyi{ display:none !important; }

h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:22px; font-weight:800; letter-spacing:-.01em; }
h3{ font-size:17px; font-weight:700; margin-bottom:12px; letter-spacing:-.01em; }

.lemah{ color:var(--lemah); }
.kecil{ font-size:13px; }
.kanan{ text-align:right; }
.tengah{ text-align:center; }

::selection{ background:var(--utama-muda); color:var(--teks); }

/* ---------- bilah atas ---------- */
.bilah-atas{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:color-mix(in srgb, var(--kartu) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--garis);
  padding:11px 16px; margin:0 -16px;
}
.bilah-kiri, .bilah-kanan{ display:flex; align-items:center; gap:12px; min-width:0; }
.bilah-toko{ font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.bilah-kecil{ font-size:12.5px; color:var(--lemah); }

/* ---------- layar ---------- */
.layar{ display:none; }
.layar.aktif{ display:block; animation:naik .22s cubic-bezier(.2,.7,.3,1); }
@keyframes naik{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.judul-layar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 18px;
}
.judul-layar h2{ flex:1; }

/* ---------- kartu ---------- */
.kartu{
  background:var(--kartu);
  border:1px solid var(--garis);
  border-radius:var(--lengkung);
  box-shadow:var(--bayang-2);
  padding:20px;
  margin-bottom:18px;
}

/* ---------- tombol ---------- */
.tombol{
  border:1px solid transparent; border-radius:var(--lengkung-kecil); cursor:pointer;
  padding:12px 18px; font-size:15px; font-weight:700; font-family:inherit;
  background:linear-gradient(180deg, var(--utama), var(--utama-gelap)); color:#fff;
  min-height:46px; letter-spacing:.01em;
  box-shadow:var(--bayang-1);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.tombol:hover{ filter:brightness(1.06); box-shadow:var(--bayang-2); }
.tombol:active{ transform:translateY(1px); }
.tombol:focus-visible{ outline:none; box-shadow:var(--cincin); }
.tombol:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.tombol.kecil{ padding:8px 14px; font-size:13.5px; min-height:38px; }
.tombol.lebar{ width:100%; }

.tombol-utama{ background:linear-gradient(180deg, var(--utama), var(--utama-gelap)); }
.tombol-sukses{ background:linear-gradient(180deg, #22b45c, var(--sukses)); }
.tombol-bahaya{ background:linear-gradient(180deg, #f43f5e, var(--bahaya)); }
.tombol-netral{
  background:var(--kartu); color:var(--teks); border-color:var(--garis); box-shadow:var(--bayang-1);
}
.tombol-netral:hover{ background:var(--sorot); border-color:var(--utama); filter:none; }

.tombol-ikon{
  border:none; background:transparent; cursor:pointer; color:var(--lemah);
  font-size:18px; line-height:1; padding:8px; border-radius:10px;
  transition:background .15s, color .15s;
}
.tombol-ikon:hover{ background:var(--sorot); color:var(--utama); }
.tombol-ikon:focus-visible{ outline:none; box-shadow:var(--cincin); }
.tombol-ikon svg{
  width:20px; height:20px; display:block; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- isian ---------- */
.input{
  width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
  border:1px solid var(--garis); border-radius:var(--lengkung-kecil);
  background:var(--kartu); color:var(--teks);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input:hover{ border-color:color-mix(in srgb, var(--utama) 35%, var(--garis)); }
.input:focus{ outline:none; border-color:var(--utama); box-shadow:var(--cincin); }
.input-besar{ font-size:17px; padding:14px 16px; }
.input-uang{ max-width:180px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
textarea.input{
  min-height:190px; font-family:ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size:13.5px; resize:vertical; line-height:1.7;
}
select.input{ cursor:pointer; }

label{ display:block; font-size:13px; color:var(--lemah); font-weight:700; letter-spacing:.01em; }
label .input, label select{ margin-top:6px; font-weight:500; color:var(--teks); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:16px 0; }
.form-grid .lebar-penuh{ grid-column:1 / -1; }

.baris-alat{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.baris-alat .input{ width:auto; flex:1; min-width:190px; }
.urut-bungkus{ flex:none; }
.urut-bungkus .input{ min-width:210px; }

/* ---------- chip penyaring ---------- */
.chip-baris{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{
  border:1px solid var(--garis); background:var(--kartu); color:var(--lemah);
  padding:8px 15px; border-radius:999px; cursor:pointer;
  font-size:13.5px; font-weight:700; font-family:inherit;
  transition:.15s;
}
.chip:hover{ border-color:var(--utama); color:var(--utama); background:var(--sorot); }
.chip.aktif{
  background:linear-gradient(180deg, var(--utama), var(--utama-gelap));
  color:#fff; border-color:transparent; box-shadow:var(--bayang-1);
}

/* ---------- layar masuk ---------- */
.masuk-kotak{
  max-width:460px; margin:7vh auto 0; text-align:center;
  background:var(--kartu); border:1px solid var(--garis);
  border-radius:26px; box-shadow:var(--bayang-3); padding:38px 30px 32px;
  position:relative; overflow:hidden;
}
.masuk-kotak::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--utama), #8b5cf6, var(--sukses));
}
.logo{
  width:74px; height:74px; margin:0 auto 16px; border-radius:22px;
  display:grid; place-items:center; font-size:36px;
  background:linear-gradient(145deg, var(--utama), #8b5cf6);
  color:#fff; box-shadow:0 12px 30px -10px rgba(79,70,229,.7);
  font-weight:800; letter-spacing:-.02em;
}
#judul-masuk{ line-height:1.2; }
#judul-jenis{ font-weight:600; margin-top:2px; }

.pilihan-petugas{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.tombol-petugas{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:12px 14px; border-radius:var(--lengkung-kecil); cursor:pointer;
  border:1px solid var(--garis); background:var(--kartu); color:var(--teks);
  font-family:inherit; font-size:15px; transition:.16s;
}
.tombol-petugas:hover{ border-color:var(--utama); background:var(--sorot); transform:translateX(2px); }
.tombol-petugas:focus-visible{ outline:none; box-shadow:var(--cincin); }
.tombol-petugas.pemilik{ border-color:color-mix(in srgb, var(--utama) 45%, var(--garis)); }
.avatar{
  width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center;
  font-weight:800; font-size:15px; letter-spacing:.02em;
  background:var(--utama-muda); color:var(--utama-gelap);
}
.tombol-petugas.pemilik .avatar{
  background:linear-gradient(145deg, var(--utama), #8b5cf6); color:#fff;
}
.petugas-teks{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.petugas-teks b{ font-weight:700; }
.panah{ color:var(--lemah); font-size:20px; flex:none; }

/* ---------- layar kunci ----------
   Wajah pertama aplikasi kasir. Papan angka di layar dipasang karena mesin
   kasir sering berupa layar sentuh tanpa papan ketik; yang memakai papan
   ketik tetap bisa mengetik angka, Backspace, dan Enter seperti biasa. */
.kunci-kotak{
  max-width:400px; margin:6vh auto 0; text-align:center;
  background:var(--kartu); border:1px solid var(--garis);
  border-radius:26px; box-shadow:var(--bayang-3); padding:34px 26px 30px;
  position:relative; overflow:hidden;
}
.kunci-kotak::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--utama), #8b5cf6, var(--sukses));
}
.kunci-kotak h1{ font-size:22px; line-height:1.25; margin-top:4px; }

.titik-pin{ display:flex; gap:12px; justify-content:center; margin:14px 0 4px; min-height:18px; }
.titik-pin i{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--garis);
  transition:.18s; display:block;
}
.titik-pin i.isi{ background:var(--utama); border-color:var(--utama); transform:scale(1.1); }
.pesan-kunci{ min-height:20px; color:var(--bahaya); font-weight:700; }
.kunci-kotak.salah{ animation:goyang .4s; }
@keyframes goyang{
  20%{ transform:translateX(-9px) } 40%{ transform:translateX(9px) }
  60%{ transform:translateX(-5px) } 80%{ transform:translateX(5px) }
}

.papan-angka{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:12px; }
.papan-angka button{
  border:1px solid var(--garis); background:var(--kartu); color:var(--teks);
  border-radius:16px; padding:16px 0; font-size:22px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:.12s;
}
.papan-angka button:hover{ background:var(--sorot); border-color:var(--utama); }
.papan-angka button:active{ transform:scale(.96); background:var(--utama); color:#fff; }
.papan-angka button.kecil-teks{ font-size:14px; font-weight:800; color:var(--lemah); }
/* Padam selagi gembok PIN berjalan. Harus terlihat benar-benar mati, bukan
   samar, supaya orang tidak mengira tombolnya rusak lalu menekan berkali-kali. */
.papan-angka button:disabled{
  opacity:.3; cursor:not-allowed; background:var(--kartu-2);
  color:var(--lemah); border-color:var(--garis); border-style:dashed;
}
.papan-angka button:disabled:hover{ background:var(--kartu-2); border-color:var(--garis); }
.papan-angka button:disabled:active{ transform:none; background:var(--kartu-2); color:var(--lemah); }

/* ---------- sapaan di beranda ---------- */
.sapaan{
  display:flex; align-items:center; gap:15px; margin-bottom:18px; padding:16px 20px;
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--lengkung);
  box-shadow:var(--bayang-2); position:relative; overflow:hidden;
}
.sapaan::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--utama), #8b5cf6);
}
.sapaan.pemilik{
  background:linear-gradient(135deg, var(--sorot), var(--kartu) 70%);
  border-color:color-mix(in srgb, var(--utama) 30%, var(--garis));
}
.avatar-sapaan{
  width:50px; height:50px; flex:none; border-radius:16px; display:grid; place-items:center;
  font-weight:800; font-size:17px; letter-spacing:.02em; color:#fff;
  background:linear-gradient(145deg, var(--utama), #8b5cf6);
  box-shadow:0 10px 24px -12px var(--utama);
}
.isi-sapaan{ flex:1; min-width:0; line-height:1.4; display:flex; flex-direction:column; }
.isi-sapaan b{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.tanggal-sapaan{ font-size:12.5px; color:var(--lemah); font-weight:600; }
.kabar-sapaan{ font-size:13.5px; color:var(--teks); margin-top:5px; font-weight:600; }

@media (max-width:560px){
  .sapaan{ padding:14px 16px; gap:12px; }
  .avatar-sapaan{ width:42px; height:42px; font-size:15px; border-radius:13px; }
  .isi-sapaan b{ font-size:16px; }
  .sapaan .lencana{ display:none; }
}

/* ---------- beranda ---------- */
.ringkas-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:14px; margin-bottom:18px;
}
.ringkas{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--lengkung);
  padding:16px 18px; box-shadow:var(--bayang-2); position:relative; overflow:hidden;
}
.ringkas::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--utama), #8b5cf6); opacity:.9;
}
.ringkas .label{
  font-size:11.5px; color:var(--lemah); font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.ringkas .nilai{
  font-size:25px; font-weight:800; margin-top:5px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ringkas.klik{ cursor:pointer; transition:.16s; }
.ringkas.klik:hover{ border-color:var(--utama); transform:translateY(-2px); box-shadow:var(--bayang-3); }
.nilai.hijau{ color:var(--sukses); }
.nilai.merah{ color:var(--bahaya); }
.nilai.jingga{ color:var(--peringatan); }

.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(235px,1fr)); gap:14px; }
.menu-btn{
  border:none; border-radius:var(--lengkung); cursor:pointer; font-family:inherit;
  padding:18px; color:#fff; text-align:left;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--bayang-2); position:relative; overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.menu-btn::after{
  content:''; position:absolute; right:-28px; top:-28px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,.12);
}
.menu-btn:hover{ transform:translateY(-3px); box-shadow:var(--bayang-3); }
.menu-btn:active{ transform:translateY(0); }
.menu-btn:focus-visible{ outline:none; box-shadow:var(--cincin), var(--bayang-2); }
.menu-ikon{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); position:relative; z-index:1;
}
.menu-ikon svg{ width:25px; height:25px; stroke:#fff; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.menu-teks{ display:flex; flex-direction:column; line-height:1.25; position:relative; z-index:1; }
.menu-teks b{ font-size:15.5px; font-weight:800; letter-spacing:.01em; }
.menu-teks small{ font-size:12.5px; opacity:.85; font-weight:500; margin-top:2px; }

.menu-btn.hijau{ background:linear-gradient(135deg,#16a34a,#059669); }
.menu-btn.biru{ background:linear-gradient(135deg,#4f46e5,#2563eb); }
.menu-btn.ungu{ background:linear-gradient(135deg,#7c3aed,#a21caf); }
.menu-btn.jingga{ background:linear-gradient(135deg,#ea580c,#f59e0b); }
.menu-btn.merah{ background:linear-gradient(135deg,#e11d48,#be123c); }
.menu-btn.coklat{ background:linear-gradient(135deg,#b45309,#92400e); }
.menu-btn.abu{ background:linear-gradient(135deg,#475569,#334155); }
.menu-btn.toska{ background:linear-gradient(135deg,#0d9488,#0891b2); }
.menu-btn.merahjambu{ background:linear-gradient(135deg,#db2777,#9d174d); }

#catatan-beranda .kartu{ border-left:4px solid var(--peringatan); }

/* ============================================================
   LAYAR JUAL
   Dua panel: memilih barang di kiri, keranjang dan pembayaran di kanan.
   Di layar HP, panel kanan berubah jadi lembar yang naik dari bawah,
   supaya jari kasir tidak perlu menggulir bolak-balik saat melayani.
   ============================================================ */
.jual-tata{ display:grid; grid-template-columns:1.32fr 1fr; gap:18px; align-items:start; }
.kolom-kanan{ position:sticky; top:78px; max-height:calc(100vh - 96px); display:flex; flex-direction:column; }
.panel-pilih{ padding:16px; }

/* kotak cari besar dengan ikon dan petunjuk tombol */
.cari-jual{ position:relative; display:flex; align-items:center; }
.cari-jual svg{
  position:absolute; left:15px; width:20px; height:20px;
  stroke:var(--lemah); fill:none; stroke-width:2; stroke-linecap:round;
}
.cari-jual input{
  width:100%; padding:14px 60px 14px 45px; font-size:16.5px; font-family:inherit;
  border:1px solid var(--garis); border-radius:var(--lengkung-kecil);
  background:var(--kartu); color:var(--teks); font-weight:600;
}
.cari-jual input:focus{ outline:none; border-color:var(--utama); box-shadow:var(--cincin); }
.cari-jual .kunci{ position:absolute; right:12px; }

.kunci{
  font-family:inherit; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  border:1px solid var(--garis); border-bottom-width:2px; border-radius:6px;
  padding:2px 6px; color:var(--lemah); background:var(--kartu-2);
}
.kunci.terang{ border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.15); }

.chip-geser{ display:flex; gap:7px; overflow-x:auto; padding:13px 2px 3px; scrollbar-width:none; }
.chip-geser::-webkit-scrollbar{ display:none; }
.chip-geser .chip{ flex:none; padding:7px 13px; font-size:12.5px; }

/* ---------- kepala keranjang ---------- */
.kepala-keranjang{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--garis); flex:none;
}
.kepala-keranjang h3{ margin:0; display:flex; align-items:center; gap:8px; }
.aksi-kepala{ display:flex; gap:2px; }
.hanya-hp{ display:none; }

/* ---------- baris keranjang ---------- */
.daftar-keranjang{ overflow-y:auto; flex:1; min-height:0; margin:0 -4px; padding:4px; }
.baris-keranjang{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:11px 4px; border-bottom:1px solid var(--garis);
}
.baris-keranjang:last-child{ border-bottom:none; }
.baris-keranjang .ikon-barang{ width:34px; height:34px; }
.baris-keranjang .rincian{ min-width:0; line-height:1.35; }
.baris-keranjang .rincian b{ font-size:14.5px; font-weight:700; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.baris-keranjang .rincian small{ color:var(--lemah); font-size:12px; font-weight:600; }
.baris-keranjang .kanan-baris{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.baris-keranjang .jumlah-rp{ font-weight:800; font-variant-numeric:tabular-nums; font-size:14.5px; }
.baris-keranjang.baru{ animation:sorot-baris 1s ease; }
@keyframes sorot-baris{ from{ background:var(--sorot); } to{ background:transparent; } }

/* ---------- diskon rupiah atau persen ---------- */
.diskon-kelompok{ display:flex; align-items:center; gap:8px; }
.saklar-diskon{ display:flex; border:1px solid var(--garis); border-radius:9px; overflow:hidden; }
.saklar-diskon button{
  border:none; background:var(--kartu); color:var(--lemah); cursor:pointer;
  padding:7px 11px; font-size:12.5px; font-weight:800; font-family:inherit;
}
.saklar-diskon button.aktif{ background:var(--utama); color:#fff; }
.diskon-kelompok .input{ max-width:120px; }

.tombol.besar-sekali{ font-size:17px; padding:16px; min-height:56px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:10px; }

/* ---------- bilah keranjang untuk HP ---------- */
.bilah-keranjang{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--kartu); border-top:1px solid var(--garis);
  box-shadow:0 -10px 30px -12px rgba(15,23,42,.3);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  align-items:center; gap:12px;
}
.bilah-keranjang .ringkas-keranjang{ flex:1; line-height:1.25; }
.bilah-keranjang small{ color:var(--lemah); font-size:12px; font-weight:700; }
.bilah-keranjang b{ display:block; font-size:19px; font-weight:800;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }

.grid-barang{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr));
  gap:11px; margin-top:16px; max-height:58vh; overflow:auto; padding:3px;
}
.grid-barang::-webkit-scrollbar{ width:9px; }
.grid-barang::-webkit-scrollbar-thumb{ background:var(--garis); border-radius:99px; }

.kartu-barang{
  text-align:left; cursor:pointer; background:var(--kartu); font-family:inherit;
  border:1px solid var(--garis); border-radius:var(--lengkung-kecil); padding:13px;
  display:flex; flex-direction:column; gap:3px; color:var(--teks);
  transition:.16s cubic-bezier(.2,.7,.3,1);
}
.kartu-barang:hover{
  border-color:var(--utama); background:var(--sorot);
  transform:translateY(-3px); box-shadow:var(--bayang-2);
}
.kartu-barang:active{ transform:translateY(0); }
.kartu-barang:focus-visible{ outline:none; box-shadow:var(--cincin); }
.kartu-barang:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.kartu-barang .nama{ font-weight:700; font-size:14.5px; line-height:1.3; }
.kartu-barang .harga{ color:var(--sukses); font-weight:800; font-variant-numeric:tabular-nums; }
.kartu-barang .stok{ font-size:11.5px; color:var(--lemah); font-weight:600; }

/* meteran penyimpanan */
.meteran{ height:12px; background:var(--garis); border-radius:999px; overflow:hidden; }
.meteran i{
  display:block; height:100%; border-radius:999px; transition:width .4s ease;
  background:linear-gradient(90deg, var(--sukses), #22c55e);
}
.meteran i.peringatan{ background:linear-gradient(90deg, var(--peringatan), #fbbf24); }
.meteran i.bahaya{ background:linear-gradient(90deg, var(--bahaya), #fb7185); }

.baris-alamat .input{ flex:1; font-size:13px; }

.kartu-barang .stok.menipis{ color:var(--peringatan); }
.kartu-barang .stok.habis{ color:var(--bahaya); }
.kartu-barang .belum-harga{
  color:var(--peringatan); font-weight:700; font-size:12px;
}

/* ---------- ajakan untuk pemakai baru ----------
   Hanya muncul saat toko masih kosong, lalu hilang untuk selamanya. Ia
   harus cukup menonjol untuk dibaca di hari pertama, tetapi tidak boleh
   meniru nada peringatan -- tidak ada yang salah, cuma belum dimulai. */
.ajakan{
  background:var(--sorot); border:1px solid color-mix(in srgb, var(--utama) 35%, var(--garis));
  border-radius:var(--lengkung); padding:18px 20px; margin-bottom:18px;
}
.ajakan h4{ margin:0 0 6px; font-size:16px; color:var(--utama-gelap); }
[data-tema="gelap"] .ajakan h4{ color:#c7d2fe; }
.ajakan p{ margin:0 0 12px; color:var(--lemah); font-size:14px; line-height:1.6; }
.ajakan ol{ margin:0 0 14px; padding-left:20px; color:var(--lemah); font-size:14px; line-height:1.9; }
.ajakan .baris-alat{ margin:0; }

/* Tombol berupa tulisan saja, untuk pintu bantuan yang tidak boleh
   bersaing perhatian dengan papan angka di sebelahnya. */
.tombol-teks{
  background:none; border:none; padding:6px 4px; margin-top:10px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--lemah);
  text-decoration:underline; text-underline-offset:3px;
}
.tombol-teks:hover{ color:var(--utama); }

/* ---------- penanda keadaan data ----------
   Tiga keadaan, tiga warna, dan titiknya berdenyut hanya ketika ada yang
   belum terkirim -- gerakan dipakai untuk satu hal saja, supaya ia berarti. */
.penanda-awan{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px;
  border:1px solid var(--garis); background:var(--kartu); color:var(--lemah);
  white-space:nowrap; cursor:default;
}
.penanda-awan i{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.penanda-awan.hidup{
  color:var(--sukses);
  border-color:color-mix(in srgb, var(--sukses) 45%, var(--garis));
  background:color-mix(in srgb, var(--sukses) 10%, var(--kartu));
}
.penanda-awan.menunggu{
  color:var(--peringatan);
  border-color:color-mix(in srgb, var(--peringatan) 45%, var(--garis));
  background:color-mix(in srgb, var(--peringatan) 12%, var(--kartu));
}
.penanda-awan.menunggu i{ animation:denyut-kirim 1.4s ease-out infinite; }
@keyframes denyut-kirim{ 50%{ opacity:.25; } }
.penanda-awan.mati{ opacity:.75; }

/* ---------- penelusuran tiga tingkat ----------
   Kartu kelompok harus terlihat sebagai PINTU, bukan sebagai barang.
   Kalau keduanya sama rupa, kasir akan mengira sudah menekan barang
   padahal baru membuka rak. */
.kartu-barang.kartu-kelompok{
  background:var(--sorot);
  border-color:color-mix(in srgb, var(--utama) 40%, var(--garis));
  border-style:dashed;
}
.kartu-barang.kartu-kelompok:hover{ border-style:solid; }
.kartu-barang .lanjut{
  color:var(--utama-gelap); font-weight:800; font-size:13px;
}
[data-tema="gelap"] .kartu-barang .lanjut{ color:#c7d2fe; }

.jejak-barang{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; min-width:0;
}
.jejak-barang .jalur{
  font-weight:800; font-size:14px; color:var(--teks);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

/* ---------- ikon barang ---------- */
.ikon-barang{ display:inline-flex; width:42px; height:42px; color:var(--utama); flex:none; }
.ikon-barang svg{ width:100%; height:100%; }
.ikon-mini{ width:28px; height:28px; }
.sel-nama{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.kartu-barang .ikon-barang{ margin-bottom:3px; }
.kartu-barang:disabled .ikon-barang{ color:var(--lemah); }

.pilih-gambar{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr));
  gap:8px; max-height:240px; overflow:auto; margin-top:10px; padding:3px;
}
.pilih-gambar button{
  border:1px solid var(--garis); background:var(--kartu); color:var(--lemah);
  border-radius:var(--lengkung-kecil); padding:9px 4px; cursor:pointer;
  font-size:10.5px; font-weight:700; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  transition:.15s;
}
.pilih-gambar button:hover{ border-color:var(--utama); background:var(--sorot); }
.pilih-gambar button.terpilih{
  border-color:var(--utama); background:var(--sorot); color:var(--utama-gelap);
  box-shadow:var(--cincin);
}
.pilih-gambar .ikon-barang{ width:32px; height:32px; }

/* ---------- tabel ---------- */
.tabel-bungkus{ overflow-x:auto; border-radius:var(--lengkung-kecil); }
.tabel{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tabel th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--lemah); font-weight:800; background:var(--kartu-2);
  border-bottom:1px solid var(--garis); padding:11px 10px; white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.tabel th:first-child{ border-top-left-radius:var(--lengkung-kecil); }
.tabel th:last-child{ border-top-right-radius:var(--lengkung-kecil); }
.tabel td{ padding:11px 10px; border-bottom:1px solid var(--garis); vertical-align:middle; }
.tabel tbody tr{ transition:background .13s; }
.tabel tbody tr:hover{ background:var(--kartu-2); }
.tabel tr:last-child td{ border-bottom:none; }
.tabel tr.batal td{ opacity:.5; text-decoration:line-through; }

/* Judul kolom harus mengikuti perataan isinya. Tanpa dua aturan di bawah,
   `.tabel th` yang rata kiri mengalahkan kelas .kanan dan .tengah, sehingga
   judul "Harga Jual" berdiri di kiri sementara angkanya di kanan.
   Kolom angka juga dibuat sesempit isinya, agar sisa ruang jatuh ke kolom
   nama barang dan angkanya tidak pernah terpotong jadi dua baris. */
.tabel th.kanan, .tabel td.kanan{
  text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; width:1%;
}
.tabel th.tengah, .tabel td.tengah{ text-align:center; white-space:nowrap; width:1%; }

/* Kolom kode juga sesempit isinya, supaya nama barang mendapat ruang terlebar */
#tabel-barang th:first-child, #tabel-barang td:first-child{ width:1%; white-space:nowrap; }

.kosong{
  text-align:center; color:var(--lemah); padding:26px 12px; font-size:14.5px;
  background:var(--kartu-2); border-radius:var(--lengkung-kecil); border:1px dashed var(--garis);
}

.sel-jumlah{ display:flex; align-items:center; gap:6px; justify-content:center; }
.sel-jumlah button{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--garis);
  background:var(--kartu); color:var(--teks); font-size:17px; cursor:pointer;
  line-height:1; font-family:inherit; transition:.14s;
}
.sel-jumlah button:hover{ border-color:var(--utama); color:var(--utama); background:var(--sorot); }
.sel-jumlah input{
  width:54px; text-align:center; padding:6px; border:1px solid var(--garis);
  border-radius:9px; background:var(--kartu); color:var(--teks);
  font-size:14.5px; font-family:inherit; font-weight:700;
}

/* ---------- kotak hitung ---------- */
.hitung{ margin-top:16px; border-top:2px dashed var(--garis); padding-top:14px; }
.baris{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; }
.baris b{ font-variant-numeric:tabular-nums; }
.baris.besar{
  font-size:19px; font-weight:800; border-top:1px solid var(--garis);
  margin-top:6px; padding-top:13px; letter-spacing:-.01em;
}
.baris.kembalian{
  background:linear-gradient(135deg, var(--sukses-muda), color-mix(in srgb, var(--sukses-muda) 55%, var(--kartu)));
  border:1px solid color-mix(in srgb, var(--sukses) 25%, transparent);
  border-radius:var(--lengkung-kecil); padding:14px 16px; margin-top:12px;
  font-size:19px; font-weight:800; color:var(--sukses);
}
.tombol-cepat{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.tombol-cepat button{
  border:1px solid var(--garis); background:var(--kartu); color:var(--teks);
  border-radius:9px; padding:7px 11px; font-size:12.5px; font-weight:800;
  cursor:pointer; font-family:inherit; transition:.14s;
}
.tombol-cepat button:hover{ background:var(--sorot); border-color:var(--utama); color:var(--utama); }
.aksi-bawah{ display:grid; grid-template-columns:1fr 1.7fr; gap:10px; margin-top:14px; }

/* ---------- lencana ---------- */
.lencana{
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px;
  display:inline-block; letter-spacing:.02em;
}
.lencana-baik{ background:var(--sukses-muda); color:var(--sukses); }
.lencana-peringatan{ background:var(--peringatan-muda); color:var(--peringatan); }
.lencana-bahaya{ background:var(--bahaya-muda); color:var(--bahaya); }

/* ---------- daftar sederhana ---------- */
.daftar-sederhana{ display:flex; flex-direction:column; gap:9px; margin-bottom:15px; }
.baris-daftar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1px solid var(--garis); border-radius:var(--lengkung-kecil);
  padding:11px 15px; background:var(--kartu-2); transition:.14s;
}
.baris-daftar:hover{ border-color:var(--utama); }
.baris-daftar b{ font-variant-numeric:tabular-nums; }
.dua-kolom{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.batang-bungkus{ margin-bottom:13px; }
.batang-label{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-bottom:5px; }
.batang{ height:9px; background:var(--garis); border-radius:999px; overflow:hidden; }
.batang i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--utama), #8b5cf6);
}

/* ---------- pilihan bulat di panduan awal ---------- */
.pilihan-radio{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  border:1px solid var(--garis); border-radius:var(--lengkung-kecil); padding:13px;
  margin-top:9px; font-weight:500; color:var(--teks); font-size:14.5px; transition:.15s;
}
.pilihan-radio:hover{ background:var(--sorot); border-color:var(--utama); }
.pilihan-radio input{ margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--utama); }

/* ---------- buku catatan ---------- */
.catatan-baris{
  display:flex; gap:13px; align-items:flex-start;
  border-left:3px solid var(--garis); padding:9px 0 9px 14px;
  font-size:14px;
}
.catatan-baris .waktu{ color:var(--lemah); font-size:12px; min-width:110px; flex:none; font-weight:600; }
.catatan-baris .siapa{ font-weight:800; }
.catatan-baris.barang{ border-left-color:var(--utama); }
.catatan-baris.stok{ border-left-color:var(--ungu); }
.catatan-baris.nota{ border-left-color:var(--bahaya); }
.catatan-baris.kasir{ border-left-color:var(--sukses); }
.catatan-baris.sistem{ border-left-color:var(--peringatan); }

/* ---------- pesan melayang ---------- */
.tumpukan-pesan{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; gap:9px;
}
.toast{
  background:#0f172a; color:#fff; padding:13px 19px; border-radius:var(--lengkung-kecil);
  box-shadow:var(--bayang-3); font-size:14.5px; font-weight:700; max-width:350px;
  animation:masuk .24s cubic-bezier(.2,.7,.3,1);
}
.toast-sukses{ background:linear-gradient(135deg,#16a34a,#059669); }
.toast-bahaya{ background:linear-gradient(135deg,#e11d48,#be123c); }
.toast-peringatan{ background:linear-gradient(135deg,#ea580c,#d97706); }
.toast.pergi{ opacity:0; transform:translateY(10px) scale(.97); transition:.28s; }
@keyframes masuk{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none;} }

/* ---------- modal ---------- */
.latar-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:150;
  display:flex; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:pudar .18s ease;
}
@keyframes pudar{ from{ opacity:0 } to{ opacity:1 } }
.modal{
  background:var(--kartu); border-radius:22px; width:100%; max-width:540px;
  max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--bayang-3);
  border:1px solid var(--garis); animation:naik .22s cubic-bezier(.2,.7,.3,1);
}
.modal-atas{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:17px 20px; border-bottom:1px solid var(--garis);
}
.modal-isi{ padding:20px; overflow:auto; }
.modal-aksi{
  display:flex; justify-content:flex-end; gap:10px; padding:15px 20px;
  border-top:1px solid var(--garis); flex-wrap:wrap; background:var(--kartu-2);
  border-radius:0 0 22px 22px;
}

/* ---------- struk ---------- */
.struk{
  font-family:ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size:13px; line-height:1.5; max-width:320px; margin:0 auto;
  color:#000; background:#fff; padding:16px; border-radius:10px;
  border:1px solid #e5e5e5;
}
.struk .tengah{ text-align:center; }
.struk hr{ border:none; border-top:1px dashed #000; margin:8px 0; }
.struk table{ width:100%; border-collapse:collapse; }
.struk td{ padding:1px 0; vertical-align:top; }
.struk .kanan{ text-align:right; }
.struk .tebal{ font-weight:700; }

/* ---------- cetak ---------- */
#area-cetak{ display:none; }
@media print{
  @page{ margin:6mm; }
  body *{ visibility:hidden; }
  #area-cetak, #area-cetak *{ visibility:visible; }
  #area-cetak{ display:block; position:absolute; left:0; top:0; width:100%; }
  #area-cetak .struk{ border:none; padding:0; }
}

/* ---------- layar sedang ---------- */
@media (max-width:920px){
  .jual-tata{ grid-template-columns:1fr; }

  /* Panel keranjang jadi lembar yang naik dari bawah layar. */
  .kolom-kanan{
    position:fixed; inset:auto 0 0 0; z-index:80; margin:0; max-height:88vh;
    border-radius:22px 22px 0 0; border-bottom:none;
    transform:translateY(105%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 -16px 40px -14px rgba(15,23,42,.4);
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  body.keranjang-terbuka .kolom-kanan{ transform:none; }
  body.keranjang-terbuka::after{
    content:''; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:75;
  }
  .hanya-hp{ display:inline-flex; }
  .hanya-besar{ display:none; }
  .bilah-keranjang.tampil{ display:flex; }
  .daftar-keranjang{ max-height:40vh; }
  .grid-barang{ padding-bottom:70px; }
  .dua-kolom{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .grid-barang{ max-height:none; }
  .judul-layar h2{ font-size:19px; width:100%; order:-1; }
  .menu-grid{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
}

/* ---------- layar HP ---------- */
@media (max-width:560px){
  body{ font-size:15px; }
  .aplikasi{ padding:0 12px 34px; }
  .bilah-atas{ margin:0 -12px; padding:10px 12px; }
  .kartu{ padding:15px; border-radius:16px; }
  h1{ font-size:25px; }
  .masuk-kotak{ margin-top:4vh; padding:30px 20px 26px; border-radius:22px; }
  .aksi-bawah{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .menu-btn{ padding:15px; }
  .ringkas-grid{ grid-template-columns:repeat(auto-fit, minmax(145px,1fr)); gap:11px; }
  .ringkas{ padding:13px 15px; }
  .ringkas .nilai{ font-size:21px; }
  .bilah-kanan #bilah-tanggal{ display:none; }
  .tumpukan-pesan{ right:12px; left:12px; bottom:12px; }
  .toast{ max-width:none; }
  .catatan-baris{ flex-direction:column; gap:3px; }
  .catatan-baris .waktu{ min-width:0; }
  .grid-barang{ grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); }
}

/* ---------- hormati setelan pengguna ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}