/*
 * Copyright CURSOR Software AG
 */

/* --------- */
/* HTML tags */
/* --------- */

:root {
	--login-font-size: 1.2rem;
	--login-font-size-x-large: calc(var(--login-font-size) * 1.4);
	--login-font-size-larger: calc(var(--login-font-size) * 1.2);
	--login-font-size-large: calc(var(--login-font-size) * 1.1);
	--login-font-size-small: calc(var(--login-font-size) * 0.9);
	--login-font-size-smaller: calc(var(--login-font-size) * 0.8);
	--login-font-size-x-small: calc(var(--login-font-size) * 0.6);
	--login-form-size-small: 0.5rem;
	--login-form-size-smaller: 0.25rem;
	--login-form-input-height: calc(var(--login-font-size-larger) * 2.5);
}

* {
	box-sizing: border-box;
	font-family: -apple-system, system-ui, BlinkMacSystemFont,
	"Segoe UI", "Roboto", "Oxygen",
	"Ubuntu", "Fira Sans", "Droid Sans",
	"Helvetica Neue", "Tahoma", sans-serif;
	font-size: 12px;
	padding: 0;
}

html,
body {
	margin: 0;
	padding: 0;
}

body * {
	font-size: var(--login-font-size-large);
	color: var(--dark-font-color);
}

hr {
	width: 100%;
	border-top: 1px solid var(--marina-main);
}

.hr-text {
	display: flex;
	align-items: center;
	color: var(--inactive-color);
}

.hr-text::before,
.hr-text::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--inactive-color);
}

.hr-text:not(:empty)::before,
.hr-text:not(:empty)::after {
	margin: 0 0.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	text-align: center;

	color: var(--dark-font-color);
}

h1 {
	font-size: var(--login-font-size-x-large);
}

h2 {
	font-size: var(--login-font-size-larger);
}

::placeholder {
	color: var(--placeholder-color);
}

/* ---------------- */
/* Global container */
/* ---------------- */

body {
	height: 100vh;

	background-color: var(--login-bg-color);
}

#login-wrapper {
	display: flex;
	justify-content: center;

	height: 100vh;
}

#login-main, #login-aside {
	display: flex;
	flex-direction: column;

	padding: 1rem;
}

#login-main {
	flex-basis: 37.5%;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	margin: auto 0;

	background-color: var(--marina-white);
}

#login-aside {
	flex-basis: 62.5%;
	justify-content: space-around;
	align-items: center;

	background-image: url("/login/jakarta.faces.resource/backdrop.jsf?ln=branding-res");
	background-position-x: right;
	background-size: cover;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-clip: border-box;
}

#login-logo,
#employee-logo {
	margin: 0 auto;
	height: 72px;
	width: 72px;

	border-radius: 50%;
	object-fit: cover;
}

#login-logo {
	content: url("/login/jakarta.faces.resource/logo.jsf?ln=branding-res");
}

#login-form {
	display: flex;
	flex-direction: column;

	min-width: 350px;
	max-width: 400px;

	row-gap: 1rem;
	padding: 0 2rem 2rem;
}

@media (max-height: 600px), (max-width: 600px) {
	#login-aside {
		display: none;
	}
}

@media (max-height: 600px) and (min-width: 600px) {
	#login-main {
		display: grid;
		align-content: center;
	}

	#login-form[data-sso=true] {
		flex-direction: row;

		min-width: unset;
		max-width: unset;
		column-gap: 2rem;
	}
}

/* --------------- */
/* Global elements */
/* --------------- */

#login-form progress {
	visibility: hidden;
}

#login-form progress[data-inProgress=true] {
	visibility: visible;
	margin: 0 auto;
	accent-color: var(--marina-main);
}

/* ------------------ */
/* CSS helper classes */
/* ------------------ */

.flex-center {
	align-items: center; /* h */
	justify-content: center; /* v */
}

.align-content-center-v {
	align-content: center;
}

