/* ===================================
   Navigation Container - Ultra Compact
   =================================== */
.app-nav {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 var(--app-spacing-lg);
    position: relative;
}

/* ===================================
   Mobile Toggle Button (Hidden by default)
   =================================== */
.app-nav-toggle {
    display: none;
}

.app-nav-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--app-border-radius);
    color: var(--app-color-white);
    cursor: pointer;
    transition: var(--app-transition);
    font-size: var(--app-font-size-sm);
    margin-left: auto;
}

    .app-nav-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }

/* ===================================
   Navigation Menu - Ultra Compact
   =================================== */
.app-nav-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ===================================
   Navigation Items - Ultra Compact
   =================================== */
.app-nav-item {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

/* ===================================
   Navigation Links - Ultra Compact & Smaller
   =================================== */
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    height: 1.75rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: var(--app-border-radius);
    transition: var(--app-transition);
    font-size: 0.688rem;
    font-weight: var(--app-font-weight-medium);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
}

    .app-nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--app-color-gold);
        transition: var(--app-transition);
        transform: translateX(-50%);
    }

    .app-nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--app-color-white);
    }

        .app-nav-link:hover::before {
            width: 70%;
        }

    /* ===================================
   Active State - Professional
   =================================== */
    .app-nav-link.active {
        background: rgba(212, 175, 55, 0.15);
        color: var(--app-color-gold);
        font-weight: var(--app-font-weight-semibold);
    }

        .app-nav-link.active::before {
            width: 70%;
            background: var(--app-color-gold);
        }


@keyframes app-nav-active-shimmer {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ===================================
   Navigation Icons - Smaller
   =================================== */
.app-nav-icon {
    font-size: 0.813rem;
    transition: var(--app-transition);
}

.app-nav-link:hover .app-nav-icon {
    transform: translateY(-1px);
}

.app-nav-link.active .app-nav-icon {
    color: var(--app-color-gold);
    animation: app-nav-icon-bounce 0.5s ease-out;
}

@keyframes app-nav-icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* ===================================
   Navigation Text - Smaller
   =================================== */
.app-nav-text {
    letter-spacing: 0.01em;
    font-size: 0.688rem;
}

/* ===================================
   Manage Dropdown Toggle
   =================================== */
.app-nav-dropdown {
    position: relative;
}

.app-nav-dropdown-toggle {
    padding-right: 0.75rem;
}

.app-nav-dropdown-chevron {
    font-size: 0.625rem;
    margin-left: 0.125rem;
    transition: var(--app-transition);
}

.app-nav-dropdown-toggle:hover .app-nav-dropdown-chevron {
    transform: translateY(1px);
}

/* ===================================
   Manage Dropdown Menu
   =================================== */
.app-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 160px;
    background: var(--app-color-white);
    border-radius: var(--app-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
    z-index: 1001;
    animation: app-dropdown-slide-in 0.2s ease-out;
}

@keyframes app-dropdown-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-nav-dropdown-item {
    margin: 0;
    padding: 0;
}

.app-nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    color: var(--app-color-black);
    text-decoration: none;
    font-size: 0.688rem;
    font-weight: var(--app-font-weight-normal);
    transition: var(--app-transition);
    background: none;
    border: none;
    cursor: pointer;
}

    .app-nav-dropdown-link:hover {
        background: var(--app-color-hover);
        color: var(--app-color-gold);
    }

    .app-nav-dropdown-link i {
        width: 0.875rem;
        font-size: 0.75rem;
        color: var(--app-color-gray);
        transition: var(--app-transition);
    }

    .app-nav-dropdown-link:hover i {
        color: var(--app-color-gold);
    }

    .app-nav-dropdown-link.active {
        background: var(--app-color-active);
        color: var(--app-color-gold);
        font-weight: var(--app-font-weight-semibold);
    }

        .app-nav-dropdown-link.active i {
            color: var(--app-color-gold);
        }

/* ===================================
   Focus States (Accessibility)
   =================================== */


/* ===================================
   Responsive Design - Desktop Large
   =================================== */
@media (min-width: 1200px) {
    .app-nav-menu {
        gap: 0.25rem;
    }

    .app-nav-link {
        padding: 0.25rem 0.625rem;
    }
}

