/*
 * Mild Login Screen – modell 3
 * Modell 1:s layout (varumärkeskolumn + formulär) i den ljusa, mjukare profilen
 * från notes.mild.se och send.mild.se: grå sidbotten, vita kort med tunn kant
 * och mjuk skugga, nästan vita fält och turkos som accent.
 * Allt är lokalt: inga externa typsnitt eller bilder (CSP 'self').
 */

body.mild-login {
	--mls-teal: #00bfa5;
	--mls-teal-hover: #00a690;
	--mls-teal-text: #00796b;   /* länkar och etiketter, 5,3:1 mot vitt */
	--mls-teal-tint: #e6f7f4;   /* som stegsiffrorna på notes.mild.se */
	--mls-heading: #212121;
	--mls-ink: #4e4e4e;         /* brödtext, 8,5:1 mot vitt */
	--mls-muted: #6b6b6b;       /* 5,3:1 mot vitt */
	--mls-page: #f5f5f5;
	--mls-card: #ffffff;
	--mls-card-line: rgba(33, 33, 33, .1);
	--mls-card-shadow: 0 1px 2px rgba(33, 33, 33, .04), 0 8px 24px rgba(33, 33, 33, .06);
	--mls-field: #fafafa;
	--mls-line: rgba(33, 33, 33, .5);   /* fältkant, drygt 3:1 – notes har .2, som inte klarar WCAG 1.4.11 */
	--mls-soft: #f5f5f5;
	--mls-aside: #ffffff;
	--mls-button-text: #212121; /* vit på turkos klarar inte AA (2,4:1), mörk ger 7:1 */
	--mls-error: #b32d2e;
	--mls-error-tint: #fcefef;
	--mls-radius: 4px;
	--mls-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* luft | formulär | språkväljare | luft – centrerar högerkolumnen vertikalt */
	grid-template-rows: 1fr auto auto 1fr;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	background: var(--mls-page);
	color: var(--mls-ink);
	font-family: var(--mls-font);
	font-size: 16px;
	line-height: 1.5;
}

body.mild-login * {
	box-sizing: border-box;
}

/* Allt utom vänsterkolumnen hamnar i högerkolumnen */
body.mild-login > * {
	grid-column: 2;
}

/* ---------- Vänsterkolumn ---------- */

.mild-login .mls-aside {
	grid-column: 1;
	grid-row: 1 / -1;
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
	height: 100vh;
	height: 100dvh;
	padding: clamp(32px, 5vw, 72px);
	overflow: hidden;
	border-right: 1px solid var(--mls-card-line);
	background:
		radial-gradient(60% 50% at 100% 100%, rgba(0, 191, 165, .14), transparent 70%),
		radial-gradient(45% 40% at 0% 0%, rgba(0, 191, 165, .07), transparent 70%),
		var(--mls-aside);
	color: var(--mls-heading);
	isolation: isolate;
}

.mild-login .mls-aside__logo {
	display: inline-flex;
	align-self: flex-start;
	color: var(--mls-teal);
	border-radius: var(--mls-radius);
}

.mild-login .mls-aside__logo svg {
	display: block;
	width: 100px;
	height: auto;
}

.mild-login .mls-aside__tagline {
	margin: 0;
	max-width: 12ch;
	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.022em;
	color: var(--mls-heading);
}

.mild-login .mls-aside__credit {
	margin: 0;
	max-width: 36ch;
	font-size: 15px;
	color: var(--mls-ink);
}

.mild-login .mls-aside__credit a {
	color: var(--mls-heading);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--mls-teal);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.mild-login .mls-aside__credit a:hover {
	color: var(--mls-teal-text);
}

/* Stora "Mild" i bakgrunden, beskuren nere till höger */
.mild-login .mls-aside__mark {
	position: absolute;
	right: -18%;
	bottom: -6%;
	z-index: -1;
	width: 95%;
	height: auto;
	color: var(--mls-teal);
	opacity: .08;
	pointer-events: none;
}

/* ---------- Högerkolumn: formuläret i ett kort ---------- */

