* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--secondary) var(--harmony-tertiary);

	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-track {
		border-radius: 10px;
		background: var(--primary);
	}

	&::-webkit-scrollbar-track:hover {
		background: var(--contrast);
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: var(--secondary);
	}

	&::-webkit-scrollbar-thumb:hover {
		background: var(--contrast);
	}
}

html, body {
	margin: 0;
	padding: 0;
	border: none;
	scrollbar-width: none;
}

html {
	--hue: 60;
	--sat: 15;
	--lum: 85;
}

body {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 40px minmax(calc(100vh - 40px), auto) min-content;

	&:has(header:empty) {
		display: none;
	}
}

header {
	background: var(--primary);
	color: var(--contrast);
	fill: var(--contrast);
	stroke: var(--contrast);
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	/* prevent overlapping by other non-staticly positioned elements */
	z-index: 999999;

	&::after {
		content: '';
		background: var(--secondary);
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		height: 2px;
	}

	& nav ul {
		list-style: none;
	}

	#user {
		cursor: pointer;
	}

	#user, & nav ul {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 0;
		border: none;
	}

	#user, & nav ul li {
		&:hover {
			opacity: 0.8;
		}
	}

	#user-icon, #user-info, & li {
		margin: 7px 4px 1px 4px;
	}

	#user-info {
		font-family: sans-serif;
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}

main {
	background: var(--harmony-primary);
	color: var(--contrast);

	&#error {
		user-select: none;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}

	.data-container {
		box-sizing: border-box;

		* {
			box-sizing: border-box;
		}

		& table {
			border-collapse: collapse;
			color: var(--contrast);

			& thead, & tbody, & tr, & td, & th {
				border-collapse: collapse;
			}

			& th {
				background: var(--primary);
				
				&[data-sort=asc]::after {
					content: '▲'attr(data-order);
				}

				&[data-sort=desc]::after {
					content: '▼'attr(data-order);
				}
			}

			& tr:nth-child(even)>td {
				background: var(--harmony-tertiary);
			}

			& tr:nth-child(odd)>td {
				background: var(--harmony-secondary);
			}

			.boolean, .date, .string {
				text-align: left;
			}

			.check {
				text-align: center;
			}

			.integer, .index {
				text-align: right;
			}

			.actions {
				position: sticky;
				right: 0;
				text-align: center;
			}

			th:last-child {
				position: sticky;
				right: 0;
				top: 0;
				z-index: 2;
			}

			.index {
				background: var(--primary) !important;
				font-weight: bold;
				&:not(:empty)::after {
					content: '.';
				}
			}

			& th, & td {
				padding: 0.125em 0.375em;
			}
		}

		.toggle-filter button {
			margin: 8px;
			padding: 0.25em;
			background: var(--primary);
			border: solid 2px var(--secondary);
			color: var(--contrast);
			&:hover {
				background: var(--harmony-tertiary);
			}
		}

		.toggle-filter, .data-table, .data-filter {
			margin: 0;
			padding: 0;
		}

		.toggle-filter {
			@media (max-width: 520px) {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 2px 0;
				height: 40px;

				&:not([data-mode=table]) .filter,
				&:not([data-mode=filter]) .table,
				&:not([data-mode=table]) ~ .data-table,
				&:not([data-mode=filter]) ~ .data-filter {
					display: none;
				}
			}
			@media (min-width: 520px) {
				display: none;
			}
		}

		.data-table, .data-filter {
			@media (max-width: 520px) {
				height: calc(100vh - 80px);
			}

			@media (min-width: 520px) {
				height: calc(100vh - 40px);
			}
		}

		.data-content {
			@media (min-width: 520px) {
				width: 100%;
				display: grid;
				grid-template-columns: calc(100% - 270px) 270px;
			}
		}

		.data-table .table-container {
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: 2em calc(100% - 4em) 2em;
			align-items: center;
			width: 100%;
			height: 100%;

			& h2 {
				margin: 0;
				padding: 0.5em 0.5em 0 0.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			& section {
				margin: 0;
				padding: 0;
				overflow: auto;
				width: 100%;
				height: 100%;

				&.list {
					position: relative;
					overflow: auto;
					margin: 0.75em;
					width: min(calc(100% - 1.5em), 720px);
					height: calc(100% - 1.5em);

					& table {
						width: 100%;
					}

					& th {
						position: sticky;
						top: 0;
					}
				}

				&.pagination {
					display: flex;
					align-content: center;
					justify-content: center;
					gap: 0.5em;
					width: min(100%, 720px);

					@media (max-width: 300px) {
						& span:has(+select), & span:has(+input) {
							display:none;
						}
					}

					& input, & select {
						height: 24px;
						text-align: center;
						background: var(--harmony-secondary);
						border: solid 2px var(--secondary);
						color: var(--contrast);
						outline: none;

						&:focus {
							background: var(--harmony-secondary);
							border-color: var(--secondary);
						}
						&:hover {
							background: var(--harmony-secondary);
							border-color: var(--primary);
						}
					}
				}
			}
		}

		.data-filter .filter-container {
			@media (min-width: 520px) {
				background: var(--harmony-tertiary);
			}
			@media (max-width: 520px) {
				.body {
					background: var(--harmony-secondary);
				}
			}
			color: var(--contrast);
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: 3em calc(100% - 6em) 3em;
			border-left: solid 2px var(--primary);

			& h2 {
				margin: 0;
				font-size: 22px;
				padding: 0 0.5em;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				color: var(--contrast);
			}

			.body {
				overflow-y: auto;
				@media (min-width: 520px) {
					background: var(--harmony-secondary);
				}

				& ul {
					list-style: none;
					margin: 0.25em 0;
					padding: 0;

					&.col > li > div {
						background: var(--primary);
						padding: 0.125em 0.375em;
						color: var(--contrast);
						font-weight: 700;
					}
					&.op > li > div {
						font-weight: 600;
						font-style: italic;
						padding: 0 0.35em;
						&::after { content: ':'; }
					}
					&.val li {
						display: flex;
						background: var(--harmony-primary);
						margin: 0.25em 0;
						padding: 0.125em 0.25em;

						& div:not(:last-child) {
							flex-grow: 1;
						}
					}
				}
			}

			.header {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.footer svg {
				stroke: var(--contrast);
				width: 48px;
				height: 48px;
				cursor: pointer;

				&:hover {
					stroke: var(--secondary);
				}
			}
		}
	}
}

footer {
	background: var(--contrast);
	color: var(--harmony-primary);
	text-align: center;
	padding: 0.5em;
	margin: 0;
	border: none;

	& a {
		color: var(--primary);

		&:hover {
			color: var(--harmony-tertiary);
		}

		&:active {
			color: var(--harmony-secondary);
		}
	}
}