/* =====================================================================
   موقع مدرسة الإمام علي عليه السلام - الهرمل
   ملف التنسيقات العام (RTL / عربي)
   ===================================================================== */

:root {
    --color-primary: #0f6b4f;
    --color-primary-dark: #0a4d38;
    --color-accent: #c9a227;
    --color-bg: #f6f7f9;
    --color-card: #fafbfc;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(0,0,0,0.06);

    /* شريط داكن ثابت (الفوتر، القائمة الجانبية للوحة التحكم، الشريط
       الإعلاني المتحرك...) وتظليل خفيف من اللون الأساسي (خلفية روابط
       القائمة الرئيسية، الشرائح المُختارة...) - يُعادان تعريفهما لكل مظهر
       أدناه بحسب لونه الأساسي حتى تتماشى هذه العناصر مع المظهر المختار
       (راجع config/themes.php وtheme.php) بدل أن تبقى بلون المظهر الافتراضي
       دائماً */
    --color-bar-bg: #0a4d38;
    --color-primary-tint: rgba(15,107,79,0.09);

    /* ألوان جزيئات الخلفيات المتحركة "البيضاء" أصلاً (نجوم/فقاعات/ثلج) -
       معرَّفة كمتغيّرات هنا (بلون داكن شبه-شفاف يناسب الخلفيات الفاتحة)
       وتُعاد تعريفها بالأبيض شبه-الشفاف فقط ضمن كل مظاهر "الداكنة" أدناه،
       حتى تبقى هذه الجزيئات ظاهرة بتباين كافٍ على الخلفيتين الفاتحة
       والداكنة معاً بدل الاختفاء على المظاهر النهارية (كانت مثبَّتة سابقاً
       بالأبيض دائماً) */
    --animbg-particle-strong: rgba(31,41,55,0.75);
    --animbg-particle-mid: rgba(31,41,55,0.5);
    --animbg-particle-soft: rgba(31,41,55,0.32);
    --animbg-particle-glow: rgba(31,41,55,0.45);
    --animbg-particle-glow-soft: rgba(31,41,55,0.05);
}

* { box-sizing: border-box; }

/* تفعيل فعلي لمتغيّر --font-scale (اعدادات المستخدم -> حجم الخط) - يضبطه
   AppServiceProvider (نظير includes/header.php الأصلي) على عنصر html لكل
   صفحة بحسب تفضيل المستخدم الحالي. ملاحظة: هذا السطر غير موجود في تنسيقات
   الأصل رغم أن المتغيّر نفسه معرَّف هناك (لم يكن مُستخدَماً فعلياً في أي
   selector) - أُضيف هنا لتفعيل الميزة فعلياً بلا أي تعديل آخر على التصميم. */
html { font-size: calc(100% * var(--font-scale, 1)); }

body {
    margin: 0;
    font-family: "Tahoma", "Segoe UI", Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--color-primary-dark); }

.muted { color: var(--color-muted); font-size: 0.9em; }

/* ------------------------- الرأس والتنقل ------------------------- */
.site-header {
    background: var(--color-card);
    border-bottom: 3px solid var(--color-primary);
    box-shadow: var(--shadow);
}

.header-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
}

/* السطر العلوي: اسم/شعار المدرسة على جهة، ومعاينة كدور + اللغة + تسجيل
   الخروج على الجهة الأخرى من نفس السطر - راجع includes/header.php.
   روابط التنقّل الفعلية (الرئيسية، لوحة التحكم...) في .main-nav أسفله
   بسطر منفصل بقصد، حتى لا تختلط بعناصر التحكم هذه. */
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* عمودي عمداً (لا صف أفقي كما كان) - كي يظهر زرّ "تسجيل مدرسة أو مجموعة
   مدارس" (partials.register-school-button) مباشرة تحت مبدّل اللغة، لا بجانبه
   - راجع تعليق partials.register-school-button الكامل. لا يؤثر على أي صفحة
   لا تُدرِج ذلك الزرّ (مثال: لوحات الإدارة - لا يُعرَض فيها أصلاً لأنها بلا
   زائر مجهول إطلاقاً) لأن مبدّل اللغة وحده يبقى بمظهره الطبيعي داخل عمود من
   عنصر واحد فقط. */
.header-top-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.15rem;
    color: var(--color-primary-dark);
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 44px; width: auto; border-radius: 6px; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.main-nav a:not(.btn) {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-primary-tint);
}
.main-nav a:not(.btn):hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
/* أزرار "صفحتي الرئيسية"/"رئيسية المجموعة" (راجع partials.own-home-link) -
   فورم POST (تبديل معاينة الدور) لكنها تبدو كبقية روابط .main-nav a تماماً
   حتى لا تبرز كعنصر مختلف بلا سبب داخل نفس شريط التنقّل */
.main-nav form.nav-link-form { display: inline; }
.main-nav button.nav-link-btn {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-primary-tint);
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.main-nav button.nav-link-btn:hover {
    background: var(--color-primary);
    color: #fff;
}
.nav-user { color: var(--color-muted); font-size: 0.9rem; }

/* -------------------- مبدّل اللغة (Ar / Fr / En) -------------------- */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lang-switcher-label {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 500;
}
.lang-switcher-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
}
.lang-switcher-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* زر "اعدادات المستخدم" المصغَّر (أيقونة فقط) في رأس الصفحة العام - يظهر
   مباشرة بعد مبدّل اللغة بدل رابط نصّي كامل بين روابط التنقّل الرئيسية
   (راجع includes/header.php) */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
}
.header-icon-btn:hover { background: var(--color-primary); color: #fff; text-decoration: none; }

.lang-switcher-admin {
    margin: 10px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.lang-switcher-admin .lang-switcher-label { color: #d1d5db; }
.lang-switcher-admin .lang-switcher-select {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

/* ------------------------- الأزرار ------------------------- */
.btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}
.btn:hover { text-decoration: none; opacity: 0.92; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-success { background: var(--color-success); color: #fff; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-warning { background: #b45309; color: #fff; } /* VIS-12: تباين 5:1 مع النص الأبيض */
.btn-block { display: block; width: 100%; text-align: center; }
.btn-small { padding: 5px 10px; font-size: 0.82rem; }

/* ------------------------- تنبيهات ------------------------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin: 14px 0;
    font-size: 0.95rem;
}
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* إشعار "بدء البث" (partials.live-broadcast-notice) - عدة بانرات محتملة
   (والد بأكثر من ابن بصفوف مختلفة) فوق بعضها بمسافة موحّدة عبر gap على
   الحاوية الخارجية، لا margin منفصل بكل بانر (يتجنّب تراكم/انهيار الهوامش). */
.live-broadcast-notices { display: flex; flex-direction: column; gap: 10px; }
.live-broadcast-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

/* ------------------------- صورة المدرسة (Hero) ------------------------- */
.hero { width: 100%; overflow: hidden; background: #111; }
.hero-image { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.hero-placeholder {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-bar-bg));
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    padding: 0 20px;
}

/* ------------------------- الشريط الإعلاني المتحرك ------------------------- */
.ticker-bar {
    display: flex;
    align-items: center;
    background: var(--color-accent);
    color: #2b2200;
    overflow: hidden;
}
.ticker-label {
    background: var(--color-bar-bg);
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    white-space: nowrap;
}
.ticker-track-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}
/* .ticker-track يحوي عدة نسخ متتالية من .ticker-lap (نسخة واحدة تُبنى من
   جهة الخادم، والباقي يُستنسَخ عبر assets/js/script.js بالعدد الكافي فعلاً
   لتغطية عرض الشريط بالكامل مهما قصرت الإعلانات - راجع الشرح هناك) حتى
   يبقى الشريط مليئاً دوماً بلا أي مساحة فراغ أو وقفة عند إعادة الدورة.
   الحركة نفسها (اسم الـ@keyframes ونسبتها المئوية ومدتها) تُبنى وتُشغَّل
   بالكامل من نفس السكربت بعد التأكد من صحة كل القياسات - عمداً لا توجد
   هنا أي قيمة animation افتراضية/بديلة، حتى لا تبدأ الحركة أبداً بقيمة
   خاطئة قد "تعلَق" عليها بعض المتصفحات (راجع الشرح المفصَّل في السكربت). */
.ticker-track {
    display: flex;
    align-items: center;
    /* حاسم: بلا هذا، يأخذ الصندوق عرض الشريط الظاهر (الحاوية) فقط بدل عرض
       كل اللفّات مجتمعة (يفيض معظمها خارج الحاوية أصلاً ويُقصّ بواسطة
       overflow:hidden في .ticker-track-wrapper) - وبما أن النسبة المئوية
       في translateX تُحسَب من عرض هذا الصندوق نفسه، فبلا هذا السطر تنتقل
       الحركة مسافة أقصر بكثير من لفّة واحدة كاملة وتُعيد نفسها قبل أن
       يختفي آخر خبر فعلياً - هذا بالضبط ما كان يُنتج المشكلة المُبلَّغ عنها. */
    width: max-content;
    padding: 10px 0;
}
.ticker-lap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ticker-item {
    padding: 0 18px;
    white-space: nowrap;
    font-weight: 600;
}
/* إعلان من إدارة البرنامج (الشبكة) في شريط مدرسة - لون مميّز وشارة صغيرة */
.ticker-item.ticker-network {
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    padding: 4px 16px;
}
/* الفاصل بين كل إعلان والذي يليه (يظهر أيضاً بين آخر إعلان وأول إعلان عند
   إعادة الدورة، فيبقى الشعار ظاهراً في "منتصف" كل فراغ بين خبرين بلا أي
   استثناء لنقطة الوصل بين الدورة والتي تليها) */
.ticker-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    flex-shrink: 0;
}
.ticker-logo {
    height: 1.7em;
    width: auto;
    display: block;
    vertical-align: middle;
    border-radius: 3px;
}
.ticker-sep-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    display: inline-block;
}

/* ------------------------- الأقسام بعد تسجيل الدخول ------------------------- */
.sections-panel { margin: 28px 0; }
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.section-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text);
}
.section-card:hover { border-color: var(--color-primary); text-decoration: none; }
.section-name { font-weight: bold; color: var(--color-primary-dark); font-size: 1.05rem; }
.section-desc { font-size: 0.85rem; color: var(--color-muted); }

