/* ============== إعادة الضبط والتنسيقات الأساسية ============== */
/*
  هنا نقوم بإعادة ضبط بعض الخصائص الأساسية لضمان تجانس التنسيقات
  عبر مختلف المتصفحات والأجهزة
*/
* {
    box-sizing: border-box;
    /* لجعل العناصر تحتسب الحشو والحدود ضمن العرض والارتفاع */
    margin: 0;
    /* إزالة الهوامش الافتراضية */
    padding: 0;
    /* إزالة الحشو الافتراضية */
}

body {
    font-family: 'Arial', sans-serif;
    /* خط النص الأساسي */
    margin: 0;
    /* إزالة الهوامش */
    background-color: white;
    /* لون خلفية الصفحة */
    color: black;
    /* لون النص الأساسي */
    line-height: 1;
    /* ارتفاع السطر لتحسين قابلية القراءة */
}

/* ============== تنسيقات شريط التنقل الرئيسي ============== */
/*
  الشريط العلوي الذي يحتوي على أزرار التنقل بين الأقسام الرئيسية
*/
.nav-primary {
    background-color: white;
    /* لون الخلفية */
    color: rgb(0, 0, 0);
    /* لون النص */
    padding: 0px;
    /* الحشو الداخلي */
    text-align: center;
    /* محاذاة النص */
    display: block;
    /* استخدام Flexbox للترتيب */
    justify-content: center;
    /* توسيط العناصر أفقيًا */
    flex-wrap: wrap;
    /* السماح بلف العناصر عند الضرورة */
    gap: 2%;
    /* المسافة بين العناصر */

    /*  border-width: 1px;
  
    border-style: solid; */

    /*   box-shadow: 0px 0px 11px 0px #b9bdbf; */

    /*  border-color: transparent;
  
    border-radius: 8px; */
    /* زوايا مدورة */
    /* خصائص الحدود الخارجية */
    /* هامش خارجي لإبعاد الحدود عن العناصر الأخرى */
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    display: unset;
}

/* تنسيقات أزرار شريط التنقل */
.nav-primary__button {
    background-color: transparent;
    /* لون الخلفية */
    color: rgb(0, 0, 0);
    /* لون النص */
    border-width: 1px;
    /* سماكة الحدود */
    border-style: solid;
    /* نمط الحدود (solid, dashed, dotted, double, etc) */
    border-color: transparent;
    /* لون الحدود */
    border-radius: 8px;
    /* زوايا مدورة */
    /* خصائص الحدود الخارجية */
    padding: 3px 3px;
    /* الحشو الداخلي */
    margin-left: 2%;
    margin-right: 2%;
    /* الهوامش الخارجية */
    cursor: pointer;
    /* تغيير شكل المؤشر إلى يد */
    border-radius: 8px;
    /* زوايا دائرية */
    font-size: 16px;
    /* حجم الخط */
    transition: all 0.3s ease;
    /* تأثيرات انتقالية سلسة */
    display: flex;
    /* استخدام Flexbox للترتيب */
    flex-direction: column;
    /* ترتيب العناصر عموديًا */
    align-items: center;
    /* توسيط العناصر أفقيًا */
    justify-content: center;
    /* توسيط العناصر عموديًا */
    min-width: fit-content;
    /* عرض أدنى */
    max-width: fit-content;
    width: fit-content;
}

/* تأثيرات عند تمرير المؤشر على الأزرار */
.nav-primary__button:hover {
    background-color: #c2c2c2;
    /* تغيير لون الخلفية */
    transform: translateY(-2px);
    /* تحريك الزر لأعلى قليلاً */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* إضافة ظل */
}

/* حالة الزر النشط */
.nav-primary__button--active {
    border-color: gray; /* لون مميز للحدود */
    border-width: 1px; /* زيادة سماكة الحدود */
    box-shadow: 0 0 4px gray; /* ظل خفيف للتأكيد */
    margin: 2%;
    padding: 0.5rem;
}

/* تنسيقات الأيقونات داخل الأزرار */
.nav-primary__button-icon {
    font-size: 24px;
    scale: 1.5;
    /* حجم الأيقونة */
    margin-bottom: 2%;
    /* هامش سفلي */
    color: rgb(0, 0, 0);
    /* لون الأيقونة */
    font-variation-settings:
        'FILL' 0,
        /* أيقونة مفرغة 0 أو 1*/
        'wght' 400,
        /* وزن عادي 	100 إلى 700*/
        'GRAD' 0,
        /* درجة حدة افتراضية -50 إلى 200*/
        'opsz' 24;
    /* حجم بصري متناسب 	20 إلى 48*/
}

/* تنسيقات النص داخل الأزرار */
.nav-primary__button-text {
    font-size: xx-small;
font-weight: 800;
    /* حجم النص */
    color: black;
}

