#sidenav-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff; /* or a light background */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* soft shadow for elevation */
  z-index: 1030; /* ensure it stays above body content */
}

#sidenav-collapse-main {
  flex: 1; /* Allow main nav area to grow */
  overflow-y: auto;
}

.sidenav-footer {
  margin-top: auto; /* Push footer to bottom */
  margin-bottom: 40px; /* Add some space from the bottom */
}

/*
  Custom styles for footer placement
*/
/* 1. Ensure html and body allow main.main-content to correctly interpret its height styles (like h-100) */
html {
    height: 100%; /* Often needed for height: 100% on child elements to work correctly */
}

body.g-sidenav-show { /* Targeting the body class you provided */
    min-height: 100vh; /* Ensures body is at least the height of the viewport */
    margin: 0; /* Good practice to reset default browser margins */
    /* Your theme (g-sidenav-show) likely already handles display properties for body
       to layout the aside (sidenav) and main.main-content.
       If not, and body is the direct parent controlling aside/main flow, it might need 'display: flex'.
       For this solution, we primarily focus on the internals of main.main-content. */
}

/* 2. Configure main.main-content to be a flex container for its direct children (nav, and div.container-fluid.py-4) */
main.main-content {
    display: flex;
    flex-direction: column;
    /* The existing classes 'h-100' (height: 100%) and 'max-height-vh-100' (max-height: 100vh)
       on main.main-content are crucial. They define its height relative to its parent (body)
       and cap it at the viewport height. This setup might make main.main-content scrollable
       if its internal content is too tall, which is typical for dashboards. */

    /* If main.main-content is a flex item of the body (e.g., body is display:flex for sidebar layout),
       this ensures main.main-content takes up available vertical space.
       Many themes handle this already for the main content area. */
    flex-grow: 1;
}

/* 3. Configure the div.container-fluid.py-4 (which contains your page rows AND the footer)
      to be a flex container and to grow, filling the space within main.main-content. */
main.main-content > div.container-fluid.py-4 {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This makes this container expand to fill available space in main.main-content, after the nav. */
}

/* 4. Push the footer (which is a child of div.container-fluid.py-4) to the bottom of its container. */
/* This selector targets the footer class you have in your HTML. */
div.container-fluid.py-4 > footer.footer {
    margin-top: auto; /* This is the magic that pushes the footer down. */
}