/* One Click Away secure access layer */
:root {
	--secure-blue: #2876f0;
	--secure-blue-2: #74c8ff;
	--secure-ink: #253149;
	--secure-muted: #6b7890;
	--secure-border: rgba(255, 255, 255, 0.8);
	--secure-card: rgba(255, 255, 255, 0.68);
	--secure-shadow: 0 28px 80px rgba(39, 112, 214, 0.22),
		0 10px 34px rgba(26, 66, 132, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.92);
	--secure-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.org-gate-wrap,
.porter-app .p-login-screen,
.porter-app .p-hub-screen,
#splash,
#auth-screen,
.app-root #roleGate,
.app-root #login,
#pharm-auth,
#login-screen,
.ward-login,
#wa-auth {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(219, 235, 255, 0.68)),
		url("/assets/images/secure-access-3d.jpg") center / cover no-repeat !important;
	box-sizing: border-box !important;
	color: var(--secure-ink) !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

.org-gate-wrap::after,
.porter-app .p-login-screen::after,
.porter-app .p-hub-screen::after,
#splash::after,
#auth-screen::after,
.app-root #roleGate::after,
.app-root #login::after,
#pharm-auth::after,
#login-screen::after,
.ward-login::after,
#wa-auth::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.88), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(44, 117, 230, 0.12));
	z-index: 0;
}

.org-gate-card,
.porter-app .p-login-form,
#auth-screen .auth-card,
.app-root #login .login-inner,
#pharm-auth .pha-card,
#login-screen .login-inner,
.ward-login .wl-card,
#wa-auth .waa-card {
	position: relative;
	z-index: 2;
	box-sizing: border-box !important;
	width: min(430px, calc(100vw - 48px)) !important;
	min-width: 0 !important;
	max-width: calc(100vw - 48px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 36px 32px 30px !important;
	border: 1px solid var(--secure-border) !important;
	border-radius: 34px !important;
	background: var(--secure-card) !important;
	box-shadow: var(--secure-shadow) !important;
	backdrop-filter: blur(26px) saturate(1.25) !important;
	-webkit-backdrop-filter: blur(26px) saturate(1.25) !important;
}

.porter-app .p-login-form {
	margin-top: 18px;
}

.app-root #login .login-inner,
#login-screen .login-inner {
	text-align: center;
}

.org-brand-icon,
.porter-app .p-home-logo-inner,
#auth-screen .auth-logo-icon,
.app-root #login .logoBig,
#pharm-auth .pha-logo-icon,
#login-screen .lmark,
.ward-login .wl-icon,
#wa-auth .waa-icon {
	background:
		center / 78% no-repeat url("/assets/logos/logo-white.png"),
		linear-gradient(145deg, #42c8ff, #1162df) !important;
	border: 1px solid rgba(255, 255, 255, 0.78) !important;
	box-shadow: 0 18px 42px rgba(35, 111, 226, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
	color: transparent !important;
	font-size: 0 !important;
	overflow: hidden !important;
}

.app-root #login .logoBig {
	width: 74px !important;
	height: 74px !important;
	border-radius: 22px !important;
	margin-bottom: 18px !important;
}

.org-brand-icon svg,
.porter-app .p-home-logo-inner svg,
#auth-screen .auth-logo-icon svg,
.app-root #login .logoBig *,
#pharm-auth .pha-logo-icon *,
#login-screen .lmark svg,
.ward-login .wl-icon *,
#wa-auth .waa-icon * {
	display: none !important;
}

.org-brand-title,
#auth-screen .auth-title,
.app-root #login h1,
#pharm-auth .pha-brand,
#login-screen .ltext,
.ward-login .wl-brand,
#wa-auth .waa-brand,
.porter-app .p-hub-brand-title,
.porter-app .p-login-title {
	color: var(--secure-ink) !important;
	text-shadow: none !important;
}

.org-brand-title span,
#auth-screen .auth-title span,
#login-screen .ltext span,
.porter-app .p-hub-brand-title span {
	color: var(--secure-blue) !important;
	text-shadow: none !important;
}

.org-brand-sub,
#auth-screen .auth-sub,
#auth-screen .auth-body-sub,
.app-root #login .tag,
#pharm-auth .pha-brand-sub,
#pharm-auth .pha-sub,
#pharm-auth .pha-footer,
#login-screen .login-sub,
#login-screen .login-note,
.ward-login .wl-brand-sub,
.ward-login .wl-sub,
.ward-login .wl-footer,
#wa-auth .waa-brand-sub,
#wa-auth .waa-sub,
#wa-auth .waa-footer,
.porter-app .p-login-sub,
.porter-app .p-hub-brand-sub,
.porter-app .p-hub-foot-tagline,
#splash-sub,
.org-sub,
.org-footer,
.loginfoot {
	color: var(--secure-muted) !important;
	max-width: 100% !important;
	overflow-wrap: break-word !important;
}

