/*
 * Penyesuaian form global untuk dark mode.
 * File ini dimuat setelah style halaman agar komponen Bootstrap, Select2,
 * dan field dinamis memakai palet yang sama di seluruh aplikasi.
 */

[data-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
    --bs-secondary-bg: #293342;
    --bs-tertiary-bg: #232e3d;
    --bs-form-control-bg: var(--input-bg);
    --bs-form-control-color: var(--input-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    border-color: var(--border-color) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .input-group-text {
    background-color: #293342 !important;
    color: var(--text-main) !important;
    opacity: 1;
}

/* Bootstrap menambahkan kotak terang di belakang floating label melalui ::after. */
[data-theme="dark"] .form-floating > label,
[data-theme="dark"] .form-floating > label::after {
    background-color: transparent !important;
}

[data-theme="dark"] .form-floating > label {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label {
    color: #ff9b72 !important;
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup {
    background-color: var(--input-bg);
    color: var(--input-text);
}

[data-theme="dark"] .form-control::file-selector-button {
    border-color: var(--border-color);
    background-color: #293342;
    color: var(--text-main);
}

[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: #344052;
}

[data-theme="dark"] .form-check-input:not(:checked) {
    border-color: #647084;
    background-color: var(--input-bg);
}

/* Select2 single maupun multiple, termasuk dropdown yang ditempel ke body. */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection {
    border-color: var(--border-color) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .select2-container .select2-selection__rendered,
[data-theme="dark"] .select2-container .select2-selection__placeholder,
[data-theme="dark"] .select2-container .select2-search__field {
    color: var(--input-text) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-search--dropdown,
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    border-color: var(--border-color) !important;
    background-color: var(--bg-card) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .select2-results__option {
    background-color: var(--bg-card);
    color: var(--input-text) !important;
}

[data-theme="dark"] .select2-results__option--selected {
    background-color: #344052 !important;
}

[data-theme="dark"] .select2-results__option--highlighted,
[data-theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-orange) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice,
[data-theme="dark"] .select2-container--default .select2-selection__choice {
    border-color: #596579 !important;
    background-color: #344052 !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice__remove,
[data-theme="dark"] .select2-container--default .select2-selection__choice__remove {
    color: var(--text-main) !important;
}

/* Chrome dapat memaksa background terang pada field yang terisi otomatis. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--input-text) !important;
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    caret-color: var(--input-text);
}

/* SweetAlert dipasang langsung di body, jadi warnanya perlu mengikuti tema aplikasi. */
[data-theme="dark"] .swal2-popup,
[data-theme="dark"] .swal2-toast {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
[data-theme="dark"] .swal2-close,
[data-theme="dark"] .swal2-validation-message {
    color: var(--text-main) !important;
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    border-color: var(--border-color) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .swal2-validation-message,
[data-theme="dark"] .swal2-footer {
    border-color: var(--border-color) !important;
    background: #293342 !important;
}

[data-theme="dark"] .swal2-success-circular-line-left,
[data-theme="dark"] .swal2-success-circular-line-right,
[data-theme="dark"] .swal2-success-fix {
    background-color: var(--bg-card) !important;
}

/* DataTables 2 memakai class .dt-*, sedangkan beberapa halaman lama masih
   menghasilkan class .dataTables_*. Keduanya dibuat mengikuti tema yang sama. */
[data-theme="dark"] .dt-container,
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dt-container .dt-info,
[data-theme="dark"] .dt-container .dt-length,
[data-theme="dark"] .dt-container .dt-search,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dt-container label,
[data-theme="dark"] .dataTables_wrapper label {
    color: var(--text-main) !important;
}

[data-theme="dark"] .dt-container .dt-input,
[data-theme="dark"] .dataTables_wrapper input[type="search"],
[data-theme="dark"] .dataTables_wrapper select {
    border-color: var(--border-color) !important;
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .dt-container .dt-input option,
[data-theme="dark"] .dataTables_wrapper select option {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

[data-theme="dark"] .dt-container .dt-paging .dt-paging-button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    border-color: var(--primary-orange) !important;
    background: rgba(241, 90, 34, 0.16) !important;
    color: #ff9b72 !important;
}

[data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current,
[data-theme="dark"] .dt-container .dt-paging .dt-paging-button.current:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--primary-orange) !important;
    background: var(--primary-orange) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .dt-container .dt-paging .dt-paging-button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #718096 !important;
    opacity: 0.65;
}

/* Turunkan teks pilihan sedikit agar tidak menempel ke bagian atas floating field. */
.sizing-page .form-floating .select2-container--bootstrap-5 .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: 3.5rem !important;
    padding: 0.8rem 2.25rem 0.15rem 0.75rem !important;
}

.sizing-page .form-floating .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    width: 100%;
    margin-top: 0.65rem !important;
    padding-left: 0 !important;
    line-height: 1.35 !important;
}