:root {
	/* General UI */
	--inner: #000;
	--bg: #121212;
	--bg-secondary: #2f2f2f;
	--primary: #ddd;
	--secondary: #777;
	--link: #1c1;
	--link-hover: #1f1;

	/* Delete, cancel, etc. */
	--danger: #c11;
	--danger-hover: #f11;
	--warning: #cc1;
	--warning-hover: #ff1;

	/* Table stripes */
	--table-primary: #202020;
	--table-secondary: #292929;

	/* For the "Beta" and "Test env" text colors */
	--yellow: #ff0;
	--red: #f00;

	/* Fonts (duh) */
	--monospace-font: monospace;
	--font: system-ui;
	--font-size: 1rem;
	--table-font-size: 0.8rem;
}

/* General colors */

body {
	background-color: var(--bg);
	color: var(--primary);
	font-family: var(--font);
	max-width: 900px;
	margin: auto;
	word-wrap: break-word;
	text-align: justify;
	font-size: var(--font-size);
	line-height: 1.5;
}

hr {
	color: var(--secondary);
}

/* Custom focus */

a:focus {
	outline: none;
	text-decoration: underline;
}

/* Header */

h1 {
	text-align: center;
}

nav {
	display: flex;
	flex-direction: vertical;
}

.navitem:before {
	content: "|";
	padding: 0 0.25rem 0 0.25rem;
}

.navitem:first-child:before {
	content: "";
	padding: 0;
}

.navitem:last-child:before {
	content: "";
	padding: 0;
}

.navitem:last-child {
	margin-left: auto;
}

/* Links */

a, a:hover, a:active, a:visited {
	color: var(--link);
	text-decoration: none;
}

a:hover, a:active {
	color: var(--link-hover);
}

/* Text */

pre {
	margin: 0px;
	font-family: var(--monospace-font);
}

pre, code {
	font-family: var(--monospace-font);
	background-color: var(--bg-secondary);
	padding: 0.2rem 0.4rem;
	border-radius: 0.2rem;
}

pre > code {
	padding: 0;
}

ol, ul {
	padding-left: 1.5rem;
}

li {
	margin-top: 0.3rem;
}

/* Custom classes */

.right {
	float: right;
}

.center {
	text-align: center;
}

.danger, .danger:active, .danger:visited {
	color: var(--danger);
}

.danger a {
	border: 2px solid var(--secondary);
	padding: 0.2rem;
}

.danger a:focus {
	text-decoration: none;
	border: 2px solid var(--link);
}

.danger:hover {
	color: var(--danger-hover);
}

.warning, .warning:active, .warning:visited {
	color: var(--warning);
}

.warning a {
	border: 2px solid var(--secondary);
	padding: 0.2rem;
}

.warning a:focus {
	text-decoration: none;
	border: 2px solid var(--link);
}

.warning:hover {
		color: var(--warning-hover);
}

.diff-rem {
	color: var(--dif-rem);
}

.diff-add {
	color: var(--diff-add);
}

.select-all {
	user-select: all;
}

/* Table */

table {
	font-family: var(--monospace-font);
		font-size: var(--table-font-size);
		white-space: nowrap;
}

table pre {
		padding: 0;
		margin: 0;
}

th {
		padding: 0 1rem 0 0.5rem;
}

td {
	padding: 0 0.5rem 0 0.5rem;
	padding: 2px;
}

table tr:nth-child(odd) td {
	background-color: var(--table-primary);
}

table tr:nth-child(even) td {
	background-color: var(--table-secondary);
}

/* Custom classes for tables */

.unstyled tbody tr td {
	background-color: var(--bg);
	font-family: var(--font);
}

.table-container {
	overflow-x: auto;
	border: 1px dashed var(--secondary);
	scrollbar-color: var(--secondary) var(--bg);
	scrollbar-width: thin;
	font: var(--monospace-font);
}

.table-container table {
	width: 100%;
}

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

/* The zone editing CSS crimes */

.edit td.cell__editradio,
#editradioclose {
	display: none;
}
.edit input[type="text"] {
	cursor: text;
}

.edit tr:focus {
	outline: solid 1px var(--link);
}

.edit tr.row__exists td > label:first-of-type {
	display: block;
	white-space: pre;
	padding: 1px 0.5rem 1px 0.5rem;
	margin: 0;
	cursor: pointer;
}

.edit tr.row__new td > label:first-of-type {
	display: block;
	white-space: pre;
	color: var(--secondary);
	margin: 1px 0.5rem 1px 0.5rem;
	font-style: italic;
	cursor: pointer;
}

.edit table,
.edit input {
	width: 100%;
	font-family: var(--monospace-font);
}

.edit th {
	text-align: left;
	font-family: inherit;
	padding-left: 0.5rem;
}

.edit td {
	width: min-content;
	position: relative;
	padding: 0;
	vertical-align: top;
}

.edit td input {
	display: none;
	background-color: inherit;
	color: var(--primary);
	font-size: inherit;
	padding: 0 0 0 calc(0.5rem - 1px);
	margin: 0;
	box-sizing: border-box;
	border: 1px solid var(--primary);

	&:focus {
		border: 1px solid var(--link);
	}
}