/* ===================================
   Responsive Design - Tablet
   =================================== */
@media (max-width: 1023px) {
    .app-nav {
        margin: 0 var(--app-spacing-md);
    }

    .app-nav-menu {
        gap: 0;
    }

    .app-nav-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .app-nav-icon {
        font-size: 0.75rem;
    }

    .app-nav-text {
        font-size: 0.625rem;
    }
}

/* ===================================
   Responsive Design - Mobile
   =================================== */
@media (max-width: 1259px) {
    .app-nav {
        margin: 0;
        flex: 0;
    }

    .app-nav-toggle-btn {
        display: flex;
    }

    .app-nav-menu {
        position: fixed;
        top: var(--app-header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: linear-gradient(135deg, var(--app-color-primary) 0%, var(--app-color-primary-light) 100%);
        box-shadow: var(--app-shadow-lg);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-nav-toggle:checked ~ .app-nav-menu {
        max-height: calc(100vh - var(--app-header-height));
        overflow-y: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .app-nav-item {
        width: 100%;
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        animation: app-nav-item-slide-in 0.25s ease-out backwards;
    }

        .app-nav-item:nth-child(2) {
            animation-delay: 0.05s;
        }

        .app-nav-item:nth-child(3) {
            animation-delay: 0.1s;
        }

        .app-nav-item:nth-child(4) {
            animation-delay: 0.15s;
        }

        .app-nav-item:nth-child(5) {
            animation-delay: 0.2s;
        }

        .app-nav-item:nth-child(6) {
            animation-delay: 0.25s;
        }

    @keyframes app-nav-item-slide-in {
        from {
            opacity: 0;
            transform: translateX(-15px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .app-nav-link {
        width: 100%;
        height: 2.25rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        font-size: 0.75rem;
        justify-content: flex-start;
    }

        .app-nav-link::before {
            display: none;
        }



    .app-nav-icon {
        font-size: 0.875rem;
    }

    .app-nav-text {
        flex: 1;
        font-size: 0.75rem;
    }

    /* Mobile Dropdown */
    .app-nav-dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 0;
        padding: 0;
        margin: 0;
        animation: none;
    }

    .app-nav-dropdown-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .app-nav-dropdown-link {
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.75rem;
    }

        .app-nav-dropdown-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--app-color-white);
        }

        .app-nav-dropdown-link i {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.813rem;
        }

        .app-nav-dropdown-link:hover i {
            color: var(--app-color-gold);
        }

        .app-nav-dropdown-link.active {
            background: rgba(212, 175, 55, 0.15);
            color: var(--app-color-gold);
        }

            .app-nav-dropdown-link.active::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 3px;
                height: 100%;
                background: var(--app-color-gold);
            }

            .app-nav-dropdown-link.active i {
                color: var(--app-color-gold);
            }

    .app-nav-dropdown-toggle {
        height: 2.25rem;
    }

    .app-nav-dropdown-chevron {
        margin-left: auto;
        font-size: 0.75rem;
    }

    /* Smooth close animation */
    .app-nav-toggle:not(:checked) ~ .app-nav-menu .app-nav-item {
        animation: app-nav-item-slide-out 0.2s ease-in forwards;
    }

    @keyframes app-nav-item-slide-out {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(-15px);
        }
    }

    /* Mobile scrollbar styling */
    .app-nav-menu::-webkit-scrollbar {
        width: 3px;
    }

    .app-nav-menu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .app-nav-menu::-webkit-scrollbar-thumb {
        background: var(--app-color-gold);
        border-radius: 1.5px;
    }
}

/* ===================================
   Small Mobile Optimization
   =================================== */
@media (max-width: 480px) {
    .app-nav-text {
        font-size: 0.688rem;
    }

    .app-nav-dropdown-link {
        font-size: 0.688rem;
    }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
    .app-nav {
        display: none;
    }
}

/* ===================================
   High Contrast Mode Support
   =================================== */
@media (prefers-contrast: high) {
    .app-nav-link.active,
    .app-nav-dropdown-link.active {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }
}

/* ===================================
   Reduced Motion Support
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .app-nav-link,
    .app-nav-icon,
    .app-nav-menu,
    .app-nav-item,
    .app-nav-dropdown-menu {
        animation: none !important;
        transition: none !important;
    }
}