/*
 * Tower Inventory — premium login page for "Al-Rusaiss Tower Project - 122" (BANI).
 *
 * Loaded site-wide via hooks.web_include_css, but EVERY rule below is scoped to
 * `body[data-path="login"]` so it only ever affects the /login page. Nothing
 * else in the app (desk, inventory screens, other web pages) is touched.
 * Fully reversible: remove the web_include_css line in hooks.py.
 *
 * Brand palette pulled from the BANI logo:  blue #00558C   red #E51E39
 */

/* ----------------------------------------------------------------------------
 * 0. Hide the website chrome (navbar "Home", footer, page-head) on login
 * ------------------------------------------------------------------------- */
body[data-path="login"] .navbar,
body[data-path="login"] header.navbar,
body[data-path="login"] .page-head,
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
	display: none !important;
}

/* ----------------------------------------------------------------------------
 * 1. Full-screen tower background + readability overlay
 * ------------------------------------------------------------------------- */
body[data-path="login"] {
	margin: 0;
	padding: 0 !important;
	min-height: 100vh;
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
		Arial, "Noto Sans Arabic", sans-serif;
	background: #04101f url("/assets/tower_inventory/images/tower-they-are-building2.JPG")
		center center / cover no-repeat fixed;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Dark gradient (darker at the bottom) + subtle brand-blue glow, fixed over photo */
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(1100px 720px at 72% 18%, rgba(0, 85, 140, 0.28), transparent 60%),
		linear-gradient(180deg, rgba(3, 10, 20, 0.40) 0%, rgba(3, 10, 20, 0.55) 42%,
			rgba(2, 7, 15, 0.84) 100%);
	z-index: 0;
	pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * 2. Neutralise Frappe's container constraints & center the card full-screen
 * ------------------------------------------------------------------------- */
body[data-path="login"] .page-content-wrapper { width: 100%; }

body[data-path="login"] main,
body[data-path="login"] main.container {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body[data-path="login"] .page_content { margin: 0 !important; padding: 0 !important; }

body[data-path="login"] .page_content > div {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	position: relative;
	z-index: 1;
}

/* ----------------------------------------------------------------------------
 * 3. The frosted-glass card  (each visible <section> becomes the card)
 * ------------------------------------------------------------------------- */
body[data-path="login"] section.for-login,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-login-with-email-link,
body[data-path="login"] section.for-email-login {
	width: 100%;
	max-width: 430px;
	padding: 42px 38px 34px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 24px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	color: #fff;
	animation: ti-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Make the inner Frappe card a transparent passthrough so head + form read as
 * one single glass card. */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .page-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
}

/* ----------------------------------------------------------------------------
 * 4. Logo (all sections) + title/subtitle (login section only)
 * ------------------------------------------------------------------------- */
body[data-path="login"] .page-card-head {
	text-align: center;
	margin-bottom: 26px;
}

/* hide Frappe's default <img> logo and render the cropped BANI banner cleanly */
body[data-path="login"] .page-card-head img.app-logo { display: none; }

body[data-path="login"] .page-card-head::before {
	content: "";
	display: block;
	width: 236px;
	height: 130px; /* 236 / 1.808 ≈ 130, matches logo aspect — no distortion */
	max-width: 70%;
	margin: 0 auto 18px;
	background: url("/assets/tower_inventory/images/logo_clean.png") center / cover no-repeat;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* default visible title for the forgot / email-link sub-screens */
body[data-path="login"] .page-card-head h4 {
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* On the main login screen, replace "Login to ..." with the project name */
body[data-path="login"] .for-login .page-card-head h4 {
	font-size: 0;
	line-height: 0;
}
body[data-path="login"] .for-login .page-card-head h4::after {
	content: "Al-Rusaiss Tower Project — 122";
	display: block;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.3;
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
/* thin brand-red accent divider under the header */
body[data-path="login"] .for-login .page-card-head h4::before {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 18px auto 2px;
	border-radius: 3px;
	background: linear-gradient(90deg, #E51E39, #ff5e74);
	box-shadow: 0 2px 10px rgba(229, 30, 57, 0.5);
}
/* Subtitle / tagline */
body[data-path="login"] .for-login .page-card-head::after {
	content: "INVENTORY MANAGEMENT SYSTEM";
	display: block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.4px;
	color: rgba(255, 255, 255, 0.66);
}

/* ----------------------------------------------------------------------------
 * 5. Inputs — modern, comfortable, branded focus glow  (all sections)
 * ------------------------------------------------------------------------- */
body[data-path="login"] .form-group { margin-bottom: 16px; }

body[data-path="login"] .email-field,
body[data-path="login"] .password-field { position: relative; }

/* kill Frappe's default 1rem input margin that breaks vertical centering */
body[data-path="login"] .page-card-body input.form-control { margin-bottom: 0 !important; }

body[data-path="login"] .form-control {
	height: auto;
	width: 100%;
	padding: 13px 44px !important;
	font-size: 14.5px;
	color: #0e1b2c !important;
	background: rgba(255, 255, 255, 0.94) !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-path="login"] .form-control::placeholder { color: #7a899b; opacity: 1; }

body[data-path="login"] .form-control:focus {
	outline: none;
	background: #ffffff !important;
	border-color: #00558C !important;
	box-shadow: 0 0 0 3.5px rgba(0, 85, 140, 0.30), 0 4px 16px rgba(0, 85, 140, 0.18);
}

/* field icon (left) — vertically centered to the input */
body[data-path="login"] .field-icon {
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 16px;
	height: 16px;
	color: #00558C;
	opacity: 0.85;
	pointer-events: none;
}

/* "Show" toggle (right) — vertically centered to the password input */
body[data-path="login"] .toggle-password {
	right: 15px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 12px;
	font-weight: 600;
	color: #00558C !important;
	cursor: pointer;
	user-select: none;
	z-index: 3;
}

/* forgot password link */
body[data-path="login"] .forgot-password-message {
	text-align: right;
	margin: 4px 2px 0;
	font-size: 12.5px;
	line-height: 1.4;
}
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .forgot-password-message > * {
	color: rgba(255, 255, 255, 0.82) !important;
	text-decoration: none;
	transition: color 0.15s ease;
}
body[data-path="login"] .forgot-password-message a:hover { color: #fff !important; text-decoration: underline; }

/* ----------------------------------------------------------------------------
 * 6. Buttons — primary login + the social / email-link buttons (all blue)
 * ------------------------------------------------------------------------- */
body[data-path="login"] .page-card-actions { margin-top: 22px; }

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-forgot,
body[data-path="login"] .btn-login-option,
body[data-path="login"] .btn-login-with-email-link {
	width: 100%;
	padding: 13px 16px !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #0a73ba 0%, #00558C 60%, #013f6b 100%) !important;
	box-shadow: 0 10px 26px rgba(0, 85, 140, 0.50) !important;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-forgot:hover,
body[data-path="login"] .btn-login-option:hover,
body[data-path="login"] .btn-login-with-email-link:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 16px 34px rgba(0, 85, 140, 0.62) !important;
	color: #fff !important;
}
body[data-path="login"] .btn-login:active,
body[data-path="login"] .btn-primary:active,
body[data-path="login"] .btn-login-option:active {
	transform: translateY(0);
	box-shadow: 0 8px 20px rgba(0, 85, 140, 0.5) !important;
}

/* "or" divider between login and the email-link button */
body[data-path="login"] .social-logins { margin-top: 18px; }
body[data-path="login"] .login-divider {
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 4px 0 14px;
}
body[data-path="login"] .social-login-buttons { margin-top: 10px; }
body[data-path="login"] .login-button-wrapper { margin-bottom: 10px; }

/* ----------------------------------------------------------------------------
 * 7. Error / invalid-login state (Frappe adds .invalid + .invalid-login)
 * ------------------------------------------------------------------------- */
body[data-path="login"] .page-card-body.invalid ~ .page-card-actions .btn-login,
body[data-path="login"] .page-card-body.invalid ~ .page-card-actions .btn-primary {
	background: linear-gradient(135deg, #ef4060 0%, #E51E39 100%) !important;
	box-shadow: 0 10px 26px rgba(229, 30, 57, 0.5) !important;
}
body[data-path="login"] .page-card-body.invalid .form-control {
	border-color: #E51E39 !important;
	box-shadow: 0 0 0 3px rgba(229, 30, 57, 0.22);
}
body[data-path="login"] .login-content.page-card.invalid-login {
	animation: ti-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* sign-up message (if ever shown) */
body[data-path="login"] .sign-up-message {
	margin-top: 18px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}
body[data-path="login"] .sign-up-message a { color: #fff; font-weight: 600; text-decoration: none; }

/* ----------------------------------------------------------------------------
 * 8. Animations
 * ------------------------------------------------------------------------- */
@keyframes ti-card-in {
	from { opacity: 0; transform: translateY(22px) scale(0.975); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ti-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

/* ----------------------------------------------------------------------------
 * 9. Responsive — keep it great on mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	body[data-path="login"] { background-attachment: scroll; }
	body[data-path="login"] .page_content > div { padding: 18px; }
	body[data-path="login"] section.for-login,
	body[data-path="login"] section.for-forgot,
	body[data-path="login"] section.for-login-with-email-link {
		padding: 32px 22px 26px;
		border-radius: 20px;
	}
	body[data-path="login"] .page-card-head::before { width: 200px; height: 110px; }
	body[data-path="login"] .for-login .page-card-head h4::after { font-size: 19px; }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] section.for-login { animation: none; }
	body[data-path="login"] .login-content.page-card.invalid-login { animation: none; }
}