src/assets/css/sidebar-enhanced.css
/* 侧边栏增强样式 - 专门解决对齐问题 */

/* 全局抗抖动优化 */
.sidebar * {
  /* 防止所有侧边栏子元素在动画过程中的抖动 */
  backface-visibility: hidden;
  /* 使用GPU加速 */
  transform: translateZ(0);
  /* 防止字体渲染抖动 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 侧边栏展开/收起时的过渡优化 */
.sidebar.sidebar-transitioning {
  /* 在动画过程中临时禁用某些效果以减少抖动 */
  pointer-events: none;
}

.sidebar.sidebar-transitioning * {
  /* 确保动画过程中的流畅性 */
  will-change: auto;
}

/* 侧边栏基础结构 - 确保完美对齐和流畅动画 */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 64px;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* 与动画配合使用，提供备用方案 */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow-medium);
  z-index: 50;
  overflow: hidden;
  box-sizing: border-box;
  /* 优化渲染性能 */
  will-change: width;
  /* 使用硬件加速 */
  transform: translateZ(0);
  /* 防止子元素溢出造成的抖动 */
  contain: layout;
}

.sidebar.sidebar-expanded {
  width: 220px;
}

/* 侧边栏头部 - 优化动画 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 4rem;
  border-bottom: 1px solid oklch(var(--bc) / 0.1);
  flex-shrink: 0;
  /* 防止头部内容变化时的抖动 */
  will-change: justify-content;
}

.sidebar.sidebar-expanded .sidebar-header {
  justify-content: flex-start;
}

.sidebar-header img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  /* 防止图标移动时的抖动 */
  will-change: transform;
}

/* 收起状态下logo图标向右对齐 - 优化动画 */
.sidebar:not(.sidebar-expanded) .sidebar-header img {
  transform: translateX(4px); /* 与下方图标保持一致的偏移 */
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 展开状态下logo图标正常位置 */
.sidebar.sidebar-expanded .sidebar-header img {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar-title {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-weight: 700;
  font-size: 1.125rem;
  margin-left: 0;
  /* 防止文本出现时的抖动 */
  will-change: opacity, width;
  /* 确保文本不会造成布局抖动 */
  min-width: 0;
  /* 防止字体渲染抖动 */
  font-variant-numeric: tabular-nums;
}

.sidebar.sidebar-expanded .sidebar-title {
  opacity: 1;
  width: auto;
  margin-left: 0.75rem;
}

/* 主菜单区域 - 优化动画 */
.sidebar .menu {
  padding: 0.5rem;
  gap: 0.25rem;
  flex-shrink: 0;
  /* 防止菜单项布局变化时的抖动 */
  will-change: contents;
}

.sidebar .menu li {
  margin-bottom: 0;
}

.sidebar .menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  min-height: 3rem;
  width: 100%;
  border-radius: 0.75rem;
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: transparent;
  border: none;
  text-decoration: none;
  color: oklch(var(--bc));
  position: relative;
  overflow: hidden;
  /* 防止菜单项变化时的抖动 */
  will-change: padding, justify-content;
  /* 确保菜单项不会造成布局抖动 */
  contain: layout;
}

.sidebar.sidebar-expanded .menu li a {
  justify-content: flex-start;
  padding: 0.75rem 1rem;
}

/* 图标样式统一 - 优化动画 */
.sidebar .menu li a .iconify,
.sidebar .menu li a svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  margin: 0;
  /* 防止图标移动时的抖动 */
  will-change: margin;
}

.sidebar.sidebar-expanded .menu li a .iconify,
.sidebar.sidebar-expanded .menu li a svg {
  margin-right: 0.75rem;
}

/* 菜单文本控制 - 优化动画 */
.sidebar .menu li a .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-weight: 500;
  /* 防止文本出现时的抖动 */
  will-change: opacity, width;
  /* 确保文本不会造成布局抖动 */
  min-width: 0;
  /* 防止字体渲染抖动 */
  font-variant-numeric: tabular-nums;
}

.sidebar.sidebar-expanded .menu li a .sidebar-text {
  opacity: 1;
  width: auto;
}

