/* Scoped login theme: Frappe owns the form markup, so every selector stays
   under body[data-path="login"] to avoid changing public portal or Desk pages. */
html:has(body[data-path="login"]) {
	background: #ffffff;
	overscroll-behavior-y: none;
}

body[data-path="login"] {
	background:
		radial-gradient(circle at 16% 6%, rgba(19, 122, 75, 0.1), transparent 30%),
		radial-gradient(circle at 86% 14%, rgba(180, 35, 24, 0.08), transparent 32%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0, rgba(0, 0, 0, 0.045) 1px, transparent 1px, transparent 96px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0, rgba(0, 0, 0, 0.035) 1px, transparent 1px, transparent 96px),
		linear-gradient(135deg, #ffffff 0%, #f7f7f3 54%, #ffffff 100%);
	color: #080808;
	overflow-x: hidden;
	overscroll-behavior-y: none;
}

body[data-path="login"] * {
	box-sizing: border-box;
}

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;
}

body[data-path="login"] #page-login,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page_content,
body[data-path="login"] .page_content > div {
	min-height: 100vh;
	background: transparent;
}

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

body[data-path="login"] .page_content > div {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 18px;
}

body[data-path="login"] section.for-login,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-login-with-email-link {
	width: min(440px, calc(100vw - 24px));
	max-width: 100%;
	min-width: 0;
}

body[data-path="login"] .page-card-head {
	margin: 0 auto 8px;
	text-align: center;
}

body[data-path="login"] .jb-login-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 100px;
	margin-bottom: -38px;
	border-radius: 10px;
	text-decoration: none;
	transform: translateY(-26px) scale(1.95);
	transform-origin: center;
}

body[data-path="login"] .jb-login-logo-link:focus-visible {
	outline: 3px solid rgba(19, 122, 75, 0.68);
	outline-offset: 8px;
}

