/**
 * Mitarbeiterverwaltung – neutrale Styles für Login, Profil und Mitarbeiterbereich.
 *
 * Schrift, Farben und Buttons kommen vom Theme. Die Regeln stehen in :where(),
 * damit jedes Theme sie ohne höhere Spezifität überschreiben kann.
 */

:where(.mv-login, .mv-profile, .mv-area) {
	--mv-gap: 1rem;
	--mv-radius: 0.375rem;
	--mv-border: color-mix(in srgb, currentColor 28%, transparent);
	--mv-error: #b42318;
	--mv-success: #067647;
	--mv-info: color-mix(in srgb, currentColor 70%, transparent);
	max-width: 28rem;
}

:where(.mv-login, .mv-profile) :where(form) {
	display: grid;
	gap: var(--mv-gap);
	margin: 0;
}

:where(.mv-profile) {
	display: grid;
	gap: calc(var(--mv-gap) * 2);
}

:where(.mv-login, .mv-profile) :where(fieldset) {
	display: grid;
	gap: var(--mv-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.mv-login, .mv-profile) :where(legend) {
	margin-bottom: var(--mv-gap);
	font-weight: 600;
	font-size: 1.125em;
}

:where(.mv-field) {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

:where(.mv-field) :where(label) {
	font-weight: 500;
}

:where(.mv-field) :where(input[type="text"], input[type="password"], input[type="tel"], input[type="email"]) {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius);
	background: transparent;
	color: inherit;
	font: inherit;
}

:where(.mv-field) :where(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

:where(.mv-field--checkbox) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

:where(.mv-field--checkbox) :where(input) {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
}

:where(.mv-password) {
	position: relative;
	display: block;
}

:where(.mv-password) :where(input) {
	padding-right: 6rem;
}

:where(.mv-password__toggle) {
	position: absolute;
	top: 50%;
	right: 0.375rem;
	transform: translateY(-50%);
	min-height: 32px;
	padding: 0.25rem 0.625rem;
	border: 0;
	border-radius: var(--mv-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	text-decoration: underline;
	cursor: pointer;
}

:where(.mv-login__actions) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mv-gap);
	margin: 0;
}

:where(.mv-button) {
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	cursor: pointer;
	font: inherit;
}

:where(.mv-notice) {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--mv-info);
	border-radius: var(--mv-radius);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

:where(.mv-notice--error) {
	border-left-color: var(--mv-error);
}

:where(.mv-notice--success) {
	border-left-color: var(--mv-success);
}

:where(.mv-readonly) {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
	margin: 0;
}

:where(.mv-readonly) :where(dd) {
	margin: 0;
}

:where(.mv-area) {
	display: grid;
	gap: var(--mv-gap);
	max-width: none;
}

:where(.mv-area__welcome) {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
}

:where(.mv-area__nav) :where(ul) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.mv-area__nav) :where(a) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius);
	text-decoration: none;
}

:where(.mv-area__logout) {
	margin: 0;
}

@media (prefers-color-scheme: dark) {
	:where(.mv-login, .mv-profile, .mv-area) {
		--mv-error: #f97066;
		--mv-success: #47cd89;
	}
}