/* ============================================================
   Patient Photo — Avatar display + Capture form component
   ============================================================ */

/* ── Avatar (display anywhere) ─────────────────────────────── */

.pt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--eu-color-primary-100, #dbeafe);
  color: var(--eu-color-primary-700, #1d4ed8);
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid var(--eu-color-border, #e2e8f0);
}

.pt-avatar--sm  { width: 32px;  height: 32px;  font-size: 11px; }
.pt-avatar--md  { width: 48px;  height: 48px;  font-size: 15px; }
.pt-avatar--lg  { width: 80px;  height: 80px;  font-size: 22px; }

.pt-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pt-avatar__initials {
  line-height: 1;
  user-select: none;
}

/* ── Capture widget (used inside patient registration / edit form) ─ */

.pt-capture {
  display: grid;
  gap: 16px;
}

.pt-capture__viewport {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--eu-color-surface-alt, #f8fafc);
  border: 1.5px solid var(--eu-color-border, #e2e8f0);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-capture__video,
.pt-capture__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.pt-capture__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--eu-color-text-muted, #94a3b8);
  font-size: 13px;
}

.pt-capture__placeholder-icon {
  font-size: 40px;
  opacity: 0.5;
}

.pt-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pt-capture__actions .eu-btn {
  flex: 1;
  min-width: 100px;
}

.pt-capture__upload-hint {
  font-size: 12px;
  color: var(--eu-color-text-muted, #94a3b8);
  margin-top: 4px;
}

/* ── Patient card with photo (op billing, walk-in) ─────────── */

.pt-card-with-photo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pt-card-with-photo__info {
  flex: 1;
  min-width: 0;
}

/* ── op_billing panel header with photo ─────────────────────── */

.opb-panel__head--photo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.opb-panel__head--photo .opb-panel__title-group {
  flex: 1;
  min-width: 0;
}