/* ================= 侧边栏模块分级 + 三档状态（批一三一 外壳重构） =================
   一级模块：设计（design·松绿）/ 营运参谋（staff·参谋蓝，批一九五）/ 店务（ops·暖金）/ 通用（common·石灰），
   二级子组：.nav-sub 小标（执行 / 闭环与标准 / 品牌 / 数据 / 管理）。

   批一三一（李叔 10-07「对左侧侧边栏、顶部状态栏和运营参谋进行优化」）改了四件事：
     ① 组头圆点 → 模块色「生长线」：12px 短线，所在模块线长到 20px 且组名上色。
        圆点和子组小标同字号同色，三层层级糊成一层；色线是更安静的分层手段。
     ② 条目悬停 / 选中拆成两个动作：悬停 = 右移 1px + 色条升起 14px；
        选中 = 落模块色底 + 色条 20px。原来两者只差一点底色，手指得靠记忆分辨。
     ③ 窄栏规则从「媒体查询硬切」改为 body[data-nav] 状态机驱动（host.js 三档：
        expanded / rail / drawer）。旧写法下用户没法在大屏主动收起，也没法在窄屏临时展开。
     ④ 底部收成一行系统条（状态点 + 环境 + 等宽版本号），去掉卡片感——底部是收尾，
        不该再起一个视觉重音。

   独立成文件避让 app.css 战区，必须在 app.css 之后；选择器一律 #nav / body[data-nav]
   前缀提权。改前先读：守闸不查本文件，但 index.html 的 #nav 结构与 host.js 的
   paintNav 标记是契约（.mod-dot / .nav-group-t / .nav-item .lbl 三个名字不能动）。
   ============================================================ */

/* ---- 模块色板（浅色） ---- */
#nav .nav-group[data-mod="design"] { --mod: #07C160; --mod-soft: rgba(7, 193, 96, .10); --mod-strong: #06A353; }
#nav .nav-group[data-mod="ops"]    { --mod: #C9A227; --mod-soft: rgba(201, 162, 39, .14); --mod-strong: #9A7A12; }
/* 营运参谋（批一九五）：参谋蓝——行情/节令是生意数据，与设计绿、店务金、通用灰区分 */
#nav .nav-group[data-mod="staff"]  { --mod: #2563EB; --mod-soft: rgba(37, 99, 235, .10); --mod-strong: #1D4ED8; }
#nav .nav-group[data-mod="common"] { --mod: #64748B; --mod-soft: rgba(100, 116, 139, .12); --mod-strong: #526077; }

/* ---- 组头：模块色「生长线」+ 当前所在模块高亮 ----
   .mod-dot 这个名字是 host.js paintNav 写死的（不能改名），这里把它渲染成一条短线。 */
#nav .nav-group-t .mod-dot {
  width: 12px; height: 2px; flex: none; border-radius: 2px;
  margin-right: 8px; background: var(--mod, var(--brand)); opacity: .45;
  transition: width .2s var(--ease), opacity .2s var(--ease);
}
#nav .nav-group-t { color: var(--t3); }
#nav .nav-group.has-active .nav-group-t { color: var(--mod-strong); font-weight: 700; }
#nav .nav-group.has-active .nav-group-t .mod-dot { opacity: 1; width: 20px; }