/* ------------------------- سلايدر الصور ------------------------- */
.slider-section { margin: 32px 0; }
.slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #000;
}
.slider-track {
    display: flex;
    transition: transform 0.5s ease;
    direction: ltr; /* توحيد منطق الانزلاق بغض النظر عن اتجاه الصفحة */
}
.slide-wrapper { min-width: 100%; position: relative; height: 420px; }
/* شكل عرض الصورة داخل مربع السلايدر - قابل للاختيار لكل صورة على حدة من
   admin/slider.php (راجع fit_mode في جدول slider_images): تغطية (قص
   الفائض) هي الوضع الافتراضي، واحتواء كامل يعرض الصورة كاملة بلا أي قص
   (مع خلفية سوداء تعبئ الفراغ الناتج)، وتمديد يمطّ الصورة لتملأ المربع
   تماماً حتى لو شوّه أبعادها الأصلية */
.slide { width: 100%; height: 100%; display: block; }
/* غير مقصورة على .slide عمداً: نفس الأصناف تُستخدَم أيضاً على معاينة
   الصورة المصغّرة في admin/slider.php (معاينة مباشرة لشكل العرض قبل حتى
   الحفظ - راجع onchange في تلك الصفحة) */
.fit-cover   { object-fit: cover; }
.fit-contain { object-fit: contain; background: #000; }
.fit-fill    { object-fit: fill; }
.slide-caption {
    position: absolute;
    bottom: 0; right: 0; left: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 10px 16px;
    font-weight: 600;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
}
.slider-prev { left: 12px; }
.slider-next { right: 12px; }
.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
    /* بلا هذا، ترث اتجاه الصفحة (rtl) فتُعرَض النقاط بترتيب معكوس عن
       ترتيبها الفعلي (النقطة الأولى تظهر يميناً بدل يساراً) - بينما
       .slider-track وأزرار prev/next ثابتة على منطق ltr (السابق يساراً
       والتالي يميناً). هذا كان يجعل تنقّل النقطة النشطة يبدو بالاتجاه
       المعاكس لاتجاه حركة الشرائح وزرّي التالي/السابق */
    direction: ltr;
}
.slider-dots .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    border: none;
}
.slider-dots .dot.active { background: #fff; }

/* ------------------------- التواصل ------------------------- */
.contact-section { margin: 32px 0; }
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    background: var(--color-card);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.contact-item { font-size: 0.95rem; }

/* ------------------------- الخريطة ------------------------- */
.map-section { margin: 32px 0 48px; }
.map-link-wrapper {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 40%);
    color: #fff;
    font-weight: 600;
    padding: 14px;
    text-align: center;
}
.map-link-wrapper:hover { text-decoration: none; }
/* تسمية اسم المدرسة فوق إشارة الموقع - راجع build_school_map_urls() في
   includes/functions.php لتوضيح سبب وجودها (غوغل لا يعرض تسمية أصلية لإشارة
   مبنية من إحداثيات فقط، فنعرض هذه التسمية من تصميمنا بدلاً منها). موضعها
   تقديري: مركز الخريطة أفقياً ورأسياً هو المكان الذي يضع غوغل الإشارة فيه
   عادةً عند الاستعلام بإحداثية واحدة بلا أي تفاعل (تصغير/تكبير/سحب) على
   الخريطة، والإزاحة للأعلى (translate) لرفعها فوق رأس الإشارة بدل تغطيتها */
.map-name-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-100% - 40px));
    max-width: 85%;
    background: none;
    color: #d32f2f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    /* بلا خلفية أو إطار (بطلب المستخدم) لتنسجم مع الخريطة - هالة بيضاء خفيفة
       حول النص فقط لضمان وضوحه فوق أي جزء من الخريطة (شارع/منطقة خضراء/نهر...) */
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff;
    pointer-events: none;
    z-index: 2;
}

/* ------------------------- الفوتر ------------------------- */
.site-footer {
    background: var(--color-bar-bg);
    color: #e5e7eb;
    text-align: center;
    padding: 18px 0;
    margin-top: 40px;
    font-size: 0.9rem;
}
.site-footer a { color: #fff; }

/* ------------------------- نماذج (تسجيل الدخول/التسجيل) ------------------------- */
.form-page {
    display: flex;
    justify-content: center;
    padding: 40px 16px 60px;
}
.form-card {
    background: var(--color-card);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
}
.form-card-wide { max-width: 560px; }
.form-hint { font-size: 0.88rem; color: var(--color-muted); margin-bottom: 16px; }
.form-footer-link { text-align: center; margin-top: 16px; font-size: 0.9rem; }

form label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 0.92rem; }
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form input[type="file"],
form select,
form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}
form textarea { resize: vertical; }
.conditional-field { display: none; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 10px 0; }
.checkbox-row input { width: auto; }

.inline-form { display: flex; gap: 8px; align-items: center; }
/* VIS-5: قائمة اختيار داخل خلية جدول أو نموذج سطري لا تنضغط حتى لا يُقرأ محتواها
   (حالة الحضور، الصلة)؛ غلاف .table-responsive يمرّر الجدول أفقياً بدل ذلك */
td select, .inline-form select { min-width: 7.5rem; }

.form-row { margin-bottom: 4px; }
.form-row > label { display: block; font-weight: 600; margin-bottom: 6px; }
.radio-group { display: flex; flex-direction: column; gap: 4px; }

/* الحقول الثلاثة (عربي/فرنسي/إنكليزي) لنص إعلان الشريط الإعلاني، وزر
   "ترجمة" الذي يعبّئ الفرنسي والإنكليزي تلقائياً من العربي - راجع
   admin/announcements.php وadmin/translate_announcement.php */
.ann-lang-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ann-lang-field > label { font-size: 0.85rem; margin-bottom: 4px; }
.ann-actions-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ann-edit-form { min-width: 260px; }

/* ------------------- لائحة جمهور البث المباشر (ديناميكية) ------------------- */
.lb-target-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
    padding: 12px; margin-bottom: 10px; background: #f7f9fa;
    border: 1px solid var(--color-border); border-radius: 8px;
}
.lb-target-row select { width: auto; min-width: 180px; }
.lb-target-row .lb-target-value { flex: 1; min-width: 220px; position: relative; }
.lb-target-row .lb-remove-btn { margin-right: auto; }
.lb-user-search-box { position: relative; }
.lb-user-search-results {
    position: absolute; z-index: 20; top: 100%; right: 0; left: 0;
    background: #fff; border: 1px solid var(--color-border); border-radius: 8px;
    max-height: 220px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.lb-user-search-results .lb-user-option {
    padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
}
.lb-user-search-results .lb-user-option:hover { background: var(--color-primary); color: #fff; }
.lb-user-search-results .lb-user-option .muted { font-size: 0.8rem; }
.lb-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary-tint); color: var(--color-primary-dark);
    padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
}
.lb-chip button {
    border: none; background: none; color: inherit; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0;
}

/* ------------------------- لوحة التحكم ------------------------- */
.admin-body { background: #eef1f4; }
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 240px;
    background: var(--color-bar-bg);
    color: #fff;
    /* بلا حشوة علوية هنا عمداً (فقط سفلية) - أي حشوة علوية على القائمة
       الجانبية نفسها تبقى كفراغ ثابت لا يُغطّى بالعنصر المثبَّت (.admin-brand)
       أدناه، فتظهر منها الروابط الأخرى وهي تتحرك تحته عند التمرير؛ الحشوة
       العلوية المطلوبة بصرياً منقولة إلى .admin-brand a نفسها بدل ذلك، فتبقى
       جزءاً من العنصر الثابت المُغطّى بخلفيته دائماً */
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* القائمة الجانبية تبقى ثابتة في الشاشة ولا تتحرك مع تمرير محتوى الصفحة،
       وتحصل على تمرير داخلي خاص بها إن كانت روابطها أطول من ارتفاع الشاشة */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}
.admin-brand {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 10px;
    /* يبقى ظاهراً دائماً في أعلى القائمة الجانبية حتى عند تمرير باقي الروابط
       صعوداً أو نزولاً - القائمة الجانبية (.admin-sidebar) هي التي تحوي
       التمرير الداخلي (overflow-y: auto أعلى)، فيثبّته sticky بالنسبة لها */
    position: sticky;
    top: 0;
    background: var(--color-bar-bg);
    z-index: 2;
}
.admin-brand a {
    display: block;
    color: #d1d5db;
    padding: 20px 20px 12px;
    font-weight: 500;
    border-inline-start: 3px solid transparent;
}
.admin-brand a:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: #fff; }
.admin-nav { display: flex; flex-direction: column; flex: 1; }
.admin-nav a {
    color: #d1d5db;
    padding: 12px 20px;
    font-weight: 500;
    border-inline-start: 3px solid transparent;
}
.admin-nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: #fff; }
.admin-nav a.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-inline-start-color: var(--color-accent);
}

/* زر "اعدادات بداية العام" (قائمة فرعية قابلة للطي في القائمة الجانبية،
   راجع admin/includes/header.php) - سهم الفتح/الطي بلون مختلف (لون التمييز
   الأساسي للمظهر) عن نص الزر نفسه حتى يبقى مميَّزاً كعنصر تحكّم واضح */
.admin-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    border-inline-start: 3px solid transparent;
    color: #d1d5db;
    padding: 12px 20px;
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    text-align: inherit;
    cursor: pointer;
}
.admin-nav-group-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-group-toggle.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-inline-start-color: var(--color-accent);
}
.admin-nav-group-arrow {
    color: var(--color-accent);
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
    margin-inline-start: 8px;
    transition: transform 0.2s ease;
}
.admin-nav-group-toggle[aria-expanded="true"] .admin-nav-group-arrow { transform: rotate(180deg); }

