/* ==========================================================================
   沉思波统一控制台 · 侧栏折叠 + 商务风配色（独立增强文件 · 零侵入）
   --------------------------------------------------------------------------
   老板令（2026-10-10）：「要能折叠的侧边导航栏（大分类可折叠）；清晰一点、
   颜色不要太浅；商务风一点。」

   交付方式沿用本仓既有惯例（同 theme.css / imgbed.css）：**不改 console.js /
   console.css**（那两个文件另有维护线，避免并发写冲突）；index.html 只加两行
   引用 + 防闪内联脚本里补一行「折叠态」判断。

   本文件做五件事：
     ① 商务风调色板：侧栏换深藏蓝、文字层级拉开——原来分组标题用 --muted-2
        (#6b7787)、导航项用 --muted (#8b98a9)，在深底上都偏浅、不清晰；浅色主题
        同步给一套干净的商务浅色。
     ② 更窄的侧栏（老板 10/10「再侧一点」）：展开态 224/236 → 200px、折叠图标栏
        64 → 56px。**不吃 console.css 的 --sidebar-w**（本地工作区 236 / 线上 224
        两份不一致），直接覆盖 .sidebar 宽高，两处都吃得住。
     ③ 大分类可折叠：分组折叠逻辑本身在 console.js（点 .navg-h 收起/展开），本文件
        只把它做得「看得出来能点」——分区标题更亮、悬停高亮、箭头更大。
     ④ 整栏折叠成图标栏（**默认就是折叠**）：html.csb-side-collapsed 时只留图标 +
        原生 tooltip + 角标缩成红点；状态存 localStorage('csb_side_collapsed')
        （'1' 折叠 / '0' 展开，**未设置 = 折叠**），首屏由 index.html 内联脚本先打类，无闪。
     ⑤ 顶栏「折叠 / 展开」开关（.side-toggle，由 sidebar.js 注入；≤860px 侧栏本就走
        横滑页签，开关隐藏）+ 左上角品牌 logo 放大可点回官网首页（.side-brand）。
     ⑥ 第三轮（10/10 追加）：「侧栏字还是太小」→ 字号整体再上一档（导航项 15px /
        分组标题 14px / 品牌与账号 14~15px）；「浅色下白 logo 看不见」→ 浅色主题给
        .side-logo 与 .auth-logo-img 加 filter: invert(1)（白标 → 黑标；品牌 on-light
        件 chensibo-logo-mark.png 实测就是黑标，观感一致）。
      ⑦ 第四轮（10/10 追加）：「他们那种侧边栏都是非常分明的，而且背景都是深色的有层次的」
         → 大分类**卡片化 + 深色分层**：L0 侧栏底 → L1 大分类卡 → L2 分组标题带 →
         L3 悬停 → L4 激活（品牌蓝实底 + 白字）；品牌头 / 底部署名条比侧栏底再压深一档，
         侧栏顶加一层极淡的品牌蓝辉光（用 background-image，**不动 background-color**，
         主题断言里 .sidebar 底色仍是 #0f1b2d）。见文件末「⑦ 层次感」一节。

   加载顺序：index.html 里排在 console.css / theme.css / imgbed.css 之后（靠后覆盖）。
   ========================================================================== */

