/* ═══ DOCK NXP ═══ */

.dock-layout { background: #030305 !important; display: flex !important; }
.triage-sidebar {
  background: #0A0A0F !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  width: 260px !important;
}
.triage-header {
  background: rgba(255,255,255,.015) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.triage-title { font-family: 'Figtree', sans-serif !important; font-weight: 600 !important; font-size: 12px !important; }
.triage-item {
  background: #0A0A0F !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
}
.triage-item:hover { background: #0F0F14 !important; border-color: rgba(255,255,255,.08) !important; }
.triage-item::before { width: 3px !important; border-radius: 3px !important; }
.triage-item.crit::before { box-shadow: 0 0 8px rgba(232,69,69,.5) !important; }
.triage-item.warn::before { box-shadow: 0 0 8px rgba(229,160,17,.5) !important; }
.triage-item.info::before { box-shadow: 0 0 8px rgba(0,194,240,.5) !important; }
.triage-door { font-family: 'JetBrains Mono', monospace !important; }
.triage-dot { box-shadow: 0 0 8px currentColor !important; }

.dock-toolbar {
  background: #08080D !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.dock-filter-btn {
  border-radius: 100px !important;
  font-family: 'Figtree', sans-serif !important;
}
.dock-filter-btn.active {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #E8E8EC !important;
}
.dock-count { font-family: 'JetBrains Mono', monospace !important; color: #4A4A54 !important; }

/* Dock cards — lifted with underglow */
.dock-card {
  background: #0A0A0F !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  overflow: visible !important;
}
.dock-card:hover { transform: translateY(-2px) !important; border-color: rgba(255,255,255,.1) !important; }
.dock-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 15% !important;
  right: 15% !important;
  height: 10px !important;
  border-radius: 50% !important;
  filter: blur(8px) !important;
  opacity: 0 !important;
  transition: opacity .2s !important;
}
.dock-card:hover::after { opacity: 1 !important; }
.dock-card.loading::after { background: #00C2F0 !important; }
.dock-card.unloading::after { background: #9F6CF7 !important; }
.dock-card.occupied::after { background: #E5A011 !important; }
.dock-card.ready::after { background: #2DD4A8 !important; }
.dock-card.delayed::after { background: #E84545 !important; }

.dock-card.loading { border-color: rgba(0,194,240,.15) !important; background: rgba(0,194,240,.025) !important; }
.dock-card.unloading { border-color: rgba(159,108,247,.15) !important; background: rgba(159,108,247,.025) !important; }
.dock-card.occupied { border-color: rgba(229,160,17,.15) !important; background: rgba(229,160,17,.025) !important; }
.dock-card.ready { border-color: rgba(45,212,168,.15) !important; background: rgba(45,212,168,.025) !important; }
.dock-card.delayed { border-color: rgba(232,69,69,.15) !important; background: rgba(232,69,69,.03) !important; }

.dock-card::before { height: 3px !important; }
.dock-card.loading::before { box-shadow: 0 0 12px rgba(0,194,240,.4) !important; }
.dock-card.unloading::before { box-shadow: 0 0 12px rgba(159,108,247,.4) !important; }
.dock-card.ready::before { box-shadow: 0 0 12px rgba(45,212,168,.4) !important; }
.dock-card.delayed::before { box-shadow: 0 0 16px rgba(232,69,69,.5) !important; }

.dock-code { font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; }
.dock-card.loading .dock-code { color: #00C2F0 !important; }
.dock-card.unloading .dock-code { color: #9F6CF7 !important; }
.dock-card.occupied .dock-code { color: #E5A011 !important; }
.dock-card.ready .dock-code { color: #2DD4A8 !important; }
.dock-card.delayed .dock-code { color: #FF4D6A !important; }

.dock-badge { border-radius: 100px !important; font-size: 9px !important; }
.dock-badge.loading { color: #00C2F0 !important; box-shadow: 0 0 8px rgba(0,194,240,.15) !important; }
.dock-badge.unloading { color: #B88AFF !important; box-shadow: 0 0 8px rgba(159,108,247,.15) !important; }
.dock-badge.ready { color: #2DD4A8 !important; box-shadow: 0 0 8px rgba(45,212,168,.15) !important; }
.dock-badge.delayed { color: #FF4D6A !important; box-shadow: 0 0 8px rgba(232,69,69,.2) !important; }

.dock-trailer-num { font-family: 'JetBrains Mono', monospace !important; font-weight: 500 !important; }
.dock-carrier-name { color: #7C7C86 !important; }
.dock-detention { border-radius: 100px !important; box-shadow: 0 0 12px rgba(232,69,69,.1) !important; }
.dock-dwell-bar { background: rgba(255,255,255,.03) !important; border-radius: 3px !important; }

.heat-strip { box-shadow: 0 2px 12px rgba(0,0,0,.3) !important; }
.wall-mode-btn { border-radius: 100px !important; }
.wall-mode-btn.active { color: #B88AFF !important; background: rgba(159,108,247,.08) !important; }
.dock-recommend-btn { border-radius: 100px !important; color: #9F6CF7 !important; }

/* KPI strip */
.kpi-strip { background: #080810 !important; }
.kpi-strip-val {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -.02em !important;
}
.kpi-strip-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #4A4A54 !important;
}
.kpi-strip-val.clear { color: #2DD4A8 !important; text-shadow: 0 0 16px rgba(45,212,168,.3) !important; }
.kpi-strip-val.caution { color: #E5A011 !important; text-shadow: 0 0 16px rgba(229,160,17,.3) !important; }
.kpi-strip-val.critical { color: #FF4D6A !important; text-shadow: 0 0 16px rgba(255,77,106,.35) !important; }