/* ============================================================================
 * Singhania ERP — sign-in page
 * Loaded from Website Settings -> <head> HTML. Every rule is scoped to the
 * authentication paths, so the rest of the portal is untouched.
 * Palette: CA navy #06304f, CA blue #0b5e9c, arc red #f58220.
 * ==========================================================================*/

body[data-path="login"],
body[data-path="update-password"],
body[data-path="reset-password"] {
	background-color: #eef5fb;
	background-image: url("/assets/ca_practice/images/login-bg.svg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* `fixed` is unreliable on iOS Safari at every size and buys nothing on a
	   cover background, so it is not used at all. */
	background-attachment: scroll;
	min-height: 100vh;
	min-height: 100svh;   /* ignored by older engines, which keep the vh above */
}

/* keep the card optically centred on the artwork */
body[data-path="login"] .page-content-wrapper,
body[data-path="update-password"] .page-content-wrapper,
body[data-path="reset-password"] .page-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	/* min-height (not height): if the card is taller than the viewport the
	   container grows and the page scrolls, instead of clipping the top. */
	min-height: 100vh;
	min-height: 100svh;
	padding-top: 0;
	padding-block: 24px;
}
body[data-path="login"] .web-footer,
body[data-path="login"] .navbar { display: none; }

/* ------------------------------------------------------------- the card -- */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card,
body[data-path="reset-password"] .page-card {
	background-color: #ffffff;
	border: none;
	border-radius: 12px;
	padding: 28px 32px 26px;
	max-width: 400px;
	box-shadow: 0 0 0 1px rgba(11, 94, 156, .14), 0 18px 48px rgba(6, 48, 79, .16);
}

/* --------------------------------------------------- logo, dead centre --- */
body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head,
body[data-path="reset-password"] .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	margin-bottom: 4px;
}
body[data-path="login"] .page-card-head .app-logo,
body[data-path="update-password"] .page-card-head .app-logo,
body[data-path="reset-password"] .page-card-head .app-logo {
	/* wide wordmark (about 4:1): fit by width, keep the aspect ratio */
	width: auto;
	height: auto;
	max-width: min(300px, 100%);
	max-height: 100px;
	object-fit: contain;
	margin: 0 auto;
	display: block;
}
body[data-path="login"] .page-card-head-text,
body[data-path="update-password"] .page-card-head-text,
body[data-path="reset-password"] .page-card-head-text { text-align: center; width: 100%; }

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-title {
	color: #06304f;
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 4px;
}
body[data-path="login"] .page-card-subtitle,
body[data-path="update-password"] .page-card-subtitle {
	color: #556b82;
	font-size: 13px;
}

/* a hairline in the logo's three colours, under the head */
body[data-path="login"] .page-card-head::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	margin-top: 2px;
	background: linear-gradient(90deg, #f58220 0%, #06304f 50%, #0b5e9c 100%);
}

