/* =================================================================
   控制室工业风（#266 第3期主攻方向）
   —— 仅作用于 body.control-room（深色外观）。浅色/高对比外观不受影响。
   设计语言：玻璃拟态卡片 + 数据高亮辉光 + 统一状态色语义 + 微交互。
   基准参考：Infofactory 车间暗色大屏、数字孪生控制室、Vocalize "Void & Violet"。
   ================================================================= */

/* ---------- 0. 环境：极淡的网格/光晕底纹，营造控制室氛围（不干扰可读性）----------
   直接叠加到 body 背景图上，永远位于内容之下，无需伪元素层级 hack。 */
body.control-room {
  background-image:
    radial-gradient(1200px 600px at 12% -8%, var(--glow, rgba(91,138,255,.10)), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(6,182,212,.07), transparent 55%);
  background-attachment: fixed;
}

/* ---------- 1. 玻璃拟态卡片（深色）---------- */
body.control-room .card,
body.control-room .wbm,
body.control-room .wb-tile,
body.control-room .panel,
body.control-room .md-card,
body.control-room .db-kpi {
  background: linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07);
}
/* 卡片顶部一道极细高光线，提升质感 */
body.control-room .card::after,
body.control-room .wbm::after,
body.control-room .db-kpi::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .6;
}

/* 卡片 hover：抬升 + 品牌辉光描边 */
body.control-room .card:hover,
body.control-room .wbm:hover,
body.control-room .wb-tile:hover {
  transform: translateY(-3px);
  border-color: var(--glow, rgba(91,138,255,.55));
  box-shadow:
    0 16px 40px rgba(0,0,0,.50),
    0 0 0 1px var(--glow, rgba(91,138,255,.30)),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---------- 2. KPI / 关键数字 辉光 ---------- */
body.control-room .card .v {
  color: #f2f6ff;
  text-shadow: 0 0 20px var(--glow, rgba(91,138,255,.45));
  letter-spacing: -.5px;
}
body.control-room .card .v.ok  { color: #34d399; text-shadow: 0 0 18px rgba(52,211,153,.45); }
body.control-room .card .v.warn { color: #fbbf24; text-shadow: 0 0 18px rgba(251,191,36,.45); }
body.control-room .card .v.bad  { color: #f87171; text-shadow: 0 0 18px rgba(248,113,113,.45); }

/* 驾驶舱 KPI 数字辉光 */
body.control-room .db-kpi-v {
  color: #f3f7ff;
  text-shadow: 0 0 22px var(--glow, rgba(91,138,255,.55));
  font-variant-numeric: tabular-nums;
}
body.control-room .db-kpi {
  border-radius: var(--r-xl);
  padding: 18px 20px;
}
body.control-room .db-kpi-ic {
  filter: drop-shadow(0 0 10px var(--glow, rgba(91,138,255,.5)));
}
body.control-room .db-chart {
  background: linear-gradient(158deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  padding: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.control-room .db-lg i { box-shadow: 0 0 8px currentColor; }

/* ---------- 3. 统一状态色语义（绿=运行 黄=预警 红=异常 蓝=信息）---------- */
/* 状态点（视图中可用 <i class="dot ok"> 等） */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gray-400); vertical-align: middle; margin-right: 6px;
  position: relative;
}
.dot.ok, .dot.run  { background: var(--success-500); }
.dot.warn          { background: var(--warning-500); }
.dot.bad, .dot.err { background: var(--danger-500); }
.dot.info          { background: var(--info-500); }
.dot.idle          { background: var(--gray-400); }
.dot.run::after,
.dot.ok::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; color: var(--success-500);
  animation: dotPulse 1.8s ease-out infinite; opacity: 0;
}
.dot.warn::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--warning-500); animation: dotPulse 1.8s ease-out infinite; opacity: 0;
}
.dot.bad::after, .dot.err::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--danger-500); animation: dotPulse 1.4s ease-out infinite; opacity: 0;
}
@keyframes dotPulse {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* 标签在深色下加辉光与半透明，强调语义 */
body.control-room .tag {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
body.control-room .tag.ok   { color: #6ee7b7; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
body.control-room .tag.warn { color: #fcd34d; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
body.control-room .tag.bad  { color: #fca5a5; border-color: rgba(239,68,68,.45);  background: rgba(239,68,68,.12); }
body.control-room .tag.info { color: #67e8f9; border-color: rgba(6,182,212,.45);  background: rgba(6,182,212,.12); }
body.control-room .tag.brand{ color: #93c5fd; border-color: rgba(59,130,246,.45);  background: rgba(59,130,246,.12); }
body.control-room .tag::before { box-shadow: 0 0 8px currentColor; }

/* ---------- 4. 按钮微交互（hover 抬升 / 按压回弹，纯 CSS）---------- */
body.control-room .btn,
body.control-room button.btn,
body.control-room .md-btn {
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
body.control-room .btn:hover,
body.control-room button.btn:hover { transform: translateY(-1px); }
body.control-room .btn:active,
body.control-room button.btn:active { transform: translateY(0) scale(.98); }
body.control-room .btn-primary,
body.control-room .md-btn.primary {
  box-shadow: 0 6px 18px var(--glow, rgba(91,138,255,.40)), inset 0 1px 0 rgba(255,255,255,.18);
}
body.control-room .btn-primary:hover,
body.control-room .md-btn.primary:hover {
  box-shadow: 0 10px 26px var(--glow, rgba(91,138,255,.55)), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------- 5. 入场动画（数据卡片轻微上浮淡入，营造"实时"感）---------- */
@media (prefers-reduced-motion: no-preference) {
  body.control-room .db-grid > *,
  body.control-room .cards > .card {
    animation: crRise .42s cubic-bezier(.22,.61,.36,1) both;
  }
  body.control-room .wb-tiles > .wb-tile,
  body.control-room .wbm-wrap > .wbm {
    animation: crRise .42s cubic-bezier(.22,.61,.36,1) both;
  }
}
@keyframes crRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 6. 骨架屏加载态（shimmer）---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--gray-100, #1b2537);
  border-radius: var(--r-md);
}
body.control-room .skeleton { background: rgba(255,255,255,.06); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: crShimmer 1.4s infinite;
}
body.control-room .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }
@keyframes crShimmer { 100% { transform: translateX(100%); } }

/* ---------- 7. 深色滚动条美化 ---------- */
body.control-room ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: var(--r-full);
}
body.control-room ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
body.control-room ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 8. 弹层/抽屉在深色下也走玻璃质感 ---------- */
body.control-room .md-drawer,
body.control-room .modal,
body.control-room .pop,
body.control-room .dropdown {
  background: linear-gradient(158deg, rgba(26,34,53,.92), rgba(17,24,40,.92));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body.control-room .dot::after,
  body.control-room .skeleton::after { animation: none; }
}