/**
 * 全项目通用按钮样式
 *
 * 使用说明：
 * 1. 定义基础按钮样式类 .core-btn
 * 2. 提供多种变体：尺寸、颜色、风格
 * 3. 所有按钮样式基于 variables.css 的 CSS 变量
 * 4. 支持响应式和自定义扩展
 */

/* ==================== 基础按钮样式 ==================== */

.core-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

/* 链接按钮 */
a.core-btn {
  text-decoration: none;
}

/* ==================== 按钮尺寸 ==================== */

/* 极小按钮 */
.core-btn.btn-xs {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  min-height: 24px;
}

/* 小按钮 */
.core-btn.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  min-height: var(--input-height-sm);
}

/* 标准按钮（默认） */
.core-btn.btn-base {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: var(--button-height-base);
}

/* 大按钮 */
.core-btn.btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  min-height: var(--button-height-lg);
}

/* 块级按钮 */
.core-btn.btn-block {
  display: flex;
  width: 100%;
}

/* ==================== 按钮颜色变体 ==================== */

/* 主要按钮 - 确认、提交、保存 */
.core-btn.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary);
}

.core-btn.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* 成功按钮 - 添加、新建、确认 */
.core-btn.btn-success {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-white);
}

.core-btn.btn-success:hover {
  background-color: #458f26;
  border-color: #458f26;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-success:active {
  transform: translateY(0);
}

/* 危险按钮 - 删除、取消 */
.core-btn.btn-danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-white);
}

.core-btn.btn-danger:hover {
  background-color: #b02a37;
  border-color: #b02a37;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-danger:active {
  transform: translateY(0);
}

/* 警告按钮 */
.core-btn.btn-warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  color: var(--text-white);
}

.core-btn.btn-warning:hover {
  background-color: #d9830f;
  border-color: #d9830f;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-warning:active {
  transform: translateY(0);
}

/* 信息按钮 - 查看、详情 */
.core-btn.btn-info {
  background-color: var(--info-color);
  border-color: var(--info-color);
  color: var(--text-white);
}

.core-btn.btn-info:hover {
  background-color: #00a3d1;
  border-color: #00a3d1;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-info:active {
  transform: translateY(0);
}

/* 次要按钮 - 取消、关闭、重置 */
.core-btn.btn-secondary {
  background-color: var(--text-secondary);
  border-color: var(--text-secondary);
  color: var(--text-white);
}

.core-btn.btn-secondary:hover {
  background-color: #555555;
  border-color: #555555;
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.core-btn.btn-secondary:active {
  transform: translateY(0);
}

/* 幽灵按钮 - 轻量操作 */
.core-btn.btn-ghost {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}

.core-btn.btn-ghost:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* 链接按钮 */
.core-btn.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.core-btn.btn-link:hover {
  background-color: var(--primary-light);
  color: var(--primary-hover);
  text-decoration: none;
}

/* ==================== 按钮语义化变体（基于操作） ==================== */

/* 查询按钮 */
.core-btn.btn-search {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary);
}

.core-btn.btn-search:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* 重置按钮 */
.core-btn.btn-reset {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.core-btn.btn-reset:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* 编辑按钮 */
.core-btn.btn-edit {
  background-color: var(--info-color);
  border-color: var(--info-color);
  color: var(--text-white);
}

.core-btn.btn-edit:hover {
  background-color: #00a3d1;
  border-color: #00a3d1;
}

/* 删除按钮 */
.core-btn.btn-delete {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-white);
}

.core-btn.btn-delete:hover {
  background-color: #b02a37;
  border-color: #b02a37;
}

/* 保存按钮 */
.core-btn.btn-save {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-white);
}

.core-btn.btn-save:hover {
  background-color: #458f26;
  border-color: #458f26;
}

/* 新建按钮 */
.core-btn.btn-add {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: var(--text-white);
}

.core-btn.btn-add:hover {
  background-color: #458f26;
  border-color: #458f26;
}

/* 提交按钮 */
.core-btn.btn-submit {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary);
  font-weight: var(--font-weight-semibold);
}

.core-btn.btn-submit:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* 取消按钮 */
.core-btn.btn-cancel {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.core-btn.btn-cancel:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* 关闭按钮（图标按钮变体） */
.core-btn.btn-close {
  padding: 0;
  width: 32px;
  height: 32px;
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.core-btn.btn-close:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.core-btn.btn-close.btn-close-white {
  color: var(--text-white);
  filter: invert(1) grayscale(1) brightness(200%);
}

.core-btn.btn-close.btn-close-white:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text-white);
}

/* ==================== 按钮风格变体 ==================== */

/* 实心按钮（默认） */
.core-btn.btn-solid {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary);
}

/* 幽灵按钮 */
.core-btn.btn-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.core-btn.btn-outline.btn-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-primary:hover {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}

