/* =============================================================================
   assets/css/select2-portal.css
   [PATCH82] SELECT2 AKHIRNYA PUNYA KOTAK.
   =============================================================================

   GEJALANYA. Di Data Karyawan — dan di setiap halaman lain yang memakai filter
   Select2 — dropdown-nya tampil tanpa kotak sama sekali: hanya tulisan
   "Semua Unit Usaha" dengan tanda × kecil di depannya, melayang di atas latar
   putih. Di sebelahnya, dropdown biasa (Jenis Kelamin, Alasan Keluar) tampil
   dengan kotak bergaris lengkap. Dua benda dengan fungsi yang sama, dua rupa
   yang sama sekali berbeda, berjajar dalam satu baris.

   SEBABNYA, dan ini bagian yang membuatnya bertahan begitu lama. Kodenya TIDAK
   salah. Setiap pemanggilan Select2 di aplikasi ini meminta tema Bootstrap 4:

       $('.select2-filter').select2({ theme: 'bootstrap4', width: '100%' });

   Permintaan itu membuat Select2 menempelkan kelas
   `select2-container--bootstrap4` pada wadahnya, lalu menyerahkan seluruh
   urusan rupa kepada stylesheet. Dan stylesheet temanya TIDAK PERNAH DIMUAT —
   layout/header.php hanya memuat `select2.min.css` yang dasar, dan berkas dasar
   itu hanya mengenal `select2-container--default`. Jadi aturan yang memberi
   kotak, tinggi, dan garis tepi tidak ada yang cocok dengan apa pun di halaman.

   Hasilnya bukan galat. Tidak ada yang merah di konsol, tidak ada 404 yang
   mencurigakan, tidak ada yang gagal dimuat. Yang terjadi hanyalah sekumpulan
   aturan CSS yang tidak menemukan sasarannya, dan sebuah kontrol yang jatuh ke
   bentuk paling telanjang yang bisa ia ambil. Kegagalan yang paling sulit
   dilacak selalu berbentuk begini: semuanya "berhasil", hasilnya saja salah.

   Satu-satunya halaman yang selama ini terlihat benar adalah Briefing, karena
   halaman itu — dan hanya halaman itu — memuat sendiri tema dari CDN.

   ─────────────────────────────────────────────────────────────────────────────
   KENAPA DITULIS SENDIRI, BUKAN MENARIK TEMA DARI CDN
   ─────────────────────────────────────────────────────────────────────────────

   Menambahkan satu baris <link> ke @ttskch/select2-bootstrap4-theme memang
   memperbaiki gejalanya. Tiga alasan berkas ini ditulis sendiri:

     1. CDN adalah tautan yang bisa putus. Sejak Patch 76 seluruh pustaka
        diarahkan ke server sendiri justru karena portal ini dipakai di lokasi
        yang jaringannya tidak selalu ramah. Menambah satu ketergantungan CDN
        baru untuk sesuatu sesepele garis tepi adalah langkah mundur.

     2. Yang dibutuhkan hanya sebagian kecilnya. Tema lengkapnya belasan
        kilobita dan mengurusi banyak hal yang tidak dipakai di sini.

     3. Ia harus mengenai DUA nama kelas. Sebagian kode memanggil
        `theme:'bootstrap4'` (→ `--bootstrap4`), sebagian lagi tidak memanggil
        tema sama sekali (→ `--default`; lihat pelatihan-ui.js). Tema resmi
        hanya mengurus yang pertama, sehingga yang kedua tetap berbeda rupa.
        Berkas ini mengenai keduanya, jadi tidak ada lagi yang bisa terlewat
        hanya karena satu pemanggilan lupa menyebut temanya.

   ATURAN SAAT MENYUNTING BERKAS INI: setiap ukuran di bawah disalin dari
   Bootstrap 4.6, bukan dikira-kira sampai "kelihatan pas". Kalau angkanya
   ditebak, Select2 akan meleset satu-dua piksel dari <select> di sebelahnya —
   dan selisih satu piksel pada dua kotak yang bersebelahan justru lebih
   mengganggu daripada perbedaan yang jelas.
   ============================================================================= */

