/* styles.css - Tokiva Resto. Mobile-first (360px), sasaran sentuh >= 44px,
   kontras dihitung (lihat uji/uji.js bagian kontras), bukan ditaksir mata.
   Warna diambil dari logo: teal + oranye. Oranye HANYA dipakai sebagai garis
   dan latar muda - teks putih di atas oranye logo gagal WCAG AA. */

:root {
  --primer: #0b6166;
  --primer-gelap: #084a4e;
  --primer-muda: #e4f2f2;
  --aksen: #e8661a;
  --aksen-muda: #fff1e6;
  --aksen-teks: #8a3a00;
  --bahaya: #b42318;
  --bahaya-muda: #fdecea;
  --sukses: #11704f;
  --sukses-muda: #e7f5ef;
  --peringatan: #93370d;
  --latar: #f4f6f8;
  --kartu: #ffffff;
  --teks: #101828;
  --teks-lemah: #475467;
  --garis: #d0d5dd;
}

* { box-sizing: border-box; }

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

[hidden] { display: none !important; }

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; }
h2 { font-size: 1.08rem; }

button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }
a { color: var(--primer); }

.label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; color: var(--teks); }

input[type="text"], input[type="number"], input[type="search"], input[type="tel"], select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: #ffffff;
  color: var(--teks);
}
input:focus, select:focus, button:focus-visible, a:focus-visible, label.tombol-tautan:focus-within {
  outline: 3px solid #7cc4c8;
  outline-offset: 1px;
}

.tersembunyi-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pesan-error { color: var(--bahaya); font-size: 0.9rem; margin: 6px 0 10px; }
.catatan-kecil { color: var(--teks-lemah); font-size: 0.85rem; margin: 8px 0; }
.keterangan { color: var(--teks-lemah); font-size: 0.92rem; margin: 0 0 12px; }
.kosong { color: var(--teks-lemah); padding: 12px 2px; margin: 0; }

/* ---------- Tombol ---------- */

