/* Tabel */
.table {
    background-color: #fff;
    left:0;
    max-width: 100%;
    max-height: 70vh;    
    overflow: auto;  /* Menambahkan scroll horizontal */
    position: relative; /* Agar sticky bisa bekerja dengan baik */
    table-layout: auto; /* Menyesuaikan kolom dengan konten */
}

thead {
    background-color: #f4f4f4;
}

thead th {
    position: sticky;
    top: auto;
    z-index: 2; /* Pastikan header tetap di atas konten lainnya */
    text-align: left;
    font-weight: bold;
    padding: 10px;
    color: white;
    background: linear-gradient(to bottom, rgb(157, 87, 13), rgb(187, 135, 40), rgb(222, 140, 24));
    text-transform: capitalize;
    border-bottom: 1px solid #ccc;
}

/* Sticky untuk kolom pertama dan kedua */
td, th {
    position: relative;
}

/* Kolom pertama sticky */
.table td:nth-child(1), 
.table th:nth-child(1) {
    position: sticky;
    left: 0px;
    background-color: #fff;  /* Agar tetap memiliki latar belakang */
    z-index: 3; /* Agar tetap di atas konten lainnya */
}

/* Kolom kedua sticky */
.table td:nth-child(2), 
.table th:nth-child(2) {
    position: sticky;
    left: 35px;  /* Menyesuaikan dengan lebar kolom pertama */
    background-color: #fff;
    z-index: 4;
}

th, td {
    height: 31px;           /* Atur tinggi tetap */
    padding: 2px 5px;       /* Kurangi padding */
    line-height: 1;         /* Rapatkan baris teks */
    border: 1px solid silver;
    text-align: left;
    vertical-align: middle; /* Supaya teks tetap di tengah */
    font-size: 13px;        /* Ukuran font kecil juga bantu */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Baris ganjil dan genap */
tr:nth-child(even) {
    background-color: #fafafa;
}

tr:hover {
    background-color: #eef7ff;
}

/* Responsive (optional) */

.table-scroll-wrapper table {
    width: 100%;
    table-layout: fixed; /* Penting agar th dan td konsisten lebarnya */
    border-collapse: collapse;
}

.table-scroll-wrapper th,
.table-scroll-wrapper td {
    width: auto;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Styling untuk tombol pagination */
.pagination-button,
.pagination .current,
.pagination-button:disabled {
    width: 60px;          /* Tetapkan lebar tetap */
    display: inline-block;
    text-align: center;
    padding: 5px 0;       /* Sesuaikan padding atas-bawah saja */
    box-sizing: border-box;
}

/* CSS spesifik untuk .pagination .current */
.pagination .current {    
    font-size:16px;
    background: linear-gradient(to bottom, rgb(157, 87, 13), rgb(187, 135, 40), rgb(222, 140, 24));
    color:yellow;
}

.pagination-button:hover {
    background-color: #0056b3;
}

.pagination-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.pagination-button:focus {
    outline: none;
    color:yellow;
}

.disabled {
    color: #cccccc;
    cursor: not-allowed;
    padding: 5px 10px;
}

.pagination-wrapper {
    margin-top: auto;
    padding-top: 10px;
    background-color: #fff;
    text-align: center;
}