/*
 * Org chart (DSC-130/131) — verbindingslijnen van de hiërarchie + het
 * pan-/zoomvlak. De boom is geneste markup: li > node (+ optioneel een
 * .motion-collapse-wrapper) > ul met kind-li's; elke tak centreert zichzelf
 * onder zijn manager. Lijnen in de neutrale lijnkleur, zachte bochten bij
 * de buitenste aftakkingen.
 */

.org-chart-viewport {
  cursor: grab;
}
.org-chart-viewport.is-panning {
  cursor: grabbing;
}

/* Feedback jul 2026: uitklappen gaat via een klik op de kaart zelf (de
 * lazy-controller verhuist de focus en klapt boven/onder automatisch uit),
 * dus de ±-knoppen tonen alleen nog de inklap-staat (−) op een uitgeklapte
 * laag. Tijdens een fetch (disabled → spinner) en in de foutstaat (retry)
 * blijft de knop wél zichtbaar. Bewust gescopet op de lazy-controller:
 * statische demo's (design-system) blijven ongemoeid. */
[data-controller~="org-chart-lazy"] [data-test-id="org-chart-node-boven"]:not([aria-expanded="true"]):not(:disabled):not([data-org-chart-lazy-fout]),
[data-controller~="org-chart-lazy"] [data-test-id="org-chart-node-onder"]:not([aria-expanded="true"]):not(:disabled):not([data-org-chart-lazy-fout]) {
  display: none;
}

.org-tree {
  display: flex;
  justify-content: center;
  padding: 8px;
}

/* Onderrand: de +-knop steekt 14px onder de kaart uit en de kaartschaduw
 * (shadow-card/-hover) nog eens ~16px verder; zonder bodemruimte knipt de
 * overflow-clip van .motion-collapse (DSC-189) knoppen en schaduwen hard af. */
.org-tree ul {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 28px 0 32px;
  list-style: none;
}
.org-tree > ul {
  padding-top: 0;
}

/* Spur: korte verticale lijn van de manager naar de rail van de kinderen. */
.org-tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 28px;
  margin-left: -1px;
  border-left: 2px solid var(--color-line);
}

.org-tree li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 28px 14px 0;
}
.org-tree > ul > li {
  padding-top: 0;
}

/* Rail + aftakking per kind: ::before = linkerhelft van de rail,
 * ::after = rechterhelft + de verticale lijn naar de node. */
.org-tree li::before,
.org-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 28px;
  border-top: 2px solid var(--color-line);
}
.org-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--color-line);
}
.org-tree > ul > li::before,
.org-tree > ul > li::after {
  content: none;
}

/* Buitenste kinderen: alleen een halve rail, met een zachte bocht. */
.org-tree li:first-child::before {
  border-top: 0;
}
.org-tree li:first-child::after {
  border-top-left-radius: 10px;
}
.org-tree li:last-child::after {
  border-top: 0;
  border-left: 0;
}
.org-tree li:last-child::before {
  border-right: 2px solid var(--color-line);
  border-top-right-radius: 10px;
}

/* Enig kind: geen rail, alleen een rechte lijn omlaag. */
.org-tree li:only-child::before {
  border: 0;
}
.org-tree li:only-child::after {
  border-top: 0;
  border-left: 2px solid var(--color-line);
  border-radius: 0;
}

/* In-/uitklappen van een tak (DSC-189): de collapse-overgang vouwt in de
 * boom ook horizontaal, zodat de omliggende takken netjes aansluiten. */
.org-tree .motion-collapse {
  grid-template-columns: 0fr;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out-soft),
    grid-template-columns var(--duration-base) var(--ease-out-soft),
    visibility 0s var(--duration-base);
}
.org-tree .motion-collapse[data-expanded="true"] {
  grid-template-columns: 1fr;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out-soft),
    grid-template-columns var(--duration-base) var(--ease-out-soft);
}
.org-tree .motion-collapse > * {
  min-width: 0;
}