.mild-login #login {
	grid-row: 2;
	width: calc(100% - 48px);
	max-width: 440px;
	margin: 48px auto 0;
	padding: 40px 36px 32px;
	border: 1px solid var(--mls-card-line);
	border-radius: 8px;
	background: var(--mls-card);
	box-shadow: var(--mls-card-shadow);
}

/* Loggan finns redan i vänsterkolumnen. Länken behålls för skärmläsare. */
.mild-login #login h1.wp-login-logo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mild-login .mls-heading {
	margin: 0 0 24px;
}

/* Kundens sajt överst i kortet: ikon, namn och adress */
.mild-login .mls-site {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--mls-card-line);
}

.mild-login .mls-site__icon {
	flex: none;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
}

.mild-login .mls-site__icon--letter {
	display: grid;
	place-items: center;
	background: var(--mls-teal-tint);
	color: var(--mls-teal-text);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.mild-login .mls-site__text {
	min-width: 0;
}

.mild-login .mls-site__name {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--mls-heading);
	overflow-wrap: anywhere;
}

.mild-login .mls-site__address {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mls-muted);
	overflow-wrap: anywhere;
}

.mild-login .mls-heading__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--mls-heading);
}

/* Meddelanden (WordPress egna, lämnas orörda i innehåll) */
.mild-login .message,
.mild-login .notice,
.mild-login #login_error,
.mild-login .success {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 0;
	border-left: 3px solid var(--mls-teal);
	border-radius: var(--mls-radius);
	background: var(--mls-teal-tint);
	box-shadow: none;
	color: var(--mls-heading);
	font-size: 15px;
}

.mild-login #login_error,
.mild-login .notice-error {
	border-left-color: var(--mls-error);
	background: var(--mls-error-tint);
}

.mild-login .message p,
.mild-login .notice p {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.mild-login .message p + p,
.mild-login .notice p + p {
	margin-top: 8px;
}

/* Formulären */
.mild-login #login form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.mild-login #login form p,
.mild-login #login form .user-pass-wrap {
	margin: 0 0 20px;
}

.mild-login #login form label {
	display: inline-block;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mls-heading);
}

.mild-login #login form .input,
.mild-login #login input[type="text"],
.mild-login #login input[type="email"],
.mild-login #login input[type="password"],
.mild-login #login input[type="number"],
.mild-login #login input[type="tel"],
.mild-login #login select {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--mls-line);
	border-radius: var(--mls-radius);
	background: var(--mls-field);
	box-shadow: none;
	color: var(--mls-heading);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .15s ease, background-color .15s ease;
}

.mild-login #login form .input:hover,
.mild-login #login input[type="text"]:hover,
.mild-login #login input[type="password"]:hover {
	border-color: var(--mls-heading);
}

.mild-login #login form .input:focus,
.mild-login #login input:focus,
.mild-login #login select:focus {
	border-color: var(--mls-teal);
	background: var(--mls-card);
	outline: 2px solid var(--mls-teal);
	outline-offset: 1px;
	box-shadow: none;
}

/* Lösenordsfältet med visa-knappen */
.mild-login .wp-pwd {
	position: relative;
}

.mild-login .wp-pwd .input {
	padding-right: 52px;
}

.mild-login #login .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 var(--mls-radius) var(--mls-radius) 0;
	background: transparent;
	box-shadow: none;
	color: var(--mls-muted);
}

.mild-login #login .button.wp-hide-pw:hover {
	color: var(--mls-heading);
}

.mild-login #login .button.wp-hide-pw:focus-visible {
	outline: 2px solid var(--mls-teal);
	outline-offset: -4px;
	box-shadow: none;
}

.mild-login #login .button.wp-hide-pw .dashicons {
	top: 0;
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* Kom ihåg mig */
.mild-login #login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	margin: 4px 0 24px;
}

.mild-login #login .forgetmenot label {
	margin: 0;
	font-weight: 400;
	color: var(--mls-ink);
}

