// Process model list (FolderDocumentClassListMode.ProcessModel = 37)
// CSS class prefix: dbqdclpm

$process-model-colors-light: (
	pm-ink: #1d2433,
	pm-muted: #657088,
	pm-line: #c6ccd8,
	pm-eq: #5b6578,
	pm-fill: #9cc8ef,
	pm-powder: #dcc9ad,
	pm-run: #1f7a4d,
	pm-run-bg: #e2f3e9,
	pm-wait: #b8650a,
	pm-wait-bg: #fdf0df,
	pm-hold: #b42335,
	pm-hold-bg: #fbe6e9,
	pm-idle: #7d8597,
	pm-idle-bg: #eceff4,
	pm-accent: #2457c5,
	pm-panel: #ffffff,
	pm-canvas-bg: #eef1f5
);

$process-model-colors-dark: (
	pm-ink: #e8ecf4,
	pm-muted: #9aa3b5,
	pm-line: #3a4356,
	pm-eq: #9aa3b5,
	pm-fill: #3a6f9a,
	pm-powder: #8a6a4a,
	pm-run: #4caf7a,
	pm-run-bg: #1a3a2a,
	pm-wait: #e0a04a,
	pm-wait-bg: #3a2e1a,
	pm-hold: #e06070,
	pm-hold-bg: #3a1a20,
	pm-idle: #8a92a4,
	pm-idle-bg: #2a303c,
	pm-accent: #6a9cff,
	pm-panel: #1e2430,
	pm-canvas-bg: #151a22
);

$pm-ink: custom-color(pm-ink, $process-model-colors-light, $process-model-colors-dark);
$pm-muted: custom-color(pm-muted, $process-model-colors-light, $process-model-colors-dark);
$pm-line: custom-color(pm-line, $process-model-colors-light, $process-model-colors-dark);
$pm-eq: custom-color(pm-eq, $process-model-colors-light, $process-model-colors-dark);
$pm-fill: custom-color(pm-fill, $process-model-colors-light, $process-model-colors-dark);
$pm-powder: custom-color(pm-powder, $process-model-colors-light, $process-model-colors-dark);
$pm-run: custom-color(pm-run, $process-model-colors-light, $process-model-colors-dark);
$pm-run-bg: custom-color(pm-run-bg, $process-model-colors-light, $process-model-colors-dark);
$pm-wait: custom-color(pm-wait, $process-model-colors-light, $process-model-colors-dark);
$pm-wait-bg: custom-color(pm-wait-bg, $process-model-colors-light, $process-model-colors-dark);
$pm-hold: custom-color(pm-hold, $process-model-colors-light, $process-model-colors-dark);
$pm-hold-bg: custom-color(pm-hold-bg, $process-model-colors-light, $process-model-colors-dark);
$pm-idle: custom-color(pm-idle, $process-model-colors-light, $process-model-colors-dark);
$pm-idle-bg: custom-color(pm-idle-bg, $process-model-colors-light, $process-model-colors-dark);
$pm-accent: custom-color(pm-accent, $process-model-colors-light, $process-model-colors-dark);
$pm-panel: custom-color(pm-panel, $process-model-colors-light, $process-model-colors-dark);
$pm-canvas-bg: custom-color(pm-canvas-bg, $process-model-colors-light, $process-model-colors-dark);

.classlist-process-model {
	height: 100%;
	margin: 0;
	border-radius: $border-radius-default;
	overflow: hidden;
	padding: ($padding-default / 2) $padding-default;
}

.dbqdclpm-container {
	display: flex;
	flex-direction: column;
	gap: $padding-default;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	border-radius: $border-radius-default;
	background-color: $pm-canvas-bg;
	color: $pm-ink;

	.dbqdclpm-toolbar {
		flex: 0 0 auto;
	}

	.dbqdclpm-workspace {
		position: relative;
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}
}

.dbqdclpm-button {
	font: inherit;
	font-size: 12px;
	padding: 4px 10px;
	margin-right: 6px;
	border: 1px solid $pm-line;
	background: $pm-panel;
	border-radius: 6px;
	cursor: pointer;
	color: $pm-ink;

	&:hover {
		border-color: $pm-accent;
	}
}

