/**
 * CV. ILMION KREATIF = ILMION STUDIO 
 * https://mdtsolution.com - hi@ilmion.com
 * 
 * STYLE
 * version      : 1.0.0 - Beta
 * Realeased    : 17 Aug 2018 - Singosari - Mirza Ramadhany
 * Last Updated : - 
 */

/* Select2
http://ivaynberg.github.io/select2/
*/

.num {
  text-align: right;
}

.date>input {
  text-align: center;
}

.btn-w2gr {
  height: 20px;
  font-size: 12px;
  display: block;
}


.select2-container {
  width: 100% !important;
  /* Memastikan Select2 mengisi lebar penuh kontainer */
}

/* wadah dropdown select2 yang ditempel ke body ikut kelas .select2-container: jangan dipaksa 100%,
   karena posisinya digeser (left) sehingga meluber keluar layar dan tablet/HP jadi mengecil (zoom out) */
body > .select2-container {
  width: auto !important;
}

.select2-container .select2-selection--multiple {
  min-height: 35px;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #cccccc;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: 1px solid #cccccc;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #ced4da;
  /* Menggunakan warna border Bootstrap */
  border-radius: 0.25rem;
  /* Menggunakan radius border Bootstrap */
  height: calc(1.5em + 0.75rem + 2px);
  /* Menyesuaikan tinggi dengan input Bootstrap */
  padding: 0.375rem;
  /* Menggunakan padding Bootstrap */
  line-height: 1.5;
  /* Menggunakan line-height Bootstrap */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: inherit;
  /* Memastikan teks berada di tengah vertikal */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem + 2px);
  /* Menyesuaikan tinggi panah */
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single.select2-selection--open {
  border-color: #95bee9;
  /* Warna border fokus Bootstrap */
  box-shadow: 0 0 0 0.2rem rgba(129, 169, 212, 0.623);
  /* Efek bayangan fokus Bootstrap */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3276b1;
  /* Warna highlight Bootstrap */
  color: white;
  /* Warna teks highlight Bootstrap */
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid #ced4da 1px;
}

.input-group .select2-container {
  flex: 1 1 auto;
  /* Memungkinkan Select2 mengisi ruang yang tersedia */
  max-width: calc(100% - 40px);
}

.input-group .select2-container--default .select2-selection--single {
  border-radius: 0;
  /* Menghapus radius border agar sesuai dengan input-group */
}

.input-group-append .input-group-text {
  border-radius: 0;
  /* Menghapus radius border pada tombol */
}

/*jika tombol berada di kanan*/
.input-group .select2-container--default .select2-selection--single {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/*jika tombol berada di kiri*/
.input-group .select2-container--default .select2-selection--single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* .select2{
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
  } */
/* .input-group > .select2{
    position: relative;
    flex: 1 1 auto;
    width: 10%;
    min-width: 0;
    overflow: hidden;
  } */

.select2-container--open .select2-dropdown--below {
  z-index: 9999;
}

.select2-readonly-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* Atau warna latar belakang lain yang sesuai */
  z-index: 10;
  /* Pastikan overlay berada di atas elemen Select2 */
}

/* .select2-container .select2-selection.select2-selection--single {
    height: 35px;
  }

  .select2-selection__rendered, .select2-selection__clear, .select2-selection__arrow{
    margin-top: 2px;
  } */

/* 
  .select2-container .select2-selection > .select2-chosen {
    margin-right: 26px;
    margin-left: 0;
  }
  .select2-container.select2-drop-above .select2-choice {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
  }
  .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: transparent;
  }
  
  .select2-container--default .select2-results__group {
    color: #2c2c2c;
  }
  .select2-search input,
  .select2-search-choice-close,
  .select2-container .select2-choice abbr,
  .select2-container .select2-choice .select2-arrow b {
    background-image: none !important;
  }
  .select2-dropdown-open.select2-drop-above .select2-choice,
  
  .select2-dropdown-open.select2-drop-above .select2-choices {
    background-image: none !important;
    border: 1px solid rgba(23, 168, 4, 0.07);
    background: #880606;
  }


  .select2-dropdown-open .select2-choice .select2-arrow {
    -webkit-transform: scale(scale(1, -1));
    -ms-transform: scale(scale(1, -1));
    transform: scale(scale(1, -1));
  }
  .select2-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: none;
    border-radius: 2px;
    padding-top: 0px;
  }
  .select2-dropdown.select2-drop-above {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: none;
  }
  .select2-container--open .select2-selection {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: #f0f0f0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }
  .select2-search--dropdown {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
  }
  .select2-search--dropdown input {
    background: #fff !important;
    vertical-align: baseline;
    line-height: 28px;
    border-radius: 2px;
    border: none;
    font-size: 12px;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
  }
  
  .select2-results {
    margin: 3px 8px 10px 8px;
  }
  .select2-results li {
    color: #626262;
  }
  .select2-results li.select2-result-with-children > .select2-result-label {
    color: #2c2c2c;
  }
  .select2-results li.select2-result-with-children > .select2-result-label:first-child {
    padding-top: 8px;
  }
  .select2-results .select2-results__option--highlighted {
    background-color: #f0f0f0 !important;
    border-radius: 3px;
    color: #626262 !important;
  }
  .select2-results .select2-no-results,
  .select2-results .select2-searching,
  .select2-results .select2-selection-limit {
    background: none;
    color: #626262;
    font-size: 12px;
    padding-left: 8px;
    padding-top: 0px;
    position: relative;
    top: -5px;
  }
  .select2-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    padding-top: 5px;
    z-index: 790;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  }

  
  .select2-container--open .select2-selection--multiple .select2-selection__choice {
    background-color: #fff !important;
  }
  .select2-selection--multiple .select2-selection__rendered {
    background-image: none;
  }
  .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #e6e6e6;
    background-image: none;
    border: none;
    box-shadow: none;
    color: inherit;
    border-radius: 8px;
    margin: 6px -5px 0px 10px;
    padding: 0 8px 0 7px;
    line-height: 21px;
  }
  .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:first-child {
    margin-left: 0;
  }
  .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    color: #626262;
    font-weight: 900;
    margin-right: 4px;
  }
  .select2-selection--multiple .select2-selection__rendered .select2-search--inline {
    margin-left: 8px;
  }
  .select2-selection--multiple.select2-container-active .select2-choices {
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: none;
  }
  .select2-selection--multiple .select2-search-choice-close {
    left: 6px;
  }
  .select2-search-choice-close {
    background: none;
    top: 4px;
    right: 0;
  }
  .select2-search-choice-close:hover {
    text-decoration: none;
  }
  .select2-drop-multi .select2-results .select2-no-results,
  .select2-drop-multi .select2-results .select2-searching,
  .select2-drop-multi .select2-results .select2-selection-limit {
    top: 0px;
  }*/
/* .select2.form-control {
    padding: 0;
    box-shadow: none;
    border: 0;
  } */
/* .select2-drop-mask {
    z-index: 700;
  } */

.form-floating .select2-container--default.select2-selection {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}

.form-floating .select2-container--default .select2-selection>.select2-selection__rendered {
  margin-top: 1.2rem;
  margin-left: 0.25rem;
}

.form-floating .select2-container--default .select2-selection {
  height: 58px;
}

.glyphicon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-chevron-left:before {
  content: "\f053";
}

.glyphicon-chevron-right:before {
  content: "\f054";
}

.glyphicon-chevron-up:before {
  content: "\f077";
}