.edit .settings {
	display: none;
	background-color: inherit;
	position: unset;
	padding: 1px 0 0 0.5rem;
	margin: 0 0 1px 0;
	text-align: left;
	border: none;
	cursor: pointer;

	&[value="Del"] {
		color: var(--danger);
	}
	&[value="Set"] {
		color: var(--link);
	}
	&[value="Del"]:hover {
		color: var(--danger-hover);
	}
	&[value="Set"]:hover {
		color: var(--link-hover);
	}
	&:focus {
		border: solid 1px currentColor;
		border-top: none;
		box-sizing: border-box;
		margin-bottom: 0;
		padding-left: calc(0.5rem - 1px);
	}
}

.edit label[for="editradioclose"] {
	display: none;
	position: absolute;
	bottom: 1px;
	right: 1px;
	height: calc(50% - 2px);
	padding: 1px calc(0.5rem - 1px) 0 0.5rem;
	color: var(--warning);
	cursor: pointer;

	&:hover {
		color: var(--warning-hover);
	}

	&:focus-visible {
		color: var(--warning);
		border: solid 1px var(--warning);
		border-top: none;
		outline: none;
		bottom: 0;
		right: 0;
	}
}

.edit tr:has( > td > input[name="editradios"]:checked) {
	& td > label:first-of-type {
		visibility: hidden; /*this is needed instead of display: none to keep width, since text input fields don't want to expand to their contents*/
		height: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	& .value input {
		box-sizing: border-box;
	}
	& input {
		display: block;
	}
	& label[for="editradioclose"] {
		display: block;
	}
	&:focus td {
		& input:first-of-type {
			border-top: none;
			padding-top: 1px;
		}
		&:nth-of-type(2) input:first-of-type{
			border-left: none;
			padding-left: 0.5rem;
		}
		&:last-of-type input:first-of-type{
			border-right: none;
		}
	}
}

/* Inputs */

input, textarea, select {
	color: var(--primary);
	background-color: var(--inner);
	border: 2px solid var(--secondary);
	font-size: inherit;
	padding: 0.2rem;
	margin: 1px 0 1px 0;
}

input[type="button"], input[type="submit"], select {
	background-color: var(--bg-secondary);
}

input[type="submit"] {
	margin-top: 0.5em;
	background-color: var(--bg-secondary);
}

.single-item input[type="submit"] {
	margin-top: 0;
}

input:hover, summary {
	cursor: pointer;
}

input:focus, textarea:focus, select:focus {
	border: 2px solid var(--link);
	outline: none;
}

input[type="checkbox"], input[type="radio"] {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--secondary);
	background-color: var(--bg-secondary);
}

input[type="checkbox"] {
	transform: translateY(0.3rem);
}

input[type="radio"] {
	border-radius: 50%;
	transform: translateY(20%);
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
	background: var(--link);
	box-shadow: inset 0 0 0 2px var(--bg);
}

input[type="checkbox"]:focus, input[type="radio"]:focus {
	border-color: var(--link);
}

textarea {
	width: 100%;
	height: 400px;
	font-family: var(--monospace-font);
	box-sizing: border-box;
	overflow-x: scroll;
	scrollbar-color: var(--secondary);
	scrollbar-width: thin;
	resize: vertical;
}

/* Confirm dialog */

.confirm {
	display: flex;
	justify-content: space-between;
}

.confirm input {
	color: var(--danger);
	margin: 0;
}

.confirm input:hover {
	color: var(--danger-hover);
}

.confirm a {
	padding: 0.2rem;
	border: 2px solid var(--secondary);
	color: var(--primary);
	background-color: var(--bg-secondary);
}

.confirm a:focus {
	text-decoration: none;
	border: 2px solid var(--link);
}

/* tilted nav indicator */

.indicator {
	text-align: center;
	position: relative;
	top: -40px;
	right: -100px;
	rotate: -20deg;

	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;

	font-weight: bold;
}

.yellow {
	color: var(--yellow);
	text-shadow: 0px 0px 3px var(--secondary);
}

.red {
	color: var(--red);
	text-shadow: 0px 0px 4px var(--secondary);
}

/* mobile */

@media only screen and (max-width: 900px) {
	body {
		padding: 0 0.5rem 0 0.5rem;
	}
}

@media only screen and (max-width: 700px) {
	nav {
		flex-direction: column;
	}

	.navitem {
		margin: 0.25rem 0 0.25rem 0;
	}

	.navitem:before {
		content: "* ";
		padding: 0;
	}

	.navitem:last-child:before {
		content: "* ";
		padding: 0;
	}

	.navitem:last-child {
		margin-left: 0;
	}
}

.th-small {
	width: 40px;
}

/* Login form wrapper */

.login-wrap {
	width: 100%;
	max-width: 20em;
}

.login-wrap input[type="text"],
.login-wrap input[type="password"],
.login-wrap input[type="mail"] {
	width: 100%;
}

.login-wrap .single-line {
	display: flex;
	justify-content: space-between;
}

.graph {
	max-width: 100%;
	margin: auto;
	display: block;
}

.irc {
	text-decoration: underline;
	text-decoration-color: var(--secondary);
}