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

// Welcome State Styles
.welcome-content {
	.welcome-card {
		max-width: var(--ov-meet-container-max-width);
		margin: 0 auto;

		mat-card-header {
			display: flex;
			align-items: center;
			margin-bottom: var(--ov-meet-spacing-md);

			mat-card-title {
				display: flex;
				align-items: center;
				gap: var(--ov-meet-spacing-sm);
				font-size: var(--ov-meet-font-size-xxl);
				font-weight: var(--ov-meet-font-weight-medium);

				mat-icon {
					font-size: var(--ov-meet-icon-size-lg);
					width: var(--ov-meet-icon-size-lg);
					height: var(--ov-meet-icon-size-lg);
				}
			}
		}
	}

	.getting-started-grid {
		@include ov-grid-responsive(280px);
		margin-top: var(--ov-meet-spacing-lg);
	}

	.feature-card {
		@include ov-card;
		@include ov-hover-lift(-5px);
		text-align: center;

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

			mat-icon {
				@include ov-icon(xl);
				margin-bottom: var(--ov-meet-spacing-md);
			}

			h3 {
				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);
			}

			p {
				margin: 0 0 var(--ov-meet-spacing-lg) 0;
				color: var(--ov-meet-text-secondary);
				line-height: var(--ov-meet-line-height-normal);
			}

			button {
				@include ov-button-base;
				width: 100%;

				mat-icon {
					@include ov-icon(md);
					margin-right: var(--ov-meet-spacing-sm);
				}
			}
		}
	}
}

// Dashboard State Styles
.dashboard-content {
	padding: 5px;
	.quick-actions {
		@include ov-flex-center;
		gap: var(--ov-meet-spacing-md);
		margin-bottom: var(--ov-meet-spacing-xxl);

		button {
			@include ov-button-base;

			mat-icon {
				margin-right: var(--ov-meet-spacing-sm);
			}
		}
	}

	.stats-grid {
		@include ov-grid-responsive(300px);
	}

	.stat-card {
		@include ov-stat-card;
		padding: 0;

		mat-card-content {
			display: flex;
			align-items: center;
			gap: var(--ov-meet-spacing-md);
			padding: var(--ov-meet-spacing-lg);
		}

		.stat-icon {
			mat-icon {
				@include ov-icon(xl);
			}
		}

		.stat-content {
			flex: 1;
		}

		mat-card-actions {
			padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-lg) var(--ov-meet-spacing-md);
			gap: var(--ov-meet-spacing-xs);

			button {
				@include ov-button-base;

				mat-icon {
					margin-left: var(--ov-meet-spacing-xs);
				}
			}
		}
	}

	// Stat cards have their icon colors applied via CSS classes in HTML
	// .rooms-card uses .ov-room-icon
	// .recordings-card uses .ov-recording-icon

	.action-card {
		@include ov-card;
		mat-card-content {
			display: flex;
			align-items: center;
			gap: var(--ov-meet-spacing-md);
			padding: var(--ov-meet-spacing-lg);
		}

		.action-icon {
			mat-icon {
				@include ov-icon(lg);
			}
		}

		.action-content {
			flex: 1;

			h3 {
				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);
			}

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

		mat-card-actions {
			padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-lg) var(--ov-meet-spacing-md);

			button {
				@include ov-button-base;
			}
		}
	}
}

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

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

	.welcome-content .getting-started-grid {
		grid-template-columns: 1fr;
	}

	.dashboard-content {
		.quick-actions {
			flex-direction: column;
			align-items: stretch;

			button {
				width: 100%;
			}
		}

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

@include ov-mobile-down {
	.overview-header h1 {
		font-size: var(--ov-meet-font-size-xl);
	}

	.stat-card {
		mat-card-content {
			flex-direction: column;
			text-align: center;
			gap: var(--ov-meet-spacing-sm);
		}
	}

	.action-card {
		mat-card-content {
			flex-direction: column;
			text-align: center;
			gap: var(--ov-meet-spacing-sm);
		}
	}
}
