/* 文档页面专用样式 - 优化正文内容显示 */

/* 文档内容容器 */
.markdown-content {
  @apply prose prose-lg max-w-none;
  
  /* 优化字体和行高 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', sans-serif;
  line-height: 1.8;
  color: #1a202c;
}

/* 标题样式优化 */
.markdown-content h1 {
  @apply text-4xl font-bold mb-8 pb-4 border-b-2 border-gray-200;
  color: #2d3748;
  line-height: 1.3;
}

.markdown-content h2 {
  @apply text-3xl font-semibold mb-6 mt-12 pb-3 border-b border-gray-200;
  color: #2d3748;
  line-height: 1.4;
}

.markdown-content h3 {
  @apply text-2xl font-semibold mb-4 mt-8;
  color: #4a5568;
  line-height: 1.5;
}

.markdown-content h4 {
  @apply text-xl font-medium mb-3 mt-6;
  color: #4a5568;
}

/* 段落优化 */
.markdown-content p {
  @apply mb-6 text-gray-700;
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* 引用块样式 */
.markdown-content blockquote {
  @apply pl-6 border-l-4 border-primary-400 bg-primary-50 py-4 pr-4 my-8 rounded-r-lg;
  font-style: normal;
}

.markdown-content blockquote p {
  @apply mb-0 text-gray-700;
  font-size: 1.0625rem;
}

/* 列表样式 */
.markdown-content ul {
  @apply my-6 space-y-2;
}

.markdown-content ul li {
  @apply pl-2 text-gray-700;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.markdown-content ul li::marker {
  @apply text-primary-500;
}

.markdown-content ol {
  @apply my-6 space-y-2;
}

.markdown-content ol li {
  @apply pl-2 text-gray-700;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.markdown-content ol li::marker {
  @apply text-primary-600 font-semibold;
}

/* 链接样式 */
.markdown-content a {
  @apply text-primary-600 font-medium underline decoration-primary-300 decoration-2 underline-offset-2;
  transition: all 0.2s ease;
}

.markdown-content a:hover {
  @apply text-primary-700 decoration-primary-500;
}

/* 代码块样式 */
.markdown-content code {
  @apply px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm font-mono;
}

.markdown-content pre {
  @apply bg-gray-50 text-gray-800 p-6 rounded-xl my-8 overflow-x-auto shadow-sm border border-gray-200;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.markdown-content pre code {
  @apply bg-transparent p-0 text-gray-800;
  font-size: inherit;
}

/* 表格样式 */
.markdown-content table {
  @apply w-full my-8 shadow-sm rounded-lg overflow-hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.markdown-content thead {
  @apply bg-gray-50;
}

.markdown-content th {
  @apply px-6 py-4 text-left font-semibold text-gray-700 text-sm uppercase tracking-wider;
  border-bottom: 2px solid #e5e7eb;
}

.markdown-content td {
  @apply px-6 py-4 text-gray-700;
  border-bottom: 1px solid #f3f4f6;
}

.markdown-content tbody tr:hover {
  @apply bg-gray-50;
}

.markdown-content tbody tr:last-child td {
  border-bottom: none;
}

/* 图片样式 */
.markdown-content img {
  @apply rounded-xl shadow-md my-8 mx-auto;
  max-width: 100%;
  height: auto;
}

/* 强调文本 */
.markdown-content strong {
  @apply font-semibold text-gray-900;
}

.markdown-content em {
  @apply italic text-gray-700;
}

/* 水平分割线 */
.markdown-content hr {
  @apply my-12 border-t-2 border-gray-200;
}

/* 嵌套列表优化 */
.markdown-content ul ul,
.markdown-content ol ul,
.markdown-content ul ol,
.markdown-content ol ol {
  @apply mt-2 ml-6;
}

/* 任务列表样式 */
.markdown-content .task-list-item {
  @apply list-none pl-0;
}

.markdown-content .task-list-item input[type="checkbox"] {
  @apply mr-2 rounded border-gray-300 text-primary-600 focus:ring-primary-500;
}

/* 定义列表样式 */
.markdown-content dl {
  @apply my-6;
}

.markdown-content dt {
  @apply font-semibold text-gray-900 mb-2;
}

.markdown-content dd {
  @apply ml-6 mb-4 text-gray-700;
}

/* 脚注样式 */
.markdown-content .footnotes {
  @apply mt-12 pt-8 border-t-2 border-gray-200 text-sm;
}

.markdown-content .footnotes ol {
  @apply space-y-2;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .markdown-content {
    font-size: 1rem;
  }
  
  .markdown-content h1 {
    @apply text-3xl;
  }
  
  .markdown-content h2 {
    @apply text-2xl;
  }
  
  .markdown-content h3 {
    @apply text-xl;
  }
  
  .markdown-content table {
    @apply text-sm;
  }
  
  .markdown-content th,
  .markdown-content td {
    @apply px-3 py-2;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .markdown-content {
    color: #e5e7eb;
  }
  
  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4 {
    color: #f3f4f6;
  }
  
  .markdown-content p,
  .markdown-content li {
    color: #d1d5db;
  }
  
  .markdown-content blockquote {
    @apply bg-gray-800 border-primary-400;
  }
  
  .markdown-content code {
    @apply bg-gray-800 text-gray-200;
  }
  
  .markdown-content table {
    @apply border-gray-700;
  }
  
  .markdown-content thead {
    @apply bg-gray-800;
  }
  
  .markdown-content th {
    @apply text-gray-300 border-gray-700;
  }
  
  .markdown-content td {
    @apply text-gray-300 border-gray-800;
  }
  
  .markdown-content tbody tr:hover {
    @apply bg-gray-800;
  }
}