/* Markdown 内容样式 */

/* Topic和Reply的淡黄色麻布纹理背景（比全局背景更淡） */
.topic-content, .reply-content {
    /* 更淡的淡黄色基础色 */
    background-color: #faf8f5;
    background-image: 
        /* 麻布纤维纹理（更细腻） */
        radial-gradient(circle at 0.5px 0.5px, rgba(0,0,0,0.015) 0.5px, transparent 0),
        radial-gradient(circle at 1.5px 1.5px, rgba(0,0,0,0.01) 0.5px, transparent 0),
        /* 麻布交叉纹理（更细） */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(139, 115, 85, 0.015) 1px,
            rgba(139, 115, 85, 0.015) 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(139, 115, 85, 0.015) 1px,
            rgba(139, 115, 85, 0.015) 2px
        ),
        /* 麻布质感渐变（更淡） */
        linear-gradient(
            180deg,
            rgba(255, 250, 245, 0.3) 0%,
            rgba(250, 248, 245, 0.2) 50%,
            rgba(245, 242, 238, 0.25) 100%
        );
    background-size: 
        15px 15px,  /* 纤维纹理大小 */
        30px 30px,  /* 纤维纹理大小 */
        4px 4px,    /* 垂直纹理 */
        4px 4px,    /* 水平纹理 */
        100% 100%;  /* 质感渐变 */
    padding: 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.topic-content h1, .reply-content h1, #content-preview h1, #reply-preview h1 { 
    font-size: 1.5rem; 
    margin: 1rem 0 0.5rem 0; 
    line-height: 1.6;
}

.topic-content h2, .reply-content h2, #content-preview h2, #reply-preview h2 { 
    font-size: 1.3rem; 
    margin: 0.8rem 0 0.4rem 0; 
    line-height: 1.6;
}

.topic-content h3, .reply-content h3, #content-preview h3, #reply-preview h3 { 
    font-size: 1.1rem; 
    margin: 0.6rem 0 0.3rem 0; 
    line-height: 1.6;
}

.topic-content p, .reply-content p, #content-preview p, #reply-preview p { 
    margin-bottom: 0.8rem; 
    font-size: 1rem;
    line-height: 1.6;
}

.topic-content blockquote, .reply-content blockquote, #content-preview blockquote, #reply-preview blockquote { 
    border-left: 4px solid #dee2e6; 
    padding-left: 1rem; 
    margin: 1rem 0; 
    color: #6c757d; 
    font-size: 1rem;
    line-height: 1.6;
}

.topic-content code, .reply-content code, #content-preview code { 
    background-color: #f8f9fa; 
    padding: 0.2rem 0.4rem; 
    border-radius: 0.25rem; 
    font-size: 0.9em; 
    word-break: break-word;
    white-space: pre-wrap;
}

.topic-content pre, .reply-content pre, #content-preview pre { 
    background-color: #f8f9fa; 
    padding: 1rem; 
    border-radius: 0.25rem; 
    overflow-x: auto; 
    max-width: 100%;
    box-sizing: border-box;
}

#replies-list .list-group-item .flex-grow-1 {
    min-width: 0;
}

.topic-content ul, .reply-content ul, #content-preview ul, #reply-preview ul,
.topic-content ol, .reply-content ol, #content-preview ol, #reply-preview ol { 
    margin-bottom: 0.8rem; 
    padding-left: 2rem; 
    font-size: 1rem;
    line-height: 1.6;
}

/* Mermaid 图表样式 */
.topic-content .mermaid, .reply-content .mermaid, #content-preview .mermaid, #reply-preview .mermaid {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    text-align: center;
    overflow-x: auto;
}

.topic-content .mermaid svg, .reply-content .mermaid svg, #content-preview .mermaid svg, #reply-preview .mermaid svg {
    max-width: 100%;
    height: auto;
}

/* 预览区域基础样式统一 */
#content-preview, #reply-preview {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 确保预览区域内的所有文本元素都使用一致的样式 */
#content-preview *, #reply-preview * {
    font-family: inherit;
}

/* ========== 现代化 Markdown 表格样式 ========== */

/* 表格容器 - 莫兰迪圆角阴影 */
.topic-content .table-responsive,
.reply-content .table-responsive,
#content-preview .table-responsive,
#reply-preview .table-responsive {
    margin: 1.25rem 0;
    border-radius: 12px;
    box-shadow: 
        0 4px 12px -2px rgba(139, 130, 120, 0.12),
        0 2px 6px -1px rgba(139, 130, 120, 0.08),
        0 0 0 1px rgba(139, 130, 120, 0.06);
    overflow: hidden;
    background: #FDFCFB;
}

/* 表格基础样式 */
.topic-content table,
.reply-content table,
#content-preview table,
#reply-preview table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 表头样式 - 莫兰迪色系：柔和灰蓝紫调 */
.topic-content table thead,
.reply-content table thead,
#content-preview table thead,
#reply-preview table thead {
    background: linear-gradient(135deg, #B8B5C0 0%, #A8A4B0 100%) !important;
}

.topic-content table thead tr,
.reply-content table thead tr,
#content-preview table thead tr,
#reply-preview table thead tr {
    background: transparent !important;
}

