/* ==========================================
   移动端导航栏增强 - 侧滑菜单设计
   参考 Butterfly 主题的移动端实现
   ========================================== */

/* 移动端导航栏样式 */
@media screen and (max-width: 991px) {
    /* 隐藏桌面端菜单 */
    #navbar_global .navbar-nav {
        display: none !important;
    }

    /* 显示汉堡菜单按钮 */
    #open_sidebar {
        display: block !important;
    }

    /* 遮罩层 */
    #navbar_menu_mask {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 1040;
        display: none !important;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7) !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #navbar_menu_mask.show {
        display: block !important;
        opacity: 1;
    }

    /* 移动端侧滑菜单容器 */
    #navbar_global {
        position: fixed !important;
        top: 0;
        right: -300px;
        z-index: 1050;
        overflow-x: hidden;
        overflow-y: auto;
        width: 300px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        background: var(--color-foreground) !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
    }

    /* 菜单打开状态 */
    #navbar_global.show {
        right: 0 !important;
    }

    /* 移动端菜单头部 */
    #navbar_global .navbar-collapse-header {
        display: block !important;
        padding: 20px;
        border-bottom: 1px solid var(--color-border);
        background: var(--themecolor) !important;
        color: white;
    }

    /* 隐藏关闭按钮行 */
    #navbar_global .navbar-collapse-header .row {
        display: none !important;
    }

    /* 移动端搜索框 */
    #navbar_global #navbar_search_input_mobile {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: white !important;
        border-radius: 20px !important;
        padding: 8px 15px !important;
    }

    #navbar_global #navbar_search_input_mobile::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 移动端菜单列表样式 */
    #navbar_global .navbar-nav {
        display: block !important;
        padding: 10px 0;
    }

    #navbar_global .nav-item {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--color-border);
    }

    #navbar_global .nav-link {
        display: block !important;
        padding: 15px 20px !important;
        width: 100%;
        color: var(--color-text-deeper) !important;
        font-size: 1.1em;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    #navbar_global .nav-link:hover {
        background: var(--color-widgets-disabled) !important;
        color: var(--themecolor) !important;
        padding-left: 25px !important;
    }

    /* 下拉菜单样式 */
    #navbar_global .dropdown-menu {
        position: static !important;
        display: none;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--color-background) !important;
        padding: 0;
    }

    #navbar_global .nav-item.show .dropdown-menu {
        display: block !important;
    }

    #navbar_global .dropdown-item {
        padding: 12px 20px 12px 35px !important;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-text-deeper) !important;
    }

    #navbar_global .dropdown-item:hover {
        background: var(--color-widgets-disabled) !important;
        color: var(--themecolor) !important;
    }

    /* 导航图标样式 */
    #navbar_global .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }

    /* 隐藏桌面端搜索框 */
    #navbar_search_container {
        display: none !important;
    }

    /* 调整导航栏按钮样式 */
    .navbar-toggler {
        border: none !important;
        padding: 8px 12px !important;
    }

    .navbar-toggler:focus {
        box-shadow: none !important;
    }

    .navbar-toggler-icon {
        width: 24px !important;
        height: 24px !important;
    }
}

/* 超小屏幕优化 */
@media screen and (max-width: 480px) {
    #navbar_global {
        width: 280px !important;
        right: -280px !important;
    }

    #navbar_global .nav-link {
        font-size: 1em;
        padding: 12px 15px !important;
    }

    #navbar_global .dropdown-item {
        padding: 10px 15px 10px 25px !important;
    }
}

/* 防止滚动穿透 */
body.menu-open {
    overflow: hidden !important;
}

/* 添加动画效果 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

#navbar_global.show .navbar-nav {
    animation: slideInRight 0.3s ease-out;
}