/* Pure Flowbite Badge Components - Clean Implementation */

/* Severity Badges - Using Flowbite color system */
.severity-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.severity-badge-low {
  @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.severity-badge-medium {
  @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.severity-badge-high {
  @apply bg-red-100 text-red-800 border border-red-200;
}

/* Status Badges - Pill-shaped using Flowbite */
.status-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.status-badge-active {
  @apply bg-gray-100 text-gray-800 border border-gray-200;
}

.status-badge-resolved {
  @apply bg-green-100 text-green-800 border border-green-200;
}

.status-badge-acknowledged {
  @apply bg-blue-100 text-blue-800 border border-blue-200;
}

/* Device Name/ID Display */
.device-name-id {
  @apply text-gray-900;
}

.device-id {
  @apply text-red-600 text-xs ml-1;
}

/* Timestamp with Calendar Icon */
.timestamp-display {
  @apply flex items-center gap-1 text-sm text-gray-700;
}

.timestamp-icon {
  @apply w-2 h-2 text-gray-400;
}