/* Perbaikan bersama untuk semua halaman admin saat dibuka di ponsel.
   Dipasang SETELAH <style> tiap halaman supaya menang tanpa !important.

   Semua peramban di iPhone -- Safari, Opera, Chrome -- memakai mesin yang
   sama (WebKit), jadi yang berlaku di Safari berlaku juga di Opera iPhone. */

/* iPhone memperbesar halaman begitu kolom isian bertulisan di bawah 16px
   disentuh, dan tidak mengecilkannya lagi setelah selesai. Kolom di admin
   berukuran 14px, jadi setiap kali mengisi harga, memilih status bayar,
   atau tanggal, seluruh layar melebar dan harus dicubit kembali. 16px
   adalah batas yang membuat iPhone tidak memperbesar. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
}

/* Judul dan empat tautan tidak muat sebaris di layar ponsel: "Lihat situs"
   patah jadi dua baris di 375px, dan di 320px "Keluar" terdorong keluar
   layar sampai seluruh halaman bisa digeser menyamping. Judul diberi baris
   sendiri, tautannya berjajar di bawahnya tanpa patah. */
@media (max-width: 480px) {
    header.admin-kepala { flex-wrap: wrap; gap: 0; padding: 8px 8px 4px 12px; }
    header.admin-kepala h1 { flex: 1 0 100%; margin-bottom: 2px; }
    header.admin-kepala nav { margin-left: -6px; gap: 0; }
    /* Tujuh tautan (sejak ada menu Konten) baru muat sebaris di 375px
       dengan huruf dan jarak yang sedikit lebih rapat. */
    header.admin-kepala a { padding: 8px 4px; font-size: 13px; }
    header.admin-kepala .admin-kepala-pemisah { display: none; }
}

/* Kolom tanggal dan jam bawaan iPhone punya lebar minimum sendiri yang
   mengabaikan width:100%, sehingga meluber keluar kolom grid; saat kosong
   tingginya juga menciut jadi kotak gepeng tanpa tulisan. Hanya berlaku di
   WebKit iOS (-webkit-touch-callout tidak dikenal peramban lain), jadi
   tampilan di Android dan laptop tidak berubah. */
@supports (-webkit-touch-callout: none) {
    input[type=date], input[type=time] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        min-width: 0;
        text-align: left;
    }
    input[type=date]::-webkit-date-and-time-value,
    input[type=time]::-webkit-date-and-time-value {
        text-align: left;
        min-height: 1.5em;
    }
}