.glyphicon-chevron-down:before {
  content: "\f078";
}

/*validate*/
ul.myErrorClass,
input.myErrorClass,
textarea.myErrorClass,
select.myErrorClass {
  border-width: 1px !important;
  border-style: solid !important;
  /* border-color: #cc0000 !important; */
  /* background-color: #f3d8d8 !important; */
  /* background-image: url(http://goo.gl/GXVcmC) !important; */
  background-position: 50% 50% !important;
  background-repeat: repeat !important;
}

ul.myErrorClass input {
  color: #666 !important;
}

label.myErrorClass {
  color: red;
  font-size: 11px;
  /*    font-style: italic;*/
  display: block;
}

/*badge*/
.badge-blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/*datatble */
.dataTable tr {
  border: 1px solid rgb(219, 219, 219);
}

/* w2 ui grid*/
.w2ui-grid-col {
  box-shadow: none;
  border-radius: 0px;
  background-color: #7c1c1c;
  /* Warna latar belakang abu-abu muda */
  color: #333;
  /* Warna teks abu-abu tua */
  font-family: Arial, sans-serif;
}

.w2ui-grid .w2ui-grid-header {
  font-size: 12px;
  text-align: center;
}

.w2ui-grid .w2ui-grid-body table .w2ui-head {
  background-color: #FAFAFA;
  background-image: none;
}

/* ============================================================
   GLOBAL PRINT STYLESHEET - Dashboard Report Mode
   ============================================================ */
