/* =========================================================
   HP Patient Status Bar
   Loaded on every page — keeps the file minimal.
   Matches the "Clinical Sanctuary" design system.
   ========================================================= */

/* ── Base ─────────────────────────────────────────────────── */
.hp-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  color: #3d494c;          /* --hp-on-surface-variant */
  transition: color 0.2s;
}

/* ── Guest state: full element is a link ─────────────────── */
.hp-status-bar--guest {
  color: #3d494c;
  font-weight: 500;
}

.hp-status-bar--guest:hover {
  color: #006876;          /* --hp-primary */
}

.hp-status-bar--guest:hover .hp-status-bar__arrow {
  transform: translateX(3px);
}

/* ── Auth state: wrapper span ────────────────────────────── */
.hp-status-bar--auth {
  gap: 0.5rem;
}

/* Initials avatar — small gradient circle */
.hp-status-bar__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #006876 0%, #29b6cc 100%);
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* Name text */
.hp-status-bar__name {
  color: #171d1e;          /* --hp-on-surface */
  font-weight: 500;
}

/* Separator dot */
.hp-status-bar__sep {
  color: #bcc9cc;          /* --hp-outline-variant */
  font-weight: 400;
  user-select: none;
}

/* "Moje konto" link */
.hp-status-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #006876;          /* --hp-primary */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.hp-status-bar__link:hover {
  color: #29b6cc;          /* --hp-primary-container */
}

.hp-status-bar__link:hover .hp-status-bar__arrow {
  transform: translateX(3px);
}

/* ── Shared icons ─────────────────────────────────────────── */
.hp-status-bar__arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.hp-status-bar__person {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: currentColor;
}

/* ── In-header variant: a bit of breathing room ──────────── */
.hp-navbar .hp-status-bar {
  margin-right: 0.5rem;
}