:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --topbar-height: 56px;
}

body {
    min-height: 100vh;
    background-color: #f5f7fb;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    /* UBAH INI: Biar posisinya di atas navbar Bootstrap (1030) */
    width: var(--sidebar-width);
    transition: width 0.3s ease;
    background-color: #2c3e50;
    color: white;
    overflow-y: auto;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-text {
    display: none;
}

.sidebar.collapsed .sidebar-header h4 {
    display: none;
}

.sidebar-header {
    padding: 1.2rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin: 0.25rem 0.75rem;
    transition: all 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
}

.nav-link i {
    width: 24px;
    text-align: center;
    margin-right: 0.75rem;
}

.main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    padding-top: var(--topbar-height);
}

.main-content.collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

.navbar-top {
    height: var(--topbar-height);
    background: linear-gradient(90deg, #1e3a5f 0%, #2c5282 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    
    /* INI KUNCINYA: Membatalkan sifat "nyangkut" bawaan Bootstrap */
    right: auto !important; 
    transition: left 0.3s ease, width 0.3s ease;
}

/* TAMBAHAN BARU: Atur navbar saat sidebar mengecil (collapsed) */
.navbar-top.collapsed {
    left: var(--sidebar-collapsed-width);
    width: calc(100% - var(--sidebar-collapsed-width));
}

.content-wrapper {
    padding: 1.5rem 2rem;
}

/* --- CSS UNTUK MOBILE (Layar HP/Tablet) --- */
@media (max-width: 992px) {
    /* 1. Default saat awal buka di HP: Mengecil */
    .sidebar { width: var(--sidebar-collapsed-width); }
    .sidebar .sidebar-text, .sidebar-header h4 { display: none; }
    .main-content { margin-left: var(--sidebar-collapsed-width); }
    .navbar-top {
        left: var(--sidebar-collapsed-width);
        width: calc(100% - var(--sidebar-collapsed-width));
    }

    /* 2. Saat tombol diklik di HP: Melebar ke kanan */
    .sidebar.collapsed {
        width: var(--sidebar-width) !important;
        z-index: 1050;
    }
    .sidebar.collapsed .sidebar-text, 
    .sidebar.collapsed .sidebar-header h4 {
        display: inline-block !important; /* Teks muncul lagi */
    }
    .navbar-top.collapsed {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }
    .main-content.collapsed {
        margin-left: var(--sidebar-width);
    }
}

/* Container utama tabel + loading */
.table-container {
    position: relative;
}

/* Area yang bisa di-scroll vertikal */
.table-responsive-scroll {
    max-height: 60vh;
    /* sesuaikan tinggi sesuai kebutuhan, misal 50vh - 70vh */
    overflow-y: auto;
    /* scroll vertikal muncul di sini */
    overflow-x: auto;
    /* tetap support horizontal jika kolom banyak */
}

/* Sticky header */
#customerTable thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #212529;
    /* sama dengan .table-dark */
    color: white;
}

/* Pastikan border bawah thead tetap rapi */
#customerTable thead {
    border-bottom: 2px solid #dee2e6;
    /* optional, biar terlihat jelas */
}

/* Agar table tidak punya margin bawah berlebih di dalam scroll area */
#customerTable {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Optional: agar baris pertama tbody tidak tertutup header */
#customerBody tr:first-child td {
    padding-top: 0.75rem;
    /* sesuaikan jika perlu */
}

/* Agar card-footer tetap di bawah dan tidak ikut scroll */
.card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    /* biar terlihat seperti pemisah */
}