/* ==========================================================================
   佛系云 · 侧边栏导航（sidebar-nav.css）
   --------------------------------------------------------------------------
   为什么单独成文件：
     app.min.css（厂商编译产物）把 #sidebar-menu 的 sub-menu 写成了常显，
     并通过较高的选择器权重压制内联样式，导致「点击收起无反应」。
     本文件在全站最后加载，用 !important + 类驱动状态彻底接管。

   状态机（与 includes/menu.tpl 的脚本严格对应）：
     li.bw-ni--parent                有子菜单的一级/二级条目
     li.bw-ni--parent.bw-ni--open    展开态
     em.bw-caret                     右侧折叠指示箭头

   设计语言：商务黑白 —— 选中 = 近黑底 + 白字 + 左侧 3px 黑色标记，
             悬停 = #f5f7fa 浅灰，无任何彩色。
   ========================================================================== */

:root {
    --sv-ink-0: #0f172a;   /* 近黑：选中底 */
    --sv-ink-1: #1f2937;   /* 标题文字 */
    --sv-ink-2: #55606e;   /* 子项文字 */
    --sv-ink-3: #93a0b0;   /* 图标 / 辅助 */
    --sv-line: #e8ecf1;    /* 分割线 */
    --sv-hover: #f5f7fa;   /* 悬停底 */
    --sv-track: #dfe4ea;   /* 子级竖导轨 */
    --sv-side-w: 248px;    /* 侧栏宽度（与 LOGO 品牌栏同宽） */
}

/* --------------------------------------------------------------------------
   1. 侧栏容器
   -------------------------------------------------------------------------- */
body .vertical-menu {
    width: var(--sv-side-w) !important;
    background: #fff !important;
    border-right: 1px solid var(--sv-line) !important;
}

/* 侧栏内部滚动容器铺满 */
body #sidebar-menu {
    padding: 6px 0 28px !important;
}

body #sidebar-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   2. 条目基础排版（关键修复：去掉文字截断）
   --------------------------------------------------------------------------
   旧样式把 span 设成 overflow:hidden + text-overflow:ellipsis + nowrap，
   在 248px 侧栏下让「游戏面板管理 / GPU算力租赁 / 实名认证」等长名被裁成省略号。
   现在改为：允许换行、不裁切，行高自适应。
   -------------------------------------------------------------------------- */
body #sidebar-menu li.bw-ni {
    position: relative !important;
    margin: 1px 8px !important;
    list-style: none !important;
}

body #sidebar-menu li.bw-ni > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: var(--sv-ink-1) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background-color 0.16s ease, color 0.16s ease !important;
}

/* 文字：允许自然换行，绝不省略号 */
body #sidebar-menu li.bw-ni > a > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* 图标统一尺寸，不再因字体差异错位 */
body #sidebar-menu li.bw-ni > a > i {
    flex: 0 0 18px !important;
    width: 18px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
    color: var(--sv-ink-3) !important;
    transition: color 0.16s ease !important;
}

/* 名称后的小标签（模板里的 {$nv.tag}）不参与换行挤压 */
body #sidebar-menu li.bw-ni > a > .badge,
body #sidebar-menu li.bw-ni > a > .label {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   3. 悬停
   -------------------------------------------------------------------------- */
body #sidebar-menu li.bw-ni > a:hover {
    background: var(--sv-hover) !important;
    color: var(--sv-ink-0) !important;
}
body #sidebar-menu li.bw-ni > a:hover > i {
    color: var(--sv-ink-1) !important;
}

/* --------------------------------------------------------------------------
   4. 选中态 —— 近黑底白字（一级 + 二级 + 三级统一）
   --------------------------------------------------------------------------
   背景：旧规则只写了 `#sidebar-menu > ul > li > a.active`，
         但真实选中的 <a> 位于 .sub-menu 内部，选择器永远匹配不到，
         于是页面看起来「没有任何菜单高亮」。
         这里用后代选择器覆盖所有层级。
   -------------------------------------------------------------------------- */