/* 悬停和激活状态 - 优化动画 */
.sidebar .menu li a:hover {
  background: var(--glass-bg);
  color: oklch(var(--p));
  transform: translateX(2px);
  box-shadow: var(--shadow-soft);
  border: 1px solid oklch(var(--p) / 0.2);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 收起状态下的悬停效果 - 优化动画 */
.sidebar:not(.sidebar-expanded) .menu li a:hover {
  transform: none;
  border: 1px solid oklch(var(--p) / 0.2);
  background: var(--glass-bg);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 收起状态下的特殊悬停样式 */
.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li a:hover {
  background: var(--glass-bg);
  border: 1px solid oklch(var(--p) / 0.2);
  color: oklch(var(--p));
  transform: none;
  box-shadow: var(--shadow-soft);
}

.sidebar:not(.sidebar-expanded) .sidebar-footer .btn:hover {
  background: var(--glass-bg);
  border: 1px solid oklch(var(--p) / 0.2);
  color: oklch(var(--p));
  transform: none;
  box-shadow: var(--shadow-soft);
}

.sidebar .menu li a.active {
  color: oklch(var(--p));
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid transparent;
}

.sidebar .menu li a.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    oklch(var(--p) / 0.15) 0%, 
    oklch(var(--s) / 0.1) 100%);
  border: 1px solid oklch(var(--p) / 0.2);
  border-radius: inherit;
  box-shadow: var(--shadow-soft);
  z-index: -1;
  animation: slide-background-down 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar .menu li a.active.slide-up::after {
  animation: slide-background-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar .menu li a.active::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1rem;
  background: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
  border-radius: 4px;
  animation: slide-bar-down 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.sidebar .menu li a.active.slide-up::before {
  animation: slide-bar-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* 向下滑入的背景动画 */
@keyframes slide-background-down {
  0% {
    transform: translateY(-100%) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(8%) scale(1.02);
    opacity: 0.9;
  }
  80% {
    transform: translateY(-2%) scale(0.98);
    opacity: 1;
  }
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
}

/* 向上滑入的背景动画 */
@keyframes slide-background-up {
  0% {
    transform: translateY(100%) scale(0.95);
    opacity: 0;
  }
  60% {
    transform: translateY(-8%) scale(1.02);
    opacity: 0.9;
  }
  80% {
    transform: translateY(2%) scale(0.98);
    opacity: 1;
  }
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
}

/* 向下滑入的蓝条动画 */
@keyframes slide-bar-down {
  0% {
    transform: translateY(-150%) scale(0.8, 0.6);
    opacity: 0;
  }
  50% {
    transform: translateY(-35%) scale(1.1, 1.3);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-55%) scale(0.95, 0.9);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 1;
  }
}

/* 向上滑入的蓝条动画 */
@keyframes slide-bar-up {
  0% {
    transform: translateY(50%) scale(0.8, 0.6);
    opacity: 0;
  }
  50% {
    transform: translateY(-65%) scale(1.1, 1.3);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-45%) scale(0.95, 0.9);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 1;
  }
}

/* Flex-grow 区域 */
.sidebar .flex-grow {
  flex: 1;
  min-height: 0;
}

/* 底部设置区域 */
.sidebar-footer-section {
  flex-shrink: 0;
  padding: 0.5rem;
  margin-bottom: 0;
}

.sidebar-footer-section .menu {
  padding: 0;
  margin: 0;
}

.sidebar-footer-section .menu li a {
  margin: 0;
  box-sizing: border-box;
}

/* 确保设置按钮在收起状态下也完全居中且圆角不被遮挡 */
.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li a {
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  margin: 0;
  border-radius: 0.75rem;
  overflow: visible;
}

/* 底部收起按钮区域 - 优化动画 */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid oklch(var(--bc) / 0.1);
  flex-shrink: 0;
  /* 防止底部按钮变化时的抖动 */
  will-change: contents;
}

.sidebar-footer .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: transparent;
  border: none;
  color: oklch(var(--bc));
  transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-size: 0.875rem;
  box-sizing: border-box;
  /* 防止按钮变化时的抖动 */
  will-change: padding, justify-content;
  /* 确保按钮不会造成布局抖动 */
  contain: layout;
}

.sidebar.sidebar-expanded .sidebar-footer .btn {
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}

