/* ==========================================================================
    📦 HUB LOGIKA VISUAL KARTU ANTREAN MEJA DAPUR (semua_pesanan.css)
    ========================================================================== */
main {
  display: block !important; /* Hancurkan flexbox kiri-kanan kasir */
  flex-direction: row !important; /* Reset arah elemen */
  width: 100% !important; /* Lebar penuh layar */
  max-width: 100% !important;
  height: auto !important; /* Biarkan tinggi mengalir bebas ke bawah */
  overflow-y: auto !important; /* Aktifkan scroll vertikal murni */
  box-sizing: border-box !important;
  padding: 20px !important; /* Beri celah dalam yang lapang */
}

.judul-bagian {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 20px !important;
  border-left: 4px solid #2563eb !important; /* Garis aksen biru vertikal */
  padding-left: 10px !important;
  display: block !important;
  width: 100% !important;
}
h2.judul-bagian,
.judul-bagian {
  display: block !important;
  width: 100% !important; /* 🌟 Paksa lebar penuh agar bisa rata tengah */
  max-width: 100% !important;
  text-align: center !important; /* 🌟 KUNCI UTAMA: Memaksa teks berdiri tepat di center layar */
  font-size: 1.4rem !important; /* Diperbesar sedikit agar tegas sebagai judul utama */
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 10px 0 25px 0 !important; /* Jarak ruang atas dan bawah yang seimbang */
  padding: 0 0 8px 0 !important;

  /* 🌟 DEKORASI BARU: Garis biru dipindah ke bawah teks agar simetris di posisi center */
  border-left: none !important; /* Hapus garis kiri lama */
  border-bottom: 3px solid #2563eb !important;

  /* Buat garis bawahnya pendek dan manis tepat di tengah teks */
  width: fit-content !important;
  margin-left: auto !important; /* Kunci otomatis rata tengah */
  margin-right: auto !important; /* Kunci otomatis rata tengah */
  clear: both !important;
}

#containerAntrean,
.grid-pesanan-aktif {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* 🌟 KISI GRID UTAMA: Mengunci baris agar selalu 3 kolom kartu sejajar di monitor kasir */
.grid-pesanan-aktif {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(320px, 1fr)
  ) !important; /* Membagi kolom otomatis sesuai lebar monitor */
  gap: 20px !important; /* Jarak antar kotak nota */
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 15px !important;
  box-sizing: border-box !important;
}

