/* ==================================================================
   员工看板 · 实时大屏
   ==================================================================
   设计约束（运维要求）：
     · 桌面 4 列卡片、手机 1 列；图表纵向排；动态流在手机端置顶
     · 颜色沿用站点主色（#0B3B6F / #2F80ED / #00A6A6 / 金 #C8A24A）
     · 动效只做"生长/脉冲/滑入/数字滚动"，不引外部图表库
   ================================================================== */
.bd-status{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:8px}
.bd-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.bd-status.sse{background:#E6F4F1;color:#0F7A6B}
.bd-status.sse::before{background:#00A6A6}
.bd-status.poll{background:#FFF6E0;color:#8A6D1F}
.bd-status.poll::before{background:#C8A24A}
.bd-status.off,.bd-status.down{background:#FDECEC;color:#A33}
.bd-status.off::before,.bd-status.down::before{background:#E05B5B}
.bd-filter{border:1px solid var(--line,#E6EDF5);border-radius:8px;padding:6px 10px;font-size:13px;background:#fff;color:#33475B}

/* ---- A. KPI 条 ---- */
.bd-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0 20px}
.bd-kpi .kpi{background:#fff;border:1px solid var(--line,#E6EDF5);border-radius:12px;padding:14px 16px;box-shadow:0 8px 24px rgba(15,35,60,.06)}
.bd-kpi .kpi-v{font-size:26px;font-weight:700;color:#0B3B6F;line-height:1.25;font-variant-numeric:tabular-nums}
.bd-kpi .kpi-k{font-size:12.5px;color:#33475B;margin-top:2px}
.bd-kpi .kpi-s{font-size:11.5px;color:#6B7A90;margin-top:3px}

/* ---- 布局：左（卡片+图表）右（动态流）---- */
.bd-main{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.bd-right{position:sticky;top:12px}

/* ---- B. 员工卡片 ---- */
.bd-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bd-card{background:#fff;border:1px solid var(--line,#E6EDF5);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(15,35,60,.06);transition:transform .16s ease,box-shadow .16s ease}
.bd-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,35,60,.10)}
.bd-card.running{border-color:#2F80ED}
.bd-head{display:flex;align-items:center;gap:7px}
.bd-ico{font-size:17px}
.bd-name{font-weight:600;font-size:14px;color:#0B3B6F;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-dot{width:8px;height:8px;border-radius:50%;background:#9AA9BC;flex:0 0 auto}
.bd-dot.on{background:#00A6A6;animation:bdPulse 1.4s ease-in-out infinite}
.bd-dot.off{background:#D8DEE6}
@keyframes bdPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,166,166,.55)}50%{box-shadow:0 0 0 6px rgba(0,166,166,0)}}
.bd-more{background:none;border:none;color:#2F80ED;font-size:12px;cursor:pointer;padding:3px 4px;min-height:22px}
.bd-dept{font-size:11.5px;color:#6B7A90;margin:3px 0 9px}
.bd-body{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bd-nums{display:grid;grid-template-columns:repeat(4,auto);gap:9px}
.bd-nums div{text-align:center}
.bd-nums b{display:block;font-size:15px;color:#33475B;font-variant-numeric:tabular-nums}
.bd-nums span{font-size:10.5px;color:#8895A8}
.bd-nums .ok b{color:#2F80ED}
.bd-nums .skip b{color:#9AA9BC}
.bd-nums .err b{color:#E05B5B}
.bd-ring svg circle:last-of-type{stroke:#2F80ED;transition:stroke-dasharray .5s ease}
.bd-ring svg.warn circle:last-of-type{stroke:#C8A24A}
.bd-ring svg.bad circle:last-of-type{stroke:#E05B5B}
.bd-ring svg text{fill:#33475B}
.bd-spark{display:flex;align-items:center;gap:7px;margin-top:9px}
.bd-spark-l{font-size:10.5px;color:#8895A8}
.bd-action{font-size:11.5px;color:#6B7A90;margin-top:8px;display:flex;align-items:center;gap:5px;min-height:16px}
.bd-next{margin-left:auto;color:#2F80ED}
.live-dot{width:6px;height:6px;border-radius:50%;background:#00A6A6;animation:bdPulse 1.4s infinite;display:inline-block}

/* ---- 图表区 ---- */
.bd-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.bd-chart{padding:14px 16px}
.bd-chart h3{font-size:14px;margin:0 0 10px;color:#0B3B6F}
.bd-chart .lbl{font-size:10.5px;fill:#6B7A90}
.bd-chart .val{font-size:10.5px;fill:#33475B;font-weight:600}
.bd-chart .grow{transition:width .6s cubic-bezier(.22,1,.36,1),all .6s cubic-bezier(.22,1,.36,1)}
.donut{display:flex;align-items:center;gap:16px}
.donut-legend{font-size:12px;color:#33475B;line-height:1.9}
.donut-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.dept-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:7px}
.dept-n{width:72px;color:#6B7A90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dept-bar{flex:1;height:8px;background:#EEF3F9;border-radius:4px;overflow:hidden}
.dept-bar i{display:block;height:100%;background:#2F80ED;border-radius:4px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.dept-row b{width:34px;text-align:right;color:#33475B}

/* ---- C. 动态流 ---- */
.bd-stream-card{padding:14px}
.bd-stream-card h3{font-size:14px;margin:0 0 10px;color:#0B3B6F}
.bd-stream{max-height:70vh;overflow-y:auto}
.ev{display:grid;grid-template-columns:52px 18px 1fr auto;gap:5px;align-items:center;font-size:11.5px;padding:6px 4px;border-bottom:1px solid #F1F5FA;animation:evIn .35s ease}
@keyframes evIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ev.hl{background:#FFF9E8}
.ev-t{color:#8895A8;font-variant-numeric:tabular-nums}
.ev-who{color:#33475B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-what{color:#6B7A90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-badge{font-size:10.5px;padding:1px 6px;border-radius:999px;background:#EEF3F9;color:#33475B}
.ev-ok .ev-badge{background:#E7F0FE;color:#2F80ED}
.ev-skip .ev-badge{background:#F2F5F9;color:#8895A8}
.ev-err .ev-badge{background:#FDECEC;color:#E05B5B}
.ev-run .ev-badge{background:#E6F7F7;color:#0F7A6B}
.ev-human .ev-badge{background:#FFF6E0;color:#8A6D1F}

/* ---- 抽屉 ---- */
.bd-drawer{position:fixed;inset:0;z-index:60}
.bd-drawer-mask{position:absolute;inset:0;background:rgba(11,59,111,.28)}
.bd-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,92vw);background:#fff;box-shadow:-8px 0 30px rgba(15,35,60,.18);display:flex;flex-direction:column;animation:drawerIn .22s ease}
@keyframes drawerIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.bd-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #E6EDF5}
.bd-drawer-body{padding:14px 18px;overflow-y:auto;flex:1}

/* ---- 移动端：卡片 1 列、图表纵向、动态流置顶 ---- */
@media (max-width:1100px){
  .bd-main{grid-template-columns:1fr}
  .bd-right{position:static;order:-1}     /* 动态流置顶 */
  .bd-cards{grid-template-columns:repeat(2,1fr)}
  .bd-kpi{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .bd-kpi{grid-template-columns:repeat(2,1fr);gap:9px}
  .bd-kpi .kpi-v{font-size:21px}
  .bd-cards{grid-template-columns:1fr}
  .bd-charts{grid-template-columns:1fr}
  .bd-stream{max-height:44vh}
  .bd-name{font-size:13.5px}
}