/* ---------- ① 调色板（商务风） ---------- */
:root {
  /* 顺带修一条 10-10 改色后遗留的过期断言：body 与 <meta name="theme-color"> 对齐
     #0e1218（console.css 现为 #0d1117，与 meta 不一致；主题断言也仍按 #0e1218 比对）。 */
  --bg: #0e1218;

  /* 侧栏专用令牌（深色：深藏蓝 + 清晰的文字层级 + 分层）
     层次模型（由深到浅 · 老板 10/10「背景都是深色的有层次的」）：
       L0 侧栏底 --side-bg → L1 大分类卡 --side-group-bg → L2 分组标题带 --side-head-bg
       → L3 悬停 --side-bg-soft → L4 激活（品牌蓝实底 + 白字） */
  --side-bg: #0f1b2d;         /* L0 侧栏底：深藏蓝（商务观感，Ant Design Pro 深色菜单同路数） */
  --side-top-bg: #0b1626;     /* 品牌头 / 底部署名条：比侧栏底再压深一档（两头沉、中间浮） */
  --side-group-bg: #14243c;   /* L1 大分类卡：比侧栏底亮一档 → 分组之间一眼分开 */
  --side-group-line: #1f3253; /* L1 卡片描边 / 标题带分隔线 */
  --side-head-bg: #1c2e4c;    /* L2 分组标题带：再亮一档（标题一眼可辨） */
  --side-head-bg-2: #24395d;  /* L2 标题带悬停 */
  --side-bg-soft: #1d3150;    /* L3 悬停 / 头像块底 */
  --side-line: #1e2e47;       /* 侧栏分隔线 */
  --side-title: #94a7c2;      /* 分组标题：原 --muted-2 #6b7787 → 亮一档 */
  --side-text: #c6d1e0;       /* 导航项：原 --muted #8b98a9 → 亮一档 */
  --side-text-strong: #ffffff;
  --side-active-bg: #1a6fe8;  /* L4 激活：品牌蓝实底（原 rgba .22 太虚，不够分明） */
  --side-active-bg-2: #0f5fd6;
  --side-active-text: #ffffff;
  /* 折叠态「退出」按钮的图标（alpha mask，随 currentColor 着色） */
  --ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}
:root[data-theme='light'] {
  --side-bg: #ffffff;
  --side-top-bg: #f2f6fb;     /* 品牌头 / 署名条：浅色下用极浅灰蓝分出层 */
  --side-group-bg: #f5f8fc;
  --side-group-line: #dde5f0;
  --side-head-bg: #eaeff7;
  --side-head-bg-2: #dfe7f3;
  --side-bg-soft: #eef2f8;
  --side-line: #e2e8f0;
  --side-title: #64748b;
  --side-text: #334155;
  --side-text-strong: #0f172a;
  --side-active-bg: #1a6fe8;  /* 浅色也用品牌蓝实底 + 白字（同 layui 后台选中态） */
  --side-active-bg-2: #0f5fd6;
  --side-active-text: #ffffff;
}

/* ---------- ② 侧栏外观（商务风） ---------- */
.sidebar {
  background: var(--side-bg); border-right-color: var(--side-line);
  /* 更窄（老板 10/10「再侧一点」）：直接覆盖宽度，不吃 console.css 的 --sidebar-w */
  width: 200px; flex: 0 0 200px;
}
.side-brand { border-bottom-color: var(--side-line); }
.side-brand b { color: var(--side-text-strong); }
.side-brand span { color: var(--side-title); }
.nav::-webkit-scrollbar-thumb { background: var(--side-line); }

/* 左上角品牌 logo：折叠态放大、可点回官网首页（老板 10/10「一定得方便」） */
.side-brand { cursor: pointer; transition: background .12s; }
.side-brand:hover { background: var(--side-bg-soft); }
.side-brand:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
html.csb-side-collapsed .side-logo { width: 34px; height: 34px; }

/* 浅色主题：侧栏底是白的、登录页卡片也是白的，白 logo 看不见 → 反成黑标
   （品牌 on-light 件 chensibo-logo-mark.png 实测中心 rgb(0,0,0)，正是黑标，观感一致） */
:root[data-theme='light'] .side-logo,
:root[data-theme='light'] .auth-logo-img { filter: invert(1); }

/* 分组标题 → 分区标题：更亮 + 更大 + 悬停高亮 + 更大的折叠箭头（让人一眼看出「能点」） */
.navg-h {
  color: var(--side-title); font-weight: 600; letter-spacing: .04em;
  font-size: 14px; /* 老板 10/10：字再大一点（11.5 → 13 → 14px） */
  border-radius: 6px; transition: background .12s, color .12s;
}
.navg-h:hover { background: var(--side-bg-soft); color: var(--side-text-strong); }
.navg-h::before { font-size: 10px; opacity: 1; }
.navg-h .navg-c { color: var(--side-title); opacity: .8; }

