/* 暗黑/明亮主题切换覆盖样式 */

/* 全局背景与文本颜色 */
.dark body {
	background-color: #0f172a; /* slate-900 */
	color: #e5e7eb; /* gray-200 */
}

/* 常见卡片背景 */
.dark .bg-white {
	background-color: #1f2937 !important; /* gray-800 */
}

/* 边框与分割线 */
.dark .border-gray-200 {
	border-color: #334155 !important; /* slate-700 */
}

/* 输入框背景与边框 */
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="email"],
.dark textarea,
.dark select {
	background-color: #0b1220;
	border-color: #334155;
	color: #e5e7eb;
}

/* ========== 字体颜色统一优化 ========== */

/* 主要文字颜色 - 统一为灰白色 */
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-gray-400,
.dark .text-black {
	color: #e5e7eb !important; /* gray-200 - 主要文字 */
}

/* 次要文字颜色 - 稍暗的灰白色 */
.dark .text-gray-300 {
	color: #cbd5e1 !important; /* slate-300 - 次要文字 */
}

/* 辅助文字颜色 - 更暗的灰白色 */
.dark .text-gray-200 {
	color: #94a3b8 !important; /* slate-400 - 辅助文字 */
}

/* 标题文字 - 确保在暗色背景下清晰可见 */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
	color: #f1f5f9 !important; /* slate-100 - 标题文字 */
}

/* 链接文字 */
.dark a {
	color: #60a5fa !important; /* blue-400 - 链接文字 */
}

.dark a:hover {
	color: #93c5fd !important; /* blue-300 - 链接悬停 */
}

/* 按钮文字 */
.dark button {
	color: #e5e7eb !important; /* gray-200 - 按钮文字 */
}

/* 表单标签 */
.dark label {
	color: #e5e7eb !important; /* gray-200 - 表单标签 */
}

/* 占位符文字 */
.dark input::placeholder,
.dark textarea::placeholder {
	color: #94a3b8 !important; /* slate-400 - 占位符 */
}

/* 代码块文字 */
.dark code,
.dark pre {
	color: #e5e7eb !important; /* gray-200 - 代码文字 */
	background-color: #1e293b !important; /* slate-800 - 代码背景 */
}

/* 引用文字 */
.dark blockquote {
	color: #cbd5e1 !important; /* slate-300 - 引用文字 */
	border-left-color: #475569 !important; /* slate-600 - 引用边框 */
}

/* 列表文字 */
.dark li {
	color: #e5e7eb !important; /* gray-200 - 列表文字 */
}

/* 表格文字 */
.dark table {
	color: #e5e7eb !important; /* gray-200 - 表格文字 */
}

.dark th,
.dark td {
	color: #e5e7eb !important; /* gray-200 - 表格单元格 */
	border-color: #334155 !important; /* slate-700 - 表格边框 */
}

/* 悬浮背景优化 */
.dark .hover\:bg-gray-100:hover {
	background-color: #111827 !important;
}

/* 分页按钮边框与文字 */
.dark .rounded.border.text-gray-600 {
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}

/* 特殊元素优化 */
.dark .prose {
	color: #e5e7eb !important; /* 文章内容文字 */
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
	color: #f1f5f9 !important; /* 文章标题 */
}

.dark .prose p {
	color: #e5e7eb !important; /* 文章段落 */
}

.dark .prose a {
	color: #60a5fa !important; /* 文章链接 */
}

.dark .prose code {
	color: #e5e7eb !important; /* 文章代码 */
	background-color: #1e293b !important;
}

.dark .prose blockquote {
	color: #cbd5e1 !important; /* 文章引用 */
}

/* 导航栏文字 */
.dark nav a {
	color: #e5e7eb !important; /* 导航链接 */
}

.dark nav a:hover {
	color: #60a5fa !important; /* 导航链接悬停 */
}

/* 侧边栏文字 */
.dark aside {
	color: #e5e7eb !important; /* 侧边栏文字 */
}

/* 页脚文字 */
.dark footer {
	color: #cbd5e1 !important; /* 页脚文字 */
}

/* 确保所有文字在暗色背景下可见 */
.dark * {
	color: inherit;
}

/* 覆盖可能的黑色文字 */
.dark .text-black {
	color: #e5e7eb !important;
}

/* 确保白色文字在暗色背景下仍然可见 */
.dark .text-white {
	color: #f1f5f9 !important; /* 更亮的白色 */
}

/* ========== 文章详情页特殊优化 ========== */

/* 文章标题 - 确保在暗色背景下清晰可见 */
.dark .text-3xl.font-bold {
	color: #f8fafc !important; /* slate-50 - 更亮的白色 */
}

/* 文章摘要 - 提高对比度 */
.dark .bg-blue-900\/20 p {
	color: #e2e8f0 !important; /* slate-200 - 更亮的灰色 */
}

/* 文章内容 - 确保主要内容清晰可见 */
.dark .prose {
	color: #f1f5f9 !important; /* slate-100 - 主要内容 */
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
	color: #f8fafc !important; /* slate-50 - 文章标题 */
}

