/**
 * تنسيقات عرض المحتوى المنسق
 * تصحيح مشكلة عدم ظهور التنسيقات في المنتدى
 * الإصدار 1.1
 */

/* === تحسين محتوى الموضوع والردود === */
.topic-content-body,
.reply-content,
.post-content,
.content-body,
.editor-preview {
    font-size: 17px;
    line-height: 2;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* تنسيقات خاصة بمحتوى الموضوع */
.topic-content-body {
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* تنسيقات خاصة بمحتوى الردود */
.reply-content {
    padding: 15px 0;
}

/* === ضمان ظهور التنسيقات المضمنة inline === */

/* السماح لـ spans بأخذ تنسيقاتها من style attribute */
/* مهم: لا نضع أي قواعد تتجاوز inline styles */
.topic-content-body span[style],
.reply-content span[style],
.editor-preview span[style] {
    /* inline styles يجب أن تعمل بشكل طبيعي */
}

/* ضمان عمل أحجام الخط الصغيرة والكبيرة */
.topic-content-body span[style*="font-size"],
.reply-content span[style*="font-size"],
.editor-preview span[style*="font-size"] {
    /* لا تتجاوز inline font-size */
    line-height: 1.6;
}

/* ضمان عمل الألوان */
.topic-content-body span[style*="color"],
.reply-content span[style*="color"],
.editor-preview span[style*="color"] {
    /* لا تتجاوز inline color */
}

/* خلفية ملونة - إضافة padding فقط */
.topic-content-body span[style*="background"],
.reply-content span[style*="background"],
.editor-preview span[style*="background"] {
    padding: 2px 6px;
    border-radius: 4px;
    display: inline;
}

/* === العناوين === */
.topic-content-body h1,
.reply-content h1,
.editor-preview h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a2a6c !important;
    margin: 25px 0 15px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid #9c27b0 !important;
}

.topic-content-body h2,
.reply-content h2,
.editor-preview h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2a6c !important;
    margin: 22px 0 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e8ecf1 !important;
}

.topic-content-body h3,
.reply-content h3,
.editor-preview h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 18px 0 10px !important;
}

.topic-content-body h4,
.reply-content h4,
.editor-preview h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin: 15px 0 8px !important;
}

/* === النص العادي === */
.topic-content-body p,
.reply-content p,
.editor-preview p {
    margin: 15px 0 !important;
    line-height: 2 !important;
    text-align: justify;
}

/* === التنسيقات الأساسية === */
.topic-content-body b,
.topic-content-body strong,
.reply-content b,
.reply-content strong,
.editor-preview b,
.editor-preview strong {
    font-weight: 700 !important;
    color: #1a2a6c;
}

.topic-content-body i,
.topic-content-body em,
.reply-content i,
.reply-content em,
.editor-preview i,
.editor-preview em {
    font-style: italic !important;
}

.topic-content-body u,
.reply-content u,
.editor-preview u {
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
}

.topic-content-body s,
.topic-content-body del,
.topic-content-body strike,
.reply-content s,
.reply-content del,
.reply-content strike,
.editor-preview s,
.editor-preview del,
.editor-preview strike {
    text-decoration: line-through !important;
}

/* === المحاذاة === */
.topic-content-body [style*="text-align:right"],
.topic-content-body [style*="text-align: right"],
.reply-content [style*="text-align:right"],
.reply-content [style*="text-align: right"],
.editor-preview [style*="text-align:right"],
.editor-preview [style*="text-align: right"] {
    text-align: right !important;
    display: block;
}

.topic-content-body [style*="text-align:center"],
.topic-content-body [style*="text-align: center"],
.reply-content [style*="text-align:center"],
.reply-content [style*="text-align: center"],
.editor-preview [style*="text-align:center"],
.editor-preview [style*="text-align: center"] {
    text-align: center !important;
    display: block;
}

.topic-content-body [style*="text-align:left"],
.topic-content-body [style*="text-align: left"],
.reply-content [style*="text-align:left"],
.reply-content [style*="text-align: left"],
.editor-preview [style*="text-align:left"],
.editor-preview [style*="text-align: left"] {
    text-align: left !important;
    display: block;
}

/* === القوائم === */
.topic-content-body ul,
.topic-content-body ol,
.reply-content ul,
.reply-content ol,
.editor-preview ul,
.editor-preview ol {
    padding-right: 30px !important;
    margin: 15px 0 !important;
}

.topic-content-body li,
.reply-content li,
.editor-preview li {
    margin-bottom: 10px !important;
    line-height: 1.8 !important;
}

.topic-content-body ul {
    list-style-type: disc !important;
}

.topic-content-body ol {
    list-style-type: decimal !important;
}

/* === الجداول === */
.topic-content-body table,
.reply-content table,
.editor-preview table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    font-size: 15px !important;
    direction: rtl !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.topic-content-body table th,
.reply-content table th,
.editor-preview table th {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
    color: #fff !important;
    padding: 14px 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: none !important;
}

