/* 深色監控室主題 — 嚴肅工程風 */
:root {
  --bg: #0c1220; --panel: #121b2c; --panel2: #182238;
  --text: #d8e2f2; --dim: #7d8ba3; --border: #24314d;
  --live: #3ddc97; --fail: #ff5566; --warn: #ffb020; --dead: #4a5670;
  --accent: #4da3ff; --mono: 'Consolas', 'Courier New', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif; font-size: 14px; overflow: hidden; }

header { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
header h1 { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: var(--accent); white-space: nowrap; }
#clock { font-family: var(--mono); color: var(--dim); min-width: 70px; }
.tabs button, .hctl button { background: var(--panel2); color: var(--text); border: 1px solid var(--border); padding: 5px 12px; cursor: pointer; border-radius: 3px; font-size: 13px; }
.tabs button.active { background: var(--accent); color: #06101f; border-color: var(--accent); font-weight: 600; }
.hctl { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.hctl button.active { border-color: var(--live); color: var(--live); }

main { display: flex; height: calc(100vh - 46px); }
#diagramWrap { flex: 1; overflow: auto; padding: 8px; }
#sld { width: 100%; height: 100%; min-width: 700px; }

/* ── SVG 單線圖 ── */
.sym { cursor: pointer; }
.sym .shape { fill: none; stroke: var(--dead); stroke-width: 2; transition: stroke .2s; }
.sym.on .shape { stroke: var(--live); }
.sym.warn .shape { stroke: var(--warn); }
.sym.failed .shape { stroke: var(--fail); animation: blink 0.8s infinite; }
.sym text { fill: var(--dim); font-size: 11px; text-anchor: middle; font-family: inherit; }
.sym.on text.nlabel { fill: var(--text); }
.sym.failed text.nlabel { fill: var(--fail); }
.sym text.glyph { fill: inherit; }
.sym.selected .shape { filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes blink { 50% { opacity: 0.25; } }

.edge { fill: none; stroke: #33405e; stroke-width: 2; }
.edge.live { stroke: var(--live); stroke-dasharray: 6 5; animation: flow 0.7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -11; } }
.ekw { fill: var(--dim); font-size: 10px; font-family: var(--mono); text-anchor: middle; }
.ekw.live { fill: var(--live); }

/* ── 右側儀表板 ── */
#panel { width: 330px; background: var(--panel); border-left: 1px solid var(--border); padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.metric { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; }
.metric .mrow { display: flex; justify-content: space-between; align-items: baseline; }
.metric .mlabel { color: var(--dim); font-size: 12px; }
.metric .mval { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--live); }
.metric .mval.warn { color: var(--warn); } .metric .mval.crit { color: var(--fail); }
.metric svg { width: 100%; height: 30px; margin-top: 4px; }
.spark { fill: none; stroke: var(--accent); stroke-width: 1.5; }

.pathrow { display: flex; gap: 8px; }
.pathbox { flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 12px; }
.pathbox .badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.badge.GRID { background: #14402e; color: var(--live); }
.badge.OUTAGE_BATT { background: #4a3608; color: var(--warn); }
.badge.GEN { background: #0e3354; color: var(--accent); }
.badge.RETRANSFER_WAIT { background: #0e3354; color: var(--accent); }
.badge.DEAD { background: #4a1520; color: var(--fail); }
.battbar { height: 8px; background: #0a0f1c; border-radius: 4px; margin-top: 5px; overflow: hidden; }
.battbar > div { height: 100%; background: var(--live); transition: width .3s; }
.battbar > div.low { background: var(--warn); } .battbar > div.crit { background: var(--fail); }
.battmin { font-family: var(--mono); color: var(--dim); font-size: 11px; }

.ctl { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; }
.ctl input[type=range] { width: 100%; }
.qbtns { display: flex; gap: 6px; }
.qbtns button { flex: 1; padding: 7px 4px; border-radius: 3px; border: 1px solid var(--border); cursor: pointer; font-size: 12px; }
#btnUtilBoth { background: #401820; color: var(--fail); border-color: #6a2433; }
#btnReset { background: #14402e; color: var(--live); border-color: #1f6647; }

#detail { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 12px; min-height: 84px; }
#detail h3 { font-size: 13px; margin-bottom: 5px; color: var(--accent); }
#detail table { width: 100%; border-collapse: collapse; }
#detail td { padding: 1px 0; color: var(--dim); } #detail td + td { text-align: right; color: var(--text); font-family: var(--mono); }
#detail button { margin-top: 6px; width: 100%; padding: 5px; border-radius: 3px; cursor: pointer; border: 1px solid var(--border); }
#detail button.inject { background: #401820; color: var(--fail); }
#detail button.restore { background: #14402e; color: var(--live); }

#logwrap { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
#logwrap h3 { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
#log { flex: 1; overflow-y: auto; background: #0a0f1c; border: 1px solid var(--border); border-radius: 4px; padding: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.7; }
#log .lt { color: var(--dim); margin-right: 6px; }

/* ── 備考模式 ── */
#examOverlay { position: fixed; inset: 0; background: rgba(5, 9, 18, 0.82); display: flex; align-items: center; justify-content: center; z-index: 50; }
#examOverlay.hidden, .hidden { display: none !important; }
.examCard { width: min(680px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; padding: 22px; }
.examCard h2 { color: var(--accent); font-size: 17px; margin-bottom: 10px; }
.examCard .scList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.examCard .scList button { text-align: left; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; font-size: 14px; }
.examCard .scList button:hover { border-color: var(--accent); }
.examCard .scList button.done-ok { border-color: var(--live); }
.examCard .scList button.done-ng { border-color: var(--fail); }
.opt { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.opt:hover { border-color: var(--accent); }
.opt.ok { border-color: var(--live); background: #10321f; }
.opt.ng { border-color: var(--fail); background: #3a1119; }
.explain { margin-top: 10px; padding: 10px 12px; border-radius: 4px; background: var(--panel2); border-left: 3px solid var(--accent); font-size: 13px; line-height: 1.7; }
.refs { margin-top: 8px; color: var(--dim); font-size: 12px; }
.examBtns { display: flex; gap: 8px; margin-top: 14px; }
.examBtns button { padding: 8px 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); cursor: pointer; }
.examBtns button.primary { background: var(--accent); color: #06101f; font-weight: 600; }