/* ==========================================================================
   GuardIn - Aplikasi Absensi Check Pos
   File: assets/css/style.css
   Berisi seluruh custom style tambahan di luar utility class Tailwind.
   ========================================================================== */

* {
  -webkit-tap-highlight-color: transparent;
}

/* Transisi perpindahan halaman (route) */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* Transisi fade untuk perpindahan tab/view di dalam satu halaman (mis. admin) */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Panel kaca buram (dipakai di landing page) */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Animasi garis pemindai QR */
@keyframes scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(200%);
  }
}

/* Spinner kecil untuk proses backup/cleanup di panel admin */
@keyframes spin-soft {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-soft {
  animation: spin-soft 0.8s linear infinite;
}

/* Fix untuk halaman full-screen kamera (Scan & Verify) di HP.
   `100vh` di banyak browser mobile dihitung dari tinggi viewport MAKSIMUM
   (saat address bar disembunyikan), padahal area yang benar-benar terlihat
   lebih pendek saat address bar tampil - efeknya halaman jadi bisa
   di-scroll sedikit padahal seharusnya pas presisi layar. `100dvh`
   (dynamic viewport height) mengikuti tinggi yang benar-benar terlihat
   saat itu. Baris `height: 100vh` tetap dipertahankan sebagai fallback
   untuk browser lama yang belum mengenal satuan dvh. */
.h-screen-fix {
  height: 100vh;
  height: 100dvh;
}

/*
 * FASE 20 (sisipan) - Sama masalahnya dengan .h-screen-fix di atas (unit
 * "100vh" browser HP itu tidak akurat - address bar yang muncul/hilang
 * bikin ada ruang kosong berlebih di bagian bawah halaman), tapi versi
 * "minimal" (min-height, bukan height pas) - dipakai di halaman yang
 * kontennya BOLEH lebih tinggi dari layar (scroll natural), beda dari
 * .h-screen-fix yang kontennya memang harus PAS 1 layar penuh (Scan QR).
 * SENGAJA tidak pakai max-h-screen di sini - beberapa halaman ini punya
 * overflow-hidden di elemen yang sama, jadi max-height berisiko MEMOTONG
 * konten kalau layarnya kecil/pengaturan font besar - min-height lebih
 * aman (tetap bisa scroll natural kalau memang perlu, cuma "ruang
 * kosong hantu" di bawahnya yang hilang).
 */
.min-h-screen-fix {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ==========================================================================
   FASE 13 - Mode Cetak/Print (dipakai Report Internal & External)
   Pendekatan: pakai fitur "Save as PDF" bawaan browser lewat dialog print,
   BUKAN library PDF pihak ketiga - lihat CHANGELOG.md v2.19.0 untuk alasan
   lengkapnya. Elemen berkelas .no-print disembunyikan saat mencetak
   (sidebar, tombol, filter kontrol), elemen .print-only cuma muncul SAAT
   mencetak (header laporan formal yang tidak perlu terlihat di layar biasa).
   ========================================================================== */
@media print {
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  main {
    overflow: visible !important;
    height: auto !important;
  }
  body {
    background: white !important;
  }
  /* Cegah baris tabel terpotong di tengah saat pindah halaman cetak */
  table, tr, td, th {
    page-break-inside: avoid;
  }
}
.print-only {
  display: none;
}