/* Left Menu System Styles */

.left-menu {
    position: fixed;
    top: 60px; /* Below top menu */
    left: 0;
    width: 80px; /* Icon area width - always visible */
    height: calc(100vh - 60px);
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex; /* Use flexbox for content expansion */
    flex-direction: row; /* Ensure horizontal layout */
    
    /* Hide scrollbars while maintaining functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* Smooth scrolling behavior */
    scroll-behavior: smooth;
    
    /* Performance optimization */
    will-change: scroll-position;
    
    /* Smooth transition for width changes */
    transition: width 0.3s ease, left 0.3s ease;
}

/* Collapsed state - hide the entire menu */
.left-menu.collapsed {
    left: -80px; /* Hide icon area off-screen */
}

/* Collapsed state on XL screens - hide entire expanded menu */
@media (min-width: 1200px) {
    .left-menu.collapsed {
        left: -300px; /* Hide both icon and caption areas */
    }
}

/* Hide scrollbars in WebKit browsers (Chrome, Safari) */
.left-menu::-webkit-scrollbar {
    display: none;
}

/* Icon Area - Always visible */
.left-menu-icon-area {
    width: 80px;
    background-color: var(--color-dark); /* #261B30 */
    flex-shrink: 0; /* Prevent shrinking in flexbox */
    height: 100%; /* Match parent height */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    line-height: 1.5; /* Synchronized line height for vertical alignment */
    position: relative;
    
    /* Hide scrollbars while maintaining functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbars in WebKit browsers for icon area */
.left-menu-icon-area::-webkit-scrollbar {
    display: none;
}

/* Caption Area - Hidden by default, visible on XL screens */
.left-menu-caption-area {
    width: 0; /* Start with 0 width */
    background-color: var(--color); /* #2D1F3A */
    flex-shrink: 0; /* Prevent shrinking in flexbox */
    height: 100%; /* Match parent height */
    overflow: hidden; /* Hide content when collapsed */
    line-height: 1.5; /* Synchronized line height for vertical alignment */
    position: relative;
    
    /* Smooth transition for width only - pure size-based animation */
    transition: width 0.3s ease;
}

/* Responsive behavior - Expand menu width on XL screens */
@media (min-width: 1200px) {
    .left-menu {
        width: 300px; /* 80px icon area + 220px caption area */
    }
    
    .left-menu-caption-area {
        width: 220px; /* Expand to full width */
        overflow-y: auto; /* Enable vertical scrolling on expanded state */
        overflow-x: hidden;
        
        /* Hide scrollbars while maintaining functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    /* Hide scrollbars in WebKit browsers for caption area */
    .left-menu-caption-area::-webkit-scrollbar {
        display: none;
    }
}

/* Flexbox layout maintains proportions during expansion */

/* Menu Item Styling */
.menu-item {
    display: flex; /* Use flexbox for proper alignment */
    align-items: center; /* Vertical centering within items */
    width: 100%;
    height: 56px; /* Fixed height for consistent alignment */
    line-height: 1.5; /* Synchronized line height for vertical alignment */
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%; /* Fill the menu-item height */
}

.menu-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Specific styling for caption area menu links */
.left-menu-caption-area .menu-link {
    justify-content: flex-start; /* Align captions to the left */
}

/* Icon Container - 40px circular dimensions for hover target */
.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* Icon Styling - Text Color (#FFFFFF) in normal state */
.menu-icon {
    color: var(--text-color); /* #FFFFFF */
    font-size: 18px;
    transition: color 0.3s ease;
}

/* Caption Styling - Text Color (#FFFFFF) in normal state */
.menu-caption {
    color: var(--text-color); /* #FFFFFF */
    font-size: 16px;
    font-weight: 700;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0 16px;
    white-space: nowrap; /* Prevent text wrapping during transition */
    height: 100%; /* Fill the menu-item height */
    text-transform: uppercase;
    font-family: 'Oxanium', sans-serif;
    letter-spacing: 1px;
}

/* Hover Effects and Interactive States */

/* Hover state - Change icons and captions to Highlight Color */
.menu-item:hover .menu-icon,
.menu-item:hover .menu-caption {
    color: var(--highlight-color); /* #F7B538 */
}

/* Hover state - Highlight circle background behind icons */
.menu-item:hover .icon-container {
    background-color: var(--highlight-color); /* #F7B538 */
}

/* Hover state - Text color for icons on highlight background */
.menu-item:hover .icon-container .menu-icon {
    color: var(--text-color); /* #FFFFFF - Text color for icons on highlight background */
}

/* Focus states for keyboard navigation accessibility */
.menu-link:focus .menu-icon,
.menu-link:focus .menu-caption {
    color: var(--highlight-color); /* #F7B538 */
}

.menu-link:focus .icon-container {
    background-color: var(--highlight-color); /* #F7B538 */
}

.menu-link:focus .icon-container .menu-icon {
    color: var(--text-color); /* #FFFFFF */
}

/* Remove default focus outline and add custom focus indicator */
.menu-link:focus {
    outline: none;
}

.menu-link:focus .icon-container {
    box-shadow: 0 0 0 2px var(--highlight-color);
}

/* Selection State Styling */

/* Selected state - Style selected icons and captions with Highlight Color */
.menu-item.selected .menu-icon,
.menu-item.selected .menu-caption {
    color: var(--highlight-color); /* #F7B538 */
}

/* Selected state - Implement selected state for icon containers with highlight background */
.menu-item.selected .icon-container {
    background-color: var(--highlight-color); /* #F7B538 */
}

/* Selected state - Text color for selected icons on highlight background */
.menu-item.selected .icon-container .menu-icon {
    color: var(--text-color); /* #FFFFFF - Text color for selected icons on highlight background */
}