/* الأساسيات */
body {
    font-family: 'Cairo', sans-serif;
    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
    margin-top: 0;
    padding: 0;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

header {
    background: #4a90e2;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    width: 110%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 24px;
    margin: 0;
}

/* الأزرار */
.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 10px;
}

button {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    flex: 1 1 calc(45% - 10px); /* عرض 45% لكل زر */
    max-width: 150px; /* تحديد عرض أقصى */
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

    }

button.primary {
    background-color: #38c172;
}

button.secondary {
    background-color: #6cb2eb;
}

button.danger {
    background-color: #e3342f;
}

/* المودال */
.modal {
    overflow-y: auto;  /* تمكين التمرير العمودي */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px; /* مسافة داخلية لتجنب حواف الشاشة */
}

/* تصميم عام للمودال */
.modal-content {
    overflow-y: auto;  /* تمكين التمرير العمودي */

    position: relative;
    background-color: white;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
}

/* تنسيق النموذج داخل المودال */
.modal-content form {
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* تنسيق العناصر داخل النموذج */
.modal-content label {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

/* تنسيق مدخلات النص */
.modal-content input[type="text"],
.modal-content input[type="number"] {
    width: calc(100% - 20px); /* تأكيد ألا تكون أكبر من الكونتينر */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: xx-large;
}

.modal-content h3 {
    margin-bottom: 15px;
    font-size: 20px;
    color: #333;
}



.modal-content button {
    margin-top: 15px;
    background-color: #38c172;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out;
}

.modal-content button:hover {
    background-color: #2d995b;
}



/* زر الإغلاق */
.close {
    position: absolute;
    top: -15px;
    right: 7px;
    font-size: 50px; /* جعل الزر أكبر */
    cursor: pointer;
    color: #92343e;
    display: block;
}

/* تحسين تصميم الحقول داخل المودال */
/* تصميم للكونتينر الذي يحتوي ال label وال input */
/* تصميم الحاوية لكل لاعب */
/* تصميم عام لكل حاوية نقاط للاعب */
.scoreContainer {
    display: flex;
    flex-direction: row;  /* العناصر مصطفة من اليسار إلى اليمين */
    align-items: center;  /* محاذاة العناصر في المركز عمودياً */
    width: 100%;  /* عرض الحاوية يشغل 100% من العرض المتاح */
    margin-bottom: 10px;  /* مسافة أسفل كل حاوية */
}


/* تنسيق حقل الإدخال */
.scoreContainer input[type="number"] {
    
    
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #38c172;
    border-radius: 5px;
    font-size: xx-large;
}


/*flex-grow: 2;  
padding: 10px 20px;  
border-radius: 5px;  
border: 1px solid #ccc; 
text-align: center;  
font-size:xx-large;
*/

#add-round-button{
    width: 100%;
    min-width: 100%;
}

.scoreContainer input {
    text-align: center;
    font-family: 'Cairo', sans-serif;
    color: #38c172;

    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #38c172;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    width: 100%; /* عرض الإدخال كامل */
}
/* Adjust or remove shadows and borders when the button is focused or active */


/* Additional styles to remove inner shadows if present */
button::-moz-focus-inner {
    border: 0; /* Specific to Firefox */
}

.scoreContainer input:focus {
   /* border-color: #4a90e2;
    background-color: #f4faff;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
    outline: none;*/
}

.scoreContainer input:hover {
  /*  border-color: #a1c4fd;*/
}

/* تحسين للشاشات الصغيرة */
@media (max-width: 480px) {
    h1 {
        font-size: 20px;
    }

    button {
        font-size: 12px;
        padding: 8px 10px;
        max-width: 120px; /* تقليل العرض الأقصى */
    }

    .modal-content {
        padding: 29px;
        margin: 54px;
        margin-top: 0px;
    }

    .modal-content h3 {
        font-size: 18px;
    }

    .scoreContainer label {
        font-size: 14px;
    }

    
}

/* الحاوية التي تحتوي على الجدول */
.table-container {
    width: 100%; /* عرض الحاوية بالكامل */
    max-height: 900px; /* تحديد أقصى ارتفاع للجدول */
    overflow-y: auto; /* تمكين التمرير العمودي */
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px; /* مسافة داخلية لتجنب الالتصاق بالأطراف */
}

/* الجدول */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 600px; /* عرض أدنى للجدول */
}

