/* --- QUADRIDENT --- CONTROLLING / PUB / CSS / PGS / APP.CSS --------------------------------------------------- */

/* --- APP MAIN --- COMMON ELEMENTS ---------------------------------------------------------------------------------------- */

.center-content
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: row									;
	justify-content		: center								;
}

/* --- APP MAIN --- STRUCTURAL ELEMENTS ------------------------------------------------------------------------------------ */

#login , #loading , #content
{
	height				: 100dvh 								;
	position			: relative								;
	width				: 100%									;
	z-index				: 0										;
}

/* a percentage already resolves in the scaled space , only the absolute height needs the division */

#content
{
	height				: calc(100dvh / var(--qd-zoom, 1))		;
	width				: 100%									;
	zoom				: var(--qd-zoom, 1)						;
}

#error-screen
{
	align-items			: center								;
	backdrop-filter		: blur(3px)								;
	display				: flex									;
	height				: 100dvh								;
	justify-content		: center								;
	left				: 0px									;
	position			: absolute								;
	top					: 0px									;
	width				: 100dvw								;
	z-index				: 100									;
}

/* --- APP MAIN --- BLOCKED SCREEN ( EXCLUSIVE APP SEAT ) ------------------------------------------------------------------ */

#blocked
{
	align-items			: center								;
	background			: rgba(0,0,0,.72)						;
	display				: flex									;
	height				: 100dvh								;
	justify-content		: center								;
	left				: 0px									;
	position			: absolute								;
	top					: 0px									;
	width				: 100dvw								;
	z-index				: 50									;
}

#blocked-frame
{
	background			: var(--qd-back-area-a100)				;
	border				: 1px solid var(--qd-norm-line-a015)	;
	border-radius		: 8px									;
	box-shadow			: 0 8px 32px rgba(0,0,0,.45)			;
	color				: var(--qd-norm-text-a100)				;
	max-width			: 90vw									;
	min-width			: 340px									;
	padding				: 20px 24px								;
	text-align			: center								;
}

#blocked-title
{
	color				: var(--qd-norm-text-a100)				;
	font-weight			: 700									;
	margin-bottom		: 10px									;
}

#blocked-text
{
	color				: var(--qd-norm-text-a070)				;
	line-height			: 1.5									;
	margin-bottom		: 18px									;
}

#blocked-home
{
	font-size			: 14px									;
	height				: 34px									;
	margin				: 0 auto								;
	width				: 180px									;
}

/* --- APP MAIN --- LOG IN PAGE --- QUADRIDENT CI -------------------------------------------------------------------------- */

#ci
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: row									;
	height				: 64px									;
	width				: 100%									;
}