/* ============== تنسيقات شريط التنقل الثانوي ============== */
/*
  الشريط الذي يظهر بعد اختيار مشروع معين
*/
.nav-secondary {
    background-color: #fdfeff;
    /* لون مختلف عن الشريط الرئيسي */
    color: white;
    /* لون النص */
    padding: 0px;
    /* الحشو الداخلي */
    text-align: center;
    /* محاذاة النص */
    justify-content: center;
    /* توسيط العناصر أفقيًا */
    flex-wrap: wrap;
    /* السماح بلف العناصر عند الضرورة */
    gap: 2%;
    /* المسافة بين العناصر */
    display: block;
    /* المسافة بين العناصر */
    /* خصائص الحدود الخارجية */
    /*  border-width: 1px;
  
    border-style: solid; */
    /* box-shadow: 0px 0px 11px 0px #b9bdbf; */

    /* border-color: transparent;
   
    border-radius: 8px; */
    /* زوايا مدورة */
    display: unset;
    /* هامش خارجي لإبعاد الحدود عن العناصر الأخرى */
    margin-left: 2%;
    margin-right: 2%;
}

/* ============== تنسيقات الأقسام الرئيسية ============== */
/*
  كل قسم من أقسام التطبيق (المشاريع، الإعدادات، الأدوات، إلخ)
*/
.section {
    display: none;
    /* مخفي بشكل افتراضي */
    padding: 0%;
    /* الحشو الداخلي */
    background-color: white;
    /* لون الخلفية */
    margin: 2%;
    /* الهوامش الخارجية */
    border-radius: 10px;
    /* زوايا دائرية */

    /* ظل خفيف */
    min-height: 100vh;
    height: 100vh;
    /* ارتفاع أدنى */
}

/* حالة القسم النشط (المعروض حاليًا) */
.section--active {
    display: table;
    /* إظهار القسم */
    animation: fadeIn 1s ease;
    /* تأثير ظهور تدريجي */
    min-height: 100vh;
    height: 100vh;
    min-width: 96%;
    width: 96%;
}

/* تأثير الظهور التدريجي */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* بداية شفافة */
        transform: translateY(-10px);
        /* مبدأ التحريك من الأعلى */
    }

    to {
        opacity: 1;
        /* وصول إلى الشفافية الكاملة */
        transform: translateY(0);
        /* موقع النهاية */
    }
}

/* ============== تنسيقات رسالة التحميل ============== */
/*
  الرسالة التي تظهر أثناء تحميل المحتوى
*/
.loader {
    padding: 20px;
    /* الحشو الداخلي */
    text-align: center;
    /* توسيط النص */
    font-weight: bold;
    /* سمك الخط */
    color: #555;
    /* لون النص */
    font-size: 18px;
    /* حجم الخط */
}

/* تأثير النقاط المتحركة */
.loader:after {
    content: '...';
    /* النقاط الأساسية */
    animation: dots 1.5s steps(5, end) infinite;
    /* تأثير الحركة */
}

/* حركة النقاط */
@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    /* نقطة واحدة */
    40% {
        content: '..';
    }

    /* نقطتان */
    60%,
    100% {
        content: '...';
    }

    /* ثلاث نقاط */
}



/* ============== تنسيقات الجداول ============== */
/*

/* ============== تنسيقات الأزرار العامة ============== */
/*
  أزرار يمكن استخدامها في أي مكان في التطبيق
*/
.button {
    display: inline-block;
    /* عرض حسب المحتوى */
    padding: 2% 2%;
    /* حشو داخلي */
    background-color: #0073e6;
    /* لون الخلفية */
    color: white;
    /* لون النص */
    border: none;
    /* إزالة الحدود */
    border-radius: 5px;
    /* زوايا دائرية */
    cursor: pointer;
    /* شكل المؤشر */
    text-align: center;
    /* توسيط النص */
    transition: all 0.3s;
    /* تأثيرات انتقالية */
    font-size: 16px;
    /* حجم الخط */
    margin: 2%;
    /* هوامش خارجية */
}

/* تأثيرات الأزرار عند التمرير */
.button:hover {
    background-color: #005bb5;
    /* تغيير لون الخلفية */
    transform: translateY(-2px);
    /* تحريك لأعلى */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* إضافة ظل */
}

/* نوع آخر من الأزرار (ثانوي) */
.button--secondary {
    background-color: #6c757d;
    /* لون مختلف */
}

.button--secondary:hover {
    background-color: #5a6268;
    /* لون مختلف عند التمرير */
}

/* أزرار التحذير (للمهام الخطرة) */
.button--danger {
    background-color: #dc3545;
    /* لون أحمر */
}

.button--danger:hover {
    background-color: #c82333;
    /* لون أحمر غامق */
}

/* ============== تنسيقات أدوات الإدخال ============== */
/*
  حقول النصوص، القوائم المنسدلة، مناطق النص
*/
.input-field,
.select-dropdown,
.textarea {
    width: 100%;
    /* عرض كامل */
    padding: 2%;
    /* حشو داخلي */
    margin: 2% 0;
    /* هوامش خارجية */
    border: 1px solid #ddd;
    /* حد خفيف */
    border-radius: 4px;
    /* زوايا دائرية */
    font-size: 16px;
    /* حجم الخط */
    transition: border 0.3s;
    /* تأثير انتقالي للحدود */
}