.topic-content table thead th,
.reply-content table thead th,
#content-preview table thead th,
#reply-preview table thead th {
    padding: 14px 20px 14px 28px !important;
    font-weight: 600 !important;
    color: #F8F6F3 !important;
    text-transform: none !important;
    font-size: 1.08rem !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-bottom: none !important;
    position: relative !important;
    text-align: left !important;
    background: transparent !important;
    /* 石碑刻蚀效果：高光+阴影组合 */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 -1px 1px rgba(255, 255, 255, 0.15);
}

/* 表头分隔线 - 莫兰迪柔和分隔 */
.topic-content table thead th:not(:last-child)::after,
.reply-content table thead th:not(:last-child)::after,
#content-preview table thead th:not(:last-child)::after,
#reply-preview table thead th:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(248, 246, 243, 0.25);
}

/* 表格行样式 */
.topic-content table tbody tr,
.reply-content table tbody tr,
#content-preview table tbody tr,
#reply-preview table tbody tr {
    transition: all 0.2s ease;
    background-color: #FDFCFB !important;
}

/* 斑马纹 - 莫兰迪米灰交替色 */
.topic-content table tbody tr:nth-child(even),
.reply-content table tbody tr:nth-child(even),
#content-preview table tbody tr:nth-child(even),
#reply-preview table tbody tr:nth-child(even) {
    background-color: #F7F5F2 !important;
}

/* 覆盖 Bootstrap table-striped 样式 */
.topic-content .table-striped > tbody > tr:nth-of-type(odd) > *,
.reply-content .table-striped > tbody > tr:nth-of-type(odd) > *,
#content-preview .table-striped > tbody > tr:nth-of-type(odd) > *,
#reply-preview .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
}

.topic-content .table-striped > tbody > tr:nth-of-type(even) > *,
.reply-content .table-striped > tbody > tr:nth-of-type(even) > *,
#content-preview .table-striped > tbody > tr:nth-of-type(even) > *,
#reply-preview .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
}

/* 悬停效果 - 莫兰迪暖灰 */
.topic-content table tbody tr:hover,
.reply-content table tbody tr:hover,
#content-preview table tbody tr:hover,
#reply-preview table tbody tr:hover {
    background-color: #EDE8E2 !important;
    transform: translateX(2px);
}

/* 覆盖 Bootstrap table-hover 样式 */
.topic-content .table-hover > tbody > tr:hover > *,
.reply-content .table-hover > tbody > tr:hover > *,
#content-preview .table-hover > tbody > tr:hover > *,
#reply-preview .table-hover > tbody > tr:hover > * {
    background-color: transparent !important;
}

/* 单元格样式 - 莫兰迪深灰褐文字 */
.topic-content table tbody td,
.reply-content table tbody td,
#content-preview table tbody td,
#reply-preview table tbody td {
    padding: 12px 20px 12px 28px !important;
    border: none !important;
    border-bottom: 1px solid #D9D4CE !important;
    color: #5A5652;
}

/* 最后一行无边框 */
.topic-content table tbody tr:last-child td,
.reply-content table tbody tr:last-child td,
#content-preview table tbody tr:last-child td,
#reply-preview table tbody tr:last-child td {
    border-bottom: none;
}

/* 行内代码在表格中的样式 - 莫兰迪灰绿调 */
.topic-content table code,
.reply-content table code,
#content-preview table code,
#reply-preview table code {
    background-color: rgba(156, 175, 136, 0.15);
    color: #6B7B5C;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'SF Mono', Monaco, monospace;
}

/* 链接在表格中的样式 - 莫兰迪雾霾蓝 */
.topic-content table a,
.reply-content table a,
#content-preview table a,
#reply-preview table a {
    color: #7A8B99;
    text-decoration: none;
    border-bottom: 1px dashed #7A8B99;
    transition: all 0.2s;
}

.topic-content table a:hover,
.reply-content table a:hover,
#content-preview table a:hover,
#reply-preview table a:hover {
    color: #5A6B7A;
    border-bottom-style: solid;
}

/* 粗体在表格中的样式 - 莫兰迪深褐 */
.topic-content table strong,
.reply-content table strong,
#content-preview table strong,
#reply-preview table strong {
    color: #4A4642;
    font-weight: 600;
}

/* 表格空状态 - 莫兰迪浅灰 */
.topic-content table tbody tr:only-child td:empty::before,
.reply-content table tbody tr:only-child td:empty::before,
#content-preview table tbody tr:only-child td:empty::before,
#reply-preview table tbody tr:only-child td:empty::before {
    content: '-';
    color: #B5ADA3;
    font-style: italic;
}

/* 响应式：小屏幕优化 */
@media (max-width: 768px) {
    .topic-content .table-responsive,
    .reply-content .table-responsive,
    #content-preview .table-responsive,
    #reply-preview .table-responsive {
        border-radius: 8px;
        margin: 1rem 0;
    }
    
    .topic-content table thead th,
    .reply-content table thead th,
    #content-preview table thead th,
    #reply-preview table thead th {
        padding: 10px 14px 10px 18px !important;
        font-size: 0.96rem !important;
    }
    
    .topic-content table tbody td,
    .reply-content table tbody td,
    #content-preview table tbody td,
    #reply-preview table tbody td {
        padding: 10px 14px 10px 18px !important;
        font-size: 0.9rem;
    }
}