/*
 * Shared loading presentation for the public Job Bank and portal-only Desk
 * routes. The public panel is the same identity used by the homepage, while
 * the compact workspace loader lets Frappe Forms and Lists keep their native
 * layout during Employer and Job Seeker navigation.
 */

.jb-site-loader {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 42%, rgba(184, 149, 74, 0.12), transparent 34%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(9, 10, 8, 0.95), rgba(0, 0, 0, 0.9)),
		linear-gradient(180deg, #050505 0%, #0d0d0b 48%, #030303 100%);
	color: #f7f5ee;
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition: opacity 420ms ease, visibility 420ms ease;
}

.jb-site-loader::before,
.jb-site-loader::after {
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background:
		linear-gradient(90deg, transparent, rgba(217, 174, 58, 0.2), rgba(247, 245, 238, 0.22), rgba(217, 174, 58, 0.2), transparent);
	content: "";
}

.jb-site-loader::before {
	top: 18px;
}

.jb-site-loader::after {
	bottom: 18px;
}

.jb-site-loader.is-light {
	background:
		radial-gradient(circle at 50% 42%, rgba(184, 149, 74, 0.14), transparent 34%),
		linear-gradient(90deg, rgba(247, 246, 241, 0.96), rgba(255, 255, 255, 0.98), rgba(247, 246, 241, 0.96)),
		#f6f5f0;
	color: #17191c;
}

.jb-site-loader.is-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.jb-site-loader__panel {
	position: relative;
	display: grid;
	justify-items: center;
	width: min(430px, 88vw);
	padding: 42px 34px 36px;
	border: 1px solid rgba(217, 174, 58, 0.46);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
		linear-gradient(135deg, rgba(184, 149, 74, 0.12), transparent 46%),
		rgba(5, 5, 5, 0.94);
	box-shadow:
		0 36px 90px rgba(0, 0, 0, 0.72),
		inset 0 0 0 1px rgba(255, 255, 255, 0.055),
		inset 0 0 42px rgba(217, 174, 58, 0.055);
	text-align: center;
}

.jb-site-loader.is-light .jb-site-loader__panel {
	border-color: rgba(118, 89, 27, 0.46);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 247, 242, 0.96)),
		#fff;
	box-shadow:
		0 28px 72px rgba(35, 28, 13, 0.16),
		inset 0 0 0 1px rgba(255, 255, 255, 0.86),
		inset 0 0 38px rgba(184, 149, 74, 0.07);
}

.jb-site-loader__panel::before,
.jb-site-loader__panel::after {
	position: absolute;
	width: 42px;
	height: 42px;
	border-color: rgba(217, 174, 58, 0.74);
	content: "";
}

.jb-site-loader__panel::before {
	top: 12px;
	left: 12px;
	border-top: 1px solid;
	border-left: 1px solid;
}

.jb-site-loader__panel::after {
	right: 12px;
	bottom: 12px;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.jb-site-loader__crest {
	position: relative;
	display: grid;
	width: 112px;
	height: 112px;
	margin-bottom: 22px;
	place-items: center;
}

.jb-site-loader__crest::before {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(217, 174, 58, 0.6);
	border-radius: 50%;
	background:
		linear-gradient(135deg, rgba(217, 174, 58, 0.14), transparent 48%),
		rgba(0, 0, 0, 0.24);
	box-shadow:
		inset 0 0 0 8px rgba(0, 0, 0, 0.22),
		0 0 34px rgba(217, 174, 58, 0.12);
	content: "";
	animation: jb-loader-seal 2200ms ease-in-out infinite;
}

.jb-site-loader.is-light .jb-site-loader__crest::before {
	background:
		linear-gradient(135deg, rgba(184, 149, 74, 0.18), transparent 52%),
		rgba(255, 255, 255, 0.62);
	box-shadow:
		inset 0 0 0 8px rgba(184, 149, 74, 0.06),
		0 0 30px rgba(118, 89, 27, 0.1);
}

.jb-site-loader__crest img {
	position: relative;
	z-index: 1;
	width: 78px;
	height: 84px;
	object-fit: contain;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42));
}

