/* Wrapper untuk Scrollable Table */
.table-wrapper {
    overflow-y: auto;
    overflow-x: auto;
    /* Custom scrollbar biar lebih elegan (jalan di Firefox & Chrome modern) */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

/* Tabel Utama */
.cust-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
}

/* STICKY HEADER (TH) */
.cust-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 20px; /* Jarak lega buat judul */
    text-align: left;
    white-space: nowrap; /* KUNCI 1: Biar judul header gak pernah kepotong/turun ke bawah */
    box-shadow: 0 1px 0 #e2e8f0; 
}

/* ISI TABEL (TD) */
.cust-table td {
    padding: 12px 20px;
    white-space: nowrap;
    max-width: 250px; /* KUNCI 2: Batas maksimal lebar data. Kalau lebih, dipotong jadi ... */
    overflow: hidden;
    text-overflow: ellipsis; 
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 0.875rem;
}

/* KHUSUS KOLOM NOMOR (Dikecilkan biar nggak buang tempat) */
.cust-table th.col-no, .cust-table td.col-no {
    width: 60px;
    max-width: 60px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

/* STRIPED ROWS (Zebra loreng-loreng) */
.cust-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* HOVER EFFECT (Warna Kuning Sundesk pas mouse lewat) */
.cust-table tbody tr:hover {
    background-color: #fef3c7; 
    cursor: pointer;
}