/* Export Submenu Styles */
.export-options-modal .modal-content {
    border-radius: 16px !important;
}

.export-options-modal .btn {
    border-radius: 10px !important;
}

/* Base submenu styling */
.dropdown-submenu {
    position: relative !important;
}

/* Hide submenu by default */
/* Position submenu using fixed so it doesn't affect board list layout */
.dropdown-submenu .dropdown-menu {
    position: fixed !important; /* fixed avoids parent overflow/scroll quirks */
    top: auto !important; /* Set via JS on show */
    left: auto !important; /* Set via JS on show */
    margin-left: 0 !important;
    min-width: 220px !important;
    /* Keep always in layout to allow transition; hide via opacity/visibility */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px);
    will-change: opacity, transform;
    backface-visibility: hidden;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.no-submenu-anim .dropdown-submenu .dropdown-menu {
    transition: none !important;
    transform: none !important;
}

/* Show submenu on hover - multiple selectors for compatibility */
.dropdown-submenu:hover > .dropdown-menu {
    /* no-op; JS adds .show after positioning */
}

/* Keep submenu visible when hovering over it */
.dropdown-submenu .dropdown-menu:hover {}

/* Arrow indicator for submenu */
.dropdown-submenu > .dropdown-toggle::after {
    display: inline-block;
    margin-left: auto;
    content: "⌄"; /* slim down-chevron to match '>' style */
    float: right;
    font-size: 1.2em;
    opacity: 0.7;
    /* Remove Bootstrap caret triangle */
    border: 0 !important;
    vertical-align: middle;
    transform: translateY(-4px); /* nudge up more for better alignment */
}

/* Hide default caret for any dropdown-item toggles inside menus */
.dropdown-menu .dropdown-toggle::after {
    border: 0 !important;
}

/* Export menu item styling */
.dropdown-item.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Prevent link default behavior on submenu toggle */
.dropdown-submenu > a {
    cursor: pointer;
}

/* Export format icons */
.export-board i {
    width: 20px;
    text-align: center;
}

/* Hover effect for export items */
.dropdown-submenu .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

/* Dark theme consistency */
.dropdown-submenu .dropdown-menu {
    background: rgb(33, 37, 41) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Ensure submenu stays visible when hovering */
.dropdown-submenu:hover > a {
    background-color: rgba(127, 127, 255, 0.2);
}

/* Z-index to ensure submenu appears above everything */
#boardList .dropdown-menu {
    z-index: 1050 !important;
}

#boardList .dropdown-submenu .dropdown-menu {
    z-index: 1051 !important;
}

/* Mobile responsiveness - show submenu below on small screens */
@media (max-width: 768px) {
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-left: 1rem !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        display: block !important; /* always in flow for animation */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity 0.18s ease-out, transform 0.18s ease-out;
    }
    
    .dropdown-submenu.show > .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0);
    }
    
    /* Remove arrow on mobile */
    .dropdown-submenu > .dropdown-toggle::after {
        content: "";
    }
}

/* Smooth animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dropdown-submenu > .dropdown-menu {
    animation: slideIn 0.2s ease-out;
}

/* Fix for Bootstrap 5 compatibility */
.dropdown-menu-dark .dropdown-submenu .dropdown-menu {
    background-color: rgb(33, 37, 41) !important;
}

/* Ensure the parent dropdown stays open */
.dropdown-menu.show {
    display: block !important;
}