/* wb_sidebar_compact.css —— PC（erp.hcs168.cn）左侧主菜单紧凑化 + 「系统设置」二级菜单样式
 * @@ sidebar-compact @@ 20260924
 * ----------------------------------------------------------------------------
 * 位置：/opt/wugan_project1/pc_web/wb_sidebar_compact.css，由 pc_web/index.html <head> 引入。
 * 回滚：删除 index.html 中的 <link> 标签即可（本文件留着不生效）。
 *
 * 为什么用外部样式覆盖而不是改打包产物：
 *   侧边栏属于 Vue 打包产物（assets/index-BXcwHmdT.js 的 MainLayout/Sidebar 组件 +
 *   assets/index-Dr-ADDq_.css 的 scoped 样式）。打包产物里的选择器形如
 *   .nav-item[data-v-ca220fd7]（特异性 0-2-0）。本文件全部规则都以 .sidebar 起头
 *   （≥0-3-0），特异性更高，既能稳定覆盖，又不依赖引入顺序、也不用 !important。
 *   DOM 结构本身不动（Vue 怎么渲染还怎么渲染），只改尺寸与间距 —— 风险最小。
 *
 * 改了什么（只动布局，不动颜色/文案/交互）：
 *   1) 主菜单项 49px → 38px：一屏可见 15 项 → 19 项，滚动明显减少；
 *   2) 底部用户区 127px → 66px：由「头像 + 三行文字 + 横排两个大按钮」压成
 *      「头像 + 两行文字（姓名+在线绿点 / 角色胶囊）+ 竖排两个 22px 图标按钮」；
 *   3) 「系统设置」二级菜单（容器 + 4 个子项 + 父项箭头）的折叠/展开样式。
 */

/* ========== 1) 主菜单项：49px → 38px ========== */
.sidebar .nav-menu .nav-item {
  padding-top: 9.5px;
  padding-bottom: 9.5px;
}

/* ========== 2) 「系统设置」父项 + 展开箭头 ==========
 * 箭头与展开态一律用「属性 + 伪元素」，不用 class、不加子节点 ——
 * 父项是 Vue 渲染的，Vue 每次 patch 都会重写它的 class 与子节点，
 * 但不会碰我们额外挂的属性，所以属性标记才能在路由切换后活下来。
 */
.sidebar .nav-menu .nav-item[data-wb-parent]::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}
.sidebar .nav-menu .nav-item[data-wb-parent][data-wb-open]::after {
  transform: rotate(45deg);
  opacity: 0.9;
}
.sidebar .nav-menu .nav-item[data-wb-parent][data-wb-open] {
  color: var(--accent-color, #3b82f6);
  border-left-color: var(--accent-color, #3b82f6);
  background-color: rgba(59, 130, 246, 0.1);
}

/* ========== 3) 二级菜单折叠容器（默认收起，靠 max-height 做动画） ========== */
.sidebar .nav-menu .wb-nav-sub {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.16);
  border-left: 2px solid rgba(59, 130, 246, 0.35);
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
.sidebar .nav-menu .wb-nav-sub[data-wb-open] {
  max-height: 240px;
  opacity: 1;
}

/* ========== 4) 二级菜单项 ========== */
.sidebar .nav-menu .wb-nav-sub .nav-item {
  padding-left: 36px;
  padding-right: 14px;
  font-size: 13px;
  line-height: 1.2;
  border-left: 0;
}
.sidebar .nav-menu .wb-nav-sub .nav-item .nav-icon {
  width: 13px;
  font-size: 11px;
  opacity: 0.85;
}
.sidebar .nav-menu .wb-nav-sub .nav-item.active {
  color: var(--accent-color, #3b82f6);
  background-color: rgba(59, 130, 246, 0.1);
}

/* ========== 5) 底部用户区：127px → 66px ========== */
.sidebar .sidebar-user {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
}
.sidebar .sidebar-user .user-profile {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.sidebar .sidebar-user .user-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
/* 两行：第 1 行「姓名 + 在线绿点」，第 2 行「角色胶囊」 */
.sidebar .sidebar-user .user-meta {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;   /* 姓名定宽（过长才省略号），绿点紧跟其后 */
  justify-content: start;
  column-gap: 5px;
  row-gap: 3px;
  align-items: center;
}
.sidebar .sidebar-user .user-name {
  grid-area: 1 / 1 / 2 / 2;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「在线」两个字收成一个小绿点（原文字仍在 DOM 里，鼠标悬停由 title 提示） */
.sidebar .sidebar-user .user-status-tag {
  grid-area: 1 / 2 / 2 / 3;
  justify-self: start;
  align-self: center;
  font-size: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
.sidebar .sidebar-user .user-role-tag {
  grid-area: 2 / 1 / 3 / 3;
  justify-self: start;
  margin-top: 0;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.5;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「修改密码 / 安全退出」：横排各 70.5×30 撑满 → 竖排各 22×22 图标按钮 */
.sidebar .sidebar-user .user-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.sidebar .sidebar-user .action-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1;
}

/* ========== 6) 「系统设置」下方另外两个注入项（使用频率 / 系统更新日志）随展开态显隐 ==========
 * 由 wb_sidebar_compact.js 在收起时挂 data-wb-hide、展开时摘掉：收起态整体隐藏，
 * 点开「系统设置」才出现。摘掉属性后就落回打包产物原样式，所以这里不用写 display 的具体值。 */
.sidebar .nav-menu .nav-item[data-wb-hide] {
  display: none;
}