/* ==========================================================
   THEME COMPATIBILITY LAYER
   Dimuat paling akhir setelah Bootstrap dan seluruh CSS proyek.
========================================================== */

/* Daftar Talenta: readable coach/status badges and multi-select options. */
/* Shared gallery and student-owned portfolio surfaces. */
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-media {
  background: #111c30 !important;
  color: #c7e1ff;
  border-bottom: 1px solid #30445f;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-media--document {
  background: linear-gradient(135deg, #172743, #111c30) !important;
  color: #9cc8ff !important;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-item__title,
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-student strong {
  color: #edf3fc;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-student {
  border-color: #30445f;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .portfolio-student small,
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .text-body-secondary {
  color: #aebed4 !important;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .text-primary {
  color: #9cc8ff !important;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .badge.text-bg-primary {
  background: #203f67 !important;
  color: #c7e1ff !important;
  border: 1px solid #5684ba;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .badge.text-bg-secondary {
  background: #24344b !important;
  color: #d4dfef !important;
  border: 1px solid #526681;
}
:is(html.dark, html[data-bs-theme="dark"]) .portfolio-page .btn-outline-danger {
  --bs-btn-color: #ffacb5;
  --bs-btn-border-color: #b56473;
  --bs-btn-hover-bg: #793440;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #da8997;
}
:is(html.dark, html[data-bs-theme="dark"]) #globalModal:has(#portfolioKind) .form-text {
  color: #aebed4 !important;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .badge {
  border: 1px solid transparent;
  font-weight: 600;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .badge.text-bg-primary {
  background-color: #203f67 !important;
  color: #c7e1ff !important;
  border-color: #5684ba;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .badge.text-bg-info {
  background-color: #153e4d !important;
  color: #b6edff !important;
  border-color: #397c91;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .badge.text-bg-success {
  background-color: #174333 !important;
  color: #b6f1d0 !important;
  border-color: #39795b;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .badge.text-bg-secondary {
  background-color: #24344b !important;
  color: #d4dfef !important;
  border-color: #526681;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .text-body-secondary,
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .text-muted,
:is(html.dark, html[data-bs-theme="dark"]) #globalModal:has(#talentCoaches) .form-text {
  color: #aebed4 !important;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .btn-outline-danger {
  --bs-btn-color: #ffacb5;
  --bs-btn-border-color: #b56473;
  --bs-btn-hover-bg: #793440;
  --bs-btn-hover-border-color: #da8997;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #793440;
  --bs-btn-active-border-color: #da8997;
  --bs-btn-active-color: #fff;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentListPage .btn-outline-success {
  --bs-btn-color: #b6f1d0;
  --bs-btn-border-color: #569f79;
  --bs-btn-hover-bg: #256046;
  --bs-btn-hover-border-color: #7fc9a0;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #256046;
  --bs-btn-active-border-color: #7fc9a0;
  --bs-btn-active-color: #fff;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentCoaches {
  background-color: #0e1828 !important;
  color: #eaf1fa !important;
  border-color: #30445f !important;
  color-scheme: dark;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentCoaches option {
  background-color: #0e1828;
  color: #eaf1fa;
  padding: 0.4rem 0.65rem;
}
:is(html.dark, html[data-bs-theme="dark"]) #talentCoaches option:checked {
  background: #28578d linear-gradient(#28578d, #28578d);
  color: #f4f7fc;
}

html {
  color-scheme: light;
}
html.dark,
html[data-bs-theme="dark"] {
  color-scheme: dark;
}

html.dark .grade-ranking-badge,
html[data-bs-theme="dark"] .grade-ranking-badge {
  color: #f7fbff !important;
  background-color: #28578d !important;
  border-color: #5684ba !important;
  box-shadow: 0 0 0 1px rgba(126, 174, 228, 0.14);
}

/* Palet gelap menggunakan navy, bukan hitam/abu netral. */
html.dark body,
html.dark #content {
  background-color: #0d1728 !important;
  color: #d7e0ee;
}

html.dark .card,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .toast,
html.dark .list-group-item {
  background-color: #132039 !important;
  border-color: #304563 !important;
}

html.dark .form-control,
html.dark .form-select,
html.dark textarea,
html.dark .input-group-text {
  background-color: #0d1728 !important;
  color: #edf3fc !important;
  border-color: #304563 !important;
}

html.dark .form-select:not([multiple]) {
  background-color: #0d1728 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23D7E0EE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
}

html.dark .form-select:not([multiple]):focus {
  background-color: #0d1728 !important;
}

html.dark .form-select option {
  background-color: #0d1728;
  color: #edf3fc;
}

html.dark .form-control:focus,
html.dark .form-select:focus,
html.dark textarea:focus {
  background-color: #0d1728 !important;
  border-color: #5687c5 !important;
  color: #ffffff !important;
}

/* Hindari utility terang tetap memaksa teks gelap pada judul/filter. */
html.dark .card-header .text-dark,
html.dark .modal-header .text-dark,
html.dark button.btn-link.text-dark,
html.dark a.btn-link.text-dark {
  color: var(--bs-body-color) !important;
}

html.dark button.btn-link.text-dark:hover,
html.dark a.btn-link.text-dark:hover {
  color: var(--bs-primary) !important;
}

/* Header tabel Bootstrap yang memakai table-light. */
html.dark .table-light,
html.dark thead.table-light,
html.dark .table-light > tr > th,
html.dark thead.table-light > tr > th {
  --bs-table-bg: #080d16;
  --bs-table-color: #f8fafc;
  --bs-table-border-color: #304563;
  --bs-table-accent-bg: #080d16;
  --bs-table-bg-state: #080d16;
  background-color: #080d16 !important;
  color: #f8fafc !important;
  border-color: #304563 !important;
  box-shadow: inset 0 0 0 9999px #080d16 !important;
}

html.dark .table {
  --bs-table-color: #d7e0ee;
  --bs-table-border-color: #304563;
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: #24456f;
}

html.dark .table thead th {
  --bs-table-bg: #080d16;
  --bs-table-color: #f8fafc;
  --bs-table-accent-bg: #080d16;
  --bs-table-bg-state: #080d16;
  background-color: #080d16 !important;
  color: #f8fafc !important;
  border-color: #304563 !important;
  box-shadow: inset 0 0 0 9999px #080d16 !important;
}

/* Bootstrap 5.3 memberi hover melalui --bs-table-bg-state/box-shadow. */
html.dark .table > tbody > tr:hover > * {
  --bs-table-color-state: #ffffff !important;
  --bs-table-bg-state: #24456f !important;
  --bs-table-accent-bg: #24456f !important;
  background-color: #24456f !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 9999px #24456f !important;
}

/* Utility latar terang pada panel informasi, bukan badge status. */
html.dark .bg-light:not(.badge),
html.dark .bg-white:not(.badge) {
  background-color: #172743 !important;
  color: #edf3fc !important;
  border-color: #304563 !important;
}

/* Modal, dropdown, pagination dan toast dinamis. */
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .toast,
html.dark .list-group-item {
  background-color: #132039;
  color: #d7e0ee;
  border-color: #304563;
}

html.dark .dropdown-item {
  color: #d7e0ee;
}
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: #1d3356;
  color: #fff;
}

html.dark .page-link {
  background-color: #132039;
  color: #9cc9ff;
  border-color: #304563;
}
html.dark .page-link:hover {
  background-color: #1d3356;
  color: #fff;
}
html.dark .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
html.dark .page-item.disabled .page-link {
  background-color: #0d1728;
  color: #6f819c;
}

/* Tombol outline primary harus tetap kontras di atas permukaan navy gelap. */
html.dark .btn-outline-primary {
  --bs-btn-color: #9cc9ff;
  --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-color: #071426;
  --bs-btn-hover-bg: #8bb9fe;
  --bs-btn-hover-border-color: #a8ceff;
  --bs-btn-focus-shadow-rgb: 110, 168, 254;
  --bs-btn-active-color: #071426;
  --bs-btn-active-bg: #a8ceff;
  --bs-btn-active-border-color: #bedaff;
  --bs-btn-disabled-color: #7892b4;
  --bs-btn-disabled-border-color: #526a89;
  color: #9cc9ff !important;
  background-color: rgba(110, 168, 254, 0.08);
  border-color: #6ea8fe !important;
}

html.dark .btn-outline-primary:hover,
html.dark .btn-outline-primary:focus-visible,
html.dark .btn-outline-primary.active,
html.dark .btn-outline-primary:active,
html.dark .show > .btn-outline-primary.dropdown-toggle {
  color: #071426 !important;
  background-color: #8bb9fe !important;
  border-color: #a8ceff !important;
}

html.dark .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.32) !important;
}