@media print {

  /* === 0. HALAMAN: LANDSCAPE A4 === */
  @page {
    size: A4 landscape;
    margin: 10mm 12mm;
  }

  /* Universal Hide for Print */
  .no-print, .no-print *, 
  .dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-divider,
  .btn-ghost-secondary, .btn-ghost-primary, 
  .apexcharts-toolbar, .apexcharts-menu, .apexcharts-toolbar-custom-icon,
  .card-header .dropdown, .card-header .ms-auto .btn { 
    display: none !important; 
  }

  /* === 1. RESET BODY & WRAPPER CHROME === */
  body.printing-page {
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 10pt !important;
    color: #1a1a2e !important;
    background: #fff !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sembunyikan semua chrome aplikasi (navbar, sidebar, wrapper) */
  body.printing-page .navbar,
  body.printing-page .navbar-vertical,
  body.printing-page .sidebar,
  body.printing-page aside,
  body.printing-page .page-header,
  body.printing-page nav,
  body.printing-page header { display: none !important; }

  /* Reset semua wrapper container agar penuh lebar halaman */
  body.printing-page .page-wrapper,
  body.printing-page .page-body,
  body.printing-page .container-xl,
  body.printing-page .container-fluid,
  body.printing-page .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* === 2. LAYOUT GRID - FLOAT BASED (anti tumpuk di print engine) === */
  body.printing-page .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.printing-page .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Kolom 2 - 50% */
  body.printing-page .col-6,
  body.printing-page .col-md-6,
  body.printing-page .col-lg-6,
  body.printing-page .col-sm-6 {
    float: left !important; width: 50% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Kolom 3 - 33% */
  body.printing-page .col-4,
  body.printing-page .col-md-4,
  body.printing-page .col-lg-4,
  body.printing-page .col-sm-4 {
    float: left !important; width: 33.333% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Kolom 4 - 25% */
  body.printing-page .col-3,
  body.printing-page .col-md-3,
  body.printing-page .col-lg-3,
  body.printing-page [class*="col-lg-3"],
  body.printing-page [class*="col-sm-6 col-lg-3"] {
    float: left !important; width: 25% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Kolom 2/3 - 66% */
  body.printing-page .col-8,
  body.printing-page .col-md-8,
  body.printing-page .col-lg-8 {
    float: left !important; width: 66.666% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Kolom 1/3 - 33% (lg-4) */
  body.printing-page .col-lg-4,
  body.printing-page .col-md-4 {
    float: left !important; width: 33.333% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Kolom penuh */
  body.printing-page .col-12,
  body.printing-page .col-md-12 {
    float: left !important; width: 100% !important;
    padding: 0 8px !important; box-sizing: border-box !important;
  }

  /* Semua elemen kolom: border-box */
  body.printing-page [class^="col-"],
  body.printing-page [class*=" col-"] {
    box-sizing: border-box !important;
  }

  /* ApexCharts: paksa lebar penuh */
  body.printing-page .apexcharts-canvas,
  body.printing-page .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* === 2. SEMBUNYIKAN ELEMEN UI INTERAKTIF === */

  /* --- Aturan UNIVERSAL: langsung hide semua .no-print & .dropdown di setiap print --- */
  .no-print,
  .no-print * { display: none !important; }

  .dropdown,
  .dropdown-toggle,
  .dropdown-menu,
  .dropdown-divider { display: none !important; }

  .apexcharts-toolbar,
  .apexcharts-menu { display: none !important; }

  /* --- Aturan dengan body.printing-page (backup & spesifik) --- */
  body.printing-page .btn,
  body.printing-page button,
  body.printing-page .card-actions { display: none !important; }

  body.printing-page select,
  body.printing-page .select2,
  body.printing-page .select2-container,
  body.printing-page .form-control,
  body.printing-page .form-label,
  body.printing-page input { display: none !important; }

  body.printing-page .nav,
  body.printing-page .nav-tabs,
  body.printing-page .nav-item,
  body.printing-page .nav-link,
  body.printing-page .page-header,
  body.printing-page .navbar,
  body.printing-page .sidebar,
  body.printing-page aside,
  body.printing-page .card-header .ms-auto,
  body.printing-page .card-header .ms-auto * { display: none !important; }

  body.printing-page .tab-content,
  body.printing-page .tab-pane.active.show { display: block !important; visibility: visible !important; }

  body.printing-page .dataTables_filter,
  body.printing-page .dataTables_length,
  body.printing-page .dataTables_paginate,
  body.printing-page .dataTables_info { display: none !important; }

  body.printing-page .status-dot,
  body.printing-page .status-dot-animated { display: none !important; }
  body.printing-page a.card.card-link { display: none !important; }
  body.printing-page .no-print { display: none !important; }

  /* === 3. CARD STYLING === */
  body.printing-page .card {
    border: 1px solid #d0d5dd !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    page-break-inside: avoid !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  body.printing-page .card-header {
    background: #f5f7fa !important;
    border-bottom: 1.5px solid #d0d5dd !important;
    padding: 8px 14px !important;
  }
  body.printing-page .card-title {
    font-size: 9.5pt !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 !important;
  }
  body.printing-page .card-body {
    padding: 10px 14px !important;
  }
  body.printing-page .card-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e4e7ec !important;
    padding: 6px 14px !important;
  }

  /* === 4. TIPOGRAFI METRIK / ANGKA === */
  body.printing-page .h1, body.printing-page .h2 {
    font-size: 16pt !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }
  body.printing-page .h3, body.printing-page .h4 {
    font-size: 12pt !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }
  body.printing-page .subheader {
    font-size: 7.5pt !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #667085 !important;
    margin-bottom: 4px !important;
  }
  body.printing-page .text-muted { color: #667085 !important; font-size: 8.5pt !important; }
  body.printing-page .small, body.printing-page small { font-size: 8pt !important; }
  body.printing-page .badge {
    font-size: 7.5pt !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  /* === 5. TABEL === */
  body.printing-page .table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 8.5pt !important;
    margin-bottom: 0 !important;
  }
  body.printing-page .table th {
    background: #f0f2f5 !important;
    color: #344054 !important;
    font-weight: 700 !important;
    font-size: 8pt !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 5px 8px !important;
    border-bottom: 1.5px solid #d0d5dd !important;
    border-top: none !important;
  }
  body.printing-page .table td {
    padding: 5px 8px !important;
    border-bottom: 1px solid #eaecf0 !important;
    vertical-align: middle !important;
  }
  body.printing-page .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #f9fafb !important;
  }
  body.printing-page .table-responsive {
    max-height: none !important;
    overflow: visible !important;
  }

  /* === 6. PROGRESS BAR === */
  body.printing-page .progress {
    height: 6px !important;
    background: #e4e7ec !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }
  body.printing-page .progress-bar {
    height: 6px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* === 7. PAKSA WARNA TERCETAK === */
  body.printing-page * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* tampilan kartu tabel w2ui di HP (bj.grid_hp di core.js) */
.grid-hp-aktif .w2ui-grid-body,
.grid-hp-aktif .w2ui-grid-footer {
  display: none !important;
}
.grid-hp-kartu .card-body {
  padding: .75rem .875rem;
}
.grid-hp-judul {
  font-size: .95rem;
  line-height: 1.3;
}
.grid-hp-data {
  margin-top: .5rem;
  font-size: .825rem;
}
.grid-hp-baris {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: .5rem;
  padding: .2rem 0;
}
/* isi sel w2ui membawa gaya tinggi/lebar tetap untuk tabel, di kartu dibuat mengalir */
.grid-hp-baris > span *,
.grid-hp-judul *,
.grid-hp-kanan * {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  width: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.grid-hp-baris + .grid-hp-baris {
  border-top: 1px dashed var(--tblr-border-color);
}
.grid-hp-aksi {
  margin-top: .625rem;
}
.grid-hp-total {
  border-left: 3px solid var(--tblr-primary);
  background: var(--tblr-primary-lt, #e8f0fb);
}
.grid-hp-dipilih {
  box-shadow: 0 0 0 2px var(--tblr-primary);
  background: var(--tblr-primary-lt, #e8f0fb);
}
.grid-hp-cek,
.grid-hp-semua {
  width: 1.25rem;
  height: 1.25rem;
}
.grid-hp-klik {
  cursor: pointer;
}
.grid-hp-klik:active {
  background: var(--tblr-active-bg, rgba(32, 107, 196, .06));
}
.grid-hp-aksi .btn-group {
  width: 100%;
}
.grid-hp-aksi .btn {
  min-height: 36px;
}

/* tab di HP: satu baris yang bisa digeser, gaya garis bawah (dulu turun ke beberapa baris) */
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-item {
    flex: 0 0 auto;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: .625rem .75rem;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
  }
  .nav-tabs .nav-link.active {
    color: var(--tblr-primary);
    border-bottom-color: var(--tblr-primary) !important;
    font-weight: 600;
  }
}

/* Manual Book (11 halaman src/<modul>/m*_manual.html): di HP & tablet daftar isi pindah ke atas
   jadi deretan tombol yang bisa digeser, isi selebar layar (dulu col-3/col-9 tetap berdampingan) */
@media (max-width: 991.98px) {
  .bg-sidebar-manual,
  .content-documentation {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .bg-sidebar-manual {
    border-right: 0 !important;
    border-bottom: 1px solid var(--tblr-border-color);
  }
  .bg-sidebar-manual > .sticky-top {
    position: static;
    max-height: none !important;
    padding: .75rem !important;
  }
  .bg-sidebar-manual > .sticky-top > .d-flex {
    margin-bottom: .5rem !important;
  }
  .list-group-documentation {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: .375rem;
    padding-bottom: .25rem;
  }
  .list-group-documentation::-webkit-scrollbar {
    display: none;
  }
  .list-group-documentation .list-group-header-custom {
    display: none;
  }
  .list-group-documentation .list-group-item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    margin: 0 !important;
    padding: .5rem .875rem !important;
    box-shadow: none !important;
  }
  .content-documentation {
    padding: 1.25rem !important;
  }
  .content-documentation .display-5,
  .content-documentation h1 {
    font-size: 1.6rem;
  }
  .content-documentation h2 {
    font-size: 1.35rem;
  }
  .content-documentation .fs-4,
  .content-documentation .lead {
    font-size: 1rem !important;
  }
  .content-documentation .border-end {
    border-right: 0 !important;
  }
  .card-premium {
    min-height: 0 !important;
    border-radius: 12px !important;
  }
  /* diagram alur langkah (wf-step) supaya 5 langkah muat selebar HP */
  .content-documentation .d-flex:has(> .wf-step) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: .5rem .25rem;
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .content-documentation .card.p-4:has(.wf-step) {
    padding: 1rem !important;
  }
  .content-documentation .wf-step .icon-circle {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .content-documentation .wf-step .small {
    font-size: .75rem;
  }
}

/* ===== kelas sisa template lama (Pages / Bootstrap 4) =====
   masih dipakai ratusan halaman tapi tidak punya gaya di Tabler, akibatnya isian form menempel */
.form-group {
  margin-bottom: .75rem;
}
.bold {
  font-weight: 600;
}
.semi-bold {
  font-weight: 500;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.m-t-0 { margin-top: 0 !important; }
.m-t-5 { margin-top: 5px !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-15 { margin-top: 15px !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-r-5 { margin-right: 5px !important; }
.p-t-5 { padding-top: 5px !important; }
.p-t-8 { padding-top: 8px !important; }
.p-t-10 { padding-top: 10px !important; }
.p-b-4 { padding-bottom: 4px !important; }
.p-b-5 { padding-bottom: 5px !important; }
.p-b-8 { padding-bottom: 8px !important; }
.p-l-5 { padding-left: 5px !important; }
.p-r-5 { padding-right: 5px !important; }
@media (max-width: 767.98px) {
  .sm-p-l-5 { padding-left: 5px !important; }
  .sm-p-r-5 { padding-right: 5px !important; }
}

/* area filter di atas tabel laporan (#wrap_search): jarak antar isian, terutama saat bertumpuk di HP */
#wrap_search .row {
  row-gap: .5rem;
}
#wrap_search .form-group {
  margin-bottom: 0;
}
/* tombol PDF & XLS sering ditaruh berdua di col-md-1 sehingga terpotong: di layar sedang cukup ikon */
@media (min-width: 768px) and (max-width: 1599.98px) {
  .col-md-1 .btn-group:has(#r_pdf) [id^="r_text_"] {
    display: none;
  }
  .col-md-1 .btn-group:has(#r_pdf) .btn {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

/* tabel utama (#gr1) yang dikunci 500px: di desktop setinggi sisa layar, w2ui ikut menyesuaikan */
@media (min-width: 768px) {
  #bcontent #gr1.w2ui-grid[style*="max-height: 500px"] {
    height: calc(100vh - 330px);
    min-height: 420px !important;
    max-height: none !important;
  }
}

/* notifikasi otorisasi di HP: ringkas di bawah layar, tidak menutupi tengah halaman */
@media (max-width: 767.98px) {
  .toast-container {
    left: 0;
    right: 0;
    padding: .5rem !important;
  }
  .toast-container .toast {
    width: 100%;
  }
  .toast-container .toast-header {
    padding: .375rem .75rem;
  }
  .toast-container .toast-body {
    padding: .5rem .75rem;
    font-size: .8125rem;
  }
}

/* menu utama: di tablet & laptop menu yang tidak muat dulu terpotong (Sistem, AI, TikTok tidak
   terlihat), sekarang turun ke baris kedua */
@media (min-width: 768px) {
  #bmenu {
    flex-wrap: wrap;
  }
}

/* tablet tegak: form dengan banyak kolom col-md-* (dirancang untuk desktop) jadi 2 kolom */
@media (min-width: 768px) and (max-width: 991.98px) {
  #bcontent form .row > [class*="col-md-"]:not(.col-md-12) {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}
/* filter laporan (#wrap_search) sampai layar 1199px jadi 2 kolom supaya tanggal & tombol tidak terpotong */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #wrap_search .row > [class*="col-md-"]:not(.col-md-12) {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
  #wrap_search .col-md-1 .btn-group:has(#r_pdf) [id^="r_text_"] {
    display: inline;
  }
}

/* layar sentuh (HP/tablet): Safari iOS memperbesar tampilan saat mengetik di isian < 16px dan tidak
   kembali sendiri, jadi ukuran huruf isian dibuat 16px. Laptop/PC (pointer mouse) tidak berubah */
@media (pointer: coarse) {
  input.form-control,
  textarea.form-control,
  select.form-select,
  select.form-control,
  .select2-search__field,
  .select2-container .select2-selection__rendered,
  .w2ui-field input,
  .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all,
  .w2ui-grid .w2ui-editable input,
  .w2ui-grid .w2ui-editable .w2ui-input {
    font-size: 16px !important;
  }
}

/* alert berisi teks biasa (tanpa blok div) jangan flex: di Tabler .alert flex sehingga teks + <b> + ikon
   terpecah jadi kolom-kolom sempit (terlihat di HP). Alert bergaya Tabler (berisi div) tidak terpengaruh */
.alert:not(:has(> div)) {
  display: block;
}

/* HP: tabel isian (dibungkus di main.js) — sel lebih lega untuk disentuh */
@media (max-width: 767.98px) {
  .grid-isian .w2ui-grid-data > div {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* tabel pemilih di modal (Pilih Barang, PO, Pelanggan, dst.) di HP: kotak cari tetap di atas saat kartu digulir */
.modal .grid-hp-aktif {
  position: sticky !important;
  top: 0;
  z-index: 5;
}
/* judul tabel sudah dipindah ke judul modal (bj.grid_hp) */
.modal .grid-hp-aktif .w2ui-grid-header {
  display: none !important;
}
.modal .grid-hp-aktif .w2ui-grid-toolbar {
  top: 0 !important;
}
.grid-hp-mati {
  opacity: .6;
}
@media (max-width: 767.98px) {
  .modal-dialog:has(.grid-hp-aktif) {
    margin: .5rem;
  }
  .modal-dialog:has(.grid-hp-aktif) .modal-body {
    padding: .5rem .75rem;
  }
}

/* === menu utama (app.menu_html_c / app.menu_hp di main.js) === */
/* mega menu: isi menu induk tampil sebagai kolom per sub menu */
.menu-mega-judul {
  display: block;
  padding: .25rem .5rem;
  margin-bottom: .25rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  border-bottom: 1px solid var(--tblr-border-color);
  text-decoration: none !important;
  cursor: default;
}
/* judul "<sub menu> (lanjutan)" hanya tampil bila blok memulai kolom baru (main.js shown.bs.dropdown) */
.menu-mega-lanjut {
  display: none;
  padding: .25rem .5rem;
  margin-bottom: .25rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  border-bottom: 1px solid var(--tblr-border-color);
}
.menu-mega-subjudul {
  padding: .35rem .5rem 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
}
.menu-mega .dropdown-item {
  min-width: 0;
  white-space: normal;
  border-radius: 4px;
}
@media (min-width: 768px) {
  /* panel menempel ke baris menu (bukan ke menu induk) agar selalu di bawah semua baris & tidak keluar layar;
     posisi kiri diatur app di main.js (shown.bs.dropdown) */
  #navbar-menu .navbar > .container-xl {
    position: relative;
  }
  #bmenu > li.dropdown {
    position: static;
  }
  #bmenu > li > .menu-mega {
    top: 100% !important;
    left: 0;
    margin-top: 0 !important;
    width: calc(var(--menu-kolom, 1) * 225px + 2rem);
    max-width: calc(100% - 16px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: .75rem 1rem;
  }
  .menu-mega-isi {
    column-count: var(--menu-kolom, 1);
    column-gap: 1.25rem;
  }
  /* hanya daftar panjang (>10 halaman, mis. Laporan Akuntansi) yang boleh lanjut ke kolom berikutnya */
  .menu-mega-kolom {
    margin-bottom: .75rem;
  }
  .menu-mega-kolom:not(.menu-mega-panjang) {
    break-inside: avoid;
  }
  .menu-mega-judul,
  .menu-mega-subjudul {
    break-after: avoid;
  }
  .menu-mega-blok {
    break-inside: avoid;
  }
  .menu-mega-blok.lanjut > .menu-mega-lanjut {
    display: block;
  }
  .menu-mega .dropdown-item {
    padding: .3rem .5rem;
  }
  /* menu induk yang sedang dibuka ditandai garis bawah */
  /* garis lurus di bawah menu induk (penanda bawaan Tabler li.active:after), bukan bayangan yang ikut sudut tombol */
  #bmenu > li.active > .nav-link {
    color: var(--tblr-primary);
    box-shadow: none;
  }
  /* li menu induk static (mega menu), jadi garis ditaruh di tombolnya (::after tombol dipakai panah dropdown) */
  #bmenu > li.active::after {
    display: none;
  }
  #bmenu > li > .nav-link {
    position: relative;
  }
  #bmenu > li.active > .nav-link::before {
    content: "";
    position: absolute;
    left: .45rem;
    right: .45rem;
    bottom: 0;
    height: 2px;
    background: var(--tblr-primary);
  }
}
/* laptop: menu induk dirapatkan agar 16 menu muat satu baris; di bawah 1920px ikon & panah disembunyikan */
@media (min-width: 992px) {
  #bmenu > li > .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
  }
  #bmenu > li > .nav-link .nav-link-icon {
    margin-right: .3rem;
    width: auto;
  }
}
@media (min-width: 992px) and (max-width: 1919.98px) {
  #bmenu > li > .nav-link {
    padding-left: .45rem;
    padding-right: .45rem;
    font-size: .8125rem;
  }
  #bmenu > li > .nav-link .nav-link-icon,
  #bmenu > li > .nav-link.dropdown-toggle::after {
    display: none !important;
  }
}

/* HP: menu jadi panel geser dari kiri di atas halaman */
.menu-hp-latar {
  display: none;
}
@media (max-width: 767.98px) {
  #navbar-menu {
    display: block !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 86%;
    max-width: 340px;
    height: auto !important;
    z-index: 1095;
    overflow-y: auto;
    background: var(--tblr-bg-surface, #fff);
    box-shadow: 0 0 24px rgba(0, 0, 0, .2);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }
  body.menu-hp-buka #navbar-menu {
    transform: none;
    visibility: visible;
  }
  body.menu-hp-buka .menu-hp-latar {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1094;
    background: rgba(24, 36, 51, .45);
  }
  body.menu-hp-buka {
    overflow: hidden;
  }
  .menu-hp-kepala {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
  }
  .menu-hp-pintas-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .25rem;
    font-size: .875rem;
    color: inherit;
    text-decoration: none;
  }
  #navbar-menu .navbar {
    padding-top: .25rem;
  }
  #bmenu > li > .nav-link {
    padding: .65rem 1rem;
  }
  #bmenu > li.active > .nav-link {
    color: var(--tblr-primary);
    font-weight: 600;
  }
  #bmenu > li > .menu-mega {
    padding: 0 0 .25rem;
    border: 0;
    box-shadow: none;
  }
  /* sub menu (Prasarana, Wilayah, ...) jadi akordeon */
  .menu-mega-judul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: .55rem 1rem .55rem 2.6rem;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    border: 0;
    cursor: pointer;
  }
  .menu-mega-judul::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .65rem;
    color: var(--tblr-secondary);
    transition: transform .15s;
  }
  .menu-mega-kolom.buka > .menu-mega-judul {
    color: var(--tblr-primary);
  }
  .menu-mega-kolom.buka > .menu-mega-judul::after {
    transform: rotate(180deg);
  }
  .menu-mega-kolom:not(.menu-mega-lepas):not(.buka) > .menu-mega-daftar {
    display: none;
  }
  .menu-mega-kolom:not(.menu-mega-lepas) > .menu-mega-daftar {
    margin: 0 1rem .25rem 2.6rem;
    border-left: 2px solid var(--tblr-border-color);
  }
  .menu-mega-daftar .dropdown-item {
    padding: .5rem .75rem;
  }
  #bmenu .menu-mega-lepas .dropdown-item {
    padding-left: 2.6rem;
  }
  .menu-mega-subjudul {
    padding-left: .75rem;
  }
}

