/* General Layout for Sidebar */
body.sidebar-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body spans the full height of the viewport */
}

.page-container {
    display: flex;
    flex: 1; /* Allow the content to expand */
    min-height: calc(100vh - 10px); /* Full height minus the header */
}

/* Sidebar Styles */
body.sidebar-layout .sidebar {
    font-size: small;
    display: flex; /* Allow flexibility within the sidebar */
    flex-direction: column; /* Arrange items vertically */
    width: 70%; /* Adjust width as needed */
    background-color: #ffffff; /* Light background */
    padding: 10px; /* Inner spacing */
    height: calc(100vh - 100px); /* Full viewport height minus the header */
    position: sticky; /* Stick while scrolling */
    top: 50px; /* Offset for header */
    border-right: 1px solid #ccc; /* Optional border */
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    z-index: 500; /* Ensure the sidebar is on top */
}

/* Sidebar List Styles */
body.sidebar-layout .sidebar ul {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
}

body.sidebar-layout .sidebar li {
    margin: 0px 0; /* Add spacing between items */
}

body.sidebar-layout .sidebar a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Default link color */
    display: block; /* Make the entire area clickable */
    padding: 5px 10px; /* Consistent padding */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
}

body.sidebar-layout .sidebar a:hover {
    background-color: #27408B; /* Background color on hover */
    color: #fff; /* White text on hover */
}

/* Sidebar Nested List Styles */
body.sidebar-layout .sidebar ul ul {
    margin-left: 5px; /* Indent nested lists */
}

/* Main Content Styles */
body.sidebar-layout .content {
    flex-grow: 1; /* Allow the content area to expand */
    margin-left: 20px; /* Adjust spacing from the sidebar */
    padding: 20px; /* Inner padding for spacing */
    overflow: auto; /* Ensure content scrolling is smooth */
}

/* Target Heading Adjustment */
h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 110px; /* Offset for sticky navigation bar height */
}


/* Collapsible Section Styles (if applicable) */
.collapsible-content {
    display: block; /* Start expanded by default */
    margin-left: 5px; /* Indent for nested items */
}

.collapsible.active .collapsible-content {
    display: block; /* Ensure it remains visible when the 'active' class is applied */
}

.collapsible-toggle {
    cursor: pointer; /* Indicate clickability */
    font-weight: bold;
    padding: 5px 0;
}

.collapsible-toggle:hover {
    text-decoration: underline; /* Optional hover effect */
}