/* ==========================================================================
   NovaEngine admin
   Login. Loaded on its own, so it carries its own tokens and reset.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
	--main-background: #1B1B1F;
	--main-border: #E4E4E7;
	--main-border-strong: #D4D4D8;

	--highlight: #FF5E00;
	--highlight-hover: #E05300;
	--highlight-opp: #FFFFFF;

	--mouseover-highlight: #E05300;

	--top-background: #1B1B1F;
	--content-background: #FFFFFF;

	--input-background: #FFFFFF;
	--input-border: #D4D4D8;
	--input-border-focus: #008CBD;

	--text: #18181B;
	--text-muted: #71717A;
	--delete: #B91515;

	--radius: 10px;
	--radius-sm: 6px;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video, input {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	background-color: var(--main-background);
	font-family: "IBM Plex Sans", Roboto, system-ui, sans-serif;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--highlight);
	text-decoration: none;
}

a:hover { color: var(--highlight-hover); }

.hidden { display: none; }

/* @group Inputs */

input, textarea {
	width: 100%;
	margin: 0;
	font-size: 0.95rem;
	font-family: inherit;
	padding: 0.65em 0.75em;
	color: var(--text);
	border: 1px solid var(--input-border);
	background-color: var(--input-background);
	border-radius: var(--radius-sm);
	min-height: 2.6em;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}

textarea {
	resize: vertical;
	height: 200px;
}

select {
	margin: 0;
	padding: 0.65em 0.75em;
	height: 2.6em;
	width: 100%;
	box-sizing: border-box;
	font-size: 0.95rem;
	font-family: inherit;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	background-color: var(--input-background);
}

input:hover, fieldset select:hover {
	border-color: var(--main-border-strong);
	box-shadow: none;
	color: var(--text);
}

input:focus, select:focus {
	outline: none;
	border-color: var(--input-border-focus);
	box-shadow: 0 0 0 3px rgba(0, 140, 189, .14);
}

input.error {
	border-color: var(--delete) !important;
}

label.error {
	display: block;
	margin-top: 0.35em;
	font-size: 0.82em;
	color: var(--delete);
}

div.fElement {
	margin-bottom: 0.9em;
}

div.fElement label:not(.error) {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-muted);
}

/* @group The card */

section#topBar {
	margin-top: 0;
	padding-top: 14vh;
}

section#topBar div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	background: none;
	background-color: transparent;
	width: 360px;
	max-width: calc(100vw - 2.5em);
	height: auto;
	margin: 0 auto 1.4em auto;
}

section#topBar h1 {
	float: none;
	color: var(--highlight-opp);
	font-family: inherit !important;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-align: center;
	width: auto;
	line-height: 1.2;
	vertical-align: middle;

	background-image: url("/themes/nova.png");
	background-repeat: no-repeat;
	background-size: 28px;
	background-position: left center;
	padding-left: 40px;
}

section#topBar h1 strong {
	color: var(--highlight);
	font-size: inherit;
	font-weight: 600;
}

section#content {
	background-color: var(--content-background);
	display: block;
	width: 360px;
	max-width: calc(100vw - 2.5em);
	margin: auto;
	padding: 1.8em;
	border-radius: var(--radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

section#content input[type=submit] {
	background-color: var(--highlight);
	color: var(--highlight-opp);
	border: 0;
	border-radius: var(--radius-sm);
	margin-top: 0.6em;
	padding: 0.75em;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}

section#content input[type=submit]:hover {
	background-color: var(--mouseover-highlight);
}