/* =========================================================================
   TEMA "BERSIH MODERN"
   Token warna & bentuk di :root, komponen (form, tab, tabel w2ui, select2) memakai token ini.
   Mode gelap nanti cukup mendefinisikan ulang token. Halaman (src/*.html) tidak diubah.
   ========================================================================= */
/* Inter: font utama Tabler ("Inter Var"), disimpan lokal di assets/fonts/inter (lisensi OFL) */
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* biru bawaan Tabler (warna Digit sebelumnya) */
  --dg-aksen: #066fd1;
  --dg-aksen-rgb: 6, 111, 209;
  --dg-aksen-gelap: #0559a7;
  --dg-aksen-muda: #e6f1fa;
  --dg-latar: #f7f8fa;
  --dg-permukaan: #ffffff;
  --dg-blok: #f5f7fb;
  --dg-hover: #f6f7f9;
  --dg-garis: #e6e8ec;
  --dg-garis-isian: #d9dce3;
  --dg-garis-baris: #f0f1f4;
  --dg-teks: #111827;
  --dg-teks-label: #374151;
  --dg-kepala-tabel: #fafbfc;
  --dg-redup: #6b7280;
  --dg-radius: 8px;
  --dg-radius-kartu: 12px;
  --dg-bayangan: 0 1px 2px rgba(16, 24, 40, .04);
  /* warna utama Tabler ikut aksen Digit (tombol, tautan, tab aktif, fokus) */
  --tblr-primary: var(--dg-aksen);
  --tblr-primary-rgb: var(--dg-aksen-rgb);
  --tblr-primary-darken: var(--dg-aksen-gelap);
  --tblr-primary-lt: var(--dg-aksen-muda);
  --tblr-link-color: var(--dg-aksen);
  --tblr-link-color-rgb: var(--dg-aksen-rgb);
  --tblr-link-hover-color: var(--dg-aksen-gelap);
  --tblr-body-bg: var(--dg-latar);
}
body {
  background: var(--dg-latar);
  color: var(--dg-teks);
}
/* w2ui membawa font OpenSans sendiri */
.w2ui-reset,
.w2ui-reset table tr td,
.w2ui-lock-msg,
.w2ui-overlay .w2ui-overlay-body,
.w2ui-info-bubble table,
.w2ui-popup {
  font-family: var(--tblr-font-sans-serif);
}

