@import url(../core/fonts.css);

:root {
	--latte-rosewater: hsl(11deg, 59%, 67%);
	--latte-flamingo: hsl(0deg, 60%, 67%);
	--latte-pink: hsl(316deg, 73%, 69%);
	--latte-mauve: hsl(266deg, 85%, 58%);
	--latte-red: hsl(347deg, 87%, 44%);
	--latte-maroon: hsl(355deg, 76%, 59%);
	--latte-peach: hsl(22deg, 99%, 52%);
	--latte-yellow: hsl(35deg, 77%, 49%);
	--latte-green: hsl(109deg, 58%, 40%);
	--latte-teal: hsl(183deg, 74%, 35%);
	--latte-sky: hsl(197deg, 97%, 46%);
	--latte-sapphire: hsl(189deg, 70%, 42%);
	--latte-blue: hsl(220deg, 91%, 54%);
	--latte-lavender: hsl(231deg, 97%, 72%);
	--latte-text: hsl(234deg, 16%, 35%);
	--latte-subtext-1: hsl(233deg, 13%, 41%);
	--latte-subtext-0: hsl(233deg, 10%, 47%);
	--latte-overlay-2: hsl(232deg, 10%, 53%);
	--latte-overlay-1: hsl(231deg, 10%, 59%);
	--latte-overlay-0: hsl(228deg, 11%, 65%);
	--latte-surface-2: hsl(227deg, 12%, 71%);
	--latte-surface-1: hsl(225deg, 14%, 77%);
	--latte-surface-0: hsl(223deg, 16%, 83%);
	--latte-base: hsl(220deg, 23%, 95%);
	--latte-mantle: hsl(220deg, 22%, 92%);
	--latte-crust: hsl(220deg, 21%, 89%);

	--macchiato-rosewater: hsl(10deg, 58%, 90%);
	--macchiato-flamingo: hsl(0deg, 58%, 86%);
	--macchiato-pink: hsl(316deg, 74%, 85%);
	--macchiato-mauve: hsl(267deg, 83%, 80%);
	--macchiato-red: hsl(351deg, 74%, 73%);
	--macchiato-maroon: hsl(355deg, 71%, 77%);
	--macchiato-peach: hsl(21deg, 86%, 73%);
	--macchiato-yellow: hsl(40deg, 70%, 78%);
	--macchiato-green: hsl(105deg, 48%, 72%);
	--macchiato-teal: hsl(171deg, 47%, 69%);
	--macchiato-sky: hsl(189deg, 59%, 73%);
	--macchiato-sapphire: hsl(199deg, 66%, 69%);
	--macchiato-blue: hsl(220deg, 83%, 75%);
	--macchiato-lavender: hsl(234deg, 82%, 85%);
	--macchiato-text: hsl(227deg, 68%, 88%);
	--macchiato-subtext-1: hsl(228deg, 39%, 80%);
	--macchiato-subtext-0: hsl(227deg, 27%, 72%);
	--macchiato-overlay-2: hsl(228deg, 20%, 65%);
	--macchiato-overlay-1: hsl(228deg, 15%, 57%);
	--macchiato-overlay-0: hsl(230deg, 12%, 49%);
	--macchiato-surface-2: hsl(230deg, 14%, 41%);
	--macchiato-surface-1: hsl(231deg, 16%, 34%);
	--macchiato-surface-0: hsl(230deg, 19%, 26%);
	--macchiato-base: hsl(232deg, 23%, 18%);
	--macchiato-mantle: hsl(233deg, 23%, 15%);
	--macchiato-crust: hsl(236deg, 23%, 12%);

	--rosewater: var(--macchiato-rosewater);
	--flamingo: var(--macchiato-flamingo);
	--pink: var(--macchiato-pink);
	--mauve: var(--macchiato-mauve);
	--red: var(--macchiato-red);
	--maroon: var(--macchiato-maroon);
	--peach: var(--macchiato-peach);
	--yellow: var(--macchiato-yellow);
	--green: var(--macchiato-green);
	--teal: var(--macchiato-teal);
	--sky: var(--macchiato-sky);
	--sapphire: var(--macchiato-sapphire);
	--blue: var(--macchiato-blue);
	--lavender: var(--macchiato-lavender);
	--text: var(--macchiato-text);
	--subtext-1: var(--macchiato-subtext-1);
	--subtext-0: var(--macchiato-subtext-0);
	--overlay-2: var(--macchiato-overlay-2);
	--overlay-1: var(--macchiato-overlay-1);
	--overlay-0: var(--macchiato-overlay-0);
	--surface-2: var(--macchiato-surface-2);
	--surface-1: var(--macchiato-surface-1);
	--surface-0: var(--macchiato-surface-0);
	--base: var(--macchiato-base);
	--mantle: var(--macchiato-mantle);
	--crust: var(--macchiato-crust);

	--teal-lightened-0: hsl(171deg, 44%, 98%);

	--fonts-industrial:
		DINish, OpenMoji, "DIN Alternate", Bahnschrift, "Franklin Gothic Medium",
		"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;

	--fonts-main: var(--fonts-industrial);
	--fonts-heading: var(--fonts-industrial);
}

