/* ===== Base responsive polish ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; display: block; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

.overflow-x-auto, .overflow-y-auto { -webkit-overflow-scrolling: touch; }

/* ===== Toast Notifications ===== */
.toast-enter { animation: toastIn 0.25s ease-out; }
.toast-exit { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } }

/* ===== Scrollbar (halus, tidak mengganggu tema gelap/terang) ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ===== Sidebar transition ===== */
#sidebar { will-change: transform; }

/* ===== Scanner / QR ===== */
#qr-reader video,
#qr-reader canvas,
#qr-reader img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

#qr-reader {
  position: relative;
  overflow: hidden;
}

#scan-frame {
  box-shadow:
    0 0 0 9999px rgba(2, 6, 23, 0.18),
    inset 0 0 0 2px rgba(255, 255, 255, 0.95);
}

/* ===== Kartu cetak QR ===== */
.print-card { page-break-inside: avoid; }

/* ===== Print Mode: hanya tampilkan kartu QR, sembunyikan semua UI navigasi ===== */
@media print {
  .no-print { display: none !important; }
  body { background: white !important; }
  .print-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; padding: 0 !important; }
  .print-card { break-inside: avoid; border: 1.5px solid #000 !important; }
}

/* ===== Sedikit polesan mikro-interaksi ===== */
button, a { transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease; }
button:active { transform: scale(0.97); }