.dark .prose p {
	color: #f1f5f9 !important; /* slate-100 - 文章段落 */
}

.dark .prose strong {
	color: #f8fafc !important; /* slate-50 - 加粗文字 */
}

.dark .prose code {
	color: #f1f5f9 !important; /* slate-100 - 代码文字 */
	background-color: #1e293b !important; /* slate-800 - 代码背景 */
}

/* 相关文章悬停效果优化 */
.dark .hover\:bg-gray-600:hover {
	background-color: #374151 !important; /* gray-700 - 更亮的悬停背景 */
}

.dark .hover\:bg-gray-600:hover h4 {
	color: #f8fafc !important; /* slate-50 - 悬停时标题更亮 */
}

.dark .hover\:bg-gray-600:hover p {
	color: #e2e8f0 !important; /* slate-200 - 悬停时描述更亮 */
}

/* 评论区域优化 */
.dark .space-y-6 {
	background-color: #1f2937 !important; /* gray-800 - 评论区域背景 */
}

.dark .bg-gray-50 {
	background-color: #1f2937 !important; /* gray-800 - 评论背景 */
}

.dark .bg-gray-700\/30 {
	background-color: #374151 !important; /* gray-700 - 评论项背景 */
}

/* 导航栏主题切换按钮优化 */
.dark .theme-icon {
	color: #fbbf24 !important; /* amber-400 - 太阳图标颜色 */
}

/* 右侧模块标题统一优化 */
.dark .text-lg.font-medium {
	color: #f1f5f9 !important; /* slate-100 - 模块标题 */
}

.dark .text-xl.font-bold {
	color: #f8fafc !important; /* slate-50 - 大标题 */
}

.dark .text-2xl.font-bold {
	color: #f8fafc !important; /* slate-50 - 大标题 */
}

.dark .text-3xl.font-bold {
	color: #f8fafc !important; /* slate-50 - 超大标题 */
}

/* 文章标签 - 暗色主题优化 */
.dark .bg-custom\/10 {
	background-color: #334155 !important; /* slate-700 - 标签背景 */
}

.dark .text-custom {
	color: #e2e8f0 !important; /* slate-200 - 标签文字 */
}

/* ========== 暗色主题模块边框和阴影优化 ========== */

/* 主要模块容器 - 添加边框和阴影 */
.dark .bg-white {
	background-color: #1f2937 !important; /* gray-800 */
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
}


/* 侧边栏模块 - 统一边框和阴影 */
.dark .bg-white.dark\:bg-gray-800 {
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
}

/* 筛选条件模块 - 增强边框效果 */
.dark .bg-white.dark\:bg-gray-800.p-4 {
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
}

/* 列表项之间的分割线 */
.dark .space-y-6 > div:not(:last-child) {
	border-bottom: 1px solid #4b5563 !important; /* gray-600 - 底部分割线 */
	margin-bottom: 1.5rem !important; /* 增加间距 */
}

/* 文章列表项之间的分割线 */
.dark .space-y-6 article:not(:last-child) {
	border-bottom: 1px solid #4b5563 !important; /* gray-600 - 底部分割线 */
	margin-bottom: 1.5rem !important; /* 增加间距 */
}

/* 热门文章列表项 - 添加分割效果 */
.dark .space-y-4 > li:not(:last-child) {
	border-bottom: 1px solid #4b5563 !important; /* gray-600 - 底部分割线 */
	padding-bottom: 1rem !important; /* 增加底部内边距 */
	margin-bottom: 1rem !important; /* 增加底部外边距 */
}

/* 文章分类列表项 - 添加分割效果 */
.dark .space-y-3 > li:not(:last-child) {
	border-bottom: 1px solid #4b5563 !important; /* gray-600 - 底部分割线 */
	padding-bottom: 0.75rem !important; /* 增加底部内边距 */
	margin-bottom: 0.75rem !important; /* 增加底部外边距 */
}

/* 悬停效果优化 - 增强边框 */
.dark .hover\:shadow-lg:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important; /* 更强的悬停阴影 */
	border-color: #6b7280 !important; /* gray-500 - 悬停时边框更亮 */
}

/* 标签云 - 增强边框效果 */
.dark .bg-white.dark\:bg-gray-800.rounded-lg.shadow-sm.dark\:shadow-lg.border {
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
}

/* 分页组件 - 增强边框效果 */
.dark .rounded.border {
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
}

/* 按钮悬停效果 - 增强边框 */
.dark button:hover {
	border-color: #6b7280 !important; /* gray-500 - 悬停时边框更亮 */
}

/* 输入框和表单元素 - 增强边框 */
.dark input[type="text"]:focus,
.dark input[type="search"]:focus,
.dark input[type="number"]:focus,
.dark input[type="email"]:focus,
.dark textarea:focus,
.dark select:focus {
	border-color: #6b7280 !important; /* gray-500 - 聚焦时边框更亮 */
	box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1) !important; /* 聚焦时阴影 */
}

