[data-cellid="footer_c1"][data-page="_global_login"][data-cellid="footer_c1"][data-page="_global_login"][data-cellid="footer_c1"][data-page="_global_login"] {
  width: 33.33333333%;
}
[data-cellid="footer_c2"][data-page="_global_login"][data-cellid="footer_c2"][data-page="_global_login"][data-cellid="footer_c2"][data-page="_global_login"] {
  width: 66.66666667%;
}
[data-cellid="grid_c20"][data-page="_global_login"][data-cellid="grid_c20"][data-page="_global_login"][data-cellid="grid_c20"][data-page="_global_login"] {
  padding-top: 5px;
}


/* ========================================================
   1. التحكم بموضع المربع (إزاحة لليمين وللأسفل)
   ======================================================== */
body.function-login {
    display: flex !important;
    align-items: center !important; 
    justify-content: flex-end !important; /* الدفع لليمين */
    padding-right: 18% !important; /* المسافة من حافة الشاشة اليمنى */
    min-height: 100vh !important;
}

.r-panel-page {
    width: 420px !important; /* العرض الدقيق للمربع */
    margin-top: 15vh !important; /* الدفع للأسفل */
    position: relative !important;
}

/* ========================================================
   2. المربع الأبيض النقي وحجمه
   ======================================================== */
.bs-pagepanel {
    /* تغيير الخلفية إلى أبيض مع شفافية بنسبة 85% */
    background: rgba(255, 255, 255, 0.55) !important; 
    
    /* إضافة لمسة عصرية: تأثير الزجاج المغبش (Glassmorphism) */
    backdrop-filter: blur(10px) !important; 
    -webkit-backdrop-filter: blur(10px) !important; /* لدعم متصفحات سفاري */
    
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* حد شفاف خفيف يعزز شكل الزجاج */
    border-radius: 8px !important;
    padding: 25px 35px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
}

.panel-heading { display: none !important; }
.panel-body { padding: 0 !important; background: transparent !important; }

/* إضافة كلمة Login مع القفل فوق المربع برمجياً */
.bs-pagepanel::before {
    content: "\f023 \00a0 Portail collaborateurs"; 
    
    /* إضافة أسماء عائلات الخط لتشمل الإصدار 4، 5، و 6 */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif; 
    
    /* هذا السطر حاسم جداً! بدونه لن تظهر الأيقونة في الإصدارات الحديثة */
    font-weight: 900; 
    
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 15px;
}

/* ========================================================
   3. حقول الإدخال (وحل مشكلة اللون الأزرق لمتصفح كروم)
   ======================================================== */
.r-edit-field { background: transparent !important; border: none !important; padding: 0 !important; }

input.form-control {
    background-color: #ffffff !important; /* إجبار الخلفية لتكون بيضاء */
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-left: 3px solid #e0e0e0 !important; /* الخط الجانبي */
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 45px !important;
    padding-left: 15px !important;
    margin-bottom: 20px !important;
    color: #333 !important;
    font-size: 14px !important;
}

/* 🔥 حل جذري لمشكلة تلون الحقول عند الملء التلقائي (Autofill) في Chrome */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* تلوين الخط الجانبي لحقل الإيميل (أخضر) */
input.form-control[name="username"] { border-left-color: #a4c639 !important; }
input.form-control:focus { border-bottom-color: #a4c639 !important; }

/* ========================================================
   4. إخراج زر الدخول تحت المربع (كما في الصورة تماماً)
   ======================================================== */
[data-location="footer"] {
    position: absolute !important;
    bottom: -60px !important; /* رمي منطقة الزر أسفل المربع بـ 60 بيكسل */
    right: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

/* تحويل الزر إلى نص شفاف */
[data-itemid="login_button"] a.btn-primary {
    background: transparent !important;
    color: #555 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* الدائرة الخضراء المنفصلة التي تظهر بجانب النص */
[data-itemid="login_button"] a.btn-primary::after {
    content: "\276F" !important; /* رمز السهم */
    background-color: #a4c639 !important;
    color: #fff !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    box-shadow: 0 4px 10px rgba(164, 198, 57, 0.4) !important;
    transition: transform 0.2s ease;
}

[data-itemid="login_button"] a.btn-primary:hover::after {
    transform: translateX(5px); /* تحرك الدائرة عند تمرير الماوس */
}