/* Team / championship pages — matches sidebar (dark + light, RTL/LTR)
   ------------------------------------------------------------------
   #match_list_conf هو نفس المعرّف في الصفحة الرئيسية وفي سايدبار صفحتي
   الفريق والبطولة. لكن صف المباراة في الصفحة الرئيسية أصبح مملوكاً بالكامل
   لـ public/css/match-board.css، وقواعد هذا الملف مكتوبة لتصميم السايدبار
   القديم (الشعار فوق الاسم، ارتفاع أكبر للمباراة الجارية على الجوال...).
   بقاء الاثنين على نفس المحدِّد كان يجعل الملفين يتنازعان: بعض قواعد هذا
   الملف تفوز بالتخصيص فيظهر صف المباراة الجارية على الجوال بشكل مختلف عن
   بقية الصفوف.

   لذلك كل قاعدة تخصّ صف المباراة القديم (flex، بدون mb-row) هنا مقيَّدة
   بـ ‎#match_list_conf .inline-match-item:not(.mb-row)‎. صفوف ‎mb-row‎
   مملوكة لـ match-board.css في كل الصفحات.

   ويُستثنى من ذلك أوّل كتلتين أدناه — المتغيّرات المشتركة وأيقونات الصف
   السريعة — فهما غير مقيَّدتين بشيء وتخصّان الموقع كلّه بما فيه الرئيسية.
   ووُضعتا هنا لأن هذا الملف هو الوحيد المحمَّل على كل صفحة والمكتوب بيدٍ
   بشرية: ‎style.css‎ مبنيٌّ مضغوط لا يُحرَّر، و‎match-board.css‎ مشروط
   بالرئيسية. */

/* --------------------------------------------------------------------------
   متغيّرات مشتركة مع لوحة الرئيسية

   هذه الستّة كانت في ‎match-board.css‎ مع بقية متغيّرات ‎--mb-*‎، ونُقلت إلى
   هنا حين صارت أيقونات الصف واحدة في كل الصفحات: ذلك الملف مشروط بالرئيسية
   (‎@if($isHomePage)‎ في ‎layout/header.blade.php‎)، فقيمُه لا تصل إلى صفحة
   البطولة ولا الفريق ولا الحكم ولا الملعب — وأيقونةٌ بلا لون ترث أزرق
   الروابط الافتراضي.

   والبديل المرفوض: كتابة القيم هنا وإبقاؤها هناك أيضاً. عندئذ يصير لأخضر
   الهوية مصدران، ويكفي أن يُعدَّل أحدهما ليفترق لون الأيقونة على الرئيسية
   عن لونها في بقية الموقع بلا أن يُنبّه شيء.

   وبقية ‎--mb-*‎ لم تنتقل: لا يقرؤها إلا تصميم لوحة الرئيسية، فنقلها يُحمّل
   كل صفحة تعريفاتٍ لا تُستعمل ويُخفي أين يعيش ذلك التصميم فعلاً.
   -------------------------------------------------------------------------- */

html {
    --mb-center-bg: #12151f;
    --mb-center-line: #252a3d;
    --mb-text: #d8dbe8;
    --mb-text-muted: #8b90a5;
    --mb-text-dim: #8f95ab;
    --mb-text-strong: #ffffff;
    --mb-accent: #39dbbf;
    --mb-live: #fc4d4d;
    --mb-loser: rgba(255, 255, 255, 0.38);
    /* ركلات الترجيح: تكبر مع عرض الشاشة وتتوقّف عند 18px (حجم الديسكتوب) */
    --mb-pen-shot-size: clamp(15px, 4.8vw, 18px);
    --mb-pen-shot-gap: clamp(2px, 0.5vw, 4px);
}

html.light {
    --mb-center-bg: #f4f6fb;
    --mb-center-line: #e4e8f2;
    --mb-text: #2a3142;
    --mb-text-muted: #5f6579;
    --mb-text-dim: #5f6579;
    --mb-text-strong: #131521;
    --mb-accent: #12a58c;
    --mb-live: #e33b3b;
    --mb-loser: rgba(19, 21, 33, 0.4);
    --mb-pen-shot-size: clamp(15px, 4.8vw, 18px);
    --mb-pen-shot-gap: clamp(2px, 0.5vw, 4px);
}

