/* 文档页面容器 */
.docs-container {
	display: flex;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	max-width: 1360px;
	margin: 0px auto;
	min-height: 80vh;
	align-items: flex-start;
	/* 重要：防止子元素被拉伸或压缩 */
}

/* 侧边导航栏 - 电脑端固定 */
.sidebar-nav {
	width: 250px;
	background-color: #f8f9fa;
	padding: 30px 20px;
	/* border-right: 1px solid #e9ecef; */
	position: sticky;
	top: 100px;
	/* 距离顶部导航栏的距离 */
	max-height: calc(100vh - 120px);
	/* 限制最大高度，防止超过屏幕 */
	overflow-y: auto;
	/* 仅在内容多时显示滚动条 */
	flex-shrink: 0;
	/* 防止侧边栏被压缩 */
}

/* 优化滚动条外观（可选，让它不那么丑） */
.sidebar-nav::-webkit-scrollbar {
	width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 10px;
}

.sidebar-nav h3 {
	margin-bottom: 20px;
	color: #667eea;
	font-size: 1.1rem;
	font-weight: 600;
}

.sidebar-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-nav li {
	margin-bottom: 8px;
}

.sidebar-nav a {
	color: #495057;
	text-decoration: none;
	transition: all 0.2s;
	display: block;
	padding: 10px 15px;
	border-radius: 6px;
	font-size: 0.95rem;
}

.sidebar-nav a:hover {
	color: #667eea;
	background-color: #f0f2ff;
}

/* 主内容区 */
.docs-main {
	flex: 1;
	padding: 40px;
	min-width: 0;
	/* 防止内容溢出撑开容器 */
}

.docs-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e9ecef;
}

.docs-header h1 {
	color: #343a40;
	margin-top: 0;
}

/* 响应式适配：平板和手机 */
@media (max-width: 1024px) {
	.docs-container {
		display: block;
	}

	/* .sidebar-nav {
		width: 100%;
		position: relative;
		top: 0;
		max-height: none;
		border-right: none;
		border-bottom: 1px solid #e9ecef;
		padding: 20px;
	} */

	.sidebar-nav {
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgba(255, 255, 255, 0.8);
		backdrop-filter: blur(20px);
		/* Apple 标志性的磨砂玻璃 */
		-webkit-backdrop-filter: blur(20px);
		padding: 10px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		width: 100%;
		/* 浅灰色背景区分导航区 */
	}

	/* 隐藏“文档导航”标题，节省高度 */
	.sidebar-nav h3 {
		display: none;
	}

	/* 2. 核心：横向滚动列表 */
	.nav-list {
		display: flex;
		flex-wrap: nowrap;
		/* 强制不换行 */
		overflow-x: auto;
		/* 开启横向滚动 */
		-webkit-overflow-scrolling: touch;
		/* iOS 滚动回弹 */
		padding: 5px 15px;
		gap: 10px;
		list-style: none;
	}

	/* 隐藏滚动条但保留功能 */
	.nav-list::-webkit-scrollbar {
		display: none;
	}

	/* 3. 胶囊按钮样式 */
	.nav-group {
		flex: 0 0 auto;
		/* 防止被挤压 */
		margin: 0 !important;
	}

	.nav-main-link {
		display: block;
		padding: 8px 18px;
		border-radius: 20px;
		/* 圆角胶囊 */
		background: #f5f5f7;
		/* 默认浅灰色背景 */
		color: #1d1d1f;
		font-size: 0.9rem;
		text-decoration: none;
		transition: all 0.3s ease;
		border: 1px solid transparent;
	}

	/* 4. 激活状态（重点参考 Apple 黑色选中效果） */
	.nav-group.active .nav-main-link {
		background: #1d1d1f !important;
		/* 黑色背景 */
		color: #ffffff !important;
		/* 白色文字 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	}

	/* 隐藏选中的箭头，横向布局不需要它 */
	.menu-arrow {
		display: none;
	}

	/* 5. 子菜单处理：横向模式下暂时隐藏或改为下拉 */
	/* .sub-menu {
		display: none !important;
	} */

	/* 6. 内容区间距调整 */
	.docs-main {
		padding: 2px 1px;
	}
}


.sidebar-nav .nav-group.active>.nav-main-link {
	background-color: #eff6ff !important;
	/* 浅蓝色背景 */
	color: #2563eb !important;
	/* 蓝色文字 */
	font-weight: 700 !important;
	/* 加粗 */
	/* border-right: 4px solid #2563eb; */
	/* 右侧加深色条，视觉冲击力更强 */
}

/* 激活状态下的文字颜色强制 */
.sidebar-nav .nav-group.active>.nav-main-link .nav-text {
	color: #2563eb !important;
}

/* 激活状态下的箭头颜色 */
.sidebar-nav .nav-group.active .menu-arrow {
	border-color: #2563eb !important;
}

/* 1. 子菜单整体缩进并添加引导线 */
.sidebar-nav .sub-menu {
	list-size: none;
	/* 向右缩进，留出层次感 */
	margin-left: 18px !important;
	/* 左侧边框作为引导线，颜色浅一点 */
	border-left: 1px solid #e5e7eb !important;
	padding-left: 0 !important;
	margin-top: 4px;
	margin-bottom: 8px;
}

/* 2. 子菜单列表项 */
.sidebar-nav .sub-menu li {
	position: relative;
	margin: 0;
}

/* 3. 子菜单链接样式 */
.sidebar-nav .sub-menu li a {
	display: block;
	padding: 6px 16px !important;
	font-size: 0.875rem !important;
	/* 字体稍微小一点，区分主次 */
	color: #6b7280 !important;
	/* 默认灰色 */
	text-decoration: none;
	transition: all 0.2s ease;
}

/* 4. 子菜单鼠标悬停效果 */
.sidebar-nav .sub-menu li a:hover {
	color: #2563eb !important;
	/* 悬停时变蓝 */
	background-color: #f9fafb;
	/* 极浅的灰色背景 */
	border-radius: 4px;
}