.dbqdclpm-palette {
	flex: 0 0 200px;
	overflow: auto;
	padding: 10px;
	background: $pm-panel;
	border-right: 1px solid $pm-line;

	strong {
		display: block;
		margin-bottom: 8px;
		font-size: 13px;
	}

	section {
		margin-bottom: 12px;
	}

	h4 {
		margin: 0 0 6px;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: $pm-muted;
	}

	button {
		display: block;
		width: 100%;
		text-align: left;
		font: inherit;
		font-size: 12.5px;
		padding: 5px 8px;
		margin-bottom: 4px;
		border: 1px solid $pm-line;
		background: $pm-canvas-bg;
		border-radius: 6px;
		cursor: grab;
		color: $pm-ink;
	}
}

.dbqdclpm-viewport {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	outline: none;
	touch-action: none;
}

.dbqdclpm-canvas {
	width: 100%;
	height: 100%;
	display: block;
	background: $pm-canvas-bg;
}

.dbqdclpm-tooltip {
	position: absolute;
	z-index: 20;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: 8px;
	background: $pm-panel;
	border: 1px solid $pm-line;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	font-size: 12px;
	white-space: pre-wrap;
	pointer-events: none;
	color: $pm-ink;
}

.dbqdclpm-medium-popup {
	position: absolute;
	z-index: 25;
	min-width: 200px;
	padding: 10px;
	border-radius: 8px;
	background: $pm-panel;
	border: 1px solid $pm-line;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);

	label {
		display: block;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 4px;
	}

	select {
		width: 100%;
		margin-bottom: 8px;
		font: inherit;
		font-size: 12.5px;
	}

	button {
		font: inherit;
		font-size: 12px;
		padding: 4px 10px;
		margin-right: 6px;
		border: 1px solid $pm-line;
		background: $pm-canvas-bg;
		border-radius: 6px;
		cursor: pointer;
	}
}

// Editor handles
.dbqdclpm-outline {
	stroke: $pm-accent;
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
	pointer-events: none;
	opacity: 0;
}

.dbqdclpm-selected .dbqdclpm-outline {
	opacity: 1;
}

// Drilldown hint: a node that can be opened gets a solid accent border on hover (its module frame, if it has one)
.dbqdclpm-drillable {
	cursor: pointer;

	> .dbqdclpm-outline {
		opacity: 1;
		stroke-width: 2;
		stroke-dasharray: none;
	}

	> .dbqdclpm-module .dbqdclpm-frame {
		stroke: $pm-accent;
		stroke-width: 2.4;
	}
}

// A module frame already shows the highlight, so skip the extra outline around the module itself
.dbqdclpm-drillable:has(> .dbqdclpm-module) > .dbqdclpm-outline {
	opacity: 0;
}

.dbqdclpm-drilldown {
	position: absolute;
	z-index: 21;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid $pm-accent;
	border-radius: 50%;
	background: $pm-panel;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	color: $pm-accent;
	cursor: pointer;

	svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	&:hover {
		background: $pm-accent;
		color: $pm-panel;
	}
}

.dbqdclpm-connector {
	fill: $pm-panel;
	stroke: $pm-accent;
	stroke-width: 1.5;
	opacity: 0;
	cursor: crosshair;
}

.dbqdclpm-editable:hover .dbqdclpm-connector,
.dbqdclpm-selected .dbqdclpm-connector {
	opacity: 1;
}

.dbqdclpm-resize {
	fill: $pm-accent;
	stroke: $pm-panel;
	stroke-width: 1;
	cursor: nwse-resize;
	opacity: 0;
}

.dbqdclpm-selected .dbqdclpm-resize {
	opacity: 1;
}

.dbqdclpm-waypoint {
	fill: $pm-panel;
	stroke: $pm-accent;
	stroke-width: 2;
	cursor: move;
}

.dbqdclpm-preview {
	stroke: $pm-accent;
	stroke-width: 2;
	stroke-dasharray: 6 4;
	opacity: .8;
	pointer-events: none;
}

