/**
 * GermanWords.online - ملف الأنماط الرئيسي
 * الإصدار: 2.0 (مُخصص لـ Bootstrap 5)
 *
 * هذا الملف مصمم للتخلص من المظهر الافتراضي لـ Bootstrap وتقديم هوية بصرية فريدة
 * مستوحاة من الثقافة الألمانية (أسود، أحمر، أصفر) مع دعم كامل للوضع النهاري والليلي.
 *
 * جدول المحتويات:
 * ------------------
 * 1.  استيراد الخطوط (Fonts)
 * 2.  متغيرات السمات (الوضع النهاري والليلي)
 * 3.  إعادة الضبط والأنماط العامة
 * 4.  تخصيص مكونات Bootstrap الأساسية
 * 5.  الرأس والتنقل (Header & Navbar)
 * 6.  البطاقات (Cards) - للمقالات والويدجت
 * 7.  النماذج والأزرار (Forms & Buttons)
 * 8.  صفحة المقال والاختبار (Article & Quiz)
 * 9.  مكونات أخرى (ترقيم الصفحات، النوافذ المنبثقة)
 * 10. التذييل (Footer)
 * 11. التصميم المتجاوب (Responsive Design)
 * ------------------
 */

/* --- 1. استيراد الخطوط (Fonts) --- */
/* استخدام خط حديث ونظيف مثل Inter يغير شكل الموقع بالكامل */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* --- 2. متغيرات السمات (الوضع النهاري والليلي) --- */
:root {
    /* لوحة الألوان الألمانية */
    --german-black: #212529;
    --german-red: #e74c3c;
    --german-yellow: #f1c40f;
    --off-white: #f8f9fa;

    /* متغيرات Bootstrap المخصصة للوضع النهاري */
    --bs-primary: var(--german-red);
    --bs-primary-rgb: 231, 76, 60;
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-body-bg: #ffffff;
    --bs-body-color: #343a40;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.25rem; /* حواف أقل دائرية */
    --bs-link-color: var(--german-red);
    --bs-link-hover-color: #a93226;
    --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    --card-border-left: 4px solid var(--german-yellow);
}

[data-bs-theme="dark"] {
    /* متغيرات Bootstrap المخصصة للوضع الليلي */
    --bs-body-bg: #1a1b26;
    --bs-body-color: #c0caf5;
    --bs-border-color: #414868;
    --bs-primary: #7aa2f7; /* استخدام لون أفتح للتباين */
    --bs-primary-rgb: 122, 162, 247;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #bb9af7;
    --bs-tertiary-bg: #24283b;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --card-border-left: 4px solid var(--bs-primary);
}

/* --- 3. إعادة الضبط والأنماط العامة --- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, .fw-bold {
    font-weight: 700 !important;
}

/* --- 4. تخصيص مكونات Bootstrap الأساسية --- */
/* إزالة التوهج الأزرق الافتراضي واستخدام ألوان العلامة التجارية */
.form-control:focus, .form-select:focus {
    border-color: var(--german-yellow);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.list-group-item {
    transition: background-color 0.2s ease;
}

/* --- 5. الرأس والتنقل (Header & Navbar) --- */
.navbar {
    border-bottom: 4px solid var(--german-yellow) !important;
    background-color: var(--german-black) !important;
}

.navbar-brand {
    font-weight: 700;
}

/* أيقونات الوضع النهاري/الليلي */
.icon-moon { display: block; }
.icon-sun { display: none; }
[data-bs-theme="dark"] .icon-moon { display: none; }
[data-bs-theme="dark"] .icon-sun { display: block; }

/* --- 6. البطاقات (Cards) - للمقالات والويدجت --- */
/* هذا هو الجزء الأهم للتخلص من شكل Bootstrap التقليدي */
.card {
    border: none; /* إزالة الحدود الافتراضية */
    border-left: var(--card-border-left);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

/* --- 7. النماذج والأزرار (Forms & Buttons) --- */
.btn {
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
}

.btn-primary {
    background-color: var(--german-red);
    border-color: var(--german-red);
}

[data-bs-theme="dark"] .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* --- 8. صفحة المقال والاختبار (Article & Quiz) --- */
.blog-post {
    font-size: 1.1rem;
}
.article-body p, .article-body ul {
    line-height: 1.8;
}

/* تخصيص شكل الاختبار */
#quiz .list-group-item {
    cursor: pointer;
    border-width: 1px;
    margin-bottom: 5px;
}

#quiz .list-group-item:hover {
    border-left: var(--card-border-left);
    background-color: var(--bs-tertiary-bg);
}

#quiz-results {
    background-color: var(--bs-tertiary-bg-rgb) !important;
}
/* إضافات لتمييز الإجابات في الاختبار */
.bg-success-subtle {
    border-left: 4px solid var(--bs-success) !important;
}
.bg-danger-subtle {
    border-left: 4px solid var(--bs-danger) !important;
}


/* --- 9. مكونات أخرى (ترقيم الصفحات، النوافذ المنبثقة) --- */
/* تخصيص شكل ترقيم الصفحات */
.pagination .page-item.active .page-link {
    background-color: var(--german-red);
    border-color: var(--german-red);
}
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.pagination .page-link {
    color: var(--bs-primary);
}
[data-bs-theme="dark"] .pagination .page-link {
     background-color: var(--bs-tertiary-bg);
     border-color: var(--bs-border-color);
}

/* تخصيص النافذة المنبثقة (Modal) */
.modal-content {
    border: none;
    border-top: 4px solid var(--german-yellow);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}
[data-bs-theme="dark"] .modal-content {
    border-top-color: var(--bs-primary);
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.25);
}

/* --- 10. التذييل (Footer) --- */
footer.bg-body-tertiary {
    border-top: 1px solid var(--bs-border-color);
}

/* --- 11. التصميم المتجاوب (Responsive Design) --- */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2.5rem;
    }
    .card.mb-4 .row > div {
        text-align: center;
    }
    .card.mb-4 img {
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    }
}


/**
 * GermanWords.online - Main Stylesheet
 * Version: 2.1 (Final)
 *
 * This file is designed to override Bootstrap and provide a unique identity
 * inspired by German branding, with full light and dark mode support.
 */

/* ... (All previous sections 1-15 remain the same) ... */

/* --- 16. Article Content Tables (WYSIWYG Editor) --- */
/* This styles tables created by the admin inside an article's content */

.article-body .table-responsive-wrapper {
    overflow-x: auto; /* Makes table scroll horizontally on small screens */
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--bs-border-color);
}

.article-body th,
.article-body td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: top;
}

.article-body thead th {
    font-weight: 700;
    background-color: var(--bs-tertiary-bg);
    border-bottom-width: 2px;
}

/* Zebra-striping for Light Mode */
.article-body tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Zebra-striping and hover for Dark Mode */
[data-bs-theme="dark"] .article-body tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .article-body tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* --- 17. Responsive Design --- */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2.5rem;
    }
    .card.mb-4 .row > div {
        text-align: center;
    }
    .card.mb-4 img {
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    }
}


.theme-switcher {
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    padding: 0.45rem 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-switcher .bi-sun,.bi-moon{
     font-size: 0.9rem;
}