/* ===== REUSABLE BADGES - APPLE-LIKE DARK THEME ===== */
.status-badge-enhanced,
.client-type-lead,
.client-type-co_empl,
.client-type-co_ceo,
.client-type-logins,
.client-status-unassigned,
.client-status-in_progress,
.client-status-completed,
.role-badge-hq,
.role-badge-admin,
.role-badge-supervisor,
.role-badge-starter,
.call-status-completed,
.call-status-connected,
.call-status-failed,
.call-status-no_answer,
.call-status-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}

/* Client types */
.client-type-lead {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--warning);
}

.client-type-co_empl {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.client-type-co_ceo {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success);
}

.client-type-logins {
  background: var(--info-subtle);
  border-color: var(--info);
  color: var(--info);
}

/* Client status */
.client-status-unassigned {
  background: var(--secondary-subtle);
  border-color: var(--secondary);
  color: var(--text-secondary);
}

.client-status-in_progress {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.client-status-completed {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success);
}

/* Roles */
.role-badge-hq {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.role-badge-admin {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--warning);
}

.role-badge-supervisor {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success);
}

.role-badge-starter {
  background: var(--secondary-subtle);
  border-color: var(--secondary);
  color: var(--text-secondary);
}

/* Call status */
.call-status-completed {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success);
}

.call-status-connected {
  background: var(--primary-subtle);
  border-color: var(--primary);
  color: var(--primary);
}

.call-status-failed {
  background: var(--danger-subtle);
  border-color: var(--danger);
  color: var(--danger);
}

.call-status-no_answer,
.call-status-busy {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--warning);
}