.dbqdclpm-pipe {
	fill: none;
	stroke-width: 4;
	stroke-linejoin: round;
	opacity: .35;
	transition: opacity .3s;
	cursor: pointer;

	&.dbqdclpm-selected {
		stroke-width: 5;
		filter: brightness(1.1);
	}

	&.is-flowing {
		opacity: 1;
		stroke-dasharray: 12 8;
		animation: dbqdclpm-flow .7s linear infinite;
	}
}

@keyframes dbqdclpm-flow {
	to { stroke-dashoffset: -20; }
}

// Module frame + chips
.dbqdclpm-frame {
	fill: none;
	stroke: $pm-line;
	stroke-width: 1.4;
	transition: stroke .3s;
	pointer-events: none;
}

.dbqdclpm-module.m-run .dbqdclpm-frame {
	stroke: $pm-run;
	stroke-width: 2.4;
}

.dbqdclpm-module.m-wait .dbqdclpm-frame {
	stroke: $pm-wait;
	stroke-width: 2.4;
}

.dbqdclpm-module.m-hold .dbqdclpm-frame {
	stroke: $pm-hold;
	stroke-width: 2.4;
}

.dbqdclpm-chip {
	rect {
		fill: $pm-idle-bg;
		stroke: none;
	}

	.hmi-text {
		fill: $pm-idle;
	}

	&.m-run {
		rect { fill: $pm-run-bg; }
		.hmi-text { fill: $pm-run; }
	}

	&.m-wait {
		rect { fill: $pm-wait-bg; }
		.hmi-text { fill: $pm-wait; }
	}

	&.m-hold {
		rect { fill: $pm-hold-bg; }
		.hmi-text { fill: $pm-hold; }
	}

	&.dbqdclpm-chip-done {
		rect { fill: #e6eefc; }
		.hmi-text { fill: $pm-accent; }
	}
}

.dbqdclpm-progress {
	fill: currentColor;
}

.dbqdclpm-request {
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;

	rect {
		fill: $pm-wait-bg;
	}

	&.is-active {
		opacity: 1;
	}
}

.dbqdclpm-opdot {
	fill: $pm-wait;
	animation: dbqdclpm-blink 1s infinite;
}

@keyframes dbqdclpm-blink {
	50% { opacity: .2; }
}

// ===== Platform HMI stylesheet (§6), scoped under .dbqdclpm-canvas =====
// The base looks and state colours match the element type preview in the form (normal / is-running / is-open / is-fault),
// so a symbol looks the same in both places. Every state rule matches the state class on an ancestor (the preview puts it
// on the group) and on the shape itself (a template can put data-bind="state" on the shape, e.g. the valve path).
.dbqdclpm-canvas {

	.hmi-body,
	.hmi-valve {
		fill: #fafbfd;
		stroke: $pm-eq;
		stroke-width: 1.6;
		transition: fill .3s, stroke .3s;
	}

	.hmi-line {
		fill: none;
		stroke: $pm-eq;
		stroke-width: 1.6;
		transition: stroke .3s;
	}

	.hmi-fill {
		fill: $pm-fill;
		stroke: none;
		transition: transform .9s ease;
	}

	.hmi-powder {
		fill: $pm-powder;
	}

	.hmi-inst {
		fill: #ffffff;
		stroke: $pm-eq;
		stroke-width: 1.4;
	}

	.hmi-run {
		fill: #eceff4;
		transition: fill .3s;
	}

	// Our own labels get a fixed size; template texts keep their own font-size attribute
	.hmi-text {
		fill: $pm-muted;

		&:not([font-size]) {
			font-size: 11px;
		}
	}

	.hmi-code {
		font-size: 12px;
		font-weight: 700;
		fill: $pm-accent;
	}

	// Labels (tag, module code, lock) get a halo in the canvas colour, so pipes underneath do not cross the text
	.dbqdclpm-label {
		paint-order: stroke;
		stroke: $pm-canvas-bg;
		stroke-width: 4px;
		stroke-linejoin: round;
	}

	// Bound template texts (level, position, values) get a halo in the vessel colour, so a shaft or fill edge
	// underneath (e.g. the tank agitator) does not cross the digits
	.dbqdclpm-element svg text[data-bind] {
		paint-order: stroke;
		stroke: #fafbfd;
		stroke-width: 3px;
		stroke-linejoin: round;
	}

	.hmi-spin,
	.hmi-flip {
		transform-box: fill-box;
		transform-origin: center;
	}

	.is-running .hmi-spin,
	.hmi-spin.is-running {
		animation: dbqdclpm-spin 1.2s linear infinite;
	}

	.is-running .hmi-flip,
	.hmi-flip.is-running {
		animation: dbqdclpm-flip .9s linear infinite;
	}

	// Running / open: green
	.is-running .hmi-run,
	.hmi-run.is-running,
	.is-open .hmi-valve,
	.hmi-valve.is-open {
		fill: $pm-run;
	}

	// Switch on (LSH, ZSO …): green bubble outline and a light green bubble
	.is-on .hmi-inst,
	.hmi-inst.is-on {
		fill: #e3f3ea;
		stroke: $pm-run;
		stroke-width: 2;
	}

	.is-on text[data-bind="value"] {
		fill: $pm-run;
		font-weight: 600;
	}

	// Active (e.g. the heating jacket): red line
	.is-active .hmi-line,
	.hmi-line.is-active {
		stroke: #c8423b;
	}

	// Fault: red outline, red motor
	.is-fault .hmi-body,
	.hmi-body.is-fault,
	.is-fault .hmi-line,
	.hmi-line.is-fault,
	.is-fault .hmi-valve,
	.hmi-valve.is-fault,
	.is-fault .hmi-inst,
	.hmi-inst.is-fault {
		stroke: $pm-hold;
	}

	.is-fault .hmi-run,
	.hmi-run.is-fault {
		fill: $pm-hold;
	}

	// Moving (command ≠ feedback): amber blink. Not in the preview, live view only.
	.is-moving .hmi-valve,
	.hmi-valve.is-moving {
		animation: dbqdclpm-valve-blink .8s steps(2) infinite;
	}

	.hmi-jacket {
		fill: none;
		stroke: #c9ced8;
		stroke-width: 3;
		stroke-dasharray: 5 4;
		transition: stroke .3s;

		&.is-active {
			stroke: #c8423b;
			animation: dbqdclpm-flow 1s linear infinite;
		}
	}

	.hmi-position {
		fill: #c8423b;
		transform: scaleY(calc(var(--position, 0) / 100));
		transform-origin: bottom center;
		transform-box: fill-box;
		transition: transform .6s;
	}

	.q-uncertain .hmi-inst,
	.hmi-inst.q-uncertain {
		stroke: $pm-wait;
		stroke-dasharray: 3 2;
	}

	.q-uncertain .hmi-text,
	.hmi-text.q-uncertain {
		fill: $pm-wait;
	}

	.q-bad .hmi-inst,
	.hmi-inst.q-bad {
		stroke: $pm-hold;
		stroke-dasharray: 3 2;
	}

	.q-bad .hmi-text,
	.hmi-text.q-bad {
		fill: #9aa2b1;
	}

	.q-stale .hmi-text,
	.hmi-text.q-stale {
		fill: #9aa2b1;
		font-style: italic;
	}

	.lim-high .hmi-inst,
	.lim-low .hmi-inst,
	.hmi-inst.lim-high,
	.hmi-inst.lim-low {
		fill: $pm-hold-bg;
		stroke: $pm-hold;
		stroke-width: 2.2;
	}
}

@keyframes dbqdclpm-spin {
	to { transform: rotate(360deg); }
}

@keyframes dbqdclpm-flip {
	0% { transform: scaleX(1); }
	50% { transform: scaleX(-1); }
	100% { transform: scaleX(1); }
}

@keyframes dbqdclpm-valve-blink {
	0% { fill: #f2c46d; }
	50% { fill: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	.dbqdclpm-canvas {
		.is-running .hmi-spin,
		.hmi-spin.is-running,
		.is-running .hmi-flip,
		.hmi-flip.is-running,
		.is-moving .hmi-valve,
		.hmi-valve.is-moving,
		.hmi-jacket.is-active {
			animation: none;
		}

		.hmi-fill,
		.hmi-position {
			transition: none;
		}
	}

	.dbqdclpm-pipe.is-flowing,
	.dbqdclpm-opdot {
		animation: none;
	}
}