/**
 * 回测关键指标（sw-kpi / sw-kpi-chip）
 *
 * 策略工坊的单元格回测预览卡、回测分析详情、生成实盘的策略研究列表，
 * 三处共用这一份样式，保证同一份报告在不同入口看起来是同一组指标。
 *
 * 只消费语义 token，不写死具体主题色，换肤时自动跟随。
 */

.sw-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

/*
 * 卡片自己就是查询容器：工坊右侧详情面板可以被拖到很窄，
 * 用「卡片自身宽度」判断该不该收图标、该不该缩字号，比 viewport 媒体查询准。
 */
.sw-kpi__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px 10px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-text, #e8edf5) 4%, transparent);
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
  container-type: inline-size;
}

.sw-kpi__card:hover {
  border-color: color-mix(in srgb, var(--color-accent, #6c84f0) 34%, var(--color-border, rgba(148, 163, 184, 0.2)));
  background: color-mix(in srgb, var(--color-accent, #6c84f0) 7%, transparent);
}

.sw-kpi__label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--color-text-muted, #99a1b2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.sw-kpi__label i {
  font-size: 10px;
  opacity: 0.85;
  flex: 0 0 auto;
}

.sw-kpi__label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-kpi__value {
  color: var(--color-text, #e8edf5);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.sw-kpi__sub {
  color: var(--color-text-faint, rgba(153, 161, 178, 0.58));
  font-size: 10px;
  line-height: 1.3;
  /* 副标题宁可折行，也不要在窄卡片里被截成「252 交易日…」 */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 卡片变窄：先收图标，指标名保持完整可读；再窄才牺牲副标题。
   注意 container query 只能作用于容器「内部」的元素，容器自身不能自查询，
   所以这里只调子元素（内边距随字号在主规则里给足余量）。 */
@container (max-width: 110px) {
  .sw-kpi__label {
    gap: 0;
    font-size: 10px;
  }

  .sw-kpi__label i {
    display: none;
  }

  .sw-kpi__value {
    font-size: 13.5px;
  }

  .sw-kpi__sub {
    font-size: 9.5px;
    line-height: 1.25;
  }
}

@container (max-width: 66px) {
  .sw-kpi__label {
    font-size: 9.5px;
    letter-spacing: 0;
  }

  .sw-kpi__value {
    font-size: 12px;
  }
}

@container (max-width: 58px) {
  .sw-kpi__sub {
    display: none;
  }
}

/* 涨跌色：金融习惯——盈利/上涨用红，亏损/回撤/下跌用蓝（禁用绿色） */
.sw-kpi__card.is-up .sw-kpi__value {
  color: var(--color-profit, var(--color-danger, #e4757c));
}

.sw-kpi__card.is-down .sw-kpi__value {
  color: var(--color-loss, var(--color-info, #6c84f0));
}

/* 空态：还没跑回测时给同一组指标留位，显示「—」而不是塌成一片空白 */
.sw-kpi--empty .sw-kpi__card {
  border-style: dashed;
  background: transparent;
  opacity: 0.9;
}

.sw-kpi--empty .sw-kpi__value {
  color: var(--color-text-faint, rgba(153, 161, 178, 0.58));
  font-weight: 600;
}

/* 预览卡里更紧凑一些：单元格下方空间有限 */
.sw-kpi--preview {
  gap: 6px;
}

.sw-kpi--preview .sw-kpi__card {
  padding: 7px 9px 8px;
  border-radius: 9px;
}

.sw-kpi--preview .sw-kpi__value {
  font-size: 14px;
}

.sw-kpi--preview .sw-kpi__sub {
  display: none;
}

@media (max-width: 720px) {
  .sw-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 一行式指标：空间只有一行时用 ---------- */
.sw-kpi-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  min-width: 0;
}

.sw-kpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #6c84f0) 22%, var(--color-border, rgba(148, 163, 184, 0.2)));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #6c84f0) 7%, transparent);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sw-kpi-chip em {
  color: var(--color-text-muted, #99a1b2);
  font-style: normal;
  font-weight: 500;
}

.sw-kpi-chip b {
  color: var(--color-text, #e8edf5);
  font-weight: 700;
}

/* 盈利/上涨用红，亏损/下跌用蓝（禁用绿色） */
.sw-kpi-chip.is-up b {
  color: var(--color-profit, var(--color-danger, #e4757c));
}

.sw-kpi-chip.is-down b {
  color: var(--color-loss, var(--color-info, #6c84f0));
}

/* 单行被压扁时允许折行，但不撑高列表行 */
.sw-kpi-chip:nth-child(n + 3) {
  flex: 0 0 auto;
}

/* 窄屏只缩字号，不隐藏指标名：四个纯数字排在一起没人认得出哪个是回撤 */
@media (max-width: 900px) {
  .sw-kpi-chip {
    gap: 3px;
    padding: 1px 6px;
    font-size: 10px;
  }
}