/* =====================================================================
   BEST ACADEMY — ba-mobile.css   (24 Agustus 2026)

   Jaring pengaman tampilan HP untuk halaman-halaman yang punya CSS
   sendiri tanpa breakpoint: login.php, login-peserta.php, edit.php,
   ganti-password.php, ganti-sandi-admin.php, detail.php,
   admin/index.php, admin/edit.php, admin/upload.php, dan sejenisnya.

   PRINSIP: berkas ini hanya MENAMBAL, tidak mendesain ulang. Semua
   aturan dibungkus @media supaya tampilan desktop TIDAK tersentuh sama
   sekali, dan kekhususan (specificity) sengaja dijaga rendah supaya CSS
   asli tiap halaman tetap menang bila memang sudah mengatur hal yang
   sama.

   PEMASANGAN: taruh di public_html/ba-mobile.css, lalu pastikan tiap
   halaman memuat baris berikut sebelum </head>:
       <link rel="stylesheet" href="/ba-mobile.css">
   ===================================================================== */


/* ── Berlaku di SEMUA ukuran: cegah geser samping ────────────────── */

/* Elemen yang lebih lebar dari layar (gambar tanpa lebar, tabel, iframe
   sematan) memaksa seluruh halaman bisa digeser ke kanan. Di HP ini
   terasa seperti halaman "meleset" dan sulit dibaca. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}


/* ── TABLET (≤820px) ─────────────────────────────────────────────── */
@media (max-width: 820px) {

    /* Tabel lebar dibungkus agar hanya tabelnya yang digeser, bukan
       seluruh halaman. Bekerja tanpa mengubah HTML: pembungkus dibuat
       dari elemen tabel itu sendiri. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ── HANDPHONE (≤620px) ──────────────────────────────────────────── */
@media (max-width: 620px) {

    /* 16px adalah ambang batas auto-zoom Safari iOS. Di bawah nilai itu
       iOS SELALU memperbesar layar saat kolom disentuh, dan tidak pernah
       mengembalikan skalanya — penyebab keluhan "halaman jadi besar
       sendiri waktu mengisi formulir". */
    input, select, textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* Sasaran sentuh minimal ~44px sesuai pedoman aksesibilitas. */
    button,
    input[type="submit"],
    input[type="button"],
    a.btn, .btn, .button {
        min-height: 44px;
    }

    /* Wadah berlebar tetap (mis. width:600px) memaksa halaman melebar.
       Ini menetralkannya tanpa perlu menyunting CSS asli tiap halaman. */
    .container, .card, .box, .wrap, .wrapper, .panel, .content, form {
        max-width: 100% !important;
    }

    table {
        font-size: .8rem;
    }

    th, td {
        padding: 8px 9px;
        white-space: normal;
        word-break: break-word;
    }

    /* Kolom tanggal, NIP, dan sejenisnya sering dipatok nowrap sehingga
       tabel jadi jauh lebih lebar dari yang perlu. */
    th {
        white-space: normal;
    }
}


/* ── HP SEMPIT (≤380px) ──────────────────────────────────────────── */
@media (max-width: 380px) {

    table {
        font-size: .74rem;
    }

    th, td {
        padding: 7px 7px;
    }
}


/* ── CETAK ───────────────────────────────────────────────────────── */
@media print {

    /* Tabel harus kembali jadi tabel biasa saat dicetak; display:block
       di atas akan merusak tata letak rapor dan invoice bila terbawa. */
    table {
        display: table;
        overflow: visible;
    }
}