/* ─── Club organogram ─────────────────────────────────────── */
.organogram-page {
  --node-bg: #dde9f0;
  --node-border: #8aafca;
  --node-text: #1a2e3a;
  --bark: #5c3d1e;
  --bark-light: #8b6340;
  --leaf-color: #4a7c59;
  --green-glow: #3dba6a;
  --green-full: #2a9d5c;
  --red-ban: #c0392b;
  --purple-preut: #8b5cf6;
  --purple-preut-soft: rgba(139,92,246,.18);
  --hl-yellow: #f3c542;
  --hl-yellow-soft: rgba(243,197,66,.55);
  --hl-blue: #3a8dff;
  --hl-blue-soft: rgba(58,141,255,.55);
  --org-shadow: rgba(92,61,30,.13);
  --year-border: #d4c5a9;
}

#tree-container { position: relative; width: 100%; overflow-x: auto; padding: 10px 30px 60px; }
#tree-inner { position: relative; min-width: 900px; }
.year-row { position: relative; display: flex; align-items: flex-start; margin-bottom: 0; }
.year-label { width: 80px; min-width: 80px; padding-top: 22px; padding-right: 8px; color: var(--bark); font-size: .95rem; font-style: italic; font-weight: 600; opacity: .75; text-align: right; user-select: none; }
.year-lane { display: flex; flex: 1; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 14px 18px; min-height: 90px; padding: 18px; border-left: 2px dashed var(--year-border); }

.node { position: relative; z-index: 2; min-width: 90px; padding: 7px 16px; border: 2px solid var(--node-border); border-radius: 24px; background: var(--node-bg); box-shadow: 0 2px 8px var(--org-shadow); color: var(--node-text); cursor: pointer; font-size: .6rem; font-weight: 600; text-align: center; transition: box-shadow .22s, transform .14s, border-color .14s, opacity .22s; user-select: none; white-space: nowrap; }
.node:hover { box-shadow: 0 4px 18px rgba(92,61,30,.18); transform: translateY(-2px) scale(1.04); }
.node.not-passed { border-width: 3px; border-color: var(--green-glow); box-shadow: 0 0 0 2px rgba(61,186,106,.18), 0 2px 8px var(--org-shadow); }
.node.not-passed-old { border-color: var(--green-full); background: linear-gradient(135deg,#3dba6a 0%,#2a9d5c 100%); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.18); }
.node.banned { border: 2.5px dashed var(--red-ban); background: #fdf0ee; color: var(--red-ban); }
.node.preut { border-width: 3px; border-color: var(--purple-preut); box-shadow: 0 0 0 2px var(--purple-preut-soft), 0 2px 8px var(--org-shadow); }

.tree-has-selection .node:not(.hl-self):not(.hl-ancestor):not(.hl-descendant):not(.hl-child) { opacity: .28; }
.node.hl-self { z-index: 5; box-shadow: 0 0 0 4px var(--hl-yellow), 0 0 22px var(--hl-yellow-soft), 0 2px 8px var(--org-shadow); transform: translateY(-2px) scale(1.06); }
.node.hl-ancestor, .node.hl-descendant { z-index: 4; box-shadow: 0 0 0 3px var(--hl-yellow), 0 0 18px var(--hl-yellow-soft), 0 2px 8px var(--org-shadow); }
.node.hl-child { z-index: 4; box-shadow: 0 0 0 3px var(--hl-blue), 0 0 20px var(--hl-blue-soft), 0 2px 8px var(--org-shadow); }

#svg-layer { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#svg-layer path.connection { transition: opacity .22s, stroke-width .22s; }
.tree-has-selection #svg-layer path.connection:not(.hl-line) { opacity: .12; }
#svg-layer path.connection.hl-line { stroke-width: 2.6; opacity: 1 !important; }
.tree-has-selection #svg-layer .leaf:not(.hl-leaf) { opacity: .12; }

.org-legend { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 18px; padding: .7rem 0 1.25rem; color: var(--bark); font-size: .82rem; font-weight: 600; }
.legend-dot { display: inline-block; width: 22px; height: 16px; margin-right: .3rem; border: 2px solid var(--node-border); border-radius: 8px; background: var(--node-bg); vertical-align: middle; flex-shrink: 0; }
.legend-dot.not-passed { border-width: 3px; border-color: var(--green-glow); }
.legend-dot.not-passed-old { border-color: var(--green-full); background: var(--green-full); }
.legend-dot.banned { border: 2.5px dashed var(--red-ban); }
.legend-dot.preut { border-width: 3px; border-color: var(--purple-preut); }
.hint-text { margin-left: auto; color: var(--bark-light); font-size: .78rem; font-style: italic; font-weight: 400; }

@media (max-width: 600px) {
  .year-label { width: 46px; min-width: 46px; font-size: .72rem; }
  .node { padding: 5px 12px; font-size: .72rem; }
  #tree-container { padding: 6px 8px 40px; }
}