html.dark .btn-outline-primary:disabled,
html.dark .btn-outline-primary.disabled {
  color: #7892b4 !important;
  background-color: rgba(110, 168, 254, 0.04) !important;
  border-color: #526a89 !important;
  opacity: 0.72;
}

/* Outline dark bawaan Bootstrap nyaris tidak terlihat di permukaan gelap. */
html.dark .btn-outline-dark {
  --bs-btn-color: #e6edf7;
  --bs-btn-border-color: #9aabc1;
  --bs-btn-hover-color: #0b1422;
  --bs-btn-hover-bg: #e6edf7;
  --bs-btn-hover-border-color: #f8fafc;
  --bs-btn-focus-shadow-rgb: 191, 203, 219;
  --bs-btn-active-color: #0b1422;
  --bs-btn-active-bg: #f1f5f9;
  --bs-btn-active-border-color: #ffffff;
  --bs-btn-disabled-color: #8090a6;
  --bs-btn-disabled-border-color: #53657d;
  color: #e6edf7 !important;
  background-color: rgba(230, 237, 247, 0.07);
  border-color: #9aabc1 !important;
}

html.dark .btn-outline-dark:hover,
html.dark .btn-outline-dark:focus-visible,
html.dark .btn-outline-dark.active,
html.dark .btn-outline-dark:active,
html.dark .show > .btn-outline-dark.dropdown-toggle {
  color: #0b1422 !important;
  background-color: #e6edf7 !important;
  border-color: #f8fafc !important;
}

