/* =====================================================================
   Dark Mode — SIMPEG Kabupaten Tabalong (Metronic v7.0.5)
   Semua rule di-scope ke `body.dark-mode` sehingga tampilan mode terang
   tidak terpengaruh sama sekali. Palet diselaraskan dengan tema aside
   gelap Metronic (#1e1e2d) agar header, aside, dan konten menyatu.
   Toggle   : tombol bulan/matahari di topbar (js/global.js toggleDarkMode)
   Persisten: cookie "dark_mode" dibaca helper PHP dark_mode_active()
   ===================================================================== */

/* [1] Dasar */
body.dark-mode {
  --dm-bg-page: #1a1a27;
  --dm-bg-card: #232338;
  --dm-bg-elevated: #2b2b44;
  --dm-bg-hover: #2d2d49;
  --dm-border: #33334f;
  --dm-text: #d2d4e4;
  --dm-text-muted: #a6accb;
  --dm-input-bg: #26263c;
  --dm-input-border: #3d3d5e;
  --dm-thead: #20202f;
  --dm-row-hl: #26263a;
  --dm-row-hl-hover: #2b2b42;
  --dm-btn-light: #2c2c45;
  --dm-btn-light-border: #36365a;
  --dm-btn-light-hover: #353552;
  --dm-choice: #2e2e4a;
  --dm-cal-hover: #2e3a52;
  --dm-input-disabled: #1f1f30;
  --dm-inline-blue: #223047;

  background: var(--dm-bg-page) !important;
  color: var(--dm-text);
}

body.dark-mode .wrapper,
body.dark-mode .content,
body.dark-mode .container,
body.dark-mode .container-fluid {
  background: transparent;
}

