/* Okaz Arabia login page. Every rule is scoped to body[data-path="login"]. */

body[data-path="login"] {
	--okaz: #47317a;
	--okaz-hover: #3a2866;
	--okaz-tint: #f6f4fa;
	--okaz-line: #e3e0ea;
	--okaz-text: #1f1a2e;
	--okaz-muted: #6b6780;
	background: #f4f4f6;
	min-height: 100vh;
	overflow-x: hidden;
}

body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-footer {
	display: none !important;
}

/* Layout: the card sits in the exact centre of the viewport. */
body[data-path="login"] #page-login {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}
body[data-path="login"] #page-login .page-content-wrapper {
	width: 100%;
	max-width: 580px;
	min-height: 0;
}
body[data-path="login"] #page-login main.container {
	margin: 0 !important;
	padding: 0;
	max-width: none;
}
/* Frappe's website CSS gives .page_content a 450px min-height, which pushes the card off centre. */
body[data-path="login"] #page-login .page_content {
	min-height: 0;
}

/*
 * Card: each login <section> is the white rectangle. Frappe's login.js shows and
 * hides the sections with jQuery, which writes an inline display, so the section
 * stays a block: the branding column is pinned to its left edge and the form
 * fills the rest.
 */
body[data-path="login"] #page-login section {
	position: relative;
	box-sizing: border-box;
	min-height: 300px;
	padding-left: 220px;
	background: #fff;
	border: 1px solid var(--okaz-line);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(31, 26, 46, 0.06), 0 4px 16px rgba(31, 26, 46, 0.04);
	overflow: hidden;
}

/* Left: logo, company name and a short message. */
body[data-path="login"] #page-login .page-card-head {
	position: absolute;
	inset: 0 auto 0 0;
	width: 220px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 24px;
	margin: 0;
	text-align: left;
	background: var(--okaz-tint);
	border-right: 1px solid var(--okaz-line);
}
body[data-path="login"] #page-login .page-card-head .app-logo {
	display: block;
	width: 132px;
	height: auto;
	max-height: none;
	margin: 0 0 20px;
}
body[data-path="login"] #page-login .page-card-head h4 {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--okaz-muted);
}
body[data-path="login"] #page-login .page-card-head h4::before {
	content: "Okaz Arabia ERP";
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--okaz);
}
/* Frappe's own title moves to the form column as a heading, so the left keeps just the
   company name, plus a welcome line on the login screen. */
body[data-path="login"] #page-login .page-card-head h4 {
	font-size: 0;
}
body[data-path="login"] #page-login .page-card-head h4::before {
	font-size: 16px;
}
body[data-path="login"] #page-login .for-login .page-card-head h4::after {
	content: "Welcome back. Sign in to continue.";
	font-size: 13px;
}

/* Right column heading, one per screen. */
body[data-path="login"] #page-login .page-card::before {
	display: block;
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--okaz-text);
}
body[data-path="login"] #page-login .for-login .page-card::before {
	content: "Sign in";
}
body[data-path="login"] #page-login .for-forgot .page-card::before {
	content: "Reset password";
}
body[data-path="login"] #page-login .for-signup .page-card::before {
	content: "Create account";
}
body[data-path="login"] #page-login .for-login-with-email-link .page-card::before {
	content: "Sign in with email link";
}

/* Right: Frappe's own form, minus its own card box. */
body[data-path="login"] #page-login .page-card {
	max-width: none;
	margin: 0;
	padding: 24px 28px 16px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
/* Short screens (forgot password, email link, sign-up): centre the form in the column. */
body[data-path="login"] #page-login section:not(.for-login) .page-card {
	min-height: 298px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body[data-path="login"] #page-login .page-card form {
	max-width: none;
	margin: 0;
}
body[data-path="login"] #page-login .page-card-body,
body[data-path="login"] #page-login .page-card-actions {
	padding: 0;
}
body[data-path="login"] #page-login .page-card .page-card-actions {
	margin-top: 16px;
}
body[data-path="login"] #page-login .page-card .form-group {
	margin-bottom: 12px;
}