:root,
html[data-theme="light"] {
	--fg-rosewater: var(--latte-rosewater);
	--fg-flamingo: var(--latte-flamingo);
	--fg-pink: var(--latte-pink);
	--fg-mauve: var(--latte-mauve);
	--fg-red: var(--latte-red);
	--fg-maroon: var(--latte-maroon);
	--fg-peach: var(--latte-peach);
	--fg-yellow: var(--latte-yellow);
	--fg-green: var(--latte-green);
	--fg-teal: var(--latte-teal);
	--fg-sky: var(--latte-sky);
	--fg-sapphire: var(--latte-sapphire);
	--fg-blue: var(--latte-blue);
	--fg-lavender: var(--latte-lavender);
	--fg-text: var(--latte-text);
	--fg-subtext-1: var(--latte-subtext-1);
	--fg-subtext-0: var(--latte-subtext-0);
	--fg-overlay-2: var(--latte-overlay-2);
	--fg-overlay-1: var(--latte-overlay-1);
	--fg-overlay-0: var(--latte-overlay-0);
	--fg-surface-2: var(--latte-surface-2);
	--fg-surface-1: var(--latte-surface-1);
	--fg-surface-0: var(--latte-surface-0);
	--fg-base: var(--latte-base);
	--fg-mantle: var(--latte-mantle);
	--fg-crust: var(--latte-crust);

	--darkened-bg: var(--teal-lightened-0);
	--accent: var(--base);

	--primary: var(--green);
	--secondary: var(--green);

	--link-fg: var(--surface-0);
	--link-selected-fg: var(--surface-0);
	--link-hover-color: var(--overlay-0);

	--header-color: var(--accent);
	--header-link-color: var(--accent);

	--button-bg: var(--primary);
	--button-hover-bg: var(--teal);
	--default-button-hover-bg: var(--teal);

	--breadcrumbs-fg: var(--base);
	--breadcrumbs-link-fg: var(--surface-1);
	--breadcrumbs-bg: var(--green);

	--message-success-bg: var(--teal);

	--selected-row: var(--teal-lightened-0);
}

