/* Left Menu System Styles */

.left-menu {
    position: fixed;
    top: 60px; /* Below top menu */
    left: 0;
    width: 80px; /* Icon width - always visible */
    height: calc(100vh - 60px);
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column; /* Stack menu items vertically */
    
    /* 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 menu off-screen */
}

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

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

/* Responsive behavior - Expand menu width on XL screens */
@media (min-width: 1200px) {
    .left-menu {
        width: 300px; /* Expanded width for icon + text */
    }
}

/* Menu Item Styling */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to left */
    width: 100%;
    height: 56px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0; /* Prevent shrinking */
    position: relative;
}

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

/* Icon Container - Fixed 80px width with dark background */
.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px; /* Fixed width matching menu width */
    height: 56px; /* Full height of menu item */
    background-color: var(--color-dark); /* #261B30 - Dark background */
    flex-shrink: 0; /* Never shrink */
    position: relative;
}

/* Icon circle - 40px circular dimensions for hover target */
.icon-circle {
    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: none; /* Hidden by default */
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: 'Oxanium', sans-serif;
    letter-spacing: 1px;
    width: 0; /* Start with 0 width */
    height: 56px; /* Full height of menu item */
    background-color: var(--color); /* #2D1F3A - Lighter background */
    overflow: hidden;
}

/* Show caption on XL screens */
@media (min-width: 1200px) {
    .menu-caption {
        display: flex;
        width: 220px; /* Fixed width for caption area */
    }
}

/* 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-circle {
    background-color: var(--highlight-color); /* #F7B538 */
}

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

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

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

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

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

.menu-item:focus .icon-circle {
    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-circle {
    background-color: var(--highlight-color); /* #F7B538 */
}

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