/* :not([hidden]) هنا ضروري - وإلا فإن display:flex بنفس عنصر التصنيف
   (.admin-nav-group) يتساوى في التخصيص (specificity) مع قاعدة المتصفح
   الداخلية `[hidden] { display: none }` فيغلبها بترتيب ورودها، فتبقى
   القائمة الفرعية ظاهرة دائماً بصرياً رغم HTML attribute "hidden"
   (هذا ما كان يمنع ظهورها واختفاءها فعلياً عند الضغط على الزر) */
.admin-nav-group:not([hidden]) { display: flex; flex-direction: column; background: rgba(0,0,0,0.14); }
.admin-nav-group a {
    color: #d1d5db;
    padding: 10px 20px;
    padding-inline-start: 36px;
    font-weight: 500;
    font-size: 0.9rem;
    border-inline-start: 3px solid transparent;
}
.admin-nav-group a:hover { background: rgba(255,255,255,0.08); text-decoration: none; color: #fff; }
.admin-nav-group a.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-inline-start-color: var(--color-accent);
}

.admin-user-box {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.85rem;
    color: #d1d5db;
}
.admin-user-box a { color: var(--color-accent); }
/* VIS-12: اسم الدور على خلفية القائمة الداكنة (كان رمادياً بتباين 2:1) */
.admin-user-box .muted { color: rgba(255,255,255,0.8); }
.admin-content { flex: 1; min-width: 0; padding: 28px 32px; max-width: 1100px; }

.admin-card {
    background: var(--color-card);
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    text-align: center;
}
.stat-card.stat-warning { border-top: 4px solid var(--color-warning); }
.stat-value { font-size: 1.8rem; font-weight: bold; color: var(--color-primary-dark); }
.stat-label { color: var(--color-muted); font-size: 0.85rem; margin-top: 4px; }
.stat-small .stat-value { font-size: 1.3rem; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: start;
    font-size: 0.9rem;
}
.admin-table th { background: #f3f4f6; font-weight: 700; }
.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- مولّد هيكل البرنامج الدراسي (admin/schedule.php) ---------------- */
.schedule-gen-table th, .schedule-gen-table td { text-align: center; }
.schedule-gen-cell input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.schedule-gen-cell input[type="number"] { width: 4.5em; text-align: center; }
.break-after-row { display: inline-flex; align-items: center; gap: 8px; margin: 6px 10px 6px 0; }
.break-after-row input[type="number"] { width: 4.5em; }
#applyTargetClassWrap, #applyTargetStageWrap { margin-top: 6px; }
.schedule-gen-confirm-box p { margin-top: 0; }
.schedule-gen-confirm-box .btn { margin-inline-end: 8px; }

/* خلية "الحصة" الثابتة (رقم الحصة + وقتها) في جدول برنامج كل يوم - غير
   قابلة للتعديل من هنا إطلاقاً (راجع الشرح في admin/schedule.php) فهي عرض
   فقط، بخلاف خلية المادة/الأستاذ المجاورة لها التي تبقى نموذجاً قابلاً للحفظ */
.schedule-period-cell { white-space: nowrap; }
.schedule-period-cell .muted { font-size: 0.8rem; margin-top: 2px; }

/* تنبيه تعارض وقت الأستاذ (admin/schedule.php) - نافذة أمام الصفحة
   (overlay ثابت الموضع يغطي الشاشة كاملة، فوق كل محتوى الصفحة بغضّ النظر
   عن موضع تمريرها) بدل صندوق ضمن تسلسل الصفحة العادي، حتى تكون الرسالة
   مرئية فوراً عند ظهورها بلا حاجة لتمرير الصفحة للوصول إليها */
.schedule-row-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 999;
}
.schedule-row-confirm-box {
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
}
.schedule-row-confirm-box p { margin-top: 0; }
.schedule-row-confirm-box .btn { margin-inline-end: 8px; }

/* عند وجود أكثر من تعارض وقت أستاذ واحد دفعة واحدة (حفظ يوم/أسبوع كامل)،
   تُعرض كل حالة تعارض كعنصر مستقل ضمن نافذة .schedule-row-confirm-box -
   فاصل ومسافة بينها حتى لا تلتصق ببعضها */
