/* ==================================================================
 * 总览仪表盘 · 驾驶舱（大屏可视化）主题
 *
 * 只作用于 .cockpit 内部，不外泄到后台其它页面。
 * 关键手法：在 .cockpit 里**重新定义设计系统的 CSS 变量**（--text / --border / --bg-soft …），
 * 这样 Charts 与 UI kit 生成的 SVG（坐标轴用 var(--text-mute)、网格线用 var(--border)）
 * 会自动变成深色底上的浅色，不需要为每个图重写颜色。
 * 只有三处硬编码浅色需要单独覆盖：.hbar-track / .funnel-track / .donut 的底。
 * ================================================================== */

.cockpit {
  /* 大屏配色（深空蓝底 + 霓虹青蓝主色） */
  --ck-bg: #060A18;
  --ck-panel: rgba(18, 28, 56, .78);
  --ck-panel-hi: rgba(30, 46, 88, .55);
  --ck-line: rgba(88, 132, 255, .22);
  --ck-line-soft: rgba(88, 132, 255, .12);
  --ck-text: #DCE6FF;
  --ck-sub: #A9B8E0;
  --ck-mute: #7E8DB8;
  --ck-cyan: #22D3EE;
  --ck-blue: #4DA6FF;
  --ck-green: #2BD98A;
  --ck-amber: #F5A524;
  --ck-red: #FF5470;
  --ck-purple: #A78BFA;

  /* 覆盖设计系统变量：让 Charts / UI kit 生成的内容自动适配深色底 */
  --text: var(--ck-text);
  --text-sub: var(--ck-sub);
  --text-mute: var(--ck-mute);
  --border: var(--ck-line);
  --border-strong: var(--ck-line);
  --bg: var(--ck-bg);
  --bg-soft: rgba(255, 255, 255, .045);
  --card: var(--ck-panel);

  /* 抵消 #view 的内边距，做满幅出血；高度锚在视口上，短屏改为内部滚动而不是被裁掉 */
  margin: -20px -24px -40px;
  height: calc(100vh - var(--topbar-h));
  min-height: 420px;
  box-sizing: border-box;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;      /* 排不下时滚，而不是把内容裁掉 */
  overflow-x: hidden;
  color: var(--ck-text);
  background:
    radial-gradient(1200px 620px at 12% -10%, rgba(77, 166, 255, .18), transparent 62%),
    radial-gradient(1000px 560px at 92% 6%, rgba(167, 139, 250, .14), transparent 60%),
    radial-gradient(900px 500px at 50% 108%, rgba(34, 211, 238, .10), transparent 62%),
    var(--ck-bg);
  position: relative;
  overflow: hidden;       /* 只让中间的数据区滚动：标题栏与动态条都在滚动区之外，永远可见 */
}
/* 大屏底纹：细网格 + 顶部扫描线，纯装饰 */
.cockpit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(88, 132, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 132, 255, .055) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
}
.cockpit > * { position: relative; z-index: 1; }

/* ------------------------------ 顶部标题栏 ------------------------------ */
/* 三段式栅格：品牌（左）| 速览值（居中均分）| 操作（右），左右两端等宽视觉配重更稳 */
.ck-top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--ck-line);
  background: linear-gradient(90deg, rgba(77, 166, 255, .14), rgba(18, 28, 56, .6) 42%, rgba(167, 139, 250, .12));
}
/* 大屏品牌名：标题是「SOP标准化系统」（产品要求不带 OTA 前缀字样）。
   字号/字距用 clamp 跟随视口收紧（窄屏自动缩到 12.5px），超长时省略号截断，
   目的是**绝不挤掉右侧的时钟 / 刷新 / 全屏按钮** —— 那些是大屏的常驻操作位。 */
