/**
 * Amesh Design System
 * ─────────────────────────────────────
 * 统一 UI 样式规范，所有页面共用。
 * 基于 /users 页面沉淀的视觉风格：白底 + 1px 边框 + 无阴影 + 无渐变。
 *
 * 用法：在 HTML 中引入此文件，使用 ds- 前缀类名。
 *   <link rel="stylesheet" href="/design-system.css?v=1.0.0" />
 *
 * 颜色约定：
 *   --ds-border:    #e2e8f0  (边框/分割线)
 *   --ds-surface:   #ffffff  (卡片/分区背景)
 *   --ds-muted-bg:  #f8fafc  (表头/输入框/树背景)
 *   --ds-text:      #333333  (主文字)
 *   --ds-text-mut:  #64748b  (次要文字/标签)
 *   --ds-primary:   #5b4dbe  (主色/选中态)
 *   --ds-danger:    #dc2626  (危险/必填)
 *   --ds-success:   #16a34a  (正常/成功)
 *   --ds-warning:   #c2410c  (所有者/警告)
 */

:root {
  /* ── Color tokens ── */
  --ds-border: #e2e8f0;
  --ds-surface: #ffffff;
  --ds-muted-bg: #f8fafc;
  --ds-text: #333333;
  --ds-text-mut: #64748b;
  --ds-text-light: #94a3b8;
  --ds-primary: #6366f1;
  --ds-primary-bg: #eef2ff;
  --ds-danger: #dc2626;
  --ds-danger-bg: #fef2f2;
  --ds-success: #16a34a;
  --ds-success-bg: #f0fdf4;
  --ds-warning: #c2410c;
  --ds-warning-bg: #fff7ed;
  --ds-teal: #0f766e;
  --ds-teal-bg: #ecfdf5;
  --ds-gray: #64748b;
  --ds-gray-bg: #f1f5f9;

  /* ── Radius ── */
  --ds-r-sm: 4px;
  --ds-r-md: 6px;
  --ds-r-lg: 8px;
  --ds-r-pill: 999px;

  /* ── Spacing ── */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;

  /* ── Typography ── */
  --ds-fs-body: 14px;       /* 正文 · 标签 · 说明 · 统计 · 提示（统一基准） */
  --ds-fs-h3: 15px;         /* 弹窗标题 · 卡片副标题 */
  --ds-fs-title: 16px;      /* 区域标题 · 页面标题 */
  --ds-fs-display-md: 20px; /* 滑块数值 · 中等展示数字 */
  --ds-fs-display: 24px;    /* KPI 等展示性数字 */
  --ds-fs-display-lg: 28px; /* 大型展示数字 · 统计卡片数值 */
  --ds-fs-display-xl: 32px; /* 超大展示数字 · 英雄区 */
  --ds-font: var(--ds-fs-body)/20px "PingFang SC", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-sm: var(--ds-fs-body)/20px;
  --ds-font-xs: var(--ds-fs-body)/20px;
  --ds-font-title: var(--ds-fs-title)/24px;
}

/* ════════════════════════════════════════
   1. Section / Card
   ════════════════════════════════════════ */

.ds-section {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-4);
  background: var(--ds-surface);
}

.ds-section-title {
  font-size: var(--ds-fs-title);
  font-weight: 500;
  color: var(--ds-text);
  margin: 0 0 var(--ds-sp-3) 0;
}

.ds-divider {
  border-top: 1px solid var(--ds-border);
  margin: var(--ds-sp-3) 0;
}

.ds-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-sp-3);
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}

.ds-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-sp-2);
}

/* ════════════════════════════════════════
   2. Table
   ════════════════════════════════════════ */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-fs-body);
}
.ds-table th,
.ds-table td {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--ds-border);
}
.ds-table thead th {
  background: var(--ds-muted-bg);
  font-size: var(--ds-fs-body);
  font-weight: 600;
  color: var(--ds-text-mut);
}
.ds-table tbody tr:last-child td {
  border-bottom: none;
}
.ds-table tbody tr:hover > td {
  background: var(--ds-muted-bg);
}
.ds-table tbody tr:last-child:hover > td {
  border-bottom: 1px solid var(--ds-border);
}

