/* =====================================================
   SCROLL CONTAINER
===================================================== */

.orgmap-scroll {

    width: 100%;

	box-sizing: border-box;

    overflow: auto;

    padding-bottom: 20px;

    background: #ffffff;
}

.orgmap-scroll:focus-visible,
.table-responsive:focus-visible {
	outline: 3px solid #1261a0;
	outline-offset: 2px;
}

html[data-bs-theme="dark"] .orgmap-scroll:focus-visible,
html[data-bs-theme="dark"] .table-responsive:focus-visible {
	outline-color: #76bdff;
}

/* =====================================================
   ORGMAP HAUPTBEREICH
===================================================== */

.orgmap-wrapper {

    position: relative;

    background: #ffffff;

    border: none;

    overflow: visible;

    transform-origin: top left;

    display: block;

	isolation: isolate;
}

.orgmap-stage {
	position: relative;
	max-width: none;
	overflow: visible;
}

.orgmap-stage > .orgmap-wrapper {
	position: absolute;
	top: 0;
	left: 0;
}

.container:fullscreen {
	width: 100vw;
	height: 100vh;
	padding: 16px;
	background: #ffffff;
	overflow: hidden;
}

.container:fullscreen .orgmap-main,
.container:fullscreen .orgmap-scroll {
	height: calc(100vh - 100px);
}

html[data-bs-theme="dark"] .container:fullscreen {
	background: #111;
}

