/* 全局组件样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 页面主体 */
body {
	font-family: "微软雅黑", "Arial", sans-serif;
	background-color: #fff;
	padding: 20px;
	color: #333;
	font-size: 12px;
	min-width: 1200px;
}

:root {
	--default-color: #444;
	--white-color: #fff;
	--border-color: #d9d9d9;
	--danger-color: #ff4d4f;
	--primary-color: #1890ff;
	--primary-color-hover: #59a2dd;
	--primary-color-active: #005cbe;

	--primary-color-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

	--active-bg-color: #e8f3ff;
	--active-color: var(--primary-color);
	--border-radius: 4px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: #e8e8e8;
	border-radius: 10px;
}

::-webkit-scrollbar:hover {
	background-color: #d9d9d9;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
	background-color: transparent;
}

/* 滚动条按钮样式 */
::-webkit-scrollbar-button {
	display: none;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
	background-color: #0003;
	border-radius: 10px;
}

/* 输入框样式 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="url"],
input[type="color"],
input[type="file"],
input[type="search"],
input[type="radio"],
input[type="checkbox"],
select,
textarea {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 14px;
	transition: all 0.3s ease;
	background: var(--white-color);
	outline: none;
}



/* 复选框样式 */
input[type="radio"],
input[type="checkbox"] {
	margin-right: 8px;
	width: 16px;
	height: 16px;
}

/* 输入框悬停样式 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
input[type="file"]:focus,
input[type="search"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 按钮样式 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	white-space: nowrap;
	background: var(--primary-color);
	color: var(--white-color);
	border: none;
	padding: 5px 15px;
	border-radius: var(--border-radius);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

input[type="button"]:not(:first-child) {
	margin-left: 10px;
}

select {
	width: auto;
}


button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background: var(--primary-color-active);
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled {
	background: #d9d9d9;
	cursor: not-allowed;
}


.flex {
	display: flex;
}

/* 按钮 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	gap: 4px;

	border: 1px solid var(--default-color);
	background: var(--white-color);
	color: var(--default-color);
}

.btn:hover {
	border-color: var(--primary-color-hover);
	background-color: var(--white-color);
	color: var(--primary-color-hover);
}

.btn:active {
	border-color: var(--primary-color-active);
	background-color: var(--white-color);
	color: var(--primary-color-active);
}

.mini {
	padding: 4px 8px !important;
	font-size: 12px !important;
}



/* 按钮 - 默认 */
.btn-default {
	border: 1px solid var(--primary-color);
	background: var(--white-color);
	color: var(--primary-color);
}

.btn-default:hover {
	border-color: var(--primary-color-hover);
	color: var(--primary-color-hover);
}

.btn-default:active {
	border-color: var(--primary-color-active);
	color: var(--primary-color-active);
}


/* 按钮 - 主要 */
.btn-primary {
	background: var(--primary-color);
	color: var(--white-color);
}

.btn-primary:hover {
	background-color: var(--primary-color-hover);
}

.btn-primary:active {
	background-color: var(--primary-color-active);
}

/* 按钮 - 危险 */
.btn-danger {
	background: var(--danger-color);
	color: var(--white-color);
}

.btn-danger:hover {
	background-color: #ff7875;
}

.btn-danger:active {
	background-color: #f34946;
}


/* 链接按钮 */
.btn-link {
	background: none;
	color: var(--primary-color);
}

.btn-link:hover {
	background: none;
	color: var(--primary-color-hover);
}

.btn-link:active {
	background: none;
	color: var(--primary-color-active);
}

/* 按钮悬停样式 */
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: var(--primary-color-hover);
}

/* 链接样式 */
a {
	color: var(--primary-color);
	text-decoration: none;
}

/* 禁用链接样式 */
a.disabled {
	pointer-events: none;
}

/* 链接悬停样式 */
a:hover {
	color: var(--primary-color-hover);
	text-decoration: none;
}

/* 卡片样式 */
.card {
	background-color: var(--white-color);
	border-radius: var(--border-radius);
	padding: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	transition: transform 0.3s ease;
}


/* 状态标签样式 */
.status-label {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	justify-content: center;
}

/* 已激活状态 */
.status-active {
	background-color: #f6ffed;
	color: #52c41a;
	border: 1px solid #b7eb8f;
}

/* 未激活状态 */
.status-inactive {
	background-color: #fff2e8;
	color: #fa8c16;
	border: 1px solid #ffd591;
}

