/* Mission Control — minimal custom styles on top of Tailwind */

.nav-btn.active {
  background: rgb(39 39 42);
  color: rgb(244 244 245);
}

.tier-large  { background: rgb(127 29 29); color: rgb(254 226 226); }
.tier-medium { background: rgb(120 53 15); color: rgb(254 243 199); }
.tier-small  { background: rgb(20 83 45); color: rgb(220 252 231); }
.tier-unknown{ background: rgb(63 63 70); color: rgb(244 244 245); }

.bar-track {
  background: rgb(39 39 42);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  transition: width 0.4s ease;
}
.bar-green  { background: rgb(16 185 129); }
.bar-yellow { background: rgb(234 179 8); }
.bar-red    { background: rgb(239 68 68); }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.dot-running { background: rgb(16 185 129); }
.dot-stopped { background: rgb(239 68 68); }
.dot-paused  { background: rgb(234 179 8); }
.dot-other   { background: rgb(113 113 122); }

/* Pulse for live indicator */
@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.live-dot { animation: mc-pulse 1.5s ease-in-out infinite; }

#detail-drawer {
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#detail-drawer.open {
  transform: translateX(0);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(24 24 27); }
::-webkit-scrollbar-thumb { background: rgb(63 63 70); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(82 82 91); }