/*
 * MDLA Nextcloud login skin.
 * Scope: body#body-login only.
 */

:root {
	--mdla-void: #04070e;
	--mdla-panel: rgba(7, 13, 24, 0.82);
	--mdla-panel-top: rgba(13, 22, 38, 0.74);
	--mdla-cyan: #36c2ff;
	--mdla-cyan-hot: #7adcff;
	--mdla-ink: #eef7ff;
	--mdla-ink-soft: rgba(238, 247, 255, 0.72);
	--mdla-ink-faint: rgba(238, 247, 255, 0.48);
	--mdla-line: rgba(185, 224, 255, 0.22);
	--mdla-line-hot: rgba(54, 194, 255, 0.58);
}

body#body-login {
	min-height: 100vh !important;
	overflow: auto !important;
	color: var(--mdla-ink) !important;
	background:
		radial-gradient(circle at 50% 10%, rgba(54, 194, 255, 0.20), transparent 26%),
		radial-gradient(circle at 22% 78%, rgba(54, 194, 255, 0.11), transparent 24%),
		linear-gradient(135deg, #04070e 0%, #071321 46%, #02050a 100%) !important;
	background-attachment: fixed !important;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body#body-login::before {
	content: "";
	position: fixed;
	inset: 32px;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) top left / 96px 2px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) top left / 2px 96px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) top right / 96px 2px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) top right / 2px 96px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) bottom left / 96px 2px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) bottom left / 2px 96px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) bottom right / 96px 2px no-repeat,
		linear-gradient(var(--mdla-cyan), var(--mdla-cyan)) bottom right / 2px 96px no-repeat;
	opacity: 0.7;
	filter: drop-shadow(0 0 10px rgba(54, 194, 255, 0.42));
}

body#body-login::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(90deg, transparent 0 49%, rgba(54, 194, 255, 0.045) 50%, transparent 51%),
		linear-gradient(0deg, transparent 0 49%, rgba(54, 194, 255, 0.035) 50%, transparent 51%);
	background-size: 78px 78px;
	mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 78%);
}

body#body-login .wrapper {
	position: relative;
	z-index: 2;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	min-height: calc(100vh - 76px) !important;
	margin: 0 !important;
	padding: 84px 20px 48px !important;
}

body#body-login .wrapper::before,
body#body-login .wrapper::after,
body#body-login .v-align::before,
body#body-login .v-align::after {
	position: fixed;
	z-index: 1;
	pointer-events: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mdla-ink-faint);
}

body#body-login .wrapper::before {
	content: "TECHNOLOGIES IA - MDLA";
	top: 60px;
	left: 62px;
}

body#body-login .wrapper::after {
	content: "CLOUD - m1.websitesmdla.com";
	top: 60px;
	right: 62px;
	color: var(--mdla-cyan);
}

body#body-login .v-align::before {
	content: "ENCRYPTED - AES-256";
	bottom: 58px;
	left: 62px;
	color: var(--mdla-cyan);
}

body#body-login .v-align::after {
	content: "MMXXVI - SECURE UPLINK";
	bottom: 58px;
	right: 62px;
}

body#body-login .v-align {
	position: relative;
	z-index: 3;
	width: min(440px, calc(100vw - 36px)) !important;
	margin: 0 auto !important;
}

body#body-login header {
	margin: 0 0 34px !important;
}

body#body-login #header.header-guest {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 18px !important;
	height: auto !important;
}

body#body-login #header .logo {
	width: 94px !important;
	height: 72px !important;
	margin: 0 auto !important;
	background-image: url("../img/mdla-icon.png") !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	filter: drop-shadow(0 0 24px rgba(54, 194, 255, 0.55));
	animation: mdlaFloat 7s ease-in-out infinite;
}

body#body-login #header::after {
	content: "";
	width: 210px;
	height: 24px;
	display: block;
	background-image: url("../img/mdla-wordmark.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: drop-shadow(0 0 18px rgba(54, 194, 255, 0.25));
}

@keyframes mdlaFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

body#body-login .guest-content {
	width: 100% !important;
}

