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

.bm-id {
  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-id-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
}

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

.bm-id-value {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full mode shows the entire, untruncated ID — wrap instead of
   ellipsis-clipping it, since the whole point is to let it be read
   (or copied) in full. */
.bm-id--full .bm-id-value {
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: clip;
}

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

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

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

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

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

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

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

.bm-id--compact {
  padding: 0;
  background: none !important;
  border-radius: 0;
  gap: 4px;
}
.bm-id--compact .bm-id-icon { font-size: 12px !important; width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important; }
.bm-id--compact .bm-id-value { font-size: 11px; font-weight: 700; }