.schedule-conflict-item {
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}
.schedule-conflict-item:first-of-type { border-top: none; padding-top: 0; }
.schedule-conflict-item p { margin: 0 0 8px; }
.schedule-conflict-merge-all { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* زر "حفظ تعديلات اليوم" أسفل جدول كل يوم، وقسم "حفظ تعديلات الأسبوع" أسفل
   كل جداول الأيام (admin/schedule.php) */
.schedule-save-day-btn { margin-top: 12px; }
.schedule-save-week-section { text-align: center; }
.btn-large { padding: 13px 32px; font-size: 1.05rem; }

/* نموذج "مسح" الصغير المستقل لكل حصة (يحمل فقط حقولاً مخفية، ويُستدعى من
   زر داخل جدول اليوم عبر form="..." لأنه لا يمكن تعشيش نموذج ضمن نموذج
   الحفظ الكبير) - لا محتوى مرئياً له فلا حاجة لأي مساحة ضمن تسلسل الصفحة */
.schedule-clear-form { display: none; }

/* صف "فرصة" ضمن جدول الحصص الأسبوعي/اليومي (admin/schedule.php،
   schedule-view.blade.php، agenda.blade.php) - يعيد استخدام نفس لوحة ألوان
   .badge-pending أدناه بدل اختراع لون جديد */
.schedule-break-row { background: #fef3c7; color: #92400e; font-weight: 600; text-align: center; }

/* ---------------- ربط مادة بالصفوف: تلميح الحد الأقصى للحصص (admin/subjects.php) ---------------- */
.schedule-periods-hint { font-size: 0.75rem; margin-top: 3px; max-width: 140px; }

/* ---------------- أسهم ترتيب المواد الدراسية (admin/subjects.php) ---------------- */
.subject-reorder-cell { flex-direction: column; align-items: center; gap: 4px; }
.subject-reorder-cell .btn[disabled] { opacity: 0.35; cursor: default; }

.badge { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-suspended { background: #e5e7eb; color: #374151; }

/* كلمة السر الأولية النصية الظاهرة في لائحة "الحسابات غير المستلمة بعد"
   (admin/create_account.php) - خط أحادي المسافة واتجاه ثابت من اليسار
   لليمين (كلمات السر غالباً لاتينية بالكامل) حتى تُقرأ بوضوح لتُسلَّم
   لصاحب الحساب */
.pwd-code {
    direction: ltr;
    unicode-bidi: embed;
    font-family: 'Courier New', Consolas, monospace;
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.filter-bar { display: flex; gap: 10px; margin-bottom: 18px; }
.filter-bar select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border); }

.two-col-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { padding: 8px 10px; border-radius: 8px; }
.simple-list li.active { background: #ecfdf5; }

.slider-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.slider-admin-item { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
/* شكل العرض (object-fit) يأتي من صنف .fit-cover/.fit-contain/.fit-fill
   المُطبَّق على الصورة نفسها بحسب fit_mode المحفوظ - وليس من هنا، حتى تُطابق
   هذه المعاينة المصغّرة تماماً ما سيظهر في سلايدر الصفحة الرئيسية */
.slider-admin-item img { width: 100%; height: 130px; display: block; }
.slider-admin-meta { padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.slider-admin-item .actions-cell { padding: 0 10px 10px; }
/* .class-edit-form عريض بطبيعته (min-width: 320px) ليناسب خلايا الجداول
   الواسعة (الصفوف، حصص البرنامج) - داخل بطاقة السلايدر الضيّقة (220-300px)
   هذا العرض المفروض كان يتجاوز حدود البطاقة (overflow: hidden) فيُخفي زر
   "حفظ" تماماً؛ هنا نُلغي العرض الأدنى المفروض ليتّسع النموذج مع البطاقة
   نفسها ويلتف (wrap) بشكل طبيعي */
.slider-admin-item .class-edit-form { min-width: 0; width: 100%; }
/* خانة "مدة العرض" لا تحتاج أكثر من رقمين، فتصغيرها يوفّر مساحة لزر الحفظ */
.class-edit-form input.slider-duration-input { width: 6em; flex: 0 0 6em; min-width: 0; text-align: center; }

.current-image-preview { margin-bottom: 8px; }
.current-image-preview img { max-width: 260px; max-height: 140px; border-radius: 8px; border: 1px solid var(--color-border); }
.current-image-preview.small img { max-width: 100px; max-height: 100px; }

/* جدول قابل للتمرير أفقياً على الشاشات الصغيرة بدل كسر التخطيط */
.table-responsive { overflow-x: auto; }

/* نموذج تعديل مضغوط داخل خلية جدول واحدة (الصفوف الدراسية، حصص البرنامج) */
.class-edit-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 320px; }
.class-edit-form label { width: auto; margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.class-edit-form input, .class-edit-form select { width: auto; flex: 1 1 120px; min-width: 90px; padding: 6px 8px; }
.class-edit-form button { flex: 0 0 auto; }

/* ------------------------- استجابة الشاشات الصغيرة (هاتف) ------------------------- */
@media (max-width: 768px) {
    .admin-layout { flex-direction: column; }

    /* على الهاتف: تتحول القائمة الجانبية إلى شريط علوي أفقي قابل للتمرير
       بدل قائمة طويلة عمودية، حتى يصل المستخدم إلى المحتوى بسرعة دون تمرير طويل */
    /* على الهاتف تعود القائمة إلى شريط علوي عادي يتحرك مع الصفحة، لا قائمة ثابتة الارتفاع */
    .admin-sidebar { width: 100%; padding: 10px 0; position: static; height: auto; overflow-y: visible; }
    /* التثبيت (sticky) في الأعلى خاص بحالة القائمة الجانبية الطويلة القابلة
       للتمرير على الشاشات الكبيرة فقط - على الهاتف الشريط أفقي ولا حاجة له */
    .admin-brand { position: static; padding: 0 14px 8px; margin-bottom: 8px; }
    .admin-brand a { padding: 8px 0; }
    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px 6px;
        gap: 4px;
    }
    .admin-nav a {
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        border-inline-start: none;
        background: rgba(255,255,255,0.08);
    }
    .admin-nav a.active {
        background: var(--color-accent);
        color: var(--color-bar-bg);
        font-weight: 700;
    }
    /* على الهاتف: زر "اعدادات بداية العام" وعناصر قائمته الفرعية تأخذ نفس
       شكل الحبّة (pill) لباقي روابط الشريط الأفقي بدل الشكل العمودي المطوي
       المخصَّص للقائمة الجانبية الطويلة على الشاشات الكبيرة */
    .admin-nav-group-toggle {
        width: auto;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        border-inline-start: none;
        background: rgba(255,255,255,0.08);
    }
    .admin-nav-group-toggle.active {
        background: var(--color-accent);
        color: var(--color-bar-bg);
        font-weight: 700;
    }
    /* عندما يصبح الزر نفسه بلون التمييز (--color-accent) في حالته النشطة على
       الهاتف، يتحوّل السهم إلى لون خلفية القائمة الجانبية الداكن (بدل لون
       التمييز نفسه، فيختلط بخلفية الزر ويصبح غير مرئي) - يبقى بذلك مختلفاً
       عن لون نص الزر في كل الحالات */
    .admin-nav-group-toggle.active .admin-nav-group-arrow { color: var(--color-bar-bg); }
    /* الحاوية الملتفّة حول الزر وقائمته الفرعية معاً (admin/includes/header.php) -
       display:inline-flex هنا (بدل block الافتراضي) يجعل الزر بداخلها يأخذ حجم
       محتواه (حبّة/pill) بدل الامتداد لعرض 100% كما يحدث لعنصر block عادي داخل
       حاوية بعرض تلقائي؛ position:relative يجعلها نقطة الإسناد لموضع القائمة
       الفرعية العائمة (position:fixed تُحسَب فعلياً بجافاسكربت في script.js
       بالاعتماد على موضع الزر، فتفتح دوماً تحت زرها الأم مباشرة بدل أن تظهر
       إلى جانبه في الشريط الأفقي، ودون أن تُقاس ارتفاعاتها ضمن الشريط فتُكبِّر
       بقية الأزرار المجاورة معها - كانت هذه هي المشكلتان الأصليتان) */
    .admin-nav-group-wrap {
        display: inline-flex;
        position: relative;
    }
    /* :not([hidden]) بنفس مقدار التخصيص (specificity) الذي تشرحه الملاحظة
       أعلاه في القسم غير الخاص بالهاتف - وإلا فإن flex-direction: column من
       تلك القاعدة الأساسية (نفس التخصيص لكنها لا تقع ضمن media query) تبقى
       غالبة على row هنا. الإضافة .admin-nav-group-wrap ترفع التخصيص هنا فوق
       تلك القاعدة (0,3,0 > 0,2,0) فتُطبَّق قواعد الهاتف فعلياً */
    .admin-nav-group-wrap .admin-nav-group:not([hidden]) {
        display: flex;
        position: fixed;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: min(80vw, 320px);
        gap: 4px;
        margin-top: 4px;
        padding: 6px;
        border-radius: 12px;
        background: var(--color-bar-bg);
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        z-index: 40;
    }
    .admin-nav-group a {
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        border-inline-start: none;
        background: rgba(255,255,255,0.1);
    }
    .admin-nav-group a.active {
        background: var(--color-accent);
        color: var(--color-bar-bg);
        font-weight: 700;
    }
    .admin-user-box {
        padding: 10px 14px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        border-top: none;
    }

    .admin-content { padding: 16px; }
    .two-col-layout { grid-template-columns: 1fr; }
    /* VIS-4: قائمة الموقع على الهاتف شريط أفقي واحد قابل للتمرير (كقائمة لوحة
       التحكم) بدل حبوب ملتفّة تشغل نصف الشاشة الأولى */
    .site-header .main-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }
    .site-header .main-nav > * { flex-shrink: 0; }
    .site-header .main-nav a:not(.btn), .site-header .main-nav .nav-user { white-space: nowrap; }
    /* لوحة الإشعارات تخرج من الشريط القابل للتمرير (يُحدَّد ارتفاعها بالسكربت) */
    .site-header .notif-panel { position: fixed; inset-inline: 8px; width: auto; }
    .header-top-row { flex-direction: column; align-items: flex-start; }

    /* نماذج التعديل المضغوطة (الصفوف، حصص البرنامج) تأخذ العرض الكامل على الهاتف */
    .class-edit-form { min-width: 0; width: 100%; }
    .class-edit-form input, .class-edit-form select { flex: 1 1 100%; }

    .admin-table th, .admin-table td { padding: 8px; font-size: 0.88rem; }

    /* ارتفاع أصغر للسلايدر على الهاتف حتى لا يأخذ مساحة كبيرة من الشاشة */
    .slide-wrapper { height: 220px; }
}

/* شاشات صغيرة جداً */
@media (max-width: 400px) {
    .admin-content { padding: 12px; }
}

/* ------------------------- اعدادات المستخدم (قائمة رئيسية) ------------------------- */
.small-note { color: var(--color-muted); font-size: 0.9rem; margin: -6px 0 20px; }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.menu-item {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--color-text);
}
.menu-item:hover { border-color: var(--color-primary); text-decoration: none; }
.menu-item .icon { font-size: 1.8rem; line-height: 1; }
.menu-item .title { font-weight: 600; color: var(--color-primary-dark); }

/* ------------------------- اعدادات المستخدم -> حجم الخط ------------------------- */
.fontsize-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}
.letter-a { font-weight: bold; color: var(--color-muted); flex-shrink: 0; }
.letter-a.small { font-size: 0.9rem; }
.letter-a.large { font-size: 1.8rem; }
.fontsize-track {
    position: relative;
    flex: 1;
    height: 32px;
    cursor: pointer;
    touch-action: none;
}
.fontsize-track .line {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 4px;
    margin-top: -2px;
    background: var(--color-border);
    border-radius: 999px;
}
.fontsize-track .thumb {
    position: absolute;
    top: 50%;
    right: 0%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-right: -13px;
    background: var(--color-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: grab;
}
.fontsize-preview {
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    text-align: center;
}
.fontsize-preview .label { font-weight: 600; color: var(--color-primary-dark); margin-bottom: 6px; }
.fontsize-preview .pct { color: var(--color-muted); font-size: 0.9rem; }

/* ------------------------- اعدادات المستخدم -> المظهر ------------------------- */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.theme-option {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.theme-option:hover { border-color: var(--color-primary); }
.theme-option.selected { border-color: var(--color-primary); background: #f0fdf4; }
.theme-swatch { display: flex; gap: 4px; }
.theme-swatch span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}
.theme-name { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.theme-check { color: var(--color-primary); font-weight: 700; font-size: 0.82rem; min-height: 1.2em; }

/* ------------------------- اعدادات المستخدم -> المظهر -> خلفية متحركة ------------------------- */
/* شبكة الاختيار (نفس فكرة .theme-grid لكن قابلة لتحديد أكثر من عنصر معاً،
   ولكل عنصر أيضاً خطّا تحكّم (sliders) لسرعته/حجمه - راجع .animbg-sliders) */
.animbg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.animbg-option {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.animbg-option:hover { border-color: var(--color-primary); }
.animbg-option.selected { border-color: var(--color-primary); background: var(--color-primary-tint); }
.animbg-main { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.animbg-icon { font-size: 1.7rem; line-height: 1; }
.animbg-name { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.animbg-desc { color: var(--color-muted); font-size: 0.78rem; line-height: 1.5; }
.animbg-check { color: var(--color-primary); font-weight: 700; font-size: 0.8rem; min-height: 1.2em; }
.animbg-option:not(.selected) .animbg-check { color: var(--color-muted); font-weight: 600; }

/* خطّا التحكّم بسرعة/حجم كل خلفية - كل خط مقياس (input[type=range]) بمقبض
   دائري ينزلق يميناً وشمالاً؛ النقر/السحب هنا لا يبدّل تفعيل الخلفية
   (راجع e.target.closest('.animbg-sliders') في theme.php) */
.animbg-sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    cursor: default;
}
/* النص (تسمية الخط + قيمته الحالية) في سطر مستقل فوق خط الانزلاق نفسه
   بدل جانبه، حتى يبقى خط الانزلاق كاملاً بعرض المربع بلا أي تضييق بسبب
   نص بجانبه */
.animbg-slider-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--color-muted); cursor: default; }
.animbg-slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.animbg-slider-row .animbg-slider-label { flex: 0 0 auto; }
.animbg-slider-row input[type="range"] { width: 100%; display: block; accent-color: var(--color-primary); cursor: pointer; }
.animbg-slider-row .animbg-slider-val { flex: 0 0 auto; min-width: 34px; text-align: left; font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }

/* طبقات الخلفية المتحركة الفعلية - راجع render_animated_background_layers()
   في includes/functions.php. ثابتة بارتفاع كل الشاشة، خلف كل محتوى الصفحة
   دوماً (z-index سالب - انظر الشرح في تلك الدالة)، وبلا أي تفاعل بها.
   --spd و--sz (معامِلا السرعة والحجم، 1 = 100%) يُمرَّران عبر السمة style
   لكل طبقة (أو يُطبَّقان مسبقاً عند توليد كل جزيء لطبقات الفقاعات/الثلج) */
#animBgLayers { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.anim-bg { position: absolute; inset: 0; }

.anim-bg-stars {
    background-image:
        radial-gradient(var(--animbg-particle-strong) calc(1px * var(--sz, 1)), transparent calc(1.5px * var(--sz, 1))),
        radial-gradient(var(--animbg-particle-mid) calc(1px * var(--sz, 1)), transparent calc(1.5px * var(--sz, 1))),
        radial-gradient(var(--animbg-particle-soft) calc(1px * var(--sz, 1)), transparent calc(1.5px * var(--sz, 1)));
    background-size: 220px 220px, 160px 160px, 100px 100px;
    background-position: 0 0, 40px 60px, 90px 20px;
    opacity: calc(0.5 * var(--op, 1));
    animation: animbg-stars-drift calc(130s / var(--spd, 1)) linear infinite;
}
@keyframes animbg-stars-drift {
    from { background-position: 0 0, 40px 60px, 90px 20px; }
    to   { background-position: 220px 220px, -120px 100px, -80px 140px; }
}

.anim-bg-bubbles span, .anim-bg-snow span {
    position: absolute;
    left: var(--l);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    opacity: var(--o);
}
.anim-bg-bubbles span {
    bottom: -60px;
    background: radial-gradient(circle at 30% 30%, var(--animbg-particle-glow), var(--animbg-particle-glow-soft) 70%);
    border: 1px solid var(--animbg-particle-soft);
    animation: animbg-bubble-rise var(--d) linear infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-bubble-rise {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-55vh) translateX(12px); }
    100% { transform: translateY(-115vh) translateX(-8px); opacity: 0; }
}
.anim-bg-snow span {
    top: -20px;
    background: var(--animbg-particle-strong);
    animation: animbg-snow-fall var(--d) linear infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-snow-fall {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(18px, 55vh) rotate(180deg); }
    100% { transform: translate(-14px, 110vh) rotate(360deg); }
}

.anim-bg-waves { top: auto; height: calc(26vh * var(--sz, 1)); min-height: calc(140px * var(--sz, 1)); }
.anim-bg-waves svg { position: absolute; bottom: 0; right: 0; width: 200%; height: 100%; }
.anim-bg-waves .wave-back  { fill: var(--color-primary); opacity: calc(0.16 * var(--op, 1)); animation: animbg-wave-move calc(22s / var(--spd, 1)) linear infinite; }
.anim-bg-waves .wave-front { fill: var(--color-primary); opacity: calc(0.26 * var(--op, 1)); animation: animbg-wave-move calc(14s / var(--spd, 1)) linear infinite reverse; }
@keyframes animbg-wave-move {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

.anim-bg-gradient {
    background:
        radial-gradient(circle at 20% 20%, var(--color-primary) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, var(--color-accent) 0%, transparent 45%);
    background-size: calc(160% * var(--sz, 1)) calc(160% * var(--sz, 1));
    opacity: calc(0.12 * var(--op, 1));
    animation: animbg-gradient-shift calc(26s / var(--spd, 1)) ease-in-out infinite alternate;
}
@keyframes animbg-gradient-shift {
    from { background-position: 0% 0%, 100% 100%; }
    to   { background-position: 30% 40%, 70% 60%; }
}

/* بالونات عائمة - جزيئات ملوَّنة (--bc، راجع $balloonColors في
   render_animated_background_layers()) ترتفع من أسفل الشاشة، بخيط رفيع
   أسفل كل بالون (::after) */
.anim-bg-balloons span {
    position: absolute;
    left: var(--l);
    bottom: -90px;
    width: var(--s);
    height: calc(var(--s) * 1.2);
    background: var(--bc);
    border-radius: 50% 50% 45% 45%;
    opacity: var(--o);
    animation: animbg-balloon-rise var(--d) linear infinite;
    animation-delay: var(--delay);
}
.anim-bg-balloons span::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: 1px;
    height: 18px;
    background: var(--animbg-particle-soft);
}
@keyframes animbg-balloon-rise {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-55vh) translateX(-10px); }
    100% { transform: translateY(-115vh) translateX(10px); opacity: 0; }
}

/* مطر خفيف - خطوط رقيقة (تدرّج لوني بلا لون ثابت مباشر لتبقى ملائمة لكل
   مظهر) تتساقط بسرعة أكبر بكثير من باقي الجزيئات (راجع delayBase/durMin
   الأصغر في render_animated_background_layers() وbuildParticlesHtml) */
.anim-bg-rain span {
    position: absolute;
    left: var(--l);
    top: -60px;
    width: 1.5px;
    height: var(--s);
    background: linear-gradient(to bottom, transparent, var(--animbg-particle-mid));
    opacity: var(--o);
    animation: animbg-rain-fall var(--d) linear infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-rain-fall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(130vh); }
}

/* أشكال هندسية عائمة - مربعات (الافتراضي)/دوائر (shape-circle)/مثلثات
   (shape-triangle) بألوان المظهر الحالي (--shape-color: var(--color-primary)
   أو var(--color-accent))، تطفو للأعلى مع دوران بطيء */
.anim-bg-shapes span {
    position: absolute;
    left: var(--l);
    bottom: -40px;
    width: var(--s);
    height: var(--s);
    background: var(--shape-color);
    opacity: var(--o);
    animation: animbg-shape-float var(--d) linear infinite;
    animation-delay: var(--delay);
}
.anim-bg-shapes span.shape-circle { border-radius: 50%; }
.anim-bg-shapes span.shape-triangle {
    background: transparent;
    width: 0;
    height: 0;
    border-left: calc(var(--s) / 2) solid transparent;
    border-right: calc(var(--s) / 2) solid transparent;
    border-bottom: var(--s) solid var(--shape-color);
}
@keyframes animbg-shape-float {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-55vh) rotate(180deg); }
    100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}

