/* Table Styles (Admin & Shortcode) */

/* Table Header (Admin) */
.table-header {
    display: flex;
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.table-header .header-item {
    text-align: center;
    font-weight: bold;
}

.table-header .header-item.match { width: 30%; }
.table-header .header-item.result { width: 15%; }
.table-header .header-item.time { width: 10%; }
.table-header .header-item.status { width: 10%; }
.table-header .header-item.league { width: 20%; }
.table-header .header-item.channel { width: 10%; }
.table-header .header-item.actions { width: 5%; }

/*  Match Table (Shortcode) */
.btolat-matches-table-container {
    width: 100%;
}
.btolat-matches-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.btolat-matches-table th,
.btolat-matches-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.btolat-matches-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.btolat-matches-table td a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  text-decoration: none;
  color: inherit;
}
.table-match-info{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.table-match-info span{
    margin: 0 5px;
}

/* استهداف حاوية التبويبات (المشتركة في الواجهتين) */
.matches-nav {
    margin-bottom: 20px; /* ضمان وجود مسافة سفلية */
    text-align: center;  /* توسيط الأزرار */
}

/* استهداف الأزرار نفسها */
.matches-nav .button {
    /* إضافة الهامش المطلوب */
    margin-left: 5px !important;
    margin-right: 5px !important;
}

/* Shortcode Table Specific Styles */
.btolat-matches-table-container {
    width: 100%;
}

.btolat-matches-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.btolat-matches-table th,
.btolat-matches-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.btolat-matches-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.btolat-matches-table td a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    text-decoration: none;
    color: inherit;
}

/* Match cell and info */
.btolat-matches-table .match-cell {
    padding: 0; /* Remove padding to allow full-width link */
}

.btolat-matches-table .table-match-info {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute items evenly */
    padding: 10px;
    width: 100%;
    text-align: center; /* Center text within each section */
}

/* Team Info */
.btolat-matches-table .team1-info,
.btolat-matches-table .team2-info {
    display: flex;
    flex-direction: column; /* Stack logo and details vertically */
    align-items: center; /* Center content */
    width: 25%; /* Adjust as needed */
}

.btolat-matches-table .team-logo {
    width: 30px; /* Adjust as needed */
    height: 30px;
    margin-bottom: 5px; /* Space between logo and details */
}

.btolat-matches-table .team-name {
    font-weight: bold;
    flex-wrap: wrap;
}

.btolat-matches-table .team-score {
    font-size: 1.2em; /* Adjust as needed */
    font-weight: bold;
    white-space: nowrap;
}

/* Match Status and Time */
.btolat-matches-table .match-status-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7em;
    white-space: nowrap;
}

/* League Section */
.btolat-matches-table .league-section td {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
    padding: 10px; /* Adjust padding as needed */
}

/* Status Colors */
.btolat-matches-table .match-status-time.ended {
    color: #007bff; /* Blue */
}

.btolat-matches-table .match-status-time.live {
    color: #dc3545; /* Red */
    animation: blinker 1s linear infinite;
}

.btolat-matches-table .match-status-time.notYet {
    color: #28a745; /* Green */
}

.btolat-matches-table .match-status-time.Postponed {
    color: #ffc107;
}

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



.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px; 
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* --- تنسيق زر تفاصيل البطولة في جدول الشورت كود --- */
/* 1. إعداد الخلية (التي تحتوي الاسم والزر) */
.btolat-matches-table tr.league-section td {
    display: flex;
    justify-content: flex-start; /* ★ اجعل العناصر تبدأ من اليمين (في RTL) */
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%; /* تأكد أن الخلية تأخذ العرض الكامل */
    
}

/* 2. تنسيق الاسم (strong) */
.btolat-matches-table tr.league-section td strong {
    flex-grow: 0;   /* لا تجعل الاسم يتمدد */
    flex-shrink: 1; /* اسمح له بالانكماش إذا كان طويلاً */
    margin-left: 10px; /* إضافة هامش بين الاسم والزر (لـ LTR) */
}

