/**
 * Section 1 — keadaan "belum ada laporan".
 *
 * Ditulis sebagai CSS komponen, bukan utility Tailwind, karena
 * public/dist/style.css di repo ini sudah berupa hasil build dan sumbernya
 * (src/input.css) tidak ikut disertakan: kelas utility baru tidak akan pernah
 * ter-generate. Penamaan mengikuti pola blok__elemen yang memang sudah dipakai
 * di dalam build itu (mis. .kop-navigasi__dalam).
 *
 * Seluruh ukuran diambil dari token yang sama dengan kartu korsel
 * (--kartu-lebar/--kartu-tinggi/--kartu-sela/--kartu-pias), jadi "rak kosong"
 * ini menempati geometri yang sama persis dengan korsel berisi — baik di mode
 * aliran maupun panggung. Ambang mode disalin dari :root pada build
 * (min-width:1100px dan min-height:640px).
 */

.pantauan-kosong {
  /* Kabut: warna teks di atas kaca gelap. Sekomponen dengan --color-laut. */
  --kosong-asap: 232 230 225;
  --kosong-garis: rgb(232 230 225 / 0.16);
  --kosong-mono: clamp(10px, 2.6vw, 11px);

  position: relative;
  width: 100%;
  /* Sama dengan jendela korsel (pt-[10px] pb-[18px]) supaya tinggi blok ini
     dan blok korsel identik — statistik di bawahnya tidak ikut bergeser. */
  padding-top: 10px;
  padding-bottom: 18px;
}

/* Jendela: memotong slot samping persis seperti jendela korsel. */
.pantauan-kosong__jendela {
  position: relative;
  height: var(--kartu-tinggi);
  overflow: hidden;
}

.pantauan-kosong__rak {
  display: flex;
  justify-content: center;
  gap: var(--kartu-sela);
  height: 100%;
}

.pantauan-kosong__slot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--kartu-lebar);
  height: 100%;
  border: 1px solid var(--kosong-garis);
  border-radius: 12px;
}

/* Slot samping: kaca yang jauh lebih tipis, dengan peredupan yang sama dengan
   kartu non-aktif di korsel (opacity .45). Cukup untuk membuat bentuk rak
   terbaca, tanpa menambah apa pun yang harus dibaca. */
.pantauan-kosong__slot--sisi {
  border-color: rgb(232 230 225 / 0.26);
  background: rgb(20 16 15 / 0.26);
  opacity: 0.45;
}

/* Slot tengah: kaca berasap. Sengaja tembus pandang dan lebih terang di bawah
   — nyala api di foto latar merembes lewat bagian bawah kartu, jadi panel ini
   terbaca sebagai bagian dari halaman, bukan kotak galat yang ditempelkan di
   atasnya. */
.pantauan-kosong__slot--utama {
  display: flex;
  flex-direction: column;
  padding: var(--kartu-pias);
  border-color: rgb(232 230 225 / 0.24);
  background: linear-gradient(180deg, rgb(24 18 16 / 0.84) 0%, rgb(20 16 15 / 0.58) 100%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.38);
  color: rgb(var(--kosong-asap));
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
  backdrop-filter: blur(5px) saturate(1.1);
}

.pantauan-kosong__isi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Bingkai foto kosong. Aturannya disalin dari <img> kartu asli (token
   --gambar-lebar/--gambar-jarak, rasio 3:2 di panggung, memanjang mengisi
   sisa ruang di aliran), sehingga kartu ini bukan sekadar kotak pesan: ia
   memperlihatkan susunan kartu berita yang sebentar lagi menempatinya. */
.pantauan-kosong__bingkai {
  position: relative;
  flex: 1;
  min-height: 60px;
  align-self: center;
  width: var(--gambar-lebar);
  margin-top: var(--gambar-jarak);
  border: 1px solid rgb(232 230 225 / 0.18);
  border-radius: 10px;
  background: rgb(232 230 225 / 0.03);
  overflow: hidden;
}