html[data-theme="dark"] {
	--fg-rosewater: var(--macchiato-rosewater);
	--fg-flamingo: var(--macchiato-flamingo);
	--fg-pink: var(--macchiato-pink);
	--fg-mauve: var(--macchiato-mauve);
	--fg-red: var(--macchiato-red);
	--fg-maroon: var(--macchiato-maroon);
	--fg-peach: var(--macchiato-peach);
	--fg-yellow: var(--macchiato-yellow);
	--fg-green: var(--macchiato-green);
	--fg-teal: var(--macchiato-teal);
	--fg-sky: var(--macchiato-sky);
	--fg-sapphire: var(--macchiato-sapphire);
	--fg-blue: var(--macchiato-blue);
	--fg-lavender: var(--macchiato-lavender);
	--fg-text: var(--macchiato-text);
	--fg-subtext-1: var(--macchiato-subtext-1);
	--fg-subtext-0: var(--macchiato-subtext-0);
	--fg-overlay-2: var(--macchiato-overlay-2);
	--fg-overlay-1: var(--macchiato-overlay-1);
	--fg-overlay-0: var(--macchiato-overlay-0);
	--fg-surface-2: var(--macchiato-surface-2);
	--fg-surface-1: var(--macchiato-surface-1);
	--fg-surface-0: var(--macchiato-surface-0);
	--fg-base: var(--macchiato-base);
	--fg-mantle: var(--macchiato-mantle);
	--fg-crust: var(--macchiato-crust);

	--body-bg: var(--base);
	--darkened-bg: var(--surface-0);
	--accent: var(--rosewater);

	--primary: var(--surface-2);
	--secondary: var(--surface-2);

	--link-fg: var(--teal);
	--link-selected-fg: var(--teal);
	--link-hover-color: var(--surface-2);

	--header-color: var(--accent);
	--header-link-color: var(--accent);

	--button-bg: var(--lime);
	--button-hover-bg: var(--lime-medium);
	--default-button-hover-bg: var(--green-medium);

	--breadcrumbs-fg: var(--teal-lightened-0);
	--breadcrumbs-link-fg: var(--text);
	--breadcrumbs-bg: var(--surface-1);

	--message-success-bg: var(--lime-light);

	--selected-row: var(--lime-light);
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--fg-rosewater: var(--macchiato-rosewater);
		--fg-flamingo: var(--macchiato-flamingo);
		--fg-pink: var(--macchiato-pink);
		--fg-mauve: var(--macchiato-mauve);
		--fg-red: var(--macchiato-red);
		--fg-maroon: var(--macchiato-maroon);
		--fg-peach: var(--macchiato-peach);
		--fg-yellow: var(--macchiato-yellow);
		--fg-green: var(--macchiato-green);
		--fg-teal: var(--macchiato-teal);
		--fg-sky: var(--macchiato-sky);
		--fg-sapphire: var(--macchiato-sapphire);
		--fg-blue: var(--macchiato-blue);
		--fg-lavender: var(--macchiato-lavender);
		--fg-text: var(--macchiato-text);
		--fg-subtext-1: var(--macchiato-subtext-1);
		--fg-subtext-0: var(--macchiato-subtext-0);
		--fg-overlay-2: var(--macchiato-overlay-2);
		--fg-overlay-1: var(--macchiato-overlay-1);
		--fg-overlay-0: var(--macchiato-overlay-0);
		--fg-surface-2: var(--macchiato-surface-2);
		--fg-surface-1: var(--macchiato-surface-1);
		--fg-surface-0: var(--macchiato-surface-0);
		--fg-base: var(--macchiato-base);
		--fg-mantle: var(--macchiato-mantle);
		--fg-crust: var(--macchiato-crust);

		--body-bg: var(--base);
		--darkened-bg: var(--surface-0);
		--accent: var(--rosewater);

		--primary: var(--surface-2);
		--secondary: var(--surface-2);

		--link-fg: var(--teal);
		--link-selected-fg: var(--teal);
		--link-hover-color: var(--surface-2);

		--header-color: var(--accent);
		--header-link-color: var(--accent);

		--button-bg: var(--lime);
		--button-hover-bg: var(--lime-medium);
		--default-button-hover-bg: var(--green-medium);

		--breadcrumbs-fg: var(--teal-lightened-0);
		--breadcrumbs-link-fg: var(--text);
		--breadcrumbs-bg: var(--surface-1);

		--message-success-bg: var(--lime-light);

		--selected-row: var(--lime-light);
	}
}

body,
input,
textarea,
select,
.form-row p,
form .button {
	font-family: var(--fonts-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fonts-heading);
}

.main {
	position: relative;

	button#toggle-nav-sidebar {
		border-radius: 100%;
		height: 1.75rem;
		left: 0.25rem;
		position: absolute;
		top: -2rem;
		width: 1.75rem;

		&::before {
			position: absolute;
			top: 1px;
		}
	}
}

h2,
.breadcrumbs {
	word-wrap: break-word;
}

#site-name {
	font-weight: 700;
	font-stretch: 125%;
}

@media screen and (min-width: 768px) {
	.change-form .submit-row,
	.add-form .submit-row {
		bottom: 0.5rem;
		box-shadow: 0 1px 4px -1px #0007;
		position: sticky;
		z-index: 10;
	}

	.paginator {
		position: sticky;
		bottom: 0;
	}
}

#user-tools a:focus,
#user-tools a:hover {
	border-bottom-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

.checkbox-row {
	height: 100%;
	align-items: center;
}

input,
textarea,
select,
.form-row p,
form .button {
	margin-bottom: 0;
}

form .aligned p.help,
form .aligned div.help {
	margin: 0 0 0 0;
	padding: 0;
}

/* django does not assign a class to these... so we need a more complex selector. */
div:has(
		> .flex-container
			> :is(
				input,
				textarea,
				.related-widget-wrapper,
				select,
				button,
				.readonly
			),
		> .flex-container.fieldBox
	) {
	display: grid; /* grid layout, so we have full control over the layout of all elements in this div */
	gap: 0.5rem;
	grid-template-columns: auto 1fr;

	> .help {
		grid-column: 2;
	}

	> .flex-container {
		align-items: center;
		display: grid;
		grid-column: span 2;
		grid-template-columns: subgrid;
	}

	input {
		height: fit-content;
	}
}

