/* assets/css/thread.css */

/* 1. الأعمدة العامة */
body {
    background-color: var(--background);
    color:            var(--text-color);
    font-family: Arial, sans-serif;
    direction: rtl;
    text-align: right;
    margin: 0;
    padding: 0;
}

/* 2. حاوية الموضوع */
.thread-container {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--panel-bg);
  box-shadow: 0 1px 1px 1px rgb(1 174 204);
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
}

/* 3. عنوان الموضوع */
.thread-title {
    color: var(--title-color);
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
}

/* 4. التغليف العام للمحتوى والردود */
.thread-content-wrapper,
.post-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background-color: var(--panel-bg);
    border-radius: 8px;
    margin-bottom: 15px;
    transition: background 0.3s;
}

/* 5. بطاقة المستخدم */
.user-info {
    width: 220px;
    text-align: center;
    background-color: var(--panel-bg);
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    border: 2px solid var(--panel-border);
    transition: background 0.3s, border-color 0.3s;
}

.user-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* 6. محتوى الموضوع والردود */
.thread-content,
.post-content {
    flex-grow: 1;
    background-color: var(--panel-bg);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    text-align: center;
    transition: background 0.3s, border-color 0.3s;
}

/* 7. الميتا (التواريخ، الأسماء) */
.thread-meta,
.post-meta {
    font-size: 14px;
    color: var(--secondary-text);
    margin-top: 10px;
}

/* 8. الأزرار العامة */
.btn {
    padding: 2px 3px;
    background-color: var(--title-color);
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 10px 5px;
    transition: background 0.3s;
}

.btn:hover {
    background-color: darken(var(--title-color), 10%);
}

/* 9. أزرار التعديل والحذف */
.edit-btn {
    background-color: var(--background);
}

.edit-btn:hover {
    background-color: var(--background);
}

.delete-btn {
    background-color: var(--background);
}

.delete-btn:hover {
    background-color: var(--background);
}

/* 10. ترقيم الصفحات */
.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    text-decoration: none;
    background-color: var(--title-color);
    color: white;
    border-radius: 5px;
    transition: background 0.3s;
}

.pagination a:hover {
    background-color: darken(var(--title-color), 10%);
}

.pagination .active {
    background-color: darken(var(--title-color), 10%);
    font-weight: bold;
}

/* 11. زر الإعجاب */
.like-btn {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.like-btn:hover {
    background-color: var(--title-color);
    color: white;
    border-color: var(--title-color);
}

.like-btn span {
    font-weight: bold;
}

/* 12. صورة الموضوع */
.thread-image {
    text-align: center;
    margin-bottom: 15px;
}

.thread-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

/* 13. حقول رفع الملفات وزر التحميل */
input[type="file"] {
    display: block;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    background-color: var(--panel-bg);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}

.download-btn {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--background);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.download-btn:hover {
    background-color: var(--background);
}

/* 14. فاصل التاريخ والمحتوى */
.date-divider,
.content-divider {
    border: none;
    border-top: 1px solid var(--panel-border);
    margin: 10px 0;
}

/* 15. الخطوط والروابط */
a {
    color: var(--title-color);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: darken(var(--title-color), 10%);
    text-decoration: underline;
}

/* 16. أزرار إضافية */
.attachment-btn {
    background-color: var(--background);
}

.attachment-btn:hover {
    background-color: var(--background);
}
/* اجعل أي صورة من مجلّد smilies صغيرة داخل محتوى الموضوع */
.thread-content img[src*="assets/smilies/"] {
  width: 4%;      /* اضبط القيمة على ما يناسبك */
  height: auto;
  vertical-align: middle;
  margin: 0 2px;    /* مسافة جانبية بسيطة */
}
.thread-content img.smiley {
  width: 4%;
  height: auto;
  vertical-align: middle;
  margin: 0 2px;
}