.mild-login #login input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--mls-line);
	border-radius: var(--mls-radius);
	background: var(--mls-field);
	box-shadow: none;
	cursor: pointer;
}

.mild-login #login input[type="checkbox"]:checked {
	border-color: var(--mls-teal);
	background: var(--mls-teal);
}

.mild-login #login input[type="checkbox"]::before {
	content: none;
}

.mild-login #login input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 6px;
	height: 11px;
	margin: 0;
	border: solid #212121;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.mild-login #login .forgetmenot button {
	color: var(--mls-muted);
}

/* Knappar – som "Skapa länk" på notes.mild.se */
.mild-login #login .submit {
	clear: both;
	margin: 0;
	padding: 0;
}

.mild-login #login .button-primary,
.mild-login #login input[type="submit"] {
	float: none;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 24px;
	border: 0;
	border-radius: var(--mls-radius);
	background: var(--mls-teal);
	box-shadow: none;
	text-shadow: none;
	color: var(--mls-button-text);
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mild-login #login .button-primary:hover,
.mild-login #login input[type="submit"]:hover {
	background: var(--mls-teal-hover);
	color: var(--mls-button-text);
}

.mild-login #login .button-primary:focus-visible,
.mild-login #login input[type="submit"]:focus-visible,
.mild-login #login .button:focus-visible {
	outline: 2px solid var(--mls-heading);
	outline-offset: 3px;
	box-shadow: none;
}

.mild-login #login .button-secondary:not(.wp-hide-pw) {
	min-height: 44px;
	border: 1px solid var(--mls-line);
	border-radius: var(--mls-radius);
	background: var(--mls-card);
	color: var(--mls-heading);
}

/* SSO-knappen från miniOrange SAML: den låser höjden inline (88px), så att
   "OR" hamnar under nästa fält. Knappen blir sekundär och "OR" en avdelare. */
.mild-login #mo_saml_button {
	height: auto !important;
}

.mild-login #login #mo_saml_login_sso_button {
	gap: 8px;
	min-height: 48px;
	margin: 0 !important;
	border: 1px solid var(--mls-line);
	background: var(--mls-card);
	color: var(--mls-heading);
	font-size: 16px !important;
	font-weight: 500;
	cursor: pointer;
}

.mild-login #login #mo_saml_login_sso_button:hover {
	border-color: var(--mls-teal);
	background: var(--mls-teal-tint);
	color: var(--mls-heading);
}

.mild-login #mo_saml_login_sso_button img {
	padding: 0 !important;
	filter: brightness(0) opacity(.75); /* låset är vitt, knappen nu ljus */
}

.mild-login #mo_saml_button > div:last-child {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto !important;
	margin: 20px 0;
	padding: 0 !important;
	color: var(--mls-muted);
	font-size: 13px !important;
	text-transform: lowercase;
}

.mild-login #mo_saml_button > div:last-child::before,
.mild-login #mo_saml_button > div:last-child::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--mls-card-line);
}

.mild-login #mo_saml_button > div:last-child b {
	font-weight: 500;
}

/* Registrering / glömt lösenord */
.mild-login #login #reg_passmail,
.mild-login #login .description,
.mild-login #login .indicator-hint {
	color: var(--mls-muted);
	font-size: 14px;
}

.mild-login #login #pass-strength-result {
	margin: 8px 0 0;
	border-radius: var(--mls-radius);
}

/* Länkar under formuläret – i kortet, avskilda med en tunn linje */
.mild-login #login #nav {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--mls-card-line);
	font-size: 15px;
	color: var(--mls-muted);
}

.mild-login #login #backtoblog {
	margin: 8px 0 0;
	padding: 0;
	font-size: 15px;
}

.mild-login #login a {
	color: var(--mls-teal-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s ease;
}

.mild-login #login #nav a,
.mild-login #login #backtoblog a {
	color: var(--mls-heading);
	text-decoration-color: var(--mls-teal);
	text-decoration-thickness: 2px;
}

.mild-login #login a:hover,
.mild-login #login #nav a:hover,
.mild-login #login #backtoblog a:hover {
	color: var(--mls-teal-text);
}

