:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #e0e3e8;
  --text: #1c2128;
  --muted: #6b7280;
  --accent: #2563eb;
  --risk: #dc2626;
  --risk-bg: #fef2f2;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --cost-col-width: 64px;
  --row-height: 42px;
  --font-sans: "IBM Plex Sans", "PingFang SC", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hover-bg: #eef2ff;
}

* { box-sizing: border-box; }

/* .toolbar 等元素自己声明了 display:flex，author样式优先级比UA默认的[hidden]规则高，
   不加这条会导致hidden属性被样式覆盖、元素该隐藏的时候还是显示出来。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

/* shell占满一屏，header/overview/toolbar/status按内容固定大小(flex:none)，
   table-wrap(flex:1)吃掉剩余高度——以后shell里加新模块不用再手动调table-wrap的
   max-height数字，它会自动只剩这么多空间。min-height:0是关键，没有这个flex子元素
   默认不会收缩，table-wrap内部的overflow:auto就不会生效，会把shell撑爆出双层滚动条。

   overview/toolbar的"滚动表格时顶出去、滚回顶部时拉回来"效果特意不用CSS position:sticky
   实现——试过让table-wrap只开overflow-x、把纵向滚动交给整个页面，指望thead的sticky
   吸在页面视口上，但CSS规范里overflow-x非visible时overflow-y没显式设置也会被强制转成
   auto(两轴不能一个visible一个不是)，这层就变成了它自己的滚动容器，thead的sticky反而被
   "截胡"在这个盒子内部、永远够不到页面视口(实测验证过，滚动时表头会跟着一起跑走，不会
   吸顶)。加上用户原话"表格滚动回到了最上面"这个描述本身指的也是table-wrap自己的滚动位置，
   不是整个页面的scrollY——所以老老实实用JS监听table-wrap的scroll事件，滚动位置不在顶部
   就给shell加.collapsed类隐藏overview/toolbar(见script.js)，比硬掰CSS sticky更直接可靠。 */
.shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.shell > header,
.shell > .overview,
.shell > .toolbar,
.shell > .status {
  flex: none;
}
.shell > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.shell.collapsed > .overview,
.shell.collapsed > .toolbar {
  display: none;
}

header {
  padding: 16px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

h1 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
}

