/*
 * org-chart.v7.css  (plugin v1.2.5 / ZIP v9)
 * Additive layer on top of v4 → v5 → v6.
 * Do NOT modify v1–v6 CSS files.
 *
 * Problems fixed here:
 *
 *   v6 used align-items:flex-start on org-card-row.
 *   The bridge (org-card-anchor::before) hit the spine at card-center height,
 *   but the spine started at the column TOP — producing a "dead zone" of spine
 *   above the bridge that made side branches look like an independent structure.
 *
 *   Also: with flex-start, the org-children-wrap began at the row bottom
 *   (= tallest side column), leaving a visible gap between the card bottom
 *   and the start of the downward connector line.
 *
 * Fix: align-items:center on org-card-row + org-card-anchor as the single
 *   full-height connector anchor.
 *
 *   1. align-items:center     — card and side columns share the same
 *                               vertical midpoint.  top:50% on the bridge
 *                               now lands at the column centre = an item
 *                               centre (odd counts) or the gap between items
 *                               (even counts).  The spine is balanced above
 *                               and below the bridge — no dead zone. ✓
 *
 *   2. org-card-anchor        — given align-self:stretch so it fills the
 *                               full row height.  With justify-content:center
 *                               the card is vertically centred inside.
 *
 *   3. org-card-anchor::before — single full-height line (top:0 → bottom:0).
 *                               The card (z-index:1) hides it in the card
 *                               area.  The segments above and below the card
 *                               fill both connector gaps without any extra
 *                               HTML elements. ✓
 *
 *   4. Bridges moved from card-anchor pseudo-elements to side-column
 *      pseudo-elements.  top:50% of the column still hits the row centre
 *      (proven: col-top + col-height/2 = row-height/2 when centred). ✓
 *
 * Cascade strategy
 *   Rules that need to override v6 use the same selector so that the
 *   later load order (v7 > v6) decides the winner — no !important needed.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * 1.  Row alignment fix
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * Override v6's align-items:flex-start.
 * Same specificity (0,1,0) → v7 wins by cascade. ✓
 *
 * Effect: card and side columns are centred on the same horizontal axis.
 * Bridge at top:50% of the side column now hits the row centre = card centre.
 */
