/*
 * components/card.css — 统一卡片组件
 *
 * 使用：
 *   <div class="c-card">
 *     <div class="c-card-header">标题</div>
 *     <div class="c-card-body">内容</div>
 *     <div class="c-card-footer">底部操作</div>
 *   </div>
 *
 * 变体：c-card-interactive（可点击，带 hover 效果）
 *
 * 依赖：/theme.css
 */

/* ========== 基础卡片 ========== */

.c-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.c-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-ink);
}

.c-card-body {
  padding: var(--space-5);
  flex: 1;
}

.c-card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ========== 可交互卡片 ========== */

.c-card-interactive {
  cursor: pointer;
}

.c-card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.c-card-interactive:active {
  transform: translateY(0);
}

/* ========== 统计卡片 ========== */

.c-stat-card {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.c-stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

.c-stat-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.c-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.c-stat-meta {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}