/**
 * 按钮组件样式（精简版）
 * @description 保留必要的自定义样式，其余迁移至TailwindCSS
 * @migrated 2025-08-13 - 从208行减至86行
 */

/* ===== CSS变量定义 ===== */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --text-color: #1e293b;
  --accent-color: #3b82f6;
  --accent-light-color: #eff6ff;
  --hover-bg-color: #f8fafc;
  --light-hover-bg-color: #f1f5f9;
  --dark-card-bg-color: #1e293b;
  --dark-border-color: #334155;
  --dark-hover-bg-color: #334155;
}

/* ===== 核心按钮样式（必须保留的!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);
}

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

/* 日间 + 允许玻璃 */
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(148, 163, 184, 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(148, 163, 184, 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(148, 163, 184, 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;
  }
}