/* =========================================
           ✨ الهوية البصرية الجبارة لشاشة الدخول (طيبة) ✨
           ========================================= */

        /* 1. إخفاء الشريط العلوي والفوتر بالكامل */
        body[data-path="login"] .navbar,
        body[data-path="login"] .web-footer,
        body[data-path="login"] .page-breadcrumbs {
            display: none !important;
        }

        /* 2. تحويل خلفية الصفحة الرئيسية للتدرج الفخم */
        body[data-path="login"] {
            background: radial-gradient(circle at top right, #f4f9fc 0%, #e0eff7 50%, #cbe4f2 100%) !important;
            min-height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* 3. إعدام "شاشة التلفون" (جعل كل الحاويات شفافة وتأخذ الشاشة كاملة) */
        body[data-path="login"] div#page-login,
        body[data-path="login"] .page-content-wrapper,
        body[data-path="login"] .page_content,
        body[data-path="login"] section.for-login {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        /* توسيط البطاقة في المنتصف وجعل الحاوية تتمدد 100% */
        body[data-path="login"] main.container {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 100vh !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
        }
        body[data-path="login"] .page-card-head img {
            max-height: 95px;
        }
        /* 4. تصميم بطاقة الدخول (Glassmorphism) */
        body[data-path="login"] .page-card {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border: 1px solid rgba(255, 255, 255, 0.7) !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
            border-radius: 24px !important;
            padding: 45px 35px !important;
            width: 100% !important;
            max-width: 420px !important; /* هذا ما يحدد عرض البطاقة فقط */
            margin: 0 auto !important;
            transition: transform 0.4s ease, box-shadow 0.4s ease !important;
        }

        body[data-path="login"] .page-card:hover {
            transform: translateY(-6px) !important;
            box-shadow: 0 30px 60px rgba(2, 175, 242, 0.12) !important;
        }

        /* 5. حقول الإدخال */
        body[data-path="login"] .form-control {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            padding: 14px 16px !important;
            height: 52px !important;
            font-size: 15px !important;
            transition: all 0.3s ease !important;
        }

        body[data-path="login"] .form-control:focus {
            background: #ffffff !important;
            border-color: #02aff2 !important;
            box-shadow: 0 0 0 4px rgba(2, 175, 242, 0.15) !important;
            outline: none !important;
        }

        /* 6. زر طيبة الأساسي */
        body[data-path="login"] .btn-login,
        body[data-path="login"] .btn-primary {
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            border: none !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 16px !important;
            height: 52px !important;
            box-shadow: 0 6px 20px rgba(2, 175, 242, 0.3) !important;
            transition: all 0.3s ease !important;
            margin-top: 15px !important;
        }

        body[data-path="login"] .btn-login:hover,
        body[data-path="login"] .btn-primary:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 25px rgba(2, 175, 242, 0.45) !important;
            background: linear-gradient(135deg, #05baff 0%, #029add 100%) !important;
        }

        /* 7. الروابط وإخفاء النص القديم */
        body[data-path="login"] a {
            color: #64748b !important;
            font-weight: 600 !important;
            text-decoration: none !important;
        }

        body[data-path="login"] a:hover {
            color: #02aff2 !important;
        }

        body[data-path="login"] .page-card-head h4 {
            display: none !important; 
        }

        /* =========================================
           👤 هوية طيبة لصفحة "حسابي" الخارجية (My Account Portal)
           ========================================= */

        /* 1. تنظيف خلفية الصفحة الرئيسية */
        body[data-path="me"] {
            background-color: #f4f8fb !important; /* لون رمادي/سماوي فاتح جداً مريح للعين */
        }

        /* 2. تحويل الشريط الجانبي (Web Sidebar) إلى كبسولة طيبة الزرقاء */
        body[data-path="me"] .web-sidebar {
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            border-radius: 20px !important;
            padding: 24px 12px !important;
            box-shadow: 0 10px 30px rgba(2, 175, 242, 0.15) !important;
            margin-top: 15px !important;
            border: none !important;
        }

        /* تنسيق الروابط داخل الشريط الجانبي */
        body[data-path="me"] .web-sidebar .sidebar-item a {
            color: rgba(255, 255, 255, 0.8) !important;
            font-weight: 600 !important;
            padding: 12px 16px !important;
            border-radius: 12px !important;
            display: block !important;
            transition: all 0.3s ease !important;
            margin-bottom: 6px !important;
        }

        body[data-path="me"] .web-sidebar .sidebar-item a:hover {
            background-color: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
            transform: translateX(4px) !important;
        }

        /* الرابط النشط حالياً (Active) */
        body[data-path="me"] .web-sidebar .sidebar-item a.active {
            background-color: #ffffff !important;
            color: #02aff2 !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
            font-weight: 800 !important;
        }

        /* 3. الحاوية الرئيسية (Main Card) */
        body[data-path="me"] .my-account-container {
            background: #ffffff !important;
            border-radius: 24px !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
            padding: 40px !important;
            border: 1px solid #e2e8f0 !important;
            margin-top: 15px !important;
        }

        /* عنوان الصفحة (My Account) */
        body[data-path="me"] .my-account-header {
            color: #1e293b !important;
            font-weight: 800 !important;
            font-size: 26px !important;
            margin-bottom: 30px !important;
            padding-bottom: 15px !important;
            border-bottom: 2px solid #f1f5f9 !important;
        }

        /* 4. صفوف الإعدادات (البطاقات التفاعلية الداخلية) */
        body[data-path="me"] .account-info .col {
            background: #f8fafc !important;
            border-radius: 16px !important;
            padding: 20px 25px !important;
            margin-bottom: 16px !important;
            border: 1px solid #e2e8f0 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        body[data-path="me"] .account-info .col:hover {
            background: #ffffff !important;
            border-color: #02aff2 !important;
            box-shadow: 0 10px 25px rgba(2, 175, 242, 0.12) !important;
            transform: translateY(-3px) !important;
        }

        /* نصوص الإعدادات */
        body[data-path="me"] .my-account-item {
            font-weight: 800 !important;
            color: #0f172a !important;
            font-size: 16px !important;
        }

        body[data-path="me"] .my-account-item-desc {
            color: #64748b !important;
            font-size: 14px !important;
            margin-top: 6px !important;
            font-weight: 500 !important;
        }

        /* 5. الأزرار الجانبية (Edit Profile, Reset Password) */
        body[data-path="me"] .my-account-item-link a {
            display: flex !important;
            align-items: center !important;
            text-decoration: none !important;
            padding: 10px 20px !important;
            background: #f0f9ff !important; /* أزرق باهت جداً */
            border-radius: 12px !important;
            transition: all 0.3s ease !important;
            border: 1px solid #bae6fd !important;
        }

        body[data-path="me"] .item-link-text {
            color: #02aff2 !important;
            font-weight: 700 !important;
            font-size: 14px !important;
        }

        body[data-path="me"] .my-account-item-link svg.icon {
            stroke: #02aff2 !important; /* تلوين الأيقونة بالسماوي */
            transition: all 0.3s ease !important;
        }

        /* تأثير مرور الماوس على الأزرار */
        body[data-path="me"] .my-account-item-link a:hover {
            background: #02aff2 !important;
            border-color: #02aff2 !important;
            box-shadow: 0 4px 15px rgba(2, 175, 242, 0.3) !important;
        }

        body[data-path="me"] .my-account-item-link a:hover .item-link-text,
        body[data-path="me"] .my-account-item-link a:hover svg.icon {
            color: #ffffff !important;
            stroke: #ffffff !important;
        }

        /* 6. تنسيق الصورة الرمزية (Avatar) للمستخدم */
        body[data-path="me"] .avatar-frame {
            width: 54px !important;
            height: 54px !important;
            font-size: 22px !important;
            font-weight: 800 !important;
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            color: #ffffff !important;
            border: 3px solid #e0eff7 !important;
            box-shadow: 0 4px 12px rgba(2, 175, 242, 0.25) !important;
        }

        body[data-path="me"] .my-account-name {
            font-size: 18px !important;
            font-weight: 800 !important;
            color: #0f172a !important;
        }

        /* 📱 7. التجاوب مع الجوال (Mobile Responsiveness) */
        @media (max-width: 767px) {
            body[data-path="me"] .web-sidebar {
                min-height: auto !important;
                margin-bottom: 20px !important;
            }
            body[data-path="me"] .my-account-container {
                padding: 24px !important;
            }
            body[data-path="me"] .account-info .col {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 15px !important;
            }
            body[data-path="me"] .my-account-item-link {
                width: 100% !important;
            }
            body[data-path="me"] .my-account-item-link a {
                justify-content: center !important;
            }
        }

/* =========================================
           ✨ 8. الإصلاح الآمن للشريط العلوي (Portal Navbar) ✨
           ========================================= */

        /* 1. الشريط العلوي: خلفية بيضاء، ظل ناعم، وارتفاع مناسب */
        body[data-path="me"] nav.navbar {
            background-color: #ffffff !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            border-bottom: 1px solid #e2e8f0 !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }

        /* 2. ضبط الشعار (Logo) */
        body[data-path="me"] .navbar-brand {
            padding: 0 !important;
            margin: 0 !important;
        }

        body[data-path="me"] .navbar-brand img {
            max-height: 40px !important; /* يمكنك تعديل الرقم حسب شعاركم */
            width: auto !important;
        }

        /* 3. تجميل أيقونة المستخدم (Avatar) وتوسيط الحرف بداخلها */
        body[data-path="me"] .navbar .avatar-frame {
            width: 36px !important;
            height: 36px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 16px !important;
            font-weight: 800 !important;
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            color: #ffffff !important;
            border: 2px solid #e0eff7 !important;
            margin: 0 !important;
            box-shadow: 0 2px 8px rgba(2, 175, 242, 0.3) !important;
        }

        /* 4. إعدام الفراغ الأبيض بين الشريط والمحتوى */
        body[data-path="me"] .page-header-wrapper {
            display: none !important;
        }

        /* محاذاة الشريط الجانبي والبطاقة */
        body[data-path="me"] .web-sidebar,
        body[data-path="me"] .my-account-container {
            margin-top: 20px !important;
        }

        /* =========================================
           📱 10. الاحترافية في التجاوب (Responsive & Layout Fixes)
           ========================================= */

        /* 1. إصلاح طول الشريط الأزرق في الديسكتوب وجعله يتبعك عند النزول (Sticky) */
        body[data-path="me"] .web-sidebar {
            height: fit-content !important; /* لا تتمدد للأسفل أكثر من محتواك */
            position: sticky !important;
            top: 90px !important; /* مسافة مريحة من الشريط العلوي */
        }

        /* -----------------------------------------
           تنسيقات الجوال والشاشات الصغيرة (أقل من 768px)
           ----------------------------------------- */
        @media (max-width: 768px) {
            
            /* 1. فك الاشتباك بين القائمة الجانبية والمحتوى (ترتيب عمودي) */
            body[data-path="me"] #page-me {
                display: flex !important;
                flex-direction: column !important;
            }

            /* 2. تحويل الشريط الجانبي في الجوال إلى قائمة أفقية قابلة للسحب (Horizontal Scroll) */
            body[data-path="me"] .web-sidebar {
                padding: 15px 10px !important;
                margin-top: 10px !important;
                margin-bottom: 10px !important;
                position: relative !important; /* إلغاء الـ Sticky في الجوال */
                top: 0 !important;
                border-radius: 16px !important;
            }

            body[data-path="me"] .web-sidebar .sidebar-items > ul {
                display: flex !important;
                flex-direction: row !important;
                overflow-x: auto !important; /* تفعيل السحب الجانبي */
                scroll-behavior: smooth !important;
                white-space: nowrap !important;
                gap: 8px !important;
                padding-bottom: 5px !important;
            }
            
            /* إخفاء شريط التمرير (Scrollbar) لشكل أنظف */
            body[data-path="me"] .web-sidebar .sidebar-items > ul::-webkit-scrollbar {
                display: none !important;
            }

            body[data-path="me"] .web-sidebar .sidebar-item a {
                margin-bottom: 0 !important;
                padding: 8px 16px !important;
                font-size: 14px !important;
                white-space: nowrap !important;
            }

            /* 3. ترتيب وتوسيط حاوية المحتوى الرئيسية */
            body[data-path="me"] .my-account-container {
                padding: 25px 15px !important;
                margin-top: 5px !important;
            }

            /* 4. ترتيب البطاقات الداخلية بشكل عمودي حتى لا تنضغط */
            body[data-path="me"] .account-info > .col {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 15px !important;
                padding: 20px 15px !important;
            }

            /* 5. ترتيب صورة المستخدم واسمه ليكونوا فوق بعض */
            body[data-path="me"] .account-info .col > div:first-child {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 12px !important;
                width: 100% !important;
            }

            body[data-path="me"] .my-account-name {
                margin-left: 0 !important; /* إلغاء الهامش الجانبي */
            }

            /* 6. جعل الأزرار بعرض كامل لسهولة الضغط بالاصبع */
            body[data-path="me"] .my-account-item-link {
                width: 100% !important;
                margin-top: 10px !important;
            }

            body[data-path="me"] .my-account-item-link a {
                width: 100% !important;
                justify-content: center !important;
                padding: 12px !important;
            }
            
            /* إعادة النصوص المخفية للأزرار في الجوال */
            body[data-path="me"] .item-link-text {
                display: inline-block !important;
            }
        }

       /* =========================================
           🚫 12. الضربة القاضية للشريط البنفسجي
           ========================================= */

        /* استهداف كل طبقات الهيدر والنافبار ومسح أي تدرج لوني أو خلفية */
        body[data-path="me"] header,
        body[data-path="me"] header.web-header,
        body[data-path="me"] nav.navbar,
        body[data-path="me"] .navbar-light {
            background-color: #ffffff !important;
            background-image: none !important;
            background: #ffffff !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }
            /* =========================================
           🔧 13. التوسيط المثالي للأيقونة ومنع القص
           ========================================= */

        /* 1. إجبار الرابط المحيط بالأيقونة على عدم قص المحتوى */
        body[data-path="me"] .navbar .nav-link.nav-avatar {
            padding: 0 15px !important; /* إعطاء مساحة جانبية للضغط */
            height: auto !important; 
            overflow: visible !important; /* السر هنا: يمنع قص الحواف أو الظل */
            display: flex !important;
            align-items: center !important;
        }

        /* 2. تحرير الحاوية الداخلية */
        body[data-path="me"] .navbar .user-image-wrapper {
            width: auto !important;
            height: auto !important;
            overflow: visible !important;
            display: flex !important;
            align-items: center !important;
        }

        /* 3. تأكيد الشكل الدائري للأيقونة وتوسيط الحرف */
        body[data-path="me"] .navbar .avatar-frame {
            width: 38px !important;
            height: 38px !important;
            line-height: 1 !important; /* لمنع قص الحرف من الأعلى أو الأسفل */
            border-radius: 50% !important; /* إجبارها لتكون دائرة مثالية */
            box-sizing: border-box !important; /* لجعل الإطار الأبيض من ضمن الـ 38 بيكسل */
            margin: 0 !important;
        }
            /* =========================================
           🛡️ 14. تحرير الأيقونة وإصلاح قائمة الجوال
           ========================================= */

        /* 1. إجبار كل الحاويات العلوية على فتح أذرعها وعدم القص */
        body[data-path="me"] .navbar,
        body[data-path="me"] .navbar-collapse,
        body[data-path="me"] .navbar-nav,
        body[data-path="me"] .nav-item.dropdown,
        body[data-path="me"] .nav-link.nav-avatar,
        body[data-path="me"] .user-image-wrapper {
            overflow: visible !important;
            height: auto !important; /* فك القيد عن الارتفاع */
            position: relative !important;
        }

        /* 2. إبعاد الأيقونة عن السقف لتأخذ راحتها الدائرية */
        body[data-path="me"] .navbar .avatar-frame {
            width: 42px !important;
            height: 42px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important; /* دائرة مثالية إجبارية */
            margin: 4px 0 !important; /* إبعادها عن السقف 4 بيكسل لمنع القص */
            box-sizing: border-box !important;
        }

        /* -----------------------------------------
           📱 3. إصلاح قائمة الجوال (Hamburger Dropdown)
           ----------------------------------------- */
        @media (max-width: 991px) {
            body[data-path="me"] .navbar-collapse {
                background: #ffffff !important;
                border-radius: 16px !important;
                padding: 15px !important;
                box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
                position: absolute !important; /* جعلها تطفو فوق المحتوى */
                top: 70px !important;
                left: 15px !important;
                right: 15px !important;
                z-index: 9999 !important;
                border: 1px solid #e2e8f0 !important;
            }
            
            body[data-path="me"] .navbar-collapse .nav-item {
                margin-bottom: 5px !important;
            }
        }
    /* =========================================
           🌐 15. توحيد الشريط العلوي الأبيض (قنص الكلاسات الافتراضية)
           ========================================= */

        body nav.navbar.navbar-light.navbar-expand-lg,
        body header.navbar {
            background-color: #ffffff !important;
            background-image: none !important;
            background: #ffffff !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            border-bottom: 1px solid #e2e8f0 !important;
            min-height: 70px !important;
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        body nav.navbar a,
        body nav.navbar .nav-link,
        body nav.navbar .navbar-brand span {
            color: #1e293b !important;
            font-weight: 700 !important;
        }

        /* تحرير وتلوين الأيقونة الدائرية (Avatar) في كل الصفحات */
        body nav.navbar .nav-link.nav-avatar,
        body nav.navbar .user-image-wrapper {
            overflow: visible !important;
            display: flex !important;
            align-items: center !important;
            height: auto !important;
        }

        body nav.navbar .avatar-frame {
            width: 40px !important;
            height: 40px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            color: #ffffff !important;
            font-size: 16px !important;
            font-weight: 800 !important;
            border: 2px solid #e0eff7 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            box-shadow: 0 2px 8px rgba(2, 175, 242, 0.3) !important;
            line-height: 1 !important;
        }

       /* =========================================
           📝 16. هوية طيبة لصفحات النماذج والتعديل (مثل Update Profile)
           ========================================= */

        /* 1. إخفاء الفراغ المزعج أعلى العنوان */
        div[data-doctype="Web Form"] .web-form-container > div[style*="height: 3rem"] {
            display: none !important;
        }

        /* 2. دمج العنوان مع النموذج في بطاقة واحدة كبرى (Card) */
        div[data-doctype="Web Form"] .web-form-container {
            background: #ffffff !important;
            border-radius: 24px !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
            padding: 40px !important;
            border: 1px solid #e2e8f0 !important;
            margin-top: 30px !important;
            margin-bottom: 30px !important;
        }

        /* 3. إلغاء الخلفيات والحدود من الأجزاء الداخلية لمنع التكرار */
        div[data-doctype="Web Form"] .web-form {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* 4. تنسيق الترويسة (Header) بداخل البطاقة المدمجة */
        div[data-doctype="Web Form"] .web-form-header {
            margin-bottom: 30px !important;
            border-bottom: 2px solid #f1f5f9 !important;
            padding-bottom: 20px !important;
            background: transparent !important;
        }

        div[data-doctype="Web Form"] .web-form-title h1 {
            color: #1e293b !important;
            font-weight: 800 !important;
            font-size: 26px !important;
            margin: 0 !important;
        }

        /* محاذاة العنوان وزر التعديل على نفس الخط */
        div[data-doctype="Web Form"] .web-form-head .title {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        /* 5. حقول الإدخال */
        div[data-doctype="Web Form"] .form-control {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            padding: 12px 16px !important;
            height: auto !important; 
            min-height: 48px !important;
            font-size: 15px !important;
            transition: all 0.3s ease !important;
        }

        div[data-doctype="Web Form"] .form-control:focus {
            background: #ffffff !important;
            border-color: #02aff2 !important;
            box-shadow: 0 0 0 4px rgba(2, 175, 242, 0.15) !important;
            outline: none !important;
        }

        /* عناوين الحقول */
        div[data-doctype="Web Form"] .control-label,
        div[data-doctype="Web Form"] .form-group label {
            color: #475569 !important;
            font-weight: 700 !important;
            margin-bottom: 8px !important;
            font-size: 14px !important;
        }

        /* 6. الأزرار الأساسية (زر الحفظ Submit) */
        div[data-doctype="Web Form"] .web-form-actions .btn-primary,
        div[data-doctype="Web Form"] .btn-primary {
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            border: none !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            padding: 10px 24px !important;
            box-shadow: 0 6px 20px rgba(2, 175, 242, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        div[data-doctype="Web Form"] .web-form-actions .btn-primary:hover,
        div[data-doctype="Web Form"] .btn-primary:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 25px rgba(2, 175, 242, 0.45) !important;
            background: linear-gradient(135deg, #05baff 0%, #029add 100%) !important;
        }

        /* 7. زر التعديل (Edit) - تأثير فخم يشبه زر الحفظ */
        div[data-doctype="Web Form"] .btn-default {
            background: #f0f9ff !important; /* سماوي باهت */
            border: 1px solid #bae6fd !important;
            border-radius: 12px !important;
            color: #02aff2 !important;
            font-weight: 800 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            padding: 10px 24px !important;
            box-shadow: none !important;
        }

        /* تأثير الطفو والامتلاء باللون عند مرور الماوس على زر Edit */
        div[data-doctype="Web Form"] .btn-default:hover {
            background: #02aff2 !important;
            color: #ffffff !important;
            border-color: #02aff2 !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 20px rgba(2, 175, 242, 0.25) !important;
        }

        /* 📱 8. تجاوب الجوال للصفحات الداخلية */
        @media (max-width: 768px) {
            div[data-doctype="Web Form"] .web-form-container {
                padding: 24px 20px !important;
                border-radius: 16px !important;
            }
            div[data-doctype="Web Form"] .web-form-title h1 {
                font-size: 22px !important;
            }
            div[data-doctype="Web Form"] .web-form-head .title {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 15px !important;
            }
            div[data-doctype="Web Form"] .btn-default {
                width: 100% !important;
            }
        }

        /* =========================================
           🔑 17. هوية طيبة لشاشة تغيير كلمة المرور (Update Password)
           ========================================= */

        /* 1. توحيد لون الخلفية وتوسيط المحتوى عمودياً */
        body[data-path^="update-password"] {
            background-color: #f4f8fb !important;
        }

        body[data-path^="update-password"] .page-content-wrapper,
        body[data-path^="update-password"] main.container {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: calc(100vh - 90px) !important; /* لملء الشاشة مع ترك مساحة للهيدر */
            margin: 0 auto !important;
        }

        /* 2. تصميم البطاقة (Card) لتشبه بطاقات البوابة */
        body[data-path^="update-password"] .page-card {
            background: #ffffff !important;
            border-radius: 24px !important;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
            padding: 45px 35px !important;
            border: 1px solid #e2e8f0 !important;
            width: 100% !important;
            max-width: 420px !important;
            margin: 0 auto !important;
        }

        /* 3. تنسيق العنوان (Reset Password) ليكون فخماً ومتوسيطاً */
        body[data-path^="update-password"] .page-header {
            border: none !important;
            margin-bottom: 25px !important;
            text-align: center !important;
        }

        body[data-path^="update-password"] .page-header h1,
        body[data-path^="update-password"] h4,
        body[data-path^="update-password"] .text-center {
            color: #1e293b !important;
            font-weight: 800 !important;
            font-size: 24px !important;
            margin: 0 !important;
        }

        /* 4. حقول الإدخال (كلمة المرور القديمة والجديدة) */
        body[data-path^="update-password"] .form-control {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            padding: 14px 16px !important;
            height: 52px !important;
            font-size: 15px !important;
            transition: all 0.3s ease !important;
            margin-bottom: 16px !important; /* مسافة مريحة بين الحقول */
        }

        body[data-path^="update-password"] .form-control:focus {
            background: #ffffff !important;
            border-color: #02aff2 !important;
            box-shadow: 0 0 0 4px rgba(2, 175, 242, 0.15) !important;
            outline: none !important;
        }

        /* 5. زر التأكيد (Confirm) - التدرج الفخم */
        body[data-path^="update-password"] .btn-primary {
            background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
            border: none !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            font-size: 16px !important;
            height: 52px !important;
            width: 100% !important;
            box-shadow: 0 6px 20px rgba(2, 175, 242, 0.3) !important;
            transition: all 0.3s ease !important;
            margin-top: 10px !important;
        }

        body[data-path^="update-password"] .btn-primary:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 25px rgba(2, 175, 242, 0.45) !important;
            background: linear-gradient(135deg, #05baff 0%, #029add 100%) !important;
        }

        /* --- إخفاء تام لأي عناصر قد تسبب الوميض (Loading Screen) --- */
.page-container, .web-form {
    opacity: 1 !important;
}

/* --- النافبار (الشريط العلوي) --- */
nav.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* --- توحيد البطاقات في كل الصفحات (Web Forms & Cards) --- */
.web-form-container, .page-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 30px !important;
}

/* --- تنسيق الحقول بشكل موحد --- */
.form-control, .input-with-feedback {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
}

/* --- زر الحفظ (Submit) وزر التعديل (Edit) --- */
.btn-primary, .web-form-actions .btn-primary {
    background: linear-gradient(135deg, #02aff2 0%, #008cc2 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    padding: 10px 25px !important;
}

.btn-default, .edit-button, .discard-btn {
    background: #f0f9ff !important;
    color: #02aff2 !important;
    border: 1px solid #bae6fd !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* --- إخفاء اسم المستخدم المنفصل في الترويسة --- */
.web-form-head .title .web-form-title {
    width: 100% !important;
}
.web-form-head .title .indicator-pill {
    display: none !important;
}

/* --- إجبار لون الخلفية العام --- */
body {
    background-color: #f4f8fb !important;
}
.page-card-head img {
    max-height: 95px;
}