/**
 * ui-consolidate.css —— 组件权威定义（最后加载）
 *
 * 背景：全站 51 个 CSS 文件里，.ss-card / .ss-section-head / .ss-stat / .ss-status
 * 等通用组件被重复定义了 2~4 次，值互相矛盾（圆角 8/12/14、padding 0/14/16/20、
 * 有的带边框有的不带）。页面 CSS 又各自覆盖，导致"同一张卡片在不同页长得不一样"。
 *
 * 本文件不删除任何旧定义，只做**最终收口**：
 * 每个组件的视觉规格在这里写一次，加载顺序在最后，后写胜出。
 * 后续清理旧定义时，只要保证不覆盖本文件的规格即可。
 *
 * 规格基线（与 theme-vars.css 的 token 对齐）：
 *   卡片圆角 14 / 按钮圆角 8 / 内距 20 / 无边框 + 染色投影
 */

/* ============================================================
   1. 卡片
   ============================================================ */
.ss-card {
  padding: var(--space-20);
  border: 0;
  border-radius: var(--ss-radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/* 卡内表格/列表贴边时用 --flush 去掉内距 */
.ss-card.ss-card--flush {
  padding: 0;
}

/* ============================================================
   2. 卡头
   ============================================================ */
.ss-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  margin: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--divider);
}
.ss-section-head h2,
.ss-section-head h3 {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}
/* 卡内标题（无通栏分隔线的那种） */
.ss-section-head.is-inset {
  min-height: 0;
  padding: 16px 24px;
  border-bottom: 0;
}

/* ============================================================
   3. 统计块
   ============================================================ */
.ss-stat {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--ss-radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.ss-stat-val {
  font-family: var(--font-numbers);
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-main);
}
.ss-stat-label {
  margin-top: 6px;
  font-size: var(--fs-12);
  color: var(--text-4);
}

/* ============================================================
   4. 状态徽标（胶囊 + 圆点）
   ============================================================ */
.ss-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 64px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* ============================================================
   5. 空态
   ============================================================ */
.ss-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-5);
}
.ss-empty i {
  display: block;
  margin-bottom: 10px;
  font-size: 40px;
  color: var(--card-border);
}
.ss-empty p {
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.6;
}

/* ============================================================
   6. 按钮：兜住元素选择器造成的文字色错乱
   报告里 .ss-modal-foot button / .ss-msg-actions button / .ss-field-row button
   都用 (0,1,1) 压过单类按钮的 (0,1,0)，导致主按钮渲染灰字。
   ============================================================ */
.ss-modal-foot .ss-modal-confirm,
.ss-field-row .ss-modal-confirm,
.ss-msg-actions .ss-modal-confirm {
  color: #fff;
}
.ss-modal-head button {
  color: var(--text-3);
}
.ss-modal-head button:hover {
  color: var(--text-main);
}

/* ============================================================
   7. 表单控件：input / select / textarea 同一套尺度
   ============================================================ */
.ss-field input:not([type="checkbox"]):not([type="radio"]),
.ss-field select,
.ss-field textarea {
  width: 100%;
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-13);
  color: var(--text-main);
  transition: border-color var(--motion-mid), box-shadow var(--motion-mid);
}
.ss-field input:not([type="checkbox"]):not([type="radio"]),
.ss-field select {
  height: 40px;
  padding: 0 12px;
}
.ss-field textarea {
  min-height: 64px;
  padding: 8px 12px;
  line-height: 1.6;
  resize: vertical;
}
.ss-field input:focus,
.ss-field select:focus,
.ss-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-tint-08);
}
.ss-field input::placeholder,
.ss-field textarea::placeholder {
  color: var(--text-5);
}
.ss-field label {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-4);
}

/* ============================================================
   8. 表格：内距统一，去掉全局 !important 的双重压制
   common.css:473 与 account.css:178 各写了一条
   `padding-left:20px !important`，把 .ss-table 的 12px 内距压死，
   而且没有容器限定，命中全站所有表格。
   ============================================================ */
.ss-table th,
.ss-table td {
  padding: 12px;
}
.ss-table th:first-child,
.ss-table td:first-child {
  padding-left: 20px;
}
.ss-table th:last-child,
.ss-table td:last-child {
  padding-right: 20px;
}

/* ============================================================
   9. 顶栏高度：common.css 的 40px !important 与主题 56px 对撞
   ============================================================ */
.el-header {
  height: var(--ss-header-h) !important;
}

/* ============================================================
   10. 全局 .active 污染：account.css:196 定义了裸 .active
   （带 padding-bottom + border-bottom），会命中分页、tab 等一切 .active
   ============================================================ */
.ss-pager-num.active,
.ss-news-tab.active,
.el-tabs__item.active {
  padding-bottom: 0;
  border-bottom: 0;
}