:root {
    /* Disalin dari Bootstrap 4.6 — jangan ditebak. */
    --s2-border:        #ced4da;
    --s2-border-focus:  #80bdff;
    --s2-bayang-focus:  rgba(0, 123, 255, .25);
    --s2-teks:          #495057;
    --s2-teks-samar:    #6c757d;
    --s2-latar:         #fff;
    --s2-latar-mati:    #e9ecef;
    --s2-utama:         #007bff;
    --s2-radius:        .25rem;
    --s2-radius-sm:     .2rem;
    /* calc(1.5em + .75rem + 2px) — tinggi .form-control */
    --s2-tinggi:        calc(1.5em + .75rem + 2px);
    --s2-tinggi-sm:     calc(1.5em + .5rem + 2px);
}

/* ── Wadah ─────────────────────────────────────────────────────────────────
   Lebar diserahkan ke inline style yang dipasang Select2 (`width:'100%'`),
   TIDAK dipaksa di sini. Memaksanya akan merusak Select2 yang sengaja
   dipasang selebar isinya. */
.select2-container--bootstrap4,
.select2-container--default {
    display: inline-block;
    vertical-align: middle;
}

/* ═══ PILIHAN TUNGGAL ═══════════════════════════════════════════════════════
   Inilah yang hilang: kotaknya. */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default    .select2-selection--single {
    box-sizing: border-box;
    height: var(--s2-tinggi);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--s2-teks);
    background-color: var(--s2-latar);
    background-clip: padding-box;
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Select2 membungkus teksnya lagi di dalam, dengan padding sendiri. Padding
   itu dinolkan supaya jarak kiri teksnya sama persis dengan <select> biasa —
   kalau tidak, keduanya berjajar dengan teks yang tidak sejajar. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default    .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--s2-teks);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
.select2-container--default    .select2-selection--single .select2-selection__placeholder {
    color: var(--s2-teks-samar);
}

/* Panah. Diposisikan ulang karena tingginya berubah mengikuti .form-control. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
.select2-container--default    .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: .5rem;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b,
.select2-container--default    .select2-selection--single .select2-selection__arrow b {
    border-color: var(--s2-teks-samar) transparent transparent transparent;
}

/* Tanda × penghapus.
   Digeser ke KANAN, di sebelah panah — bukan menempel di depan teks.
   Posisi bawaannya (sebelum teks) adalah yang membuat tampilannya terbaca
   "×Semua Unit Usaha" seperti satu kata aneh, alih-alih sebuah kotak pilihan
   dengan tombol hapus. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear,
.select2-container--default    .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.75rem;
    float: none;
    margin: 0;
    transform: translateY(-50%);
    padding: 0 .25rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--s2-teks-samar);
    cursor: pointer;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover,
.select2-container--default    .select2-selection--single .select2-selection__clear:hover {
    color: #dc3545;
}
/* Ruang untuk × + panah, supaya teks panjang tidak menabraknya. */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default    .select2-selection--single {
    padding-right: 2.5rem;
}

/* ═══ PILIHAN GANDA ═════════════════════════════════════════════════════════ */
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container--default    .select2-selection--multiple {
    box-sizing: border-box;
    min-height: var(--s2-tinggi);
    padding: .1875rem .375rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--s2-teks);
    background-color: var(--s2-latar);
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: text;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,
.select2-container--default    .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
}
/* Setiap pilihan jadi "pil", bukan teks telanjang. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container--default    .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: .125rem .25rem .125rem 0;
    padding: .0625rem .5rem;
    font-size: .875rem;
    color: #fff;
    background-color: var(--s2-utama);
    border: 1px solid var(--s2-utama);
    border-radius: var(--s2-radius-sm);
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default    .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;               /* × di KANAN nama, bukan di kiri */
    margin: 0 0 0 .375rem;
    color: rgba(255, 255, 255, .75);
    font-weight: 400;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default    .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}
.select2-container--bootstrap4 .select2-search--inline .select2-search__field,
.select2-container--default    .select2-search--inline .select2-search__field {
    margin-top: 0;
    padding: .1875rem 0;
    line-height: 1.5;
    font-family: inherit;
}

/* ═══ FOKUS ═════════════════════════════════════════════════════════════════
   Select2 memberi kelas `--open` pada wadah saat dropdown terbuka, dan
   `--focus` pada kotak saat ia dinavigasi dengan keyboard. Keduanya harus
   memberi cincin fokus yang sama dengan .form-control:focus — kalau tidak,
   pemakai keyboard kehilangan jejak posisinya di antara deretan filter. */