/* 🌟 KARTU ANTRIAN PESANAN: Dipaksa mengunci tinggi minimal agar tegak sejajar horizontal */
.kartu-pesanan {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.kartu-pesanan:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}
.header-pesanan {
  padding: 12px 15px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-pesanan.dapur {
  background-color: #f59e0b;
}
.isi-pesanan {
  padding: 15px;
  flex-grow: 1;
}
.item-list-pesanan {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 1px dashed #f3f4f6;
  color: #374151;
}
.footer-pesanan {
  padding: 12px 15px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-bayar-order {
  background-color: #22c55e;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn-bayar-order:hover {
  background-color: #16a34a;
}

/* Bagian Atas Kartu (Nomor Meja & Nota) */
.header-pesanan.dapur {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

/* Bagian Tengah Kartu (Daftar Item Menu & Catatan Pesanan) */
.isi-pesanan {
  .kartu-pesanan {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* Memaksa semua kartu dalam satu baris tingginya sama */
  }
}

/* Bagian Bawah Kartu (Total Tagihan & Aksi Tombol) */
.footer-pesanan {
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: auto !important; /* Paksa tombol selalu mengunci di dasar kartu */
}

.hide-for-staff {
  display: none !important;
}

#modal-struk-preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* 🌟 PERBAIKAN: Memisahkan komponen yang rusak */
.kartu-komponen.struk-box {
  background: white;
  border-radius: 12px;
  padding: 20px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Container pembungkus QRIS agar responsif */
.wrapper-barcode-qris {
  display: none; /* Default hidden */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
  padding: 15px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Mengunci ukuran gambar QRIS agar pas di HP */
.gambar-qrcode-api {
  width: 200px !important;
  height: 200px !important;
  object-fit: contain;
  margin-bottom: 10px;
  background: white;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* Agar teks di bawah QRIS tidak kepanjangan */
.wrapper-barcode-qris p {
  font-size: 0.85rem !important;
  text-align: center;
  color: #2563eb;
  font-weight: 600;
}

/* Area konten struk agar bisa di-scroll di dalam */
#area-print-struk {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 10px;
}

.baris-split-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.pesanan-lunas {
  border: 2px solid #10b981 !important;
  background-color: #f0fdf4 !important;
}

.kartu-pesanan.pesanan-lunas {
  border: 2px solid #10b981 !important;
  background-color: #f0fdf4 !important;
}

.header-pesanan.lunas {
  background-color: #10b981 !important;
  color: white;
}

.header-pesanan.dapur {
  background-color: #f59e0b !important;
}

/* Animasi sedikit agar tombol selesaikan pesanan lebih terlihat */
.pesanan-lunas button {
  transition: transform 0.2s;
}
.pesanan-lunas button:active {
  transform: scale(0.95);
}

.kartu-pesanan.status-lunas {
  border: 2px solid #10b981 !important;
  background-color: #f0fdf4 !important;
}

.header-pesanan.lunas-bg {
  background-color: #10b981 !important;
  color: white !important;
}

.btn-close-kartu {
  background-color: #64748b !important;
  color: white !important;
  border: none !important;
  padding: 12px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  width: 100% !important;
}

.btn-close-kartu:hover {
  background-color: #475569 !important;
}
/* ==========================================================================
    📱 ATURAN MULTI RESPONSIVE LAYAR MONITOR TOKO
    ========================================================================== */

/* Resolusi Laptop Medium / Layar Standar (Lebar Maksimal 1366px) */
@media (max-width: 1366px) {
  .grid-pesanan-aktif {
    grid-template-columns: repeat(
      2,
      1fr
    ) !important; /* Otomatis melipat jadi 2 kolom kartu */
    gap: 14px !important;
  }
}

/* Resolusi HP / Gawai Android & iOS (Lebar Maksimal 768px) */
@media (max-width: 768px) {
  .grid-pesanan-aktif {
    grid-template-columns: repeat(
      1,
      1fr
    ) !important; /* Melipat vertikal 1 kolom penuh di gawai */
    gap: 12px !important;
  }

  .kartu-pesanan {
    min-height: auto !important; /* Bebaskan kuncian tinggi mati agar pas di screen HP */
    padding: 14px !important;
  }
}

@media (max-width: 600px) {
  .grid-pesanan-aktif {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}

/* ==========================================================================
   🖨️ STANDARISASI UKURAN PRINTER THERMAL KASIR (58MM & 80MM)
   ========================================================================== */

/* 1. Aturan Tampilan di Layar Monitor (Pratinjau Sebelum Dicetak) */
.konten-struk-preview,
#area-print-struk {
  background: #ffffff !important;
  color: #000000 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 13px !important; /* Ukuran font sedikit diperbesar agar jelas */
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  margin: 0 auto !important;

  /* 🌟 PERBAIKAN: Lebar ditingkatkan dari 200px ke 280px agar harga tidak terpotong */
  width: 100% !important;
  max-width: 280px !important;
  overflow-x: hidden !important; /* Mencegah scroll menyamping */
  word-wrap: break-word !important;
} /* 2. 🌟 KUNCI EMAS: OTOMATIS AKTIF SAAT PRINTER LEPAS KERTAS (CETAK NYATA) */
@media print {
  /* Sembunyikan semua elemen di layar */
  body * {
    visibility: hidden;
  }
  /* Kecuali area struk dan isinya */
  #modal-struk-preview,
  #modal-struk-preview * {
    visibility: visible;
  }
  #area-print-struk,
  #area-print-struk * {
    visibility: visible;
  }
  /* Posisikan area struk di pojok kiri atas kertas printer */
  #modal-struk-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: white !important;
  }
  #area-print-struk {
    position: absolute;
    left: 0;
    top: 0;
    width: 58mm; /* Lebar kertas thermal */
  }
  /* Sembunyikan tombol-tombol saat print */
  button {
    display: none !important;
  }
}