/* Account team role badges (FR-05) — shared by RMS customer pages, Strategic Accounts
   and Contact Management. Rendered by window.AccountRoles.badgesHtml in
   Project_Management/RMS/js/account-roles.js.

   Deliberately neutral: a role is not a status, so green/amber/red stay reserved for
   OK / warning / risk per the brand rule. Red is used only as the hover accent and for
   the executive-sponsor outline, which is the one seat that means escalation path. */

.acct-role-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.acct-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border: 1px solid var(--border, #D9D9D9);
  border-radius: 2px;
  background: #fff;
  color: var(--gray, #404040);
  font: 700 9.5px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.acct-role-badge[data-role="executive_sponsor"] {
  border-color: rgba(167, 31, 35, 0.45);
  color: var(--red-dark, #A71F23);
}

.acct-role-badge[data-role="transition_account_manager"] {
  border-style: dashed;
}

.acct-role-badge.acct-role-more {
  color: var(--muted, #666);
  cursor: default;
}

/* Territory rides along as its own chip, so one person holding a role in two territories
   reads as two chips instead of one ambiguous label. */
.acct-role-region {
  padding: 0 3px;
  border-left: 1px solid var(--border, #D9D9D9);
  margin-left: 1px;
  color: var(--muted, #666);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
}