/**
 * Multi-level navigation menu styles
 * For use with multilevel-nav.js
 */

/* Basic Styles - Hide Submenus */
.sub-menu,
.third-level-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Show submenu */
.sub-menu.show,
.third-level-submenu.show {
    display: block;
}

/* PC (>= 992px) */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link { padding-left: 0.8rem; padding-right: 0.8rem; }
    .first-level-menu-item { position: relative; }
    .first-level-menu-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 290px;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.375rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        z-index: 1000;
        padding: 0.5rem 0;
        margin-top: 0.25rem;
    }

    .second-level-menu-item {
        position: relative;
    }

    .second-level-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        color: #212529;
        text-decoration: none;
        transition: background-color 0.15s ease-in-out;
    }

    .second-level-menu-link:hover {
        background-color: #f8f9fa;
        color: #0d6efd;
    }

    .third-level-submenu {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 200px;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.375rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        z-index: 1001;
        padding: 0.5rem 0;
        margin-left: 0;
    }
    
    .third-level-submenu-item { min-width: 240px; }
    .third-level-submenu-item a {
        display: block;
        padding: 0.5rem 1rem;
        color: #212529;
        text-decoration: none;
        transition: background-color 0.15s ease-in-out;
    }

    .third-level-submenu-item a:hover {
        background-color: #f8f9fa;
        color: #0d6efd;
    }
    
    .first-level-menu-link i,
    .second-level-menu-link i {
        font-size: 0.875rem;
        transition: transform 0.2s ease-in-out;
    }

    .menu-open > .sub-menu,
    .menu-open > .third-level-submenu {
        display: block;
    }
}

/* Mobile (< 992px) */
@media (max-width: 991.98px) {
    .first-level-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .sub-menu {
        background-color: rgba(0, 0, 0, 0.02);
        border-left: 2px solid #0d6efd;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
        padding-left: 0.75rem;
    }

    .second-level-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0;
        color: #212529;
        text-decoration: none;
    }

    .third-level-submenu {
        background-color: rgba(0, 0, 0, 0.02);
        border-left: 2px solid #adb5bd;
        margin-left: 0.5rem;
        margin-top: 0.5rem;
        padding-left: 0.75rem;
        padding-bottom: 1rem;
    }

    .third-level-submenu-item {
        padding: 0.25rem 0;
        border-bottom: 1px solid #dee2e6;
    }

    .third-level-submenu-item a {
        display: block;
        padding: 0.25rem 0;
        color: #212529;
        font-size: 0.875rem;
        text-decoration: none;
    }
    .first-level-menu-link i { border-left: 1px solid var(--bs-gray-200); }
    .first-level-menu-link i,
    .second-level-menu-link i {
        border-left: 1px solid var(--bs-gray-200);
        font-size: 0.875rem;
        transition: transform 0.2s ease-in-out;
    }

    .menu-open > .first-level-menu-link i.bi-chevron-down,
    .menu-open > .second-level-menu-link i.bi-chevron-down {
        transform: rotate(180deg);
        border-left: 0;
    }

    .sub-menu.show,
    .third-level-submenu.show {
        animation: slideDown 0.3s ease-in-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 500px;
        }
    }
}

/* General Style */
.first-level-menu-link,
.second-level-menu-link {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}