.topic-content-body table td,
.reply-content table td,
.editor-preview table td {
    padding: 12px 15px !important;
    border: 1px solid #e0e0e0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.topic-content-body table tr:nth-child(even),
.reply-content table tr:nth-child(even),
.editor-preview table tr:nth-child(even) {
    background: #fafafa !important;
}

.topic-content-body table tr:hover,
.reply-content table tr:hover,
.editor-preview table tr:hover {
    background: #f5f0f7 !important;
}

/* === الاقتباسات === */
.topic-content-body blockquote,
.reply-content blockquote,
.editor-preview blockquote {
    background: linear-gradient(135deg, #f8f9fa, #f0f0f0) !important;
    border-right: 5px solid #9c27b0 !important;
    border-left: none !important;
    padding: 18px 25px !important;
    margin: 20px 0 !important;
    border-radius: 0 12px 12px 0 !important;
    font-style: italic !important;
    color: #555 !important;
    position: relative !important;
}

.topic-content-body blockquote::before,
.reply-content blockquote::before,
.editor-preview blockquote::before {
    content: '"' !important;
    font-size: 60px !important;
    position: absolute !important;
    top: -10px !important;
    right: 15px !important;
    color: #9c27b0 !important;
    opacity: 0.2 !important;
    font-family: Georgia, serif !important;
}

/* === الكود === */
.topic-content-body pre,
.reply-content pre,
.editor-preview pre {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    direction: ltr !important;
    text-align: left !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 20px 0 !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3) !important;
}

.topic-content-body code,
.reply-content code,
.editor-preview code {
    background: #f5f5f5 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 0.9em !important;
    color: #e91e63 !important;
}

.topic-content-body pre code,
.reply-content pre code,
.editor-preview pre code {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* === الصور === */
.topic-content-body img,
.reply-content img,
.editor-preview img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 15px 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    display: block !important;
}

/* === الروابط === */
.topic-content-body a,
.reply-content a,
.editor-preview a {
    color: #9c27b0 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #9c27b0 !important;
    transition: all 0.3s !important;
}

.topic-content-body a:hover,
.reply-content a:hover,
.editor-preview a:hover {
    color: #7b1fa2 !important;
    border-bottom-style: solid !important;
}

/* === الفواصل === */
.topic-content-body hr,
.reply-content hr,
.editor-preview hr {
    border: none !important;
    border-top: 2px solid #e8ecf1 !important;
    margin: 30px 0 !important;
}

/* === المحتوى القابل للطي (Spoiler) === */
.topic-content-body details,
.reply-content details,
.editor-preview details {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    margin: 15px 0 !important;
    overflow: hidden !important;
}

.topic-content-body summary,
.reply-content summary,
.editor-preview summary {
    padding: 15px 20px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    background: #f0f0f0 !important;
    transition: background 0.3s !important;
}

.topic-content-body summary:hover,
.reply-content summary:hover,
.editor-preview summary:hover {
    background: #e8e8e8 !important;
}

.topic-content-body details[open] summary,
.reply-content details[open] summary,
.editor-preview details[open] summary {
    border-bottom: 1px solid #e0e0e0 !important;
}

.topic-content-body details > div,
.reply-content details > div,
.editor-preview details > div {
    padding: 20px !important;
}

/* === الفيديو المضمن === */
.topic-content-body iframe,
.reply-content iframe,
.editor-preview iframe {
    max-width: 100% !important;
    border-radius: 10px !important;
    margin: 15px 0 !important;
}

/* === المعادلات الرياضية === */
.topic-content-body [style*="font-family:serif"],
.reply-content [style*="font-family:serif"],
.editor-preview [style*="font-family:serif"] {
    font-family: 'Times New Roman', serif !important;
    font-style: italic !important;
}

/* === الرموز الفلكية === */
.topic-content-body span:not([style]),
.reply-content span:not([style]),
.editor-preview span:not([style]) {
    /* لا تغيير - للحفاظ على الرموز */
}

/* === تحسين التباعد === */
.topic-content-body > *:first-child,
.reply-content > *:first-child,
.editor-preview > *:first-child {
    margin-top: 0 !important;
}

.topic-content-body > *:last-child,
.reply-content > *:last-child,
.editor-preview > *:last-child {
    margin-bottom: 0 !important;
}

/* === تجاوب الجوال === */
@media (max-width: 768px) {
    .topic-content-body,
    .reply-content,
    .editor-preview {
        font-size: 16px !important;
        line-height: 1.9 !important;
    }
    
    .topic-content-body h1,
    .reply-content h1,
    .editor-preview h1 {
        font-size: 24px !important;
    }
    
    .topic-content-body h2,
    .reply-content h2,
    .editor-preview h2 {
        font-size: 20px !important;
    }
    
    .topic-content-body h3,
    .reply-content h3,
    .editor-preview h3 {
        font-size: 18px !important;
    }
    
    .topic-content-body table {
        font-size: 13px !important;
    }
    
    .topic-content-body table th,
    .topic-content-body table td {
        padding: 8px 10px !important;
    }
    
    .topic-content-body blockquote {
        padding: 12px 15px !important;
    }
    
    .topic-content-body blockquote::before {
        font-size: 40px !important;
    }
}

/* === تحسين منطقة الكتابة في المحرر === */
#contentInput,
.nahran-editor-wrapper textarea,
.reply-textarea,
textarea.form-control {
    font-size: 17px !important;
    line-height: 1.9 !important;
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    color: #333 !important;
}

/* === معاينة المحرر === */
.preview-pane,
.editor-preview,
#previewArea {
    font-size: 17px !important;
    line-height: 2 !important;
}