body #sidebar-menu ul li > a.active,
body #sidebar-menu ul li > a.active:hover,
body #sidebar-menu ul.sub-menu li > a.active,
body #sidebar-menu ul.sub-menu li > a.active:hover,
body #sidebar-menu ul.sub-menu ul.sub-menu li > a.active {
    background: var(--sv-ink-0) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
}
body #sidebar-menu ul li > a.active > i,
body #sidebar-menu ul li > a.active:hover > i,
body #sidebar-menu ul.sub-menu li > a.active > i {
    color: #ffffff !important;
    opacity: 0.92 !important;
}
/* 选中项左侧白色/黑色标记条 */
body #sidebar-menu ul li > a.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #ffffff !important;
    display: block !important;
}
/* 父级含选中子项：仅加粗提示，不铺黑底（黑底留给最终选中项） */
body #sidebar-menu ul li.bw-ni--has-active > a {
    color: var(--sv-ink-0) !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   5. 子菜单展开 / 收起（max-height 过渡）
   --------------------------------------------------------------------------
   ★ 关键设计：max-height 的"真值"由 JS 内联样式独占，CSS 绝不用 !important
     去写 max-height —— 否则内联样式被 !important 覆盖，菜单永远展不开。
     CSS 只负责：
       (a) 首屏 JS 未执行时的兜底收起态（用 0 也不用 !important）
       (b) 展开态的过渡参数与可见性
   -------------------------------------------------------------------------- */
body #sidebar-menu ul.sub-menu {
    /* ★ 必须显式声明 display:block ——
       app.min.css / metisMenu 会给未展开的子菜单加 `display:none`，
       一旦为 none，scrollHeight 恒为 0，JS 量不到真实高度，
       展开时 max-height 只能算出 1px（实测踩坑：菜单点了没反应）。
       这里改为始终 block，用 max-height + opacity + visibility 表达开合。 */
    display: block !important;
    overflow: hidden !important;
    height: auto !important;
    /* 注意：此处不能加 !important，否则 JS 无法再把它改大 */
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    margin: 0 0 0 18px !important;
    padding: 0 0 0 12px !important;
    border-left: 1px solid var(--sv-track) !important;
    transition: max-height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.22s ease,
                visibility 0.22s ease !important;
}

body #sidebar-menu li.bw-ni--open > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 无 JS 兜底（<noscript> 场景）：靠 :hover 也能看到子菜单 */
body #sidebar-menu li.bw-ni--parent:hover > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    max-height: 1600px;
}

/* 子菜单内的条目更紧凑、字号略小、颜色更浅
   ★ 这里刻意不给 color / font-weight 加 !important —— 否则会压过下方的
     .active 规则（同权重但靠后者胜），导致选中项仍是灰色细体。 */
body #sidebar-menu ul.sub-menu li.bw-ni > a {
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 400;
    color: var(--sv-ink-2);
}
body #sidebar-menu ul.sub-menu li.bw-ni > a > i {
    flex: 0 0 16px !important;
    width: 16px !important;
    font-size: 15px !important;
}
body #sidebar-menu ul.sub-menu li.bw-ni {
    margin: 1px 0 1px 0 !important;
}

/* --------------------------------------------------------------------------
   6. 折叠箭头
   -------------------------------------------------------------------------- */
body #sidebar-menu em.bw-caret {
    flex: 0 0 auto !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin-left: auto !important;
    margin-right: 3px !important;
    border-right: 1.6px solid var(--sv-ink-3) !important;
    border-bottom: 1.6px solid var(--sv-ink-3) !important;
    transform: rotate(45deg) translate(-1px, -1px) !important;
    transform-origin: center !important;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.16s ease !important;
    pointer-events: none !important;
}
body #sidebar-menu li.bw-ni--open > a > em.bw-caret {
    transform: rotate(-135deg) translate(-2px, -1px) !important;
}
body #sidebar-menu li.bw-ni > a:hover > em.bw-caret {
    border-color: var(--sv-ink-1) !important;
}
body #sidebar-menu li.bw-ni > a.active > em.bw-caret {
    border-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   7. 收起态侧栏（body.vertical-collpsed，宽度 70px，隐藏文字）
   -------------------------------------------------------------------------- */
