/**
 * Cassiopeia user overrides.
 * Kompaktes mod_login in top-a – an Mein Profil (gunkey-profile.js injectStyle) angelehnt.
 */

/* —— Region: weniger Außenabstand —— */
.container-top-a:has(.mod-login) > *,
.container-top-a:has(.mod-login-logout) > * {
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
}

/* Chrom „card“: kompakter Kasten wie .gkp-wrap / .gkp-panel */
.container-top-a .top-a.card {
	border: 1px solid #d8dee4;
	border-radius: 10px;
	background: #fcfdff;
	box-shadow: none;
	overflow: hidden;
}

.container-top-a .top-a.card .card-header {
	padding: 6px 10px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #0f172a;
	background: #f6f8fa;
	border-bottom: 1px solid #e5e7eb;
}

.container-top-a .top-a.card .card-body {
	padding: 6px 8px;
}

/* —— Gast: eine Zeile möglichst flach; Elemente unten bündig —— */
.container-top-a .mod-login__userdata {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	gap: 4px 8px;
}

.container-top-a .mod-login__userdata > .form-group {
	margin-bottom: 0;
}

.container-top-a .mod-login__username,
.container-top-a .mod-login__password {
	flex: 1 1 8.5rem;
	min-width: 0;
}

.container-top-a .mod-login__remember {
	flex: 0 0 auto;
}

.container-top-a .mod-login__remember .form-check {
	margin-bottom: 0;
}

.container-top-a .mod-login__submit {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.container-top-a .mod-login__submit .btn.w-100 {
	width: auto !important;
	min-width: 4.25rem;
}

/* Hilfslinks: keine volle Zeile erzwingen → weniger „Luft“ unter den Inputs */
.container-top-a .mod-login__options {
	flex: 1 1 12rem;
	min-width: min(100%, 11rem);
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	gap: 4px 10px;
	font-size: 0.72rem;
	line-height: 1.2;
}

.container-top-a .mod-login__options li {
	margin-bottom: 0;
}

/* Passkey / WebAuthn-Zusatzbutton (btn-secondary w-100) */
.container-top-a .mod-login .mod-login__submit .btn.btn-secondary {
	width: auto !important;
	max-width: 100%;
	padding: 5px 10px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	border-radius: 8px;
	border-color: #c7ced6;
	background: #fff;
	color: #334155;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: calc(1.2em + 10px);
}

.container-top-a .mod-login .mod-login__submit .btn.btn-secondary:hover {
	background: #f8fafc;
	border-color: #94a3b8;
	color: #0f172a;
}

.container-top-a .mod-login .mod-login__submit .btn.btn-secondary svg,
.container-top-a .mod-login .mod-login__submit .btn.btn-secondary img {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	max-width: 1rem;
	max-height: 1rem;
	object-fit: contain;
}

/* —— Felder wie .gkp-grid / .gkp-mem-add-block —— */
.container-top-a .mod-login .form-control {
	padding: 5px 8px;
	font-size: 0.8125rem;
	line-height: 1.3;
	border: 1px solid #c7ced6;
	border-radius: 8px;
	background: #fff;
	min-height: calc(1.3em + 10px);
}

.container-top-a .mod-login .form-control:focus {
	outline: none;
	border-color: #7aa7ff;
	box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12);
}

.container-top-a .mod-login .input-group-text {
	padding: 5px 7px;
	font-size: 0.8125rem;
	background: #f6f8fa;
	border-color: #c7ced6;
	color: #334155;
}

.container-top-a .mod-login .input-group .btn,
.container-top-a .mod-login .input-group .btn-secondary {
	padding: 5px 7px;
	font-size: 0.72rem;
	line-height: 1.2;
	border-color: #c7ced6;
	background: #f1f5f9;
	color: #334155;
	min-height: calc(1.3em + 10px);
}

.container-top-a .mod-login .input-password-toggle:hover {
	background: #e2e8f0;
	border-color: #94a3b8;
}

.container-top-a .mod-login .btn-primary {
	padding: 5px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 8px;
	background: #0d6efd;
	border-color: #0d6efd;
	line-height: 1.2;
	min-height: calc(1.3em + 10px);
}

.container-top-a .mod-login .btn-primary:hover {
	filter: brightness(0.97);
}

.container-top-a .mod-login .mod-login__remember .form-check {
	padding-left: 1.3em;
	font-size: 0.72rem;
	font-weight: 600;
	color: #334155;
}

.container-top-a .mod-login .mod-login__remember .form-check-input {
	width: 0.85em;
	height: 0.85em;
	margin-top: 0.12em;
	border-color: #c7ced6;
}

.container-top-a .mod-login .mod-login__remember .form-check-input:checked {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

.container-top-a .mod-login__options a {
	color: #1d4ed8;
	text-decoration: none;
	font-weight: 500;
}

.container-top-a .mod-login__options a:hover {
	text-decoration: underline;
}

.container-top-a .mod-login .pretext,
.container-top-a .mod-login .posttext {
	font-size: 0.72rem;
	color: #475569;
	margin-bottom: 4px;
	line-height: 1.3;
}

/* Schmale Viewports: Hilfslinks unter die Zeile, weiterhin eng */
@media (max-width: 991.98px) {
	.container-top-a .mod-login__options {
		flex-basis: 100%;
		padding-top: 2px;
	}
}

/* —— Eingeloggt: Begrüßung + optional Profil + Abmelden in einer Zeile —— */
.container-top-a .mod-login-logout {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
}

.container-top-a .mod-login-logout .mod-login-logout__login-greeting,
.container-top-a .mod-login-logout .login-greeting {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.container-top-a .mod-login-logout .mod-login-logout__options {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
}

.container-top-a .mod-login-logout .mod-login-logout__options li {
	display: inline;
	margin: 0;
}

.container-top-a .mod-login-logout .mod-login-logout__options a {
	color: #1d4ed8;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.container-top-a .mod-login-logout .mod-login-logout__options a:hover {
	text-decoration: underline;
}

.container-top-a .mod-login-logout .mod-login-logout__button,
.container-top-a .mod-login-logout .logout-button {
	margin: 0 0 0 auto;
	flex: 0 0 auto;
}

.container-top-a .mod-login-logout .logout-button .btn-primary,
.container-top-a .mod-login-logout .mod-login-logout__button .btn-primary {
	padding: 5px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 8px;
	min-height: calc(1.3em + 10px);
}

@media (max-width: 575.98px) {
	.container-top-a .mod-login-logout {
		flex-wrap: wrap;
	}

	.container-top-a .mod-login-logout .mod-login-logout__button,
	.container-top-a .mod-login-logout .logout-button {
		margin-left: 0;
	}
}