/* ---- 二级子组小标：字 + 右延细线（层级靠字重与线，不靠把字压到读不清） ---- */
#nav .nav-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 4px;
  font-size: var(--t-weak); letter-spacing: .08em; color: var(--t3);
  user-select: none;
}
#nav .nav-sub::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---- 条目：悬停与选中是两个动作 ---- */
/* width 必须重算：app.css 给的是 100%，配上左右 8px 外边距会溢出 16px */
#nav .nav-item { margin: 0 8px; width: calc(100% - 16px); padding: 9px 14px; color: var(--text-2); }
#nav .nav-item::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 2px; background: var(--mod, var(--brand));
  transition: height .2s var(--ease);
}
#nav .nav-item:hover { background: var(--hover); color: var(--text); transform: translateX(1px); }
#nav .nav-item:hover::before { height: 14px; }
#nav .nav-item:active { transform: translateX(1px) scale(.99); }
#nav .nav-group .nav-item.active { background: var(--mod-soft); color: var(--mod-strong); }
#nav .nav-group .nav-item.active::before { height: 20px; }
#nav .nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- 暗色主题：模块文字色调亮保可读 ---- */
[data-theme="dark"] #nav .nav-group[data-mod="design"] { --mod-soft: rgba(7, 193, 96, .16); --mod-strong: #2BD576; }
[data-theme="dark"] #nav .nav-group[data-mod="ops"]    { --mod-soft: rgba(201, 162, 39, .18); --mod-strong: #DDBC4E; }
[data-theme="dark"] #nav .nav-group[data-mod="staff"]  { --mod-soft: rgba(96, 165, 250, .16); --mod-strong: #60A5FA; }
[data-theme="dark"] #nav .nav-group[data-mod="common"] { --mod-soft: rgba(148, 163, 184, .16); --mod-strong: #94A3B8; }