.select2-container--bootstrap4.select2-container--open  .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open     .select2-selection,
.select2-container--default.select2-container--focus    .select2-selection {
    border-color: var(--s2-border-focus);
    box-shadow: 0 0 0 .2rem var(--s2-bayang-focus);
    outline: 0;
}

/* ═══ NONAKTIF ══════════════════════════════════════════════════════════════ */
.select2-container--bootstrap4.select2-container--disabled .select2-selection,
.select2-container--default.select2-container--disabled    .select2-selection {
    background-color: var(--s2-latar-mati);
    cursor: not-allowed;
}

/* ═══ UKURAN KECIL ══════════════════════════════════════════════════════════
   Dipakai lewat kelas .select2-sm pada <select> aslinya, atau otomatis kalau
   <select>-nya ber-.form-control-sm — Select2 menyalin kelas elemen aslinya
   ke wadahnya, jadi pemilih di bawah ini bekerja tanpa perubahan markup. */
.select2-container--bootstrap4.select2-sm .select2-selection--single,
.select2-container--bootstrap4.form-control-sm .select2-selection--single,
.select2-container--default.select2-sm .select2-selection--single,
.select2-container--default.form-control-sm .select2-selection--single {
    height: var(--s2-tinggi-sm);
    padding: .25rem 2.25rem .25rem .5rem;
    font-size: .875rem;
    border-radius: var(--s2-radius-sm);
}

/* ═══ DAFTAR PILIHAN (dropdown) ═════════════════════════════════════════════ */
.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default    .select2-dropdown {
    border-color: var(--s2-border-focus);
    border-radius: var(--s2-radius);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}
.select2-container--bootstrap4 .select2-results__option,
.select2-container--default    .select2-results__option {
    padding: .375rem .75rem;
    font-size: .9375rem;
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--default    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--s2-utama);
    color: #fff;
}
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
.select2-container--default    .select2-results__option[aria-selected="true"] {
    background-color: #e9ecef;
    color: var(--s2-teks);
}
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default    .select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--s2-utama);
    color: #fff;
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field,
.select2-container--default    .select2-search--dropdown .select2-search__field {
    padding: .375rem .75rem;
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus,
.select2-container--default    .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--s2-border-focus);
    box-shadow: 0 0 0 .2rem var(--s2-bayang-focus);
    outline: 0;
}

/* ═══ DI DALAM MODAL ════════════════════════════════════════════════════════
   Dua aturan yang selama ini hanya ada inline di halaman Briefing, dipindah ke
   sini supaya berlaku juga di modal Data Karyawan dan Pelatihan.

   z-index 1060 lebih tinggi dari modal Bootstrap (1050). Tanpa itu daftar
   pilihannya tenggelam DI BELAKANG modal: dropdown terlihat "tidak membuka",
   padahal ia terbuka di lapisan yang tertutup. */
.modal .select2-container { width: 100% !important; }
.select2-container--open  { z-index: 1060; }

