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

   状态机（与 includes/menu.tpl 的脚本严格对应）：
     li.bw-ni                        所有条目
     li.bw-ni--parent                有子菜单的一级/二级条目
     li.bw-ni--parent.bw-ni--open    展开态
     li.bw-ni--has-active            含选中子项的一级条目
     a.active                        当前页（由主题 app.js 按 URL 自动添加）
     em.bw-caret                     右侧折叠指示箭头

   --------------------------------------------------------------------------
   设计语言（2026-10-14 重做 · 「卡片分组」企业控制台风）
   --------------------------------------------------------------------------
   参照用户给定的参考图，四个核心变化：
     ① 分组卡片化 —— 每个一级项 = 一张独立白卡（12px 圆角 + #e6ebf2 描边 +
        极轻投影 + 10px 卡间距），侧栏底色改为 #f8fafc 让白卡「浮」起来。
        旧版是一整条无边界的列表，分组之间只靠 2px 间距区分，层级感弱。
     ② 子项圆点化 —— 二级项隐藏 boxicons 图标，改用 5px 中性圆点做项目符号。
        「产品与服务」下有 17 个子项，逐项挂图标会造成明显视觉噪声；
        圆点在长列表下更利于纵向扫读（与参考图一致）。
     ③ 选中态由「3px 左条 + 品牌浅底」改为「整行圆角蓝底胶囊」——
        与参考图的柔和蓝色选中块一致，扫读时定位更快。
     ④ 垂直节奏放宽 —— 一级条目 42→38px 净高但卡片自带 5px 内边距，
        二级条目 36→34px + 卡片内缩进，整体呼吸感更强。

   配色全部取自站点既有令牌（.impeccable.md）：
     强调蓝 #2563eb（站点「续费蓝」令牌）｜边界 #e6ebf2
     主文字 #1e293b｜次要 #64748b / #94a3b8
     ★ 选中底不能用 #eff6ff（与纯白只差 6/11/15，肉眼几乎看不出），
       必须加到 ≈13% 品牌混白 #e4ecfd 才「一眼可辨」——此为 2026-10-06 实测结论。

   ★★ 必须保留的三处几何修复（勿回退）：
     ① li 显式 `width:auto !important`
        app.min.css 有 `.metismenu li{display:block;width:100%}`，叠加外边距后
        整条 li 宽 = 容器宽，右边缘溢出 → 选中态圆角被侧栏裁掉。
     ② `ul.sub-menu` 必须显式 `display:block`（用 max-height 表达开合）
        若为 display:none，scrollHeight 恒 0，展开动画只能算出 1px（点不动）。
     ③ `max-height` 的「真值」由 JS 内联样式独占，CSS 绝不用 !important 写它。
   ========================================================================== */

:root {
    /* —— 品牌色（#2563eb = 站点「续费蓝」令牌，与参考图的选中蓝一致） —— */
    --sv-brand: #2563eb;
    --sv-brand-deep: #1d4ed8;
    /* ★ 选中底：≈13% 品牌混白，纯 #eff6ff 太淡看不出 */
    --sv-brand-soft: #e4ecfd;
    --sv-brand-line: #c7d9f8;

    /* —— 中性色阶 —— */
    --sv-ink-0: #0f172a;   /* 最深：悬停文字 / 含选中子项的父级 */
    --sv-ink-1: #1e293b;   /* 一级分组标题 */
    --sv-ink-2: #64748b;   /* 二级条目正文 */
    --sv-ink-3: #94a3b8;   /* 图标 / 圆点 / 箭头 */
    --sv-caret: #94a3b8;   /* 折叠箭头 */

    --sv-line: #e6ebf2;    /* 侧栏右边界 */
    --sv-card-line: #e6ebf2; /* 卡片描边 */
    --sv-hover: #f4f7fb;   /* 悬停底 */
    --sv-bullet: #cbd5e1;  /* 二级项目符号圆点 */
    --sv-side-bg: #f8fafc; /* 侧栏底色（衬托白卡） */

    --sv-side-w: 248px;    /* 侧栏宽度（与 LOGO 品牌栏同宽） */
    --sv-r: 12px;          /* 分组卡片圆角 */
    --sv-r-inner: 8px;     /* 条目圆角 */
    --sv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. 侧栏容器 —— 浅灰底衬托白卡
   -------------------------------------------------------------------------- */
body .vertical-menu {
    width: var(--sv-side-w) !important;
    background: var(--sv-side-bg) !important;
    border-right: 1px solid var(--sv-line) !important;
}

body #sidebar-menu,
body .vertical-menu .simplebar-content,
body .vertical-menu .simplebar-content-wrapper {
    background: var(--sv-side-bg) !important;
}

/* 侧栏内部滚动容器铺满；顶部/底部留呼吸感 */
body #sidebar-menu {
    padding: 12px 0 28px !important;
}

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

