// 页面公共布局样式

// 标准页面布局（垂直布局）
.pages-base-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;

	.tool-bar {
		padding: 12px 16px;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		flex-direction: row;

		.left-panel {
			display: flex;
			align-items: center;
			flex: 1;
		}

		.right-panel {
			display: flex;
			gap: 8px;
		}
	}

	.table-content {
		flex: 1;
		overflow: hidden;
		background: #f5f5f5;
	}
}

// 侧边栏布局（左右分栏）
.pages-sidebar-layout {
	display: flex;
	flex-direction: row;
	height: 100%;
	padding: 0;

	.left-box {
		width: 260px;
		border-right: 1px solid #f0f0f0;
		display: flex;
		flex-direction: column;
		background: #fff;

		.header {
			padding: 12px 16px;
			border-bottom: 1px solid #f0f0f0;
			background: #fafafa;
		}

		.body {
			flex: 1;
			overflow-y: auto;
			padding: 16px;
		}
	}

	.right-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.tool-bar {
			padding: 12px 16px;
			background: #fff;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			flex-direction: row;

			.left-panel {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.right-panel {
				display: flex;
				gap: 8px;
			}
		}

		.table-content {
			flex: 1;
			overflow: hidden;
			background: #f5f5f5;
		}
	}
}
