/**
 * QoL Fixes — global CSS patch untuk dark mode compat + modal close fix.
 *
 * Problem yang di-fix:
 *   1. Modal header/iframe z-index: PDF iframe sering "menelan" klik ke tombol
 *      btn-close. Fix: modal-header default position relative + z-index 10.
 *   2. Modal/card body yang hardcode bg-white/bg-light break di dark mode.
 *      Fix: override ke var(--custom-white) yang punya variant dark otomatis.
 *   3. btn-close default gelap, tidak terlihat di dark background.
 *      Fix: filter invert saat dark mode aktif.
 *
 * Token: pakai CSS variable dari styles.css (:root + [data-theme-mode=dark]).
 * Tidak hardcode hex, supaya konsisten dengan theme token yang sudah ada.
 */

/* === Fix B4: modal header harus di atas iframe PDF supaya tombol X bisa diklik === */
.modal-header {
    position: relative;
    z-index: 10;
}

/* Modal dengan iframe (preview PDF/gambar) — pastikan iframe tidak overlap header */
.modal:has(.modal-body iframe) .modal-body {
    position: relative;
    z-index: 1;
}

/* === Fix B5 + dark mode global untuk modal/card yang hardcode light bg === */
[data-theme-mode='dark'] .modal-content,
[data-theme-mode='dark'] .modal-header,
[data-theme-mode='dark'] .modal-body,
[data-theme-mode='dark'] .modal-footer {
    background-color: var(--custom-white);
    color: var(--default-text-color);
    border-color: var(--default-border);
}

[data-theme-mode='dark'] .modal-header.bg-white,
[data-theme-mode='dark'] .modal-body.bg-white,
[data-theme-mode='dark'] .modal-footer.bg-white,
[data-theme-mode='dark'] .modal-header.bg-light,
[data-theme-mode='dark'] .modal-body.bg-light,
[data-theme-mode='dark'] .modal-footer.bg-light,
[data-theme-mode='dark'] .card.bg-white,
[data-theme-mode='dark'] .card.bg-light {
    background-color: var(--custom-white) !important;
    color: var(--default-text-color);
}

/* Card body yang hardcode style background putih */
[data-theme-mode='dark'] [style*='background:#fff'],
[data-theme-mode='dark'] [style*='background: #fff'],
[data-theme-mode='dark'] [style*='background-color:#fff'],
[data-theme-mode='dark'] [style*='background-color: #fff'] {
    background-color: var(--custom-white) !important;
    background: var(--custom-white) !important;
    color: var(--default-text-color);
}

/* === btn-close: terlihat di dark mode (default BS pakai svg gelap) === */
[data-theme-mode='dark'] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

[data-theme-mode='dark'] .btn-close:hover {
    opacity: 1;
}

/* === Form input yang hardcode bg putih === */
[data-theme-mode='dark'] input.form-control[style*='background'],
[data-theme-mode='dark'] select.form-control[style*='background'],
[data-theme-mode='dark'] textarea.form-control[style*='background'] {
    background-color: var(--form-control-bg) !important;
    color: var(--default-text-color);
    border-color: var(--input-border);
}

/* === Spinner assurance: pastikan spinner-border kontras di dark === */
[data-theme-mode='dark'] .spinner-border {
    color: var(--default-text-color);
}

/* === Loading overlay helper (kalau dipakai) === */
.silondo-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: inherit;
}

[data-theme-mode='dark'] .silondo-loading-overlay {
    background: rgba(255, 255, 255, 0.1);
}

/* === QoL: tombol modern download (sudah ada di pengajuan, pastikan dark variant) === */
[data-theme-mode='dark'] .btn-download-modern {
    background-color: var(--custom-white);
    color: var(--default-text-color);
    border-color: var(--default-border);
}

/* === QoL: Select2 dark mode compat (dipakai /desmart, /public/profile) ===
 * Select2 render dropdown & selection di luar .card/.modal (di body / setelah
 * elemen select) jadi tidak otomatis kena override token dari styles.css.
 * Pakai hex eksplisit + !important untuk pastikan surface gelap, bukan
 * var(--custom-white) yang bisa transparan di beberapa tema turunan.
 */
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection,
[data-theme-mode='dark'] .select2-container--default .select2-selection--single,
[data-theme-mode='dark'] .select2-container--default .select2-selection--multiple {
    background-color: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9 !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f1f5f9 transparent transparent transparent !important;
}

[data-theme-mode='dark'] .select2-dropdown {
    background-color: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme-mode='dark'] .select2-dropdown .select2-results__option {
    color: #f1f5f9 !important;
}