/* header & menu */
header.navbar,
#navbar-menu .navbar {
  background: var(--dg-permukaan) !important;
  border-bottom: 1px solid var(--dg-garis) !important;
  box-shadow: none !important;
}
@media (min-width: 768px) {
  #bmenu > li > .nav-link {
    color: var(--dg-redup);
    font-weight: 500;
    border-radius: 6px;
  }
  #bmenu > li > .nav-link:hover,
  #bmenu > li.show > .nav-link {
    color: var(--dg-teks);
    background: var(--dg-hover);
  }
  #bmenu > li > .menu-mega {
    border: 1px solid var(--dg-garis);
    border-radius: var(--dg-radius-kartu);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .10);
  }
}
.page-header .page-title {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* kartu & tab halaman */
#bcontent .card {
  border: 1px solid var(--dg-garis);
  border-radius: var(--dg-radius-kartu);
  box-shadow: var(--dg-bayangan);
}
#bcontent .card > .nav-tabs {
  border-bottom: 1px solid var(--dg-garis);
  padding: 0 .75rem;
  gap: .25rem;
}
#bcontent .card > .nav-tabs .nav-link {
  border: 0;
  color: var(--dg-redup);
  font-weight: 500;
  background: transparent;
}
#bcontent .card > .nav-tabs .nav-link:hover {
  color: var(--dg-teks);
}
#bcontent .card > .nav-tabs .nav-link.active {
  color: var(--dg-teks);
  box-shadow: inset 0 -2px 0 var(--dg-aksen);
}

/* form: blok biru (div.bg-blue-lt di 273 tempat) jadi netral; blok di dalam blok jadi satu kotak abu muda.
   Badge span.bg-blue-lt tidak terkena. */
#bcontent div.bg-blue-lt {
  background: transparent !important;
  color: inherit !important;
}
#bcontent div.bg-blue-lt div.bg-blue-lt {
  background: var(--dg-blok) !important;
  border: 1px solid var(--dg-garis);
  border-radius: var(--dg-radius-kartu);
}
#bcontent .form-label {
  color: var(--dg-teks-label);
  font-weight: 500;
}
/* label di dalam kotak berwarna pekat / bertulisan putih (mis. kotak total Kasir) tetap ikut warna kotaknya */
#bcontent .text-white .form-label,
#bcontent [class*="bg-"]:not([class*="-lt"]):not(.bg-white):not(.bg-light) .form-label {
  color: inherit;
}
#bcontent .form-control,
#bcontent .form-select,
#bcontent .input-group-text,
#bcontent .select2-container .select2-selection {
  border-color: var(--dg-garis-isian);
  border-radius: var(--dg-radius);
}
#bcontent .input-group > :not(:last-child):not(.dropdown-menu) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#bcontent .input-group > :not(:first-child):not(.dropdown-menu) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#bcontent .btn {
  border-radius: var(--dg-radius);
  font-weight: 500;
}
#bcontent .btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#bcontent .btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* tombol di dalam sel tabel (Koreksi, Hapus, Pilih) tetap rapat */
.w2ui-grid .btn-w2gr {
  border-radius: 6px;
}

/* select2: dropdown & pilihan aktif */
.select2-container--default .select2-dropdown {
  border-color: var(--dg-garis-isian);
  border-radius: var(--dg-radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--dg-aksen) !important;
  color: #fff !important;
}

