:root {
	--header-background: #e1eabe;
	--header-border: 1px solid #869a41;

	--line-color: #ccc;
	--line-color-record: #eee;

	--label-first: #800033;
	--label-rest: #666;

	--label-background: #f8f8f8;
	--label-border: #ccc;

	--copy-color: #d48700;

	--header-line: #d0d0d0;

	--record-A: #89a02c;
	--record-AAAA: #2f4858;
	--record-CNAME: #f6ae2d;
	--record-FWD: #f26419;
	--record-TXT: #86bbd8;
	--record-NXDOMAIN: #aa0000;
	--record-other: #888;

	--record-hover: #fafafa;
}

html {
	box-sizing: border-box;
}

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

[onClick] {
	cursor: pointer;
}

h1 {
	font-size: 1.5em;

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

label {
	user-select: none;
}

html,
body {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: sans-serif;
	font-size: 12pt;

	/* Boxed folders are a settings for the user. */
	&.boxed-folders {
		#records-tree {
			.folder {
				&>.label {
					background-color: var(--label-background);
					width: min-content;
					padding: 4px 8px;
					border-radius: 4px;
					border: 1px solid var(--label-border);
					margin-top: 8px;
				}

				&>.subfolders {
					margin-left: 18px;
					/* Default 10px */
					padding-bottom: 8px;
					min-height: 8px;

					&:empty {
						border-left: unset;
					}
				}

				&>.records {
					margin-left: 18px;
					/* Default 10px */

					&>img {
						padding-left: 12px;
					}
				}
			}
		}
	}
}

input,
select,
button {
	font-size: 1em;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #444;
}

#application-header {
	display: grid;
	grid-template-columns: min-content min-content 1fr min-content;
	align-items: center;
	justify-items: end;
	border-bottom: var(--header-border);
	background-color: var(--header-background);

	.device-select {
		display: grid;
		grid-template-columns: min-content min-content;
		align-items: center;

		padding: 16px;
		border-right: var(--header-border);

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

		img {
			margin-left: 8px;
		}
	}

	#search {
		padding: 16px;
		display: grid;
		grid-template-columns: min-content min-content;
		grid-gap: 0px 8px;


		&>* {
			display: none;
		}

		&.show {
			border-right: var(--header-border);
			&>* {
				display: initial;
			}
		}

		.search-label {
			grid-column: 1 / -1;
			font-weight: bold;
		}
	}

	#create-icon {
		width: 24px;
		cursor: pointer;
		margin-right: 16px;
	}

	#settings-icon {
		width: 32px;
		cursor: pointer;
		margin-right: 16px;
	}

}

