/**
 * Vditor 前台排版增强样式
 * 作用于: 单篇文章页 (post) 与独立页面 (page)
 * 适配主题: default, codex-resets, flat-design 及所有主流 Typecho 模板
 */

/* 1. 水平分割线 (<hr>) 1:1 还原 Vditor 经典极简浅灰线 */
.post-content hr,
.cr-content hr,
.fd-content hr,
.entry-content hr,
.vditor-reset hr,
article hr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 2px !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    background-color: #eaecef !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 2. 表格样式 (与 Vditor 编辑器预览 1:1 像素级一致，带柔和圆角与精致内边框) */
.post-content table,
.cr-content table,
.fd-content table,
.entry-content table,
.vditor-reset table,
article table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5em 0 !important;
    border: 1px solid #dfe2e5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    display: table !important;
    font-size: 0.95rem !important;
}

.post-content th,
.post-content td,
.cr-content th,
.cr-content td,
.fd-content th,
.fd-content td,
.vditor-reset th,
.vditor-reset td {
    padding: 8px 14px !important;
    border-right: 1px solid #dfe2e5 !important;
    border-bottom: 1px solid #dfe2e5 !important;
    border-left: none !important;
    border-top: none !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

/* 最后一列去掉右边框，最后一行去掉底边框，保持外层圆角整洁 */
.post-content tr > *:last-child,
.cr-content tr > *:last-child,
.fd-content tr > *:last-child,
.vditor-reset tr > *:last-child {
    border-right: none !important;
}

.post-content tbody tr:last-child > *,
.cr-content tbody tr:last-child > *,
.fd-content tbody tr:last-child > *,
.vditor-reset tbody tr:last-child > * {
    border-bottom: none !important;
}

.post-content th,
.cr-content th,
.fd-content th,
.vditor-reset th {
    background-color: #f6f8fa !important;
    color: #24292e !important;
    font-weight: 600 !important;
}

.post-content tr:nth-child(even),
.cr-content tr:nth-child(even),
.fd-content tr:nth-child(even),
.vditor-reset tr:nth-child(even) {
    background-color: #fafbfc !important;
}

.post-content tr:hover,
.cr-content tr:hover,
.fd-content tr:hover,
.vditor-reset tr:hover {
    background-color: #f1f3f5 !important;
}

/* 3. GFM 任务列表复选框样式 */
ul.vditor-task,
ol.vditor-task {
    list-style: none !important;
    padding-left: 0.5em !important;
    margin-left: 0 !important;
}

li.vditor-task {
    list-style: none !important;
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.4em;
    line-height: 1.6;
}

li.vditor-task > input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.35em;
    margin: 0;
    cursor: default;
    width: 15px;
    height: 15px;
    accent-color: #0969da;
}