/* --------------------------------------------------------------------------
   2. 条目基础排版
   --------------------------------------------------------------------------
   ★ width:auto 是关键修复（见文件头 ①）。
   ★ 文字允许自然换行、绝不省略号 —— 248px 侧栏下
     「游戏面板管理 / GPU算力租赁 / 实名认证」等长名曾被裁成省略号。
   -------------------------------------------------------------------------- */
body #sidebar-menu li.bw-ni {
    position: relative !important;
    /* ★★ 必须 width:auto：上游 .metismenu li{width:100%} 会叠加 margin 造成右溢 */
    width: auto !important;
    margin: 0 !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: 40px !important;
    padding: 9px 12px !important;
    border-radius: var(--sv-r-inner) !important;
    color: var(--sv-ink-2) !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. ★ 分组卡片化（本轮核心）
   --------------------------------------------------------------------------
   选择器用 `ul#side-menu > li.bw-ni` 精确锁定「一级项」，
   二级项（在 ul.sub-menu 里）不受影响。
   ========================================================================== */
body #sidebar-menu ul#side-menu > li.bw-ni {
    margin: 0 10px 10px !important;
    padding: 5px !important;
    background: #fff !important;
    border: 1px solid var(--sv-card-line) !important;
    border-radius: var(--sv-r) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    /* 让子项悬停/选中的圆角底色被卡片圆角裁切 */
    overflow: hidden !important;
}

/* 卡片内的一级标题：字重提高、色更深，成为卡片的「分组名」 */
body #sidebar-menu ul#side-menu > li.bw-ni > a {
    min-height: 38px !important;
    padding: 8px 10px !important;
    color: var(--sv-ink-1) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
}

/* 最后一张卡片与底部留白不叠加 */
body #sidebar-menu ul#side-menu > li.bw-ni:last-child {
    margin-bottom: 4px !important;
}

/* --------------------------------------------------------------------------
   4. 悬停
   -------------------------------------------------------------------------- */
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-2) !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: 2px 0 0 !important;
    padding: 2px 0 0 !important;
    border-left: 0 !important;
    transition: max-height 0.3s var(--sv-ease),
                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;
}

/* ==========================================================================
   6. ★ 二级条目：图标 → 圆点项目符号
   --------------------------------------------------------------------------
   ★ 这里刻意不给 color / font-weight 加 !important —— 否则会压过下方的
     .active 规则（同权重但靠后者胜），导致选中项仍是灰色细体。
   ========================================================================== */
body #sidebar-menu ul.sub-menu li.bw-ni > a {
    position: relative !important;
    min-height: 37px !important;
    /* 左侧 30px 留出圆点位置 */
    padding: 8px 12px 8px 30px !important;
    border-radius: var(--sv-r-inner) !important;
    /* 大气企业风：字号上提一档、字距微放、行高放松，避免密集小字 */
    font-size: 13.5px !important;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: var(--sv-ink-2);
    transition: background-color .16s ease, color .16s ease;
}

body #sidebar-menu ul.sub-menu li.bw-ni > a > span {
    letter-spacing: 0.2px;
}

body #sidebar-menu ul.sub-menu li.bw-ni > a:hover {
    background: var(--sv-hover) !important;
    color: var(--sv-ink-0) !important;
}

/* 隐藏二级项自带的 boxicons 图标（改用圆点，降低长列表噪声） */
body #sidebar-menu ul.sub-menu li.bw-ni > a > i {
    display: none !important;
}

/* 圆点项目符号 */
body #sidebar-menu ul.sub-menu li.bw-ni > a::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: -3px !important;
    border-radius: 50% !important;
    background: var(--sv-bullet) !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease, transform 0.18s ease !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni > a:hover::before {
    /* 配色由文件末尾的「圆点随机配色」统一定；此处只做尺寸反馈 */
    transform: scale(1.35) !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni {
    margin: 1px 0 1px 0 !important;
}

/* ==========================================================================
   7. 折叠箭头 —— 16px SVG 雪佛龙（mask 实现）
   --------------------------------------------------------------------------
   为什么用 mask 而不是 background-image：
     mask 只取图像的 alpha 通道，颜色由 background-color 决定 →
     可以跟随 --sv-caret / 品牌色，并且能对颜色与旋转都做过渡。
   为什么不用原来的「2 条 border 旋转 45°」：
     接缝是尖角、线宽随字号漂移、7px 尺寸过小，观感又细又硬。
   ========================================================================== */
body #sidebar-menu em.bw-caret {
    flex: 0 0 auto !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    /* 距侧栏可见右边缘 = 10px(卡片外边距) + 5px(卡片内边距) + 10px(a 内边距) = 25px */
    margin-left: auto !important;
    margin-right: 0 !important;
    border: 0 !important;
    background-color: var(--sv-caret) !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.9 6.2 8 10.3l4.1-4.1' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.9 6.2 8 10.3l4.1-4.1' fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 16px 16px !important;
    mask-size: 16px 16px !important;
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform 0.28s var(--sv-ease),
                background-color 0.16s ease !important;
    pointer-events: none !important;
}
/* 展开：整体翻转 180°（比改路径更平滑，且不需要第二张图） */
body #sidebar-menu li.bw-ni--open > a > em.bw-caret {
    transform: rotate(180deg) !important;
}
body #sidebar-menu li.bw-ni > a:hover > em.bw-caret {
    background-color: var(--sv-ink-2) !important;
}

