/* ========================================
   侧边栏菜单自定义样式
   Sidebar Menu Custom Styles
   基于实际HTML结构编写
   ======================================== */

/* 菜单容器 */
.sidebar-menu {
  padding: 15px 10px;
}

/* 菜单项包装器 - 基础样式 */
.sidebar-menu-link-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 20px;
  margin-bottom: 12px;

  /* 边框和圆角 */
  border: none;
  border-radius: 10px;

  /* 背景 */
  background: rgba(255, 255, 255, 0.95);

  /* 阴影 */
  box-shadow: 0 2px 8px rgba(255, 82, 82, 0.1);

  /* 过渡动画 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 鼠标样式 */
  cursor: pointer;
}

/* 暗黑模式适配 */
html[data-theme="dark"] .sidebar-menu-link-wrap {
  background: rgba(34, 39, 46, 0.95);
  box-shadow: 0 2px 8px rgba(255, 82, 82, 0.2);
}

/* 悬停效果 */
.sidebar-menu-link-wrap:hover {
  background: var(--red-1);
  transform: translateX(8px) scale(1.02);
  box-shadow: 0 6px 16px rgba(255, 82, 82, 0.3);
}

html[data-theme="dark"] .sidebar-menu-link-wrap:hover {
  background: var(--red-4);
}

/* 激活状态 */
.sidebar-menu-link-wrap.link-active {
  background: var(--red-1);
  box-shadow: 0 4px 12px rgba(255, 82, 82, 0.25);
  font-weight: 600;
}

html[data-theme="dark"] .sidebar-menu-link-wrap.link-active {
  background: var(--red-5);
}

/* 隐藏的链接（保持可访问性） */
.sidebar-menu-link-dummy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

/* 图标容器 */
.sidebar-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  position: relative;
  z-index: 0;
  transition: transform 0.3s ease;
}

.sidebar-menu-link-wrap:hover .sidebar-menu-icon {
  transform: rotate(360deg) scale(1.1);
}

/* 图标图片 */
.sidebar-menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 默认红色滤镜 */
  filter: brightness(0) saturate(100%) invert(43%) sepia(78%) saturate(2476%) hue-rotate(334deg) brightness(101%) contrast(101%);
  transition: filter 0.3s ease;
}

/* 悬停和激活状态下的图标颜色变为白色 */
.sidebar-menu-link-wrap:hover .sidebar-menu-icon img,
.sidebar-menu-link-wrap.link-active .sidebar-menu-icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* 暗黑模式下的图标颜色 */
html[data-theme="dark"] .sidebar-menu-icon img {
  filter: brightness(0) saturate(100%) invert(82%) sepia(18%) saturate(1234%) hue-rotate(304deg) brightness(103%) contrast(101%);
}

/* 文字容器 */
.sidebar-menu-link {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--red-1);
  position: relative;
  z-index: 0;
  transition: color 0.3s ease;
}

/* 悬停和激活状态下的文字颜色 */
.sidebar-menu-link-wrap:hover .sidebar-menu-link,
.sidebar-menu-link-wrap.link-active .sidebar-menu-link {
  color: white;
}

/* 暗黑模式下的文字颜色 */
html[data-theme="dark"] .sidebar-menu-link {
  color: var(--red-3);
}

html[data-theme="dark"] .sidebar-menu-link-wrap:hover .sidebar-menu-link,
html[data-theme="dark"] .sidebar-menu-link-wrap.link-active .sidebar-menu-link {
  color: var(--red-0);
}

/* 添加左侧装饰条 */
.sidebar-menu-link-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: var(--red-0);
  border-radius: 0 4px 4px 0;
  transition: height 0.3s ease;
}

.sidebar-menu-link-wrap:hover::before,
.sidebar-menu-link-wrap.link-active::before {
  height: 60%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar-menu {
    padding: 10px 5px;
  }

  .sidebar-menu-link-wrap {
    padding: 12px 16px;
    margin-bottom: 10px;
  }

  .sidebar-menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .sidebar-menu-link {
    font-size: 15px;
  }
}


/* ========================================
   可选样式方案（取消注释使用）
   Alternative Style Options
   ======================================== */

/* 方案1: 简约风格 - 无边框，底部线条 */
/*
.sidebar-menu-link-wrap {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 16px;
}

.sidebar-menu-link-wrap:hover,
.sidebar-menu-link-wrap.link-active {
  background: rgba(255, 82, 82, 0.05);
  border-bottom-color: var(--red-1);
  transform: translateX(4px);
}

.sidebar-menu-link-wrap::before {
  display: none;
}
*/

/* 方案2: 圆形图标 + 右侧文字 */
/*
.sidebar-menu-link-wrap {
  border-radius: 50px;
  padding: 10px 20px 10px 10px;
}

.sidebar-menu-icon {
  width: 36px;
  height: 36px;
  background: var(--red-5);
  border-radius: 50%;
  padding: 8px;
}

.sidebar-menu-link-wrap:hover .sidebar-menu-icon,
.sidebar-menu-link-wrap.link-active .sidebar-menu-icon {
  background: white;
}
*/

/* 方案3: 渐变背景 */
/*
.sidebar-menu-link-wrap:hover,
.sidebar-menu-link-wrap.link-active {
  background: linear-gradient(135deg, var(--red-1) 0%, var(--red-2) 100%);
}
*/

/* 方案4: 3D效果 */
/*
.sidebar-menu-link-wrap {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
              0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-menu-link-wrap:hover {
  box-shadow: 0 10px 20px rgba(255, 82, 82, 0.2),
              0 6px 6px rgba(0, 0, 0, 0.1),
              inset 0 -2px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.sidebar-menu-link-wrap:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
              inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}
*/

/* 方案5: 毛玻璃效果 */
/*
.sidebar-menu-link-wrap {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .sidebar-menu-link-wrap {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
*/

/* 方案6: 发光效果 */
/*
.sidebar-menu-link-wrap:hover,
.sidebar-menu-link-wrap.link-active {
  box-shadow: 0 0 20px rgba(255, 82, 82, 0.6),
              0 0 40px rgba(255, 82, 82, 0.3),
              0 0 60px rgba(255, 82, 82, 0.1);
}
*/

/* 方案7: 下划线动画 */
/*
.sidebar-menu-link-wrap {
  border: none;
  border-radius: 0;
  background: transparent;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
}

.sidebar-menu-link-wrap::before {
  display: none;
}

.sidebar-menu-link-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red-1);
  transition: width 0.3s ease;
}

.sidebar-menu-link-wrap:hover::after,
.sidebar-menu-link-wrap.link-active::after {
  width: 100%;
}
*/

/* 方案8: 卡片堆叠效果 */
/*
.sidebar-menu-link-wrap {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg);
}

.sidebar-menu-link-wrap::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  background: var(--red-5);
  border-radius: 10px;
  z-index: -1;
  transform: translateZ(-10px);
  transition: all 0.3s ease;
}

.sidebar-menu-link-wrap:hover {
  transform: perspective(1000px) rotateX(5deg) translateY(-3px);
}

.sidebar-menu-link-wrap:hover::after {
  transform: translateZ(-20px);
}
*/