/* DataTables legacy — parity eproc25 (grid, sort icons, toolbar, pagination) */

.area-datatable table.datatable-legacy.border-double,
.eproc-dt-legacy-wrap table.datatable-legacy.border-double,
.vms-popup-datatable table.datatable-legacy.border-double {
    border-style: solid !important;
    border: 1px solid #ddd !important;
}

.area-datatable table.datatable-legacy,
.eproc-dt-legacy-wrap table.datatable-legacy,
.vms-popup-datatable table.datatable-legacy {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #ddd !important;
}

.area-datatable table.datatable-legacy th,
.area-datatable table.datatable-legacy td,
.eproc-dt-legacy-wrap table.datatable-legacy th,
.eproc-dt-legacy-wrap table.datatable-legacy td,
.vms-popup-datatable table.datatable-legacy th,
.vms-popup-datatable table.datatable-legacy td {
    border: 1px solid #ddd !important;
    padding: 8px 10px !important;
    vertical-align: middle;
}

.area-datatable table.datatable-legacy thead tr th:first-child,
.area-datatable table.datatable-legacy tbody tr td:first-child,
.eproc-dt-legacy-wrap table.datatable-legacy thead tr th:first-child,
.eproc-dt-legacy-wrap table.datatable-legacy tbody tr td:first-child,
.vms-popup-datatable table.datatable-legacy thead tr th:first-child,
.vms-popup-datatable table.datatable-legacy tbody tr td:first-child {
    border-left: 1px solid #ddd !important;
}

.area-datatable table.datatable-legacy thead tr th:last-child,
.area-datatable table.datatable-legacy tbody tr td:last-child,
.eproc-dt-legacy-wrap table.datatable-legacy thead tr th:last-child,
.eproc-dt-legacy-wrap table.datatable-legacy tbody tr td:last-child,
.vms-popup-datatable table.datatable-legacy thead tr th:last-child,
.vms-popup-datatable table.datatable-legacy tbody tr td:last-child {
    border-right: 1px solid #ddd !important;
}

.area-datatable table.datatable-legacy thead th,
.eproc-dt-legacy-wrap table.datatable-legacy thead th,
.vms-popup-datatable table.datatable-legacy thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    white-space: nowrap;
}

.area-datatable table.dataTable.display tbody tr:nth-child(odd),
.eproc-dt-legacy-wrap table.dataTable.display tbody tr:nth-child(odd),
.vms-popup-datatable table.dataTable.display tbody tr:nth-child(odd) {
    background-color: rgba(245, 245, 245, 0.6);
}

.area-datatable table.dataTable.display tbody tr:hover,
.eproc-dt-legacy-wrap table.dataTable.display tbody tr:hover,
.vms-popup-datatable table.dataTable.display tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.area-datatable table.dataTable tbody tr.row_selected td,
.eproc-dt-legacy-wrap table.dataTable tbody tr.row_selected td,
.vms-popup-datatable table.dataTable tbody tr.row_selected td {
    background-color: #b0bed9 !important;
}

/* Sorting icons — eproc25 PNG, bukan pseudo-element Bootstrap */
.area-datatable table.dataTable thead .sorting,
.area-datatable table.dataTable thead .sorting_asc,
.area-datatable table.dataTable thead .sorting_desc,
.area-datatable table.dataTable thead .sorting_asc_disabled,
.area-datatable table.dataTable thead .sorting_desc_disabled,
.eproc-dt-legacy-wrap table.dataTable thead .sorting,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc_disabled,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc_disabled,
.vms-popup-datatable table.dataTable thead .sorting,
.vms-popup-datatable table.dataTable thead .sorting_asc,
.vms-popup-datatable table.dataTable thead .sorting_desc,
.vms-popup-datatable table.dataTable thead .sorting_asc_disabled,
.vms-popup-datatable table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    padding-right: 26px !important;
    background-repeat: no-repeat;
    background-position: center right 8px;
    background-size: 19px 19px;
}

