/* ==========================================================
   ICS-合规智能体 · 按钮规范（后台通用 UI 设计规范 v1.0 · 简约风格）
   依赖：css/variables.css（Design Token）
   ----------------------------------------------------------
   全站按钮只有 3 个等级（按业务重要程度区分，禁止自创变体）：
     ① .btn-primary        主按钮：主题蓝实心 —— 当前页核心高频操作（保存/提交/查询/生成）
     ② .btn  / .btn-secondary  次按钮：白底 + 浅灰边框 + 深灰文字 —— 新增/导入/导出/更多
     ③ .btn-danger         危险按钮：白底 + 红字红边 —— 删除/作废/冲销
   ------------------------------------------------------------------
   排布规则：主按钮放**最右侧**，次按钮依次向左；低频操作收进【更多】下拉。
   高度统一 32px（.btn-sm 28px），圆角统一 4px，无阴影、无渐变、无动效装饰。
   ⚠️ 重要：主按钮 hover/active 必须显式声明 color，否则会被通用 :hover 覆盖成
      蓝字蓝底（历史 bug：文字看不见）。
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: var(--height-btn);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-main);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* 次按钮 hover：边框与文字转主题蓝（白底，无填充） */
.btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #fff;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* ---------- ① 主按钮（实心主题蓝）---------- */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-white);          /* ★ 必须显式声明 */
}
.btn-primary:active:not(:disabled) {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-text-white);
}
.btn-primary:disabled {
  background: var(--color-bg-disabled);
  border-color: var(--color-border);
  color: var(--color-text-disabled);
}

/* ---------- ② 次按钮（= .btn 默认，别名保持向后兼容）---------- */
.btn-secondary,
.btn-outline {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text-main);
}
.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #fff;
}

/* 纯文字按钮（表格内联操作，如「查看 / 编辑」） */
.btn-text {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-base);
}
.btn-text:hover:not(:disabled) { color: var(--color-primary-active); background: none; }

/* ---------- ③ 危险按钮（白底红字红边）---------- */
.btn-danger {
  background: #fff;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-white);
}
/* 兼容：实心危险按钮（弹窗确认） */
.btn-danger-solid {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-text-white);
}
.btn-danger-solid:hover:not(:disabled) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--color-text-white);
}
/* 兼容别名 */
.btn-danger-ghost { background: #fff; border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger-ghost:hover:not(:disabled) { background: #fff1f0; color: var(--color-danger); border-color: var(--color-danger); }

/* ---------- 尺寸 ---------- */
.btn-sm { height: var(--height-btn-sm); padding: 0 var(--space-sm); font-size: 14px; }
.btn-lg { height: 40px; padding: 0 var(--space-lg); }

/* ---------- 按钮组 ---------- */
.btn-group { display: inline-flex; align-items: center; gap: var(--space-sm); }
/* 同排按钮组：主按钮贴最右 */
.btn-group .btn-primary { margin-left: auto; }

/* ---------- 按钮内图标（线性 16px，必须与文字同用）---------- */
.btn > svg, .btn .ic { width: 16px; height: 16px; flex: none; }

/* ---------- 基础兜底：页面若漏写 .btn 只写变体类，也保证规格一致 ---------- */
.btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-danger-ghost, .btn-danger-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  height: var(--height-btn); padding: 0 var(--space-md);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-family); font-size: var(--font-size-base); font-weight: 400;
  line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-sm.btn-primary, .btn-sm.btn-secondary, .btn-sm.btn-outline, .btn-sm.btn-danger,
.btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-outline.btn-sm, .btn-danger.btn-sm {
  height: var(--height-btn-sm); padding: 0 var(--space-sm); font-size: var(--font-size-base);
}

/* ---------- 表格行内小按钮：紧凑、无阴影 ---------- */
.row-actions { display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.row-actions .btn { height: var(--height-btn-sm); padding: 0 var(--space-sm); font-size: 14px; box-shadow: none; }