div:has(
		> .flex-container > :is(.vLargeTextField, .vXMLLargeTextField, .CodeMirror)
	) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	grid-column: span 4;

	> .flex-container {
		display: contents;
	}
}

.form-row:not(:has(> .form-multiline)),
.form-row > .form-multiline {
	align-items: start;
	column-gap: 1rem;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 2rem;

	&:not(:has(.help)) {
		align-items: center;
	}

	> div:has(.vTextField, .vUUIDField) {
		grid-column: span 2;
	}

	> div {
		padding-bottom: 0;
	}
}

@media screen and (min-width: 768px) {
	.form-row:not(:has(> .form-multiline)),
	.form-row .form-multiline {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 1280px) {
	.form-row:not(:has(> .form-multiline)),
	.form-row .form-multiline {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.vTextField,
.vUUIDField {
	width: unset;
}

.colM .aligned .vLargeTextField,
.colM .aligned .vXMLLargeTextField {
	width: auto;
}

.checkbox-row {
	flex-direction: row-reverse;
}

.aligned .vCheckboxLabel,
.vCheckboxLabel {
	padding: 0 10px 0 0;
}

.vIntegerField,
.vBigIntegerField {
	width: auto;
	box-sizing: border-box;
}

label,
.aligned label {
	align-items: center;
	display: flex;
	justify-content: start;
	min-width: unset;
	padding: 0;
	width: unset;
}

fieldset {
	margin-bottom: 1rem;
}

.form-row {
	padding-block: 1rem !important;

	&:last-child {
		border-bottom: none;
	}
}

fieldset .fieldBox,
.fieldBox {
	align-items: center;
	margin: 0 !important;
	min-height: 1.875rem;
}

.main.shifted > #nav-sidebar {
	border-top: 0;
	left: unset;
}

.custom-view .cancel-link {
	background: var(--close-button-bg);
	border-radius: 4px;
	color: var(--button-fg);
	float: left;
	height: 35px;
	line-height: 15px;
	margin: 0;
	padding: 10px 15px;
}

.object-tools {
	/* max-width: 50%; */
	float: none;
	margin-top: 0;
}

.object-tools li {
	height: unset;
	margin: 0 0.25rem 0.25rem;
}

.object-tools input,
.object-tools a {
	margin: 0;
}

.object-tools input:focus,
.object-tools input:hover {
	background-color: var(--object-tools-hover-bg);
}
.object-tools input {
	background: var(--object-tools-bg);
	border-radius: 15px;
	color: var(--object-tools-fg);
	display: block;
	float: left;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 20px;
	padding: 3px 12px;
	text-transform: uppercase;
}

#content-main {
	display: flex;
	flex-direction: column;
}

.protocol__unknown-meta dd {
	padding-left: 0.5rem;
}

@keyframes wiggle2 {
	10% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(1rem);
	}
	30% {
		transform: translateX(-1rem);
	}
	40% {
		transform: translateX(1rem);
	}
	50% {
		transform: translateX(-1rem);
	}
	60% {
		transform: translateX(0);
	}
}

@keyframes wiggle {
	10% {
		transform: scale(1) rotate(0);
	}
	20% {
		transform: scale(1.2) rotate(0);
	}
	30% {
		transform: scale(1.2) rotate(15deg);
	}
	40% {
		transform: scale(1.2) rotate(-15deg);
	}
	50% {
		transform: scale(1.2) rotate(15deg);
	}
	60% {
		transform: scale(1) rotate(0);
		color: var(--red);
	}
	70% {
		transform: scale(1) rotate(0);
		color: var(--yellow);
	}
	80% {
		transform: scale(1) rotate(0);
		color: var(--red);
	}
	90% {
		transform: scale(1) rotate(0);
		color: var(--yellow);
	}
	100% {
		transform: scale(1) rotate(0);
		color: var(--red);
	}
}

.wigglepower {
	animation: 2s 6s 2 forwards wiggle;
	color: var(--red);
	display: inline-block;
	transform-origin: center;
}

.CodeMirror {
	border-radius: 4px;
	border: 1px solid var(--border-color);
	height: 500px;
	width: 100%;
}