/*
 * KPMC ADMIN - COMPANY BRANDING
 *
 * Company-specific visual overrides for login.kpmcdevelopment.com.
 * Shared structural styles remain in assets.capitalcite.com.
 */


/* ============================================================
   KPMC BRAND VARIABLES
   ============================================================ */

:root {
	--ce-bg: #27454f;
	--ce-surface: #ffffff;
	--ce-surface-alt: #f4f4f1;

	--ce-text: #222222;
	--ce-text-muted: #666666;

	--ce-border: #d7d7d2;
	--ce-border-dark: #a9aaa4;

	--ce-primary: #bcb46f;
	--ce-primary-text: #27454f;

	--ce-link: #27454f;
	--ce-link-hover: #8f884f;

	--ce-success: #2e7d32;
	--ce-warning: #a66a00;
	--ce-error: #b42318;

	--ce-radius: 6px;

	--ce-shadow:
		0 8px 24px
		rgba(0, 0, 0, 0.16);
}


/* ============================================================
   PAGE
   ============================================================ */

body.loginPage {
	background:
		linear-gradient(
			180deg,
			#27454f 0%,
			#1f3840 100%
		);

	color: var(--ce-text);
}


/* ============================================================
   LOGIN LAYOUT
   ============================================================ */

.loginMain {
	min-height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 40px 20px;
}


.loginWrap {
	width: 100%;
	max-width: 430px;
}


/* ============================================================
   LOGO
   ============================================================ */

.loginLogoWrap {
	text-align: center;

	margin-bottom: 24px;
}


.loginLogo {
	display: block;

	max-width: 300px;
	max-height: 120px;

	width: auto;
	height: auto;

	margin: 0 auto;
}


/* ============================================================
   LOGIN CARD
   ============================================================ */

.loginCard {
	background: var(--ce-surface);

	border-radius: var(--ce-radius);

	box-shadow: var(--ce-shadow);

	padding: 34px 36px 30px;
}


.loginCard h1 {
	margin:
		0
		0
		8px;

	text-align: center;

	font-size: 1.65rem;
	font-weight: 600;

	color: #27454f;
}


.loginIntro {
	margin:
		0
		0
		26px;

	text-align: center;

	color: var(--ce-text-muted);
}


/* ============================================================
   LOGIN FORM
   ============================================================ */

#loginForm .fieldGroup {
	margin-bottom: 18px;
}


#loginForm label {
	display: block;

	margin-bottom: 6px;

	font-size: 0.92rem;
	font-weight: 600;

	color: #27454f;
}


#loginForm .formControl {
	width: 100%;

	background: #ffffff;

	border:
		1px
		solid
		var(--ce-border);

	border-radius: 4px;

	padding: 11px 12px;

	font-size: 1rem;

	color: var(--ce-text);

	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}


#loginForm .formControl:focus {
	border-color: #bcb46f;

	box-shadow:
		0 0 0 3px
		rgba(188, 180, 111, 0.18);

	outline: none;
}


/* ============================================================
   LOGIN BUTTON
   ============================================================ */

#loginForm .formActions {
	margin-top: 24px;
}


#loginForm .loginButton {
	display: block;

	width: 100%;

	border: none;

	border-radius: 4px;

	background: #bcb46f;

	color: #27454f;

	padding: 12px 18px;

	font-size: 0.98rem;
	font-weight: 700;

	letter-spacing: 0.04em;

	cursor: pointer;

	transition:
		background 0.15s ease,
		transform 0.05s ease;
}


#loginForm .loginButton:hover {
	background: #aaa25f;
}


#loginForm .loginButton:active {
	transform: translateY(1px);
}


#loginForm .loginButton:disabled {
	opacity: 0.6;

	cursor: not-allowed;
}


/* ============================================================
   FORGOT PASSWORD
   ============================================================ */

.forgotPasswordWrap {
	margin-top: 20px;

	text-align: center;
}


.forgotPasswordWrap a {
	color: #27454f;

	font-size: 0.92rem;

	text-decoration: none;
}


.forgotPasswordWrap a:hover {
	color: #8f884f;

	text-decoration: underline;
}


/* ============================================================
   DYNAMIC LOGIN BOXES
   ============================================================ */

#forgotPasswordBox,
#passwordUpdateBox,
.smsVerificationBox {
	margin-top: 24px;

	padding-top: 22px;

	border-top:
		1px
		solid
		var(--ce-border);
}


#forgotPasswordBox p,
#passwordUpdateBox p,
.smsVerificationBox p {
	margin-bottom: 16px;

	color: var(--ce-text-muted);

	line-height: 1.45;
}


#forgotPasswordBox input,
#passwordUpdateBox input,
.smsVerificationBox input {
	width: 100%;

	box-sizing: border-box;
}


/* ============================================================
   SMS VERIFICATION
   ============================================================ */

.smsVerificationBox h3 {
	margin:
		0
		0
		8px;

	color: #27454f;

	font-size: 1.15rem;
}


.smsVerificationBox .smsCodeInput {
	text-align: center;

	font-size: 1.35rem;

	letter-spacing: 0.2em;

	font-weight: 600;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media
	(max-width: 600px) {

	.loginMain {
		padding:
			24px
			14px;
	}

	.loginCard {
		padding:
			28px
			22px;
	}

	.loginLogo {
		max-width: 240px;
	}

}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

	body.loginPage {
		background: #ffffff;
	}

	.loginCard {
		box-shadow: none;
	}

}