/*!
 * YM Org Chart – styles
 * Author: Mohammad Yousefi – https://mohammad-yousefi.ir
 */
.ocw {
	--oc-bg: #fff; --oc-fg: #1b2559; --oc-bd: #7fa0d8; --oc-line: #a9bde0;
	--oc-lw: 2px; --oc-bw: 2px; --oc-fs: 14px; --oc-w: 190px; --oc-r: 8px; --oc-np: 10px;
	--oc-gx: 10px; --oc-gy: 28px; --oc-av: 30px; --oc-wrap: 24px;
	--oc-vg: 12px; --oc-tick: 14px; --oc-vp: 28px; --oc-sg: 28px;
	position: relative; display: block; width: 100%; max-width: 100%;
	padding: var(--oc-wrap); background: var(--oc-canvas, #fff);
	color: var(--oc-fg); font-size: var(--oc-fs); line-height: 1.6;
	font-family: var(--oc-font, inherit); border-radius: 12px;
}
.ocw, .ocw *, .ocw *::before, .ocw *::after { box-sizing: border-box; }
.ocw[dir="rtl"] { direction: rtl; text-align: right; }
.ocw[dir="ltr"] { direction: ltr; text-align: left; }
.ocw.has-frame { border: 2px solid var(--oc-frame, #1e2a78); }

/* ---------- header ---------- */
.ocw .oc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 28px; flex-wrap: wrap; }
.ocw .oc-title { margin: 0; padding: 0; font-size: var(--oc-ts, 28px); line-height: 1.5; color: var(--oc-tc, #1e2a78); font-weight: 800; }
.ocw .oc-sub { margin: 4px 0 0; padding: 0; font-size: var(--oc-ss, 20px); line-height: 1.5; color: var(--oc-tc, #1e2a78); font-weight: 700; }
.ocw .oc-logo { display: block; height: var(--oc-lh, 60px); width: auto; max-width: 100%; object-fit: contain; border: 0; box-shadow: none; }

/* ---------- stage ---------- */
.ocw .oc-stage { width: 100%; overflow-x: auto; overflow-y: hidden; }
.ocw .oc-inner { display: flex; justify-content: center; width: max-content; min-width: 100%; padding: 8px 8px 16px; }
.ocw ul, .ocw li { list-style: none; margin: 0; padding: 0; background: none; border: 0; }
.ocw li::marker { content: none; }
.ocw li { display: block; }
.ocw ul.oc-root { display: block; }
.ocw:not(.oc-mobile) ul.oc-root > li { display: flex; flex-direction: column; align-items: center; }

/* ---------- node ---------- */
.ocw .oc-row { display: flex; justify-content: center; max-width: 100%; }
.ocw .oc-box { position: relative; display: flex; max-width: 100%; }
.ocw .oc-node {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
	width: var(--n-w, var(--oc-w)); max-width: 100%; min-height: 46px;
	padding: var(--oc-np) calc(var(--oc-np) + 4px);
	background: var(--n-bg, var(--oc-bg)); color: var(--n-fg, var(--oc-fg));
	border: var(--oc-bw) solid var(--n-bd, var(--oc-bd)); border-radius: var(--oc-r);
	font-size: var(--n-fs, var(--oc-fs)); text-align: center; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ocw a.oc-node, .ocw a.oc-node:visited, .ocw a.oc-node:hover, .ocw a.oc-node:focus { color: var(--n-fg, var(--oc-fg)); text-decoration: none; cursor: pointer; }
.ocw.has-shadow .oc-node { box-shadow: 0 2px 6px rgba(20, 35, 90, .12); }
.ocw.has-hover a.oc-node:hover, .ocw.has-hover.is-edit .oc-node:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20, 35, 90, .2); }
.ocw a.oc-node:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
.ocw .oc-node.is-dashed { border-style: dashed; }
.ocw.is-edit .oc-node { cursor: pointer; }
.ocw .oc-node.is-selected { outline: 3px solid #2271b1; outline-offset: 2px; }
.ocw .oc-av { flex: none; display: block; width: var(--oc-av); height: var(--oc-av); max-width: none; object-fit: cover; border: 0; border-radius: 50%; background: #e9eefb; box-shadow: none; }
.ocw.av-round .oc-av { border-radius: 6px; }
.ocw.av-square .oc-av { border-radius: 0; }
.ocw .oc-txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ocw .oc-t { font-weight: 700; line-height: 1.55; }
.ocw .oc-s { font-size: .85em; opacity: .8; line-height: 1.5; }

/* ---------- toggle ---------- */
.ocw button.oc-toggle {
	position: absolute; z-index: 2; left: 50%; bottom: calc(var(--oc-gy) / -2 - 9px); margin: 0 0 0 -9px;
	width: 18px; height: 18px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center;
	border: var(--oc-lw) solid var(--oc-line); border-radius: 50%; background: #fff; color: var(--oc-fg);
	font: 700 13px/1 Arial, sans-serif; cursor: pointer; box-shadow: none; text-transform: none;
}
.ocw button.oc-toggle::before { content: "\2212"; }
.ocw li.is-collapsed > .oc-row > .oc-box > button.oc-toggle::before { content: "+"; }
.ocw li.is-collapsed > ul.oc-children { display: none; }
.ocw li.kv > .oc-row > .oc-box > button.oc-toggle { left: auto; inset-inline-start: var(--oc-tick); margin: 0; margin-inline-start: -9px; bottom: -9px; }
.ocw button.oc-toggle:focus-visible { outline: 3px solid #f5a623; outline-offset: 1px; }

/* ---------- side nodes ---------- */
.ocw .oc-row.has-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; direction: ltr; }
.ocw[dir="rtl"] .oc-row.has-sides > * { direction: rtl; }
.ocw[dir="ltr"] .oc-row.has-sides > * { direction: ltr; }
.ocw .oc-side { display: flex; flex-direction: column; gap: 8px; }
.ocw .oc-side.is-l { align-items: flex-end; justify-self: end; }
.ocw .oc-side.is-r { align-items: flex-start; justify-self: start; }
.ocw .oc-side.is-l .oc-node { margin-right: var(--oc-sg); }
.ocw .oc-side.is-r .oc-node { margin-left: var(--oc-sg); }
.ocw .oc-side .oc-node::after { content: ""; position: absolute; top: 50%; width: var(--oc-sg); border-top: var(--oc-lw) solid var(--oc-line); }
.ocw .oc-side.is-l .oc-node::after { left: 100%; }
.ocw .oc-side.is-r .oc-node::after { right: 100%; }

/* ---------- horizontal children ---------- */
.ocw ul.oc-h { display: flex; justify-content: center; align-items: flex-start; position: relative; margin-top: var(--oc-gy); }
.ocw ul.oc-h::before { content: ""; position: absolute; left: 50%; top: calc(var(--oc-gy) * -1); height: var(--oc-gy); margin-left: calc(var(--oc-lw) / -2); border-left: var(--oc-lw) solid var(--oc-line); }
.ocw ul.oc-h > li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--oc-gy) var(--oc-gx) 0; }
.ocw ul.oc-h > li::before, .ocw ul.oc-h > li::after { content: ""; position: absolute; top: 0; width: 50%; border-top: var(--oc-lw) solid var(--oc-line); }
.ocw ul.oc-h > li::before { inset-inline-start: 0; }
.ocw ul.oc-h > li::after { inset-inline-end: 0; }
.ocw ul.oc-h > li:first-child::before, .ocw ul.oc-h > li:last-child::after { display: none; }
.ocw ul.oc-h > li > .oc-row > .oc-box::before { content: ""; position: absolute; left: 50%; top: calc(var(--oc-gy) * -1); height: var(--oc-gy); margin-left: calc(var(--oc-lw) / -2); border-left: var(--oc-lw) solid var(--oc-line); }

/* ---------- vertical children (also used for every list on mobile) ---------- */
.ocw ul.oc-v { display: block; position: relative; margin: 0; padding-inline-start: var(--oc-vp); }
.ocw:not(.oc-mobile) li.is-center > ul.oc-v { --oc-vp: 56px; align-self: stretch; }
.ocw ul.oc-v > li { display: block; position: relative; margin-top: var(--oc-vg); }
.ocw ul.oc-v > li::before { content: ""; position: absolute; top: calc(var(--oc-vg) * -1); bottom: 0; inset-inline-start: calc(var(--oc-tick) * -1); border-inline-start: var(--oc-lw) solid var(--oc-line); }
.ocw ul.oc-v > li:last-child::before { display: none; }
.ocw ul.oc-v > li > .oc-row { justify-content: flex-start; }
.ocw ul.oc-v > li > .oc-row > .oc-box::before { content: ""; position: absolute; top: 50%; width: var(--oc-tick); inset-inline-start: calc(var(--oc-tick) * -1); border-top: var(--oc-lw) solid var(--oc-line); }
.ocw ul.oc-v > li:last-child > .oc-row > .oc-box::after { content: ""; position: absolute; top: calc(var(--oc-vg) * -1); height: calc(50% + var(--oc-vg)); inset-inline-start: calc(var(--oc-tick) * -1); border-inline-start: var(--oc-lw) solid var(--oc-line); }

/* side nodes inside vertical lists are stacked under the node */
.ocw.oc-mobile .oc-row.has-sides, .ocw ul.oc-v .oc-row.has-sides { display: flex; flex-direction: column; align-items: flex-start; direction: inherit; width: auto; }
.ocw.oc-mobile .oc-row.has-sides > *, .ocw ul.oc-v .oc-row.has-sides > * { direction: inherit; }
.ocw.oc-mobile .oc-row.has-sides > .oc-box, .ocw ul.oc-v .oc-row.has-sides > .oc-box { order: 1; }
.ocw.oc-mobile .oc-row.has-sides > .oc-side, .ocw ul.oc-v .oc-row.has-sides > .oc-side { order: 2; margin-top: 8px; align-items: flex-start; justify-self: auto; }
.ocw.oc-mobile .oc-side .oc-node, .ocw ul.oc-v .oc-side .oc-node { margin: 0; }
.ocw.oc-mobile .oc-side .oc-node::after, .ocw ul.oc-v .oc-side .oc-node::after { display: none; }

/* ---------- mobile ---------- */
.ocw.oc-mobile { padding: min(var(--oc-wrap), 16px); }
.ocw.oc-mobile .oc-head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
.ocw.oc-mobile .oc-stage { overflow: visible; }
.ocw.oc-mobile .oc-inner { display: block; width: 100%; min-width: 0; padding: 4px 2px 12px; }
.ocw.oc-mobile .oc-row, .ocw.oc-mobile .oc-box { width: 100%; justify-content: flex-start; }
.ocw.oc-mobile .oc-node { width: 100%; justify-content: flex-start; text-align: start; padding-block: max(var(--oc-np), 12px); }
.ocw.oc-mobile .oc-side { width: 100%; }
.ocw.oc-mobile .oc-box.has-kids .oc-node { padding-inline-end: 48px; }
.ocw.oc-mobile li.kv > .oc-row > .oc-box > button.oc-toggle,
.ocw.oc-mobile button.oc-toggle { width: 30px; height: 30px; top: 50%; bottom: auto; left: auto; inset-inline-start: auto; inset-inline-end: 10px; margin: -15px 0 0; font-size: 20px; }

@media (prefers-reduced-motion: reduce) { .ocw .oc-node { transition: none; } }
@media print { .ocw button.oc-toggle { display: none; } .ocw li.is-collapsed > ul.oc-children { display: block; } }