/* ========== 额外的分割和视觉优化 ========== */

/* 主容器背景 - 确保与模块有足够对比 */
.dark body {
	background-color: #0f172a !important; /* slate-900 - 更深的背景 */
}

/* 主内容区域 - 添加微妙的分割效果 */
.dark main {
	background-color: #0f172a !important; /* slate-900 - 主内容背景 */
}

/* 侧边栏区域 - 增强与主内容的分割 */
.dark .w-80,
.dark .w-1\/3 {
	background-color: #0f172a !important; /* slate-900 - 侧边栏背景 */
}

/* 模块间距优化 - 确保模块之间有足够的视觉分离 */
.dark .space-y-6 > * + * {
	margin-top: 1.5rem !important; /* 增加模块间距 */
}


/* 筛选条件模块 - 特殊优化 */
.dark .bg-white.dark\:bg-gray-800.p-4.\!rounded-xl {
	border: 1px solid #374151 !important; /* gray-700 - 边框 */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 阴影 */
	background-color: #1f2937 !important; /* gray-800 - 背景 */
}

/* 链接悬停效果 - 增强视觉反馈 */
.dark a:hover {
	text-decoration: underline !important; /* 悬停时添加下划线 */
}

/* 按钮悬停效果 - 增强视觉反馈 */
.dark button:hover {
	transform: translateY(-1px) !important; /* 悬停时轻微上移 */
	transition: all 0.2s ease-in-out !important; /* 平滑过渡 */
}

/* 图片悬停效果 - 增强视觉反馈 */
.dark img:hover {
	transform: scale(1.02) !important; /* 悬停时轻微放大 */
	transition: transform 0.2s ease-in-out !important; /* 平滑过渡 */
}

/* 卡片悬停效果 - 增强视觉反馈 */
.dark .bg-white:hover,
.dark .bg-white.dark\:bg-gray-800:hover {
	transform: translateY(-2px) !important; /* 悬停时上移 */
	transition: all 0.3s ease-in-out !important; /* 平滑过渡 */
}

/* ========== 评论边框和分割优化 ========== */

/* 评论项边框和分割效果 */
.dark .bg-gray-50.dark\:bg-gray-700\/30 {
	background-color: #1f2937 !important; /* gray-800 - 评论背景 */
	border: 1px solid #374151 !important; /* gray-700 - 评论边框 */
	border-radius: 0.5rem !important; /* 圆角 */
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; /* 评论阴影 */
}

/* 评论项之间的分割线 */
.dark .space-y-6 > .bg-gray-50:not(:last-child) {
	border-bottom: 1px solid #4b5563 !important; /* gray-600 - 底部分割线 */
	margin-bottom: 1.5rem !important; /* 增加间距 */
	padding-bottom: 1rem !important; /* 增加底部内边距 */
}

/* 回复项边框和分割效果 */
.dark .pt-3.border-t.border-gray-200.dark\:border-gray-600 {
	border-radius: 0.375rem !important; /* 圆角 */
	padding: 0.75rem !important; /* 内边距 */
	margin-top: 0.75rem !important; /* 上边距 */
}

/* 回复项之间的分割线 */
.dark .space-y-3 > .pt-3:not(:last-child) {
	border-bottom: 1px solid #374151 !important; /* gray-700 - 回复项分割线 */
	padding-bottom: 0.75rem !important; /* 底部内边距 */
	margin-bottom: 0.75rem !important; /* 底部外边距 */
}

/* 评论容器边框 */
.dark .space-y-6.dark\:bg-gray-800.dark\:p-4.dark\:rounded-lg {
	background-color: #1f2937 !important; /* gray-800 - 评论容器背景 */
	border-radius: 0.5rem !important; /* 圆角 */
}

/* 评论输入框边框 */
.dark textarea {
	border: 1px solid #374151 !important; /* gray-700 - 输入框边框 */
	background-color: #1f2937 !important; /* gray-800 - 输入框背景 */
}

.dark textarea:focus {
	border-color: #6b7280 !important; /* gray-500 - 聚焦时边框更亮 */
	box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1) !important; /* 聚焦时阴影 */
}

/* 评论按钮悬停效果 */
.dark .bg-custom:hover {
	background-color: #1d4ed8 !important; /* blue-700 - 悬停时背景更深 */
	transform: translateY(-1px) !important; /* 悬停时轻微上移 */
	transition: all 0.2s ease-in-out !important; /* 平滑过渡 */
}

/* ========== 文章摘要区域优化 ========== */

/* 文章摘要背景 - 暗色主题下更深的背景 */
.dark .bg-gray-50.dark\:bg-gray-800 {
	background-color: #0808083b !important; /* gray-800 - 更深的背景色 */
}

/* 摘要文字颜色优化 */
.dark .bg-gray-50.dark\:bg-gray-800 p {
	color: #e5e7eb !important; /* gray-200 - 更亮的文字颜色 */
}