/* ========== Element UI 风格分页组件样式 ========== */
.el-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 55px;
	color: #606266;
}

/* 统计信息 */
.el-pagination__total {
	margin-right: 8px;
	color: #606266;
}

/* 每页条数选择器 */
.el-pagination__sizes {
	display: inline-flex;
	align-items: center;
	margin-right: 8px;
}

.el-pagination__sizes select {
	height: 32px;
	padding: 0 24px 0 12px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	background: white;
	color: #606266;
	cursor: pointer;
	outline: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23606666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	transition: border-color 0.2s;
}

.el-pagination__sizes select:hover {
	border-color: #409eff;
}

.el-pagination__sizes select:focus {
	border-color: #409eff;
}

/* 按钮基础样式 */
.el-pagination__btn {
	/* min-width: 32px; */
	height: 32px;
	padding: 0 8px;
	background: white;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	color: #606266;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	font-family: '微软雅黑', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
}

.el-pagination__btn:hover:not(:disabled):not(.active) {
	color: #151ea4;
	border-color: #151ea4;
	background-color: #f5f5f5;
}

.el-pagination__btn:active:not(:disabled):not(.active) {
	transform: translateY(0);
}

.el-pagination__btn:disabled {
	color: #ccc;
	cursor: not-allowed;
	background-color: #f5f5f5;
	border-color: #e1e1e1;
}

/* 激活的页码 */
.el-pagination__btn.active {
	background: #151ea4;
	border-color: #151ea4;
	color: white;
	cursor: default;
	box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 上一页/下一页按钮 */
.btn-prev,
.btn-next {
	/* min-width: 64px; */
	padding: 0 12px;
}

/* 页码按钮组容器 */
.el-pagination__pages {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

/* 省略号样式 */
.el-pagination__ellipsis {
	color: #909399;
}

/* 跳转区域 */
.el-pagination__jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 16px;
}

.el-pagination__jump-label {
	color: #606266;
}

.el-pagination__editor {
	width: 62px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	text-align: center;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.el-pagination__editor:focus {
	border-color: #151ea4;
}

.el-pagination__jump-btn {
	min-width: 48px;
	height: 32px;
	padding: 0 12px;
	background: white;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	color: #606266;
	cursor: pointer;
	transition: all 0.2s;
}

.el-pagination__jump-btn:hover {
	color: #409eff;
	border-color: #409eff;
	background: #ecf5ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.el-pagination {
		justify-content: center;
		gap: 6px;
		padding: 12px 16px;
	}

	.el-pagination__btn {
		min-width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.btn-prev,
	.btn-next {
		min-width: 56px;
	}

	.el-pagination__total {
		width: 100%;
		margin-bottom: 8px;
		text-align: center;
		order: -2;
	}

	.el-pagination__sizes {
		order: -1;
		margin-bottom: 8px;
	}
}

/* 加载动画 */
.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #409eff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.table-container {
	position: relative;
	min-height: 400px;
}

/* 隐藏 number 输入框的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}