/* MarketManager/wwwroot/css/sidebar-menu.css */

/* --- General Sidebar Menu Styling --- */

/* Reset list style and spacing for all navigation lists */
.nav-sidebar,
.nav-sidebar li,
.nav-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /* Compress each menu item, ensuring no extra margins/padding */
    .nav-sidebar .nav-item {
        margin: 0;
        padding: 0;
        position: relative; /* Needed for positioning of dropdown elements */
    }

    /* Styling for all navigation links (top-level and sub-items) */
    .nav-sidebar .nav-link {
        display: flex;
        align-items: center;
        padding: 0.2rem 0.5rem; /* Tightest practical spacing, can be adjusted */
        color: rgba(255, 255, 255, 0.85); /* Text color for non-active links */
        text-decoration: none;
        white-space: nowrap; /* Prevent text wrapping */
        line-height: 1.2;
        font-size: 0.9rem;
        overflow: hidden; /* Hide overflow for text-ellipsis */
        text-overflow: ellipsis; /* Add ellipsis for long titles */
        transition: background-color 0.15s ease, color 0.15s ease; /* Smooth transitions */
    }

        /* Hover state for all nav links */
        .nav-sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
            color: #fff; /* White text on hover */
        }

        /* Active link styling */
        .nav-sidebar .nav-link.active {
            background-color: #007bff; /* Primary blue for active background */
            color: #fff; /* White text for active link */
        }

            /* Active link icon styling */
            .nav-sidebar .nav-link.active .nav-icon {
                color: #fff; /* White icon for active link */
            }

/* --- Menu Header Styling (Static Headers - non-clickable labels) --- */
.nav-header {
    font-size: 0.85rem; /* Slightly larger */
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff; /* Full white for max contrast */
    background-color: rgba(255, 255, 255, 0.2); /* Slightly darker background for static headers */
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
    border-left: 2px solid #007bff; /* Optional: visual marker */
}

/* --- Nav Icon Adjustments --- */
.nav-sidebar .nav-link .nav-icon {
    margin-right: 0.4rem; /* Space between icon and text */
    width: 1.2rem; /* Fixed width for icon alignment */
    text-align: center;
}

/* --- Submenu Indentation and Dropdown Behavior --- */

/* Base styling for nested menu lists (collapsible sections) */
.nav-sidebar .nav-nested {
    list-style: none;
    padding-left: 0; /* Ensures consistent starting point */
    margin-left: 0;
    display: none; /* Hidden by default to ensure menus are collapsed unless active */
    overflow: hidden; /* Ensures smooth height transition if animating */
}

/* Show submenu when parent .nav-item has 'menu-open' class */
.nav-sidebar .nav-item.menu-open > .nav-nested {
    display: block; /* Show the submenu */
}

/* Indentation for the first level of sub-items */
.nav-sidebar .nav-nested > .nav-item > .nav-link {
    padding-left: 1.5rem !important;
}

/* Indentation for the second level of sub-items */
.nav-sidebar .nav-nested .nav-nested > .nav-item > .nav-link {
    padding-left: 2.2rem !important;
}

/* Indentation for the third level of sub-items */
.nav-sidebar .nav-nested .nav-nested .nav-nested > .nav-item > .nav-link {
    padding-left: 2.9rem !important;
}

/* --- Dropdown Toggle Link Styling (Collapsible Headers) --- */
/* This targets the 'a' tag that acts as a header for a collapsible section */
.nav-sidebar .nav-dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.15); /* Distinct background for collapsible headers */
    font-weight: 600; /* Make text bolder */
}

/* Styling for the top-level collapsible headers, combines nav-header appearance with toggle functionality */
.nav-sidebar .top-level-header-toggle {
    font-size: 0.85rem; /* Matches .nav-header font size */
    font-weight: 600; /* Matches .nav-header font weight */
    text-transform: uppercase; /* Matches .nav-header text transform */
    color: #ffffff; /* Full white for max contrast */
    background-color: rgba(255, 255, 255, 0.2); /* Same as .nav-header background */
    padding: 0.25rem 0.5rem; /* Adjusted padding to be like header */
    margin: 0.25rem 0; /* Margin like header */
    line-height: 1.2;
    letter-spacing: 0.5px;
    border-left: 2px solid #007bff; /* Optional: visual marker */
}


/* Hover state for dropdown toggles */
.nav-sidebar .nav-dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly lighter on hover */
}

/* Active state for dropdown toggles - if the toggle itself is active (e.g., if its 'Page' matches) */
.nav-sidebar .nav-dropdown-toggle.active {
    background-color: #007bff; /* Keep primary blue if the header link is the active page */
    color: #fff;
}


/* --- Dropdown Toggle Icon (Chevron) Styling --- */
/* Specific styling for the chevron icon next to dropdown titles */
.nav-sidebar .nav-dropdown-toggle > p > .nav-icon-right {
    margin-left: auto; /* Pushes the icon to the right */
    transition: transform 0.2s ease; /* Smooth rotation transition */
    transform: rotate(0deg); /* Default state: pointing right */
}

/* Rotate the icon when the parent .nav-item is open */
.nav-sidebar .nav-item.menu-open > .nav-dropdown-toggle > p > .nav-icon-right {
    transform: rotate(-90deg); /* Rotates 90 degrees counter-clockwise when open */
}