.area-datatable table.dataTable thead .sorting:before,
.area-datatable table.dataTable thead .sorting:after,
.area-datatable table.dataTable thead .sorting_asc:before,
.area-datatable table.dataTable thead .sorting_asc:after,
.area-datatable table.dataTable thead .sorting_desc:before,
.area-datatable table.dataTable thead .sorting_desc:after,
.eproc-dt-legacy-wrap table.dataTable thead .sorting:before,
.eproc-dt-legacy-wrap table.dataTable thead .sorting:after,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc:before,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc:after,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc:before,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc:after,
.vms-popup-datatable table.dataTable thead .sorting:before,
.vms-popup-datatable table.dataTable thead .sorting:after,
.vms-popup-datatable table.dataTable thead .sorting_asc:before,
.vms-popup-datatable table.dataTable thead .sorting_asc:after,
.vms-popup-datatable table.dataTable thead .sorting_desc:before,
.vms-popup-datatable table.dataTable thead .sorting_desc:after {
    display: none !important;
    content: none !important;
}

.area-datatable table.dataTable thead .sorting,
.eproc-dt-legacy-wrap table.dataTable thead .sorting,
.vms-popup-datatable table.dataTable thead .sorting {
    background-image: url('/assets/images/datatables/sort_both.png');
}

.area-datatable table.dataTable thead .sorting_asc,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc,
.vms-popup-datatable table.dataTable thead .sorting_asc {
    background-image: url('/assets/images/datatables/sort_asc.png');
}

.area-datatable table.dataTable thead .sorting_desc,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc,
.vms-popup-datatable table.dataTable thead .sorting_desc {
    background-image: url('/assets/images/datatables/sort_desc.png');
}

.area-datatable table.dataTable thead .sorting_asc_disabled,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_asc_disabled,
.vms-popup-datatable table.dataTable thead .sorting_asc_disabled {
    background-image: url('/assets/images/datatables/sort_asc_disabled.png');
}

.area-datatable table.dataTable thead .sorting_desc_disabled,
.eproc-dt-legacy-wrap table.dataTable thead .sorting_desc_disabled,
.vms-popup-datatable table.dataTable thead .sorting_desc_disabled {
    background-image: url('/assets/images/datatables/sort_desc_disabled.png');
}

/* Toolbar: length + search */
.area-datatable .dataTables_wrapper,
.eproc-dt-legacy-wrap .dataTables_wrapper,
.vms-popup-datatable .dataTables_wrapper {
    border: 1px solid #ddd;
    border-radius: 0.15rem;
    overflow: hidden;
}

.area-datatable .eproc-dt-toolbar,
.eproc-dt-legacy-wrap .eproc-dt-toolbar,
.vms-popup-datatable .eproc-dt-toolbar,
.vms-popup-datatable .vms-dt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.area-datatable .dataTables_length,
.eproc-dt-legacy-wrap .dataTables_length {
    float: none;
    margin: 0;
}

