/* ============================================================
   Nav Rebuild v1 —— 分组卡片式导航（参考图复刻+超越）
   按业务领域分裂为4组：管理决策/业务前线/职能中心/智能平台
   卡片式：图标上、文字下、选中发光、悬停浮起
   ============================================================ */

.tab-nav {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  padding: 10px 14px 6px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, .3) transparent;
  background: linear-gradient(180deg, rgba(20, 22, 32, .95), rgba(15, 16, 22, .9));
  border-bottom: 1px solid #232530;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- 分组 ---- */
.nav-group {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 0 6px;
}
.nav-group-label {
  font-size: 9px;
  color: #6b7280;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}
.nav-group-items {
  display: flex;
  gap: 4px;
}

/* ---- 分组分隔线 ---- */
.nav-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 6px;
  background: linear-gradient(180deg, transparent, #2d3040 30%, #2d3040 70%, transparent);
  flex: none;
}

/* ---- 卡片式按钮：图标上 + 文字下 ---- */
.tab-nav button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 66px;
  padding: 8px 8px 9px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #9ca0b0 !important;
  cursor: pointer;
  position: relative;
  transition: all .22s cubic-bezier(.3, .8, .4, 1);
  flex: none;
}
.tab-nav .nav-icon {
  font-size: 20px;
  line-height: 1;
  filter: grayscale(.35);
  transition: all .22s ease;
}
.tab-nav .nav-text {
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: .3px;
}

/* ---- 悬停：浮起 + 玻璃底 ---- */
.tab-nav button:hover {
  background: rgba(96, 165, 250, .07) !important;
  border-color: rgba(96, 165, 250, .18) !important;
  color: #dfe3ee !important;
  transform: translateY(-2px);
}
.tab-nav button:hover .nav-icon {
  filter: none;
  transform: scale(1.1);
}

/* ---- 选中：发光胶囊 + 底部指示条（参考图高亮） ---- */
.tab-nav button.active {
  background: linear-gradient(160deg, rgba(59, 130, 246, .20), rgba(37, 99, 235, .10)) !important;
  border-color: rgba(96, 165, 250, .55) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(59, 130, 246, .28), inset 0 0 12px rgba(59, 130, 246, .08);
}
.tab-nav button.active .nav-icon {
  filter: none;
  transform: scale(1.08);
}
.tab-nav button.active::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 3px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
  box-shadow: 0 0 8px rgba(96, 165, 250, .9);
}

/* ---- 点击微反馈 ---- */
.tab-nav button:active {
  transform: translateY(0) scale(.96);
}

/* ---- 空组隐藏（角色裁剪后某组全被隐藏时，连同标签一起消失） ---- */
.nav-group.nav-group-empty {
  display: none !important;
}
/* 空组两侧的分隔线也隐藏（靠相邻选择器做不到，交给JS处理） */

/* ---- 无障碍 ---- */
@media (prefers-reduced-motion: reduce) {
  .tab-nav button, .tab-nav .nav-icon { transition: none !important; }
  .tab-nav button:hover, .tab-nav button.active .nav-icon { transform: none !important; }
}