/* =========================================================
   1) الصفحة والمتصفح
========================================================= */

html,
body,
#form1 {
    width: 100%;              /* يجعل العرض يساوي كامل عرض المتصفح */
    height: 100%;             /* يجعل الارتفاع يساوي كامل ارتفاع المتصفح */
    margin: 0;                /* إلغاء المسافة الخارجية الافتراضية */
    padding: 0;               /* إلغاء المسافة الداخلية الافتراضية */
    overflow: hidden;         /* منع ظهور Scrollbars حول الصفحة */
    font-family: Tahoma, Arial, sans-serif; /* نوع الخط الأساسي */
}


/* =========================================================
   2) مساحة العرض الرئيسية
========================================================= */

#ResponsiveViewport {
    position: fixed;          /* تثبيت مساحة البرنامج داخل شاشة المتصفح */
    inset: 0;                 /* Top/Right/Bottom/Left = 0 */
    width: 100vw;             /* كامل عرض شاشة المتصفح */
    height: 100vh;            /* كامل ارتفاع شاشة المتصفح */
    overflow: hidden;         /* إخفاء أي شيء يخرج خارج الشاشة */
}


/* =========================================================
   3) الصفحة التي يتم عمل Scale لها
========================================================= */

#ResponsivePage {
    position: absolute;       /* يسمح بالتحكم في مكان الصفحة */
    left: 0;                  /* تبدأ من أقصى اليسار */
    top: 0;                   /* تبدأ من أعلى الشاشة */
    width: 1920px;            /* العرض المرجعي للتصميم */
    height: 1080px;           /* الارتفاع المرجعي للتصميم */
    transform-origin: top left; /* يبدأ التكبير/التصغير من أعلى اليسار */
}


/* =========================================================
   4) الصفحة الداخلية
========================================================= */

.page {
    width: 100%;              /* تأخذ كامل عرض ResponsivePage */
    height: 100%;             /* تأخذ كامل ارتفاع ResponsivePage */
    min-height: 0;            /* يمنع فرض حد أدنى للارتفاع */
    padding: 14px;            /* مسافة داخلية حول التصميم */
    box-sizing: border-box;   /* الـPadding يدخل ضمن العرض والارتفاع */
}


/* =========================================================
   5) الهيكل الرئيسي
   Side + Center + Side
========================================================= */

.shell {
    width: 100%;              /* كامل عرض الصفحة */
    height: 100%;             /* كامل ارتفاع الصفحة */

    display: flex;            /* ترتيب الأعمدة بجوار بعضها */

    gap: 14px;                /* المسافة بين الأعمدة */

    align-items: stretch;     /* جعل الأعمدة بنفس الارتفاع */

    box-sizing: border-box;   /* احتساب الحدود والمسافات ضمن الحجم */
}


/* =========================================================
   6) الأعمدة الجانبية
========================================================= */

.side {
    width: 93px;              /* عرض العمود الجانبي */

    flex: 0 0 93px;           /* منع Flex من تغيير عرض العمود */

    height: 100%;             /* العمود يأخذ كامل الارتفاع */

    padding: 9px;             /* المسافة بين الأزرار وحدود العمود */

    box-sizing: border-box;   /* Padding + Border داخل الـ93px */

    background: #d8dde6;      /* لون خلفية العمود */

    border: 1px solid #b8c0cf; /* إطار العمود */

    border-radius: 5px;       /* تدوير زوايا العمود */

    display: flex;            /* استخدام Flex لترتيب الأزرار */

    flex-direction: column;   /* ترتيب الأزرار رأسيًا */

    gap: 6px;                 /* المسافة بين كل زر والآخر */
}


/* =========================================================
   7) المنطقة الوسطى
========================================================= */

.center {
    flex: 1 1 auto;           /* يأخذ كل العرض المتبقي */

    min-width: 0;             /* يسمح للـCenter بالتصغير */

    height: 100%;             /* كامل ارتفاع الصفحة */

    position: relative;       /* مرجع للعناصر Absolute بداخله */

    box-sizing: border-box;   /* احتساب Border ضمن الحجم */

    background: #dfe5ef;      /* لون خلفية المنطقة */

    border: 2px solid #b7bfce; /* الإطار الخارجي */

    border-radius: 6px;       /* تدوير الزوايا */

    box-shadow:
        0 0 0 1px rgba(255,255,255,.35) inset;
                                /* لمعة داخلية خفيفة */
                                
}


/* =========================================================
   8) الجزء العلوي من المنطقة الوسطى
========================================================= */

