/* ================================================================
   <bm-user> — see UserBadge.js for the full component doc. Same shape
   and tokens as <bm-date>/<bm-duration> (common/components/date-badge,
   duration-badge) — the three components share one visual language
   across "who" / "when (absolute)" / "how long" fields.
   ================================================================ */

.bm-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.2;
  max-width: 100%;
}

.bm-user-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
}

.bm-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bm-user-name {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-user-meta {
  font-size: 10.5px;
  font-weight: 600;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-user-id {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  letter-spacing: .2px;
}

.bm-user-sep {
  margin: 0 4px;
}

.bm-user-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: .75;
  white-space: nowrap;
}

/* ── Color variants ───────────────────────────────────────────── */

.bm-user--neutral { background: #F7F8FC; color: #4B5878; }
.bm-user--neutral .bm-user-icon { color: #8E97B4; }

.bm-user--success { background: rgba(22,163,74,0.10); color: #16A34A; }
.bm-user--success .bm-user-icon { color: #16A34A; }

.bm-user--warning { background: rgba(217,119,6,0.10); color: #D97706; }
.bm-user--warning .bm-user-icon { color: #D97706; }

.bm-user--danger { background: rgba(220,38,38,0.10); color: #DC2626; }
.bm-user--danger .bm-user-icon { color: #DC2626; }

/* ── Compact — tight table cells: no padding/background/label/meta,
   just icon + name inline. ─────────────────────────────────────── */

.bm-user--compact {
  padding: 0;
  background: none !important;
  border-radius: 0;
  gap: 4px;
}
.bm-user--compact .bm-user-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; }
.bm-user--compact .bm-user-name { font-size: 11.5px; font-weight: 700; }