/* Styling Pagination Aktif */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #3b82f6 !important;
    color: #fff !important;
    border-radius: 9999px;
    font-size: 0.75rem; /* text-xs */
    padding: 0.25rem 0.75rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
}

/* Zebra stripe / table-striped */
#myTable tbody tr:nth-child(even) {
    background-color: #f9fafb; /* bg-gray-50 */
}
#myTable tbody tr:nth-child(odd) {
    background-color: #ffffff; /* bg-white */
}
#myTable tbody tr:hover {
    background-color: #f3f4f6; /* hover warna lebih terang */
}

/* Styling untuk modal DataTables responsive */
div.dtr-modal {
    padding: 0.5rem; /* lebih kecil */
}
.dtr-modal-close {
    font-size: 2rem !important;
    width: 50px !important;
    height: 50px !important;
    top: 10px !important;
    right: 10px !important;
    color: #ef4444 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.dtr-modal div.dtr-modal-display {
    border-radius: 0.5rem; /* lebih kecil */
    padding: 1rem; /* sebelumnya 1.5rem */
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
div.dtr-modal h2 {
    font-size: 1rem; /* text-base */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

/* Table detail compact */
table.dtr-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem; /* lebih rapat */
    font-size: 0.875rem; /* text-sm */
}
table.dtr-details tr {
    background: #f9fafb;
    border-radius: 0.375rem;
}
table.dtr-details td {
    padding: 0.5rem 0.75rem; /* lebih kecil */
    vertical-align: top;
}
table.dtr-details td:first-child {
    font-weight: 600;
    color: #374151;
    width: 40%; /* sedikit lebih lebar untuk label */
}
table.dtr-details td:last-child {
    color: #4b5563;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    content: "";
    position: absolute; /* biar bisa center vertikal */
    top: 50%; /* posisikan di tengah */
    left: 8px; /* jarak dari kiri */
    transform: translateY(-50%); /* benar-benar center */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #3b82f6; /* biru (Tailwind: blue-500) */
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;

}

/* Supaya td ada posisi relatif */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 28px; /* kasih space supaya teks tidak ketimpa bulatan */
}

/* Jika row sedang terbuka (expanded), ubah warna bulatan */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    background-color: #10b981; /* hijau (Tailwind: green-500) */
    transform: translateY(-50%) scale(1.2); /* tetap center + lebih besar */
    font-size: 14px !important;
    display: flex;
    justify-content: center;
    align-items: center;

}