/**
 * assets/css/pwa.css
 * =============================================================================
 * [PATCH76] TAMPILAN SAAT PORTAL BERJALAN SEBAGAI APLIKASI TERPASANG.
 * =============================================================================
 *
 * Berkas ini hanya berlaku ketika Portal dibuka dari layar utama (standalone).
 * Di dalam tab peramban biasa, hampir seluruh isinya tidak aktif — jadi tidak
 * ada risiko mengubah tampilan yang sudah Anda kenal di desktop.
 *
 * MASALAH YANG DISELESAIKAN, dan kenapa ia hanya muncul setelah dipasang:
 *
 * Di dalam tab Safari, bilah alamat dan bilah tab menempati area poni dan
 * bilah gestur, jadi isi halaman tidak pernah bertemu keduanya. Begitu
 * aplikasinya berjalan standalone, kedua bilah itu hilang dan halaman
 * memenuhi layar dari ujung ke ujung — sehingga navbar masuk ke belakang jam
 * dan indikator baterai, dan tombol paling bawah tertutup bilah gestur.
 *
 * `env(safe-area-inset-*)` adalah ukuran area yang tidak boleh dipakai itu.
 * Nilainya nol di perangkat tanpa poni, jadi aturan yang sama aman di semua
 * perangkat tanpa perlu mendeteksi model ponsel.
 *
 * Semua ini butuh `viewport-fit=cover` di meta viewport — dipasang oleh
 * app/functions/pwa.php. Tanpa itu, seluruh env() di bawah bernilai nol dan
 * iPhone berponi menyisakan pita putih di atas dan bawah.
 */

/* Variabel dasar. Dipisah supaya nilainya bisa dipakai ulang dan diubah di
   satu tempat. */
:root {
    --pwa-atas:  env(safe-area-inset-top, 0px);
    --pwa-bawah: env(safe-area-inset-bottom, 0px);
    --pwa-kiri:  env(safe-area-inset-left, 0px);
    --pwa-kanan: env(safe-area-inset-right, 0px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANYA SAAT STANDALONE
   ═══════════════════════════════════════════════════════════════════════════

   Dua jalur, dan keduanya memang dibutuhkan:

     @media (display-mode: standalone)  — cara yang benar, didukung Android,
                                          desktop, dan Safari iOS 16.4+.
     html.pwa-standalone                — kelas yang dipasang assets/js/pwa-app.js
                                          berdasarkan navigator.standalone, untuk
                                          Safari iOS lama yang belum mengenal
                                          display-mode sama sekali.

   Isinya sengaja ditulis dua kali, BUKAN digabung dengan koma. Kalau satu
   selektor dalam daftar tidak dikenali peramban, seluruh aturannya dibuang —
   jadi menggabung `@media` modern dengan kelas cadangan justru mematikan
   keduanya di peramban lama, yaitu tempat cadangannya paling dibutuhkan. */

@media (display-mode: standalone), (display-mode: minimal-ui) {
    /* Navbar turun sejauh area poni. */
    .main-header  { padding-top: var(--pwa-atas); }

    /* Sidebar dimulai di bawah poni dan berakhir di atas bilah gestur. Tanpa
       yang kedua, menu paling bawah tidak bisa disentuh sama sekali. */
    .main-sidebar {
        padding-top:    var(--pwa-atas);
        padding-bottom: var(--pwa-bawah);
    }

    /* Jarak dari bilah gestur bawah, supaya tombol terakhir pada formulir
       panjang tidak tertutup. */
    .content-wrapper { padding-bottom: calc(var(--pwa-bawah) + 8px); }

    /* Lanskap di ponsel berponi: poninya pindah ke samping. */
    .content-wrapper,
    .main-footer {
        padding-left:  var(--pwa-kiri);
        padding-right: var(--pwa-kanan);
    }

    /* Sama dengan background_color di manifest, supaya perpindahan dari layar
       pembuka ke halaman tidak berkedip putih. */
    body { background-color: #f4f6f9; }
}

/* Cadangan untuk Safari iOS lama. Isinya sama persis. */
html.pwa-standalone .main-header  { padding-top: var(--pwa-atas); }
html.pwa-standalone .main-sidebar {
    padding-top:    var(--pwa-atas);
    padding-bottom: var(--pwa-bawah);
}
html.pwa-standalone .content-wrapper { padding-bottom: calc(var(--pwa-bawah) + 8px); }
html.pwa-standalone .content-wrapper,
html.pwa-standalone .main-footer {
    padding-left:  var(--pwa-kiri);
    padding-right: var(--pwa-kanan);
}
html.pwa-standalone body { background-color: #f4f6f9; }

/* ═══════════════════════════════════════════════════════════════════════════
   HAL-HAL YANG TERASA "SEPERTI SITUS WEB" DI DALAM APLIKASI
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sorotan biru kotak saat menyentuh tombol di Android — penanda khas peramban
   yang tidak pernah muncul di aplikasi asli. */
html.pwa-standalone a,
html.pwa-standalone button,
html.pwa-standalone .btn,
html.pwa-standalone [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* Menyeret badan halaman ke bawah di iOS memunculkan efek pantul yang
   memperlihatkan latar kosong di belakang aplikasi. */
html.pwa-standalone,
html.pwa-standalone body {
    overscroll-behavior-y: none;
}

/* Teks judul dan label tidak perlu bisa diseleksi — menekan lama pada tabel
   di ponsel seharusnya menggulir, bukan memunculkan gagang seleksi teks.
   Isi tabel dan kolom isian SENGAJA dikecualikan: menyalin nominal gaji atau
   nomor pengajuan adalah hal yang wajar dilakukan orang. */
html.pwa-standalone .main-header,
html.pwa-standalone .main-sidebar,
html.pwa-standalone .card-header,
html.pwa-standalone .nav-link {
    -webkit-user-select: none;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SASARAN SENTUH
   ═══════════════════════════════════════════════════════════════════════════
   Beberapa tombol AdminLTE berukuran ~28px. Itu nyaman dengan tetikus dan
   meleset dengan jempol. 44px adalah ambang yang dipakai pedoman aksesibilitas
   iOS dan Android; di bawah itu tingkat salah-tekan naik tajam.

   Hanya di layar sentuh — pointer:coarse — supaya tampilan desktop tidak
   berubah sama sekali. */
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-xs),
    .page-link,
    .custom-control-label,
    .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Tombol dalam grup tabel dibiarkan kecil — kalau semuanya 44px, satu baris
       tabel jadi setinggi tiga baris dan daftar panjang tidak terbaca lagi.
       Yang diperbaiki di sana jaraknya, bukan tingginya. */
    td .btn-group .btn,
    td .btn-sm {
        min-height: 34px;
    }
    td .btn + .btn { margin-left: 6px; }
}