/* --------------------------------------------------------------------------
   أيقونات الصف السريعة — الدلالة اللونية والوزنية، في كل صفحات الموقع

   الرسم واحد ومصدره ‎resources/views/partials/match-quick-link.blade.php‎،
   وهو خالٍ من أي لون: كله ‎currentColor‎. فاللون كله هنا.

   ولماذا هنا لا في ‎match-board.css‎: تلك أيقونات صفٍّ لا أيقونات لوحة، وهي
   تظهر على أربع عشرة صفحة لا على الرئيسية وحدها. وإبقاء اللون هناك كان
   يعني أن تُعرَّف الدلالة نفسها مرّتين — مرّة للرئيسية ومرّة للباقي —
   وذلك بالضبط ما جعل الصفحات الأخرى تتخلّف عن الرئيسية حين تغيّر الرسم.

   والمقاسات ليست هنا قصداً: صندوق اللمس على الرئيسية 26px شفّاف، وعلى بقية
   الصفحات 36px مصمت (‎style.css‎). ذاك اختلاف تصميم مقصود لكل سياق، أما
   اللون فدلالة لا تحتمل الاختلاف.

   والتخصيص هنا ثلاث فئات (الحاوية + الأيقونة + صنف النوع) لسببٍ واحد: أن
   يغلب ‎a.active-match-quick-link.lineup svg‎ في ‎style.css‎ الذي يُدير الرسم
   ‎90deg‎. ولم أستعمل ‎!important‎ ولا معرّفاً: كلاهما يشتري الغلبة اليوم
   ويمنعها عن كل قاعدة تُكتب غداً.
   -------------------------------------------------------------------------- */

/*
    ‎transform: none‎ يُبطل تدوير ‎90deg‎ في ‎style.css‎: كان لازماً للرسم القديم
    لأنه ملعب أفقي، والرسم الحالي قائم في ‎viewBox‎ مربّع فالتدوير يقلبه على
    جنبه.

    والسماكة هنا لا في الترميز، لتُضبط لكل حالة على حدة. القيمة على ‎svg‎
    وحدها والأشكال ترثها، فلا تحتاج كلٌّ منها قاعدة.
*/
.active-match-quick-links .active-match-quick-link.lineup svg {
    transform: none;
    stroke-width: 1.5;
}

.active-match-quick-links .active-match-quick-link.match-live-tab-link {
    color: var(--mb-live);
}

.active-match-quick-links .active-match-quick-link.match-live-tab-link svg path {
    fill: currentColor;
}

/*
    التشكيلة المؤكدة والمتوقّعة أيقونة واحدة، والفارق لونٌ لا شكل.

    والفرق بينهما فرقُ رتبة لا درجة: المؤكدة خبر نهائي فتأخذ أخضر الهوية كاملاً
    لتُلمَح من مسح الصفحة السريع، والمتوقّعة ترجيح فتخفت إلى 46% من لون النص
    الباهت — حاضرة لمن يبحث عنها، لا تنازع المؤكدة على الانتباه.

    ولم أُنزلها أكثر من ذلك: الرسم خطٌّ رفيع، والخطّ الرقيق يتلاشى مع الشفافية
    أسرع بكثير من الشكل المصمت.

    والأخضر لا يزاحم أيقونة الفيديو: تلك لا تظهر إلّا على مباراة منتهية،
    والتشكيلة لا تظهر إلّا على قادمة، فلا يجتمعان في صفٍّ واحد.
*/
.active-match-quick-links .active-match-quick-link.lineup {
    color: var(--mb-accent);
}

.active-match-quick-links .active-match-quick-link.lineup--expected {
    color: color-mix(in srgb, var(--mb-text-muted) 46%, transparent);
}

/*
    المتوقّعة أرقّ خطاً أيضاً، لا أخفت لوناً فقط. ورقّة الخطّ جزء من المعنى:
    الخطّ الخفيف يوحي بالترجيح، والواضح بالخبر المؤكّد.

    والقيمة نسبية لا مطلقة: ‎viewBox‎ مقياسه 24، فسماكة ‎1.15‎ تُرسم رقيقةً
    وتبقى متّصلة مهما اختلف عرض الأيقونة بين صفحةٍ وأخرى — وهذا سبب ضبطها
    نسبةً لا بالبكسل.
*/
.active-match-quick-links .active-match-quick-link.lineup--expected svg {
    stroke-width: 1.15;
}