.ck-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ck-logo {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; letter-spacing: .5px; color: #04101F;
  background: linear-gradient(135deg, var(--ck-cyan), var(--ck-blue));
  box-shadow: 0 0 22px rgba(34, 211, 238, .45);
}
.ck-brand > div:last-child { min-width: 0; }
/* 标题「SOP标准化系统」的字体**再放大一号**（上限 19px → 21px，下限同步 +2px：16.5px）。
   仍用 clamp 跟随视口：宽屏吃满 21px，窄屏自动缩到 16.5px，
   任何时候都不会挤掉右侧的时钟 / 刷新 / 全屏按钮（标题过长时按省略号截断）。 */
.ck-brand b {
  display: block; font-size: clamp(16.5px, 1.15vw, 21px); letter-spacing: clamp(.5px, .16vw, 2px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-brand small { display: block; font-size: 11px; color: var(--ck-mute); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 速览值居中均分：4 项等宽，左右留同宽空白，视觉重心在正中 */
.ck-top-mid { display: flex; align-items: center; justify-content: center; gap: 0; }
.ck-top-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1 1 0; min-width: 0; padding: 0 10px; position: relative;
}
.ck-top-kpi + .ck-top-kpi::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--ck-line);
}
.ck-top-kpi b { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.ck-top-kpi span { font-size: 11px; color: var(--ck-mute); white-space: nowrap; }
.ck-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ck-clock {
  font-size: 22px; font-weight: 700; letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums; color: var(--ck-cyan); text-shadow: 0 0 16px rgba(34, 211, 238, .4);
}
.ck-updated { font-size: 11.5px; color: var(--ck-mute); }
.ck-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ck-green); }
.ck-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ck-green); display: inline-block;
  box-shadow: 0 0 8px var(--ck-green); animation: ckPulse 1.6s ease-in-out infinite;
}
@keyframes ckPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* 大屏里的按钮改成描边霓虹风（不用后台的浅色实心按钮） */
.cockpit .btn {
  background: rgba(77, 166, 255, .10); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 7px;
}
.cockpit .btn:hover { background: rgba(77, 166, 255, .2); border-color: rgba(88, 132, 255, .5); }
.cockpit .btn-primary { background: rgba(34, 211, 238, .16); border-color: rgba(34, 211, 238, .45); color: #CFFAFE; }
.cockpit .btn-ghost { background: transparent; }
.cockpit select.input {
  background: rgba(10, 18, 38, .9); color: var(--ck-text);
  border: 1px solid var(--ck-line); border-radius: 7px;
}

/* ------------------------------ 指标带 ------------------------------ */
/* 12 张卡 = 6 列 × 2 行，正好排满不参差（原来 8 列会排成 8+4，视觉上缺一角）。
   grid-auto-rows: 1fr 让两行等高；卡内结构统一（标签 / 数值 / 提示 / 趋势位）也保证等高。 */
.ck-metrics {
  display: grid; gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.ck-metric {
  position: relative; overflow: hidden;
  padding: 8px 10px 7px; border-radius: 10px;
  border: 1px solid var(--ck-line-soft);
  background: linear-gradient(180deg, var(--ck-panel-hi), var(--ck-panel));
  /* 卡内居中：12 张卡内容对齐后整条指标带才是对称的 */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* 顶部发光条（居中的对称装饰；原来左侧竖条会让每张卡看起来"偏"） */
.ck-metric::after {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 46%; height: 2px; border-radius: 0 0 3px 3px;
  background: var(--ck-c, var(--ck-blue)); box-shadow: 0 0 12px var(--ck-c, var(--ck-blue));
}
.ck-metric-label { font-size: 12px; color: var(--ck-sub); display: flex; align-items: center; gap: 5px; }
/* 数值与迷你趋势线**同一行**：主区现在是 4 排内容，指标带必须压扁（省掉一整行趋势位） */
.ck-metric-value {
  margin-top: 1px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  font-variant-numeric: tabular-nums;
}
.ck-metric-value b {
  font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: .5px; white-space: nowrap;
  color: var(--ck-c, var(--ck-text)); text-shadow: 0 0 20px color-mix(in srgb, var(--ck-c, var(--ck-blue)) 45%, transparent);
}
.ck-metric-value small { font-size: 12px; color: var(--ck-mute); }
.ck-metric-hint {
  margin-top: 2px; font-size: 11px; color: var(--ck-mute); width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 趋势位固定尺寸：没有时间序列的卡也占同样位置，12 张卡才能完全等高 */
.ck-spark { flex: none; width: 72px; height: 22px; display: flex; align-items: center; justify-content: flex-end; }

/* 中间数据区：驾驶舱里**唯一**可滚动的部分（标题栏与动态条都在它外面） */
.ck-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overflow-x: hidden; padding-right: 2px;
}
.ck-body::-webkit-scrollbar { width: 8px; }
.ck-body::-webkit-scrollbar-thumb { background: rgba(88, 132, 255, .32); border-radius: 5px; }
.ck-body::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ 按图表类型分排的主区 ------------------------------ */
/* 底格是 6 列，靠 span 决定每排放几个：
     一排放 2 个 → 每个 span 3；一排放 3 个 → 每个 span 2。
   这样"环形图一排 / 折线图一排 / 条形图一排 / 文字一排"可以在同一个网格里共存，
   行的密度天然不对称（3 个的那排更密），但每排内部仍然等宽对齐。 */
.ck-grid {
  flex: 1; display: grid; gap: 10px; min-height: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* 高度自适应：每排先保证"内容放得下"的最小高度（**按新顺序**依次为 文字 / 环形图 / 折线图 / 条形图），
     剩余空间再按权重分配。屏幕高 → 各排一起长高；屏幕矮 → 到最小高度就停，整体由 .ck-body 滚动。
     权重与最小高度刻意不平均：**文字排（实时预警 / 风险台账）给得最多** ——
     这排现在置顶，是大屏的"异常入口"，列表能看几条全看高度；
     环形图排次之（圆盘要够大才看得清占比），折线图排再次（曲线要看得清走向），条形图内容定型给最小份额。
     最小高度之和 850 + 排间距 30 = 880 —— 1080p 视口（约 704px 可用）下会**纵向滚动**，
     这是刻意的取舍：先把每块面板的高度做舒服，再让排不下时滚动，而不是把内容压扁；
     1440p 及以上则可整屏放下，配合「全屏」按钮就是标准的投屏形态。 */
  grid-template-rows:
    minmax(230px, 1.4fr)
    minmax(210px, 1.15fr)
    minmax(250px, 1.25fr)
    minmax(160px, .85fr);
  align-items: stretch;
}
.ck-half { grid-column: span 3; }
.ck-third { grid-column: span 2; }
.ck-panel {  border-radius: 10px; padding: 9px 12px 10px; min-width: 0; min-height: 0;
  border: 1px solid var(--ck-line-soft);
  background: var(--ck-panel);
  display: flex; flex-direction: column; overflow: hidden;
}
.ck-panel-grow { flex: 1; }
.ck-panel-title {
  display: flex; align-items: center; gap: 7px; flex: none;
  margin: 0 0 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--ck-line-soft);
  font-size: 13px; font-weight: 600; letter-spacing: .5px;
}
.ck-panel-title::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--ck-cyan); box-shadow: 0 0 10px var(--ck-cyan);
}
.ck-panel-title .ck-panel-extra { margin-left: auto; font-size: 11px; color: var(--ck-mute); font-weight: 400; }
.ck-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
/* 图表的量取容器：有确定高度（撑满面板体），自适应时量的就是它 */
.ck-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ck-chart > * { width: 100%; }
/* 图表面板：让 SVG 铺满可用高度并居中，三栏看起来才一样"满" */
.ck-panel-body > .chart-wrap, .ck-panel-body > .donut-wrap, .ck-panel-body > .funnel, .ck-panel-body > .hbar-list { width: 100%; }
.ck-panel-body > .donut-wrap { justify-content: center; }
/* 环形图居中：图例从"圆环右侧"改到"圆环下方"，否则图例会把圆环整体挤偏；
   图例本身改成横向排列，避免 4 项竖排把这一排的高度吃掉。 */
