/* Vertically centered fixed sidebar, respecting top navigation AND not overlapping footer */
.side-nav {
    position: fixed;
    left: 0;
    top: var(--nav-height); /* MODIFIED: Start directly below the top navigation */
    bottom: 0;             /* MODIFIED: End at the bottom of the viewport */
    width: 12vw;          /* Sidebar width */
    /*JDC_Responsive  Sidebarwidth*/

    background: rgba(0,0,0,0.88);
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    z-index: 999; /* Below top-nav (1000) but above most content */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* This will center the menu in the new available height */
    box-sizing: border-box;
    
    /* padding-top: var(--nav-height); is NO LONGER needed here because 'top: var(--nav-height)' handles the offset */
}

/* Ensure the wrapper and menu adapt to the new height calculation */
.side-nav-wrapper {
    width: 100%;
    /* The justify-content on .side-nav will center this wrapper */
}

/* Styling for the menu list itself (no changes needed from previous working version) */
.side-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Styling for individual menu items (no changes needed from previous working version) */
.side-nav-item {
    width: 100%;
}

.side-nav-item a {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size:  calc(0.5rem + 0.4 * 100vw/100 ); /*JDC_Responsive Font Size*/
    font-weight: 400;
    border-left: 3px solid transparent;
    width: 100%;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.side-nav-item a i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: #32FF7A;
}

.side-nav-item:hover a {
    background-color: rgba(50, 255, 122, 0.08);
    border-left-color: #32FF7A;
}

.side-nav-item.active a {
    background-color: rgba(0, 243, 255, 0.08);
    border-left-color: #00F3FF;
    font-weight: 600;
}

.side-nav-item.active a i {
    color: #00F3FF;
}

/* Main content area adjustment (ensure it still respects top nav and sidebar width) */
.main-content-with-sidenav {
    padding-top: var(--nav-height); 
    margin-left: 220px; /* Must match .side-nav width */
    padding-left: 32px;
    padding-right: 24px;
    padding-bottom: 32px; /* Add some bottom padding so content doesn't sit flush against footer */
    min-height: calc(97vh - var(--nav-height)); /* Ensure content area can fill screen below top nav */
    /* this is a hack. We need a sticky footer instead*/

    /* we also need some type of left nav sticky need. It looks ok */
    
    box-sizing: border-box;
}