/* assets/css/style.css
   Pelengkap kecil di luar utility Tailwind: animasi, cursor crop, shutter kamera. */

html, body { overscroll-behavior-y: contain; }

/* Toast */
#app-toast.toast-show { opacity: 1 !important; display: block !important; }
#app-toast { opacity: 0; }

/* Sembunyikan scrollbar pada strip filter/thumbnail horizontal, tetap bisa discroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Kanvas area crop dokumen */
#crop-canvas, #capture-video, #qr-reader video {
  touch-action: none;
  border-radius: 0.75rem;
}
#crop-canvas { cursor: crosshair; }

/* Tombol shutter kamera bergaya aplikasi kamera native */
.shutter-btn {
  width: 68px; height: 68px; border-radius: 9999px;
  background: #fff; border: 4px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: transform 0.15s ease;
}
.shutter-btn:active { transform: scale(0.9); }

/* Kartu thumbnail filter */
.filter-thumb { transition: all 0.15s ease; }
.filter-thumb.active { box-shadow: 0 0 0 3px #4f46e5; }

/* Shimmer loading untuk galeri */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Spinner kecil generik */
.spinner {
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.spinner-dark { border: 2.5px solid rgba(79,70,229,0.2); border-top-color: #4f46e5; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Elemen video kamera QR agar konsisten & tidak overflow */
#qr-reader { border-radius: 1rem; overflow: hidden; }
#qr-reader video { object-fit: cover; }