/* PhoneRail 机架 —— 仪器前面板风格。
   一处用力：每块板是一块「面板」，五个槽是凹进去的「刀片槽」，槽里是状态灯 + 读数 + 电流小曲线。
   其余一律安静：冷灰阳极铝底、细线分隔、读数用 DIN 系等宽数字。
   颜色只有两类职责：
     · 状态（运行 / 忙 / 异常 / 故障 / 断电 / 空槽 / 失联）—— 只用来表示状态，旁边一定有文字；
     · 交互（选中、链接、主按钮）—— 阳极蓝。
   图表的系列色在 chart.js 里（dataviz 参考调色板第 1/2 槽，按本页底色校验过）。 */

:root {
  color-scheme: light;
  --plane: #eceff2;        /* 页面底 */
  --panel: #fbfcfd;        /* 面板 */
  --bay: #f2f4f7;          /* 凹槽（比面板深一档） */
  --bay-edge: #dde2e8;
  --ink: #16202b;
  --ink-2: #566270;
  --muted: #8a94a0;
  --line: #d9dee4;
  --line-soft: #e8ecf0;
  --accent: #1d5fd1;
  --accent-soft: #e3ecfb;
  --bar: #fbfcfd;

  --st-ok: #0c8a0c;        /* 运行（比 dataviz 的 good 深一档：它要当文字用） */
  --st-busy: #1d5fd1;
  --st-warn: #b07a00;
  --st-bad: #c62f2f;
  --st-off: #5d6875;
  --st-empty: #b9c1ca;
  --st-lost: #98a1ab;
  --led-ok: #16b416;       /* 灯本身：亮一点，但只当圆点用，不当文字 */
  --led-warn: #fab219;
  --led-bad: #e04343;
  /* 能量流（拓扑图）：只画线和条，不当文字用。橙 = 与 BoardChart「主板合计功率」同一色相 */
  --flow: #e0621f;
  --flow-dim: #f5d6c4;
  --flow-glow: rgba(224, 98, 31, .28);
  --data: #6b7785;         /* USB 数据链路 */

  /* 两套字体都随前端打包（main.js 引入），系统字体只在字体文件还没下完时顶一下 */
  --readout: "Barlow", "Noto Sans SC Variable", sans-serif;
  --ui: "Noto Sans SC Variable", sans-serif;

  --r-panel: 10px;
  --r-bay: 6px;

  /* Element Plus：主色换成阳极蓝，其余跟着面板走 */
  --el-color-primary: #1d5fd1;
  --el-color-primary-light-3: #6190e0;
  --el-color-primary-light-5: #8eafe8;
  --el-color-primary-light-7: #bbcff1;
  --el-color-primary-light-8: #d2dff6;
  --el-color-primary-light-9: #e8effb;
  --el-color-primary-dark-2: #184ca7;
  --el-font-family: var(--ui);
  --el-border-radius-base: 6px;
}

html.dark {
  color-scheme: dark;
  --plane: #0f1216;
  --panel: #171b21;
  --bay: #12161b;
  --bay-edge: #262c34;
  --ink: #e8ecf1;
  --ink-2: #a7b0bb;
  --muted: #76808b;
  --line: #2a3038;
  --line-soft: #20252c;
  --accent: #5b95f2;
  --accent-soft: #1b2a44;
  --bar: #13171c;

  --st-ok: #3cc43c;
  --st-busy: #5b95f2;
  --st-warn: #f0b23a;
  --st-bad: #ef6464;
  --st-off: #8a95a1;
  --st-empty: #3a414a;
  --st-lost: #5d6671;
  --led-ok: #2fd12f;
  --led-warn: #fab219;
  --led-bad: #ef5353;
  --flow: #f07a3a;
  --flow-dim: #4a2c1c;
  --flow-glow: rgba(240, 122, 58, .35);
  --data: #8d98a5;

  --el-color-primary: #5b95f2;
  --el-color-primary-light-3: #3f6fb8;
  --el-color-primary-light-5: #2f548b;
  --el-color-primary-light-7: #203a5f;
  --el-color-primary-light-8: #1a2f4c;
  --el-color-primary-light-9: #142338;
  --el-color-primary-dark-2: #7eabf5;
  --el-bg-color: #171b21;
  --el-bg-color-overlay: #1c2128;
  --el-fill-color-blank: #171b21;
  --el-border-color: #2f363f;
  --el-border-color-light: #2a3038;
  --el-border-color-lighter: #242a31;
}

* { box-sizing: border-box; }
html, body { background: var(--plane); }
body { margin: 0; font-family: var(--ui); color: var(--ink); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 面板：页面上的一级容器 */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; }
.muted { color: var(--muted); font-size: 13px; }
.readout { font-family: var(--readout); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.bad { color: var(--st-bad); }
.warn { color: var(--st-warn); }

/* 面板标题：粗一点的正文字，不加眉标、不全大写 */
.ttl { font-weight: 600; font-size: 15px; margin: 0 0 10px; color: var(--ink); }

/* 状态灯 */
.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: var(--st-empty); box-shadow: 0 0 0 2px var(--panel); }
.led.ok { background: var(--led-ok); }
.led.busy { background: var(--st-busy); }
.led.warn { background: var(--led-warn); }
.led.bad { background: var(--led-bad); }
.led.off { background: var(--st-off); }
.led.lost { background: var(--st-lost); }
@media (prefers-reduced-motion: no-preference) {
  .led.busy { animation: led-blink 1s steps(2, jump-none) infinite; }
}
@keyframes led-blink { 50% { opacity: .35; } }

/* 表格：去掉 Element Plus 的斑马感，行线用细线 */
.el-table { --el-table-border-color: var(--line-soft); --el-table-header-bg-color: transparent;
  --el-table-tr-bg-color: transparent; --el-table-bg-color: transparent; --el-table-row-hover-bg-color: var(--bay);
  --el-table-text-color: var(--ink); --el-table-header-text-color: var(--muted); }
.el-table th.el-table__cell { font-weight: 500; }
code { font-size: 12px; background: var(--bay); border: 1px solid var(--line-soft); padding: 0 4px; border-radius: 4px;
  word-break: break-all; }

/* 曲线卡：标题 + 时间范围一行，下面一行小图例，再下面是图，最底下一行灰字说明 */
.chart-card .hh { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.chart-card .hh .ttl { margin: 0; }
.chart-card .legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--ink-2);
  margin-top: 10px; min-height: 20px; align-items: center; }
.chart-card .legend .hint { color: var(--muted); }
.chart-card .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.chart-card .note { margin: 2px 0 0; font-size: 12px; }