html.dark .btn-outline-dark:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(191, 203, 219, 0.32) !important;
}

html.dark .btn-outline-dark:disabled,
html.dark .btn-outline-dark.disabled {
  color: #8090a6 !important;
  background-color: rgba(154, 171, 193, 0.04) !important;
  border-color: #53657d !important;
  opacity: 0.72;
}

/* Detail Biodata memiliki panel khusus di dalam modal. */
html.dark #detailBiodataModal .modal-body {
  background: #0d1728;
}
html.dark #detailBiodataModal .biodata-section,
html.dark #detailBiodataModal .biodata-section .card-body {
  background: #132039;
}
html.dark #detailBiodataModal .biodata-label {
  color: #9eb0c9;
}
html.dark #detailBiodataModal .biodata-value {
  color: #edf3fc;
}
html.dark #detailBiodataModal .biodata-label,
html.dark #detailBiodataModal .biodata-value {
  border-color: #304563;
}

/* Select2: dropdown dipindah ke body sehingga harus ditargetkan global. */
html.dark .select2-container--bootstrap-5 .select2-selection,
html.dark .select2-container--default .select2-selection,
html.dark .select2-dropdown,
html.dark .select2-search__field {
  background-color: #0d1728 !important;
  color: #edf3fc !important;
  border-color: #304563 !important;
}

html.dark .form-control:disabled,
html.dark .form-control[readonly],
html.dark .form-select:disabled {
  background-color: #0d1728 !important;
  color: #9eb0c9 !important;
  border-color: #304563 !important;
  opacity: 0.78;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #edf3fc !important;
  caret-color: #edf3fc;
  box-shadow: 0 0 0 1000px #0d1728 inset !important;
  border-color: #304563 !important;
}