/* [2] Card */
body.dark-mode .card,
body.dark-mode .card-custom,
body.dark-mode .card-flush {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .card > .card-header,
body.dark-mode .card > .card-body,
body.dark-mode .card > .card-footer {
  color: var(--dm-text);
}
body.dark-mode .card > .card-header,
body.dark-mode .card > .card-footer {
  border-color: var(--dm-border) !important;
}
body.dark-mode .card-header {
  background: transparent;
}

/* Widget berwarna (bg-primary/info/...) tetap dikenali dengan versi gelap */
body.dark-mode .card.bg-primary {
  background-color: #1c4370 !important;
}
body.dark-mode .card.bg-info {
  background-color: #3a2a6e !important;
}
body.dark-mode .card.bg-success {
  background-color: #0f4a46 !important;
}
body.dark-mode .card.bg-warning {
  background-color: #5c430f !important;
}
body.dark-mode .card.bg-danger {
  background-color: #5a2330 !important;
}
/* Utilitas bg-* pada elemen lain (widget engage di dalam kartu, chip, dsb.):
   hue dipertahankan, luminositas diturunkan — selaras .card.bg-* di atas */
body.dark-mode .bg-primary {
  background-color: #1c4370 !important;
}
body.dark-mode .bg-info {
  background-color: #3a2a6e !important;
}
body.dark-mode .bg-success {
  background-color: #0f4a46 !important;
}
body.dark-mode .bg-warning {
  background-color: #5c430f !important;
}
body.dark-mode .bg-danger {
  background-color: #5a2330 !important;
}
body.dark-mode .bg-secondary {
  background-color: var(--dm-btn-light) !important;
}
/* Judul berwarna custom (css.blade.php): orangedikit/hijaugelap/pinkgelap */
body.dark-mode .judul-orangedikit {
  background-color: #3f3216 !important;
  border-color: #4d3e1c !important;
  color: #ffb84d !important;
}
body.dark-mode .judul-hijaugelap {
  background-color: #103f3c !important;
  border-color: #15524e !important;
}
body.dark-mode .judul-pinkgelap {
  background-color: #512b35 !important;
  border-color: #5a2330 !important;
}

/* Panel "alert-white" Metronic (kartu logo, wadah chart, dsb.) */
body.dark-mode .alert-white {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}

/* Judul card agar tidak gelap di atas permukaan gelap */
body.dark-mode .card-title,
body.dark-mode .card-label {
  color: var(--dm-text);
}

/* Animasi kedip putih header notifikasi dimatikan di mode gelap */
body.dark-mode .notification-dropdown-pulse {
  animation: none;
}

/* Dekorasi SVG putih Metronic (bubbles/abstract) disembunyikan di mode gelap */
body.dark-mode [style*='media/svg/shapes/'] {
  background-image: none !important;
}

/* [3] Subheader & breadcrumb */
body.dark-mode .subheader.subheader-solid {
  background-color: var(--dm-bg-page) !important;
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .subheader .breadcrumb-item a,
body.dark-mode .subheader .breadcrumb-item.active,
body.dark-mode .subheader .text-muted {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dm-text-muted);
}

/* [4] Tabel & DataTables */
body.dark-mode .table {
  color: var(--dm-text);
}
body.dark-mode .table thead th {
  color: var(--dm-text-muted);
}
body.dark-mode .table thead th,
body.dark-mode .table tfoot th {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .table td {
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .table-bordered,
body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
  border-color: var(--dm-border) !important;
}
body.dark-mode .table-head-custom thead th {
  background-color: var(--dm-thead) !important;
  color: var(--dm-text-muted) !important;
}
/* Header tabel terang (thead-light, mis. header sticky edit akses layanan) */
body.dark-mode .thead-light th {
  background-color: var(--dm-thead) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}
/* Baris tabel ber-variant Bootstrap (mis. tr.table-light untuk layanan
   yang tercentang pada edit akses layanan) */
body.dark-mode tr.table-active > td,
body.dark-mode tr.table-active > th,
body.dark-mode tr.table-primary > td,
body.dark-mode tr.table-primary > th,
body.dark-mode tr.table-secondary > td,
body.dark-mode tr.table-secondary > th,
body.dark-mode tr.table-light > td,
body.dark-mode tr.table-light > th {
  background-color: var(--dm-row-hl) !important;
  color: var(--dm-text) !important;
}
body.dark-mode tr.table-success > td,
body.dark-mode tr.table-success > th {
  background-color: #14453a !important;
  color: var(--dm-text) !important;
}
body.dark-mode tr.table-warning > td,
body.dark-mode tr.table-warning > th {
  background-color: #4d3a10 !important;
  color: var(--dm-text) !important;
}
body.dark-mode tr.table-danger > td,
body.dark-mode tr.table-danger > th {
  background-color: #4b1f26 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .table-hover tr.table-light:hover > td,
body.dark-mode .table-hover tr.table-light:hover > th,
body.dark-mode .table-hover tr.table-active:hover > td,
body.dark-mode .table-hover tr.table-active:hover > th {
  background-color: var(--dm-row-hl-hover) !important;
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}
body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dm-bg-hover);
}
/* Ikon urut (sorting) DataTables */
body.dark-mode table.dataTable thead .sorting:before,
body.dark-mode table.dataTable thead .sorting:after,
body.dark-mode table.dataTable thead .sorting_asc:after,
body.dark-mode table.dataTable thead .sorting_desc:after,
body.dark-mode table.dataTable thead .sorting_asc_disabled:after,
body.dark-mode table.dataTable thead .sorting_desc_disabled:after {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_info {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .dataTables_processing {
  background: rgba(35, 35, 56, 0.92) !important;
  color: var(--dm-text) !important;
}
/* Pagination (Bootstrap & DataTables) */
body.dark-mode .pagination .page-item .page-link {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode .pagination .page-item .page-link:hover,
body.dark-mode .pagination .page-item .page-link:focus {
  background-color: var(--dm-bg-hover) !important;
}
body.dark-mode .pagination .page-item.active .page-link,
body.dark-mode .pagination .page-item.active .page-link:hover {
  background-color: #3699ff !important;
  border-color: #3699ff !important;
  color: #ffffff !important;
}
body.dark-mode .pagination .page-item.disabled .page-link {
  color: #56567a !important;
}

/* [5] Form & input */
body.dark-mode .form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .custom-select {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .form-control::placeholder {
  color: #6d6d8f;
  opacity: 1;
}
body.dark-mode .form-control:focus {
  border-color: #3699ff;
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: var(--dm-input-disabled) !important;
  color: #7c7c9c !important;
}
body.dark-mode .form-text {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .input-group-text {
  background-color: #2c2c45 !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode .custom-file-label {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .custom-file-label::after {
  background-color: var(--dm-btn-light);
  color: var(--dm-text-muted);
}
/* Checkbox & radio custom Metronic */
body.dark-mode .checkbox > span,
body.dark-mode .radio > span {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
}
/* Select2 */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple,
body.dark-mode .select2-container--bootstrap4 .select2-selection {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--dm-text) !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--dm-choice) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .select2-dropdown {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .select2-container--default .select2-results__option {
  color: var(--dm-text);
}
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #2e3a52 !important;
  color: #ffffff !important;
}
body.dark-mode .select2-container--default .select2-results__option[aria-selected='true'] {
  background-color: #26404f !important;
}
body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
/* Datepicker (foundation & jQuery UI) */
body.dark-mode .datepicker.dropdown-menu,
body.dark-mode .ui-datepicker {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .datepicker table tr td,
body.dark-mode .datepicker table tr th,
body.dark-mode .datepicker table tr td span {
  color: var(--dm-text) !important;
}
body.dark-mode .datepicker table tr td.day:hover,
body.dark-mode .datepicker table tr td.focused,
body.dark-mode .datepicker table tr td span:hover,
body.dark-mode .datepicker table tr td span.focused {
  background: var(--dm-cal-hover) !important;
  color: #ffffff !important;
}
body.dark-mode .datepicker table tr td.old,
body.dark-mode .datepicker table tr td.new,
body.dark-mode .datepicker table tr td.disabled {
  color: #63638a !important;
}
body.dark-mode .ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border-bottom-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .ui-datepicker th {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .ui-datepicker .ui-state-default {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--dm-text) !important;
}
body.dark-mode .ui-datepicker .ui-state-highlight {
  background: #2e3a52 !important;
}
body.dark-mode .ui-datepicker .ui-state-active {
  background: #3699ff !important;
  color: #ffffff !important;
}
body.dark-mode .ui-datepicker td a.ui-state-hover {
  background: #2e3a52 !important;
}
body.dark-mode .ui-datepicker .ui-datepicker-prev,
body.dark-mode .ui-datepicker .ui-datepicker-next {
  border-color: var(--dm-border) !important;
  background: var(--dm-input-bg) !important;
}

/* [6] Dropdown, modal, tab, list */
body.dark-mode .dropdown-menu {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.55) !important;
  color: var(--dm-text);
}
body.dark-mode .dropdown-item {
  color: var(--dm-text) !important;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--dm-bg-hover) !important;
  color: #ffffff !important;
}
body.dark-mode .dropdown-divider {
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .dropdown-header {
  color: var(--dm-text-muted) !important;
}
/* Menu navi (panel notifikasi & user di topbar) */
body.dark-mode .navi .navi-text {
  color: var(--dm-text) !important;
}
body.dark-mode .navi .navi-link:hover,
body.dark-mode .navi .navi-item:hover .navi-link,
body.dark-mode .navi .navi-item .navi-link:hover {
  background-color: var(--dm-bg-hover) !important;
}
/* Modal */
body.dark-mode .modal-content {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .modal-header {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .modal-footer {
  border-top-color: var(--dm-border) !important;
}
body.dark-mode .close {
  color: var(--dm-text-muted) !important;
  text-shadow: none !important;
}
/* Tabs & pills */
body.dark-mode .nav-tabs {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .nav-tabs .nav-link {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .nav-tabs .nav-link.active {
  color: #3699ff !important;
}
body.dark-mode .nav-tabs.nav-tabs-line .nav-link.active {
  border-bottom-color: #3699ff !important;
}
body.dark-mode .nav-pills .nav-link:not(.active) {
  color: var(--dm-text-muted) !important;
}
/* List group & popover */
body.dark-mode .list-group-item {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .list-group-item-action:hover {
  background-color: var(--dm-bg-hover) !important;
}
body.dark-mode .popover {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .popover-header {
  background-color: #2c2c45 !important;
  border-bottom-color: var(--dm-border) !important;
  color: var(--dm-text);
}
body.dark-mode .popover-body {
  color: var(--dm-text-muted);
}

/* [7] Tombol & utility */
body.dark-mode .btn-light,
body.dark-mode .btn-white,
body.dark-mode .btn-secondary {
  background-color: var(--dm-btn-light) !important;
  border-color: var(--dm-btn-light-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .btn-light:hover,
body.dark-mode .btn-light:focus,
body.dark-mode .btn-white:hover,
body.dark-mode .btn-white:focus {
  background-color: var(--dm-btn-light-hover) !important;
}
/* Hover "light" Metronic dibuat netral gelap agar tidak menyilaukan */
body.dark-mode [class*='btn-hover-light-']:hover {
  background-color: var(--dm-bg-hover) !important;
}
/* Tombol outline-secondary (tombol X clear global search, dst.):
   border/ikon #E4E6EF nyaris putih dan saat hover terisi penuh #E4E6EF */
body.dark-mode .btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text-muted) !important;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary.focus,
body.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled):active,
body.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled).active,
body.dark-mode .show > .btn-outline-secondary.dropdown-toggle {
  background-color: var(--dm-bg-hover) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary.focus {
  box-shadow: none !important;
}
body.dark-mode .btn-outline-secondary.disabled,
body.dark-mode .btn-outline-secondary:disabled {
  background-color: transparent !important;
  color: #7c7c9c !important;
}
/* Tombol solid versi gelap: hue dipertahankan, luminositas diturunkan */
body.dark-mode .btn-primary {
  background-color: #1f6fd0 !important;
  border-color: #1f6fd0 !important;
}
body.dark-mode .btn-info {
  background-color: #6a3fd4 !important;
  border-color: #6a3fd4 !important;
}
body.dark-mode .btn-success {
  background-color: #0e8f88 !important;
  border-color: #0e8f88 !important;
}
body.dark-mode .btn-warning {
  background-color: #b57d00 !important;
  border-color: #b57d00 !important;
}
body.dark-mode .btn-danger {
  background-color: #c2374a !important;
  border-color: #c2374a !important;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus {
  background-color: #1859a8 !important;
  border-color: #1859a8 !important;
}
body.dark-mode .btn-info:hover,
body.dark-mode .btn-info:focus {
  background-color: #5631ad !important;
  border-color: #5631ad !important;
}
body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus {
  background-color: #0a736d !important;
  border-color: #0a736d !important;
}
body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus {
  background-color: #966700 !important;
  border-color: #966700 !important;
}
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:focus {
  background-color: #a02b3c !important;
  border-color: #a02b3c !important;
}
/* Varian btn-light-*: latar tint gelap + teks aksen */
body.dark-mode .btn-light-primary {
  background-color: #1f2c4a !important;
  color: #64a8ff !important;
}
body.dark-mode .btn-light-success {
  background-color: #103f3c !important;
  color: #2fd8cf !important;
}
body.dark-mode .btn-light-info {
  background-color: #2b2350 !important;
  color: #a98cff !important;
}
body.dark-mode .btn-light-warning {
  background-color: #3f3216 !important;
  color: #ffb84d !important;
}
body.dark-mode .btn-light-danger {
  background-color: #42232b !important;
  color: #ff7285 !important;
}
body.dark-mode .btn-light-secondary,
body.dark-mode .btn-light-dark {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}
body.dark-mode [class*='btn-light-']:hover,
body.dark-mode [class*='btn-light-']:focus {
  filter: brightness(1.2);
}
body.dark-mode .symbol-label {
  background-color: #2c2c45 !important;
}

/* Ikon di dalam symbol mengikuti warna label (jangan dipaksa muted) */
body.dark-mode .symbol-label .text-dark,
body.dark-mode .symbol-label .text-dark-50,
body.dark-mode .symbol-label .text-dark-75 {
  color: inherit !important;
}

/* Varian symbol-light-*: tint gelap + glyph berwarna aksen */
body.dark-mode .symbol-light-primary .symbol-label {
  background-color: rgba(54, 153, 255, 0.12) !important;
  color: #64a8ff !important;
}
body.dark-mode .symbol-light-success .symbol-label {
  background-color: rgba(27, 197, 189, 0.12) !important;
  color: #2fd8cf !important;
}
body.dark-mode .symbol-light-info .symbol-label {
  background-color: rgba(137, 80, 252, 0.14) !important;
  color: #a98cff !important;
}
body.dark-mode .symbol-light-warning .symbol-label {
  background-color: rgba(255, 168, 0, 0.12) !important;
  color: #ffb84d !important;
}
body.dark-mode .symbol-light-danger .symbol-label {
  background-color: rgba(246, 78, 96, 0.12) !important;
  color: #ff7285 !important;
}
body.dark-mode .symbol-light-secondary .symbol-label,
body.dark-mode .symbol-light-dark .symbol-label {
  background-color: rgba(228, 230, 239, 0.08) !important;
  color: #a6accb !important;
}
body.dark-mode .bg-white {
  background-color: var(--dm-bg-card) !important;
}
body.dark-mode .bg-light {
  background-color: #2c2c45 !important;
}
/* Hierarki teks: dark-75/dark = terang, dark-50 = redup-sedang, muted = redup-jelas */
body.dark-mode .text-dark,
body.dark-mode .text-dark-75,
body.dark-mode .text-body {
  color: var(--dm-text) !important;
}
body.dark-mode .text-dark-50,
body.dark-mode .text-black-50 {
  color: #b6bbd6 !important;
}
body.dark-mode .text-muted {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .separator,
body.dark-mode .separator.separator-dashed {
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-right,
body.dark-mode .border-bottom,
body.dark-mode .border-left {
  border-color: var(--dm-border) !important;
}
body.dark-mode .scrolltop {
  background-color: #2c2c45 !important;
  color: var(--dm-text-muted) !important;
}
/* Wizard (layanan berjenjang) */
body.dark-mode .wizard .wizard-label .wizard-title {
  color: var(--dm-text) !important;
}
body.dark-mode .wizard .wizard-label .wizard-desc {
  color: var(--dm-text-muted) !important;
}

/* [8] Widget pihak ketiga */
/* SweetAlert2 & bootstrap-sweetalert */
body.dark-mode .swal2-popup {
  background: var(--dm-bg-elevated) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .swal2-title {
  color: var(--dm-text) !important;
}
body.dark-mode .swal2-html-container {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .sweet-alert {
  background-color: var(--dm-bg-elevated) !important;
}
body.dark-mode .sweet-alert h2 {
  color: var(--dm-text) !important;
}
body.dark-mode .sweet-alert p {
  color: var(--dm-text-muted) !important;
}
/* iziToast & iziModal */
body.dark-mode .iziToast {
  background: rgba(43, 43, 68, 0.97) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .iziToast .iziToast-title {
  color: var(--dm-text) !important;
}
body.dark-mode .iziToast .iziToast-message {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .iziModal {
  background: var(--dm-bg-card) !important;
}
body.dark-mode .iziModal-header {
  background: #26263c !important;
  border-bottom-color: var(--dm-border) !important;
}
body.dark-mode .iziModal-header-title {
  color: var(--dm-text) !important;
}

/* [9] Inline style warna terang pada blade */
/* Menimpa inline style memerlukan !important. Hanya nilai putih murni
   dan abu terang umum yang ditimpa agar elemen berwarna tetap aman. */
body.dark-mode [style*='background: #fff' i],
body.dark-mode [style*='background:#fff' i],
body.dark-mode [style*='background-color: #fff' i],
body.dark-mode [style*='background-color:#fff' i],
body.dark-mode [style*='background: white' i],
body.dark-mode [style*='background:white' i],
body.dark-mode [style*='background-color: white' i],
body.dark-mode [style*='background-color:white' i],
body.dark-mode [style*='#f8f9fa' i],
body.dark-mode [style*='#f3f6f9' i],
body.dark-mode [style*='#f5f8fa' i],
body.dark-mode [style*='#eef0f8' i],
body.dark-mode [style*='#fafafa' i],
body.dark-mode [style*='#f2f2f2' i],
body.dark-mode [style*='#fcfcfc' i],
body.dark-mode [style*='#f9f9f9' i],
body.dark-mode [style*='#fdfdfd' i],
body.dark-mode [style*='#f0f0f0' i],
body.dark-mode [style*='#ececec' i],
body.dark-mode [style*='#eeeeee' i],
body.dark-mode [style*='#e9ecef' i] {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text);
}
body.dark-mode [style*='color: #000' i],
body.dark-mode [style*='color:#000' i],
body.dark-mode [style*='color: black' i],
body.dark-mode [style*='color:black' i],
body.dark-mode [style*='color: #212529' i],
body.dark-mode [style*='color: #212121' i],
body.dark-mode [style*='color: #333' i],
body.dark-mode [style*='color:#333' i],
body.dark-mode [style*='color: #181c32' i] {
  color: var(--dm-text) !important;
}

/* [9b] Perbaikan lanjutan (rule Metronic ber-spesifisitas tinggi) */

/* Judul modal: kalahkan .modal .modal-header .modal-title { color:#181C32 } */
body.dark-mode .modal .modal-header .modal-title {
  color: var(--dm-text) !important;
}
body.dark-mode .modal .modal-header .modal-title small {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .modal .modal-header .close,
body.dark-mode .modal .modal-header .close i {
  color: var(--dm-text-muted) !important;
}

/* Judul iziModal */
body.dark-mode .iziModal .iziModal-header .iziModal-header-title {
  color: var(--dm-text) !important;
}

/* Label form mengikuti warna dasar (aman untuk label ber-class sendiri) */
body.dark-mode label {
  color: var(--dm-text);
}

/* Footer kartu putih + garis pemisah terang (selector non-direct-child
   agar card-footer di dalam <form> ikut tertangani) */
body.dark-mode .card-footer {
  background-color: transparent !important;
  border-top-color: var(--dm-border) !important;
}

/* Header kartu: garis bawah terang Metronic (#EBEDF3) diganti gelap */
body.dark-mode .card .card-header {
  border-bottom-color: var(--dm-border) !important;
}

/* Kartu tint bg-light-*: identitas warna versi gelap (widget KGB, dsb.) */
body.dark-mode .card.bg-light-primary {
  background-color: #1f2c4a !important;
}
body.dark-mode .card.bg-light-success {
  background-color: #103f3c !important;
}
body.dark-mode .card.bg-light-info {
  background-color: #2b2350 !important;
}
body.dark-mode .card.bg-light-warning {
  background-color: #3f3216 !important;
}
body.dark-mode .card.bg-light-danger {
  background-color: #42232b !important;
}
body.dark-mode .card.bg-light-secondary,
body.dark-mode .card.bg-light-dark {
  background-color: #2c2c45 !important;
}

/* Sel tabel: Metronic menetapkan warna LANGSUNG pada td/th
   (.dataTables_wrapper .dataTable td { color:#3F4254 }) sehingga
   pewarisan warna dari .table tidak cukup — target td/th langsung */
body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .dataTables_wrapper .dataTable th,
body.dark-mode .dataTables_wrapper .dataTable td {
  color: var(--dm-text);
}

/* Toolbar tab SIASN (style-tab.css: .cd-tabs latar krem/putih) */
body.dark-mode .cd-tabs__list {
  background-color: var(--dm-bg-card) !important;
  box-shadow: none !important;
}
body.dark-mode .cd-tabs__item {
  color: #a6accb !important;
}
body.dark-mode .cd-tabs__item:hover {
  color: var(--dm-text) !important;
  background-color: var(--dm-bg-hover) !important;
}
body.dark-mode .cd-tabs__item--selected,
body.dark-mode .js .cd-tabs__item--selected {
  background-color: var(--dm-bg-elevated) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .js .cd-tabs__item--selected .icon {
  color: #ff7285 !important;
}
body.dark-mode .cd-tabs__panels {
  background: var(--dm-bg-card) !important;
}
body.dark-mode .cd-tabs__panel p {
  color: var(--dm-text-muted) !important;
}

/* Tombol tab DATA SIMPEG / DATA SIASN (style-tab-siasn.css bg #f2f2f2) */
body.dark-mode .tab button {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}
body.dark-mode .tab button:hover {
  background-color: #353552 !important;
  color: #2fd8cf !important;
}
body.dark-mode .tab button.active {
  background-color: #1bc5bd !important;
  color: #ffffff !important;
}

/* [9c] Pola serupa: judul card, offcanvas, badge/label, accordion,
   scrollbar, tombol file input */

/* Judul card header — rule Metronic ber-spesifisitas (0,4,1):
   .card.card-custom > .card-header .card-title { color:#181C32 } */
body.dark-mode .card.card-custom > .card-header .card-title,
body.dark-mode .card.card-custom > .card-header .card-title .card-label,
body.dark-mode .card .card-header .card-title,
body.dark-mode .card .card-header .card-label {
  color: var(--dm-text) !important;
}
body.dark-mode .card.card-custom > .card-header .card-title small {
  color: var(--dm-text-muted) !important;
}
/* Ikon judul card default abu Metronic (#7E8299) diterangkan */
body.dark-mode .card.card-custom > .card-header .card-title .card-icon i {
  color: var(--dm-text-muted) !important;
}

/* Header accordion berlatar #F3F6F9 (spesifisitas 0,3,0) */
body.dark-mode .accordion .card .card-header {
  background-color: var(--dm-bg-card) !important;
}

/* Panel offcanvas putih (panel user "Sign Out / My Profile") */
body.dark-mode .offcanvas,
body.dark-mode .offcanvas-mobile {
  background-color: var(--dm-bg-card) !important;
}

/* Badge versi gelap (manajemen akses layanan, notifikasi, dst.) */
body.dark-mode .badge-primary {
  background-color: #1f6fd0 !important;
}
body.dark-mode .badge-success {
  background-color: #0e8f88 !important;
}
body.dark-mode .badge-info {
  background-color: #6a3fd4 !important;
}
body.dark-mode .badge-warning {
  background-color: #b57d00 !important;
}
body.dark-mode .badge-danger {
  background-color: #c2374a !important;
}
body.dark-mode .badge-secondary,
body.dark-mode .badge-dark {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}
body.dark-mode .badge-light {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}
body.dark-mode .badge-light-primary {
  background-color: #1f2c4a !important;
  color: #64a8ff !important;
}
body.dark-mode .badge-light-success {
  background-color: #103f3c !important;
  color: #2fd8cf !important;
}
body.dark-mode .badge-light-info {
  background-color: #2b2350 !important;
  color: #a98cff !important;
}
body.dark-mode .badge-light-warning {
  background-color: #3f3216 !important;
  color: #ffb84d !important;
}
body.dark-mode .badge-light-danger {
  background-color: #42232b !important;
  color: #ff7285 !important;
}
body.dark-mode .badge-light-secondary,
body.dark-mode .badge-light-dark {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}

/* Label Metronic (pola sama dengan badge) */
body.dark-mode .label-light-primary {
  background-color: #1f2c4a !important;
  color: #64a8ff !important;
}
body.dark-mode .label-light-success {
  background-color: #103f3c !important;
  color: #2fd8cf !important;
}
body.dark-mode .label-light-info {
  background-color: #2b2350 !important;
  color: #a98cff !important;
}
body.dark-mode .label-light-warning {
  background-color: #3f3216 !important;
  color: #ffb84d !important;
}
body.dark-mode .label-light-danger {
  background-color: #42232b !important;
  color: #ff7285 !important;
}
body.dark-mode .label-light-secondary,
body.dark-mode .label-light-dark {
  background-color: #2c2c45 !important;
  color: #a6accb !important;
}

/* Scrollbar gelap (termasuk scrollbar horizontal tabel & toolbar tab) */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-bg-page);
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #3d3d5e;
  border-radius: 6px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4a70;
}
body.dark-mode ::-webkit-scrollbar-corner {
  background: var(--dm-bg-page);
}

/* Tombol native "Choose File" pada input file */
body.dark-mode input[type='file']::-webkit-file-upload-button {
  background: #2c2c45 !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-input-border) !important;
}
body.dark-mode input[type='file']::file-selector-button {
  background: #2c2c45 !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-input-border) !important;
}

/* [9d] Alert & banner status ("Proses", "Usul PMK SK Selesai", "Tambah Akses
   Layanan", session warning, dsb.). Metronic memakai varian solid
   .alert.alert-* (spesifisitas 0,2,0) dan varian Bootstrap — keduanya
   latar terang; semua diganti tint gelap + teks aksen. */
body.dark-mode .alert {
  border-color: var(--dm-border) !important;
}
body.dark-mode .alert-primary,
body.dark-mode .alert.alert-primary {
  background-color: #1f2c4a !important;
  border-color: #2b3a5e !important;
  color: #8fc1ff !important;
}
body.dark-mode .alert-secondary,
body.dark-mode .alert.alert-secondary {
  background-color: #2c2c45 !important;
  border-color: #38385a !important;
  color: var(--dm-text) !important;
}
body.dark-mode .alert-success,
body.dark-mode .alert.alert-success {
  background-color: #103f3c !important;
  border-color: #15524e !important;
  color: #4fded5 !important;
}
body.dark-mode .alert-info,
body.dark-mode .alert.alert-info {
  background-color: #2b2350 !important;
  border-color: #372d63 !important;
  color: #b79bff !important;
}
body.dark-mode .alert-warning,
body.dark-mode .alert.alert-warning {
  background-color: #3f3216 !important;
  border-color: #4d3e1c !important;
  color: #ffc46b !important;
}
body.dark-mode .alert-danger,
body.dark-mode .alert.alert-danger {
  background-color: #42232b !important;
  border-color: #512b35 !important;
  color: #ff8296 !important;
}
body.dark-mode .alert-light,
body.dark-mode .alert.alert-light {
  background-color: #2c2c45 !important;
  border-color: #38385a !important;
  color: var(--dm-text) !important;
}
body.dark-mode .alert-dark,
body.dark-mode .alert.alert-dark {
  background-color: #2c2c45 !important;
  border-color: #38385a !important;
  color: var(--dm-text) !important;
}
body.dark-mode .alert .alert-link {
  color: inherit !important;
  text-decoration: underline;
}

/* [9e] Widget statistik dashboard: hasil (angka & baris Laki-Laki/Perempuan)
   harus putih jelas — font kecil membuat #d2d4e4 tampak redup di kartu gelap */
body.dark-mode .card .card-body .text-white,
body.dark-mode .card .card-body .text-white span,
body.dark-mode .card .card-body .text-dark-75,
body.dark-mode .card .card-body .text-dark-75 span {
  color: #ffffff !important;
}

/* Hasil pencarian pegawai di dropdown card dashboard (warna terang hardcode) */
body.dark-mode .hasil-caripegawai .caripegawai-sub {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .hasil-caripegawai .caripegawai-nama {
  border-bottom-color: var(--dm-border);
}
/* Preview foto profil pegawai (kartu putih saat hover nama) */
body.dark-mode #caripegawaiFotoPreview {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode #caripegawaiFotoPreview img {
  background-color: var(--dm-input-bg) !important;
}

/* [9f] Halaman login (layouts/app-login): kotak informasi aside bergaya
   inline "background: white" dengan teks gelap #3a3939 */
body.dark-mode .login-aside [style*='background: white' i],
body.dark-mode .login-aside [style*='background: #fff' i] {
  background: var(--dm-row-hl) !important;
}
body.dark-mode .login-aside span[style*='#3a3939' i] {
  color: var(--dm-text) !important;
}

/* [9g] Badge/kotak bergaya inline latar biru muda #e1f0ff + teks biru
   #3699ff (kategori riwayat perubahan, mutasi jabatan, tte setting, dst.) */
body.dark-mode [style*='background-color: #e1f0ff' i],
body.dark-mode [style*='background-color:#e1f0ff' i],
body.dark-mode [style*='background: #e1f0ff' i],
body.dark-mode [style*='background:#e1f0ff' i] {
  background-color: var(--dm-inline-blue) !important;
}

/* [9h] Modal global search (satyalancana, jafung, tubel, berkala,
   pencantuman gelar): hover baris hasil memakai ID-selector dengan latar
   #eef5ff. ID kontainernya bervariasi (#global-search-results,
   #global-search-results-usuljafung, #global-search-results-berkala)
   sehingga dipakai selector prefix [id^=...] — !important menang
   atas spesifisitas ID milik modal */
body.dark-mode [id^='global-search-results'] tr[data-usul-id]:hover td {
  background-color: var(--dm-bg-hover) !important;
}

/* Dropdown menu (termasuk picker tema di topbar) */
body.dark-mode .dropdown-menu {
  background-color: var(--dm-bg-elevated) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .dropdown-item {
  color: var(--dm-text);
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: var(--dm-bg-hover) !important;
  color: var(--dm-text);
}
body.dark-mode .dropdown-divider {
  border-color: var(--dm-border);
}

/* [11] Bulan+ (body.dark-mode.dm-darker): gelap pekat — cukup menimpa
   variabel, seluruh rule yang memakai var(--dm-*) menyesuaikan otomatis */
body.dark-mode.dm-darker {
  --dm-bg-page: #0b0b12;
  --dm-bg-card: #141420;
  --dm-bg-elevated: #1a1a28;
  --dm-bg-hover: #1d1d30;
  --dm-border: #26263a;
  --dm-input-bg: #171724;
  --dm-input-border: #2a2a42;
  --dm-thead: #12121c;
  --dm-row-hl: #1a1a28;
  --dm-row-hl-hover: #202038;
  --dm-btn-light: #1c1c2c;
  --dm-btn-light-border: #2a2a42;
  --dm-btn-light-hover: #232338;
  --dm-choice: #1e1e30;
  --dm-cal-hover: #23233a;
  --dm-input-disabled: #101019;
  --dm-inline-blue: #16233a;
}
/* Aside, brand & header ikut lebih gelap di Bulan+ */
body.dark-mode.dm-darker .aside,
body.dark-mode.dm-darker .aside-menu,
body.dark-mode.dm-darker .brand,
body.dark-mode.dm-darker .header,
body.dark-mode.dm-darker .header-mobile {
  background-color: #101018 !important;
}

/* [10] Cetak: kembali ke warna terang dokumen */
@media print {
  body.dark-mode {
    background: #ffffff !important;
    color: #000000 !important;
  }
  body.dark-mode .card,
  body.dark-mode .subheader.subheader-solid,
  body.dark-mode .table,
  body.dark-mode .list-group-item {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #dddddd !important;
  }
}