/* ================================================================
   移动端顶部导航下拉菜单改版  nav-mobile.css
   ----------------------------------------------------------------
   只在 ≤768px 生效，PC 端样式完全不受影响。
   仅做覆盖（load 在 help.css / bby.css 之后），不改原文件。

   解决的问题：
   1. 下拉是纯白长列表，直接糊在页面上，没有边界、阴影、遮罩
   2. 菜单项行高达 ~100px（bootstrap padding + .hdft line-height:52px），
      7 项占满整屏，一屏放不下还要滚动
   3. 纯蓝色文字堆叠，无分隔线、无选中态，看不出层级
   4. 「返回控制台」用 float:left 孤零零挂在左下，样式与其他项无关
   5. 汉堡图标展开后不变化，没有「已展开」反馈，也没有关闭入口
   6. 点击遮罩/空白处不能收起，只能再点一次汉堡
   ================================================================ */

@media (max-width: 768px) {

    /* ---------- 0. 顶栏 ---------- */
    .navbar.navbar-default.navbar-fixed-top {
        height: 60px !important;
        background: #fff;
        box-shadow: 0 1px 0 rgba(20, 35, 70, .06);
    }

    /* ---------- 1. 汉堡按钮：34×34 热区 + 展开变 ✕ ---------- */
    .menu-switch {
        display: block;
        float: right;
        width: 34px;
        height: 34px;
        padding: 6px;
        margin-top: 13px;
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .2s;
    }

    .menu-switch:active {
        background: #f2f4f8;
    }

    .menu-switch .menu-switch-line {
        display: block;
        width: 100%;
        height: 2px;
        margin: 4px 0;
        border-radius: 2px;
        background: #1d2129;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* body.nav-open 由 nav-mobile.js 同步 #navbar 的展开状态 */
    body.nav-open .menu-switch .menu-switch-line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .menu-switch .menu-switch-line:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .menu-switch .menu-switch-line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ---------- 2. 下拉面板：浮起的白卡 ---------- */
    #navbar.collapse.mobileOpen {
        position: fixed !important;
        top: 60px;
        left: 0 !important;
        right: 0 !important;
        /* 只写 left/right:0 实测会得到 425px（视口 390），这里直接锁死宽度 */
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 1031;
        display: block !important;
        height: auto !important;
        max-height: calc(100vh - 60px);
        margin: 0 !important;
        padding: 6px 0 14px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 16px 32px -10px rgba(20, 35, 70, .28);
    }

    /* ---------- 3. 菜单项：48px 行高 + 分隔线 + 选中态 ---------- */
    #navbar .hdft {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;      /* 768px 下本类被 float:left，脱离文档流会让下面的按钮重叠 */
        background: none;
    }

    #navbar .hdft > li {
        float: none !important;
        display: block !important;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #f2f4f8;
    }

    #navbar .hdft > li:last-child {
        border-bottom: 0;
    }

    #navbar .hdft > li > a {
        position: relative;
        display: block;
        width: 100% !important;
        height: auto;
        padding: 14px 18px !important;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: .3px;
        color: #1d2129 !important;
        text-decoration: none;
        background: none;
        border: 0;
        border-radius: 0;
        transition: background .15s;
    }

    #navbar .hdft > li > a:active {
        background: #f2f7ff;
    }

    /* bby.css 给 .active > a 画了 height:2px / width:calc(100% - 40px) 的蓝色下划线，
       桌面端是栏目下划线，移动端整行宽后变成一条横条，这里直接去掉 */
    #navbar .hdft > li > a::after {
        display: none !important;
    }

    /* 当前所在栏目：由 nav-mobile.js 标记 .nav-current
       （内页用 li.active 标当前栏目，首页只有 li.index） */
    #navbar .hdft > li.nav-current > a {
        color: #0265ff !important;
        background: #f5f9ff;
        font-weight: 600;
    }

    #navbar .hdft > li.nav-current > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #0265ff;
    }

    /* ---------- 4. 返回控制台：菜单底部的整宽主按钮 ---------- */
    #navbar .nav-btn {
        display: block !important;
        float: none !important;
        /* 原 #kzt 在 ≤768 写了 position:inherit!important，会从 #navbar 继承到
           fixed，导致按钮脱离面板跑到卡片外面，这里必须重置回文档流 */
        position: static !important;
        clear: both;
        width: auto !important;
        height: 44px;
        margin: 14px 18px 2px !important;
        padding: 0 !important;
        line-height: 44px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .3px;
        color: #fff !important;
        background: linear-gradient(135deg, #2f86ff 0%, #0265ff 100%) !important;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(2, 101, 255, .28);
        -webkit-tap-highlight-color: transparent;
    }

    #navbar .nav-btn:active {
        background: #0353d6 !important;
        box-shadow: 0 2px 6px rgba(2, 101, 255, .24);
    }

    /* 菜单里那组 PC 端搜索/按钮容器在手机上本就隐藏，这里显式兜底 */
    #navbar .bby_sougs {
        display: none !important;
    }

    /* ---------- 5. 遮罩（由 nav-mobile.js 插入） ---------- */
    .nav-scrim {
        position: fixed;
        top: 60px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1029;              /* 必须低于 .navbar-fixed-top 的 1030，否则会盖住菜单面板 */
        background: rgba(15, 23, 36, .34);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    body.nav-open .nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* 超窄屏（≤360）收紧左右内边距，避免菜单项文字贴边 */
@media (max-width: 360px) {
    #navbar .hdft > li > a {
        padding: 13px 14px !important;
    }

    #navbar .nav-btn {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
}