/* حلقات نابضة - حلقات ثابتة المكان (مواضعها left/top محدَّدة مباشرة عبر
   السمة style في render_animated_background_layers()/buildLayerHtml) تتوسّع
   وتخفت بشكل متكرّر (تأثير نبض) */
.anim-bg-rings span {
    position: absolute;
    width: calc(60px * var(--sz, 1));
    height: calc(60px * var(--sz, 1));
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    animation: animbg-ring-pulse calc(4s / var(--spd, 1)) ease-out infinite;
}
@keyframes animbg-ring-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: calc(0.55 * var(--op, 1)); }
    70%  { opacity: calc(0.12 * var(--op, 1)); }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* توهّج نابض - دائرة توهّج واحدة بوسط الشاشة (بألوان المظهر) "تتنفّس"
   عبر تكبير/تصغير حجم التدرّج اللوني بدل تحريك موقعه */
.anim-bg-glow {
    background: radial-gradient(circle at 50% 50%, var(--color-primary) 0%, transparent 60%);
    background-repeat: no-repeat;
    opacity: calc(0.18 * var(--op, 1));
    animation: animbg-glow-breathe calc(6s / var(--spd, 1)) ease-in-out infinite alternate;
}
@keyframes animbg-glow-breathe {
    from { background-size: calc(60% * var(--sz, 1)) calc(60% * var(--sz, 1)); }
    to   { background-size: calc(110% * var(--sz, 1)) calc(110% * var(--sz, 1)); }
}

/* يراعات متطايرة - نقاط بلون المظهر (--color-accent، متباين تلقائياً على
   أي مظهر) تتجول في مكانها (--l و--t عشوائيّان معاً، بخلاف باقي الجزيئات
   التي تتحرك عمودياً فقط) مع تناوب الخفوت والتوهّج */
.anim-bg-fireflies span {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent);
    opacity: 0;
    animation: animbg-firefly-flicker var(--d) ease-in-out infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-firefly-flicker {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    10%      { opacity: var(--o); }
    25%      { transform: translate(14px, -10px); }
    50%      { transform: translate(-10px, -22px); opacity: calc(var(--o) * 0.3); }
    65%      { opacity: var(--o); }
    80%      { transform: translate(10px, -8px); }
}

/* أوراق خريفية متساقطة - كالثلج/المطر لكن بألوان خريفية (--lc) وشكل ورقة
   (زوايا غير متناظرة) مع تمايل جانبي أوسع ودوران بطيء أثناء السقوط */
.anim-bg-leaves span {
    position: absolute;
    left: var(--l);
    top: -30px;
    width: var(--s);
    height: var(--s);
    background: var(--lc);
    border-radius: 0 60% 0 60%;
    opacity: var(--o);
    animation: animbg-leaf-fall var(--d) linear infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-leaf-fall {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(22px, 28vh) rotate(90deg); }
    50%  { transform: translate(-18px, 58vh) rotate(200deg); }
    75%  { transform: translate(20px, 88vh) rotate(300deg); }
    100% { transform: translate(-10px, 118vh) rotate(400deg); opacity: 0; }
}

/* شهب عابرة - خطوط ضوء (تستخدم --animbg-particle-strong كباقي العناصر
   "البيضاء أصلاً" حتى تبقى متباينة على أي مظهر) تظهر وتعبر قطرياً بسرعة
   ثم تخفت، مع فجوة صمت طويلة نسبياً بين كل ظهور وظهور (--delay العشوائي
   الطويل يوزّعها فتبدو متباعدة كالشهب الحقيقية لا معاً دفعة واحدة) */
.anim-bg-shootingstars span {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--s);
    height: 2px;
    background: linear-gradient(115deg, transparent, var(--animbg-particle-strong));
    opacity: 0;
    animation: animbg-shootingstar-move var(--d) linear infinite;
    animation-delay: var(--delay);
}
@keyframes animbg-shootingstar-move {
    0%   { opacity: 0; transform: translate(0, 0); }
    2%   { opacity: var(--o); }
    18%  { opacity: var(--o); transform: translate(-160px, 90px); }
    22%  { opacity: 0; transform: translate(-190px, 107px); }
    100% { opacity: 0; }
}

/* شبكة متحركة - خطوط شبكية رفيعة (تستخدم --animbg-particle-soft فتبقى
   متباينة على أي مظهر) تنجرف قطرياً بشكل متكرّر */
.anim-bg-grid {
    background-image:
        repeating-linear-gradient(0deg, var(--animbg-particle-soft) 0, var(--animbg-particle-soft) calc(1px * var(--sz, 1)), transparent calc(1px * var(--sz, 1)), transparent calc(48px * var(--sz, 1))),
        repeating-linear-gradient(90deg, var(--animbg-particle-soft) 0, var(--animbg-particle-soft) calc(1px * var(--sz, 1)), transparent calc(1px * var(--sz, 1)), transparent calc(48px * var(--sz, 1)));
    opacity: calc(0.6 * var(--op, 1));
    animation: animbg-grid-drift calc(40s / var(--spd, 1)) linear infinite;
}
@keyframes animbg-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 96px 96px, 96px 96px; }
}