/*
    ‎:not(.match-live-tab-link)‎ ليس زخرفة: رابط البثّ يحمل ‎videos‎ أيضاً في
    ترميزه، فكانت هذه القاعدة تصرعه بلونها لأنها متساوية التخصيص معه وتليه
    في الملف — فيخرج البثّ أخضر ويموت ‎--mb-live‎ المكتوب له أعلاه بلا أثر.

    والاستثناء أولى من نقل القاعدة قبله: النقل يُصلح الحالة اليوم ويسقط أول
    مرّة يُعاد فيها ترتيب الملف، والاستثناء يقول القصد نفسه ولا يعلّقه على
    ترتيب السطور.
*/
.active-match-quick-links .active-match-quick-link.videos:not(.match-live-tab-link) {
    color: color-mix(in srgb, var(--mb-accent) 68%, var(--mb-text-muted));
}

/* --------------------------------------------------------------------------
   ركلات الترجيح — حجم متجاوب في كل الصفحات

   ‎style.css‎ يترك الـ SVG بحجم 18px لكنه يضيف ‎padding‎ و‎margin‎ فيصغر
   المجال الفعلي. ‎match-board.css‎ كان يثبّت 13px (و11px تحت 767px) فبانت
   الركلات صغيرة جداً على الجوال رغم اتساع عمود الفريق.

   ‎clamp(15px, 4.8vw, 18px)‎: تكبر مع عرض المتصفح وتتوقّف عند 18px — حدّ
   الديسكتوب الأصلي — في الرئيسية والبطولة والفريق والملعب وغيرها.
   -------------------------------------------------------------------------- */

.penalties-shots {
    gap: var(--mb-pen-shot-gap);
}

.penalties-shots .p-shot-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--mb-pen-shot-size);
    height: var(--mb-pen-shot-size);
    margin: 0 !important;
    padding: 0 !important;
}

.penalties-shots .p-shot-item svg {
    display: block;
    width: 100%;
    height: 100%;
}

.penalties-shots .p-shot-item.success {
    color: var(--mb-accent);
    opacity: 1;
}

.penalties-shots .p-shot-item.failed {
    color: var(--mb-live);
    opacity: 1;
}

#match_list_conf:has(> .matches-wrapper.wide) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#match_list_conf .dynamic-tabs-content {
    width: 100%;
}
#match_list_conf .champ-tab-item.matches {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
/* --------------------------------------------------------------------------
   ترويسة الجولة والتاريخ («دور الـ 16» + التاريخ)

   كانت بطاقةً مملوءة: سطح ‎rgba(90,131,255,.1)‎ وحدٌّ وزوايا ‎10px‎ وارتفاع
   ‎34px‎ و‎justify-content: space-between‎ يقذف التاريخ إلى الحرف المقابل.
   فصار صندوقاً بعرض القائمة كاملاً وبنفس هيئة صفّ المباراة تحته — يُقرأ
   صفّاً لا ترويسةً، والطرفان المتباعدان يزيدان الوهم لأن صفّ المباراة نفسه
   طرفان متباعدان.

   الترويسة هنا تعتمد ثلاث إشارات بلا صندوق: خيط أكسنت قبل النصّ (نفس موتيف
   ‎.matches-top-title‎ أدناه فيقرأ القسمان كعائلة واحدة)، ونصٌّ أثقل وزناً
   وأفتح لوناً من التاريخ، وتاريخٌ ملاصقٌ للاسم لا مقذوفٌ إلى الحرف الآخر —
   فالتجاور هو ما يقول إنّ الثاني وصفٌ للأوّل.

   والبديل المرفوض: إبقاء البطاقة وتصغيرها. جُرّب فبقيت تُقرأ صفّاً: ما دام
   لها سطحٌ وحدٌّ وزوايا فهي من عائلة الصفوف بصريّاً، وأيّ تصغير يجعلها
   «صفّاً صغيراً» لا ترويسة.

   ‎:not(.home-matches-panel)‎ كسائر قواعد هذا الملفّ: الصنف ‎two-rows-title‎
   له في الرئيسية معنى آخر (رؤوس التجميع الزمني) يتولّاه ‎match-board.css‎.
   -------------------------------------------------------------------------- */