body.vertical-collpsed #sidebar-menu ul.sub-menu {
    display: none !important;
}
body.vertical-collpsed #sidebar-menu li.bw-ni {
    margin: 2px 10px !important;
}
body.vertical-collpsed #sidebar-menu li.bw-ni > a {
    justify-content: center !important;
    padding: 10px 0 !important;
}
body.vertical-collpsed #sidebar-menu li.bw-ni > a > span,
body.vertical-collpsed #sidebar-menu em.bw-caret {
    display: none !important;
}

/* --------------------------------------------------------------------------
   8. 滚动条（商务感：细、灰、无轨道装饰）
   -------------------------------------------------------------------------- */
body #sidebar-menu::-webkit-scrollbar,
body .vertical-menu .simplebar-content-wrapper::-webkit-scrollbar {
    width: 5px !important;
}
body #sidebar-menu::-webkit-scrollbar-thumb,
body .vertical-menu .simplebar-content-wrapper::-webkit-scrollbar-thumb {
    background: #d8dee6 !important;
    border-radius: 3px !important;
}
body #sidebar-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   9. 移动端抽屉
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.sidebar-enable .vertical-menu {
        width: var(--sv-side-w) !important;
    }
}
@media (max-width: 575.98px) {
    body .vertical-menu,
    body.sidebar-enable .vertical-menu {
        width: 260px !important;
    }
}

/* ==========================================================================
   10. 选中态终局覆盖（必须置于文件末尾，确保战胜前面所有同级规则）
   --------------------------------------------------------------------------
   为什么放最后：
     §5 里 `#sidebar-menu ul.sub-menu li.bw-ni > a{color:...}` 的权重
     (3 类 + 3 元素) 高于 §4 的 `.active` 规则 (2 类 + 3 元素)，
     同权重下靠后者胜 ── 结果是「背景黑了、字还是灰的」。
     此处用 "li.bw-ni > a.active" 提升到 3 类 + 3 元素并置于末尾，
     彻底稳定命中，并强制白字 + 600 字重。
   ========================================================================== */
body #sidebar-menu ul li.bw-ni > a.active,
body #sidebar-menu ul li.bw-ni > a.active:link,
body #sidebar-menu ul li.bw-ni > a.active:visited,
body #sidebar-menu ul li.bw-ni > a.active:hover,
body #sidebar-menu ul li.bw-ni > a.active:focus,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active:hover {
    background: var(--sv-ink-0) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
}
body #sidebar-menu ul li.bw-ni > a.active > span,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active > span {
    color: #ffffff !important;
    font-weight: 600 !important;
}
body #sidebar-menu ul li.bw-ni > a.active > i,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active > i {
    color: #ffffff !important;
    opacity: 0.92 !important;
}
body #sidebar-menu ul li.bw-ni > a.active > em.bw-caret,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active > em.bw-caret {
    border-color: #ffffff !important;
}

/* 父级含选中子项：加粗 + 深色，但不铺黑底（黑底留给最终选中项） */
body #sidebar-menu ul li.bw-ni--has-active > a,
body #sidebar-menu ul li.bw-ni--has-active > a > span {
    color: var(--sv-ink-0) !important;
    font-weight: 600 !important;
}

/* 选中项左侧白色标记条（黑底之上才可见） */
body #sidebar-menu ul li.bw-ni > a.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 0 3px 3px 0 !important;
    background: #ffffff !important;
    display: block !important;
}