/* =========================================================================
   Organisation chart.

   Prefixed .oc- throughout so nothing here collides with the existing app
   styles, which are broad and unscoped.

   Fill colours all carry white text, so each was checked for at least 4.5:1
   contrast against white and enough hue separation to stay distinguishable at
   this box size:
     root   45deg  5.85:1   open   38deg  4.91:1   lead 24deg  5.12:1
     proj   97deg  4.99:1   mgr   212deg  4.98:1   person 257deg 7.78:1
     gap   210deg  5.06:1  (desaturated, so it reads apart from mgr)
   ========================================================================= */

.orgchart_page {
	--oc-root:   #806000;
	--oc-mgr:    #4472a8;
	--oc-proj:   #4a7c2c;
	--oc-lead:   #b3510f;
	--oc-person: #5b4494;
	--oc-open:   #9c6500;
	--oc-gap:    #64707c;
	--oc-line:   #9aa7b3;
}

/* ------------------------------------------------------------------ chrome */
.oc-legend {
	display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
	font-size: 11.5px; color: #5a6b7b; margin: 4px 0 10px;
}
.oc-sw {
	display: inline-block; width: 22px; height: 11px; border-radius: 2px;
	vertical-align: -1px; margin-right: 5px;
}
.oc-sw.oc-root { background: var(--oc-root); }
.oc-sw.oc-mgr { background: var(--oc-mgr); }
.oc-sw.oc-proj { background: var(--oc-proj); }
.oc-sw.oc-lead { background: var(--oc-lead); }
.oc-sw.oc-person { background: var(--oc-person); }
.oc-sw.oc-open { background: var(--oc-open); }
.oc-sw.oc-gap { background: var(--oc-gap); }

.oc-editbar {
	background: #eef4fa; border-left: 3px solid #4472a8;
	border-radius: 0 5px 5px 0; padding: 8px 13px; margin-bottom: 10px;
	font-size: 12px; color: #345675;
}

/* The chart is wider than any screen, so it scrolls inside its own box and
   never makes the page scroll sideways. */
.oc-scroll {
	overflow-x: auto; overflow-y: hidden;
	border: 1px solid #e3e8ed; border-radius: 6px;
	background: #fff; padding: 14px 10px 20px;
}

/* -------------------------------------------------------------- the tree
   Every level is a flex row of <li>; the connector elbows are borders on
   ::before / ::after. Nests to any depth with no per-level rules. */
.oc-tree { min-width: max-content; }
.oc-tree ul {
	position: relative; padding: 20px 0 0; margin: 0;
	display: flex; justify-content: center; list-style: none;
}
.oc-tree li {
	position: relative; list-style: none;
	padding: 20px 5px 0; text-align: center;
	display: flex; flex-direction: column; align-items: center;
}
.oc-tree li::before, .oc-tree li::after {
	content: ''; position: absolute; top: 0; right: 50%;
	border-top: 1.5px solid var(--oc-line); width: 50%; height: 20px;
}
.oc-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--oc-line); }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { display: none; }
.oc-tree li:only-child { padding-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0 none; }
.oc-tree li:last-child::before {
	border-right: 1.5px solid var(--oc-line); border-radius: 0 6px 0 0;
}
.oc-tree li:first-child::after { border-radius: 6px 0 0 0; }
.oc-tree ul ul::before {
	content: ''; position: absolute; top: 0; left: 50%;
	border-left: 1.5px solid var(--oc-line); width: 0; height: 20px;
}

/* --------------------------------------------------------------- the boxes */
.oc-box {
	display: inline-flex; flex-direction: column; justify-content: center;
	border-radius: 3px; padding: 5px 8px; color: #fff;
	line-height: 1.25; text-align: center; min-width: 118px;
	box-shadow: 0 1px 2px rgba(20, 40, 60, .22);
}
.oc-nm { font-weight: 600; font-size: 11px; }
.oc-ti { font-size: 9px; opacity: .92; margin-top: 1px; }

.oc-box.oc-root   { background: var(--oc-root); min-width: 150px; padding: 9px 16px; }
.oc-box.oc-root .oc-nm { font-size: 13px; }
.oc-box.oc-root .oc-ti { font-size: 10px; }
.oc-box.oc-mgr    { background: var(--oc-mgr);    min-width: 134px; }
.oc-box.oc-proj   { background: var(--oc-proj);   min-width: 118px; }
.oc-box.oc-lead   { background: var(--oc-lead);   min-width: 122px; }
.oc-box.oc-person { background: var(--oc-person); }
.oc-box.oc-open   { background: var(--oc-open); }
.oc-box.oc-gap    { background: var(--oc-gap); }

/* ------------------------------------------------------------ peer groups
   Boxes inside a group are PEERS of the box above. They were once joined to
   each other by short vertical connectors, which read as a reporting chain --
   the third name looked like it reported to the second. So there are no
   connectors between them: one line enters the group, and the border says
   "these people, together". Listing order carries no meaning. */
.oc-stack {
	position: relative; margin-top: 13px; padding: 9px;
	border: 1.5px solid var(--oc-line); border-radius: 6px;
	background: #f7f9fa;
	display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.oc-stack::before {
	content: ''; position: absolute; top: -13px; left: 50%;
	width: 1.5px; height: 13px; background: var(--oc-line);
}

/* ------------------------------------------------------------ edit affordance */
.oc-editable { cursor: pointer; }
.oc-editable:hover { outline: 2px solid #ffd166; outline-offset: 1px; }
.oc-selected { outline: 2.5px solid #16222e; outline-offset: 1px; }

/* ============================================================ PDF export
   "Print" in the browser, then choose Save as PDF.

   Browsers drop background colours when printing unless told otherwise, which
   is why the chart came out as white boxes with white text -- effectively
   blank. print-color-adjust: exact forces the fills through, so the PDF
   matches the screen. It is set on the boxes AND on the page, because Chrome
   honours it per-element.

   Everything that is not the chart is hidden: the app's own header, tabs,
   notifications and the page's buttons have no place in the export. */
@media print {
	@page { size: A2 landscape; margin: 10mm; }

	html, body {
		background: #fff !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/* app chrome */
	.main-header, .main-tab-container, .card-header-tab,
	.notification-dropdown-header, nav, .navbar, footer { display: none !important; }

	/* page chrome */
	.orgchart_page .oc-legend,
	.orgchart_page .oc-editbar,
	.orgchart_page .alert,
	.orgchart_page .page_title span,
	.orgchart_page .btn,
	.orgchart_page .modal { display: none !important; }

	.orgchart_page .page-wrapper,
	.orgchart_page .page-container { padding: 0 !important; margin: 0 !important; }

	/* the chart itself must not be clipped by the scroll box */
	.oc-scroll {
		overflow: visible !important;
		border: 0 !important; padding: 0 !important;
		background: #fff !important;
	}
	.oc-tree { min-width: 0 !important; }

	/* Force every fill and connector through to paper. */
	.oc-box, .oc-stack, .oc-sw {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
	/* Keep a team and its boxes on one page rather than split mid-group. */
	.oc-tree li, .oc-stack { break-inside: avoid; page-break-inside: avoid; }
}