/* ==========================================================
   WHALE OS Badge & Status System - Relate Style
   ========================================================== */

:root {
  --badge-height-sm: 20px;
  --badge-height-md: 24px;
  --badge-height-lg: 30px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--badge-height-md);
  padding: 0 10px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: var(--fw-medium, 500);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
}

.badge-sm {
  min-height: var(--badge-height-sm);
  font-size: 10.5px;
  padding: 0 7px;
}

.badge-lg {
  min-height: var(--badge-height-lg);
  font-size: 12.5px;
  padding: 0 12px;
}

/* Status variants with soft tinted backgrounds & clean text */
.badge-primary,
.badge-info {
  background-color: var(--lavender-wash, #f0f4fe);
  color: var(--primary, #145aff);
  border-color: rgba(20, 90, 255, 0.15);
}

.badge-success {
  background-color: #eefcf0;
  color: #15803d;
  border-color: rgba(22, 202, 46, 0.2);
}

.badge-warning {
  background-color: #fffbeb;
  color: #b45309;
  border-color: rgba(255, 166, 77, 0.25);
}

.badge-danger {
  background-color: #fef2f2;
  color: #b91c1c;
  border-color: rgba(242, 96, 82, 0.2);
}

.badge-neutral {
  background-color: #f1f5f9;
  color: #475569;
  border-color: var(--stone-divider, #e2e8f0);
}

/* Status Indicator Dot (4-6px) */
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Status Pills for Tables & Profiles */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
}

.status-online,
.status-active {
  color: #15803d;
  background-color: #eefcf0;
  border: 1px solid rgba(22, 202, 46, 0.2);
}

.status-offline,
.status-inactive {
  color: #64748b;
  background-color: #f1f5f9;
  border: 1px solid var(--stone-divider, #e2e8f0);
}

.status-busy,
.status-terminated {
  color: #b91c1c;
  background-color: #fef2f2;
  border: 1px solid rgba(242, 96, 82, 0.2);
}

.status-warning,
.status-pending {
  color: #b45309;
  background-color: #fffbeb;
  border: 1px solid rgba(255, 166, 77, 0.25);
}