[data-theme-mode='dark'] .select2-dropdown .select2-results__option[aria-selected='true'] {
    background-color: #374151 !important;
    color: #f1f5f9 !important;
}

[data-theme-mode='dark'] .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-search--dropdown .select2-search__field,
[data-theme-mode='dark'] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: #111827 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Saat select2 disabled di dark — pastikan tetap terbaca kontras. */
[data-theme-mode='dark'] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #374151 !important;
    color: #cbd5e1 !important;
}

/* === QoL: btn-close di auth-modal & modal dark surface ===
 * BS5 .btn-close default SVG gelap, tidak terlihat di surface gelap.
 * Selain dark mode, beberapa modal (auth captcha, profile captcha) pakai
 * surface gelap bahkan di light mode → force filter invert agar icon X visible.
 */
.auth-modal .btn-close,
.modal-content-sm .btn-close,
.profile-captcha-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}

.auth-modal .btn-close:hover,
.profile-captcha-modal .btn-close:hover {
    opacity: 1;
}

/* Fallback: kalau .btn-close background-image hilang, pakai SVG inline via mask. */
.btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

/* === QoL: btn-light di dark mode (dipakai tombol Validasi & Upload SK, dll) ===
 * BS5 .btn-light default bg #f8f9fa + text gelap. Di dark mode jadi kontras rendah.
 * Override ke surface gelap + text terang.
 */
[data-theme-mode='dark'] .btn-light {
    background-color: var(--custom-white);
    color: var(--default-text-color);
    border-color: var(--default-border);
}

[data-theme-mode='dark'] .btn-light:hover {
    background-color: var(--gray-3);
    color: var(--default-text-color);
}

[data-theme-mode='dark'] .btn-light .text-primary,
[data-theme-mode='dark'] .btn-light.text-primary {
    color: var(--default-text-color) !important;
}

/* Tombol aksi detail submission dengan border — pastikan border terlihat dark. */
[data-theme-mode='dark'] .btn-light.border,
[data-theme-mode='dark'] .btn.btn-light.border {
    border-color: var(--default-border) !important;
}

/* === QoL: Select2 match Bootstrap 5 .form-select ===
 * Select2 default styling beda jauh dari .form-select BS5 (padding, height,
 * border-radius, font-size). Rule ini sinkronkan select2 dengan input lain
 * supaya sejajar di form. Dipakai /desmart, /public/profile.
 *
 * Nilai dirujuk dari BS5 form-select: height calc(1.5em + .75rem + 2px),
 * padding .375rem .75rem, font-size 1rem, border-radius .25rem.
 */

/* Wrapper selection */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Rendered text vertikal center, atur padding-right agar tidak overlap arrow */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2.container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    color: inherit !important;
}

/* Clear button ('x') */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    margin-right: 0.5rem !important;
}

/* Placeholder warna sama dengan BS5 .form-control::placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
}

/* Arrow (chevron) — posisikan seperti caret BS5 form-select */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px) !important;
    top: 0 !important;
    right: 0.5rem !important;
    width: 1rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #495057 transparent transparent transparent !important;
}

/* Open / focus state — match BS5 focus ring */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--open .select2-selection--single {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Dropdown — match BS5 dropdown-menu style */
.select2-dropdown {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    background-color: #fff !important;
    color: #212529 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.select2-results__option {
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--bootstrap4 .select2-results__option[aria-selected='true'] {
    background-color: #e9ecef !important;
}

/* Search box di dropdown (untuk fitur searchable). Aktif otomatis saat count > threshold. */
.select2-search--dropdown .select2-search__field {
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    color: #212529 !important;
    background-color: #fff !important;
}

/* Disabled state — match BS5 .form-select:disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--bootstrap4.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* === Dark mode override (hex eksplisit + !important, setelah rule BS5 di atas) === */
[data-theme-mode='dark'] .select2-container--default .select2-selection--single,
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection--single,
[data-theme-mode='dark'] .select2-container--default .select2-selection--multiple,
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection--multiple {
    background-color: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9 !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__arrow b,
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #f1f5f9 transparent transparent transparent !important;
}

[data-theme-mode='dark'] .select2-dropdown {
    background-color: #1f2937 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme-mode='dark'] .select2-results__option {
    color: #f1f5f9 !important;
    background-color: transparent !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-results__option[aria-selected='true'],
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-results__option[aria-selected='true'] {
    background-color: #374151 !important;
    color: #f1f5f9 !important;
}

[data-theme-mode='dark'] .select2-search--dropdown .select2-search__field,
[data-theme-mode='dark'] .select2-search--inline .select2-search__field {
    background-color: #111827 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

[data-theme-mode='dark'] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme-mode='dark'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}