#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title {
    margin: 0 0 8px;
    min-height: 34px;
    height: auto;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title:not(.champ-run-date) {
    background: var(--mb-champ-header-bg, #e2e7f0);
    border-bottom: 1px solid var(--mb-champ-header-line, #e0e5ef);
}

#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title::before {
    content: "";
    flex: 0 0 3px;
    height: 12px;
    border-radius: 2px;
    background: rgba(90, 131, 255, 0.55);
}

/*
    التاريخ عند الخيط (أول عنصر في RTL) يأخذ اللون الأزرق ‎#5a83ff‎ الذي كان
    على ‎.champ-title‎ في ‎style.css‎ قبل تبديل الترتيب — لا ‎#c3ccea‎ الباهت
    ولا ‎#ffff‎ من قاعدة ‎.two-rows-title .date‎ القديمة التي تفوز أحياناً
    بالتخصيص على خلفيات فاتحة.

    والجولة ثانياً بخطٍّ أخفّ كما كان التاريخ سابقاً (‎#707488‎).
*/
#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 900;
    color: #5a83ff;
    margin-right: 0;
    margin-left: 0;
}

#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-title,
#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-title b {
    font-size: 10px;
    font-weight: 600;
    color: #707488;
}

#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-run-date-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #707488;
    margin-right: 0;
    margin-left: 0;
}

/*
    ‎champ-run-date‎ في صفحة الفريق سطر تاريخٍ وحده يتبع ترويسة بطولةٍ سابقة،
    فهو تابعٌ لا ترويسة جديدة — فلا خيط أكسنت له.
*/
#match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title.champ-run-date::before {
    display: none;
}

/*
   فاصلٌ قبل ترويسة الجولة الثانية فصاعداً لا قبل الأولى، والشرط معلَّق على
   وجود صفٍّ قبلها.

   و‎.mb-row-shell‎ حلّت محلّ ‎.ajax-match-item‎ في المحدِّدات الثلاثة: الصفّ
   في هذه القوائم صار داخل غلافٍ (انظر كتلة الغلاف أدناه)، فلم يبق أخاً
   مباشراً للترويسة — والمحدِّد المعلَّق على الأخوّة يسقط صامتاً فتلتصق
   الجولات بعضها ببعض. والقوائم الثلاث ‎#coming_match_load‎ و‎#end_match_load‎
   و‎#postponed_match_load‎ لا وجود لها إلا في قوالب البطولة والفريق، وكلّها
   منقولةٌ إلى الغلاف، فلا حاجة إلى إبقاء الصيغة القديمة معها.
*/
#match_list_conf:not(.home-matches-panel) #match_block_list > .matches-wrapper {
    margin: 0;
}

#match_list_conf:not(.home-matches-panel) #match_block_list > .matches-week-title + .mb-row-shell ~ .matches-week-title,
#match_list_conf:not(.home-matches-panel) #coming_match_load > .matches-week-title + .mb-row-shell ~ .matches-week-title, #match_list_conf:not(.home-matches-panel) #end_match_load > .matches-week-title + .mb-row-shell ~ .matches-week-title, #match_list_conf:not(.home-matches-panel) #postponed_match_load > .matches-week-title + .mb-row-shell ~ .matches-week-title {
    margin-top: 14px;
}

/* --------------------------------------------------------------------------
   غلاف الصفّ: مرجع موضع للأيقونة، لا صندوق تخطيط.

   صفّ المباراة كلّه وسم ‎<a>‎، وأيقونة البثّ/التشكيلة/الفيديو وسم ‎<a>‎ آخر،
   و‎<a>‎ داخل ‎<a>‎ ترميز يفكّه المحلّل فيقلب شجرة الصف رأساً على عقب. فصارت
   الأيقونة شقيقة الصفّ داخل هذا الغلاف (الشرح الكامل والبديل المرفوض في
   ‎resources/views/partials/match-quick-link.blade.php‎).

   و‎position: relative‎ هنا لأنّ ‎.active-match-quick-links‎ مطلقة الموضع من
   ‎style.css‎، وكانت تُثبَّت على الصفّ حين كانت داخله. ولا ‎display‎ ولا مقاس:
   الغلاف كتلة عادية وابنه الوحيد في المجرى هو الصفّ — الأيقونة خارج المجرى —
   فارتفاعه ارتفاع الصفّ حرفياً وعرضه عرضه، ويقع ‎top: 50%‎ في منتصف الصفّ كما
   كان تماماً. وهذا سبب اختيار الغلاف على البدائل: لا يضيف صندوقاً محسوساً،
   فلا ارتفاع صفٍّ يتغيّر ولا عمود يزحزح.

   والاسم ‎mb-row-shell‎ نفسه المستعمل في الصفحة الرئيسية عمداً: الغلاف واحد
   والمعنى واحد، وإن اختلف الملفّ الذي يُنسّق الصفّ نفسه.

   والقاعدة بلا قيدٍ لسياق: الغلاف يُستعمل في أربع عشرة صفحة، منها الملعب
   الذي صفوفه خارج ‎#match_list_conf‎ أصلاً. وتقييدها كان سيعني قاعدةً مطابقة
   في ‎stadium.css‎ ثمّ ثالثة لكلّ صفحةٍ تُضاف — وأوّل واحدة تُنسى تُنتج العطل
   نفسه الذي أُصلح هنا: أيقونة تُثبَّت على جدٍّ بعيد فتهرب إلى أعلى الصفحة.
   -------------------------------------------------------------------------- */
