/* HR Lite - custom styles (mobile-first) */

.btn-lg {
    min-height: 44px;
}

/* Tombol toggle tampilkan password - ukuran nyaman disentuh jari di HP */
.password-toggle {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Di layar sempit (HP), tombol kecil (btn-sm) di tabel admin/riwayat dan
 * checkbox native dibesarkan supaya nyaman disentuh jari (>=44px).
 * Di layar lebar (laptop/PC), tabel admin tetap ringkas seperti semula.
 */
@media (max-width: 576px) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    input[type="checkbox"] {
        width: 1.4em;
        height: 1.4em;
    }
}

/*
 * Kunci font-size EKSPLISIT untuk <select>/<option> - jangan dibiarkan
 * default/relatif. Browser mobile (terutama native picker Android saat
 * <select> disentuh) bisa render teks jauh lebih besar dari seharusnya
 * kalau ukurannya ambigu, termasuk saat pakai .form-select-lg (Bootstrap
 * set 1.25rem untuk varian itu). 16px cukup besar untuk mobile & tidak
 * memicu auto-zoom, tapi tidak sampai raksasa di native picker.
 */
select,
option,
.form-select,
.form-select-lg {
    font-size: 16px;
}

/*
 * Sidebar menu (offcanvas) - lebih sempit dari default Bootstrap (400px)
 * supaya di HP layar sempit tetap terlihat sebagai "sidebar" (menutupi
 * sebagian layar) dan bukan hampir menutupi layar penuh. Di layar lg+
 * lebar ini diabaikan karena offcanvas jadi menu horizontal biasa.
 */
#sidebarMenu {
    --bs-offcanvas-width: 300px;
}

/* Panah submenu "Pengajuan" - berputar 180 derajat saat submenu terbuka */
.nav-submenu-caret {
    display: inline-block;
    transition: transform 0.2s ease;
}

.nav-link[aria-expanded="true"] .nav-submenu-caret {
    transform: rotate(180deg);
}