:root {
	--bg: #ffffff;
	--fg: #1d1f23;
	--muted: #6b7078;
	--line: #dde0e4;
	--hover: #f3f5f8;
	--keep: #eef4ff;
	--errors: #fde4e4;
	--flash: #fff35c;
	--save: #1e8e3e;
	--discard: #c5221f;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 14px;
	color: var(--fg);
	background: var(--bg);
}

body {
	margin: 0;
}

header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

header select {
	font-size: 15px;
	padding: 4px 8px;
}

.spacer {
	flex: 1;
}

.status {
	color: var(--muted);
}

.logout {
	color: var(--muted);
}

main {
	padding: 8px 16px 40px;
}

button {
	font: inherit;
	padding: 4px 12px;
	cursor: pointer;
}

/*
 * Fit columns are as wide as their widest value and are never truncated.
 * The other columns share what is left: max-width: 0 lets them shrink
 * below their content, which is then cut off with an ellipsis (or
 * wrapped, for wrap columns).
 */
table {
	width: 100%;
	border-collapse: collapse;
}

th {
	text-align: left;
	color: var(--muted);
	font-weight: 600;
	padding: 6px 8px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

th.fit,
td.fit {
	width: 1%;
	max-width: none;
	overflow: visible;
	white-space: nowrap;
}

td.wrap {
	white-space: pre-wrap;
	word-break: break-word;
}

h2 {
	font-size: 15px;
	margin: 20px 0 6px;
}

tr.row {
	cursor: pointer;
}

tr.row:hover {
	background: var(--hover);
}

tr.row.keep {
	background: var(--keep);
}

tr.row.errors {
	background: var(--errors);
}

tr.static {
	cursor: default;
}

@keyframes flash {
	from {
		background-color: var(--flash);
	}
}

tr.flash {
	animation: flash 2s ease-out;
}

tr.editor > td {
	max-width: none;
	white-space: normal;
	background: var(--hover);
	padding: 12px;
}

.edit-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 8px 12px;
	align-items: start;
}

.edit-grid label {
	padding-top: 4px;
	color: var(--muted);
}

.edit-grid input[type=text],
.edit-grid input[type=password],
.edit-grid select,
.edit-grid textarea {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 6px;
}

.edit-grid textarea {
	min-height: 6em;
	font-family: ui-monospace, monospace;
}

.edit-grid input[type=checkbox] {
	justify-self: start;
	margin-top: 6px;
}

.buttons {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
}

button.save {
	color: #fff;
	background: var(--save);
	border: 1px solid var(--save);
}

button.discard {
	color: #fff;
	background: var(--discard);
	border: 1px solid var(--discard);
}

.error {
	color: var(--discard);
}

.error-box {
	margin-top: 10px;
	padding: 8px 12px;
	border: 2px solid var(--discard);
	border-radius: 4px;
	background: var(--errors);
	font-weight: 600;
}

.error-box[hidden] {
	display: none;
}

.error-box ul {
	margin: 0;
	padding-left: 18px;
}

.error-box li {
	margin: 2px 0;
	white-space: pre-wrap;
}

.message {
	color: var(--muted);
}

.levelERROR {
	color: var(--discard);
	font-weight: 600;
}

.levelDEBUG {
	color: var(--muted);
}

body.login {
	display: flex;
	justify-content: center;
	padding-top: 15vh;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 280px;
}

.login-form input {
	font: inherit;
	padding: 6px 8px;
}