/* ==========================================================================
   8. 收起态侧栏（body.vertical-collpsed，宽度 70px，隐藏文字）
   ========================================================================== */
body.vertical-collpsed #sidebar-menu ul.sub-menu {
    display: none !important;
}
body.vertical-collpsed #sidebar-menu ul#side-menu > li.bw-ni {
    margin: 0 8px 8px !important;
    padding: 4px !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;
}

/* ==========================================================================
   9. 滚动条（商务感：细、灰、无轨道装饰）
   ========================================================================== */
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;
}

/* ==========================================================================
   10. 移动端抽屉
   ========================================================================== */
@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;
    }
}

/* ==========================================================================
   11. 选中态终局覆盖（必须置于文件末尾，确保战胜前面所有同级规则）
   --------------------------------------------------------------------------
   为什么放最后：
     §6 里 `#sidebar-menu ul.sub-menu li.bw-ni > a{color:...}` 的权重
     (3 类 + 3 元素) 高于本节的 `.active` 规则 (2 类 + 3 元素)，
     同权重下靠后者胜 ── 否则会出现「背景变了、字还是灰的」。
     此处用 "li.bw-ni > a.active" 提升到 3 类 + 3 元素并置于末尾，稳定命中。

   视觉（2026-10-14 改版）：整行圆角蓝底胶囊 + 品牌蓝文字 + 品牌蓝圆点。
   旧版是「品牌浅底 + 3px 品牌左条」，左条在卡片化之后会与卡片描边打架，
   且参考图用的是整行圆角块，故一并改掉。
   ========================================================================== */
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-brand-soft) !important;
    color: var(--sv-brand-deep) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body #sidebar-menu ul li.bw-ni > a.active > span,
body #sidebar-menu ul.sub-menu li.bw-ni > a.active > span {
    color: var(--sv-brand-deep) !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: var(--sv-brand) !important;
    opacity: 1 !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 {
    background-color: var(--sv-brand) !important;
}

/* 选中项的圆点：品牌蓝 + 略微放大，成为「当前位置」的视觉锚点 */
body #sidebar-menu ul.sub-menu li.bw-ni > a.active::before {
    background: var(--sv-brand) !important;
    transform: scale(1.4) !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--has-active > a > i {
    color: var(--sv-brand) !important;
}

/* ==========================================================================
   12. 圆点随机配色（16 色循环）
   --------------------------------------------------------------------------
   需求：菜单项前面的圆点要「随机颜色」，且选中 / 未选中都保持随机色。
   实现：用 nth-child(16n+k) 做伪随机分布 —— 相邻项颜色都不同、观感随机，
         同时颜色对每一项是稳定的（刷新不会跳色，避免视觉噪声）。
   ★ 必须放在文件末尾：§11 的 `.active::before{background:品牌蓝}` 权重为
     (1,3,4)，本组选择器为 (1,4,4) 且位置更靠后，才能稳定压过它。
   ========================================================================== */
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+1) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+1) > a.active::before {
    background: #ef4444 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+2) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+2) > a.active::before {
    background: #f97316 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+3) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+3) > a.active::before {
    background: #f59e0b !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+4) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+4) > a.active::before {
    background: #eab308 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+5) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+5) > a.active::before {
    background: #84cc16 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+6) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+6) > a.active::before {
    background: #22c55e !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+7) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+7) > a.active::before {
    background: #10b981 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+8) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+8) > a.active::before {
    background: #14b8a6 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+9) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+9) > a.active::before {
    background: #06b6d4 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+10) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+10) > a.active::before {
    background: #0ea5e9 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+11) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+11) > a.active::before {
    background: #3b82f6 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+12) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+12) > a.active::before {
    background: #6366f1 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+13) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+13) > a.active::before {
    background: #8b5cf6 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+14) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+14) > a.active::before {
    background: #a855f7 !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+15) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+15) > a.active::before {
    background: #d946ef !important;
}

body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+16) > a::before,
body #sidebar-menu ul.sub-menu li.bw-ni:nth-child(16n+16) > a.active::before {
    background: #ec4899 !important;
}

/* 选中项：保留品牌态的体积感（放大由 §11 的 .active::before 提供 transform） */
body #sidebar-menu ul.sub-menu li.bw-ni > a.active::before {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .06) !important;
}