input::-ms-reveal,
input::-ms-clear {
	display: none;
}

.page-content-empty {
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	background: #111;
	font-family: 'Barlow', 'Segoe UI', sans-serif;
}

/* ── Left panel – branding ── */
.login-brand {
	flex: 1;
	background: var(--color-sidebar-bg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 48px 52px;
	position: relative;
	overflow: hidden;
}

	/* Decorative background pattern */
	.login-brand::before {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(204,0,0,0.18) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 10% 90%, rgba(204,0,0,0.10) 0%, transparent 70%);
		pointer-events: none;
	}

/* Large decorative arrow shape */
.brand-deco {
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 340px;
	height: 340px;
	border: 48px solid rgba(204,0,0,0.07);
	border-radius: 50%;
}

.brand-deco-2 {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	width: 200px;
	height: 200px;
	border: 28px solid rgba(204,0,0,0.06);
	border-radius: 50%;
}

/* Bike-themed decoration: bicycle wheels with spokes */
.brand-deco-bike {
	/* Bicycle wheel with spokes effect */
	background:
	/* Hub */
	radial-gradient(circle at center, rgba(204,0,0,0.15) 0%, rgba(204,0,0,0.15) 8%, transparent 8%),
	/* Spokes */
	conic-gradient(from 0deg at center, transparent 0deg, transparent 2deg, rgba(204,0,0,0.05) 2deg, rgba(204,0,0,0.05) 4deg, transparent 4deg, transparent 32deg, rgba(204,0,0,0.05) 32deg, rgba(204,0,0,0.05) 34deg, transparent 34deg, transparent 62deg, rgba(204,0,0,0.05) 62deg, rgba(204,0,0,0.05) 64deg, transparent 64deg, transparent 92deg, rgba(204,0,0,0.05) 92deg, rgba(204,0,0,0.05) 94deg, transparent 94deg, transparent 122deg, rgba(204,0,0,0.05) 122deg, rgba(204,0,0,0.05) 124deg, transparent 124deg, transparent 152deg, rgba(204,0,0,0.05) 152deg, rgba(204,0,0,0.05) 154deg, transparent 154deg, transparent 182deg, rgba(204,0,0,0.05) 182deg, rgba(204,0,0,0.05) 184deg, transparent 184deg, transparent 212deg, rgba(204,0,0,0.05) 212deg, rgba(204,0,0,0.05) 214deg, transparent 214deg, transparent 242deg, rgba(204,0,0,0.05) 242deg, rgba(204,0,0,0.05) 244deg, transparent 244deg, transparent 272deg, rgba(204,0,0,0.05) 272deg, rgba(204,0,0,0.05) 274deg, transparent 274deg, transparent 302deg, rgba(204,0,0,0.05) 302deg, rgba(204,0,0,0.05) 304deg, transparent 304deg, transparent 332deg, rgba(204,0,0,0.05) 332deg, rgba(204,0,0,0.05) 334deg, transparent 334deg, transparent 360deg );
}

.brand-deco-bike-2 {
	/* Smaller bicycle wheel with spokes */
	background:
	/* Hub */
	radial-gradient(circle at center, rgba(204,0,0,0.12) 0%, rgba(204,0,0,0.12) 10%, transparent 10%),
	/* Spokes */
	conic-gradient(from 0deg at center, transparent 0deg, transparent 3deg, rgba(204,0,0,0.04) 3deg, rgba(204,0,0,0.04) 6deg, transparent 6deg, transparent 33deg, rgba(204,0,0,0.04) 33deg, rgba(204,0,0,0.04) 36deg, transparent 36deg, transparent 63deg, rgba(204,0,0,0.04) 63deg, rgba(204,0,0,0.04) 66deg, transparent 66deg, transparent 93deg, rgba(204,0,0,0.04) 93deg, rgba(204,0,0,0.04) 96deg, transparent 96deg, transparent 123deg, rgba(204,0,0,0.04) 123deg, rgba(204,0,0,0.04) 126deg, transparent 126deg, transparent 153deg, rgba(204,0,0,0.04) 153deg, rgba(204,0,0,0.04) 156deg, transparent 156deg, transparent 183deg, rgba(204,0,0,0.04) 183deg, rgba(204,0,0,0.04) 186deg, transparent 186deg, transparent 213deg, rgba(204,0,0,0.04) 213deg, rgba(204,0,0,0.04) 216deg, transparent 216deg, transparent 243deg, rgba(204,0,0,0.04) 243deg, rgba(204,0,0,0.04) 246deg, transparent 246deg, transparent 273deg, rgba(204,0,0,0.04) 273deg, rgba(204,0,0,0.04) 276deg, transparent 276deg, transparent 303deg, rgba(204,0,0,0.04) 303deg, rgba(204,0,0,0.04) 306deg, transparent 306deg, transparent 333deg, rgba(204,0,0,0.04) 333deg, rgba(204,0,0,0.04) 336deg, transparent 336deg, transparent 360deg );
}