input, button {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

button {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

button:hover { opacity: 0.9; }

/* ---------- 顶部总览 ---------- */
.overview {
  margin: 16px 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.overview-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.overview-card .l { font-size: 11px; color: var(--muted); }
.overview-card .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.overview-card .s { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.overview-card.muted .v { color: var(--muted); }
.overview-card.health-red { border-color: var(--risk); background: var(--risk-bg); }
.overview-card.health-red .v { color: var(--risk); }
.overview-card.health-yellow { border-color: var(--warn); background: var(--warn-bg); }
.overview-card.health-yellow .v { color: var(--warn); }
.overview-card.health-green { border-color: var(--ok); background: var(--ok-bg); }
.overview-card.health-green .v { color: var(--ok); }

.toolbar {
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.toolbar input { width: 200px; }

.stats {
  color: var(--muted);
  font-size: 12px;
}

.status {
  padding: 12px 20px;
  color: var(--muted);
  font-size: 13px;
}

.table-wrap {
  margin: 0 20px 20px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}

table {
  /* border-collapse:collapse + 多个冻结列(sticky)一起用，Chrome/Safari在横向滚动时
     会算错冻结偏移量，导致表头和数据错位——用separate规避这个坑，边框视觉上几乎没差别。 */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  table-layout: fixed;
}

th, td {
  padding: 0 8px;
  height: var(--row-height);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: right;
  overflow: hidden;
}

/* ---------- 表头 ---------- */
thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 2;
  text-align: center;
  font-weight: 600;
  height: auto;
  padding: 8px 6px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.customer-th {
  width: 63px;
  min-width: 63px;
  max-width: 63px;
  font-size: 11px;
  cursor: pointer;
}
.customer-th:hover { background: #eef2ff; }
.customer-th.expanded-col { background: #e0e7ff; }

/* ---------- SKU列（冻结在最左） ---------- */
.sku-th, .sku-cell {
  width: var(--sku-col-width, 220px);
  min-width: var(--sku-col-width, 220px);
  max-width: var(--sku-col-width, 220px);
}

thead th.sku-th {
  /* sticky本身就能当.col-resize-handle(absolute定位)的containing block，
     不需要额外加position:relative——之前重复声明了position，后面那行把sticky覆盖掉了，
     导致这列表头从来没真正冻结住，这才是滚动错位的根本原因。 */
  position: sticky;
  left: 0;
  z-index: 4;
  text-align: left;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
}
.col-resize-handle:hover, .col-resize-handle:active { background: var(--accent); opacity: 0.4; }

.sku-cell {
  position: sticky;
  left: 0;
  background: #f9fafb;
  text-align: left;
  z-index: 1;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}
.sku-cell:hover { background: #eef2ff; }
tr.expanded-row > th.sku-cell { background: #e0e7ff; }

.sku-code {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sku-name {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 成本列（冻结在SKU列右边） ---------- */
.cost-col {
  width: var(--cost-col-width);
  min-width: var(--cost-col-width);
  max-width: var(--cost-col-width);
  position: sticky;
  left: var(--sku-col-width, 220px);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: var(--panel);
}
thead th.cost-col {
  z-index: 3;
  background: #f9fafb;
  color: inherit;
}
td.cost-col { z-index: 1; }

td.empty { color: #cbd0d8; text-align: center; }

/* ---------- 整行hover高亮：sku-cell/cost-col是sticky列，各自已经设置了自己的
   背景色，hover时要单独覆盖一次，不然只有非冻结列变色、冻结列看着像没跟着亮。
   价格标红/黄/绿的格子保留原有语义色，不参与hover变色，避免和色块语义混在一起。 ---------- */
tbody tr:hover > td:not(.price-red):not(.price-yellow):not(.price-green):not(.cost-col) {
  background: var(--hover-bg);
}
tbody tr:hover > td.cost-col,
tbody tr:hover > th.sku-cell {
  background: var(--hover-bg);
}

/* ---------- 价格健康度标色（价格/成本的倍数） ---------- */
td.price-red { background: var(--risk-bg); color: var(--risk); font-weight: 600; }
td.price-yellow { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
td.price-green { background: var(--ok-bg); color: var(--ok); }

/* ---------- 详情面板：全屏弹出，不再是表格下面的一块内嵌区域 ---------- */
.detail {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--panel);
  overflow-y: auto;
  animation: detail-in 0.15s ease-out;
}

@keyframes detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
}

.detail-header button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}
.detail-header button:hover { color: var(--text); opacity: 1; }

.detail > .detail-section:last-child { padding-bottom: 40px; }

.detail-section {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.detail-section:last-child { border-bottom: none; }
.detail-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 价格统计卡片 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfc;
}
.stat-card.muted { background: #f9fafb; }
.stat-card .l { font-size: 12px; color: var(--muted); }
.stat-card .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card .v small { font-size: 11px; font-weight: 400; color: var(--muted); }

/* ---------- 图表(SKU详情的柱状图 / 客户详情的环形图)都用echarts渲染，
   这里只负责给容器一个明确的尺寸——echarts.init()是按容器当时的clientWidth/Height
   量的，没有尺寸图表会渲染成空白。 ---------- */
.dist-chart {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.echart-box { flex: none; }
.echart-bar { width: 320px; height: 200px; min-width: 260px; flex: 1; }
.echart-donut { width: 300px; height: 220px; }
.echart-line { width: 100%; max-width: 640px; height: 220px; }

.dist-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  min-width: 220px;
}
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend-row .pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}

.stat-card .hint { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.muted { color: var(--muted); }

/* ---------- 客户详情：环形图外层 ---------- */
.pie-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.detail-note {
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted);
}
.detail-note-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
}
.detail-note-hint .trend-icon { flex: none; }

.trend-icon {
  color: var(--accent);
  vertical-align: -1px;
  margin-right: 5px;
  flex: none;
}

.detail-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.detail-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: auto; }
/* 主矩阵表格空间很紧(89列+固定行高)，.sku-name/.sku-code的小字号是那边必须的；详情面板
   里的表格空间宽松很多，用户反馈看不清，这里单独放大，不影响主表格。 */
.detail-table-wrap .sku-name { font-size: 12px; }
.detail-table-wrap .sku-code { font-size: 13.5px; }

.detail-table-wrap th, .detail-table-wrap td {
  padding: 8px 12px;
  height: auto;
  border-bottom: 1px solid var(--border);
  border-right: none;
  text-align: right;
  white-space: nowrap;
}
.detail-table-wrap th { position: sticky; top: 0; background: #f9fafb; text-align: right; }
.detail-table-wrap th:first-child, .detail-table-wrap td.left { text-align: left; }
.detail-table-wrap td.neg { color: var(--risk); font-weight: 600; }
.detail-table-wrap td.muted { color: #cbd0d8; }
.detail-table-wrap tbody tr:hover > td { background: var(--hover-bg); }
.detail-table-wrap tbody tr.clickable-row { cursor: pointer; }
.detail-table-wrap tbody tr.history-active > td { background: #e0e7ff; font-weight: 600; }

/* ---------- 客户历史价格走势弹窗：盖在.detail(z-index:50)上面，独立一层 ---------- */
.history-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-in 0.12s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.history-modal {
  background: var(--panel);
  border-radius: 10px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.history-modal-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.history-modal-header button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.history-modal-header button:hover { color: var(--text); }
.history-modal-body { padding: 20px; }
.history-modal-body .echart-line { width: 100%; max-width: none; }

.history-range-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.history-range-tabs button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  cursor: pointer;
}
.history-range-tabs button:hover { color: var(--text); border-color: var(--muted); }
.history-range-tabs button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

@media (max-width: 640px) {
  header { flex-direction: column; align-items: stretch; }
  .toolbar input { width: 100%; }
  .detail-summary { gap: 14px 20px; }
}