.action-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;

	padding: 1rem .5rem;

	& > button {
		width: 10rem;

		display: flex;
		justify-content: center;
		align-items: center;
		gap: .75rem;

		padding: .5rem;
		border-radius: 4px;
		background-color: var(--color-gray);
		color: var(--color-light);

		transition:
			background-color 150ms ease-in-out,
			box-shadow 150ms ease-in-out;

		&:hover {
			background-color: var(--color-light-gray);
			box-shadow: var(--default-shadow);
		}
		
		&.submit-error {
			background-color: var(--color-error);
		}

		& > svg {
			height: 1.8rem;
			width: 2rem;
		}
	}
}

#grid-container {
	--grid-spacing: 1.25rem;

	width: min(100%, 80rem + 3 * var(--grid-spacing));
	margin-inline: auto;

	display: grid;
	grid-template: auto auto auto auto / 1fr 1fr;
	gap: var(--grid-spacing);

	padding: var(--grid-spacing);
	padding-bottom: 3rem;
}

#grid-container > section {
	max-height: 40rem;
	min-width: 0;

	border-radius: 4px;
	border: 3px solid var(--color-gray);
	background-color: var(--color-dark);

	box-shadow: 0px 0px 8px 3px rgba(0 0 0 / 0.8);
}

h2 {
	padding: .4rem .75rem;
	border-bottom: 1px solid var(--color-gray);
}

.collaps-table {
	--min-width: 18rem;
	--max-width: 40rem;
	--header-width: 30%;
	--min-data-width: 15rem;
}

#power-section > .table-container {
	padding: 1rem;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

tr:has(:where(input, select).changed) label {
	color: var(--color-changed);
}

:where(input, select).changed,
div.input-style:has(input.changed) {
	border-color: var(--color-changed);
}

#backup-settings-section td:has(div.checked-input-container) {
	height: 6.6rem;
}

.add-item-container {
	margin: 1rem;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.entries-table {
	margin-inline: auto;
	margin-bottom: 1rem;

	width: clamp(22rem, 100%, 40rem);
}

#user-table td:first-child {
	width: 100%;
}

#user-table td:last-child {
	width: 6rem;
}

#backup-table {
	width: clamp(30rem, 100%, 40rem);
}

#backup-table td:first-child {
	width: 100%;
}

#backup-table td:nth-child(2) {
	text-wrap-mode: nowrap;
}

#add-user-form,
#edit-user-form {
	width: 16rem;
	height: 8rem;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}

#edit-user-form:has(div.hidden) {
	height: unset;
}

dialog span {
	font-weight: bold;
}

dialog:where(#upload-db-dialog, #import-db-dialog) {
	--max-height: 25rem;
}

:where(#upload-db-dialog, #import-db-dialog) .dialog-content > p {
	padding-inline: 1rem;
	text-align: center;
}

#upload-db-form tr:first-child td:last-child {
	height: 6.1rem;
}

#reset-settings-dialog .dialog-content {
	height: calc(100% - 2 * 3.2rem);
	justify-content: flex-start;
	overflow-y: auto;
}

#reset-settings-form {
	width: 100%;
}

#reset-table {
	max-width: 30rem;
}

@media (max-width: 24rem) {
	.action-buttons button {
		width: 100%;

		&:last-of-type {
			flex-direction: row-reverse;
		}
	}
}

@media (max-width: 29rem) {
	.entries-table {
		--inline-padding: 0;
	}
}

@media (max-width: 52.25rem) {
	#grid-container {
		grid-template: repeat(8, auto) / 1fr;
		padding-bottom: var(--grid-spacing);
	}

	h2 {
		text-align: center;
		padding-inline: 0;
	}
}