.brand-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
	z-index: 1;
}

	.brand-logo .logo-icon {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		object-fit: contain;
	}

	.brand-logo .logo-text {
		font-size: 22px;
		font-weight: 800;
		color: #fff;
		letter-spacing: 1px;
	}

.brand-body {
	position: relative;
	z-index: 1;
}

	.brand-body h2 {
		font-size: 36px;
		font-weight: 800;
		color: #fff;
		line-height: 1.15;
		margin-bottom: 16px;
	}

		.brand-body h2 span {
			color: var(--color-primary);
		}

	.brand-body p {
		font-size: 15px;
		color: rgba(255,255,255,0.5);
		max-width: 340px;
		line-height: 1.65;
		margin: 0;
	}

.brand-footer {
	font-size: 12px;
	color: rgba(255,255,255,0.25);
	position: relative;
	z-index: 1;
}

/* ── Right panel – login form ── */
.login-panel {
	width: 480px;
	flex-shrink: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px 52px;
}

	.login-panel h1 {
		font-size: 26px;
		font-weight: 800;
		color: var(--color-text);
		margin-bottom: 4px;
	}

	.login-panel .login-sub {
		font-size: 14px;
		color: var(--color-text-muted);
		margin-bottom: 32px;
	}

/* Social buttons */
.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition);
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	text-decoration: none;
}

	.btn-social:hover {
		border-color: #aaa;
		background: #fafafa;
		color: var(--color-text);
		text-decoration: none;
	}

	.btn-social .social-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Google colours */
	.btn-social.google:hover {
		border-color: #4285f4;
	}

	/* Apple: dark button */
	.btn-social.apple {
		background: #111;
		color: #fff;
		border-color: #111;
	}

		.btn-social.apple:hover {
			background: #000;
			border-color: #000;
			color: #fff;
		}

/* Divider */
.or-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0;
	font-size: 12px;
	font-weight: 600;
	color: #ccc;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

	.or-divider::before,
	.or-divider::after {
		content: '';
		flex: 1;
		height: 1px;
		background: var(--color-border);
	}

/* Form fields */
.login-panel .form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 5px;
}

.login-panel .form-control {
	font-size: 14px;
	padding: 10px 14px;
	/*border-radius: var(--radius);*/
	background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}

	.login-panel .form-control:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 3px rgba(204,0,0,0.10);
	}

.password-wrapper {
	position: relative;
}

	.password-wrapper .form-control {
		padding-right: 42px;
	}

.password-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #bbb;
	cursor: pointer;
	font-size: 16px;
	padding: 0;
	line-height: 1;
}

	.password-toggle:hover {
		color: #555;
	}

.forgot-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

	.forgot-link:hover {
		text-decoration: underline;
	}

.btn-login {
	width: 100%;
	padding: 12px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

	.btn-login:hover {
		background: var(--color-primary-dark);
	}

.login-footer {
	margin-top: 1rem;
	font-size: .8rem;
	color: var(--color-text-muted);
	text-align: center;
	line-height: 1.6;
}

	.login-footer a {
		color: var(--color-primary);
		font-weight: 600;
	}

/* ── Responsive ── */
@media (max-width: 860px) {
	.page-content-empty {
		flex-direction: column;
		align-items: center;
		background: #f4f4f4;
	}

	.login-brand {
		display: none;
	}

	.login-panel {
		width: 100%;
		max-width: 480px;
		padding: 48px 28px;
		min-height: 100vh;
		justify-content: center;
	}
}

/* Google SVG icon inline */
.google-svg {
	width: 18px;
	height: 18px;
}

/* Input group styling helpers */
.login-panel .input-group .input-group-text {
	border: 1px solid RGBA(var(--rgb-color-dimmed-grey));
}

.login-panel .input-group .form-control {
	border: 1px solid RGBA(var(--rgb-color-dimmed-grey));
}

.input-icon-left {
	background: #f8f8f8;
	border-right: none;
}

.input-middle {
	border-left: none;
	border-right: none;
}

.input-no-left-border {
	border-left: none;
}

.input-icon-right {
	cursor: pointer;
	background: #f8f8f8;
	border-left: none;
}

.form-check-label-small {
	font-size: 13px;
	color: #555;
}

.icon-muted {
	color: #aaa;
}

.icon-small {
	font-size: 15px;
}