.TopCenter {
    width: 100%;              /* كامل عرض الـCenter */

    display: flex;            /* الشعار والAuthority بجوار بعضهما */

    align-items: center;      /* توسيط العناصر رأسيًا */

    justify-content: space-between;
                                /* الشعار ناحية والAuthority الناحية الأخرى */

    padding: 10px 20px;       /* مسافة داخلية أعلى/أسفل ويمين/يسار */

    box-sizing: border-box;   /* Padding ضمن الحجم */
}


/* =========================================================
   9) مجموعة الشعار Sunexe
========================================================= */

.Mainlogo {
    display: flex;            /* الصورة والاسم بجوار بعضهما */

    align-items: center;      /* توسيط الصورة والنص رأسيًا */

    gap: 8px;                 /* المسافة بين الصورة وكلمة Sunexe */
}


/* =========================================================
   10) صورة الشعار الرئيسية
========================================================= */

.Centerlogo {
    width: 60px;              /* عرض صورة الشعار */

    height: 60px;             /* ارتفاع صورة الشعار */

    padding: 5px;             /* مساحة حول الصورة */

    object-fit: contain;      /* إظهار الصورة كاملة بدون تشويه */
}


/* =========================================================
   11) كلمة Sunexe
========================================================= */

.brand {
    font-size: 20px;          /* حجم الخط */

    font-weight: bold;        /* خط عريض */
}


/* =========================================================
   12) Authority
========================================================= */

.Authority {
    display: grid;            /* استخدام Grid */

    grid-template-columns:
        0.5fr 1fr 1fr;        /* ثلاثة أعمدة */

    gap: 5px;                 /* المسافة بين العناصر */
}


/* =========================================================
   13) الصف الكامل داخل Authority
========================================================= */

.Authority .fullRow {
    grid-column: 1 / -1;      /* يمتد عبر جميع أعمدة Authority */

    display: grid;            /* Grid داخلي */

    grid-template-columns:
        0.5fr 1fr 1fr;        /* نفس تقسيم الصف الأول */

    gap: 5px;                 /* المسافة بين العناصر */
}


/* =========================================================
   14) Labels الخاصة بالـAuthority
========================================================= */

.proTextBox {
    height: 10px;             /* ارتفاع العنصر الأساسي */

    padding: 6px 8px;         /* المسافة الداخلية */

    font-size: 10px;          /* حجم النص */

    color: #1f2937;           /* لون النص */

    background:
        rgba(255,255,255,.2); /* خلفية شفافة */

    backdrop-filter: blur(6px); /* تأثير زجاجي */

    -webkit-backdrop-filter:
        blur(6px);            /* دعم Safari */

    border:
        1px solid rgba(180,190,210,.8);
                                /* إطار خفيف */

    border-radius: 8px;       /* تدوير الزوايا */

    box-shadow:
        0 3px 8px rgba(0,0,0,.12);
                                /* ظل خفيف */

    pointer-events: none;     /* منع الضغط على العنصر */

    user-select: none;        /* منع تحديد النص */

    cursor: default;          /* المؤشر العادي */
}


/* =========================================================
   15) Input داخل Authority
========================================================= */

.Authority input {
    width: 90px;              /* عرض الـInput */

    text-align: center;       /* توسيط الكتابة */

    background: #f5f5f5;     /* لون الخلفية */

    border: 1px solid #b7bfd1; /* الإطار */

    border-radius: 4px;       /* تدوير الزوايا */
}


/* =========================================================
   16) Pattern
========================================================= */

.pattern {
    position: absolute;       /* وضع الخلفية فوق كامل الأب */

    inset: 0;                 /* ملء الأب بالكامل */

    opacity: .9;              /* شفافية الخلفية */

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.55) 0 2px,
            transparent 3px
        ) 0 0 / 120px 80px,

        radial-gradient(
            circle at 70% 55%,
            rgba(255,255,255,.45) 0 2px,
            transparent 3px
        ) 0 0 / 160px 90px,

        linear-gradient(
            110deg,
            rgba(255,255,255,.35) 0 2px,
            transparent 2px 100%
        ) 0 0 / 220px 140px,

        linear-gradient(
            0deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.20)
        );
}


/* =========================================================
   17) المحتوى الرئيسي في المنتصف
========================================================= */

.centerContent {
    position: relative;       /* يسمح باستخدام z-index */

    z-index: 4;               /* جعله فوق الـPattern */

    width: 98%;               /* تقريبًا كامل عرض الـCenter */

    min-height: 78%;          /* الحد الأدنى للارتفاع */

    margin: 14px auto;        /* توسيط العنصر أفقيًا */

    padding: 30px;            /* المسافة الداخلية */

    box-sizing: border-box;   /* Padding وBorder ضمن الحجم */

    display: flex;            /* Flex للمحتويات */

    flex-direction: column;   /* ترتيب المحتوى رأسيًا */

    align-items: center;      /* توسيط المحتوى أفقيًا */

    justify-content:
        space-between;        /* توزيع المحتوى رأسيًا */

    background-image:
        url("../Logo/background.jpg");
                                /* صورة الخلفية */

    background-size: cover;   /* ملء المنطقة بالصورة */

    background-position: center;
                                /* مركز الصورة */

    background-repeat: no-repeat;
                                /* عدم تكرار الصورة */

    border: 1px solid #b7bfd1; /* إطار */

    border-radius: 10px;      /* تدوير الزوايا */

    box-shadow:
        0 6px 14px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
                                /* الظل الخارجي والداخلي */
}


