@import url('https://fonts.cdnfonts.com/css/arial-mono-mt-pro');

/* ============================================================================
 * SECTION: Form controls + card overrides (variant: bluelight, greylight,
 * readonly, span height; spinner removal Webkit + Firefox)
 * ============================================================================ */
.plast > p:last-child {
	margin-bottom:0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.card-list .card:first-child {
    margin-top: 0px;
}
.card-header,.form-control {
    border-color: #c5c5c5;
}
.form-control.form-control-span {
    height: auto !important;
    padding-bottom: 0.6rem;
    min-height: 3rem;
}
.form-control-bluelight {
    background-color: #edf6ff;
}
.form-control-greylight {
    background-color: #f3f3f3;
}
.form-control.form-readonly {
    background-color: #fff0f0;
}
.form-control-td {
    height : calc(1.1em + 1.3rem + 2px);
}
.btn-space .space  {
    margin-bottom:0.5rem;
}
.btn-space .space:last-child {
    margin-bottom:0;
}

.card-space .card {
    margin-bottom:1rem;
}
.card-space .card:last-child {
    margin-bottom:0;
}
.card.card-custom>.card-header .card-title, .card.card-custom>.card-header .card-title .card-label {
    font-size: 1.5rem;
    font-weight: 600;
}
.card.card-custom>.card-header .card-title.is-invalid, .card.card-custom>.card-header .card-title .card-label.is-invalid {
    color: #F64E60 !important;
}
.card.card-custom > .card-header.is-invalid {
    border-color: #F64E60 !important;;
}
.card-custom-border {
    border: 1px solid #E4E6EF !important;
}
.form-control.form-control-span {
    height: auto !important;
    padding-bottom: 0.6rem;
    min-height:3rem;
}
.form-control.form-control-span.form-control-sm {
    height: auto !important;
    padding-top: 0.4rem;
    padding-bottom: 0.3rem;
    min-height:1.9rem;
    font-size: 0.925rem;
}
.custom-select.form-control-sm {
    height: auto !important;
    padding-top: 0.4rem;
    padding-bottom: 0.3rem;
    min-height:1.9rem;
    font-size: 0.925rem;
}
.form-control.form-control-greylight {
    background-color: #f3f3f3;
}
.form-control.form-readonly {
    background-color: #fff0f0;
}
/* ============================================================================
 * SECTION: Toast position + brand logo + text utility (texttoupper)
 * ============================================================================ */
.toast-top-center {
    margin-top:60px;
}
.texttoupper {
    text-transform : uppercase !important;
}
.text-success {
    background-color: #e0fffe!important;
    border-color: #1bc5bd!important;
}
.brand .brand-logo {
    margin: auto;
    max-width: 100%;
    margin-left: 0px;
    padding-top: 0px;
}
/* ============================================================================
 * SECTION: Tables — header/body, sort indicators (csesort, thasc, thdesc),
 * special cell types (date, ip, status, checkbox, btn-td, total row)
 * ============================================================================ */
.table-sm thead th, .table-sm thead td {
    font-size : small;
}
.table-sm tbody th, .table-sm tbody td {
    font-size : small;
}
.table .title-td {
    font-weight:500;
    background-color: #fbfbfb!important;
    width: 12rem;
    color: #000;
}
.table-bordered th,
.table-bordered td {
    border-color: #e9e9e9 !important;
}
.table-bordered th.tdwrap, .table-bordered td.tdwrap {
    width: 300px;
    word-break: break-all;
}
.ja_wrap.ja_wrap_black {
    z-index: 98;   
}
.globss .input-group-prepend .input-group-text
,.detss .input-group-prepend .input-group-text {
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.input-group-text {
    border-color: #c5c5c5;
}
.input-daterange .input-group-append .input-group-text {
    border:1px solid #c5c5c5;
}
.input-daterange.is-invalid > input
,.input-group.is-invalid > input
,.input-group.is-invalid > select
,.input-daterange.is-invalid .input-group-text {
    border: 1px solid #F64E60;
}
.input-daterange.is-invalid > .form-control {
    border-color: #F64E60;
    padding-right: calc(1.5em + 1.3rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F64E60' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F64E60' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.325rem) center;
    background-size: calc(0.75em + 0.65rem) calc(0.75em + 0.65rem);
}
.input-group-cenpend {
    margin-left: -1px;
    margin-right: -1px;
    display: flex;
}
.input-group-sm > .input-group-cenpend > .input-group-text,
.input-group-sm > .input-group-cenpend > .btn {
  padding: 0.55rem 0.75rem;
  font-size: 0.925rem;
  line-height: 1.35;
  border-radius: 0.28rem;
}
.input-group-cenpend .input-group-text {
    border-radius: 0;
}
.dropdown-item {
    border-bottom:1px solid #efefef;
    padding: .35rem 1.25rem;
    font-size: 0.85rem;
}
.dropdown-item:last-child {
    border-bottom:none;
}
.btn-group>.btn:not(:last-child) {
    margin-right:2px;
}
.btn-group>.dropdown>.btn:first-child {
	border-top-right-radius:0;
	border-bottom-right-radius:0
}
.table {
	margin-bottom:0px;
}
.table-wauto {
	width:auto;
}
.table.table-white td {
    background-color: #fff;
}
.table th {
    background-color: #fbfbfb;
}
.table tr.td-green td {
    background-color: #e5ffed;
}
.table thead th {
	vertical-align: top;
}
.table>tbody>tr:hover>td {
	background-color: #fffeef;
}
.tabtrnohover>tbody>tr:hover>td {
	background-color: inherit;
}
.table>tbody>tr>td:hover {
	background-color: #fffeef !important;
}
.table .title-td {
	width:180px;
	background:#fffaeb;
}
.table>thead>tr>th.thdesc,
.table>thead>tr>th.thasc {
	background-color:#e0fcff;
}
.table>thead>tr>th.thdesc{
	color:#8c00ff;
}
.table>thead>tr>th.thasc {
	color:#0bb7af;
}
.table th.thasc::after {
	font-family: 'Font Awesome 5 Free';
	content: "\00a0 \f161";
	font-weight: 900;
	color:#0bb7af;
}
.table th.thdesc::after {
	font-family: 'Font Awesome 5 Free';
	content: "\00a0 \f160";
	font-weight: 900;
	color:#8c00ff;
}
.table>thead>tr>th.hascheckbox {
    width: 20px;
}
.table th.hascheckbox {
	padding-top: 1rem;
}
.table td.hascheckbox {
	padding-top: 0.8rem;
}
.table .detonly {
	width:4rem;
}
.table .colcheckbox {
	width:20px;
}
.table .staonly {
	width:8.5rem;
}
.table .dateonly {
	width:12rem;
}
.table .dtionly {
	width:12rem;
}
.table .iponly {
	width: 11rem;
}
.table td.iponly {
	font-family: 'Courier New', monospace;
	font-size: 0.85rem;
}
.table .inputrp {
	width:16rem;
}
.table tr.total td {
	background-color: #e0fcff;
}
.table .csesort {
    cursor:pointer;
}
.table td.input-td {
	padding: 0.3rem;
}
.table td.hasin {
	padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.table td.btn-td {
	padding-top: 0.6rem;
    padding-bottom: 0.5rem;
}
.table-sm td.btn-td {
	padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.table .btn-td .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem 0.2rem;
}
div.btn-td .btn {
    width: 100% !important;
    padding: 0.6rem;
}
/* ============================================================================
 * SECTION: Button variants (light-* colors, ssm/sm size, cursor states)
 * ============================================================================ */
.btn.btn-light-info {
    border-color: #dccaff;
}
.btn.btn-light-danger {
    border-color: #ffc1c8;
}
.btn.btn-light-primary {
    border-color: #c1dcf7;
}
.btn.btn-light-success {
    border-color: #93ddda;
}
.btn.btn-light-dark {
    border-color: #bcc0d2;
}
.table td.tdpad {
    padding: 0px;
}
.table-info th, .table-info td, .table-info thead th, .table-info tbody + tbody {
    border-color: #eee6ff;
    background: #eee6ff !important;
}
.btn-ssm {
    font-size: 9px;
    padding: 3px 10px 2px;
    margin-top: 5px;
    margin-left: 5px;
}
.btn-cursor-default {
    cursor: default !important;
}
.btn-cursor-text {
    cursor: text !important;
}
/* ============================================================================
 * SECTION: Date/time pickers + Select2 dropdown overrides
 * ============================================================================ */
.daterangepicker {
    z-index:99;
}
/* Tombol aksi yang dinonaktifkan dibuat SATU rupa, apa pun warna aslinya:
 * di kolom aksi tombol-tombol ini berdampingan, jadi kalau yang satu jadi gelap
 * dan yang lain cuma memudar, keadaan "tidak bisa dipakai" terbaca sebagai dua
 * hal berbeda. Alasan tiap tombol mati disebutkan lewat tooltip-nya. */
.btn.btn-danger.disabled, .btn.btn-danger:disabled,
.btn.btn-warning.disabled, .btn.btn-warning:disabled {
    color: #ffffff;
    background-color: #342728;
    border-color: #1c1616;
}
.select2-container ul.select2-selection__rendered li:first-child .select2-search__field {
    margin-top: 0px !important;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    border: 1px solid #c5c5c5;
}
.select2-container--default .select2-selection--single.is-invalid, .select2-container--default .select2-selection--multiple.is-invalid {
    border: 1px solid #F64E60;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff192;
}
.input-group > .select2-container--default {
    width: auto;
    flex: 1 1 auto;
}

.searchview .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0.45rem 3rem 0.45rem 1rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #fff192;
}
.input-group > .select2-container--default .select2-selection--single {
    height: 100%;
    line-height: inherit;
    border-radius: 0;
}
/* ============================================================================
 * SECTION: Border + utility (clickcheckbox, jAlert body, text-muted, font-weight)
 * ============================================================================ */
.border {
    border-color: #c5c5c5 !important;
}
.border-top {
    border-top:1px solid #c5c5c5 !important;
}
.clickcheckboxview {
    cursor: pointer;
}
.ja_body { background-color: #f6f6f6 !important; overflow-x: hidden; }
/* Cegah Bootstrap .row negative margin (-15px) overflow modal saat size=full.
   .blokspinner / .card-space adalah pembungkus form di adythree pattern. */
.jAlert .ja_body > .blokspinner,
.jAlert .ja_body > .card-space { padding-left: 0.5rem; padding-right: 0.5rem; }
/* Override Metronic .text-muted — default #b5b5c3 terlalu pucat, susah dibaca.
   Pakai #7e8299 (75% gray) — masih subtle tapi readable. */
.text-muted { color: #7e8299 !important; }

.font-weight-bold-600 {
    font-weight: 600 !important;
}
.datepicker tbody tr > td.day.range {
    background-color: #fffedf !important;
}
.ddformsubmit .form-group label {
    font-weight: 600 !important;
    margin-left: 0.3rem;
}
/* ============================================================================
 * SECTION: Background colors (bg-dark/green/blue/grey-light) + form group
 * (form-text-bot, group-sm, custom file label, label, img/chart border)
 * ============================================================================ */
.bg-dark {
    background-color: #053b69 !important;
}
.bg-green-light {
    background-color: #c0ffd7 !important;
}
.bg-green-light .card-header {
    border-color :#1e7243;
}
.border-top-0 > td , .border-top-0 > th {
    border-top: 0 !important;
}
.bg-blue-light {
    background-color: #dcefff !important;
}
.bg-grey-light {
    background-color: #e9e9e9 !important;
}
.form-group .form-text-bot {
    font-size:0.8rem;
    margin:4px 0 0 4px;
}
.form-group-sm {
    margin-bottom : 0.5rem !important;
}
.form-group-none {
    margin-bottom : 0 !important;
}
.titlepad-td {
    padding-top: 1.4rem !important;
}
.custom-file-label {
    margin-left: 0 !important;
}
.custom-file-coninp {
    margin-top: 1rem !important;
}
.custom-file-img {
    max-width: 100%;
    width: 100%;
}
.card-custom-border {
    border: 1px solid #E4E6EF !important;
}
.user_badge .label {
    height: 25px;
}
.label {
    line-height:0px;
}
.img-border {
    border: 1px solid #E4E6EF !important;
    border-radius: 0.42rem;
    padding: 0.42rem;

}
.chart-border {
    border: 1px solid #E4E6EF !important;
    border-radius: 0.42rem;
    padding: 0.42rem;
}
.daterangepicker td.disabled, .daterangepicker option.disabled,
.datepicker tbody tr > td.disabled {
    background-color: #fff2f2;
    border-radius:0px;
    text-decoration:line-through;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    min-height:2.9rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0.32rem 1rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: #fff59c;
}
.select2-container--default .is-invalid {
    border-color: #F64E60;
}
.table td {
    font-family: arial;
}
.table-mono th,
.table-mono td {
    font-family: monospace;
}
.font-mono {
    font-family: monospace !important;
}
.form-textarea {
    height: auto !important;
    min-height: calc(1.5em + 1.3rem + 2px);
}
.alert.alert-sm {
    padding: 1rem;
}
.btn-status {
    padding: 0.35rem 1.75rem 0.35rem;
    font-size:0.85rem;
}
.btn-sm, .btn-group-sm > .btn {
    padding: 0.65rem 0.75rem 0.55rem;
}
.datepicker-inline {
    width: 100%;
}
.datepicker table {
    width: 100%;
}
.datepicker tbody tr > td.day.range {
    background-color: #fffedf !important;
}
/* ============================================================================
 * SECTION: Dropdown menu variants (danger, dark) + row layout helpers
 * (row-no-padding, row-full-height, col-stretch, row-col-separator)
 * ============================================================================ */
.dropdown-menu.dropdown-menu-danger {
    background-color: #ffdee1;
}
.dropdown-menu.dropdown-menu-dark {
    background-color: #181C32;
}
.dropdown-menu.dropdown-menu-dark a {
    color: #ffffff;
}
.dropdown-menu.dropdown-menu-dark a:hover {
    background-color: #3a3737;
}
.dropdown-menu.dropdown-menu-dark a:focus {
    background-color: #3b3939;
}

.row.row-no-padding {
    margin-left: 0;
    margin-right: 0; 
}
.row.row-no-padding > div {
    padding-left: 0;
    padding-right: 0;
}
  
.row.row-full-height {
    height: 100%;
}
  
.row .col-stretch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; 
}
  
.row[class*="row-col-separator-"] > div {
    border-bottom: 1px solid #ebedf2; 
}
.row[class*="row-col-separator-"] > div:last-child {
    border-bottom: 0; 
} 
@media (min-width: 1px) {
    .row.row-col-separator-xs > div {
      border-bottom: 0;
      border-right: 1px solid #ebedf2;
    }
    .row.row-col-separator-xs > div:last-child {
        border-right: 0;
    } 
}
  
@media (min-width: 577px) {
    .row.row-col-separator-sm > div {
        border-bottom: 0;
        border-right: 1px solid #ebedf2;
    }
    .row.row-col-separator-sm > div:last-child {
        border-right: 0; 
    } 
}
  
@media (min-width: 769px) {
    .row.row-col-separator-md > div {
        border-bottom: 0;
        border-right: 1px solid #ebedf2;
    }
    .row.row-col-separator-md > div:last-child {
        border-right: 0;
    }
}
  
@media (min-width: 1025px) {
    .row.row-col-separator-lg > div {
        border-bottom: 0;
        border-right: 1px solid #ebedf2;
    }
    .row.row-col-separator-lg > div:last-child {
        border-right: 0;
    }
}
  
@media (min-width: 1400px) {
    .row.row-col-separator-xl > div {
        border-bottom: 0;
        border-right: 1px solid #ebedf2;
    }
    .row.row-col-separator-xl > div:last-child {
        border-right: 0; 
    } 
}
/* ============================================================================
 * SECTION: Third-party plugin overrides — IntlTelInput (.iti), zoom image,
 * table-info, FullCalendar (.fc-*)
 * ============================================================================ */
.iti {
    width: 100%;
}
.ddzoomimg {
    cursor:pointer;   
}
.table-info th, .table-info td, .table-info thead th, .table-info tbody + tbody {
    border-color: #c2a4fd;
    background: #c2a4fd !important;
}
.select2-selection__choice__remove {
    margin-top:4px;
}
.fc-unthemed td.fc-today {
    background: rgb(255 70 139 / 28%)
}
.fc-unthemed .fc-toolbar .fc-button {
    background: rgb(255 70 139 / 28%);
    color: #222;
}
.fc-unthemed .fc-toolbar .fc-button .fc-icon {
    color: #222;
}
.fc-unthemed .fc-more {
    color:#f3345e;
}
/* Tooltip wrap — supaya title panjang auto-multiline, tidak overflow horizontal.
   Default Bootstrap tooltip max-width 200px, kita tingkatkan + force word-wrap
   biar long content (mis. ID + nama panjang) tetap readable. */
.tooltip-inner {
    max-width: 320px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    text-align: left;
    line-height: 1.4;
}

/* ============================================================================
 * SECTION: Split icon-text button — opt-in pattern
 * `.btn-split-icon` membagi button jadi 2 segment:
 *   - Icon segment kiri (background tint sedikit lebih gelap)
 *   - Text segment kanan
 *   - Divider tipis vertikal di antara
 * Auto-kontras: dark base buttons (danger/dark/info/primary/success) pakai
 * white divider; light base (light/warning/secondary) pakai dark divider.
 * Spec: 2026-05-19. Convention doc: dd.data/docs/UI_BUTTON_CONVENTION.md
 * ============================================================================ */
.btn.btn-split-icon {
    padding: 0;
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
}
.btn.btn-split-icon > i:first-child {
    padding: 0.65rem 0.85rem;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    line-height: 1;
    background-color: rgba(0, 0, 0, 0.08);
}
.btn.btn-split-icon > span,
.btn.btn-split-icon > .btn-label {
    padding: 0.65rem 1rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-sm.btn-split-icon > i:first-child {
    padding: 0.42rem 0.6rem;
}
.btn-sm.btn-split-icon > span,
.btn-sm.btn-split-icon > .btn-label {
    padding: 0.42rem 0.8rem;
}
/* Light base buttons → divider hitam transparan + icon bg lebih gelap */
.btn-light.btn-split-icon > i:first-child,
.btn-light-primary.btn-split-icon > i:first-child,
.btn-light-success.btn-split-icon > i:first-child,
.btn-light-danger.btn-split-icon > i:first-child,
.btn-light-info.btn-split-icon > i:first-child,
.btn-light-warning.btn-split-icon > i:first-child,
.btn-warning.btn-split-icon > i:first-child,
.btn-secondary.btn-split-icon > i:first-child,
.btn-yellow.btn-split-icon > i:first-child {
    border-right-color: rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.06);
}

/* ============================================================================
 * SECTION: Split icon-text label — same pattern as btn-split-icon untuk pill/label
 * Pakai untuk badge yang punya icon + text (mis. ⭐ MASTER, badge premium, dll.)
 * ============================================================================ */
.label.label-split-icon {
    padding: 0 !important;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
}
.label.label-split-icon > i:first-child,
.label.label-split-icon > .label-icon {
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 0.95rem;
    line-height: 1;
}
.label.label-split-icon > span:last-child,
.label.label-split-icon > .label-text {
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* Light base labels → divider hitam transparan */
.label-light-dark.label-split-icon > i:first-child,
.label-light-dark.label-split-icon > .label-icon,
.label-light-primary.label-split-icon > i:first-child,
.label-light-primary.label-split-icon > .label-icon,
.label-light-info.label-split-icon > i:first-child,
.label-light-info.label-split-icon > .label-icon,
.label-warning.label-split-icon > i:first-child,
.label-warning.label-split-icon > .label-icon {
    border-right-color: rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 0, 0, 0.06);
}

/* ============================================================================
 * SECTION: Dropdown — enhanced for icon+text standardization
 *   - Standardize font size + icon size dropdown-item
 *   - Pertegas dropdown-divider (lebih visible)
 * ============================================================================ */
.dropdown-menu .dropdown-item {
    font-size: 0.925rem;
    padding: 0.55rem 1rem;
}
.dropdown-menu .dropdown-item > i:first-child {
    font-size: 1.05rem;
    line-height: 1;
    width: 1.4rem;
    text-align: center;
    margin-right: 0.75rem;
}
.dropdown-menu .dropdown-divider {
    border-top: 1px solid #d6d8e0;
    margin: 0.5rem 0;
}

/* ============================================================================
 * SECTION: Filter row height standardization
 * Selaras tinggi antara input-group-text, form-control, custom-select, label
 * pill (label-lg/label-inline), dan btn-sm dalam satu baris filter/toolbar.
 * Default Bootstrap sm = ~31px → semua control menyesuaikan ke baseline ini.
 * Spec: 2026-05-19. Convention doc: dd.data/docs/UI_BUTTON_CONVENTION.md
 * ============================================================================ */
/* Override Metronic's fixed `.label { height: 20px }` / `.label-sm { height: 16px }` /
 * `.label-lg { height: 24px }` agar label-inline ikut tinggi form control.
 * !important diperlukan karena Metronic set `height` literal di selector dengan
 * specificity sama (0,2,0). Spec dimanual-tune via DevTools 2026-05-19. */
.label.label-inline {
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    height: auto !important;
}
/* Default label-inline match form-control default height ~38px */
.label.label-inline:not(.label-lg):not(.label-sm) {
    min-height: calc(2em + 0.75rem + 2px) !important;
    font-size: 1rem;
    padding: 0.4rem 1.7rem;
}
/* label-inline.label-sm match form-control-sm + input-group-sm height ~31px */
.label.label-inline.label-sm {
    min-height: calc(2em + 0.5rem + 2px) !important;
    font-size: 0.875rem;
    padding: 0.3rem 1.3rem;
}
/* label-inline.label-lg match form-control-lg + input-group-lg height ~46px */
.label.label-inline.label-lg {
    min-height: calc(2em + 1rem + 2px) !important;
    font-size: 1.08rem;
    padding: 0.5rem 2rem;
}

/* Tabel: semua row align ke top supaya konten multi-line (mis. nama wrap 2 baris)
 * tidak bikin cell lain ke-center vertikal. */
.table tbody td {
    vertical-align: top !important;
}
/* Pengecualian untuk utilitas Metronic `.table-vertical-center`.
 *
 * Aturan di atas memakai !important, sedangkan `.table-vertical-center` milik
 * Metronic TIDAK — jadi utilitas itu selalu kalah dan praktis TIDAK PERNAH
 * bekerja di seluruh aplikasi, walau dipakai di 6 layar (validasi catat meter,
 * rekap catat meter, 3 layar loket, detail perangkat pengguna). Kegagalannya
 * senyap: tabelnya tetap tampil, hanya isinya menempel ke atas.
 *
 * Bukti bahwa ini pernah ditabrak lalu ditambal setengah jalan: ada <style>
 * `.vldf-tbl` di custmeter.validform.php yang menyalin aturan ini dengan
 * !important — tetapi tabelnya tidak pernah memakai class itu, jadi tambalannya
 * tidak menempel ke apa pun. Tambalan seperti itu tidak perlu lagi.
 *
 * Menang lewat SPESIFISITAS, bukan urutan: dua class (.table.table-vertical-center)
 * mengalahkan satu class (.table), jadi tetap benar walau file ini digabung/
 * diurut ulang oleh proses build. Layar yang tidak memakai utilitas ini sama
 * sekali tidak terpengaruh — rata-atas tetap perilaku bawaan. */
.table.table-vertical-center tbody td,
.table.table-vertical-center tbody th,
.table.table-vertical-center thead th {
    vertical-align: middle !important;
}
/* td yang berisi pill/label → padding kompak (3px) supaya tinggi cell ikut pill
 * (no extra whitespace di atas/bawah label). Plus opt-in class `.td-pill`
 * untuk fallback bila browser belum support :has(). */
.table tbody td.td-pill,
.table tbody td:has(> .label.label-inline) {
    padding: 3px 6px !important;
}
/* Reset label-inline di dalam <td> ke ukuran badge Metronic default (bukan toolbar-height).
 * Override diperlukan karena rule di atas bersifat global tapi hanya untuk konteks toolbar. */
td .label.label-inline {
    min-height: unset !important;
    height: auto !important;
    padding: 0.15rem 0.75rem !important;
    font-size: 0.8rem;
    line-height: 1.5;
}
td .label.label-inline.label-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.65rem !important;
}
/* Checkbox addon di dalam input-group — penanda yang MENYATU dengan isiannya
   (mis. "No. Seri tidak dapat dikonfirmasi" pada form Pelanggan).
   Tanpa ini kotak centang 24px berenang di dalam padding bawaan
   .input-group-text (0.65rem 1rem) sehingga terlihat melenceng ke kiri dan
   addon-nya jauh lebih lebar daripada isinya.
   Kelas OPT-IN (.dd-cbaddon) supaya addon lain di seluruh aplikasi tidak ikut
   berubah. */
.input-group > .input-group-prepend > .input-group-text.dd-cbaddon,
.input-group > .input-group-append > .input-group-text.dd-cbaddon {
    padding: 0 0.7rem;
    justify-content: center;
}
.input-group-text.dd-cbaddon > .checkbox {
    margin: 0;
}
/* Isian yang sedang dikunci karena "tidak dapat dikonfirmasi" — dibedakan
   supaya tak dikira sekadar belum diisi. */
.input-group > .form-control[readonly].dd-nafield {
    background-color: #F3F6F9;
}

/* Lencana ANGKA pada menu samping (mis. jumlah pengajuan menunggu persetujuan).
 *
 * 🔴 Sengaja TIDAK memakai `.label-inline` maupun `.label-pill`:
 *    - `.menu-label .label` di tema Metronic dirancang untuk TITIK 6px dan
 *      menyembunyikan teksnya (`text-indent:-9999px`), jadi angka di dalamnya
 *      hilang;
 *    - `.label.label-inline` di berkas ini memaksa `height:auto !important`
 *      (untuk label setinggi form control, Mei 2026) sehingga lencananya
 *      justru melar jadi kotak besar;
 *    - `.label.label-pill` bawaan Metronic berisi `border-radius:none` yang
 *      BUKAN nilai CSS sah, jadi ia tidak pernah berefek apa pun.
 *
 * Bentuknya mengikuti demo Metronic sendiri untuk lencana berangka
 * (`label label-rounded`): kotak membundar kecil, bukan lingkaran penuh.
 * Specificity (0,3,0) sengaja lebih tinggi dari kedua aturan yang bertabrakan
 * di atas supaya hasilnya tidak bergantung pada urutan berkas. */
.menu-label .label.ddmenu-count {
    text-indent: 0;
    position: static;
    width: auto;
    min-width: 20px;
    height: 18px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 0.42rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

/* ============================================================================
 * .dd-card-sm — KARTU RINGKAS, pasangan baku `table table-sm`.
 * ----------------------------------------------------------------------------
 * Bawaan Metronic memberi kartu jarak tepi yang murah hati: `.card-header`
 * 2rem/2.25rem dan `.card-body` 2.25rem. Untuk kartu berisi TABEL itu terlalu
 * lapang — judulnya menjorok jauh lebih dalam daripada kolom pertama tabelnya,
 * dan dua kartu bertumpuk terlihat berpinggiran berbeda.
 *
 * Sebelum ini pola ringkasnya diketik ulang tiap kali (`card-header px-5 py-3`
 * + `card-body p-5`), jadi cukup satu tempat lupa untuk membuatnya kembali
 * melar — dan salahnya tidak memunculkan galat apa pun, cuma terlihat "agak
 * beda". Dijadikan SATU kelas supaya benar-benar seragam:
 *
 * Susunan judulnya MENGIKUTI MARKUP METRONIC SENDIRI untuk kartu berjudul
 * dua baris (demo1 "Tasks Overview" / "Pending 10 tasks") — h3.card-title
 * flex-column berisi dua span — supaya jarak dan perataannya benar tanpa
 * aturan tambahan. Yang ditimpa di sini HANYA ukuran hurufnya:
 *
 *     <div class="card card-custom dd-card-sm">
 *         <div class="card-header">
 *             <h3 class="card-title align-items-start flex-column mb-0">
 *                 <span class="card-label font-weight-bolder text-dark">Judul</span>
 *                 <span class="dd-card-sub text-muted mt-1 font-weight-bold">keterangan</span>
 *             </h3>
 *             <div class="card-toolbar">
 *                 <!-- tombol toolbar pakai btn-xs: btn-sm setinggi judul dua
 *                      barisnya sendiri dan membuat header ringkas ini kembali
 *                      terlihat tinggi. Idiom yang sama dipakai tombol
 *                      "Detail Lainnya". -->
 *                 <button class="btn btn-xs btn-success font-size-xs font-weight-bold">...</button>
 *             </div>
 *         </div>
 *         <div class="card-body"><table class="table table-sm">...</table></div>
 *     </div>
 *
 * 🔴 Specificity sengaja 5 kelas (`.card.card-custom.dd-card-sm > .card-header
 *    .card-title .card-label`). Yang harus dikalahkan BUKAN Metronic (1,275rem)
 *    melainkan aturan MILIK BERKAS INI SENDIRI di bagian atas — ia menaikkan
 *    judul kartu ke 1,5rem dengan 4 kelas, dan itulah sebabnya judul kartu di
 *    sini terlihat jauh lebih besar daripada demo Metronic. Aturan ber-4-kelas
 *    tidak cukup: sama kuat berarti yang menang adalah yang ditulis belakangan,
 *    dan itu cara yang rapuh untuk menentukan tampilan. */
.card.card-custom.dd-card-sm > .card-header {
    padding: 0.75rem 1.25rem;
    min-height: 0;
}
.card.card-custom.dd-card-sm > .card-header .card-title {
    margin: 0;
}
.card.card-custom.dd-card-sm > .card-header .card-title,
.card.card-custom.dd-card-sm > .card-header .card-title .card-label {
    font-size: 1.1rem;
    line-height: 1.35;
}
/* Keterangan di BAWAH judul, bukan di sampingnya: kode pelanggan bukan bagian
 * dari nama daftarnya, dan disejajarkan ia terbaca seperti sambungan kalimat. */
.card.card-custom.dd-card-sm > .card-header .card-title .dd-card-sub {
    font-size: 0.9rem;
}
.card.card-custom.dd-card-sm > .card-body {
    padding: 1.25rem;
}
.card.card-custom.dd-card-sm > .card-footer {
    padding: 0.75rem 1.25rem;
}

/* ============================================================================
 * .btn-xs — UKURAN YANG TIDAK PERNAH ADA DI METRONIC.
 * ----------------------------------------------------------------------------
 * Metronic hanya memberi `.btn.btn-xs` aturan UKURAN IKON (`i { font-size:1rem }`)
 * dan bentuk kotak `.btn-icon.btn-xs` (24x24). Untuk tombol BERTEKS tidak ada
 * aturan padding sama sekali, jadi `btn-xs` diam-diam jatuh ke padding bawaan
 * `.btn` (0.65rem 1rem) — yaitu LEBIH BESAR daripada `btn-sm` (0.55rem 0.75rem),
 * kebalikan dari yang dijanjikan namanya. Tidak ada galat, tidak ada peringatan;
 * yang terjadi cuma tombol "kecil" yang ternyata paling besar di barisnya.
 *
 * Catatan di bagian .dd-card-sm di atas sudah menyarankan `btn-xs` untuk tombol
 * toolbar dengan alasan "btn-sm terlalu tinggi" — saran itu benar niatnya tapi
 * tidak pernah berlaku karena kelasnya kosong. Aturan di bawah membuatnya benar.
 *
 * Ukurannya diturunkan dari deret Metronic sendiri (lg 0.825/1.42, sm 0.55/0.75)
 * supaya proporsinya menyambung, bukan angka karangan.
 *
 * 🔴 `.btn-group-xs` SENGAJA TIDAK ikut didefinisikan. Kelas itu dipakai di
 *    hampir setiap baris daftar (tombol detail/ubah/hapus) di seluruh aplikasi;
 *    memberinya ukuran baru di sini akan mengubah ratusan halaman sekaligus
 *    dalam satu perubahan yang tidak diminta siapa pun. Kalau memang mau
 *    dikecilkan, itu keputusan tersendiri yang harus dilihat per halaman. */
.btn.btn-xs {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.35;
    border-radius: 0.42rem;
}

/* ============================================================================
 * .btn-group-xs — kelas kosong yang kedua.
 * ----------------------------------------------------------------------------
 * Sama seperti `.btn-xs` di atas: Metronic memberi aturan untuk `btn-group-sm`
 * dan `btn-group-lg`, tapi TIDAK untuk `btn-group-xs`. Bootstrap 4 juga tidak
 * (ukuran xs dihapus sejak BS4). Jadi 75 baris aksi di seluruh aplikasi yang
 * menulis `btn-group btn-group-xs` sebenarnya memakai padding tombol BAWAAN
 * (0.65rem 1rem) dengan ikon 1.3rem — tombol terbesar yang mungkin, di kolom
 * yang paling sempit. Tidak ada galat; namanya saja yang berbohong.
 *
 * Ukurannya disamakan dengan `.btn-xs` supaya tombol aksi di baris dan tombol
 * di toolbar kartu punya tinggi yang sama:
 *     .btn-xs        0.4rem  + teks 0.85rem × 1.35  ≈ 1,95rem
 *     .btn-group-xs  0.4rem  + ikon 1.1rem          ≈ 1,90rem
 *
 * `.btn-icon` disertakan terpisah karena ia mematok tinggi & lebar lewat
 * `calc()` sendiri — tanpa baris itu tombol ikon-kotak tetap besar sementara
 * tetangganya mengecil, dan bedanya hanya terlihat di halaman yang memakainya.
 *
 * Ikon dikecilkan ke 1.1rem, bukan dibiarkan 1.3rem: dengan padding sekecil ini
 * ikon 1.3rem hampir menyentuh tepi tombol. `padding-right` ikon tidak diatur
 * di sini — markup baris aksi sudah memakai `p-0` pada <i>-nya (54 dari 57
 * tempat), dan yang tiga sisanya memang tombol berteks yang butuh jarak itu. */
.btn-group-xs > .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.35;
    border-radius: 0.42rem;
}
.btn-group-xs > .btn i {
    font-size: 1.1rem;
}
.btn-group-xs > .btn.btn-icon {
    height: calc(1.35em + 0.8rem + 2px);
    width: calc(1.35em + 0.8rem + 2px);
}

/* ============================================================================
 * .sort-handle — pegangan geser baris pada tabel yang bisa diurutkan.
 * ----------------------------------------------------------------------------
 * Sebelumnya ikonnya `<i class="la la-bars">` tanpa warna apa pun, jadi ia
 * mewarisi warna teks tabel dan tampil sebagai tiga garis tipis abu-abu pucat —
 * tidak terbaca sebagai SESUATU YANG BISA DIPEGANG. Pemakai harus menebak bahwa
 * barisnya bisa digeser, dan tombol "Simpan Urutan" di atasnya tak pernah
 * menyala karena tak ada yang pernah menyeret apa pun.
 *
 * Diberi bentuk tombol (latar + sudut membulat) supaya terlihat sebagai
 * kendali, bukan hiasan; warnanya menguat saat disentuh kursor. Kursor `grab`
 * → `grabbing` mengikuti keadaan, sehingga umpan baliknya cocok dengan yang
 * sedang terjadi.
 *
 * Gaya ini dulu ditulis INLINE dan diulang di 8 berkas `.djax.act.php`. Cukup
 * satu tempat lupa untuk membuatnya berbeda sendiri, dan bedanya tidak
 * memunculkan galat apa pun — hanya satu halaman yang "terasa lain".
 *
 * 🔴 Perataan vertikal ditangani di SEL-nya (`align-middle` pada <td>), bukan di
 *    sini. Metronic memberi `.table td { vertical-align: top }`, dan pada baris
 *    yang tinggi (mis. Golongan Tarif yang memuat tabel tarif bertingkat di
 *    dalamnya) pegangannya menempel di tepi atas sementara isi barisnya
 *    terbentang jauh ke bawah. */
.sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.15rem;
    line-height: 1;
    color: #7E8299;
    background-color: #F3F6F9;
    border-radius: 0.42rem;
    cursor: grab;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.sort-handle:hover {
    color: #181C32;
    background-color: #E4E6EF;
}
.sort-handle:active {
    cursor: grabbing;
}