/* Yeshua is king */
/*
 * Organigramm — 1:1 übernommen aus der AGC Suite (static/css/base.css,
 * ADR-057 / ADR-104). Bewusst NICHT nachgebaut: Der Baum auf der Website soll
 * exakt so aussehen und sich exakt so verhalten wie im Produkt. Wer dort etwas
 * ändert, muss es hier nachziehen — sonst zeigt die Website etwas, das es nicht
 * gibt.
 *
 * Einzige Anpassung: Die Produkt-Tokens (--color-*) werden unten auf die
 * Farben dieser Website abgebildet, damit der Baum im Marketing-Dunkel sitzt.
 */

.stage-wrap-tree {
  --color-bg-primary: var(--bg);
  --color-bg-secondary: var(--bg-2);
  --color-bg-tertiary: var(--bg-3);
  --color-gold: var(--gold);
  --color-gold-bright: var(--gold-bright);
  --color-gold-dark: var(--gold-dark);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-2);
  --color-text-muted: var(--muted);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-danger: #b84a3e;
  --font-display: var(--serif);
  --font-body: var(--sans);
  --space-2: 8px;
  --space-3: 16px;
}

/* Avatar-Kreis mit Initialen — ebenfalls aus dem Produkt (ADR-103).
   Auf der Website bewusst OHNE Fotos: die Initialen-Variante ist der
   eingebaute Rückfall, und ein Marketing-Auftritt braucht keine Porträts
   echter Personen. */
.avatar {
  --avatar-size: 34px;
  width: var(--avatar-size); height: var(--avatar-size);
  border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-tertiary); border: 1px solid var(--color-border-strong);
  color: var(--color-gold); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; user-select: none; line-height: 1;
  font-size: calc(var(--avatar-size) * 0.4);
  vertical-align: middle; /* sits on the text baseline in inline calendar rows */
}
.avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__initials { display: block; }
.avatar--sm { --avatar-size: 24px; }
.avatar--lg { --avatar-size: 46px; }
.avatar--xl { --avatar-size: 96px; }
.avatar--ring { box-shadow: 0 0 0 2px var(--color-gold); }


/* People-Layer — top-down line org-chart (ADR-104 §11/§15). Rendered when no
   one overlaps two teams; connector hairlines use the gold@35% border token. */
.org-chart { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.org-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: inherit; padding: 12px 14px; background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: 12px; transition: border-color 0.12s ease, transform 0.12s ease; }
.org-node:hover { border-color: var(--color-gold-dark); transform: translateY(-2px); }
.org-node--lead { padding: 14px 20px; border-color: var(--color-border-strong); }
.org-node__name { font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.org-node--lead .org-node__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.org-node__title { font-size: 0.75rem; color: var(--color-text-muted); }

@media (min-width: 720px) {
  /* Head → vertical stem → horizontal bus → drop line per member. Single-row
     assumption; below the breakpoint members wrap without connectors (the block
     grouping carries the hierarchy). Zero column-gap + branch side-padding keeps
     the bus continuous across siblings. */
}

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

/* Multi-level reporting tree (ADR-057) — recursive pure-CSS org chart. Nested
   <ul>/<li>; ::before/::after draw the connectors, ul::before the parent stem.
   Arbitrary depth; scrolls horizontally on narrow screens. */
.stage-wrap-tree { overflow-x: auto; padding: 8px 4px 6px; position: relative; }
/* Dotted-line (matrix) connectors: dashed SVG overlay BEHIND the node cards
   (Operator 2026-08-10: Linien kreuzen Karten → hinter der Karte verlaufen).
   On hover of a line the overlay RISES above the cards, all other lines and
   every uninvolved card dim — nur die Linie + ihre zwei Karten bleiben an
   (Mechanik analog zum Team-Hover `.orgtree.teaming`). */
/* max-width:none schlägt den globalen `svg { max-width:100% }`-Reset — der
   quetschte das Overlay auf die sichtbare Breite und der Browser skalierte die
   GESAMTE Zeichnung (Root-Cause der bildschirmabhängig verschobenen Linien). */
.org-dotted-overlay { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; max-width: none; }
/* Hit-Ebene ÜBER den Karten: unsichtbare Hover-Fänger (auf sichtbare
   Liniensegmente geclippt) + die Highlight-Kopie der gehoverten Linie. */
.org-dotted-overlay--hit { z-index: 4; }
.stage-wrap-tree > .orgtree { position: relative; z-index: 1; }
.org-dotted-edge { fill: none; stroke: var(--color-gold); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0.7; }
.org-dotted-overlay.is-dimmed .org-dotted-edge { opacity: 0.12; }
.org-dotted-edge--hot { display: none; }
.org-dotted-edge--hot.is-hot { display: block; opacity: 1; stroke-width: 2; }
.org-dotted-arrow { fill: var(--color-gold); opacity: 0.55; }
/* Wide transparent hit target so the thin dashed line is easy to hover. */
.org-dotted-hit { stroke: transparent; stroke-width: 14; fill: none; pointer-events: stroke; cursor: help; }
.org-dotted-hit--full { pointer-events: none; }
.org-dotted-hit--full.is-live { pointer-events: stroke; }
/* Line-hover focus: dim everything except the line and its two people. */
.orgtree.dotting .org-node { opacity: 0.28; transition: opacity 0.16s ease; }
.orgtree.dotting .org-node--dot-hot { opacity: 1; box-shadow: 0 0 0 2px var(--color-gold); }
.orgtree.dotting li::before,
.orgtree.dotting li::after,
.orgtree.dotting ul::before { opacity: 0.25; }
@media (prefers-reduced-motion: reduce) { .orgtree.dotting .org-node { transition: none; } }
/* Beziehungstyp-Pill in der Linienmitte (Option A, Operator 2026-08-10):
   nur der übersetzte Reason, Rand in Linienfarbe — Formensprache der
   Team-Chips, liest sich als Teil der Linie statt als Popup. */
.org-dotted-pill {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -50%);
  background: var(--color-bg-primary); border: 1.5px solid var(--color-gold);
  color: var(--color-gold); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px;
}
.orgtree, .orgtree ul { list-style: none; margin: 0; padding: 0; }
.orgtree { display: flex; justify-content: center; min-width: min-content; }
.orgtree ul { display: flex; justify-content: center; padding-top: 26px; position: relative; }
.orgtree li { position: relative; padding: 26px 10px 0; text-align: center; }
.orgtree li::before, .orgtree li::after {
  content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 26px;
  border-top: 1px solid var(--color-border-strong);
}
.orgtree li::after { right: auto; left: 50%; border-left: 1px solid var(--color-border-strong); }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border: 0 none; }
.orgtree li:last-child::before { border-right: 1px solid var(--color-border-strong); }
/* Einzelkind (Operator-Befund 2026-08-11): ohne Geschwister entfällt die
   T-Leiste — aber der 26px-padding-Bereich des Kindes blieb LEER, sodass die
   Linie Eltern→Einzelkind mittig unterbrochen war (ul::before deckt nur die
   oberen 26px). Das ::after wird als reines Vertikalsegment reaktiviert.
   MUSS NACH den first/last-child-border-Resets stehen — ein Einzelkind IST
   last-child, deren `border: 0 none` gewann sonst per Reihenfolge (v1.14.3-
   Fehlschlag, per Computed-Styles auf Prod diagnostiziert). */
