body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh; 
  display: flex;
  flex-direction: column;
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

main {
    margin-left: 270px; /* 250px breedte van de sidebar + 20px witruimte */
    width: calc(100% - 270px);
}

/* Container-main moet relatief zijn voor de positionering */
.container-main {
    width: 100%; /* Verander 90% naar 100% */
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px; /* Standaard Bootstrap XXL breedte is vaak mooier */
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

/* Verwijder de vaste margin bij main, Bootstrap regelt dit nu via het grid */
main {
    width: 100%;
    margin-left: 0;
}

/* SIDEBAR */
.sidebar {
    position: -webkit-sticky; /* Voor Safari */
    position: sticky;
    top: 60px; /* Afstand vanaf de bovenkant tijdens het scrollen */
    height: fit-content; /* De balk wordt niet langer dan de inhoud */
    min-height: 60vh;
    background-color: #a0a0a0;
    z-index: 1000;
    padding-top: 20px; 
}

.sidebar a {
  color: #fff;
  display: block;
  padding: 12px 20px;
  text-decoration: none;
}

.sidebar a:hover {
  font-weight: 700;
}

.home-text{
  /* background-color: #a0a0a0;*/
	margin-bottom: 20px;
}

/* background-color: transparent;*/
.card-home-users{
	background-color: rgba(0, 0, 0, 0);
}

.accordion-item .accordion-button {
	background-color: #fff3e3;
}

/* FOOTER */

footer {
  background: #f8f9fa;
  text-align: center;
  padding: 15px;
}

/* RESPONSIVE SIDEBAR */

/* Alles onder de 1200px krijgt de 'mobiele' sidebar-werking */
@media (max-width: 1200px) {
    .sidebar {
        position: fixed; 
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        z-index: 1050; 
        background-color: #fff; 
        transition: left 0.3s ease;
        display: block !important; 
    }

    .sidebar.active {
        left: 0;
    }

    main {
        margin-left: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
} /* <--- Sluit de 1200px media query netjes af */

/* Verberg de sidebar volledig als hij niet actief is op kleine schermen */
@media (max-width: 576px) {
    .sidebar:not(.active) {
        display: none;
    }
}