.dt-processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    width: auto;
    text-align: center;
    white-space: nowrap;
    z-index: 10;
}

div.dt-container,
.dataTables_wrapper,
.kt-scrollable-x-auto {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

div.dt-container .dt-layout-row {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem;
}

div.dt-container .dt-layout-row:has(table),
div.dt-container .dt-layout-cell.dt-layout-full,
div.dt-container .dt-layout-table {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.kt-scrollable-x-auto,
.dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

table.dataTable,
table.kt-table,
.kt-card-content table {
    width: 100% !important;
    min-width: 100% !important;
    display: table !important;
    border-collapse: collapse;
    table-layout: auto !important;
}

/* Pada Layar HP & Tablet (< 768px): Tabel memiliki lebar minimum dan bisa di-scroll horizontal */
@media (max-width: 768px) {
    table.dataTable,
    table.kt-table,
    .kt-card-content table {
        min-width: 750px !important;
    }
}

table.dataTable th,
table.kt-table th {
    white-space: nowrap !important;
    vertical-align: middle;
    vertical-align: middle !important;
    padding: 0.75rem 1.25rem 0.75rem 0.85rem !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

table.dataTable td,
table.kt-table td {
    vertical-align: middle;
    vertical-align: middle !important;
    padding: 0.75rem 0.85rem !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: nowrap !important;
}

table.dataTable th:first-child,
table.dataTable td:first-child,
table.kt-table th:first-child,
table.kt-table td:first-child {
    width: 60px !important;
    min-width: 60px !important;
    text-align: center !important;
}

/* Kolom Aksi Khusus */
table.dataTable th.w-\[70px\],
table.dataTable td.w-\[70px\],
table.kt-table th.w-\[70px\],
table.kt-table td.w-\[70px\],
table.dataTable td:has(> .btn-detail-sale),
table.dataTable td:has(> .kt-menu),
table.dataTable td:has(> .flex > .btn-detail-sale),
table.dataTable td:has(> .flex > .kt-btn-icon) {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    text-align: center !important;
}

table.dataTable td.w-\[70px\] .flex,
table.kt-table td.w-\[70px\] .flex,
table.dataTable td:has(> .flex > .btn-detail-sale) .flex,
table.dataTable td:has(> .flex > .kt-btn-icon) .flex {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

table.dataTable td .flex,
table.kt-table td .flex {
    min-width: max-content;
}

table.dataTable td .inline-flex,
table.kt-table td .inline-flex {
    min-width: max-content !important;
    width: max-content !important;
}

table.dataTable td .kt-badge,
table.dataTable td .badge,
table.dataTable td button,
table.dataTable td a.kt-btn,
table.dataTable td .kt-menu,
table.kt-badge,
.badge {
    white-space: nowrap !important;
}

table.dataTable th.text-center,
table.dataTable td.text-center,
table.kt-table th.text-center,
table.kt-table td.text-center {
    text-align: center !important;
}

table.dataTable > tbody > tr.odd > td.dt-empty,
table.dataTable > tbody > tr.even > td.dt-empty,
table.dataTable > tbody > tr > td.dataTables_empty,
table.dataTable > tbody > tr > td.dt-empty {
    text-align: center !important;
    font-weight: 500;
    padding: 2.5rem 1rem !important;
    white-space: normal !important;
}