/* organizational chart (public section and panel). Same card for every level: the place in the tree
   says the level, not the size or decoration of the card */
.org-chart {
    --org-primary: var(--fet-primary, #087f23);
    --org-accent: var(--fet-tertiary, #f5c400);
    --org-text: var(--fet-text, #1f2937);
    --org-muted: var(--fet-muted, #5b6472);
    --org-border: var(--fet-border, #d9dee5);
    --org-bg: var(--fet-bg, #fff);
    --org-soft: var(--fet-primary-light, #e8f3ea);
    --org-line: #b6bec9;
    --org-zoom: 1;
    color: var(--org-text);
}
.org-chart .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.org-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.org-search { position: relative; flex: 1 1 16rem; margin: 0; }
.org-search .bi { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--org-muted); }
.org-search input { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.2rem; border: 1px solid var(--org-border); border-radius: 0.6rem; background: var(--org-bg); color: var(--org-text); }
.org-zoom { display: flex; gap: 0.3rem; }
.org-zoom button { min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.7rem; border: 1px solid var(--org-border); border-radius: 0.6rem; background: var(--org-bg); color: var(--org-text); font-weight: 600; }
.org-zoom button:hover { background: var(--org-soft); }
.org-status { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--org-muted); min-height: 1.2em; }

.org-viewport { overflow: auto; max-height: 75vh; border: 1px solid var(--org-border); border-radius: 0.8rem; background: color-mix(in srgb, var(--org-soft) 35%, var(--org-bg)); cursor: grab; padding: 1rem; }
.org-viewport.is-panning { cursor: grabbing; user-select: none; }
.org-canvas { zoom: var(--org-zoom); width: max-content; min-width: 100%; }

/* tree with the classic connectors: a line down from each parent and a bar across the children */
.org-tree, .org-children { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.org-children { padding-top: 1.4rem; position: relative; }
.org-children::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.4rem; border-left: 2px solid var(--org-line); }
.org-node { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.4rem 0.5rem 0; }
.org-tree > .org-node { padding-top: 0; }
.org-children > .org-node::before, .org-children > .org-node::after { content: ""; position: absolute; top: 0; width: 50%; height: 1.4rem; border-top: 2px solid var(--org-line); }
.org-children > .org-node::before { right: 50%; }
.org-children > .org-node::after { left: 50%; border-left: 2px solid var(--org-line); }
.org-children > .org-node:first-child::before, .org-children > .org-node:last-child::after { border-top: 0; }
.org-children > .org-node:only-child::before { display: none; }
.org-children > .org-node:only-child::after { border-top: 0; }
.org-children > .org-node:first-child::after { border-top-left-radius: 0.5rem; }
.org-children > .org-node:last-child::before { border-right: 2px solid var(--org-line); border-top-right-radius: 0.5rem; }

.org-card { width: 15.5rem; text-align: left; background: var(--org-bg); border: 1px solid var(--org-border); border-top: 4px solid var(--org-primary); border-radius: 0.7rem; padding: 0.75rem 0.85rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.org-card-head { margin-bottom: 0.4rem; }
.org-kind { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--org-muted); }
.org-name { margin: 0.1rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--org-text); }
.org-purpose { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.35; color: var(--org-muted); }
.org-positions { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.org-position { border-top: 1px solid var(--org-border); padding-top: 0.4rem; border-radius: 0.4rem; }
.org-position-name { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--org-primary); }
.org-holder { display: flex; align-items: center; gap: 0.45rem; margin: 0.25rem 0 0; font-size: 0.85rem; line-height: 1.25; }
.org-holder small { color: var(--org-muted); }
.org-holder--vacant { color: var(--org-muted); font-style: italic; }
.org-photo { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; object-position: top; }
.org-photo--empty { display: grid; place-items: center; background: var(--org-soft); color: var(--org-primary); font-size: 0.95rem; }
.org-more { margin-top: 0.55rem; padding: 0; border: 0; background: none; color: var(--org-primary); font-size: 0.82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.org-hint { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--org-muted); }

.org-node.is-match > .org-card { outline: 3px solid var(--org-accent); outline-offset: 2px; }
.org-chart.is-searching .org-node:not(.is-match) > .org-card { opacity: 0.45; }

.org-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--org-border); border-radius: 0.8rem; color: var(--org-muted); }
.org-empty .bi { font-size: 2.2rem; color: var(--org-primary); }

.org-dialog { width: min(36rem, 92vw); border: 0; border-radius: 0.9rem; padding: 1.25rem 1.4rem; color: var(--org-text); background: var(--org-bg); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
.org-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.org-dialog h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.org-dialog h3 { font-size: 1rem; margin: 1rem 0 0.35rem; color: var(--org-primary); }
.org-dialog ul { padding-left: 1.2rem; margin: 0; }
.org-dialog .org-note { margin-top: 1rem; font-size: 0.82rem; color: var(--org-muted); }
.org-dialog-close { margin-top: 1rem; padding: 0.45rem 1rem; border: 1px solid var(--org-border); border-radius: 0.6rem; background: var(--org-bg); font-weight: 600; color: var(--org-text); }

/* edit mode (panel) */
.org-editing .org-card[draggable="true"] { cursor: move; }
.org-editing .org-position { outline: 1px dashed transparent; }
.org-editing .is-drop-target { outline: 2px dashed var(--org-primary) !important; background: var(--org-soft); }
.org-remove { margin-left: auto; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: none; color: var(--org-muted); }
.org-remove:hover { background: var(--org-soft); color: var(--org-text); }
.org-root-drop { margin: 0 0 0.75rem; padding: 0.6rem; border: 2px dashed var(--org-border); border-radius: 0.6rem; text-align: center; font-size: 0.85rem; color: var(--org-muted); }

@media (max-width: 575.98px) {
    .org-viewport { max-height: 70vh; padding: 0.6rem; }
    .org-card { width: 13.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .org-viewport { scroll-behavior: smooth; }
}