/* Fields (anchored on #page-login to outrank Frappe's login.bundle.css) */
body[data-path="login"] #page-login .page-card .form-control {
	height: 38px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid var(--okaz-line);
	background: #fff;
	color: var(--okaz-text);
	margin-bottom: 0;
	box-shadow: none;
	transition: border-color 0.15s;
}
body[data-path="login"] #page-login .page-card .form-control:focus {
	border-color: var(--okaz);
	box-shadow: 0 0 0 2px rgba(71, 49, 122, 0.12);
}
/* Keep Frappe's red border on a failed login. */
body[data-path="login"] #page-login .page-card-body.invalid .form-control {
	border-color: var(--red-500, #e03636);
}
body[data-path="login"] #page-login .email-field .form-control,
body[data-path="login"] #page-login .password-field .form-control {
	padding-left: 36px;
}
body[data-path="login"] #page-login .password-field .form-control {
	padding-right: 52px;
}
body[data-path="login"] #page-login .page-card .field-icon {
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: #8a85a0;
}
body[data-path="login"] #page-login .page-card .toggle-password {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
	color: var(--okaz) !important;
	font-weight: 500;
	font-size: 12px;
}

/* Links */
body[data-path="login"] #page-login a {
	color: var(--okaz);
	font-weight: 500;
}
body[data-path="login"] #page-login .forgot-password-message {
	text-align: right;
	margin: 0;
	line-height: 1;
}
body[data-path="login"] #page-login .forgot-password-message > * {
	font-size: 12px;
}

/* Buttons */
body[data-path="login"] #page-login .page-card .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
}
body[data-path="login"] #page-login .page-card .btn-primary {
	background: var(--okaz);
	border-color: var(--okaz);
	color: #fff;
	transition: background 0.15s;
}
body[data-path="login"] #page-login .page-card .btn-primary:hover,
body[data-path="login"] #page-login .page-card .btn-primary:focus {
	background: var(--okaz-hover);
	border-color: var(--okaz-hover);
}
body[data-path="login"] #page-login .page-card .btn-default,
body[data-path="login"] #page-login .page-card .btn-secondary,
body[data-path="login"] #page-login .page-card .btn-login-option {
	background: #fff;
	border: 1px solid var(--okaz-line);
	color: #3d3852;
	width: 100%;
	margin: 0;
}
body[data-path="login"] #page-login .page-card .btn-default:hover,
body[data-path="login"] #page-login .page-card .btn-secondary:hover,
body[data-path="login"] #page-login .page-card .btn-login-option:hover {
	background: var(--okaz-tint);
	border-color: var(--okaz);
}
body[data-path="login"] #page-login .login-button-wrapper {
	padding: 0;
}
body[data-path="login"] #page-login .login-divider {
	margin: 8px 0;
	font-size: 12px;
}
body[data-path="login"] #page-login .sign-up-message {
	margin: 0;
	padding: 0 28px 18px;
	font-size: 12px;
	color: var(--okaz-muted);
	text-align: center;
}
body[data-path="login"] #page-login .page-card-actions .sign-up-message {
	padding: 0;
	margin-top: 12px;
}

/* Narrow screens: branding stacks above the form. */
@media (max-width: 599.98px) {
	body[data-path="login"] #page-login {
		align-items: flex-start;
		padding-top: 40px;
	}
	body[data-path="login"] #page-login section {
		min-height: 0;
		padding-left: 0;
	}
	body[data-path="login"] #page-login .page-card-head {
		position: static;
		width: auto;
		align-items: center;
		text-align: center;
		padding: 24px 20px 18px;
		border-right: 0;
		border-bottom: 1px solid var(--okaz-line);
	}
	body[data-path="login"] #page-login .page-card-head .app-logo {
		width: 112px;
		margin: 0 auto 12px;
	}
	body[data-path="login"] #page-login .page-card,
	body[data-path="login"] #page-login section:not(.for-login) .page-card {
		min-height: 0;
		padding: 22px 20px 16px;
	}
	body[data-path="login"] #page-login .sign-up-message {
		padding: 0 20px 18px;
	}
}