// Top Bar Styles
// Main navigation bar styles

// Import Foundation settings to access $primary-color

// Prevent horizontal overflow on mobile devices when dropdown menus are open
@media screen and (max-width: 639px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
}

// Sticky navigation - applied to <nav> wrapper element
nav.sticky-header {
    position: sticky;
    top: 0;
    z-index: 2000;  // Must be highest to ensure dropdown appears above all sticky elements
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.top-bar {
    // Dropdown menu animations
    .dropdown.menu {
        > li {
            position: relative;

            // Z-index fix: hovered item should be on top of siblings
            &:hover {
                z-index: 10;
            }

            // Dropdown submenu styling and animation
            > .menu.vertical,
            > ul.menu {
                // Initial hidden state
                max-height: 0;
                opacity: 0;
                transform: translateY(-20px) scaleY(0.8);
                transform-origin: top center;
                // Fast exit transition (when mouse leaves)
                transition: max-height 0.15s ease-out,
                           opacity 0.12s ease-out,
                           transform 0.12s ease-out;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                border-radius: 12px;  // More rounded corners
                overflow: hidden;
                display: block !important;
                visibility: hidden;
                z-index: 1001;  // Above sticky elements like discipline-summary
            }

            // Show dropdown on hover with animation
            &:hover > .menu.vertical,
            &:hover > ul.menu,
            &.is-dropdown-submenu-parent.is-active > .menu.vertical,
            &.is-dropdown-submenu-parent.is-active > ul.menu,
            &.is-active > .menu.vertical,
            &.is-active > ul.menu {
                max-height: 800px;  // Increased to accommodate larger menus
                opacity: 1;
                transform: translateY(0) scaleY(1);
                visibility: visible;
                // Slower entry transition (when mouse enters)
                transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                           opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                           transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    }

    // Override Foundation's default instant show/hide
    .dropdown.menu [data-submenu]:not(.menu-columns-wrapper) {
        display: block !important;
    }

    // Keep flex display for menu-columns-wrapper
    .dropdown.menu .menu-columns-wrapper[data-submenu] {
        display: flex !important;
    }

    // Ensure submenu positioning
    .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
        transition: transform 0.3s ease;
    }

    .dropdown.menu > li.is-dropdown-submenu-parent:hover > a::after,
    .dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after {
        transform: rotate(90deg);
    }

    // Theme-aware menu item hover effects with improved readability
    .dropdown.menu {
        // Main menu items - improved contrast and readability
        > li > a {
            color: #2c3e50;  // Much darker text for better contrast
            font-weight: 500;  // Medium weight for better visibility
            font-size: 0.95rem;  // Slightly larger text
            padding: 10px 15px;  // More padding for easier clicking
            transition: background-color 0.2s ease, color 0.2s ease;

            &:hover {
                background-color: rgba($primary-color, 0.1);
                color: $primary-color;
            }
        }

        // Dropdown submenus - bigger with more padding
        .menu.vertical,
        ul.menu.vertical {
            background: #ffffff;  // Solid white background for better contrast
            min-width: 280px;  // Wider dropdowns for better readability
            padding: 10px 0;  // Vertical padding for the menu
            border: 1px solid rgba(0, 0, 0, 0.1);  // Subtle border
            border-radius: 12px;  // More rounded corners
            display: block !important;  // Ensure display is block

            li a {
                padding: 14px 24px;  // Much more padding for better click targets
                color: #2c3e50;  // Dark text for excellent contrast
                font-size: 0.95rem;  // Larger font size
                font-weight: 400;  // Normal weight but still readable
                line-height: 1.6;  // Better line spacing
                transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;

                &:hover {
                    background-color: rgba($primary-color, 0.08);  // Lighter hover background
                    color: $primary-color;
                    padding-left: 28px;  // Subtle indent on hover
                }

                // Icons in menu items
                i {
                    margin-right: 8px;
                    width: 16px;
                    display: inline-block;
                }
            }

            // Horizontal dividers
            hr {
                margin: 8px 0;
                border-color: rgba(0, 0, 0, 0.08);
                width: 100%;  // Full width for column layout
                grid-column: 1 / -1;  // Span all columns in grid
            }

        }

    }

    // Two-column menu wrapper for operacje
    .menu-columns-wrapper {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 12px;  // More rounded corners
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 0;  // No padding on wrapper
        min-width: 600px;
        display: flex !important;  // Keep flex for two columns
        gap: 0;  // No gap, use border instead

        // Initial hidden state for animation
        max-height: 0;
        opacity: 0;
        transform: translateY(-20px) scaleY(0.8);
        transform-origin: top center;
        // Transition for animation (JS handles 500ms closing delay via setTimeout)
        transition: max-height 0.3s ease-out,
                   opacity 0.25s ease-out,
                   transform 0.25s ease-out;
        overflow: hidden;
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1001;  // Same as single-column menus to prevent overlap issues

        // Override any inherited display:block from general menu rules
        &[data-submenu] {
            display: flex !important;
        }

        // Responsive: single column on mobile
        @media screen and (max-width: 639px) {
            display: block !important;  // Stack columns vertically
            width: 95vw;  // Full width with small margin
            min-width: unset;  // Remove fixed min-width
            left: 2.5vw;  // Center horizontally

            &[data-submenu] {
                display: block !important;
            }
        }

        ul.menu.vertical {
            flex: 1;
            min-width: 280px;
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 8px 0;  // Small vertical padding only
            margin: 0;
            border-radius: 0;  // Remove all border radius from inner columns

            &.column-1 {
                border-right: 1px solid rgba(0, 0, 0, 0.08);
                padding-right: 0;  // No padding on the right
                border-top-left-radius: 12px;  // Keep rounded corners only on outer edges
                border-bottom-left-radius: 12px;
                border-top-right-radius: 0;  // Explicitly remove inner right corners
                border-bottom-right-radius: 0;

                // Remove border on mobile (single column layout)
                @media screen and (max-width: 639px) {
                    border-right: none;
                    border-radius: 0;
                    min-width: unset;
                    width: 100%;
                }
            }

            &.column-2 {
                padding-left: 0;  // No padding on the left
                border-top-right-radius: 12px;  // Keep rounded corners only on outer edges
                border-bottom-right-radius: 12px;
                border-top-left-radius: 0;  // Explicitly remove inner left corners
                border-bottom-left-radius: 0;

                // Full width on mobile
                @media screen and (max-width: 639px) {
                    border-radius: 0;
                    min-width: unset;
                    width: 100%;
                }
            }

            li {
                margin: 0;

                a {
                    padding: 12px 24px;  // Horizontal padding for text spacing
                    color: #2c3e50;
                    font-size: 0.95rem;
                    display: block;
                    transition: all 0.2s ease;
                    border-radius: 0;  // No border radius for full-width hover

                    &:hover {
                        background-color: rgba($primary-color, 0.08);
                        color: $primary-color;
                        padding-left: 28px;  // Subtle indent on hover
                    }
                }
            }
        }
    }

    // Show menu-columns-wrapper on hover
    .dropdown.menu > li:hover > .menu-columns-wrapper,
    .dropdown.menu > li.has-submenu:hover > .menu-columns-wrapper {
        max-height: 800px;
        opacity: 1;
        transform: translateY(0) scaleY(1);
        visibility: visible;
        display: flex !important;  // Ensure flex display is maintained when visible
        // Entry transition (when mouse enters)
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                   opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    // Opens-left support for two-column menus - align to right edge when button is near right side
    .dropdown.menu > li.has-submenu.opens-left > .menu-columns-wrapper {
        left: auto !important;
        right: 0 !important;
    }

    // Add arrow for has-submenu items (like operacje)
    .dropdown.menu > li.has-submenu > a::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border: inset 6px;
        border-color: rgba(44, 62, 80, 0.6) transparent transparent transparent;
        border-top-style: solid;
        margin-left: 5px;
        vertical-align: middle;
        transition: transform 0.3s ease;
    }

    .dropdown.menu > li.has-submenu:hover > a::after,
    .dropdown.menu > li.has-submenu.is-active > a::after {
        transform: rotate(90deg);
    }

    // Fix hover state persistence - ensure proper hiding
    .dropdown.menu > li {
        > .menu-columns-wrapper,
        > .menu.vertical,
        > ul.menu {
            pointer-events: none;  // Prevent ghost hovering
        }

        // Enable pointer events on hover (desktop) and when active (mobile touch)
        &:hover,
        &.is-active,
        &.is-dropdown-submenu-parent.is-active {
            > .menu-columns-wrapper,
            > .menu.vertical,
            > ul.menu {
                pointer-events: auto;  // Enable interaction when visible
            }
        }
    }
}

// Menu text styling
.menu-text {
    cursor: pointer;
    color: #2c3e50;  // Darker text for logo/brand
    font-weight: 600;
}

// Special styling for specific menu items
.top-bar {
    // Ensure good contrast for all menu items
    .dropdown.menu a {
        color: #2c3e50;  // Default dark color for all links
    }

    // PBN menu - give it a distinct look
    li > a[href="#"]:contains("PBN") {
        font-weight: 500;
    }

    // Logout menu styling
    li > a[href*="logout"],
    li > a[href*="microsoftonline"] {
        color: #495057;  // Slightly different color for logout

        &:hover {
            color: #dc3545;  // Red on hover for logout
            background-color: rgba(220, 53, 69, 0.08);
        }
    }
}



// Global navigation select2 container
.global-nav-container {
    #div_id_global_nav_value {
        transition: all 0.3s ease;

        .select2-container {
            width: 100% !important;
            transition: all 0.3s ease;
        }
    }
}

// BPP Logo hover effects
.dropdown.menu > li > a:hover .bpp-logo {
    filter: grayscale(0%) drop-shadow(0 0 8px rgba(255, 150, 0, 0.8)) !important;
    transform: scale(1.1);
}

.bpp-logo {
    height: 24px;
    width: auto;
    vertical-align: middle;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
    margin-right: 0.4rem;
}

// Hide dropdown arrow for specific menu items
.dropdown.menu > li.no-dropdown-arrow > a::after {
    display: none !important;
}

// Menu icon styling
.top-bar .dropdown.menu {
    .fi-magnifying-glass,
    .fi-list,
    .fi-graph-trend,
    .fi-graph-bar,
    .fi-link,
    .fi-wrench,
    .fi-pencil,
    .fi-power,
    .fi-lock {
        font-size: 1.6rem;
        margin-right: 0.4rem;
        vertical-align: middle;
    }

    // Submenu icons with more spacing
    .menu.vertical .fi-magnifying-glass,
    .menu.vertical .fi-page-search,
    .menu.vertical .fi-foundation,
    .menu.vertical .fi-results-demographics,
    .menu.vertical .fi-torsos-all,
    .menu.vertical .fi-book,
    .menu.vertical .fi-map,
    .menu.vertical .fi-trophy,
    .menu.vertical .fi-list-number,
    .menu.vertical .fi-target-two,
    .menu.vertical .fi-camera,
    .menu.vertical .fi-print,
    .menu.vertical .fi-torso,
    .menu.vertical .fi-clipboard-notes,
    .menu.vertical .fi-clipboard-pencil,
    .menu.vertical .fi-shield,
    .menu.vertical .fi-page-multiple,
    .menu.vertical .fi-key,
    .menu.vertical .fi-burst-new,
    .menu.vertical .fi-download,
    .menu.vertical .fi-arrows-compress,
    .menu.vertical .fi-alert,
    .menu.vertical .fi-filter,
    .menu.vertical .fi-torsos-female-male,
    .menu.vertical .fi-upload,
    .menu.vertical .fi-torsos,
    .menu.vertical .fi-database,
    .menu.vertical .fi-calendar,
    .menu.vertical .fi-folder,
    .menu.vertical .fi-graph-bar,
    .menu.vertical .fi-home,
    .menu.vertical .fi-cloud,
    .menu.vertical .fi-pencil,
    .menu.vertical .fi-torso-business,
    .menu.vertical .fi-graph-pie,
    .menu.vertical .fi-x-circle {
        font-size: 1.6rem;
        margin-right: 0.8rem;
    }
}

// Search shortcut keyboard hint styling
.search-shortcut-hint {
    float: right;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 20px;
    background: #f8f8f8;
}

// Global search modal styles
.global-search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;

    &.show {
        display: block;
        opacity: 1;
    }

    &.closing {
        animation: fadeOutModal 0.4s ease-out forwards;
    }
}

