/* ========================================================= */
/* MARKDOWN CONTENT — Dùng class .md-content ở bất cứ đâu    */
/* cần render nội dung markdown (Help Center, Blog, v.v.)    */
/* ========================================================= */

/* --- TABLE --- */
.md-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--J-gray-2, #d0d7de);
    border-radius: 8px;
    overflow: hidden;
    display: table;
}

.md-content table thead tr {
    background: var(--J-bg-subtle, #f6f8fa);
}

.md-content table th {
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--J-gray-2, #d0d7de);
    font-size: 13px;
    color: var(--J-text, #1f2328);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.md-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--J-gray-1, #eaecf0);
    vertical-align: top;
    color: var(--J-text-secondary, #656d76);
}

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

.md-content table tbody tr:hover {
    background-color: var(--J-bg-subtle, #f6f8fa);
}

/* Cột đầu tiên (thường là tên/key) — in đậm, màu chính */
.md-content table td:first-child {
    font-weight: 600;
    color: var(--J-text, #1f2328);
}

/* Nhận diện strong trong cell */
.md-content table td strong {
    color: var(--J-text, #1f2328);
    font-weight: 700;
}

/* --- CODE (inline & block) --- */
.md-content code {
    background-color: var(--J-gray-1, #eff1f3);
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 0.85em;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    color: var(--J-text, #1f2328);
    border: 1px solid var(--J-gray-1, #d8dee4);
    white-space: nowrap;
}

/* Code bên trong bảng — nhỏ gọn hơn, nền nổi bật */
.md-content table code {
    font-size: 12px;
    padding: 2px 6px;
    background: var(--J-gray-1, #eef1f5);
    white-space: pre-wrap;
    word-break: break-word;
}

.md-content pre {
    background-color: var(--J-bg-subtle, #f6f8fa);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid var(--J-gray-2, #d0d7de);
}

.md-content pre code {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    font-size: 13px;
    white-space: pre;
}

/* --- BLOCKQUOTE --- */
.md-content blockquote {
    border-left: 4px solid var(--J-accent, #3b82f6);
    padding: 12px 20px;
    margin: 16px 0;
    background-color: var(--J-bg-subtle, #f6f8fa);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .md-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }
    .md-content table th,
    .md-content table td {
        padding: 10px 12px;
    }
}

/* --- CUSTOM INDENT SHORTCUT --- */
.md-content p.md-indent {
    margin-left: 2rem;
}

/* --- INLINE ICONS --- */
.md-content .inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.3em;
    height: 1.3em;
    margin: 0 4px;
    color: var(--J-accent, #3b82f6); /* Màu nổi để dễ nhận ra đó là biểu tượng */
    background: var(--J-bg-subtle, #f6f8fa);
    padding: 3px;
    border-radius: 4px;
    border: 1px solid var(--J-gray-2, #d0d7de);
}

.md-content .inline-icon svg {
    width: 100%;
    height: 100%;
}

/* --- DIFF CODE BLOCKS --- */
.md-content pre code.language-diff {
    display: block;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.md-content pre code.language-diff .diff-del {
    background-color: rgba(248, 81, 73, 0.15); /* Dark mode compatible red */
    color: #ff7b72;
    display: block;
    margin: 0 -16px;
    padding: 0 16px;
}
.md-content pre code.language-diff .diff-add {
    background-color: rgba(46, 160, 67, 0.15); /* Dark mode compatible green */
    color: #3fb950;
    display: block;
    margin: 0 -16px;
    padding: 0 16px;
}
.md-content pre code.language-diff .diff-info {
    color: #8b949e;
    display: block;
}

/* Fallback for light mode just in case */
html:not(.dark-mode) .md-content pre code.language-diff .diff-del {
    background-color: #ffebe9;
    color: #cf222e;
}
html:not(.dark-mode) .md-content pre code.language-diff .diff-add {
    background-color: #e6ffec;
    color: #1a7f37;
}
html:not(.dark-mode) .md-content pre code.language-diff .diff-info {
    color: #656d76;
}

/* ========================================================= */
/* DARK MODE OVERRIDES                                       */
/* ========================================================= */
html.dark-mode .md-content table {
    border-color: var(--J-gray-6);
}
html.dark-mode .md-content table th {
    border-color: var(--J-gray-6);
}
html.dark-mode .md-content table td {
    border-color: var(--J-gray-7);
}
html.dark-mode .md-content code {
    background-color: var(--J-code-bg);
    border-color: var(--J-glass-border);
    color: var(--J-code-text);
}
html.dark-mode .md-content table code {
    background-color: var(--J-code-bg);
}
html.dark-mode .md-content pre {
    background-color: var(--J-code-bg);
    border-color: var(--J-glass-border);
}
html.dark-mode .md-content blockquote {
    background-color: var(--J-code-bg);
}
html.dark-mode .md-content .inline-icon {
    background-color: var(--J-code-bg);
    border-color: var(--J-glass-border);
}