/* ════════════════════════════════════════
   3. Form
   ════════════════════════════════════════ */

.ds-fields {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-4);
  flex-wrap: wrap;
}
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  min-width: 140px;
}
.ds-label {
  font-size: var(--ds-fs-body);
  font-weight: 500;
  color: var(--ds-text-mut);
}
.ds-req {
  color: var(--ds-danger);
  margin-left: 2px;
}
.ds-opt {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-light);
  font-weight: 400;
}
.ds-input,
.ds-select {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: 6px 10px;
  font-size: var(--ds-fs-body);
  width: 100%;
  box-sizing: border-box;
  color: var(--ds-text);
  background: var(--ds-surface);
}
.ds-input:focus,
.ds-select:focus {
  outline: none;
  border-color: var(--ds-primary);
}
.ds-input::placeholder {
  color: var(--ds-text-light);
}
.ds-input:read-only,
.ds-input-read-only {
  background: var(--ds-muted-bg);
  color: var(--ds-text-mut);
  cursor: default;
}

/* ════════════════════════════════════════
   4. Button
   ════════════════════════════════════════ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ds-r-md);
  padding: 6px 16px;
  font-size: var(--ds-fs-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s;
}
.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ds-btn-primary {
  background: var(--ds-primary);
  color: #fff;
}
.ds-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}
.ds-btn-ghost {
  background: transparent;
  color: var(--ds-text-mut);
  border: 1px solid var(--ds-border);
}
.ds-btn-ghost:hover:not(:disabled) {
  background: var(--ds-muted-bg);
}
.ds-btn-outline {
  background: var(--ds-surface);
  color: var(--ds-primary);
  border: 1px solid var(--ds-primary);
}
.ds-btn-outline:hover:not(:disabled) {
  background: var(--ds-primary);
  color: #fff;
}
.ds-btn-danger {
  background: transparent;
  color: var(--ds-danger);
  border: 1px solid var(--ds-border);
}
.ds-btn-danger:hover:not(:disabled) {
  background: var(--ds-danger-bg);
}

/* ════════════════════════════════════════
   5. Pill / Tag
   ════════════════════════════════════════ */

.ds-pill {
  display: inline-block;
  font-size: var(--ds-fs-body);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--ds-r-pill);
  white-space: nowrap;
}
.ds-pill--primary { color: var(--ds-primary); background: var(--ds-primary-bg); }
.ds-pill--success { color: var(--ds-success); background: var(--ds-success-bg); }
.ds-pill--warning { color: var(--ds-warning); background: var(--ds-warning-bg); }
.ds-pill--teal    { color: var(--ds-teal); background: var(--ds-teal-bg); }
.ds-pill--gray    { color: var(--ds-gray); background: var(--ds-gray-bg); }
.ds-pill--danger  { color: var(--ds-danger); background: var(--ds-danger-bg); }

.ds-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-1);
}
.ds-tag {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  background: var(--ds-gray-bg);
  padding: 2px 8px;
  border-radius: var(--ds-r-sm);
  white-space: nowrap;
}
.ds-tag-empty { color: var(--ds-text-light); }

/* ════════════════════════════════════════
   6. Search
   ════════════════════════════════════════ */

.ds-search {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: 6px 10px;
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  background: var(--ds-muted-bg);
  width: 220px;
  box-sizing: border-box;
}
.ds-search:focus {
  outline: none;
  border-color: var(--ds-primary);
  background: var(--ds-surface);
}

/* ════════════════════════════════════════
   7. Tree (checkbox tree)
   ════════════════════════════════════════ */