@media ( orientation : landscape )
{ #ci { justify-content : left ; } }

@media ( orientation : portrait )
{ #ci { justify-content : center ; } }

#quadri-logo
{
	display				: block									;
	height				: 64px									;
	padding				: 8px 0 8px 8px							;
	width				: 64px									;
}

#quadri-text
{
	align-items			: center								;
	display				: flex									;
	font-size			: 38px									;
	height				: 64px									;
	justify-content		: left									;
	margin-left			: -5px									;
	padding-top			: 10px									;
	width				: 200px									;
}

/* --- APP MAIN --- LOG IN PAGE --- LOG IN FORM ---------------------------------------------------------------------------- */

#login-form , #entra-form
{
	align-items			: center								;
	display				: flex									;
	flex-direction		: column								;
	height				: calc(100vh - 64px)					;
	justify-content		: center								;
	width				: 100%									;
}

.client-logo
{
	background-image	: url(../../res/img/Quadrident.png)  		;
	background-position	: center								;
	background-repeat	: no-repeat								;
	background-size		: contain								;
}

#login-fields
{
	--qd-form-gap		: 20px									;
	--qd-form-line		: 72px									;
	--qd-edit-gap		: 6px									;
	--qd-edit-line		: 40px									;
	--qd-edit-bg		: var(--qd-norm-text-a015)				;
	--qd-edit-fg		: var(--qd-norm-text-a100)				;
	--qd-edit-bdr-fg	: var(--qd-norm-text-a100)				;
	--qd-edit-lbl-fg	: var(--qd-norm-text-a070)				;
	--qd-edit-hint-fg	: var(--qd-norm-text-a030)				;
	--qd-edit-focs-fg	: var(--qd-hlgt-neut-a100)				;
	--qd-edit-hovr-bg	: var(--qd-norm-text-a030)				;
	--qd-edit-hovr-fg	: var(--qd-norm-text-a100)				;
	--qd-edit-rjct-fg	: var(--qd-hlgt-baad-a100)				;
	--qd-edit-list-bg	: var(--qd-back-area-a100)				;
	--qd-edit-list-fg	: var(--qd-norm-text-a100)				;
	display				: block									;
	flex				: 0 0 auto								;
}

#login-call , #login-msso , #login-return , #login-toggle , #blocked-home
{
	--qd-bttn-dflt-std-bg	: transparent							;
	--qd-bttn-dflt-std-fg	: var(--qd-norm-text-a070)				;
	--qd-bttn-dflt-hov-bg	: transparent							;
	--qd-bttn-dflt-hov-fg	: var(--qd-hlgt-neut-a100)				;
	--qd-bttn-prcd-std-bg	: transparent							;
	--qd-bttn-prcd-std-fg	: var(--qd-hlgt-neut-a100)				;
	--qd-bttn-prcd-hov-bg	: var(--qd-hlgt-neut-a100)				;
	--qd-bttn-prcd-hov-fg	: var(--qd-hlgt-text-a100)				;
	--qd-bttn-acpt-std-bg	: transparent							;
	--qd-bttn-acpt-std-fg	: var(--qd-hlgt-good-a100)				;
	--qd-bttn-acpt-hov-bg	: var(--qd-hlgt-good-a100)				;
	--qd-bttn-acpt-hov-fg	: var(--qd-hlgt-text-a100)				;
	--qd-bttn-rjct-std-bg	: transparent							;
	--qd-bttn-rjct-std-fg	: var(--qd-hlgt-baad-a100)				;
	--qd-bttn-rjct-hov-bg	: var(--qd-hlgt-baad-a100)				;
	--qd-bttn-rjct-hov-fg	: var(--qd-hlgt-text-a100)				;
	--qd-bttn-inop-std-bg	: var(--qd-norm-text-a005)				;
	--qd-bttn-inop-std-fg	: var(--qd-norm-text-a030)				;
	--qd-bttn-ttip-std-bg	: var(--qd-back-area-a100)				;
	--qd-bttn-ttip-std-fg	: var(--qd-norm-text-a100)				;
	display				: block									;
	flex				: 0 0 auto								;
}

#login-return , #login-toggle
{
	margin-top			: 16px									;
}

@media ( orientation : landscape )
{
	.client-logo
	{
		height				: 165px									;
		margin-bottom		: 60px									;
		width				: 384px									;
	}

	#login-fields
	{
		font-size			: 16px									;
		width				: 384px									;
	}

	#login-call , #login-msso
	{
		font-size			: 20px									;
		height				: 40px									;
		margin				: 40px 0 120px 0						;
		width				: 384px									;
	}

	#login-return , #login-toggle
	{
		font-size			: 14px									;
		height				: 24px									;
		width				: 384px									;
	}
}

@media ( orientation : portrait )
{
	.client-logo
	{
		height				: 220px									;
		margin-bottom		: 80px									;
		width				: 512px									;
	}

	#login-fields
	{
		font-size			: 21px									;
		width				: 512px									;
	}

	#login-call , #login-msso
	{
		font-size			: 27px									;
		height				: 53px									;
		margin				: 53px 0 160px 0						;
		width				: 512px									;
	}

	#login-return , #login-toggle
	{
		font-size			: 19px									;
		height				: 32px									;
		width				: 512px									;
	}
}

/* --- APP MAIN --- LOADING PAGE --- ELEMENTS ------------------------------------------------------------------------------ */

#loading-container
{
	display				: block									;
}

#quadri-load
{
	display				: block									;
	fill				: var(--qd-norm-text-a100)				;
	stroke				: none									;
}

#quadri-info
{
	align-items			: center								;
	display				: flex									;
	justify-content		: center								;
	text-align			: center								;
}

@media ( orientation : landscape )
{
	#loading-container
	{
		height			: 384px									;
		width			: 256px									;
	}

	#quadri-load
	{
		height			: 320px									;
		width			: 256px									;
	}

	#quadri-info
	{
		font-size		: 14px									;
		height			: 64px									;
		width			: 256px									;
	}
}

@media ( orientation : portrait )
{
	#loading-container
	{
		height			: 512px									;
		width			: 341px									;
	}

	#quadri-load
	{
		height			: 427px									;
		width			: 341px									;
	}

	#quadri-info
	{
		font-size		: 19px									;
		height			: 85px									;
		width			: 341px									;
	}
}

/* --- APP MAIN --- LOADING PAGE --- ANIMATION ----------------------------------------------------------------------------- */

@keyframes stretch
{
	000.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
	002.5% { transform : translateY(-0.15px) scaleY(1.3) ; }
	005.0% { transform : translateY(-0.50px) scaleY(2.0) ; }
	007.5% { transform : translateY(-1.00px) scaleY(3.0) ; }
	010.0% { transform : translateY(-1.60px) scaleY(4.2) ; }
	012.5% { transform : translateY(-2.25px) scaleY(5.5) ; }
	015.0% { transform : translateY(-2.50px) scaleY(6.0) ; }
	017.5% { transform : translateY(-2.50px) scaleY(6.0) ; }
	020.0% { transform : translateY(-2.10px) scaleY(5.2) ; }
	022.5% { transform : translateY(-1.00px) scaleY(3.0) ; }
	025.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
	100.0% { transform : translateY(-0.00px) scaleY(1.0) ; }
}

@keyframes shift
{
	000.0% { transform : translateY(-0.0px) ; }
	002.5% { transform : translateY(-0.3px) ; }
	005.0% { transform : translateY(-1.0px) ; }
	007.5% { transform : translateY(-2.0px) ; }
	010.0% { transform : translateY(-3.2px) ; }
	012.5% { transform : translateY(-4.5px) ; }
	015.0% { transform : translateY(-5.0px) ; }
	017.5% { transform : translateY(-5.0px) ; }
	020.0% { transform : translateY(-4.2px) ; }
	022.5% { transform : translateY(-2.0px) ; }
	025.0% { transform : translateY(-0.0px) ; }
	100.0% { transform : translateY(-0.0px) ; }
}

#dent-1 , #dent-2 , #dent-3 , #dent-4
{
	animation-name			  : shift							;
	animation-duration		  : 4s								;
	animation-iteration-count : infinite						;
	animation-timing-function : linear							;
}

#conn-1 , #conn-2 , #conn-3 , #conn-4
{
	animation-name			  : stretch							;
	animation-duration		  : 4s								;
	animation-iteration-count : infinite						;
	animation-timing-function : linear							;
	transform-box			  : fill-box						;
	transform-origin		  : center							;
}

#dent-1 , #conn-1
{
	animation-delay		: 0s									;
}

#dent-2 , #conn-2
{
	animation-delay		: 1s									;
}

#dent-3 , #conn-3
{
	animation-delay		: 2s									;
}

#dent-4 , #conn-4
{
	animation-delay		: 3s									;
}

/* --- APP MAIN --- ERROR DISPLAY ------------------------------------------------------------------------------------------ */

#error-display
{
	background : var(--qd-norm-text-a100) ;
	border : 2px solid var(--qd-hlgt-baad-a100) ;
	display : flex ;
	flex-direction : column ;
	gap : 8px ;
	max-height : 80dvh ;
	max-width : calc(100dvw - 32px) ;
	overflow-y : auto ;
	padding : 20px 24px ;
}

@media ( orientation : landscape )
{ #error-display { width : 420px ; } }

@media ( orientation : portrait )
{ #error-display { width : 512px ; } }

#error-display[data-severity="info"]     { border-color : var(--qd-acnt-area-a100) ; }
#error-display[data-severity="warning"]  { border-color : var(--qd-hlgt-neut-a100) ; }
#error-display[data-severity="error"]    { border-color : var(--qd-hlgt-baad-a100) ; }
#error-display[data-severity="critical"] { border-color : var(--qd-hlgt-baad-a100) ; border-width : 3px ; }

#error-caption
{
	color : var(--qd-hlgt-text-a100) ;
	font-size : 18px ;
	font-weight : 600 ;
	white-space : normal ;
}

#error-message
{
	color : var(--qd-hlgt-text-a100) ;
	line-height : 1.4 ;
	overflow : visible ;
	text-overflow : clip ;
	user-select : text ;
	-webkit-user-select : text ;
	white-space : normal ;
}

#error-cause
{
	color : var(--qd-hlgt-text-a070) ;
	font-size : 14px ;
	line-height : 1.4 ;
	overflow : visible ;
	text-overflow : clip ;
	user-select : text ;
	-webkit-user-select : text ;
	white-space : normal ;
}

#error-cause:empty { display : none ; }

#error-code
{
	color : var(--qd-hlgt-text-a050) ;
	font-size : 12px ;
	overflow : visible ;
	text-overflow : clip ;
	user-select : text ;
	-webkit-user-select : text ;
	white-space : normal ;
}

#error-code:empty { display : none ; }

#error-confirm
{
	align-self : flex-end ;
	border : 1px solid var(--qd-hlgt-text-a100) ;
	border-radius : 6px ;
	color : var(--qd-hlgt-text-a100) ;
	cursor : pointer ;
	margin-top : 8px ;
	padding : 8px 20px ;
	text-align : center ;
	white-space : nowrap ;
}

#error-confirm:hover
{
	background : var(--qd-hlgt-text-a100) ;
	color : var(--qd-norm-text-a100) ;
	font-weight : 600 ;
}

/* --- END OF FILE --- APP.CSS --------------------------------------------------------------------------------------------- */