.mb-row-shell {
    position: relative;
    isolation: isolate;
}

/*
   13px لا 12px: القيمة في ‎style.css‎ (‎left: 12px‎، و‎right: 12px‎ في ‎ltr.css‎)
   كانت تُقاس من صندوق حشو الصفّ لأنّ الصفّ هو مرجع الموضع، وللصفّ حدٌّ
   بسماكة ‎1px‎ — فكانت الأيقونة تقف على بعد 13px من حرفه الظاهر. والغلاف بلا
   حدّ، فالقيمة نفسها تصير 12px وتنزلق الأيقونة بكسلٍ واحد نحو الحرف.

   والتعويض هنا أولى من تصفير حدّ الصفّ أو نقل الحدّ إلى الغلاف: حدّ الصفّ
   شفّافٌ يتلوّن عند ‎:hover‎، وأيّ عبثٍ به يغيّر هيئة التحويم في كلّ الصفوف
   لأجل كسلٍ واحد في الأيقونة.
*/
/* Match cards — default (upcoming / ended) */
#match_list_conf .inline-match-item:not(.mb-row) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 62px;
    margin-bottom: 4px;
    /* Reserve space for quick-action icons so rows stay aligned with or without video/lineup */
    padding: 12px 14px 12px 44px;
    background: #191d2d;
    border: 1px solid transparent;
    border-radius: var(--mb-radius, 8px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    cursor: pointer;
}
/*
   آخر صفٍّ في القائمة لا فسحة تحته — وشرطان لا شرط لأنّ الصفحات على بنيتين.

   الأوّل للصفحات التي لم تُنقل بعد إلى الغلاف (الحكم والمدرّب والمعلّق
   ومباريات اليوم)، وهذا الملفّ محمَّل في كلّ الصفحات من
   ‎layout/header.blade.php‎. والثاني للبطولة والفريق: الصفّ فيهما صار داخل
   غلاف، فآخرُ القائمة هو الغلاف لا الصفّ.

   واستُثنيت في الأوّل حالة الصفّ داخل غلاف، لأنّ ‎:last-child‎ وحدها صارت
   هناك تطابق كلّ صفٍّ لا أيقونة فيه — إذ هو حينها آخر أبناء غلافه — فتبتلع
   الفسحة بين صفوف القائمة كلّها.

   و‎:where()‎ في الموضعين ليست زخرفة: تخصيصها صفر، فيبقى تخصيص الشرطين
   ‎(1,3,0)‎ و‎(1,2,0)‎ — أي دون قاعدة ‎.inline-match-item.active-match‎ في كتلة
   ‎max-width: 767px‎ أسفل الملفّ، فتظلّ هي صاحبة الكلمة على الصفّ الجاري
   الأخير كما كانت قبل الغلاف بالضبط. وبغير ‎:where()‎ يرتفع التخصيص فينقلب
   الترتيب وتُبتلع أربعة بكسلات من ذيل قائمة «جارية الآن» على الشاشات الضيّقة.
*/
#match_list_conf .inline-match-item:not(.mb-row):last-child:not(:where(.mb-row-shell > .inline-match-item)),
#match_list_conf :where(.mb-row-shell:last-child) > .mb-row {
    margin-bottom: 0;
}
#match_list_conf .inline-match-item:not(.mb-row):hover {
    background: #1e2438;
    border-color: rgba(57, 219, 191, 0.15);
}
#match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}
#match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item a {
    margin-left: 0 !important;
    margin-right: 0 !important;
}



@keyframes mmLiveTimePulse {
    0%, 100% {
        opacity: 1;
        color: #39dbbf;
    }
    50% {
        opacity: 0.45;
        color: #5ee8cc;
    }
}



