/* ==========================================================
   Tokiva Cafe — gaya tampilan
   --------------------------------------------------------
   Dirancang TABLET LANDSCAPE lebih dulu. Kasir cafe berdiri di
   meja counter dengan tablet 10" mendatar, bukan digenggam.
   HP potrait tetap didukung sebagai jalur cadangan.

   Target sentuh minimal 48px di mana pun — kasir menekan tombol
   sambil melihat antrean, bukan sambil melihat layar.

   Wicom DigiHub · dibuat oleh Faisal Rauf
   ========================================================== */

:root {
  --tinta:      #16211F;
  --tinta-2:    #4A5A57;
  --tinta-3:    #6E7D7A;
  --garis:      #DCE3E0;
  --latar:      #F3F1EC;
  --kartu:      #FFFFFF;
  --utama:      #14675C;
  --utama-tua:  #0E4C44;
  --utama-muda: #E4F0ED;
  --aksen:      #9C5A16;
  --aksen-muda: #FBF0E2;
  --bahaya:     #A32020;
  --bahaya-muda:#FBEAEA;
  --ok:         #1B6B3A;
  --radius:     14px;
  --bayang:     0 1px 2px rgba(22,33,31,.06), 0 6px 18px rgba(22,33,31,.06);
  --sentuh:     48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--latar);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* height:auto wajib — atribut height pada <img> mengalahkan
   aspect-ratio CSS selama tingginya bukan auto. */
img { max-width: 100%; display: block; height: auto; }

/* [hidden] harus mengalahkan display milik kelas komponen. Tanpa ini,
   .modal-latar{display:flex} membuat modal KOSONG berjudul "Judul"
   menempel di tengah layar sejak halaman pertama dibuka — dan cacat
   ini tidak terlihat di uji jsdom, karena jsdom tidak menghitung CSS. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 10px; }

/* ---------------- tombol ---------------- */

.btn {
  min-height: var(--sentuh);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--utama);
  color: #fff;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-utama:not(:disabled):hover { background: var(--utama-tua); }
.btn-garis {
  background: var(--kartu);
  color: var(--utama-tua);
  border-color: var(--garis);
}
.btn-garis:not(:disabled):hover { background: var(--utama-muda); }
.btn-bahaya { background: var(--bahaya); color: #fff; margin-right: 8px; margin-bottom: 8px; }
.btn-blok { width: 100%; }
.btn-kecil { min-height: 44px; padding: 0 14px; font-size: .92rem; }
.btn-besar { min-height: 60px; font-size: 1.12rem; }

.tautan {
  background: none;
  border: 0;
  color: var(--utama-tua);
  font-weight: 600;
  cursor: pointer;
  padding: 10px 4px;
  min-height: 44px;
  text-decoration: underline;
}
.tautan.bahaya { color: var(--bahaya); }

/* ---------------- form ---------------- */

input[type=text], input[type=tel], input[type=number], input[type=search],
input[type=date], input[type=password], select, textarea {
  width: 100%;
  min-height: var(--sentuh);
  padding: 10px 14px;
  border: 1px solid var(--garis);
  border-radius: 11px;
  background: var(--kartu);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--utama);
  box-shadow: 0 0 0 3px rgba(20,103,92,.16);
}
.field { margin-bottom: 12px; }
.field label { display: block; font-size: .86rem; font-weight: 650; color: var(--tinta-2); margin-bottom: 5px; }
.field .bantu { display: block; font-size: .8rem; color: var(--tinta-3); margin-top: 5px; line-height: 1.4; }
.form-kotak {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
}

.notif { margin-top: 10px; font-size: .9rem; padding: 10px 12px; border-radius: 10px; display: none; }
.notif.ok  { display: block; background: var(--utama-muda); color: var(--utama-tua); }
.notif.err { display: block; background: var(--bahaya-muda); color: var(--bahaya); }
.notif.info{ display: block; background: var(--aksen-muda); color: var(--aksen); }
.notif:not([hidden]).notif-tetap { display: block; }

/* ---------------- layar aktivasi ---------------- */

