/* =========================================================
   Cetak — struk pelanggan & tiket dapur
   -----------------------------------------------------------------
   Seluruh tata letak bergantung pada satu variabel: --lebar-kertas.
   Saat printer thermal 58/80mm dibeli nanti, tidak ada yang perlu
   dirombak — cukup pilih lebarnya di layar cetak.
   ========================================================= */

.print-area {
  --lebar-kertas: 80mm;
  --skala: 1;
  display: none;
}

.print-area[data-lebar="58"] { --lebar-kertas: 58mm; --skala: 0.86; }
.print-area[data-lebar="80"] { --lebar-kertas: 80mm; --skala: 1; }

/* ---------------------------------------------------------- kertas ---- */

.kertas {
  width: var(--lebar-kertas);
  margin: 0 auto;
  padding: 5mm 4mm 6mm;
  background: #fff;
  color: #000;
  font-family: var(--font-num);
  font-size: calc(12px * var(--skala));
  line-height: 1.42;
  /* tepi bergerigi — kesan sobekan kertas kasir */
  border-top: 2px dashed #000;
  border-bottom: 2px dashed #000;
}

.k-garis {
  border-top: 1px dashed #000;
  margin: 2.5mm 0;
}

/* ---------- kop struk ---------- */
.k-kop { text-align: center; }

.k-kop__mark {
  font-size: calc(20px * var(--skala));
  line-height: 1;
  margin-bottom: 1.5mm;
}

.k-kop__nama {
  font-family: var(--font);
  font-size: calc(19px * var(--skala));
  font-weight: 900;
  letter-spacing: 0.14em;
  margin: 0;
}

.k-kop__tagline {
  margin: 0.8mm 0 0;
  font-size: calc(9.5px * var(--skala));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- nomor antrian ---------- */
.k-antrian {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3mm;
}

.k-antrian__label {
  font-size: calc(10px * var(--skala));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.k-antrian__no {
  font-family: var(--font);
  font-size: calc(30px * var(--skala));
  font-weight: 900;
  line-height: 1;
}
.k-antrian__no::before { content: "#"; font-size: 0.6em; vertical-align: 0.18em; margin-right: 1px; }

.k-meta {
  display: flex;
  justify-content: space-between;
  gap: 3mm;
  margin-top: 1.5mm;
  font-size: calc(10px * var(--skala));
}

/* ---------- daftar item ---------- */
.k-item + .k-item { margin-top: 2mm; }

.k-item__nama {
  font-weight: 700;
  font-size: calc(12.5px * var(--skala));
}

.k-item__hitung {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  padding-left: 4mm;
  font-size: calc(11px * var(--skala));
}

/* ---------- total ---------- */
.k-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4mm;
  font-family: var(--font);
  font-weight: 900;
  font-size: calc(16px * var(--skala));
  letter-spacing: 0.02em;
}
.k-total span:last-child::before { content: "Rp"; font-size: 0.72em; margin-right: 1px; }

/* ---------- uang diterima & kembalian ---------- */
.k-bayar {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  font-size: calc(11.5px * var(--skala));
}
.k-bayar + .k-bayar { margin-top: 0.8mm; }
.k-bayar--kembali { font-weight: 700; font-size: calc(13px * var(--skala)); }

/* ---------- kaki ---------- */
.k-kaki { text-align: center; }
.k-kaki p { margin: 0; font-size: calc(10.5px * var(--skala)); }
.k-kaki__kecil { margin-top: 1mm !important; font-size: calc(8.5px * var(--skala)); }

/* ---------- garis gunting antar-dokumen ---------- */
.k-gunting {
  position: relative;
  width: var(--lebar-kertas);
  margin: 0 auto;
  padding: 4mm 0;
  text-align: center;
}
.k-gunting::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed #000;
}
.k-gunting span {
  position: relative;
  background: #fff;
  padding: 0 2mm;
  font-family: var(--font-num);
  font-size: calc(8.5px * var(--skala));
  color: #000;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------- tiket dapur ---- */
/* Huruf sengaja jauh lebih besar: dibaca sekilas sambil tangan sibuk memasak. */

.kertas--tiket { padding: 5mm 4mm; }

.t-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2mm;
  border-bottom: 2px solid #000;
}

.t-kop__label {
  font-family: var(--font);
  font-size: calc(13px * var(--skala));
  font-weight: 900;
  letter-spacing: 0.22em;
}

.t-kop__jam {
  font-size: calc(15px * var(--skala));
  font-weight: 700;
}

.t-antrian {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3mm;
  padding: 2.5mm 0;
  border-bottom: 2px solid #000;
}

.t-antrian__label {
  font-size: calc(11px * var(--skala));
  letter-spacing: 0.18em;
}

.t-antrian__no {
  font-family: var(--font);
  font-size: calc(46px * var(--skala));
  font-weight: 900;
  line-height: 1;
}

.t-daftar { padding-top: 2mm; }

.t-item {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: 1.6mm 0;
}
.t-item + .t-item { border-top: 1px dashed #000; }

.t-item__qty {
  flex: 0 0 auto;
  min-width: 9mm;
  font-family: var(--font);
  font-size: calc(21px * var(--skala));
  font-weight: 900;
  line-height: 1.1;
}

.t-item__nama {
  font-family: var(--font);
  font-size: calc(17px * var(--skala));
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.t-catatan {
  margin: 2mm 0 0;
  padding-top: 2mm;
  border-top: 2px solid #000;
  font-size: calc(13px * var(--skala));
  font-weight: 700;
}

/* =========================================================
   Pratinjau di layar — kertas putih di atas latar gelap
   ========================================================= */

.print-area.is-preview {
  display: block;
  padding: 4px 0 2px;
}

.print-area.is-preview .kertas {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.print-area.is-preview .k-gunting span { background: transparent; color: var(--text-dim); }
.print-area.is-preview .k-gunting::before { border-top-color: var(--text-dim); }

/* =========================================================
   Aturan saat benar-benar dicetak
   ========================================================= */

@page {
  size: auto;
  margin: 6mm;
}

@media print {
  html, body {
    background: #fff !important;
    height: auto;
  }
  body::before { display: none !important; }

  .app,
  .toast,
  .sheet { display: none !important; }

  .print-area {
    display: block !important;
    position: static;
    padding: 0;
  }

  .print-area .kertas {
    box-shadow: none;
    border-left: none;
    border-right: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Cegah lembar kedua kosong saat mencetak dokumen tunggal. */
  .print-area > :last-child { page-break-after: auto; }
}