.ck-chart .donut-wrap {
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%;
}
.ck-chart .donut-wrap .legend.legend-col {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 12px;
  font-size: 11.5px; margin-top: 0;
}
.ck-chart .donut-svg { flex: none; }
.ck-panel-body-scroll { justify-content: flex-start; overflow-y: auto; padding-right: 4px; }
.ck-panel-body::-webkit-scrollbar { width: 6px; }
.ck-panel-body::-webkit-scrollbar-thumb { background: rgba(88, 132, 255, .3); border-radius: 4px; }
.ck-panel-body::-webkit-scrollbar-track { background: transparent; }

/* 图表硬编码浅底的三处覆盖 */
.cockpit .hbar-track, .cockpit .funnel-track { background: rgba(255, 255, 255, .07); }
.cockpit .donut-center strong { color: var(--ck-text); }
.cockpit .hbar-label, .cockpit .funnel-label, .cockpit .legend { color: var(--ck-sub); }
.cockpit .empty { color: var(--ck-mute); }

/* ------------------------------ 预警 / 风险列表 ------------------------------ */
.ck-feed { display: flex; flex-direction: column; gap: 7px; }
.ck-feed-item {
  display: flex; gap: 9px; padding: 7px 9px; border-radius: 8px;
  border-left: 3px solid var(--ck-c, var(--ck-blue));
  background: rgba(255, 255, 255, .04);
}
.ck-feed-item .ck-feed-main { min-width: 0; flex: 1; }
.ck-feed-item .ck-feed-title { font-size: 12.5px; line-height: 1.45; }
.ck-feed-item .ck-feed-meta { font-size: 11px; color: var(--ck-mute); margin-top: 2px; }
.ck-tag {
  flex: none; align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 5px; color: #06121F; background: var(--ck-c, var(--ck-blue));
}

