/**
 * 按钮组件样式（精简版）
 * @description 保留必要的自定义样式，其余迁移至TailwindCSS
 * @migrated 2025-08-13 - 从208行减至86行
 * @updated 2025-01-XX - 移除变量定义，统一使用 theme.css 中的变量
 */

/* ===== CSS变量定义 ===== */
/* 注意：所有主题变量已迁移至 theme.css，此处不再定义变量 */
/* 使用 var(--shadow-sm), var(--text-color), var(--accent-color) 等引用 theme.css 中的变量 */

/* ===== 核心按钮样式（必须保留的!important） ===== */
/* 兼容旧的 btn-text 类 - 使用CSS变量而非硬编码 */
.btn-text {
  /* 使用@apply替代重复样式 */
  @apply relative flex items-center justify-center rounded transition-all duration-200 font-normal;

  /* 必须保留的自定义样式 */
  box-shadow: var(--shadow-sm) !important;
  /* 背景由玻璃模式规则控制，不再硬编码 */
}

/* ===== 全局按钮样式（与管理页统一） ===== */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 次要按钮样式 */
.btn-secondary {
  @apply bg-slate-500 text-white;
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 轮廓按钮样式 */
.btn-outline {
  @apply bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 border-2 border-slate-300 dark:border-slate-600;
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  @apply bg-slate-50 dark:bg-slate-600 border-indigo-400 dark:border-indigo-500 text-indigo-600 dark:text-indigo-400;
  box-shadow: var(--shadow-md);
}

/* 大尺寸按钮 */
.btn-large {
  @apply px-6 py-3 text-base;
}

/* ===== 玻璃模式样式 ===== */

/* 日间 + 允许玻璃 */
html:not(.dark) body:not(.no-glassmorphism) .btn-text {
  background-color: rgba(248, 250, 252, var(--glass-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  backdrop-filter: blur(6px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 禁用玻璃 */
html:not(.dark) body.no-glassmorphism .btn-text {
  background-color: rgba(248, 250, 252, 0.8) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* 暗色模式 */
/* 夜间 + 允许玻璃时：按钮采用轻度半透明，营造通透感 */
:root.dark body:not(.no-glassmorphism) .btn-text {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.26) !important; /* slate-400/26 */
  color: #e2e8f0; /* slate-200 */
  backdrop-filter: blur(6px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 夜间 + 禁用玻璃（或日间）：按钮保持不透明深色，保障可读性 */
:root.dark body.no-glassmorphism .btn-text {
  background-color: rgba(30, 41, 59, 0.85) !important; /* slate-800/85 */
  border: 1px solid rgba(71, 85, 105, 0.6) !important; /* slate-600 */
  color: #e2e8f0; /* slate-200 */
}

/* 悬停效果 */
.btn-text:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

:root:not(.dark) .btn-text:hover {
  background-color: var(--light-hover-bg-color) !important;
}

/* 夜间 hover：两种态分别处理 */
:root.dark body:not(.no-glassmorphism) .btn-text:hover {
  background-color: rgba(30, 41, 59, 0.40) !important; /* 稍加深 */
  border-color: rgba(var(--dark-border-color-rgb), 0.36) !important;
}

:root.dark body.no-glassmorphism .btn-text:hover {
  background-color: rgba(51, 65, 85, 0.85) !important; /* slate-700/85 */
  border-color: rgba(var(--dark-border-color-rgb), 0.3) !important; /* slate-400/30 */
}

/* ===== 下拉菜单焦点状态 ===== */
.dropdown-item:focus,
.sort-option:focus,
.group-option:focus {
  @apply bg-blue-50 outline-2 outline-blue-500/50 -outline-offset-2;
}

/* ===== 激活状态 ===== */
.active-dropdown {
  @apply bg-slate-50 border-blue-500 text-blue-500;
}

.sort-option.active {
  @apply bg-indigo-50 text-indigo-600;
}

.dark .sort-option.active {
  @apply bg-indigo-900/20 text-indigo-400;
}

/* ===== 动画（必须保留） ===== */
@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 响应式（使用Tailwind断点） ===== */
@media (max-width: 768px) {
  .dropdown-menu {
    @apply max-w-[calc(100vw-1rem)] mx-2;
  }
}