/* =============================================================================
 * app/profil/tema-gelap.css
 * [PATCH150] Pelengkap tema gelap AdminLTE 3.2.
 *
 * SELURUH aturan di berkas ini berada di bawah .dark-mode. Pada tema terang,
 * berkas ini tidak mengubah satu piksel pun. Itu syarat, bukan kerapian: v133
 * pernah mencabut seluruh tema gelap justru karena ada aturan yang diam-diam
 * berlaku tanpa diminta.
 *
 * Yang ditutup di sini adalah bagian yang tidak dijangkau kelas dark-mode
 * bawaan AdminLTE: navbar yang di portal ini memakai navbar-white, Select2,
 * SweetAlert2, dan kotak pilihan tema itu sendiri. Kalau ada bagian lain yang
 * masih terang di atas latar gelap, tambahkan aturannya DI SINI, di bawah
 * .dark-mode, bukan di berkas modulnya.
 * =========================================================================== */

/* Navbar: portal ini memakai navbar-white navbar-light, dan AdminLTE tidak
   menggelapkannya sendiri. Disamakan dengan navbar-dark bawaannya. */
.dark-mode .main-header.navbar-white,
.dark-mode .main-header.navbar-light {
    background-color: #343a40 !important;
    border-bottom-color: #4b545c !important;
}
.dark-mode .main-header.navbar-light .navbar-nav .nav-link,
.dark-mode .main-header.navbar-light .navbar-brand,
.dark-mode .main-header.navbar-light .nav-link > i {
    color: rgba(255, 255, 255, .85) !important;
}
.dark-mode .main-header.navbar-light .navbar-nav .nav-link:hover {
    color: #fff !important;
}