@keyframes mmLiveTimePulseLight {
    0%, 100% {
        opacity: 1;
        color: #2aab95;
    }
    50% {
        opacity: 0.45;
        color: #3dccb3;
    }
}
/* Penalties — full-width row below the match line */
#match_list_conf .inline-match-item:not(.mb-row).penalties, #match_list_conf .inline-match-item:not(.mb-row):has(.penalties-wrapper) {
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 10px;
}
/* Show more — load matches (صف امتداد للقائمة، لا زر عائم) */
#match_list_conf .matches-wrapper.wide > .inline-loader {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0 4px;
    margin: 6px 0 0;
}

#match_list_conf .matches-wrapper.wide > .inline-loader:not(:empty) {
    display: flex;
}

#match_list_conf .matches-wrapper.wide > .inline-loader img {
    width: 28px;
    height: 28px;
    opacity: 0.85;
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 40px;
    margin: 6px 0 0;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--mb-row-line, rgba(255, 255, 255, 0.06));
    border-radius: var(--mb-radius, 8px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--mb-text-muted, #8b90a5);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.65;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button:hover {
    background: var(--mb-row-bg-hover, #1d2233);
    border-color: rgba(57, 219, 191, 0.18);
    color: var(--mb-text, #d8dbe8);
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button:hover::after {
    transform: rotate(45deg) translateY(1px);
    opacity: 0.9;
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button:active {
    background: var(--mb-row-bg, #191d2d);
}

#match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button:focus-visible {
    outline: 2px solid rgba(57, 219, 191, 0.35);
    outline-offset: 1px;
}
/*
   الترويسة في الوضع الفاتح: نفس خلفية رأس البطولة في الرئيسية
   (‎--mb-champ-header-bg‎). وسقط معها سابقاً ‎background‎ و‎border-color‎
   اللذان كانا هنا لأنّ الشيء الملوَّن نفسه سقط.
   وخيط الأكسنت يخفت في الفاتح: النسبة نفسها فوق سطح فاتح تُقرأ أقوى.
*/
html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title::before {
    background: rgba(74, 95, 158, 0.45);
}
html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .date {
    color: #5a83ff;
}
html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-title,
html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-title b,
html.light #match_list_conf:not(.home-matches-panel) .matches-week-title.two-rows-title .champ-run-date-label {
    color: #6b7185;
}
/*
   ‎#f4f6fb‎ كان يصبغ الصفّ فوق سطح مزرقّ فيتراكم الميل إلى الأزرق. الأبيض
   هنا هو ‎--mb-row-bg‎ في الفاتح، وهو أيضاً ما يقرّره ‎light.css‎ لـ
   ‎.inline-match-item‎ قبل أن يغلبه هذا الملف بتخصيصه الأعلى.
   و‎border-color‎ لازم لا زخرفة: القاعدة الأساس أعلاه تضع ‎transparent‎، فبلا
   حدٍّ يصير الصفّ أبيض على ‎#f8f9fc‎ فيذوب. ‎#e6eaf3 (--mb-panel-border)‎ لا
   ‎#F1F2F8‎ الذي في light.css لأن الأخير يكاد لا يُرى على ذلك السطح.
   الحصر بـ ‎:not(.home-matches-panel)‎ كما في رأس الملف: صفّ الصفحة
   الرئيسية مملوك لـ match-board.css. */
html.light #match_list_conf .inline-match-item:not(.mb-row) {
    background: #ffffff;
    border-color: #e6eaf3;
}
html.light #match_list_conf .inline-match-item:not(.mb-row):hover {
    background: #f5f7fc;
    border-color: rgba(57, 219, 191, 0.25);
}
html.light #match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button {
    background: var(--mb-center-bg, #f4f6fb);
    border-color: #e6eaf3;
    color: #6b7185;
}
html.light #match_list_conf .matches-wrapper.wide > .show-more-matches.view-all-button:hover {
    background: #eef1f8;
    border-color: #d8dce8;
    color: #3d4354;
}
/* Live matches — horizontal logo + name (not stacked) */
html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item {
    gap: 6px;
}
html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item a {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/*
   سقط من هنا ‎html[dir="ltr"] … .date { margin-left: auto }‎: كان النظير
   الإنجليزي للدفع إلى الحرف المقابل، وقد سقط أصلُه فلا معنى لنظيره.
   والقاعدة المحايدة تصفّر الهامشين معاً فتصحّ في الاتجاهين بلا استثناء.
*/
html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row) {
    padding: 12px 44px 12px 14px;
}
html[dir="ltr"] #match_list_conf .champ-settings-dropdown-wrap {
    margin-left: 6px !important;
    margin-right: 0 !important;
}
/* ── Responsive (tablet) ── */
@media (max-width: 1199px) {
    #match_list_conf .inline-match-item:not(.mb-row) .first-team .team---item b,
    #match_list_conf .inline-match-item:not(.mb-row) .second-team .team---item b {
        max-width: 90px;
    }

    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row) .first-team .team---item b,
    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row) .second-team .team---item b {
        max-width: none;
    }

    html[dir="ltr"] #match_list_conf .matches-wrapper .header .champ-title {
        max-width: 42%;
    }
}



