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

/* Custom styles for the OCPP charging station simulator */

.status-indicator {
  @apply inline-block w-3 h-3 rounded-full;
}

.status-connected {
  @apply bg-green-400 animate-pulse;
}

.status-disconnected {
  @apply bg-red-400;
}

.status-connecting {
  @apply bg-yellow-400 animate-ping;
}

.event-card {
  @apply bg-white rounded-lg shadow-md p-4 border-l-4 transition-all duration-200 hover:shadow-lg;
}

.event-card.heartbeat {
  @apply border-l-blue-400;
}

.event-card.boot-notification {
  @apply border-l-green-400;
}

.event-card.start-transaction {
  @apply border-l-charging-500;
}

.event-card.stop-transaction {
  @apply border-l-red-400;
}

.event-card.status-notification {
  @apply border-l-purple-400;
}

.event-card.meter-values {
  @apply border-l-yellow-400;
}

.event-card.firmware-status {
  @apply border-l-indigo-400;
}

.event-card.diagnostic-status {
  @apply border-l-pink-400;
}

.event-card.pause-transaction {
  @apply border-l-orange-400;
}

.event-card.resume-transaction {
  @apply border-l-teal-400;
}

.charging-animation {
  background: linear-gradient(45deg, #10b981, #34d399, #10b981);
  background-size: 400% 400%;
  animation: chargingFlow 2s ease-in-out infinite;
}

@keyframes chargingFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.connector-active {
  @apply bg-charging-400 text-white shadow-lg transform scale-105;
}

.connector-available {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
}

.connector-occupied {
  @apply bg-blue-400 text-white;
}

.connector-faulted {
  @apply bg-red-400 text-white;
}

.connector-unavailable {
  @apply bg-gray-400 text-white;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}