/**
 * SUNMORTAR — HR portal screens (login).
 *
 * Inherits every token and the glass surface from frontend.css; this file
 * only adds what the portal needs on top.
 *
 * @package SUNMORTAR_EV
 */
.sunmv.sunmv--portal {
	display: grid;
	place-items: center;
	min-height: 100dvh;
	border-radius: 0;
}

body.admin-bar .sunmv.sunmv--portal {
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .sunmv.sunmv--portal {
		min-height: calc(100dvh - 46px);
	}
}

@supports not (height: 100dvh) {
	.sunmv.sunmv--portal { min-height: 100vh; }
}

.sunmv .sunmv-stage--narrow {
	max-width: 30rem;
}

/* ====================================================================
 * Auth card
 * ================================================================= */
.sunmv .sunmv-auth {
	padding: clamp(26px, 5cqi, 44px);
}

.sunmv .sunmv-auth__head {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 6px;
	margin-bottom: 26px;
}

.sunmv .sunmv-auth__logo {
	height: 52px;
	width: auto;
	max-width: 210px;
	object-fit: contain;
	margin-bottom: 12px;
}

.sunmv .sunmv-auth__title {
	margin: 0;
	font-family: var(--sun-font-display);
	font-size: clamp(24px, 4.6cqi, 30px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sun-ink);
}

.sunmv .sunmv-auth__sub {
	margin: 0;
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sun-ink-2);
	text-wrap: pretty;
}

/* --- Messages -------------------------------------------------------- */
.sunmv .sunmv-auth__error {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: var(--sun-r-sm);
	border-inline-start: 4px solid var(--sun-no);
	background: color-mix(in srgb, var(--sun-no) 10%, transparent);
	color: var(--sun-ink);
	font-size: 15px;
	line-height: 1.5;
}

.sunmv .sunmv-auth__deny {
	margin: 0 0 14px;
	padding: 13px 16px;
	border-radius: var(--sun-r-sm);
	border-inline-start: 4px solid var(--sun-hold);
	background: color-mix(in srgb, var(--sun-hold) 10%, transparent);
	font-size: 15px;
	line-height: 1.5;
}

/* --- wp_login_form(), restyled --------------------------------------- */
.sunmv #sunmv-loginform {
	display: grid;
	gap: 16px;
	margin: 0;
}

.sunmv #sunmv-loginform p {
	margin: 0;
}

.sunmv #sunmv-loginform label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sun-ink-2);
}

.sunmv #sunmv-loginform input[type="text"],
.sunmv #sunmv-loginform input[type="password"] {
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	border-radius: var(--sun-r-md);
	border: 1.5px solid color-mix(in srgb, var(--sun-ink) 14%, transparent);
	background: var(--sun-slab);
	color: var(--sun-ink);
	font-family: var(--sun-font);
	/* 16px floor keeps iOS from zooming on focus. */
	font-size: 16.5px;
	line-height: 1.4;
	box-shadow: inset 0 1px 2px rgba(65, 42, 0, 0.05);
	transition: border-color 0.18s var(--sun-ease), box-shadow 0.18s var(--sun-ease);
}

.sunmv #sunmv-loginform input[type="text"]:focus,
.sunmv #sunmv-loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--sun-amber);
	background: color-mix(in srgb, #fff 80%, var(--sun-base-1));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun-amber) 22%, transparent);
}

.sunmv #sunmv-loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--sun-ink-2);
	cursor: pointer;
}

.sunmv #sunmv-loginform .login-remember input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sun-amber);
}

.sunmv #sunmv-loginform .login-submit input[type="submit"] {
	width: 100%;
	min-height: 56px;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--sun-r-md);
	background: linear-gradient(145deg, var(--sun-amber-lift), #e08900);
	color: #fff;
	font-family: var(--sun-font-display);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow:
		0 1px 2px rgba(120, 72, 0, 0.2),
		0 12px 24px -10px rgba(200, 122, 0, 0.75),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: transform 0.15s var(--sun-ease), box-shadow 0.15s var(--sun-ease);
}

.sunmv #sunmv-loginform .login-submit input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 2px rgba(120, 72, 0, 0.2),
		0 18px 30px -10px rgba(200, 122, 0, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --- Signed-in state -------------------------------------------------- */
.sunmv .sunmv-auth__signed {
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
}

.sunmv .sunmv-auth__hello {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--sun-ink-2);
}

.sunmv .sunmv-btn--block {
	display: grid;
	place-items: center;
	width: 100%;
	text-decoration: none;
}

.sunmv .sunmv-auth__alt {
	font-size: 14.5px;
	color: var(--sun-ink-3);
}

/* --- Links ----------------------------------------------------------- */
.sunmv .sunmv-auth__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--sun-hairline);
	font-size: 14.5px;
	color: var(--sun-ink-3);
}

.sunmv .sunmv-auth__links a {
	color: var(--sun-amber-deep);
	text-decoration: none;
	font-weight: 600;
}

.sunmv .sunmv-auth__links a:hover,
.sunmv .sunmv-auth__alt:hover {
	text-decoration: underline;
}

/* The "Masuk sebagai HR" pill lives in frontend.css — it renders on the
   public validation panel, where this stylesheet is not loaded. */