@media (max-width: 991px) {
    #match_list_conf {
        gap: 12px;
    }

    #match_list_conf .inline-match-item:not(.mb-row) {
        min-height: 56px;
        padding: 10px 10px 10px 40px;
    }

    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row) {
        padding: 10px 40px 10px 10px;
    }

    /*
        صفّ المباراة الجارية على الجوال: سطرٌ واحد كبقية الصفوف.

        كان هنا ‎flex-direction: column‎ موصوفاً بأنه «تصميم سايدبار صفحتي
        الفريق والبطولة». والوصف كان صحيحاً يوم كان ‎#match_list_conf‎ عموداً
        ضيّقاً؛ أما تحت 991px فـ‎championship-mobile.css‎ و‎team-mobile.css‎
        يعطيانه ‎flex: 0 0 100%‎ فيصير بعرض الشاشة كاملاً — لا سايدبار. فكان
        العمود يكدّس ثلاثة أسطر (شعار، اسم، نتيجة) في عرضٍ يتّسع لسطر واحد،
        فيرتفع الصفّ إلى ‎~92px‎ وبقية الصفوف ‎52px‎، وتهبط النتيجة بعيداً عن
        شعارها فلا تُقرأ منسوبةً إليه.

        ‎justify-content‎ منطقيّ لا حرفيّ: ‎flex-end‎ على فريق البداية
        و‎flex-start‎ على فريق النهاية يدفعان محتوى الجهتين نحو منتصف الصفّ في
        الاتجاهين معاً، فتلتصق كل نتيجة بدائرة الوقت ويبقى الاسمان على
        الحرفين الخارجيّين. فلا يلزم استثناءٌ لـ‎html[dir="ltr"]‎.
    */
    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: 1 1 0;
        min-width: 0;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item.first-team {
        justify-content: flex-end;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item.second-team {
        justify-content: flex-start;
    }

    /*
        إبطال بقيّتين من تصميم سطح المكتب في ‎style.css‎:
        ‎.inline-match-item.active-match .match-team-item .team---item‎ يأخذ
        هناك ‎flex-wrap: wrap‎ و‎margin-left: 25px‎ (و‎margin-right‎ لفريق
        النهاية). الالتفاف كان يكسر الشعار عن الاسم فيظهران سطرين — وهو ما
        قُرئ «الشعار فوق والاسم تحته» — والـ25px تزيح كتلة الفريق عن نتيجتها.

        الإبطال هنا لا في ‎style.css‎: التصميم العريض فوق 991px ما زال يبني
        عليهما، فحذفهما من المصدر يكسر سطح المكتب.
    */
    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item .team---item {
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
    }
}
/* ── Mobile (small screens) ── */
@media (max-width: 767px) {
    /*
        حُذف من هنا ستّ قواعد كانت تنسّق شريط أدوات الصفحة الرئيسية
        (‎.section-title‎ و‎.section-actions‎ و‎.inline-date-filter span‎
        و‎.match-filter-wrapper‎ و‎.mobile-header-item‎).

        ‎match-board.css‎ صار يملك هذا الشريط بالكامل، وكانت هذه القواعد
        تغلبه بالتخصيص في ثلاثة مواضع: ‎flex-wrap: wrap‎ مع ‎flex: 1 1 100%‎
        كانا يدفعان الأدوات إلى سطر كامل مستقلّ ويباعدان بينها بـ
        ‎space-between‎، و‎padding: 0‎ يلغي حشو العنوان، و‎min-width: 68px‎
        يلغي العرض المحجوز للتاريخ.

        محدّداتها كلها مقيّدة بـ ‎#match_list_conf.home-matches-panel‎ فلا
        وجود لها خارج الصفحة الرئيسية، وحذفها أنظف من رفع التخصيص في
        ‎match-board.css‎ ثلاث مرات لمجرّد التغلّب عليها.
    */

    #match_list_conf .inline-match-item:not(.mb-row) {
        min-height: 52px;
        padding: 8px 8px 8px 32px;
    }

    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row) {
        padding: 8px 32px 8px 8px;
    }

    #match_list_conf .inline-match-item:not(.mb-row) .result-wrap .match-date {
        font-size: 12.5px;
    }

    #match_list_conf .inline-match-item:not(.mb-row) .result-wrap .match-date .mb-meridiem {
        font-size: 9.5px;
    }

    #match_list_conf .inline-match-item:not(.mb-row) .first-team .team---item b,
    #match_list_conf .inline-match-item:not(.mb-row) .second-team .team---item b {
        max-width: 68px;
        font-size: var(--mb-name);
    }

    /*
        ‎94px‎ كان مقاس الصفّ المكدَّس (ثلاثة أسطر لكل فريق). وبعد أن صار الصفّ
        سطراً واحداً فأطولُ ما فيه دائرة الوقت ‎50px‎، فـ‎66px‎ = ‎50‎ + حشو
        ‎8px‎ من الجهتين. والقيمة ‎min-height‎ لا ‎height‎ حتى يتّسع الصفّ إن
        ظهر سطر حالة («الشوط الثاني») تحت الدائرة.

        والحشو يبقى غير متناظر: ‎34px‎ من جهة البداية هي مساحة أيقونات
        الإجراء (التشكيل/الفيديو) المحجوزة في القاعدة الأساس أعلاه، وبها
        ترتصف الصفوف الجارية مع المنتهية على خطٍّ واحد سواءٌ حملت أيقونة أم لا.
    */
    #match_list_conf .inline-match-item:not(.mb-row).active-match {
        min-height: 66px;
        padding: 8px 8px 8px 34px;
        margin-bottom: 4px;
    }

    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row).active-match {
        padding: 8px 34px 8px 8px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .active-match-progress {
        min-width: 76px;
        margin: 0 8px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-inner-progress-wrap {
        min-width: 76px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .active-match-progress .match-inner-progress-wrap > .result-status-text.live-match-status {
        font-size: 9px;
        margin-top: 3px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item .img {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item .team---item b,
    html[dir="ltr"] #match_list_conf .inline-match-item:not(.mb-row).active-match .match-team-item .team---item b {
        max-width: 80px;
        font-size: var(--mb-name-live);
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .team-result {
        font-size: 19px;
    }

    #match_list_conf .inline-match-item:not(.mb-row).active-match .match-inner-progress-wrap .number {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   عنوان القسم: «المباريات القادمة» / «المنتهية» / «المؤجّلة»

   شريط ترويسة داخل اللوحة — نفس أسلوب ‎.section-title‎ في الرئيسية:
   صفّ كامل بعرض اللوحة، حشو داخلي، وخط سفلي يفصل العنوان عن قائمة المباريات.
   -------------------------------------------------------------------------- */

#match_list_conf:not(.home-matches-panel) .matches-wrapper.wide > div:has(> .matches-top-title) {
    margin-inline: calc(var(--mb-panel-inset, 6px) * -1);
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--mb-row-line);
}

#match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide) > .matches-wrapper.wide:first-child > div:has(> .matches-top-title),
#match_list_conf:not(.home-matches-panel) .champ-tab-item.matches > .matches-wrapper.wide:first-child > div:has(> .matches-top-title) {
    margin-top: calc(var(--mb-panel-inset, 6px) * -1);
}

#match_list_conf:not(.home-matches-panel) .matches-wrapper.wide > div:has(> .matches-top-title) + * {
    padding-top: 2px;
}

#match_list_conf:not(.home-matches-panel) .matches-top-title {
    display: block;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--mb-text-strong);
    text-align: center;
}

#match_list_conf:not(.home-matches-panel) .matches-top-title::before {
    display: none;
    content: none;
}

@media (max-width: 991px) {
    #match_list_conf:not(.home-matches-panel) .matches-wrapper.wide > div:has(> .matches-top-title) {
        margin-inline: calc(var(--mb-panel-inset, 4px) * -1);
        padding-inline: 12px;
    }

    #match_list_conf:not(.home-matches-panel):has(> .matches-wrapper.wide) > .matches-wrapper.wide:first-child > div:has(> .matches-top-title),
    #match_list_conf:not(.home-matches-panel) .champ-tab-item.matches > .matches-wrapper.wide:first-child > div:has(> .matches-top-title) {
        margin-top: calc(var(--mb-panel-inset, 4px) * -1);
    }
}