.pantauan-kosong__judul {
  font-size: var(--ukuran-label);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.pantauan-kosong__catatan {
  margin-top: clamp(8px, 2vw, 12px);
  max-width: 30ch;
  font-size: var(--ukuran-catatan);
  font-weight: 400;
  line-height: 1.55;
  color: rgb(var(--kosong-asap) / 0.68);
}

/* Hanya tampil bagi yang memang bisa menambah kejadian (admin/editor);
   pengunjung biasa tidak diberi tugas yang tak bisa dikerjakannya. */
.pantauan-kosong__aksi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(14px, 3vw, 22px);
  padding-bottom: 4px;
  border-bottom: 1px solid rgb(230 0 18 / 0.5);
  font-size: var(--ukuran-catatan);
  font-weight: 600;
  color: #fff;
  transition: border-color 0.2s ease;
}

.pantauan-kosong__aksi:hover {
  border-bottom-color: var(--color-api, #e60012);
}

.pantauan-kosong__aksi svg {
  width: 0.9em;
  height: auto;
  transition: transform 0.2s ease;
}

.pantauan-kosong__aksi:hover svg {
  transform: translateX(3px);
}

/* Cap log: satu-satunya tempat angka tinggal, jadi satu-satunya tempat huruf
   mesin dipakai — kontras terhadap Poppins yang memegang seluruh halaman. */
.pantauan-kosong__rel {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(10px, 2.4vw, 18px);
  row-gap: 2px;
  margin-top: clamp(14px, 3vw, 20px);
  padding-top: clamp(10px, 2.4vw, 14px);
  border-top: 1px solid var(--kosong-garis);
  font-family: inherit;
  font-size: var(--kosong-mono);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgb(var(--kosong-asap) / 0.62);
}

.pantauan-kosong__stempel {
  color: rgb(var(--kosong-asap) / 0.4);
}

/* Sapuan: satu berkas cahaya melintas pelan di dalam bingkai foto yang masih
   kosong — satu-satunya gerak di panel ini, dan ditaruh justru di tempat yang
   sedang menunggu diisi. Warnanya putih hangat, bukan merah bara: di halaman
   pantauan karhutla, kilau merah terbaca sebagai "ada api terdeteksi" —
   persis kebalikan dari yang ingin dikatakan panel ini. */
.pantauan-kosong__sapuan {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 46%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 240 226 / 0.11) 45%,
    rgb(255 236 216 / 0.07) 62%,
    transparent 100%
  );
  filter: blur(30px);
  pointer-events: none;
  animation: pantauan-sapuan 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes pantauan-sapuan {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
  100% {
    transform: translateX(280%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pantauan-kosong__sapuan {
    display: none;
  }
}

/* Layar pendek: kartu tinggal ~230px, dan bingkai foto yang ikut memipih jadi
   terbaca sebagai kolom isian kosong, bukan tempat foto. Lebih baik dibuang —
   isi kartu naik mengisi ruangnya. Ambang disamakan dengan varian "pendek"
   pada build (max-height:620px). */
@media (max-height: 620px) {
  .pantauan-kosong__bingkai {
    display: none;
  }

  .pantauan-kosong__isi {
    flex: 1;
    justify-content: center;
  }
}

/* --- Mode panggung: kanvas 1920x1080 --------------------------------------
   Jendela korsel ada di x=70, y=140 (1780x680) dan kartu mulai 40px di
   dalamnya, jadi rak kosong dipasang di y=180 dengan tinggi kartu (594px).
   Tiga slot 526px + dua sela 76px = 1730px, muat utuh di lebar 1780px —
   tidak ada yang terpotong, sama seperti korsel berisi. */
@media (min-width: 1100px) and (min-height: 640px) {
  .pantauan-kosong {
    --kosong-mono: 13px;

    position: absolute;
    top: 180px;
    right: 70px;
    left: 70px;
    width: auto;
    padding: 0;
  }

  .pantauan-kosong__bingkai {
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
  }
}