body#body-login .body-login-container,
body#body-login .guest-box:not(footer) {
	width: 100% !important;
	max-width: 440px !important;
	margin: 0 auto !important;
	padding: 46px 42px 38px !important;
	border: 1px solid var(--mdla-line) !important;
	border-radius: 6px !important;
	color: var(--mdla-ink) !important;
	background:
		linear-gradient(180deg, var(--mdla-panel-top), var(--mdla-panel)) !important;
	backdrop-filter: blur(20px) saturate(1.15) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
	box-shadow:
		inset 0 1px 0 rgba(238, 247, 255, 0.08),
		0 38px 96px rgba(0, 0, 0, 0.58),
		0 0 54px rgba(54, 194, 255, 0.09) !important;
}

body#body-login .guest-content > div {
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body#body-login .guest-box.login-box::before,
body#body-login .body-login-container::before {
	content: "Secure Access";
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 18px;
	padding-left: 0.36em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--mdla-cyan);
}

body#body-login #login {
	width: 100% !important;
	margin: 0 auto !important;
}

body#body-login #login form,
body#body-login form {
	width: 100% !important;
	max-width: none !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

body#body-login h1,
body#body-login h2,
body#body-login h3,
body#body-login p,
body#body-login label,
body#body-login .login-subtitle {
	color: var(--mdla-ink) !important;
	text-shadow: none !important;
}

body#body-login input[type="text"],
body#body-login input[type="password"],
body#body-login input[type="email"],
body#body-login input[type="tel"],
body#body-login .input-field__input {
	width: 100% !important;
	min-height: 52px !important;
	margin: 0 0 16px !important;
	padding: 0 18px !important;
	border: 1px solid var(--mdla-line) !important;
	border-radius: 6px !important;
	color: var(--mdla-ink) !important;
	background: rgba(4, 8, 15, 0.62) !important;
	box-shadow: none !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
}

body#body-login .input-field {
	width: 100% !important;
	margin: 0 0 16px !important;
}

body#body-login .input-field__main-wrapper {
	width: 100% !important;
	min-height: 52px !important;
	border: 1px solid var(--mdla-line) !important;
	border-radius: 6px !important;
	background: rgba(4, 8, 15, 0.62) !important;
	box-shadow: none !important;
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

body#body-login .input-field__main-wrapper:focus-within {
	border-color: var(--mdla-line-hot) !important;
	background: rgba(10, 18, 32, 0.72) !important;
	box-shadow:
		0 0 0 1px rgba(54, 194, 255, 0.25),
		0 0 28px rgba(54, 194, 255, 0.14) !important;
}

body#body-login .input-field__input {
	height: 52px !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body#body-login .input-field__label {
	top: -8px !important;
	left: 16px !important;
	max-width: calc(100% - 32px) !important;
	padding: 0 8px !important;
	border-radius: 999px !important;
	color: var(--mdla-ink-soft) !important;
	background: #0a121f !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 9px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	transform: none !important;
}

body#body-login input[type="password"].password-with-toggle,
body#body-login input[type="text"].password-with-toggle {
	padding-inline-end: 46px !important;
}

body#body-login input::placeholder {
	color: var(--mdla-ink-faint) !important;
	opacity: 1 !important;
}

body#body-login input[type="text"]:focus,
body#body-login input[type="password"]:focus,
body#body-login input[type="email"]:focus {
	border-color: var(--mdla-line-hot) !important;
	background: rgba(10, 18, 32, 0.72) !important;
	box-shadow:
		0 0 0 1px rgba(54, 194, 255, 0.25),
		0 0 28px rgba(54, 194, 255, 0.14) !important;
}

body#body-login button.toggle-password,
body#body-login #show {
	color: var(--mdla-ink-soft) !important;
	background-color: transparent !important;
	border: 0 !important;
}

body#body-login #remember_login,
body#body-login .remember-login-container {
	margin: 4px 0 24px !important;
	color: var(--mdla-ink-soft) !important;
	text-align: left !important;
}

body#body-login input[type="checkbox"].checkbox + label::before {
	border-color: rgba(238, 247, 255, 0.65) !important;
	background-color: rgba(4, 8, 15, 0.35) !important;
}

body#body-login input[type="checkbox"].checkbox:checked + label::before {
	border-color: var(--mdla-cyan) !important;
	background-color: var(--mdla-cyan) !important;
	box-shadow: 0 0 12px rgba(54, 194, 255, 0.48) !important;
}

