/* ==========================================================================
   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 SATU BARIS tabel terpotong di tengah saat pindah halaman cetak -
     SENGAJA tidak termasuk elemen `table` itu sendiri (temuan 2026-08-04,
     Laporan External PDF multi-halaman) - "avoid" di level <table>
     mendorong browser mempertahankan SELURUH tabel tetap di 1 halaman,
     yang membatalkan tujuan <thead> berulang tiap halaman (lihat
     LaporanCetakPage.js) untuk laporan yang barisnya banyak/melebihi 1
     halaman. Row-level avoid (tr/td/th) tetap dipertahankan - itu yang
     benar-benar mencegah 1 baris terpotong jadi 2 bagian. */
  tr, td, th {
    page-break-inside: avoid;
  }
}
.print-only {
  display: none;
}

/* ==========================================================================
   FASE 39 - Kontrol zoom kustom Peta Rute Patroli (Dashboard Admin).
   SENGAJA discope ke class .guardin-patrol-zoom (ditambah manual lewat
   getContainer() di PatrolMapWidget.js, lihat catatan di sana) - Leaflet
   punya control zoom LAIN di aplikasi ini (mis. MapComparisonModal.js)
   yang TETAP pakai gaya bawaan Leaflet, tidak boleh ikut kena override ini.

   Gaya bawaan Leaflet (.leaflet-bar): tombol persegi siku, border abu-abu
   tebal, tanpa ruang antar tombol - diganti jadi pil membulat, transparan
   dengan efek kaca (senada kartu-kartu mengambang lain di peta ini), lebih
   modern & simple.

   FASE 39.1 (revisi setelah dicoba langsung) - awalnya dibuat vertikal
   (tombol +/- ditumpuk), TAPI user merasa itu kurang bagus di posisi
   pojok bawah - diganti HORIZONTAL (+/- sejajar berdampingan), senada
   gaya pil toggle "Lurus/Ikut Jalan" di pojok kiri-bawah peta yang sama.
   ========================================================================== */
.guardin-patrol-zoom.leaflet-bar {
  display: flex;
  flex-direction: row;
  border: none;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.guardin-patrol-zoom.leaflet-bar a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  font-size: 17px;
  font-weight: 700;
  color: #1d4ed8;
  background: transparent;
  border: none;
  display: block;
  text-align: center;
}
.guardin-patrol-zoom.leaflet-bar a:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.guardin-patrol-zoom.leaflet-bar a:hover {
  background: rgba(37, 99, 235, 0.12);
}
.guardin-patrol-zoom.leaflet-bar a.leaflet-disabled {
  color: #cbd5e1;
  background: transparent;
}
html.dark .guardin-patrol-zoom.leaflet-bar {
  background: rgba(17, 24, 39, 0.8);
}
html.dark .guardin-patrol-zoom.leaflet-bar a {
  color: #93c5fd;
}
html.dark .guardin-patrol-zoom.leaflet-bar a:first-child {
  border-right-color: rgba(255, 255, 255, 0.08);
}
html.dark .guardin-patrol-zoom.leaflet-bar a:hover {
  background: rgba(147, 197, 253, 0.15);
}
html.dark .guardin-patrol-zoom.leaflet-bar a.leaflet-disabled {
  color: #475569;
}