body[data-path="login"] .page-card-head .app-logo {
	width: 90px;
	height: 100px;
	object-fit: contain;
	padding: 4px;
	border: 1px solid rgba(8, 8, 8, 0.16);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

body[data-path="login"] .jb-login-logo-link:hover .app-logo {
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
	transform: translateY(-1px);
}

body[data-path="login"] .page-card-head h4 {
	margin-top: 4px;
	color: #080808;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

body[data-path="login"] .login-content.page-card {
	width: 100%;
	max-width: 440px;
	min-width: 0;
	border-style: solid;
	border-width: 4px;
	border-color: #137a4b #b42318 #b8a56f #080808;
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(8, 8, 8, 0.018), rgba(255, 255, 255, 0.78)),
		#ffffff;
	box-shadow: 0 16px 46px rgba(0, 0, 0, 0.12);
}

body[data-path="login"] .page-card-body {
	padding: 24px 24px 8px;
}

body[data-path="login"] .form-control {
	min-height: 44px;
	border: 1px solid rgba(8, 8, 8, 0.24);
	border-radius: 6px;
	background: #ffffff;
	color: #080808;
	font-weight: 650;
}

body[data-path="login"] .form-control:focus {
	border-color: #137a4b;
	box-shadow: 0 0 0 3px rgba(19, 122, 75, 0.24), 0 0 0 5px rgba(184, 165, 111, 0.16);
}

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

body[data-path="login"] .field-icon {
	color: #4d4d4d;
}

body[data-path="login"] .toggle-password,
body[data-path="login"] .text-muted,
body[data-path="login"] .login-divider {
	color: rgba(8, 8, 8, 0.62) !important;
}

body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a {
	color: #4b463d;
	font-weight: 800;
}

body[data-path="login"] .page-card-actions {
	padding: 10px 24px 24px;
}

body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-login {
	min-height: 42px;
	border-color: #080808;
	border-radius: 6px;
	background: #080808;
	color: #ffffff;
	font-weight: 900;
	box-shadow: none;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-login:hover {
	border-color: #137a4b;
	background: #137a4b;
	color: #ffffff;
	box-shadow: 0 0 0 3px rgba(19, 122, 75, 0.18);
	transform: translateY(-1px);
}

body[data-path="login"] .btn-default,
body[data-path="login"] .btn-login-option {
	min-height: 40px;
	border-color: rgba(8, 8, 8, 0.28) !important;
	border-radius: 6px;
	background: #f7f7f3 !important;
	color: #080808 !important;
	font-weight: 800;
	box-shadow: none;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body[data-path="login"] .btn-default:hover,
body[data-path="login"] .btn-login-option:hover {
	border-color: #b8a56f !important;
	background: rgba(184, 165, 111, 0.18) !important;
	color: #080808 !important;
	box-shadow: 0 0 0 3px rgba(184, 165, 111, 0.18);
	transform: translateY(-1px);
}

body[data-path="login"] .indicator.gray {
	background: rgba(8, 8, 8, 0.05);
	color: #080808;
}

@media (max-width: 520px) {
	body[data-path="login"] .page_content > div {
		padding: 32px 12px;
	}

	body[data-path="login"] .page-card-head h4 {
		font-size: 21px;
		line-height: 1.18;
	}

	body[data-path="login"] .page-card-body,
	body[data-path="login"] .page-card-actions {
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* Dark National Job Bank authentication skin. */
html:has(body[data-path="login"]) {
	background: #040605;
}

body[data-path="login"] {
	position: relative;
	min-height: 100vh;
	background:
		linear-gradient(90deg, rgba(3, 6, 5, 0.52), rgba(3, 6, 5, 0.2) 44%, rgba(3, 6, 5, 0.56)),
		linear-gradient(180deg, rgba(3, 6, 5, 0.14), rgba(3, 6, 5, 0.54)),
		url("/assets/job_bank_website/images/auth/job-bank-auth-guyana-bg.png?v=20260708-1") center / cover no-repeat,
		#040605 !important;
	color: #f5f1e8;
	color-scheme: dark;
	isolation: isolate;
}

body[data-path="login"]::before,
body[data-path="login"]::after {
	position: fixed;
	inset: 0;
	content: "";
	pointer-events: none;
}

body[data-path="login"]::before {
	z-index: 0;
	background-image: url("/assets/job_bank_website/images/auth/job-bank-auth-guyana-bg.png?v=20260708-1");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: saturate(1.08) contrast(1.03) brightness(0.95);
}

body[data-path="login"]::after {
	z-index: 1;
	background:
		radial-gradient(circle at 18% 12%, rgba(31, 154, 95, 0.12), transparent 30%),
		linear-gradient(90deg, rgba(3, 6, 5, 0.5), rgba(3, 6, 5, 0.1) 44%, rgba(3, 6, 5, 0.5)),
		linear-gradient(180deg, rgba(3, 6, 5, 0.14), rgba(3, 6, 5, 0.62));
}

body[data-path="login"] .page_content > div {
	position: relative;
	z-index: 2;
}

body[data-path="login"] .page-card-head h4 {
	color: #f7f5ee;
	text-shadow: 0 16px 42px rgba(0, 0, 0, 0.44);
}

body[data-path="login"] .page-card-head .app-logo {
	border-color: rgba(217, 174, 58, 0.28);
	background: rgba(5, 6, 5, 0.62);
	box-shadow:
		0 20px 48px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-path="login"] .login-content.page-card {
	border-width: 1px;
	border-color: rgba(217, 174, 58, 0.34);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
		rgba(8, 12, 10, 0.88);
	box-shadow:
		0 32px 84px rgba(0, 0, 0, 0.46),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
}

body[data-path="login"] .form-control {
	border-color: rgba(247, 245, 238, 0.18) !important;
	background: rgba(255, 255, 255, 0.075) !important;
	color: #f7f5ee !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-path="login"] .form-control:focus {
	border-color: rgba(217, 174, 58, 0.68);
	box-shadow: 0 0 0 3px rgba(217, 174, 58, 0.14);
}

body[data-path="login"] .form-control::placeholder {
	color: rgba(247, 245, 238, 0.48);
}

body[data-path="login"] .field-icon,
body[data-path="login"] .toggle-password,
body[data-path="login"] .text-muted,
body[data-path="login"] .login-divider {
	color: rgba(247, 245, 238, 0.62) !important;
}

body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a {
	color: #d9ae3a;
}

body[data-path="login"] .btn-primary,
body[data-path="login"] .btn-login {
	border-color: rgba(255, 215, 92, 0.88);
	background:
		linear-gradient(180deg, rgba(255, 245, 178, 0.72), rgba(217, 174, 58, 0.98) 42%, rgba(154, 101, 15, 0.95)),
		#d9ae3a;
	color: #080808;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.58),
		inset 0 -12px 22px rgba(91, 52, 0, 0.22),
		0 15px 32px rgba(0, 0, 0, 0.28);
}

body[data-path="login"] .btn-primary:hover,
body[data-path="login"] .btn-login:hover {
	border-color: rgba(255, 232, 151, 0.72);
	background:
		linear-gradient(180deg, rgba(255, 251, 203, 0.82), rgba(229, 187, 66, 1) 42%, rgba(180, 119, 17, 0.98)),
		#e0b53e;
	color: #080808;
}

body[data-path="login"] .btn-default,
body[data-path="login"] .btn-login-option {
	border-color: rgba(247, 245, 238, 0.16) !important;
	background: rgba(255, 255, 255, 0.07) !important;
	color: #f7f5ee !important;
}

body[data-path="login"] .btn-default:hover,
body[data-path="login"] .btn-login-option:hover {
	border-color: rgba(217, 174, 58, 0.48) !important;
	background: rgba(217, 174, 58, 0.13) !important;
	color: #f7f5ee !important;
}