/* Menu akun */
.dark-mode .um-menu { background: #343a40; color: #dee2e6; border-color: #4b545c; }
.dark-mode .um-head { border-bottom-color: #4b545c; }
.dark-mode .um-list a, .dark-mode .um-pintas a { color: #dee2e6; }
.dark-mode .um-list a:hover, .dark-mode .um-pintas a:hover { background: #3f474e; }
.dark-mode .um-tema { border-top-color: #4b545c; }
.dark-mode .um-tema-label { color: #adb5bd; }
.dark-mode .um-tema-pilih { border-color: #6c757d; }
.dark-mode .um-tema-btn { color: #dee2e6; }
.dark-mode .um-tema-btn + .um-tema-btn { border-left-color: #6c757d; }
.dark-mode .um-tema-btn:hover { background: #454d55; }
.dark-mode .um-tema-btn.aktif { background: #3f6791; color: #fff; }

/* Select2 (tema bootstrap4) */
.dark-mode .select2-container--bootstrap4 .select2-selection,
.dark-mode .select2-container--bootstrap4 .select2-dropdown {
    background-color: #343a40;
    border-color: #6c757d;
    color: #fff;
}
.dark-mode .select2-container--bootstrap4 .select2-selection__rendered { color: #fff; }
.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted { background-color: #3f6791; }
.dark-mode .select2-container--bootstrap4 .select2-search__field {
    background-color: #454d55; color: #fff; border-color: #6c757d;
}

/* SweetAlert2 */
.dark-mode .swal2-popup { background: #343a40; color: #fff; }
.dark-mode .swal2-title, .dark-mode .swal2-html-container, .dark-mode .swal2-content { color: #fff; }
.dark-mode .swal2-input, .dark-mode .swal2-textarea, .dark-mode .swal2-select {
    background: #454d55; color: #fff; border-color: #6c757d;
}

/* Lembar yang memang harus tetap putih: pratinjau slip gaji dicetak ke kertas,
   dan kertas tidak punya tema. */
.dark-mode .slip { background: #fff; color: #222; }

/* =============================================================================
 * [PATCH150a] Sisa terang di halaman modul.
 *
 * Dilaporkan Nura sesudah v150 terpasang: di Pengajuan HRIS masih ada elemen
 * yang berlatar terang, dan menyakitkan mata di antara isi yang sudah gelap.
 *
 * Sebabnya bukan AdminLTE. Halaman-halaman modul di portal ini menulis
 * warnanya sendiri, sebagian dengan angka heksa terang yang ditulis langsung
 * di blok <style> halaman itu, sebagian lagi lewat kelas utilitas Bootstrap
 * yang memang berarti "terang" (bg-light, badge-light, thead-light, text-dark).
 * Kelas dark-mode bawaan AdminLTE tidak menyentuh keduanya.
 *
 * Semuanya ditutup DI SINI, tetap di bawah .dark-mode, bukan dengan menyunting
 * belasan berkas modulnya satu per satu. Dua alasan: berkas modul itu masing-
 * masing punya sejarah patch sendiri, dan kalau warnanya tersebar, tema
 * berikutnya harus mengejar ke belasan tempat lagi.
 *
 * Kenapa sebagian pakai !important: aturan aslinya di halaman juga memakai
 * !important, dan tanpa itu yang menang tetap yang terang.
 * =========================================================================== */

/* ── Utilitas Bootstrap yang artinya memang "terang" ────────────────────── */
.dark-mode .bg-light,
.dark-mode .bg-white       { background-color: #3f474e !important; color: #dee2e6 !important; }
.dark-mode .text-dark      { color: #dee2e6 !important; }
.dark-mode .text-muted     { color: #adb5bd !important; }
.dark-mode .badge-light    { background-color: #4b545c; color: #e9ecef; }
.dark-mode .badge-light.border,
.dark-mode .border         { border-color: #6c757d !important; }
.dark-mode .btn-light,
.dark-mode .btn-default    { background-color: #454d55; border-color: #6c757d; color: #dee2e6; }
.dark-mode .btn-light:hover,
.dark-mode .btn-default:hover { background-color: #4f585f; color: #fff; }

/* ── Tabel ──────────────────────────────────────────────────────────────── */
.dark-mode .thead-light th,
.dark-mode .table thead.thead-light th {
    background-color: #454d55;
    border-color: #6c757d;
    color: #e9ecef;
}
.dark-mode .table,
.dark-mode .table td,
.dark-mode .table th       { border-color: #55606a; }
/* Belang baris: di tema terang dibuat dengan menggelapkan, di sini harus
   dibuat dengan MENERANGKAN, kalau tidak barisnya jadi lubang hitam. */
.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .035); }
.dark-mode .table-hover tbody tr:hover              { background-color: rgba(255, 255, 255, .075); color: #fff; }

/* ── Kotak, daftar, dan modal ───────────────────────────────────────────── */
.dark-mode .list-group-item {
    background-color: #3f474e; border-color: #55606a; color: #dee2e6;
}
.dark-mode .modal-content   { background-color: #343a40; color: #dee2e6; }
.dark-mode .modal-header,
.dark-mode .modal-footer    { border-color: #55606a; }
.dark-mode .close           { color: #dee2e6; text-shadow: none; }
.dark-mode .close:hover     { color: #fff; }
.dark-mode .dropdown-menu   { background-color: #343a40; border-color: #55606a; color: #dee2e6; }
.dark-mode .dropdown-item   { color: #dee2e6; }
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus { background-color: #454d55; color: #fff; }
.dark-mode .dropdown-divider    { border-color: #55606a; }

/* ── Isian formulir ─────────────────────────────────────────────────────── */
.dark-mode .input-group-text {
    background-color: #454d55; border-color: #6c757d; color: #dee2e6;
}
.dark-mode .page-link {
    background-color: #3f474e; border-color: #55606a; color: #dee2e6;
}
.dark-mode .page-item.disabled .page-link { background-color: #343a40; color: #6c757d; }

/* ── Tombol garis: pada latar gelap warnanya perlu dinaikkan ────────────── */
.dark-mode .btn-outline-primary   { color: #6ea8fe; border-color: #4d7fc1; }
.dark-mode .btn-outline-secondary { color: #c2c9d0; border-color: #7d868f; }
.dark-mode .btn-outline-primary:hover   { background-color: #3f6791; border-color: #3f6791; color: #fff; }
.dark-mode .btn-outline-secondary:hover { background-color: #4f585f; border-color: #7d868f; color: #fff; }
.dark-mode .btn-outline-primary.active,
.dark-mode .btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: #3f6791; border-color: #3f6791; color: #fff;
}
.dark-mode .btn-outline-primary.disabled,
.dark-mode .btn-outline-primary:disabled { color: #6c757d; border-color: #55606a; }

/* ── Kotak pesan: latarnya digelapkan, warna maknanya dipertahankan ─────── */
.dark-mode .alert-warning { background-color: #4a3f21; border-color: #6b5a2c; color: #ffe08a; }
.dark-mode .alert-info    { background-color: #21414a; border-color: #2c5c6b; color: #9adcea; }
.dark-mode .alert-success { background-color: #22412c; border-color: #2d5c3c; color: #97d9ac; }
.dark-mode .alert-danger  { background-color: #4a2427; border-color: #6b3237; color: #f0a2a7; }
.dark-mode .alert-secondary { background-color: #3f474e; border-color: #55606a; color: #dee2e6; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Halaman Pengajuan HRIS
 *
 * Warna di bawah ini menimpa blok <style> di dalam pagePengajuan.php. Angkanya
 * dipasangkan satu per satu dengan aturan aslinya, bukan disapu rata, supaya
 * arti warnanya tetap terbaca: kuning tetap menandai "bulan berikutnya", hijau
 * tetap menandai laporan, dan seterusnya.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Tiga tombol tab Pengajuan Aktif. Yang tidak aktif dulu berlatar #f8f9fa,
   dan itulah dua kotak putih yang paling menusuk mata di tangkapan layar. */
.dark-mode .active-tab-nav .nav-link {
    background: #3f474e;
    border-color: #6c757d;
    color: #dee2e6;
}
.dark-mode .active-tab-nav .nav-link:hover {
    background: #4f585f;
    border-color: #868e96;
    color: #fff;
}
.dark-mode .active-tab-nav .nav-link .badge       { background: rgba(255, 255, 255, .16); }
.dark-mode .active-tab-nav .nav-link.active .badge { background: rgba(0, 0, 0, .25); }

/* Baris "bulan berikutnya": kuningnya dipertahankan, cuma diturunkan
   terangnya sampai bisa dibaca di atas latar gelap. */
.dark-mode .upcoming-separator td.upcoming-sep-cell {
    background: #4a3f21;
    border-top-color: #ffc107;
    border-bottom-color: #ffc107;
    color: #ffe08a;
}
.dark-mode .upcoming-row        { background: #3c3a2e !important; }
.dark-mode .upcoming-row:hover  { background: #4a4535 !important; }

/* Kotak detail dan lampiran di popup pengajuan */
.dark-mode .pengajuan-detail-box { background: #3f474e; color: #dee2e6; }
.dark-mode .pengajuan-detail-label { color: #adb5bd; }
.dark-mode .pengajuan-detail-note {
    background: #4a3f21; border-color: #6b5a2c; color: #ffe08a;
}
.dark-mode .pengajuan-detail-note-title { color: #ffe08a; }
.dark-mode .laporan-entry        { background: #3f474e; color: #dee2e6; }
.dark-mode .lampiran-section-title { color: #c2c9d0; border-bottom-color: #55606a; }
.dark-mode .lampiran-img-thumb   { border-color: #6c757d; }

/* Linimasa riwayat approval (fx45), beserta dua kembarannya di modul lain:
   fx41-tl di Pengajuan Finance dan fx44 di Riwayat Kontrak Karyawan.
   Ketiganya memang ditulis kembar dan harus tetap kembar. */
.dark-mode .fx45-garis,
.dark-mode .fx41-tl-garis,
.dark-mode .fx44-garis { background: #55606a; }
.dark-mode .fx45-catatan,
.dark-mode .fx44-catatan { border-left-color: #55606a; color: #dee2e6; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Sisa terang di modul lain
 *
 * Daftar ini tidak disusun dengan membuka halaman satu per satu, melainkan
 * dengan memindai SELURUH berkas halaman dan mengumpulkan setiap aturan CSS
 * yang memasang latar terang. Hasil pindaian itu sekarang menjadi uji
 * (tests/uji_patch150a_gelap.js): kalau ada aturan berlatar terang baru yang
 * ditulis di berkas modul mana pun, uji itu gagal dan menyebut berkas serta
 * pemilihnya, kecuali pemilihnya terdaftar sebagai pengecualian yang sengaja.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── Pengajuan Finance ──────────────────────────────────────────────────── */
.dark-mode .finance-bukti-transfer-box          { background: #24412c; border-color: #2d5c3c; }
.dark-mode .finance-bukti-transfer-box.is-empty { background: #3f474e; }
.dark-mode .fx42-kaki-total        { background: #3f474e; color: #dee2e6; }
.dark-mode .fx42-tabel-item thead th { background: #454d55; color: #e9ecef; }
.dark-mode .fx42-tab-isi           { background: #343a40; }
.dark-mode .fx42-kpi--utama        { background: #24412c; }
.dark-mode .fx42-sel-bilah .progress { background: #454d55; }

/* ── Penilaian Kinerja ──────────────────────────────────────────────────── */
.dark-mode .kpi-table thead th,
.dark-mode .kpi-table tfoot td { background: #454d55; color: #e9ecef; }
.dark-mode .score-bar          { background: #454d55; }

/* ── Presensi dan Rekap Presensi ────────────────────────────────────────── */
.dark-mode .table-presensi tbody tr:hover      { background: #3f5170; }
.dark-mode .table-rekap tbody tr:hover td      { background: #3f5170 !important; }
/* Kolom yang menempel di kiri harus setara latar tabelnya, bukan putih:
   kalau tidak, empat kolom pertama menjadi pita putih di tengah layar gelap. */
.dark-mode .table-rekap td:nth-child(-n+4),
.dark-mode .table-rekap th:nth-child(-n+4)     { background: #343a40; }
.dark-mode .rekap-filter .input-group-text     { background: #454d55; color: #dee2e6; }
.dark-mode #importDropZone                     { background: #3f474e; border-color: #6c757d; color: #dee2e6; }
.dark-mode #importDropZone:hover,
.dark-mode #importDropZone.drag-over           { background: #24412c; }
.dark-mode #importDropZone.has-file            { background: #22412c; }

/* ── Data Karyawan: pemilih alur persetujuan ────────────────────────────── */
.dark-mode .approval-route-option            { background: #3f474e; border-color: #6c757d; color: #dee2e6; }
.dark-mode .approval-route-option:hover      { background: #4f585f; }
.dark-mode .approval-route-option .aro-check { background: #343a40; border-color: #6c757d; }
.dark-mode .approval-route-option .aro-step  { background: #55606a; color: #e9ecef; }
.dark-mode .approval-route-option.is-active,
.dark-mode .approval-route-option:has(input[type=radio]:checked) { background: #2f4a63; border-color: #3f6791; }

/* ── Bagan Struktur Organisasi ──────────────────────────────────────────── */
/* [PATCH211] Aturan .oc-* dicabut: bagannya digambar ulang sebagai kanvas
   (.bg-*), dan tema gelapnya kini tinggal di pageAssignment.php bersama
   gaya terangnya. */

/* ── Kotak masuk ────────────────────────────────────────────────────────── */
.dark-mode .ib-panel     { background: #343a40; border-color: #55606a; color: #dee2e6; }
.dark-mode .ib-tab       { background: #3f474e; color: #dee2e6; }
.dark-mode .ib-item:hover { background: #454d55; }
.dark-mode .ib-kaki-panel { background: #3f474e; }
.dark-mode .ib-lagi       { background: #454d55; color: #dee2e6; }
.dark-mode .ib-lagi:hover { background: #55606a; }

/* ── Daftar saran sebutan (@) ───────────────────────────────────────────── */
.dark-mode .mn-box { background: #343a40; border-color: #55606a; color: #dee2e6; }
.dark-mode .mn-ava { background: #6c757d; }

/* ── Timeline dan Cerita ────────────────────────────────────────────────── */
.dark-mode .tl-like, .dark-mode .tl-reply-btn { background: #3f474e; color: #dee2e6; border-color: #6c757d; }
.dark-mode .tl-reply-input   { background: #454d55; color: #fff; border-color: #6c757d; }
.dark-mode .tl-switch-tr::before { background: #dee2e6; }
.dark-mode .tl-yt-suara, .dark-mode .tl-komp-ytform button { background: #3f474e; color: #dee2e6; }
.dark-mode .tl-ava, .dark-mode .tl-komp-ava, .dark-mode .tl-komp-foto { background: #6c757d; }
.dark-mode .st-penonton, .dark-mode .st-komentar, .dark-mode .st-jenis,
.dark-mode .st-pt-kembali, .dark-mode .st-lg-tabbtn { background: #343a40; color: #dee2e6; }
.dark-mode .st-kom-input        { background: #454d55; color: #fff; }
.dark-mode .st-kom-input:focus  { background: #4f585f; }
.dark-mode .st-unggah-pratinjau { background: #3f474e; }
.dark-mode .st-lagu-baris       { background: #3f474e; }
.dark-mode .st-lagu-info small  { background: #55606a; color: #e9ecef; }
.dark-mode .st-lg-row:hover, .dark-mode .st-lg-unggah-btn:hover { background: #454d55; }
.dark-mode .st-lg-row.is-main   { background: #3f4a6b; }
.dark-mode .yt-hasil:hover      { background: #4a2427; }
.dark-mode .st-ring.is-seen, .dark-mode .st-ring--kosong { background: #55606a; }
.dark-mode .st-tick i           { background: #6c757d; }
.dark-mode .st-ring img         { background: #6c757d; }
.dark-mode .st-progres > span > i { background: #dee2e6; }
.dark-mode .st-lg-atau::before, .dark-mode .st-lg-atau::after,
.dark-mode .tl-komp-atau::before, .dark-mode .tl-komp-atau::after { background: #55606a; }

/* ── Pengingat otomatis ─────────────────────────────────────────────────── */
.dark-mode .rb-hari       { background: #3f474e; border-color: #6c757d; color: #dee2e6; }
.dark-mode .rb-chip       { background: #454d55; color: #dee2e6; border-color: #6c757d; }
.dark-mode .rb-pratinjau  { background: #3f474e; color: #dee2e6; }
.dark-mode .rb-prow.is-pilih { background: #2f4a63; }

/* ── Profil dan menu akun ───────────────────────────────────────────────── */
.dark-mode .pf-vrow.is-verified { background: #2f4a63; }
.dark-mode .um-nav .um-avatar, .dark-mode .um-head img,
.dark-mode .pf-vrow img         { background: #6c757d; }

/* ── Popup detail pengajuan yang dirakit dari JavaScript ────────────────── */
.dark-mode .pengajuan-detail-shell { background: #343a40; color: #dee2e6; }
.dark-mode .recap-type-badge       { background: #2f4a63; color: #cfe2ff; }
.dark-mode #pengajuan-table tbody tr.pengajuan-row-clickable:hover { background: #3f5170; }

/* =============================================================================
 * [PATCH158] SAPUAN KEDUA: yang tidak pernah disapu sama sekali
 * =============================================================================
 * v150a memasang penjaga yang memindai berkas modul di app/ dan mengukur
 * warnanya sungguhan. Penjaga itu bekerja, dan tetap hijau sementara Nura
 * melapor layarnya masih menyilaukan. Sebabnya bukan penjaganya salah, tapi
 * SAPUANNYA TERLALU SEMPIT. Empat sudut yang tidak pernah dilihatnya:
 *
 *   1. Folder assets/css tidak pernah disentuh. Di sana ada layar kunci PIN
 *      Payroll, saringan tabel, Select2, dan modul Kendala.
 *   2. Hanya warna heksa yang dikenali; rgb(), rgba(), dan nama warna lolos.
 *   3. Hanya latar yang diperiksa. Teks gelap di atas latar gelap sama tidak
 *      terbacanya, dan tidak pernah diperiksa satu kali pun.
 *   4. Kelas warna Bootstrap yang dipasang dari JavaScript tidak ada di berkas
 *      CSS mana pun, jadi tidak ada yang bisa dipindai. Baris kuning di daftar
 *      pengajuan datang dari sana.
 *
 * Uji tests/uji_patch158_gelap_semua.js sekarang menyapu keempatnya.
 * =========================================================================== */

/* ── 1. Kelas warna baris tabel dari Bootstrap ──────────────────────────────
   Dipasang dari JavaScript (pengajuan-data.js memasang table-warning pada
   baris milik orang yang sedang login), jadi tidak pernah muncul di berkas
   CSS mana pun. Inilah baris kuning menyala yang dilaporkan Nura.
   Bootstrap memasangnya pada tr DAN pada td/th anaknya, keduanya perlu. */
.dark-mode .table-warning,   .dark-mode .table-warning   > td, .dark-mode .table-warning   > th { background-color: #4a4322 !important; color: #f0e0a8 !important; }
.dark-mode .table-success,   .dark-mode .table-success   > td, .dark-mode .table-success   > th { background-color: #24422c !important; color: #b7e0c2 !important; }
.dark-mode .table-danger,    .dark-mode .table-danger    > td, .dark-mode .table-danger    > th { background-color: #4a2a2d !important; color: #f0b9bf !important; }
.dark-mode .table-info,      .dark-mode .table-info      > td, .dark-mode .table-info      > th { background-color: #23414a !important; color: #b3dbe6 !important; }
.dark-mode .table-primary,   .dark-mode .table-primary   > td, .dark-mode .table-primary   > th { background-color: #2f4a63 !important; color: #cfe2ff !important; }
.dark-mode .table-secondary, .dark-mode .table-secondary > td, .dark-mode .table-secondary > th { background-color: #41474d !important; color: #d3d7db !important; }
.dark-mode .table-light,     .dark-mode .table-light     > td, .dark-mode .table-light     > th { background-color: #3f474e !important; color: #dee2e6 !important; }
.dark-mode .table-active,    .dark-mode .table-active    > td, .dark-mode .table-active    > th { background-color: #454d55 !important; }
/* AdminLTE memakai bg-light-* untuk kepala kelompok kolom di tabel Payroll. */
.dark-mode .bg-light-blue { background-color: #2f4a63 !important; color: #cfe2ff !important; }

/* ── 2. SweetAlert2 ─────────────────────────────────────────────────────────
   Aturan lamanya sudah ada sejak v150 dan tetap saja popup-nya putih. Sebabnya
   ada di layout/header.php: CSS-nya dimuat dari "sweetalert2@11" TANPA nomor
   versi, sementara JavaScript-nya dipatok 11.14.5. Alamat tanpa nomor itu
   mengembalikan versi terbaru apa pun yang sedang ada di CDN, dan sejak v11.16
   SweetAlert2 memindahkan warnanya ke custom property serta membungkus
   pemilihnya dengan :where(). Tema yang menimpa nama properti langsung
   berhenti menang begitu pustakanya berpindah bentuk, tanpa ada yang mengubah
   satu baris pun di portal ini.

   Dua-duanya sekarang ditulis: custom property-nya DAN nama propertinya, dan
   yang terakhir dengan !important supaya tidak bergantung pada kekhususan
   pemilih versi mana pun. Versi CSS-nya juga sudah dipatok di header.php. */
.dark-mode .swal2-popup,
.dark-mode div:where(.swal2-container) div:where(.swal2-popup) {
    --swal2-background: #343a40;
    --swal2-color: #e9ecef;
    background: #343a40 !important;
    color: #e9ecef !important;
}
.dark-mode .swal2-title,
.dark-mode .swal2-html-container,
.dark-mode .swal2-content,
.dark-mode .swal2-label,
.dark-mode .swal2-footer          { color: #e9ecef !important; }
.dark-mode .swal2-footer          { border-top-color: #55606a !important; }
.dark-mode .swal2-close           { color: #adb5bd !important; }
.dark-mode .swal2-close:hover     { color: #fff !important; }
.dark-mode .swal2-timer-progress-bar { background: rgba(255, 255, 255, .35) !important; }
.dark-mode .swal2-validation-message {
    background: #4a2a2d !important; color: #f0b9bf !important;
}

/* ── 3. Layar kunci PIN Payroll ─────────────────────────────────────────────
   Tirainya sengaja hampir pekat supaya angka gaji di belakangnya tidak
   terbaca. Di tema gelap ia tetap harus pekat, cuma gelap: tirai terang di
   depan halaman gelap adalah kilatan putih selebar layar setiap kali orang
   membuka Penggajian. */
.dark-mode #payrollKunciTirai   { background: rgba(33, 37, 41, .97) !important; }
.dark-mode #payrollKunciKotak   { background: #343a40; color: #dee2e6; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.dark-mode #payrollKunciKotak .kunci-ikon  { color: #8ab4f8; }
.dark-mode #payrollKunciKotak .kunci-ket   { color: #adb5bd; }
.dark-mode #payrollKunciKotak input.kunci-pin {
    background: #454d55; color: #f8f9fa; border-color: #6c757d;
}
.dark-mode #payrollAfk          { background: #343a40; color: #dee2e6; }

/* Aplikasi terpasang (standalone) memakai latarnya sendiri. */
html.pwa-standalone body.dark-mode { background: #454d55; }

/* ── 4. Select2 ─────────────────────────────────────────────────────────────
   Berkasnya menaruh seluruh warnanya di variabel --s2-*. Menimpa variabelnya
   menggelapkan seluruh berkas sekaligus, dan tetap satu tempat kalau nanti
   angkanya perlu disetel lagi. */
.dark-mode {
    --s2-border:     #6c757d;
    --s2-teks:       #dee2e6;
    /* [PATCH183] #adb5bd dinaikkan ke #bcc3cb. Yang lama berkontras 4,14:1 di
       atas --s2-latar (#454d55), yaitu di bawah 4,5:1 yang dituntut WCAG dan
       dituntut sapuan tema gelap patch 158. Ia lolos selama ini karena satu
       pemilihnya belum pernah bisa dibangun sapuan itu; begitu aturan pilihan
       ganda ditulis di patch 183, pasangan warnanya kelihatan. #bcc3cb
       berkontras 4,83:1, dan angka itu dihitung, bukan dikira. */
    --s2-teks-samar: #bcc3cb;
    --s2-latar:      #454d55;
    --s2-latar-mati: #3f474e;
}

/* ── 5. Modul Kendala ───────────────────────────────────────────────────────
   Seluruh berkasnya ada di assets/css, yang tidak pernah ikut disapu v150a. */
.dark-mode .kdl-kartu          { background: #3f474e; border-color: #55606a; color: #dee2e6; }
.dark-mode .kdl-kartu-kaki     { color: #adb5bd; }
.dark-mode .kdl-kolom          { background: #2b3035; }
.dark-mode .kdl-kolom-siap     { background: #2f4a63; }
.dark-mode .kdl-nomor          { background: #2f4a63; color: #cfe2ff; }
.dark-mode .kdl-ok             { background: #24422c; color: #b7e0c2; }
.dark-mode .kdl-urg-opsi.kdl-urg-aktif { background: #2f4a63; color: #cfe2ff; }
.dark-mode #kdlModal .modal-content,
.dark-mode #kdlDetailModal .modal-content,
.dark-mode #kdlModal.show .modal-content,
.dark-mode #kdlDetailModal.show .modal-content { background: #343a40; color: #dee2e6; }
.dark-mode .kdl-lampiran-item  { background: #3f474e; border-color: #55606a; }
.dark-mode .kdl-lampiran-item img,
.dark-mode .kdl-lampiran-ikon  { background: #55606a; }
.dark-mode .kdl-lampiran-nama  { color: #dee2e6; }
.dark-mode .kdl-utas-internal  { background: #4a4322; color: #f0e0a8; }
.dark-mode .kdl-utas-followup  { color: #8ab4f8; }
.dark-mode .kdl-utas-verifikasi { color: #7fd396; }
.dark-mode .kdl-utas-status    { color: #adb5bd; }
.dark-mode .kdl-tutorial > summary { color: #8ab4f8; }

/* ── 6. Saringan tabel dan panel bawaan ─────────────────────────────────── */
.dark-mode .tf-menu            { background: #343a40; border-color: #55606a; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.dark-mode .tf-item            { color: #dee2e6; }
.dark-mode .tf-item:hover      { background: #454d55; }
.dark-mode .tf-pisah           { background: #55606a; }
.dark-mode .pbl-grup           { background: #3f474e; border-color: #55606a; }
.dark-mode .pbl-grup-kepala    { background: #454d55; color: #dee2e6; }
.dark-mode .pbl-grup-kepala:hover { background: #4f585f; }
.dark-mode .pbl-entri-bagian   { color: #adb5bd; }

/* ── 7. Timeline dan Cerita ─────────────────────────────────────────────────
   Warnanya dideklarasikan di .tl-scope, bukan :root, supaya tidak mengganggu
   komponen AdminLTE lain di halaman yang sama. Menimpanya di tempat yang sama
   menggelapkan seluruh modul dalam satu blok, dan berkas modulnya sudah
   diubah supaya benar-benar MEMAKAI variabel itu, bukan menulis #fff lagi di
   sepuluh tempat berbeda. */
.dark-mode .tl-scope {
    --tl-bg:    #2b3035;
    --tl-card:  #3f474e;
    --tl-ink:   #e9ecef;
    --tl-muted: #adb5bd;
    --tl-line:  #55606a;
    --tl-shadow:    0 6px 22px rgba(0, 0, 0, .35);
    --tl-shadow-hi: 0 12px 30px rgba(0, 0, 0, .5);
}
.dark-mode .tl-reply-body, .dark-mode .tl-komp-pratinjau img { background: #454d55; }
.dark-mode .tl-lb-panel, .dark-mode .tl-lb-side { background: #2b3035; color: #e9ecef; }
.dark-mode .tl-lb        { color: #e9ecef; }
.dark-mode .tl-komp-ytform button { background: #454d55; color: #f28b82; }
/* Panel Cerita memakai angka yang sama dengan Timeline, tapi tidak memakai
   variabelnya karena ia juga dipakai di layar penuh di atas foto. */
.dark-mode .st-kom-panel, .dark-mode .st-vkom,
.dark-mode .st-lg-panel, .dark-mode .st-pt-panel { background: #343a40; color: #e9ecef; }
.dark-mode .st-lagu-info.is-ada, .dark-mode .st-lg-judul,
.dark-mode .st-pt-judul, .dark-mode .st-pt-waktu,
.dark-mode .st-lg-ytjudul, .dark-mode .yt-hasil-judul { color: #e9ecef; }
.dark-mode .st-kom-input { background: #454d55; color: #f8f9fa; border-color: #6c757d; }
.dark-mode .st-kom-input:focus { background: #454d55; }
.dark-mode .st-pustaka-item, .dark-mode .st-lg-tab { background: #3f474e; border-color: #55606a; color: #dee2e6; }

/* ── 8. Sisa yang berdiri sendiri ───────────────────────────────────────── */
.dark-mode .pf-vnama           { color: #e9ecef; }
.dark-mode .pl-dot             { background: #dee2e6; }
.dark-mode .quote-of-the-day h3, .dark-mode .quote-of-the-day p { color: #e9ecef; }
.dark-mode .fx42-kpi-nilai     { color: #f8f9fa; }
.dark-mode .mn-ava, .dark-mode .tl-ava, .dark-mode .tl-komp-ava,
.dark-mode .tl-komp-foto { background: #6c757d; }

/* ── 9. Kotak berwarna yang dulu ditulis sebagai gaya sebaris ───────────────
   Gaya sebaris tidak bisa ditimpa berkas tema mana pun kecuali dengan
   !important, dan menimpa gaya sebaris dengan !important berarti tema dan
   halaman saling berebut. Yang dilakukan sebaliknya: gaya sebarisnya dicabut
   dari halamannya dan diganti kelas, lalu kelasnya digelapkan di sini. */
.dark-mode .kotak-lembut       { background: #3f474e !important; border-color: #55606a !important; color: #dee2e6; }
.dark-mode .kotak-rumus        { background: #2b3035 !important; color: #dee2e6; }
.dark-mode .kotak-info-biru    { background: #2f4a63 !important; color: #cfe2ff; }
.dark-mode .kotak-info-hijau   { background: #24422c !important; color: #b7e0c2; }
.dark-mode .kotak-info-jingga  { background: #4a3b22 !important; color: #f0d6a8; }
.dark-mode .kotak-info-abu     { background: #3f474e !important; color: #dee2e6; }
.dark-mode .sb-ava             { background: #6c757d !important; }

/* ── 10. Sisa sapuan kedua ──────────────────────────────────────────────── */
.dark-mode .select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
.dark-mode .select2-container--default    .select2-results__option[aria-selected="true"] {
    background-color: #3f474e; color: #f8f9fa;
}
.dark-mode .pbl-grup-ringkas   { color: #adb5bd; }
.dark-mode .kpi-baris-terpakai { background-color: #3f474e !important; color: #adb5bd !important; }

/* ── [PATCH159] Bagian "KPI Saya" ───────────────────────────────────────── */
.dark-mode .kpi-saya-section .card-header { background: #4a4322; }

/* ── [PATCH159] Isian yang diisi otomatis peramban ──────────────────────────
   Chrome mengecat kotak isian yang ia isi sendiri dengan biru muda, dan
   catnya BUKAN properti background biasa: ia digambar di lapisan tersendiri
   yang tidak bisa ditimpa aturan CSS apa pun. Satu-satunya cara mengubahnya
   adalah menutupinya dengan bayangan dalam setebal kotaknya. Tanpa ini, di
   tema gelap kotak pencarian yang pernah diisi berubah menjadi kotak biru
   muda berisi tulisan putih, dan yang mengetik di dalamnya tidak bisa membaca
   apa yang ia ketik. */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode select:-webkit-autofill {
    -webkit-text-fill-color: #f8f9fa !important;
    caret-color: #f8f9fa;
    -webkit-box-shadow: 0 0 0 1000px #454d55 inset !important;
            box-shadow: 0 0 0 1000px #454d55 inset !important;
    border-color: #6c757d !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── [PATCH161] Modul Kendala: kotak yang selama ini luput dari sapuan ──────
   .kdl-tutorial tidak pernah sampai ke pemindai tema gelap, dan itu bukan
   karena pemindainya salah baca melainkan karena satu baris @media print
   satu baris di atasnya membuat pembuang blok cetak menelan aturan ini juga.
   Lihat catatan panjang di tests/uji_patch158_gelap_semua.js. */
.dark-mode .kdl-tutorial   { background: #2f4a63; border-color: #3f6791; color: #dbe7f5; }
.dark-mode .kdl-tutorial .text-muted { color: #a8bfd6 !important; }
.dark-mode .kdl-lanjutan   { border-color: #55606a; }
.dark-mode .kdl-lanjutan > summary { color: #dee2e6; }
.dark-mode .kdl-urg-opsi   { border-color: #55606a; }
.dark-mode .kdl-urg-opsi:hover { border-color: #8ab4f8; }
.dark-mode .kdl-log        { background: #23272b; color: #dee2e6; }

/* =============================================================================
 * [PATCH162] KONTRAS TEKS: SEMUA ABU PERTENGAHAN YANG TIDAK PERNAH TERPERIKSA
 * =============================================================================
 * Nura melaporkan "sakit mata" tiga kali berturut-turut di tempat yang berbeda:
 * ringkasan di daftar briefing, isi popup detail pengajuan, dan modal Report
 * Kendala. Sapuan mode gelap hijau setiap kali.
 *
 * Sebabnya satu baris di alat ukurnya, bukan di portalnya. luminansi() memakai
 * rata-rata berbobot dari nilai kanal APA ADANYA, tanpa meluruskan gamma sRGB
 * lebih dulu. Akibatnya #6c757d, abu redup yang paling sering dipakai di sini,
 * terbaca 0,454 padahal sebenarnya 0,174, yaitu di atas ambang pencalonan 0,35, jadi
 * ia tidak pernah sekali pun diperiksa. Begitu pula setiap abu pertengahan
 * lain di seluruh portal.
 *
 * Sesudah rumusnya dibetulkan dan latar tembus pandang dicampur sungguhan,
 * terukur 109 tempat yang kontrasnya di bawah 4,5:1. Yang paling parah 1,24:1.
 * Yang di bawah ini menaikkan semuanya ke sekurang-kurangnya 4,5:1, dan
 * penjaganya sekarang menghitung rasio kontras, bukan menebak dari terang
 * gelapnya saja.
 *
 * Warnanya dinaikkan lewat KETERANGAN HSL, bukan dicampur ke putih: hijau harus
 * tetap terbaca hijau dan merah tetap merah. Merah adalah pengecualian yang
 * tidak bisa dihindari: merah pekat tidak akan pernah mencapai 4,5:1 di atas
 * kelabu gelap, jadi ia memang menjadi merah muda. Merah muda yang terbaca
 * lebih berguna daripada merah yang tidak.
 * ========================================================================== */
/* Abu redup: keterangan, sub-judul, isian kosong, dan penanda waktu. 61 pemilih. */
.dark-mode #importDropZoneFilename,
.dark-mode .approval-route-option .aro-desc,
.dark-mode .fx42-kpi-label,
.dark-mode .fx42-kpi-sub,
.dark-mode .fx42-label-mini,
.dark-mode .ib-teks,
.dark-mode .kdl-kartu-kaki,
.dark-mode .kdl-kartu-kode,
.dark-mode .kdl-kolom-sisa,
.dark-mode .kdl-kosong,
.dark-mode .kdl-lampiran-ikon,
.dark-mode .kdl-penanda,
.dark-mode .kdl-ringkas-ket,
.dark-mode .kdl-sla-usai,
.dark-mode .kdl-urg-ket,
.dark-mode .kdl-utas-kaki,
.dark-mode .kdl-utas-status,
.dark-mode .mn-jab,
.dark-mode .pbl-entri-bagian,
.dark-mode .pbl-entri-tgl,
.dark-mode .pbl-grup-panah,
.dark-mode .pbl-grup-ringkas,
.dark-mode .pengajuan-detail-label,
.dark-mode .pf-vsub,
.dark-mode .rb-psub,
.dark-mode .ringkas-briefing,
.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear,
.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder,
.dark-mode .select2-container--default .select2-selection--single .select2-selection__clear,
.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder,
.dark-mode .st-hint,
.dark-mode .st-kbalas:hover,
.dark-mode .st-kom-head button,
.dark-mode .st-kosong,
.dark-mode .st-ksuka:hover,
.dark-mode .st-lagu-info,
.dark-mode .st-lg-artis,
.dark-mode .st-nama,
.dark-mode .st-penonton h6 button,
.dark-mode .st-pjab,
.dark-mode .st-pustaka-artis,
.dark-mode .st-pwkt,
.dark-mode .tf-judul,
.dark-mode .tl-caption,
.dark-mode .tl-empty,
.dark-mode .tl-komp-foto:hover,
.dark-mode .tl-komp-ytmulai label,
.dark-mode .tl-likers,
.dark-mode .tl-private,
.dark-mode .tl-rbalas,
.dark-mode .tl-rbalas:hover,
.dark-mode .tl-reply-empty,
.dark-mode .tl-reply-wkt,
.dark-mode .tl-rsuka,
.dark-mode .tl-rsuka:hover,
.dark-mode .tl-sub,
.dark-mode .tl-yt-judul,
.dark-mode .um-tema-label,
.dark-mode .yt-hasil-info,
.dark-mode .yt-hasil-kanal {
    color: #c6ccd2;
}

/* Ungu merek portal, dipakai untuk penanda aktif dan sebutan orang. 11 pemilih. */
.dark-mode .ib-buka-tanda,
.dark-mode .ib-tab.is-aktif,
.dark-mode .mn-chip,
.dark-mode .st-jenis i,
.dark-mode .st-komentar .mn-chip,
.dark-mode .st-lg-pakai,
.dark-mode .st-lg-unggah-btn,
.dark-mode .st-pt-kembali:hover,
.dark-mode .tl-kind,
.dark-mode .tl-me-chip,
.dark-mode .tl-reply-n {
    color: #cbc5fe;
}

/* Merah muda tombol suka. 9 pemilih. */
.dark-mode .st-burst,
.dark-mode .st-kburst,
.dark-mode .st-kom-del:hover,
.dark-mode .st-ksuka.is-suka,
.dark-mode .tl-heartburst,
.dark-mode .tl-like.is-liked,
.dark-mode .tl-rburst,
.dark-mode .tl-reply-del:hover,
.dark-mode .tl-rsuka.is-suka {
    color: #ffb8c9;
}

/* Merah "lewat target", "kurang", dan tombol hapus. 7 pemilih. */
.dark-mode .kdl-sla-lewat,
.dark-mode .kpi-emp-card .score-poor,
.dark-mode .kpi-solo-angka.score-poor,
.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover,
.dark-mode .select2-container--default .select2-selection--single .select2-selection__clear:hover,
.dark-mode .st-lagu-buang,
.dark-mode .st-pustaka-del {
    color: #ffb3b8;
}

/* Hijau "aman" dan "baik". 4 pemilih. */
.dark-mode .kdl-sla-aman,
.dark-mode .kdl-sla-tepat,
.dark-mode .kpi-emp-card .score-excellent,
.dark-mode .kpi-solo-angka.score-excellent {
    color: #7de094;
}

/* Biru tautan, centang terverifikasi, dan kolom tabel yang sedang disaring. 4 pemilih. */
.dark-mode .st-verified,
.dark-mode .tf-item.aktif,
.dark-mode .tl-verified,
.dark-mode th.tf-kepala.tf-aktif .tf-ikon {
    color: #9bd3f8;
}

/* Biru muda "cukup". 2 pemilih. */
.dark-mode .kpi-emp-card .score-good,
.dark-mode .kpi-solo-angka.score-good {
    color: #69daec;
}

/* Biru judul kotak tutorial dan tindak lanjut di Report Kendala. 2 pemilih. */
.dark-mode .kdl-tutorial > summary,
.dark-mode .kdl-utas-followup {
    color: #a8c7fa;
}

/* Hijau angka utama di kartu Finance. 1 pemilih. */
.dark-mode .fx42-kpi--utama .fx42-kpi-nilai {
    color: #7be092;
}

/* Ungu penanda jenis unggahan foto. 1 pemilih. */
.dark-mode .tl-kind--foto {
    color: #dec1f9;
}

/* Hijau penanda jenis unggahan status. 1 pemilih. */
.dark-mode .tl-kind--status {
    color: #6ee7b7;
}

/* Biru penanda jenis unggahan tautan. 1 pemilih. */
.dark-mode .tl-kind--post {
    color: #86d5fe;
}

/* Merah muda tombol batal di formulir komponen Timeline. 1 pemilih. */
.dark-mode .tl-komp-ytform button {
    color: #f7ada6;
}

/* Kuning penanda catatan internal di Report Kendala. 1 pemilih. */
.dark-mode .kdl-utas-internal .kdl-utas-kaki b {
    color: #f0c674;
}
/* Bilah kemajuan di modal detail kendala. [PATCH162] */
.dark-mode .kdl-maju      { background: #5a636c; }
.dark-mode .kdl-maju > span { background: #4d9bff; }

/* Kotak uraian dan hasil akhir di modal detail kendala. [PATCH162] */
.dark-mode .kdl-uraian    { border-color: #55606a; }

/* Tombol suka dan balas pada komentar story. [PATCH162]
   Warna diamnya #9aa0b0, dan hanya varian :hover-nya yang sempat tercatat
   bocor karena penjaganya mengukur keadaan diam saat tetikusnya gagal
   ditempatkan. Keduanya disebut di sini supaya bentuk diam dan bentuk
   tersorotnya tidak pernah berbeda kelasnya. */
.dark-mode .st-ksuka,
.dark-mode .st-kbalas { color: #c6ccd2; }

/* Tombol hapus postingan Timeline. [PATCH162]
   Ditulis untuk keadaan diam DAN keadaan tersorot, sama seperti tombol suka
   dan balas di atas: penjaga kontras mengukur keadaan tersorot hanya kalau
   tetikusnya berhasil ditempatkan, jadi warna yang hanya dibetulkan di salah
   satu keadaan bisa terlihat beres di satu kali jalan dan bocor di jalan
   berikutnya. */
.dark-mode .tl-del        { color: #c6ccd2; }
.dark-mode .tl-del:hover  { color: #ffb8c9; }

/* Isi kotak detail pengajuan dan isi kotak keterangannya. [PATCH162]

   Kedua warna ini datang dari lembar gaya yang DISUNTIKKAN pengajuan-helpers.js
   ke <head> saat halamannya dibuka, bukan dari berkas CSS mana pun. Keduanya
   menulis color: #212529 langsung pada elemennya, jadi ia menang atas warna
   terang yang diwariskan kotaknya, dan hasilnya tulisan hitam pekat di atas
   kotak gelap: 1,5:1. Itulah isian yang dilaporkan bikin sakit mata.

   Nilainya sengaja LEBIH TERANG daripada labelnya. Sebelumnya terbalik: label
   lebih terang daripada isinya, padahal yang dicari orang adalah isinya. */
.dark-mode .pengajuan-detail-value     { color: #e9edf1; }
.dark-mode .pengajuan-detail-note-text { color: #ffe08a; }

/* ── Kotak Aspirasi: tirai kunci, jadwal, dan tanggapan. [PATCH163] ──────── */
.dark-mode .asp-jadwal,
.dark-mode .asp-1on1 {
    background: #3a4550;
    border-color: #55606a;
}

/* Kotak tanggapan tetap kehijauan supaya bedanya dengan catatan internal
   terbaca di kedua tema, bukan cuma di tema terang. */
.dark-mode .asp-tanggapan {
    background: #33423a;
    border-color: #4d6b57;
}

.dark-mode .asp-kunci-ikon      { color: #9bd3f8; }
.dark-mode .asp-pin::placeholder { color: #c6ccd2; }

/* =============================================================================
 * [PATCH164a] EDITOR QUILL DI BRIEFING
 * =============================================================================
 * Dilaporkan sebagai: warna dark mode di Briefing kurang cerah.
 *
 * Sebabnya bukan warna yang kurang terang, melainkan warna yang tidak pernah
 * diperiksa. Seluruh rupa editor ini datang dari quill.snow.css, berkas pustaka
 * dari CDN yang tidak pernah dibuka penjaga kontras: yang dipindai hanya berkas
 * di app/ dan assets/. Ikon toolbarnya digambar sebagai garis dan bidang SVG
 * berwarna #444, yaitu abu gelap di atas latar gelap.
 *
 * Ini celah keempat dengan bentuk yang sama dalam sepekan: penjaganya hijau
 * bukan karena aturannya benar, melainkan karena jangkauannya tidak sampai ke
 * sana. Tiga sebelumnya blok @media print, rumus luminansi tanpa gamma, dan
 * lembar gaya yang disuntikkan JavaScript. Karena itu warna bawaan Quill
 * sekarang ikut didaftarkan di PUSTAKA_TERANG pada sapuannya, supaya kelas
 * pustaka ini terlihat seperti kelas mana pun.
 * ========================================================================== */

/* Kerangka: toolbar dan kotak tulisnya. */
.dark-mode .ql-toolbar.ql-snow,
.dark-mode .ql-container.ql-snow {
    border-color: #55606a;
    background: #3a4550;
}

.dark-mode .ql-container.ql-snow { background: #343a40; }
.dark-mode .ql-editor            { color: #e9edf1; }

/* Ikon toolbar. Quill menggambarnya sebagai SVG, jadi yang diwarnai stroke dan
   fill-nya, bukan color. Tanpa keduanya, tombol-tombolnya nyaris tidak
   terlihat sama sekali. */
.dark-mode .ql-snow .ql-stroke        { stroke: #c6ccd2; }
.dark-mode .ql-snow .ql-stroke-miter  { stroke: #c6ccd2; }
.dark-mode .ql-snow .ql-fill,
.dark-mode .ql-snow .ql-stroke.ql-fill { fill: #c6ccd2; }
.dark-mode .ql-snow .ql-picker        { color: #c6ccd2; }

/* Tombol yang sedang aktif atau disorot dibuat lebih terang lagi, bukan sekadar
   berubah sedikit: perbedaan yang hanya terlihat kalau dibandingkan
   berdampingan bukan perbedaan yang bisa dipakai. */
.dark-mode .ql-snow .ql-toolbar button:hover .ql-stroke,
.dark-mode .ql-snow button:hover .ql-stroke,
.dark-mode .ql-snow button.ql-active .ql-stroke,
.dark-mode .ql-snow .ql-picker-label:hover,
.dark-mode .ql-snow .ql-picker-label.ql-active { stroke: #8ecbff; color: #8ecbff; }

.dark-mode .ql-snow .ql-toolbar button:hover .ql-fill,
.dark-mode .ql-snow button:hover .ql-fill,
.dark-mode .ql-snow button.ql-active .ql-fill { fill: #8ecbff; }

/* Daftar pilihan yang mengambang, mis. pemilih ukuran huruf. */
.dark-mode .ql-snow .ql-picker-options {
    background: #3a4550;
    border-color: #55606a;
    color: #e9edf1;
}

/* Kotak tempel tautan dan gambar. */
.dark-mode .ql-snow .ql-tooltip {
    background: #3a4550;
    border-color: #55606a;
    color: #e9edf1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.dark-mode .ql-snow .ql-tooltip input[type=text] {
    background: #2f3841;
    border-color: #55606a;
    color: #e9edf1;
}

/* Teks contoh saat kotaknya masih kosong. Bawaan Quill rgba(0,0,0,.6), yaitu
   hitam pudar, dan itulah yang terbaca sebagai "hampir tidak ada tulisannya". */
.dark-mode .ql-editor.ql-blank::before { color: #aeb6bf; }