/* ==========================================================================
   嘉消战系统 · 指挥中心主题（视觉覆盖层）
   --------------------------------------------------------------------------
   这是叠加在 frontend/dist 构建产物之上的样式覆盖层，不是前端源码的一部分。
   前端一旦重新构建并覆盖 dist，本文件的引用会丢失，需要重新在 index.html
   里挂上，或（更好）把这里的设计 token 搬进前端源码。

   作用范围严格限定在顶部导航 .nav 与队站首页 .db 两棵子树：
   其余页面（人员管理、车辆调整等）与所有 el-dialog 弹窗保持原样，
   避免在无法逐页验证的情况下破坏 Element Plus 组件。

   dist 里的原样式是 Vue scoped 样式，选择器形如 .db-header[data-v-xxxxxxx]，
   特异度 (0,2,0)。这里统一用 #app 前缀把特异度抬到 (1,x,0) 稳定压过，
   既不依赖那个会随构建变化的 hash，也不用满屏 !important。
   ========================================================================== */

:root {
  /* 底色：偏亮的指挥室蓝灰，避免姓名牌和空位糊进墨黑里 */
  --cc-bg-0: #152033;
  --cc-bg-1: #1c2a44;
  --cc-bg-2: #263552;

  /* 面板玻璃质感 */
  --cc-panel: rgba(255, 255, 255, 0.06);
  --cc-panel-hi: rgba(255, 255, 255, 0.09);
  --cc-line: rgba(210, 224, 255, 0.16);
  --cc-line-soft: rgba(210, 224, 255, 0.09);

  /* 文字层级 */
  --cc-text: #f2f6ff;
  --cc-text-dim: #c2cede;
  --cc-text-mute: #9aabc4;

  /* 强调色：消防红 + 勋章金 */
  --cc-red: #ff4d5e;
  --cc-red-deep: #d92038;
  --cc-gold: #f6c453;
  --cc-green: #2fd97f;
  --cc-blue: #4d9fff;
  --cc-orange: #ffa23a;

  --cc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -6px rgba(0, 0, 0, .55);
  --cc-shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 48px -12px rgba(0, 0, 0, .7);
}

/* ---------- 全局底 ---------- */

#app {
  background: var(--cc-bg-0);
}

/* 深色页面下让滚动条也跟着走，否则右侧会留一条刺眼的白条 */
#app .db ::-webkit-scrollbar { width: 8px; height: 8px; }
#app .db ::-webkit-scrollbar-track { background: transparent; }
#app .db ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 4px;
}
#app .db ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); }

/* ==========================================================================
   顶部导航
   ========================================================================== */

#app .nav {
  height: 58px;
  padding: 0 28px;
  background: linear-gradient(180deg, #101a2e 0%, #0b1220 100%);
  border-bottom: 1px solid var(--cc-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 24px -8px rgba(0, 0, 0, .8);
}

/* 顶栏下沿一道极细的红金渐变，是整套视觉的"签名" */
#app .nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217, 32, 56, .5) 18%,
    rgba(246, 196, 83, .55) 50%,
    rgba(217, 32, 56, .5) 82%,
    transparent 100%);
  pointer-events: none;
}

#app .nav__logo-img {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 8px rgba(255, 77, 94, .45));
}

#app .nav__logo-text {
  font-size: 17px;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #ffffff 0%, #cfe0ff 55%, #9db8e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#app .nav__item {
  color: var(--cc-text-dim);
  font-size: 13px;
  letter-spacing: .5px;
  border-radius: 8px;
  padding: 7px 16px;
  position: relative;
  transition: color .18s ease, background .18s ease;
}

#app .nav__item:hover {
  color: var(--cc-text);
  background: rgba(255, 255, 255, .06);
}

#app .nav__item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 77, 94, .22), rgba(255, 77, 94, .10));
  box-shadow: inset 0 0 0 1px rgba(255, 77, 94, .35);
  font-weight: 600;
}

/* 选中项底部的小高亮，替代原来单调的蓝底 */
#app .nav__item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-red);
  box-shadow: 0 0 10px var(--cc-red);
}

