/* Org Chart — top-down tree, color-coded by department. Linked from Components/App.razor. */
/* Bounded scroll canvas so the zoom/fit toolbar stays put and big charts scroll inside the box. */
.org-wrap { overflow: auto; max-height: calc(100vh - 250px); min-height: 320px; padding: 8px 4px 24px;
            border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfe; }
/* Zoom toolbar */
.org-toolbar { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.org-toolbar .org-tlabel { font-size: 12px; font-weight: 600; color: #64748b; margin-right: 2px; text-transform: uppercase; letter-spacing: .04em; }
.org-zbtn { border: 1px solid #dee2e6; background: #fff; color: #212529; border-radius: 6px; padding: 4px 10px;
            font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.org-zbtn:hover:not(:disabled) { background: #f1f5f9; }
.org-zbtn:disabled { opacity: .45; cursor: default; }
.org-zlevel { min-width: 46px; text-align: center; font-size: 13px; font-weight: 700; color: #052767; font-variant-numeric: tabular-nums; }
.org-zexport { margin-left: 8px; min-width: 96px; color: #052767; border-color: #052767; }
.org-zexport:hover:not(:disabled) { background: #052767; color: #fff; }
/* Holds the transform-scaled tree; sized inline to the scaled footprint so scrollbars track it.
   margin:auto centers a small chart, but collapses to 0 (left-anchored) once it overflows. */
.org-zoomer { margin: 0 auto; }
/* width:max-content lets the top tree shrink-wrap to its content; transform-origin anchors the scale. */
.org-tree { width: max-content; transform-origin: top left; }
.org-tree, .org-tree ul { position: relative; display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.org-tree ul { padding-top: 22px; }
/* text-align:center horizontally centers each inline-block node over its subtree, so the
   connector lines (which are centered on the li/ul) line up with the node. Without it, a node
   with a wider subtree sits at the left while its drop-line stays centered → misaligned. */
.org-tree li { list-style: none; position: relative; padding: 22px 8px 0; text-align: center; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #cbd5e1; width: 50%; height: 22px; }
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid #cbd5e1; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 2px solid #cbd5e1; }
/* Only-child: drop the horizontal sibling bar but keep a single vertical line up to the parent.
   Placed after the first/last-child rules so it wins for nodes that are both. */
.org-tree li:only-child { padding-top: 22px; }
.org-tree li:only-child::before { display: none; }
.org-tree li:only-child::after { left: 50%; right: auto; top: 0; width: 0; height: 22px; border-top: 0 none; border-left: 2px solid #cbd5e1; }
.org-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #cbd5e1; width: 0; height: 22px; }

.org-node { display: inline-block; min-width: 150px; border-radius: 10px; padding: 8px 12px; background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--org-c, #94a3b8); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); text-align: left; }
.org-node .org-nm { font-weight: 700; font-size: 13px; color: #0f172a; }
.org-node .org-po { font-size: 11px; color: var(--org-c, #475569); font-weight: 600; }
.org-node .org-dp { font-size: 10px; color: #64748b; margin-top: 2px; }
.org-node .org-pill { font-size: 9px; font-weight: 700; color: #fff; background: var(--org-c, #475569); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }

.org-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 8px 0 16px; }
.org-legend span { display: inline-flex; align-items: center; gap: 5px; }
.org-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }