@use '../../../../../../../../src/assets/styles/design-tokens';

// Login Page Container - Full height centered layout
.ov-page-container {
	@include design-tokens.ov-flex-center;
	@include design-tokens.ov-theme-transition;
	min-height: 100vh;
	background: var(--ov-meet-background-color);
	padding: var(--ov-meet-spacing-lg);
}

.login-page-content {
	@include design-tokens.ov-flex-center;
	flex-direction: column;
	// gap: var(--ov-meet-spacing-xl);
	width: 100%;
	max-width: 900px;
}

// Login Header - Using get-started-header mixin for consistency
.get-started-header {
	@include design-tokens.ov-get-started-header;

	.login-icon {
		@include design-tokens.ov-icon(xl);
		margin-bottom: var(--ov-meet-spacing-md);
	}

	h1 {
		font-size: var(--ov-meet-font-size-hero);
		font-weight: var(--ov-meet-font-weight-light);
		margin-bottom: var(--ov-meet-spacing-sm);
	}

	.subtitle {
		font-size: var(--ov-meet-font-size-lg);
		color: var(--ov-meet-text-secondary);
		margin: 0;
	}
}

// Login Form Container - Side by side layout
.login-form-container {
	display: flex;
	width: 100%;
	max-width: 800px;
	box-shadow: var(--ov-meet-shadow-md);
	border-radius: var(--ov-meet-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ov-meet-border-color);
}

// Login Card - Form section
.login-card {
	@include design-tokens.ov-card;
	@include design-tokens.ov-theme-transition;
	flex: 1;
	box-shadow: none;
	border-radius: 0;
	border-top-left-radius: var(--ov-meet-radius-lg);
	border-bottom-left-radius: var(--ov-meet-radius-lg);

	mat-card-content {
		padding: var(--ov-meet-spacing-xl);
	}
}

// Form styling
#login-form {
	display: flex;
	flex-direction: column;
	gap: var(--ov-meet-spacing-md);

	.form-input {
		width: 100%;

		mat-icon {
			@include design-tokens.ov-icon(md);
			color: var(--ov-meet-text-secondary);
		}
	}

	.login-error {
		text-align: center;
		margin: var(--ov-meet-spacing-sm) 0;
		color: var(--ov-meet-color-error);
		font-size: var(--ov-meet-font-size-sm);
	}

	.login-actions {
		text-align: center;
		margin-top: var(--ov-meet-spacing-md);

		.primary-button {
			width: 100%;
			padding: var(--ov-meet-spacing-md);
			font-size: var(--ov-meet-font-size-md);
			font-weight: var(--ov-meet-font-weight-medium);
		}
	}
}

// Brand Section - Visual branding area
.brand-section {
	@include design-tokens.ov-flex-center;
	@include design-tokens.ov-theme-transition;
	flex: 1;
	background: var(--ov-meet-color-secondary);
	padding: var(--ov-meet-spacing-xl);
	border-top-right-radius: var(--ov-meet-radius-lg);
	border-bottom-right-radius: var(--ov-meet-radius-lg);

	.brand-content {
		text-align: center;

		img {
			max-width: 100%;
			height: auto;
			// opacity: 0.9;
		}
	}
}

// Responsive design using design system breakpoints
@include design-tokens.ov-tablet-down {
	.ov-page-container {
		padding: var(--ov-meet-spacing-md);
	}

	.login-form-container {
		flex-direction: column;
		max-width: 500px;
	}

	.login-card {
		border-radius: var(--ov-meet-radius-lg) var(--ov-meet-radius-lg) 0 0;

		mat-card-content {
			padding: var(--ov-meet-spacing-lg);
		}
	}

	.brand-section {
		border-radius: 0 0 var(--ov-meet-radius-lg) var(--ov-meet-radius-lg);
		padding: var(--ov-meet-spacing-lg);

		.brand-content img {
			max-width: 70%;
		}
	}

	.get-started-header {
		h1 {
			font-size: var(--ov-meet-font-size-xxl);
		}
	}
}

@include design-tokens.ov-mobile-down {
	.ov-page-container {
		padding: var(--ov-meet-spacing-sm);
	}

	.login-form-container {
		max-width: 100%;
	}

	.login-card mat-card-content {
		padding: var(--ov-meet-spacing-md);
	}

	.brand-section {
		padding: var(--ov-meet-spacing-md);
		min-height: 120px;

		// .brand-content img {
		// 	max-width: 50%;
		// }
	}

	#login-form {
		gap: var(--ov-meet-spacing-sm);

		.login-actions .primary-button {
			padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
			font-size: var(--ov-meet-font-size-sm);
		}
	}

	.get-started-header {
		.login-icon {
			@include design-tokens.ov-icon(lg);
		}

		h1 {
			font-size: var(--ov-meet-font-size-xl);
		}

		.subtitle {
			font-size: var(--ov-meet-font-size-md);
		}
	}
}
