/* ============================================================================
   侧栏分组折叠（2026-10-01 · 对标参考平台）

   为什么加这个文件：
     参考平台的侧栏是「生产执行 ⌄ / 现场作业 ⌄ / 高危操作 ⌄ / 数据分析 ⌄ / 系统维护 ⌄」
     —— **每个分组可折叠，默认只展开当前所在组**，一屏只看到 5 个组头。
     我们这里是 8 个分组、48 个条目全部平铺，从产线执行一路滚到系统管理，
     视觉上就是「一堵墙」，这正是用户说的「比参考平台还乱」的最大来源。

   本文件只做一件事：给分组标题加可点击的折叠三角 + 折叠态隐藏该组条目。
   不改任何模块的渲染逻辑（纯外观层，nav-collapse.js 负责交互与记忆）。
   ========================================================================== */

.sidebar .nav-group { margin-top: 10px; }

.sidebar .nav-group > .gt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size:11px;
  letter-spacing: 1.6px;
  color: var(--txt-3);
  transition: background .15s, color .15s;
}
.sidebar .nav-group > .gt:hover { background: rgba(198,198,198, .10); color: var(--txt-2); }
.sidebar .nav-group > .gt:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 三角：展开朝下，折叠朝右 */
.sidebar .nav-group > .gt .ng-caret {
  width: 12px; height: 12px; flex: none;
  transition: transform .18s ease;
  transform: rotate(90deg);
  opacity: .75;
}
.sidebar .nav-group.collapsed > .gt .ng-caret { transform: rotate(0deg); }

/* 折叠后隐藏该组条目；.ng-count 常显（折叠时也知道组里有几项） */
.sidebar .nav-group.collapsed .nav-item { display: none; }
.sidebar .nav-group > .gt .ng-count {
  margin-left: auto;
  font-size:11px;
  letter-spacing: 0;
  color: var(--txt-3);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.sidebar .nav-group > .gt .ng-badge {
  margin-left: auto;
  font-size:11px;
  letter-spacing: 0;
  padding: 0 6px;
  height: 16px;
  line-height: 16px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .16);
  color: var(--ui-danger-solid);
  font-variant-numeric: tabular-nums;
}

/* 折叠态的侧栏（≤760px 已经是图标模式）不要把组头也藏掉 */
@media (max-width: 760px) {
  .sidebar .nav-group > .gt { justify-content: center; padding: 6px 0; }
  .sidebar .nav-group > .gt .ng-count,
  .sidebar .nav-group > .gt .ng-label { display: none; }
}

/* ============================================================================
   ★★ 2026-10-11 「点模块 → 子模块就地展开」（**已被取代，规则保留但不再生效**）
   ⚠ 下面这一整段是第二版做法：把坞（窄轨）整个藏掉、子模块塞进 60px 窄列里做
     "图标上文字下"的砖块。用户否掉了它（截图为证：子菜单浮层盖住页面内容，
     且窄列里标签必然折行/截断）。
     **现行实现在 `skin-paper.css` §100**（2026-10-11 第三版）：窄轨保留在左、
     子模块在右侧成列、侧栏加宽到 `--n4-w`(284px)、正文同源让位、`#view` 的
     1480px 下限在展开态临时放开。§100 的选择器比这里多一个 `body` 层级、
     且全部带 `!important`，所以下面这些声明实际都已被压过（实测：窄轨可见、
     面板 position:relative、子模块 flex-direction:row）。
     留档原因：万一要回滚形态，这里是可直接启用的一版。
   ========================================================================== */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-rail { display: none; }                 /* ① 其余模块收起，让位 */