.layar-penuh {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #16211F 0%, #14675C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  z-index: 40;
}
.kartu-aktivasi {
  width: 100%;
  max-width: 440px;
  background: var(--kartu);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.logo-aktivasi { margin: 0 auto 16px; }
.kartu-aktivasi h1 { font-size: 1.32rem; text-align: center; margin-bottom: 8px; }
.kartu-aktivasi .sub { font-size: .9rem; color: var(--tinta-2); text-align: center; margin-bottom: 18px; }
.kartu-aktivasi label { display: block; font-size: .86rem; font-weight: 650; margin-bottom: 6px; }
#in-lisensi { text-align: center; letter-spacing: .09em; font-weight: 700; font-size: 1.05rem; }
.perangkat-info {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 16px; padding: 10px 12px;
  background: var(--latar); border-radius: 10px; font-size: .84rem; color: var(--tinta-2);
}
.perangkat-info code { font-weight: 700; color: var(--tinta); }
.kartu-aktivasi .nb { font-size: .8rem; color: var(--tinta-3); text-align: center; margin: 14px 0 4px; }
.kredit { font-size: .74rem; color: var(--tinta-3); text-align: center; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--garis); }
.kartu-aktivasi .tautan { display: block; width: 100%; text-align: center; }

/* ---------------- kerangka aplikasi ---------------- */

#app { display: flex; flex-direction: column; height: 100%; }

