/* JuiceBar Custom Login Page Styles */
/* CSS-only styling for Frappe's default login page - preserves all functionality */

:root {
	--juicebar-primary: #148E27;
	--juicebar-primary-dark: #0f6e1d;
	--juicebar-secondary: #F7931E;
}

/* ===== Login Page Background ===== */
.page-container[data-page="login"],
body[data-page="login"] {
	background: linear-gradient(135deg, rgba(20, 142, 39, 0.08) 0%, rgba(247, 147, 30, 0.08) 100%) !important;
}

/* ===== Login Card Styling ===== */
.for-login .login-content.page-card,
.for-email-login .login-content.page-card,
.for-forgot .login-content.page-card,
.for-signup .login-content.page-card,
.for-login-with-email-link .login-content.page-card {
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
	border: none !important;
}

/* ===== Logo / Header Section ===== */
.for-login .page-card-head,
.for-email-login .page-card-head,
.for-forgot .page-card-head,
.for-signup .page-card-head {
	text-align: center !important;
}

.for-login .page-card-head h4,
.for-email-login .page-card-head h4,
.for-forgot .page-card-head h4,
.for-signup .page-card-head h4 {
	color: var(--juicebar-primary) !important;
	font-weight: 700 !important;
	font-size: 22px !important;
}

/* ===== Form Input Styling ===== */
.for-login .form-control,
.for-email-login .form-control,
.for-forgot .form-control,
.for-signup .form-control {
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.for-login .form-control:focus,
.for-email-login .form-control:focus,
.for-forgot .form-control:focus,
.for-signup .form-control:focus {
	border-color: var(--juicebar-primary) !important;
	box-shadow: 0 0 0 3px rgba(20, 142, 39, 0.1) !important;
	outline: none !important;
}

/* ===== Login Button ===== */
.for-login .btn-login,
.for-email-login .btn-login {
	background: var(--juicebar-primary) !important;
	color: white !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	transition: all 0.3s ease !important;
}

.for-login .btn-login:hover,
.for-email-login .btn-login:hover {
	background: var(--juicebar-primary-dark) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(20, 142, 39, 0.3) !important;
}

.for-login .btn-login:active,
.for-email-login .btn-login:active {
	transform: translateY(0) !important;
}

.for-login .btn-login:disabled,
.for-email-login .btn-login:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* ===== Forgot Password & Sign Up Links ===== */
.for-login .forgot-password-message a,
.for-login .sign-up-message a,
.for-email-login .forgot-password-message a,
.for-forgot .sign-up-message a {
	color: var(--juicebar-primary) !important;
}

.for-login .forgot-password-message a:hover,
.for-login .sign-up-message a:hover,
.for-email-login .forgot-password-message a:hover,
.for-forgot .sign-up-message a:hover {
	color: var(--juicebar-primary-dark) !important;
	text-decoration: underline !important;
}

/* ===== Forgot Password / Signup Buttons ===== */
.for-forgot .btn-primary,
.for-signup .btn-primary,
.for-login-with-email-link .btn-primary {
	background: var(--juicebar-primary) !important;
	border-color: var(--juicebar-primary) !important;
	border-radius: 8px !important;
}

.for-forgot .btn-primary:hover,
.for-signup .btn-primary:hover,
.for-login-with-email-link .btn-primary:hover {
	background: var(--juicebar-primary-dark) !important;
	border-color: var(--juicebar-primary-dark) !important;
}

/* ===== Social Login Buttons ===== */
.for-login .btn-login-option {
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
}

.for-login .btn-login-option:hover {
	border-color: var(--juicebar-primary) !important;
}

/* ===== Login Divider ===== */
.for-login .login-divider {
	color: #999 !important;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
	.for-login .page-card-head h4,
	.for-email-login .page-card-head h4 {
		font-size: 20px !important;
	}
}