:root {
  --textsize: 12pt;
  --section-color: #73a44d;
  --je-color: #73a44d;
  --border-radius: 5px;
}

html {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;


	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--textsize);
}

body {
	margin: 0px;
	padding: 0px;
	background-color: #444 !important;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

*:focus {
	outline: none;
}

[onClick] {
	cursor: pointer;
}

button {
	padding: 4px 8px;
}

.page {
	display: none;

	&.show {
		display: block;
	}
}

.section {
	background-color: #fff;
	padding: 32px;
	border-radius: 8px;
}

#layout {
	display: grid;
	grid-template-areas:
	     "menu       menu"
	     "navigation details"
	;
	grid-template-columns: min-content 1fr;
	grid-gap: 32px;
	padding: 32px;
}

#menu {
	grid-area: menu;
	grid-template-columns: repeat(100, min-content);
	grid-gap: 24px;
	align-items: center;

	&.page {
		display: grid;
		padding: 16px 32px;
	}

	.item {
		font-size: 1.1em;
		cursor: pointer;
		white-space: nowrap;
		user-select: none;

		&.selected {
			font-weight: bold;
		}
	}
}

#logo {
	img {
		height: 64px;
		margin-right: 32px;
	}
}


#nodes {
	grid-area: navigation;
	width: min-content;
}

#editor-node {
	grid-area: details;
	grid-gap: 16px;
	grid-template-rows:
		min-content
		1fr
		min-content
		;

	&.show {
		display: grid;
	}

	& > div.ops {
		display: grid;
		grid-template-columns: min-content 1fr repeat(4, min-content);
		align-items: center;
		grid-gap: 8px;

		#editor-node-name {
			font-weight: bold;
		}

		img {
			display: block;
			height: 32px;

			&.highlight {
				filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
			}
		}
	}
}

#types {
	grid-area: navigation;

	.label {
		div:first-child {
			font-size: 1.5em;
			font-weight: bold;
			color: var(--section-color);
			margin-right: 8px;
		}

		display: grid;
		grid-template-columns: 1fr min-content;
		align-items: center;
	}

	.group {
		font-weight: bold;
		white-space: nowrap;
		margin-top: 32px;
		margin-bottom: 8px;
		color: var(--section-color);

		&:first-child {
			margin-top: 0px;
		}
	}

	.type {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px;
		align-items: center;
		cursor: pointer;
		margin-bottom: 8px;

		.img {
			img {
				height: 24px;
				display: inline;
			}
		}

		.title {
			white-space: nowrap;
			line-height: 24px;
		}
	}
}

#editor-type-schema {
	grid-area: details;
}

.node {
	display: grid;
	grid-template-columns: min-content min-content 100%;
	white-space: nowrap;
	user-select: none;

	img {
		height: 24px;
	}

	&.selected {
		& > .name {
			font-weight: bold;
		}
	}
	
	&.marked {
		& > .name {
			color: #a00;
		}
	}

	&.expanded  {
		&>.children {
			display: block;
		}
	}

	.expand-status {
		padding-left: 8px;
		padding-right: 8px;

		&.leaf {
			width: 40px;
			img {
				display: none;
			}
		}

		img {
			cursor: pointer;
		}
	}

	.type-icon {
		padding-right: 4px;

		img {
			filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
		}
	}

	.name {
		margin-bottom: 8px;
		line-height: 24px;
		cursor: pointer;
	}

	.children {
		display: none;
		grid-column: 1 / -1;
		border-left: 1px solid #ccc;
		padding-left: 12px;
		margin-left: 19px;
	}
}

select {
	font-size: 1em;
	border: 1px solid #bcc3ce;
	background: #fff;
	color: #444;
	padding: 4px;

	optgroup {
		color: #a22;
	}

}


datalist {
	div:before {
		display: block;
		content: 'group';
		font-weight: bold;
	}
}

dialog#create-type {
	min-width: 400px;

	& > div {
		display: grid;
		grid-gap: 8px;
	}
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

select:focus {
	outline: 2px solid #888;
	outline-offset: -2px;
}