#app .nav__user-trigger {
  border-radius: 9px;
  padding: 6px 12px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}

#app .nav__user-trigger:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cc-line);
}

#app .nav__username { color: var(--cc-text); }
#app .nav__arrow { color: var(--cc-text-mute); }
#app .nav__user-trigger:hover .nav__arrow { color: var(--cc-text-dim); }

#app .nav__role {
  background: linear-gradient(135deg, rgba(246, 196, 83, .22), rgba(246, 196, 83, .10));
  color: var(--cc-gold);
  box-shadow: inset 0 0 0 1px rgba(246, 196, 83, .3);
  letter-spacing: .5px;
}

/* ==========================================================================
   首页容器
   ========================================================================== */

#app .db {
  color: var(--cc-text);
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(217, 32, 56, .10), transparent 60%),
    radial-gradient(900px 480px at 88% 0%, rgba(77, 159, 255, .12), transparent 62%),
    linear-gradient(180deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
  background-attachment: fixed;
}

/* ---------- 标语条 ---------- */

/* 原版把标语用 position:absolute + left:50% 居中，标语一长就会顶到右侧时钟上
   （实测两者只差 2px）。这里改成真正的三栏网格，列之间不可能重叠。 */
#app .db-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border-bottom: 1px solid var(--cc-line);
  backdrop-filter: blur(12px);
}

#app .db-header__left {
  flex: none;
  justify-self: start;
}

#app .db-header__center {
  position: static;
  left: auto;
  transform: none;
  justify-self: center;
}

#app .db-header__right { justify-self: end; }

#app .db-station {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--cc-text);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 队站名前加一枚小徽标，强化"单位"的仪式感 */
#app .db-station::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cc-red), var(--cc-gold));
  box-shadow: 0 0 10px rgba(255, 77, 94, .6);
}

/* 十六字誓词：整套设计的视觉主角 */
#app .db-motto {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff8ea 0%, #ffd58a 45%, #ef9f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(246, 160, 60, .35));
}

#app .db-time {
  font-size: 23px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(160, 200, 255, .35);
}

#app .db-date {
  font-size: 11.5px;
  color: var(--cc-text-mute);
  letter-spacing: .6px;
}

#app .db-live {
  background: linear-gradient(135deg, rgba(47, 217, 127, .18), rgba(47, 217, 127, .07));
  border: 1px solid rgba(47, 217, 127, .32);
  color: #5debA0;
  border-radius: 999px;
  padding: 5px 14px;
  letter-spacing: 1px;
  box-shadow: 0 0 18px -4px rgba(47, 217, 127, .45);
}

#app .db-live__dot {
  background: #2fd97f;
  box-shadow: 0 0 8px #2fd97f, 0 0 16px rgba(47, 217, 127, .8);
}

#app .db-back-btn {
  background: linear-gradient(135deg, rgba(255, 77, 94, .18), rgba(255, 77, 94, .07));
  border: 1px solid rgba(255, 77, 94, .32);
  color: #ff8b96;
  border-radius: 8px;
}

#app .db-back-btn:hover {
  background: rgba(255, 77, 94, .26);
  color: #fff;
}

#app .db-body { padding: 18px 24px 22px; gap: 18px; }

/* ==========================================================================
   KPI 卡片
   ========================================================================== */

#app .db-kpis { gap: 14px; }

#app .kpi {
  position: relative;
  padding: 18px 22px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease;
}

/* 卡片顶部一道彩色光带，用颜色区分指标类型 */
#app .kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpi-accent, #7f8ea8), transparent);
  opacity: .75;
}

/* 右上角的柔光，让卡片看起来有厚度 */
#app .kpi::after {
  content: "";
  position: absolute;
  top: -55%; right: -22%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kpi-accent, #7f8ea8), transparent 68%);
  opacity: .1;
  pointer-events: none;
  transition: opacity .22s ease;
}

#app .kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--cc-shadow-lg);
}