.org-headline,
#auth-screen .auth-heading,
#pharm-auth .pha-title,
.ward-login .wl-title,
#wa-auth .waa-title {
	color: var(--secure-ink) !important;
}

.field-input,
#auth-screen .afield,
#auth-screen .afield input,
.app-root #login .field,
.app-root #login .field input,
#pharm-auth .pha-field,
#pharm-auth .pha-field input,
.ward-login .wl-field,
.ward-login .wl-field input,
#wa-auth .waa-field,
#wa-auth .waa-field input,
.porter-app .p-login-screen .p-input {
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.field-input,
#auth-screen .afield input,
.app-root #login .field input,
#pharm-auth .pha-field input,
.ward-login .wl-field input,
#wa-auth .waa-field input,
.porter-app .p-login-screen .p-input {
	background: rgba(255, 255, 255, 0.64) !important;
	border: 1px solid rgba(255, 255, 255, 0.82) !important;
	border-radius: 999px !important;
	color: var(--secure-ink) !important;
	box-shadow:
		0 12px 28px rgba(50, 105, 180, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
	transition:
		border-color 180ms var(--secure-ease),
		box-shadow 180ms var(--secure-ease),
		transform 160ms var(--secure-ease) !important;
}

.field-input:focus,
#auth-screen .afield input:focus,
.app-root #login .field input:focus,
#pharm-auth .pha-field input:focus,
.ward-login .wl-field input:focus,
#wa-auth .waa-field input:focus,
.porter-app .p-login-screen .p-input:focus {
	border-color: rgba(40, 118, 240, 0.62) !important;
	box-shadow:
		0 0 0 4px rgba(55, 139, 255, 0.16),
		0 16px 34px rgba(50, 105, 180, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.field-input::placeholder,
#auth-screen .afield input::placeholder,
.app-root #login .field input::placeholder,
#pharm-auth .pha-field input::placeholder,
.ward-login .wl-field input::placeholder,
#wa-auth .waa-field input::placeholder,
.porter-app .p-login-screen .p-input::placeholder {
	color: rgba(82, 96, 122, 0.55) !important;
}

.field-label,
#auth-screen .afield label,
.app-root #login .field label,
#pharm-auth .pha-field label,
.ward-login .wl-field label,
#wa-auth .waa-field label,
.porter-app .p-login-screen .p-label {
	color: rgba(37, 49, 73, 0.62) !important;
}

.btn-primary.org-continue-btn,
#auth-screen .btn-full,
.app-root #login .btn,
#pharm-auth .pha-btn,
.ward-login .wl-btn,
#wa-auth .waa-btn,
.porter-app .p-login-screen .p-btn {
	box-sizing: border-box !important;
	max-width: 100% !important;
	min-width: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #b9e9ff 0%, #2f85ff 56%, #1764ef 100%) !important;
	color: #fff !important;
	box-shadow:
		0 18px 38px rgba(35, 108, 226, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
	transition:
		transform 150ms var(--secure-ease),
		box-shadow 180ms var(--secure-ease),
		opacity 180ms var(--secure-ease) !important;
}

.btn-primary.org-continue-btn:hover,
#auth-screen .btn-full:hover,
.app-root #login .btn:hover,
#pharm-auth .pha-btn:hover,
.ward-login .wl-btn:hover,
#wa-auth .waa-btn:hover,
.porter-app .p-login-screen .p-btn:hover {
	opacity: 0.96 !important;
	transform: translateY(-1px) !important;
}

.btn-primary.org-continue-btn:active,
#auth-screen .btn-full:active,
.app-root #login .btn:active,
#pharm-auth .pha-btn:active,
.ward-login .wl-btn:active,
#wa-auth .waa-btn:active,
.porter-app .p-login-screen .p-btn:active {
	transform: scale(0.98) !important;
}

.porter-app .p-login-screen .p-btn.secondary,
.ward-login button:not(.wl-btn)[onclick*="Back"],
.ward-login button:not(.wl-btn)[onclick*="login"],
.ward-login button[onclick*="wardAdminLoginEntry"],
.porter-app .p-login-top .p-badge {
	background: rgba(255, 255, 255, 0.54) !important;
	border: 1px solid rgba(255, 255, 255, 0.82) !important;
	color: var(--secure-ink) !important;
	box-shadow: 0 10px 24px rgba(50, 105, 180, 0.1) !important;
}

.app-root #login .loginerr:empty,
#pharm-auth .pha-err:empty,
.ward-login .wl-err:empty,
#wa-auth .waa-err:empty {
	display: none !important;
}

.org-divider,
.porter-app .p-home-grid,
.porter-app .p-home-orb,
.porter-app .p-home-ring-pulse,
#login-screen .lb {
	display: none !important;
}

.porter-app .p-hub-stage {
	width: min(400px, calc(100vw - 32px)) !important;
	margin-top: 22px !important;
}

.porter-app .p-hub-brand,
.porter-app .p-hub-foot {
	animation: none !important;
	opacity: 1 !important;
}

.porter-app .p-hub-ring {
	border-color: rgba(40, 118, 240, 0.2) !important;
	box-shadow: none !important;
}

.porter-app .p-hub-ring.glow {
	border-color: rgba(80, 158, 255, 0.24) !important;
	box-shadow:
		0 0 110px rgba(73, 143, 255, 0.1) inset,
		0 0 90px rgba(73, 143, 255, 0.08) !important;
}

.porter-app .p-hub-core {
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(222, 239, 255, 0.46)),
		radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.86), transparent 44%) !important;
	border-color: rgba(255, 255, 255, 0.86) !important;
	box-shadow:
		0 22px 52px rgba(38, 108, 214, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.porter-app .p-hub-core::before {
	content: "" !important;
	position: absolute !important;
	top: 24% !important;
	left: 50% !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 18px !important;
	background:
		center / 78% no-repeat url("/assets/logos/logo-white.png"),
		linear-gradient(145deg, #42c8ff, #1162df) !important;
	box-shadow:
		0 18px 40px rgba(38, 108, 214, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
	filter: none !important;
	transform: translateX(-50%) !important;
	pointer-events: none !important;
}

.porter-app .p-hub-core::after {
	border-color: rgba(40, 118, 240, 0.18) !important;
}

.porter-app .p-hub-core .core-label small {
	color: var(--secure-blue) !important;
	text-shadow: none !important;
}

.porter-app .p-hub-core:hover {
	box-shadow:
		0 26px 60px rgba(38, 108, 214, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.porter-app .p-hub-node {
	background: rgba(255, 255, 255, 0.68) !important;
	border-color: rgba(255, 255, 255, 0.84) !important;
	box-shadow:
		0 18px 42px rgba(38, 108, 214, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.porter-app .p-hub-node .node-label {
	color: var(--secure-ink) !important;
}

.porter-app .p-hub-node .node-sub {
	color: var(--secure-blue) !important;
}

.porter-app .p-hub-node:hover {
	border-color: rgba(40, 118, 240, 0.45) !important;
	box-shadow:
		0 22px 54px rgba(38, 108, 214, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.porter-app .p-hub-foot .dot {
	background: var(--secure-blue) !important;
	box-shadow: 0 0 12px rgba(40, 118, 240, 0.52) !important;
}

#splash img,
#splash-sub {
	position: relative !important;
	z-index: 2 !important;
}

#splash img {
	box-shadow: 0 20px 48px rgba(38, 108, 214, 0.22) !important;
}

.porter-app .p-install-banner {
	background: rgba(255, 255, 255, 0.72) !important;
	border-color: rgba(255, 255, 255, 0.84) !important;
	box-shadow: 0 20px 46px rgba(38, 108, 214, 0.2) !important;
}

.porter-app .p-install-banner div[style*="color:#F8FBFF"] {
	color: var(--secure-ink) !important;
}

.porter-app .p-install-banner div[style*="color:var(--pm)"] {
	color: var(--secure-muted) !important;
}

.porter-app .p-install-banner button:first-of-type {
	background: var(--secure-blue) !important;
	color: #fff !important;
	border-radius: 999px !important;
}

.porter-app .p-install-banner button:last-of-type {
	color: var(--secure-muted) !important;
}

.org-gate-meta {
	position: relative;
	z-index: 2;
	color: rgba(37, 49, 73, 0.48) !important;
}

.org-error,
#auth-screen .auth-err,
.app-root #login .loginerr,
#pharm-auth .pha-err,
.ward-login .wl-err,
#wa-auth .waa-err {
	background: rgba(239, 68, 68, 0.08) !important;
	border: 1px solid rgba(239, 68, 68, 0.22) !important;
	color: #b91c1c !important;
	border-radius: 16px !important;
}

@media (max-width: 560px) {
	.org-gate-card,
	.porter-app .p-login-form,
	#auth-screen .auth-card,
	.app-root #login .login-inner,
	#pharm-auth .pha-card,
	#login-screen .login-inner,
	.ward-login .wl-card,
	#wa-auth .waa-card {
		border-radius: 28px !important;
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
		padding: 30px 22px 24px !important;
	}

	.app-root #login .login-inner {
		width: calc(100vw - 64px) !important;
		max-width: calc(100vw - 64px) !important;
	}

	.org-gate-wrap,
	.porter-app .p-login-screen,
	.porter-app .p-hub-screen,
	#splash,
	#auth-screen,
	.app-root #roleGate,
	.app-root #login,
	#pharm-auth,
	#login-screen,
	.ward-login,
	#wa-auth {
		background-position: center top !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}