/* components.css —— 8 类跨页复用组件（Task 37 D-4）：
   按钮 / 卡片 / 输入框 / Tab / 徽标标签 / 横幅 / 空态 / 加载错误态。
   铁律：颜色只用 var(--color-*)，间距只用 var(--space-*)，字号只用 var(--font-size-*)；
   页面级布局与一次性变体放 app.css。类名是两页共同契约，改动需同步两页。 */

/* ============ 1. 按钮：主 / 次 / 描边 / 幽灵 / 危险 / 成功 / 禁用 ============ */
/* 基类；.btn-primary/.btn-outline 也可独立使用（审计页历史标记无 .btn 基类） */
.btn,
.btn-primary, .btn-outline,
.banner button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--weight-medium);
  line-height: var(--line-tight); letter-spacing: .02em;
  min-height: var(--control-h); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-bg-surface); color: var(--color-text-primary);
  cursor: pointer; white-space: nowrap;
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out,
              background .2s ease-out, filter .2s ease-out;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--color-primary-border); }
.btn:active { transform: scale(.98); }
.btn:disabled,
.btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary,
.btn.primary {
  background: var(--gradient-primary); border: 1px solid var(--color-primary);
  color: var(--color-on-primary); box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
.btn.primary:hover {
  background: var(--gradient-primary-hover); border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary-lg); filter: brightness(1.05);
}
.btn-primary:disabled,
.btn.primary:disabled {
  background: var(--color-primary-disabled); border-color: var(--color-primary-disabled);
  color: var(--color-on-primary); cursor: not-allowed;
}

.btn-outline { background: transparent; border-color: var(--color-text-primary); color: var(--color-text-primary); }
.btn-outline:hover { background: var(--color-bg-subtle); border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost,
.btn.ghost { background: transparent; border-color: transparent; color: var(--color-text-tertiary); }
.btn-ghost:hover,
.btn.ghost:hover { color: var(--color-text-primary); background: var(--color-bg-subtle); box-shadow: none; transform: none; }

.btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-primary); }
.btn-success:hover { background: var(--color-success-text); border-color: var(--color-success-text); box-shadow: var(--shadow-md); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-primary); }
.btn-danger:hover { background: var(--color-danger-text); border-color: var(--color-danger-text); box-shadow: none; }

.btn-sm,
.btn.small { min-height: auto; padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); border-radius: var(--radius-md); }
.btn-sm.btn-ghost,
.btn.small.ghost { padding: var(--space-0-5) var(--space-1-5); }

/* ============ 2. 卡片：基础卡 + 编辑风面板卡（审计容器）==================== */
.card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-4-5);
}
.card--panel {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: var(--space-6-5);
}
.card--panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--gradient-primary); opacity: .85;
}

/* ============ 3. 输入框：input / select / textarea（含 .input/.select 类名）== */
label {
  font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-tertiary);
}
input, select, textarea, .input, .select {
  font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text-primary);
  min-height: var(--control-h); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); }
input:focus, select:focus, textarea:focus, .input:focus, .select:focus {
  outline: none; border-color: var(--color-ring); box-shadow: var(--shadow-focus);
}
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); opacity: .65; }
select { cursor: pointer; }
select:disabled, input:disabled, textarea:disabled { background: var(--color-bg-subtle); cursor: not-allowed; }

