/* ==========================================================================
   Prometheus ERP — Login
   Consistent with the Frappe v16 desk design system: same Inter typography,
   gray ramp, radii, shadows, dark primary buttons and blue focus rings that
   users see inside ERPNext / Frappe CRM after signing in.
   Scoped to the /login page via the #page-login wrapper (ID specificity
   outranks Frappe's login.bundle.css selectors).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Desk design tokens (mirrored from desk.bundle.css, light theme)
   -------------------------------------------------------------------------- */

body[data-path="login"] {
	--pmx-gray-50: #f8f8f8;
	--pmx-gray-100: #f3f3f3;
	--pmx-gray-200: #ededed;
	--pmx-gray-300: #e2e2e2;
	--pmx-gray-400: #c7c7c7;
	--pmx-gray-500: #999999;
	--pmx-gray-600: #7c7c7c;
	--pmx-gray-700: #525252;
	--pmx-gray-800: #383838;
	--pmx-gray-900: #171717;
	--pmx-blue-500: #0289f7;
	--pmx-blue-700: #0070cc;
	--pmx-blue-100: #edf6fd;

	--pmx-text: var(--pmx-gray-900);
	--pmx-muted: var(--pmx-gray-600);
	--pmx-faint: var(--pmx-gray-500);
	--pmx-border: var(--pmx-gray-300);
	--pmx-focus-ring: 0px 0px 0px 2px #65b9fc;
	--pmx-shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1);
	--pmx-shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1);

	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--pmx-text);
	background: var(--pmx-gray-100);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. Page chrome: full-height stage
   -------------------------------------------------------------------------- */

#page-login .page-breadcrumbs,
#page-login .page-header-wrapper {
	display: none;
}

#page-login .page-content-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#page-login main.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	padding: 48px 20px;
}

#page-login .page_content {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* footer lives outside #page-login — keep the body scope */
body[data-path="login"] .web-footer {
	border-top: 1px solid var(--pmx-gray-200);
	background: transparent;
	padding: 14px 20px;
}

body[data-path="login"] .web-footer,
body[data-path="login"] .web-footer * {
	color: var(--pmx-faint) !important;
	font-size: 12px;
}

body[data-path="login"] .web-footer a:hover {
	color: var(--pmx-blue-500) !important;
}

/* --------------------------------------------------------------------------
   3. The card — desk surface
   -------------------------------------------------------------------------- */

#page-login .login-content.page-card {
	width: 100%;
	max-width: 400px;
	margin: 0;
	padding: 40px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid var(--pmx-gray-200);
	box-shadow: var(--pmx-shadow-lg);
}

/* --------------------------------------------------------------------------
   4. Card head
   -------------------------------------------------------------------------- */

#page-login .page-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 28px;
}

#page-login .page-card-head .app-logo {
	width: 120px;
	height: 120px;
	max-height: 120px; /* login.bundle caps this at 32px */
	object-fit: contain;
	border-radius: 10px;
	margin-bottom: 20px;
}

/* inserted by prometheus_login.js */
#page-login .pmx-brandline {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pmx-faint);
	margin-bottom: 10px;
	text-indent: 0.14em; /* balance the tracking */
}

#page-login .page-card-head-text h4 {
	font-family: inherit;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--pmx-text);
	margin: 0;
}

#page-login .page-card-subtitle {
	font-size: 13px;
	font-weight: 400;
	color: var(--pmx-muted);
	margin-top: 6px;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Fields — desk form controls
   -------------------------------------------------------------------------- */

#page-login .form-label {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pmx-gray-700);
	margin-bottom: 6px;
}

#page-login .form-control,
#page-login .page-card-body input[type="text"],
#page-login .page-card-body input[type="email"],
#page-login .page-card-body input[type="password"] {
	height: 42px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid var(--pmx-border);
	color: var(--pmx-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	padding: 0 14px 0 38px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#page-login .form-control::placeholder,
#page-login .page-card-body input::placeholder {
	color: var(--pmx-gray-400);
}

#page-login .form-control:hover {
	border-color: var(--pmx-gray-400);
}

#page-login .form-control:focus,
#page-login .page-card-body input:focus {
	background: #ffffff;
	border-color: var(--pmx-blue-500);
	box-shadow: var(--pmx-focus-ring);
	outline: none;
	color: var(--pmx-text);
}

#page-login .field-icon {
	color: var(--pmx-gray-500);
	top: 13px;
}

#page-login .toggle-password {
	color: var(--pmx-gray-500);
	top: 13px;
}

#page-login .toggle-password:hover {
	color: var(--pmx-gray-800);
}

#page-login .forgot-password-message {
	margin: 8px 0 0;
	text-align: right;
	font-size: 13px;
}

#page-login .forgot-password-message a {
	color: var(--pmx-blue-500);
	text-decoration: none;
}

#page-login .forgot-password-message a:hover {
	color: var(--pmx-blue-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#page-login .field-error {
	color: #e03636;
	font-size: 12px;
}

#page-login .login-error-banner {
	background: #fef1f1;
	border: 1px solid #fcd6d6;
	color: #c62828;
	border-radius: 8px;
}

/* OTP form injected into the same card */
#page-login .form-verify .form-control {
	padding-left: 14px;
}

/* --------------------------------------------------------------------------
   6. Actions — desk dark primary, light secondary
   -------------------------------------------------------------------------- */

#page-login .page-card-actions {
	margin-top: 24px;
}

#page-login .btn-login {
	height: 42px;
	border-radius: 8px;
	border: 1px solid var(--pmx-gray-900);
	background: var(--pmx-gray-900);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#page-login .btn-login:hover {
	background: var(--pmx-gray-800);
	border-color: var(--pmx-gray-800);
	color: #ffffff;
}

#page-login .btn-login:active {
	background: var(--pmx-gray-700);
}

#page-login .btn-login-option,
#page-login .btn-login-with-email-link {
	margin-top: 10px;
	height: 42px;
	border-radius: 8px;
	background: var(--pmx-gray-100);
	border: 1px solid transparent;
	color: var(--pmx-gray-800);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

#page-login .btn-login-option:hover,
#page-login .btn-login-with-email-link:hover {
	background: var(--pmx-gray-200);
	color: var(--pmx-gray-900);
}

/* --------------------------------------------------------------------------
   7. Entrance — quiet, quick, desk-like
   -------------------------------------------------------------------------- */

#page-login .login-content.page-card {
	animation: pmx-enter 0.32s ease-out both;
}

@keyframes pmx-enter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   8. Responsive & accessibility
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	#page-login .login-content.page-card {
		padding: 32px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#page-login *,
	#page-login *::before,
	#page-login *::after {
		animation: none !important;
		transition: none !important;
	}
}