.ds-tree {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: var(--ds-sp-3);
  background: var(--ds-muted-bg);
  max-height: 240px;
  overflow-y: auto;
  font-size: var(--ds-fs-body);
}
.ds-tree-node { padding: var(--ds-sp-1) 0; }
.ds-tree-node > label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ds-text);
}
.ds-tree-node > label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--ds-primary);
}
.ds-tree-l1 > label { font-weight: 500; }
.ds-tree-l2 > label { color: #555; }
.ds-tree-l3 > label { color: #888; font-size: var(--ds-fs-body); }
.ds-tree-children {
  margin-left: var(--ds-sp-5);
  border-left: 1px dashed var(--ds-border);
  padding-left: var(--ds-sp-2);
}

/* ════════════════════════════════════════
   8. Empty state
   ════════════════════════════════════════ */

.ds-empty {
  text-align: center;
  padding: var(--ds-sp-6);
  color: var(--ds-text-light);
  font-size: var(--ds-fs-body);
}

/* ════════════════════════════════════════
   9. Tab (segmented control)
   ════════════════════════════════════════ */

.ds-tabs {
  display: flex;
  gap: 2px;
  background: var(--ds-muted-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  padding: 2px;
}
.ds-tab {
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-size: var(--ds-fs-body);
  font-weight: 500;
  color: var(--ds-text-mut);
  border-radius: var(--ds-r-sm);
  cursor: pointer;
  transition: all 0.12s;
}
.ds-tab:hover {
  color: var(--ds-text);
}
.ds-tab.active {
  background: var(--ds-primary);
  color: #fff;
}

/* ════════════════════════════════════════
   10. Meta (count badge etc.)
   ════════════════════════════════════════ */

.ds-meta {
  margin: 0;
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
}
.ds-count-badge {
  font-size: var(--ds-fs-body);
  font-weight: 500;
  color: var(--ds-primary);
  background: var(--ds-primary-bg);
  padding: var(--ds-sp-1) var(--ds-sp-3);
  border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-primary-bg);
}

/* ════════════════════════════════════════
   11. Dialog / Overlay
   ════════════════════════════════════════ */

.ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.ds-dialog {
  background: var(--ds-surface);
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.ds-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sp-4) var(--ds-sp-5);
  border-bottom: 1px solid var(--ds-border);
}
.ds-dialog-head h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--ds-text);
}
.ds-dialog-close {
  border: none;
  background: none;
  font-size: 22px;
  color: var(--ds-text-light);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.ds-dialog-body {
  padding: var(--ds-sp-4) var(--ds-sp-5);
  overflow-y: auto;
  flex: 1;
}
.ds-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-3) var(--ds-sp-5);
  border-top: 1px solid var(--ds-border);
}

/* ════════════════════════════════════════
   12. Space Archive Page (spa-*)
   空间档案页面专用组件
   ════════════════════════════════════════ */

/* ── Layout ── */
.spa-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: var(--ds-sp-4);
  margin-top: var(--ds-sp-4);
  min-height: 420px;
}
@media (max-width: 900px) {
  .spa-layout { grid-template-columns: 1fr; }
}
.spa-tree-panel,
.spa-detail-panel {
  padding: var(--ds-sp-3);
  border-radius: var(--ds-r-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  min-height: 360px;
}

/* ── Tree ── */
.spa-tree {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.spa-tree-campus { margin-bottom: var(--ds-sp-3); }
.spa-tree-building { margin-bottom: var(--ds-sp-2); }
.spa-tree-buildings,
.spa-tree-floors,
.spa-tree-rooms {
  display: none;
  margin-left: var(--ds-sp-3);
  padding-left: var(--ds-sp-2);
  border-left: 1px solid var(--ds-border);
}
.spa-tree-campus.is-expanded > .spa-tree-buildings,
.spa-tree-building.is-expanded > .spa-tree-floors,
.spa-tree-floor.is-expanded > .spa-tree-rooms {
  display: block;
}
.spa-tree-chevron {
  flex: 0 0 14px;
  font-size: var(--ds-fs-body);
  color: var(--ds-text-light);
  line-height: 1;
}
.spa-tree-item {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  width: 100%;
  margin: var(--ds-sp-1) 0;
  padding: 8px var(--ds-sp-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  background: var(--ds-muted-bg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.spa-tree-item:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.spa-tree-item.active {
  border-color: var(--ds-primary);
  background: var(--ds-primary-bg);
}
.spa-tree-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.spa-tree-copy strong { font-size: var(--ds-fs-body); }
.spa-tree-copy small { font-size: var(--ds-fs-body); color: var(--ds-text-mut); }
.spa-tree-empty { margin: 8px 0; padding-left: 8px; }

/* ── Detail Panel ── */
.spa-detail { width: 100%; }
.spa-detail-panel-v2 { max-width: 100%; }
.spa-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--ds-sp-2);
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: var(--ds-sp-3);
}
.spa-detail-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
}
.spa-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}
.spa-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-text);
}
.spa-detail-title-input {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-text);
  border: 1px solid var(--ds-primary);
  border-radius: var(--ds-r-md);
  padding: 0 var(--ds-sp-2);
  height: 28px;
  outline: none;
  font-family: inherit;
  background: var(--ds-surface);
}
.spa-rename-btn {
  margin-left: auto;
  font-size: var(--ds-fs-body);
  padding: 3px 10px;
}

