/* Dialog — padanan `dialog.tsx` shadcn/ui, yang di baliknya Radix Dialog.

   Panelnya elemen `<dialog>` bawaan browser, dibuka dengan `showModal()`.
   Pilihan itu menggantikan hampir seluruh isi Radix Dialog dengan perilaku
   bawaan: top layer, jebakan fokus, halaman di belakang jadi inert, Escape
   menutup, fokus kembali ke trigger, dan lapisan kelam lewat `::backdrop`.

   Konsekuensinya di file ini: TIDAK ADA elemen overlay di markup, dan tidak ada
   `z-index` sama sekali. Bukan kelupaan — elemen top layer tidak mengenal
   z-index, dan kelamnya digambar `::backdrop`, bukan div. Token `--z-modal` dan
   `--z-overlay` dulu dibuat untuk pekerjaan itu; keduanya dibuang di Batch 27
   setelah berdiri tanpa satu pun pemakai sejak batch ini.

   Elemen `<dialog>` datang dengan gaya bawaan browser yang harus dilucuti dulu:
   border solid, padding, warna latar, dan `max-width`/`max-height` sebesar
   viewport. Semuanya ditimpa di bawah. */

.dialog {
  position: fixed;
  inset: 0;
  /* Elemen dialog memang dipusatkan lewat margin auto, bukan transform. Itu
     penting: transform dipakai untuk animasi, dan dua-duanya di properti yang
     sama akan saling menimpa. */
  margin: auto;
  width: 100%;
  /* Di layar sempit panel menyisakan satu space-8 di kiri dan kanan. */
  max-width: calc(100% - var(--space-8));

  height: fit-content;
  max-height: calc(100% - var(--space-8));
  overflow: auto;

  /* `display` SENGAJA tidak diset di sini — lihat `.dialog[open]`. */
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-background);
  color: var(--color-foreground);
  box-shadow: var(--shadow-4);
  font-family: var(--typography-family-sans);
  outline: none;

  opacity: var(--opacity-0);
  transform: scale(0.95);
  transition-property: opacity, transform, overlay, display;
  transition-duration: var(--duration-200);
  transition-timing-function: var(--easing-decelerate);
  /* Tanpa `allow-discrete`, browser mencabut panel dari top layer seketika saat
     ditutup dan animasi keluarnya tidak pernah terlihat. Pola yang sama dipakai
     seluruh overlay `popover` sejak Batch 4. */
  transition-behavior: allow-discrete;
}

@media (min-width: 640px) {
  .dialog {
    max-width: var(--dialog-max-width);
  }
}

/* `display` cuma boleh diset DI SINI, tidak di rule dasar. Elemen `<dialog>`
   yang tertutup disembunyikan browser lewat `display: none`; menulis
   `display: grid` di rule dasar mengalahkannya, dan panel yang "tak terlihat"
   (opacity nol) tetap menadah klik — menutupi tengah halaman tanpa jejak apa
   pun di layar.

   Aturan yang sama sudah tertulis untuk `[popover]` sejak Batch 4, dan tetap
   terulang di sini. Bedanya kali ini: gejalanya bergantung lebar layar, jadi
   seluruh test suite sempat lolos hijau di viewport 1440px dan baru ketahuan
   saat halaman dibuka di 900px. */
.dialog[open] {
  display: grid;

  /* `align-content: start` WAJIB ada, dan bukan soal selera tata letak.
     Nilai bawaan grid adalah `normal`, yang untuk baris berarti MEREGANG. Isi
     panel lalu meregang setinggi ruang yang tersedia, tinggi panel mengikuti
     isinya, dan hasilnya kotak sependek dua baris tampil setinggi layar dengan
     judul terlempar ke atas dan tombol ke bawah.

     Chromium dan Firefox tidak menunjukkan gejalanya, WebKit iya — jadi ini
     tidak akan pernah terlihat kalau cuma dicoba di satu browser. Ditemukan
     Tony dari layar Safari, sesudah 548 assertion di tiga engine hijau semua:
     tidak satu pun dari assertion itu mengukur TINGGI panel. */
  align-content: start;

  opacity: var(--opacity-100);
  transform: scale(1);
}

/* Keadaan awal animasi masuk. Tanpa @starting-style, elemen yang baru pindah
   dari display:none langsung muncul di keadaan akhir tanpa transisi. */
@starting-style {
  .dialog[open] {
    opacity: var(--opacity-0);
    transform: scale(0.95);
  }
}

.dialog::backdrop {
  background-color: var(--color-overlay);
  /* Blur ini penambahan di luar shadcn, dan sengaja diperlakukan sebagai
     PELENGKAP, bukan syarat: engine yang menolaknya tetap menampilkan kelam
     50% dan panel tetap terbaca. Itu yang membuatnya aman dipasang tanpa
     cabang per browser. Nilainya token semantic karena keempat komponen
     modal memakainya. */
  backdrop-filter: blur(var(--overlay-blur));
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  opacity: var(--opacity-0);
  /* `backdrop-filter` ikut ditransisikan supaya blurnya memudar bersama
     kelamnya, bukan muncul mendadak saat panel selesai bergerak. */
  transition-property: opacity, backdrop-filter, overlay, display;
  transition-duration: var(--duration-200);
  transition-timing-function: var(--easing-decelerate);
  transition-behavior: allow-discrete;
}

.dialog[open]::backdrop {
  opacity: var(--opacity-100);
}

@starting-style {
  .dialog[open]::backdrop {
    opacity: var(--opacity-0);
  }
}

/* --- Bagian --- */

.dialog__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.dialog__title {
  margin: 0;
  font-size: var(--typography-size-lg);
  font-weight: var(--typography-weight-semibold);
  line-height: var(--typography-leading-none);
}

.dialog__description {
  margin: 0;
  font-size: var(--typography-size-sm);
  line-height: var(--typography-leading-normal);
  color: var(--color-muted-foreground);
}

/* Tombol di layar sempit ditumpuk dengan yang UTAMA DI ATAS — itulah gunanya
   `column-reverse`: urutan DOM tetap batal-lalu-lanjut (yang benar untuk
   keyboard), sedangkan yang terlihat paling atas adalah tombol utama. */
.dialog__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .dialog__header {
    text-align: start;
  }

  .dialog__footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* --- Tombol tutup --- */

.dialog__close {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  opacity: var(--opacity-70);
  outline: none;
  transition: opacity var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.dialog__close:hover {
  opacity: var(--opacity-100);
}

/* Ring fokus memakai pola standar library (satu box-shadow), bukan
   `ring-2 ring-offset-2` seperti di sumbernya. Konsistensi di dalam library
   menang: penanda fokus yang berbeda-beda per komponen justru mengajari
   pengguna bahwa fokus itu tidak bisa dikenali. */
.dialog__close:focus-visible {
  opacity: var(--opacity-100);
  box-shadow: 0 0 0 var(--ring-width) var(--color-ring-focus);
}

.dialog__close svg {
  pointer-events: none;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog::backdrop {
    transition-property: overlay, display;
  }

  .dialog,
  .dialog[open] {
    transform: none;
  }
}