/* ═══════════════════════════════════════════════════════════════════
   侧栏视觉覆盖层 v2 —— 上岸脚控 · 运营后台（Operate 模式，信息密度优先）
   ───────────────────────────────────────────────────────────────────
   作用域：本文件每一条规则都以 [data-slot=sidebar] 开头（线上侧栏根节点就是
          `[data-slot="sidebar"]`，主内容区任何节点都不带这个属性），因此：
          · 没有裸元素选择器、没有 :root 级改动；唯一的 `*` 只出现在
            `[data-slot=sidebar] *` 里（动效降级），仍锁在侧栏子树内；
          · 自定义属性 --sb-* 只声明在侧栏根节点上，不继承到主内容区。
   手段：不改 DOM / 不加 class / 不改标签，只用属性选择器压过既有 Tailwind 产物。
         与 ui-patch.css / devices-ui.css 同策略——接在最后一个 <link>，
         同特异性时后加载者胜，跨层覆盖处统一 !important。
   基线：延续 ui-patch.css 的 GitHub 暗色令牌
         底板 #161b22 / 画布 #0d1117 / 描边 #30363d / 分割线 #21262d
         文字 #e6edf3（主）#8b949e（次）#6e7681（弱）#484f58（静）#c9d1d9（正文）
         唯一强调色 红 #f85149；数字 tabular-nums；无渐变 / 毛玻璃 / 发光 /
         循环动画 / 装饰投影；transition ≤ 160ms（实际 120ms）。
   接管：ui-patch.css 第 150–189 行那版侧栏临时规则（分组标题放大写、菜单项压平、
         选中态红字）在本文件里被整段重写：特异性更高 + 加入同一层后加载在后。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 为什么整份文件要包在 @layer utilities 里 ───────────────────────────
   index.css 是 Tailwind v4 产物，所有 `!` 工具类（.data-[slot=sidebar-menu-button]:!p-1.5
   、group-data-[collapsible=icon]:size-8! 等）都在 @layer utilities 内，且带 !important。
   按 CSS 级联规范，!important 声明的层顺序是「反的」——未分层（unlayered）的 !important
   优先级最低，会被任何层内的 !important 压掉，跟选择器特异性无关。
   所以本文件若不进层，品牌按钮的 6px 内边距、折叠态 8px 内边距就盖不掉。
   加入同一个 utilities 层后，层内按「特异性 → 源码顺序」裁决，本文件在后且选择器更具体，
   全部生效。（若生产构建换成不分层的 CSS 产物，这处依赖会翻车，见交付报告的风险项。）
   ─────────────────────────────────────────────────────────────────── */
@layer utilities {

/* ── 一套数（4px 节奏）：行高 30 / 图标 16 / 左右内边距 8 / 图标-文字 10 /
      圆角 6 / 分组气口 10+12 / 动效 120ms ───────────────────────────── */
[data-slot=sidebar] {
  --sb-ink-1: #e6edf3;   /* 选中项、字标：主 */
  --sb-ink-2: #8b949e;   /* 导航项默认：次 */
  --sb-ink-3: #6e7681;   /* 分组标题、页脚元信息：弱 */
  --sb-ink-4: #484f58;   /* 静：禁用/占位 */
  --sb-red: #f85149;     /* 全栏唯一强调色 */
  --sb-line: #21262d;    /* 分割线 */
  --sb-row-h: 30px;
  --sb-icon: 16px;
  --sb-pad: 8px;
  --sb-gap: 10px;
  --sb-radius: 6px;
  --sb-ease: cubic-bezier(.2, 0, 0, 1); /* 先快后缓，用于状态切换而非装饰 */
}

/* ── 外壳 ─────────────────────────────────────────────────────────── */
/* 栏底原来吃 --sidebar:#010409，比画布 #0d1117 更黑，一整条纯黑竖条把左边缘
   压成一条硬边。改成与画布同底的 #0d1117，再用 1px #21262d 描边立形——
   这样 hover 只抬一档（#161b22）就够，不必和纯黑拉大色差。
   圆角 10px 对齐主内容区 .zqsum / 卡片的圆角档，去掉 shadow-sm（暗底上无意义）。 */
[data-slot=sidebar] [data-slot=sidebar-inner] {
  background-color: #0d1117 !important;
  border-color: var(--sb-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ── 栏头：标识 + 字标 ────────────────────────────────────────────── */
/* 原来品牌区是一个居中 20px 位图 + 15px 字，和下方菜单项同高同形，栏头不存在。
   这里把它固定在 30px 行、左对齐、与菜单项共用同一套内边距（8px），
   并在下缘拉一条左右各内缩 12px 的 1px 分隔线，建立「栏头 / 导航」两层。 */
[data-slot=sidebar] [data-slot=sidebar-header] {
  position: relative;
  padding: 12px var(--sb-pad) 10px !important;
  gap: 0 !important;
}
[data-slot=sidebar] [data-slot=sidebar-header]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--sb-line);
}
[data-slot=sidebar] [data-slot=sidebar-header] > ul {
  padding: 0 !important;
  gap: 0 !important;
}
[data-slot=sidebar] [data-slot=sidebar-header] img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 0 !important; /* 硬边标识不要圆角裁切 */
  flex: 0 0 auto;
  display: block;
}
/* 字标：14px/600，负字距收拢，作为「产品名」而不是「一个菜单项」 */
[data-slot=sidebar] [data-slot=sidebar-header] [data-slot=sidebar-menu-button] > span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  color: var(--sb-ink-1) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 导航容器 ────────────────────────────────────────────────────── */
/* 内容区上下各给一点呼吸（8 / 8）：栏头那条 1px 分隔线与第一项之间留出 8px，
   否则线会贴在第一行上；分组之间不再靠 mt-3 堆，改由下面的
   「组间距 + 标题上边距」两段固定值构成，避免标题贴着上一组最后一项。 */
