/* ============ DataTables toolbar layout & search ============ */
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.dataTables_wrapper .dataTables_filter input {
    width: 240px;
    max-width: 100%;
}

@media (max-width:576px) {

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
}

/* ============ Matikan kotak processing bawaan ============ */
div.dataTables_processing {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============ Skeleton loader ============ */
.dt-skeleton {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 50%, #f2f2f2 75%);
    background-size: 200% 100%;
    animation: dt-skel 1.2s ease-in-out infinite;
}

@keyframes dt-skel {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Tinggi sel saat skeleton */
table.dataTable tbody td {
    height: 25px;
    vertical-align: middle;/
}

/* Sembunyikan info, pagination (dan opsi: length) saat loading */
.dataTables_wrapper.dt-hide-footer .dataTables_info,
.dataTables_wrapper.dt-hide-footer .dataTables_paginate {
    display: none !important;
}

/* kalau mau dropdown 'Tampilkan ... data' ikut disembunyikan juga */
.dataTables_wrapper.dt-hide-footer .dataTables_length {
    display: none !important;
}