/* ------------------------------------------------------------- fields --- */
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control,
body[data-path="reset-password"] .form-control {
	background-color: #ffffff;
	border: 1px solid #8896a6;
	border-radius: 4px;
	height: 36px;
	color: #223548;
	box-shadow: none;
}
body[data-path="login"] .form-control:hover { border-color: #0b5e9c; }
body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
	border-color: #0b5e9c;
	box-shadow: 0 0 0 2px rgba(11, 94, 156, .25);
	outline: none;
}
body[data-path="login"] .form-label,
body[data-path="login"] .control-label { color: #556b82; font-weight: 400; }

/* ------------------------------------------------------------ buttons --- */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-default.btn-block,
body[data-path="update-password"] .btn-primary,
body[data-path="reset-password"] .btn-primary {
	background-color: #0b5e9c !important;
	border: 1px solid #0b5e9c !important;
	color: #ffffff !important;
	border-radius: 8px;
	height: 38px;
	font-weight: 600;
	box-shadow: none;
}
body[data-path="login"] .btn-login:hover,
body[data-path="update-password"] .btn-primary:hover {
	background-color: #094e83 !important;
	border-color: #094e83 !important;
}
body[data-path="login"] .btn-login:focus-visible {
	box-shadow: 0 0 0 3px rgba(11, 94, 156, .3) !important;
}
body[data-path="login"] a,
body[data-path="login"] .forgot-password-message a { color: #0b5e9c; }
body[data-path="login"] a:hover { color: #083f6b; }

/* social / third-party sign-in keeps the neutral Fiori button */
body[data-path="login"] .social-logins .btn,
body[data-path="login"] .login-with-email-link {
	background-color: #ffffff !important;
	border: 1px solid #bcc3ca !important;
	color: #0b5e9c !important;
	border-radius: 8px;
}

/* ------------------------------------------------------------- errors --- */
body[data-path="login"] .login-error-banner,
body[data-path="login"] .field-error { color: #aa0808; }

/* --------------------------------------------------------- small print --- */
body[data-path="login"] .page-card::after {
	content: "Singhania & Associates";
	display: block;
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #eaecee;
	text-align: center;
	font-size: 11px;
	letter-spacing: .4px;
	color: #8e9aa6;
}

/* ====================================================================== */
/* Responsive                                                              */
/* The artwork is 1600x900 and is cropped by `cover`. On a narrow portrait  */
/* screen that crop throws away the left and right thirds - including two   */
/* of the three pillar captions - so below 768px the page drops the SVG and */
/* keeps the brand gradient instead of showing a badly cropped picture.     */
/* ====================================================================== */

/* --- tablets, portrait and landscape (768-1024) ----------------------- */
@media (max-width: 1024px) {
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card,
	body[data-path="reset-password"] .page-card {
		max-width: 420px;
	}
}

/* --- phones and narrow tablets: gradient instead of a cropped image ---- */
@media (max-width: 767.98px) {
	body[data-path="login"],
	body[data-path="update-password"],
	body[data-path="reset-password"] {
		background-image: linear-gradient(160deg, #00091f 0%, #06304f 45%, #0b5e9c 100%);
	}
	body[data-path="login"] .page-content-wrapper,
	body[data-path="update-password"] .page-content-wrapper,
	body[data-path="reset-password"] .page-content-wrapper {
		padding-inline: 16px;
		padding-block: 20px;
	}
	body[data-path="login"] .page-card,
	body[data-path="update-password"] .page-card,
	body[data-path="reset-password"] .page-card {
		max-width: 100%;
		min-height: auto;
		border-radius: 12px;
		padding: 28px 22px 24px;
	}
}

/* --- small phones (<=360px): tighten without shrinking tap targets ----- */
@media (max-width: 360px) {
	body[data-path="login"] .page-content-wrapper { padding-inline: 12px; }
	body[data-path="login"] .page-card { padding: 24px 18px 20px; }
	body[data-path="login"] .page-card-head .app-logo { max-width: min(260px, 100%); max-height: 80px; }
	body[data-path="login"] .page-card-head h4 { font-size: 18px; }
}

/* --- short viewports (landscape phones, ~<=520px tall) ---------------- */
/* Recover vertical space so the card still fits; the form stays scrollable. */
@media (max-height: 520px) and (orientation: landscape) {
	body[data-path="login"] .page-content-wrapper { padding-block: 12px; }
	body[data-path="login"] .page-card { padding: 20px 22px 18px; }
	body[data-path="login"] .page-card-head { gap: 8px; margin-bottom: 0; }
	body[data-path="login"] .page-card-head .app-logo { max-width: min(220px, 100%); max-height: 64px; }
	body[data-path="login"] .page-card-head::after { display: none; }
	body[data-path="login"] .page-card::after { margin-top: 14px; padding-top: 10px; }
}

/* --- short screens (laptops with browser bars, small phones): trim the
   vertical padding so card + footer line fit without scrolling --------- */
@media (max-height: 700px) {
	body[data-path="login"] .page-content-wrapper { padding-block: 12px; }
	body[data-path="login"] .page-card { padding-top: 22px; padding-bottom: 20px; }
	body[data-path="login"] .page-card::after { margin-top: 16px; padding-top: 10px; }
}

/* --- inputs must never trigger iOS auto-zoom (needs >=16px) ----------- */
@media (max-width: 767.98px) {
	body[data-path="login"] .form-control,
	body[data-path="update-password"] .form-control,
	body[data-path="reset-password"] .form-control {
		font-size: 16px;
		height: 42px;          /* comfortable touch target */
	}
	body[data-path="login"] .btn-login,
	body[data-path="login"] .btn-default.btn-block {
		height: 44px;          /* >=44px, the usual minimum touch target */
		font-size: 15px;
	}
}

/* --- nothing may scroll sideways ------------------------------------- */
body[data-path="login"],
body[data-path="update-password"],
body[data-path="reset-password"] { overflow-x: hidden; }
body[data-path="login"] img,
body[data-path="login"] svg { max-width: 100%; }