/* CTi GlassFlow — Phase 4 public experience */

:root,
[data-theme="light"] {
	color-scheme: light;
	--cti-public-primary: #2563eb;
	--cti-public-primary-hover: #1d4ed8;
	--cti-public-canvas: #f4f8fc;
	--cti-public-surface: #ffffff;
	--cti-public-muted: #f1f5f9;
	--cti-public-text: #172033;
	--cti-public-text-muted: #64748b;
	--cti-public-border: rgba(100, 116, 139, 0.22);
	--cti-public-glass: rgba(255, 255, 255, 0.84);
	--cti-public-focus: rgba(37, 99, 235, 0.24);
	--cti-public-shadow: 0 24px 64px rgba(15, 23, 42, 0.13);
	--cti-public-radius-sm: 10px;
	--cti-public-radius-md: 16px;
	--cti-public-radius-lg: 24px;
}

[data-theme="dark"],
[data-theme-mode="dark"] {
	color-scheme: dark;
	--cti-public-primary: #60a5fa;
	--cti-public-primary-hover: #93c5fd;
	--cti-public-canvas: #0b1220;
	--cti-public-surface: #121d2f;
	--cti-public-muted: #19263a;
	--cti-public-text: #e7edf7;
	--cti-public-text-muted: #a8b5c7;
	--cti-public-border: rgba(148, 163, 184, 0.2);
	--cti-public-glass: rgba(18, 29, 47, 0.88);
	--cti-public-focus: rgba(96, 165, 250, 0.3);
	--cti-public-shadow: 0 28px 72px rgba(0, 0, 0, 0.4);
}

body[data-path="login"],
body[data-path="404"] {
	color: var(--cti-public-text);
	background-color: var(--cti-public-canvas);
	background-image:
		radial-gradient(circle at 14% 10%, rgba(37, 99, 235, 0.14), transparent 30rem),
		radial-gradient(circle at 88% 18%, rgba(6, 182, 212, 0.1), transparent 28rem),
		linear-gradient(145deg, transparent 44%, rgba(37, 99, 235, 0.035) 100%);
	background-attachment: fixed;
}

body[data-path="login"] .page-content-wrapper {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 48px 24px;
}

body[data-path="login"] .page_content,
body[data-path="login"] .container,
body[data-path="login"] .container > .row,
body[data-path="login"] .container > .row > div {
	width: 100%;
}

body[data-path="login"] .login-content.page-card {
	position: relative;
	max-width: 430px;
	padding: 34px;
	gap: 24px;
	color: var(--cti-public-text);
	background: var(--cti-public-glass);
	border: 1px solid var(--cti-public-border);
	border-radius: var(--cti-public-radius-lg);
	box-shadow: var(--cti-public-shadow);
	-webkit-backdrop-filter: blur(24px) saturate(145%);
	backdrop-filter: blur(24px) saturate(145%);
	overflow: hidden;
}

body[data-path="login"] .login-content.page-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, #2563eb, #38bdf8, #06b6d4);
}

body[data-path="login"] .page-card-head {
	align-items: center;
	text-align: center;
	gap: 22px;
}

body[data-path="login"] .page-card-head img.app-logo {
	width: 112px;
	max-width: 34vw;
	max-height: none;
	height: auto;
	object-fit: contain;
}

body[data-path="login"] .page-card-head .page-card-head-text {
	gap: 8px;
}

body[data-path="login"] .page-card-head h4 {
	color: var(--cti-public-text);
	font-size: 1.65rem;
	font-weight: 750;
	letter-spacing: -0.025em;
}

body[data-path="login"] .page-card-head .page-card-subtitle,
body[data-path="login"] .sign-up-message,
body[data-path="login"] .signup-disabled-message,
body[data-path="login"] .password-hint,
body[data-path="login"] .password-strength-message {
	color: var(--cti-public-text-muted);
}

body[data-path="login"] .page-card-body .form-label {
	color: var(--cti-public-text-muted);
	font-weight: 600;
}