.area-datatable .dataTables_length label,
.eproc-dt-legacy-wrap .dataTables_length label {
    font-weight: 500;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.area-datatable .dataTables_length select,
.eproc-dt-legacy-wrap .dataTables_length select {
    border: 1px solid #d1d5db;
    border-radius: 0.35rem;
    padding: 0.25rem 0.5rem;
    min-width: 4.5rem;
}

.area-datatable .dataTables_filter,
.eproc-dt-legacy-wrap .dataTables_filter,
.vms-popup-datatable .dataTables_filter {
    float: none;
    text-align: right;
    margin: 0;
}

.area-datatable .dataTables_filter label,
.eproc-dt-legacy-wrap .dataTables_filter label,
.vms-popup-datatable .dataTables_filter label {
    font-weight: 500;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.area-datatable .dataTables_filter input,
.eproc-dt-legacy-wrap .dataTables_filter input,
.vms-popup-datatable .dataTables_filter input {
    border: 1px solid #d1d5db;
    border-radius: 0.35rem;
    padding: 0.35rem 0.65rem;
    min-width: 200px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.area-datatable .dataTables_filter input:focus,
.eproc-dt-legacy-wrap .dataTables_filter input:focus,
.vms-popup-datatable .dataTables_filter input:focus {
    border-color: #1e9ff2;
    box-shadow: 0 0 0 0.15rem rgba(30, 159, 242, 0.15);
}

.vms-popup-datatable .dataTables_length {
    display: none !important;
}

.vms-popup-datatable .eproc-dt-toolbar,
.vms-popup-datatable .vms-dt-toolbar {
    justify-content: flex-end;
}

/* Footer: info + pagination (DataTables legacy) */
.area-datatable .eproc-dt-footer,
.eproc-dt-legacy-wrap .eproc-dt-footer,
.vms-popup-datatable .eproc-dt-footer,
.vms-popup-datatable .vms-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0;
    padding: 0.65rem 0.5rem;
    border-top: 1px solid #eceeef;
}

.area-datatable .eproc-dt-paging,
.eproc-dt-legacy-wrap .eproc-dt-paging,
.vms-popup-datatable .eproc-dt-paging {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.area-datatable .eproc-dt-info,
.eproc-dt-legacy-wrap .eproc-dt-info,
.vms-popup-datatable .eproc-dt-info,
.area-datatable .dataTables_info,
.vms-popup-datatable .dataTables_info {
    float: none;
    padding: 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.area-datatable .dataTables_paginate,
.eproc-dt-legacy-wrap .dataTables_paginate,
.vms-popup-datatable .dataTables_paginate {
    float: none;
    margin: 0;
    text-align: right;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.area-datatable .dataTables_paginate span,
.eproc-dt-legacy-wrap .dataTables_paginate span,
.vms-popup-datatable .dataTables_paginate span {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.area-datatable .dataTables_paginate .paginate_button,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button,
.vms-popup-datatable .dataTables_paginate .paginate_button,
.area-datatable .dataTables_paginate span .paginate_button,
.eproc-dt-legacy-wrap .dataTables_paginate span .paginate_button,
.vms-popup-datatable .dataTables_paginate span .paginate_button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    min-width: 1.75rem;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 400;
}

.area-datatable .dataTables_paginate .paginate_button:hover,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button:hover,
.vms-popup-datatable .dataTables_paginate .paginate_button:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: none !important;
}

.area-datatable .dataTables_paginate .paginate_button.current,
.area-datatable .dataTables_paginate .paginate_button.current:hover,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button.current,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button.current:hover,
.vms-popup-datatable .dataTables_paginate .paginate_button.current,
.vms-popup-datatable .dataTables_paginate .paginate_button.current:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
    font-weight: 600;
    border: none !important;
}

.area-datatable .dataTables_paginate .paginate_button.disabled,
.area-datatable .dataTables_paginate .paginate_button.disabled:hover,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button.disabled,
.eproc-dt-legacy-wrap .dataTables_paginate .paginate_button.disabled:hover,
.vms-popup-datatable .dataTables_paginate .paginate_button.disabled,
.vms-popup-datatable .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.35;
    cursor: default;
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
}

.area-datatable .dataTables_paginate .ellipsis,
.eproc-dt-legacy-wrap .dataTables_paginate .ellipsis,
.vms-popup-datatable .dataTables_paginate .ellipsis {
    border: none !important;
    background: transparent !important;
    color: #9ca3af !important;
    padding: 0.25rem 0.15rem !important;
    pointer-events: none;
}

.area-datatable .dataTables_wrapper .dataTables_processing,
.eproc-dt-legacy-wrap .dataTables_wrapper .dataTables_processing {
    display: none !important;
    visibility: hidden !important;
}

/* Status aktif — parity eproc25 centang.png */
.area-datatable table.datatable-legacy td.text-center,
.eproc-dt-legacy-wrap table.datatable-legacy td.text-center,
.area-datatable table.datatable-legacy th.text-center,
.eproc-dt-legacy-wrap table.datatable-legacy th.text-center,
.area-datatable table.datatable-legacy td .eproc-status-cell,
.eproc-dt-legacy-wrap table.datatable-legacy td .eproc-status-cell {
    text-align: center !important;
}

.area-datatable table.datatable-legacy .eproc-status-cell,
.eproc-dt-legacy-wrap table.datatable-legacy .eproc-status-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
}

.area-datatable table.datatable-legacy img.eproc-status-centang,
.eproc-dt-legacy-wrap table.datatable-legacy img.eproc-status-centang {
    display: block;
    margin: 0 auto;
    border: 0;
}