/* غيوم عائمة - تكتّلات ضوئية ناعمة (--animbg-particle-soft، متباينة على
   أي مظهر) تطفو وتنجرف أفقياً ببطء عبر الشاشة */
.anim-bg-clouds {
    background-image:
        radial-gradient(ellipse calc(220px * var(--sz, 1)) calc(70px * var(--sz, 1)) at 20% 20%, var(--animbg-particle-soft), transparent 70%),
        radial-gradient(ellipse calc(260px * var(--sz, 1)) calc(80px * var(--sz, 1)) at 65% 45%, var(--animbg-particle-soft), transparent 70%),
        radial-gradient(ellipse calc(200px * var(--sz, 1)) calc(65px * var(--sz, 1)) at 40% 75%, var(--animbg-particle-soft), transparent 70%);
    opacity: calc(0.8 * var(--op, 1));
    animation: animbg-clouds-drift calc(70s / var(--spd, 1)) linear infinite;
}
@keyframes animbg-clouds-drift {
    from { background-position: 0% 0%, 0% 0%, 0% 0%; }
    to   { background-position: 120% 6%, -120% -6%, 130% 4%; }
}

/* من يفضّل تقليل الحركة (إعدادات النظام) لا يرى أي خلفية متحركة إطلاقاً،
   بغضّ النظر عن اختياره المحفوظ - المظهر نفسه يبقى كما هو دون أي تأثر */
@media (prefers-reduced-motion: reduce) {
    #animBgLayers { display: none; }
}

/* ------------------------- معاينة كدور (السوبر أدمن فقط) ------------------------- */
.role-preview-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff7e6;
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 6px 10px;
}
.role-preview-label { color: #7c5a00; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.role-preview-switcher select {
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
}
.role-preview-banner {
    background: var(--color-accent);
    color: #2b2200;
}
.role-preview-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    font-weight: 600;
}
.admin-content .role-preview-banner { border-radius: var(--radius); margin-bottom: 20px; }
.admin-content .role-preview-banner .role-preview-banner-inner { padding: 12px 16px; }

/* ------------------------- الألعاب الفكرية: تبويبات لوحة الصدارة لكل مستوى -------------------------
   مشتركة بين كل الألعاب (راجع game_memory_match.php / game_quick_math.php /
   game_sudoku.php والسكربت المقابل في نهاية script.js) - كل لعبة تعرض لوحة
   صدارة منفصلة لكل مستوى/حجم بدل لوحة واحدة تخلط كل المستويات معاً. */
.lb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.lb-tab-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* ------------------------- الألعاب الفكرية: لعبة الذاكرة ------------------------- */
.mm-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.mm-grid {
    display: grid;
    gap: 10px;
    margin: 0 auto;
}
/* بلا حدّ أقصى للعرض، كانت البطاقات تتمدَّد لتملأ عرض الحاوية كاملاً
   (تصل لأكثر من 250px للبطاقة الواحدة مع أعمدة قليلة كمستوى "سهل") مهما
   صغر حجم الرمز داخلها - لذلك نُحدِّد هنا عرضاً أقصى لكل مستوى (يتناسب مع
   عدد أعمدته على الحاسوب) فتبقى البطاقات بحجم مريح بصرياً بدل التمدّد
   الفارغ، وتتوسّط الشبكة بدل الالتصاق بأحد الجانبين (margin أعلاه). على
   الهاتف عرض الشاشة نفسه أضيق أصلاً من كل هذه القيم فلا يُغيّر شيئاً هناك -
   راجع assets/js/game_memory_match.js (DIFFICULTY_LAYOUTS) لشكل كل مستوى،
   وgap/font-size أدناه للمستويات الأكبر (صعب جداً/خبير) التي تحتاج أيضاً
   فراغاً أضيق ورمزاً أصغر داخل كل بطاقة حتى تبقى مقروءة رغم كثرة الخانات. */
.mm-grid-size-6 { max-width: 420px; }
.mm-grid-size-8 { max-width: 440px; }
.mm-grid-size-12 { max-width: 560px; }
.mm-grid-size-18,
.mm-grid-size-32 { gap: 6px; }
.mm-grid-size-18 { max-width: 480px; }
.mm-grid-size-32 { max-width: 520px; }
.mm-grid-size-12 .mm-card-back { font-size: 1.5rem; }
.mm-grid-size-12 .mm-card-front { font-size: 2.2rem; }
.mm-grid-size-18 .mm-card-back { font-size: 1.3rem; }
.mm-grid-size-18 .mm-card-front { font-size: 1.9rem; }
.mm-grid-size-32 .mm-card-back { font-size: 1rem; }
.mm-grid-size-32 .mm-card-front { font-size: 1.4rem; }
.mm-card {
    background: none;
    border: none;
    padding: 0;
    aspect-ratio: 1 / 1;
    perspective: 700px;
    cursor: pointer;
}
.mm-card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.4s;
    transform-style: preserve-3d;
}
.mm-card.flipped .mm-card-inner,
.mm-card.matched .mm-card-inner {
    transform: rotateY(180deg);
}
.mm-card-back,
.mm-card-front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    backface-visibility: hidden;
}
.mm-card-back {
    background: var(--color-primary);
    color: #fff;
    font-size: 1.8rem;
}
.mm-card-back::after { content: "?"; font-weight: 700; }
/* رموز الإيموجي (وجه البطاقة الأمامي) تُرسَم بحشوة داخلية كبيرة ضمن صندوق
   الخط عند أغلب المتصفحات/الخطوط، فتبدو أصغر بكثير من نص عادي بنفس حجم
   الخط (font-size) - راجع مثلاً "؟" في .mm-card-back أعلاه بنفس المقاس.
   لذلك حجم خط وجه الإيموجي أكبر بوضوح من وجه "؟" حتى يظهر الرمز بحجم
   مقارب بصرياً لحجم البطاقة نفسها، وليس لأنه خطأ في القياسات. */
.mm-card-front {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    font-size: 2.6rem;
    transform: rotateY(180deg);
}
.mm-card.matched .mm-card-front {
    border-color: var(--color-success);
    background: #f0fdf4;
}

/* لعبة الذاكرة الرياضية (game_math_memory.js): بطاقات نصية (معادلة مثل
   "2 + 5" أو جواب مثل "7") بدل رمز إيموجي واحد - تحتاج حجم خط أصغر بكثير
   من رموز .mm-card-front العادية أعلاه (النص أطول من رمز واحد) وثابت
   الاتجاه من اليسار لليمين (LTR) بغضّ النظر عن اتجاه الصفحة العام، لأن
   الترميز الرياضي (2 + 5) يُقرأ دائماً من اليسار لليمين. */