/* 内容头 */
.content-header {
	background-color: #fff;
	padding: 15px 20px;
	border-radius: 6px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 内容头 - 标题 */
.content-header h1 {
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

/* 内容头 - 面包屑 */
.content-header .breadcrumb {
	font-size: 14px;
	color: #666;
}

/* 内容头 - 面包屑 - 链接 */
.content-header .breadcrumb a {
	color: #3498db;
	text-decoration: none;
}

/* 内容头 - 面包屑 - 链接 - 悬停 */
.content-header .breadcrumb a:hover {
	color: #2980b9;
	text-decoration: underline;
}

/* 卡片 */
.card {
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
	overflow: hidden;
}

/* 容器 */
.container {
	max-width: 100%;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	padding: 24px;
}

/* 分页头 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e8e8e8;
}

/* 分页标题 */
.page-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 表单容器 */
.form-container {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

/* 表单 */
form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* 表单 - 项目 */
form .form-group {
	display: flex;
	align-items: center;
	gap: 5px;

	input {
		padding: 5px 10px;
	}
}

/* 搜索表单 */
.search-form {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	padding: 16px;
	background-color: #fafafa;
	border-radius: 4px;
	flex-wrap: wrap;
}

/* 搜索表单 - 项目 */
.form-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 搜索表单 - 项目 - 标签 */
.form-item label {
	font-size: 14px;
	color: #666;
	white-space: nowrap;
}

/* 搜索表单 - 项目 - 输入框 */
.form-control {
	padding: 6px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	transition: all 0.3s ease;
	min-width: 160px;

}

/* 搜索表单 - 项目 - 输入框 - 悬停 */
.form-control:focus {
	outline: none;
	border-color: #40a9ff;
	box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}


.tabs {
	display: flex;
	flex-direction: column;

	/* 顶部标签栏 */
	.tabs-lists {
		position: relative;
		display: flex;
		gap: 10px;
		margin-bottom: 20px;
		border-bottom: 1px solid #e8e8e8;

		/* 顶部标签栏 - 项目 */
		.tab-item {
			padding: 8px 16px;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		/* 顶部标签栏 - 项目 - 悬停 */
		.tab-item:hover {
			color: #1890ff;
		}

		/* 顶部标签栏 - 项目 - 激活 */
		.tab-item.active {
			border-bottom: 2px solid #1890ff;
			color: #1890ff;
		}
	}

	.tabs-content {
		flex: auto;
		min-width: 0;
		min-height: 0;

		.tabs-item-container {
			height: 100%;

			.first-child:first-child {
				padding-right: 16px;
				border-right: 1px solid #edf0f5;
			}

			&>div:not(:first-child) {
				padding: 16px;
				width: calc(100% - 300px);
			}
		}
	}
}

.table-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;

	.table-header-title {
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}
}

/* 表格容器 */
.table-container {
	overflow-x: auto;
	margin-bottom: 20px;
	border-radius: 4px;
	width: 100%;



	/* 表格 */
	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		border: 1px solid #e8e8e8;

		/* 表格 - 标题行 */
		th,
		td {
			padding: 12px 16px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}

		/* 表格 - 标题行 - 单元格 */
		th {
			background-color: #fafafa;
			color: #333;
		}

		/* 表格 - 数据行 - 悬停 */
		tr:hover {
			background-color: #00000020;
		}
	}
}

/* 列表容器 */
.list-container {
	.list-header {
		display: flex;
		align-items: center;
		gap: 8px;

		.list-header-title {
			color: #333;
			font-size: 16px;
			font-weight: 600;
		}
	}

	.list-item-container {
		width: 100%;
		margin: 16px auto;
		padding-right: 8px;
		overflow: auto;
		height: calc(100vh - 190px);
		overflow-x: hidden;
		overflow-y: overlay;

		.list-item {
			width: 100%;
			padding: 8px 16px;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s ease;

			&.active {
				background-color: var(--active-bg-color);
				color: var(--active-color);
			}
		}

		.list-item:hover {
			background-color: #00000020;
		}
	}

	.list-footer {
		color: #666;
		font-size: 14px;
	}
}



/* 图片 - 显示 */
.show-img {
	max-width: 300px;
	max-height: 500px;
}

@media screen and (max-width: 768px) {
	.show-img {
		max-width: 100px;
		max-height: 300px;
	}
}


/* 表格 - 滚动容器 */
.table-scroll {
	position: relative;
	overflow: auto;
	max-height: calc(100vh - 160px);


	.fixed-header {
		position: sticky;
		top: 0;
		z-index: 10;
		background: #f8f9fa;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.fixed-column {
		position: sticky;
		right: 0;
		background: white;
		box-shadow: -5px 0 10px rgba(0, 0, 0, 0.05);
		z-index: 5;
		width: 300px;
	}

	.resize-handle {
		position: absolute;
		top: 0;
		right: 0;
		width: 5px;
		height: 100%;
		background: transparent;
		cursor: col-resize;
		z-index: 20;
	}

	.resize-handle:hover,
	.resize-handle.active {
		background: #3498db;
	}

	table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
		min-width: 100%;
	}

	th,
	td {
		position: relative;
		padding: 5px 12px;
		text-align: left;
		border-bottom: 1px solid #eaeaea;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background-color 0.2s;
	}

	th {
		background: #f8f9fa;
		font-weight: 600;
		color: #2c3e50;
		font-size: 14px;
		user-select: none;
		border-bottom: 2px solid #dee2e6;
	}

	th:hover {
		background: #e9ecef;
	}

	td {
		color: #495057;
		font-size: 14px;
		background: white;
	}

	tr:hover td {
		background: #f8f9fa;
	}

	tr:last-child td {
		border-bottom: none;
	}

	.no-data {
		padding: 50px;
		text-align: center;
		color: #95a5a6;
		font-size: 16px;
	}
}

/* 表格 - 数据行 - 单元格 - 状态徽章 */
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}

