/* ==========================================================================
   nav-v1 —— 左侧导航的「间距 / 尺寸 / 对齐」覆盖层（v2026.10.08.9）

   为什么单独一个文件而不改 index-ui2-*.css：
   1) index-ui2-*.css 的文件名带内容哈希（8 位）→ 一旦改动就必须换名 + 改引用，
      而侧栏几何是独立关注点，按「holidays-v1-*」同样的版本前缀 + 内容哈希规则
      独立发版更省、影响面更小。
   2) 本文件在 index.html 中排在 index-ui2-*.css 之后，同优先级下天然胜出。

   --------------------------------------------------------------------------
   v1（2026.09.30.6）的一级行只有 .nav-item 能吃到本文件的压缩
   --------------------------------------------------------------------------
   实测（html 基字号 14px，rem 一律按 14 折算）发现三个一级项互不对齐：
     「个人待办」渲染出来是 nav-item-active / nav-item-idle（bundle 内 $ 渲染器
     按选中态二选一），而本文件只写了 .ns-side .nav-item ⇒ 它永远不参与压缩，
     一直是 padding .625rem/.75rem、gap .75rem、行高 35.5px；
     「我的商机」「合同管理」带 nav-item ⇒ 吃到压缩后的 7px/8.75px、gap 7px、行高 32px。
   实测偏差（Chromium 与 WebKit 逐项数值完全一致）：
     图标左沿 Δ 1.75px（大屏）/ 2.62px（紧凑档）/ 3.50px（小屏档）
     文字左沿 Δ 5.25 / 7.00 / 7.88px
     行高     Δ 3.50 / 5.25px
     圆角     10.5px vs 8.75px
   另有三处同源问题：
     ① 「合同管理」「设置」把图标+文字包在 span.gap-3 里，内层间距被本文件钉死成
        .5rem 而不随档位变化 ⇒ 紧凑档下它们的文字比「我的商机」右偏 0.875px
        （基线档两者恰好相等，所以这个 bug 只在紧凑档显形）。
     ② 本文件把 .ns-side-foot 的左右内边距压到 .625rem，却没同步 .ns-nav 的
        px-3（.75rem）⇒ 底部「设置」整行比导航内三项左偏 1.75px（实测 rowX 8.75 vs 10.5）。
     ③ 「个人待办」右上的红点计数 span 继承 .nav-item 的 line-height:1.25rem(17.5px)
        再加 py-0.5(3.5px) = 21px > 图标 18px ⇒ 一旦有待办，行高被顶到 38.5px
        （克隆实测 rowDelta = +3px，大屏/紧凑/小屏三档一致）。

   --------------------------------------------------------------------------
   本版做法：把三档抽成 CSS 变量，三个类名变体一起消费
   --------------------------------------------------------------------------
   以后新增一级项只要挂上 nav-item / nav-item-active / nav-item-idle 任一个，
   就会自动跟随三档，不必再回到这里补一次类名 —— 这正是 v1 踩的那类坑。
   改动只落在本文件：bundle 与 server.js 零改动，无迁移、无新表列、无新增静态文件。

   注意：二级菜单行在 JSX 里内联了 Tailwind 的 !py-2 !pl-3，它们是 !important，
   所以本文件对应规则必须同样带 !important 才能覆盖（同重要度时后出现者胜）。
   注意：不要把 .ns-side-foot 的 `padding` 简写写全 —— 那会覆盖 pb-safe 的
   env(safe-area-inset-bottom)，全面屏手机底部会顶到手势条。故只用长写属性。
   ========================================================================== */

/* ---------- 三档变量：大屏为默认档，紧凑档 / 小屏档只改变量 ---------- */
.ns-side {
  --ns-nav-pad-y: .5rem;     /*  7px    一级行上下内边距 */
  --ns-nav-pad-x: .625rem;   /*  8.75px 一级行左右内边距 = 图标左沿的落点 */
  --ns-nav-gap: .5rem;       /*  7px    图标 ↔ 文字 间距 */
  --ns-nav-radius: .625rem;  /*  8.75px 一级行圆角 */
}
/* ---------- 基础档：大屏 ---------- */
.ns-side .nav-item,
.ns-side .nav-item-active,
.ns-side .nav-item-idle {
  padding: var(--ns-nav-pad-y) var(--ns-nav-pad-x);
  gap: var(--ns-nav-gap);
  border-radius: var(--ns-nav-radius);
}
/* 「合同管理」「设置」把图标+文字包在 span.gap-3 里 —— 内层间距必须与行间距同源，
   否则紧凑档下会比「我的商机」多出 (7 - 6.125) = 0.875px。 */
.ns-side .nav-item > span.gap-3,
.ns-side .nav-item-active > span.gap-3,
.ns-side .nav-item-idle > span.gap-3 { gap: var(--ns-nav-gap); }
/* 红点计数气泡：只允许它继承字号，不允许它继承 .nav-item 的 line-height
   （17.5px + py-0.5 = 21px 会把一级行顶高 3px）。侧栏内只有它同时带 ml-auto 与
   rounded-full，其余右侧计数都是纯文字 span.ml-auto（已实测核对归属）。 */
.ns-side span.ml-auto.rounded-full { line-height: 1rem; }
.ns-side nav.ns-nav { margin-top: .125rem; padding-bottom: .5rem; }
.ns-side nav.ns-nav > div.pt-1 { padding-top: 0; }
.ns-side .ns-navsub { margin-top: .125rem; padding-left: .375rem; }
.ns-side .ns-navsub .nav-item,
.ns-side .ns-navsub .nav-item-active,
.ns-side .ns-navsub .nav-item-idle { padding: .375rem .5rem !important; border-radius: .5rem; }
/* 左右内边距必须与 .ns-nav 的 px-3（.75rem）一致，否则底部「设置」整行左偏 */
.ns-side .ns-side-foot { padding-top: .5rem; padding-left: .75rem; padding-right: .75rem; }
.ns-side .ns-side-foot .ns-navsub { max-height: min(46vh, 17.5rem); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- 紧凑档：横向 <= 1366px 或 纵向 <= 860px ---------- */
@media (max-width: 1365.98px), (max-height: 860px) {
  .ns-side {
    --ns-nav-pad-y: .4375rem;
    --ns-nav-pad-x: .5625rem;
    --ns-nav-gap: .4375rem;
  }
  .ns-side .ns-navsub .nav-item,
  .ns-side .ns-navsub .nav-item-active,
  .ns-side .ns-navsub .nav-item-idle { padding: .3125rem .4375rem !important; }
  .ns-side nav.ns-nav { padding-bottom: .375rem; }
}

/* ---------- 小屏档：抽屉形态（< 1024px，含平板竖屏与手机） ---------- */
@media (max-width: 1023.98px) {
  .ns-side { width: 200px; --ns-nav-pad-x: .5rem; }
  .ns-side > div.h-16 { height: 3rem; }
  .ns-side .ns-navsub { padding-left: .25rem; }
  .ns-side .ns-side-foot { padding-top: .4375rem; padding-left: .75rem; padding-right: .75rem; }
  .ns-side .ns-side-foot .ns-navsub { max-height: min(40vh, 14rem); }
}

/* ---------- 极窄屏 ---------- */
@media (max-width: 419.98px) {
  .ns-side { width: 184px; }
}