/* ============================================================
 * 易联跨境 · Arco Design 设计系统 Token
 * 基于 @arco-design/web-react 官方设计规范
 * 加载顺序：dashboard.css → dashboard-fixes.css → design-system.css → arco-theme.css
 * ============================================================ */

:root {
  /* ---------- Arco Blue 主色板 ---------- */
  --arcoblue-1: #E8F3FF;
  --arcoblue-2: #BEDAFF;
  --arcoblue-3: #94BFFF;
  --arcoblue-4: #6AA1FF;
  --arcoblue-5: #4080FF;
  --arcoblue-6: #165DFF;
  --arcoblue-7: #0E42D2;
  --arcoblue-8: #0A2BA6;
  --arcoblue-9: #061B79;
  --arcoblue-10: #03104C;

  /* ---------- Green 成功色板 ---------- */
  --green-1: #E8FFEA;
  --green-2: #BFF2C5;
  --green-3: #95E69F;
  --green-4: #6AD47A;
  --green-5: #3DC96F;
  --green-6: #00B42A;
  --green-7: #009A29;
  --green-8: #007E23;
  --green-9: #00621B;
  --green-10: #004612;

  /* ---------- Orange 警告色板 ---------- */
  --orange-1: #FFF7E8;
  --orange-2: #FFE7BA;
  --orange-3: #FFD58C;
  --orange-4: #FFC15E;
  --orange-5: #FFAA2E;
  --orange-6: #FF7D00;
  --orange-7: #D95F00;
  --orange-8: #AD4500;
  --orange-9: #802F00;
  --orange-10: #521D00;

  /* ---------- Red 危险色板 ---------- */
  --red-1: #FFECE8;
  --red-2: #FDCDC5;
  --red-3: #FBACA3;
  --red-4: #F98981;
  --red-5: #F76560;
  --red-6: #F53F3F;
  --red-7: #CB272D;
  --red-8: #A01422;
  --red-9: #750A19;
  --red-10: #4A030F;

  /* ---------- Gray 中性色板 ---------- */
  --gray-1: #F7F8FA;
  --gray-2: #F2F3F5;
  --gray-3: #E5E6EB;
  --gray-4: #C9CDD4;
  --gray-5: #A9AEB8;
  --gray-6: #86909C;
  --gray-7: #6B7785;
  --gray-8: #4E5969;
  --gray-9: #272E3B;
  --gray-10: #1D2129;

  /* ---------- 语义化颜色（Arco 标准命名） ---------- */
  --color-primary-1: var(--arcoblue-1);
  --color-primary-2: var(--arcoblue-2);
  --color-primary-3: var(--arcoblue-3);
  --color-primary-4: var(--arcoblue-4);
  --color-primary-5: var(--arcoblue-5);
  --color-primary-6: var(--arcoblue-6);
  --color-primary-7: var(--arcoblue-7);
  --color-success-6: var(--green-6);
  --color-success-5: var(--green-5);
  --color-success-1: var(--green-1);
  --color-warning-6: var(--orange-6);
  --color-warning-5: var(--orange-5);
  --color-warning-1: var(--orange-1);
  --color-danger-6: var(--red-6);
  --color-danger-5: var(--red-5);
  --color-danger-1: var(--red-1);

  /* ---------- 文字颜色 ---------- */
  --color-text-1: var(--gray-10);  /* 强调/正文标题 */
  --color-text-2: var(--gray-8);   /* 次强调 */
  --color-text-3: var(--gray-6);   /* 次要信息 */
  --color-text-4: var(--gray-4);   /* 置灰 */

  /* ---------- 边框颜色 ---------- */
  --color-border-1: var(--gray-2);  /* 浅 */
  --color-border-2: var(--gray-3);  /* 常规 */
  --color-border-3: var(--gray-4);  /* 深/hover */
  --color-border-4: var(--gray-6);  /* 重/按钮边框 */

  /* ---------- 填充颜色 ---------- */
  --color-fill-1: var(--gray-1);  /* 浅/禁用 */
  --color-fill-2: var(--gray-2);  /* 常规/白底hover */
  --color-fill-3: var(--gray-3);  /* 深/灰底hover */
  --color-fill-4: var(--gray-4);  /* 重 */

  /* ---------- 背景颜色 ---------- */
  --color-bg-1: var(--gray-1);    /* 整体背景 */
  --color-bg-2: #FFFFFF;          /* 容器背景 */
  --color-bg-3: #FFFFFF;          /* 次级容器 */
  --color-bg-4: #FFFFFF;          /* 三级容器 */
  --color-bg-5: #FFFFFF;          /* 弹窗/Tooltip */

  /* ---------- 字体 ---------- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-size-body-1: 12px;
  --font-size-body-2: 13px;
  --font-size-body-3: 14px;
  --font-size-title-1: 16px;
  --font-size-title-2: 20px;
  --font-size-title-3: 24px;
  --font-size-display-1: 36px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height: 1.5715;

  /* ---------- 圆角 ---------- */
  --border-radius-none: 0;
  --border-radius-small: 2px;
  --border-radius-medium: 4px;
  --border-radius-large: 8px;
  --border-radius-circle: 50%;

  /* ---------- 间距（4px 基准） ---------- */
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-8: 32px;
  --size-9: 36px;
  --size-10: 40px;

  /* ---------- 组件尺寸 ---------- */
  --component-size-mini: 24px;
  --component-size-small: 28px;
  --component-size-default: 32px;
  --component-size-large: 36px;

  /* ---------- 阴影 ---------- */
  --shadow-1: 0 2px 5px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 16px 40px rgba(0, 0, 0, 0.16);
  --shadow-focus: 0 0 0 3px rgba(22, 93, 255, 0.12);

  /* ---------- 动效 ---------- */
  --transition-fast: 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
  --transition-normal: 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  --transition-slow: 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);

  /* ============================================================
   * 兼容现有 dashboard.css 变量名映射（值替换为 Arco 规范）
   * ============================================================ */
  --ink: var(--color-text-1);
  --muted: var(--color-text-3);
  --line: var(--color-border-2);
  --soft: var(--color-bg-1);
  --paper: var(--color-bg-2);
  --nav: #001D4D;                /* Arco 深色侧边栏 */
  --nav-active: rgba(22, 93, 255, 0.25);
  --teal: var(--arcoblue-6);     /* 主色映射 → Arco Blue */
  --teal-dark: var(--arcoblue-7);
  --teal-soft: var(--arcoblue-1);
  --blue-soft: var(--arcoblue-1);
  --amber: var(--orange-6);
  --red: var(--red-6);
  --green: var(--green-6);
  --shadow: var(--shadow-3);
  --radius: var(--border-radius-large);

  /* V2.6.0 覆盖变量 */
  --ui-radius: var(--border-radius-medium);
  --ui-radius-lg: var(--border-radius-large);
  --ui-green-soft: var(--arcoblue-1);
}