/* 表格 - 数据行 - 单元格 - 状态徽章 - 活跃 */
.status-active {
	background-color: #f6ffed;
	color: #52c41a;
	border: 1px solid #b7eb8f;
}

/* 表格 - 数据行 - 单元格 - 状态徽章 - 不活跃 */
.status-inactive {
	background-color: #fff1f0;
	color: #ff4d4f;
	border: 1px solid #ffccc7;
}

/* 表格 - 数据行 - 单元格 - 操作按钮 */
.action-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* 表格 - 数据行 - 单元格 - 操作按钮 - 默认 */
.action-btn {
	padding: 4px 12px;
	font-size: 12px;
}

/* 排序输入框样式 */
.sort-input {
	width: 60px;
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
}

/* 分页 */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 24px;
	gap: 8px;
	flex-wrap: wrap;
}

/* 分页 - 链接 */
.pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	color: #333;
	text-decoration: none;
	transition: all 0.3s ease;
	min-width: 32px;
	height: 32px;
}

/* 分页 - 链接 - 悬停 */
.pagination a:hover:not(.disabled) {
	border-color: #40a9ff;
	color: #40a9ff;
}

/* 分页 - 链接 - 当前页 */
.pagination .active {
	background-color: #1890ff;
	border-color: #1890ff;
	color: #fff;
}

/* 分页 - 链接 - 禁用 */
.pagination .disabled {
	color: #d9d9d9;
	cursor: not-allowed;
}

/* 分页 - 信息 */
.pagination-info {
	margin-left: 16px;
	font-size: 14px;
	color: #666;
}

/* 弹窗 */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
	min-width: 1200px;
}

/* 弹窗 - 内容 */
.modal-content {
	background-color: #fff;
	border-radius: 8px;
	padding: 24px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content {
	width: unset;
	max-width: 1000px;
	max-height: 800px;
}

/* 弹窗 - 标题 */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e8e8e8;
}

/* 弹窗 - 标题 - 图标 */
.modal-title-icon {
	font-size: 20px;
	color: #40a9ff;
}

/* 弹窗 - 标题 - 文本 */
.modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 关闭按钮 */
.modal-close {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #999;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.3s;
}

/* 弹窗 - 关闭按钮 - 悬停 */
.modal-close:hover {
	background-color: #f5f5f5;
	color: #333;
}

.modal-body-form {
	border-collapse: collapse;
	max-height: 680px;
	overflow-y: auto;
	font-size: 12px;
	width: 600px;

	td,
	th {
		border: 1px solid #edf0f5;
		white-space: nowrap;

		height: 16px;
		padding: 7px 10px;
	}

	th {
		text-align: right;
		width: 15%;
	}

	.form-group {
		display: grid;
		gap: 8px;

	}

	#paste_file_upload {
		cursor: pointer;
		border: 2px dashed rgb(170, 170, 170);
		border-radius: 5px;
		padding: 10px 20px;
		font: 10pt bold;
		color: rgb(187, 187, 187);
		display: flex;
		flex-direction: column;
		align-items: center;

		i {
			font-size: 20px;
		}
	}

	#paste_file_upload:hover {
		border-color: rgb(128, 128, 128);
		color: rgb(128, 128, 128);
	}
}

/* 弹窗 - 页脚 */
.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e8e8e8;
}