signoz/frontend/src/pages/SessionRecording/styles.scss

.session-recordings-page {
	height: 100%;
	background: var(--bg-ink-400);
	padding: 0;

	.page-header {
		background: var(--bg-ink-500);
		border-bottom: 1px solid var(--bg-slate-400);
		padding: 24px 24px 16px;
		margin-bottom: 0;

		.header-content {
			.page-title {
				margin: 0 0 8px 0;
				color: var(--bg-vanilla-100);
				font-weight: 600;
				font-size: 24px;
				line-height: 32px;
			}

			.page-description {
				font-size: 14px;
				line-height: 20px;
				color: var(--bg-vanilla-400);
				margin: 0;
			}
		}
	}

	.page-content {
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.table-card {
			background: var(--bg-ink-500);
			border: 1px solid var(--bg-slate-400);
			border-radius: 6px;
			flex: 1;

			.ant-card-body {
				padding: 16px;
			}

			.session-recordings-table {
				.ant-table {
					background: transparent;

					.ant-table-thead > tr > th {
						background: var(--bg-ink-400);
						border-bottom: 1px solid var(--bg-slate-400);
						color: var(--bg-vanilla-300);
						font-weight: 500;
						font-size: 12px;
						line-height: 16px;
						text-transform: uppercase;
						letter-spacing: 0.5px;
						padding: 12px 16px;
					}

					.ant-table-tbody > tr > td {
						background: transparent;
						border-bottom: 1px solid var(--bg-slate-400);
						padding: 16px;
						color: var(--bg-vanilla-100);
					}

					.ant-table-tbody > tr:hover > td {
						background: var(--bg-ink-400);
					}

					.clickable-row {
						cursor: pointer;
						transition: background-color 0.2s ease;

						&:hover {
							background: var(--bg-ink-400);
						}
					}
				}

				.ant-pagination {
					margin: 16px 0 0 0;
					text-align: right;

					.ant-pagination-item,
					.ant-pagination-prev,
					.ant-pagination-next {
						background: var(--bg-ink-400);
						border: 1px solid var(--bg-slate-400);
						color: var(--bg-vanilla-400);

						&:hover {
							border-color: var(--bg-sakura-500);
							color: var(--bg-vanilla-100);
						}

						&.ant-pagination-item-active {
							background: var(--bg-sakura-500);
							border-color: var(--bg-sakura-500);
							color: var(--bg-ink-500);
						}
					}

					.ant-pagination-options {
						.ant-select {
							.ant-select-selector {
								background: var(--bg-ink-400);
								border: 1px solid var(--bg-slate-400);
								color: var(--bg-vanilla-100);
							}
						}
					}
				}
			}
		}
	}
}

// Play button styles
.play-button {
	background: var(--bg-sakura-500);
	border-color: var(--bg-sakura-500);
	color: var(--bg-ink-500);

	&:hover {
		background: var(--bg-sakura-600);
		border-color: var(--bg-sakura-600);
	}

	.anticon {
		margin-right: 4px;
	}
}

// Light mode overrides
.lightMode {
	.session-recordings-page {
		background: var(--bg-vanilla-100);

		.page-header {
			background: var(--bg-vanilla-200);
			border-bottom: 1px solid var(--bg-slate-300);

			.header-content {
				.page-title {
					color: var(--bg-ink-500);
				}

				.page-description {
					color: var(--bg-ink-400);
				}
			}
		}

		.page-content {
			.table-card {
				background: var(--bg-vanilla-200);
				border: 1px solid var(--bg-slate-300);

				.session-recordings-table {
					.ant-table {
						.ant-table-thead > tr > th {
							background: var(--bg-vanilla-300);
							border-bottom: 1px solid var(--bg-slate-300);
							color: var(--bg-ink-400);
						}

						.ant-table-tbody > tr > td {
							border-bottom: 1px solid var(--bg-slate-300);
							color: var(--bg-ink-500);
						}

						.ant-table-tbody > tr:hover > td {
							background: var(--bg-vanilla-300);
						}

						.clickable-row:hover {
							background: var(--bg-vanilla-300);
						}
					}

					.ant-pagination {
						.ant-pagination-item,
						.ant-pagination-prev,
						.ant-pagination-next {
							background: var(--bg-vanilla-300);
							border: 1px solid var(--bg-slate-300);
							color: var(--bg-ink-400);

							&:hover {
								border-color: var(--bg-sakura-500);
								color: var(--bg-ink-500);
							}
						}

						.ant-pagination-options {
							.ant-select {
								.ant-select-selector {
									background: var(--bg-vanilla-300);
									border: 1px solid var(--bg-slate-300);
									color: var(--bg-ink-500);
								}
							}
						}
					}
				}
			}
		}
	}
}

// Responsive design
@media (max-width: 768px) {
	.session-recordings-page {
		.page-content {
			padding: 16px;
		}
	}
}