body[data-path="login"] .page-card-body input[type="text"],
body[data-path="login"] .page-card-body input[type="email"],
body[data-path="login"] .page-card-body input[type="password"] {
	height: 44px;
	color: var(--cti-public-text);
	background: var(--cti-public-surface);
	border: 1px solid var(--cti-public-border);
	border-radius: var(--cti-public-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

body[data-path="login"] .page-card-body input:focus {
	border-color: var(--cti-public-primary);
	box-shadow: 0 0 0 3px var(--cti-public-focus);
	outline: none;
}

body[data-path="login"] .page-card-body .field-icon,
body[data-path="login"] .page-card-body .toggle-password {
	fill: var(--cti-public-text-muted);
}

body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a,
body[data-path="login"] .resend-link a {
	color: var(--cti-public-primary);
	font-weight: 600;
}

body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-login,
body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-signup:not(:disabled),
body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-primary {
	min-height: 42px;
	color: #ffffff;
	background: var(--cti-public-primary);
	border: 1px solid var(--cti-public-primary);
	border-radius: var(--cti-public-radius-sm);
	box-shadow: 0 5px 14px rgba(37, 99, 235, 0.22);
	font-weight: 650;
}

body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-login:hover,
body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-signup:not(:disabled):hover,
body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-primary:hover {
	background: var(--cti-public-primary-hover);
	border-color: var(--cti-public-primary-hover);
}

body[data-path="login"] .page-card-actions .btn-login-option,
body[data-path="login"] .signup-disabled-message .btn {
	min-height: 40px;
	color: var(--cti-public-text);
	background: var(--cti-public-muted);
	border: 1px solid var(--cti-public-border);
	border-radius: var(--cti-public-radius-sm);
}

body[data-path="login"] .login-error-banner,
body[data-path="login"] .login-success-banner {
	border-radius: var(--cti-public-radius-sm);
}

body[data-path="login"] .indicator.gray {
	color: var(--cti-public-text-muted);
	background: var(--cti-public-muted);
	border: 1px solid var(--cti-public-border);
	border-radius: 999px;
	padding: 5px 10px;
}

/* Branded 404 */
.cti-error-page {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 32px;
}

.cti-error-card {
	width: min(100%, 580px);
	padding: 48px;
	text-align: center;
	color: var(--cti-public-text);
	background: var(--cti-public-glass);
	border: 1px solid var(--cti-public-border);
	border-radius: var(--cti-public-radius-lg);
	box-shadow: var(--cti-public-shadow);
	-webkit-backdrop-filter: blur(24px) saturate(145%);
	backdrop-filter: blur(24px) saturate(145%);
}

.cti-error-logo {
	width: min(32vw, 132px);
	height: auto;
	margin-bottom: 28px;
	object-fit: contain;
}

.cti-error-code {
	font-size: clamp(4rem, 12vw, 7rem);
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.065em;
	color: transparent;
	background: linear-gradient(135deg, #2563eb, #38bdf8, #06b6d4);
	-webkit-background-clip: text;
	background-clip: text;
}

.cti-error-card h1 {
	margin: 24px 0 10px;
	color: var(--cti-public-text);
	font-size: clamp(1.5rem, 4vw, 2.15rem);
	font-weight: 750;
	letter-spacing: -0.03em;
}

.cti-error-card p {
	max-width: 430px;
	margin: 0 auto;
	color: var(--cti-public-text-muted);
	line-height: 1.65;
}

.cti-error-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.cti-error-actions .btn {
	min-height: 40px;
	padding-inline: 18px;
	border-radius: var(--cti-public-radius-sm);
	font-weight: 650;
}

.cti-error-actions .btn-primary {
	color: #ffffff;
	background: var(--cti-public-primary);
	border-color: var(--cti-public-primary);
}

.cti-error-actions .btn-default {
	color: var(--cti-public-text);
	background: var(--cti-public-surface);
	border-color: var(--cti-public-border);
}

/* Public loading and transition states */
body[data-path="login"] .btn.loading {
	cursor: wait;
	opacity: 0.72;
}

body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn:disabled,
body[data-path="login"] :is(.for-login, .for-email-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-reset-password) .login-content.page-card .page-card-actions .btn-signup:disabled {
	cursor: not-allowed;
	color: var(--cti-public-text-muted);
	background: var(--cti-public-muted);
	border-color: var(--cti-public-border);
	box-shadow: none;
	opacity: 0.76;
}

body[data-path="login"] .btn.loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cti-public-spin 700ms linear infinite;
}

@keyframes cti-public-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
	body[data-path="login"] .page-content-wrapper {
		display: block;
		padding: 0;
	}

	body[data-path="login"] .login-content.page-card {
		max-width: 100%;
		min-height: 100svh;
		justify-content: center;
		padding: 48px 26px 32px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.cti-error-page {
		padding: 20px;
	}

	.cti-error-card {
		padding: 34px 24px;
		border-radius: var(--cti-public-radius-md);
	}
}

@media (max-width: 430px) {
	body[data-path="login"] .page-card-head img.app-logo {
		max-width: 230px;
	}

	.cti-error-actions {
		flex-direction: column;
	}

	.cti-error-actions .btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] .btn.loading::after {
		animation-duration: 1.5s;
	}
}

@supports not (backdrop-filter: blur(1px)) {
	body[data-path="login"] .login-content.page-card,
	.cti-error-card {
		background: var(--cti-public-surface);
	}
}