/* ============================================================
   后台界面优化 —— 现代极简风（黑/白/灰 + 品牌蓝点缀）
   覆盖 Element UI 默认样式，无需改动各页面 JS
   ============================================================ */

:root {
  --brand: #3b6ef0;
  --ink: #1f2329;
  --ink-2: #4e5561;
  --ink-3: #909399;
  --line: #e8eaee;
  --bg: #f5f6f8;
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body {
  font-family: Inter, Roboto, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 卡片 ---------- */
.el-card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.el-card__header {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  font-weight: 600;
}
.el-card__body { padding: 20px; }

/* ---------- 表格 ---------- */
.el-table { color: var(--ink-2); }
.el-table th.el-table__cell {
  background: #fafbfc;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.el-table td.el-table__cell { border-bottom: 1px solid var(--line); }
.el-table--border, .el-table--border th, .el-table--border td { border-color: var(--line); }
.el-table .el-table__row:hover > td { background: #f7f9ff !important; }

/* ---------- 按钮 ---------- */
.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.el-button--primary {
  background: var(--brand);
  border-color: var(--brand);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background: #2f5dd8;
  border-color: #2f5dd8;
}
.el-button--text { color: var(--brand); }

/* ---------- 表单控件 ---------- */
.el-input__inner,
.el-textarea__inner {
  border-radius: 8px;
  border-color: var(--line);
  color: var(--ink);
}
.el-input__inner:focus,
.el-textarea__inner:focus { border-color: var(--brand); }
.el-select .el-input.is-focus .el-input__inner { border-color: var(--brand); }

/* ---------- 弹窗 ---------- */
.el-dialog {
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.el-dialog__header {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.el-dialog__title { font-weight: 600; font-size: 16px; }
.el-dialog__body { padding: 20px 24px; }

/* ---------- 标签 ---------- */
.el-tag { border-radius: 6px; border: none; }
.el-tag--success { background: #e8f7ee; color: #28a745; }
.el-tag--info { background: #f0f1f3; color: #6b7280; }
.el-tag--warning { background: #fff4e5; color: #e8890c; }
.el-tag--danger { background: #fdecec; color: #e05252; }

/* ---------- 消息提示 ---------- */
.el-message {
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

/* ---------- 分页 ---------- */
.el-pagination .el-pager li.active { color: var(--brand); }
.el-pagination .el-pager li:hover { color: var(--brand); }

/* ---------- 筛选区 ---------- */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 布局留白 ---------- */
#app .el-main { padding: 20px 24px; }