/* ── 覆盖 Bootstrap dark 默认背景，使用更深的暗色主题 ─────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:          #0f1117;
  --bs-body-color:       #e2e8f0;
  --bs-card-bg:          #1a1d27;
  --bs-border-color:     #2a2d3a;
  --bs-secondary-color:  #8892a4;
  --bs-tertiary-bg:      #1e2130;
  /* 旧变量别名：供 JS 内联 style="color:var(--red)" 等继续生效 */
  --red:     #ef4444;
  --green:   #22c55e;
  --blue:    #3b82f6;
  --muted:   #8892a4;
  --cyan:    #06b6d4;
  --surface: #1a1d27;
  --border:  #2a2d3a;
  --text:    #e2e8f0;
}

/* ── 导航栏 ─────────────────────────────────────────────────────────── */
.navbar { background: var(--bs-card-bg); }

/* ── 统计卡片 ───────────────────────────────────────────────────────── */
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--bs-secondary-color); margin-bottom: 6px;
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }

/* ── 颜色工具类（Bootstrap 无内置 purple/cyan）─────────────────────── */
.text-purple { color: #a855f7 !important; }
.text-cyan   { color: #06b6d4 !important; }

/* ── 活动指示点 ─────────────────────────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── 表格 ───────────────────────────────────────────────────────────── */
.table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--bs-secondary-color); white-space: nowrap;
  background: var(--bs-tertiary-bg);
}

/* ── 状态标签 ───────────────────────────────────────────────────────── */
.badge-idle     { background: rgba(34,197,94,.15)  !important; color: #22c55e !important; }
.badge-occupied { background: rgba(59,130,246,.15) !important; color: #3b82f6 !important; }
.badge-fault    { background: rgba(239,68,68,.15)  !important; color: #ef4444 !important; }
.badge-pending  { background: rgba(245,158,11,.15) !important; color: #f59e0b !important; }
.badge-stored   { background: rgba(59,130,246,.15) !important; color: #3b82f6 !important; }
.badge-picked   { background: rgba(34,197,94,.15)  !important; color: #22c55e !important; }
.badge-expired  { background: rgba(239,68,68,.15)  !important; color: #ef4444 !important; }
.badge-partial  { background: rgba(168,85,247,.15) !important; color: #a855f7 !important; }

/* ── 队列状态 ───────────────────────────────────────────────────────── */
.q-paused {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.q-paused.running { background: rgba(34,197,94,.15); color: #22c55e; }
.q-paused.paused  { background: rgba(245,158,11,.15); color: #f59e0b; }

/* ── 柜格可视化 ─────────────────────────────────────────────────────── */
.device-title {
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--bs-secondary-color); margin: 20px 0 10px;
}
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot-cell {
  position: relative;
  background: var(--bs-card-bg); border: 1px solid var(--bs-border-color);
  border-radius: 6px; padding: 8px 8px 6px; text-align: center;
  transition: border-color .15s, background .15s;
}
/* 状态决定边框色 */
.slot-cell.idle     { border-color: #22c55e; }
.slot-cell.occupied { border-color: #3b82f6; }
.slot-cell.fault    { border-color: #ef4444; }

/* 类型决定顶部色条 */
.slot-cell::before {
  content: ''; display: block;
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 6px 6px 0 0;
  background: var(--bs-border-color);
}
.slot-cell.type-1::before { background: #f59e0b; }   /* 常温 — 琥珀 */
.slot-cell.type-2::before { background: #06b6d4; }   /* 冷藏 — 青蓝 */
.slot-cell.type-3::before { background: #818cf8; }   /* 冷冻 — 紫蓝 */

/* 类型决定背景色调 */
.slot-cell.type-1 { background: rgba(245,158,11,.06); }
.slot-cell.type-2 { background: rgba(6,182,212,.06); }
.slot-cell.type-3 { background: rgba(129,140,248,.06); }

/* 格口类型角标 */
.slot-type-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 9px; font-weight: 600; letter-spacing: .3px;
  border-radius: 3px; padding: 1px 4px; margin-bottom: 4px;
}
.slot-type-badge.t1 { background: rgba(245,158,11,.18); color: #f59e0b; }
.slot-type-badge.t2 { background: rgba(6,182,212,.18);  color: #06b6d4; }
.slot-type-badge.t3 { background: rgba(129,140,248,.18);color: #818cf8; }

.slot-id  { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.slot-status { font-size: 11px; }
.slot-pkg { font-size: 10px; color: var(--bs-secondary-color); word-break: break-all; margin-top: 2px; }
.slot-resolve-btn {
  display: block; width: 100%; margin-top: 5px;
  font-size: 10px; padding: 2px 4px; border-radius: 4px;
  border: 1px solid #ef4444; background: transparent; color: #ef4444;
  cursor: pointer; transition: background .15s, color .15s;
}
.slot-resolve-btn:hover { background: #ef4444; color: #fff; }
.c-green  { color: #22c55e; }
.c-blue   { color: #3b82f6; }
.c-red    { color: #ef4444; }

/* 图例 */
.slot-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 11px; color: var(--bs-secondary-color); margin-bottom: 12px;
}
.slot-legend-item { display: flex; align-items: center; gap: 5px; }
.legend-type-dot {
  width: 10px; height: 10px; border-radius: 2px;
}
.legend-status-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid;
}

/* ── 广告活动展开行 ──────────────────────────────────────────────────── */
.ad-campaign-row:hover td { background: rgba(6,182,212,.05) !important; }
.ad-detail-row td { padding: 0 !important; }

/* ── 空态 ───────────────────────────────────────────────────────────── */
.empty { text-align: center; color: var(--bs-secondary-color); padding: 40px; }

/* ── 响应式 ─────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}