/* styles.css */
.rounded-div {
    border: 2px solid #333;
    background-color:#ff0000;
    padding: 20px;
    border-radius: 15px;
}

.rounded-table {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
  /*  color: black;*/
   /* background-color: #6E8E59;*/
}

/* 1. التعديل على تنسيق الجدول الرئيسي (rounded-table) */
.rounded-table {
    width: 100%; /* اجعل الجدول يملأ العرض المتاح */
    border-collapse: collapse; /* **الأهم لتوحيد الحدود** */
    border: 1px solid ;
    border-radius: 10px;
    /* padding: 10px;  - يفضل إزالته من الجدول وإضافته للخلايا */
   /* color: black;*/
    /* لون الخلفية كما هو في الصورة المرفقة، لكن يجب التخلص من أي تداخل */
    /* background-color: #6E8E59; */
    /* جعل الحدود الداخلية للجدول تبدأ من داخل الـ border-radius */
    overflow: hidden;
}

    /* 2. تنسيق رؤوس الجدول (th) */
    .rounded-table th {
       /* background-color: #6E8E59;*/ /* لون الخلفية لرأس الجدول */
      /*  color: #fff;*/ /* نص أبيض لتباين واضح مع الخلفية */
        text-align: center; /* محاذاة النص في المنتصف */
        font-weight: bold;
        padding: 10px; /* مسافة داخلية للخلايا */
      /*  border: 1px solid #99b697;*/ /* حد فاصل بين الرؤوس */
    }

    /* 3. تنسيق خلايا البيانات (td) والصفوف (tr) */
    .rounded-table tr,
    .rounded-table td {
        border: 1px solid #ccc; /* إضافة حد فاصل واضح بين كل صف وخلية */
        padding: 10px; /* مسافة داخلية للخلايا */
        text-align: center; /* محاذاة النص في المنتصف */
       /* background-color: #ffffff;*/ /* جعل الخلايا بيضاء لزيادة وضوح النص الأسود */
    }

    /* 4. تنسيق الصفوف بالتناوب لزيادة القراءة (اختياري - Zebra Stripes) */
    .rounded-table tbody tr:nth-child(even) {
      /*  background-color: #f7f7f7;*/ /* لون رمادي فاتح للصفوف الزوجية */
    }

/* 5. تنسيق الاستجابة (Responsive) */

/* تنسيق الجدول الرئيسي لجعله ممتلئ العرض وضبط الحدود بين الخلايا */
.custom-table-bordered {
    width: 100%; /* اجعل الجدول يملأ العرض المتاح */
    border-collapse: collapse; /* دمج حدود الخلايا في حد واحد */
    /* قم بإضافة حد خارجي للجدول بالكامل */
    border: 1px solid #dee2e6;
}

    /* تنسيق رؤوس الجدول وخلايا البيانات */
    .custom-table-bordered th,
    .custom-table-bordered td {
        padding: 0.75rem; /* مسافة داخلية جيدة للخلايا */
        vertical-align: top; /* محاذاة المحتوى للأعلى */
        border: 1px solid #dee2e6; /* إضافة حد لكل خلية */
    }

    /* تنسيق إضافي لرؤوس الجدول (thead) لتمييزها */
    .custom-table-bordered thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6; /* حد سفلي أغمق لرأس الجدول */
        background-color: #f8f9fa; /* خلفية خفيفة لرأس الجدول */
        text-align: inherit; /* محاذاة النص داخل رأس الجدول */
    }

/* جعل الجدول يستجيب للعرض (مثل table-responsive) */
.table-responsive-custom {
    display: block;
    width: 100%;
    overflow-x: auto; /* يسمح بالتمرير الأفقي للجداول الكبيرة */
    -webkit-overflow-scrolling: touch;
}

/* الألوان الجديدة المستخلصة من اللوحة المرفقة */
:root {
    --dark-color: #3A0519; /* اللون الأغمق للخلفية */
    --accent-color: #8D1647; /* لون حدود أغمق (اختياري) */
    --light-text-color: #f8f9fa; /* لون النص الفاتح (للرؤوس الداكنة) */
    --border-color: #5d0824; /* لون الحدود ليتناسب مع الخلفية الداكنة */
}

/* 1. تنسيق الجدول الرئيسي وتطبيق الحدود الداكنة */
.custom-table-bordered {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-color); /* حد خارجي داكن */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف للجدول */
}

    /* 2. تنسيق رؤوس الجدول وخلايا البيانات مع الحدود الداكنة */
    .custom-table-bordered th,
    .custom-table-bordered td {
        padding: 0.75rem;
        vertical-align: top;
        border: 1px solid var(--border-color); /* حد داخلي داكن */
        text-align: center; /* **محاذاة النص في المنتصف (المطلوب)** */
    }

    /* 3. تنسيق خاص لرأس الجدول (Thead) باللون الداكن والنص الفاتح */
    .custom-table-bordered thead th {
        background-color: var(--dark-color); /* الخلفية الغامقة جداً */
        color: var(--light-text-color); /* لون النص الفاتح ليكون واضحاً */
        border-bottom: 2px solid var(--border-color);
        font-weight: bold; /* خط سميك لزيادة الوضوح */
        text-transform: uppercase; /* لجعل النص أكثر وضوحاً */
    }

    /* 4. تنسيق الصفوف (اختياري: لتلوين الصفوف بالتناوب - Zebra Stripes) */
    .custom-table-bordered tbody tr:nth-child(even) {
        background-color: #fcfcfc; /* خلفية خفيفة جداً للصفوف الزوجية */
    }

h1, h2, h3, h4, h5, h6 {
    color: #0e0b0c; /* استخدام اللون الداكن لعناوين النص */
    text-align: center; /* محاذاة العناوين في المنتصف */
}
.bg-my {
    background: #020024;
    background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 15, 121, 1) 37%, rgba(0, 212, 255, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 15, 121, 1) 37%, rgba(0, 212, 255, 1) 100%);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 15, 121, 1) 37%, rgba(0, 212, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#00D4FF", GradientType=1);
}
.bg-aysal {
    background: #3a0359;
    background: -webkit-linear-gradient(90deg, rgba(58, 3, 89, 1) 48%, rgba(51, 29, 253, 1) 73%, rgba(145, 69, 252, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(58, 3, 89, 1) 48%, rgba(51, 29, 253, 1) 73%, rgba(145, 69, 252, 1) 100%);
    background: linear-gradient(90deg, rgba(58, 3, 89, 1) 48%, rgba(51, 29, 253, 1) 73%, rgba(145, 69, 252, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3A0359", endColorstr="#9145FC", GradientType=1);
}
.bg-aysalsalla {
    background: #020024;
    background: -webkit-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(58, 3, 89, 1) 66%, rgba(0, 157, 255, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(58, 3, 89, 1) 66%, rgba(0, 157, 255, 1) 100%);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(58, 3, 89, 1) 66%, rgba(0, 157, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#009DFF", GradientType=1);
}
.bg-nvb {
    background-color: #2A0B7D
}
.bg-nvbr {
    background-color: #3A0359
}