@keyframes fadeOutModal {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.global-search-container {
    position: fixed;
    width: 85vw;
    max-width: 1200px;
    min-height: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 30px;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;

    &.animating-out {
        animation: collapseToButton 0.4s cubic-bezier(0.64, 0, 0.66, 0.44) forwards !important;
        pointer-events: none !important;
    }
}

.global-search-modal.show .global-search-container {
    pointer-events: auto;

    &:not(.animating-out) {
        animation: expandFromButton 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
}

@keyframes expandFromButton {
    from {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes collapseToButton {
    from {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale(1.05);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.global-search-input {
    width: 100%;
    font-size: 1.2rem;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    background-color: #f9f9f9;

    &:focus {
        border-color: $primary-color;
        background-color: white;
    }
}

.global-search-results {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 15px;
    padding-top: 5px;
    scroll-behavior: smooth;
}

.search-result-group {
    padding: 8px 0;
}

.search-result-group-title {
    font-weight: 600;
    color: #2c3e50;
    padding: 8px 15px;
    background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
    margin: 10px 0 5px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 4px solid $primary-color;
    display: flex;
    align-items: center;

    i {
        font-size: 1.1rem;
        margin-right: 8px;
        color: $primary-color;
        opacity: 0.8;
    }
}

.search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    margin: 2px 10px;
    position: relative;
    font-size: 0.95rem;
    color: #333;
    border: 1px solid transparent;

    &:hover {
        background: linear-gradient(90deg, rgba($primary-color, 0.1) 0%, rgba($primary-color, 0.05) 100%);
        transform: translateX(5px);
        box-shadow: 0 2px 8px rgba($primary-color, 0.15);
        border-color: rgba($primary-color, 0.2);
    }

    &.selected {
        background: linear-gradient(90deg, rgba($primary-color, 0.15) 0%, rgba($primary-color, 0.1) 100%);
        border-left: 3px solid $primary-color;
        padding-left: 12px;
        box-shadow: 0 2px 12px rgba($primary-color, 0.25);
    }
}

.global-search-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;

    &:hover {
        color: #333;
    }
}

.global-search-loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.global-search-no-results {
    text-align: center;
    padding: 20px;
    color: #999;
}

.search-hint {
    position: absolute;
    top: 15px;
    right: 60px;
    color: #999;
    font-size: 0.8rem;
    background: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

// Logout form styling
#logout-form {
    display: none;
}

// Keyboard shortcut styling - makes keyboard accelerators look like keyboard keys
.keyboard-shortcut {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 2px 6px;
    margin-left: 8px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: #555;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #ced4da;
    border-bottom-color: #adb5bd;
    border-radius: 3px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 1px 2px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    transition: all 0.15s ease;

    // Subtle hover effect
    &:hover {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        transform: translateY(1px);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.5) inset,
            0 0 1px rgba(0, 0, 0, 0.15);
    }
}
