/*
 * Penyesuaian kecil di atas tema django-unfold.
 *
 * Sengaja dijaga hampir kosong. Versi sebelumnya memaksa border-radius 16px
 * pada semua kartu, tombol berbentuk pil, efek melayang saat hover, dan
 * mengimpor Inter dari Google Fonts, semuanya dengan !important, sehingga
 * setiap halaman harus "ditambal" balik. Unfold sudah membawa Inter secara
 * lokal (/static/unfold/fonts/inter/) dan komponen kartu/tombolnya sendiri;
 * cukup pakai kelasnya, jangan ditimpa dari sini.
 */

/* Angka pada tabel (jam, menit, jumlah penerbangan) sejajar per digit. */
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* Tailwind di Unfold sudah di-purge; utilitas berikut tidak ikut terkirim. */
.font-mono {
    font-family: var(--font-mono);
}
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Indikator memuat, dipakai dashboard dan kartu rincian penerbangan. */
.av-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-base-300);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: av-spin 0.6s linear infinite;
}
@keyframes av-spin {
    to { transform: rotate(360deg); }
}

/* Latar modal dan lebar modal kecil (bg-black/50 & max-w-md ikut ter-purge). */
.av-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}
.av-modal-sm {
    max-width: 28rem;
}

/* Halaman login: kotak input nyaris tidak terlihat karena Unfold memakai
   border-base-200 (abu-abu sangat muda) di atas latar putih. Dinaikkan satu
   langkah supaya batas field jelas sebelum diklik. Selektor elemen+atribut
   (0,1,1) sudah mengalahkan .border-base-200 (0,1,0), jadi tanpa !important.
   Gaya fokus hijau bawaan Unfold tidak disentuh. */
body.login input[type="text"],
body.login input[type="password"] {
    border-color: var(--color-base-350);
}
.dark body.login input[type="text"],
.dark body.login input[type="password"] {
    border-color: var(--color-base-600);
}

/* Bobot border 350 tidak ada di CSS Unfold (Tailwind-nya sudah di-purge dan 350
   bukan bobot bawaan), sedangkan variabelnya sudah didaftarkan di settings.
   Dipakai kartu dashboard: base-200 terlalu samar, base-400 terlalu tegas. */
.border-base-350 {
    border-color: var(--color-base-350);
}

/* --- Animasi buka/tutup sidebar -------------------------------------------
   Dipasangkan dengan templates/admin/nav_sidebar.html. Unfold aslinya memakai
   x-show (display:none) sehingga perpindahannya mendadak; di sini lebarnya yang
   dianimasikan supaya area konten ikut melebar/menyempit mulus, dan panel menu
   (posisinya fixed, jadi tidak ikut terpotong lebar induknya) digeser keluar. */
.av-sidebar {
    width: var(--av-sidebar-width, 288px);
    transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
#nav-sidebar {
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.av-sidebar--closed {
    width: 0;
}
.av-sidebar--closed #nav-sidebar {
    transform: translateX(-100%);
    /* visibility ditunda sampai animasi selesai supaya menu yang tersembunyi
       tidak bisa dijangkau tab/pembaca layar, tanpa memotong animasinya. */
    visibility: hidden;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.24s;
}
/* Saat lebar sidebar sedang ditarik dengan mouse, transisi justru membuat
   gerakannya tertinggal dari kursor. Diletakkan setelah aturan di atas supaya
   menang tanpa !important. */
.av-sidebar--instant,
.av-sidebar--instant #nav-sidebar {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .av-sidebar,
    #nav-sidebar,
    .av-sidebar--closed #nav-sidebar {
        transition: none;
    }
}

/* --- Permission Filter Widget Enhancements ---
   Beri ruang lebih lebar agar nama permission operasional tidak terpotong (ellipsis). */
.selector-chosen,
.selector-available {
    min-width: 24rem;
}
@media (min-width: 1024px) {
    .selector-chosen,
    .selector-available {
        width: 32rem;
    }
}
.selector option {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    line-height: 1.4;
}