/* OrgChart content cards, not overrides of HM React components.
   Colors, typography and geometry use standalone OrgChart variables.
   Observed card geometry is a minimum; text may increase the card height. */
.hm-orgchart-employee[data-card-kind] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--hm-orgchart-resolved-card-width-employee);
  min-width: var(--hm-orgchart-resolved-card-width-employee);
  min-height: var(--hm-orgchart-resolved-card-height-employee);
  margin: 0;
  padding: 6px;
  border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-card-border, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-stroke-default)));
  border-radius: var(--hm-orgchart-resolved-radius-container);
  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
  color: var(--hm-orgchart-current-card-color, var(--hm-orgchart-resolved-fg-primary));
  font-family: var(--hm-orgchart-resolved-font-family);
  text-align: left;
}
.hm-orgchart-employee[data-card-kind]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 42px;
  height: 10px;
  border-radius: 0 var(--hm-orgchart-resolved-radius-container) 0 100%;
  background: var(--hm-orgchart-resolved-bg-content);
  pointer-events: none;
}
.hm-orgchart-employee[data-card-kind="leader"],
.hm-orgchart-employee[data-card-kind="topLeader"] {
  width: var(--hm-orgchart-resolved-card-width-leader);
  min-width: var(--hm-orgchart-resolved-card-width-leader);
  min-height: var(--hm-orgchart-resolved-card-height-leader);
  gap: 8px;
  padding: 8px;
  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-card-accent, var(--hm-orgchart-current-border, var(--hm-orgchart-resolved-action-primary)));
  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-content));
}
.hm-orgchart-employee[data-card-kind="topLeader"] {
  width: var(--hm-orgchart-resolved-card-width-top-leader);
  min-width: var(--hm-orgchart-resolved-card-width-top-leader);
  min-height: var(--hm-orgchart-resolved-card-height-top-leader);
  border-color: var(--hm-orgchart-accent, var(--hm-orgchart-resolved-action-primary));
  background: var(--hm-orgchart-current-card-background, var(--hm-orgchart-resolved-bg-surface));
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3.5px;
  background: var(--hm-orgchart-resolved-bg-subtle);
  color: var(--hm-orgchart-resolved-fg-secondary);
  font-size: 13px;
  font-weight: var(--hm-orgchart-resolved-font-weight-medium);
}
.hm-orgchart-employee[data-card-kind="leader"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
.hm-orgchart-employee[data-card-kind="topLeader"] .hm-orgchart-avatar { flex-basis: 40px; width: 40px; height: 40px; }
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-avatar img[data-photo-placeholder="true"] {
  object-fit: contain;
  background: #f1f5f8;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-employee-details { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; }
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
  overflow-wrap: anywhere;
  word-break: normal;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role {
  display: block;
  font-size: 10px;
  line-height: 13px;
  color: var(--hm-orgchart-resolved-fg-secondary);
  overflow-wrap: anywhere;
}
.hm-orgchart-employee[data-card-kind][data-has-affiliation="true"] .hm-orgchart-person-role { padding-right: 18px; }
.hm-orgchart-employee[data-card-kind] .hm-orgchart-person-attributes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-job-title {
  padding: 0 3px;
  border-radius: var(--hm-orgchart-resolved-radius-control-md);
  background: var(--hm-orgchart-resolved-accent);
  color: var(--hm-orgchart-resolved-on-accent);
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--hm-orgchart-resolved-font-weight-medium);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-status-label {
  font-size: 10px;
  line-height: 14px;
  color: var(--hm-orgchart-resolved-fg-secondary);
  overflow-wrap: anywhere;
}
.hm-orgchart-employee[data-card-kind][data-work-status="dispatched"],
.hm-orgchart-employee[data-card-kind][data-work-status="onLeave"] { border-style: dashed; }
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  width: 16px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
  border-radius: var(--hm-orgchart-resolved-radius-control-md);
  background: var(--hm-orgchart-resolved-bg-content);
  color: var(--hm-orgchart-resolved-fg-secondary);
  font-size: 8px;
  line-height: 12px;
  overflow-wrap: anywhere;
}
.hm-orgchart-affiliation-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
/* Card image boxes are 1.5 times the P3.1 display: 14 -> 21px.
   Keep the 1px transparent inset; summary logos stay unchanged. */
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark {
  top: 0;
  right: 0;
  width: 23px;
  height: 23px;
  min-height: 23px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1px;
}
.hm-orgchart-employee[data-card-kind] .hm-orgchart-affiliation-mark img {
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.hm-orgchart-affiliation-mark[data-logo-available="true"] .hm-orgchart-affiliation-fallback { visibility: hidden; }

/* Approved SVG cards and compact read-only status cards share content layout.
   Status cards retain their separate gray surface and do not receive an SVG. */
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
  box-sizing: border-box;
  width: 108px;
  min-width: 108px;
  height: 52px;
  min-height: 52px;
  padding: 4px;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
  width: 146px;
  min-width: 146px;
  height: 68px;
  min-height: 68px;
  padding: 6px;
  gap: 6px;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] { height: 74px; min-height: 74px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] { column-gap: 10px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])::before { content: none; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-card-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { flex-basis: 24px; width: 24px; height: 24px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { flex-basis: 32px; width: 32px; height: 32px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
  --hm-orgchart-person-position-color: #797979;
  --hm-orgchart-person-position-size: 15px;
  --hm-orgchart-person-position-line-height: 18px;
  --hm-orgchart-person-position-letter-spacing: -0.6px;
  --hm-orgchart-person-name-size: 18px;
  --hm-orgchart-person-name-line-height: 24px;
  --hm-orgchart-person-name-letter-spacing: -0.8px;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"],
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
  --hm-orgchart-person-position-size: 20px;
  --hm-orgchart-person-position-line-height: 22px;
  --hm-orgchart-person-position-letter-spacing: -0.8px;
  --hm-orgchart-person-name-size: 24px;
  --hm-orgchart-person-name-line-height: 30px;
  --hm-orgchart-person-name-letter-spacing: -0.96px;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] {
  --hm-orgchart-person-position-color: #224387;
  --hm-orgchart-person-name-letter-spacing: -0.8px;
}
.hm-orgchart-employee[data-card-asset][data-card-asset-size="leader"] { --hm-orgchart-person-position-size: 18px; }
/* Retain the status border while matching the approved small photo/text origins. */
.hm-orgchart-employee[data-card-layout="compact"] { padding: 3px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-text { display: flex; flex-direction: column; gap: 0; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-person-role { flex: 0 0 auto; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-position-row .hm-orgchart-job-title { flex: 0 0 auto; margin: 0; }
/* The source's compact tag shares the position row. Align its lower edge with
   that row so long raw tags clear the unchanged upper-right affiliation logo
   within the approved 146px cards; row/name gap and typography stay intact. */
.hm-orgchart-employee[data-workdesk-presentation="true"][data-card-asset="integrated-system"][data-card-asset-size="leader"] .hm-orgchart-position-row .hm-orgchart-job-title { align-self: flex-end; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role,
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name { margin: 0; padding: 0; white-space: nowrap; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-has-affiliation="true"] .hm-orgchart-person-role { padding: 0; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-role {
  color: var(--hm-orgchart-card-position-color, var(--hm-orgchart-person-position-color));
  font-size: var(--hm-orgchart-person-position-size);
  font-weight: 400;
  line-height: var(--hm-orgchart-person-position-line-height);
  letter-spacing: var(--hm-orgchart-person-position-letter-spacing);
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name {
  color: var(--hm-orgchart-card-color, #071D3A);
  font-size: var(--hm-orgchart-person-name-size);
  font-weight: 700;
  line-height: var(--hm-orgchart-person-name-line-height);
  letter-spacing: var(--hm-orgchart-person-name-letter-spacing);
  overflow: hidden;
  text-overflow: clip;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name[data-name-overflow="true"] { text-overflow: ellipsis; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: var(--hm-orgchart-card-color, #323232); }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 1px; }
.hm-orgchart-employee[data-card-asset-size="employee"] .hm-orgchart-affiliation-mark { top: 2px; right: 1px; width: 20px; height: 20px; min-height: 20px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-affiliation-fallback { font-size: 6px; white-space: nowrap; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-attributes { position: absolute; z-index: 1; left: 3px; bottom: 3px; width: 28px; justify-content: center; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-person-attributes,
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-person-attributes { left: 4px; width: 36px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title { max-width: 100%; padding: 0 2px; font-size: 8px; line-height: 12px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-job-title { font-size: 9px; font-weight: 700; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title { font-size: 8.5px; font-weight: 500; }
/* Workdesk source: index.css .rank-position/.role-rank and .bg-*.
   Preserve the approved SVG geometry and position/name typography. The photo
   slot uses the existing reserved width because the approved cards are smaller
   than Workdesk's source cards; missing photos use the shared neutral icon. */
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]),
.hm-orgchart-employee[data-workdesk-presentation="true"] {
  --hm-orgchart-role-tag-color: #0e5492;
  --hm-orgchart-role-tag-background: rgba(14, 84, 146, 0.08);
  --hm-orgchart-role-tag-border: rgba(14, 84, 146, 0.2);
}
.hm-orgchart-employee[data-card-asset="business-planning"] {
  --hm-orgchart-role-tag-color: #254e7e;
  --hm-orgchart-role-tag-background: rgba(37, 78, 126, 0.1);
  --hm-orgchart-role-tag-border: rgba(37, 78, 126, 0.26);
}
.hm-orgchart-employee[data-card-asset="talent-growth"] {
  --hm-orgchart-role-tag-color: #0e67c8;
  --hm-orgchart-role-tag-background: rgba(14, 103, 200, 0.1);
  --hm-orgchart-role-tag-border: rgba(14, 103, 200, 0.26);
}
.hm-orgchart-employee[data-card-asset="integrated-system"] {
  --hm-orgchart-role-tag-color: #6e47a0;
  --hm-orgchart-role-tag-background: rgba(110, 71, 160, 0.1);
  --hm-orgchart-role-tag-border: rgba(110, 71, 160, 0.26);
}
.hm-orgchart-employee[data-card-asset="design-planning"] {
  --hm-orgchart-role-tag-color: #069a95;
  --hm-orgchart-role-tag-background: rgba(6, 154, 149, 0.1);
  --hm-orgchart-role-tag-border: rgba(6, 154, 149, 0.26);
}
.hm-orgchart-employee[data-card-asset="solution-sales"] {
  --hm-orgchart-role-tag-color: #518b35;
  --hm-orgchart-role-tag-background: rgba(81, 139, 53, 0.1);
  --hm-orgchart-role-tag-border: rgba(81, 139, 53, 0.26);
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar,
.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-avatar {
  border-radius: 3.5px;
  background: transparent;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-avatar { height: 44px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { height: 56px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { height: 62px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-job-title,
.hm-orgchart-employee[data-workdesk-presentation="true"] .hm-orgchart-job-title {
  display: inline-flex;
  align-items: center;
  min-height: 13px;
  padding: 0 3px;
  border: 1px solid var(--hm-orgchart-role-tag-border);
  border-radius: 4px;
  background: var(--hm-orgchart-role-tag-background);
  color: var(--hm-orgchart-role-tag-color);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-job-title {
  padding: 0 2px;
  font-size: 8.5px;
  font-weight: 500;
}
/* Status is retained for assistive reading; the specified two-line card
   composition has no third status row. Supplementary status cards are intact. */
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-status-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hm-orgchart-person-name-tooltip { position: fixed; z-index: 10; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid #224387; border-radius: 4px; background: #ffffff; color: #071D3A; font-family: var(--hm-orgchart-resolved-font-family); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: auto; }
.hm-orgchart-person-name-tooltip[hidden] { display: none; }