#container {
    display: flex;
    flex-direction: column;
}

header {
    padding: 20px;
    width: 100%;
    background-color: #FE6900;
    text-align: center; /* Center header text */
}

#content-wrapper {
    display: flex;
    border-left: 1px solid #e0e0e0; /* Lighter border */
    overflow-x: hidden; /* Prevent the whole body from scrolling */
}

main {
    /*
    flex-grow: 1;
    padding: 20px;
    */
    flex: 1; /* Occupy all remaining space */
    min-width: 0; /* Crucial for flexbox children containing tables */
    padding: 20px;
}

aside {
    min-width: 250px; /* Increase width for better readability */
    height: 100vh;
    overflow-y: auto;
    background-color: #f4f4f4; /* Slightly darker background */
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

aside ul {
    list-style: none;
    padding: 0;
}

aside ul li a {
    display: block;
    padding: 12px 15px; /* Increase padding for better spacing */
    text-decoration: none;
    color: #333; /* Darker text */
    border-bottom: 1px solid #e0e0e0; /* Add bottom border for separation */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

aside ul li a:hover {
    background-color: #e9e9e9; /* Lighter hover background */
    color: #007bff; /* Highlight color on hover */
}

.submenu {
    display: none;
    padding-left: 15px; /* Adjust submenu padding */
    background-color: #f0f0f0; /* Submenu background */
    border-left: 2px solid #007bff; /* Highlight border */
    margin-top: 5px; /* Add spacing between parent and submenu */
}

.submenu li a {
    border: none; /* Remove submenu border */
    padding: 8px 15px; /* Adjust submenu link padding */
}

aside ul li:hover .submenu {
    display: block;
}

aside ul li:hover > a {
    background-color: #e9e9e9;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}