/*
 * Tampilan layar sempit (HP). Dimuat di semua halaman lewat pendaftaran
 * plugin AppResponsif di config/adminlte.php. Aturan tabelnya ada di
 * docs/konvensi-layar-crud.md bagian "Tabel di layar HP".
 */

/*
 * Tabel yang dibungkus .table-responsive tepat di dalam card-body tampil sama
 * dengan tabel yang langsung di card-body. AdminLTE hanya menghapus garis atas
 * kepala tabel untuk .card-body > .table; tanpa aturan ini garis itu
 * bertumpuk dengan garis bawah card-header.
 */
.card-body > .table-responsive > .table > thead > tr > th,
.card-body > .table-responsive > .table > thead > tr > td {
    border-top-width: 0;
}

/*
 * Nomor halaman: deretan "1 2 3 ... 138 139" lebih lebar dari layar HP dan
 * mendorong halaman melebar ke kanan. Biarkan turun ke baris berikutnya.
 */
.pagination {
    flex-wrap: wrap;
    row-gap: .25rem;
}

/*
 * Nama pengguna di navbar atas. Nama lengkap bergelar ("H. Mohammad
 * Hilaludin, S. Ag") lebih lebar daripada sisa navbar di HP. Navbar yang
 * melebar membuat SEMUA halaman ikut bisa digeser ke kanan bagi pemilik
 * nama itu. Di layar sempit, namanya dipendekkan dengan "..." sesuai ruang
 * yang tersisa.
 */
@media (max-width: 767.98px) {
    .main-header .navbar-nav.ml-auto,
    .main-header .user-menu {
        min-width: 0;
    }

    .main-header .user-menu > .nav-link {
        display: flex;
        align-items: center;
    }

    .main-header .user-menu > .nav-link > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}