.page-container {
  display: flex;
  min-height: 100vh; /* Ensure the container takes up full viewport height */
}

.main-content {
  flex: 1;
  transition: margin-left 0.3s ease;
  width: 100%;
}

/* On medium screens and larger, push content to make room for sidebar */
@media (min-width: 992px) {
  .main-content {
    margin-left: 276px; /* Same as sidebar width */
    padding: 30px;
  }
}

/* On small screens, content takes full width by default */
@media (max-width: 991.98px) {
  .main-content {
    margin-left: 0;
    padding: 15px;
  }
  
  /* When sidebar is open on mobile, optionally add some margin */
  .content-with-sidebar-mobile {
    margin-left: 0; /* You can adjust this if you want some content visible */
  }
}

