/* Shared work-area vocabulary: the stage dot, chip, and status badge.
   One hue per workflow stage (tokens in application.css), used by the sidebar,
   case lists, the case header, and the user list. */

.work-area-dot {
  --dot: var(--ah-ink-4);
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dot);
}

.work-area-dot--fresh { --dot: var(--ah-stage-fresh); }
.work-area-dot--segmentation { --dot: var(--ah-stage-segmentation); }
.work-area-dot--planning { --dot: var(--ah-stage-planning); }
.work-area-dot--quality_review { --dot: var(--ah-stage-quality_review); }
.work-area-dot--ortho_review { --dot: var(--ah-stage-ortho_review); }
.work-area-dot--doctor_review { --dot: var(--ah-stage-doctor_review); }
.work-area-dot--modification { --dot: var(--ah-stage-modification); }
.work-area-dot--approved { --dot: var(--ah-stage-approved); }

.work-area-chip,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.375rem;
  padding: 0 0.5rem;
  background: var(--ah-surface-2);
  border: 0;
  border-radius: var(--ah-radius-pill);
  font-size: var(--ah-text-xs);
  font-weight: var(--ah-weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--ah-ink-2);
}

.work-area-chip .work-area-dot,
.status-badge .work-area-dot {
  width: 0.4375rem;
  height: 0.4375rem;
}

.status-badge {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}

.status-badge--fresh { background: var(--ah-stage-fresh-soft); color: var(--ah-stage-fresh-ink); }
.status-badge--segmentation { background: var(--ah-stage-segmentation-soft); color: var(--ah-stage-segmentation-ink); }
.status-badge--planning { background: var(--ah-stage-planning-soft); color: var(--ah-stage-planning-ink); }
.status-badge--quality_review { background: var(--ah-stage-quality_review-soft); color: var(--ah-stage-quality_review-ink); }
.status-badge--ortho_review { background: var(--ah-stage-ortho_review-soft); color: var(--ah-stage-ortho_review-ink); }
.status-badge--doctor_review { background: var(--ah-stage-doctor_review-soft); color: var(--ah-stage-doctor_review-ink); }
.status-badge--modification { background: var(--ah-stage-modification-soft); color: var(--ah-stage-modification-ink); }
.status-badge--approved { background: var(--ah-stage-approved-soft); color: var(--ah-stage-approved-ink); }
.status-badge--none { background: transparent; color: var(--ah-ink-4); padding: 0; }