th, td {
    
    min-width: 100px;       

    border: 1px solid #dee2e6;
    font-size: 14px;
    text-overflow: ellipsis; /* قطع النصوص الطويلة */
    overflow: hidden; /* إخفاء النصوص الزائدة */
}

th {
    background-color: #4a90e2;
    color: white;
    font-weight: 600;
    top: 0;

}
td{
    white-space: nowrap; /* منع النصوص من الالتفاف */

}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

.total-row th, .total-row td {
    background-color: #e9ecef;
    font-weight: bold;
    color: #333;
}

/* تحسين العرض على الشاشات الصغيرة */
@media (max-width: 768px) {

    .toggle-class {
        display: block; /* إظهار الأزرار بشكل افتراضي */
    }
    
    .hidden {
        display: none; /* إخفاء الأزرار عند تطبيق هذه الفئة */
    }
    table {
        font-size: 20px; /* تصغير حجم النص */
    }

    th, td {
                min-width: 100px;       

    }
}



/*  جدول تحسين للشاشات الصغيرة */
@media (max-width: 480px) {

    .toggle-class {
        display: block; /* إظهار الأزرار بشكل افتراضي */
    }
    
    .hidden {
        display: none; /* إخفاء الأزرار عند تطبيق هذه الفئة */
    }


    th, td {
        
        min-width: 100px;       

    }
td{
    font-size: 20px;
padding: 8px;
}
button {
    padding: 8px 10px;
    font-size: 12px;
}

.table-container {
    max-height: 80vh; /* تقليل ارتفاع الجدول للموبايل */
}
}


/* الحاوية التي تحتوي على الجدول */
.table-container {
    width: 100%;
    max-height: 100vh; /* تحديد ارتفاع ثابت للجدول كنسبة من الشاشة */
    overflow-y: auto; /* تمكين التمرير العمودي */
    margin: 10px 0;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

/* الحاوية التي تحتوي على الجدول */
.table-container {
    width: 100%;
    max-height: 100vh; /* تحديد أقصى ارتفاع عند وجود الكثير من البيانات */
    overflow-y: auto; /* تمكين التمرير العمودي فقط عند الحاجة */
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* أقل ارتفاع للحاوية عند عدم وجود بيانات */
}

/* الجدول */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-width: 300px; /* عرض أدنى للجدول */
    max-width: 100%; /* لمنع الجدول من تجاوز الحاوية */
    table-layout: fixed; /* تثبيت عرض الأعمدة */
}

th, td {
    
    border: 1px solid #dee2e6;
    font-size: 14px;
    text-overflow: ellipsis; /* قطع النصوص الطويلة */
    overflow: hidden;
}

th {
    background-color: #4a90e2;
    color: white;
    font-weight: 600;
    top: 0;
    
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}

.total-row th, .total-row td {
    background-color: #e9ecef;
    font-weight: bold;
    color: #333;
}

/* عندما يكون الجدول فارغًا */
.table-container:empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* ارتفاع صغير عند عدم وجود بيانات */
}

/* الأزرار */
.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

button {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 2px 15px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    flex: 1 1 calc(30% - 10px); /* حجم مرن للأزرار */
    max-width: 150px; /* تحديد عرض أقصى للأزرار */
    font-family: 'Cairo', sans-serif;
}

button.primary {
    background-color: #38c172;
}

button.secondary {
    background-color: #6cb2eb;
}

button.danger {
    background-color: #e3342f;
}


.low-score {
    background: #C8E6C9; /* لون أخضر هادئ */
    color: #104c2a;
}

.high-score {
    background: #f8d7da; /* لون أحمر هادئ */
    color: #721c24;
}

