/* 组件规范层（设计文档 8.3）
 *
 * 作用：把「卡片 / 表格 / 表单 / 状态标签 / 空状态 / 按钮 / 图表容器 / 页面外壳」
 * 的定义收敛成一份，新建页面直接复用，不必每页各写一遍样式。
 *
 * 加载位置：tokens.css 之后、页面自有样式（base.css / index.css / list.css /
 * admin-common.css / 页内 <style>）之前。**因此它是基础层**：同选择器上页面样式会赢。
 * 这是有意的——历史页面里存在大量有意为之的局部差异，逐页迁移到本层是观感走查
 * （8.5）阶段的事，不在这里一次性强推，否则一改就是 28 个页面同时变样、无法定位回归。
 *
 * 约定：
 * 1. 只用 tokens.css 的令牌，不写死颜色/间距/圆角（要新的值先去令牌层加）；
 * 2. 类名用组件前缀（.ui-*），避免与历史页面的同名类冲突——冲突会让「谁生效」又变成
 *    加载顺序问题，正是本次要消灭的东西；
 * 3. 状态色一律走语义令牌（--color-success/warning/danger），不再出现 Material 绿这类字面量。
 */

/* ============ 页面外壳（顶栏 + 侧栏 + 内容区） ============ */
.ui-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 64px); }
.ui-sidebar {
  flex: 0 0 var(--admin-sidebar-w, 236px);
  align-self: stretch;
  background: rgb(var(--mdui-color-surface-container-lowest));
  border-right: 1px solid var(--admin-border);
  padding: var(--space-3) var(--space-2);
}
.ui-main { flex: 1 1 auto; min-width: 0; padding: var(--space-5); }
.ui-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ui-page-head__title { margin: 0; font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--admin-text); }
.ui-page-head__sub { margin: var(--space-1) 0 0; font-size: var(--fs-md); color: var(--admin-muted); }
.ui-eyebrow { display: block; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--admin-text); margin-bottom: var(--space-1); }
@media (max-width: 900px) {
  .ui-shell { display: block; }
  .ui-sidebar { display: none; }
  .ui-main { padding: var(--space-4); }
}

/* ============ 卡片 ============ */
.ui-card {
  background: rgb(var(--mdui-color-surface-container-lowest));
  border: 1px solid var(--admin-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ui-card + .ui-card { margin-top: var(--space-4); }
.ui-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--admin-border);
  font-size: var(--fs-base); font-weight: 600;
}
.ui-card__body { padding: var(--space-4); }
.ui-card__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--admin-border); background: var(--admin-surface); }
/* 无边框卡片：用于「卡片里再套一块」的场景，避免双重描边 */
.ui-card--plain { border: 0; box-shadow: none; background: transparent; }

/* ============ 按钮 ============ */
/* 主行动每页只有一个（设计文档 8.4）；其余动作用次按钮或文字按钮 */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 36px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--fs-md); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.ui-btn:focus-visible { outline: 2px solid rgb(var(--mdui-color-primary)); outline-offset: 2px; }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-btn--primary { background: rgb(var(--mdui-color-primary)); color: rgb(var(--mdui-color-on-primary)); }
.ui-btn--primary:hover:not(:disabled) { background: var(--admin-primary-hover); }
.ui-btn--outline { border-color: var(--admin-border-strong); color: var(--admin-text); background: transparent; }
.ui-btn--outline:hover:not(:disabled) { background: var(--admin-hover); }
.ui-btn--text { padding: 0 var(--space-3); color: rgb(var(--mdui-color-primary)); background: transparent; }
.ui-btn--text:hover:not(:disabled) { background: var(--admin-primary-soft); }
.ui-btn--danger { border-color: var(--color-danger-border); color: var(--color-danger); background: transparent; }
.ui-btn--danger:hover:not(:disabled) { background: var(--color-danger-container); }

/* ============ 状态标签 / 徽标 ============ */
.ui-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  border: 1px solid var(--color-neutral-border); background: var(--color-neutral-container);
  font-size: var(--fs-xs); color: var(--admin-muted); white-space: nowrap;
}
.ui-tag--ok { background: var(--color-success-container); border-color: var(--color-success-border); color: var(--color-success); }
.ui-tag--warn { background: var(--color-warning-container); border-color: var(--color-warning-border); color: var(--color-warning); }
.ui-tag--err { background: var(--color-danger-container); border-color: var(--color-danger-border); color: var(--color-danger); }
.ui-tag--info { background: var(--admin-primary-soft); border-color: transparent; color: var(--color-info); }
/* 状态点：列表里比整块标签更省空间 */
.ui-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--admin-muted); }
.ui-dot--ok { background: var(--color-success); }
.ui-dot--warn { background: var(--color-warning); }
.ui-dot--err { background: var(--color-danger); }