.mm-card-math .mm-card-front {
    font-size: 1.15rem;
    font-weight: 700;
    direction: ltr;
    white-space: nowrap;
    padding: 2px;
}
.mm-grid-size-12 .mm-card-math .mm-card-front { font-size: 1rem; }
.mm-grid-size-18 .mm-card-math .mm-card-front { font-size: 0.85rem; }
.mm-grid-size-32 .mm-card-math .mm-card-front { font-size: 0.68rem; }
.mmm-level-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* ------------------------- الألعاب الفكرية: لعبة الرياضيات السريعة ------------------------- */
.qm-numeral-btn.active,
.qm-mode-btn.active {
    background: var(--color-primary);
    color: #fff;
}
.qm-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 380px;
    margin: 0 auto;
}
.qm-choice-btn {
    padding: 22px 10px;
    font-size: 1.7rem;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
    color: var(--color-primary-dark);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.qm-choice-btn:hover:not(:disabled) { border-color: var(--color-primary); }
.qm-choice-btn:disabled { cursor: default; }
.qm-choice-btn.qm-choice-correct {
    background: #f0fdf4;
    border-color: var(--color-success);
    color: var(--color-success);
}
.qm-choice-btn.qm-choice-wrong {
    background: #fef2f2;
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.qm-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.qm-problem-box {
    text-align: center;
    padding: 20px 0;
}
.qm-problem {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 18px;
}
.qm-problem-box form {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.qm-problem-box input[type="number"] {
    width: 160px;
    padding: 10px 12px;
    font-size: 1.2rem;
    text-align: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
}
.qm-feedback {
    min-height: 1.4em;
    margin-top: 12px;
    font-weight: 700;
}
.qm-feedback-correct { color: var(--color-success); }
.qm-feedback-wrong { color: var(--color-danger); }

/* ------------------------- الألعاب الفكرية: لعبة سودوكو ------------------------- */
.su-size-btn.active,
.su-diff-btn.active {
    background: var(--color-primary);
    color: #fff;
}
.su-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.su-board {
    display: grid;
    gap: 2px;
    background: var(--color-primary-dark);
    border: 3px solid var(--color-primary-dark);
    border-radius: 6px;
    overflow: hidden;
    max-width: 480px;
    margin: 0 auto;
}
.su-cell {
    background: var(--color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-weight: 700;
    color: var(--color-primary-dark);
    cursor: pointer;
    user-select: none;
}
.su-board-size-4 .su-cell { font-size: 1.8rem; }
.su-board-size-6 .su-cell { font-size: 1.5rem; }
.su-board-size-9 .su-cell { font-size: 1.15rem; }
/* ملاحظة مهمة: خلفية su-board نفسها داكنة عمداً (تُستخدم لرسم خطوط الشبكة
   عبر فراغ 2px بين الخانات - انظر أعلاه). لذلك يجب أن تكون خلفية أي حالة
   تظليل للخانة (معطاة/تلميح/محاذاة/تعارض...) معتمة بالكامل دائماً، وليست
   شبه شفافة، وإلا يظهر اللون الداكن للشبكة من خلفها بشكل قوي جداً حتى مع
   شفافية منخفضة كـ%9 (وهذا بالضبط ما كان يجعل تظليل الخانات المحاذية داكناً
   يصعب معه تمييز الأرقام). نستخدم color-mix() لخلط نسبة بسيطة من اللون
   الدلالي مع لون البطاقة (--color-card) فينتج لون فاتح معتم يتكيّف تلقائياً
   مع أي مظهر (فاتح أو داكن) بدل الاعتماد على شفافية تكشف ما خلفها. القيمة
   الأولى (--color-card الصرف) قبل color-mix هي احتياط بسيط للمتصفحات
   القديمة جداً التي لا تدعم color-mix - تبقى معتمة أيضاً، فقط بلا تظليل مرئي. */
.su-cell.su-given {
    color: var(--color-text);
    background: var(--color-card);
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-card) 94%);
    cursor: default;
}
.su-cell.su-hinted {
    color: var(--color-primary);
    background: var(--color-card);
    background: color-mix(in srgb, var(--color-text) 6%, var(--color-card) 94%);
    cursor: default;
}
.su-cell.su-peer {
    background: var(--color-card);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card) 88%);
}
.su-cell.su-same-value {
    background: var(--color-card);
    background: color-mix(in srgb, var(--color-accent) 20%, var(--color-card) 80%);
}
.su-cell.su-selected { background: var(--color-accent); color: #fff; }
.su-cell.su-conflict { color: var(--color-danger); }
.su-cell.su-conflict.su-selected { background: var(--color-danger); color: #fff; }
.su-cell.su-border-r { border-inline-end: 3px solid var(--color-primary-dark); }
.su-cell.su-border-b { border-block-end: 3px solid var(--color-primary-dark); }
.su-numpad {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.su-num-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-card);
    color: var(--color-primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.su-num-btn:hover { border-color: var(--color-primary); }
.su-num-btn.su-erase { color: var(--color-danger); }

@media (max-width: 600px) {
    .mm-card-back { font-size: 1.3rem; }
    .mm-card-front { font-size: 1.9rem; }
    .mm-grid-size-12 .mm-card-back { font-size: 1.2rem; }
    .mm-grid-size-12 .mm-card-front { font-size: 1.7rem; }
    .mm-grid-size-18 .mm-card-back { font-size: 1rem; }
    .mm-grid-size-18 .mm-card-front { font-size: 1.4rem; }
    .mm-grid-size-32 .mm-card-back { font-size: 0.85rem; }
    .mm-grid-size-32 .mm-card-front { font-size: 1.1rem; }
    .mm-grid-size-32 { gap: 4px; }
    .mm-card-math .mm-card-front { font-size: 0.95rem; }
    .mm-grid-size-12 .mm-card-math .mm-card-front { font-size: 0.85rem; }
    .mm-grid-size-18 .mm-card-math .mm-card-front { font-size: 0.72rem; }
    .mm-grid-size-32 .mm-card-math .mm-card-front { font-size: 0.6rem; }
    .qm-problem { font-size: 2rem; }
    .qm-choice-btn { font-size: 1.3rem; padding: 18px 8px; }
    .su-board { max-width: 100%; }
    .su-board-size-9 .su-cell { font-size: 0.95rem; }
    .su-num-btn { width: 38px; height: 38px; font-size: 1.05rem; }
}

/* =====================================================================
   المظاهر (الثيمات) - راجع config/themes.php وtheme.php/save_theme.php
   -----------------------------------------------------------------------
   كل مظهر يعيد تعريف متغيرات CSS الأساسية فقط (لون أساسي/خلفية/بطاقة/نص/
   خافت/حدود/شريط داكن/تظليل خفيف) - باقي التنسيقات في الملف تعتمد على هذه
   المتغيرات تلقائياً فتتلوّن معها بلا أي تعديل إضافي. الألوان الدلالية
   الثابتة (نجاح/خطأ/تحذير/تمييز) تبقى كما هي في جميع المظاهر بقصد (تماشياً
   مع رسائل التنبيه والشرائط والأوسمة الجاهزة التي لا تعتمد على متغيّر).

   المظهر الافتراضي "light" معرَّف في :root أعلى الملف بلا حاجة لكتلة هنا.
   في المظاهر الداكنة تحديداً: --color-primary-dark يُصبح تفتيحاً (لا
   تغميقاً) للون الأساسي حتى يبقى مقروءاً كعنوان/نص على بطاقة داكنة، بينما
   --color-bar-bg يبقى دائماً غامقاً (لشرائط الفوتر/القائمة الجانبية...)
   بغضّ النظر عن فاتح/داكن المظهر - رُوجعت كل القيم تلقائياً لضمان تباين
   لوني كافٍ (WCAG) بين النص والخلفية في كل مظهر.
   ===================================================================== */

html[data-theme="dark"] {
    --color-primary: #22a06b;
    --color-primary-dark: #59b890;
    --color-bg: #0f1713;
    --color-card: #182420;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #38433f;
    --color-bar-bg: #0f4830;
    --color-primary-tint: rgba(34,160,107,0.09);
}

html[data-theme="blue"] {
    --color-primary: #2563eb;
    --color-primary-dark: #184099;
    --color-bg: #f5f7fb;
    --color-card: #fafbfd;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #112d6a;
    --color-primary-tint: rgba(37,99,235,0.09);
}

html[data-theme="blue_dark"] {
    --color-primary: #4a8db8;
    --color-primary-dark: #77aaca;
    --color-bg: #10161b;
    --color-card: #1b232a;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #3b4248;
    --color-bar-bg: #213f53;
    --color-primary-tint: rgba(74,141,184,0.09);
}

html[data-theme="brown"] {
    --color-primary: #7a5230;
    --color-primary-dark: #4f351f;
    --color-bg: #f3ece3;
    --color-card: #f9f6f1;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #372516;
    --color-primary-tint: rgba(122,82,48,0.09);
}

html[data-theme="brown_dark"] {
    --color-primary: #bd8657;
    --color-primary-dark: #cea481;
    --color-bg: #1d150d;
    --color-card: #2d2217;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #4a4137;
    --color-bar-bg: #553c27;
    --color-primary-tint: rgba(189,134,87,0.09);
}

html[data-theme="purple"] {
    --color-primary: #6b4fa0;
    --color-primary-dark: #463368;
    --color-bg: #f1edf7;
    --color-card: #f8f6fb;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #302448;
    --color-primary-tint: rgba(107,79,160,0.09);
}

html[data-theme="purple_dark"] {
    --color-primary: #7e62b2;
    --color-primary-dark: #9e89c5;
    --color-bg: #140f1b;
    --color-card: #20192a;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #3f3948;
    --color-bar-bg: #392c50;
    --color-primary-tint: rgba(126,98,178,0.09);
}

html[data-theme="rose"] {
    --color-primary: #b5476b;
    --color-primary-dark: #762e46;
    --color-bg: #fbedf1;
    --color-card: #fdf6f8;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #512030;
    --color-primary-tint: rgba(181,71,107,0.09);
}

html[data-theme="rose_dark"] {
    --color-primary: #bd5778;
    --color-primary-dark: #ce819a;
    --color-bg: #1d0d12;
    --color-card: #2d171d;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #4a373d;
    --color-bar-bg: #552736;
    --color-primary-tint: rgba(189,87,120,0.09);
}

html[data-theme="slate"] {
    --color-primary: #55606b;
    --color-primary-dark: #373e46;
    --color-bg: #eef0f2;
    --color-card: #f6f8f8;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #262b30;
    --color-primary-tint: rgba(85,96,107,0.09);
}

html[data-theme="slate_dark"] {
    --color-primary: #7d8a97;
    --color-primary-dark: #9ea7b1;
    --color-bg: #131517;
    --color-card: #1f2124;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #3e4043;
    --color-bar-bg: #383e44;
    --color-primary-tint: rgba(125,138,151,0.09);
}

html[data-theme="indigo"] {
    --color-primary: #3e3590;
    --color-primary-dark: #28225e;
    --color-bg: #eae8f6;
    --color-card: #f4f4fa;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #1c1841;
    --color-primary-tint: rgba(62,53,144,0.09);
}

html[data-theme="indigo_dark"] {
    --color-primary: #5e53c1;
    --color-primary-dark: #867ed0;
    --color-bg: #0f0d1d;
    --color-card: #19162d;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #39374a;
    --color-bar-bg: #2a2557;
    --color-primary-tint: rgba(94,83,193,0.09);
}

html[data-theme="teal"] {
    --color-primary: #1e8a85;
    --color-primary-dark: #145a56;
    --color-bg: #e8f4f3;
    --color-card: #f4faf9;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #0d3e3c;
    --color-primary-tint: rgba(30,138,133,0.09);
}

html[data-theme="teal_dark"] {
    --color-primary: #3fd5ce;
    --color-primary-dark: #6fe0da;
    --color-bg: #0a2020;
    --color-card: #123231;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #334f4e;
    --color-bar-bg: #1c605d;
    --color-primary-tint: rgba(63,213,206,0.09);
}

html[data-theme="maroon"] {
    --color-primary: #7c2b36;
    --color-primary-dark: #511c23;
    --color-bg: #f5eaea;
    --color-card: #faf4f4;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #381318;
    --color-primary-tint: rgba(124,43,54,0.09);
}

html[data-theme="maroon_dark"] {
    --color-primary: #c35161;
    --color-primary-dark: #d27c88;
    --color-bg: #1e0c0e;
    --color-card: #2e1518;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #4b3638;
    --color-bar-bg: #58242c;
    --color-primary-tint: rgba(195,81,97,0.09);
}

html[data-theme="amber"] {
    --color-primary: #c1651c;
    --color-primary-dark: #7d4212;
    --color-bg: #fbf0e5;
    --color-card: #fdf8f2;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #572d0d;
    --color-primary-tint: rgba(193,101,28,0.09);
}

html[data-theme="amber_dark"] {
    --color-primary: #e18033;
    --color-primary-dark: #e8a066;
    --color-bg: #221508;
    --color-card: #34210f;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #504031;
    --color-bar-bg: #653a17;
    --color-primary-tint: rgba(225,128,51,0.09);
}

html[data-theme="ocean"] {
    --color-primary: #2e7197;
    --color-primary-dark: #1e4962;
    --color-bg: #e7f1f7;
    --color-card: #f3f8fb;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #153344;
    --color-primary-tint: rgba(46,113,151,0.09);
}

html[data-theme="ocean_dark"] {
    --color-primary: #3e93c4;
    --color-primary-dark: #6eaed3;
    --color-bg: #081420;
    --color-card: #0f2233;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #314150;
    --color-bar-bg: #1c4258;
    --color-primary-tint: rgba(62,147,196,0.09);
}

html[data-theme="olive"] {
    --color-primary: #6b7c2e;
    --color-primary-dark: #46511e;
    --color-bg: #f1f1e4;
    --color-card: #f8f8f2;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #303815;
    --color-primary-tint: rgba(107,124,46,0.09);
}

html[data-theme="olive_dark"] {
    --color-primary: #a8c054;
    --color-primary-dark: #bed07f;
    --color-bg: #191d0d;
    --color-card: #272d16;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #454a37;
    --color-bar-bg: #4c5626;
    --color-primary-tint: rgba(168,192,84,0.09);
}

html[data-theme="graphite"] {
    --color-primary: #58626d;
    --color-primary-dark: #394047;
    --color-bg: #edeff0;
    --color-card: #f6f7f8;
    --color-text: #1f2937;
    --color-muted: #5b6472;
    --color-border: #e5e7eb;
    --color-bar-bg: #282c31;
    --color-primary-tint: rgba(88,98,109,0.09);
}

html[data-theme="graphite_dark"] {
    --color-primary: #788592;
    --color-primary-dark: #9aa4ad;
    --color-bg: #121416;
    --color-card: #1c1f22;
    --color-text: #e5e7eb;
    --color-muted: #9aa5b1;
    --color-border: #3c3e41;
    --color-bar-bg: #363c42;
    --color-primary-tint: rgba(120,133,146,0.09);
}

/* كل المظاهر "الداكنة" (13 مظهراً) تُعيد تعريف ألوان جزيئات الخلفيات
   المتحركة البيضاء أصلاً (نجوم/فقاعات/ثلج) بالأبيض شبه-الشفاف المناسب
   لخلفياتها الداكنة - راجع تعريفها الافتراضي (الداكن) في :root أعلاه
   المخصَّص للمظاهر الفاتحة */
html[data-theme="dark"],
html[data-theme="blue_dark"],
html[data-theme="brown_dark"],
html[data-theme="purple_dark"],
html[data-theme="rose_dark"],
html[data-theme="slate_dark"],
html[data-theme="indigo_dark"],
html[data-theme="teal_dark"],
html[data-theme="maroon_dark"],
html[data-theme="amber_dark"],
html[data-theme="ocean_dark"],
html[data-theme="olive_dark"],
html[data-theme="graphite_dark"] {
    --animbg-particle-strong: rgba(255,255,255,0.9);
    --animbg-particle-mid: rgba(255,255,255,0.6);
    --animbg-particle-soft: rgba(255,255,255,0.4);
    --animbg-particle-glow: rgba(255,255,255,0.6);
    --animbg-particle-glow-soft: rgba(255,255,255,0.08);
}

/* =====================================================================
   قسم "التحديات" (Duel) - challenges.php وduel_match.php
   راجع includes/functions.php (قسم duel_*) لشرح آلية المزامنة الكاملة
   ===================================================================== */

/* شارة "يوجد متحدٍ بانتظار" على بطاقة قسم التحديات في الصفحة الرئيسية */
.section-badge {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    margin-inline-start: 6px;
    vertical-align: middle;
}

/* اختيار اللعبة عند نشر تحدٍ جديد */
.duel-game-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    max-width: 260px;
    flex: 1 1 220px;
}
.duel-game-choice input { margin-top: 4px; }
.duel-game-choice span { display: flex; flex-direction: column; gap: 2px; }
.duel-game-choice .muted { font-size: 0.82rem; }

/* لائحة "بانتظار تحدٍ الآن" */
.duel-waiting-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.duel-waiting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    flex-wrap: wrap;
}
.duel-waiting-info { font-size: 0.95rem; }

/* صفحة المباراة: لوحة النقاط ورأس الجولة */
.duel-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}
.duel-score-box { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.duel-score-box strong { font-size: 1.8rem; color: var(--color-primary); }
.duel-vs { font-weight: 700; color: var(--color-muted); }
.duel-round-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
    margin-bottom: 16px;
}
.duel-round-meta strong { color: var(--color-text); }

