/* Multi-level menu styling */ .multi-level-menu { border-left: 2px solid rgba(var(--color-primary), 0.3); } /* Common styles for all menu levels */ .navigation-item-wrapper a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; } /* Long menu text handling */ .navigation-item-wrapper span { text-overflow: ellipsis; overflow: hidden; } /* Show full text on hover */ .navigation-item-wrapper a:hover span { white-space: normal; overflow: visible; position: relative; z-index: 10; } /* Enhanced tooltip effect for very long menu items */ .deepest-menu-item a:hover span { background-color: rgba(var(--sidebar-menu), 0.95); border-radius: 4px; padding: 4px 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); max-width: 300px; } /* Level-specific styles */ .second-level-menu { font-weight: 500; padding-left: 0.25rem; } .second-level-menu .mx-3, .second-level-menu .mx-4 { color: rgba(255, 255, 255, 0.95); max-width: 200px; } .third-level-menu { font-style: italic; padding-left: 0.5rem; } .third-level-menu .mx-3, .third-level-menu .mx-4 { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; max-width: 180px; } .deepest-menu-item { padding-left: 0.75rem; border-left: 2px solid rgba(var(--color-primary), 0.6); } .deepest-menu-item .mx-3, .deepest-menu-item .mx-4 { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; max-width: 160px; } /* Add visual indicators for each level */ .second-level-menu a::before, .third-level-menu a::before, .deepest-menu-item a::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; flex-shrink: 0; } .second-level-menu a::before { background-color: rgba(var(--color-primary), 0.8); } .third-level-menu a::before { background-color: rgba(var(--color-accent), 0.8); width: 5px; height: 5px; } .deepest-menu-item a::before { background-color: rgba(var(--color-secondary), 0.8); width: 4px; height: 4px; } /* Resonsive adjustments for different screen sizes */ @media (max-width: 1200px) { .second-level-menu .mx-3, .second-level-menu .mx-4, .third-level-menu .mx-3, .third-level-menu .mx-4, .deepest-menu-item .mx-3, .deepest-menu-item .mx-4 { max-width: 140px; } } @media (max-width: 992px) { .navigation-item-wrapper span { max-width: 120px; } }