/* ============ 表格 ============ */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.ui-table th, .ui-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--admin-border); }
.ui-table th { font-weight: 600; color: var(--admin-muted); background: var(--admin-surface); white-space: nowrap; }
.ui-table tbody tr:hover { background: var(--admin-surface); }
.ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table__empty { padding: var(--space-5); text-align: center; color: var(--admin-muted); }

/* ============ 表单 ============ */
.ui-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.ui-label { font-size: var(--fs-md); color: var(--admin-text); }
.ui-help { font-size: var(--fs-xs); color: var(--admin-muted); line-height: var(--lh-base); }
.ui-field--inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.ui-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
/* 开关：原生 checkbox 用 18px 兜底；升级后的 mdui-switch 由 admin-ui.css 定尺寸（44×26）。
   早先这里不加限定地写 18px，会把升级后的方钮压成 18px，而方钮绝对定位在 22px 处
   （按 44px 轨道算），于是跑到轨道外、压在右侧文字上（2026-09-21 用户截图）。 */
.ui-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); cursor: pointer; }
.ui-switch input:not(.aui-switch__input) { width: 18px; height: 18px; accent-color: rgb(var(--mdui-color-primary)); }
.ui-switch small { display: block; color: var(--admin-muted); font-size: var(--fs-xs); }
/* 滑块 */
.ui-range { width: 100%; accent-color: rgb(var(--mdui-color-primary)); }
.ui-range-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--fs-md); }
.ui-range-row output { font-variant-numeric: tabular-nums; color: var(--admin-muted); }

/* ============ 空状态 ============ */
.ui-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--admin-muted); }
.ui-empty__title { display: block; margin-bottom: var(--space-2); font-size: var(--fs-base); color: var(--admin-text); }
.ui-empty__hint { font-size: var(--fs-md); line-height: var(--lh-base); }
.ui-empty__action { margin-top: var(--space-3); }
.ui-empty--err { color: var(--color-danger); }

/* ============ 图表容器与条形图 ============ */
/* 图表容器统一留白与高度，换图表库时不用改页面 */
.ui-chart { min-height: 160px; padding: var(--space-2) 0; }
.ui-chart__legend { display: flex; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--admin-muted); }
.ui-chart__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--space-1); background: rgb(var(--mdui-color-primary)); }
/* 条形图：数据量小的时候比图表库更合适（工作台与看板都这么用） */
.ui-bar-row { display: grid; grid-template-columns: 96px 1fr 40px; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: var(--fs-md); }
.ui-bar-row--wide { grid-template-columns: 120px 1fr 40px; }
.ui-bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-primary-tint); overflow: hidden; }
.ui-bar > i { display: block; height: 100%; min-width: 2px; background: rgb(var(--mdui-color-primary)); }
.ui-bar--warn > i { background: var(--color-warning); }
.ui-bar--muted { background: var(--color-neutral-container); }
.ui-bar--muted > i { background: var(--admin-muted); }
/* 指标块：看板/概览用 */
.ui-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.ui-stat > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--admin-surface); }
.ui-stat b { display: block; font-size: var(--fs-title); line-height: var(--lh-tight); }
.ui-stat span { font-size: var(--fs-sm); color: var(--admin-muted); }

/* ============ 提示条 ============ */
.ui-note {
  padding: var(--space-3); border: 1px solid var(--color-neutral-border);
  border-radius: var(--radius-md); background: var(--admin-surface);
  font-size: var(--fs-md); color: var(--admin-muted); line-height: var(--lh-base);
}
.ui-note--info { border-color: var(--admin-border); background: var(--admin-primary-soft); color: var(--color-info); }
.ui-note--warn { border-color: var(--color-warning-border); background: var(--color-warning-container); color: var(--color-warning); }
.ui-note--err { border-color: var(--color-danger-border); background: var(--color-danger-container); color: var(--color-danger); }

/* ============ 工具类（只保留真的反复出现的） ============ */
.ui-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ui-row--between { justify-content: space-between; }
.ui-spacer { flex: 1 1 auto; }
.ui-muted { color: var(--admin-muted); }
.ui-strong { font-weight: 600; }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-scroll { max-height: 62vh; overflow: auto; }
.ui-scroll--sm { max-height: 320px; overflow: auto; }
/* Notion 规范：移除小号大写眉标（页面若需要上下文，用普通小标题） */
.eyebrow { display: none !important; }