#app .kpi:hover::after { opacity: .2; }

#app .kpi--green  { --kpi-accent: var(--cc-green); }
#app .kpi--orange { --kpi-accent: var(--cc-orange); }
#app .kpi--blue   { --kpi-accent: var(--cc-blue); }

/* 总人数没有颜色修饰类，夹在四张彩色卡里会显得发灰。
   它是首要指标，给消防红并稍作强调。 */
#app .db-kpis > .kpi:first-child { --kpi-accent: var(--cc-red); }

#app .kpi__num {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 26px rgba(255, 255, 255, .18);
}

#app .kpi--green .kpi__num {
  color: #58e79b;
  text-shadow: 0 0 26px rgba(47, 217, 127, .4);
}
#app .kpi--orange .kpi__num {
  color: #ffb865;
  text-shadow: 0 0 26px rgba(255, 162, 58, .4);
}
#app .kpi--blue .kpi__num {
  color: #79b8ff;
  text-shadow: 0 0 26px rgba(77, 159, 255, .4);
}

#app .kpi__label {
  font-size: 12px;
  color: var(--cc-text-mute);
  letter-spacing: 1.4px;
  margin-top: 5px;
}

/* ---------- 在位率环 ----------
   数字仍叠在环心。绝对不能给 <svg> / path 加 CSS filter：
   Chromium 会按 SVG 视口的矩形 bbox 做滤镜，发光会变成一块正方形。
   环容器裁成正圆，阴影只加在这个圆上。 */

#app .kpi-rate {
  --kpi-accent: var(--cc-green);
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow);
  flex: 1;
  min-width: 178px;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease;
}

#app .kpi-rate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpi-accent), transparent);
  opacity: .75;
}

#app .kpi-rate:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: var(--cc-shadow-lg);
}

#app .kpi-rate--warn { --kpi-accent: var(--cc-gold); }
#app .kpi-rate--good { --kpi-accent: var(--cc-green); }

#app .kpi-rate__ring {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--kpi-accent) 35%, transparent);
  filter: none !important;
}

#app .kpi-rate__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-90deg);
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#app .kpi-rate__bg {
  fill: none !important;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 2.4;
  filter: none !important;
}

#app .kpi-rate__fill {
  fill: none !important;
  stroke: var(--kpi-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: none !important;
  box-shadow: none !important;
}

#app .kpi-rate__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: none;
  white-space: nowrap;
}

#app .kpi-rate--warn .kpi-rate__text { color: #ffe2a3; }
#app .kpi-rate--good .kpi-rate__text { color: #b6f5d2; }

#app .kpi-rate__label {
  font-size: 13px;
  color: var(--cc-text-dim);
  letter-spacing: 1.4px;
}

/* ==========================================================================
   面板
   ========================================================================== */

#app .db-content { gap: 18px; grid-template-columns: 360px 1fr; }

#app .db-panel {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow);
  backdrop-filter: blur(10px);
}

#app .db-panel__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--cc-line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}

#app .db-panel__head h3 {
  font-size: 14px;
  color: var(--cc-text);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 面板标题前的小竖条，和队站名呼应，形成统一语言 */
#app .db-panel__head h3::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cc-red), var(--cc-gold));
  box-shadow: 0 0 8px rgba(255, 77, 94, .5);
}

#app .db-badge {
  background: linear-gradient(135deg, rgba(77, 159, 255, .2), rgba(77, 159, 255, .08));
  color: #8cc2ff;
  border: 1px solid rgba(77, 159, 255, .3);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: .5px;
}

#app .db-panel__body { padding: 14px 18px; }

/* ==========================================================================
   人员动态
   ========================================================================== */

#app .pn-section__title {
  color: var(--cc-text-dim);
  letter-spacing: 1.4px;
  font-size: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cc-line-soft);
}

#app .pn-dot { box-shadow: 0 0 9px currentColor; }
#app .pn-dot.green { background: var(--cc-green); color: var(--cc-green); }
#app .pn-dot.orange { background: var(--cc-orange); color: var(--cc-orange); }

