/* =============================================================
   badges.css — status badges and role indicators
   ============================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.badge--success  { background: var(--success-light);  color: var(--success); }
.badge--danger   { background: var(--danger-light);   color: var(--danger); }
.badge--warn     { background: var(--warn-light);     color: var(--warn); }
.badge--info     { background: var(--info-light);     color: var(--info); }
.badge--accent   { background: var(--accent-light);   color: var(--accent); }
.badge--muted    { background: var(--border-light);   color: var(--muted); }

/* Role badges */
.role-badge--pilot    { background: var(--accent-light); color: var(--accent); }
.role-badge--copilot  { background: var(--warn-light);   color: var(--warn); }
.role-badge--crew     { background: var(--border-light); color: var(--muted); }

/* Overlay status indicators */
.overlay-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.overlay-status-item:last-child {
  border-bottom: none;
}

.overlay-status-item__name {
  color: var(--text-secondary);
}

.overlay-status-item__status {
  font-size: 12px;
  font-weight: 500;
}

.overlay-status-item__status.connected {
  color: var(--success);
}

.overlay-status-item__status.disconnected {
  color: var(--muted);
}