/* ---------------------------------------------------------------------------
   A real org chart: boxes top-down, joined by lines.

   The connectors are borders on ::before/::after rather than SVG. An SVG overlay
   has to be measured against the DOM and re-measured on every expand, collapse,
   resize and font load - and it is wrong for the instant in between. Borders are
   laid out BY the same pass that lays out the boxes, so they cannot disagree
   with what they are joining.

   The shape:

        ┌──────────┐
        │   root   │
        └────┬─────┘
        ┌────┴────┐
     ┌──┴──┐   ┌──┴──┐
     │child│   │child│
     └─────┘   └─────┘

   Each li draws a stub UP from its own box; the ul draws a stub DOWN from the
   parent; the first and last children trim the horizontal rule so it stops at
   the outermost boxes instead of hanging in the air.
--------------------------------------------------------------------------- */

.orgchart {
  /* A wide company does not fit a laptop. Scroll it rather than crushing the
     boxes to unreadable slivers. */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4px 24px;
  text-align: center;
}

.orgchart ul {
  display: flex;
  justify-content: center;
  padding-top: 22px;      /* room for the connectors */
  margin: 0;
  list-style: none;
  position: relative;
}

.orgchart li {
  list-style: none;
  position: relative;
  padding: 22px 10px 0;
  text-align: center;
}

/* The horizontal rule joining siblings, drawn as the top edge of each li. */
.orgchart li::before,
.orgchart li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 22px;
  border-top: 1px solid var(--org-line, #CBD5E1);
}
.orgchart li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid var(--org-line, #CBD5E1);
}

/* An only child needs no horizontal rule - just the stem. */
.orgchart li:only-child::before,
.orgchart li:only-child::after {
  display: none;
}
.orgchart li:only-child {
  padding-top: 0;
}

/* The ends of the row: trim the half-rule that would otherwise stick out. */
.orgchart li:first-child::before,
.orgchart li:last-child::after {
  border: 0 none;
}
.orgchart li:last-child::before {
  border-right: 1px solid var(--org-line, #CBD5E1);
  border-radius: 0 6px 0 0;
}
.orgchart li:first-child::after {
  border-radius: 6px 0 0 0;
}

/* The stem dropping from a parent into its children's rule. */
.orgchart ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 22px;
  border-left: 1px solid var(--org-line, #CBD5E1);
}

/* --- the box ------------------------------------------------------------- */

.orgchart .org-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(6, 95, 70, 0.06);
  text-align: left;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.orgchart .org-node:hover {
  box-shadow: 0 8px 20px rgba(6, 95, 70, 0.12);
  transform: translateY(-1px);
}

/* The signed-in person, so you can find yourself in a chart of hundreds. */
.orgchart .org-node.is-me {
  border-color: #6EE7B7;
  background: #ECFDF5;
}

.orgchart .org-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #ECFDF5;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #E5E7EB;
}

/* Initials, for the many people who have no photograph on file. */
.orgchart .org-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #065F46;
  background: #D1FAE5;
}

.orgchart .org-body { min-width: 0; }        /* so the ellipsis works */
.orgchart .org-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orgchart .org-meta {
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapse control, sitting on the bottom edge where the stem leaves the box. */
.orgchart .org-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 20px;
  border-radius: 50%;
  border: 1px solid #D1D5DB;
  background: #fff;
  color: #6B7280;
  font-size: 12px;
  cursor: pointer;
}
.orgchart .org-toggle:hover {
  border-color: #10B981;
  color: #059669;
}

.orgchart .org-holder { display: inline-block; position: relative; }

/* A count of everyone underneath - the question people actually ask a chart. */
.orgchart .org-count {
  font-size: 10px;
  font-weight: 700;
  color: #6B7280;
  background: #F3F4F6;
  border-radius: 999px;
  padding: 1px 7px;
}

@media (prefers-reduced-motion: reduce) {
  .orgchart .org-node { transition: none; }
  .orgchart .org-node:hover { transform: none; }
}