/**
 * Construction Suite - Login Page Background
 * Modern design matching construction background image
 */

/* Background for login page - Must override all defaults */
html {
	background-image: url('https://construction.milestoneksa.com/files/login_bg.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-color: transparent !important;
	min-height: 100vh !important;
}

body {
	background-image: url('https://construction.milestoneksa.com/files/login_bg.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-color: transparent !important;
	position: relative !important;
	min-height: 100vh !important;
}

/* Override Frappe's default background */
body[data-path*="login"] {
	background-image: url('https://construction.milestoneksa.com/files/login_bg.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-color: transparent !important;
}

/* Add overlay for better readability - subtle blue tint */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
	z-index: 0;
	pointer-events: none;
}

/* Hide navbar completely on login page */
body nav.navbar,
body .navbar-collapse,
body .navbar,
body header,
body .navbar-nav {
	display: none !important;
	visibility: hidden !important;
}

/* Hide footer on login page */
body .web-footer,
body footer {
	display: none !important;
	visibility: hidden !important;
}

/* Ensure content is above overlay */
body .page-content-wrapper,
.page-content-wrapper {
	position: relative !important;
	z-index: 1 !important;
	min-height: 100vh !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.for-login,
.for-forgot,
.for-signup {
	position: relative !important;
	z-index: 1 !important;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

/* Enhanced Login Card - Glassmorphism Design */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 20px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 
	            0 8px 16px rgba(0, 0, 0, 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
	padding: 50px 35px !important;
	transition: all 0.3s ease !important;
	animation: fadeInUp 0.6s ease-out !important;
	text-align: center !important;
}

/* Center form elements */
.for-login .page-card form,
.for-forgot .page-card form,
.for-signup .page-card form {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Page Card Head - Logo and Title */
.for-login .page-card-head,
.for-forgot .page-card-head,
.for-signup .page-card-head {
	text-align: center !important;
	margin-bottom: 35px !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 2 !important;
}

.for-login .page-card-head .app-logo,
.for-forgot .page-card-head .app-logo,
.for-signup .page-card-head .app-logo,
.for-login .page-card-head img.app-logo,
.for-forgot .page-card-head img.app-logo,
.for-signup .page-card-head img.app-logo {
	/* Size - Bigger logo to match heading width */
	width: auto !important;
	max-width: 400px !important;
	height: auto !important;
	max-height: 80px !important;
	min-height: 50px !important;
	
	/* White stroke/border around logo */
	border: 4px solid #ffffff !important;
	border-radius: 12px !important;
	padding: 10px 15px !important;
	
	/* Glassmorphism background */
	background: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	
	/* Multiple shadow layers for depth */
	box-shadow: 
		0 0 0 2px rgba(255, 255, 255, 0.5),
		0 0 0 4px rgba(255, 255, 255, 0.2),
		0 8px 24px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	
	/* Enhanced drop shadow */
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
	
	/* Layout */
	margin: 0 auto 20px auto !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	object-fit: contain !important;
}

.for-login .page-card-head img,
.for-forgot .page-card-head img,
.for-signup .page-card-head img {
	/* Size - Bigger logo */
	width: auto !important;
	max-width: 400px !important;
	height: auto !important;
	max-height: 80px !important;
	min-height: 50px !important;
	
	/* White stroke/border */
	border: 4px solid #ffffff !important;
	border-radius: 12px !important;
	padding: 10px 15px !important;
	
	/* Glassmorphism background */
	background: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	
	/* Shadows */
	box-shadow: 
		0 0 0 2px rgba(255, 255, 255, 0.5),
		0 8px 24px rgba(0, 0, 0, 0.5) !important;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
	
	/* Layout */
	margin: 0 auto 20px auto !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	object-fit: contain !important;
}

.for-login .page-card-head h4,
.for-forgot .page-card-head h4,
.for-signup .page-card-head h4,
body .for-login .page-card-head h4,
body .for-forgot .page-card-head h4,
body .for-signup .page-card-head h4,
section.for-login .page-card-head h4,
section.for-forgot .page-card-head h4,
section.for-signup .page-card-head h4,
.page-content-wrapper .for-login .page-card-head h4,
.page-content-wrapper .for-forgot .page-card-head h4,
.page-content-wrapper .for-signup .page-card-head h4 {
	color: #ffffff !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
	margin: 15px 0 0 0 !important;
	padding: 0 !important;
	letter-spacing: 0.5px !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	line-height: 1.3 !important;
}

/* Universal override for any h4 in login sections */
.for-login h4,
.for-forgot h4,
.for-signup h4 {
	color: #ffffff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Form Container - Centered */
.login-content .page-card-body {
	padding: 0 !important;
	margin-bottom: 25px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.login-content .page-card-body .form-group {
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
}

/* Enhanced Form Inputs - Centered */
.login-content .form-group {
	margin-bottom: 20px !important;
	width: 100% !important;
	text-align: center !important;
	direction: ltr !important;
}

.login-content .email-field,
.login-content .password-field {
	position: relative !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	transition: all 0.3s ease !important;
	border: 2px solid transparent !important;
	text-align: center !important;
	direction: ltr !important;
}

.login-content .email-field:focus-within,
.login-content .password-field:focus-within {
	background: rgba(255, 255, 255, 1) !important;
	border-color: #3b82f6 !important;
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3),
	            0 4px 12px rgba(0, 0, 0, 0.15) !important;
	transform: translateY(-2px) !important;
}

.login-content input[type="text"],
.login-content input[type="email"],
.login-content input[type="password"] {
	background: transparent !important;
	border: none !important;
	padding: 16px 45px 16px 45px !important;
	font-size: 15px !important;
	color: #1f2937 !important;
	width: 100% !important;
	border-radius: 12px !important;
	transition: all 0.3s ease !important;
	text-align: center !important;
	direction: ltr !important;
	text-align-last: center !important;
}

.login-content input[type="text"]:focus,
.login-content input[type="email"]:focus,
.login-content input[type="password"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

.login-content input::placeholder {
	color: #9ca3af !important;
	opacity: 0.8 !important;
	font-weight: 400 !important;
	text-align: center !important;
	direction: ltr !important;
	text-align-last: center !important;
}

/* Field Icons */
.login-content .field-icon {
	left: 15px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	opacity: 0.6 !important;
	transition: opacity 0.3s ease !important;
	z-index: 2 !important;
}

.login-content .email-field:focus-within .field-icon,
.login-content .password-field:focus-within .field-icon {
	opacity: 1 !important;
	color: #3b82f6 !important;
}

.login-content .field-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.login-content .field-icon use {
	stroke: #6b7280 !important;
	transition: stroke 0.3s ease !important;
}

.login-content .email-field:focus-within .field-icon use,
.login-content .password-field:focus-within .field-icon use {
	stroke: #3b82f6 !important;
}

/* Toggle Password */
.login-content .toggle-password {
	right: 15px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 13px !important;
	color: #6b7280 !important;
	cursor: pointer !important;
	transition: color 0.3s ease !important;
	font-weight: 500 !important;
	padding: 5px 10px !important;
	border-radius: 6px !important;
}

.login-content .toggle-password:hover {
	color: #3b82f6 !important;
	background: rgba(59, 130, 246, 0.1) !important;
}

/* Forgot Password Link */
.login-content .forgot-password-message {
	margin-top: 10px !important;
	text-align: right !important;
}

.login-content .forgot-password-message a {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	font-weight: 500 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.login-content .forgot-password-message a:hover {
	color: #ffffff !important;
	text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) !important;
	text-decoration: underline !important;
}

/* Enhanced Login Button */
.login-content .page-card-actions {
	margin-top: 30px !important;
	padding: 0 !important;
}

.login-content .btn-login,
.login-content .btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 16px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	width: 100% !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4),
	            0 2px 6px rgba(0, 0, 0, 0.2) !important;
	letter-spacing: 0.5px !important;
	text-transform: none !important;
	position: relative !important;
	overflow: hidden !important;
}

.login-content .btn-login::before,
.login-content .btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.login-content .btn-login:hover::before,
.login-content .btn-primary:hover::before {
	left: 100%;
}

.login-content .btn-login:hover,
.login-content .btn-primary:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5),
	            0 4px 10px rgba(0, 0, 0, 0.3) !important;
	transform: translateY(-2px) !important;
}

.login-content .btn-login:active,
.login-content .btn-primary:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}

.login-content .btn-login:focus,
.login-content .btn-primary:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3),
	            0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

/* Invalid State */
.login-content .page-card-body.invalid input {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Social Login Section */
.login-content .social-logins {
	margin-top: 30px !important;
	padding-top: 30px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.login-content .login-divider {
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin: 25px 0 !important;
	text-align: center !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	position: relative !important;
}

.login-content .login-divider::before,
.login-content .login-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 40%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.login-content .login-divider::before {
	left: 0;
}

.login-content .login-divider::after {
	right: 0;
}

/* Social Login Buttons Container */
.login-content .social-login-buttons {
	margin-top: 20px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.login-content .login-button-wrapper {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Email Link Login Button */
.login-content .btn-login-with-email-link,
.login-content .btn-login-option {
	background: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 12px !important;
	padding: 14px 24px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	width: 100% !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.login-content .btn-login-with-email-link:hover,
.login-content .btn-login-option:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
	transform: translateY(-2px) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.login-content .btn-login-with-email-link:active,
.login-content .btn-login-option:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.login-content .btn-login-with-email-link:focus,
.login-content .btn-login-option:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3),
	            0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.login-content .btn-login-option img {
	width: 18px !important;
	height: 18px !important;
	object-fit: contain !important;
}

.login-content .btn-login-option svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
}

/* Login with Email Link Section */
.login-content .login-with-email-link {
	margin-top: 15px !important;
}

/* Signup Message */
.sign-up-message {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 14px !important;
	margin-top: 25px !important;
	text-align: center !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.sign-up-message a {
	color: #ffffff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
}

.sign-up-message a:hover {
	color: #60a5fa !important;
	text-decoration: underline !important;
	text-shadow: 0 2px 6px rgba(96, 165, 250, 0.5) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
	.for-login .page-card,
	.for-forgot .page-card,
	.for-signup .page-card {
		padding: 40px 25px !important;
		border-radius: 16px !important;
	}
	
	.page-card-head h4 {
		font-size: 24px !important;
	}
	
	.login-content input[type="text"],
	.login-content input[type="email"],
	.login-content input[type="password"] {
		padding: 14px 40px 14px 40px !important;
		font-size: 14px !important;
	}
}

@media (max-width: 480px) {
	.for-login,
	.for-forgot,
	.for-signup {
		max-width: 100% !important;
	}
	
	.for-login .page-card,
	.for-forgot .page-card,
	.for-signup .page-card {
		padding: 35px 20px !important;
	}
}