[data-slot=sidebar] [data-slot=sidebar-content] {
  padding: 8px 0 8px !important;
  gap: 0 !important;
}

/* ── 分组 ────────────────────────────────────────────────────────── */
[data-slot=sidebar] [data-slot=sidebar-group] {
  padding: 0 var(--sb-pad) !important;
}
/* 组与组之间 10px 硬气口：标题自己再带 12px 上边距，合计 22px，
   足以断开两段，又不至于把小侧栏切成若干张卡片。 */
[data-slot=sidebar] [data-slot=sidebar-group] + [data-slot=sidebar-group] {
  margin-top: 10px;
}
/* 菜单 ul 的 px-1 / gap-1.5 全部收掉：行距 1px，让 19 项读成一列连续文本，
   而不是一叠有缝的方块；也让图标左边缘与下方标题严格对齐。 */
[data-slot=sidebar] [data-slot=sidebar-group-content] [data-slot=sidebar-menu] {
  padding: 0 !important;
  gap: 1px !important;
}

/* ── 三级层次之「组标题」：11px / 600 / #6e7681 ─────────────────────── */
/* 原来是 15px 粗体 #e6edf3（跟选中项同亮度、比导航项还大），层级整个翻转。
   现在压到 11px、字距 .04em、色降到 #6e7681，左内边距 8px 与图标左缘对齐，
   成为「标签」而不是「标题」。 */
[data-slot=sidebar] [data-slot=sidebar-group-content] > div:first-child:not([data-slot]) {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 11px !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--sb-ink-3) !important;
  padding: 0 var(--sb-pad) !important;
  margin: 12px 0 4px !important;
}
/* 第一个带标题的分组（数据管理）上方不需要 12px，交给内容区 padding 就够 */
[data-slot=sidebar] [data-slot=sidebar-group]:first-of-type [data-slot=sidebar-group-content] > div:first-child:not([data-slot]) {
  margin-top: 4px !important;
}

/* ── 三级层次之「导航项」：默认无盒 ─────────────────────────────────── */
/* 问题：每条都是 border 1px #30363d + bg #161b22 的圆角方盒，一列 18 个盒子，
   描边互相平行，扫读时全是噪点。现在默认 border/bg/box-shadow 全清，
   只留图标 + 文字；盒子只在 hover 时以极轻底色短暂出现。 */
[data-slot=sidebar] [data-slot=sidebar-menu-button] {
  height: var(--sb-row-h) !important;
  min-height: var(--sb-row-h) !important;
  padding: 0 var(--sb-pad) !important;
  gap: var(--sb-gap) !important;
  border: 0 !important;
  border-radius: var(--sb-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sb-ink-2) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  justify-content: flex-start !important; /* 基类里个别项是 justify-center */
  text-align: left !important;
  cursor: pointer;
  /* 只过渡真正会变的三项，不用 transition-all，也不给 0.3s */
  transition: background-color 120ms var(--sb-ease), color 120ms var(--sb-ease),
              box-shadow 120ms var(--sb-ease) !important;
}
/* 图标：统一 16px，默认压到 72% 亮度，hover / 选中提到满亮度 */
[data-slot=sidebar] [data-slot=sidebar-menu-button] > svg {
  width: var(--sb-icon) !important;
  height: var(--sb-icon) !important;
  flex: 0 0 auto;
  stroke-width: 1.85 !important; /* 24 网格缩到 16px 后，默认 2 显得偏重 */
  opacity: .72 !important;
  transition: opacity 120ms var(--sb-ease) !important;
}
/* 折叠箭头（分组管理）：小一号、推到行尾，不做循环动画 */
[data-slot=sidebar] [data-slot=sidebar-menu-button] > svg:not(:first-child) {
  width: 12px !important;
  height: 12px !important;
  margin-left: auto;
  opacity: .55 !important;
}
/* 文字节点直接躺在 button 里（没有包 span），是 flex 里的匿名文本项，
   text-overflow 对它不生效，所以长标签只靠 overflow:hidden 兜底裁切。
   实测 192px 栏宽下最长项「银行检测配置」到行尾还有 ~70px 余量，不会触发。 */