/* ── Stat Cards ── */
.spa-stats {
  display: flex;
  gap: var(--ds-sp-2);
  margin-bottom: var(--ds-sp-3);
}
.spa-stat-card {
  flex: 1;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.spa-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-primary);
  line-height: 1.2;
}
.spa-stat-num.off { color: var(--ds-text-light); }
.spa-stat-label {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  margin-top: 2px;
}

/* ── Detail Sections ── */
.spa-detail-section {
  padding: var(--ds-sp-3) 0;
  border-top: 1px solid var(--ds-border);
}
.spa-detail-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.spa-detail-section-title {
  font-size: var(--ds-fs-body);
  font-weight: 600;
  color: var(--ds-text-mut);
  margin-bottom: var(--ds-sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Field Grid ── */
.spa-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-1) var(--ds-sp-4);
}
.spa-detail-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ds-fs-body);
}
.spa-detail-field-label {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  white-space: nowrap;
}
.spa-detail-field-value {
  color: var(--ds-text);
  font-weight: 500;
}
.spa-detail-field-value.is-readonly { color: var(--ds-text-mut); }
.spa-detail-field-value.mono {
  font-family: monospace;
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
}

/* ── List Rows ── */
.spa-detail-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  padding: 10px var(--ds-sp-3);
  background: var(--ds-muted-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md);
  font-size: var(--ds-fs-body);
  cursor: pointer;
  margin-bottom: var(--ds-sp-1);
}
.spa-detail-row:last-child { margin-bottom: 0; }
.spa-detail-row:hover { background: #f1f5f9; }
.spa-detail-row-name {
  flex: 1;
  font-weight: 600;
  color: var(--ds-text);
}
.spa-detail-row-meta {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
}
.spa-detail-row-arrow {
  color: var(--ds-text-light);
  font-size: var(--ds-fs-body);
}
.spa-row-del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ds-text-light);
  cursor: pointer;
  border-radius: var(--ds-r-sm);
  padding: 0;
  flex-shrink: 0;
}
.spa-row-del-btn:hover {
  background: var(--ds-danger-bg);
  color: var(--ds-danger);
}
.spa-row-del-btn svg {
  width: 14px;
  height: 14px;
}
.spa-detail-row-mac {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  font-family: monospace;
}
.spa-detail-empty-row {
  font-size: var(--ds-fs-body);
  color: var(--ds-text-mut);
  text-align: center;
  padding: var(--ds-sp-4) var(--ds-sp-2);
}

/* ── Footer ── */
.spa-detail-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-border);
  margin-top: var(--ds-sp-3);
}
.spa-detail-add-row {
  padding-top: var(--ds-sp-2);
  margin-top: var(--ds-sp-2);
  border-top: 1px dashed var(--ds-border);
}