/* ---------- 全局基础样式 ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  color: var(--color-text-1);
  font-size: var(--font-size-body-3);
  font-family: var(--font-family);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 主内容区 */
.main { padding: 0 var(--size-6) var(--size-6); }

/* 按钮基础 */
.btn,
.control:not(textarea),
.sdm-select-trigger,
.pager-size,
.account-switch select,
.side-store-switch select {
  height: var(--component-size-default);
  min-height: var(--component-size-default);
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-body-3);
  line-height: 1;
  font-family: var(--font-family);
}

.btn { padding: 0 var(--size-4); font-weight: var(--font-weight-medium); }
.btn-primary {
  background: var(--color-primary-6);
  border-color: var(--color-primary-6);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-5);
  border-color: var(--color-primary-5);
}

textarea.control {
  min-height: 64px;
  border-radius: var(--border-radius-medium);
  line-height: var(--line-height);
}

/* 卡片/面板 */
.panel,
.modal,
.drawer,
.settings-card,
.auth-card,
.edit-card {
  border-radius: var(--border-radius-large);
}

.panel { margin-bottom: var(--size-4); }
.panel-body,
.modal-body { padding: var(--size-4); }

/* 工具栏 */
.toolbar {
  min-height: 48px;
  padding: var(--size-2) var(--size-4);
  gap: var(--size-2);
}

/* 表格 */
.list-table thead th {
  height: 40px;
  padding: 8px 12px;
  font-size: var(--font-size-body-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-2);
  background: var(--color-fill-1);
}
.list-table tbody td {
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--font-size-body-3);
}

/* 表单字段 */
.field { gap: var(--size-1); }
.field > label {
  font-size: var(--font-size-body-3);
  line-height: 20px;
  color: var(--color-text-2);
  font-weight: var(--font-weight-medium);
}
.field-help, .meta, .selected-hint {
  font-size: var(--font-size-body-1);
  color: var(--color-text-3);
}

/* 状态标签 */
.status {
  min-height: var(--component-size-mini);
  padding: 2px 8px;
  border-radius: var(--border-radius-circle);
  font-size: var(--font-size-body-1);
  font-weight: var(--font-weight-medium);
}

/* 导航符号占位 */
.nav-symbol {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: var(--border-radius-small);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
}

/* 指标卡片 */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.metric-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
}
.metric-card small { color: var(--color-text-3); }
.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
}

/* 账号级别标签 */
.account-level {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: var(--color-primary-7);
  background: var(--color-primary-1);
  border-radius: var(--border-radius-circle);
  font-size: var(--font-size-body-1);
}

/* 空状态 */
.center-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-3);
}

/* 组件 playground */
.component-playground { display: grid; gap: 16px; }
.component-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* 聚焦态统一 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sdm-select-trigger:focus-visible {
  outline: none;
  border-color: var(--color-primary-6);
  box-shadow: var(--shadow-focus);
}

/* 滚动条 Arco 风格 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--gray-4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-5); }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}