/* Layout */
.app-container {
	padding-top: 50px;
	display: flex;
	height: calc(100vh - 50px);
}

.sidebar {
	width: 280px;
	flex: 0 0 280px;
	height: 100%;
	overflow: hidden;
	background: #ffffff;
}

.sidebar-toolbar {
	padding: 9px;
	border-bottom: 1px solid #eee;
	background: #fff;
}


.tree-container {
	height: calc(100% - 46px);
	overflow: auto;
	padding: 8px;
}

.editor-pane {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.editor-toolbar {
	padding: 8px;
	border-bottom: 1px solid #eee;
	background: #f8f9fa;
}

#editor {
	flex: 1 1 auto;
	min-height: 400px;
}


/* Tree */
.folder-item, .doc-item {
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 3px;
}
.folder-item:hover, .doc-item:hover {
	background: #f5f5f5;
}
.active-item {
	background: #e6f2ff;
}

.folder-title {
	font-weight: bold;
}
.doc-list {
	margin-left: 14px;
}

/* Status */
#statusText.saved {
	color: #9acd32;
}
#statusText.dirty {
	color: #f0ad4e;
}

/* 图标按钮样式 */
.btn-icon {
	border: none !important;
	background: none !important;
	padding: 2px !important;
	color: #666 !important;
	cursor: pointer !important;
	transition: color 0.2s ease !important;
}

.btn-icon:hover {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.btn-icon:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* 文件夹和文档项悬停时显示按钮 */
.folder-item:hover .btn-icon,
.doc-item:hover .btn-icon {
	opacity: 1 !important;
}

/* 按钮组默认半透明，悬停时显示 */
.folder-item .btn-group,
.doc-item .btn-group {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.folder-item:hover .btn-group,
.doc-item:hover .btn-group {
	opacity: 1;
}


/* 文件夹和文档项样式 */
.folder-item, .doc-item {
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 3px;
	position: relative;
	transition: all 0.2s ease;
}

.folder-item:hover, .doc-item:hover {
	background: #f5f5f5;
}

.active-item {
	background: #e6f2ff;
}

.folder-title {
	font-weight: bold;
}

.doc-list {
	margin-left: 14px;
}

/* 操作按钮组样式 */
.action-buttons {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
	opacity: 0;
}

.folder-item:hover .action-buttons,
.doc-item:hover .action-buttons {
	opacity: 1;
}

/* 图标按钮样式 */
.btn-icon {
	border: none !important;
	background: none !important;
	padding: 4px !important;
	color: #666 !important;
	cursor: pointer !important;
	transition: color 0.2s ease !important;
	border-radius: 3px !important;
}

.btn-icon:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* 重命名按钮悬停效果 */
.btn-icon.rename-btn:hover {
	color: #2196F3 !important;
}

/* 删除按钮悬停效果 */
.btn-icon.delete-btn:hover {
	color: #F44336 !important;
}

/* 确保按钮组不影响布局 */
.folder-item, .doc-item {
	padding-right: 80px; /* 为按钮组留出空间 */
}

/* 状态文本样式 */
#statusText.saved {
	color: #9acd32;
}
#statusText.dirty {
	color: #f0ad4e;
}


/* 导航栏按钮组样式 */
.navbar-right .btn-group {
	margin-right: 15px;
	margin-top: 12px;
}

.navbar-right .btn-group .btn {
	margin-left: 0;
	border-radius: 0;
}

