/* S8 — assets-board.css 资产看板样式（第 29 轮契约 §5）
 * 铁律：颜色/圆角/字号/间距全走 tokens.css --am-* 变量；涨跌色为本文件独立变量
 * ——全站统一绿涨红跌（用户 2026-09-24 拍板）：--am-green-up #00834d / --am-red-down #c2402f。
 * 卡片范式：.view-card（#f6f7f8 底）+ 本模块 .ab-card 覆盖圆角 10px（--am-radius-10）。
 * 类名前缀 ab-*（assets-board），与视图容器 .view-assets-board 配套。
 */

:root {
  /* 涨跌语义色（绿涨红跌；独立命名，不与 market-board.css 的 --am-red-up/--am-green-down 加载顺序耦合） */
  --am-green-up: #00834d;    /* 涨 — 全站统一绿涨红跌（用户 2026-09-24 拍板）= --am-green-11 */
  --am-red-down: #c2402f;    /* 跌 — 同上拍板口径 */

  /* 资产看板局部尺度 */
  --ab-card-bg: #f6f7f8;                  /* 既有 view-card 卡片底 */
  --ab-card-radius: var(--am-radius-10, 10px); /* 任务书：10px 圆角 */
  --ab-gap: 10px;
  --ab-total-size: var(--am-font-size-2xl, 24px);
  --ab-value-size: var(--am-font-size-xl, 20px);
}

/* ── 视图容器（thread 变体，参照 .view-* 家族） ── */
.view-assets-board {
  max-width: var(--am-content-max-width, 860px);
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}

/* ── 卡片（复用 states.css .view-card 底色/padding，覆盖圆角 10px） ── */
.ab-card {
  background: var(--ab-card-bg);
  border-radius: var(--ab-card-radius);
}

