/* General Page Layout page-siderbar.css */
/* General Page Layout */
.page-layout {
    display: flex;
    flex-direction: row; /* Side-by-side alignment of sidebar and content */
    align-items: flex-start; /* Align items to the top, preventing stretch */
    max-width: 1300px; /* Adjust based on your design */
    margin: 0px auto; /* Center the layout with space at the top and bottom */
    gap: 20px; /* Space between sidebar and content */
}

.page-layout.no-sidebar {
    justify-content: center; /* Center the content */
}

/* Title Styling */
.page-title {
    margin: 0; /* Remove default margin */
    padding: 1rem; /* Add padding to match the sidebar */
    color: #416ca3; /* Text color for the title */
    font-family: 'Poppins', sans-serif; /* Your chosen font */
    font-size: 3rem; /* Size of the page title */
    width: 100%; /* Ensure the title stretches to fill the space */
    box-sizing: border-box; /* Include padding in the width */
}

/* Page Body Styles */
.page-body {
    width: 100%;
    box-sizing: border-box;
    /* Additional styles as needed */
}

/* Adjustments for sidebar and content to be in the same row */
.page-sidebar-container,
.content-wrapper {
    display: flex; /* Make them flex containers */
    flex-direction: column; /* Stack their children vertically */
    align-items: flex-start; /* Align children to the start of the flex container */
}

/* Sidebar Styles */
.sidebar-page-sidebar-container {
    background-color: #416ca3; /* Your chosen theme color */
    width: 200px; /* Reduced width for a slimmer sidebar */
    padding: 0rem;
    flex: 0 0 200px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    margin-top: 20px; /* Space from the top */
    margin-bottom: 20px; /* Space from the bottom */
}

.sidebar-page-sidebar-menu {
    margin: 0;
    padding: 0;
    list-style: none; /* Removes default list styling */
}

.sidebar-submenu {
    margin: 0;
    padding: 0;
    list-style: none; /* Removes default list styling */
    position: relative;
}

.sidebar-submenu li {
    position: relative;
    padding: 0.75rem 1rem; /* Maintain padding */
}

.sidebar-submenu li a {
    display: block;
    color: white; /* Text color */
    text-decoration: none;
    padding: 0.75rem 1rem; /* Maintain padding */
    transition: color 0.3s; /* Smooth transition for color and text-decoration */
    font-family: 'Ubuntu', sans-serif; /* Your chosen font */
    font-size: large;
}

/* Hover and Active Styles for Links */
.sidebar-submenu li a:hover,
.sidebar-submenu li a.sidebar-active {
    text-decoration: underline; /* Underline on hover/active */
    text-decoration-color: white; /* Ensure the underline is white */
    background-color: transparent; /* Remove the darker background on hover/active */
}

/* Toggle Button */
.sidebar-submenu-toggle {
    position: absolute;
    right: 1.5rem; /* Position towards the right */
    top: 1.5rem; /* Fix the toggle button to the top, aligning it with the link */
    transform: translateY(0); /* Remove vertical centering shift */
    cursor: pointer;
    color: white;
    font-size: 1.7rem; /* Keep the size as it is */
    transition: transform 0.3s ease; /* Smooth transition for the transform property */
    z-index: 2; /* Ensure it's above the nested submenu */
    line-height: 1; /* Ensure it doesn't expand */
}

/* Keep the hover effect for toggle button */
.sidebar-submenu-toggle:hover {
    transform: scale(1.2); /* Only scale without vertical shifting */
}


/* Nested Submenu */
.sidebar-nested-submenu {
    overflow: hidden; /* Hide the overflowing content */
    list-style: none; /* Removes default list styling */
    max-height: 0; /* Start with 0 height for a closed state */
    transition: max-height 0.6s ease-in-out; /* Animate the max-height property */
    padding-left: 0; /* Indent nested items */
    padding-top: 0.5rem; /* Add a little space for cleaner expansion */
}

/* Nested Submenu Link */
.sidebar-nested-submenu li a {
    font-size: 0.9rem; /* Smaller font size for nested items */
    color: white; /* Lighter color for nested items */
}

/* Horizontal Lines Between Menu Items */
.sidebar-submenu li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%; /* Adjust to move the line towards the left */
    right: 10%; /* Adjust to move the line towards the right */
    border-bottom: 1px solid white; /* Line color, can be adjusted */
}

/* Styles for Pages without Sidebar */
.page-layout.no-sidebar .content-wrapper {
    max-width: 100%; /* Full width when no sidebar */
    margin: 0 auto; /* Center the content */
    text-align: center; /* Center align text */
}

/* Debug Styles */
.sidebar-debug-info {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid red;
    background-color: #ffefef;
    color: red;
    font-family: monospace;
}

.sidebar-debug-info p {
    margin: 5px 0;
}

.sidebar-debug-info .highlight {
    background-color: yellow;
}

/* Media query for responsiveness */
@media (max-width: 1100px) {
    .sidebar-page-sidebar-container {
        display: none !important;
    }
}