/* ==================================================================
   pages/admin.css — 管理后台（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖：static/base.css 的 token 与组件——
     .page-container / .page-title / .section-title / .text-mute / .text-xs
     .g-table-wrap + table.data-table（4-4：窄屏容器内横滚）
     .btn / .btn-primary / .btn-outline / .btn-danger / .btn-sm / .btn-xs / .btn-warn
     .chip · .card · .toast · .modal-overlay / .modal-box · .g-empty · :focus-visible
   本页只补 base 未提供的档位与几何：页签皮肤（.tabs/.tab-btn/.tab-panel）、工具行、
   分页条、角色徽标语义色、审批卡片、弹窗内部。
   纪律（《前端优化方案_20260925.md》§3 / §4-4 / §4-25 / §9）：
     1. 不写字面色值（#hex、rgb()、hsl() 一律不出现），全部走 var(--g-*)；
     2. 无 !important；
     3. 字号一律走 --g-fs-*（最小正文 12.5px）；
     4. 不改 base.css，不改 HTML 既有 class 名与任何 id。
   ================================================================== */

/* ---------- 0. 页面骨架：页脚推底（页脚样式走 base 的 .footer） ---------- */
body[data-page="admin"] { display: flex; flex-direction: column; }
body[data-page="admin"] > .page-container { flex: 1 0 auto; }
body[data-page="admin"] .page-title { margin-bottom: var(--g-sp-4); }

/* ---------- 1. 页签皮肤：base 提供 .tabs/.tab-btn/.tab-panel 结构基线（并档第二批），
   这里只保留 admin 的"文件夹式"差异：42px 高、上圆角下无线、面板贴合 ---------- */
.tabs { align-items: flex-end; gap: var(--g-sp-1); }
.tab-btn {
  height: 42px; padding: 0 var(--g-sp-4);
  border: 1px solid var(--g-line); border-bottom: 0;
  border-radius: var(--g-r-sm) var(--g-r-sm) 0 0;
  background: var(--g-surface-3); color: var(--g-mute);
}
.tab-btn:hover { background: var(--g-surface-2); color: var(--g-primary); }
.tab-btn.active { background: var(--g-surface); color: var(--g-primary); font-weight: 700; }

.tab-panel {
  min-height: clamp(300px, 52vh, 500px);
  padding: var(--g-sp-4);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: 0 var(--g-r-lg) var(--g-r-lg) var(--g-r-lg);
  box-shadow: var(--g-sh-sm);
}

/* ---------- 2. 工具行：把 base 表单的 100% 宽收回内容宽，窄屏再放开 ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--g-sp-2); margin-bottom: var(--g-sp-4);
}
.toolbar-tight { margin-bottom: var(--g-sp-2); }
.toolbar > input, .toolbar > select { width: auto; min-width: 148px; }
.toolbar > .field-grow { flex: 1 1 220px; min-width: 180px; }
#tag-new-cat { max-width: 190px; }

/* ---------- 3. 按钮补档：.btn-xs / .btn-warn 已收编进 base（并档第二批），本页不再定义 ---------- */

/* ---------- 4. 数据表（外层已是 base 的 .g-table-wrap，表身是 table.data-table） ---------- */
#tags-table-wrap { margin-bottom: var(--g-sp-5); }
table.data-table tbody tr:hover td { background: var(--g-surface-2); }
table.data-table .empty-row td {
  padding: var(--g-sp-6) var(--g-sp-4);
  text-align: center; color: var(--g-mute);
}
/* 原先写在 JS 内联样式里的单元格修饰，统一收进 token */
.cell-clip { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cell-off { color: var(--g-danger); }
.cell-ok { color: var(--g-ok); }
.cell-warn { color: var(--g-warn); }
.cell-none { color: var(--g-mute); }
table.data-table td.cell-tags { white-space: normal; min-width: 170px; }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--g-sp-1); }

/* ---------- 5. 角色徽标：外形走 base 的 .chip，这里只补语义色 ---------- */
.role-badge.role-chief { background: var(--g-warn-bg); color: var(--g-warn); }
.role-badge.role-dev { background: var(--g-knowledge-bg); color: var(--g-knowledge); }
.role-badge.role-admin { background: var(--g-ok-bg); color: var(--g-ok); }
.role-badge.role-user { background: var(--g-surface-3); color: var(--g-mute); }

/* ---------- 6. 审批面板（本页无表格：卡片式，窄屏自适应；状态走 chip 语义色） ---------- */
.ap-list { display: flex; flex-direction: column; gap: var(--g-sp-2); }
.ap-item { padding: var(--g-sp-3) var(--g-sp-4); }
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-2); flex-wrap: wrap; }
.ap-type { font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink); }
.ap-target, .ap-meta { margin-top: var(--g-sp-1); overflow-wrap: anywhere; }
.ap-target { font-size: var(--g-fs-sm); }
.ap-acts { display: flex; flex-wrap: wrap; gap: var(--g-sp-2); margin-top: var(--g-sp-2); }
.chip.status-pending { background: var(--g-warn-bg); color: var(--g-warn); }
.chip.status-approved { background: var(--g-ok-bg); color: var(--g-ok); }
.chip.status-executed { background: var(--g-info-bg); color: var(--g-info); }
.chip.status-rejected { background: var(--g-danger-bg); color: var(--g-danger); }

/* ---------- 7. 弹窗内部（外壳 .modal-overlay / .modal-box 走 base） ---------- */
.modal-box h3 { margin-bottom: var(--g-sp-3); font-size: var(--g-fs-md); }
.modal-note { margin: var(--g-sp-1) 0 var(--g-sp-2); font-size: var(--g-fs-sm); }
.modal-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--g-sp-2); margin-top: var(--g-sp-4);
}
.tag-picker {
  display: flex; flex-wrap: wrap; gap: var(--g-sp-1);
  max-height: 320px; overflow-y: auto;
  padding: var(--g-sp-3);
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface-2);
}
.tag-pick {
  display: inline-flex; align-items: center; gap: var(--g-sp-1);
  padding: 3px 10px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-pill);
  background: var(--g-surface);
  font-size: var(--g-fs-xs); cursor: pointer;
  transition: border-color var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
.tag-pick:hover { border-color: var(--g-primary); color: var(--g-primary); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- 8. 分页条 ---------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--g-sp-2); margin-top: var(--g-sp-3);
  font-size: var(--g-fs-sm);
}

/* ---------- 9. 响应式（断点与 base 的导航断点 860px 对齐） ---------- */
@media (max-width: 860px) {
  .tab-panel { min-height: clamp(280px, 60vh, 520px); }
}
@media (max-width: 560px) {
  .toolbar > input, .toolbar > select, .toolbar > .field-grow {
    flex: 1 1 100%; min-width: 0; max-width: none;
  }
  .toolbar > .btn { flex: 1 1 auto; }
  .tab-btn { padding: 0 var(--g-sp-3); }
  .tab-panel { padding: var(--g-sp-3); }
  .modal-actions .btn { flex: 1 1 auto; }
}