html.dark .select2-container--bootstrap-5 .select2-selection__rendered,
html.dark .select2-container--default .select2-selection__rendered,
html.dark .select2-results__option {
  color: #d7e0ee !important;
}

html.dark .select2-results__option--highlighted,
html.dark .select2-results__option[aria-selected="true"] {
  background-color: #1d3356 !important;
  color: #fff !important;
}

html.dark .select2-selection__placeholder {
  color: #9eb0c9 !important;
}

/* Elemen browser yang tidak selalu mengikuti Bootstrap variables. */
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"] {
  color-scheme: dark;
  background-color: #0d1728 !important;
  color: #edf3fc !important;
  border-color: #304563 !important;
}

html.dark input[type="date"]:focus,
html.dark input[type="time"]:focus,
html.dark input[type="datetime-local"]:focus {
  background-color: #0d1728 !important;
  border-color: #5687c5 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(86, 135, 197, 0.2) !important;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.85;
  cursor: pointer;
}

html.dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

html.dark hr {
  border-color: #304563;
  opacity: 1;
}

/* ==========================================================
   GLOBAL VISUAL POLISH — DARK THEME
========================================================== */
:is(html.dark, html[data-bs-theme="dark"]) {
  --bs-body-bg: #0b1321;
  --bs-body-color: #cfdaea;
  --bs-secondary-bg: #121d2f;
  --bs-tertiary-bg: #18253a;
  --bs-border-color: #293a54;
  --bs-emphasis-color: #f3f7fd;
  --bs-secondary-color: #91a3bc;
  --bs-primary: #6ea5df;
  --bs-primary-rgb: 110, 165, 223;
  --pesat-bg: #0b1321;
  --pesat-surface: #121d2f;
  --pesat-soft: #172338;
  --pesat-line: #293a54;
  --pesat-ink: #eef4fc;
  --pesat-body: #cfdaea;
  --pesat-muted: #91a3bc;
  --pesat-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.18);
  --pesat-pop-shadow: 0 20px 54px rgba(0, 0, 0, 0.48);
}

html.dark body,
html.dark #content {
  background-color: #0b1321 !important;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(79, 132, 191, 0.11), transparent 30rem),
    radial-gradient(circle at 96% 7%, rgba(223, 125, 55, 0.065), transparent 25rem);
  background-attachment: fixed;
  color: #cfdaea;
}

html.dark .topbar {
  background: rgba(14, 24, 40, 0.88) !important;
  border-color: #263750 !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
  backdrop-filter: saturate(135%) blur(16px);
}

html.dark .sidebar,
html.dark .sidebar-flyout {
  background: rgba(16, 27, 45, 0.97) !important;
  border-color: #263750 !important;
}

html.dark .sidebar-flyout .submenu-heading {
  color: #edf3fc;
  border-bottom-color: #263750;
}

html.dark .sidebar .nav-link:hover {
  color: #a9cff5;
  background: #192a43;
}