/* ============ 4. Tab：.tabs / .tab（下划线式，两页共用）=================== */
.tabs { display: flex; gap: var(--space-0-5); border-bottom: 1px solid var(--color-border); }
.tab {
  appearance: none; flex: none; background: transparent;
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  min-height: auto; padding: var(--space-3) var(--space-5-5);
  font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: var(--weight-medium);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-tertiary);
  cursor: pointer; transition: color .2s ease-out, border-color .2s ease-out;
}
.tab:hover { color: var(--color-text-primary); }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ 5. 徽标 / 标签：胶囊基座 + 状态色变体 ======================== */
.badge, .src, .chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--weight-medium);
  letter-spacing: .04em; padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-pill); background: var(--color-bg-subtle); color: var(--color-text-secondary);
}
.st {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: var(--weight-semibold);
  letter-spacing: .02em; padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill); color: var(--color-on-primary); background: var(--color-text-tertiary);
}
.st.done { background: var(--color-success); }
.st.failed { background: var(--color-danger); }
.st.waiting { background: var(--color-warning); }
.st.running { background: var(--color-info); }
.chip-pending   { background: var(--color-warning-bg); color: var(--color-amber-text); }
.chip-approved  { background: var(--color-success-bg-soft); color: var(--color-success-text); }
.chip-rejected  { background: var(--color-danger-bg-soft); color: var(--color-danger-strong); }
.tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--font-size-3xs);
  color: var(--color-primary); background: var(--color-primary-tint-5);
  border: 1px solid var(--color-primary-border); border-radius: var(--radius-xs);
  padding: var(--space-0-5) var(--space-1-5);
}

/* ============ 6. 横幅：语义提示条 + 演示环境横条（Task 38 新手引导复用）===== */
.banner, .alert {
  display: block; border-radius: var(--radius-lg); border: 1px solid transparent;
  padding: var(--space-2-5) var(--space-4); margin-bottom: var(--space-2-5);
  font-size: var(--font-size-md); line-height: var(--line-snug);
}
.banner.show, .alert.show { animation: fadeUp .3s ease-out; }
.banner--success, .alert.ok        { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.banner--danger, .alert.denied     { background: var(--color-danger-bg);  color: var(--color-danger-text);  border-color: var(--color-danger-border); }
.banner--warning, .alert.blocked   { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.banner--muted, .alert.unavailable { background: var(--color-bg-subtle);  color: var(--color-text-secondary); border-color: var(--color-border); }
.banner--demo {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-primary-tint-5); color: var(--color-primary-active);
  border-bottom: 1px solid var(--color-primary-border-soft);
  border-radius: 0; margin-bottom: 0;
  font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: .04em;
  text-align: center;
}
.banner--demo::before {
  content: ""; width: var(--space-1-5); height: var(--space-1-5); flex: none;
  border-radius: var(--radius-pill); background: var(--color-primary);
}

/* ============ 7. 空态：居中空状态 / 行内空文案 ============================ */
.empty-state {
  margin: auto; text-align: center; color: var(--color-text-tertiary);
  padding: var(--space-12) var(--space-5); max-width: 480px;
}
.empty-state .big {
  font-family: var(--font-serif); font-size: var(--font-size-4xl); font-weight: var(--weight-bold);
  color: var(--color-text-primary); margin: 0 0 var(--space-3); line-height: var(--line-tight);
}
.empty-state .kbd {
  display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-0-5) var(--space-2); background: var(--color-bg-surface); margin: 0 var(--space-0-5);
}
.empty { color: var(--color-text-tertiary); font-size: var(--font-size-md); line-height: var(--line-snug); }

/* ============ 8. 加载 / 错误态：骨架屏 shimmer / 加载斜体 / 错误文案 ========= */
.skeleton, .shimmer {
  display: block; border-radius: var(--radius-pill);
  background: var(--gradient-shimmer); background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton { height: var(--space-3); margin-top: var(--space-2); }
.is-loading { color: var(--color-text-tertiary); font-style: italic; }
.error-text { color: var(--color-danger-text); font-weight: var(--weight-medium); }

/* ============ 组件级动效（页面布局动效放 app.css）========================= */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
@keyframes badgePulse {
  0%,100% { box-shadow: var(--shadow-danger-sm); }
  50% { box-shadow: var(--shadow-danger-md); }
}

@media (prefers-reduced-motion: reduce) {
  .banner.show, .alert.show, .skeleton, .shimmer { animation: none; }
}