/*
 * Badges & avatars
 * <span class="badge badge--success">Delivered</span>
 * <span class="avatar">M</span>  or  <img class="avatar avatar--photo">
 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.375rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
}

.badge--primary { background: var(--color-primary-subtle); color: var(--color-primary-text); }
.badge--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.badge--info    { background: var(--color-info-subtle);    color: var(--color-info-text); }

/* WhatsApp-style unread count: a solid round bubble that grows into a pill for "12".
   Used by the sidebar's Conversaciones link, the home page and conversations#index */
.unread-count {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--text-xs);
}

.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--text-lg);
}

.avatar--xl {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
  font-size: var(--text-2xl);
}

/* Real photo instead of initials — use on an <img> */
.avatar--photo {
  object-fit: cover;
  background: var(--color-surface-sunken);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* Category colours: <span class="badge badge--pink">Vaccines</span>
   One per Colorable::COLORS, tokens in variables.css */
.badge--red    { background: var(--category-red-highlight);    color: var(--category-red); }
.badge--orange { background: var(--category-orange-highlight); color: var(--category-orange); }
.badge--amber  { background: var(--category-amber-highlight);  color: var(--category-amber); }
.badge--green  { background: var(--category-green-highlight);  color: var(--category-green); }
.badge--teal   { background: var(--category-teal-highlight);   color: var(--category-teal); }
.badge--blue   { background: var(--category-blue-highlight);   color: var(--category-blue); }
.badge--indigo { background: var(--category-indigo-highlight); color: var(--category-indigo); }
.badge--purple { background: var(--category-purple-highlight); color: var(--category-purple); }
.badge--pink   { background: var(--category-pink-highlight);   color: var(--category-pink); }
.badge--gray   { background: var(--category-gray-highlight);   color: var(--category-gray); }