.org-card-row {
	align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 2.  Card anchor as full-height connector anchor
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * align-self:stretch  — overrides align-items:center for this one flex item,
 *                       expanding org-card-anchor to the full row height.
 * justify-content:center — the single child (the card) sits at the vertical
 *                          centre of the now-taller anchor.
 *
 * Specificity: same selector as v6 (0,1,0) → v7 cascade wins. ✓
 */
.org-card-anchor {
	align-self: stretch;
	justify-content: center;
}

/*
 * Card must sit above the ::before connector line.
 * Uses a simple stacking context: line at z-index:0, card at z-index:1.
 *
 * We target the card only inside org-card-anchor to avoid side-effects on
 * other cards elsewhere in the tree.
 *
 * Specificity: (0,2,0) — enough to beat v4's .org-chart__card (0,1,0). ✓
 */
.org-card-anchor .org-chart__card {
	position: relative;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 3.  Full-height vertical connector line on ::before
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * STEP A — Suppress v6's left-bridge rule on card-anchor::before.
 * Same selector (0,3,1) → v7 wins by cascade. ✓
 *
 * This base rule hides the ::before pseudo-element for all has-side-left nodes.
 * The rule below re-enables it (with higher specificity) only when the node
 * also has main children below.
 */
.org-card-row.has-side-left .org-card-anchor::before {
	content: none;
}

/*
 * STEP B — Draw the full-height vertical connector.
 * Applies when the node has ANY side column AND has main children below it.
 *
 * Selector: adds .has-main-children to the anchor → specificity (0,4,1).
 * This beats STEP A's (0,3,1) for anchors that have main children. ✓
 *
 * top:0 → bottom:0 spans the full anchor height = full row height.
 * The card (z-index:1 above) hides the line in the card area.
 * The portions above and below the card fill the connector gaps. ✓
 *
 * Note: .has-main-children is emitted by PHP on org-card-anchor when $main
 * is non-empty, so nodes with side branches only do not get the line.
 */
.org-card-row.has-side-left  .org-card-anchor.has-main-children::before,
.org-card-row.has-side-right .org-card-anchor.has-main-children::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: var(--org-line-weight, 1.5px);
	height: auto;
	background: var(--org-line-color, rgba(100,116,139,0.55));
	z-index: 0;
	pointer-events: none;
}

/*
 * STEP C — Nullify v6's right-bridge on ::after.
 * Bridge is now drawn by the side column (see section 4).
 * Same selector (0,3,1) → v7 wins by cascade. ✓
 */
.org-card-row.has-side-right .org-card-anchor::after {
	content: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 4.  Bridges moved to side columns
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * LEFT BRIDGE  (was on org-card-anchor::before in v6)
 *
 * Position is on .org-side-column--left::after, which is unused in v5/v6. ✓
 *
 * left:100%   → left edge of the bridge sits at the right edge of the left
 *               column (= the spine border). ✓
 * width:32px  → spans the 32px flex gap, right edge reaching
 *               org-card-anchor's left edge. ✓
 * top:50%     → 50% of column height.  With align-items:center on the row,
 *               col-top = (row - col)/2, so col-top + col/2 = row/2 = card
 *               centre.  Bridge always lands at card centre. ✓
 */
.org-card-row.has-side-left .org-side-column--left::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	width: 32px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
	pointer-events: none;
	z-index: 1;
}

/*
 * RIGHT BRIDGE  (was on org-card-anchor::after in v6)
 *
 * Position is on .org-side-column--right::before, unused in v5/v6. ✓
 *
 * right:100%  → right edge of the bridge sits at the left edge of the right
 *               column (= the spine border). ✓
 * width:32px  → spans the 32px flex gap leftward to org-card-anchor
 *               right edge. ✓
 */
.org-card-row.has-side-right .org-side-column--right::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 100%;
	width: 32px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
	pointer-events: none;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 5.  Compact side-branch stub fix
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * v6 compact layout uses:
 *   .org-side-column--compact .org-side-item:nth-child(even) {
 *     margin-inline-start: 18px;   ← shifts even items 18px inward
 *   }
 *
 * This 18px inward shift increases the distance between the item's visible
 * edge and the spine from 12px (padding-right of the column) to 30px.
 * v6's stub (right:-12px; width:12px) therefore ends 18px short of the
 * spine and does not connect.
 *
 * Fix: extend the stub to 30px for even compact items.
 *
 * Specificity: (0,4,1) beats v6's stub rule (0,3,1). ✓
 *
 * Same logic applies to the right column: mirror geometry. ✓
 */
.org-card-row .org-side-column--left.org-side-column--compact
.org-side-item:nth-child(even)::after {
	right: -30px;
	width: 30px;
}

.org-card-row .org-side-column--right.org-side-column--compact
.org-side-item:nth-child(even)::after {
	left: -30px;
	width: 30px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 6.  Extended branch — more dramatic visual drop
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * v5 defined:  padding-top:24px  (one connector unit) → subtle, barely
 * noticeable at chart scale.
 *
 * v7 increases to 48px (two connector units).  This creates a clearly
 * visible extra drop compared to normal siblings — unmistakably intentional.
 * 72px was considered but rejected as too aggressive; it risks overlapping
 * grandchildren in dense charts.
 *
 * Same selectors as v5 (0,1,0 / 0,1,1) → v7 wins by cascade. ✓
 *
 * Note: extended branch only applies to main-flow children rendered via
 * render_children_area().  Side items use .org-side-item, not .org-branch,
 * so they are never extended.  The admin UI displays a note to this effect.
 */
.org-branch--extended {
	padding-top: 48px;
}

.org-branch--extended::before {
	height: 72px;
	top: -72px;
}