/* /home/ubuntu/baoleme/frontend/hw-comp.css
   HONGWU.SI — 页壳 / 组件原语层 v1 (2026-10-10 小裙子)
   ─ 施工图 §4 页壳五段式 + §3 组件原语。additive: 只增强, 不覆盖既有布局。
   ─ 加载在 hw-tokens.css 之后。回滚: 删 index.html 本 <link> 行。
   五段式: ① 页头  ② KPI 行  ③ 主区(7:5)  ④ 明细表  ⑤ 事件流
*/

/* ── 页壳 (可选包裹; 旧页无此结构亦不受影响) ── */
.page-shell{display:flex;flex-direction:column;gap:14px}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--hw-border);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--hw-surface),var(--hw-bg-elev))}
.page-head .ph-title{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--hw-text);letter-spacing:.02em}
.page-head .ph-sub{font-size:11px;color:var(--hw-muted);font-family:var(--mono)}
.page-head .ph-spacer{flex:1}

/* ── 状态灯 (数据新鲜度; 与巡检同源) ── */
.hw-lamp{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--mono);
  padding:2px 9px;border-radius:999px;border:1px solid var(--hw-border);color:var(--hw-muted);
  background:var(--hw-bg-elev);white-space:nowrap}
.hw-lamp i{width:7px;height:7px;border-radius:50%;background:var(--hw-dim);flex:0 0 auto}
.hw-lamp.ok   {color:#26C393;border-color:rgba(31,169,126,.38)}
.hw-lamp.ok   i{background:#26C393;box-shadow:0 0 8px rgba(38,195,147,.7)}
.hw-lamp.stale{color:#E8A33D;border-color:rgba(232,163,61,.38)}
.hw-lamp.stale i{background:#E8A33D;box-shadow:0 0 8px rgba(232,163,61,.6);animation:hwLampPulse 2s ease-in-out infinite}
.hw-lamp.dead {color:#D65A4A;border-color:rgba(214,90,74,.42)}
.hw-lamp.dead i{background:#D65A4A;box-shadow:0 0 8px rgba(214,90,74,.7)}
@keyframes hwLampPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── KPI 卡: 强化数值层 (靛蓝仅用于强调线, 数字保持冷月白) ── */
.hw-kpi,.kpi{position:relative;overflow:hidden}
.hw-kpi::before,.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--hw-brand),transparent);opacity:.9}
.hw-kpi.up::before,.kpi.up::before{background:linear-gradient(180deg,var(--hw-up),transparent)}
.hw-kpi.down::before,.kpi.down::before{background:linear-gradient(180deg,var(--hw-down),transparent)}

/* ── 明细表: 统一密度与表头 ── */
.panel table thead th{font-family:var(--sans);font-weight:600;letter-spacing:.04em;
  color:var(--hw-muted);border-bottom:1px solid var(--hw-border-2)}
.panel table tbody tr{transition:background .16s ease}
.panel table tbody tr:hover{background:rgba(77,124,254,.05)}

/* ── 事件流: 来源标签 ── */
.hw-ev-src{font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:6px;
  border:1px solid var(--hw-brand-line);color:var(--hw-brand-hi);background:var(--hw-brand-soft)}

/* ── 分段控件 ── */
.hw-seg{display:inline-flex;border:1px solid var(--hw-border);border-radius:999px;overflow:hidden;background:var(--hw-bg-elev)}
.hw-seg button{background:transparent;border:0;color:var(--hw-muted);font-family:var(--mono);font-size:11px;
  padding:4px 12px;cursor:pointer;transition:all .15s ease}
.hw-seg button:hover{color:var(--hw-text)}
.hw-seg button.on{color:#fff;background:linear-gradient(135deg,var(--hw-brand),var(--hw-brand-deep))}

/* ── 空态 / 骨架 ── */
.hw-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:34px 12px;color:var(--hw-dim);font-size:12px}
.hw-skel{position:relative;overflow:hidden;background:var(--hw-surface-2);border-radius:8px;min-height:12px}
.hw-skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(140,165,220,.10),transparent);
  animation:hwSkel 1.3s ease-in-out infinite}
@keyframes hwSkel{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── 顶栏激活态: 与靛蓝 token 对齐(收敛旧皮肤残留) ── */
html.hw-theme .hw-nav .nav-item.active::after{background:linear-gradient(180deg,var(--hw-brand-hi),var(--hw-brand-deep));
  box-shadow:0 0 8px var(--hw-brand-line)}