:root {
	/* centralized color definitions */
	--link: #0066b3;
	--link-disabled: #d0d0d0;
	--button-bg: #2b303b;
	--button-bg-hover: #1c2028;
	--button-text: #ffffff;
	--button-text-disabled: #a9a9a9;
	--button-bg-disabled: #e2e3e3;
	--alert-border: #c10c0d;
	--alert-bg: #fff2f2;
	--alert-text: #c10c0d;
	--info-border: rgb(1, 83, 155);
	--info-bg: rgb(217, 249, 255);
	--field-bg: #ffffff;
	--field-border: #d7d7d7;
	--field-border-focus: #2b303b;
	--form-text: #2b303b;
	--form-label: #8a8a8a;
	--heading-color: #1c2233;
	--subtext-color: #6b6f76;
	--footer-text: #8a8a8a;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	min-height: 100vh;
	background-image: url("plant-background.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Reduced container size and padding */
#container {
	margin: auto;
	width: 320px;
	box-sizing: border-box;
	padding: 24px 24px 20px;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.logo {
	display: block;
	margin: 0 auto 12px;
	width: 80px;
	height: 60px;
	background-image: url("heil-logo.gif");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Lowered and scaled company name header */
h1 {
	font-size: 1.25em;
	font-weight: 700;
	color: var(--heading-color);
	margin: 12px 0 16px;
	line-height: 1.3;
}

.divider {
	width: 60%;
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 0 auto 16px;
	position: relative;
}

.divider::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	border-top: 2px solid var(--heading-color);
}

.subtitle {
	font-size: 0.9em;
	color: var(--subtext-color);
	margin: 0 0 18px;
}

/* Compact form elements */
.form-login {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--field-bg);
	border: 1px solid var(--field-border);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 12px;
	text-align: left;
}

.form-login:focus-within {
	border-color: var(--field-border-focus);
	box-shadow: 0 0 0 3px rgba(43, 48, 59, 0.08);
}

/* Single-line label enforcement */
.form-login label,
.form-login .field-label {
	white-space: nowrap;
	flex-shrink: 0;
	margin-right: 12px;
	font-size: 13px;
	color: var(--form-text);
}

.form-login .field-icon {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	flex-shrink: 0;
	opacity: 0.6;
}

.form-login input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	color: var(--form-text);
	padding: 0;
}

.form-login input::placeholder {
	color: var(--form-label);
}

/* Toggle Password & MFA Controls */
.form-login .toggle-password,
.form-login .mfa-toggle {
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	margin-left: 10px;
	cursor: pointer;
	opacity: 0.6;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--form-text);
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}

.form-login .toggle-password:hover,
.form-login .mfa-toggle:hover {
	opacity: 1;
}

.form-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 18px;
}

.form-options label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--form-text);
	cursor: pointer;
}

.form-options input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

.form-link a {
	font-size: 12px;
	text-decoration: none;
	color: var(--link);
}

.form-link a:hover {
	text-decoration: underline;
}

.form-link a.disabled {
	pointer-events: none;
	color: var(--link-disabled);
}

/* Elevated Compact Login Button */
.blue-button input {
	width: 100%;
	background-color: var(--button-bg);
	color: var(--button-text);
	border: none;
	border-radius: 8px;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: block;
	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(43, 48, 59, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.blue-button input:hover {
	background-color: var(--button-bg-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(43, 48, 59, 0.35), 0 4px 6px rgba(0, 0, 0, 0.15);
}

.blue-button input:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(43, 48, 59, 0.2);
}

.blue-button input:disabled {
	background-color: var(--button-bg-disabled);
	color: var(--button-text-disabled);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

div.information,
div.alert {
	display: flex;
	align-items: center;
	text-align: left;
	padding: 6px 10px 6px 30px;
	background-repeat: no-repeat;
	background-position: 8px center;
	font-weight: 600;
	font-size: 12px;
	min-height: 28px;
	border-radius: 6px;
	margin-bottom: 14px;
}

div.information {
	border: 1px solid var(--info-border);
	background-color: var(--info-bg);
	background-image: url("icon-info.png");
	color: var(--info-border);
}

div.alert {
	border: 1px solid var(--alert-border);
	background-color: var(--alert-bg);
	background-image: url("icon-warning.png");
	color: var(--alert-text);
}

/* Footer / Disclaimer Container */
.footer-text {
	margin-top: 18px;
	font-size: 10px;
	line-height: 1.4;
	color: var(--footer-text);
	text-align: center;
}

.footer-text::after {
	content: "© 2026 Hindusthan Engineering & Industries Ltd. All rights reserved. The content on this website, including text, images, graphics, and other material, is protected by copyright law. No part of this website may be copied, reproduced, or used in any form without prior written permission.";
	display: block;
}

@media only screen and (max-device-width: 424px) and (orientation: portrait) {
	#container {
		width: 90%;
		padding: 20px 16px;
		border-radius: 12px;
	}

	.form-login {
		padding: 10px 12px;
	}

	.form-login input {
		font-size: 14px;
	}

	.blue-button input {
		font-size: 14px;
	}

	*:focus {
		outline: none !important;
	}
}