/* =========================================================================
   Pemilih wilayah administratif <x-vt.wilayah />
   =========================================================================
   Berkas terpisah karena komponennya dipakai di dua tema sekaligus: halaman
   vendor/panitia yang memuat vendor-tender.css, dan halaman pendaftaran yang
   hanya memuat portal.css. Komponen memuat berkas ini sendiri (@once), jadi
   gayanya ikut ke mana pun ia dipasang - tanpa menggandakan aturan di dua
   stylesheet.

   Warnanya memakai token kedua tema dengan cadangan nilai, sehingga tetap
   benar di halaman yang hanya mengenal salah satunya.
   ========================================================================= */

:root {
    --wl-ink: #10212c;
    --wl-muted: #6b7c87;
    --wl-line: #e1e7ea;
    --wl-surface: #ffffff;
    --wl-canvas: #f4f6f7;
}

/* --- Pemilih wilayah administratif --------------------------------------
   Empat tingkat berdiri sebagai satu kesatuan, jadi wadahnya mengambil satu
   baris penuh pada kisi formulir - bukan satu sel. Sebelumnya keempatnya
   menumpuk di kolom kiri selebar setengah baris, sementara medan lain di
   sekitarnya memakai lebar penuh.

   Dipakai di dua tema sekaligus: halaman vendor (.vt-) dan halaman
   pendaftaran (.pt-), karena itu ukuran select2-nya disebut di sini, bukan
   diwariskan dari salah satu tema.
   --------------------------------------------------------------------- */

.vt-wilayah {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* Dua kolom begitu muat - 2 x 2, bukan sebaris empat.

   Semula memakai auto-fit minmax(210px): pada kartu vendor yang lebar hasilnya
   empat sebaris, tetapi pada formulir pendaftaran yang lebarnya ~780px hanya
   muat tiga, sehingga Kelurahan/Desa - medan terpenting, satu-satunya yang
   benar-benar dikirim ke server - tertinggal sendirian di baris kedua.
   Media query pun tidak menolong: yang diukurnya lebar layar, bukan lebar
   wadahnya, sementara komponen ini dipakai di wadah selebar 780px maupun
   1150px pada layar yang sama. */
@media (min-width: 560px) {
    .vt-wilayah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vt-wilayah__medan label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wl-ink);
    margin-bottom: 5px;
}

/* Select2 disamakan dengan .form-control di sebelahnya.

   Tingginya TIDAK dipatok angka tetap: komponen ini dipakai di dua tema yang
   tinggi isiannya berbeda. Diukur langsung di peramban:

       tema vt- (profil vendor)   input 36px, teks 13px
       tema pt- (pendaftaran)     input 43px, teks 14px

   Semula dipatok 36px untuk keduanya, dan hasilnya timpang di dua arah: di
   halaman pendaftaran select2 justru 7px lebih pendek daripada isian
   sebelahnya, sedangkan di halaman profil aturan tema bawaan menang atas
   aturan ini sehingga kotaknya membengkak jadi 48px - 12px lebih tinggi.

   Karena itu ukurannya dibaca dari variabel yang ditetapkan per tema, dan
   seluruh properti yang diperebutkan tema ditulis dengan !important. */

.vt-wilayah {
    --wl-tinggi: 36px;
    --wl-teks: 13px;
    --wl-sisi: 10px;
}

.pt-form .vt-wilayah,
.pt-bagianform__isi .vt-wilayah {
    --wl-tinggi: 43px;
    --wl-teks: 14px;
    --wl-sisi: 12px;
}

.vt-wilayah .select2-container { width: 100% !important; }

.vt-wilayah .select2-container--default .select2-selection--single {
    height: var(--wl-tinggi) !important;
    min-height: var(--wl-tinggi) !important;
    padding: 0 !important;
    border: 1px solid var(--wl-line) !important;
    border-radius: 3px;
    background: var(--wl-surface);
}

.vt-wilayah .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* Dikurangi tebal garis atas dan bawah supaya teksnya benar-benar di tengah. */
    line-height: calc(var(--wl-tinggi) - 2px) !important;
    height: calc(var(--wl-tinggi) - 2px) !important;
    padding: 0 calc(var(--wl-sisi) + 14px) 0 var(--wl-sisi) !important;
    color: var(--wl-ink);
    font-size: var(--wl-teks) !important;
}

.vt-wilayah .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--wl-tinggi) - 2px) !important;
    right: 6px;
}

/* Kotak pencarian di dalam daftar turun mengikuti ukuran teks yang sama. */
.vt-wilayah + .select2-container .select2-search__field,
.select2-container .select2-search__field { font-size: 13px; }

/* Pilihan yang belum boleh dipilih ditandai redup, sama seperti isian
   readonly - supaya terbaca "menunggu tingkat di atasnya", bukan "rusak". */
.vt-wilayah select:disabled,
.vt-wilayah .select2-container--disabled .select2-selection--single {
    background: var(--wl-canvas) !important;
    color: var(--wl-muted);
}