/* 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 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;
}

/* ============================================================================
   Device / Entity Status Badges
   One class per semantic state — each carries the correct border + background
   for that state. Replaces the previous inline style="border: 1px solid #FCD9BD;
   background: #FFF8F1" that was copy-pasted across all non-Online/Offline states
   (wrong orange border regardless of color meaning).
   ============================================================================ */

/* Shared base for all device/entity status pills */
.device-status-badge {
    border-radius: 6px;
}

/* Online — green */
.device-status-badge-online {
    border: 1px solid #a4f4cf;
    background: #ecfdf5;
}

/* Offline — red */
.device-status-badge-offline {
    border: 1px solid #ffccd3;
    background: #fef0f2;
}

/* Warning — amber */
.device-status-badge-warning {
    border: 1px solid #fde68a;
    background: #fffbeb;
}

/* Maintenance — blue */
.device-status-badge-maintenance {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

/* Error — red (same palette as offline but distinct semantic) */
.device-status-badge-error {
    border: 1px solid #ffccd3;
    background: #fef0f2;
}

/* Active (policy / tag) — green */
.device-status-badge-active {
    border: 1px solid #a4f4cf;
    background: #ecfdf5;
}

/* Inactive (policy / tag) — gray */
.device-status-badge-inactive {
    border: 1px solid #d1d5db;
    background: #f9fafb;
}

/* Pending (policy / tag / alarm) — amber */
.device-status-badge-pending {
    border: 1px solid #fde68a;
    background: #fffbeb;
}

/* Deprecated (policy / tag) — red-tinted */
.device-status-badge-deprecated {
    border: 1px solid #ffccd3;
    background: #fef0f2;
}

/* ============================================================================
   Alarm-specific status badges
   ============================================================================ */

/* Alarm pending (maps from SDK resolution_status="pending" / legacy "ACTIVE") — red */
.alarm-status-badge-pending {
    border: 1px solid #ffccd3;
    background: #fef0f2;
}

/* Acknowledged — orange */
.alarm-status-badge-acknowledged {
    border: 1px solid #fcd9bd;
    background: #fff8f1;
}

/* Resolved — green */
.alarm-status-badge-resolved {
    border: 1px solid #a4f4cf;
    background: #ecfdf5;
}

/* False positive — gray */
.alarm-status-badge-false-positive {
    border: 1px solid #d1d5db;
    background: #f9fafb;
}

/* Default / unknown — gray */
.device-status-badge-unknown {
    border: 1px solid #d1d5db;
    background: #f9fafb;
}

/* Status Badges - Slightly rounded using Flowbite */
.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded 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;
}