/**
 * CE-606: Service Status Panel Styles
 */

#service-status-panel {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.service-status-item {
  transition: all 0.2s ease;
}

.service-status-item:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
}

.status-badge {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-badge.bg-green-500 {
  animation: none;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.status-badge.bg-yellow-500 {
  animation: pulse-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.status-badge.bg-red-500 {
  animation: pulse-error 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.status-badge.bg-blue-500 {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes pulse-error {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.refresh-btn {
  transition: transform 0.2s ease;
}

.refresh-btn:hover {
  transform: rotate(90deg);
}

.refresh-btn:active {
  transform: rotate(180deg);
}