#connected-nodes {
	& > .label {
		display: grid;
		grid-template-columns: min-content min-content;
		align-items: center;

		color: var(--section-color);
		font-weight: bold;
		font-size: 1.25em;
		margin-bottom: 16px;

		& > img.add {
			height: 24px;
			cursor: pointer;
			margin-left: 8px;
		}
	}

	.connected-nodes {
		display: flex;
		align-items: start;
		flex-flow: row wrap;
		gap: 32px;

		.type-group {
			display: grid;
			grid-template-columns: 24px 1fr;
			grid-gap: 8px;
			align-items: center;
			background-color: #f0f0f0;
			padding: 16px;

			.type-name {
				font-weight: bold;
				grid-column: 1 / -1;
			}

			.type-icon, .node-name {
				cursor: pointer;
			}
		}
	}

	.type-icon {
		img {
			display: block;
			height: 24px;
		}
	}
}

#script-hooks {
	.scripts-grid {
		display: flex;
		align-items: start;
		flex-flow: row wrap;
		gap: 32px;

		.header {
			font-weight: bold;
			margin-right: 8px;
		}

		div {
			white-space: nowrap;
		}

		.script-group {
			display: grid;
			grid-template-columns: repeat(3, min-content);
			align-items: center;
			grid-gap: 2px 0px;
			padding: 16px;
			background-color: #f0f0f0;
		}

		.script-group-title {
			grid-column: 1 / -1;
			font-weight: bold;
		}

		.script-unhook, .script-schedule {
			img {
				display: block;
				height: 24px;
				cursor: pointer;
			}
		}

		.script-name, .script-ssh {
			cursor: pointer;
			margin-right: 16px;
		}

		.script-ssh {
			color: #555;
		}

		.script-schedule.disabled {
			filter: invert(50%);
		}
	}

	& > .label {
		display: grid;
		grid-template-columns: min-content min-content;
		align-items: center;

		color: var(--section-color);
		font-weight: bold;
		font-size: 1.25em;
		margin-bottom: 8px;

		img.add {
			height: 24px;
			cursor: pointer;
			margin-left: 8px;
		}
	}

}

#select-node {
	padding: 32px;
	display: grid;
	grid-template-columns: min-content;
	grid-gap: 8px;
	justify-items: start;

	& > * {
		min-width: 300px;
		width: 100%;
	}

	.label {
		font-weight: bold;
		color: var(--section-color);
	}

	button {
		width: 100px !important;
	}

	.more-exist {
		color: #a44;
	}

	.search-results {
		.node-table {
			display: flex;
			align-items: start;
			gap: 32px;

			.group {
				margin-top: 16px;
				.label {
					font-weight: bold;
					color: var(--section-color);
					margin-bottom: 8px;
					white-space: nowrap;
				}

				.children {
					display: grid;
					grid-template-columns: min-content 1fr;
					grid-gap: 8px;

					.node {
						cursor: pointer;
					}

					img {
						cursor: pointer;
						height: 24px;
					}
				}
			}
		}
	}
}

dialog#connection-data {
	padding: 24px;

	.label {
		font-size: 1.25em;
		font-weight: bold;
		color: var(--section-color);
	}

	img {
		height: 32px;
	}

	textarea {
		margin-top: 16px;
		width: 300px;
		height: 200px;
	}

	div.button {
		text-align: center;
		margin-top: 8px;
	}
}

#editor-type-schema {
	.label {
		font-size: 1.25em;
		font-weight: bold;
		color: var(--section-color);
	}

	textarea {
		font-family: monospace;
		font-size: 0.85em;
		margin-top: 16px;
		width: 100%;
		height: calc(100% - 96px);
		min-height: calc(100vh - 380px);
	}

	img {
		height: 32px;

		&.saving {
			filter: invert(.7) sepia(.5) hue-rotate(0deg) saturate(600%) brightness(0.75);
		}
	}
}

@keyframes example {
	  0% { opacity: 0%   }
	 50% { opacity: 0%   }
	100% { opacity: 100% }
}

