/*
	Plain-CSS twin of Pages/Login/Login.razor.css and Pages/Login/LoginLayout.razor.css, for the
	static login form that paints before the .NET runtime exists.

	Every rule below is byte-for-byte the same declaration block as its scoped original; only the
	SELECTORS differ, and only where they have to:

	  * the `[b-xxxxxxxxxx]` scope attribute is gone - it is generated per build and a static file
	    cannot know it;
	  * `::deep` is Blazor scoped-CSS syntax and means nothing to a browser, so it is dropped;
	  * two selectors are NARROWED because without the scope attribute they would leak into the
	    whole app: bare `h1` becomes `#login-surface h1`, and the layout's bare `video, img`
	    becomes `#login-bg > *`.

	Nothing here may be "tidied". The reference screenshots in the login-baseline set are compared
	byte-for-byte, so a shorthand that computes to the same value but rounds differently is a
	regression.
*/

/*
	main.css:272 gives html, body and #app height:100%. The static host sits beside #app and needs
	the same, or #login's own height:100% resolves against an auto-height parent and the card is
	laid out several pixels narrower.
*/
#static-login {
	height: 100%;
}

#login {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

#login-surface h1 {
	color: white;
	padding: 7vh 1vw;
	font-weight: 400;
	font-size: MIN(1.5vw, 2.8vh);
}

#login :focus-visible {
	outline: 0;
}

#left svg {
	right: -40%;
	bottom: 10%;
	position: absolute;
	width: 130%;
}

#login-surface {
	display: flex;
	box-shadow: 0 0.3vh 1vh 0vh #ccc;
	padding: 1vh;
	border-radius: min(1vw, 1vh);
	min-height: 430px;
	align-self: center;
	background-color: white;
	width: 35%;
	min-width: 400px;
}

#login span.k-input-solid,
#login span.k-input-solid:focus {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 0;
	display: block;
	box-shadow: none;
}

#login span.k-form-error {
	position: absolute;
	top: -45%;
}

#left {
	background: linear-gradient(202.34deg, #5672B3 0%, #3A4D8F 100%);
	border-radius: min(1vw, 1vh);
	width: 40%;
	position: relative;
	overflow: hidden;
}

@media only screen and (max-width: 1200px) {
	#left {
		display: none;
	}
}

#form {
	height: 46vh;
	padding: MIN(3vh,3vw) MIN(1vw,1vh) 2% 4%;
	display: grid;
	width: 50%;
	min-width: 360px;
}

#form img {
	justify-self: center;
	max-height: MIN(18vh,18vw);
	max-width: MIN(25vh,25vw);
	padding-bottom: min(1vh, 1vw);
}

	#form img.default-logo {
		padding-top: min(4vh, 4vw);
		padding-bottom: min(4vh, 4vw);
	}

#login #btn-forgot {
	justify-self: left;
	height: 6vh;
	color: var(--kendo-color-primary);
	font-weight: bold;
}

#login .k-form-buttons {
	justify-content: right;
	padding-top: 2%;
}

#form .k-form-field {
	padding-bottom: 3vh;
	position: relative;
}

#left svg#cloud {
	top: 9vh;
	width: 31vh;
	right: MIN(-4vw, -16%);
}

#left svg#powered {
	bottom: 2vh;
	width: 9vw;
	left: 1vw;
}

/* --- LoginLayout.razor.css twin. #login-bg replaces the layout's scope attribute. --- */

#login-bg video,
#login-bg img,
#login-bg .login-background-fallback {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}

#login-bg .login-background-fallback {
	top: 0;
	left: 0;
	background-color: var(--layout-color-primary, #465D9E);
}

#login-bg img {
	width: 100%;
	/* The <video> above gets only the min-width/min-height pair, and for a replaced element that
	   pair preserves the intrinsic ratio and simply overflows - which is why the clip has always
	   looked right. This rule pins the image to the viewport WIDTH as well, so the two constraints
	   fight and the browser resolves them by stretching: measured 3.8x vertical squash on a
	   390x844 phone, 1.11x at 1440x900, exact only at 16:9. object-fit makes it crop like the
	   video instead of distorting. */
	object-fit: cover;
}

#login-bg .login-background-video {
	opacity: 0;
	transition: opacity .4s ease-in;
}

#login-bg .login-background-video.ready {
	opacity: 1;
}

/*
	The static form is removed from the DOM the moment Blazor renders, so it must not linger
	behind the app. Hidden rather than removed while a submit is in flight, so the browser keeps
	the credential fields alive for the password manager.
*/
#static-login[hidden] {
	display: none !important;
}