:root {
	--theme-color: #0080ff;
	--text-color: light-dark(black, whitesmoke);
	--bg-color: color-mix(in hsl, var(--theme-color), light-dark(whitesmoke, black) 80%);
	--table-bg: color-mix(in hsl, var(--theme-color), light-dark(whitesmoke, black) 40%);
	--table-stripes-bg: color-mix(in hsl, var(--theme-color), light-dark(white, black) 60%);

	box-sizing: border-box;
	color-scheme: light dark;
	font-size: 1.2rem;
	font-family: system-ui, sans-serif;
}

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

html, body { height: 100%; }

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: var(--bg-color);
	padding: 1rem;
	color: var(--text-color);

	& > svg:first-child {
		position: absolute;
		top: -1px;
		left: -1px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
}

h1, h2 {
	color: var(--theme-color);
	text-align: center;
}

svg:has(use) {
	width: 1rem;
	height: 1rem;
}

use { fill: currentColor; }

aside {
	display: flex;
	flex-wrap: wrap;
	justify-content: stretch;
	align-items: stretch;
	gap: 1rem;
}

fieldset {
	flex-grow: 1;
	margin-block: 1rem;
	border: solid 0.1rem var(--theme-color);
	border-radius: 1rem;

	legend {
		color: var(--theme-color);
		font-weight: bold;
		font-size: 1.5rem;
		text-align: center;
	}
}

form div {
	display: flex;
	flex-direction: column;
	align-items: start;

	&:has(button:only-child) { align-items: center; }
}

input, textarea, button {
	margin: 0.3rem;
	border: solid 0.1rem var(--theme-color);
	border-radius: 0.3rem;
	background-color: var(--bg-color);
	padding: 0.2rem 0.4rem;

	&:focus {
		outline: solid 0.1rem var(--text-color);
		outline-offset: 0.1rem;
	}
}

textarea { resize: none; }

button {
	background-color: var(--bg-color);
	color: var(--theme-color);
	font-weight: bold;
	font-size: large;

	&:has(svg:only-child) {
		display: inline-flex;
		padding: 0.2rem;
	}

	svg:only-child { pointer-events: none; }

	&:hover {
		border-color: var(--text-color);
		color: var(--text-color);
	}

	&:active {
		border-color: var(--bg-color);
		background-color: var(--text-color);
		color: var(--bg-color);
	}
}

#add-link-form {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(2, auto);
	grid-template-areas:
		'id url'
		'comment comment'
		'button button';
	justify-content: stretch;
	align-items: center;
	gap: 1rem;

	input, textarea { width: 100%; }

	#id-input-wrapper {
		grid-area: id;

		span {
			display: flex;
			width: 100%;
		}
	}
	#url-input-wrapper { grid-area: url; }
	#comment-input-wrapper { grid-area: comment; }
	#add-link-submit-wrapper { grid-area: button; }
}

#local-file-form {
	display: grid;
	position: relative;
	place-items: center;
	height: 100%;
	text-align: center;

	div {
		align-items: center;
		gap: 0.5rem;
	}

	p { margin: 0; }

	#drop-area {
		display: none;
		position: absolute;
		place-items: center;
		inset: 0;
		border: dashed thick var(--theme-color);
		border-radius: 1rem;
		background: radial-gradient(transparent, color-mix(in srgb, var(--theme-color), transparent));
		background-clip: content-box;
		padding: 0.2rem;
	}

	&[data-dragover] > div {
		display: none;
		pointer-events: none;
	}
	&[data-dragover] #drop-area { display: grid; }
}

#download-links-wrapper { text-align: center; }

main {
	flex-grow: 1;
	margin: 1rem;
	max-width: 100%;
	min-height: 15rem;
	max-height: 100%;
	overflow: auto;
}

a { color: inherit; }

table {
	width: 100%;

	thead {
		position: sticky;
		inset-block-start: 0;
		background-color: var(--table-bg);

		th[aria-sort] span {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;

			label { flex-grow: 1; }
		}
	}

	tbody {
		tr:has(td[colspan]) { text-align: center; }
		tr:nth-child(even) { background-color: var(--table-stripes-bg); }

		tr[data-color='0'] { color: light-dark(blueviolet, blueviolet); }
		tr[data-color='1'] { color: light-dark(coral, coral); }
		tr[data-color='2'] { color: light-dark(navy, cornflowerblue); }
		tr[data-color='3'] { color: light-dark(crimson, crimson); }
		tr[data-color='4'] { color: light-dark(darkslategray, darkseagreen); }
		tr[data-color='5'] { color: light-dark(deeppink, deeppink); }
		tr[data-color='6'] { color: light-dark(maroon, darkorange); }
		tr[data-color='7'] { color: light-dark(dodgerblue, dodgerblue); }
		tr[data-color='8'] { color: light-dark(firebrick, firebrick); }
		tr[data-color='9'] { color: light-dark(darkgreen, greenyellow); }
		tr[data-color-='0'] { color: light-dark(darkgoldenrod, goldenrod); }
		tr[data-color-='1'] { color: light-dark(seagreen, lightseagreen); }
		tr[data-color-='2'] { color: light-dark(mediumslateblue, mediumslateblue); }
		tr[data-color-='3'] { color: light-dark(orangered, orangered); }
		tr[data-color-='4'] { color: light-dark(royalblue, royalblue); }
		tr[data-color-='5'] { color: light-dark(tomato, tomato); }
		tr[data-color-='6'] { color: light-dark(steelblue, turquoise); }
		tr[data-color-='7'] { color: light-dark(olivedrab, yellowgreen); }

		td {
			padding: 0.5rem;
			min-width: fit-content;
			height: 2rem;
		}

		td:nth-child(1) {
			.cell-display {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				font-family: monospace;

				samp { flex-grow: 1; }
			}
		}

		td:nth-child(2) {
			max-width: 20ch;

			.cell-display {
				word-break: break-all;
				overflow-wrap: anywhere;
			}
		}

		td:nth-child(3) { .cell-display { text-align: center; } }

		td:nth-child(4) {
			max-width: 10rem;

			.cell-display {
				max-height: 6rem;
				overflow: auto;
				scrollbar-gutter: stable;
			}
		}

		td:nth-child(5), td:nth-child(6) { text-align: center; }

		.cell-edit {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: start;
			height: 100%;
		}

		tr:not([data-editing]) .cell-edit { display: none; }
		tr[data-editing] .cell-display { display: none; }
	}
}