.orgtree li:only-child::after {
  display: block;
  right: auto;
  left: 50%;
  width: 0;
  height: 26px;
  border-top: 0 none;
  border-left: 1px solid var(--color-border-strong);
}
/* Roots haben keinen Eltern-Stamm — dort keine Linie über der Karte. */
.orgtree > li:only-child::after { display: none; }
.orgtree ul::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 26px;
  border-left: 1px solid var(--color-border-strong);
}
.orgtree > li { padding-top: 0; }  /* roots have no parent → no top stem */
.orgtree .org-node { display: inline-flex; min-width: 132px; max-width: 180px; }
.org-node--tree { gap: 5px; }

/* Org-Chart edit mode (ADR-104 I4 — drag person→person = set manager) */
.org-node--dragging { opacity: 0.5; }
.org-node--dropok { border-color: var(--color-gold); box-shadow: 0 0 0 2px var(--color-gold); }
/* Abteilungen-Panel (unit CRUD controls) */

/* Team-tag hover-highlight (ADR-057 concept): dim the tree, glow team members. */
.orgtree.teaming .org-node { opacity: 0.28; transition: opacity 0.16s ease; }
/* Members keep the strong gold ring; the team LEAD glows brighter — a thicker
   bright-gold ring plus a soft halo — so the head of the team reads instantly
   against the (equally gold) members. Lead rule follows the member rule so its
   box-shadow wins at equal specificity when a node carries both classes. */
.orgtree.teaming .org-node--team-hot { opacity: 1; box-shadow: 0 0 0 2px var(--color-gold); }
.orgtree.teaming .org-node--team-lead-hot { opacity: 1; border-color: var(--color-gold-bright); box-shadow: 0 0 0 3px var(--color-gold-bright), 0 0 18px 3px var(--color-gold-bright); }
.org-tagchip[data-team] { cursor: help; }
@media (prefers-reduced-motion: reduce) { .orgtree.teaming .org-node { transition: none; } }
.org-node__unit { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.org-node__teams { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 2px; }
.org-tagchip { font-size: 0.6rem; letter-spacing: 0.03em; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 7px; }
.org-tagchip--lead { color: var(--color-gold); border-color: var(--color-gold-dark); }
.org-node__dotted { font-size: 0.62rem; color: var(--color-text-muted); font-style: italic; }
/* ADR-109 roster badge — an employee in the org without login/seat. Subtle
   (not a full colleague): muted uppercase pill, used in the directory + chart. */
.roster-badge { display: inline-block; margin-left: 6px; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }

/* Plan & Lizenzen — per-module licence request (ADR-109 I7.4) */