/* 移动端导航栏专用样式 - 最高优先级 */
/* 强制覆盖所有其他样式 */

/* 基础样式重置 - 确保默认状态 */
.hamburger-menu {
    display: none; /* 默认隐藏，在移动端显示 */
}

/* 移动端断点 */
@media (max-width: 768px) {
    /* 导航栏容器 */
    .navbar {
        padding: 0 !important;
        position: relative !important;
    }
    
    .nav-container {
        height: auto !important;
        min-height: 64px !important;
        padding: 0 16px !important;
        flex-wrap: wrap !important;
        position: relative !important;
    }
    
    /* 品牌名称 */
    .nav-brand {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .nav-brand h2 {
        font-size: 1.1rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    
    .nav-brand h2 i {
        font-size: 1rem !important;
    }
    
    /* 汉堡菜单 - 强制显示 */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        order: 2 !important;
        position: relative !important;
        z-index: 1001 !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .hamburger-menu:hover {
        background: rgba(0, 0, 0, 0.1) !important;
    }
    
    .hamburger-line {
        width: 24px !important;
        height: 3px !important;
        background: #333 !important;
        margin: 3px 0 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* 汉堡菜单激活状态 */
    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }
    
    /* 桌面端菜单 - 强制隐藏 */
    .nav-menu {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-top: 16px !important;
        order: 3 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid #e5e5ea !important;
        overflow: hidden !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* 移动端菜单显示状态 */
    .nav-menu.mobile-open {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* 菜单项样式 */
    .nav-link {
        padding: 16px 20px !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e5e5ea !important;
        justify-content: flex-start !important;
        font-size: 1rem !important;
        width: 100% !important;
        color: #333 !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        transition: background-color 0.2s ease !important;
    }
    
    .nav-link:last-child {
        border-bottom: none !important;
    }
    
    .nav-link:hover {
        background: #f5f5f5 !important;
        transform: none !important;
    }
    
    .nav-link.admin-link {
        margin: 8px 20px !important;
        border-radius: 8px !important;
        text-align: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%) !important;
        color: #ffffff !important;
        border: none !important;
    }
    
    .nav-link.admin-link:hover {
        background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
    }
    
    /* 图标样式 */
    .nav-link i {
        font-size: 1rem !important;
        width: 20px !important;
        text-align: center !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .nav-container {
        padding: 0 12px !important;
    }
    
    .nav-brand h2 {
        font-size: 1rem !important;
    }
    
    .nav-brand h2 i {
        font-size: 0.9rem !important;
    }
    
    .hamburger-menu {
        padding: 6px !important;
    }
    
    .hamburger-line {
        width: 20px !important;
        height: 2px !important;
        margin: 2px 0 !important;
    }
    
    .nav-link {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
    }
}

/* 确保在移动端隐藏桌面端元素 */
@media (max-width: 768px) {
    /* 隐藏所有可能的桌面端导航元素 */
    .nav-menu:not(.mobile-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 强制显示汉堡菜单 */
    .hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* 覆盖任何可能的冲突样式 */
    .navbar .nav-menu:not(.mobile-open) {
        display: none !important;
    }
    
    .navbar .hamburger-menu {
        display: flex !important;
    }
    
    /* 确保步骤页面中的导航栏也遵循移动端规则 */
    .step-main .navbar .nav-menu:not(.mobile-open) {
        display: none !important;
    }
    
    .step-main .navbar .hamburger-menu {
        display: flex !important;
    }
    
    /* 强制覆盖任何内联样式 */
    .navbar .nav-menu[style*="display: flex"]:not(.mobile-open) {
        display: none !important;
    }
    
    .navbar .hamburger-menu[style*="display: none"] {
        display: flex !important;
    }
}

/* 最高优先级覆盖 - 使用更具体的选择器 */
@media (max-width: 768px) {
    body .navbar .nav-container .nav-menu:not(.mobile-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body .navbar .nav-container .hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}