.bar-atas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: var(--tinta); color: #fff;
  padding-top: calc(10px + env(safe-area-inset-top));
  flex: 0 0 auto;
}
.bar-kiri { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar-kiri strong { display: block; font-size: 1rem; line-height: 1.2; }
.bar-kiri small { display: block; font-size: .76rem; color: #B9C7C4; }
.ikon-app { border-radius: 8px; }
.ikon-app.ikon-toko { background: #fff; padding: 2px; object-fit: contain; }
.bar-kanan { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lencana-demo {
  background: var(--aksen); color: #fff; font-size: .68rem; font-weight: 800;
  padding: 4px 8px; border-radius: 6px; letter-spacing: .04em;
}
.status-offline { font-size: .74rem; color: #9FD8CB; }
.status-offline.putus { color: #F1C27E; }

#isi { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
.layar { padding: 16px; max-width: 1400px; margin: 0 auto; }
.judul-layar { font-size: 1.25rem; margin-bottom: 12px; }
.judul-baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.judul-baris .judul-layar { margin-bottom: 0; }
.judul-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-judul { font-size: 1rem; margin: 20px 0 10px; }
.sub-judul.bahaya-judul { color: var(--bahaya); }
.ket { font-size: .86rem; color: var(--tinta-2); margin-bottom: 12px; }
.kosong { text-align: center; color: var(--tinta-3); padding: 36px 16px; font-size: .92rem; }

/* ---------------- navigasi ---------------- */

.nav {
  display: flex;
  background: var(--kartu);
  border-top: 1px solid var(--garis);
  order: 3;
  flex: 0 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1;
  min-height: 60px;
  border: 0;
  background: none;
  color: var(--tinta-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  padding: 6px 2px;
}
.nav-item svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-item.aktif { color: var(--utama); }

/* ---------------- chip ---------------- */

.chip-baris { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kartu);
  color: var(--tinta-2);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.chip.aktif { background: var(--utama); border-color: var(--utama); color: #fff; }

/* ---------------- KASIR ---------------- */

.layar-kasir { display: flex; flex-direction: column; gap: 14px; max-width: none; padding: 14px; }
.kasir-kiri { display: flex; flex-direction: column; min-width: 0; }
.kasir-atas { flex: 0 0 auto; }
.cari-baris { margin-bottom: 12px; }

.grid-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}
.kartu-menu {
  min-height: 92px;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  box-shadow: var(--bayang);
  transition: border-color .12s, transform .06s;
}
.kartu-menu:active { transform: scale(.98); }
.kartu-menu:hover { border-color: var(--utama); }
.km-nama { font-weight: 650; font-size: .95rem; line-height: 1.25; }
/* Harga dan keterangan untung ditumpuk, bukan disejajarkan. Sejajar
   membuat "untung" tertinggal di baris harga sementara angkanya
   terlempar ke baris berikutnya begitu kartunya menyempit. */
.km-bawah { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.km-harga { font-weight: 800; color: var(--utama-tua); }
.km-margin { font-size: .72rem; color: var(--tinta-3); }
.kartu-menu.tanpa-resep { border-left: 3px solid var(--aksen); }
.kartu-menu.habis { opacity: .5; }
.km-tanda { font-size: .68rem; font-weight: 700; color: var(--aksen); }

.kasir-kanan {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  box-shadow: var(--bayang);
  min-height: 320px;
}
.pesanan-atas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--garis);
}
.pilih-meja {
  border: 1px solid var(--garis); background: var(--latar);
  border-radius: 11px; padding: 7px 14px; min-height: 48px;
  cursor: pointer; text-align: left;
}
.pilih-meja:hover { border-color: var(--utama); }
.pm-label { display: block; font-size: .7rem; color: var(--tinta-3); }
.pm-nilai { display: block; font-weight: 750; font-size: .95rem; }

.isi-pesanan { flex: 1 1 auto; overflow: auto; padding: 6px 14px; min-height: 120px; }
.baris-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--garis);
}
/* Kolom kiri dibuat flex-column, bukan sekumpulan span inline.
   Sebagai inline, nama dan harga menempel jadi satu baris —
   "Kopi Susu Gula ArenRp22.000 / porsi" — cacat yang tidak terlihat
   saat membaca kode, hanya saat melihat layarnya. */
.bi-kiri { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.bi-nama { display: block; font-weight: 650; font-size: .93rem; }
.bi-catatan { display: block; font-size: .78rem; color: var(--aksen); margin-top: 2px; }
.bi-harga { display: block; font-size: .8rem; color: var(--tinta-3); margin-top: 2px; }
.bi-kanan { flex: 0 0 auto; text-align: right; }
.bi-total { font-weight: 750; display: block; margin-bottom: 6px; }
.qty-atur { display: flex; align-items: center; gap: 4px; }
.qty-btn {
  width: 40px; height: 40px; min-height: 40px;
  border: 1px solid var(--garis); background: var(--kartu);
  border-radius: 9px; font-size: 1.15rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--utama-tua);
}
.qty-btn:hover { background: var(--utama-muda); }
.qty-nilai { min-width: 34px; text-align: center; font-weight: 750; }
.bi-catat {
  background: none; border: 0; color: var(--utama-tua); font-size: .76rem;
  text-decoration: underline; cursor: pointer; padding: 6px 0 0; min-height: 32px;
}

.ringkas { padding: 12px 14px; border-top: 1px solid var(--garis); flex: 0 0 auto; }
.ringkas .baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .93rem; }
.ringkas .baris.total { font-size: 1.24rem; font-weight: 800; border-top: 1px dashed var(--garis); margin-top: 6px; padding-top: 10px; }
.ringkas label { color: var(--tinta-2); }
.diskon-input { display: flex; gap: 6px; align-items: center; }
.diskon-input select { width: 74px; min-height: 44px; }
.diskon-input input { width: 116px; min-height: 44px; text-align: right; }

.pesanan-aksi { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; flex: 0 0 auto; }

/* ---------------- MEJA ---------------- */

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--tinta-2); margin-bottom: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.titik { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.titik.kosong { background: #fff; border: 1px solid var(--garis); }
.titik.terisi { background: var(--utama); }
.titik.kotor  { background: var(--aksen); }

.grid-meja { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.kartu-meja {
  min-height: 110px;
  border: 2px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
  padding: 12px;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  box-shadow: var(--bayang);
}
.kartu-meja:active { transform: scale(.98); }
.mj-nomor { font-size: 1.28rem; font-weight: 800; }
.mj-status { font-size: .78rem; font-weight: 700; }
.mj-nilai { font-weight: 750; font-size: .95rem; }
.mj-meta { font-size: .74rem; color: var(--tinta-3); }
.kartu-meja.terisi { border-color: var(--utama); background: var(--utama-muda); }
.kartu-meja.terisi .mj-status { color: var(--utama-tua); }
.kartu-meja.kotor { border-color: var(--aksen); background: var(--aksen-muda); }
.kartu-meja.kotor .mj-status { color: var(--aksen); }
.kartu-meja.kosong .mj-status { color: var(--tinta-3); }

/* ---------------- daftar umum ---------------- */

.daftar { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; }
.daftar:empty { display: none; }
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--garis); width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left;
}
.item:last-child { border-bottom: 0; }
button.item { cursor: pointer; min-height: var(--sentuh); }
button.item:hover { background: var(--latar); }
.item .kiri { min-width: 0; flex: 1 1 auto; }
/* Nama dibungkus elemen sendiri supaya ellipsis tidak ikut memotong
   lencana yang berdiri di sebelahnya. */
.item .nama { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .meta { display: block; font-size: .79rem; color: var(--tinta-3); margin-top: 2px; }
.item .kanan { flex: 0 0 auto; text-align: right; }
/* Dua span berurutan harus block, kalau tidak tampil menempel
   jadi "Rp22.000HPP Rp4.100" dalam satu baris. */
.item .nilai { display: block; font-weight: 750; }
.item .nilai-2 { display: block; font-size: .76rem; color: var(--tinta-3); margin-top: 1px; }
.lencana { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: 1px; }
.lencana.peringatan { background: var(--aksen-muda); color: var(--aksen); }
.lencana.bahaya { background: var(--bahaya-muda); color: var(--bahaya); }
.lencana.ok { background: var(--utama-muda); color: var(--utama-tua); }

/* ---------------- statistik & grafik ---------------- */

.grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 13px 14px; }
.stat small { display: block; font-size: .76rem; color: var(--tinta-3); margin-bottom: 3px; }
.stat b { font-size: 1.2rem; }

.grafik-kotak { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px; margin-bottom: 8px; }
.grafik { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.batang { flex: 1; background: var(--utama); border-radius: 5px 5px 0 0; min-height: 3px; position: relative; }
.batang.sepi { background: var(--garis); }
.batang span {
  position: absolute; bottom: -19px; left: 0; right: 0;
  text-align: center; font-size: .62rem; color: var(--tinta-3); white-space: nowrap;
}
.grafik-kotak { padding-bottom: 30px; }
.grafik-jam .batang { background: var(--aksen); }

.laporan-kolom, .atur-kolom { display: grid; grid-template-columns: 1fr; gap: 0 24px; }

/* ---------------- logo ---------------- */

.logo-atur { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.logo-pratinjau {
  width: 96px; height: 96px; border: 1px dashed var(--garis); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--latar);
}
.logo-pratinjau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-kosong { font-size: .72rem; color: var(--tinta-3); text-align: center; padding: 6px; }
.logo-tombol { display: flex; flex-direction: column; gap: 8px; }
.tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------------- modal ---------------- */

.modal-latar {
  position: fixed; inset: 0; background: rgba(22,33,31,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 0;
}
.modal-kotak {
  background: var(--kartu); width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column;
}
.modal-atas {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--garis); flex: 0 0 auto;
}
.modal-atas h3 { font-size: 1.06rem; }
.tutup {
  background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer;
  color: var(--tinta-3); width: 48px; height: 48px; border-radius: 10px;
}
.tutup:hover { background: var(--latar); }
.modal-isi { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); overflow: auto; }
.modal-isi .btn { margin-top: 4px; }

/* papan angka pembayaran */
.papan-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.papan-angka button { min-height: 56px; font-size: 1.15rem; font-weight: 700; border: 1px solid var(--garis); background: var(--kartu); border-radius: 12px; cursor: pointer; }
.papan-angka button:hover { background: var(--utama-muda); }
.uang-cepat { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.uang-cepat button { flex: 1 1 96px; min-height: 48px; border: 1px solid var(--garis); background: var(--kartu); border-radius: 11px; font-weight: 650; cursor: pointer; }
.uang-cepat button:hover { background: var(--utama-muda); }
.bayar-nilai { font-size: 1.7rem; font-weight: 800; text-align: right; padding: 10px 14px; background: var(--latar); border-radius: 12px; margin-bottom: 4px; }
.kembalian-baris { display: flex; justify-content: space-between; font-weight: 700; padding: 10px 2px; }
.kembalian-baris.kurang { color: var(--bahaya); }
.metode-pilih { display: flex; gap: 8px; margin-bottom: 12px; }
.metode-pilih button { flex: 1; min-height: 52px; border: 1px solid var(--garis); background: var(--kartu); border-radius: 12px; font-weight: 700; cursor: pointer; }
.metode-pilih button.aktif { background: var(--utama); border-color: var(--utama); color: #fff; }

/* baris resep di dalam modal */
.baris-resep { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.baris-resep .field { flex: 1 1 auto; margin-bottom: 0; }
.baris-resep .btn-hapus-baris {
  flex: 0 0 auto; width: 48px; height: 48px; min-height: 48px;
  border: 1px solid var(--garis); background: var(--kartu); border-radius: 11px;
  color: var(--bahaya); font-size: 1.3rem; cursor: pointer;
}
.hpp-hidup {
  background: var(--utama-muda); border-radius: 12px; padding: 12px 14px; margin: 12px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hpp-hidup b { font-size: 1.12rem; }
.hpp-hidup .hh-kanan { text-align: right; }

/* ---------------- toast ---------------- */

.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 13px 20px; border-radius: 12px;
  font-size: .92rem; font-weight: 600; z-index: 60; max-width: 90vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.toast.bahaya { background: var(--bahaya); }

/* ---------------- struk ---------------- */

.area-struk { display: none; }

.struk { font-family: ui-monospace, "Courier New", monospace; font-size: 11px; color: #000; line-height: 1.35; }
.struk-58 { width: 54mm; }
.struk-80 { width: 72mm; }
.struk .tengah { text-align: center; }
.struk .nama-cafe { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.struk .garis { border-top: 1px dashed #000; margin: 5px 0; }
.struk .baris { display: flex; justify-content: space-between; gap: 6px; }
.struk .baris.total { font-weight: 700; font-size: 13px; margin-top: 3px; }
.struk .item-nama { font-weight: 700; margin-top: 3px; }
.struk .item-catatan { font-size: 10px; padding-left: 6px; }
.struk .tebal { font-weight: 700; }
.struk-logo { max-width: 40mm; max-height: 18mm; margin: 0 auto 5px; }

@media print {
  body > *:not(.area-struk) { display: none !important; }
  .area-struk { display: block !important; }
  @page { margin: 3mm; }
}

/* ==========================================================
   TABLET LANDSCAPE — tata letak utama yang dirancang duluan
   ========================================================== */

@media (min-width: 900px) {
  body { font-size: 16px; }

  /* navigasi pindah ke rail kiri: ibu jari kasir ada di sisi layar,
     dan ruang vertikal jadi milik daftar menu sepenuhnya */
  #app { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; height: 100%; }
  .bar-atas { grid-column: 1 / -1; }
  .nav {
    grid-column: 1; grid-row: 2;
    flex-direction: column;
    border-top: 0; border-right: 1px solid var(--garis);
    padding-bottom: 0; padding-top: 8px;
    order: 0;
  }
  .nav-item { flex: 0 0 auto; min-height: 72px; font-size: .74rem; }
  .nav-item svg { width: 26px; height: 26px; }
  .nav-item.aktif { background: var(--utama-muda); }

  #isi { grid-column: 2; grid-row: 2; }
  .layar { padding: 20px 24px; }

  /* kasir jadi dua kolom sungguhan: menu kiri, pesanan kanan */
  .layar-kasir {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    height: 100%;
    padding: 18px 20px;
    align-items: stretch;
  }
  .kasir-kiri { overflow: hidden; }
  #grid-menu { overflow: auto; padding-right: 4px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .kasir-kanan { max-height: 100%; }
  .pesanan-aksi { flex-direction: row; }
  .pesanan-aksi .btn-garis { flex: 0 0 auto; }
  .pesanan-aksi .btn-besar { flex: 1 1 auto; }

  .grid-meja { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .laporan-kolom, .atur-kolom { grid-template-columns: 1fr 1fr; }

  /* modal jadi dialog tengah, bukan lembar yang naik dari bawah */
  .modal-latar { align-items: center; padding: 24px; }
  .modal-kotak { border-radius: 20px; max-height: 86vh; }
}

@media (min-width: 1280px) {
  .layar-kasir { grid-template-columns: 1fr 420px; }
  #grid-menu { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* HP kecil: rapatkan sedikit tanpa mengecilkan target sentuh */
@media (max-width: 400px) {
  .layar { padding: 12px; }
  .grid-menu { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .stat b { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}