.navbar-right .btn-group .btn:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.navbar-right .btn-group .btn:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* 导入导出按钮样式 */
.btn-info {
	background: linear-gradient(135deg, #17a2b8, #138496);
	border: none;
	transition: all 0.3s ease;
}

.btn-info:hover {
	background: linear-gradient(135deg, #138496, #117a8b);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

.btn-warning {
	background: linear-gradient(135deg, #ffc107, #e0a800);
	border: none;
	color: #212529;
	transition: all 0.3s ease;
}

.btn-warning:hover {
	background: linear-gradient(135deg, #e0a800, #d39e00);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.navbar-right .btn-group {
		margin-right: 10px;
	}
	
	.navbar-right .btn-group .btn {
		padding: 4px 8px;
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.navbar-right .btn-group {
		margin-right: 5px;
	}
	
	.navbar-right .btn-group .btn {
		padding: 3px 6px;
		font-size: 10px;
	}
}

/* 底部版本说明样式 */
.app-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	border-top: 1px solid #dee2e6;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

.version-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #6c757d;
	text-align: center;
}

.app-name {
	font-weight: 600;
	color: #495057;
}

.version {
	background: linear-gradient(135deg, #007bff, #0056b3);
	color: white;
	padding: 2px 6px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 500;
}

.separator {
	color: #adb5bd;
	font-weight: 300;
}

.description {
	color: #6c757d;
	font-style: italic;
}

.copyright {
	color: #6c757d;
}

/* 调整主容器高度，为底部留出空间 */
.app-container {
	padding-bottom: 30px; /* 为底部版本说明留出空间 */
	display: flex;
	height: calc(100vh - 100px); /* 减去顶部导航栏和底部版本说明的高度 */
}

/* 响应式设计 */
@media (max-width: 768px) {
	.version-info {
		font-size: 11px;
		gap: 6px;
	}
	
	.description {
		display: none; /* 在小屏幕上隐藏描述 */
	}
}

@media (max-width: 480px) {
	.version-info {
		font-size: 10px;
		gap: 4px;
	}
	
	.separator {
		display: none; /* 在很小屏幕上隐藏分隔符 */
	}
	
	.app-footer {
		height: 25px;
	}
	
	.app-container {
		padding-bottom: 25px;
		height: calc(100vh - 95px);
	}
}

/* 顶部搜索样式优化（不改位置与结构） */
#searchForm {
	margin-left: 12px;
}

#searchForm .form-group {
	display: inline-block;
	margin-right: 0;
	vertical-align: middle;
}

#searchForm .form-control {
	height: 30px;
	line-height: 30px;
	padding: 4px 12px;
	border-radius: 16px 0 0 16px;
}

#searchForm .form-control:focus {
	outline: none;
	border-color: #6f8ae6;
	box-shadow: 0 0 0 2px rgba(111,138,230,0.25);
}

/* 使输入与按钮贴合成一体 */
#searchForm .btn {
	vertical-align: middle;
	border-radius: 0 20px 20px 0;
	margin-left: -4px; /* 覆盖边框缝隙 */
	height: 30px;
}

/* 搜索按钮与高亮配色：薄荷青绿 */
#searchForm .btn.btn-default {
	background: linear-gradient(135deg, #20c997, #0fb98a);
	color: #fff;
	border: 1px solid #12b48a;
	box-shadow: 0 1px 2px rgba(32, 201, 151, 0.2);
}
#searchForm .btn.btn-default:hover {
	background: linear-gradient(135deg, #18b889, #0aa67b);
	box-shadow: 0 4px 10px rgba(32, 201, 151, 0.28);
}
#searchForm .btn.btn-default:active {
	box-shadow: 0 2px 6px rgba(32, 201, 151, 0.22);
}

/* 输入框聚焦高亮同步为青绿 */
#searchForm .form-control:focus {
	border-color: #20c997;
	box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.25);
}

/* 让搜索表单在导航栏里垂直居中 */
.navbar .navbar-form {
	display: flex;
	align-items: center;
	height: 50px;           /* Bootstrap 3 的 navbar 默认高度 */
	padding: 0 15px;
	margin: 0;              /* 去掉默认上下外边距避免偏移 */
}

/* 消除内部元素的垂直偏差 */
.navbar .navbar-form .form-group {
	margin: 0;
}
.navbar .navbar-form .form-control {
	margin: 0;
}

/* 输入与按钮高度更小，且在组内垂直居中 */
#searchForm .form-control {
	height: 30px;
	line-height: 30px;
	padding: 4px 12px;
}
#searchForm .btn.btn-default {
	height: 30px;
	padding: 4px 12px;
}

/* 保证 input 与按钮贴合、垂直对齐 */
#searchForm .input-group,
#searchForm .input-group .form-control,
#searchForm .input-group .input-group-btn,
#searchForm .btn {
	display: inline-flex;
	align-items: center;
}


/* 占位符与对齐微调 */
#searchForm .form-control::placeholder {
	color: #9aa3af;
}

/* 响应式微调 */
@media (max-width: 992px) {
	#searchForm .form-control { width: 240px; }
}
@media (max-width: 768px) {
	#searchForm .form-control { width: 200px; }
}

/* 统一左侧列表与工具栏图标大小与对齐（与新建按钮一致） */
.sidebar-toolbar .btn .glyphicon,
.folder-item .glyphicon,
.doc-item .glyphicon {
	font-size: 12px;         /* 改这里即可全局统一尺寸：12/14/16 */
	line-height: 1;
	width: 14px;             /* 固定宽度，文本对齐更整齐 */
	text-align: center;
	color: #777;
	position: relative;      /* 覆盖 Bootstrap 默认的 top 偏移 */
	top: 0;
}

/* 列表图标与文字间距一致 */
.folder-item .glyphicon,
.doc-item .glyphicon {
	margin-right: 6px;
}

/* 确保按钮内图标与文字垂直居中 */
.sidebar-toolbar .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}