.jb-site-loader__eyebrow {
	color: var(--jb-brand-gold);
	font-size: 12px;
	font-weight: 720;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jb-site-loader.is-light .jb-site-loader__eyebrow {
	color: #76591b;
}

.jb-site-loader__panel strong {
	margin-top: 8px;
	color: #fffaf0;
	font-family: "Inter Tight", "Manrope", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
	font-size: clamp(28px, 6vw, 42px);
	font-weight: 680;
	line-height: 0.98;
	text-transform: uppercase;
}

.jb-site-loader.is-light .jb-site-loader__panel strong {
	color: #17191c;
}

.jb-site-loader__rule {
	position: relative;
	width: min(230px, 64vw);
	height: 1px;
	margin: 22px 0 16px;
	overflow: hidden;
	background: rgba(217, 174, 58, 0.26);
}

.jb-site-loader__rule::before {
	position: absolute;
	inset: 0;
	width: 42%;
	background: linear-gradient(90deg, transparent, rgba(255, 230, 155, 0.94), transparent);
	content: "";
	transform: translateX(-100%);
	animation: jb-loader-rule 1700ms ease-in-out infinite;
}

.jb-site-loader.is-light .jb-site-loader__rule::before {
	background: linear-gradient(90deg, transparent, rgba(118, 89, 27, 0.78), transparent);
}

.jb-site-loader__caption {
	color: rgba(247, 245, 238, 0.72);
	font-size: 13px;
	font-weight: 560;
}

.jb-site-loader.is-light .jb-site-loader__caption {
	color: #656861;
}

/* Portal-only Desk navigation overlay. It is created only after the role
 * boundary identifies a pure Employer or Job Seeker session. */
.jb-portal-route-loader {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 42%, var(--jb-brand-gold-wash), transparent 30%),
		color-mix(in srgb, var(--jb-brand-page) 96%, transparent);
	color: var(--jb-brand-text);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.jb-portal-route-loader.is-visible {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.jb-portal-route-loader__panel,
.jb-workspace-inline-loader {
	display: grid;
	justify-items: center;
	text-align: center;
}

.jb-portal-route-loader__panel {
	width: min(320px, 86vw);
	padding: 30px 28px 26px;
	border: 1px solid var(--jb-brand-line);
	border-top-color: var(--jb-brand-gold);
	border-radius: 16px;
	background: color-mix(in srgb, var(--jb-brand-surface) 94%, transparent);
	box-shadow: var(--jb-brand-shadow);
}

.jb-workspace-loader-emblem {
	position: relative;
	display: grid;
	width: 94px;
	height: 94px;
	margin-bottom: 18px;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--jb-brand-surface-soft) 88%, transparent);
	box-shadow: inset 0 0 0 1px var(--jb-brand-line);
}

.jb-workspace-loader-emblem::before {
	position: absolute;
	inset: -7px;
	border-radius: inherit;
	background: conic-gradient(
		from 0deg,
		transparent 0 16%,
		var(--jb-brand-gold) 28% 54%,
		var(--jb-brand-gold-soft) 68%,
		transparent 82% 100%
	);
	content: "";
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
	animation: jb-workspace-loader-orbit 1250ms linear infinite;
}

.jb-workspace-loader-emblem img {
	position: relative;
	z-index: 1;
	width: 60px;
	height: 66px;
	object-fit: contain;
	filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.26));
}

.jb-portal-route-loader__eyebrow {
	margin-bottom: 7px;
	color: var(--jb-brand-gold-strong);
	font-size: 10px;
	font-weight: 780;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.jb-portal-route-loader strong,
.jb-workspace-inline-loader strong {
	color: var(--jb-brand-text);
	font-size: 15px;
	font-weight: 720;
}

.jb-portal-route-loader small,
.jb-workspace-inline-loader span {
	margin-top: 6px;
	color: var(--jb-brand-muted);
	font-size: 12px;
	line-height: 1.45;
}

.jb-workspace-inline-loader {
	min-height: min(58vh, 540px);
	padding: 72px 24px;
	align-content: center;
	color: var(--jb-brand-text);
}

/* Frappe renders this native splash between a successful login and Desk boot.
 * The image itself comes from Website Settings; these rules simply present the
 * Ministry mark against the same active theme. */
.centered.splash:has(img[src*="job_bank_website"]) {
	position: fixed;
	inset: 0;
	z-index: 10060;
	display: grid;
	place-items: center;
	transform: none;
	-webkit-transform: none;
	background:
		radial-gradient(circle at 50% 45%, var(--jb-brand-gold-wash), transparent 24%),
		var(--jb-brand-page);
}

.centered.splash img[src*="job_bank_website"] {
	width: auto !important;
	max-width: 108px !important;
	max-height: 116px;
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.28));
	animation: jb-loader-seal 1500ms ease-in-out infinite;
}

@keyframes jb-loader-seal {
	0%,
	100% {
		opacity: 0.82;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.035);
	}
}

@keyframes jb-loader-rule {
	0% {
		transform: translateX(-110%);
	}
	55%,
	100% {
		transform: translateX(250%);
	}
}

@keyframes jb-workspace-loader-orbit {
	to {
		transform: rotate(1turn);
	}
}

@media (max-width: 560px) {
	.jb-site-loader__panel {
		padding: 34px 24px 30px;
	}

	.jb-site-loader__crest {
		width: 96px;
		height: 96px;
		margin-bottom: 18px;
	}

	.jb-site-loader__crest img {
		width: 68px;
		height: 74px;
	}

	.jb-portal-route-loader__panel {
		padding: 26px 22px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jb-site-loader,
	.jb-portal-route-loader {
		transition-duration: 0.001ms;
	}

	.jb-site-loader__crest::before,
	.jb-site-loader__rule::before,
	.jb-workspace-loader-emblem::before,
	.centered.splash img[src*="job_bank_website"] {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
	}
}