/* ============================================================
   URBINO · AVATAR
   Atomic component. Three types (initial / image / anonymous),
   five sizes, optional badge, group overlap.

   Anonymous matters: it's the "Anonim bejelentő" treatment from
   the manager detail view — never expose blanks for missing names.
   ============================================================ */

.u-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--u-font-sans);
  font-weight: 600;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--u-blue-100);
  color: var(--u-blue-700);
  text-transform: uppercase;
  letter-spacing: 0;
  user-select: none;
  line-height: 1;
}
.u-avatar > img,
.u-avatar > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- SIZES ---------- */
.u-avatar--xs { width: 16px; height: 16px; font-size: 8px;  }
.u-avatar--sm { width: 20px; height: 20px; font-size: 9px;  }
.u-avatar--md { width: 28px; height: 28px; font-size: 11px; }
.u-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.u-avatar--xl { width: 64px; height: 64px; font-size: 22px; }

/* ---------- INITIAL COLOR VARIANTS ----------
   Pick one deterministically from the user's name (e.g. first
   char-code mod 6 → c1..c6). Don't generate at random per render —
   the same person should always get the same chip. */
.u-avatar--c1 { background: var(--u-blue-100);   color: var(--u-blue-700); }
.u-avatar--c2 { background: var(--u-green-100);  color: var(--u-green-700); }
.u-avatar--c3 { background: #FCE7F3;             color: #9D174D; }  /* rose */
.u-avatar--c4 { background: var(--u-violet-100); color: var(--u-violet-700); }
.u-avatar--c5 { background: var(--u-amber-100);  color: var(--u-amber-700); }
.u-avatar--c6 { background: var(--u-teal-100);   color: var(--u-teal-700); }

/* ---------- ANONYMOUS — for "Anonim bejelentő" etc. ---------- */
.u-avatar--anon {
  background: var(--u-surface-sunk);
  color: var(--u-fg-3);
}
.u-avatar--anon > img { padding: 18%; box-sizing: border-box; }

/* ---------- BADGE — small status dot, bottom-right ---------- */
.u-avatar__badge {
  position: absolute;
  bottom: 0; right: 0;
  width: 30%; height: 30%;
  min-width: 8px; min-height: 8px;
  border-radius: 50%;
  background: var(--u-status-megoldva-dot);
  box-shadow: 0 0 0 2px var(--u-surface);
}
.u-avatar--xs .u-avatar__badge,
.u-avatar--sm .u-avatar__badge { box-shadow: 0 0 0 1.5px var(--u-surface); }

.u-avatar__badge--uj          { background: var(--u-status-uj-dot); }
.u-avatar__badge--jovahagyva  { background: var(--u-status-jovahagyva-dot); }
.u-avatar__badge--folyamatban { background: var(--u-status-folyamatban-dot); }
.u-avatar__badge--megoldva    { background: var(--u-status-megoldva-dot); }
.u-avatar__badge--danger      { background: var(--u-red-500); }
.u-avatar__badge--away        { background: var(--u-slate-400); }


/* ============================================================
   GROUP — overlapping cluster with optional "+N" overflow
   ============================================================ */

.u-avatar-group {
  display: inline-flex;
  align-items: center;
}
.u-avatar-group > .u-avatar {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--u-surface);
}
.u-avatar-group > .u-avatar:first-child { margin-left: 0; }

/* Tighter overlap for small sizes */
.u-avatar-group--sm > .u-avatar,
.u-avatar-group > .u-avatar--xs,
.u-avatar-group > .u-avatar--sm { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--u-surface); }
.u-avatar-group--sm > .u-avatar:first-child { margin-left: 0; }

/* "+N" overflow chip — same shape as avatar */
.u-avatar-group__overflow {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
  font-family: var(--u-font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--u-surface);
  line-height: 1;
}
.u-avatar-group > .u-avatar-group__overflow {
  width: 28px; height: 28px; font-size: 11px;
}
.u-avatar-group--sm .u-avatar-group__overflow {
  width: 20px; height: 20px; font-size: 9px;
  margin-left: -5px; box-shadow: 0 0 0 1.5px var(--u-surface);
}