/* =========================================================
   J3LOGISTIK ORANGE & DARK GREEN THEME
   ========================================================= */

:root {
    /* Tone diturunkan atas permintaan client (1 Sep, contoh desain dari Syerill).
       Isian besar -- tombol, tab pill, pagination, badge solid -- pindah ke grafit
       supaya tabel yang padat tidak ramai. Oranye tetap ada, tapi cuma sebagai
       aksen tipis di teks dan garis tab aktif (lihat bagian 4 di bawah).
       Nilai lama: #FFA800 / #EE9D01 / #D68800 / #FFF4DE / #FFE2AF. */
    --primary: #2F333F;
    --primary-hover: #23262F;
    --primary-active: #191B22;
    --primary-light: #F1F2F5;
    --primary-border: #E3E5EC;
    --primary-ring: rgba(47, 51, 63, 0.12);

    /* Oranye yang sudah diturunkan. Bukan warna baru: ini ujung gelap dari
       palet brand yang lama, jadi masih satu keluarga dengan logonya. */
    --accent: #D68800;
    --accent-hover: #B87400;
    --accent-light: #FDF3E3;
    --accent-border: #F0DCBB;
}

/* =========================================================
   1. ORANGE THEME OVERRIDES (Ubah Biru/Primary jadi Oranye)
   ========================================================= */

/* Primary Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    opacity: 0.65;
}

/* Light Primary Buttons */
.btn-light-primary {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active,
.btn-light-primary.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-light-primary i,
.btn-light-primary .svg-icon {
    color: inherit !important;
}

.btn-light-primary:hover i,
.btn-light-primary:hover .svg-icon {
    color: #ffffff !important;
}

/* Outline Primary Buttons */
.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Text Primary */
.text-primary,
.text-primary * {
    color: var(--primary) !important;
}

.text-hover-primary:hover,
a.text-hover-primary:hover {
    color: var(--primary-hover) !important;
}

/* Badges & Labels Primary */
.badge-primary,
.label-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}

.badge-light-primary,
.label-light-primary {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary-border) !important;
    font-weight: 700 !important;
}

/* Background Primary */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-light-primary {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
}

/* Nav Tabs & Nav Pills */
.nav.nav-pills .nav-link.active,
.nav.nav-pills .show>.nav-link {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Nav Tabs Line (All Variants & States) */
.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line .nav-link.active,
.nav.nav-tabs.nav-tabs-line .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .show>.nav-link {
    border-bottom-color: var(--primary) !important;
    color: var(--primary) !important;
}

.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) .nav-text,
.nav.nav-tabs.nav-tabs-line .nav-link.active .nav-text,
.nav.nav-tabs.nav-tabs-line .show>.nav-link .nav-text,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link:hover:not(.disabled) .nav-text,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link.active .nav-text,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .show>.nav-link .nav-text {
    color: var(--primary) !important;
}

.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) .nav-icon i,
.nav.nav-tabs.nav-tabs-line .nav-link.active .nav-icon i,
.nav.nav-tabs.nav-tabs-line .show>.nav-link .nav-icon i,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link:hover:not(.disabled) .nav-icon i,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link.active .nav-icon i,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .show>.nav-link .nav-icon i,
.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) [class^="flaticon"],
.nav.nav-tabs.nav-tabs-line .nav-link.active [class^="flaticon"],
.nav.nav-tabs.nav-tabs-line .show>.nav-link [class^="flaticon"] {
    color: var(--primary) !important;
}

.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link:hover:not(.disabled) .nav-icon .svg-icon svg g [fill],
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link.active .nav-icon .svg-icon svg g [fill],
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .show>.nav-link .nav-icon .svg-icon svg g [fill] {
    fill: var(--primary) !important;
}