.tooltip {
	position: relative;

	&.left::after {
		right: 0px;
	}

	&.right::after {
		left: 0px;
	}

	&:hover::after {
		animation-name: example;
		animation-duration: 1s;

		white-space: nowrap;
		background-color: var(--section-color);
		box-shadow: 5px 5px 21px -4px rgba(0,0,0,0.75);

		position: absolute;
		top: 48px;
		content: attr(data-tooltip);
		display: block;
		padding: 8px 16px;
		border-radius: 4px;
		color: #fff;
		z-index: 8192;
	}
}

#scripts {
	.label {
		div:first-child {
			font-size: 1.5em;
			font-weight: bold;
			color: var(--section-color);
			margin-right: 8px;
		}

		display: grid;
		grid-template-columns: 1fr min-content;
		align-items: center;
	}

	.group {
		font-weight: bold;
		margin-top: 32px;
		color: var(--section-color);

		&:first-child {
			margin-top: 0px;
		}
	}

	.script {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 4px;
		align-items: center;
		user-select: none;
		cursor: pointer;

		&.selected {
			font-weight: bold;
		}

		img {
			display: block;
			height: 24px;
		}

		div {
			white-space: nowrap;
		}
	}
}

#editor-script {
	& > div {
		display: grid;
		grid-template-columns: 200px 1fr min-content;
		grid-gap: 16px;
		align-items: end;
	}

	.label {
		margin-top: 16px;
		font-weight: bold;
		color: var(--section-color);

		&:first-child {
			margin-top: 0px;
		}
	}

	input[type="text"] {
		width: 100%;
	}

	textarea {
		width: 100%;
		height: 400px;
		font-family: monospace;
		font-size: 0.85em;
	}

	button {
		margin-top: 8px;
	}
}

#script-select-dialog {
	display: grid;
	grid-gap: 8px;
	padding: 32px;

	& > .header {
		font-weight: bold;
		color: var(--section-color);
	}

	.scripts {
		.group {
			font-weight: bold;
			color: var(--section-color);
			margin-top: 16px;
		}
		.script {
			cursor: pointer;
			margin-top: 4px;
		}
	}
}

#script-hook-dialog {
	display: grid;
	grid-gap: 8px;
	padding: 32px;

	.top {
		display: grid;
		grid-template-columns: 1fr min-content;
		grid-gap: 16px;

		.header {
			font-size: 1.25em;
			font-weight: bold;
			color: var(--section-color);
		}

		img {
			height: 32px;
			cursor: pointer;
		}
	}

	.label {
		font-weight: bold;
		margin-top: 16px;
	}

	textarea {
		height: 50vh;
		width: 50vw;
		font-family: monospace;
	}
}

#script-executions {
	& >  .label {
		font-weight: bold;
		font-size: 1.5em;
		color: var(--section-color);
		white-space: nowrap;
	}

	.executions {
		display: grid;
		grid-template-columns: repeat(11, min-content);
		grid-gap: 4px 32px;
		margin-top: 32px;
		align-items: center;

		.header {
			font-weight: bold;
		}

		div {
			white-space: nowrap;
		}

		img {
			display: block;
			height: 24px;
		}

		.time {
			font-size: 0.9em;
			color: #555;
		}

		.source, .data, .env, .stdout, .stderr {
			img {
				cursor: pointer;
			}
		}
		.exitcode {
			text-align: right;

			div {
				padding: 2px 8px;
				width: 50px;
				border-radius: 4px;
				color: #fff;
				font-weight: bold;
				text-align: center;

				&.code-ok {
					background-color: #6f9753;
				}

				&.code-error {
					background-color: #a12f2f;
				}
			}
		}
	}
}

#script-execution-value-dialog {
	display: grid;

	.top {
		display: grid;
		grid-template-columns: 1fr min-content;

		.header {
			font-size: 1.25em;
			font-weight: bold;
			color: var(--section-color);
		}

		.copy {
			height: 32px;
			cursor: pointer;

			&.clicked {
				filter: invert(50%);
			}
		}
	}

	.label {
		font-weight: bold;
	}

	.value {
		margin-top: 16px;
		padding: 16px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-family: monospace;
		font-size: 0.9em;
		height: 75vh;
		width: 80vw;
		white-space: pre;
		overflow: scroll;
	}
}