.ab-card h2 {
  font-size: var(--am-font-size-md, 16px);
  font-weight: 600;
  color: var(--am-gray-12, #202020);
  margin-bottom: 12px;
}

.ab-card-label {
  display: block;
  font-size: var(--am-font-size-sm, 12px);
  color: var(--am-muted-foreground, #0000007d);
  margin-bottom: 6px;
}

.ab-card-sub {
  display: block;
  font-size: var(--am-font-size-xs, 10px);
  color: var(--am-gray-a8, #0004);
  margin-top: 6px;
}

/* ── 顶部三卡（总资产 / 今日盈亏 / 可用现金） ── */
.ab-top-row {
  display: flex;
  gap: var(--ab-gap);
  align-items: stretch;
}

.ab-top-row .ab-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

.ab-total-value {
  font-size: var(--ab-total-size);
  font-weight: 700;
  color: var(--am-gray-12, #202020);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

.ab-pnl-value,
.ab-cash-value {
  font-size: var(--ab-value-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ab-pnl-pct {
  display: block;
  font-size: var(--am-font-size-sm, 12px);
  font-weight: 600;
  margin-top: 4px;
}

/* 绿涨红跌（全站统一，用户 2026-09-24 拍板） */
.ab-up   { color: var(--am-green-up); }
.ab-down { color: var(--am-red-down); }

/* tick 微跳动高亮动画（subscribeTick 每 2s 驱动） */
@keyframes ab-flash-kf {
  0%   { background: var(--am-primary-3, #e7f8e3); }
  100% { background: transparent; }
}
.ab-total-value.ab-flash {
  animation: ab-flash-kf .6s ease-out;
  border-radius: var(--am-radius-6, 6px);
  padding: 0 4px;
  margin-left: -4px;
}

/* ── 资产分布环形图 ── */
.ab-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ab-donut {
  position: relative;
  width: 132px;
  height: 132px;
  flex: none;
}
.ab-donut svg { width: 132px; height: 132px; display: block; }

.ab-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ab-donut-total {
  font-size: var(--am-font-size-sm, 12px);
  font-weight: 700;
  color: var(--am-gray-12, #202020);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ab-donut-label {
  font-size: var(--am-font-size-xs, 10px);
  color: var(--am-muted-foreground, #0000007d);
  margin-top: 2px;
}

/* 六色环段调色板（5 持仓 + 现金；语义底色取 tokens 色系，保持柔和区分度） */
.ab-seg { transition: stroke-dasharray .3s ease; }
.ab-c0 { color: var(--am-blue-9, #1d7afc); }        /* 段 1 — 蓝 */
.ab-c1 { color: var(--am-primary-9, #3a0); }        /* 段 2 — 绿 */
.ab-c2 { color: var(--am-red-9, #f15b50); }         /* 段 3 — 红 */
.ab-c3 { color: #8f5af6; }                          /* 段 4 — 紫 */
.ab-c4 { color: #e8a511; }                          /* 段 5 — 金 */
.ab-c5 { color: var(--am-gray-8, #bbb); }           /* 段 6 — 灰（现金） */
.ab-seg.ab-c0 { stroke: var(--am-blue-9, #1d7afc); }
.ab-seg.ab-c1 { stroke: var(--am-primary-9, #3a0); }
.ab-seg.ab-c2 { stroke: var(--am-red-9, #f15b50); }
.ab-seg.ab-c3 { stroke: #8f5af6; }
.ab-seg.ab-c4 { stroke: #e8a511; }
.ab-seg.ab-c5 { stroke: var(--am-gray-8, #bbb); }

/* 图例 */
.ab-legend {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 16px;
}
.ab-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--am-font-size-sm, 12px);
  color: var(--am-gray-12, #202020);
  min-width: 0;
}
.ab-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
.ab-legend-name { flex: none; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-legend-pct  { margin-left: auto; color: var(--am-muted-foreground, #0000007d); font-variant-numeric: tabular-nums; }
.ab-legend-val  { flex: none; color: var(--am-gray-a11, #0000007d); font-variant-numeric: tabular-nums; }

/* ── 持仓明细表 ── */
.ab-positions { width: 100%; border-collapse: collapse; }

.ab-pos-head th {
  font-size: var(--am-font-size-sm, 12px);
  font-weight: 500;
  color: var(--am-muted-foreground, #0000007d);
  text-align: right;
  padding: 4px 8px;
  border-bottom: 1px solid var(--am-gray-6, #d8d8d8);
  white-space: nowrap;
}
.ab-pos-head th:first-child { text-align: left; }

.ab-pos-row td {
  font-size: var(--am-font-size-body, 14px);
  color: var(--am-gray-12, #202020);
  text-align: right;
  padding: 7px 8px;
  border-bottom: 1px solid var(--am-gray-4, #e8e8e8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ab-pos-row:last-child td { border-bottom: none; }
.ab-pos-row:hover td { background: var(--am-gray-a2, #00000006); }
.ab-pos-row td:first-child { text-align: left; font-weight: 600; }

.ab-pos-pnl { font-weight: 600; }

.ab-pos-empty td {
  text-align: center;
  color: var(--am-muted-foreground, #0000007d);
  padding: 24px 0;
}

/* 「交易」按钮 → emit tab:changed {tab:'trade'} */
.ab-trade-btn {
  font: inherit;
  font-size: var(--am-font-size-sm, 12px);
  line-height: 1;
  color: var(--am-blue-11, #0068e8);
  background: var(--am-blue-2, #f5f9ff);
  border: 1px solid var(--am-blue-4, #daecff);
  border-radius: var(--am-radius-6, 6px);
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ab-trade-btn:hover { background: var(--am-blue-3, #e9f3ff); border-color: var(--am-blue-9, #1d7afc); }
.ab-trade-btn:focus-visible { outline: 2px solid var(--am-blue-9, #1d7afc); outline-offset: 1px; }

/* ── 近 7 日收益曲线 ── */
.ab-spark svg {
  width: 100%;
  height: 130px;
  display: block;
}

.ab-spark-line {
  fill: none;
  stroke: var(--am-blue-9, #1d7afc);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-spark-area {
  fill: var(--am-blue-a3, #0074ff16);
  stroke: none;
}
.ab-spark-zero {
  stroke: var(--am-gray-8, #bbb);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.ab-spark-dot {
  fill: var(--am-blue-9, #1d7afc);
}
.ab-spark-last {
  fill: var(--am-green-up); /* 末点=今日盈亏：绿涨红跌口径 */
}
.ab-spark-last.ab-down-dot { fill: var(--am-red-down); }

.ab-spark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--am-font-size-xs, 10px);
  color: var(--am-muted-foreground, #0000007d);
}

/* ── 响应式：窄屏三卡换列 ── */
@media (max-width: 720px) {
  .ab-top-row { flex-direction: column; }
  .ab-donut-wrap { flex-direction: column; align-items: flex-start; }
}