/* ITHub login screen - visual refresh (2026-09). Scoped to body.login-page so
   the legacy hive-it.css / ithub-login.css rules shared by lightbox pages keep
   working elsewhere. Keep this file ASCII: site is Windows-1252. */

body.login-page {
	font: 13px/1.45 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #3a3f47;
	background: #1E1E1E url(../../img/body-bg.jpg);
	margin: 0;
	padding: 36px 16px 28px;
	min-height: 100vh;
	box-sizing: border-box;
}

body.login-page .wrap-all {
	width: auto;
	max-width: 680px;
	margin: 0 auto;
}

body.login-page #header {
	text-align: center;
	padding: 0 0 20px;
}
body.login-page #header img {
	width: 96px;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

/* status / error banner ------------------------------------------------ */
body.login-page #LoginErrorDiv:empty {
	display: none;
}
body.login-page div.error-message {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #2b2b2b;
	color: #fff;
	border: 1px solid #F5AF14;
	border-left-width: 4px;
	border-radius: 8px;
	margin: 0 0 12px;
	padding: 8px 12px;
	text-align: left;
	font-size: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
body.login-page div.error-message img {
	margin: 0;
	flex: 0 0 auto;
}

/* card ----------------------------------------------------------------- */
body.login-page .login-card {
	display: flex;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.login-page .login-card > div.login,
body.login-page .login-card > div.password-recovery {
	float: none;
	width: auto;
	height: auto;
	border-radius: 0;
	padding: 26px 28px 24px;
	box-sizing: border-box;
	background: #fff;
	min-width: 0; /* stop the GIS iframe widening the column after load */
}
body.login-page .login-card > div.login {
	flex: 0 0 58%;
}
body.login-page .login-card > div.password-recovery {
	flex: 1 1 42%;
	background: #F6F7F9;
	border-left: 1px solid #E6E8EC;
}

body.login-page .login-card h2 {
	font-size: 18px;
	font-weight: 600;
	color: #1c2128;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
body.login-page .login-card p.lead {
	margin: 0 0 16px;
	color: #6b7280;
	font-size: 12px;
}

/* form controls -------------------------------------------------------- */
body.login-page .login-card form {
	margin: 0;
}
body.login-page .login-card label {
	display: block;
	margin: 0 0 11px;
	color: #374151;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body.login-page .login-card label > span {
	display: block;
	margin-bottom: 4px;
}
body.login-page .login-card input.formfield,
body.login-page .login-card select.field {
	display: block;
	width: 100% !important;
	height: 34px !important;
	box-sizing: border-box;
	margin: 0;
	padding: 0 10px;
	font: 13px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1c2128;
	background: #fff;
	border: 1px solid #CDD3DB !important;
	border-radius: 6px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
body.login-page .login-card select.field {
	font-size: 13px !important;
	padding-right: 30px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
body.login-page .login-card input.formfield:focus,
body.login-page .login-card select.field:focus {
	outline: none;
	border-color: #F5AF14 !important;
	box-shadow: 0 0 0 3px rgba(245, 175, 20, 0.28);
}

body.login-page .login-card .btn-default,
body.login-page .login-card .btn-primary {
	display: block;
	width: 100%;
	height: 36px;
	margin: 4px 0 0;
	padding: 0 14px;
	font: 600 13px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1c2128;
	background: #F5AF14 !important;
	border: 1px solid #E39E0A !important;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
body.login-page .login-card .btn-default:hover,
body.login-page .login-card .btn-primary:hover {
	background: #E39E0A !important;
	color: #1c2128;
	box-shadow: 0 4px 12px rgba(245, 175, 20, 0.35);
}
body.login-page .login-card .btn-default:active,
body.login-page .login-card .btn-primary:active {
	transform: translateY(1px);
}
body.login-page .login-card .btn-default:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}
body.login-page .login-card .btn-secondary {
	background: #fff !important;
	border-color: #CDD3DB !important;
}
body.login-page .login-card .btn-secondary:hover {
	background: #F0F2F5 !important;
	box-shadow: none;
}

/* Google sign-in ------------------------------------------------------- */
body.login-page .login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 12px;
	color: #9aa3ad;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
body.login-page .login-divider::before,
body.login-page .login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #E6E8EC;
}
/* GIS first paints the standard button, then swaps in the taller personalised
   "Sign in as ..." one (and both ignore widths over 400px). Reserve the tall
   height up front and centre whatever it draws so nothing below it jumps. */
body.login-page .google-signin {
	height: 52px;
	margin: 0 -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
body.login-page .google-signin .g_id_signin,
body.login-page .google-signin .g_id_signin > div,
body.login-page .google-signin .g_id_signin > div > div {
	display: flex;
	align-items: center;
	justify-content: center;
}
body.login-page .google-signin .g_id_signin iframe {
	margin: 0 !important;
}

/* recovery status + contact ------------------------------------------- */
body.login-page #ForgotStatus {
	display: none;
	max-width: none;
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.45;
	background: #FFF7E0;
	color: #7a5200;
	border: 1px solid #F5D98A;
}
body.login-page #ForgotStatus.is-ok {
	background: #E9F7EC;
	color: #0f6b38;
	border-color: #B7E3C4;
}
body.login-page #ForgotStatus.is-error {
	background: #FDECEC;
	color: #A4262C;
	border-color: #F3B9BD;
}
body.login-page #ForgotStatus.is-visible {
	display: block;
}
body.login-page .recovery-hint {
	margin: 10px 0 0;
	color: #6b7280;
	font-size: 11px;
}
body.login-page p.contact-us {
	margin: 20px 0 0;
	padding-top: 12px;
	border-top: 1px solid #E6E8EC;
	color: #6b7280;
	font-size: 12px;
}
body.login-page a {
	color: #B87A00;
}
body.login-page a:hover {
	color: #F5AF14;
}

body.login-page #footer {
	color: #6b6b6b;
	font-size: 11px;
	padding: 20px 0 0;
}

@media (max-width: 600px) {
	body.login-page {
		padding: 20px 12px 20px;
		background-attachment: scroll;
	}
	body.login-page #header {
		padding-bottom: 14px;
	}
	body.login-page #header img {
		width: 72px;
	}
	body.login-page .login-card {
		flex-direction: column;
		border-radius: 10px;
	}
	body.login-page .login-card > div.login,
	body.login-page .login-card > div.password-recovery {
		flex: 0 0 auto;
		padding: 22px 20px 20px;
	}
	body.login-page .login-card > div.password-recovery {
		border-left: 0;
		border-top: 1px solid #E6E8EC;
	}
	/* bigger touch targets on phones, and 16px stops iOS zooming inputs */
	body.login-page .login-card input.formfield,
	body.login-page .login-card select.field {
		height: 42px !important;
		font-size: 16px;
	}
	body.login-page .login-card select.field {
		font-size: 16px !important;
	}
	body.login-page .login-card .btn-default,
	body.login-page .login-card .btn-primary {
		height: 44px;
		font-size: 15px;
	}
	body.login-page .google-signin .g_id_signin iframe {
		max-width: 100%;
	}
	body.login-page p.contact-us {
		margin-top: 14px;
	}
}