[data-slot=sidebar] [data-slot=sidebar-menu-button] {
  white-space: nowrap;
  overflow: hidden;
}

/* hover：极轻底色浮出，不加描边（原来 hover 还加 border-#8b949e/50，又回到盒子） */
[data-slot=sidebar] [data-slot=sidebar-menu-button]:hover {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
}
[data-slot=sidebar] [data-slot=sidebar-menu-button]:hover > svg { opacity: .95 !important; }

/* ── 三级层次之「选中项」：全栏唯一一处红 ───────────────────────────── */
/* 左侧 2px 红条 + 淡红底 + 近白文字（不再用红字：红字会让整行都在喊，
   且和组标题抢注意力）。红只出现在这条 2px 上，加上图标提到满亮度即完成定位。 */
[data-slot=sidebar] [data-slot=sidebar-menu-button][data-active=true],
[data-slot=sidebar] [data-slot=sidebar-menu-button][aria-current=page] {
  background-color: rgba(248, 81, 73, .10) !important;
  color: var(--sb-ink-1) !important;
  font-weight: 500 !important;
  border: 0 !important;
  box-shadow: inset 2px 0 0 var(--sb-red) !important;
}
[data-slot=sidebar] [data-slot=sidebar-menu-button][data-active=true] > svg,
[data-slot=sidebar] [data-slot=sidebar-menu-button][aria-current=page] > svg {
  color: var(--sb-ink-1) !important;
  opacity: 1 !important;
}
/* 选中项也能 hover：底色略加深，红条与文字不动，避免 hover 把选中态「抹掉」 */
[data-slot=sidebar] [data-slot=sidebar-menu-button][data-active=true]:hover,
[data-slot=sidebar] [data-slot=sidebar-menu-button][aria-current=page]:hover {
  background-color: rgba(248, 81, 73, .14) !important;
  color: var(--sb-ink-1) !important;
}

/* 键盘焦点：沿用 devices-ui.css 已有的 #58a6ff（同一套焦点语言），
   内偏移 2px，焦点框落在 30px 行内，不会盖住相邻行；与选中态的红区分。 */
[data-slot=sidebar] [data-slot=sidebar-menu-button]:focus-visible {
  outline: 2px solid #58a6ff !important;
  outline-offset: -2px !important;
}

/* 禁用项：保留可辨识度，不隐藏、不 pointer-events 穿透（基类已处理穿透） */
[data-slot=sidebar] [data-slot=sidebar-menu-button][aria-disabled=true],
[data-slot=sidebar] [data-slot=sidebar-menu-button]:disabled {
  color: var(--sb-ink-4) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
[data-slot=sidebar] [data-slot=sidebar-menu-button][aria-disabled=true] > svg,
[data-slot=sidebar] [data-slot=sidebar-menu-button]:disabled > svg { opacity: .45 !important; }

/* ── 底部状态条：一行安静元信息 ─────────────────────────────────────── */
/* 原来是 py-3 + 绿色脉冲点 + 14px 文字，像模板自带的「系统正常」徽章。
   现在：11px、#6e7681、与栏头同一套内缩（12px）的 1px 上分割线，
   脉冲点降级成 5px 方点（animate-pulse 保留在 DOM 里，这里 animation:none），
   版本号 tabular-nums 右对齐，整条只剩一行字。 */
[data-slot=sidebar] [data-slot=sidebar-footer] {
  padding: 0 12px 10px !important;
  gap: 0 !important;
}
[data-slot=sidebar] [data-slot=sidebar-footer] > div {
  padding: 9px 0 0 !important;
  border-top: 1px solid var(--sb-line) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--sb-ink-3) !important;
  gap: 6px !important;
}
[data-slot=sidebar] [data-slot=sidebar-footer] > div > span {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: var(--sb-ink-3) !important;
}
/* 状态点：静态 5px 方点，不再脉冲（基类 bg-green-500 + animate-pulse） */
[data-slot=sidebar] [data-slot=sidebar-footer] > div > span:first-child {
  width: 5px !important;
  height: 5px !important;
  border-radius: 1px !important;
  background-color: #3fb950 !important;
  animation: none !important;
  flex: 0 0 auto;
}
/* 版本号：等宽数字，右对齐（基类 ml-auto 保留），字距归零 */
[data-slot=sidebar] [data-slot=sidebar-footer] > div > span:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0 !important;
  color: var(--sb-ink-3) !important;
}

