/* ══════════════════════════════════════════════════════════════════════════
   CompBase Split-Screen Login
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:wght@600;700&display=swap');

/* ── Reset Frappe page wrappers when split-screen is active ───────────── */
body:has(.cb-login-wrapper) {
	background: #FFFFFF;
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body:has(.cb-login-wrapper) .page-content-wrapper {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body:has(.cb-login-wrapper) .container {
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

body:has(.cb-login-wrapper) .web-footer {
	display: none;
}

/* ── Split wrapper ────────────────────────────────────────────────────── */
.cb-login-wrapper {
	display: flex;
	min-height: 100vh;
	width: 100%;
}

/* ── Form panel (right) ───────────────────────────────────────────────── */
.cb-login-form {
	flex: 1;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 32px 40px;
}

.cb-login-logo {
	flex-shrink: 0;
}

.cb-login-logo img {
	height: 36px;
	width: auto;
}

.cb-login-form-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
}

/* ── Headings ─────────────────────────────────────────────────────────── */
.cb-login-heading {
	margin-bottom: 28px;
}

.cb-login-heading h1 {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: #1C1917;
	letter-spacing: -0.02em;
	margin: 0 0 6px 0;
	line-height: 1.2;
}

.cb-login-heading p {
	font-size: 15px;
	color: #78716C;
	margin: 0;
	line-height: 1.5;
}

/* ── Override Frappe page-card inside split layout ─────────────────────── */
.cb-login-wrapper .page-card,
.cb-login-wrapper .login-content.page-card {
	max-width: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	margin: 0;
	padding: 0;
}

.cb-login-wrapper .page-card-head {
	display: none;
}

.cb-login-wrapper .page-card-body {
	padding: 0;
}

.cb-login-wrapper .page-card-actions {
	padding: 0;
	margin-top: 8px;
}

/* ── Form inputs ──────────────────────────────────────────────────────── */
.cb-login-wrapper .form-group {
	margin-bottom: 18px;
}

.cb-login-wrapper .form-control {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	border-radius: 8px;
	border: 1.5px solid #E0DDD8;
	font-size: 14px;
	padding: 11px 14px 11px 40px;
	height: auto;
	background: #FAFAF8;
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.cb-login-wrapper .form-control:focus {
	border-color: #0F766E;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
	background: #FFFFFF;
	outline: none;
}

.cb-login-wrapper .form-control::placeholder {
	color: #A8A29E;
}

/* ── Field icons ──────────────────────────────────────────────────────── */
.cb-login-wrapper .email-field,
.cb-login-wrapper .password-field {
	position: relative;
}

.cb-login-wrapper .field-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #A8A29E;
	pointer-events: none;
}

/* ── Primary button ───────────────────────────────────────────────────── */
.cb-login-wrapper .btn-primary {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	background-color: #0F766E;
	border-color: #0F766E;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	padding: 11px 16px;
	width: 100%;
	transition: background-color 200ms ease, box-shadow 200ms ease, transform 100ms ease;
}

.cb-login-wrapper .btn-primary:hover,
.cb-login-wrapper .btn-primary:focus {
	background-color: #0A5C56;
	border-color: #0A5C56;
	box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.cb-login-wrapper .btn-primary:active {
	transform: scale(0.99);
}

/* ── Secondary button ─────────────────────────────────────────────────── */
.cb-login-wrapper .btn-default {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	border-radius: 8px;
	border: 1.5px solid #E0DDD8;
	font-size: 14px;
	background: #FFFFFF;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.cb-login-wrapper .btn-default:hover {
	border-color: #78716C;
	background-color: #FAFAF8;
}

/* ── Links ────────────────────────────────────────────────────────────── */
.cb-login-wrapper .forgot-password-message {
	margin: 0 0 4px 0;
}

.cb-login-wrapper .forgot-password-message a,
.cb-login-wrapper .sign-up-message a,
.cb-login-wrapper .for-login-with-email-link a {
	color: #0F766E;
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
}

.cb-login-wrapper .forgot-password-message a:hover,
.cb-login-wrapper .sign-up-message a:hover {
	color: #0A5C56;
	text-decoration: underline;
}

.cb-login-wrapper .sign-up-message {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #57534E;
	font-size: 14px;
	margin-top: 20px;
}

/* ── Demo CTA ────────────────────────────────────────────────────────── */
.cb-login-wrapper .cb-demo-cta {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #78716C;
	font-size: 13px;
	margin-top: 12px;
}

.cb-login-wrapper .cb-demo-cta a {
	color: #0F766E;
	font-weight: 500;
	text-decoration: none;
}

.cb-login-wrapper .cb-demo-cta a:hover {
	color: #0A5C56;
	text-decoration: underline;
}

/* ── Divider ──────────────────────────────────────────────────────────── */
.cb-login-wrapper .login-divider {
	color: #A8A29E;
	font-size: 13px;
	margin: 16px 0;
}

/* ── Toggle password ──────────────────────────────────────────────────── */
/* !important needed to override Frappe login.bundle's 5-class selector */
.cb-login-wrapper .password-field .toggle-password {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 13px;
	cursor: pointer;
	position: absolute;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #78716C;
	user-select: none;
}

.cb-login-wrapper .password-field .toggle-password:hover {
	color: #0F766E;
}

/* ── Invalid login animation ──────────────────────────────────────────── */
.cb-login-wrapper .login-content.page-card.invalid-login {
	animation: cb-shake 0.4s ease;
}

.cb-login-wrapper .page-card-body.invalid .form-control {
	border-color: #DC2626;
}

@keyframes cb-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-6px); }
	80% { transform: translateX(6px); }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.cb-login-footer {
	flex-shrink: 0;
	font-size: 13px;
	color: #A8A29E;
	padding-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Brand panel (left)
   ══════════════════════════════════════════════════════════════════════════ */
.cb-login-brand {
	flex: 1;
	background: linear-gradient(160deg, #0F766E 0%, #064E47 60%, #042F2E 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	padding: 60px;
}

.cb-brand-content {
	position: relative;
	z-index: 2;
	max-width: 480px;
}

.cb-brand-mark {
	width: 56px;
	height: 56px;
	margin-bottom: 32px;
	opacity: 0.9;
}

.cb-brand-content h2 {
	font-family: 'Source Serif 4', 'Georgia', serif;
	font-size: 34px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 18px 0;
}

.cb-brand-desc {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.6;
	margin: 0 0 40px 0;
}

/* ── Stats ────────────────────────────────────────────────────────────── */
.cb-brand-stats {
	display: flex;
	gap: 32px;
}

.cb-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-stat-number {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.cb-stat-label {
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.3;
}

/* ── Product mockup ──────────────────────────────────────────────────── */
.cb-brand-mockup {
	position: absolute;
	bottom: -40px;
	right: -40px;
	width: 75%;
	z-index: 1;
	opacity: 0.30;
	transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
	pointer-events: none;
	mask-image: linear-gradient(to top left, rgba(0,0,0,1) 20%, transparent 70%);
	-webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,1) 20%, transparent 70%);
}

.cb-brand-mockup img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ── Decorative dot pattern ───────────────────────────────────────────── */
.cb-dots-pattern {
	position: absolute;
	bottom: -40px;
	right: -40px;
	width: 280px;
	height: 280px;
	background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	z-index: 1;
	border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide brand panel on tablets and below */
@media (max-width: 991px) {
	.cb-login-brand {
		display: none;
	}

	.cb-login-form {
		padding: 24px 32px;
	}

	.cb-login-form-area {
		max-width: 420px;
	}
}

/* Mobile adjustments */
@media (max-width: 575px) {
	.cb-login-form {
		padding: 20px 20px;
	}

	.cb-login-heading h1 {
		font-size: 24px;
	}

	.cb-login-form-area {
		padding: 24px 0;
	}

	.cb-login-logo img {
		height: 30px;
	}
}

/* Large screens: fix form panel width, let brand panel flex */
@media (min-width: 1400px) {
	.cb-login-form {
		flex: 0 0 520px;
	}

	.cb-brand-content h2 {
		font-size: 38px;
	}
}

/* ── Social login within split layout ─────────────────────────────────── */
.cb-login-wrapper .social-logins {
	margin-top: 8px;
}

.cb-login-wrapper .social-login-buttons {
	margin-bottom: 8px;
}

.cb-login-wrapper .btn-login-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cb-login-wrapper .btn-login-option img {
	height: 18px;
	width: 18px;
}