/* Custom CSS for Sidebar Menu Fixes */

/* 1. Handle long text with ellipsis in expanded sidebar */
#sidebar-menu ul li a span {
    display: inline-block;
    max-width: 180px;
    /* Adjust based on sidebar width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 2. Fix sub-menu text overflow and add indentation */
.sub-menu li a {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
    padding-left: 75px !important;
    /* Increased padding for better indentation */
}

.sub-menu {
    padding-left: 30px;
}

/* 3. Ensure top-level icons are visible and centered in collapsed/mini sidebar */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu>ul>li>a {
    padding: 12px 0 !important;
    text-align: center;
}

body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu>ul>li>a i,
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu>ul>li>a svg {
    margin: 0 auto !important;
    display: block !important;
}

/* 4. Hide text explicitly in mini sidebar to prevent layout shift */
body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu>ul>li>a span {
    display: none !important;
}

/* 5. Handle cases where the sidebar might be too narrow for icons on mobile */
@media (max-width: 991.98px) {
    .vertical-menu {
        display: block !important;
    }
}