body#body-login input[type="submit"],
body#body-login input.login,
body#body-login button.primary,
body#body-login .button.primary,
body#body-login .login-submit,
body#body-login #submit-wrapper input,
body#body-login button[data-login-form-submit],
body#body-login .button-vue--vue-primary {
	position: relative !important;
	width: 100% !important;
	min-height: 54px !important;
	margin: 8px 0 0 !important;
	border: 1px solid rgba(122, 220, 255, 0.48) !important;
	border-radius: 12px !important;
	color: var(--mdla-cyan-hot) !important;
	background:
		radial-gradient(circle at 20% 35%, rgba(196, 238, 255, 0.26), transparent 38%),
		radial-gradient(circle at 75% 72%, rgba(54, 194, 255, 0.22), transparent 42%),
		linear-gradient(180deg, rgba(122, 220, 255, 0.22), rgba(20, 120, 170, 0.22)) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.46),
		inset 0 -14px 36px rgba(54, 194, 255, 0.22),
		0 13px 34px rgba(0, 0, 0, 0.38),
		0 0 36px rgba(54, 194, 255, 0.22) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-style: italic !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	text-shadow: 0 0 12px rgba(54, 194, 255, 0.52) !important;
	transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease !important;
}

body#body-login button[data-login-form-submit] *,
body#body-login .button-vue--vue-primary * {
	color: var(--mdla-cyan-hot) !important;
	cursor: pointer !important;
}

body#body-login input[type="submit"]:hover,
body#body-login input.login:hover,
body#body-login button.primary:hover,
body#body-login .button.primary:hover {
	transform: translateY(-1px);
	border-color: rgba(196, 238, 255, 0.76) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.64),
		inset 0 -16px 40px rgba(54, 194, 255, 0.30),
		0 15px 42px rgba(0, 0, 0, 0.42),
		0 0 50px rgba(54, 194, 255, 0.40) !important;
}

body#body-login #alternative-logins,
body#body-login .login-additional,
body#body-login .two-factor-provider,
body#body-login .button-vue--tertiary,
body#body-login .button-vue--vue-tertiary,
body#body-login .button-vue--vue-tertiary-no-background {
	color: var(--mdla-ink-soft) !important;
	background: transparent !important;
	border-color: transparent !important;
	opacity: 1 !important;
}

body#body-login .button-vue--tertiary *,
body#body-login .button-vue--vue-tertiary *,
body#body-login .button-vue--vue-tertiary-no-background * {
	color: var(--mdla-ink-soft) !important;
	cursor: pointer !important;
}

body#body-login a,
body#body-login a:not(.button) {
	color: var(--mdla-cyan-hot) !important;
	text-decoration: none !important;
	text-shadow: 0 0 14px rgba(54, 194, 255, 0.24);
}

body#body-login a:hover,
body#body-login a:focus {
	color: #c8efff !important;
	text-decoration: none !important;
}

body#body-login footer.guest-box {
	position: relative !important;
	z-index: 3 !important;
	width: auto !important;
	max-width: min(520px, calc(100vw - 40px)) !important;
	margin: -38px auto 28px !important;
	padding: 10px 22px !important;
	border: 1px solid rgba(238, 247, 255, 0.18) !important;
	border-radius: 999px !important;
	color: var(--mdla-ink-soft) !important;
	background: rgba(238, 247, 255, 0.10) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
}

body#body-login footer.guest-box.hidden {
	display: block !important;
}

body#body-login footer.guest-box .info {
	margin: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
}

body#body-login footer.guest-box .info::before {
	content: "Technologies IA MDLA - Welcome to WebsitesMDLA";
	color: var(--mdla-ink) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
}

@media (max-width: 620px) {
	body#body-login::before {
		inset: 18px;
	}

	body#body-login .wrapper {
		min-height: calc(100vh - 34px) !important;
		padding: 54px 18px 56px !important;
	}

	body#body-login .wrapper::after,
	body#body-login .v-align::before {
		display: none;
	}

	body#body-login .wrapper::before,
	body#body-login .v-align::after {
		left: 28px;
		right: auto;
		font-size: 8px;
		letter-spacing: 0.22em;
	}

	body#body-login .wrapper::before {
		top: 30px;
	}

	body#body-login .v-align::after {
		bottom: 28px;
	}

	body#body-login .guest-content > div,
	body#body-login .body-login-container,
	body#body-login .guest-box:not(footer) {
		padding: 34px 24px 30px !important;
	}

	body#body-login .guest-content > div::after {
		font-size: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body#body-login #header .logo {
		animation: none;
	}
}