/* tabel w2ui */
.w2ui-grid {
  border: 1px solid var(--dg-garis) !important;
  border-radius: 10px;
  overflow: hidden;
}
.w2ui-grid .w2ui-grid-header,
.w2ui-grid .w2ui-grid-toolbar,
.w2ui-grid .w2ui-grid-body .w2ui-grid-columns,
.w2ui-grid .w2ui-grid-body .w2ui-grid-fcolumns,
.w2ui-grid .w2ui-grid-footer {
  background: var(--dg-kepala-tabel) !important;
  border-color: var(--dg-garis) !important;
}
.w2ui-grid .w2ui-col-header {
  color: var(--dg-redup);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table td,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table td {
  border-right-color: transparent;
  border-bottom: 1px solid var(--dg-garis-baris);
}
/* tabel isian (kolom bisa diedit): garis tegak tipis tetap ada agar batas sel jelas */
.grid-isian .w2ui-grid-body .w2ui-grid-records table td {
  border-right-color: var(--dg-garis-baris);
}
/* selektor setara w2ui (.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr...) supaya tidak kalah */
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd,
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even {
  background-color: var(--dg-permukaan);
  color: var(--dg-teks);
}
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd:hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even:hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd:hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even:hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-record-hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-record-hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-odd.w2ui-record-hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-odd.w2ui-record-hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-even.w2ui-record-hover,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-even.w2ui-record-hover {
  background-color: var(--dg-hover);
}
.w2ui-grid .w2ui-grid-body .w2ui-grid-scroll1 {
  background-color: var(--dg-kepala-tabel);
}
.w2ui-grid .w2ui-grid-body .w2ui-grid-columns,
.w2ui-grid .w2ui-grid-body .w2ui-grid-fcolumns {
  box-shadow: none;
  border-bottom: 1px solid var(--dg-garis);
}
.w2ui-grid .w2ui-grid-data {
  font-variant-numeric: tabular-nums;
}

/* kartu HP, modal */
.grid-hp-kartu,
.grid-isian-hp .card {
  border: 1px solid var(--dg-garis);
  border-radius: var(--dg-radius-kartu);
  box-shadow: var(--dg-bayangan);
}
.modal-content {
  border-radius: var(--dg-radius-kartu);
}

/* bilah aksi form (app.bilah_aksi di main.js): baris tombol Simpan menempel di bawah layar selama form belum habis,
   Simpan rata kanan berukuran wajar, Batal di kirinya, Total di kiri */
#bcontent .bilah-aksi {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin: 1rem 0 0 !important;
  padding: .65rem 0 !important;
  background: var(--dg-permukaan);
  border-top: 1px solid var(--dg-garis);
  box-shadow: 0 -8px 12px -10px rgba(16, 24, 40, .18);
}
#bcontent .bilah-aksi .bilah-lapis {
  display: contents;
}
/* bilah sering berupa .row / .col Bootstrap yang memaksa anaknya selebar 100% */
#bcontent .bilah-aksi > *,
#bcontent .bilah-aksi .bilah-lapis > * {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
#bcontent .bilah-aksi > :not(.btn),
#bcontent .bilah-aksi .bilah-lapis > :not(.btn) {
  padding-left: 0;
  padding-right: 0;
}
#bcontent .bilah-aksi button[type="submit"] {
  width: auto !important;
  min-width: 150px;
  flex: 0 0 auto;
  font-size: .9375rem !important;
  padding: .5rem 1.25rem !important;
  margin: 0 !important;
}
#bcontent .bilah-aksi .bilah-batal {
  flex: 0 0 auto;
  margin: 0;
}
.bilah-kbd {
  margin-left: .5rem;
  padding: .05rem .3rem;
  font-size: .65rem;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  box-shadow: none;
  border: 0;
}
#bcontent .bilah-aksi .bilah-info {
  flex: 1 1 auto;
  margin-right: auto;
  line-height: 1.2;
  min-width: 0;
}
#bcontent .bilah-info small {
  display: block;
  color: var(--dg-redup);
  font-size: .75rem;
}
#bcontent .bilah-info b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .bilah-kbd {
    display: none;
  }
}
@media (max-width: 767.98px) {
  #bcontent .bilah-aksi .bilah-batal {
    display: none;
  }
  #bcontent .bilah-aksi button[type="submit"] {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 60%;
    padding: .6rem 1rem !important;
  }
  #bcontent .bilah-aksi .bilah-info + .bilah-lapis button[type="submit"],
  #bcontent .bilah-aksi .bilah-info ~ button[type="submit"] {
    flex: 0 0 auto;
  }
  #bcontent .bilah-aksi:not(:has(.bilah-info)) button[type="submit"] {
    max-width: none;
  }
  #bcontent .bilah-info b {
    font-size: 1.05rem;
  }
}

/* ikon salin w2ui hanya muncul saat kursor di atas baris (perangkat bermouse); di layar sentuh tetap tampil */
@media (hover: hover) {
  .w2ui-grid .w2ui-grid-records .w2ui-clipboard-copy,
  .w2ui-grid .w2ui-grid-frecords .w2ui-clipboard-copy {
    visibility: hidden;
  }
  .w2ui-grid .w2ui-grid-records tr:hover .w2ui-clipboard-copy,
  .w2ui-grid .w2ui-grid-frecords tr:hover .w2ui-clipboard-copy {
    visibility: visible;
  }
}
/* tabel kosong (app.grid_kosong di main.js) */
.w2ui-grid .grid-kosong {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: var(--dg-redup);
  text-align: center;
  font-size: .875rem;
  pointer-events: none;
  z-index: 2;
}
.w2ui-grid .grid-kosong i {
  font-size: 1.75rem;
  opacity: .45;
}
.w2ui-grid .grid-kosong small {
  font-size: .8rem;
}
/* avatar inisial bila user belum punya foto */
#fotouser:not([style*="background-image"]) {
  background: var(--dg-aksen-muda);
  color: var(--dg-aksen);
  font-weight: 700;
  font-size: .75rem;
}

/* validasi form (main.js $.validator.setDefaults) */
#bcontent .select2-selection.isian-salah {
  border-color: var(--tblr-danger) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--tblr-danger-rgb), .15);
}
#bcontent .form-control.is-invalid {
  box-shadow: 0 0 0 .2rem rgba(var(--tblr-danger-rgb), .15);
}
label.myErrorClass {
  display: block;
  margin-top: .25rem;
  color: var(--tblr-danger);
  font-size: .78rem;
  font-weight: 500;
}
label.myErrorClass::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: .3rem;
}
/* tombol dialog SweetAlert ikut warna aplikasi (dulu ungu bawaan); warna yang diatur halaman sendiri tetap berlaku */
.swal2-styled.swal2-confirm {
  background-color: var(--tblr-primary);
}
.swal2-styled.swal2-cancel {
  background-color: #6b7280;
}
.swal2-popup {
  border-radius: var(--dg-radius-kartu);
  font-family: var(--tblr-font-sans-serif);
}

