/* Gaya CSS untuk FREEZE TABLE yang Diperbaiki */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    position: relative;
    background-color: #fff;
    
    
}

/* Gaya Dasar Tabel */

th, td {
    border: 2px solid #ccc;
    text-align: center;
    padding: 8px;
    white-space: nowrap; /* Menjaga agar isi tidak memengaruhi lebar kolom */
    background-color: #fff;
    vertical-align: middle;

}


/* Sistem Z-index yang Terstruktur */
/*
Level 1: Body content (z-index: 1)
Level 2: Header utama (z-index: 10)
Level 3: Header tanggal (z-index: 20)
Level 4: Kolom beku (z-index: 30-39)
Level 5: Kolom beku header (z-index: 40-49)
*/

/* Header Utama */
.table-freeze thead th {
    position: sticky;
    top: 0;
    z-index: 40; /* Level 5 - lebih tinggi dari kolom beku */
    background-color: #f8f9fa;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Kolom Beko Utama */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 30;
    min-width: 50px; /* Lebar minimum kolom */
     background-color: white;
    border-right: 1px solid #ccc !important; /* Garis kanan yang konsisten */
    box-shadow: none; /* Hapus shadow jika tidak diperlukan */
}

.sticky-col-2 {
    position: sticky;
    left: 50px; /* Lebar kolom pertama + border */
    z-index: 31;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    min-width: 150px; /* Lebar minimum kolom */
    background-color: white;
    border-right: 1px solid #ccc !important;
}

.sticky-col-3 {
    position: sticky;
    left: 200px; /* Total lebar kolom sebelumnya */
    z-index: 32;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    min-width: 80px; /* Lebar minimum kolom */
}

/* Header Beko Khusus */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50; /* Lebih tinggi dari header biasa */
}

.sticky-header-2 {
    position: sticky;
    top: 40px; /* Tinggi header pertama */
    z-index: 45;
}

th.sticky-ws, td.sticky-ws {
    position: sticky;
    left: 0px; /* Width of column 5 PIC */
    z-index: 1;
    background-color: inherit;
}

/* Warna Khusus untuk Header Tanggal */
.date-header {
    background-color: inherit;
    position: sticky;
    top: 30px; /* Di bawah header utama */
    z-index: 35; /* Di atas kolom beku tapi di bawah header */
    font-weight: 500;
}

/* Header */
.main-header {
    position: sticky;
    top: 0;
    z-index: 40;
     border-bottom: 1px solid #ccc !important;
}

.date-main-header {
    position: sticky;
    top: 0;
    z-index: 39;
}

.date-sub-header {
    position: sticky;
    top: 30px; /* Tinggi header utama */
    z-index: 38;
     border-bottom: 1px solid #ccc !important;
}


/* Memastikan Kolom Beko Tetap Terlihat Saat Scroll */
.table-container.scrolling .sticky-col,
.table-container.scrolling .sticky-col-2,
.table-container.scrolling .sticky-col-3 {
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}

/* Responsive Adjustments 
@media (max-width: 768px) {
    .table-container {
        border: 1px solid #ddd;
    }
    
    .sticky-col,
    .sticky-col-2,
    .sticky-col-3 {
        position: relative;
        left: auto !important;
        box-shadow: none !important;
        min-width: auto !important;
    }
    
    .table-container thead th,
    .date-header {
        position: relative;
        top: auto !important;
    }
}
*/
/* Animasi smooth untuk header */
.table-container thead th {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}