/* ============================================================
   指挥中心大屏（深色）专用样式 —— 与 common.css 同源令牌
   深色实色面板，不用毛玻璃/渐变紫
   ============================================================ */

:root {
  --s-bg: #0A1830;
  --s-panel: #0F2140;
  --s-panel-border: #1E3A63;
  --s-cyan: #3BC7E8;
  --s-blue: #4C8DFF;
  --s-red: #F2564F;
  --s-yellow: #F2B84B;
  --s-green: #37C88B;
  --s-text: #E8F0FA;
  --s-text-2: #8FA6C4;
}

.screen {
  background: var(--s-bg); color: var(--s-text);
  min-height: 100vh; display: flex; flex-direction: column;
}
.screen .demo-mark { background: rgba(15,33,64,.92); color: var(--s-text-2); border-color: var(--s-panel-border); }

/* 头部 */
.s-head {
  display: flex; align-items: center; gap: 20px; padding: 14px 24px 10px;
  border-bottom: 1px solid var(--s-panel-border);
}
.s-head .title { display: flex; align-items: center; gap: 12px; }
.s-head .title .ic { color: var(--s-cyan); width: 26px; height: 26px; }
.s-head h1 { font-size: 24px; letter-spacing: 2px; font-weight: 700; }
.s-head .meta { margin-left: auto; display: flex; align-items: center; gap: 22px; color: var(--s-text-2); font-size: 13px; }
.s-head .meta b { color: var(--s-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.s-head .meta .item { display: flex; align-items: center; gap: 6px; }
.s-head .meta .ic { width: 15px; height: 15px; color: var(--s-cyan); }

/* 主体三栏 */
.s-body {
  flex: 1; display: grid; gap: 14px; padding: 14px 24px 16px;
  grid-template-columns: 340px 1fr 340px;
}
.s-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* 面板 */
.panel {
  background: var(--s-panel); border: 1px solid var(--s-panel-border); border-radius: 6px;
  display: flex; flex-direction: column; min-height: 0;
}
.panel .p-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--s-panel-border); font-size: 14px; font-weight: 700; letter-spacing: 1px;
}
.panel .p-head .ic { color: var(--s-cyan); width: 16px; height: 16px; }
.panel .p-head .extra { margin-left: auto; font-size: 12px; color: var(--s-text-2); font-weight: 400; }
.panel .p-body { padding: 12px 14px; flex: 1; min-height: 0; }

/* 指标格 */
.s-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-stat { border: 1px solid var(--s-panel-border); border-radius: 6px; padding: 10px 12px; background: rgba(59,199,232,.04); }
.s-stat .k { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-text-2); }
.s-stat .k .ic { width: 14px; height: 14px; color: var(--s-cyan); }
.s-stat .v { font-size: 24px; font-weight: 700; color: var(--s-cyan); margin-top: 2px; font-variant-numeric: tabular-nums; }
.s-stat .v small { font-size: 12px; color: var(--s-text-2); font-weight: 400; margin-left: 3px; }
.s-stat .d { font-size: 11px; color: var(--s-text-2); }
.s-stat.blue .v { color: var(--s-blue); }
.s-stat.green .v { color: var(--s-green); }

