/* ============================================================================
   侧边栏分类项 · 标签强制靠右 + 名称自适应换行
   ----------------------------------------------------------------------------
   需求：标签必须显示在【右侧】，宽度不够时让名称换行（而不是把标签挤掉）。

   布局：
     flex 单行：[图标] [名称(可换行)] [标签(靠右,不被压缩)]
     名称用 flex:1 + white-space:normal，空间不足时自己折行；
     标签 flex-shrink:0，永远完整显示在右边。
   ============================================================================ */

/* ---------- 分类项：flex 单行，高度随内容自适应 ---------- */
.bx-nav-item {
  display: flex !important;
  /* 垂直居中：单行时紧凑，名称换行时等比撑高 */
  align-items: center !important;
  gap: 9px !important;
  height: auto !important;
  /* 不设 min-height，让 padding 决定高度：单行 = 6+6+18 ≈ 30px，
     比原来的固定 46px 更紧凑，且不会出现多余空白 */
  min-height: 0 !important;
  padding: 7px 14px 7px 22px !important;
  line-height: 1.4 !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* 图标：与文字基线居中对齐，不参与压缩 */
.bx-nav-item .bx-nav-item-ico {
  position: static !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 与首行文字视觉居中，不设 margin-top */
  margin: 0 !important;
  align-self: center !important;
}

/* 名称：占满剩余宽度，不够就换行（不省略、不压缩标签） */
.bx-nav-item .bx-nav-item-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  /* 单行时高度被 flex 居中，不留额外空白 */
  align-self: center !important;
}

/* 标签区：强制靠右，永不压缩 */
.bx-nav-item .bx-metal-tags {
  flex: 0 0 auto !important;      /* 关键：不允许被挤压 */
  align-self: center !important;
  margin: 0 0 0 auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  max-width: none !important;
  overflow: visible !important;
}

.bx-nav-item .bx-metal-tags .bx-metal-tag {
  flex-shrink: 0 !important;
  margin: 0 !important;
  /* 标签本身也不允许被压扁 */
  white-space: nowrap !important;
}

/* 数字徽标：保持在最右 */
.bx-nav-item > .bx-nav-first-count,
.bx-nav-item .bx-nav-item-num {
  position: static !important;
  flex: 0 0 auto !important;
  margin-left: 4px !important;
}

/* ---------- 选中态 ---------- */
.bx-nav-item.active {
  background: #eef4ff !important;
  position: relative !important;
  overflow: hidden !important;
}

.bx-nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  border-radius: 0 !important;
  background: #1e45c4 !important;
  /* 覆盖到圆角边缘 */
  z-index: 1 !important;
}

.bx-nav-item.active .bx-nav-item-name {
  color: #12318f !important;
  font-weight: 700 !important;
}

/* ---------- 极窄场景（侧栏 272px）：名称允许更紧凑 ---------- */
.bx-nav-list {
  overflow-x: visible !important;
}

/* ---------- 移动端抽屉 ---------- */
@media screen and (max-width: 750px) {
  .bx-nav-item {
    padding: 9px 12px 9px 14px !important;
    gap: 8px !important;
  }
  .bx-nav-item .bx-nav-item-name {
    font-size: 13.5px !important;
  }
  .bx-nav-item .bx-metal-tags {
    gap: 3px !important;
  }
}