/* ⚠ 2026-10-11 第一版**加宽侧栏**（152px）被用户否掉：「页面内容压到面板上」。
   根因：宽度加在侧栏自己身上，而页面内容的左边距并不读这个宽度（它读的是 `--n4-w` 等另一套），
   于是侧栏变宽、内容没让位 ⇒ 内容压在面板上。
   现在改成**完全不改宽度**：列宽还是原来那条窄轨的宽度，子模块用"图标在上、文字在下、
   可折行"的砖式排布 —— 物理上不可能越界，也就不可能被内容压住。 */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel {
  position: static !important; left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important; z-index: auto !important;
  width: auto !important; height: auto !important; max-height: none !important;
  margin: 0 !important; transform: none !important; opacity: 1 !important;
  visibility: visible !important; pointer-events: auto !important;
  box-shadow: none !important;
  /* ⚠ 坞一收起，那层深色底也跟着没了（深色底是 .nav-rail 自己的）——
     这里把同一支颜色补给面板，否则子模块会落在白底上、深色文字看不见。 */
  background: var(--sk-rail-rail-bg, #141A3D) !important;
  border-radius: 14px !important;
  border: 0 !important; overflow: visible !important; padding: 6px !important;
  /* ⚠ 必须显式 `justify-content:flex-start`：浮岛那套把面板内容**竖直居中**（半圆盘心在中间），
     就地展开时会把标题行推到屏幕中部（实测内容从 y≈422 才开始，上面空 360px）。 */
  display: flex; flex-direction: column; justify-content: flex-start !important; gap: 4px;
}
/* ⚠ 浮岛那套是"浮出才点亮"：标题行默认 `display:none`、条目默认 `opacity:0`，
   只由 `html.nav-fly …` 打开。就地展开态没有 nav-fly，所以这里显式点亮。 */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h { display: flex !important; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  color: var(--sk-rail-txt-2, #C7D2E6) !important;
}
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item.active {
  color: var(--sk-rail-txt-hi, #FFFFFF) !important;
  background: rgba(124, 150, 255, .18) !important;
}
/* ② 子模块：图标在上、文字在下（与坞上的模块砖同一套语言）。
   窄列里**允许折行、不用省略号** —— 6 字的「引物流转查询」折成两行也读得全，
   比截成「引物…」强（上一版就是被截断才被否的）。 */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-cat { margin: 0 !important; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 4px !important; width: 100% !important; box-sizing: border-box !important;
  min-height: 46px; height: auto !important; padding: 7px 3px !important;
  margin: 0 0 3px !important; border-radius: 10px;
  font-size:11px !important; line-height: 1.22 !important;
  text-align: center; white-space: normal !important;
}
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item svg { flex: none; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item > span {
  /* ⚠ 这四条都必须 !important：皮肤里 `.nav-item span` 带 nowrap + ellipsis（还有 !important 的版本），
     不写 !important 的话上面那行 `white-space:normal` 会被压掉，标签照样被截成「生产…」。 */
  display: block !important; max-width: 100% !important;
  word-break: break-all !important; white-space: normal !important;
  overflow: visible !important; text-overflow: clip !important;
}
/* 角标在窄列里改成右上角一枚小药丸，不挤文字 */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item { position: relative; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-item .nav-badge {
  position: absolute; top: 3px; right: 3px; margin: 0 !important;
  min-width: 15px; height: 15px; line-height: 15px; padding: 0 4px;
  font-size:10px; border-radius: 999px;
}
/* ③ 标题行：返回键 + 模块名 */
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 8px; margin-bottom: 2px;
  font-size:11px; letter-spacing: .04em;
}
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h .np-back {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px;
  background: rgba(120,120,120, .14); color: inherit; cursor: pointer;
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h .np-back:hover { background: rgba(120,120,120, .24); }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.nav-inline[data-paper][data-paper][data-paper] .sidebar .nav-panel-h > i { display: none; }   /* 「N 项」在这条窄列里放不下，收起 */

/* ============================================================================
   ★★ 2026-10-11 第三版「常驻侧栏 + 分组折叠」（用户选定 B 方案）

     ┌ 208px 常驻侧栏 ─────────┐
     │ [图标] 我的工位    6 ⌄ │  ← 分组标题：点一下展开/收起这一组
     │    ● 合成工序          │  ← 子模块：常规行，一行读得全
     │    ● 氨解工序          │
     │ [图标] 在制进度    5 ⌄ │  ← 当前页所在组自动展开
     └────────────────────────┘

   关键：宽度改在 `--n4-w` 这个变量上（skin-paper §38 用它同时喂
   `.sidebar{width}` 与页面内容的左边距）—— 第一版直接写 `.sidebar{width}`，
   内容不跟着走，就压到面板上了。
   ========================================================================== */
html.nav-stack[data-paper][data-paper] { --n4-w: 208px; }

/* 浮岛整体退场：面板不再使用，条目都挂在标题下面 */
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-panel { display: none !important; }

/* 侧栏就是一列纵向列表 */
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail {
  width: 100% !important; flex: 1 1 auto !important; min-height: 0;
  display: flex !important; flex-direction: column !important;
  gap: 1px; padding: 0 6px; overflow-y: auto; overflow-x: hidden;
}

/* 分组标题行：图标 + 名字 + （项数自动进 title）+ 折叠三角 */
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn {
  width: 100% !important; height: 34px !important; min-height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 9px !important; padding: 0 8px !important; margin: 2px 0 0 !important;
  border-radius: 8px !important; text-align: left;
}
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn > span {
  display: block !important; flex: 1 1 auto; min-width: 0;
  font-size:12.5px !important; white-space: nowrap !important;
  overflow: hidden; text-overflow: ellipsis;
}
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn > span::after { content: none !important; }
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn .nc-caret {
  flex: none; width: 0; height: 0; margin-left: auto;
  border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  opacity: .55; transition: transform .16s ease;
}
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn.on .nc-caret { transform: rotate(90deg); }

/* 子模块：常规行（图标 + 文字一行），缩进一档 */
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nav-cat { margin: 0 0 4px !important; padding-left: 10px; }
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nav-item {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 8px !important; width: 100% !important; box-sizing: border-box !important;
  min-height: 0; height: 31px !important; padding: 0 8px !important;
  margin: 0 0 1px !important; border-radius: 7px; font-size:12px !important;
}
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nav-item > span {
  display: block !important; flex: 1 1 auto; min-width: 0;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html.nav-stack[data-paper][data-paper][data-paper] .sidebar .nav-rail .nav-item .nav-badge { margin: 0 0 0 auto !important; flex: none; }

/* ============================================================================
   ★★ 2026-10-11 细节打磨（用户："还是在这一版的细节上进行好好打磨"）
   —— 打磨对象＝现在生效的那套（图标轨 + 点类目浮出面板）。

   最扎眼的一处：**每行的右边参差不齐**。那是早前"扇形"留下的算法 ——
   `layoutFly()` 给每行按"所在高度的弦长"写死宽度（半圆两端窄、中间宽），
   于是 5 行有 5 个不同宽度，右边缘像没对齐。这里用 CSS 统一行宽/行高/内边距/圆角，
   !important 压过 JS 写的 inline 宽度（不改 JS，弧形背景照旧）。
   顺带把图标尺寸、文字伸缩、角标贴右端也统一 —— 一行三件套：图标 · 文字 · 角标。
   ============================================================================ */
html.nav-fly .sidebar .nav-panel .nav-item {
  width: 100% !important; margin-left: 0 !important; left: auto !important;
  box-sizing: border-box !important;
  height: 36px !important; min-height: 36px !important;
  padding: 0 10px !important; border-radius: 9px !important;
  display: flex !important; align-items: center !important; gap: 9px !important;
}
html.nav-fly .sidebar .nav-panel .nav-item svg { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; }
html.nav-fly .sidebar .nav-panel .nav-item > span {
  flex: 1 1 auto !important; min-width: 0 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html.nav-fly .sidebar .nav-panel .nav-item .nav-badge { flex: 0 0 auto !important; margin-left: auto !important; }

/* ── 打磨 ②：那张"盘面"不再做成半圆 ─────────────────────────────────────────
   面板背后那圈浅色弧＝`.nav-panel::before`（`--plate-radius` 被 JS 设成半圆）。
   它现在只是装饰，和方形的行并排是"两层形状打架"，改成普通圆角卡（与行同一套圆角语言）。
   ⚠ 半径是 JS 写进 `--plate-radius` 的，皮肤里那条又是 !important 且带 body/属性，
   所以这里必须用「重复属性提特异度」的老写法（仓库里 skin-paper 自己也这么干）才压得住。 */
html.nav-fly[data-paper][data-paper][data-paper][data-paper][data-paper] body .sidebar .nav-panel::before {
  border-radius: 14px !important;
}
/* ⚠ 更正上面的判断：量出来面板的圆角本来就是 14px（`--plate-radius:14px`），那圈"形状"不是它 ——
   真凶是 **`.nav-lights > .nav-glow`**：一个 151×151、`border-radius:999px` 的**圆盘**
   （扇形时代"跟光束"的底盘）。面板已经是普通圆角卡，再叠一个圆盘就是"两种形状打架"。
   这里让它退场；联动高亮仍由行自身的 hover/active 承担。想找回来删掉这一段即可。 */
html.nav-fly[data-paper][data-paper][data-paper][data-paper][data-paper] .sidebar .nav-panel .nav-lights {
  display: none !important;
}

/* ── 打磨 ⑤：浮层压暗从 6% 提到 10%（这一层原来几乎看不出来） ────────────────
   同时把面板投影加强一档 —— "浮层"要靠压暗 + 投影两件事读出来，缺一件就和页面糊在一起。 */
html.nav-fly[data-paper][data-paper][data-paper][data-paper][data-paper] body::before {
  background: rgba(20, 24, 32, .10) !important;
}
html.nav-fly[data-paper][data-paper][data-paper][data-paper][data-paper] .sidebar .nav-panel::before {
  box-shadow: 0 18px 44px -22px rgba(16, 24, 40, .50) !important;
}

/* ── 打磨 ⑥：模块砖的图标与子模块行统一到 17px ──────────────────────────────
   原来轨上 19px、子模块行 17px，两个档混着；同一套导航里图标应该一把尺子。
   （皮肤里那条 `… .nav-rail .nr-btn svg{width:19px}` 又是 !important，所以还是老写法提特异度。） */
html.nav-fly[data-paper][data-paper][data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn svg {
  width: 17px !important; height: 17px !important;
}

/* ── 打磨 ③：浮层与页面之间加一层很轻的压暗 ─────────────────────────────────
   面板是覆盖层，但原来和页面"糊在一起"，读不出这是浮层。
   加一层 6% 的压暗 + 不吃事件（点它仍走"点外面收起"的老逻辑）。 */
html.nav-fly[data-paper][data-paper][data-paper] body::before {
  content: "" !important; position: fixed !important; inset: 0 !important;
  background: rgba(20, 24, 32, .06) !important;
  z-index: 55 !important; pointer-events: none !important;
}

/* ── 打磨 ④：模块砖的小字统一刻度 ───────────────────────────────────────────
   原来字号/字距没统一过（有 10px 也有 11px、字距各家各写）。这里收成一套：
   10.5px / 不额外加字距 / 居中，与子模块行（12px）拉开一档层级。 */
html.nav-fly[data-paper][data-paper][data-paper] .sidebar .nav-rail .nr-btn > span {
  font-size:10.5px !important; letter-spacing: 0 !important;
  line-height: 1.15 !important; max-width: 100%; text-align: center;
}
/* 收起的浮层必须同时退出命中测试：子项 pointer-events:auto 曾穿透透明父层，
   截走订单入口、详情返回等位于左上方的点击。展开态仍由原导航样式控制。 */
@media(min-width:761px){
  html[data-paper]:not(.nav-fly):not(.nav-inline) body:not(.nav-open) .sidebar:not(.nav-stack) .nav-panel{
    visibility:hidden!important;
  }
  html[data-paper]:not(.nav-fly):not(.nav-inline) body:not(.nav-open) .sidebar:not(.nav-stack) .nav-panel *{
    pointer-events:none!important;
  }
}