/* 红黄绿告警（大屏第一优先级：谁有风险、派给谁、办到哪） */
.rag { display: flex; gap: 10px; }
.rag .cell { flex: 1; border-radius: 6px; padding: 10px 0 8px; text-align: center; border: 1px solid var(--s-panel-border); }
.rag .cell .n { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.rag .cell .t { font-size: 12px; color: var(--s-text-2); }
.rag .cell.red { background: rgba(242,86,79,.12); border-color: rgba(242,86,79,.45); } .rag .cell.red .n { color: var(--s-red); }
.rag .cell.yellow { background: rgba(242,184,75,.1); border-color: rgba(242,184,75,.4); } .rag .cell.yellow .n { color: var(--s-yellow); }
.rag .cell.green { background: rgba(55,200,139,.08); border-color: rgba(55,200,139,.3); } .rag .cell.green .n { color: var(--s-green); }

/* 告警列表 */
.alist { display: flex; flex-direction: column; gap: 8px; }
.alist .a {
  border: 1px solid var(--s-panel-border); border-left: 3px solid var(--s-red);
  border-radius: 4px; padding: 8px 10px; background: rgba(242,86,79,.06);
}
.alist .a.yellow { border-left-color: var(--s-yellow); background: rgba(242,184,75,.05); }
.alist .a .l1 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.alist .a .l1 b { color: var(--s-text); }
.alist .a .tag { margin-left: auto; font-size: 11px; padding: 1px 8px; border-radius: 3px; white-space: nowrap; }
.alist .a .tag.doing { color: var(--s-yellow); border: 1px solid rgba(242,184,75,.5); }
.alist .a .tag.done { color: var(--s-green); border: 1px solid rgba(55,200,139,.5); }
.alist .a .l2 { font-size: 12px; color: var(--s-text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.alist .a .l2 b { color: var(--s-cyan); font-weight: 500; }

/* 地图区 */
.map-wrap { position: relative; flex: 1; min-height: 380px; }
.map-wrap svg { width: 100%; height: 100%; }
.map-legend {
  position: absolute; left: 12px; bottom: 10px; display: flex; gap: 14px;
  font-size: 12px; color: var(--s-text-2); background: rgba(10,24,48,.85);
  border: 1px solid var(--s-panel-border); border-radius: 4px; padding: 6px 12px;
}
.map-legend .item { display: flex; align-items: center; gap: 6px; }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.map-legend .tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--s-blue); }

/* 迷你柱图（近7日工单，纯 SVG） */
.chart-note { font-size: 11px; color: var(--s-text-2); text-align: right; }

/* 横向条形（机构入住率等） */
.hbar { display: flex; flex-direction: column; gap: 9px; }
.hbar .row { display: grid; grid-template-columns: 118px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; }
.hbar .row .name { color: var(--s-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .row .track { height: 8px; background: rgba(143,166,196,.15); border-radius: 4px; overflow: hidden; }
.hbar .row .track i { display: block; height: 100%; background: var(--s-blue); border-radius: 4px; }
.hbar .row .val { color: var(--s-text); text-align: right; font-variant-numeric: tabular-nums; }

/* 右侧时间线（深色变体） */
.s-timeline { position: relative; padding-left: 20px; }
.s-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--s-panel-border); }
.s-timeline .node { position: relative; padding-bottom: 14px; }
.s-timeline .node:last-child { padding-bottom: 0; }
.s-timeline .node::before {
  content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--s-panel); border: 2px solid var(--s-cyan);
}
.s-timeline .node.hot::before { border-color: var(--s-red); background: var(--s-red); }
.s-timeline .t { font-size: 11px; color: var(--s-text-2); font-variant-numeric: tabular-nums; }
.s-timeline .h { font-size: 13px; color: var(--s-text); }
.s-timeline .p { font-size: 12px; color: var(--s-text-2); }
.s-timeline .p b { color: var(--s-cyan); font-weight: 500; }

/* 状态行 */
.s-kv { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.s-kv .row { display: flex; align-items: center; gap: 8px; }
.s-kv .row .k { color: var(--s-text-2); display: flex; align-items: center; gap: 7px; }
.s-kv .row .k .ic { width: 15px; height: 15px; color: var(--s-cyan); }
.s-kv .row .v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-kv .row .v.green { color: var(--s-green); } .s-kv .row .v.cyan { color: var(--s-cyan); }

/* 页脚 */
.s-foot { padding: 8px 24px 14px; display: flex; align-items: center; gap: 18px; color: var(--s-text-2); font-size: 12px; }
.s-foot .links { margin-left: auto; display: flex; gap: 14px; }
.s-foot .links a { color: var(--s-text-2); display: inline-flex; align-items: center; gap: 5px; }
.s-foot .links a:hover { color: var(--s-cyan); }
.s-foot .links .ic { width: 14px; height: 14px; }