/* 3. تنسيق الزر (a) */
.btolat-matches-table tr.league-section td a.league-details-button {
    /* ★ تحديد الحجم بدقة */
    display: inline-block; /* ليتصرف كعنصر inline مع حجم */
    width: auto;           /* ★ العرض التلقائي بحجم المحتوى */
    max-width: 150px;      /* أقصى عرض (احتياطي) */
    flex-grow: 0;          /* ★ لا تجعل الزر يتمدد */
    flex-shrink: 0;        /* ★ لا تجعل الزر ينكمش */
    
    /* التنسيقات الأخرى كما هي */
    padding: 2px 10px;
    font-size: 12px;
    height: auto;
    line-height: 1.6;
    text-decoration: none;
    border-radius: 3px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    font-weight: normal;
    white-space: nowrap; 
    text-align: center;
    
    /* ★ تحديد الهامش لدفعه إلى اليسار */
    margin-right: auto; /* ★ هذا هو أهم سطر لدفعه لليسار (في RTL) */
    margin-left: 5px;   /* هامش بسيط من الحافة (لـ LTR) */
}

/* تنسيق عند مرور الماوس */
.btolat-matches-table tr.league-section td a.league-details-button:hover {
    background-color: #e5e5e5;
    border-color: #bbb;
    color: #000;
}

/* --- تنسيق ركلات الترجيح (جدول الشورت كود) --- */
.btolat-matches-table .match-status-time .match-penalty-score {
    display: block; /* اجعلها تظهر في سطر منفصل */
    font-size: 1.1em; /* حجم أكبر قليلاً من الوقت */
    font-weight: bold;
    color: #dc3545; /* لون أحمر مميز */
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .table-header {
        display: none; /* Hide header on small screens */
    }

      .btolat-matches-table th,
    .btolat-matches-table td {
        padding: 5px 3px; /* تقليل الحشو الأفقي أكثر */
        font-size: 11px;
        vertical-align: middle;
        border-left: none; /* إزالة الحدود الجانبية لتوفير مساحة؟ */
        border-right: none;
    }
    /* الإبقاء على الحد السفلي للفصل */
    .btolat-matches-table td {
      border-bottom: 1px solid #ddd;
    }
     /* إزالة حد الخلية للسماح للرابط بأخذ العرض الكامل */
     .btolat-matches-table .match-cell {
        padding: 0;
        border: none; /* إزالة حدود الخلية الخارجية */
    }
     .btolat-matches-table .match-cell a {
        padding: 5px 2px; /* تطبيق الحشو على الرابط الداخلي بدلاً من الخلية */
        display: flex; /* Ensure link itself is flex container */
        width: 100%;
        align-items: center;
    }


    .btolat-matches-table .table-match-info {
        /* لا تحتاج padding هنا إذا تم تطبيقه على الرابط */
        /* padding: 5px; */
        display: flex;
        align-items: center;
        justify-content: space-between; /* العودة إلى space-between لتوزيع أفضل؟ أو جرب space-around */
        width: 100%;
        overflow: hidden;
        gap: 2px; /* تقليل المسافة بين العناصر */
    }

    .btolat-matches-table .team-logo {
         /* display: none; */ /* تم إلغاؤه - الشعارات ستظهر */
         width: 22px; /* تصغير الشعار أكثر */
         height: 22px;
         object-fit: contain;
         margin-bottom: 2px;
         flex-shrink: 0; /* منع الشعار من الانكماش */
    }

    .btolat-matches-table .team1-info,
    .btolat-matches-table .team2-info {
        /* الحفاظ على التكدس العمودي للشعار والاسم */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* جعلها أكثر مرونة وقابلية للانكماش */
        flex: 1 1 auto;  /* السماح بالنمو والانكماش */
        min-width: 0;    /* السماح بالانكماش الشديد */
        padding: 0 1px;  /* تقليل الحشو لأقصى درجة */
        overflow: hidden;
        text-align: center;
    }

    .btolat-matches-table .team-name {
        font-size: 0.8em; /* تصغير إضافي لاسم الفريق */
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%; /* يجب أن تأخذ عرض حاوية الفريق */
        display: block;
        text-align: center;
        line-height: 1.2; /* تقليل ارتفاع السطر قليلاً */
    }

    .btolat-matches-table .team-score {
        font-size: 1em;
        font-weight: bold;
        white-space: nowrap;
        padding: 0 3px; /* مسافة بسيطة حول النتيجة */
        flex-shrink: 0;
        text-align: center;
        min-width: 15px; /* عرض أدنى بسيط للنتيجة */
    }

    .btolat-matches-table .match-status-time {
        font-size: 0.7em; /* تصغير إضافي للحالة والوقت */
        white-space: nowrap; /* الحفاظ على عدم الالتفاف هنا */
        text-align: center;
        padding: 0 2px; /* تقليل الحشو */
        flex-shrink: 1; /* السماح بالانكماش */
        /* إعادة التنسيق العمودي */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.1; /* تقليل ارتفاع السطر */
    }

     .btolat-matches-table .match-status-time span {
        margin: 0;
        padding: 0;
        display: block;
     }

    .btolat-matches-table .league-section td {
        padding: 5px;
        font-size: 10px;
    }
}

