/* Match Container (Admin) */
.match-container {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.match-container > div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Match Elements */
.match-details {
    width: 30%;
    direction: rtl;
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.match-time,
.match-status,
.match-league,
.match-channels,
.btolat-match-pull {
    justify-content: center;
}

.match-time { width: 10%; }
.match-status { width: 10%; }
.match-league { width: 20%; }
.match-channels { width: 10%; }
.btolat-match-pull { width: 10%; }

/*
 * --- إصلاح v5: تنسيق منفصل لكل فريق (بناءً على اختلاف الـ HTML) ---
 */

/* 1. التنسيق المشترك (لكلا الفريقين) */
.team-info {
    display: flex;
    align-items: center; /* توسيط أفقي */
    justify-content: center; /* توسيط رأسي */
    width: 45%;
    white-space: normal;
    min-height: 60px;
    direction: ltr; /* (مهم) لمنع أي انعكاسات من الأب */
}

.team-info img {
    max-width: 32px;
    max-height: 32px;
    margin: 0; /* إلغاء الهوامش الافتراضية */
}

.team-info .team-name {
    font-weight: bold;
    margin: 0; /* إلغاء الهوامش الافتراضية */
    text-align: center;
    white-space: normal;
    font-size: 0.9em;
    line-height: 1.9;
    width: 100%;
}

/* --- 2. التنسيق الخاص (هنا يحدث الإصلاح) --- */

/*
 * الفريق الثاني (last-of-type)
 * الـ HTML الخاص به صحيح: (img, span)
 * لذلك نستخدم (column) عادي.
 */
.match-details .team-info:last-of-type {
    flex-direction: column; /* عمود عادي: الشعار أولاً، ثم الاسم */
}
.match-details .team-info:last-of-type img {
    margin-bottom: 5px; /* مسافة أسفل الشعار */
}

/*
 * الفريق الأول (first-of-type)
 * الـ HTML الخاص به معكوس: (span, img)
 * لذلك نستخدم (column-reverse) ليعكس الترتيب ويصبح صحيحاً.
 */
.match-details .team-info:first-of-type {
    flex-direction: column-reverse; /* ★★★ الأهم: عمود معكوس ★★★ */
}
.match-details .team-info:first-of-type img {
    margin-top: 4px; /* مسافة أعلى الشعار (لأنه معكوس) */
}

.team-score {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 10px;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 0;
    width: 50px;
}

.match-time,
.match-status,
.match-league,
.match-channels {
    text-align: center;
    margin-bottom: 5px;
    white-space: nowrap;
}

.match-league,
.match-channel {
    font-size: 0.9em;
}

.match-league img {
    max-height: 24px;
    vertical-align: middle;
    margin-left: 5px;
}

.match-status {
    font-weight: bold;
}

/* Status Styles */
.match-status.ended {
    color: #757575 !important;
}
.match-status.live {
    color: #dc3545 !important;
    animation: blinker 1s linear infinite;
}
.match-status.notYet {
    color: #28a745 !important;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* Pull Button */
.btolat-match-pull {
    background-color: #0085ba;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    width: 100px;
    font-size: 0.8em;
    white-space: nowrap;
}

/* --- تنسيق ركلات الترجيح (واجهة سحب الآدمن) --- */
.match-container .team-score {
    display: flex;
    flex-direction: column; /* اجعل النتيجة والترجيح فوق بعض */
    align-items: center;
    justify-content: center;
}

.match-container .team-score-penalty {
    font-size: 0.7em; /* حجم أصغر */
    font-weight: bold;
    color: #dc3545; /* لون أحمر مميز */
    margin-top: -5px; /* تقليل المسافة العلوية */
}

/* Responsive */
@media (max-width: 768px) {
    .match-container {
        display: block;
        align-items: center;
    }
    .match-details {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }
    .team-info {
        width: 40%;
    }
    .team-info a {
        font-size: 13px;
    }
    .team-score {
        font-size: 1.2em;
        margin: 0 5px;
    }
    .match-time,
    .match-status,
    .match-league,
    .match-channels,
    .btolat-match-pull {
        width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .btolat-match-pull {
        width: 50%;
        padding: 5px 10px;
        font-size: 0.8em;
    }
    .match-league img {
        display: none;
    }
    .table-header {
        font-size: 12px;
    }
}

/*
 * --- تنسيق شريط رأس جدول السحب (الجديد) ---
 */

/* 1. تصميم الشريط الرئيسي (للكومبيوتر) */
.table-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; /* يطابق تنسيق حاوية المباراة */
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-weight: bold;
    color: #444;
}

/* 2. تصميم العناصر داخل الشريط */
.header-item {
    box-sizing: border-box;
    text-align: center; /* الافتراضي هو الوسط */
    flex-grow: 0;
    flex-shrink: 0;
}

/* 3. محاذاة عناصر الشريط مع عرض المحتوى */
/* (نستخدم نفس العرض المئوي الموجود في تنسيق المباراة) */
.header-item.match {
    width: 30%; /* يطابق .match-details */
    text-align: right;
    padding-right: 10px; /* لمحاذاة النص اليميني */
}

.header-item.time {
    width: 10%; /* يطابق .match-time */
}

.header-item.status {
    width: 10%; /* يطابق .match-status */
}

.header-item.league {
    width: 25%; /* يطابق .match-league */
}

.header-item.actions {
    width: 10%; /* يطابق .btolat-match-pull */
}



/*
 * --- إصلاح محاذاة شعارات وأسماء الفرق (الجديد) ---
 */

/*
 * ملاحظة: الحاوية الأب .match-details تعمل بنظام rtl
 * وهذا يعني أن:
 * - team-info:first-of-type هو الفريق المضيف (يظهر على اليمين).
 * - team-info:last-of-type هو الفريق الضيف (يظهر على اليسار).
 */

/* 1. الفريق الضيف (الذي يظهر على اليسار) */
.match-details .team-info:last-of-type {
    justify-content: flex-start; /* محاذاة لليسار (للتأكيد) */
    direction: ltr; /* تأكيد الاتجاه LTR الافتراضي للعناصر */
}

/* 2. الفريق المضيف (الذي يظهر على اليمين) - هذا هو الإصلاح */
.match-details .team-info:first-of-type {
    /*
     * نجبر هذا البلوك على العمل باتجاه RTL.
     * هذا يفعل شيئين:
     * 1. يعكس ترتيب العناصر الداخلية (ليصبح: الاسم أولاً ثم الشعار).
     * 2. يجعل محاذاة "flex-start" (الافتراضية) تبدأ من اليمين.
     * والنتيجة هي محاذاة لليمين (اسم الفريق ثم شعاره).
     */
    direction: rtl;
}

/* 3. إصلاح مسافات الشعار للفريق المضيف (الذي انعكس اتجاهه) */
.match-details .team-info:first-of-type img {
    margin-right: 5px; /* ★ إضافة: مسافة على يمين الشعار (بدلاً من اليسار) */
    margin-left: 0;    /* ★ إلغاء: إلغاء المسافة الافتراضية */
}

/* 4. إخفاء الشريط بالكامل في وضع الهاتف */
/* (نستخدم نفس نقطة التوقف الموجودة في ملفك) */
@media (max-width: 768px) {
    .table-header {
        display: none;
    }
}