@media print {
	@page {
		size: A4 landscape;
		margin: 5mm;
	}

	.orgmap-toolbar,
	.orgmap-sidebar,
	.orgmap-resize-handle {
		display: none !important;
	}

	.container > h1 {
		display: none !important;
	}

	html,
	body,
	.container {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.orgmap-layout,
	.orgmap-main,
	.orgmap-scroll {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		background: #fff !important;
	}

	.orgmap-layout {
		box-sizing: border-box !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.orgmap-stage {
		width: var(--orgmap-print-width, 100%) !important;
		height: var(--orgmap-print-height, auto) !important;
		max-width: none !important;
		overflow: visible !important;
		break-inside: avoid !important;
		page-break-inside: avoid !important;
	}

	.orgmap-wrapper,
	.orgmap-wrapper * {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.orgmap-wrapper {
		zoom: var(--orgmap-print-scale, 0.35) !important;
		transform: none !important;
		transform-origin: top left !important;
		box-shadow: none !important;
		break-inside: avoid !important;
		page-break-inside: avoid !important;
	}

	/* Druckertreiber reduzieren transparente SVG-Linien sonst teilweise bis
	   zur Unsichtbarkeit. Für den Ausdruck werden sie bewusst verstärkt. */
	#orgmap-svg,
	.org-connection,
	.org-connection-label {
		opacity: 1 !important;
		filter: none !important;
		visibility: visible !important;
	}

	.org-connection {
		stroke-width: 4px !important;
	}

	.org-connection-label {
		fill: #111 !important;
		stroke: #fff !important;
	}

	/* Die Legende muss unabhängig von Dark Mode und Drucker-Farbkorrektur
	   mit schwarzer Schrift auf dem hellen Feld ausgegeben werden. */
	.org-node-legend,
	.org-node-legend .org-node-label,
	.org-node-legend .org-node-content,
	.org-node-legend .org-node-content *,
	.org-node-panel,
	.org-node-panel .org-node-label,
	.org-node-panel .org-node-content,
	.org-node-panel .org-node-content *,
	.org-node-html,
	.org-node-html .org-node-label,
	.org-node-html .org-node-content,
	.org-node-html .org-node-content * {
		color: #000 !important;
		-webkit-text-fill-color: #000 !important;
		-webkit-text-stroke: 0 transparent !important;
		text-stroke: 0 transparent !important;
		mix-blend-mode: normal !important;
		filter: none !important;
		opacity: 1 !important;
		text-shadow: none !important;
		text-rendering: optimizeLegibility;
	}
}


/* =====================================================
   SVG LINIEN
===================================================== */

#orgmap-svg {
    z-index: 1;
}


/* =====================================================
   HTML KNOTEN EBENE
===================================================== */

.orgmap-background-layer {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;
}

#orgmap-svg {

    position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	clip: auto;
	clip-path: none;

	/* Über Knoten-/Bildflächen zeichnen, damit keine transparente oder weisse
	   HTML-Ebene Teile einer Verbindung verdeckt. Die leere SVG-Fläche nimmt
	   dank pointer-events keine Mausaktionen von den Knoten weg. */
	z-index: 30;
	pointer-events: none;
}

.orgmap-layer {

    position: absolute;

    inset: 0;

    z-index: 20;

    pointer-events: none;
}


/*
--------------------------------------------------
ORGMAP Darkmode
--------------------------------------------------
*/

html[data-bs-theme="dark"] .orgmap-scroll {

	background: #111;
}

html[data-bs-theme="dark"] .orgmap-wrapper {

	background: #1b1b1b;
}

html[data-bs-theme="dark"] .org-node-html {

	color: #f5f5f5;
}

html[data-bs-theme="dark"] .org-node-content {

	background:
		rgba(35,35,35,0.88);

	color: #f5f5f5;

	border-color:
		rgba(255,255,255,0.08);
}

html[data-bs-theme="dark"] .org-node-panel {

	background:
		rgba(40,40,40,0.35);
}

html[data-bs-theme="dark"]
.org-node-panel
.org-node-content {

	background:
		rgba(30,30,30,0.82);
}

html[data-bs-theme="dark"] .org-node-legend {

	background:
		rgba(35,35,35,0.7);
}

/*
--------------------------------------------------
Darkmode Secondary Buttons
--------------------------------------------------
*/

html[data-bs-theme="dark"] .btn-secondary {

	background-color: #3a3a3a !important;

	border-color: #666 !important;

	color: #ffffff !important;
}

html[data-bs-theme="dark"] .btn-secondary:hover {

	background-color: #4a4a4a !important;

	border-color: #777 !important;

	color: #ffffff !important;
}

/*
--------------------------------------------------
Darkmode Label Background
--------------------------------------------------
*/

html[data-bs-theme="dark"]
.org-node-label.has-background {

	background: rgba(20,20,20,0.72) !important;

	color: #ffffff !important;

	border-radius: 12px;

	padding: 4px 10px;

	backdrop-filter: blur(3px);
}

/*
--------------------------------------------------
Accessibility Focus
--------------------------------------------------
*/

.orgmap-view-btn[aria-pressed="true"] {
	background: #244c66;
	border-color: #244c66;
	color: #fff;
	box-shadow: inset 0 -3px 0 #8ed0ff;
}

.orgmap-toolbar .btn:focus-visible {
	outline: 3px solid #8a4b00;
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #fff;
}

html[data-bs-theme="dark"] .orgmap-view-btn[aria-pressed="true"] {
	background: #23618c !important;
	border-color: #76bdff !important;
	color: #fff !important;
}

html[data-bs-theme="dark"] .orgmap-toolbar .btn:focus-visible {
	outline-color: #ffb347;
	box-shadow: 0 0 0 2px #111;
}

.org-node-html:focus-visible {

	outline: 3px solid #4da3ff;

	outline-offset: 4px;
}


/*
--------------------------------------------------
Mobile Layout
--------------------------------------------------
*/

@media (max-width: 768px) {

	.orgmap-controls .btn {

		margin-right: 6px;
	}

	.orgmap-layout {

		display: block;
	}

	.orgmap-sidebar {

		width: 100% !important;

		min-width: 0 !important;

		max-height: none;

		margin-bottom: 16px;
	}

	.orgmap-main {

		width: 100%;
	}

	.orgmap-wrapper {

		display: block;
	}

	.orgmap-scroll {

		overflow-x: auto;
	}

	.orgmap-view-btn {

		padding-left: 8px;

		padding-right: 8px;

		font-size: 12px;

		min-width: 0;
	}
}

/*
--------------------------------------------------
Layout
--------------------------------------------------
*/

.orgmap-layout {

	display: flex;

	gap: 20px;

	align-items: flex-start;
}

.orgmap-sidebar {

	width: 260px;

	min-width: 260px;

	max-height: 80vh;

	overflow: auto;

	padding: 12px;

	border-radius: 16px;

	background: rgba(0,0,0,0.03);
}

.orgmap-main {

	flex: 1;

	min-width: 0;
}

html[data-bs-theme="dark"] .orgmap-sidebar {

	background: rgba(255,255,255,0.05);
}

/*
--------------------------------------------------
Connection Types
--------------------------------------------------
*/

.org-connection {

	cursor: pointer;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: stroke;
}

.org-connection.selected {

	opacity: 1;

	stroke-width: 5;
}

.org-connection-type-reports_to {

	filter:
		drop-shadow(
			0 0 1px rgba(0,0,0,0.2)
		);

	stroke-width: 3;

	pointer-events: stroke;
}

.org-connection-type-coordinates {

	opacity: 0.85;

	stroke-width: 2.5;
}

.org-connection-type-supports {

	opacity: 0.55;
}

.org-connection-type-collaborates {

	opacity: 0.75;

	stroke-width: 2.5;
}

.org-connection-type-belongs_to {

	opacity: 0.75;

	stroke-width: 2;
}

.org-connection-type-decides {

	stroke-width: 3.5;
}

.org-connection-type-informs {

	opacity: 0.6;
}

.org-connection-label {

	pointer-events: all;

	cursor: move;
}

/*
--------------------------------------------------
Connection Hover
--------------------------------------------------
*/

.org-connection {

	cursor: pointer;
}

.org-connection-label {

	cursor: move;
}

/*
--------------------------------------------------
ORGMAP Action Buttons
--------------------------------------------------
*/

.orgmap-action-buttons {

	display: flex;

	align-items: center;

	gap: 4px;
}

.orgmap-action-btn {

	width: 28px;

	height: 28px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	flex-shrink: 0;
}

.orgmap-action-btn:focus {

	outline: 2px solid #0d6efd;

	outline-offset: 2px;
}

.orgmap-action-btn:last-child {

	margin-right: 0;
}

@media (prefers-reduced-motion: reduce) {
	.orgmap-layout *,
	.orgmap-toolbar *,
	.orgmap-icon-picker * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.orgmap-toolbar .btn:focus-visible,
	.orgmap-scroll:focus-visible,
	.table-responsive:focus-visible,
	.org-node-html:focus-visible,
	.org-node-resize:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px;
	}

	.orgmap-view-btn[aria-pressed="true"] {
		border: 3px solid Highlight !important;
		forced-color-adjust: none;
		background: Highlight !important;
		color: HighlightText !important;
	}
}