.tombol-utama, .tombol-sekunder, .tombol-bahaya-garis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.tombol-utama { background: var(--primer); color: #ffffff; border: 1px solid var(--primer); }
.tombol-utama:hover { background: var(--primer-gelap); }
.tombol-utama:disabled { opacity: 0.65; cursor: default; }
.tombol-sekunder { background: #ffffff; color: var(--primer-gelap); border: 1px solid #9ccfd1; }
.tombol-bahaya-garis { background: #ffffff; color: var(--bahaya); border: 1px solid #f0b4ae; margin-top: 10px; }

.grup-tombol { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.tombol-kecil {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.tombol-utama-kecil { background: var(--primer); color: #ffffff; }
.tombol-sekunder-kecil { background: #ffffff; color: var(--primer-gelap); border-color: #9ccfd1; }
.tombol-bahaya-kecil { background: var(--bahaya-muda); color: var(--bahaya); }

/* ---------- Gerbang aktivasi ---------- */

.layar-aktivasi {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--primer-gelap);
}
.kartu-aktivasi {
  background: var(--kartu);
  border-radius: 18px;
  padding: 26px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.logo-aktivasi { margin: 0 auto 10px; border-radius: 18px; }
.kartu-aktivasi h1 { font-size: 1.5rem; }
.versi {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--aksen-muda);
  color: var(--aksen-teks);
}
.deskripsi-aktivasi { color: var(--teks-lemah); font-size: 0.93rem; margin: 0 0 18px; }
#form-aktivasi { text-align: left; }
#form-aktivasi input { margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.pemisah { display: flex; align-items: center; gap: 10px; color: var(--teks-lemah); font-size: 0.85rem; margin: 18px 0 12px; }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }
.tautan-beli { display: inline-block; margin-top: 8px; font-weight: 700; text-decoration: none; min-height: 44px; line-height: 44px; }

/* ---------- Kepala & pita ---------- */

.kepala-app {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--primer);
  color: #ffffff;
}
.kepala-judul { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; min-width: 0; }
.kepala-judul span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kepala-logo { border-radius: 6px; background: #ffffff; flex-shrink: 0; }
.versi-kepala { font-size: 0.78rem; color: #ffffff; opacity: 0.95; }

.pita {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px;
  font-size: 0.88rem;
}
.pita-demo { background: var(--aksen-muda); color: var(--aksen-teks); border-bottom: 1px solid #f6c7a3; }
.pita-dicabut { background: var(--bahaya-muda); color: var(--bahaya); font-weight: 600; }
.pita-tombol {
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--aksen);
  background: #ffffff;
  color: var(--aksen-teks);
  font-weight: 700;
  cursor: pointer;
}

.konten-app { padding: 16px 16px 24px; max-width: 980px; margin: 0 auto; }
.judul-layar { font-size: 1.35rem; }
.nomor-pesanan { font-size: 0.9rem; font-weight: 600; color: var(--teks-lemah); }

/* ---------- Navigasi bawah ---------- */



.nav-bawah {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--kartu);
  border-top: 1px solid var(--garis);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.tombol-nav {
  flex: 1;
  min-height: 56px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--teks-lemah);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.tombol-nav-aktif { color: var(--primer); }
.tombol-nav-aktif::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 3px; background: var(--primer); }
.ikon-nav { font-size: 1.3rem; line-height: 1; }
.badge-angka {
  position: absolute;
  top: 4px;
  right: calc(50% - 28px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bahaya);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Kartu umum ---------- */

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.kartu-penuntun { border-color: var(--aksen); background: var(--aksen-muda); }
.kartu-penuntun p { color: var(--teks); }
.grup-input { margin-bottom: 12px; flex: 1; min-width: 0; }
.baris-dua { display: flex; gap: 10px; flex-wrap: wrap; }
.baris-dua .grup-input { min-width: 140px; }
.baris-input-tombol { display: flex; gap: 10px; align-items: flex-end; }
.baris-input-tombol .grup-input { margin-bottom: 0; }
.baris-input-tombol > button { width: auto; flex-shrink: 0; min-width: 96px; }
.kepala-daftar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ringkas-kecil { color: var(--teks-lemah); font-size: 0.88rem; }
.input-cari { margin-bottom: 10px; }
.tombol-tautan { cursor: pointer; }

.baris-chip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: #ffffff;
  color: var(--teks);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.chip-aktif { background: var(--primer); border-color: var(--primer); color: #ffffff; }

.lencana { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.lencana-terbuka { background: var(--aksen-muda); color: var(--aksen-teks); }
.lencana-menunggu { background: var(--bahaya-muda); color: var(--bahaya); }
.lencana-lunas { background: var(--sukses-muda); color: var(--sukses); }
.lencana-batal { background: #eaecf0; color: #344054; }

/* ---------- Meja ---------- */

.ringkas-meja { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ringkas-kotak {
  flex: 1;
  min-width: 96px;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 10px 12px;
}
.ringkas-lebar { flex: 2; min-width: 150px; }
.ringkas-angka { display: block; font-size: 1.2rem; font-weight: 800; color: var(--primer-gelap); }
.ringkas-label { display: block; font-size: 0.8rem; color: var(--teks-lemah); }

.grid-meja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .grid-meja { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid-meja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kartu-meja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 104px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid var(--garis);
  background: var(--kartu);
  color: var(--teks);
  text-align: left;
  cursor: pointer;
}
.meja-nama { display: block; font-weight: 800; font-size: 1.05rem; }
.meja-status { display: block; font-size: 0.82rem; font-weight: 700; color: var(--teks-lemah); }
.meja-total { display: block; font-size: 1.05rem; font-weight: 800; margin-top: 4px; }
.meja-info { display: block; font-size: 0.8rem; color: var(--teks-lemah); }
.meja-terbuka { border-color: var(--aksen); background: var(--aksen-muda); }
.meja-terbuka .meja-status { color: var(--aksen-teks); }
.meja-menunggu { border-color: var(--bahaya); background: var(--bahaya-muda); }
.meja-menunggu .meja-status { color: var(--bahaya); }
.meja-kosong .meja-info { color: var(--teks-lemah); }

/* ---------- Pesanan ---------- */

.bar-kembali { margin: -4px 0 8px; }
.pemilih-menu { margin-top: 2px; }
.kartu-aksi-lain .grup-tombol { margin-top: 0; }
.tombol-kembali {
  min-height: 44px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--primer);
  font-weight: 700;
  cursor: pointer;
}
.kepala-pesanan { margin-bottom: 12px; }
.info-pesanan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--teks-lemah); font-size: 0.88rem; }

.daftar-item, .daftar-alokasi, .daftar-menu, .daftar-pembayaran, .daftar-orang, .daftar-baris, .daftar-peringkat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.baris-item, .baris-alokasi, .baris-menu, .baris-pembayaran {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eaecf0;
  flex-wrap: wrap;
}
.baris-item-teks { flex: 1; min-width: 150px; }
.baris-item-nama { display: block; font-weight: 700; }
.baris-item-catatan { display: block; font-size: 0.85rem; color: var(--aksen-teks); font-style: italic; }
.baris-item-harga { display: block; font-size: 0.86rem; color: var(--teks-lemah); }
.baris-item-dibayar { display: block; font-size: 0.8rem; color: var(--sukses); font-weight: 600; }
.baris-item-aksi { display: flex; align-items: center; gap: 6px; }
.tombol-qty {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #9ccfd1;
  background: #ffffff;
  color: var(--primer-gelap);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
}
.qty-angka { display: inline-block; min-width: 28px; text-align: center; font-weight: 800; }
.tombol-catatan {
  min-height: 44px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--primer);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.baris-alokasi-habis { opacity: 0.7; }

.ringkasan-total { margin-top: 12px; border-top: 1px dashed var(--garis); padding-top: 10px; }
.baris-total { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; gap: 10px; }
.baris-total strong { font-size: 1.12rem; color: var(--primer-gelap); }
.baris-total-sisa strong { color: var(--bahaya); }

.baris-tombol-struk { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.baris-tombol-struk .tombol-sekunder { flex: 1; min-width: 140px; }

.grid-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .grid-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tombol-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #9ccfd1;
  background: var(--primer-muda);
  color: var(--teks);
  text-align: left;
  cursor: pointer;
}
.tombol-menu-nama { display: block; font-weight: 700; font-size: 0.92rem; }
.tombol-menu-harga { display: block; font-size: 0.85rem; color: var(--primer-gelap); font-weight: 700; }
.tombol-menu-habis { background: #f2f4f7; border-color: var(--garis); cursor: not-allowed; }
.tombol-menu-habis .tombol-menu-nama { text-decoration: line-through; color: var(--teks-lemah); }
.tombol-menu-habis .tombol-menu-harga { color: var(--bahaya); }

/* ---------- Bayar ---------- */

.tab-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
@media (min-width: 480px) { .tab-mode { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tab {
  flex: 1;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--garis);
  background: #ffffff;
  color: var(--teks);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.tab-aktif { background: var(--primer); border-color: var(--primer); color: #ffffff; }

.kartu-tagihan { background: var(--primer-muda); border-color: #9ccfd1; }
.kartu-hasil { border-color: var(--sukses); background: var(--sukses-muda); }
.kartu-hasil h2 { color: var(--sukses); }
.kembalian { font-size: 1.1rem; }
.kartu-lunas { border: 2px solid var(--sukses); text-align: center; }
.kartu-lunas h2 { color: var(--sukses); font-size: 1.6rem; letter-spacing: 0.08em; }

.baris-orang {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eaecf0;
}
.baris-orang-nama { flex: 1; font-weight: 700; }
.baris-orang-jumlah { font-weight: 800; }
.baris-orang-lunas .baris-orang-jumlah { color: var(--teks-lemah); text-decoration: line-through; }
.baris-pembayaran-jumlah { font-weight: 800; }

/* ---------- Menu ---------- */

.baris-menu-habis .baris-item-nama { color: var(--teks-lemah); }
.baris-menu-aksi { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.saklar {
  min-height: 44px;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #f0b4ae;
  background: var(--bahaya-muda);
  color: var(--bahaya);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.saklar-nyala { border-color: #9fd4bf; background: var(--sukses-muda); color: var(--sukses); }

/* ---------- Laporan ---------- */

.grid-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@media (min-width: 720px) { .grid-angka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kotak-angka { background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 12px; }
.kotak-angka-utama { grid-column: 1 / -1; background: var(--primer); border-color: var(--primer); }
@media (min-width: 720px) { .kotak-angka-utama { grid-column: auto; } }
.kotak-angka-label { display: block; font-size: 0.82rem; color: var(--teks-lemah); }
.kotak-angka-nilai { display: block; font-size: 1.25rem; font-weight: 800; color: var(--teks); }
.kotak-angka-utama .kotak-angka-label, .kotak-angka-utama .kotak-angka-nilai { color: #ffffff; }
.info-belum { background: var(--aksen-muda); color: var(--aksen-teks); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; }

.baris-peringkat { padding: 8px 0; border-bottom: 1px solid #eaecf0; }
.baris-peringkat-teks { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.baris-peringkat-angka { display: block; font-size: 0.86rem; color: var(--teks-lemah); }
.batang { display: block; height: 6px; background: #eaecf0; border-radius: 6px; margin-top: 6px; overflow: hidden; }
.batang-isi { display: block; height: 100%; background: var(--aksen); border-radius: 6px; }

.baris-ringkasan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eaecf0;
  flex-wrap: wrap;
}
.baris-ringkasan-label { display: block; flex: 1; min-width: 140px; color: var(--teks); }
.baris-ringkasan-nilai { display: block; font-weight: 800; white-space: nowrap; }

.kartu-tentang p { margin: 4px 0; }
.baris-riwayat { flex-wrap: nowrap; }
.baris-riwayat .baris-ringkasan-label { min-width: 0; }
.riwayat-kanan { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.riwayat-waktu { display: block; font-size: 0.84rem; color: var(--teks-lemah); }

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(16, 24, 40, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.modal-kartu {
  background: var(--kartu);
  border-radius: 16px;
  padding: 18px;
  width: 100%;
  max-width: 440px;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 560px) { .modal { align-items: center; } }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.toast-info { background: #1d2939; }
.toast-sukses { background: var(--sukses); }
.toast-peringatan { background: var(--peringatan); }

/* ---------- Cetak (dialog browser, jalur cadangan iPhone/Firefox) ---------- */

.area-cetak { display: none; }

@media print {
  body * { visibility: hidden !important; }
  #area-cetak, #area-cetak * { visibility: visible !important; }
  #app-utama, .kaki-pembuat, .nav-bawah, .toast, .modal { display: none !important; }
  #area-cetak {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: 12px;
    white-space: pre;
  }
}

/* ---------- Kaki pembuat wicomdigihub ---------- */

.kaki-pembuat {
  background: #080b10;
  color: #9aa5b4;
  text-align: center;
  padding: 14px 16px calc(84px + env(safe-area-inset-bottom, 0px));
  font-size: 0.85rem;
}
.layar-aktivasi:not([hidden]) ~ .kaki-pembuat { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.kaki-pembuat-isi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; }
.kaki-pembuat b { color: #ffffff; }
.kaki-pembuat a { color: #ffffff; text-decoration: none; font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }
.kaki-pembuat a:hover { color: #ffd4da; }