/* Third-level menu fix for older Tailwind versions */

/* Hide third-level menu by default */
.menu-third-level {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

/* Show third-level menu on hover of parent */
.menu-second-level:hover > .menu-third-level {
    opacity: 1;
    visibility: visible;
}

/* Alternative approach without group/sub */
.menu-item-with-children {
    position: relative;
}

/* Third-level flyout - hidden by default */
.menu-second-level > .submenu-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -0.25rem;
    width: 14rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000 !important;
}

/* Dark mode styles for third level */
.dark .menu-second-level > .submenu-flyout {
    background-color: #1f2937;
    border-color: #374151;
}

/* Show third-level flyout on hover - ONLY direct child */
.menu-second-level:hover > .submenu-flyout {
    opacity: 1;
    visibility: visible;
}

/* Fourth-level flyout - hidden by default */
.menu-third-level-parent > .submenu-flyout.menu-fourth-level {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: -0.25rem;
    width: 14rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10001 !important;
}

/* Dark mode styles for fourth level */
.dark .menu-third-level-parent > .submenu-flyout.menu-fourth-level {
    background-color: #1f2937;
    border-color: #374151;
}

/* Show fourth-level flyout on hover - ONLY direct child */
.menu-third-level-parent:hover > .submenu-flyout.menu-fourth-level {
    opacity: 1;
    visibility: visible;
}