/* =========================================================================
   MODE GELAP (app.tema_pasang di main.js: <html data-bs-theme="dark">)
   Tabler sudah menggelapkan kartu, form, tombol, badge, dropdown, modal. Di sini: token Digit + komponen
   yang tidak ikut otomatis (w2ui, select2, kalender, SweetAlert, kelas warna terang di halaman).
   ========================================================================= */
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --dg-latar: #111827;
  --dg-permukaan: #1f2937;
  --dg-blok: #18212f;
  --dg-hover: #273244;
  --dg-garis: #374151;
  --dg-garis-isian: #3f4b5f;
  --dg-garis-baris: #2b3646;
  --dg-teks: #e5e7eb;
  --dg-teks-label: #cbd5e1;
  --dg-redup: #9ca3af;
  --dg-kepala-tabel: #1a2332;
  --dg-aksen-muda: rgba(6, 111, 209, .22);
  --dg-bayangan: 0 1px 2px rgba(0, 0, 0, .3);
  --tblr-body-bg: var(--dg-latar);
  --tblr-primary-lt: var(--dg-aksen-muda);
  --tblr-link-color: #4ea1f3;
  --tblr-link-hover-color: #7bbaf7;
}

/* kelas warna terang yang ditulis langsung di halaman */
/* badge putih (mis. label angka di peta) dibiarkan: teksnya sering dikunci gelap */
[data-bs-theme="dark"] #bcontent .bg-white:not(.badge),
[data-bs-theme="dark"] #bcontent .bg-light:not(.badge),
[data-bs-theme="dark"] .modal .bg-white:not(.badge),
[data-bs-theme="dark"] .modal .bg-light:not(.badge) {
  background-color: var(--dg-permukaan) !important;
}
[data-bs-theme="dark"] #bcontent .text-dark,
[data-bs-theme="dark"] #bcontent .text-black,
[data-bs-theme="dark"] .modal .text-dark {
  color: var(--dg-teks) !important;
}

/* w2ui */
[data-bs-theme="dark"] .w2ui-reset,
[data-bs-theme="dark"] .w2ui-grid,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-box,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-records,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-frecords {
  background-color: var(--dg-permukaan) !important;
  color: var(--dg-teks);
}
[data-bs-theme="dark"] .w2ui-grid table td,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-data {
  color: var(--dg-teks);
  border-color: var(--dg-garis-baris) !important;
}
[data-bs-theme="dark"] .w2ui-grid td.w2ui-head,
[data-bs-theme="dark"] .w2ui-grid .w2ui-col-number,
[data-bs-theme="dark"] .w2ui-grid .w2ui-col-select,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-columns,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-fcolumns,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-summary,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-fsummary,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-summary tr,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-fsummary tr,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-records tr.w2ui-empty-record,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-frecords tr.w2ui-empty-record {
  background-color: var(--dg-kepala-tabel) !important;
  color: var(--dg-redup);
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-summary td,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-fsummary td {
  color: var(--dg-teks);
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr.w2ui-selected,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr.w2ui-selected,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr td.w2ui-selected,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr td.w2ui-selected {
  background-color: rgba(var(--dg-aksen-rgb), .32) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .w2ui-grid td.w2ui-changed {
  background-color: rgba(245, 159, 0, .14) !important;
}
[data-bs-theme="dark"] .w2ui-reset input:not([type="checkbox"]):not([type="radio"]),
[data-bs-theme="dark"] .w2ui-reset select,
[data-bs-theme="dark"] .w2ui-reset textarea,
[data-bs-theme="dark"] .w2ui-grid .w2ui-search-all,
[data-bs-theme="dark"] .w2ui-grid .w2ui-editable input {
  background-color: var(--dg-latar) !important;
  color: var(--dg-teks) !important;
  border-color: var(--dg-garis-isian) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-tb-button,
[data-bs-theme="dark"] .w2ui-grid .w2ui-tb-button .w2ui-tb-text,
[data-bs-theme="dark"] .w2ui-grid .w2ui-tb-button .w2ui-tb-icon,
[data-bs-theme="dark"] .w2ui-grid .w2ui-icon,
[data-bs-theme="dark"] .w2ui-grid .w2ui-footer-right,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-header {
  color: var(--dg-redup) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-tb-button:hover,
[data-bs-theme="dark"] .w2ui-grid .w2ui-tb-button.over {
  background-color: var(--dg-hover) !important;
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .w2ui-overlay .w2ui-overlay-body,
[data-bs-theme="dark"] .w2ui-overlay .w2ui-overlay-body.w2ui-white,
[data-bs-theme="dark"] .w2ui-overlay .w2ui-overlay-body.w2ui-light,
[data-bs-theme="dark"] .w2ui-menu,
[data-bs-theme="dark"] .w2ui-menu .w2ui-menu-item,
[data-bs-theme="dark"] .w2ui-menu .w2ui-menu-divider.has-text,
[data-bs-theme="dark"] .w2ui-menu .w2ui-menu-divider.has-text .text {
  background-color: var(--dg-permukaan) !important;
  color: var(--dg-teks) !important;
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .w2ui-menu .w2ui-menu-item:hover,
[data-bs-theme="dark"] .w2ui-menu .w2ui-menu-item.w2ui-selected {
  background-color: var(--dg-hover) !important;
}

/* select2 */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--tblr-bg-forms) !important;
  border-color: var(--dg-garis-isian) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--dg-teks) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
  color: var(--dg-redup) !important;
}
[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--dg-blok) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--dg-hover) !important;
  border-color: var(--dg-garis) !important;
  color: var(--dg-teks) !important;
}
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--dg-permukaan) !important;
  color: var(--dg-teks) !important;
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
[data-bs-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
  background-color: var(--dg-latar) !important;
  color: var(--dg-teks) !important;
  border-color: var(--dg-garis-isian) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: var(--dg-hover) !important;
  color: var(--dg-teks) !important;
}

/* kalender (bootstrap-datepicker) */
[data-bs-theme="dark"] .datepicker.dropdown-menu {
  background-color: var(--dg-permukaan);
  color: var(--dg-teks);
  border-color: var(--dg-garis);
}
[data-bs-theme="dark"] .datepicker table tr td.day:hover,
[data-bs-theme="dark"] .datepicker table tr td.focused,
[data-bs-theme="dark"] .datepicker .datepicker-switch:hover,
[data-bs-theme="dark"] .datepicker .prev:hover,
[data-bs-theme="dark"] .datepicker .next:hover,
[data-bs-theme="dark"] .datepicker table tr td span:hover {
  background: var(--dg-hover);
}
[data-bs-theme="dark"] .datepicker table tr td.old,
[data-bs-theme="dark"] .datepicker table tr td.new {
  color: #6b7280;
}
[data-bs-theme="dark"] .datepicker-dropdown:after {
  border-bottom-color: var(--dg-permukaan);
}
/* rentang tanggal (input dari-s.d.), tanggal tidak bisa dipilih & hari ini: bawaan plugin berlatar terang */
[data-bs-theme="dark"] .datepicker table tr td.range:not(.active),
[data-bs-theme="dark"] .datepicker table tr td.range:not(.active):hover {
  background: rgba(59, 130, 246, .16) !important;
  color: var(--dg-teks) !important;
  border-radius: 0;
}
[data-bs-theme="dark"] .datepicker table tr td.disabled:not(.active),
[data-bs-theme="dark"] .datepicker table tr td.disabled:not(.active):hover {
  background: transparent !important;
  color: #4b5563 !important;
}
[data-bs-theme="dark"] .datepicker table tr td.today:not(.active),
[data-bs-theme="dark"] .datepicker table tr td.today:not(.active):hover {
  background: rgba(245, 158, 11, .22) !important;
  color: #fcd34d !important;
}
[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th {
  border-color: transparent;
}
[data-bs-theme="dark"] .table-striped .datepicker table tr td,
[data-bs-theme="dark"] .table-striped .datepicker table tr th {
  background-color: transparent;
}

/* SweetAlert */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--dg-permukaan);
  color: var(--dg-teks);
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
  color: var(--dg-teks);
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background: var(--dg-latar);
  color: var(--dg-teks);
  border-color: var(--dg-garis-isian);
}