.duel-round-area { min-height: 140px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0; }
.duel-round-area form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.duel-round-area input[type="number"], .duel-round-area input[type="text"] {
    width: 100%;
    max-width: 220px;
    text-align: center;
    font-size: 1.2rem;
}

.duel-feedback { min-height: 24px; text-align: center; font-weight: 700; }
.duel-feedback-correct { color: #16a34a; }
.duel-feedback-wrong { color: #dc2626; }

/* رياضيات */
.duel-math-problem { font-size: 2.4rem; font-weight: 700; text-align: center; }

/* مسابقة المعرفة */
.duel-trivia-question { font-size: 1.3rem; font-weight: 700; text-align: center; max-width: 560px; }
.duel-trivia-choices { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.duel-choice-btn {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 10px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--color-text);
}
.duel-choice-btn:hover:not(:disabled) { border-color: var(--color-primary); }
.duel-choice-btn:disabled { cursor: default; opacity: 0.7; }

/* الكلمة المبعثرة */
.duel-anagram-word {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
    color: var(--color-primary);
}

/* ترتيب الجملة */
.duel-sentence-answer {
    min-height: 44px;
    width: 100%;
    max-width: 620px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 1.15rem;
    text-align: center;
}
.duel-sentence-tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 620px; }
.duel-word-tile {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--color-text);
}
.duel-word-tile:hover:not(:disabled) { border-color: var(--color-primary); }
.duel-word-tile-used { opacity: 0.35; cursor: default; }
.duel-sentence-controls { display: flex; gap: 10px; margin-top: 4px; }

@media (max-width: 560px) {
    .duel-math-problem { font-size: 1.8rem; }
    .duel-anagram-word { font-size: 2rem; letter-spacing: 5px; }
    .duel-score-box strong { font-size: 1.4rem; }
}

/* ---------------- زرّا "انتقال لأعلى/أسفل الصفحة" العائمان ----------------
   موجودان في كل صفحات الموقع (تُنشئهما assets/js/script.js) لكنهما مخفيّان
   بالكامل افتراضياً؛ تُظهرهما جافاسكربت فقط عندما يكون طول محتوى الصفحة
   ضعف ارتفاع الشاشة المرئي على الأقل (راجع الشرح المطوَّل هناك). نصف
   شفافين حتى لا يحجبا ما خلفهما من محتوى، ويصلان لشفافية كاملة عند
   التمرير فوقهما/التركيز عليهما لسهولة رؤيتهما عند الحاجة الفعلية. حجمهما
   صغير عمداً (36px) حتى لا يُزعجا القراءة. z-index أعلى من كل عناصر الصفحة
   العادية (أعلاها حالياً 20 لقائمة نتائج البحث المنسدلة) لكن أقل بكثير من
   نافذة تأكيد البرنامج الدراسي العائمة (999) حتى تبقى فوقهما إن ظهرت. */
.scroll-float-btn {
    position: fixed;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--color-bar-bg);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.scroll-float-btn.is-visible {
    opacity: 0.5;
    visibility: visible;
    pointer-events: auto;
}
.scroll-float-btn.is-visible:hover,
.scroll-float-btn.is-visible:focus-visible {
    opacity: 1;
}
.scroll-float-btn--top { top: 14px; }
.scroll-float-btn--bottom { bottom: 14px; }

/* إصلاح: قالب الترقيم الافتراضي في Laravel (Pagination::links() بلا View
   مخصص) يرسم سهمي السابق/التالي كـ<svg> يعتمد بالكامل على أصناف Tailwind
   (w-5 h-5) لتحديد حجمه 20×20px. هذا المشروع لا يحمّل Tailwind إطلاقاً (كل
   التنسيق هنا يدوي في هذا الملف)، فتلك الأصناف بلا أي أثر فعلي ويُعرَض
   الـSVG بحجمه الطبيعي غير المقيَّد فيتمدد ليملأ عرضاً كبيراً من الصفحة -
   ظهر هذا أول مرة مع صفحات جهات الاتصال (contacts/admin/contacts-oversight)
   لأنها أول صفحات في المشروع تحتاج فعلياً أكثر من صفحة نتائج واحدة فتُظهر
   أزرار الترقيم. الإصلاح هنا عام (يغطي أي صفحة ترقيم مستقبلية) بدل تعديل كل
   Blade View على حدة. */
nav[aria-label="Pagination Navigation"] svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}



/* نص لقارئ الشاشة فقط (تسميات حقول مضغوطة) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* PRF-3 / VIS-7: ترقيم الصفحات بتنسيق الموقع */
.site-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.site-pager-links { display:flex; flex-wrap:wrap; gap:4px; }
.site-pager-links [aria-disabled="true"] { opacity:.45; pointer-events:none; }
.site-pager-gap { padding:5px 4px; }

/* VIS-8: سهم «رجوع» يتبع اتجاه الصفحة (← في الإنكليزية والفرنسية، → في العربية)،
   والسهم «إلى الأمام» عكسه */
.back-arrow::before { content: "\2190"; }
[dir="rtl"] .back-arrow::before { content: "\2192"; }
.fwd-arrow::before { content: "\2192"; }
[dir="rtl"] .fwd-arrow::before { content: "\2190"; }

/* VIS-14: زر «تغيير» اللغة مخفي بصرياً ويظهر حين يصله التركيز بلوحة المفاتيح */
.sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0 4px; clip: auto; overflow: visible; white-space: nowrap; }
/* VIS-14: أهداف لمس معقولة على الهاتف */
@media (max-width: 768px) {
    .btn-small { min-height: 36px; padding-block: 7px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .lang-switcher-select { min-height: 36px; }
    .notif-bell > button, .notif-bell-btn { min-width: 40px; min-height: 40px; }
}