/* 危险按钮幽灵态 */
.core-btn.btn-outline.btn-danger {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-danger:hover {
  background-color: var(--danger-color);
  color: var(--text-white);
}

/* 成功按钮幽灵态 */
.core-btn.btn-outline.btn-success {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-success:hover {
  background-color: var(--success-color);
  color: var(--text-white);
}

/* 警告按钮幽灵态 */
.core-btn.btn-outline.btn-warning {
  color: var(--warning-color);
  border-color: var(--warning-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-warning:hover {
  background-color: var(--warning-color);
  color: var(--text-white);
}

/* 信息按钮幽灵态 */
.core-btn.btn-outline.btn-info {
  color: var(--info-color);
  border-color: var(--info-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-info:hover {
  background-color: var(--info-color);
  color: var(--text-white);
}

/* 次要按钮幽灵态 */
.core-btn.btn-outline.btn-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background-color: transparent;
}

.core-btn.btn-outline.btn-secondary:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* 文本按钮 */
.core-btn.btn-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.core-btn.btn-text:hover {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* ==================== 按钮图标变体 ==================== */

/* 图标按钮 - 仅图标 */
.core-btn.btn-icon {
  width: var(--button-height-base);
  height: var(--button-height-base);
  padding: 0;
  min-width: var(--button-height-base);
}

.core-btn.btn-icon.btn-sm {
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  min-width: var(--button-height-sm);
}

.core-btn.btn-icon.btn-lg {
  width: var(--button-height-lg);
  height: var(--button-height-lg);
  min-width: var(--button-height-lg);
}

/* 圆形按钮 */
.core-btn.btn-circle {
  border-radius: 50%;
  width: var(--button-height-base);
  height: var(--button-height-base);
  padding: 0;
  min-width: var(--button-height-base);
}

/* ==================== 按钮状态 ==================== */

/* 禁用状态 */
.core-btn:disabled,
.core-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* 加载状态 */
.core-btn.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.core-btn.btn-loading::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== 表格内按钮样式 ==================== */

/* 表格内按钮统一样式 */
.core-table .core-btn {
  box-sizing: border-box;
}

/* 表格内图标按钮确保正方形 */
.core-table .core-btn.btn-icon.btn-sm {
  width: var(--button-height-sm) !important;
  height: var(--button-height-sm) !important;
  min-width: var(--button-height-sm) !important;
  min-height: var(--button-height-sm) !important;
  padding: 0 !important;
}

/* 表格内按钮图标样式 */
.core-table .core-btn.btn-icon i {
  font-size: 16px !important;
  line-height: 1;
  margin: 0 !important;
}

/* ==================== 专用操作按钮样式 ==================== */

/* 作废按钮 */
.core-btn.btn-void {
  background-color: var(--danger-light);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

.core-btn.btn-void:hover {
  background-color: var(--danger-color);
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 打印按钮 */
.core-btn.btn-print {
  background-color: var(--info-light);
  color: var(--info-color);
  border-color: var(--info-color);
}

.core-btn.btn-print:hover {
  background-color: var(--info-color);
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 详情按钮 */
.core-btn.btn-detail {
  background-color: var(--success-light);
  color: var(--success-color);
  border-color: var(--success-color);
}

.core-btn.btn-detail:hover {
  background-color: var(--success-color);
  color: var(--text-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ==================== 按钮组 ==================== */

.core-btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.core-btn-group > .core-btn {
  border-radius: 0;
  margin-left: -1px;
}

.core-btn-group > .core-btn:first-child {
  margin-left: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.core-btn-group > .core-btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* ==================== 按钮工具栏 ==================== */

.core-btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.core-btn-toolbar .core-btn {
  margin-bottom: 0;
}

/* ==================== 响应式设计 ==================== */

@media (max-width: 768px) {
  .core-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .core-btn-toolbar {
    width: 100%;
  }

  .core-btn-toolbar .core-btn {
    flex: 1;
    min-width: calc(50% - var(--spacing-xs));
  }
}

/* ==================== 打印样式 ==================== */

@media print {
  .core-btn {
    display: none !important;
  }
}

/* ==================== 暗色模式适配 ==================== */

[data-theme="dark"] .core-btn.btn-ghost {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}

[data-theme="dark"] .core-btn.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .core-btn.btn-reset,
[data-theme="dark"] .core-btn.btn-cancel {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .core-btn.btn-reset:hover,
[data-theme="dark"] .core-btn.btn-cancel:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .core-btn.btn-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .core-btn.btn-text:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* ==================== Bootstrap 兼容层（可选） ==================== */

/* 如果项目同时使用 Bootstrap，可以选择覆盖 Bootstrap 按钮样式 */
/*
.btn {
  @extend .core-btn;
}

.btn-primary { @extend .core-btn.btn-primary; }
.btn-secondary { @extend .core-btn.btn-secondary; }
.btn-success { @extend .core-btn.btn-success; }
.btn-danger { @extend .core-btn.btn-danger; }
.btn-warning { @extend .core-btn.btn-warning; }
.btn-info { @extend .core-btn.btn-info; }

.btn-sm { @extend .core-btn.btn-sm; }
.btn-lg { @extend .core-btn.btn-lg; }
*/

/* ==================== 兼容旧项目 - btn-finance 系列 ==================== */

/* ⚠️ 注意：这些类名用于 JS 动态生成 HTML，必须保留但样式继承自 core-btn */

/* 继承基础样式 */
.btn-finance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
  height: 40px;
  padding: 0 24px;
  letter-spacing: 0.3px;
}

/* 主要按钮 - 继承 btn-primary */
.btn-finance-primary {
  background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.25);
}

.btn-finance-primary:hover {
  background: linear-gradient(135deg, #e55a2b 0%, #d14a1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
  color: #fff;
}

/* 次要按钮 - 继承 btn-secondary */
.btn-finance-secondary {
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-finance-secondary:hover {
  background: #fafbfc;
  border-color: #b8bcc2;
  color: var(--text-primary);
}

/* 危险按钮 - 继承 btn-danger */
.btn-finance-danger {
  background: var(--bg-primary);
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
}

.btn-finance-danger:hover {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}