/* catatan kaki kiri w2ui hanya berisi info teknis ("Server Response ...", "Record ID: recid-5") */
.w2ui-grid .w2ui-footer-left {
  visibility: hidden;
}
/* bayangan & gradasi putih bawaan w2ui diganti garis token (terang & gelap) */
.w2ui-grid .w2ui-grid-toolbar,
.w2ui-grid .w2ui-grid-summary,
.w2ui-grid .w2ui-grid-footer {
  box-shadow: none !important;
}
.w2ui-grid .w2ui-grid-header,
.w2ui-grid .w2ui-grid-toolbar,
.w2ui-grid .w2ui-grid-footer,
.w2ui-grid .w2ui-grid-body .w2ui-grid-scroll1,
.w2ui-grid .w2ui-grid-summary {
  border-color: var(--dg-garis) !important;
}
.w2ui-grid .w2ui-grid-body table .w2ui-head {
  background-image: none !important;
  border-color: var(--dg-garis) !important;
}
.w2ui-grid .w2ui-grid-body .w2ui-grid-records table tr,
.w2ui-grid .w2ui-grid-body .w2ui-grid-frecords table tr {
  border-color: var(--dg-garis-baris) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body table tr.w2ui-selected .w2ui-col-number,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-body table tr.w2ui-selected td.w2ui-head {
  background-color: rgba(var(--dg-aksen-rgb), .45) !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .w2ui-toolbar .w2ui-scroll-left,
[data-bs-theme="dark"] .w2ui-toolbar .w2ui-scroll-right {
  background-color: var(--dg-permukaan) !important;
  color: var(--dg-redup) !important;
  border-color: var(--dg-garis) !important;
}

/* peta Leaflet di mode gelap: hanya ubin peta yang dibalik warnanya (marker, rute, lingkaran tetap warna asli) */
[data-bs-theme="dark"] .leaflet-container,
[data-bs-theme="dark"] #bcontent div[style*="background"]:has(> .leaflet-container) {
  background: #1b2130 !important;
  border-color: var(--dg-garis) !important;
}
/* batas wilayah GeoJSON bergaris putih (mis. Sebaran Wilayah dashboard ekspedisi) jadi gelap */
[data-bs-theme="dark"] .leaflet-container path.leaflet-interactive[stroke="white"],
[data-bs-theme="dark"] .leaflet-container path.leaflet-interactive[stroke="#fff"],
[data-bs-theme="dark"] .leaflet-container path.leaflet-interactive[stroke="#ffffff"] {
  stroke: #111827;
}
[data-bs-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.6);
}
[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-control-layers,
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip,
[data-bs-theme="dark"] .leaflet-tooltip {
  background: var(--dg-permukaan);
  color: var(--dg-teks);
  border-color: var(--dg-garis);
}
[data-bs-theme="dark"] .leaflet-bar a:hover {
  background: var(--dg-hover);
}
[data-bs-theme="dark"] .leaflet-tooltip-top:before { border-top-color: var(--dg-permukaan); }
[data-bs-theme="dark"] .leaflet-tooltip-bottom:before { border-bottom-color: var(--dg-permukaan); }
[data-bs-theme="dark"] .leaflet-tooltip-left:before { border-left-color: var(--dg-permukaan); }
[data-bs-theme="dark"] .leaflet-tooltip-right:before { border-right-color: var(--dg-permukaan); }
[data-bs-theme="dark"] .leaflet-container .leaflet-control-attribution {
  background: rgba(31, 41, 55, .8);
  color: var(--dg-redup);
}
[data-bs-theme="dark"] .leaflet-container .leaflet-control-attribution a,
[data-bs-theme="dark"] .leaflet-popup-content a {
  color: var(--tblr-link-color);
}

/* warna yang ditulis langsung di elemen halaman (style="background:#e0f2fe; color:#0369a1" dsb.): app.warna_inline di
   main.js memberi kelas pada latar hampir putih tak berwarna & teks sangat gelap; warna penanda (kuning, merah muda) tetap */
[data-bs-theme="dark"] .dg-latar-terang {
  background-color: var(--dg-blok) !important;
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .dg-teks-gelap {
  color: var(--dg-teks) !important;
}
/* Petunjuk tombol pintas di bawah tabel transaksi kasir (bj.kasir_keys) */
.kasir-petunjuk {
  padding: .4rem .6rem;
  border: 1px dashed var(--tblr-border-color, #d1d5db);
  border-radius: 6px;
  line-height: 1.9;
  color: var(--tblr-secondary, #6b7280);
}
.kasir-petunjuk b {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 .35rem;
  margin: 0 .1rem;
  font-size: .75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--tblr-body-color, #1f2937);
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #d1d5db);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* mode gelap: kotak cari w2ui saat fokus (bawaan w2ui putih, selektornya lebih spesifik) */
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all,
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all:focus {
  background-color: var(--dg-latar) !important;
  color: var(--dg-teks) !important;
  border-color: var(--dg-garis-isian) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all:focus {
  border-color: var(--tblr-primary) !important;
}
[data-bs-theme="dark"] .w2ui-grid .w2ui-grid-toolbar .w2ui-grid-search-input .w2ui-search-all::placeholder {
  color: #9ca3af !important;
}

/* mode gelap: logo di kepala panel menu HP ikut putih seperti logo header (navbar-brand-autodark) */
[data-bs-theme="dark"] .menu-hp-kepala .navbar-brand-image {
  filter: brightness(0) invert(1);
}

/* ===== DataTables (Pengguna, Level, Log, Tiket, ...) ===== */
.dataTables_wrapper .dataTables_processing {
  background: var(--dg-permukaan, #fff) !important;
  color: var(--dg-teks, inherit);
  border: 1px solid var(--dg-garis, #e5e7eb);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .12);
  height: auto;
  padding: .5rem 1rem;
}
[data-bs-theme="dark"] table.dataTable,
[data-bs-theme="dark"] table.dataTable tbody tr,
[data-bs-theme="dark"] table.dataTable tbody tr.odd,
[data-bs-theme="dark"] table.dataTable tbody tr.even,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
[data-bs-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: transparent !important;
  color: var(--dg-teks);
}
[data-bs-theme="dark"] table.dataTable tbody tr:hover,
[data-bs-theme="dark"] table.dataTable.hover tbody tr:hover,
[data-bs-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: var(--dg-hover) !important;
}
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td,
[data-bs-theme="dark"] table.dataTable tfoot th,
[data-bs-theme="dark"] table.dataTable tfoot td,
[data-bs-theme="dark"] table.dataTable.no-footer,
[data-bs-theme="dark"] table.dataTable tbody td,
[data-bs-theme="dark"] table.dataTable.row-border tbody td,
[data-bs-theme="dark"] table.dataTable.display tbody td {
  border-color: var(--dg-garis) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--dg-latar);
  color: var(--dg-teks);
  border: 1px solid var(--dg-garis-isian);
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--dg-redup) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dg-teks) !important;
  background: transparent !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dg-hover) !important;
  border: 1px solid var(--dg-garis) !important;
  color: var(--dg-teks) !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--dg-redup) !important;
  opacity: .5;
}