/* Select2 di dalam .input-group menempel rata dengan tetangganya. */
.input-group > .select2-container--bootstrap4 .select2-selection,
.input-group > .select2-container--default    .select2-selection {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ═══ KOTAK YANG DITANDAI INVALID ═══════════════════════════════════════════ */
.select2-container--bootstrap4.is-invalid .select2-selection,
.select2-container--default.is-invalid    .select2-selection,
.is-invalid + .select2-container--bootstrap4 .select2-selection,
.is-invalid + .select2-container--default    .select2-selection {
    border-color: #dc3545;
}

/* ═══ PILIHAN GANDA ═════════════════════════════════════════════════════════
   [PATCH183] BAGIAN INI TIDAK PERNAH ADA, DAN KOTAKNYA SETINGGI NOL.

   Diukur di peramban dengan kolom Peserta pada modal Briefing yang sungguhan:

       .select2-selection--multiple   tinggi 0, lebar 0

   Kotak setinggi nol tidak bisa ditekan siapa pun. Itu sebabnya kolom Peserta
   terasa mati, bukan cuma sulit: tidak ada yang bisa diklik di sana.

   Sebabnya sama dengan aturan tinggi daftar hasil di bawah: berkas ini ditulis
   saat yang terlihat rusak hanya pilihan TUNGGAL, jadi hanya itu yang ditulis.
   Pilihan ganda mewarisi bentuknya dari tema, dan temanya tidak pernah dimuat.
   <ul> kosong tanpa satu pun aturan tinggi memang mengempis ke nol.

   Seluruh angka di bawah disalin dari .form-control Bootstrap 4.6, sesuai
   aturan di kepala berkas ini. min-height, bukan height: kotaknya memang harus
   tumbuh saat namanya bertambah. */
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container--default    .select2-selection--multiple {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: var(--s2-tinggi);
    padding: .25rem .5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--s2-teks);
    background-color: var(--s2-latar);
    border: 1px solid var(--s2-border);
    border-radius: .25rem;
    cursor: text;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered,
.select2-container--default    .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
/* Tiap nama yang sudah dipilih. Bentuknya badge Bootstrap, supaya sama dengan
   lencana di seluruh portal dan bukan bentuk kelima yang harus dihafal. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container--default    .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: .125rem 0;
    padding: .15rem .45rem;
    font-size: .85rem;
    color: #fff;
    background-color: var(--s2-utama);
    border: 0;
    border-radius: .2rem;
    max-width: 100%;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove,
.select2-container--default    .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;
    margin-left: .35rem;
    margin-right: 0;
    color: rgba(255, 255, 255, .85);
    font-weight: 700;
    cursor: pointer;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default    .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}
/* Kotak ketiknya sendiri. Ia yang menerima huruf saat orang mengetik nama, dan
   tanpa tinggi ia sama tidak terlihatnya dengan kotak induknya. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field,
.select2-container--default    .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0;
    padding: .15rem 0;
    height: auto;
    min-height: 1.6rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--s2-teks);
    border: 0;
    background: transparent;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus    .select2-selection--multiple {
    border-color: var(--s2-border-focus);
    box-shadow: 0 0 0 .2rem var(--s2-bayang-focus);
    outline: 0;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default    .select2-selection--multiple .select2-selection__placeholder {
    color: var(--s2-teks-samar);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [PATCH183] DAFTAR HASIL YANG BISA DIGULIR
   ═══════════════════════════════════════════════════════════════════════════

   GEJALANYA, kata Nura: "Dropdown select2 di halaman Briefing tidak bisa
   diketik atau di-scroll."

   Bagian "tidak bisa di-scroll" ada di sini, dan diukur di peramban: daftar
   hasilnya setinggi 3519 piksel untuk 102 karyawan, tanpa batang gulir sama
   sekali. Ia bukan dropdown lagi, melainkan satu daftar raksasa yang menembus
   modal dan halamannya.

   SEBABNYA satu baris aturan bawaan Select2 yang tidak pernah kena:

       .select2-container--default .select2-results > .select2-results__options
       { max-height: 200px; overflow-y: auto; }

   Aturan itu terikat pada tema `--default`. Portal ini memanggil
   `theme: 'bootstrap4'`, sehingga wadahnya berkelas `--bootstrap4` dan aturan
   itu tidak berlaku. Tema bootstrap4 yang sungguhan, yang membawa aturan
   penggantinya, TIDAK dimuat di mana pun (header.php hanya memuat
   select2.min.css). Jadi tidak ada satu pun aturan tinggi yang mengenainya.

   Seperti catatan di kepala berkas ini: yang ditulis di sini harus mengenai
   KEDUA nama kelas, karena sebagian kode memanggil temanya dan sebagian tidak.
   Ditulis tanpa menyebut tema sama sekali supaya tidak ada yang bisa terlewat
   lagi hanya karena satu pemanggilan lupa menyebutnya.

   Angka 320px bukan tebakan: 200px bawaan Select2 memuat lima baris, dan
   daftar nama karyawan di portal ini selalu panjang. 320px memuat delapan
   baris, cukup untuk melihat bahwa pencariannya bekerja tanpa menutupi
   seluruh isian di bawahnya. */
.select2-results > .select2-results__options {
    max-height: 320px;
    overflow-y: auto;
}

/* Di ponsel, layarnya sendiri yang jadi batas. Daftar setinggi 320px pada
   layar 640px menutupi hampir seluruh formulir di belakangnya. */
@media (max-height: 640px) {
    .select2-results > .select2-results__options { max-height: 45vh; }
}

/* Kotak carinya diberi napas. Ia yang pertama disentuh orang begitu
   dropdown-nya terbuka, dan sampai patch ini ia tidak pernah kebagian fokus
   sama sekali (lihat catatan di assets/js/ui-select2.js). */
.select2-search--dropdown .select2-search__field { padding: .3rem .5rem; }