/* ------------------------------ 底部滚动条 ------------------------------ */
/* 动态条**置底固定**：它不在滚动容器里（.ck-body 才是滚动的那块），
   所以不依赖 sticky —— 无论内容怎么滚，它永远贴在驾驶舱底部。 */
.ck-foot {
  flex: none; z-index: 3;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--ck-line-soft);
  background: rgba(10, 17, 36, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 22px rgba(4, 8, 20, .5);
  overflow: hidden;
}
.ck-foot-label { flex: none; font-size: 12px; color: var(--ck-cyan); font-weight: 600; letter-spacing: .5px; }
.ck-marquee { flex: 1; overflow: hidden; position: relative; }
.ck-marquee-inner {
  display: inline-flex; gap: 34px; white-space: nowrap; will-change: transform;
  animation: ckScroll 52s linear infinite;
}
.ck-marquee:hover .ck-marquee-inner { animation-play-state: paused; }
.ck-marquee-item { font-size: 12.5px; color: var(--ck-sub); }
.ck-marquee-item b { color: var(--ck-text); font-weight: 600; }
@keyframes ckScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ck-foot-note { flex: none; font-size: 11px; color: var(--ck-mute); }

/* ------------------------------ 自适应 ------------------------------ */
/* 指标带始终排满整行：12 = 6×2 / 4×3 / 3×4 / 2×6，任何断点都不会留半行空缺 */
@media (max-width: 1500px) {
  .ck-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-panel-title { font-size: 12.5px; }
}
@media (max-width: 1240px) {
  .ck-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-top { grid-template-columns: 1fr; }
  .ck-top-mid { justify-content: flex-start; }
}
@media (max-width: 1080px) {
  .ck-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(190px, auto); }
  .ck-half, .ck-third { grid-column: span 1; }
  .ck-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-metric-value b { font-size: 22px; }
  .ck-clock { font-size: 18px; }
}

/* 真·全屏（Fullscreen API）时去掉外边距，铺满整块屏 */
.cockpit:fullscreen { margin: 0; min-height: 100vh; padding: 16px 20px; }
.cockpit:-webkit-full-screen { margin: 0; min-height: 100vh; }