/* تأثيرات عند التركيز على حقل الإدخال */
.input-field:focus,
.select-dropdown:focus,
.textarea:focus {
    border-color: #0073e6;
    /* لون الحد */
    outline: none;
    /* إزالة الحدود الافتراضية */
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.1);
    /* ظل خفيف */
}

/* ============== تنسيقات البطاقات ============== */
/*
  عناصر لعرض المحتوى في شكل بطاقات منظمة
*/
.card {
    background: white;
    /* خلفية بيضاء */
    border-radius: 8px;
    /* زوايا دائرية */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* ظل خفيف */
    padding: 2%;
    /* حشو داخلي */
    margin-bottom: 2%;
    /* هامش سفلي */
}

.card__header {
    font-size: 18px;
    /* حجم الخط */
    font-weight: bold;
    /* سمك الخط */
    margin-bottom: 2%;
    /* هامش سفلي */
    padding-bottom: 2%;
    /* حشو سفلي */
    border-bottom: 1px solid #eee;
    /* حد سفلي خفيف */
}

/* ============== تنسيقات الرسائل التنبيهية ============== */
/*
  رسائل النجاح، التحذير، الخطأ
*/
.alert {
    padding: 2%;
    /* حشو داخلي */
    margin-bottom: 2%;
    /* هامش سفلي */
    border-radius: 4px;
    /* زوايا دائرية */
}

.alert--success {
    background-color: #d4edda;
    /* خلفية خضراء فاتحة */
    color: #155724;
    /* لون نص أخضر غامق */
    border: 1px solid #c3e6cb;
    /* حد أخضر فاتح */
}

.alert--danger {
    background-color: #f8d7da;
    /* خلفية حمراء فاتحة */
    color: #721c24;
    /* لون نص أحمر غامق */
    border: 1px solid #f5c6cb;
    /* حد أحمر فاتح */
}

.alert--warning {
    background-color: #fff3cd;
    /* خلفية صفراء فاتحة */
    color: #856404;
    /* لون نص بني */
    border: 1px solid #ffeeba;
    /* حد أصفر */
}
/*
  تنسيق مخصص لنوافذ SweetAlert2 المنبثقة لجعلها تستجيب بشكل أفضل على مختلف الشاشات.
  - استخدام calc() لتوفير هوامش آمنة على الشاشات الصغيرة.
  - تحديد max-width و max-height لضمان عدم تجاوزها للحجم المعقول على الشاشات الكبيرة.
*/
.fullscreen-swal {
    width: calc(100vw - 40px) !important; /* عرض كامل مع هوامش جانبية 20px */
    max-width: 800px !important; /* حد أقصى للعرض على الشاشات الكبيرة */
    max-height: 90vh !important; /* أقصى ارتفاع لترك مساحة أعلى وأسفل */
    overflow-y: auto; /* شريط تمرير عمودي عند الحاجة */
    padding: 20px !important; /* حشو داخلي ثابت */
    border-radius: 1rem !important; /* حواف دائرية */
    background: #fff !important; /* خلفية بيضاء */
    color: black !important; /* لون النص */
    
}



/* هذا التنسيق خاص بخريطة Leaflet
لتصغير نص حقوق الملكية */
.leaflet-control-attribution.leaflet-control {
    font-size: 3px;
    /* تصغير حجم الخط */
    color: #333333;
    /* جعله بالرمادي الغامق ليتماشى مع مشروعك */
    opacity: 0.1;
    /* تخفيف حدة النص قليلاً */
}





/* ============== تنسيقات للاستجابة على مختلف أحجام الشاشات ============== */
/*
  هذه التنسيقات تنطبق على شاشات الأجهزة اللوحية (عرض حتى 768px)
*/
@media (max-width: 768px) {
    .nav-primary {
        flex-direction: column;
        /* ترتيب العناصر عموديًا */
        gap: 5px;
        /* تقليل المسافة بين العناصر */
    }

    .nav-primary__button {
        width: 100%;
        /* عرض كامل */
        margin: 2% 0;
        /* هوامش علوية وسفلية */
    }

    .section {
        margin: 2%;
        /* تقليل الهوامش */
        padding: 2%;
        /* تقليل الحشو */
        min-height: 100vh;
        height: 100vh;
    }
}

/*
  هذه التنسيقات تنطبق على شاشات الهواتف (عرض حتى 480px)
*/
@media (max-width: 480px) {
    .nav-primary__button {
        padding: 2% 2%;
        /* تقليل الحشو */
        font-size: 14px;
        /* تصغير حجم الخط */
        min-width: fit-content;
        max-width: fit-content;
        width: fit-content;
        /* إزالة العرض الأدنى */
        margin-left: 2%;
        margin-right: 2%;
    }

    .nav-primary__button-icon {
        font-size: 20px;
        /* تصغير حجم الأيقونات */
    }
}