#records-tree {
	white-space: nowrap;
	margin-top: calc(32px - 5px);
	/* padding from the topmost folder */
	margin-left: 32px;

	.folder {
		padding-left: 32px;

		&.top-most {
			padding-left: 0px;
		}

		&.no-domain>.label {
			font-style: italic;
		}

		&.open {
			&>.label>img.open {
				display: block;
			}
		}

		&.closed {
			&>.label>img.closed {
				display: block;
			}

			&>.subfolders {
				display: none;
			}

			&>.records {
				display: none;
			}
		}

		&>.label {
			display: grid;
			grid-template-columns: repeat(4, min-content);
			align-items: center;
			padding: 5px 0px;
			cursor: pointer;
			user-select: none;

			img {
				height: 20px;
				margin-right: 6px;
				display: none;
			}

			img.create {
				display: none;
				height: 16px;
				margin-left: 8px;
			}

			&:hover {
				img.create {
					display: block;
				}
			}
		}

		&>.subfolders {
			border-left: 1px solid var(--line-color);
			margin-left: 10px;
		}

		&>.records {
			padding-left: 30px;
			padding-top: 8px;
			padding-bottom: 8px;

			margin-left: 10px;

			display: grid;
			grid-template-columns: repeat(6, min-content);
			width: min-content;
			align-items: center;
			border-left: 1px solid var(--line-color);

			.header {
				font-weight: bold;
				font-size: 0.75em;
				background: #eee;
				padding: 4px 8px;
				border-left: 1px solid var(--header-line);
				border-top: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);

				&:first-child {
					grid-column: 1 / 3;
					border-top-left-radius: 4px;
				}

				&.last {
					border-right: 1px solid var(--header-line);
					border-top-right-radius: 4px;
				}
			}

			&>:not(.header) {
				height: 40px;
			}

			&>.record-icon {
				border-left: 1px solid var(--header-line);
				align-content: center;
				padding-left: 8px;
				border-bottom: 1px solid var(--header-line);

				&.mouse-over {
					background-color: var(--record-hover);
				}

				img {
					display: block;
					padding-left: 4px;
				}
			}

			.copy {
				color: var(--copy-color) !important;

				span {
					color: var(--copy-color) !important;
				}
			}

			.fqdn {
				cursor: pointer;
				user-select: none;
				display: flex;
				padding: 0 16px 0 8px;
				border-bottom: 1px solid var(--header-line);
				height: 100%;
				align-items: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}

				&.created {
					* {
						color: #44aa00 !important;
						font-weight: bold;
					}
				}

				.subdomains {
					display: none;
				}

				&.match-subdomains {
					.subdomains {
						display: inline;
					}
				}

				.first-label {
					color: var(--label-first);
				}

				.rest-label {
					color: var(--label-rest);

					&.no-domain {
						font-style: italic;
					}
				}
			}

			.type {
				padding: 2px 8px;
				border-bottom: 1px solid var(--header-line);
				border-left: 1px solid var(--header-line);
				align-content: center;
				cursor: pointer;
				display: grid;
				justify-items: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}

				div {
					background-color: var(--record-other);
					color: #fff;

					padding: 4px 8px;
					border-radius: 4px;
					width: min-content;
					height: min-content;
					font-weight: bold;
					font-size: 0.85em;
				}

				&.A div {
					background-color: var(--record-A);
				}

				&.AAAA div {
					background-color: var(--record-AAAA);
				}

				&.CNAME div {
					background-color: var(--record-CNAME);
					color: #000;
				}

				&.FWD div {
					background-color: var(--record-FWD);
				}

				&.TXT div {
					background-color: var(--record-TXT);
					color: #000;
				}

				&.NXDOMAIN div {
					background-color: var(--record-NXDOMAIN);
				}
			}

			.value {
				cursor: pointer;
				user-select: none;
				border-left: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);
				padding: 0px 8px;
				height: 100%;
				align-content: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}
			}

			.ttl {
				cursor: pointer;
				border-left: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);
				padding: 0px 8px;
				height: 100%;
				align-content: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}
			}

			.actions {
				border-left: 1px solid var(--header-line);
				border-right: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);
				padding: 0px 8px;
				height: 100%;
				align-content: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}

				img {
					display: block;
					cursor: pointer;
				}
			}
		}

	}
}

#record-dialog {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 8px;
	align-items: center;

	.buttons {
		grid-column: 1 / -1;
		text-align: right;
	}

}

#settings-dialog {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 6px 8px;
	align-items: center;

	.buttons {
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 8px;
	}
}

#device-dialog {
	display: grid;
	grid-template-columns: min-content min-content;
	align-items: top;
	grid-gap: 16px;

	.devices {
		display: flex;
		flex-direction:column;
		gap: 8px;
		align-items: flex-start;

		.header {
			font-weight: bold;
		}

		.device {
			border: 1px solid #aaa;
			background-color: #f0f0f0;
			padding: 8px 16px;
			border-radius: 8px;
			cursor: pointer;
			user-select: none;

			&.selected {
				background-color: var(--header-background);
			}
		}
	}

	.fields {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px 16px;
		align-items: center;

		border: 1px solid #aaa;
		padding: 16px;

		.actions {
			grid-column: 1 / -1;
			justify-self: right;
		}
	}
}