/* ── 矮视口（<900px 高）紧凑节奏 ───────────────────────────────────── */
/* 19 项 × 30px + 5 个分组标题在 900 高下刚好放满（余 17px）。窗口更矮时
   不是给导航加滚动条，而是整条降一档：行高 28、行距 0、气口 6/8。
   同一套令牌只换数值，层次关系不变。 */
@media (max-height: 899px) {
  [data-slot=sidebar] {
    --sb-row-h: 28px;
  }
  [data-slot=sidebar] [data-slot=sidebar-content] {
    padding: 4px 0 6px !important;
  }
  [data-slot=sidebar] [data-slot=sidebar-group] + [data-slot=sidebar-group] {
    margin-top: 6px;
  }
  [data-slot=sidebar] [data-slot=sidebar-group-content] [data-slot=sidebar-menu] {
    gap: 0 !important;
  }
  [data-slot=sidebar] [data-slot=sidebar-group-content] > div:first-child:not([data-slot]) {
    margin: 8px 0 3px !important;
  }
}

/* ── 折叠态（data-collapsible=icon）：66px 图标窄栏 ─────────────────── */
/* 宽度自己算，不依赖基类那串 Tailwind 任意值（w-[calc(var(--sidebar-width-icon)
   +(--spacing(4))+2px)]）—— 任意值有被构建裁掉的风险，这里用同一公式兜底：
   48（图标栏）+ 16（容器 p-2）+ 2（内层边框）= 66px 外宽，内部 48px 装 32px 按钮。
   gap 占位块与 fixed 容器必须同宽，否则主内容会被顶偏。 */
[data-slot=sidebar][data-collapsible=icon] {
  --sb-rail: calc(var(--sidebar-width-icon, 3rem) + 18px);
}
[data-slot=sidebar][data-collapsible=icon] > [data-slot=sidebar-container],
[data-slot=sidebar][data-collapsible=icon] > [data-slot=sidebar-gap] {
  width: var(--sb-rail) !important;
}
/* 栏头：只剩 20px 标识居中，字标与分隔线一起撤掉 */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-header] {
  padding: 12px var(--sb-pad) 10px !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-header]::after {
  display: none;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-header] [data-slot=sidebar-menu-button] {
  width: 32px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: center !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-header] [data-slot=sidebar-menu-button] > span {
  display: none !important;
}
/* 分组标题撤掉后，用一条 1px 短线替代分组气口，否则窄栏会连成一条无结构的竖列 */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group] {
  padding: 0 var(--sb-pad) !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group] + [data-slot=sidebar-group] {
  margin-top: 6px;
  padding-top: 6px !important;
  border-top: 1px solid var(--sb-line);
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-group-content] > div:first-child:not([data-slot]) {
  display: none !important;
}
/* 窄栏里文字是裸文本节点，没法 display:none；把 button 字号归零，
   避免 32px 宽的按钮里露出半个汉字（基类只靠 overflow-hidden 硬切） */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button] {
  font-size: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  /* 32×32 正方形：窄栏里图标是唯一可点目标，横向纵向都要够；
     宽高都写死，避免 base 的 size-8! 与本层行高变量打架 */
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button] > span {
  display: none !important;
}
/* 折叠箭头隐藏，只留主图标 */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button] > svg:not(:first-child) {
  display: none !important;
}
/* 窄栏图标回到 18px：没有文字分担视觉重量，16px 会显得虚 */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-menu-button] > svg:first-child {
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto;
}
/* 页脚：只留状态点（第一个 span），文字全撤并居中；分割线内缩 8px 与分组线对齐 */
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-footer] {
  padding: 0 var(--sb-pad) 10px !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-footer] > div {
  padding-top: 9px !important;
  justify-content: center !important;
}
[data-slot=sidebar][data-collapsible=icon] [data-slot=sidebar-footer] > div > span:not(:first-child) {
  display: none !important;
}

/* ── 动效降级 ────────────────────────────────────────────────────── */
/* 本层只有 120ms 的状态过渡，没有循环动画；系统要求减弱动效时直接归零。
   唯一的 `*` 选择器被限定在 [data-slot=sidebar] 子树内。 */
@media (prefers-reduced-motion: reduce) {
  [data-slot=sidebar] *,
  [data-slot=sidebar] *::before,
  [data-slot=sidebar] *::after,
  /* 下面三条是重复覆盖：上面的 `*` 特异性只有 (0,1,0)，压不过菜单项 / 图标 /
     状态点上带 !important 的具体规则（同在 utilities 层，按特异性裁决） */
  [data-slot=sidebar] [data-slot=sidebar-menu-button],
  [data-slot=sidebar] [data-slot=sidebar-menu-button] > svg,
  [data-slot=sidebar] [data-slot=sidebar-footer] > div > span:first-child {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

} /* ← @layer utilities 收尾 */