xiaoxia-saas/apps/web/src/pages/edit-plans/edit-plans.css

/**
 * 剪辑计划管理页面样式
 */

/* ── 页面容器 ──────────────────────────────────────────── */
.edit-plans-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── 页面头部 ──────────────────────────────────────────── */
.edit-plans-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.edit-plans-header-text h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.edit-plans-header-text p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #64748b);
}

/* ── 筛选栏 ────────────────────────────────────────────── */
.edit-plans-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.edit-plans-status-tabs {
  flex: 1;
}

.edit-plans-status-tabs .ant-tabs-nav {
  margin-bottom: 0 !important;
}

.edit-plans-status-tabs .ant-tabs-tab {
  padding: 8px 16px !important;
  font-size: 14px;
}

.edit-plans-status-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--primary-500, #6366f1) !important;
  font-weight: 500;
}

.edit-plans-status-tabs .ant-tabs-ink-bar {
  background: var(--primary-500, #6366f1) !important;
}

.edit-plans-template-filter {
  min-width: 180px;
}

/* ── 表格 ──────────────────────────────────────────────── */
.edit-plans-table {
  background: var(--bg-surface, #fff);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--border-primary, #e2e8f0);
}

.edit-plans-table .ant-table {
  font-size: 14px;
}

.edit-plans-table .ant-table-thead > tr > th {
  background: var(--bg-tertiary, #f8fafc) !important;
  border-bottom: 1px solid var(--border-primary, #e2e8f0);
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  font-size: 13px;
  padding: 12px 16px;
}

.edit-plans-table .ant-table-tbody > tr > td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.edit-plans-table .ant-table-tbody > tr:hover > td {
  background: var(--bg-hover, #f8fafc) !important;
}

/* ── 计划名称 ──────────────────────────────────────────── */
.plan-name {
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  transition: color 0.2s;
}

.plan-name:hover {
  color: var(--primary-500, #6366f1);
}

/* ── 状态标签 ──────────────────────────────────────────── */
.plan-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.plan-status-tag.ant-tag-default {
  background: #f1f5f9;
  color: #64748b;
  border-color: transparent;
}

.plan-status-tag.ant-tag-processing {
  background: #eff6ff;
  color: #2563eb;
  border-color: transparent;
}

.plan-status-tag.ant-tag-success {
  background: #f0fdf4;
  color: #16a34a;
  border-color: transparent;
}

.plan-status-tag.ant-tag-error {
  background: #fef2f2;
  color: #dc2626;
  border-color: transparent;
}

.plan-status-tag.ant-tag-warning {
  background: #fffbeb;
  color: #d97706;
  border-color: transparent;
}

/* ── 时长 ──────────────────────────────────────────────── */
.plan-duration {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #64748b);
}

/* ── 时间 ──────────────────────────────────────────────── */
.plan-time {
  color: var(--text-secondary, #64748b);
  font-size: 13px;
}

/* ── 操作按钮 ──────────────────────────────────────────── */
.plan-actions {
  display: flex;
  gap: 4px;
}

.plan-action-btn {
  padding: 4px 8px !important;
  font-size: 13px !important;
}

.plan-action-btn.ant-btn-link {
  color: var(--primary-500, #6366f1);
}

.plan-action-btn.ant-btn-link:hover {
  color: var(--primary-600, #4f46e5);
}

.plan-regenerate-btn {
  color: var(--primary-500, #6366f1) !important;
}

.plan-regenerate-btn:hover {
  color: var(--primary-600, #4f46e5) !important;
}

/* ── 空状态 ────────────────────────────────────────────── */
.edit-plans-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.edit-plans-empty .anticon {
  font-size: 48px;
  color: var(--text-disabled, #cbd5e1);
  margin-bottom: 16px;
}

.edit-plans-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #64748b);
}

/* ── 错误状态 ──────────────────────────────────────────── */
.edit-plans-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: var(--bg-surface, #fff);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-primary, #e2e8f0);
}

.edit-plans-error .anticon {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 16px;
}

.edit-plans-error p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-secondary, #64748b);
}

/* ── 响应式 ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .edit-plans-page {
    padding: 16px;
  }

  .edit-plans-header {
    flex-direction: column;
    gap: 12px;
  }

  .edit-plans-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .edit-plans-status-tabs {
    width: 100%;
  }

  .edit-plans-template-filter {
    width: 100%;
  }
}