/* ---- 滚动条：静默时隐形，悬停才显（不占版面、不抢视觉） ---- */
#nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
#nav::-webkit-scrollbar { width: 6px; }
#nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
#nav:hover::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* ================= 底部系统条（收尾，不起重音） ================= */
.side-foot { border-top: 1px solid var(--line); padding: 8px 12px 12px; flex: none; }
.side-about {
  display: flex; align-items: center; gap: 11px;
  margin: 0 8px; padding: 8px 14px; width: calc(100% - 16px);
  border-radius: var(--r-m); font-size: var(--t-aux); color: var(--t3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-about:hover { background: var(--hover); color: var(--text-2); }
.side-about svg { width: 16px; height: 16px; flex: none; }
.side-about.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.side-about:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 环境徽标：host.js 写死 .eb-card/.eb-ico/.eb-txt/.eb-env/.eb-ver，这里压成一行细字 */
.env-badge { margin-top: 4px; }
.env-badge .eb-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: var(--r-s);
  background: transparent; border: 1px solid transparent;
  transition: background var(--dur) var(--ease);
}
.env-badge .eb-card:hover { background: var(--hover); }
.env-badge .eb-ico { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--text-3); padding: 0; }
.env-badge[data-env="dev"] .eb-ico { background: var(--warn); }
.env-badge[data-env="prod"] .eb-ico { background: var(--brand); }
.env-badge .eb-ico svg { display: none; } /* 一行条里放不下图标，改色点表意 */
.env-badge .eb-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.35; }
.env-badge .eb-env { font-size: var(--t-weak); font-weight: 600; color: var(--t3); }
.env-badge[data-env="dev"] .eb-env { color: var(--warn); }
.env-badge[data-env="prod"] .eb-env { color: var(--brand); }
.env-badge .eb-ver {
  font-size: var(--t-weak); color: var(--t3);
  font-family: var(--font-mono); font-variant-numeric: var(--num);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================= 窄栏态 rail：只留图标 + 模块色线，名称走悬浮提示 ================= */
body[data-nav="rail"] .sidebar { width: var(--rail-w); }
body[data-nav="rail"] .nav { padding: 14px 10px; }
body[data-nav="rail"] .nav-group { margin-bottom: 12px; }
body[data-nav="rail"] .nav-group-t { justify-content: center; padding: 8px 0 6px; }
/* 批一三六：rail 组头只留模块色线——裸文字节点已在 paintNav 包进 .gt，
   不隐藏的话 64px 宽里中文竖排成一字一行（李叔 10-07 截图实测）。chevron 同理收掉。 */
body[data-nav="rail"] .nav-group-t .gt { display: none; }
body[data-nav="rail"] .nav-group-t .chev { display: none; }
body[data-nav="rail"] .nav-group-t .mod-dot { width: 20px; opacity: .55; margin-right: 0; }
body[data-nav="rail"] .nav-group.has-active .nav-group-t .mod-dot { opacity: 1; }
/* 批一三七：选择器必须带 #nav——#nav .nav-sub 是 (1,1,0)，
   body[data-nav="rail"] .nav-sub 只有 (0,2,1)，ID 直接把它压死，
   结果 64px 窄栏里 sub 小标（品牌/数据/管理）竖排一字一行（李叔截图实测） */
body[data-nav="rail"] #nav .nav-sub { display: none; }
body[data-nav="rail"] .nav-item { margin: 0; width: 100%; justify-content: center; padding: 10px 0; gap: 0; }
body[data-nav="rail"] .nav-item .lbl { display: none; }
body[data-nav="rail"] .nav-item::before { left: 0; }
body[data-nav="rail"] .side-about { margin: 0; width: 100%; justify-content: center; }
body[data-nav="rail"] .side-about .lbl { display: none; }
body[data-nav="rail"] .env-badge .eb-card { justify-content: center; padding: 5px 0; }
body[data-nav="rail"] .env-badge .eb-txt { display: none; }
body[data-nav="rail"] .main { margin-left: var(--rail-w); }

/* ================= 抽屉态 drawer（≤900）：侧栏滑出 + 遮罩 ================= */
body[data-nav="drawer"] .sidebar { transform: translateX(-100%); box-shadow: none; }
body[data-nav="drawer"] .sidebar.open { transform: none; box-shadow: var(--shadow-3); }
body[data-nav="drawer"] .main { margin-left: 0; }
.scrim {
  position: fixed; inset: 0; z-index: 44; background: var(--mask);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* ================= 底部系统条收口（批一四五，李叔 10-07 截图框选「重构一下这里」） =================
   批一三一「收成一行系统条」的意图没落干净，两处输给了 app.css 旧样式：
   ① 特异性：app.css 的 .env-badge[data-env="dev"] .eb-card 是 (0,2,1)，
      本文件此前的 .env-badge .eb-card 只有 (0,2,0)——dev 橙卡片底 + 26px 图标块
      一直没被压掉（李叔截图里的橙色块就是它），一行条设计成了杂交样式。
   ② 断行：.eb-env 没钉 nowrap，窄栏里「开发环境」断成「开发环/境」竖排（李叔截图实况）。
   本段用 .side-foot 前缀把特异性提到 (0,3,x) 稳赢（不赌加载顺序），
   只动视觉层：DOM（host.js paintEnvBadge 写死的 .eb-* 结构）/锚点零改动。
   回退 = 删本段（回到批一三一杂交版，不是裸奔）。 */

/* ---- 一行系统条：去卡片底（底部是收尾，不起视觉重音） ---- */
.side-foot .env-badge .eb-card,
.side-foot .env-badge[data-env="dev"] .eb-card,
.side-foot .env-badge[data-env="prod"] .eb-card {
  background: transparent;
  border-color: transparent;
  padding: 5px 14px;
  gap: 8px;
}
.side-foot .env-badge .eb-card:hover { background: var(--hover); }

/* ---- 色点：压掉 app.css 的 26px 图标块（svg 已被批一三一 display:none，块却还在） ---- */
.side-foot .env-badge .eb-ico,
.side-foot .env-badge[data-env="dev"] .eb-ico,
.side-foot .env-badge[data-env="prod"] .eb-ico {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ---- 环境名：钉死不断行——「开发环境」四字竖排断字是本批的直接病灶 ---- */
.side-foot .env-badge .eb-txt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.side-foot .env-badge .eb-env {
  display: inline;
  font-size: var(--t-weak);
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}

/* ---- 版本串：占满剩余宽度截断（全文在 title 悬浮里，host.js 已写） ---- */
.side-foot .env-badge .eb-ver {
  flex: 1 1 auto;
  min-width: 0;
}