/* 导航项：默认文字更清晰（原 #8b98a9 偏浅）+ 字号再大一点（13.5 → 14 → 15px） */
.nav a { color: var(--side-text); font-size: 15px; }
/* 侧栏其它文字同口径上一档（老板 10/10「侧边栏的字太小了」） */
.nav a .tag.is-badge { font-size: 12px; }
.side-brand b { font-size: 15px; }
.side-brand span { font-size: 12px; }
.who .nm { font-size: 14px; }
.who .rl { font-size: 12px; }
.nav-filter input { font-size: 13.5px; }
.nav a:hover { background: var(--side-bg-soft); color: var(--side-text-strong); }
.nav a.active { background: var(--side-active-bg); color: var(--side-active-text); }
.nav a .tag { color: var(--side-title); }

/* 底部「当前账号 / 退出」 */
.who { background: var(--side-bg-soft); }
.who .nm { color: var(--side-text-strong); }
.who .rl { color: var(--side-title); }

/* ---------- ③ 整栏折叠（图标栏 56px · 默认折叠） ---------- */
html.csb-side-collapsed .sidebar { width: 56px; flex: 0 0 56px; }
html.csb-side-collapsed .side-brand { padding: 0; justify-content: center; }
html.csb-side-collapsed .side-brand > div { display: none; }
html.csb-side-collapsed .nav { padding: 10px 6px 14px; }
html.csb-side-collapsed .nav-filter { display: none; }
/* 折叠态图标放大一点（老板 10/10「字/内容再大一点」） */
html.csb-side-collapsed .nav a svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* 折叠态：收起分组标题，分组之间用细分隔线（保留「分区」的视觉暗示） */
html.csb-side-collapsed .navg-h { display: none; }
html.csb-side-collapsed .navg.is-closed .navg-b { display: block; }
html.csb-side-collapsed .navg + .navg {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--side-line);
}

/* 折叠态：导航项只留图标，居中；激活左条贴侧栏边 */
html.csb-side-collapsed .nav a { justify-content: center; padding: 0; }
html.csb-side-collapsed .nav a.active::before { left: -6px; }
html.csb-side-collapsed .nav a > span:first-of-type { display: none; }
html.csb-side-collapsed .nav a .tag:not(.is-badge) { display: none; }
html.csb-side-collapsed .nav a .tag.is-badge {
  position: absolute; top: 3px; right: 8px; min-width: 7px; height: 7px;
  padding: 0; font-size: 0; border-radius: 999px; background: #ff4d4f;
  box-shadow: 0 0 0 2px var(--side-bg);
}

/* 折叠态：底部署名只留头像；退出按钮收成图标（原生 title 提示见 sidebar.js） */
html.csb-side-collapsed .side-foot { padding: 10px 6px; }
html.csb-side-collapsed .who { justify-content: center; padding: 6px 0; }
html.csb-side-collapsed .who > div { display: none; }
html.csb-side-collapsed .side-foot .btn {
  font-size: 0; padding: 0; display: flex; align-items: center; justify-content: center;
}
html.csb-side-collapsed .side-foot .btn::before {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ico-logout) center / contain no-repeat;
  mask: var(--ico-logout) center / contain no-repeat;
}

/* ---------- ④ 顶栏「折叠 / 展开」开关 ---------- */
.topbar-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.side-toggle:hover { color: var(--text); border-color: var(--brand); background: var(--panel-2); }
.side-toggle svg { width: 16px; height: 16px; }
/* ≤860px 侧栏隐藏、改走横滑页签（console.css 既有口径），折叠开关无意义 → 收起 */
@media (max-width: 860px) { .side-toggle { display: none; } }

/* ---------- ⑦ 层次感：大分类卡片化 + 深色分层 ---------- */
/* 老板令（2026-10-10）：「他们那种侧边栏都是非常分明的，而且背景都是深色的有层次的。」
   做法：把每个大分类做成一张**卡片**（L1），标题做成一条**标题带**（L2），
   激活项改成**品牌蓝实底 + 白字**（L4）—— 分组之间、项与项之间都一眼分开，
   深色不再糊成一片。层次模型见文件头令牌注释。 */

