:root {
	--border-color: #909090;
	--card-background: #fff;
	--card-box-shadow: 0 0 1rem .25rem rgba(0, 0, 0, .25);
	--container-border-radius: .25rem;
	--container-margin: 1.5rem;
	--container-padding: 1.5rem;
	--max-restricted-document-width: 40rem;
}

body {
	background: linear-gradient(to bottom right, #383838, #000);
	background-attachment: fixed;
	font-family: "Ideal Sans A", "Ideal Sans B", sans-serif;
	font-weight: 400;

	&.overflow-hidden {
		overflow: hidden;
	}
}

html {
	height: 100%;
}

strong {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Gotham A", "Gotham B", sans-serif;
	font-weight: 800;
}

a {
	color: #000;

	&:hover {
		color: #555;
	}
}

.header-nav {
	background-color: #333;
	color: white;
	padding: 10px;

	ul {
		margin: 0;
		list-style: none;
	}
}

button,
.button {
	background: #fff;
	border-radius: .125rem;
	border: .0625rem solid var(--border-color);
	box-shadow: .1875rem .1875rem 0 var(--border-color);
	color: #000;
	cursor: pointer;
	display: block;
	padding: .75rem;
	text-decoration: none;
	width: fit-content;

	&:hover {
		background: #ddd;
	}

	&:active {
		transform: translate(.125rem, .125rem);
	}
}

.button-icon {
	background: #ddd;
	border: none;
	box-shadow: none;
	padding: 0;
	line-height: 0;

	svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	&:hover {
		background: #bbb;
	}
}

.app-header {
	align-items: center;
	display: flex;
	margin: var(--container-margin);

	.logo {
		align-items: center;
		display: flex;
		text-decoration: none;

		img {
			height: 4rem;
		}
	}

	h1 {
		color: #fff;
		margin: 0 0 0 1rem;
	}

	nav {
		align-items: center;
		display: flex;
		gap: 1.5rem;
		margin-left: auto;

		a:not(.button) {
			color: #fff;

			&:hover {
				color: #dcdcdc;
			}
		}
	}
}

.back-link {
	align-items: center;
	color: #000;
	display: inline-flex;

	svg {
		height: 1.5rem;
		margin-right: .25rem;
	}

	&:hover {
		color: #555;
	}
}

.flash-group {
	display: flex;
	flex-direction: column;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;

	.flash-message {
		background: #fff;
		box-shadow:
			0 .125rem 0 0 rgba(0, 0, 0, .125),
			0 -.125rem 0 0 rgba(0, 0, 0, .125);
		padding: 1rem 1.5rem 1rem 1rem;

		h4 {
			align-items: center;
			display: flex;
			font-weight: normal;
			margin: 0;
			padding-right: 1rem;

			svg {
				height: 1.25rem;
				margin-right: .125rem;
				transform: translateY(-.0625rem);
				width: 1.25rem;
			}
		}

		p {
			align-self: center;
			margin: 0;
		}

		button {
			position: absolute;
			top: 1rem;
			right: 1rem;
		}

		&[hidden] {
			display: none;
		}

		&.flash-info {
			h4 {
				svg {
					color: #0a0;
				}
			}
		}

		&.flash-error {
			h4 {
				svg {
					color: #a00;
				}
			}
		}
	}
}

.section-card {
	background: var(--card-background);
	border-radius: var(--container-border-radius);
	box-shadow: var(--card-box-shadow);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: var(--container-margin);
	padding: var(--container-padding);
}

.section-form {
	background: #f0f0f0;
	border-radius: var(--border-radius-container);
	box-shadow: 0 0 .25rem 0 rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	grid-column-start: 2;
	grid-row: 1 / 3;
	padding: 1.5rem;

	label {
		display: flex;
		flex-direction: column;

		input {
			border-radius: .125rem;
			border: .0625rem solid var(--border-color);
			padding: .25rem;
			margin-top: .5rem;
		}

		select {
			margin-top: .5rem;
		}

		p {
			margin: .375rem 0 0;

			&.error {
				color: #e00;

				.icon {
					font-size: .75rem;
				}
			}
		}

		&:has([type="checkbox"]) {
			flex-direction: row;
			gap: .5rem;
			width: fit-content;

			input {
				margin: .1875rem 0 0;
			}
		}
	}
}

.section-header {
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto;

	h2 {
		margin: 0;
	}

	.actions {
		grid-column-start: 2;
		grid-row-start: 1;
	}

	p {
		grid-column-end: span 2;
	}
}

.section-modal {
	align-items: center;
	background: rgba(0, 0, 0, .5);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;

	.section-header {
		margin-bottom: 1rem;
	}

	.section-modal-card {
		background: #fff;
		border-radius: var(--container-border-radius);
		box-shadow: var(--card-box-shadow);
		padding: var(--container-padding);
		position: relative;
		width: 100%;
		max-width: 40rem;

		.section-modal-close {
			position: absolute;
			right: 1rem;
			top: 1rem;
		}

		h3 {
			margin: 0;
		}
	}
}

.section-table {
	th {
		text-align: left;
	}
}