#low-score {
    background: #C8E6C9; /* لون أخضر هادئ */
    color: #104c2a;
}

#high-score {
    background: #f8d7da; /* لون أحمر هادئ */
    color: #721c24;
}
.zero-score {
    background-color: #C8E6C9; /* خلفية خضراء فاتحة وهادئة */
}

.score-cell {
    font-size: 25px; /* تغيير حجم الخط للخلايا التي تحتوي على نقاط */
}

tfoot td{
    font-size: 25px; /* تغيير حجم الخط للخلايا التي تحتوي على نقاط */
  
}

th.player-name[contenteditable="true"]:focus {
    border: 1px solid #4CAF50; /* تمييز الخلية بحد */
}

.high-score {
    background-color: #ffcccb; /* لون للنقاط العالية */
}

.low-score {
    background-color: #d1e7dd; /* لون للنقاط المنخفضة */
}
.gwla{
    background-color: #e9ecef;
    font-weight: bold;
    color: #333;
}

.toggle-class {
    display: block; /* إظهار الأزرار بشكل افتراضي */
}

.hidden {
    display: none; /* إخفاء الأزرار عند تطبيق هذه الفئة */
}
.playername{
    text-align: center;
    font-family:  'Cairo', sans-serif;
    color: #38c172;
}
#num-players {
    text-align: center;
    font-family:  'Cairo', sans-serif;
    color: #38c172;
    
    width: 100%;
    padding: 15px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
}
.addplayeres{
    margin: 10px;
}

footer {
    width: 100%;
    background-color: #fff; /* لون خلفية داكن */
    padding: 20px 0; /* تباعد داخلي من أعلى وأسفل */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* ظل خفيف للفوتر */
    text-align: center; /* تمركز النص */
}

.footer-content a {
    color: #000; /* لون النص */
    font-size: 18px; /* حجم الخط */
    font-family: Arial, sans-serif; /* نوع الخط */
    text-decoration: none; /* إزالة التسطير */
}

.footer-content a:hover {
    text-decoration: underline; /* إضافة تسطير عند تحويم الفأرة */
}

main {
    flex: 1; /* يسمح للعنصر الرئيسي بأخذ المساحة المتاحة */
    padding: 20px; /* تباعد داخلي للمحتوى */
}

/* الإشعارات */
.notifications {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1001;
}
.notification {
    background: #007bff;
    color: white;
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 5px;
}


/* تنسيق التسمية */
.scoreContainer label {
    margin-right: 10px;  /* هامش بين الـ label والـ input */
    white-space: nowrap;  /* منع النص من الانتقال إلى السطر التالي */
    text-align: right;  /* محاذاة النص إلى اليسار */
}


.scoreContainer {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.score-input {
    width: 100%;
    padding: 15px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
}

.input-label {
    color: #aaa;
    pointer-events: none;
    background-color: transparent; 
}

textarea{
    font-family: 'Cairo', sans-serif;
    font-size: medium;

}
#user-contact{
    font-family: 'Cairo', sans-serif;
    font-size: medium;
}



#toggleButton i {
    margin-right: 10px;          /* المسافة بين الأيقونة والنص */
    font-size: 20px;  
    padding: 10px          
}
#toggleButton{
    border-radius: 2px;
    font-size: x-large;
    max-width: 470px;

}

/* تنسيق الأزرار بشكل موحد */
.join-group-button {
    padding: 10px 20px !important;;
    font-size: 12px !important;;
    cursor: pointer !important;;
    border-radius: 5px !important;;
    border: none !important;;
    color: white !important;;
    font-weight: bold !important;;
}

/* زر الفيسبوك */
.fb-button {
    background-color: #4267B2 !important;; /* اللون الأزرق لفيسبوك */
}

.fb-button:hover {
    background-color: #365899 !important;; /* لون أغمق عند التمرير */
}

/* زر التلجرام */
.tg-button {
    background-color: #0088cc !important;; /* اللون الأزرق لتلجرام */
}

.tg-button:hover {
    background-color: #007bb2 !important;; /* لون أغمق عند التمرير */
}