/* =========================================================
   18) Menu Item
========================================================= */

.menuItem {
    display: block;           /* العنصر Block */

    text-align: center;       /* توسيط المحتوى */

    text-decoration: none;    /* إزالة خط الرابط */

    color: #000;              /* لون النص */

    user-select: none;        /* منع تحديد النص */
}


/* =========================================================
   19) Icon Box
========================================================= */

.iconBox {
    width: 54px;              /* عرض الصندوق */

    height: 54px;             /* ارتفاع الصندوق */

    margin: 0 auto 8px auto;  /* توسيطه وإضافة مسافة أسفل */

    background: transparent;  /* خلفية شفافة */

    border: 1px solid #aeb7c7; /* الإطار */

    border-radius: 6px;       /* تدوير الزوايا */

    box-shadow:
        0 1px 0 rgba(255,255,255,.65) inset;
                                /* لمعة داخلية */
}


/* =========================================================
   20) زر القائمة
========================================================= */

.menuButton {
    width: 100%;              /* الزر يملأ عرض العمود */

    flex: 1 1 0;              /* توزيع ارتفاع العمود على الأزرار */

    min-height: 0;            /* يسمح للزر بالتصغير */

    box-sizing: border-box;   /* Padding + Border داخل الحجم */

    display: flex;            /* Flex داخل الزر */

    flex-direction: column;   /* الصورة فوق والنص أسفل */

    align-items: center;      /* توسيط أفقي */

    justify-content: center;  /* توسيط رأسي */

    padding: 5px;             /* مساحة داخل الزر */

    text-decoration: none;    /* إزالة خط LinkButton */

    background: #ffffff;      /* لون خلفية الزر */

    border: 1px solid #8f9bb2; /* إطار الزر */

    border-radius: 6px;       /* تدوير الزوايا */

    box-shadow:
        0 2px 4px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.8);
                                /* ظل خارجي + لمعة داخلية */

    transition: all .25s ease; /* حركة Hover ناعمة */

    cursor: pointer;          /* مؤشر اليد */
}


/* =========================================================
   21) صورة أيقونة القائمة
========================================================= */

.menuIcon {
    width: 68px;              /* عرض الأيقونة - كبرناه قليلًا */

    height: 48px;             /* ارتفاع الأيقونة */

    max-width: 100%;          /* منع خروج الصورة خارج الزر */

    object-fit: contain;      /* الحفاظ على نسبة الصورة */

    margin-bottom: 5px;       /* مسافة بين الصورة والنص */

    flex-shrink: 1;           /* يسمح للصورة بالتصغير عند الحاجة */
}


/* =========================================================
   22) نص الزر
========================================================= */

.menuText {
    width: 100%;              /* كامل عرض الزر */

    font-size: 10px;           /* حجم الخط */

    font-weight: bold;        /* خط عريض */

    color: #1a2a4a;           /* لون النص */

    text-align: center;       /* توسيط النص */

    line-height: 1.1;         /* المسافة بين أسطر النص */

    flex-shrink: 0;           /* منع ضغط النص */
}


/* =========================================================
   23) Hover على الزر
========================================================= */

.menuButton:hover {
    background:
        linear-gradient(
            #ffffff,
            #dfe9f7
        );                    /* تغيير الخلفية عند المرور */

    border-color: #356ac3;    /* تغيير لون الإطار */

    box-shadow:
        0 0 8px rgba(53,106,195,.25);
                                /* إضاءة حول الزر */

    transform:
        translateY(-2px);     /* رفع الزر 2px */
}


/* =========================================================
   24) Hover على IconBox
========================================================= */

.menuItem:hover .iconBox {
    background: #ffffff;      /* خلفية بيضاء عند Hover */

    border-color: #8f9bb2;    /* تغيير لون الإطار */
}


/* =========================================================
   25) Hover على النص
========================================================= */

.menuItem:hover .menuText {
    color: #1a2a4a;           /* لون النص عند Hover */
}


/* =========================================================
   26) Disabled Button
========================================================= */

.menuButton.disabled {
    pointer-events: none;     /* منع الضغط */

    opacity: .6;              /* تقليل الوضوح */

    filter: grayscale(20%);   /* تقليل الألوان */
}


