/*  ui-fixes.css -- perbaikan kecil lintas halaman.

    Bootstrap 3 menyetel .btn { white-space: nowrap }. Label yang lebih panjang
    dari tombolnya karena itu tidak bisa membungkus dan melimpah keluar kotak:
    terpotong di tepi, menindih elemen sebelah, atau membuat barisnya menggeser
    ke samping. Bahasa Indonesia memperbesar peluangnya -- "Riwayat Deposit
    Penarikan" jauh lebih panjang dari "History", dan teksnya baru ditukar
    i18next setelah halaman tampil, jadi lebarnya tidak pernah ikut dihitung
    saat markup dibuat.

    Membungkus dipilih daripada memotong (text-overflow: ellipsis) karena label
    tombol adalah perintah -- separuh perintah tidak bisa dibaca. Tombol boleh
    bertambah tinggi; yang tidak boleh adalah teks keluar dari kotaknya.  */

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	white-space: normal;
	overflow-wrap: break-word;
	max-width: 100%;
}

/*  CATATAN: word-break: break-word pernah dipasang di sini dan DICABUT.

    Berbeda dari overflow-wrap, word-break ikut mengubah lebar min-content
    sebuah kotak menjadi selebar SATU KARAKTER. Akibatnya setiap wadah yang
    menyesuaikan diri ke lebar minimum isinya -- table-cell width:1% pada
    .input-group-btn, dan flex item pada .row-percentages -- menyusutkan
    tombolnya sampai labelnya pecah menurun:

      "Edit"  di kolom Email halaman profil  -> E-d-i-t  (47x34 jadi 33x74)
      "50%"   di tombol persentase trading   -> 50 lalu % di barisnya sendiri
                                                (49x30 jadi 39x61)

    overflow-wrap: break-word di atas sudah cukup: ia memecah kata yang memang
    tidak muat, tanpa menyentuh perhitungan lebar minimum. Diukur di Chrome:
    tanpa word-break, label panjang di .btn-block tetap membungkus seperti yang
    diinginkan (150x34 melimpah -> 150x54 aman), sementara tombol persentase
    kembali utuh satu baris.  */

/*  Tombol di dalam flex container tidak menyusut tanpa min-width: 0 --
    nilai bawaan min-width: auto menahannya selebar isinya.  */
.btn-block {
	min-width: 0;
}

/*  Pengecualian: tombol yang WADAHNYA menyesuaikan diri ke lebar tombol,
    bukan sebaliknya.

    .input-group-btn adalah table-cell dengan width: 1%; lebarnya ditentukan
    lebar minimum isinya. Selama tombolnya nowrap, lebar minimum itu = selebar
    labelnya. Begitu tombolnya boleh membungkus, lebar minimumnya jatuh ke satu
    karakter dan tombol "Edit" berubah menjadi E-d-i-t menurun -- persis yang
    terjadi di kolom Email/Phone halaman profil.

    Label pada tombol semacam ini pendek ("Edit", "Max", "Get Code") dan
    lebarnya dibatasi input di sebelahnya, jadi membungkus memang tidak
    diperlukan di sini.  */
.input-group-btn > .btn,
.input-group-btn > .btn > span,
.btn-group > .btn,
.btn-toolbar > .btn {
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
}

/*  Kelompok tombol yang lebih lebar dari induknya dibiarkan membungkus ke
    baris berikutnya, bukan mendorong halaman melebar ke samping.  */
.btn-group,
.btn-toolbar {
	max-width: 100%;
}

/*  .btn-icon dipakai untuk tombol lingkaran berisi satu ikon; ukurannya
    memang tetap dan tidak boleh ikut melar.  */
.btn.btn-icon,
.btn.btn-circle {
	white-space: nowrap;
	word-break: normal;
}

/*  ------------------------------------------------------------------
    Palet mode gelap.

    Sebelum ini ada 13 warna gelap berbeda yang dipakai bergantian untuk
    latar halaman, panel, dan kolom isian -- warisan dua sistem desain yang
    bertumpuk: tema Color Admin bawaan (abu hangat, #2d353c) dan palet DEX
    (navy dingin, #031b2d/#040c17). Tidak ada satu pun yang bisa disebut
    "warna permukaan gelap aplikasi ini", jadi kotak isian tampak berbeda
    hitamnya dari latar di belakangnya -- selisihnya sampai ΔE 18.

    Ketiganya kini dipakai konsisten di seluruh aturan .darkmode:
      --dark-bg      latar halaman
      --dark-surface panel, card, modal
      --dark-input   kolom isian, sedikit lebih terang dari panel supaya
                     batas kotaknya tetap terbaca tanpa perlu garis tebal
    ------------------------------------------------------------------ */
:root {
	--dark-bg:      #040c17;
	--dark-surface: #031b2d;
	--dark-input:   #0e2739;
	--dark-border:  rgba(255, 255, 255, .12);
	--dark-text:    #c7c8da;
	--dark-muted:   #94a3b8;
}

/*  style.min.css menyetel .text-black dan .text-inverse ke #2d353c dengan
    !important. Deklarasi !important menang tanpa memandang specificity, jadi
    .darkmode label { color: #c7c8da } yang sudah ada di layout selalu kalah:
    label yang memakai kelas itu tetap #2d353c di atas latar #040c17 --
    kontrasnya 1,58:1, jauh di bawah ambang 4,5:1, praktis tidak terbaca.

    Kelas itu dipakai 144 kali di halaman-halaman yang punya mode gelap, jadi
    menetralkannya di sini menyelesaikan semuanya sekaligus tanpa menyentuh
    markup. Specificity dinaikkan lewat .darkmode di depan supaya menang atas
    aturan !important milik tema.  */
.darkmode .text-black,
.darkmode .text-inverse,
.darkmode a.text-black,
.darkmode a.text-inverse {
	color: var(--dark-text) !important;
}
.darkmode .text-black-darker { color: #ffffff !important; }
.darkmode .text-black-lighter { color: var(--dark-muted) !important; }
.darkmode .text-black-transparent-9,
.darkmode .text-black-transparent-8,
.darkmode .text-black-transparent-7 { color: rgba(255, 255, 255, .85) !important; }
.darkmode .text-black-transparent-6,
.darkmode .text-black-transparent-5,
.darkmode .text-black-transparent-4 { color: rgba(255, 255, 255, .60) !important; }
.darkmode .text-black-transparent-3,
.darkmode .text-black-transparent-2,
.darkmode .text-black-transparent-1 { color: rgba(255, 255, 255, .40) !important; }