html.dark .sidebar .nav-link.active {
  color: #b9d9f8;
  background: linear-gradient(145deg, #1b3150, #172942);
  box-shadow: inset 0 0 0 1px rgba(110, 165, 223, 0.12);
}

html.dark .card,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .toast,
html.dark .list-group-item {
  background-color: #121d2f !important;
  border-color: #293a54 !important;
}

html.dark .card-header,
html.dark .card-footer {
  background-color: rgba(24, 37, 58, 0.72) !important;
  border-color: #293a54 !important;
}

html.dark .form-control,
html.dark .form-select,
html.dark textarea,
html.dark .input-group-text,
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"] {
  background-color: #0e1828 !important;
  border-color: #30445f !important;
  color: #eaf1fa !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

html.dark .form-control:focus,
html.dark .form-select:focus,
html.dark textarea:focus,
html.dark input[type="date"]:focus,
html.dark input[type="time"]:focus,
html.dark input[type="datetime-local"]:focus {
  background-color: #101c2e !important;
  border-color: #679bd2 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 165, 223, 0.18) !important;
}

html.dark .form-select:not([multiple]),
html.dark .form-select:not([multiple]):focus {
  background-color: #0e1828 !important;
}

html.dark .form-label {
  color: #c3d0e1;
}
html.dark .form-control::placeholder {
  color: #7488a3;
  opacity: 1;
}

html.dark .table-light,
html.dark thead.table-light,
html.dark .table-light > tr > th,
html.dark thead.table-light > tr > th,
html.dark .table thead th {
  --bs-table-bg: #17253a;
  --bs-table-color: #eaf1fa;
  --bs-table-accent-bg: #17253a;
  --bs-table-bg-state: #17253a;
  background-color: #17253a !important;
  color: #eaf1fa !important;
  border-color: #30435d !important;
  box-shadow: inset 0 0 0 9999px #17253a !important;
}

html.dark .table > tbody > tr:nth-child(odd) > * {
  background-color: #121d2f;
}
html.dark .table > tbody > tr:nth-child(even) > * {
  background-color: #152237;
}
html.dark .table > tbody > tr:hover > * {
  --bs-table-bg-state: #1d324f !important;
  background-color: #1d324f !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 9999px #1d324f !important;
}

html.dark .btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #3e78b5, #315f94);
  border-color: #4b83be;
  box-shadow: 0 5px 15px rgba(25, 64, 105, 0.3);
}

html.dark .btn-primary:hover,
html.dark .btn-primary:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #4a89c9, #376da9);
  border-color: #6aa4de;
}