.align-content-end-v {
	align-content: end;
}

.flex {
	display: flex;
}

.grid {
	display: grid;
}

.none {
	display: none;
}

/* --------------- */
/* Styling classes */
/* --------------- */

.error,
.info {
	margin: auto;
	font-size: var(--login-font-size);
	text-align: center;
}

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

/* ------------------ */
/* Global UI elements */
/* ------------------ */

input,
select,
select option,
a,
a > *,
label,
legend {
	padding: 0;
	font-size: var(--login-font-size-large);
	text-decoration: none;
	border: none;
	accent-color: var(--marina-main);
}

/* #login-form select, */
/* #login-form select option, */
a {
	text-align: center;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=submit]:focus,
input:focus,
select:focus,
select option:focus,
a:focus {
	outline: none;
}

/* selectManyCheckbox */
/* (consent, ...)     */

#login-form td {
	display: flex;
	gap: 0 0.5rem;
	align-items: center;
	word-break: break-all;
}

#login-form td:not(:last-of-type) {
	margin: 0 0 0.5rem 0;
}

#login-form td input {
	width: 20px;
	height: 20px;
}

/* ----------- */
/* UI elements */
/* ----------- */

.ui-element-container {
	gap: inherit;
}

/* Input Group */

.ui-input-group {
	display: inline-flex;
	flex-direction: row;
	align-items: center;

	height: var(--login-form-input-height);
	padding: var(--login-form-size-small);

	border: 1px solid var(--marina-silver);
	border-radius: var(--login-form-size-smaller);

	background-color: var(--marina-white); /* transparent will not be inherited in FF */
}

.ui-input-group:focus-within {
	border: 1px solid var(--focus-border-color);
}

.ui-input-group input[type=text],
.ui-input-group input[type=password],
.ui-input-group select {
	flex: 1 0 auto;
	background-color: inherit;
}

.ui-input-group select {
	height: 100%;
}

.ui-input-group select option:checked,
.ui-input-group select option:hover {
	background-color: var(--marina-silver);
}

.ui-input-group-icon {
	flex: 0 0;
	margin-right: var(--login-font-size-x-small);
	padding: 4px;

	aspect-ratio: auto 1 / 1;

	filter: var(--placeholder-color-filter);
}

.ui-input-group:focus-within .ui-input-group-icon {
	filter: unset;
}

/* Button */

.ui-button-group {
	/* Layout */
	display: inline-grid;
	grid-gap: 4px;
	grid-template-columns: var(--login-font-size-x-large) max-content;
	justify-content: center;
	justify-items: center;
	align-items: center; /* anchors */

	/* Styling */
	height: var(--login-form-input-height);
	padding: var(--login-form-size-small);
	color: var(--light-font-color);
	background-color: var(--marina-main);
	border: 1px solid transparent;
	border-radius: var(--login-form-size-smaller);
}

.ui-button-group,
.ui-button-group * {
	cursor: pointer;
}

.ui-button-group:focus-within {
	filter: saturate(0.5);
	border: 1px solid var(--focus-border-color);
}

.ui-button-group:not(.no-focus-border):focus-within {
}

.ui-button-group *:focus {
	outline: none;
	border: none;
}

.ui-button-group input {
	height: 100%;
	width: 100%;
	margin: var(--login-form-size-small);

	color: var(--light-font-color);
	background-color: var(--marina-main);
}

.ui-button-group.no-background {
	color: var(--marina-main);
	background-color: transparent;
}

.ui-button-group-icon {
	padding: 4px 0 4px;

	aspect-ratio: 1 / 1;

	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(90deg) brightness(111%) contrast(100%);
}

.ui-button-group-label {
	color: var(--light-font-color);
}

/* for further usage */
/* .ui-input-group select { */
/* } */

/* .ui-input-group option { */
/* } */

/* .ui-input-group select option { */
/* } */

/* .ui-input-group select option[selected] { */
/* } */