/* --- ★★★ بداية: تنسيق إطار الملعب والقنوات (V4 - توسيط) ★★★ --- */

/* 1. تعديل خلية المباراة الرئيسية لإزالة الحد السفلي */
.btolat-matches-table tr.match-row td.match-cell {
    border-bottom: none; 
}

/* 2. تنسيق الخلية الإضافية (td.extra-info-cell) */
.btolat-matches-table tr.extra-info-row td.extra-info-cell {
    padding: 0; 
    background-color: #fdfdfd; 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #f0f0f0; 
    border-left: none;
    border-right: none;
}

/* 3. الحاوية الداخلية للإطار الإضافي (div.match-extra-info) */
.btolat-matches-table div.match-extra-info {
    display: flex; 
    flex-wrap: wrap; 
    
    /* ★★★ هذا هو التعديل الوحيد ★★★ */
    justify-content: center; /* توسيط العناصر في المنتصف */
    
    align-items: center;
    padding: 8px 12px; 
    width: 100%; 
    box-sizing: border-box; 
    gap: 12px; /* المسافة بين الملعب والقنوات */
}

/* 4. تنسيق العنصر الفردي (الملعب أو القناة) */
.btolat-matches-table .extra-item {
    display: flex;
    align-items: center;
    font-size: 12px; 
    color: #555; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. تنسيق الأيقونة (SVG) */
.btolat-matches-table .match-extra-icon {
    width: 20px;
    height: 20px;
    margin-left: 5px; 
    fill: #28a745; 
    flex-shrink: 0; 
}

/* 6. تنسيق خاص للقنوات للسماح بالالتفاف */
.btolat-matches-table .extra-item.channels {
    white-space: normal; 
    flex-shrink: 1; /* السماح بالانكماش */
    min-width: 100px; 
    /* ★ تم حذف text-align و direction ★ */
}

/* 7. تنسيق خاص للملعب */
.btolat-matches-table .extra-item.stadium {
    flex-shrink: 0; /* عدم السماح للملعب بالانكماش */
    /* ★ تم حذف text-align و direction ★ */
}

/* 8. تعديلات للشاشات الصغيرة */
@media (max-width: 768px) {
    .btolat-matches-table div.match-extra-info {
        padding: 6px 8px;
        gap: 8px;
        /* ★ (اختياري) ضمان التوسيط أيضاً في الموبايل */
        justify-content: center; 
    }
    
    .btolat-matches-table .extra-item {
        font-size: 10px; 
    }

    .btolat-matches-table .match-extra-icon {
        width: 20px;
        height: 20px;
        margin-left: 3px;
    }
    
    /* ★ تم حذف القاعدة الخاصة بـ .extra-item.channels في الميديا كويري ★ */
}
/* --- ★★★ نهاية: تنسيق إطار الملعب والقنوات ★★★ --- */


/* --- ★★★ بداية: تعديل تلوين شريط البطولة (أخضر وأبيض) ★★★ --- */

/* 1. تلوين خلفية الخلية باللون الأخضر */
.btolat-matches-table tr.league-section td {
    background-color: #000000 !important; /* استخدام الأخضر (يمكنك تغييره) مع !important لضمان التجاوز */
}

/* 2. تلوين نص اسم الدوري (strong) باللون الأبيض */
.btolat-matches-table tr.league-section td strong {
    color: #ffffff !important; /* استخدام الأبيض مع !important لضمان التجاوز */
}

/* 3. (اختياري) تعديل لون زر "تفاصيل البطولة" ليناسب الخلفية الخضراء */
.btolat-matches-table tr.league-section td a.league-details-button {
    background-color: #ffffff; /* خلفية بيضاء */
    color: #28a745; /* نص أخضر */
    border-color: #ffffff; /* حدود بيضاء */
}
.btolat-matches-table tr.league-section td a.league-details-button:hover {
    background-color: #f0f0f0; /* خلفية رمادية فاتحة عند المرور */
    color: #228c3a;
}

/* --- ★★★ نهاية: تعديل تلوين شريط البطولة ★★★ --- */