/* Pastikan html dan body tidak memiliki margin/padding bawaan dan mengambil tinggi penuh */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Penting agar elemen anak bisa mengambil tinggi 100% */
    overflow-x: hidden; /* Mencegah scrollbar horizontal jika ada overflow tak terduga */
}

/* Pastikan wrapper mengambil tinggi minimal 100% dari viewport */
#wrapper {
    min-height: 100vh; /* 100% dari viewport height */
    position: relative; /* Penting untuk positioning elemen anak di dalamnya */ /* Pastikan html dan body tidak memiliki margin/padding bawaan dan mengambil tinggi penuh */
    html, body

{
    margin: 0;
    padding: 0;
    height: 100%; /* Penting agar elemen anak bisa mengambil tinggi 100% */
    overflow-x: hidden; /* Mencegah scrollbar horizontal jika ada overflow tak terduga */
}

/* Pastikan wrapper mengambil tinggi minimal 100% dari viewport */
#wrapper {
    min-height: 100vh; /* 100% dari viewport height */
    position: relative; /* Penting untuk positioning elemen anak di dalamnya */
}

/* Untuk sidebar itu sendiri (elemen navigasi) */
/* Biasanya .navbar-inverse atau .navbar-fixed-top atau .navbar-collapse */
/* Periksa elemen yang memiliki background gelap di sisi kiri */
.navbar-inverse.navbar-fixed-top { /* Ini adalah elemen navigasi utama */
    margin-left: 0; /* Pastikan tidak ada margin kiri yang mendorongnya */
    left: 0; /* Pastikan posisinya di paling kiri */
    width: 225px; /* Sesuaikan dengan lebar sidebar yang Anda inginkan */
    height: 100%; /* Pastikan tingginya meluas ke bawah */
    overflow-y: auto; /* Tambahkan scroll jika menu terlalu panjang */
}

/* Bagian collapse sidebar */
.navbar-ex1-collapse {
    height: 100%; /* Pastikan ini juga mengambil tinggi penuh */
    background-color: #222; /* Pastikan warnanya konsisten dengan sidebar */
    /* Jika ada background putih di sini, ganti warnanya */
}

/* Untuk ul.side-nav di dalamnya */
.side-nav {
    height: 100%; /* Pastikan ul di dalamnya juga 100% */
    /* background-color: #222; /* Pastikan warnanya konsisten */
}

/* Untuk konten utama (page-wrapper) */
#page-wrapper {
    padding-left: 0; /* Hapus padding-left bawaan jika ada */
    margin-left: 225px; /* Geser konten utama sesuai lebar sidebar */
    min-height: 100vh; /* Pastikan konten utama juga memiliki tinggi minimal */
}

/* Untuk layar kecil (mobile), sidebar biasanya akan collapse */
@media (max-width: 768px) {
    .navbar-inverse.navbar-fixed-top {
        width: 100%; /* Sidebar mengambil lebar penuh */
        height: auto; /* Tinggi menyesuaikan konten */
        position: static; /* Tidak fixed lagi */
    }

    #page-wrapper {
        margin-left: 0; /* Tidak ada margin kiri */
    }
}
}

/* Untuk sidebar itu sendiri (elemen navigasi) */
/* Biasanya .navbar-inverse atau .navbar-fixed-top atau .navbar-collapse */
/* Periksa elemen yang memiliki background gelap di sisi kiri */
.navbar-inverse.navbar-fixed-top { /* Ini adalah elemen navigasi utama */
    margin-left: 0; /* Pastikan tidak ada margin kiri yang mendorongnya */
    left: 0; /* Pastikan posisinya di paling kiri */
    width: 225px; /* Sesuaikan dengan lebar sidebar yang Anda inginkan */
    height: 100%; /* Pastikan tingginya meluas ke bawah */
    overflow-y: auto; /* Tambahkan scroll jika menu terlalu panjang */
}

/* Bagian collapse sidebar */
.navbar-ex1-collapse {
    height: 100%; /* Pastikan ini juga mengambil tinggi penuh */
    background-color: #222; /* Pastikan warnanya konsisten dengan sidebar */
    /* Jika ada background putih di sini, ganti warnanya */
}

/* Untuk ul.side-nav di dalamnya */
.side-nav {
    height: 100%; /* Pastikan ul di dalamnya juga 100% */
    /* background-color: #222; /* Pastikan warnanya konsisten */
}

/* Untuk konten utama (page-wrapper) */
#page-wrapper {
    padding-left: 0; /* Hapus padding-left bawaan jika ada */
    margin-left: 225px; /* Geser konten utama sesuai lebar sidebar */
    min-height: 100vh; /* Pastikan konten utama juga memiliki tinggi minimal */
}

/* Untuk layar kecil (mobile), sidebar biasanya akan collapse */
@media (max-width: 768px) {
    .navbar-inverse.navbar-fixed-top {
        width: 100%; /* Sidebar mengambil lebar penuh */
        height: auto; /* Tinggi menyesuaikan konten */
        position: static; /* Tidak fixed lagi */
    }
    #page-wrapper {
        margin-left: 0; /* Tidak ada margin kiri */
    }
}