/* =========================================================
   27) العناصر المخفية
========================================================= */

.menuButton.hidden,
.hidden {
    display: none !important; /* إخفاء العنصر بالكامل */
}


/* =========================================================
   28) العنوان العام
========================================================= */

.h1 {
    margin: 0;                /* إزالة Margin الافتراضي */

    font-size: 20px;          /* حجم العنوان */

    color: #1a2a4a;           /* لون العنوان */
}


/* =========================================================
   29) النص العام
========================================================= */

.p {
    margin-top: 10px;         /* المسافة أعلى النص */

    font-size: 13px;          /* حجم النص */

    color: #23324f;           /* لون النص */

    max-width: 640px;         /* أقصى عرض */
}


/* =========================================================
   30) عنوان Center Content
========================================================= */

.centerContent .h1 {
    margin: 0 0 8px 0;       /* مسافة أسفل العنوان */

    font-size: 26px;          /* حجم العنوان */

    color: #1a2a4a;           /* اللون */
}


/* =========================================================
   31) نص Center Content
========================================================= */

.centerContent .p {
    margin: 0;                /* إزالة Margin */

    font-size: 14px;          /* حجم النص */

    color: #555;              /* لون النص */

    line-height: 1.6;         /* ارتفاع السطر */
}


/* =========================================================
   32) Hint Box
========================================================= */

.hintBox {
    margin-top: 18px;         /* المسافة أعلى الصندوق */

    max-width: 640px;         /* أقصى عرض */

    padding: 12px 14px;       /* المسافة الداخلية */

    background:
        rgba(255,255,255,.55); /* خلفية شفافة */

    border:
        1px solid rgba(70,90,120,.25);
                                /* إطار */

    border-radius: 8px;       /* تدوير الزوايا */
}


/* =========================================================
   33) Hint Title
========================================================= */

.hintTitle {
    margin-bottom: 6px;       /* المسافة أسفل العنوان */

    font-weight: bold;        /* خط عريض */

    color: #1a2a4a;           /* اللون */
}


/* =========================================================
   34) Hint Text
========================================================= */

.hintText {
    font-size: 13px;          /* حجم الخط */

    color: #23324f;           /* لون النص */
}


/* =========================================================
   35) Code Text
========================================================= */

.code {
    font-family:
        Consolas,
        "Courier New";        /* خط مناسب للأكواد */

    padding: 1px 5px;         /* مساحة داخلية */

    background:
        rgba(0,0,0,.06);      /* خلفية خفيفة */

    border-radius: 5px;       /* تدوير الزوايا */
}


/* =========================================================
   36) صف شعارات الشركات
========================================================= */

.ComlogoRow {
    width: 100%;              /* كامل العرض */

    height: 85px;             /* ارتفاع المنطقة */

    margin-top: auto;         /* دفع المنطقة لأسفل */

    padding: 5px 10px;        /* المسافة الداخلية */

    box-sizing: border-box;   /* Padding داخل الحجم */

    position: relative;       /* مرجع للصور Absolute */

    display: flex;            /* Flex */

    justify-content:
        space-between;        /* توزيع العناصر */

    align-items:
        flex-end;             /* وضع العناصر في الأسفل */
}


/* =========================================================
   37) شعار الشركة الأيسر
========================================================= */

.Comlogo {
    position: absolute;       /* تثبيت مكان الشعار */

    left: 10px;               /* المسافة من اليسار */

    bottom: 11px;             /* المسافة من الأسفل */

    pointer-events: none;     /* منع الضغط */

    user-select: none;        /* منع التحديد */
}


/* =========================================================
   38) شعار الشركة الأيمن
========================================================= */

.ComlogoG {
    position: absolute;       /* تثبيت مكان المجموعة */

    right: 10px;              /* المسافة من اليمين */

    bottom: 10px;             /* المسافة من الأسفل */

    display: flex;            /* Flex */

    flex-direction: column;   /* الصورة ثم النص */

    align-items: center;      /* توسيط العناصر */

    opacity: 1;               /* وضوح كامل */

    pointer-events: none;     /* منع الضغط */

    user-select: none;        /* منع تحديد النص */
}


/* =========================================================
   39) النص تحت شعار الشركة
========================================================= */

.ComlogoText {
    margin-top: 3px;          /* المسافة بين الصورة والنص */

    font-size: 13px;          /* حجم الخط */

    font-weight: bold;        /* خط عريض */

    text-align: center;       /* توسيط النص */

    white-space: nowrap;      /* منع النزول لسطر جديد */
}

#ResponsivePage {
    position: absolute;

    width: 1920px;
    height: 1080px;

    left: 0;
    top: 0;

    transform-origin: 0 0;

    /* يمنع ظهور الصفحة قبل ضبط الحجم */
    visibility: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    overflow: hidden;
}