/* https://www.tailwindtoolbox.com/components/responsive-table */
/*Overrides for Tailwind CSS */
table.dataTable{
    padding: 0;
    margin: 0;
}

/* Jika masih terlalu renggang, bisa juga coba ubah line-height */
.dataTables_scrollBody tbody td,
.dataTables_scrollHead thead th {
    line-height: 1.2 !important;
}

/* Tambah padding ke semua sel (td dan th) */
table.dataTable th,
table.dataTable td {
    /* padding-top: 0.75rem !important; */
    /* padding-bottom: 0.75rem !important; */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 12px;
    vertical-align: middle !important;
}

/*button*/
.dataTables_wrapper .dt-buttons{
    margin-left: 1.5rem;
}
.dataTables_wrapper .dt-buttons .dt-button{
    color: #4a5568;
    /*text-gray-700*/
    padding-left: 1rem;
    /*pl-4*/
    padding-right: 1rem;
    /*pl-4*/
    padding-top: .5rem;
    /*pl-2*/
    padding-bottom: .5rem;
    /*pl-2*/
    line-height: 1.25;
    /*leading-tight*/
    border-width: 1px;
    /*border-2*/
    border-radius: .25rem;
    border-color: #edf2f7;
    /*border-gray-200*/
    background-color: #edf2f7;
    /*bg-gray-200*/
}

/*Form fields*/
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
    color: #4a5568;
    /*text-gray-700*/
    padding-left: 1rem;
    /*pl-4*/
    padding-right: 1rem;
    /*pl-4*/
    padding-top: .5rem;
    /*pl-2*/
    padding-bottom: .5rem;
    /*pl-2*/
    line-height: 1.25;
    /*leading-tight*/
    border-width: 2px;
    /*border-2*/
    border-radius: .25rem;
    border-color: #edf2f7;
    /*border-gray-200*/
    background-color: #edf2f7;
    /*bg-gray-200*/
}

/*Row Hover*/
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #ebf4ff;
    /*bg-indigo-100*/
}

/*Pagination Buttons*/
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-weight: 700;
    /*font-bold*/
    border-radius: .25rem;
    /*rounded*/
    border: 1px solid transparent;
    /*border border-transparent*/
}

/*Pagination Buttons - Current selected */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    /*text-white*/
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    /*shadow*/
    font-weight: 700;
    /*font-bold*/
    border-radius: .25rem;
    /*rounded*/
    background: #667eea !important;
    /*bg-indigo-500*/
    border: 1px solid transparent;
    /*border border-transparent*/
}

/*Pagination Buttons - Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    /*text-white*/
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    /*shadow*/
    font-weight: 700;
    /*font-bold*/
    border-radius: .25rem;
    /*rounded*/
    background: #667eea !important;
    /*bg-indigo-500*/
    border: 1px solid transparent;
    /*border border-transparent*/
}

/*Add padding to bottom border */
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;
    /*border-b-1 border-gray-300*/
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/*Change colour of responsive icon*/
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    background-color: #667eea !important;
    /*bg-indigo-500*/
}

/* Ukuran font untuk semua kontrol */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_filter input,
/* .dataTables_wrapper select, */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dt-buttons .dt-button {
    margin-top: 2px !important;
    font-size: 12px !important;
    padding: 0.25rem 0.5rem !important;
}

/* KHUSUS SELECT: jangan terlalu kecil padding-nya */
.dataTables_wrapper select {
    font-size: 12px !important;
    padding: 0.25rem 1.5rem 0.25rem 0.75rem !important;
    /* kanan lebih besar utk ruang icon */
    line-height: 1.25 !important;
    background-color: #edf2f7;
    /* atau sesuai tema */
    border-radius: 0.25rem;
    border: 1px solid #e2e8f0;
    appearance: none;
    /* hilangkan style bawaan browser */
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23667eea' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

/* Scrollbar horizontal khusus DataTables scrollX */
.dataTables_scrollBody::-webkit-scrollbar {
    height: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #d0cece;
    border-radius: 5px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: #bdbcbc;
}
/* End Scrollbar horizontal khusus DataTables scrollX */

/* =====START DARK MODE DATATABLE=====*/
.dark table.dataTable {
    background-color: #1f2937;
    /* bg-gray-800 */
    color: #9ca3af !important;
    /* text-gray-300 */
}

.dark table.dataTable th,
.dark table.dataTable td {
    background-color: #1f2937 !important;
    /* bg-gray-800 */
    color: #9ca3af !important;
    /* text-gray-300 */
    border-color: #374151 !important;
    /* border-gray-700 */
}
.dark table.dataTable {
border-bottom: 1px solid #374151;
}

/* Header khusus */
.dark table.dataTable thead th {
    background-color: #111827 !important;
    /* bg-gray-900 */
    color: #9ca3af !important;
    /* text-gray-100 */
}

/* Striping baris */
.dark table.dataTable.stripe tbody tr.odd {
    background-color: #1f2937 !important;
    /* bg-gray-800 */
}

.dark table.dataTable.stripe tbody tr.even {
    background-color: #111827 !important;
    /* bg-gray-900 */
}

/* Hover row */
.dark table.dataTable tbody tr:hover {
    background-color: #374151 !important;
    /* bg-gray-700 */
}

/* Button datatables */
.dark .dt-button {
    background-color: #374151 !important;
    color: #9ca3af !important;
    border-color: #4b5563 !important;
}

.dark .dt-button:hover {
    background-color: #374151;
}

/* Dropdown, pagination, search input */
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #1f2937 !important;
    color: #9ca3af !important;
    border-color: #374151 !important;
}

/* Active page on pagination */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #374151 !important;
    color: #fff !important;
}

/* Wrapper teks dark mode */
.dark .dataTables_wrapper,
.dark .dataTables_wrapper label,
.dark .dataTables_wrapper .dataTables_info {
    color: #9ca3af !important;
    /* text-gray-300 */
}

/* Search input label */
.dark .dataTables_wrapper .dataTables_filter label {
    color: #9ca3af !important;
}

/* Length (Show X entries) */
.dark .dataTables_wrapper .dataTables_length label {
    color: #9ca3af !important;
}

/* Dark mode scrollbar for DataTables scrollX */
.dark .dataTables_scrollBody::-webkit-scrollbar {
    height: 10px;
}

.dark .dataTables_scrollBody::-webkit-scrollbar-track {
    background: #1f2937;
    /* Tailwind bg-gray-800 */
    border-radius: 5px;
}

.dark .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #6b7280;
    /* Tailwind gray-500 */
    border-radius: 5px;
}

.dark .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
    /* Tailwind gray-400 */
}
/* =====END DARK MODE DATATABLE=====*/