@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #0a0a0f;
  --foreground: #ededed;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a24;
}

::-webkit-scrollbar-thumb {
  background: #3b3b4f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b4b5f;
}

/* Glow effects */
.glow-green {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.glow-red {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Card styles */
.card {
  @apply bg-gray-900/50 border border-gray-700/50 rounded-xl p-4 backdrop-blur-sm;
}

.card-header {
  @apply text-lg font-semibold text-gray-100 mb-3 flex items-center gap-2;
}

/* Button styles */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-500 text-white;
}

.btn-success {
  @apply bg-green-600 hover:bg-green-500 text-white;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-500 text-white;
}

.btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-gray-100;
}

/* Input styles */
.input {
  @apply bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none transition-colors;
}

.select {
  @apply bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none transition-colors cursor-pointer;
}

/* Status indicators */
.status-dot {
  @apply w-2 h-2 rounded-full;
}

.status-dot.online {
  @apply bg-green-500 animate-pulse;
}

.status-dot.offline {
  @apply bg-red-500;
}

.status-dot.pending {
  @apply bg-yellow-500 animate-pulse;
}