#app .pn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#app .pn-row__bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

#app .pn-row:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cc-line);
  transform: translateX(3px);
}

#app .pn-row__name {
  color: var(--cc-text-dim);
  font-size: 13px;
  letter-spacing: .5px;
  min-width: 56px;
}

#app .pn-row__count {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}

#app .pn-row__track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, .07);
  border-radius: 3px;
  overflow: hidden;
}

#app .pn-row__fill {
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 10px -1px currentColor;
}

/* ==========================================================================
   车辆概要 · 姓名牌排班板
   ========================================================================== */

#app .db-panel--vehicles .vt,
#app .db-panel--vehicles .empty-state {
  display: none !important;
}

#app .db-panel--vehicles .db-panel__body {
  background: #2a354d;
}

#app .vb {
  width: 100%;
  min-height: 220px;
  padding: 4px 0 0;
  background: transparent;
  border-radius: 0;
}

#app .vb-head,
#app .vb-row {
  display: grid;
  grid-template-columns: 102px repeat(10, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

#app .vb-head {
  padding: 0 2px 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--cc-line-soft);
}

#app .vb-h {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #d5deee;
  text-align: center;
  font-weight: 700;
}

#app .vb-h.is-cmd { color: #ff8b96; }
#app .vb-h.is-drv { color: #7eecb0; }
#app .vb-h.is-tx { color: #9fe4e6; }
#app .vb-h.is-safe { color: #f6c453; }
#app .vb-h.is-lead { color: #ff9a4d; }

#app .vb-row {
  padding: 5px 2px;
  border-radius: 8px;
}

#app .vb-row:hover {
  background: rgba(255, 255, 255, .03);
}

#app .vb-car {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(165deg, #44506c 0%, #2c364f 52%, #1f273a 100%);
  border: 1px solid rgba(214, 196, 152, .32);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .16) inset,
    0 8px 18px -10px rgba(0, 0, 0, .72);
  overflow: hidden;
}

#app .vb-car::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: #d8c08a;
}

#app .vb-row.is-duty .vb-car::before {
  background: #3ee08c;
  box-shadow: 0 0 8px rgba(47, 217, 127, .5);
}

#app .vb-row.is-standby .vb-car::before {
  background: #f6c453;
  box-shadow: 0 0 8px rgba(246, 196, 83, .45);
}

#app .vb-car__name {
  color: #f4efe4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1.15;
  text-align: center;
}

#app .vb-car__meta {
  color: #c9b896;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

#app .vb-row.is-duty .vb-car__meta {
  color: #8ee0b4;
  background: none;
}

#app .vb-row.is-standby .vb-car__meta {
  color: #f0d28a;
  background: none;
}

#app .vb-plate {
  box-sizing: border-box;
  height: 100%;
  min-height: 40px;
  min-width: 0;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 7px;
  text-align: center;
  background: linear-gradient(180deg, #f6f0e2 0%, #e4d8be 100%);
  color: #2b2416;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 2px 5px rgba(0, 0, 0, .35);
}

#app .vb-av {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, .08);
}

#app .vb-av--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(43, 36, 22, .12);
}

#app .vb-plate__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

#app .vb-plate.tone-red {
  background: linear-gradient(180deg, #ff8a93 0%, #e83d4d 100%);
  color: #fff8f8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 0 0 1px rgba(255, 77, 94, .45),
    0 2px 6px rgba(0, 0, 0, .4);
}

#app .vb-plate.tone-red .vb-av--fallback {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

#app .vb-plate.tone-green {
  background: linear-gradient(180deg, #8ef0b6 0%, #2fd97f 100%);
  color: #083318;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 0 0 1px rgba(47, 217, 127, .4),
    0 2px 6px rgba(0, 0, 0, .35);
}

#app .vb-plate.tone-cyan {
  background: linear-gradient(180deg, #d5f6f6 0%, #8fd4d6 100%);
}

