/* =========================================================
   钢铁私塾 · 历史数据看板 (历史数据看板 样式)
   ---------------------------------------------------------
   双主题适配：通过 CSS 变量驱动；不写硬编码颜色
   ========================================================= */

.board{
  display:flex;
  flex-direction:column;
  gap:var(--space-4,18px);
  padding:var(--space-2,8px) 0 var(--space-5,24px);
  font-family:var(--font-sans,inherit);
}

.board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.board-title{
  font:600 18px/1.3 var(--font-serif,'Source Han Serif','Songti SC',serif);
  color:var(--color-ink);
  margin-bottom:4px;
}
.board-sub{
  font-size:12px;
  color:var(--color-muted);
  letter-spacing:.02em;
}
.board-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

/* ── 数据源 Tab ── */
.board-tabs{
  display:flex;
  gap:4px;
  background:var(--color-surface-2);
  padding:4px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.board-tabs::-webkit-scrollbar{height:6px;}
.board-tabs::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-ink) 14%,transparent);border-radius:3px;}
.board-tab{flex-shrink:0;}
.board-filters{
  display:flex;
  gap:12px;
  padding:8px 4px 4px;
  flex-wrap:wrap;
  align-items:center;
  font:500 12px/1.2 var(--font-sans,inherit);
  color:var(--color-muted);
}
.board-filters label{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.board-filters select{
  appearance:none;
  border:1px solid color-mix(in srgb,var(--color-ink) 14%,transparent);
  background:var(--color-surface);
  color:var(--color-ink);
  padding:6px 10px;
  border-radius:var(--radius-input,8px);
  font:500 12px/1 var(--font-sans,inherit);
  font-family:inherit;
  cursor:pointer;
  min-width:120px;
  max-width:240px;
}
.board-filters select:hover{
  border-color:color-mix(in srgb,var(--color-ink) 30%,transparent);
}
.board-tab{
  appearance:none;
  border:none;
  background:transparent;
  font:500 13px/1 var(--font-sans,inherit);
  color:var(--color-muted);
  padding:8px 16px;
  border-radius:var(--radius-input,8px);
  cursor:pointer;
  transition:background-color var(--transition-base),color var(--transition-base),box-shadow var(--transition-base);
  font-family:inherit;
}
.board-tab:hover{color:var(--color-ink);}
.board-tab.active{
  background:var(--color-surface);
  color:var(--color-brand);
  box-shadow:0 1px 3px color-mix(in srgb,var(--color-ink) 6%,transparent);
  font-weight:600;
}
body.theme-coursera .board-tab.active{
  background:var(--color-brand);
  color:var(--color-on-brand,#fff);
  box-shadow:0 1px 4px color-mix(in srgb,var(--color-brand) 30%,transparent);
}
body.theme-coursera .board-tab:not(.active):hover{
  background:color-mix(in srgb,var(--color-brand) 6%,transparent);
  color:var(--color-brand);
}
.board-source-link,
.board-refresh{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  font-size:13px;
  border-radius:var(--radius-input,8px);
  border:1px solid var(--color-line);
  background:var(--color-surface);
  color:var(--color-body);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base);
  font-family:inherit;
}
.board-source-link:hover,
.board-refresh:hover{
  border-color:var(--color-brand);
  color:var(--color-brand);
  background:var(--color-brand-soft);
}
.board-refresh.spinning svg{
  animation:boardSpin .8s linear infinite;
}
@keyframes boardSpin{to{transform:rotate(360deg)}}

/* ── KPI 卡片网格 ── */
.board-kpis{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-3,12px);
}
.board-kpi{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md,12px);
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:88px;
  transition:transform var(--transition-base),box-shadow var(--transition-base);
}
.board-kpi:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px var(--color-brand-ring,rgba(117,31,36,.10));
}
.kpi-label{
  font-size:11px;
  color:var(--color-muted);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.kpi-value{
  font:600 22px/1.1 var(--font-serif,'Source Han Serif','Songti SC',serif);
  color:var(--color-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.kpi-value.sk{
  color:var(--color-subtle);
  font-weight:500;
}
.kpi-value.up{color:var(--color-success);}
.kpi-value.down{color:#b94a4a;}
body.theme-coursera .kpi-value.down{color:#d12c2c;}
.kpi-unit{
  font-size:11px;
  color:var(--color-muted);
  letter-spacing:.02em;
}

/* ── 折线图 ── */
.board-chart-wrap{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md,12px);
  padding:18px 20px 16px;
}
.board-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
}
.board-chart-title{
  font:600 14px/1.2 var(--font-serif,'Source Han Serif','Songti SC',serif);
  color:var(--color-ink);
}
.board-chart-meta{
  font-size:11px;
  color:var(--color-muted);
  letter-spacing:.02em;
}
.board-chart{
  width:100%;
  position:relative;
}
.board-svg{
  width:100%;
  height:auto;
  display:block;
}
.board-svg .grid-line{
  stroke:var(--color-line);
  stroke-width:1;
  stroke-dasharray:3 3;
  opacity:.7;
}
.board-svg .axis-text{
  fill:var(--color-muted);
  font-size:11px;
  font-family:var(--font-sans,inherit);
}
.board-svg .board-dot{
  transition:r var(--transition-fast);
}
.board-svg .board-dot:hover{
  r:4;
}
.board-svg .board-band-wick{
  pointer-events:none;
}

/* ── 走势图 tooltip ── */
.board-chart{
  position:relative;
}
.board-chart-tip{
  position:absolute;
  z-index:5;
  background:var(--color-surface, #fff);
  border:1px solid var(--color-line);
  border-radius:8px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.55;
  min-width:220px;
  max-width:300px;
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.board-chart-tip.show{
  opacity:1;
  transform:translateY(0);
}
.board-chart-tip .tip-head{
  font:600 13px/1.2 var(--font-sans, inherit);
  color:var(--color-ink);
  padding-bottom:6px;
  margin-bottom:6px;
  border-bottom:1px solid var(--color-line);
}
.board-chart-tip .tip-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.board-chart-tip .tip-key{
  color:var(--color-muted);
  font-size:11px;
}
.board-chart-tip .tip-val{
  font-weight:600;
  font-feature-settings:'tnum';
}
.board-chart-tip .tip-val.up{color:var(--color-success,#1f8a3c);}
.board-chart-tip .tip-val.down{color:#b94a4a;}
body.theme-coursera .board-chart-tip .tip-val.down{color:#d12c2c;}
.board-chart-tip .tip-sub{
  font-size:11px;
  color:var(--color-muted);
  margin:-2px 0 6px;
  padding-left:0;
}
.board-chart-tip .tip-foot{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--color-line);
  font-size:10.5px;
  color:var(--color-muted);
}
.board-chart-tip .edge{
  font-size:10px;
  padding:1px 5px;
  border-radius:3px;
  margin-left:2px;
}
.board-chart-tip .edge-trimmed{background:#e6f3ec;color:#1f8a3c;}
.board-chart-tip .edge-mill{background:#fdece0;color:#a04a18;}

/* ── 数据表 ── */
.board-table-wrap{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md,12px);
  padding:14px 0 4px;
}
.board-table-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:0 20px 10px;
  border-bottom:1px solid var(--color-line);
  font:600 14px/1.2 var(--font-serif,'Source Han Serif','Songti SC',serif);
  color:var(--color-ink);
}
.board-table-meta{
  font:400 11px/1 var(--font-sans,inherit);
  color:var(--color-muted);
}
.board-table-scroll{
  max-height:340px;
  overflow-y:auto;
  padding:0 4px 8px;
}
.board-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.board-table thead{
  position:sticky;
  top:0;
  background:var(--color-surface-2);
  z-index:1;
}
.board-table th{
  font-weight:500;
  font-size:11px;
  color:var(--color-muted);
  text-align:left;
  padding:10px 16px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:1px solid var(--color-line);
}
.board-table th.num{text-align:right;}
.board-table td{
  padding:10px 16px;
  border-bottom:1px solid var(--color-line);
  color:var(--color-body);
  font-variant-numeric:tabular-nums;
}
.board-table td.num{text-align:right;font-feature-settings:'tnum';}
.board-table td.up{color:var(--color-success);}
.board-table td.down{color:#b94a4a;}
body.theme-coursera .board-table td.down{color:#d12c2c;}
.board-table tbody tr:hover{background:var(--color-brand-soft);}
.board-table tbody tr:last-child td{border-bottom:none;}

/* ── 行可展开 / 极值标签 ── */
.board-table .board-row{cursor:pointer;}
.board-table .board-row.open{background:var(--color-brand-soft);}
.board-table .board-expand{
  display:inline-block;
  width:14px;
  color:var(--color-muted);
  font-size:10px;
  margin-right:4px;
  transition:transform .15s ease;
}
.board-table .board-row.open .board-expand{transform:rotate(0);}
.board-table .board-extreme{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.2;
  font-weight:600;
}
.board-table .board-extreme.up{color:var(--color-success,#1f8a3c);}
.board-table .board-extreme.down{color:#b94a4a;}
body.theme-coursera .board-table .board-extreme.down{color:#d12c2c;}
.board-table .board-extreme-meta{
  font-weight:400;
  font-size:10px;
  color:var(--color-muted);
  margin-top:1px;
}

/* ── 展开行 SKU 表 ── */
.board-row-expand{
  background:var(--color-surface-2, #fafafa);
}
.board-row-expand[hidden]{display:none;}
.board-row-expand td{
  padding:0 !important;
  border-bottom:1px solid var(--color-line);
}
.board-sku-table-wrap{
  padding:8px 24px 12px;
  background:linear-gradient(180deg, var(--color-brand-soft) 0%, transparent 60px);
}
.board-sku-table{
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:6px;
  overflow:hidden;
}
.board-sku-table thead th{
  font-weight:500;
  font-size:10.5px;
  color:var(--color-muted);
  padding:7px 12px;
  text-align:left;
  background:var(--color-surface-2);
  border-bottom:1px solid var(--color-line);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.board-sku-table thead th.num{text-align:right;}
.board-sku-table tbody td{
  padding:6px 12px;
  border-bottom:1px solid var(--color-line);
  font-variant-numeric:tabular-nums;
}
.board-sku-table tbody td.num{text-align:right;}
.board-sku-table tbody tr:last-child td{border-bottom:none;}
.board-sku-table tbody tr:hover{background:var(--color-brand-soft);}

/* ── 切/毛边标签 ── */
.edge-tag{
  display:inline-block;
  font-size:10px;
  padding:1px 7px;
  border-radius:10px;
  font-weight:500;
  letter-spacing:.02em;
  border:1px solid transparent;
}
.edge-tag.edge-trimmed{
  background:#e6f3ec;
  color:#1f6f3c;
  border-color:#bcdac8;
}
.edge-tag.edge-mill{
  background:#fdece0;
  color:#a04a18;
  border-color:#f0c8a8;
}
body.theme-coursera .edge-tag.edge-trimmed{background:#e6f0fa;color:#0056d2;border-color:#b8d2f0;}
body.theme-coursera .edge-tag.edge-mill{background:#fdf2d8;color:#7a4a08;border-color:#e8d09c;}

/* ── 过滤器切/毛边提示 ── */
.board-filter-tip{
  font-size:10.5px;
  color:var(--color-muted);
  align-self:center;
  margin-left:4px;
}

/* ── 底部说明 ── */
.board-foot{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:11px;
  color:var(--color-muted);
  letter-spacing:.02em;
  padding:0 2px;
}
.board-foot b{
  color:var(--color-body);
  font-weight:600;
}
.board-foot .dot{
  color:var(--color-line-strong);
}

/* ── 状态占位 ── */
.board-loading,
.board-empty{
  padding:32px 16px;
  text-align:center;
  color:var(--color-muted);
  font-size:13px;
}
.board-loading::before{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:8px;
  border:2px solid var(--color-line-strong);
  border-top-color:var(--color-brand);
  border-radius:50%;
  vertical-align:-2px;
  animation:boardSpin .8s linear infinite;
}

/* ── 时间范围控件 ── */
.board-range-ctrl{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.board-range-btns{
  display:flex;
  gap:2px;
  background:var(--color-surface-2);
  padding:2px;
  border-radius:var(--radius-sm);
}
.range-btn{
  padding:4px 10px;
  font-size:11px;
  border:none;
  background:transparent;
  color:var(--color-body);
  border-radius:var(--radius-xs);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--transition-fast),color var(--transition-fast);
  font-family:inherit;
}
.range-btn:hover{
  color:var(--color-ink);
}
.range-btn.active{
  background:var(--color-surface);
  color:var(--color-brand);
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.board-year-sel{
  padding:4px 8px;
  font-size:11px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-xs);
  background:var(--color-surface);
  color:var(--color-body);
  cursor:pointer;
  font-family:inherit;
}
.board-year-sel:focus{
  outline:none;
  border-color:var(--color-brand);
}
.board-zoom-hint{
  font-size:10.5px;
  color:var(--color-brand);
  font-weight:600;
  background:var(--color-brand-soft);
  padding:2px 8px;
  border-radius:var(--radius-pill);
  display:none;
}
.board-chart-wrap{
  outline:none;
  position:relative;
}
.board-chart-wrap:focus{
  box-shadow:0 0 0 2px var(--color-brand-ring, rgba(117,31,36,.15));
  border-radius:var(--radius-sm);
}
.board-chart-tip-hint{
  font-size:10.5px;
  color:var(--color-muted);
  padding:6px 0 0;
  text-align:right;
  letter-spacing:.01em;
}

/* ── 响应式 ── */
@media (max-width:1100px){
  .board-kpis{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .board-kpis{grid-template-columns:repeat(2,1fr);}
  .board-head{flex-direction:column;align-items:flex-start;}
  .board-chart-wrap{padding:14px 12px 12px;}
  .board-table th,.board-table td{padding:8px 10px;}
  .board-chart-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .board-range-ctrl{width:100%;}
  .board-chart-tip-hint{display:none;}
}

/* ── Coursera 主题微调 ── */
body.theme-coursera .board-kpi{
  background:var(--color-surface);
  border-radius:var(--radius-input,8px);
}
body.theme-coursera .board-chart-wrap,
body.theme-coursera .board-table-wrap{
  border-radius:var(--radius-input,8px);
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-ink) 4%,transparent);
}
body.theme-coursera .board-table tbody tr:hover{
  background:color-mix(in srgb,var(--color-brand) 6%,transparent);
}
body.theme-coursera .board-source-link:hover,
body.theme-coursera .board-refresh:hover{
  background:color-mix(in srgb,var(--color-brand) 6%,transparent);
  border-color:#0056d2;
  color:#0056d2;
}
body.theme-coursera .kpi-value.up{color:#1f8a4c;}
body.theme-coursera .kpi-value.down{color:#d12c2c;}