.sidebar-footer .btn:hover {
  background: var(--glass-bg);
  color: oklch(var(--p));
  border: 1px solid oklch(var(--p) / 0.2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar-footer .btn .iconify {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex-shrink: 0;
  /* 防止图标移动时的抖动 */
  will-change: transform;
}

/* 收起按钮文本控制 - 优化动画 */
.sidebar-footer .btn .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* 防止文本出现时的抖动 */
  will-change: opacity, width;
  /* 确保文本不会造成布局抖动 */
  min-width: 0;
  /* 防止字体渲染抖动 */
  font-variant-numeric: tabular-nums;
}

.sidebar.sidebar-expanded .sidebar-footer .btn .sidebar-text {
  opacity: 1;
  width: auto;
  margin-left: 0.5rem;
}

/* 收起状态下所有图标向右偏移 - 优化动画 */
.sidebar:not(.sidebar-expanded) .menu li a .iconify,
.sidebar:not(.sidebar-expanded) .menu li a svg,
.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li a .iconify,
.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li a svg,
.sidebar:not(.sidebar-expanded) .sidebar-footer .btn .iconify,
.sidebar:not(.sidebar-expanded) .sidebar-footer .btn svg {
  transform: translateX(4px); /* 向右移动4像素 */
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 确保展开状态下图标位置正常 - 优化动画 */
.sidebar.sidebar-expanded .menu li a .iconify,
.sidebar.sidebar-expanded .menu li a svg,
.sidebar.sidebar-expanded .sidebar-footer-section .menu li a .iconify,
.sidebar.sidebar-expanded .sidebar-footer-section .menu li a svg,
.sidebar.sidebar-expanded .sidebar-footer .btn .iconify,
.sidebar.sidebar-expanded .sidebar-footer .btn svg {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 延迟展示文本以防止闪烁 */
.sidebar:not(.sidebar-expanded) .sidebar-text,
.sidebar:not(.sidebar-expanded) .sidebar-title {
  transition-delay: 0s;
  opacity: 0;
  width: 0;
}

.sidebar.sidebar-expanded .sidebar-text,
.sidebar.sidebar-expanded .sidebar-title {
  /* 延迟显示文本，等待宽度动画完成 */
  transition-delay: 0.15s;
  opacity: 1;
  width: auto;
}

/* 收起时立即隐藏文本 */
.sidebar.sidebar-transitioning:not(.sidebar-expanded) .sidebar-text,
.sidebar.sidebar-transitioning:not(.sidebar-expanded) .sidebar-title {
  transition-delay: 0s;
  opacity: 0;
  width: 0;
}

/* 侧边栏展开时的微妙弹性效果 */
@keyframes sidebar-expand {
  0% {
    width: 64px;
  }
  85% {
    width: 225px; /* 稍微超出目标宽度 */
  }
  100% {
    width: 220px; /* 回到正常宽度 */
  }
}

@keyframes sidebar-collapse {
  0% {
    width: 220px;
  }
  85% {
    width: 59px; /* 稍微小于目标宽度 */
  }
  100% {
    width: 64px; /* 回到正常宽度 */
  }
}

/* 应用弹性动画 */
.sidebar.sidebar-expanded {
  animation: sidebar-expand 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sidebar:not(.sidebar-expanded) {
  animation: sidebar-collapse 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 当不支持动画时的备用方案 */
@media (prefers-reduced-motion: reduce) {
  .sidebar.sidebar-expanded,
  .sidebar:not(.sidebar-expanded) {
    animation: none;
  }
}

/* 响应式处理 */
@media (max-width: 768px) {
  .sidebar,
  .sidebar.sidebar-expanded {
    width: 64px;
  }
  
  .sidebar-text,
  .sidebar-title {
    display: none !important;
  }
  
  .sidebar .menu li a:hover {
    transform: none;
  }
  
  .sidebar-footer .btn:hover {
    transform: none;
  }
}

/* 确保在不同主题下的一致性 */
[data-theme="dark"] .sidebar,
[data-theme="night"] .sidebar,
[data-theme="black"] .sidebar,
[data-theme="dracula"] .sidebar {
  background: rgba(0, 0, 0, 0.8);
  border-right-color: rgba(255, 255, 255, 0.1);
}

/* 确保菜单项在收起状态下完全居中 */
.sidebar:not(.sidebar-expanded) .menu li a {
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.sidebar:not(.sidebar-expanded) .menu li a .iconify,
.sidebar:not(.sidebar-expanded) .menu li a svg {
  margin: 0 auto;
}

/* 确保所有Iconify图标都有统一的样式 */
.sidebar .iconify {
  font-size: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 确保收起状态下所有按钮完美居中 */
.sidebar:not(.sidebar-expanded) {
  align-items: center;
}

.sidebar:not(.sidebar-expanded) .menu li {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.sidebar:not(.sidebar-expanded) .menu li a {
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.75rem;
  margin: 0;
}

.sidebar:not(.sidebar-expanded) .sidebar-footer .btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 0.75rem;
  margin: 0;
  justify-content: center;
  align-items: center;
}

/* 确保设置区域的按钮也遵循相同规则 */
.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.sidebar:not(.sidebar-expanded) .sidebar-footer-section .menu li a {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* 确保图标在收起状态下完全居中 */
.sidebar:not(.sidebar-expanded) .iconify {
  margin: 0 !important;
  position: static;
  transform: translateX(4px); /* 向右移动4像素 */
}

/* 修复可能的容器padding问题 */
.sidebar:not(.sidebar-expanded) .menu {
  padding: 0.5rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar:not(.sidebar-expanded) .sidebar-footer-section {
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar:not(.sidebar-expanded) .sidebar-footer {
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 确保所有按钮的默认状态都没有边框 */
.sidebar .menu li a,
.sidebar-footer-section .menu li a {
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 移除DaisyUI默认的btn样式干扰 */
.sidebar-footer .btn.btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: oklch(var(--bc)) !important;
}

.sidebar-footer .btn.btn-ghost:hover {
  background: var(--glass-bg) !important;
  border: 1px solid oklch(var(--p) / 0.2) !important;
  color: oklch(var(--p)) !important;
}