html.dark .alert {
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
html.dark .text-body-secondary,
html.dark .text-muted {
  color: #91a3bc !important;
}

html.dark ::selection {
  color: #07111e;
  background: #8fc0ee;
}

/* Elegant select controls — dark theme */
html.dark .form-select {
  color: #e7eff9 !important;
  border-color: #344b69 !important;
  background-color: #0e192a !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.025);
}
html.dark .form-select:hover:not(:disabled) {
  border-color: #55789f !important;
  background-color: #111e31 !important;
}
html.dark .form-select:focus {
  color: #fff !important;
  border-color: #70a2d5 !important;
  background-color: #101d30 !important;
  box-shadow:
    0 0 0 0.22rem rgba(110, 165, 223, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.16) !important;
}
html.dark .form-select option {
  color: #e7eff9;
  background: #101b2c;
}
html.dark .form-select option:checked {
  color: #fff;
  background: #244d78;
}
html.dark .form-select:disabled {
  color: #8293aa !important;
  border-color: #293a51 !important;
  background-color: #111a28 !important;
}
html.dark .select2-container--bootstrap-5 .select2-selection,
html.dark .select2-container--default .select2-selection {
  color: #e7eff9 !important;
  border-color: #344b69 !important;
  background: #0e192a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html.dark .select2-container--bootstrap-5 .select2-selection:hover,
html.dark .select2-container--default .select2-selection:hover {
  border-color: #55789f !important;
}
html.dark .select2-container--open .select2-selection,
html.dark .select2-container--focus .select2-selection {
  border-color: #70a2d5 !important;
  box-shadow: 0 0 0 0.22rem rgba(110, 165, 223, 0.18) !important;
}
html.dark .select2-container--bootstrap-5 .select2-selection__rendered,
html.dark .select2-container--default .select2-selection__rendered {
  color: #e7eff9 !important;
}
html.dark .select2-dropdown {
  border-color: #304563 !important;
  background: #132039 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
}
html.dark .select2-search--dropdown .select2-search__field {
  color: #e7eff9 !important;
  border-color: #3a516e !important;
  background: #0b1524 !important;
}
html.dark .select2-results__option {
  color: #d8e3f0 !important;
  background: #132039 !important;
}
html.dark .select2-results__option--highlighted {
  color: #fff !important;
  background: #1d3356 !important;
}
html.dark .select2-results__option--selected {
  color: #fff !important;
  background: #315f94 !important;
}

html.dark .submenu-select__trigger {
  color: #e7eff9;
  border-color: #344b69;
  background: #0e192a;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.025);
}
html.dark .submenu-select__trigger:hover:not(:disabled) {
  border-color: #55789f;
  background: #111e31;
}
html.dark .submenu-select__trigger:focus-visible,
html.dark .submenu-select__trigger.show {
  border-color: #70a2d5;
  box-shadow:
    0 0 0 0.22rem rgba(110, 165, 223, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.16);
}
html.dark .submenu-select__trigger:disabled {
  color: #8293aa;
  border-color: #293a51;
  background: #111a28;
}
html.dark .submenu-select__trigger.is-placeholder,
html.dark .submenu-select__chevron {
  color: #91a3bc;
}
html.dark .submenu-select__menu {
  border-color: #304563;
  background: #132039;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}
html.dark .submenu-select__option {
  color: #d8e3f0;
}
html.dark .submenu-select__option:hover:not(:disabled),
html.dark .submenu-select__option:focus-visible {
  color: #fff;
  background: #1d3356;
}
html.dark .submenu-select__option.is-selected {
  color: #fff;
  background: #315f94;
}

html.dark #activityModal .select2-container--bootstrap-5 .activity-letter-selection {
  color: #e7eff9 !important;
  border-color: #344b69 !important;
  background: #0e192a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html.dark #activityModal .activity-letter-selection .select2-selection__rendered {
  color: #e7eff9 !important;
}
html.dark #activityModal .activity-letter-selection .select2-selection__placeholder {
  color: #91a3bc !important;
}
html.dark #activityModal .select2-container--focus .activity-letter-selection,
html.dark #activityModal .select2-container--open .activity-letter-selection {
  border-color: #70a2d5 !important;
  box-shadow: 0 0 0 0.22rem rgba(110, 165, 223, 0.18) !important;
}
html.dark .select2-container--bootstrap-5 .activity-letter-dropdown.select2-dropdown {
  border-color: #304563 !important;
  background: #132039 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
}
html.dark .activity-letter-dropdown .select2-search__field {
  color: #e7eff9 !important;
  border-color: #3a516e !important;
  background: #0e192a !important;
}
html.dark .activity-letter-dropdown .select2-search__field:focus {
  border-color: #70a2d5 !important;
  box-shadow: 0 0 0 0.18rem rgba(110, 165, 223, 0.16) !important;
}
html.dark .activity-letter-dropdown .select2-results__option {
  color: #d8e3f0 !important;
  background: transparent !important;
}
html.dark .activity-letter-dropdown .select2-results__option--highlighted {
  color: #fff !important;
  background: #1d3356 !important;
}
html.dark .activity-letter-dropdown .select2-results__option--selected {
  color: #fff !important;
  background: #315f94 !important;
}

/* Modal Web Push harus selalu berada di atas backdrop dan memiliki permukaan
   solid. Diletakkan di stylesheet terakhir agar aturan modal global tidak
   dapat membuatnya transparan kembali. */
.modal.webpush-permission-modal {
  z-index: 1090 !important;
}

html:not(.dark) body .modal.webpush-permission-modal .modal-dialog .modal-content {
  --bs-modal-bg: #ffffff;
  background-color: #ffffff !important;
  background-image: radial-gradient(
    circle at 50% -15%,
    rgba(40, 103, 168, 0.16),
    rgba(255, 255, 255, 0) 42%
  ) !important;
  opacity: 1 !important;
  isolation: isolate;
}

html:not(.dark) body .modal.webpush-permission-modal .modal-body,
html:not(.dark) body .modal.webpush-permission-modal .modal-footer {
  background-color: transparent !important;
  opacity: 1 !important;
}

html.dark body .modal.webpush-permission-modal .modal-dialog .modal-content {
  --bs-modal-bg: #111b2b;
  background-color: #111b2b !important;
  opacity: 1 !important;
  isolation: isolate;
}