.mild-login a:focus-visible,
.mild-login .mls-aside__logo:focus-visible {
	outline: 2px solid var(--mls-teal);
	outline-offset: 3px;
	box-shadow: none;
}

.mild-login #login .privacy-policy-page-link {
	margin: 20px 0 0;
	font-size: 14px;
}

/* Språkväljaren, under kortet */
.mild-login .language-switcher {
	grid-row: 3;
	width: calc(100% - 48px);
	max-width: 440px;
	margin: 0 auto;
	padding: 20px 0 48px;
}

.mild-login .language-switcher #language-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.mild-login .language-switcher label {
	color: var(--mls-muted);
	font-size: 14px;
}

.mild-login .language-switcher label .dashicons {
	color: var(--mls-muted);
}

.mild-login .language-switcher select {
	min-height: 36px;
	padding: 4px 30px 4px 10px;
	border: 1px solid var(--mls-card-line);
	border-radius: var(--mls-radius);
	background-color: var(--mls-card);
	color: var(--mls-heading);
	font-family: inherit;
	font-size: 14px;
}

.mild-login .language-switcher .button {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--mls-card-line);
	border-radius: var(--mls-radius);
	background: var(--mls-card);
	color: var(--mls-heading);
	font-family: inherit;
}

/* ---------- Flytande etiketter (bara med JS, se login.js) ---------- */

.mild-login .mls-float {
	position: relative;
}

.mild-login #login form .mls-float > label {
	position: absolute;
	top: 12px;
	left: 15px;
	z-index: 1;
	margin: 0 0 0 -4px;
	padding: 0 4px;
	background: transparent;
	color: var(--mls-muted);
	font-size: 16px;
	font-weight: 400;
	pointer-events: none;
	transform-origin: left top;
	transition: transform .15s ease, color .15s ease;
}

/* När etiketten ligger på kanten behöver den kortets färg bakom sig */
.mild-login #login form .mls-float.is-active > label {
	background: var(--mls-card);
	color: var(--mls-heading);
	font-weight: 500;
	transform: translateY(-23px) scale(.8);
}

.mild-login #login form .mls-float.is-focused > label {
	color: var(--mls-teal-text);
}

/* ---------- Sessionen gick ut (modalen i wp-admin) ---------- */

body.mild-login.interim-login {
	display: block;
	min-height: 0;
	background: var(--mls-card);
}

.mild-login.interim-login .mls-aside {
	display: none;
}

.mild-login.interim-login #login {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
	body.mild-login {
		display: block;
	}

	.mild-login .mls-aside {
		position: relative;
		height: auto;
		gap: 16px;
		padding: 24px;
		border-right: 0;
		border-bottom: 1px solid var(--mls-card-line);
	}

	.mild-login .mls-aside__logo svg {
		width: 72px;
	}

	.mild-login .mls-aside__tagline {
		max-width: none;
		font-size: 28px;
	}

	.mild-login .mls-aside__credit {
		display: none;
	}

	.mild-login .mls-aside__mark {
		right: -10%;
		bottom: -40%;
		width: 70%;
	}

	.mild-login #login {
		width: calc(100% - 32px);
		margin-top: 24px;
		padding: 28px 20px 24px;
	}

	.mild-login .mls-heading__title {
		font-size: 24px;
	}

	.mild-login .language-switcher {
		width: calc(100% - 32px);
		padding: 16px 0 32px;
	}
}

/* ---------- Alltid ljus ----------
 * Modell 3 är den ljusa varianten och följer inte systemets mörka läge.
 * color-scheme: light gör att webbläsarens egna kontroller (select, autofyll)
 * också blir ljusa när datorn står i mörkt läge.
 */

html:has(body.mild-login),
body.mild-login {
	color-scheme: light;
}

/* ---------- Mindre rörelse ---------- */

@media (prefers-reduced-motion: reduce) {
	.mild-login *,
	.mild-login *::before,
	.mild-login *::after {
		transition: none !important;
		animation: none !important;
	}
}