/* ============================================================
   爪游 dashboard 菜单栏美化 2026-09-18
   分离感 + 胶囊导航 + hover 反馈 + active 渐变高亮 + 细滚动条
   ============================================================ */

/* 1. 侧栏与内容区分离感：清晰右边框 + 柔和投影 */
.dashboard-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 1px 0 28px rgba(0, 0, 0, 0.4) !important;
}

/* 2. 主导航按钮：平滑过渡（颜色/背景/阴影/位移） */
.dashboard-sidebar .shadcn-dashboard-nav {
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, transform 0.18s ease !important;
}

/* 3. hover：微亮背景 + 轻推效果 */
.dashboard-sidebar .shadcn-dashboard-nav:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(2px);
}

/* 4. active：青蓝渐变胶囊 + 内描边发光 */
.dashboard-sidebar .shadcn-dashboard-nav.active {
  background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(129, 140, 248, 0.14)) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.28) inset, 0 2px 12px rgba(56, 189, 248, 0.15) !important;
  color: #fff !important;
}

/* 5. 分组标题：可读性增强 */
.dashboard-sidebar .dashboard-menu-title {
  color: rgba(255, 255, 255, 0.42) !important;
  letter-spacing: 0.06em;
}

/* 6. 二级菜单项：过渡 + hover + active */
.dashboard-sidebar .dashboard-subnav {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.dashboard-sidebar .dashboard-subnav:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.dashboard-sidebar .dashboard-subnav.active {
  background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(129, 140, 248, 0.12)) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) inset !important;
  color: #fff !important;
}

/* 7. 顶部快速操作栏：与内容区分隔 */
.dashboard-home-quick-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* 8. 侧栏细滚动条 */
.dashboard-sidebar::-webkit-scrollbar { width: 6px; }
.dashboard-sidebar::-webkit-scrollbar-track { background: transparent; }
.dashboard-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}