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

.room-config-step {
	@include design-tokens.ov-page-content;
	@include design-tokens.ov-container;

    justify-content: center;

	.step-header {
		display: flex;
		align-items: flex-start;
		gap: var(--ov-meet-spacing-sm);
		margin-bottom: var(--ov-meet-spacing-lg);

		.step-icon {
			@include design-tokens.ov-icon(xl);
			color: var(--ov-meet-icon-settings);
			margin-top: var(--ov-meet-spacing-xs);
		}

		.step-title-group {
			flex: 1;

			.step-title {
				margin: 0 0 var(--ov-meet-spacing-sm) 0;
				font-size: var(--ov-meet-font-size-xl);
				font-weight: var(--ov-meet-font-weight-medium);
				color: var(--ov-meet-text-primary);
				line-height: var(--ov-meet-line-height-tight);
			}

			.step-description {
				margin: 0;
				font-size: var(--ov-meet-font-size-md);
				color: var(--ov-meet-text-secondary);
				line-height: var(--ov-meet-line-height-normal);
			}
		}
	}

	.step-content {
		margin-bottom: var(--ov-meet-spacing-md);

		.config-form {
			display: flex;
			flex-direction: column;
		}
	}

	.config-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: var(--ov-meet-spacing-md);
		width: 100%;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: var(--ov-meet-spacing-sm);
		}
	}

	.config-card {
		@include design-tokens.ov-card;
		border: 2px solid var(--ov-meet-border-secondary);
		transition: all 0.2s ease-in-out;
		cursor: default;

		&.e2ee-card {
			.feature-icon {
				color: var(--ov-meet-color-info) !important;
			}
		}

		&:hover {
			border-color: var(--ov-meet-border-primary);
			box-shadow: var(--ov-meet-shadow-md);
		}

		mat-card-content {
			padding: 0;
		}

		.card-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: var(--ov-meet-spacing-sm);
			margin-bottom: var(--ov-meet-spacing-md);

			.icon-title-group {
				display: flex;
				align-items: flex-start;
				gap: var(--ov-meet-spacing-sm);
				flex: 1;

				.feature-icon {
					@include design-tokens.ov-icon(lg);
					color: var(--ov-meet-icon-primary);
					margin-top: var(--ov-meet-spacing-xs);
				}

				.title-group {
					flex: 1;

					.card-title {
						margin: 0 0 var(--ov-meet-spacing-xs) 0;
						font-size: var(--ov-meet-font-size-lg);
						font-weight: var(--ov-meet-font-weight-medium);
						color: var(--ov-meet-text-primary);
						line-height: var(--ov-meet-line-height-tight);
					}

					.card-description {
						margin: 0;
						font-size: var(--ov-meet-font-size-sm);
						color: var(--ov-meet-text-secondary);
						line-height: var(--ov-meet-line-height-normal);
					}
				}
			}

			.feature-toggle {
				flex-shrink: 0;
				align-self: flex-start;
			}
		}

		.e2ee-info-section {
			margin-top: var(--ov-meet-spacing-md);
			display: flex;
			flex-direction: column;
			gap: var(--ov-meet-spacing-sm);
			animation: slideIn 0.3s ease-out;

			.warning-card {
				display: flex;
				align-items: flex-start;
				gap: var(--ov-meet-spacing-sm);
				padding: var(--ov-meet-spacing-md);
				border-radius: var(--ov-meet-radius-sm);
			}

			.warning-card {
				background: rgba(255, 152, 0, 0.08);
				border: 1px solid rgba(255, 152, 0, 0.2);

				.warning-icon {
					@include design-tokens.ov-icon(md);
					color: var(--ov-meet-color-warning);
					flex-shrink: 0;
					margin-top: 2px;
				}

				.warning-content {
					flex: 1;

					.warning-title {
						margin: 0 0 var(--ov-meet-spacing-xs) 0;
						font-size: var(--ov-meet-font-size-sm);
						font-weight: var(--ov-meet-font-weight-semibold);
						color: var(--ov-meet-color-warning);
					}

					.restrictions-list {
						margin: 0;
						padding-left: var(--ov-meet-spacing-md);
						font-size: var(--ov-meet-font-size-sm);
						line-height: var(--ov-meet-line-height-relaxed);
						color: var(--ov-meet-text-primary);

						li {
							margin-bottom: var(--ov-meet-spacing-xs);

							&:last-child {
								margin-bottom: 0;
							}
						}

						.restriction-detail {
							display: block;
							color: var(--ov-meet-text-secondary);
							margin-top: var(--ov-meet-spacing-xs);
						}
					}
				}
			}
		}
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// Responsive design
@media (max-width: 1024px) {
	.room-config-step {
		// padding: var(--ov-meet-spacing-xs);

		.step-header {
			gap: var(--ov-meet-spacing-xs);
			margin-bottom: var(--ov-meet-spacing-md);
		}

		.config-grid {
			gap: var(--ov-meet-spacing-sm);
		}
	}
}

@media (max-width: 768px) {
	.room-config-step {
		.step-header {
			.step-title-group {
				.step-title {
					font-size: var(--ov-meet-font-size-lg);
				}

				.step-description {
					font-size: var(--ov-meet-font-size-sm);
				}
			}
		}

		.config-grid {
			grid-template-columns: 1fr;
		}

		.config-card {
			.card-header {
				flex-direction: column;
				align-items: flex-start;
				gap: var(--ov-meet-spacing-sm);

				.feature-toggle {
					align-self: flex-end;
				}
			}
		}
	}
}

@media (max-width: 480px) {
	.room-config-step {
		.config-card {
			.card-header {
				.icon-title-group {
					.title-group {
						.card-title {
							font-size: var(--ov-meet-font-size-md);
						}

						.card-description {
							font-size: var(--ov-meet-font-size-xs);
						}
					}
				}
			}
		}
	}
}