#app .vb-plate.tone-gold {
  background: linear-gradient(180deg, #ffe08a 0%, #f0b429 100%);
  color: #3a2a08;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 0 0 1px rgba(246, 196, 83, .45),
    0 2px 6px rgba(0, 0, 0, .35);
}

#app .vb-plate.tone-orange {
  background: linear-gradient(180deg, #ffb072 0%, #e86a1a 100%);
  color: #3a1608;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 138, 58, .45),
    0 2px 6px rgba(0, 0, 0, .4);
}

#app .vb-plate.is-empty {
  justify-content: center;
  background: rgba(8, 12, 22, .38);
  box-shadow: none;
  border-color: transparent;
  color: transparent;
}

/* ==========================================================================
   车辆概要表（旧表，被排班板替换后隐藏）
   ========================================================================== */

#app .vt th {
  color: var(--cc-text-mute);
  font-size: 11px;
  letter-spacing: 1.4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cc-line);
  background: rgba(255, 255, 255, .022);
}

#app .vt td {
  padding: 13px 12px;
  color: var(--cc-text-dim);
  border-bottom: 1px solid var(--cc-line-soft);
}

#app .vt tbody tr {
  transition: background .16s ease;
}

#app .vt tbody tr:hover {
  background: rgba(77, 159, 255, .07);
}

#app .vt-name {
  color: #fff;
  letter-spacing: .8px;
}

#app .vt-type { color: var(--cc-text-mute); }

#app .vt-num {
  color: var(--cc-text-dim);
  font-variant-numeric: tabular-nums;
}

#app .vt-total {
  color: #8cc2ff;
  font-weight: 800;
  font-size: 14px;
}

#app .vt-highlight { color: #8cc2ff; }
#app .vt-empty { color: var(--cc-text-mute); }

/* 状态胶囊：半透明底 + 描边 + 外发光，比纯色块更"贵" */
#app .vt-status {
  border-radius: 999px;
  padding: 3px 11px;
  letter-spacing: .8px;
  border: 1px solid transparent;
}

#app .vt-status.status-active {
  background: rgba(47, 217, 127, .14);
  border-color: rgba(47, 217, 127, .34);
  color: #5deba0;
  box-shadow: 0 0 12px -3px rgba(47, 217, 127, .55);
}

#app .vt-status.status-backup {
  background: rgba(255, 162, 58, .14);
  border-color: rgba(255, 162, 58, .34);
  color: #ffbe76;
}

#app .vt-status.status-maintenance {
  background: rgba(246, 196, 83, .14);
  border-color: rgba(246, 196, 83, .34);
  color: #f7d488;
}

#app .vt-status.status-default {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cc-line);
  color: var(--cc-text-mute);
}

/* ==========================================================================
   空状态
   ========================================================================== */

#app .db .empty-state,
#app .db .empty,
#app .db .no-data {
  color: var(--cc-text-mute);
}

/* ==========================================================================
   入场动效：让首屏"落位"而不是硬切
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  #app .kpi,
  #app .kpi-rate,
  #app .db-panel {
    animation: cc-rise .5s cubic-bezier(.2, .7, .3, 1) both;
  }

  #app .db-kpis > *:nth-child(1) { animation-delay: .02s; }
  #app .db-kpis > *:nth-child(2) { animation-delay: .06s; }
  #app .db-kpis > *:nth-child(3) { animation-delay: .10s; }
  #app .db-kpis > *:nth-child(4) { animation-delay: .14s; }
  #app .db-kpis > *:nth-child(5) { animation-delay: .18s; }
  #app .db-content > *:nth-child(1) { animation-delay: .20s; }
  #app .db-content > *:nth-child(2) { animation-delay: .24s; }
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 人员详情弹窗挂到 body 上，不能写 #app。头像改正方形。 */
.dlg-personnel .el-avatar,
.dlg-personnel .el-avatar--circle,
.dlg-personnel .dlg-avatar,
.dlg-personnel .el-avatar img {
  border-radius: 4px !important;
}
#dash-fix-dialog img,
#dash-fix-dialog .dash-fix-avatar {
  border-radius: 4px !important;
}