/* 侧栏底：中间浮起（顶部一层极淡的品牌蓝辉光；background-image 不动 background-color，
   主题断言里 .sidebar 底色仍是 rgb(15,27,45)） */
:root:not([data-theme='light']) .sidebar {
  background-image: linear-gradient(180deg, rgba(22, 119, 255, .07), rgba(22, 119, 255, 0) 260px);
}
/* 品牌头 / 底部署名条：比侧栏底压深一档 → 侧栏上下两头沉、中间浮（层次感的骨架） */
.side-brand { background: var(--side-top-bg); }
.side-foot { background: var(--side-top-bg); }

/* 导航区内边距收一点：卡片自带 padding，200px 里多留点宽度给文字 */
.nav { padding: 10px 8px 14px; }

/* L1：每个大分类 = 一张卡片（圆角 + 描边 + 比侧栏底亮一档的底） */
.nav .navg {
  background: var(--side-group-bg);
  border: 1px solid var(--side-group-line);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 8px;
}
.nav .navg:last-child { margin-bottom: 2px; }

/* L2：分组标题带——比卡片再亮一档 + 下沿分隔线 + 加粗拉开字距（一眼看出「这是分区头」） */
.nav .navg-h {
  background: var(--side-head-bg);
  border-bottom: 1px solid var(--side-group-line);
  border-radius: 7px 7px 0 0;
  padding: 8px 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.nav .navg-h:hover { background: var(--side-head-bg-2); }
/* 分组条数：做成右侧小药丸（原来是半透明灰字，太虚） */
.nav .navg-h .navg-c {
  background: var(--side-group-line); color: var(--side-title);
  border-radius: 999px; padding: 1px 7px; opacity: 1; letter-spacing: 0;
}
.nav .navg-b { padding: 5px 2px 2px; }

/* L3 悬停 / L4 激活：激活改品牌蓝实底 + 白字（原 rgba .22 太虚，不够分明） */
.nav a { border-radius: 7px; }
.nav a.active {
  background: linear-gradient(90deg, var(--side-active-bg), var(--side-active-bg-2));
  color: var(--side-active-text);
  box-shadow: 0 2px 8px rgba(22, 119, 255, .28);
}
.nav a.active .tag.is-badge { background: rgba(255, 255, 255, .24); color: #fff; }
/* 浅色：theme.css 的 `:root[data-theme='light'] .nav a.active`（0,3,1）优先级更高，
   本文件加载在后 → 同优先级靠后覆盖，把浅色激活态也拉回「品牌蓝实底 + 白字」 */
:root[data-theme='light'] .nav a.active {
  background: linear-gradient(90deg, var(--side-active-bg), var(--side-active-bg-2));
  color: var(--side-active-text);
}
/* 展开态不再用「贴侧栏边的竖条」——卡片里的实底已经够分明（折叠态仍保留竖条） */
html:not(.csb-side-collapsed) .nav a.active::before { display: none; }

/* 折叠态：卡片「压平」——图标栏里卡片反而乱，只留分组之间的细分隔线 */
html.csb-side-collapsed .nav .navg {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 0;
}
html.csb-side-collapsed .nav .navg + .navg {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--side-line);
}
html.csb-side-collapsed .side-brand,
html.csb-side-collapsed .side-foot { background: transparent; }
html.csb-side-collapsed .side-brand:hover { background: var(--side-bg-soft); }

/* 导航图标尺寸：**本文件自己定**——线上 console.css 还没有 `.nav a svg` 尺寸规则
   （图标同属并行会话未提交的改动），兜底注入的 svg 没有 width/height 属性会撑成巨图
   （10/10 线上实拍踩到：图标撑满整行）。口径与并行会话那版一致（展开 16px），
   他们上线后同值不冲突；折叠态 18px 见上面第 ③ 节（优先级更高，照旧生效）。 */
.nav a svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .92; }

/* 菜单筛选框：跟着侧栏分层走（原来吃全局 --panel，和深藏蓝侧栏不是一套色） */
.nav-filter input {
  background: var(--side-group-bg);
  border-color: var(--side-group-line);
  color: var(--side-text);
}
.nav-filter input::placeholder { color: var(--side-title); }