.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary {
    border-bottom-color: var(--primary-border) !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Form Controls & Select & Select2 Focus */
select,
.custom-select,
.ews-mp-input,
.cost-source-option,
.form-control {
    accent-color: var(--primary) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
select.ews-mp-input:focus,
select.cost-source-option:focus,
.ews-mp-input:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem var(--primary-ring) !important;
}

select option:checked,
select option:hover,
select option:focus,
select option:active,
.custom-select option:checked,
.custom-select option:hover,
.custom-select option:focus,
.custom-select option:active,
.ews-mp-input option:checked,
.ews-mp-input option:hover,
.ews-mp-input option:focus,
.ews-mp-input option:active,
select.cost-source-option option:checked,
select.cost-source-option option:hover,
select.cost-source-option option:focus,
select.cost-source-option option:active {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem var(--primary-ring) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Checkboxes & Radios */
.checkbox.checkbox-primary>input:checked~span,
.checkbox>input:checked~span {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.radio.radio-primary>input:checked~span,
.radio>input:checked~span {
    border-color: var(--primary) !important;
}

.radio.radio-primary>input:checked~span:after,
.radio>input:checked~span:after {
    background-color: var(--primary) !important;
}

/* Aside Menu Active Items */
.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link {
    background-color: var(--primary-light) !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link .menu-icon,
.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link .menu-text {
    color: var(--primary) !important;
}

.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-icon,
.aside-menu .menu-nav>.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-text {
    color: var(--primary) !important;
}

/* SVG Icons & Hover Buttons */
.svg-icon.svg-icon-primary svg path,
.svg-icon.svg-icon-primary svg polygon,
.svg-icon.svg-icon-primary svg rect {
    fill: var(--primary) !important;
}

/* All states of .btn-hover-primary & Action Gear/List Dropdowns */
.btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-primary:focus:not(.btn-text),
.btn.btn-hover-primary.focus:not(.btn-text),
.btn.btn-hover-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.btn.btn-hover-primary:not(:disabled):not(.disabled).active,
.show>.btn.btn-hover-primary.dropdown-toggle,
.show .btn.btn-hover-primary.btn-dropdown,
.show>.btn.btn-hover-primary,
.dropdown.show>.btn.btn-hover-primary,
.dropdown.show>.btn.btn-light,
.dropdown.show>.btn.btn-icon,
.dropdown.show>.btn,
.show>.btn.btn-light,
.btn.btn-icon.btn-light.btn-hover-primary:hover,
.btn.btn-icon.btn-light.btn-hover-primary:focus,
.btn.btn-icon.btn-light.btn-hover-primary:active,
.btn.btn-icon.btn-light.btn-hover-primary.active,
.show>.btn.btn-icon.btn-light.btn-hover-primary,
.dropdown.show>.btn.btn-icon.btn-light.btn-hover-primary,
.btn-hover-primary:hover,
.btn-hover-primary:focus,
.btn-hover-primary:active,
.btn-hover-primary.active,
.btn-hover-primary.focus,
.show>.btn-hover-primary,
.show>.btn-hover-primary.dropdown-toggle,
.dropdown.show>.btn-hover-primary,
.dropdown.show>.btn-light,
.dropdown.show>.btn-icon,
.btn-icon.btn-hover-primary:hover,
.btn-icon.btn-hover-primary:focus,
.btn-icon.btn-hover-primary:active,
.btn-icon.btn-hover-primary.active,
.show>.btn-icon.btn-hover-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-hover-primary:focus:not(.btn-text) i,
.btn.btn-hover-primary.focus:not(.btn-text) i,
.btn.btn-hover-primary:not(:disabled):not(.disabled):active:not(.btn-text) i,
.btn.btn-hover-primary:not(:disabled):not(.disabled).active i,
.show>.btn.btn-hover-primary.dropdown-toggle i,
.show .btn.btn-hover-primary.btn-dropdown i,
.show>.btn.btn-hover-primary i,
.dropdown.show>.btn.btn-hover-primary i,
.dropdown.show>.btn.btn-light i,
.dropdown.show>.btn.btn-icon i,
.dropdown.show>.btn i,
.btn.btn-icon.btn-light.btn-hover-primary:hover i,
.btn.btn-icon.btn-light.btn-hover-primary:focus i,
.btn.btn-icon.btn-light.btn-hover-primary:active i,
.btn.btn-icon.btn-light.btn-hover-primary.active i,
.show>.btn.btn-icon.btn-light.btn-hover-primary i,
.dropdown.show>.btn.btn-icon.btn-light.btn-hover-primary i,
.btn-hover-primary:hover i,
.btn-hover-primary:focus i,
.btn-hover-primary:active i,
.btn-hover-primary.active i,
.show>.btn-hover-primary i,
.dropdown.show>.btn-hover-primary i,
.dropdown.show>.btn-light i,
.dropdown.show>.btn-icon i,
.btn-hover-primary:hover .svg-icon,
.btn-hover-primary:focus .svg-icon,
.btn-hover-primary:active .svg-icon,
.btn-hover-primary.active .svg-icon,
.show>.btn-hover-primary .svg-icon,
.dropdown.show>.btn-hover-primary .svg-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* DataTables Sorting & Active Column Headers */
.dataTables_wrapper .dataTable th.sorting_asc,
.dataTables_wrapper .dataTable td.sorting_asc,
.dataTables_wrapper .dataTable th.sorting_desc,
.dataTables_wrapper .dataTable td.sorting_desc,
.dataTables_wrapper .dataTable thead th.sorting_asc,
.dataTables_wrapper .dataTable thead td.sorting_asc,
.dataTables_wrapper .dataTable thead th.sorting_desc,
.dataTables_wrapper .dataTable thead td.sorting_desc,
table.dataTable thead th.sorting_asc,
table.dataTable thead td.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting_desc,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
.table.table-head-custom thead th.sorting_asc,
.table.table-head-custom thead th.sorting_desc,
.table.table-head-custom thead tr th.sorting_asc,
.table.table-head-custom thead tr th.sorting_desc,
.table-head-custom thead th.sorting_asc,
.table-head-custom thead th.sorting_desc,
.table-head-custom thead tr th.sorting_asc,
.table-head-custom thead tr th.sorting_desc,
.datatable.datatable-default.datatable-head-custom>.datatable-table>.datatable-head .datatable-row>.datatable-cell.datatable-cell-sorted>span,
.datatable.datatable-default.datatable-head-custom>.datatable-table>.datatable-foot .datatable-row>.datatable-cell.datatable-cell-sorted>span {
    color: var(--primary) !important;
}

.dataTables_wrapper .dataTable th.sorting_asc:before,
.dataTables_wrapper .dataTable td.sorting_asc:before,
.dataTables_wrapper .dataTable th.sorting_asc:after,
.dataTables_wrapper .dataTable td.sorting_asc:after,
.dataTables_wrapper .dataTable th.sorting_desc:before,
.dataTables_wrapper .dataTable td.sorting_desc:before,
.dataTables_wrapper .dataTable th.sorting_desc:after,
.dataTables_wrapper .dataTable td.sorting_desc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
    color: var(--primary) !important;
    opacity: 1 !important;
}

/* SweetAlert2 Confirm Button Default */
.swal2-confirm.btn-primary,
.swal2-styled.swal2-confirm {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* =========================================================
   DROPDOWN MENUS & NAV-HOVERABLE & NAVI OVERRIDES
   ========================================================= */
.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link:focus,
.dropdown-menu .nav-link:active,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.nav.nav-hoverable .nav-link:hover,
.nav.nav-hoverable .nav-link:focus,
.nav.nav-hoverable .nav-link:active,
.nav.nav-hoverable .nav-item .nav-link:hover,
.nav.nav-hoverable .nav-item .nav-link:focus,
.nav.nav-hoverable .nav-item .nav-link:active,
.dropdown-menu .nav.nav-hoverable>.nav-item>.nav-link:hover {
    color: var(--primary) !important;
    background-color: var(--primary-light) !important;
}

.dropdown-menu .nav-link:hover .nav-text,
.dropdown-menu .nav-link:hover .nav-icon,
.dropdown-menu .nav-link:hover .nav-icon i,
.dropdown-menu .nav-link:hover i,
.dropdown-menu a:hover i,
.dropdown-menu a:hover span,
.dropdown-menu a:hover .nav-text,
.dropdown-menu a:hover .nav-icon i,
.nav.nav-hoverable .nav-link:hover .nav-text,
.nav.nav-hoverable .nav-link:hover .nav-icon,
.nav.nav-hoverable .nav-link:hover .nav-icon i,
.nav.nav-hoverable .nav-link:hover i,
.nav.nav-hoverable>.nav-item>.nav-link:hover .nav-icon i,
.nav.nav-hoverable>.nav-item>.nav-link:hover .nav-text {
    color: var(--primary) !important;
}

/* Metronic Navi component */
.navi .navi-item .navi-link:hover,
.navi .navi-item .navi-link:focus,
.navi .navi-item .navi-link.active,
.navi .navi-item .navi-link:hover .navi-text,
.navi .navi-item .navi-link:hover .navi-icon,
.navi .navi-item .navi-link:hover .navi-icon i,
.navi .navi-item .navi-link:hover .navi-arrow,
.navi .navi-item .navi-link.active .navi-text,
.navi .navi-item .navi-link.active .navi-icon,
.navi .navi-item .navi-link.active .navi-icon i,
.navi .navi-item .navi-link.active .navi-arrow {
    color: var(--primary) !important;
}

.navi .navi-item .navi-link:hover .navi-bullet .bullet,
.navi .navi-item .navi-link.active .navi-bullet .bullet {
    background-color: var(--primary) !important;
}

.navi .navi-item .navi-link:hover .navi-icon svg g [fill],
.navi .navi-item .navi-link.active .navi-icon svg g [fill] {
    fill: var(--primary) !important;
}


/* =========================================================
   2. DARK GREEN THEME (Penyeragaman Hijau Tua Anti-Silau)
   ========================================================= */
.text-success,
.text-success * {
    color: #087A55 !important;
}

.badge-light-success,
.label-light-success {
    background-color: #E8F7F0 !important;
    color: #087A55 !important;
    border: 1px solid #C3E6D5 !important;
    font-weight: 700 !important;
}

.badge-success,
.label-success {
    background-color: #087A55 !important;
    color: #ffffff !important;
    border: 1px solid #087A55 !important;
}

.bg-light-success {
    background-color: #E8F7F0 !important;
    color: #087A55 !important;
    border: 1px solid #C3E6D5 !important;
}

.btn-light-success {
    background-color: #E8F7F0 !important;
    color: #087A55 !important;
    border: 1px solid #C3E6D5 !important;
}

.btn-light-success:hover,
.btn-light-success:focus {
    background-color: #087A55 !important;
    color: #ffffff !important;
    border-color: #087A55 !important;
}

.btn-success {
    background-color: #087A55 !important;
    border-color: #087A55 !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #065F42 !important;
    border-color: #065F42 !important;
    color: #ffffff !important;
}

.cost-source-auto {
    background-color: #E8F7F0 !important;
    color: #087A55 !important;
    border: 1px solid #C3E6D5 !important;
    font-weight: 700 !important;
}

.bg-success-save {
    background-color: #E8F7F0 !important;
    border: 1px solid #087A55 !important;
    color: #087A55 !important;
}

.cost-source-manual {
    background-color: #ECEEF2;
    color: #5E6278;
}

.cost-source-option {
    background-color: #E8F1FB;
    color: #2563A5;
}

/* Common Layout Helpers */
div.dataTables_wrapper {
    width: 100% !important;
    margin: 0 auto;
}

.modal-full {
    max-width: 99%;
    margin-left: 2%;
}

/* =========================================================
   3. TONE DOWN BADGE (permintaan client 30 Agu: "yang berwarna
      agak tipisin saja warnanya")

      Badge solid diubah jadi pastel, mengikuti pola label-light-*
      yang sudah dipakai untuk hijau. Yang sudah lembut (Unpaid,
      Pending, Inactive) tidak disentuh, begitu juga oranye brand
      var(--primary) di sidebar dan tombol utama -- itu identitas, bukan
      status, dan client tidak memintanya diubah.
   ========================================================= */

/* Paid: sebelumnya hitam pekat, kontras paling tinggi di layar */
.badge-dark,
.label-dark {
    background-color: #EDEFF2 !important;
    color: #46515E !important;
    border: 1px solid #DCE1E7 !important;
    font-weight: 600 !important;
}

/* Warning solid -> amber pastel. Teksnya sengaja lebih pekat dari
   var(--primary) supaya tetap terbaca di atas latar terang. */
.badge-warning,
.label-warning {
    background-color: var(--primary-light) !important;
    color: #A8710B !important;
    border: 1px solid var(--primary-border) !important;
    font-weight: 600 !important;
}

.badge-danger,
.label-danger {
    background-color: #FBEDEB !important;
    color: #A6412F !important;
    border: 1px solid #F2D3CD !important;
    font-weight: 600 !important;
}

.badge-primary,
.label-primary {
    background-color: #E8F1FB !important;
    color: #2F5E96 !important;
    border: 1px solid #D0E1F4 !important;
    font-weight: 600 !important;
}

.badge-info,
.label-info {
    background-color: #E9F3F6 !important;
    color: #2C7386 !important;
    border: 1px solid #CDE4EA !important;
    font-weight: 600 !important;
}

.badge-secondary,
.label-secondary {
    background-color: #F1F3F6 !important;
    color: #5B6570 !important;
    border: 1px solid #E0E4E9 !important;
    font-weight: 600 !important;
}

/* Teks status oranye lepas (mis. link "Kirim", "Bad Request").
   Dibuat lebih redup tapi tetap terbaca; var(--primary) di atas putih
   terlalu terang sekaligus kontrasnya rendah. */
.text-warning,
.text-warning * {
    color: #B07C14 !important;
}

/* Badge di dalam tabel dibuat sedikit lebih ringan bobotnya supaya
   tidak menarik mata lebih dulu daripada angka di kolom sebelahnya. */
.table .badge,
.table .label {
    font-weight: 600 !important;
}


/* =========================================================
   4. AKSEN ORANYE (sisa dari tone-down 1 Sep)
   Grafit dipakai untuk isian; di sini oranye dipertahankan supaya penanda
   "sedang aktif" tetap kelihatan sekilas. Kalau semuanya jadi abu-abu, tab
   dan menu aktif nyaris tidak terbaca di tabel yang padat.
   ========================================================= */
.text-primary,
.text-primary * {
    color: var(--accent) !important;
}

.text-hover-primary:hover,
a.text-hover-primary:hover {
    color: var(--accent-hover) !important;
}

/* Tab aktif: garis bawah dan teksnya jadi penunjuk arah utama di EWS */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line .nav-link.active,
.nav.nav-tabs.nav-tabs-line .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-primary .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .show>.nav-link,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link:hover:not(.disabled),
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link.active,
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .show>.nav-link {
    border-bottom-color: var(--accent) !important;
    color: var(--accent) !important;
}

.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) .nav-text,
.nav.nav-tabs.nav-tabs-line .nav-link.active .nav-text,
.nav.nav-tabs.nav-tabs-line .show>.nav-link .nav-text,
.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) .nav-icon i,
.nav.nav-tabs.nav-tabs-line .nav-link.active .nav-icon i,
.nav.nav-tabs.nav-tabs-line .show>.nav-link .nav-icon i,
.nav.nav-tabs.nav-tabs-line .nav-link:hover:not(.disabled) [class^="flaticon"],
.nav.nav-tabs.nav-tabs-line .nav-link.active [class^="flaticon"],
.nav.nav-tabs.nav-tabs-line .show>.nav-link [class^="flaticon"] {
    color: var(--accent) !important;
}

/* Menu dropdown & Navi: hover/aktif tetap beraksen, latarnya yang ditipiskan */
.dropdown-menu .nav-link:hover,
.dropdown-menu .nav-link:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.nav.nav-hoverable .nav-link:hover,
.nav.nav-hoverable .nav-item .nav-link:hover {
    color: var(--accent) !important;
    background-color: var(--accent-light) !important;
}

.navi .navi-item .navi-link:hover,
.navi .navi-item .navi-link.active,
.navi .navi-item .navi-link:hover .navi-text,
.navi .navi-item .navi-link:hover .navi-icon i,
.navi .navi-item .navi-link.active .navi-text,
.navi .navi-item .navi-link.active .navi-icon i {
    color: var(--accent) !important;
}


/* =========================================================
   5. BOBOT HURUF (permintaan client 1 Sep: "jangan ada font yang bold")
   Metronic memakai tiga tingkat: 400 biasa, 700 bold, 800 bolder. Di tabel
   yang padat, 700 dan 800 bertebaran bikin hampir semua teks terlihat tebal
   sehingga tidak ada lagi yang menonjol -- justru terbaca berantakan.

   Semuanya diturunkan ke satu tingkat: 600. Cukup untuk membedakan judul dan
   angka dari teks biasa, tapi tidak lagi berat sebelah.

   Kalau masih terasa tebal, cukup ubah tiga angka 600 di bawah jadi 500 (atau
   400 kalau memang mau rata sama sekali) -- tidak perlu menyisir file lain.
   ========================================================= */
.font-weight-bolder,
.font-weight-bolder *,
.font-weight-bold,
.font-weight-bold * {
    font-weight: 600 !important;
}

b,
strong,
th,
.table thead th,
.dataTable thead th {
    font-weight: 600 !important;
}

h1, h2, h3, h4, h5, h6,
.card-label,
.modal-title {
    font-weight: 600 !important;
}