/* 4. GFM Alerts / 告警提示框美化样式 */
.markdown-alert {
    padding: 14px 18px;
    margin: 1.5em 0;
    border: 2px solid var(--ink, #1f2328);
    border-left-width: 6px;
    border-radius: 8px;
    background-color: var(--card-inner, rgba(246, 248, 250, 0.7));
    box-shadow: 2px 2px 0px var(--ink, #1f2328);
}

.markdown-alert.markdown-alert-note {
    border-left-color: #0969da;
    background-color: rgba(9, 105, 218, 0.05);
}

.markdown-alert.markdown-alert-tip {
    border-left-color: #1a7f37;
    background-color: rgba(26, 127, 55, 0.05);
}

.markdown-alert.markdown-alert-important {
    border-left-color: #8250df;
    background-color: rgba(130, 80, 223, 0.05);
}

.markdown-alert.markdown-alert-warning {
    border-left-color: #cf6900;
    background-color: rgba(207, 105, 0, 0.06);
}

.markdown-alert.markdown-alert-caution {
    border-left-color: #cf222e;
    background-color: rgba(207, 34, 46, 0.06);
}

.markdown-alert-title {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 8px;
    gap: 6px;
}

.markdown-alert-note .markdown-alert-title { color: #0969da; }
.markdown-alert-tip .markdown-alert-title { color: #1a7f37; }
.markdown-alert-important .markdown-alert-title { color: #8250df; }
.markdown-alert-warning .markdown-alert-title { color: #cf6900; }
.markdown-alert-caution .markdown-alert-title { color: #cf222e; }

/* 5. Mermaid 图表居中与平滑呈现 (彻底隔离 Prism 样式污染) */
.language-mermaid,
.language-mindmap {
    display: block !important;
    width: 100% !important;
    text-align: center;
}

/* 彻底重置图表容器 pre 样式：消除任何灰底、边框、投影与内边距 */
pre.vditor-diagram-container,
.post-content pre.vditor-diagram-container,
.cr-content pre.vditor-diagram-container,
.fd-content pre.vditor-diagram-container,
.entry-content pre.vditor-diagram-container,
.vditor-reset pre.vditor-diagram-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1.8em auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

pre.vditor-diagram-container code,
.post-content pre.vditor-diagram-container code,
.cr-content pre.vditor-diagram-container code,
.vditor-reset pre.vditor-diagram-container code {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    white-space: normal !important;
    text-shadow: none !important;
}

.vditor-mermaid {
    text-align: center;
    margin: 1.8em 0;
    overflow-x: auto;
    animation: vditorFadeIn 0.25s ease-in-out;
}

/* 核心隔离：强力阻断 Prism 对 Mermaid/图表 SVG 内部样式的全局污染 */
.vditor-diagram-container svg,
.vditor-mermaid svg,
.language-mermaid svg,
svg[id^="mermaid-"] {
    display: inline-block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    text-shadow: none !important;
    background: transparent !important;
}

/* 彻底阻断 Prism 的 text-shadow (白色投影) 与等宽字体污染图表文字 */
.vditor-diagram-container svg text,
.vditor-mermaid svg text,
.language-mermaid svg text,
svg[id^="mermaid-"] text {
    text-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    white-space: normal !important;
    letter-spacing: normal !important;
}

@keyframes vditorFadeIn {
    from {
        opacity: 0.3;
        transform: scale(0.99);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 6. 数学公式 KaTeX 规范渲染与滚动保护 */
.language-math,
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0;
    max-width: 100%;
}

div.language-math {
    text-align: center;
    margin: 1.2em 0;
}

span.language-math {
    display: inline-block;
    padding: 0 3px;
}

/* 7. 普通代码块容器与 Prism 语法高亮（排除图表与公式容器，纯净无行号模式） */
.post-content pre:not(.vditor-diagram-container),
.cr-content pre:not(.vditor-diagram-container),
.fd-content pre:not(.vditor-diagram-container),
.entry-content pre:not(.vditor-diagram-container),
.vditor-reset pre:not(.vditor-diagram-container) {
    position: relative !important;
    padding: 16px 18px !important;
    margin: 1.5em 0 !important;
    border: 1px solid #dfe2e5 !important;
    border-radius: 8px !important;
    background-color: #f6f8fa !important;
    overflow-x: auto !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.post-content pre:not(.vditor-diagram-container) code,
.cr-content pre:not(.vditor-diagram-container) code,
.fd-content pre:not(.vditor-diagram-container) code,
.entry-content pre:not(.vditor-diagram-container) code,
.vditor-reset pre:not(.vditor-diagram-container) code {
    background: transparent !important;
    border: none !important;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: #24292e !important;
    display: block !important;
    white-space: pre !important;
}

/* 复制按钮：稳固固定在代码框右上角内部 */
.cr-copy-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #d0d7de !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #24292f !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s, background-color 0.2s, border-color 0.2s !important;
    z-index: 10 !important;
    line-height: 1.3 !important;
}

pre:hover .cr-copy-btn {
    opacity: 1 !important;
}

.cr-copy-btn:hover {
    background: #ffffff !important;
    border-color: #0969da !important;
    color: #0969da !important;
}

/* 8. 详情折叠面板样式优化 */
details {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 14px 0;
    background: rgba(0, 0, 0, 0.015);
}

details summary {
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

details[open] summary {
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 6px;
}

/* 9. 暗色模式适配 (Dark Mode) */
[data-theme="dark"] .post-content table,
[data-theme="dark"] .cr-content table,
[data-theme="dark"] .vditor-reset table {
    border-color: #30363d !important;
}

[data-theme="dark"] .post-content th,
[data-theme="dark"] .post-content td,
[data-theme="dark"] .cr-content th,
[data-theme="dark"] .cr-content td,
[data-theme="dark"] .vditor-reset th,
[data-theme="dark"] .vditor-reset td {
    border-color: #30363d !important;
}

[data-theme="dark"] .post-content th,
[data-theme="dark"] .cr-content th,
[data-theme="dark"] .vditor-reset th {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .post-content tr:nth-child(even),
[data-theme="dark"] .cr-content tr:nth-child(even),
[data-theme="dark"] .vditor-reset tr:nth-child(even) {
    background-color: #0d1117 !important;
}

[data-theme="dark"] .post-content tr:hover,
[data-theme="dark"] .cr-content tr:hover,
[data-theme="dark"] .vditor-reset tr:hover {
    background-color: #21262d !important;
}

[data-theme="dark"] .post-content hr,
[data-theme="dark"] .cr-content hr,
[data-theme="dark"] .vditor-reset hr {
    background-color: #30363d !important;
}

[data-theme="dark"] .post-content pre:not(.vditor-diagram-container),
[data-theme="dark"] .cr-content pre:not(.vditor-diagram-container),
[data-theme="dark"] .vditor-reset pre:not(.vditor-diagram-container) {
    border-color: #30363d !important;
    background-color: #0d1117 !important;
}

[data-theme="dark"] .markdown-alert {
    background-color: rgba(110, 118, 129, 0.1);
}

[data-theme="dark"] .cr-copy-btn {
    background: rgba(40, 44, 52, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e6edf3 !important;
}