/* _content/EliteTechWeb.Web/Components/Layout/AdminLayout.razor.rz.scp.css */
/* ==========================================================================
   التنسيقات النمطية المعزولة كلياً لـ AdminLayout (Fixed Header & Perfect Spacing)
   المشروع: Elite Tech Enterprise System
   ========================================================================== */

/* 🌟 1. الحاوية الرئيسية */
.admin-layout-wrapper[b-jpbft501zb] {
    display: flex;
    min-height: 100vh;
    background-color: #040c14;
    color: #ffffff;
    direction: rtl;
    position: relative;
    font-family: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden; /* ضروري لمنع السحب الأفقي */
}

/* 🌟 2. طبقة التعتيم (تُدار مرئيتها عبر الـ JS) */
.sidebar-overlay[b-jpbft501zb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    cursor: pointer;
}

/* 🌟 3. المحتوى الرئيسي */
.admin-layout-wrapper > .admin-main-content[b-jpbft501zb] {
    margin-right: 0 !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

/* 🌟 4. الهيدر العلوي (ثابت مطلقاً) */
.admin-layout-wrapper .admin-topbar[b-jpbft501zb] {
    position: fixed; /* تثبيت الهيدر أعلى الشاشة دائماً */
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    height: 70px; /* 🔴 ارتفاع الهيدر ثابت 70 بكسل */
    background: rgba(6, 19, 31, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.admin-layout-wrapper .topbar-left[b-jpbft501zb],
.admin-layout-wrapper .topbar-right[b-jpbft501zb] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* زر القائمة الجانبية */
.admin-layout-wrapper .btn-toggle-sidebar[b-jpbft501zb] {
    display: flex !important;
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid rgba(24, 200, 248, 0.4);
    color: #18c8f8;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .admin-layout-wrapper .btn-toggle-sidebar:hover[b-jpbft501zb] {
        background: #18c8f8;
        color: #06131f;
        box-shadow: 0 0 12px rgba(24, 200, 248, 0.5);
    }

/* مؤشرات الهيدر */
.admin-layout-wrapper .topbar-status[b-jpbft501zb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-layout-wrapper .status-indicator[b-jpbft501zb] {
    width: 8px;
    height: 8px;
    background-color: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff88;
}

.admin-layout-wrapper .status-text[b-jpbft501zb] {
    font-size: 0.8rem;
    color: #a0a0a0;
}

.admin-layout-wrapper .topbar-user[b-jpbft501zb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(24, 200, 248, 0.1);
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18c8f8;
    font-weight: 600;
    font-size: 0.85rem;
}

/* 🌟 5. جسم الصفحة (السر المعماري لحل مشكلة التداخل) */
.admin-layout-wrapper .admin-page-body[b-jpbft501zb] {
    flex-grow: 1;
    /* 🔴 الحسبة: (70px حجم الهيدر + 24px مسافة أمان = 94px إزاحة من الأعلى) */
    padding: calc(70px + 1.5rem) 1.5rem 1.5rem 1.5rem;
}

/* 🌟 6. التجاوب مع الجوال والتابلت */
@media (max-width: 991px) {
    .admin-layout-wrapper .admin-topbar[b-jpbft501zb] {
        padding: 0 1rem;
    }

    .admin-layout-wrapper .admin-page-body[b-jpbft501zb] {
        /* 🔴 في الجوال: (70px حجم الهيدر + 16px مسافة أمان = 86px إزاحة من الأعلى) */
        padding: calc(70px + 1rem) 0.8rem 1rem 0.8rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Layout/AdminSidebar.razor.rz.scp.css */
/* ==========================================================================
   🌟 ELITE TECH ADMIN SIDEBAR (Compact Cyber & Perfect Responsive Layout)
   ========================================================================== */

/* 1. الهيكل الأساسي للقائمة الجانبية */
.admin-drawer-sidebar[b-3kfvpfax76],
#adminDrawerSidebarElement[b-3kfvpfax76] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 270px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #06131F !important;
    border-left: 1px solid rgba(24, 200, 248, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    z-index: 1050 !important;
    box-sizing: border-box !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85) !important;
    direction: rtl;
    user-select: none;
}

    .admin-drawer-sidebar.drawer-open[b-3kfvpfax76],
    #adminDrawerSidebarElement.drawer-open[b-3kfvpfax76] {
        transform: translateX(0) !important;
    }

/* ==========================================================================
   2. رأس القائمة والهوية البصرية (استعادة حجم اللوغو الفخم والمناسب)
   ========================================================================== */
.sidebar-brand[b-3kfvpfax76] {
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    background: rgba(6, 19, 31, 0.95);
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.brand-info[b-3kfvpfax76] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* 🌟 استعادة حجم اللوغو الأصلي الواضح */
.brand-logo[b-3kfvpfax76] {
    height: 48px;
    width: auto;
    object-fit: contain;
    background: transparent !important;
    filter: none !important;
    flex-shrink: 0;
}

.brand-text-block[b-3kfvpfax76] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
    min-width: 0;
}

.portal-badge[b-3kfvpfax76] {
    font-size: 0.62rem;
    font-weight: 800;
    color: #18C8F8;
    letter-spacing: 1px;
    line-height: 1;
    font-family: 'Plus Jakarta Sans', monospace;
}

.company-name[b-3kfvpfax76] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-close-sidebar[b-3kfvpfax76] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #B6D5E8;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

    .btn-close-sidebar:hover[b-3kfvpfax76] {
        background: #FF4D4D;
        color: #FFFFFF;
        border-color: #FF4D4D;
        transform: scale(1.08);
    }

/* ==========================================================================
   3. الروابط التنقلية الرشيقة والمنخفضة الارتفاع (Ultra Compact Nav Items)
   ========================================================================== */
.sidebar-nav[b-3kfvpfax76] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.4rem 0.5rem;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 200, 248, 0.25) transparent;
}

    .sidebar-nav[b-3kfvpfax76]::-webkit-scrollbar {
        width: 3px;
    }

    .sidebar-nav[b-3kfvpfax76]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.25);
        border-radius: 3px;
    }

.nav-section-label[b-3kfvpfax76] {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(182, 213, 232, 0.5);
    margin: 0.35rem 0.45rem 0.1rem 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .nav-section-label:first-child[b-3kfvpfax76] {
        margin-top: 0.05rem;
    }

/* 🌟 زر الرابط التنقلي بارتفاع منخفض ورشيق جداً */
.nav-item[b-3kfvpfax76] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.55rem;
    min-height: 32px;
    color: #B6D5E8;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

    .nav-item:hover[b-3kfvpfax76] {
        background: rgba(24, 200, 248, 0.08);
        color: #FFFFFF;
        border-color: rgba(24, 200, 248, 0.2);
        transform: translateX(-2px);
    }

    .nav-item.active[b-3kfvpfax76] {
        background: linear-gradient(270deg, rgba(24, 200, 248, 0.16) 0%, rgba(11, 35, 65, 0.45) 100%);
        color: #18C8F8;
        border-color: rgba(24, 200, 248, 0.35);
        border-right: 3px solid #18C8F8;
        font-weight: 700;
    }

.nav-icon-box[b-3kfvpfax76] {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18C8F8;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-item:hover .nav-icon-box[b-3kfvpfax76] {
    background: rgba(24, 200, 248, 0.2);
    border-color: #18C8F8;
    color: #FFFFFF;
}

.nav-item.active .nav-icon-box[b-3kfvpfax76] {
    background: #18C8F8;
    border-color: #18C8F8;
    color: #06131F;
    box-shadow: 0 0 8px rgba(24, 200, 248, 0.5);
}

.nav-label[b-3kfvpfax76] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.nav-item-external[b-3kfvpfax76] {
    border: 1px dashed rgba(24, 200, 248, 0.25);
    background: rgba(24, 200, 248, 0.03);
    margin-top: 0.15rem;
}

/* ==========================================================================
   4. تذييل القائمة وزر المشاركة (Compact Footer)
   ========================================================================== */
.sidebar-footer[b-3kfvpfax76] {
    padding: 0.5rem 0.65rem;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
    background: rgba(6, 19, 31, 0.95);
    flex-shrink: 0;
}

.system-status-indicator[b-3kfvpfax76] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.pulse-dot[b-3kfvpfax76] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00FF9D;
    box-shadow: 0 0 6px #00FF9D;
}

.status-text[b-3kfvpfax76] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #00FF9D;
}

.btn-share-site[b-3kfvpfax76] {
    width: 100%;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.25);
    color: #18C8F8;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .btn-share-site:hover[b-3kfvpfax76] {
        background: #18C8F8;
        color: #06131F;
        box-shadow: 0 0 10px rgba(24, 200, 248, 0.4);
    }

/* ==========================================================================
   5. تحسينات إضافية لشاشات الجوال فائقة الرشاقة (Mobile Responsive)
   ========================================================================== */
@media (max-width: 768px) {
    .admin-drawer-sidebar[b-3kfvpfax76],
    #adminDrawerSidebarElement[b-3kfvpfax76] {
        width: 250px !important;
        max-width: 75vw !important;
    }

    .sidebar-brand[b-3kfvpfax76] {
        padding: 0.5rem 0.75rem;
    }

    .brand-logo[b-3kfvpfax76] {
        height: 42px;
        max-width: 50px;
    }

    .sidebar-nav[b-3kfvpfax76] {
        gap: 0.14rem;
        padding: 0.3rem 0.4rem;
    }

    .nav-item[b-3kfvpfax76] {
        padding: 0.25rem 0.45rem;
        min-height: 30px;
        font-size: 0.78rem;
        gap: 0.45rem;
    }

    .nav-icon-box[b-3kfvpfax76] {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .nav-section-label[b-3kfvpfax76] {
        margin: 0.25rem 0.35rem 0.05rem 0.35rem;
        font-size: 0.58rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Layout/ComingSoonLayout.razor.rz.scp.css */
.coming-soon-layout-root[b-7o24nmz08s] {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background-color: #06131F !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    direction: rtl;
}

.cs-layout-main[b-7o24nmz08s] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
/* _content/EliteTechWeb.Web/Components/Layout/EmptyLayout.razor.rz.scp.css */
.empty-layout-container[b-ichzeq9gre] {
    min-height: 100vh;
    width: 100%; /* 🌟 استخدم 100% بدلاً من 100vw لتجنب مشاكل العرض */
    background-color: #06131f;
    display: block; /* 🌟 إلغاء الـ flex ليسمح للصفحة الداخلية بالتمدد بحرية */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
    overflow-x: hidden;
}
/* _content/EliteTechWeb.Web/Components/Layout/Footer.razor.rz.scp.css */
/* ==========================================================================
   MAIN FOOTER - 100% RESPONSIVE & NEON GLASSMORPHISM
   ========================================================================== */

.main-footer[b-4d1rvuxssz] {
    background: rgba(4, 12, 20, 0.92);
    border-top: 1px solid rgba(24, 200, 248, 0.2);
    padding: 4.5rem 1rem 2rem 1rem;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-4d1rvuxssz] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* توهج خلفي محيطي */
.glow-ambient-footer[b-4d1rvuxssz] {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 700px);
    height: clamp(200px, 30vw, 350px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.12) 0%, transparent 70%);
    filter: blur(95px);
    pointer-events: none;
    z-index: 1;
}

/* شبكة الفوتر الرئيسية */
.footer-grid[b-4d1rvuxssz] {
    display: grid;
    grid-template-columns: 2.2fr 1.6fr 1.2fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

/* 1. عمود البراند والشعار المتناسق */
.footer-brand[b-4d1rvuxssz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-logo-wrap[b-4d1rvuxssz] {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

    /* 🌟 تحديد أبعاد الشعار لمنع تضخمه وضمان تناسقه مع باقي عناصر الموقع */
    .footer-logo[b-4d1rvuxssz],
    .footer-logo-img[b-4d1rvuxssz],
    .brand-logo-wrap img[b-4d1rvuxssz] {
        height: 44px !important;
        max-height: 44px !important;
        width: auto !important;
        max-width: 190px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 0 12px rgba(24, 200, 248, 0.35)) !important;
        display: block !important;
    }

.brand-title[b-4d1rvuxssz] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.6rem 0;
    letter-spacing: 0.5px;
}

.brand-tagline[b-4d1rvuxssz] {
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
    color: #B6D5E8;
    line-height: 1.7;
    margin: 0 0 1.4rem 0;
    max-width: 440px;
}

.saudi-entity-badge[b-4d1rvuxssz] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    background: rgba(0, 208, 132, 0.1);
    border: 1px solid rgba(0, 208, 132, 0.35);
    border-radius: 20px;
    color: #00FF9D;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(0, 208, 132, 0.2);
}

.icon-saudi[b-4d1rvuxssz] {
    color: #00FF9D;
}

/* 2 & 3. العناوين والقوائم */
.column-title[b-4d1rvuxssz] {
    font-size: 1.08rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 1.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.column-icon[b-4d1rvuxssz] {
    color: #18C8F8;
    font-size: 0.95rem;
}

.column-title[b-4d1rvuxssz]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    inset-inline-start: 0;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #18C8F8, transparent);
    border-radius: 2px;
}

.contact-list[b-4d1rvuxssz], .links-list[b-4d1rvuxssz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

    .contact-list li[b-4d1rvuxssz] {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        color: #B6D5E8;
        font-size: 0.88rem;
    }

.icon-ring[b-4d1rvuxssz] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.contact-list li:hover .icon-ring[b-4d1rvuxssz] {
    background: #18C8F8;
    color: #06131F;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.6);
}

.contact-list a[b-4d1rvuxssz], .links-list a[b-4d1rvuxssz] {
    color: #B6D5E8;
    text-decoration: none;
    transition: all 0.25s ease;
    font-weight: 600;
}

    .contact-list a:hover[b-4d1rvuxssz], .links-list a:hover[b-4d1rvuxssz] {
        color: #18C8F8;
        transform: translateX(-3px);
    }

.link-arrow[b-4d1rvuxssz] {
    font-size: 0.75rem;
    margin-inline-end: 0.35rem;
    color: #18C8F8;
}

.nav-anchor-link[b-4d1rvuxssz] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0;
}

/* 4. شريط الحقوق السفلي */
.footer-bottom[b-4d1rvuxssz] {
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.84rem;
    color: #8CAABF;
    font-weight: 600;
}

    .footer-bottom p[b-4d1rvuxssz] {
        margin: 0;
    }

/* ==========================================================================
   📱 التجاوب مع مختلف الشاشات (Tablet & Mobile 360x740)
   ========================================================================== */
@media (max-width: 992px) {
    .footer-grid[b-4d1rvuxssz] {
        grid-template-columns: 1.2fr 1fr;
        gap: 2.5rem;
    }

    .footer-brand[b-4d1rvuxssz] {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .main-footer[b-4d1rvuxssz] {
        padding: 3.5rem 0.85rem 1.8rem 0.85rem;
    }

    .footer-grid[b-4d1rvuxssz] {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        margin-bottom: 2.5rem;
    }

    .footer-brand[b-4d1rvuxssz] {
        grid-column: span 1;
    }

    .brand-tagline[b-4d1rvuxssz] {
        max-width: 100%;
    }

    .footer-logo[b-4d1rvuxssz],
    .footer-logo-img[b-4d1rvuxssz],
    .brand-logo-wrap img[b-4d1rvuxssz] {
        height: 38px !important;
        max-height: 38px !important;
    }
}
/* _content/EliteTechWeb.Web/Components/Layout/Header.razor.rz.scp.css */
/* ==========================================================================
   MASTER LUXURY STAGE HEADER - CENTERED LOGO & REFINED SOFT LEFT BURGER
   ========================================================================== */

.master-header[b-nswfds0s6a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
    background: transparent;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
    box-sizing: border-box;
}

    .master-header.is-scrolled[b-nswfds0s6a] {
        background: rgba(4, 9, 17, 0.88);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(24, 200, 248, 0.18);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    }

.header-inner-container[b-nswfds0s6a] {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
}

/* خط التقدم الليزري بقمة الشاشة */
.scroll-laser-line[b-nswfds0s6a] {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #0284c7, #18C8F8, #64E8FF);
    box-shadow: 0 0 10px #18C8F8;
    transition: width 0.1s linear;
    z-index: 1005;
}

/* ==========================================================================
   1. زر القائمة الجانبية الناعم والخفيف (مثبت على اليسار دائماً)
   ========================================================================== */
.header-left-box[b-nswfds0s6a] {
    display: flex;
    align-items: center;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1010;
}

.header-burger-btn[b-nswfds0s6a] {
    width: 36px;
    height: 36px;
    background: rgba(24, 200, 248, 0.05);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    padding: 0;
    box-sizing: border-box;
}

.burger-bar[b-nswfds0s6a] {
    width: 16px;
    height: 1.8px;
    background-color: #18C8F8;
    border-radius: 2px;
    transition: all 0.25s ease;
    opacity: 0.9;
}

    .burger-bar.short[b-nswfds0s6a] {
        width: 11px;
        align-self: flex-start;
        margin-inline-start: 10px;
    }

.header-burger-btn:hover[b-nswfds0s6a] {
    background: rgba(24, 200, 248, 0.15);
    border-color: rgba(24, 200, 248, 0.45);
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.35);
    transform: scale(1.04);
}

    .header-burger-btn:hover .burger-bar[b-nswfds0s6a] {
        opacity: 1;
        box-shadow: 0 0 6px rgba(24, 200, 248, 0.7);
    }

        .header-burger-btn:hover .burger-bar.short[b-nswfds0s6a] {
            width: 16px;
            align-self: center;
            margin-inline-start: 0;
        }

.header-burger-btn:active[b-nswfds0s6a] {
    transform: scale(0.95);
}

/* ==========================================================================
   2. الشعار الممركز في الوسط مع حركة الهبوط الناعمة من الأعلى
   ========================================================================== */
.header-center-brand[b-nswfds0s6a] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1005;
    pointer-events: none;
}

.logo-trigger-link[b-nswfds0s6a] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    pointer-events: auto;
}

.master-header-logo[b-nswfds0s6a] {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 0;
    /* 🌟 يبدأ من أعلى خارج الهيدر ويهبط بسلاسة عند الظهور */
    transform: translateY(-40px) scale(0.9);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 0 10px rgba(24, 200, 248, 0.35));
    will-change: transform, opacity;
}

    .master-header-logo.is-visible[b-nswfds0s6a] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.header-right-spacer[b-nswfds0s6a] {
    width: 36px;
    height: 36px;
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================================
   3. القائمة الجانبية المنزلقة (Master Drawer)
   ========================================================================== */
.drawer-scrim-backdrop[b-nswfds0s6a] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10500;
    animation: fadeInBackdrop-b-nswfds0s6a 0.3s ease forwards;
}

@keyframes fadeInBackdrop-b-nswfds0s6a {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   3. القائمة الجانبية المنزلقة (Master Drawer) - مثبتة على اليسار دائماً
   ========================================================================== */
.drawer-scrim-backdrop[b-nswfds0s6a] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10500;
    animation: fadeInBackdrop-b-nswfds0s6a 0.3s ease forwards;
}

@keyframes fadeInBackdrop-b-nswfds0s6a {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 🌟 تثبيت القائمة الجانبية على اليسار في كلا اللغتين (عربي وإنجليزي) */
.master-drawer-panel[b-nswfds0s6a] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0 !important; /* 👈 تثبيت دائم على اليسار */
    right: auto !important; /* 👈 إلغاء اليمين نهائياً */
    width: 320px;
    max-width: 85vw;
    background: linear-gradient(180deg, rgba(6, 19, 31, 0.98) 0%, rgba(4, 9, 17, 0.98) 100%);
    border-right: 1px solid rgba(24, 200, 248, 0.25) !important; /* 👈 حد الإضاءة جهة اليمين */
    border-left: none !important;
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.85) !important; /* 👈 الظل يتجه للداخل نحو اليمين */
    z-index: 10600;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.2rem;
    box-sizing: border-box;
    transform: translateX(-100%); /* 👈 تختفي لليسار خارج الشاشة */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

    /* 🌟 حالة الفتح: تنزلق من اليسار إلى الداخل في اللغتين */
    .master-drawer-panel.is-open[b-nswfds0s6a] {
        transform: translateX(0) !important;
    }

.drawer-header-pane[b-nswfds0s6a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    margin-bottom: 1rem;
}

.drawer-branding[b-nswfds0s6a] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drawer-logo[b-nswfds0s6a] {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.drawer-badge-saudi[b-nswfds0s6a] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #00FF9D;
    letter-spacing: 0.3px;
}

.drawer-dismiss-btn[b-nswfds0s6a] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #B6D5E8;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

    .drawer-dismiss-btn:hover[b-nswfds0s6a] {
        background: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
        color: #f87171;
        transform: rotate(90deg);
    }

.drawer-navigation-body[b-nswfds0s6a] {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.drawer-menu-category[b-nswfds0s6a] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(24, 200, 248, 0.7);
    margin-bottom: 0.75rem;
    padding-inline-start: 0.3rem;
}

.drawer-items-list[b-nswfds0s6a] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-glass-card[b-nswfds0s6a] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: start;
}

.nav-icon-wrapper[b-nswfds0s6a] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(24, 200, 248, 0.1);
    color: #18C8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

.nav-glass-card:hover[b-nswfds0s6a] {
    background: rgba(24, 200, 248, 0.12);
    border-color: rgba(24, 200, 248, 0.3);
    transform: translateX(-4px);
    color: #18C8F8;
}

body[dir="ltr"] .nav-glass-card:hover[b-nswfds0s6a],
[lang="en"] .nav-glass-card:hover[b-nswfds0s6a] {
    transform: translateX(4px);
}

.nav-glass-card:hover .nav-icon-wrapper[b-nswfds0s6a] {
    background: #18C8F8;
    color: #06131F;
    box-shadow: 0 0 10px rgba(24, 200, 248, 0.5);
}

.drawer-cta-wrap[b-nswfds0s6a] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(24, 200, 248, 0.2);
}

.btn-drawer-cta[b-nswfds0s6a] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    border: none;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 0 18px rgba(24, 200, 248, 0.4);
    transition: all 0.25s ease;
}

    .btn-drawer-cta:hover[b-nswfds0s6a] {
        transform: translateY(-2px);
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.6);
    }

.drawer-contact-card[b-nswfds0s6a] {
    background: rgba(4, 9, 17, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.15);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .drawer-contact-card .comp-name[b-nswfds0s6a] {
        font-size: 0.8rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 0.2rem;
    }

    .drawer-contact-card .contact-line[b-nswfds0s6a] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #B6D5E8;
        font-size: 0.78rem;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .drawer-contact-card .contact-line:hover[b-nswfds0s6a] {
            color: #18C8F8;
        }

/* ==========================================================================
   4. التجاوب مع شاشات الجوال والشاشات الصغيرة (360px - 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .header-inner-container[b-nswfds0s6a] {
        padding: 0 0.85rem;
    }

    .header-left-box[b-nswfds0s6a] {
        left: 0.85rem;
    }

    .header-burger-btn[b-nswfds0s6a] {
        width: 34px;
        height: 34px;
    }

    .master-header-logo[b-nswfds0s6a] {
        height: 32px;
        max-width: 130px;
    }

    .header-right-spacer[b-nswfds0s6a] {
        width: 34px;
        height: 34px;
    }
}

/* _content/EliteTechWeb.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MASTER LUXURY OBSIDIAN LAYOUT SYSTEM - 360px TO 4K ULTRA RESPONSIVE
   ========================================================================== */

:host[b-fhxgvd7uih] {
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #040911;
    color: #F8FAFC;
    overflow-x: hidden;
    position: relative;
}

/* هالة الشفق الأزرق المحيطي في الخلفية العميقة */
.ambient-mesh-glow[b-fhxgvd7uih] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 450px;
    background: radial-gradient(ellipse 80% 45% at 50% -10%, rgba(24, 200, 248, 0.08) 0%, rgba(7, 25, 47, 0.4) 50%, transparent 80%);
    pointer-events: none;
    z-index: -1; /* 👈 وضعها في الخلفية السفلية */
}

.global-kinetic-bg[b-fhxgvd7uih] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: -2; /* 👈 في أعمق طبقة خلفية */
    pointer-events: none;
    opacity: 0.85;
}

/* 🌟 تحرير إطار العرض الرئيسي من سياق التكديس المغلق */
.page-viewport-frame[b-fhxgvd7uih] {
    position: relative;
    z-index: auto !important; /* 👈 تحرير z-index ليسمح للمودالز بالظهور في القمة المطلقة */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.main-body-content[b-fhxgvd7uih] {
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    z-index: auto !important; /* 👈 تحرير z-index */
}

@media (max-width: 480px) {
    .ambient-mesh-glow[b-fhxgvd7uih] {
        height: 280px;
    }
}
/* _content/EliteTechWeb.Web/Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ==========================================================================
   BLAZOR RECONNECT MODAL CUSTOM STYLES
   تنسيقات نافذة إعادة الاتصال المحسّنة بـ Pure CSS
   ========================================================================== */

/* 1. إخفاء وإظهار حالات الاتصال المتعددة */
.components-reconnect-first-attempt-visible[b-ek33kp577d],
.components-reconnect-repeated-attempt-visible[b-ek33kp577d],
.components-reconnect-failed-visible[b-ek33kp577d],
.components-pause-visible[b-ek33kp577d],
.components-resume-failed-visible[b-ek33kp577d],
.components-rejoining-animation[b-ek33kp577d] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-retrying[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-failed[b-ek33kp577d],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ek33kp577d] {
    display: block;
}

/* 2. تصميم حاوية النافذة المنبثقة بالهوية الداكنة */
#components-reconnect-modal[b-ek33kp577d] {
    background-color: #06131F;
    color: #ffffff;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid rgba(24, 200, 248, 0.4);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(24, 200, 248, 0.2);
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    animation: components-reconnect-modal-fadeOutOpacity-b-ek33kp577d 0.5s both;
}

    /* حالة المودال المفتوح [open] */
    #components-reconnect-modal[open][b-ek33kp577d] {
        animation: components-reconnect-modal-slideUp-b-ek33kp577d 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ek33kp577d 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

    #components-reconnect-modal[b-ek33kp577d]::backdrop {
        background-color: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        animation: components-reconnect-modal-fadeInOpacity-b-ek33kp577d 0.5s ease-in-out;
        opacity: 1;
    }

/* 3. تأثيرات الحركة (Keyframe Animations) */
@keyframes components-reconnect-modal-slideUp-b-ek33kp577d {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ek33kp577d {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ek33kp577d {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 4. توزيع العناصر والزر الداخلي */
.components-reconnect-container[b-ek33kp577d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ek33kp577d] {
    margin: 0;
    text-align: center;
    color: #B6D5E8;
    font-size: 0.95rem;
}

#components-reconnect-modal button[b-ek33kp577d] {
    border: 1px solid #18C8F8;
    background-color: rgba(24, 200, 248, 0.15);
    color: #18C8F8;
    padding: 8px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

    #components-reconnect-modal button:hover[b-ek33kp577d] {
        background-color: #18C8F8;
        color: #06131F;
        box-shadow: 0 0 15px rgba(24, 200, 248, 0.6);
    }

    #components-reconnect-modal button:active[b-ek33kp577d] {
        transform: scale(0.98);
    }

/* 5. حركة دوائر التحميل (Rejoining Pulse Animation) */
.components-rejoining-animation[b-ek33kp577d] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ek33kp577d] {
        position: absolute;
        border: 3px solid #18C8F8;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ek33kp577d 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ek33kp577d] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ek33kp577d {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/AdminCompany.razor.rz.scp.css */
/* ==========================================================================
   COMPANY ADMIN PAGE - 100% RESPONSIVE (Tested down to 360px x 740px)
   ========================================================================== */

.company-admin-container[b-b5ztu6s9fv] {
    width: 100%;
    max-width: 1100px;
    margin-top: calc(70px + 1rem);
    padding: 0 1rem 2rem 1rem;
    box-sizing: border-box;
    direction: rtl;
    color: #FFFFFF;
}

.page-header[b-b5ztu6s9fv] {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
}

.header-title[b-b5ztu6s9fv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

    .header-title h2[b-b5ztu6s9fv] {
        font-size: clamp(1.2rem, 3vw, 1.6rem);
        color: #FFFFFF;
        margin: 0;
        font-weight: 800;
    }

.header-subtitle[b-b5ztu6s9fv] {
    color: #B6D5E8;
    font-size: 0.82rem;
    margin: 0.35rem 0 0 0;
}

.neon-icon[b-b5ztu6s9fv] {
    color: #18C8F8;
    filter: drop-shadow(0 0 10px rgba(24, 200, 248, 0.6));
    font-size: 1.5rem;
}

.neon-icon-sm[b-b5ztu6s9fv] {
    color: #18C8F8;
    font-size: 0.95rem;
}

/* بطاقة النموذج الزجاجية */
.glass-card[b-b5ztu6s9fv] {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.form-section-title[b-b5ztu6s9fv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #18C8F8;
    font-weight: 700;
    font-size: 0.92rem;
    margin: 1.4rem 0 0.8rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
}

    .form-section-title:first-of-type[b-b5ztu6s9fv] {
        margin-top: 0;
    }

.form-row[b-b5ztu6s9fv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.form-group[b-b5ztu6s9fv] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .form-group label[b-b5ztu6s9fv] {
        display: block;
        margin-bottom: 0.35rem;
        color: #B6D5E8;
        font-size: 0.82rem;
        font-weight: 600;
    }

.cyber-input[b-b5ztu6s9fv] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(4, 12, 20, 0.75);
    border: 1px solid rgba(24, 200, 248, 0.25);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 0.86rem;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
    min-height: 40px;
}

    .cyber-input:focus[b-b5ztu6s9fv] {
        border-color: #18C8F8;
        box-shadow: 0 0 12px rgba(24, 200, 248, 0.35);
    }

.val-msg[b-b5ztu6s9fv] {
    color: #FF5E36;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.form-actions[b-b5ztu6s9fv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-cyan-glow[b-b5ztu6s9fv] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    font-weight: 800;
    border: none;
    padding: 0.7rem 1.8rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    transition: all 0.25s ease;
    box-shadow: 0 0 18px rgba(24, 200, 248, 0.35);
    min-height: 42px;
}

    .btn-cyan-glow:hover[b-b5ztu6s9fv] {
        transform: translateY(-2px);
        box-shadow: 0 0 26px rgba(24, 200, 248, 0.6);
    }

    .btn-cyan-glow:disabled[b-b5ztu6s9fv] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* التنبيهات */
.alert-box[b-b5ztu6s9fv] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.alert-error[b-b5ztu6s9fv] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert-success[b-b5ztu6s9fv] {
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid rgba(0, 208, 132, 0.4);
    color: #6ee7b7;
}

.loading-state[b-b5ztu6s9fv], .empty-state[b-b5ztu6s9fv] {
    text-align: center;
    padding: 3rem 1rem;
    color: #B6D5E8;
}

.empty-icon[b-b5ztu6s9fv] {
    font-size: 2.5rem;
    color: rgba(24, 200, 248, 0.4);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال (Down to 360px x 740px)
   ========================================================================== */
@media (max-width: 768px) {
    .company-admin-container[b-b5ztu6s9fv] {
        margin-top: calc(70px + 0.5rem);
        padding: 0 0.5rem 1.5rem 0.5rem;
    }

    .glass-card[b-b5ztu6s9fv] {
        padding: 0.9rem 0.75rem;
        border-radius: 12px;
    }

    .form-row[b-b5ztu6s9fv] {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .form-actions[b-b5ztu6s9fv] {
        margin-top: 1.2rem;
        padding-top: 1rem;
    }

    .btn-cyan-glow[b-b5ztu6s9fv] {
        width: 100%;
    }
}

/* 🌟 تنسيق الحقول المخصصة للقراءة فقط */
.cyber-input.input-readonly[b-b5ztu6s9fv],
.cyber-input:read-only[b-b5ztu6s9fv] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #8fa0b5 !important;
    cursor: not-allowed !important;
    user-select: all; /* يسمح للمستخدم بنسخ المسار بسهولة */
}

    .cyber-input.input-readonly:focus[b-b5ztu6s9fv] {
        box-shadow: none !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

.badge-readonly[b-b5ztu6s9fv] {
    font-size: 0.68rem;
    color: #18C8F8;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.25);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/EmployeesAdmin.razor.rz.scp.css */
/* ==========================================================================
   EMPLOYEES ADMIN BOARD - MASTER PAGE STYLESHEET (CLEANED & OPTIMIZED)
   Component: EliteTechWeb.Web.Components.Pages.Admin.EmployeesAdmin
   ========================================================================== */

/* 🌟 1. إطار وهيكل الصفحة الرئيسي */
.admin-page-frame[b-ovacspw978] {
    width: 100%;
    margin-top: calc(70px + 1rem);
    padding: 0 1rem 2rem 1rem;
    box-sizing: border-box;
    color: #FFFFFF;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px - 1rem);
}

.admin-panel-header[b-ovacspw978] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
}

.header-title-block h2[b-ovacspw978] {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: #FFFFFF;
    margin: 0 0 0.2rem 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.neon-accent-icon[b-ovacspw978] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.header-title-block p[b-ovacspw978] {
    margin: 0;
    font-size: 0.8rem;
    color: #B6D5E8;
}

.btn-primary-cyber[b-ovacspw978] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    box-sizing: border-box;
}

    .btn-primary-cyber:hover[b-ovacspw978] {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55);
    }

    .btn-primary-cyber.btn-green[b-ovacspw978] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3);
    }

        .btn-primary-cyber.btn-green:hover[b-ovacspw978] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55);
        }

/* 🌟 2. البطاقة الزجاجية الداخلية */
.dashboard-inner-card[b-ovacspw978] {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 🌟 3. شريط الفلترة والبحث اللحظي */
.filter-action-bar[b-ovacspw978] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-cyber-wrapper[b-ovacspw978] {
    position: relative;
}

    .search-cyber-wrapper input[b-ovacspw978] {
        width: 100%;
        background: rgba(4, 12, 20, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 0.55rem 2.2rem 0.55rem 0.75rem;
        color: #FFFFFF;
        font-size: 0.84rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
        min-height: 40px;
    }

        .search-cyber-wrapper input:focus[b-ovacspw978] {
            border-color: #18C8F8;
        }

    .search-cyber-wrapper i[b-ovacspw978] {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: #18C8F8;
        font-size: 0.82rem;
    }

.select-cyber-dropdown[b-ovacspw978] {
    background: rgba(4, 12, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 40px;
}

/* 🌟 4. جدول الموظفين السيبراني */
.table-scroll-container[b-ovacspw978] {
    flex: 1;
    overflow-x: auto;
}

.cyber-admin-table[b-ovacspw978] {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.86rem;
}

    .cyber-admin-table th[b-ovacspw978] {
        color: #18C8F8;
        padding: 0.8rem 0.65rem;
        border-bottom: 2px solid rgba(24, 200, 248, 0.25);
        font-weight: 700;
        white-space: nowrap;
    }

    .cyber-admin-table td[b-ovacspw978] {
        padding: 0.75rem 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

/* تفاصيل الموظف والصورة الشخصية */
.employee-meta[b-ovacspw978] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.emp-avatar[b-ovacspw978] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #18C8F8;
    box-shadow: 0 0 10px rgba(24, 200, 248, 0.4);
    flex-shrink: 0;
    background: #02060C;
}

.emp-names-group[b-ovacspw978] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emp-name-ar[b-ovacspw978] {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 0.9rem;
}

.emp-name-en[b-ovacspw978] {
    font-size: 0.76rem;
    color: #B6D5E8;
}

.job-titles-group[b-ovacspw978] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-title-ar[b-ovacspw978] {
    font-weight: 600;
    color: #FFFFFF;
    font-size: 0.84rem;
}

.job-title-en[b-ovacspw978] {
    font-size: 0.74rem;
    color: #B6D5E8;
}

.badge-dept[b-ovacspw978] {
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
}

.contact-info[b-ovacspw978] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: #B6D5E8;
}

.contact-entry[b-ovacspw978] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .contact-entry i[b-ovacspw978] {
        color: #18C8F8;
        font-size: 0.75rem;
    }

.status-badge-pill[b-ovacspw978] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
    width: fit-content;
}

    .status-badge-pill.active[b-ovacspw978] {
        background: rgba(0, 208, 132, 0.15);
        border: 1px solid #00D084;
        color: #00FF9D;
        box-shadow: 0 0 10px rgba(0, 208, 132, 0.25);
    }

    .status-badge-pill.inactive[b-ovacspw978] {
        background: rgba(255, 77, 77, 0.15);
        border: 1px solid #FF4D4D;
        color: #FF5E36;
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.25);
    }

.status-dot[b-ovacspw978] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.badge-emp-id-cyber[b-ovacspw978] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.35);
    border-radius: 8px;
    color: #18C8F8;
    font-family: monospace;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(24, 200, 248, 0.2);
}

/* أزرار الإجراءات */
.action-buttons[b-ovacspw978] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-icon[b-ovacspw978] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.share-btn[b-ovacspw978] {
    background: rgba(0, 210, 255, 0.1);
    color: #18C8F8;
    border: 1px solid rgba(0, 210, 255, 0.3);
}

    .share-btn:hover[b-ovacspw978] {
        background: #18C8F8;
        color: #040c14;
        box-shadow: 0 0 12px rgba(24, 200, 248, 0.5);
        transform: scale(1.05);
    }

.badge-btn[b-ovacspw978] {
    background: rgba(0, 208, 132, 0.12);
    color: #00D084;
    border: 1px solid rgba(0, 208, 132, 0.35);
}

    .badge-btn:hover[b-ovacspw978] {
        background: #00D084;
        color: #040c14;
        box-shadow: 0 0 12px rgba(0, 208, 132, 0.5);
        transform: scale(1.05);
    }

.edit-btn[b-ovacspw978] {
    background: rgba(255, 173, 71, 0.1);
    color: #ffad47;
    border: 1px solid rgba(255, 173, 71, 0.3);
}

    .edit-btn:hover[b-ovacspw978] {
        background: #ffad47;
        color: #040c14;
        box-shadow: 0 0 12px rgba(255, 173, 71, 0.5);
        transform: scale(1.05);
    }

.delete-btn[b-ovacspw978] {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

    .delete-btn:hover[b-ovacspw978] {
        background: #ff4d4d;
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 77, 77, 0.5);
        transform: scale(1.05);
    }

.empty-media-box[b-ovacspw978] {
    text-align: center;
    padding: 3rem 1rem;
    color: #B6D5E8;
}

.empty-icon[b-ovacspw978] {
    font-size: 2.8rem;
    color: rgba(24, 200, 248, 0.4);
    margin-bottom: 0.6rem;
}

.alert-box[b-ovacspw978] {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.alert-error[b-ovacspw978] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert-success[b-ovacspw978] {
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid rgba(0, 208, 132, 0.4);
    color: #6ee7b7;
}

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .admin-page-frame[b-ovacspw978] {
        margin-top: calc(70px + 0.5rem);
        padding: 0 0.5rem 1.5rem 0.5rem;
    }

    .dashboard-inner-card[b-ovacspw978] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .filter-action-bar[b-ovacspw978] {
        grid-template-columns: 1fr;
    }

    .cyber-admin-table[b-ovacspw978],
    .cyber-admin-table thead[b-ovacspw978],
    .cyber-admin-table tbody[b-ovacspw978],
    .cyber-admin-table th[b-ovacspw978],
    .cyber-admin-table td[b-ovacspw978],
    .cyber-admin-table tr[b-ovacspw978] {
        display: block;
    }

        .cyber-admin-table thead[b-ovacspw978] {
            display: none;
        }

        .cyber-admin-table tbody tr[b-ovacspw978] {
            margin-bottom: 0.85rem;
            background: rgba(11, 35, 65, 0.7);
            border: 1px solid rgba(24, 200, 248, 0.25);
            border-radius: 12px;
            padding: 0.75rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        .cyber-admin-table td[b-ovacspw978] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.45rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.82rem;
            width: 100%;
            box-sizing: border-box;
        }

            .cyber-admin-table td[b-ovacspw978]::before {
                content: attr(data-label);
                font-weight: 700;
                color: #18C8F8;
                font-size: 0.76rem;
            }

            .cyber-admin-table td[data-label="الحالة"][b-ovacspw978] {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 0.45rem 0;
                box-sizing: border-box;
            }

            .cyber-admin-table td.td-actions[b-ovacspw978] {
                border-bottom: none;
                padding-top: 0.6rem;
                justify-content: flex-end;
            }

                .cyber-admin-table td.td-actions[b-ovacspw978]::before {
                    display: none !important;
                    content: "" !important;
                }
}

@media (max-width: 480px) {
    .admin-panel-header[b-ovacspw978] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary-cyber[b-ovacspw978] {
        width: 100%;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/EquipmentsAdmin.razor.rz.scp.css */
/* ==========================================================================  
 🌟 MASTER SYSTEM ARCHITECTURE - ADMIN BOARD LAYOUT  
 - حماية المساحة الرأسية بالكامل لمنع الاختفاء أسفل هيدر لوحة الإدارة (AdminLayout)
 - إضافة إزاحة علوية (margin-top: calc(70px + 1.2rem)) لمنع انغراس الرأس
 - توافق سيبراني زجاجي سائل متجاوب بنسبة 100% مع كافة أحجام الشاشات  
 - تحويل الجداول تلقائياً إلى بطاقات سيبرانية مريحة على شاشات الجوال  
 ========================================================================== */

.admin-page-frame[b-9hkcyslsnb] {
    width: 100%;
    /* 🌟 الإزاحة العلوية الحتمية للنزول أسفل هيدر لوحة الإدارة الثابت (70px) */
    margin-top: calc(70px + 1.2rem);
    padding: 0 1.2rem 2rem 1.2rem;
    box-sizing: border-box;
    color: #FFFFFF;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px - 1.2rem);
    min-height: calc(100dvh - 70px - 1.2rem);
}

.admin-panel-header[b-9hkcyslsnb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
    flex-shrink: 0;
}

.header-title-block h2[b-9hkcyslsnb] {
    font-size: clamp(1.15rem, 2.8vw, 1.55rem);
    color: #FFFFFF;
    margin: 0 0 0.2rem 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.neon-accent-icon[b-9hkcyslsnb] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.5);
}

.header-title-block p[b-9hkcyslsnb] {
    margin: 0;
    font-size: 0.82rem;
    color: #B6D5E8;
}

.btn-primary-cyber[b-9hkcyslsnb] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.25);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .btn-primary-cyber:hover[b-9hkcyslsnb] {
        transform: translateY(-1px);
        box-shadow: 0 0 18px rgba(24, 200, 248, 0.45);
    }

    .btn-primary-cyber.btn-green[b-9hkcyslsnb] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
        box-shadow: 0 0 12px rgba(0, 208, 132, 0.25);
    }

        .btn-primary-cyber.btn-green:hover[b-9hkcyslsnb] {
            box-shadow: 0 0 18px rgba(0, 208, 132, 0.45);
        }

/* نظام التبويبات */
.panel-navigation-tabs[b-9hkcyslsnb] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .panel-navigation-tabs[b-9hkcyslsnb]::-webkit-scrollbar {
        display: none;
    }

.nav-tab-btn[b-9hkcyslsnb] {
    background: none;
    border: none;
    color: #B6D5E8;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
    white-space: nowrap;
}

    .nav-tab-btn.active[b-9hkcyslsnb] {
        color: #18C8F8;
    }

        .nav-tab-btn.active[b-9hkcyslsnb]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #18C8F8;
            box-shadow: 0 0 8px #18C8F8;
        }

.panel-body-content[b-9hkcyslsnb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-inner-card[b-9hkcyslsnb] {
    background: rgba(11, 35, 65, 0.4);
    border: 1px solid rgba(24, 200, 248, 0.12);
    border-radius: 12px;
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.filter-action-bar[b-9hkcyslsnb] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
}

.search-cyber-wrapper[b-9hkcyslsnb] {
    position: relative;
}

    .search-cyber-wrapper input[b-9hkcyslsnb] {
        width: 100%;
        background: rgba(4, 12, 20, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 0.45rem 2rem 0.45rem 0.6rem;
        color: #FFFFFF;
        font-size: 0.84rem;
        outline: none;
        box-sizing: border-box;
    }

    .search-cyber-wrapper i[b-9hkcyslsnb] {
        position: absolute;
        top: 50%;
        right: 0.7rem;
        transform: translateY(-50%);
        color: #18C8F8;
        font-size: 0.8rem;
    }

.select-cyber-dropdown[b-9hkcyslsnb] {
    background: rgba(4, 12, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-radius: 6px;
    padding: 0.4rem;
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* قنوات التمرير والجداول */
.table-scroll-container[b-9hkcyslsnb] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .table-scroll-container[b-9hkcyslsnb]::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .table-scroll-container[b-9hkcyslsnb]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.3);
        border-radius: 4px;
    }

.cyber-admin-table[b-9hkcyslsnb] {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.84rem;
}

    .cyber-admin-table th[b-9hkcyslsnb] {
        background: rgba(24, 200, 248, 0.05);
        color: #18C8F8;
        padding: 0.7rem;
        font-weight: 700;
        border-bottom: 2px solid rgba(24, 200, 248, 0.15);
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .cyber-admin-table td[b-9hkcyslsnb] {
        padding: 0.6rem 0.7rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        vertical-align: middle;
    }

.table-profile-cell[b-9hkcyslsnb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-img-preview-box[b-9hkcyslsnb] {
    width: 60px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    background: #040C14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-shrink: 0;
}

    .table-img-preview-box img[b-9hkcyslsnb] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .table-img-preview-box.dual-mode img[b-9hkcyslsnb] {
        width: 50%;
    }

.table-profile-info .txt-ar[b-9hkcyslsnb] {
    font-weight: 700;
    color: #FFFFFF;
    display: block;
    font-size: 0.88rem;
}

.table-profile-info .txt-en[b-9hkcyslsnb] {
    font-size: 0.75rem;
    color: #B6D5E8;
    display: block;
}

.table-code-badge[b-9hkcyslsnb] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #18C8F8;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    font-family: monospace;
}

.table-category-pill[b-9hkcyslsnb] {
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
}

.layout-type-badge[b-9hkcyslsnb] {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-weight: 600;
}

    .layout-type-badge.single[b-9hkcyslsnb] {
        background: rgba(255, 255, 255, 0.04);
        color: #B6D5E8;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .layout-type-badge.dual[b-9hkcyslsnb] {
        background: rgba(24, 200, 248, 0.08);
        color: #18C8F8;
        border: 1px solid rgba(24, 200, 248, 0.2);
    }

.table-status-pill[b-9hkcyslsnb] {
    font-size: 0.74rem;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .table-status-pill.active[b-9hkcyslsnb] {
        background: rgba(0, 208, 132, 0.12);
        border: 1px solid rgba(0, 208, 132, 0.4);
        color: #00D084;
    }

    .table-status-pill.inactive[b-9hkcyslsnb] {
        background: rgba(255, 74, 74, 0.12);
        border: 1px solid rgba(255, 74, 74, 0.4);
        color: #FF4A4A;
    }

.table-actions-cluster[b-9hkcyslsnb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-action-cell[b-9hkcyslsnb] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: all 0.2s ease;
}

    .btn-action-cell span[b-9hkcyslsnb] {
        display: none;
    }

.btn-view[b-9hkcyslsnb] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
}

    .btn-view:hover[b-9hkcyslsnb] {
        background: #18C8F8;
        color: #040C14;
    }

.btn-edit[b-9hkcyslsnb] {
    background: rgba(255, 173, 71, 0.12);
    border: 1px solid rgba(255, 173, 71, 0.3);
    color: #FFAD47;
}

    .btn-edit:hover[b-9hkcyslsnb] {
        background: #FFAD47;
        color: #040C14;
    }

.btn-delete[b-9hkcyslsnb] {
    background: rgba(255, 74, 74, 0.12);
    border: 1px solid rgba(255, 74, 74, 0.3);
    color: #FF4A4A;
}

    .btn-delete:hover[b-9hkcyslsnb] {
        background: #FFAD47;
        color: #FFFFFF;
    }

.cyber-loading-box[b-9hkcyslsnb],
.cyber-empty-state[b-9hkcyslsnb] {
    padding: 3rem 1rem;
    text-align: center;
    color: #B6D5E8;
}

    .cyber-loading-box i[b-9hkcyslsnb],
    .cyber-empty-state i[b-9hkcyslsnb] {
        font-size: 2.2rem;
        color: #18C8F8;
        margin-bottom: 0.8rem;
    }

/* ==========================================================================
   📱 التحويل التلقائي للجدول إلى بطاقات سيبرانية متجاوبة 100% على شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .admin-page-frame[b-9hkcyslsnb] {
        margin-top: calc(70px + 0.8rem);
        padding: 0 0.5rem 1.5rem 0.5rem;
        min-height: calc(100vh - 70px - 0.8rem);
        min-height: calc(100dvh - 70px - 0.8rem);
    }

    .admin-panel-header[b-9hkcyslsnb] {
        margin-bottom: 0.6rem;
        gap: 0.6rem;
    }

    .filter-action-bar[b-9hkcyslsnb] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .dashboard-inner-card[b-9hkcyslsnb] {
        padding: 0.6rem 0.4rem;
    }

    .cyber-admin-table thead[b-9hkcyslsnb] {
        display: none;
    }

    .cyber-admin-table[b-9hkcyslsnb],
    .cyber-admin-table tbody[b-9hkcyslsnb],
    .cyber-admin-table tr[b-9hkcyslsnb],
    .cyber-admin-table td[b-9hkcyslsnb] {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

        .cyber-admin-table tbody[b-9hkcyslsnb] {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .cyber-admin-table tr.equipment-row-card[b-9hkcyslsnb] {
            background: rgba(6, 19, 31, 0.85);
            border: 1px solid rgba(24, 200, 248, 0.22);
            border-radius: 12px;
            padding: 0.75rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .cyber-admin-table td[b-9hkcyslsnb] {
            padding: 0 !important;
            border: none !important;
        }

    .table-profile-cell[b-9hkcyslsnb] {
        gap: 0.6rem;
        width: 100%;
    }

    .table-img-preview-box[b-9hkcyslsnb] {
        width: 72px;
        height: 44px;
        border-radius: 6px;
    }

    .table-profile-info[b-9hkcyslsnb] {
        flex: 1;
        min-width: 0;
    }

        .table-profile-info .txt-ar[b-9hkcyslsnb] {
            font-size: 0.9rem;
        }

        .table-profile-info .txt-en[b-9hkcyslsnb] {
            font-size: 0.74rem;
        }

    .td-meta[b-9hkcyslsnb] {
        display: inline-flex !important;
        width: auto !important;
        margin-left: 0.35rem;
    }

    .td-code[b-9hkcyslsnb],
    .td-cat[b-9hkcyslsnb],
    .td-layout[b-9hkcyslsnb],
    .td-status[b-9hkcyslsnb] {
        margin-top: 0.15rem;
    }

    .table-actions-cluster[b-9hkcyslsnb] {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.4rem;
        width: 100%;
        margin-top: 0.35rem;
        padding-top: 0.45rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .btn-action-cell[b-9hkcyslsnb] {
        width: 100% !important;
        height: 36px !important;
        border-radius: 6px;
        font-size: 0.78rem;
        gap: 0.3rem;
    }

        .btn-action-cell span[b-9hkcyslsnb] {
            display: inline !important;
        }

    .cyber-admin-table tr.category-row-card[b-9hkcyslsnb] {
        background: rgba(6, 19, 31, 0.85);
        border: 1px solid rgba(24, 200, 248, 0.2);
        border-radius: 10px;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .category-row-card .td-cat-actions .table-actions-cluster[b-9hkcyslsnb] {
        grid-template-columns: 1fr 1fr;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/CategoryDeleteModal.razor.rz.scp.css */
.cdm-modal-overlay[b-r219x8e5uo] {
    position: fixed !important;
    top: 115px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 115px) !important;
    background: rgba(3, 8, 15, 0.88) !important;
    backdrop-filter: blur(10px);
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    direction: rtl;
}

.cdm-delete-alert-card[b-r219x8e5uo] {
    background: #0e1a2b;
    border: 1px solid rgba(255, 74, 74, 0.4);
    border-radius: 12px;
    padding: 1.2rem;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9);
    box-sizing: border-box;
}

.cdm-alert-icon-frame[b-r219x8e5uo] {
    font-size: 2rem;
    color: #FF4A4A;
    margin-bottom: 0.4rem;
}

.cdm-delete-alert-card h4[b-r219x8e5uo] {
    margin: 0 0 0.45rem 0;
    color: #FFFFFF;
    font-weight: 800;
}

.cdm-delete-alert-card p[b-r219x8e5uo] {
    font-size: 0.8rem;
    color: #B6D5E8;
    line-height: 1.4;
    margin-bottom: 0.65rem;
}

.cdm-check-status-box[b-r219x8e5uo] {
    font-size: 0.8rem;
    color: #18C8F8;
    padding: 0.45rem;
    background: rgba(24, 200, 248, 0.05);
    border-radius: 6px;
}

.cdm-cyber-alert[b-r219x8e5uo] {
    font-size: 0.78rem;
    text-align: right;
    padding: 0.55rem;
    border-radius: 6px;
    line-height: 1.45;
}

.cdm-alert-block-danger[b-r219x8e5uo] {
    background: rgba(255, 74, 74, 0.08);
    border: 1px solid #FF4A4A;
    color: #FF4A4A;
}

.cdm-count-txt[b-r219x8e5uo] {
    font-weight: 800;
    font-family: monospace;
    font-size: 0.86rem;
}

.cdm-success-clear-text[b-r219x8e5uo] {
    color: #00D084;
    font-size: 0.8rem;
    font-weight: 600;
}

.cdm-delete-action-row[b-r219x8e5uo] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.cdm-btn-execute-delete[b-r219x8e5uo] {
    flex: 1;
    background: #FF4A4A;
    color: #FFFFFF;
    border: none;
    padding: 0.45rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.82rem;
}

.cdm-btn-abort-dismiss[b-r219x8e5uo] {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF;
    padding: 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .cdm-modal-overlay[b-r219x8e5uo] {
        top: 80px !important;
        height: calc(100vh - 80px) !important;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/CategoryFormModal.razor.rz.scp.css */
/* ==========================================================================
   CATEGORY FORM MODAL - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.CategoryFormModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم الشاملة وقفل اللمس والتمرير */
.modal-backdrop-cyber[b-wow4mmnrk4] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.category-modal-card[b-wow4mmnrk4] {
    width: min(480px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

.modal-form-flex[b-wow4mmnrk4] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 🌟 3. رأس المودال الثابت */
.modal-header-cyber[b-wow4mmnrk4] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-wow4mmnrk4] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon[b-wow4mmnrk4] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.btn-close-modal[b-wow4mmnrk4] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-wow4mmnrk4] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 4. جسم المودال */
.modal-body-cyber[b-wow4mmnrk4] {
    padding: 1.3rem 1.5rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

.form-group[b-wow4mmnrk4] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

.input-label[b-wow4mmnrk4] {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.84rem !important;
    color: #B6D5E8 !important;
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
}

.neon-icon-sm[b-wow4mmnrk4] {
    color: #18C8F8;
    font-size: 0.82rem;
}

.req-star[b-wow4mmnrk4] {
    color: #FF4D4D !important;
    font-weight: 900 !important;
}

.form-control-cyber[b-wow4mmnrk4] {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

    .form-control-cyber:focus[b-wow4mmnrk4] {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.98) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .form-control-cyber[b-wow4mmnrk4]::placeholder {
        color: rgba(182, 213, 232, 0.45) !important;
        font-size: 0.84rem !important;
    }

.alert-box[b-wow4mmnrk4] {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.alert-error[b-wow4mmnrk4] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* 🌟 5. تذييل المودال */
.modal-footer-cyber[b-wow4mmnrk4] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-wow4mmnrk4] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-wow4mmnrk4] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-wow4mmnrk4] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-wow4mmnrk4] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-wow4mmnrk4] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-wow4mmnrk4] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

@media (max-width: 768px) {
    .modal-backdrop-cyber[b-wow4mmnrk4] {
        padding: 8px !important;
    }

    .category-modal-card[b-wow4mmnrk4] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .modal-body-cyber[b-wow4mmnrk4] {
        padding: 1rem 0.85rem !important;
    }

    .modal-footer-cyber[b-wow4mmnrk4] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-wow4mmnrk4] {
            width: 100% !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/CropModal.razor.rz.scp.css */
/* ==========================================================================
   🌟 UNIFIED CROP MODAL (Cyber Glassmorphic Architecture)
   - دعم ديناميكي لكافة نسب الاستقطاع: 16:9، 8:9، 1:1
   - أولوية طبقة الظهور القصوى Z-Index فوق كافة المودالات
   ========================================================================== */

.modal-backdrop.crop-modal-backdrop[b-35qn0gramo] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important;
    padding: 1.2rem !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box;
}

.glass-modal.crop-modal-container[b-35qn0gramo] {
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.45) !important;
    border-radius: 18px !important;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.35) !important;
    overflow: hidden;
    transition: max-width 0.3s ease;
    touch-action: pan-y !important;
    box-sizing: border-box;
}

    .glass-modal.crop-modal-container.is-wide[b-35qn0gramo] {
        max-width: 580px; /* توسيع النافذة للصور العريضة 16:9 */
    }

/* الرأس */
.modal-header[b-35qn0gramo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    background: rgba(4, 12, 20, 0.75);
    flex-shrink: 0;
}

.modal-title-group[b-35qn0gramo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .modal-title-group h3[b-35qn0gramo] {
        margin: 0;
        font-size: 1.05rem;
        color: #ffffff;
        font-weight: 800;
    }

.neon-icon-sm[b-35qn0gramo] {
    color: #18c8f8;
    text-shadow: 0 0 10px rgba(24, 200, 248, 0.6);
}

.crop-aspect-badge[b-35qn0gramo] {
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid #18c8f8;
    color: #18c8f8;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

.btn-close-crop[b-35qn0gramo] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #B6D5E8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-close-crop:hover[b-35qn0gramo] {
        background: #FF4D4D;
        color: #ffffff;
        border-color: #FF4D4D;
    }

/* جسم النافذة */
.modal-body[b-35qn0gramo] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    touch-action: pan-y !important;
}

/* 🌟 إطار عرض واقتصاص الصورة المتجاوب كلياً مع النسبة المحددة */
.cropper-frame-viewport[b-35qn0gramo] {
    width: 100%;
    max-width: 480px;
    background: #02060d;
    border: 2px solid #18c8f8;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.25);
}

    .cropper-frame-viewport img[b-35qn0gramo] {
        max-width: 100%;
        display: block;
    }

/* أدوات التكبير والتصغير */
.zoom-controls-wrapper[b-35qn0gramo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1.2rem;
    width: 100%;
}

.zoom-slider[b-35qn0gramo] {
    width: 100%;
    max-width: 260px;
    accent-color: #18c8f8;
    cursor: pointer;
}

.zoom-icon[b-35qn0gramo] {
    color: #18c8f8;
    font-size: 1rem;
}

.crop-hint[b-35qn0gramo] {
    font-size: 0.76rem;
    color: #B6D5E8;
    margin: 0.6rem 0 0 0;
    text-align: center;
}

/* التذييل */
.modal-footer[b-35qn0gramo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.4rem;
    border-top: 1px solid rgba(24, 200, 248, 0.2);
    background: rgba(4, 12, 20, 0.75);
    flex-shrink: 0;
    gap: 0.8rem;
}

.btn-cancel[b-35qn0gramo] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 0.84rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    min-height: 40px;
}

    .btn-cancel:hover[b-35qn0gramo] {
        background: rgba(255, 255, 255, 0.12);
    }

.btn-cyan-glow[b-35qn0gramo] {
    background: linear-gradient(135deg, #18c8f8 0%, #0072ff 100%);
    border: none;
    color: #ffffff;
    font-weight: 700;
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
    font-size: 0.84rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.35);
    transition: all 0.25s ease;
    min-height: 40px;
}

    .btn-cyan-glow:hover[b-35qn0gramo] {
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.6);
        transform: translateY(-2px);
    }

    .btn-cyan-glow:disabled[b-35qn0gramo] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

@media (max-width: 768px) {
    .modal-backdrop.crop-modal-backdrop[b-35qn0gramo] {
        padding: 8px !important;
    }

    .glass-modal.crop-modal-container[b-35qn0gramo] {
        border-radius: 14px;
    }

    .modal-footer[b-35qn0gramo] {
        flex-direction: column-reverse;
        gap: 0.6rem;
    }

        .modal-footer button[b-35qn0gramo] {
            width: 100%;
            justify-content: center;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EmployeeBadgeModal.razor.rz.scp.css */
/* ==========================================================================
   🌟 تصميم ومعاينة بطاقة الموظف الأصلية 100% (EXACT ORIGINAL BADGE STYLES)
   Component: EliteTechWeb.Web.Components.Modals.EmployeeBadgeModal
   ========================================================================== */

:root[b-yco5rrqx3q] {
    --elite-cyan: #00d2ff;
    --elite-cyan-glow: rgba(0, 210, 255, 0.5);
    --dark-bg: #03152d;
    --elite-glass-bg: rgba(10, 16, 26, 0.4);
    --elite-glass-border: rgba(24, 200, 248, 0.2);
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
}

/* 🌟 1. خلفية التعتيم الشاملة وقفل التمرير */
.modal-backdrop-cyber[b-yco5rrqx3q] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.badge-modal-card[b-yco5rrqx3q] {
    width: min(920px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

/* 🌟 3. جسم المودال وشبكة الوجهين (تم تصحيح اتجاه المحاذاة) */
.badge-modal-body[b-yco5rrqx3q] {
    padding: 1.5rem 1rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 👈 يمنع دفع قمة البطاقة للأعلى خارج الشاشة */
    align-items: center !important; /* 👈 توسيط البطاقات أفقياً بالوسط */
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
}

.double-badge-grid[b-yco5rrqx3q] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
    flex-wrap: wrap !important;
    padding: 1.5rem !important;
    background: rgba(10, 16, 26, 0.4) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(24, 200, 248, 0.2) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
}

/* ==========================================================================
   🌟 تصميم بطاقة الموظف الأصلية 100% (EXACT ORIGINAL PRINTABLE BADGE CARD)
   ========================================================================== */
.printable-badge-card[b-yco5rrqx3q] {
    position: relative !important;
    width: 350px !important;
    height: 540px !important;
    min-width: 350px !important;
    min-height: 540px !important;
    max-width: 350px !important;
    max-height: 540px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: linear-gradient(180deg, #03152d 0%, #063158 45%, #00a8cc 75%, #00e5ff 100%) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 210, 255, 0.15) !important;
    border: none !important;
    overflow: hidden !important;
    color: #fff !important;
    transform: translateZ(0) !important;
    direction: ltr !important;
}

.card-glossy-reflection[b-yco5rrqx3q] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    z-index: 10;
    pointer-events: none;
}

.tech-canvas-bg[b-yco5rrqx3q] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: block;
}

.badge-content-overlay[b-yco5rrqx3q] {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.company-logo[b-yco5rrqx3q] {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    height: 35px;
    max-width: 250px;
    object-fit: contain;
}

.company-logo-center[b-yco5rrqx3q] {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    z-index: 15;
}

/* الإطار الدائري للصورة مع الحلقات النيونية */
.cyber-circle-wrapper[b-yco5rrqx3q] {
    position: absolute;
    top: 115px;
    left: 50%;
    transform: translateX(-50%);
    width: 135px;
    height: 135px;
    border-radius: 50%;
    padding: 6px;
    background: rgba(2, 17, 36, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

    .cyber-circle-wrapper[b-yco5rrqx3q]::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #00d2ff;
        border-bottom-color: #00d2ff;
        opacity: 0.9;
    }

    .cyber-circle-wrapper[b-yco5rrqx3q]::after {
        content: '';
        position: absolute;
        inset: -11px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-left-color: rgba(0, 210, 255, 0.7);
        border-right-color: rgba(0, 210, 255, 0.7);
    }

.cyber-circle-img[b-yco5rrqx3q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 2;
    position: relative;
}

.name-block[b-yco5rrqx3q] {
    position: absolute;
    top: 265px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 15;
    padding: 0 15px;
    box-sizing: border-box;
}

.emp-name[b-yco5rrqx3q] {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
}

.job-title-card[b-yco5rrqx3q] {
    position: absolute;
    top: 300px;
    left: 0;
    width: 100%;
    height: 35px;
    background: rgba(0, 210, 255, 0.08);
    backdrop-filter: blur(3px);
    border-top: 1px solid rgba(0, 210, 255, 0.3);
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

.emp-title[b-yco5rrqx3q] {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #00d2ff !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.5) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.id-inserted-card[b-yco5rrqx3q] {
    position: absolute;
    top: 345px;
    left: 145px;
    width: 195px;
    height: 35px;
    background: linear-gradient(90deg, #00ffff 0%, #00bfff 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 12px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 3;
    padding-left: 25px;
    box-sizing: border-box;
}

.id-label[b-yco5rrqx3q] {
    font-size: 13px;
    font-weight: 800;
    color: #010c1c !important;
    letter-spacing: 1px;
}

.id-value[b-yco5rrqx3q] {
    font-size: 16px;
    font-weight: 900;
    color: #010c1c !important;
    letter-spacing: 1.5px;
}

.bottom-data-block[b-yco5rrqx3q] {
    position: absolute;
    top: 345px;
    width: 100%;
    height: 155px;
    z-index: 20;
}

.qr-squircle-box[b-yco5rrqx3q] {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 130px;
    height: 130px;
    background: #021124;
    border-radius: 12px;
    border: 3.5px solid #00d2ff;
    padding: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    z-index: 25;
}

.qr-img[b-yco5rrqx3q] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.qr-side-info[b-yco5rrqx3q] {
    position: absolute;
    left: 150px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 180px;
    z-index: 25;
}

.contact-row[b-yco5rrqx3q] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
}

    .contact-row i[b-yco5rrqx3q] {
        color: #ffffff !important;
        font-size: 13px;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
    }

    .contact-row span[b-yco5rrqx3q] {
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 2px #000;
    }

.card-footer[b-yco5rrqx3q] {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
}

.footer-item[b-yco5rrqx3q] {
    font-size: 13px;
    font-weight: 900;
    color: #010c1c;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

    .footer-item i[b-yco5rrqx3q] {
        color: #010c1c;
        font-size: 14px;
        text-align: center;
    }

/* 🌟 4. تذييل المودال */
.modal-footer-cyber[b-yco5rrqx3q] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-yco5rrqx3q] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-yco5rrqx3q] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-yco5rrqx3q] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-yco5rrqx3q] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-yco5rrqx3q] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-yco5rrqx3q] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

/* ==========================================================================
   📱 شاشات الموبايل وتحجيم البطاقة لتناسب شاشات الهواتف بدقة
   ========================================================================== */
@media (max-width: 768px) {
    .modal-backdrop-cyber[b-yco5rrqx3q] {
        padding: 6px !important;
    }

    .badge-modal-card[b-yco5rrqx3q] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .badge-modal-body[b-yco5rrqx3q] {
        padding: 0.8rem 0.4rem !important;
    }

    .double-badge-grid[b-yco5rrqx3q] {
        gap: 1.2rem !important;
        padding: 0.8rem 0.4rem !important;
    }

    .modal-footer-cyber[b-yco5rrqx3q] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-yco5rrqx3q] {
            width: 100% !important;
        }
}

@media (max-width: 400px) {
    .double-badge-grid[b-yco5rrqx3q] {
        transform: scale(0.9);
        transform-origin: top center;
        margin-bottom: -50px;
    }
}

@media (max-width: 365px) {
    .double-badge-grid[b-yco5rrqx3q] {
        transform: scale(0.85);
        transform-origin: top center;
        margin-bottom: -80px;
    }
}

@media (max-width: 340px) {
    .double-badge-grid[b-yco5rrqx3q] {
        transform: scale(0.8);
        transform-origin: top center;
        margin-bottom: -100px;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EmployeeDeleteModal.razor.rz.scp.css */
/* ==========================================================================  
 🌟 EMPLOYEE DELETE MODAL (Cyber Danger Alert Card)
 ========================================================================== */

.edm-modal-overlay[b-6kwopgf2su] {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 70px) !important;
    height: calc(100dvh - 70px) !important;
    background: rgba(3, 8, 16, 0.86) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    direction: rtl;
    box-sizing: border-box !important;
}

.edm-delete-card[b-6kwopgf2su] {
    background: #0f1c2e;
    border: 1px solid #FF4A4A;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.85), 0 0 25px rgba(255, 74, 74, 0.2);
    box-sizing: border-box;
}

.edm-warning-icon[b-6kwopgf2su] {
    font-size: 2.4rem;
    color: #FF4A4A;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(255, 74, 74, 0.5);
}

.edm-delete-card h4[b-6kwopgf2su] {
    margin: 0 0 0.5rem 0;
    color: #FFF;
    font-size: 1.1rem;
    font-weight: 800;
}

.edm-delete-card p[b-6kwopgf2su] {
    font-size: 0.84rem;
    color: #B6D5E8;
    line-height: 1.45;
    margin: 0 0 0.4rem 0;
}

.edm-danger-text[b-6kwopgf2su] {
    color: #FF4A4A !important;
    font-size: 0.76rem !important;
    font-weight: 600;
}

.edm-btn-cluster[b-6kwopgf2su] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.edm-btn-execute[b-6kwopgf2su] {
    flex: 1;
    background: #FF4A4A;
    color: #FFFFFF;
    border: none;
    padding: 0.55rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.2s;
}

    .edm-btn-execute:hover[b-6kwopgf2su] {
        background: #e03838;
    }

    .edm-btn-execute:disabled[b-6kwopgf2su] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.edm-btn-abort[b-6kwopgf2su] {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    color: #FFFFFF;
    padding: 0.55rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    transition: all 0.2s;
}

    .edm-btn-abort:hover[b-6kwopgf2su] {
        background: rgba(255,255,255,0.1);
    }

@media (max-width: 768px) {
    .edm-modal-overlay[b-6kwopgf2su] {
        top: 70px !important;
        height: calc(100vh - 70px) !important;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EmployeeFormModal.razor.rz.scp.css */
/* ==========================================================================
   EMPLOYEE FORM MODAL - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.EmployeeFormModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم مع قفل اللمس والسحب */
.modal-backdrop-cyber[b-i50uvpiuat] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.modal-card-cyber[b-i50uvpiuat] {
    width: min(680px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

.modal-form-flex[b-i50uvpiuat] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 🌟 3. رأس المودال */
.modal-header-cyber[b-i50uvpiuat] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-i50uvpiuat] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon[b-i50uvpiuat] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.btn-close-modal[b-i50uvpiuat] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-i50uvpiuat] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 4. جسم المودال القابل للتمرير */
.modal-body-cyber[b-i50uvpiuat] {
    padding: 1.3rem 1.5rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

    .modal-body-cyber[b-i50uvpiuat]::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-cyber[b-i50uvpiuat]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

/* 🌟 5. حاوية رفع ومعاينة الصورة */
.photo-upload-container[b-i50uvpiuat] {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    background: rgba(4, 12, 20, 0.6) !important;
    border: 1px dashed rgba(24, 200, 248, 0.35) !important;
    padding: 1rem 1.2rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

.avatar-preview-box[b-i50uvpiuat] {
    width: 75px !important;
    height: 75px !important;
    border-radius: 50% !important;
    border: 2px solid #18C8F8 !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.4) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #02060C !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.preview-avatar-img[b-i50uvpiuat] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.avatar-badge-overlay[b-i50uvpiuat] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(6, 19, 31, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    color: #18C8F8;
    font-size: 0.65rem;
}

.upload-controls[b-i50uvpiuat] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.btn-upload-cyber[b-i50uvpiuat] {
    background: linear-gradient(135deg, rgba(24, 200, 248, 0.15) 0%, rgba(0, 114, 255, 0.18) 100%) !important;
    border: 1.5px solid #18C8F8 !important;
    color: #FFFFFF !important;
    padding: 0.65rem 1.2rem !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.25) !important;
    user-select: none !important;
}

    .btn-upload-cyber i[b-i50uvpiuat] {
        font-size: 0.95rem !important;
        color: #18C8F8 !important;
        transition: all 0.25s ease !important;
    }

    .btn-upload-cyber:hover[b-i50uvpiuat] {
        background: #18C8F8 !important;
        color: #06131F !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.6) !important;
    }

        .btn-upload-cyber:hover i[b-i50uvpiuat] {
            color: #06131F !important;
            transform: scale(1.15) !important;
        }

    .btn-upload-cyber:active[b-i50uvpiuat] {
        transform: translateY(0) scale(0.98) !important;
    }
.hidden-file-input[b-i50uvpiuat] {
    display: none !important;
}

/* 🌟 6. شبكات الحقول والتكستبوكس */
.form-row-2col[b-i50uvpiuat] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.1rem !important;
    width: 100% !important;
}

.form-group[b-i50uvpiuat] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

    .form-group.full-width[b-i50uvpiuat] {
        grid-column: 1 / -1 !important;
    }

    .form-group label[b-i50uvpiuat],
    .input-label[b-i50uvpiuat] {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.84rem !important;
        color: #B6D5E8 !important;
        margin-bottom: 0.2rem !important;
        font-weight: 700 !important;
    }

.neon-icon-sm[b-i50uvpiuat] {
    color: #18C8F8;
    font-size: 0.82rem;
}

.form-control-cyber[b-i50uvpiuat] {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

    .form-control-cyber:focus[b-i50uvpiuat] {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.98) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .form-control-cyber[b-i50uvpiuat]::placeholder {
        color: rgba(182, 213, 232, 0.45) !important;
        font-size: 0.84rem !important;
    }

/* تنسيق خاص لحقل كود/رقم الموظف المميز */
.input-group-code[b-i50uvpiuat] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.form-control-code[b-i50uvpiuat] {
    font-family: monospace, inherit !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    color: #00FF9D !important;
}

.val-msg[b-i50uvpiuat] {
    color: #FF5E36 !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* 🌟 7. بطاقات الاختيار والتفعيل */
.form-row-checkbox-cards[b-i50uvpiuat] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.custom-checkbox-card[b-i50uvpiuat] {
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

    .custom-checkbox-card:hover[b-i50uvpiuat] {
        border-color: #18C8F8 !important;
        background: rgba(11, 35, 65, 0.6) !important;
    }

    .custom-checkbox-card.is-checked[b-i50uvpiuat] {
        border-color: #00D084 !important;
        background: rgba(0, 208, 132, 0.08) !important;
        box-shadow: 0 0 15px rgba(0, 208, 132, 0.15) !important;
    }

.cyber-checkbox-hidden[b-i50uvpiuat] {
    display: none !important;
}

.checkbox-card-content[b-i50uvpiuat] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.cb-title[b-i50uvpiuat] {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
}

.cb-status-badge[b-i50uvpiuat] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

    .cb-status-badge.active[b-i50uvpiuat] {
        color: #00FF9D !important;
    }

    .cb-status-badge.inactive[b-i50uvpiuat] {
        color: #FF5E36 !important;
    }

.cb-toggle-switch[b-i50uvpiuat] {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.is-checked .cb-toggle-switch[b-i50uvpiuat] {
    background: #00D084 !important;
    border-color: #00D084 !important;
    box-shadow: 0 0 10px #00D084 !important;
}

    .is-checked .cb-toggle-switch[b-i50uvpiuat]::after {
        content: '✓';
        color: #040C14;
        font-size: 0.75rem;
        font-weight: 900;
    }

/* 🌟 8. تذييل المودال */
.modal-footer-cyber[b-i50uvpiuat] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-i50uvpiuat] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-i50uvpiuat] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-i50uvpiuat] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-i50uvpiuat] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-i50uvpiuat] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-i50uvpiuat] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .modal-backdrop-cyber[b-i50uvpiuat] {
        padding: 8px !important;
    }

    .modal-card-cyber[b-i50uvpiuat] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .form-row-2col[b-i50uvpiuat] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .modal-body-cyber[b-i50uvpiuat] {
        padding: 1rem 0.85rem !important;
    }

    .modal-footer-cyber[b-i50uvpiuat] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-i50uvpiuat] {
            width: 100% !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EquipmentDeleteModal.razor.rz.scp.css */
.edm-modal-overlay[b-f7qdd5jg3t] {
    position: fixed !important;
    top: 115px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 115px) !important;
    background: rgba(3, 8, 16, 0.86) !important;
    backdrop-filter: blur(14px);
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    direction: rtl;
    box-sizing: border-box !important;
}

.edm-delete-card[b-f7qdd5jg3t] {
    background: #0f1c2e;
    border: 1px solid #FF4A4A;
    border-radius: 12px;
    padding: 1.2rem;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.85);
    box-sizing: border-box;
}

.edm-warning-icon[b-f7qdd5jg3t] {
    font-size: 2rem;
    color: #FF4A4A;
    margin-bottom: 0.3rem;
}

.edm-delete-card h4[b-f7qdd5jg3t] {
    margin: 0 0 0.4rem 0;
    color: #FFF;
    font-weight: 800;
}

.edm-delete-card p[b-f7qdd5jg3t] {
    font-size: 0.8rem;
    color: #B6D5E8;
    line-height: 1.4;
    margin: 0 0 0.25rem 0;
}

.edm-danger-text[b-f7qdd5jg3t] {
    color: #FF4A4A !important;
    font-size: 0.74rem !important;
    font-weight: 600;
}

.edm-btn-cluster[b-f7qdd5jg3t] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.edm-btn-execute[b-f7qdd5jg3t] {
    flex: 1;
    background: #FF4A4A;
    color: #FFFFFF;
    border: none;
    padding: 0.45rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.edm-btn-abort[b-f7qdd5jg3t] {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF;
    padding: 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .edm-modal-overlay[b-f7qdd5jg3t] {
        top: 80px !important;
        height: calc(100vh - 80px) !important;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EquipmentFormModal.razor.rz.scp.css */
/* ==========================================================================
   EQUIPMENT FORM MODAL - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.EquipmentFormModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم الشاملة وقفل التمرير */
.modal-backdrop-cyber[b-9lxijrkbj0] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.equipment-form-card[b-9lxijrkbj0] {
    width: min(720px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

.modal-form-flex[b-9lxijrkbj0] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 🌟 3. رأس المودال الثابت */
.modal-header-cyber[b-9lxijrkbj0] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-9lxijrkbj0] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon[b-9lxijrkbj0] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.btn-close-modal[b-9lxijrkbj0] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-9lxijrkbj0] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 4. جسم المودال القابل للتمرير */
.modal-body-cyber[b-9lxijrkbj0] {
    padding: 1.3rem 1.5rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

    .modal-body-cyber[b-9lxijrkbj0]::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-cyber[b-9lxijrkbj0]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

/* شبكات الحقول والتكستبوكس */
.form-row-2col[b-9lxijrkbj0] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.1rem !important;
    width: 100% !important;
}

.form-group[b-9lxijrkbj0] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

.input-label[b-9lxijrkbj0] {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.84rem !important;
    color: #B6D5E8 !important;
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
}

.neon-icon-sm[b-9lxijrkbj0] {
    color: #18C8F8;
    font-size: 0.82rem;
}

.req-star[b-9lxijrkbj0] {
    color: #FF4D4D !important;
    font-weight: 900 !important;
}

.form-control-cyber[b-9lxijrkbj0] {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

    .form-control-cyber:focus[b-9lxijrkbj0] {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.98) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .form-control-cyber[b-9lxijrkbj0]::placeholder {
        color: rgba(182, 213, 232, 0.45) !important;
        font-size: 0.84rem !important;
    }

    .form-control-cyber.textarea[b-9lxijrkbj0] {
        min-height: 80px !important;
        line-height: 1.5 !important;
        resize: vertical !important;
        padding: 0.75rem 1rem !important;
    }

/* 🌟 5. أزرار نمط عرض الصور (16:9 vs 8:9) */
.efm-image-mode-row[b-9lxijrkbj0] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.8rem !important;
    width: 100% !important;
}

.efm-mode-card[b-9lxijrkbj0] {
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.25) !important;
    color: #B6D5E8 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    transition: all 0.25s ease !important;
}

    .efm-mode-card:hover[b-9lxijrkbj0] {
        border-color: #18C8F8 !important;
        color: #FFFFFF !important;
    }

    .efm-mode-card.selected[b-9lxijrkbj0] {
        background: rgba(24, 200, 248, 0.18) !important;
        border-color: #18C8F8 !important;
        color: #FFFFFF !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.4) !important;
    }

/* 🌟 6. بطاقات رفع ومعاينة صور المعدة */
.efm-image-previews-container[b-9lxijrkbj0] {
    display: grid !important;
    gap: 1rem !important;
    width: 100% !important;
}

    .efm-image-previews-container.is-single[b-9lxijrkbj0] {
        grid-template-columns: 1fr !important;
    }

    .efm-image-previews-container.is-dual[b-9lxijrkbj0] {
        grid-template-columns: 1fr 1fr !important;
    }

.efm-img-upload-tile[b-9lxijrkbj0] {
    background: rgba(4, 12, 20, 0.6) !important;
    border: 1px dashed rgba(24, 200, 248, 0.35) !important;
    border-radius: 12px !important;
    padding: 0.9rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.6rem !important;
    box-sizing: border-box !important;
}

.tile-label[b-9lxijrkbj0] {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #B6D5E8 !important;
}

.efm-preview-box[b-9lxijrkbj0] {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #02060C !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.is-dual .efm-preview-box[b-9lxijrkbj0] {
    aspect-ratio: 8 / 9 !important;
}

.efm-preview-box img[b-9lxijrkbj0] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.btn-upload-label[b-9lxijrkbj0] {
    background: linear-gradient(135deg, rgba(24, 200, 248, 0.15) 0%, rgba(0, 114, 255, 0.18) 100%) !important;
    border: 1.5px solid #18C8F8 !important;
    color: #FFFFFF !important;
    padding: 0.65rem 1.2rem !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.25) !important;
    user-select: none !important;
}

    .btn-upload-label i[b-9lxijrkbj0] {
        font-size: 0.95rem !important;
        color: #18C8F8 !important;
        transition: all 0.25s ease !important;
    }

    .btn-upload-label:hover[b-9lxijrkbj0] {
        background: #18C8F8 !important;
        color: #06131F !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.6) !important;
    }

        .btn-upload-label:hover i[b-9lxijrkbj0] {
            color: #06131F !important;
            transform: scale(1.15) !important;
        }

    .btn-upload-label:active[b-9lxijrkbj0] {
        transform: translateY(0) scale(0.98) !important;
    }

.hidden-file-input[b-9lxijrkbj0] {
    display: none !important;
}

/* 🌟 7. بطاقة تفعيل الحالة */
.form-row-checkbox-cards[b-9lxijrkbj0] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 0.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.custom-checkbox-card[b-9lxijrkbj0] {
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

    .custom-checkbox-card:hover[b-9lxijrkbj0] {
        border-color: #18C8F8 !important;
        background: rgba(11, 35, 65, 0.6) !important;
    }

    .custom-checkbox-card.is-checked[b-9lxijrkbj0] {
        border-color: #00D084 !important;
        background: rgba(0, 208, 132, 0.08) !important;
        box-shadow: 0 0 15px rgba(0, 208, 132, 0.15) !important;
    }

.cyber-checkbox-hidden[b-9lxijrkbj0] {
    display: none !important;
}

.checkbox-card-content[b-9lxijrkbj0] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.cb-title[b-9lxijrkbj0] {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
}

.cb-status-badge[b-9lxijrkbj0] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

    .cb-status-badge.active[b-9lxijrkbj0] {
        color: #00FF9D !important;
    }

    .cb-status-badge.inactive[b-9lxijrkbj0] {
        color: #FF5E36 !important;
    }

.cb-toggle-switch[b-9lxijrkbj0] {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.is-checked .cb-toggle-switch[b-9lxijrkbj0] {
    background: #00D084 !important;
    border-color: #00D084 !important;
    box-shadow: 0 0 10px #00D084 !important;
}

    .is-checked .cb-toggle-switch[b-9lxijrkbj0]::after {
        content: '✓';
        color: #040C14;
        font-size: 0.75rem;
        font-weight: 900;
    }

/* 🌟 8. تذييل المودال */
.modal-footer-cyber[b-9lxijrkbj0] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-9lxijrkbj0] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-9lxijrkbj0] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-9lxijrkbj0] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-9lxijrkbj0] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-9lxijrkbj0] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-9lxijrkbj0] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

.alert-box[b-9lxijrkbj0] {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.alert-error[b-9lxijrkbj0] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .modal-backdrop-cyber[b-9lxijrkbj0] {
        padding: 8px !important;
    }

    .equipment-form-card[b-9lxijrkbj0] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .form-row-2col[b-9lxijrkbj0],
    .efm-image-mode-row[b-9lxijrkbj0],
    .efm-image-previews-container.is-dual[b-9lxijrkbj0] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .modal-body-cyber[b-9lxijrkbj0] {
        padding: 1rem 0.85rem !important;
    }

    .modal-footer-cyber[b-9lxijrkbj0] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-9lxijrkbj0] {
            width: 100% !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/EquipmentPreviewModal.razor.rz.scp.css */
/* ==========================================================================
   EQUIPMENT PREVIEW MODAL - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.EquipmentPreviewModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم الشاملة وقفل التمرير */
.modal-backdrop-cyber[b-3y6eb2lic5] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.equipment-preview-card[b-3y6eb2lic5] {
    width: min(560px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

/* 🌟 3. رأس المودال الثابت */
.modal-header-cyber[b-3y6eb2lic5] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1rem 1.4rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

.ep-header-meta[b-3y6eb2lic5] {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.ep-category-badge[b-3y6eb2lic5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.2rem 0.6rem !important;
    background: rgba(24, 200, 248, 0.12) !important;
    border: 1px solid #18C8F8 !important;
    border-radius: 6px !important;
    color: #18C8F8 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.ep-code-badge[b-3y6eb2lic5] {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    font-family: monospace !important;
}

.ep-pitch-badge[b-3y6eb2lic5] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background: rgba(0, 208, 132, 0.15) !important;
    border: 1px solid #00D084 !important;
    color: #00FF9D !important;
    padding: 0.18rem 0.6rem !important;
    border-radius: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    box-shadow: 0 0 10px rgba(0, 208, 132, 0.25) !important;
}

.btn-close-modal[b-3y6eb2lic5] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-3y6eb2lic5] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 4. جسم المودال القابل للتمرير */
.ep-modal-body[b-3y6eb2lic5] {
    padding: 1.2rem 1.4rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0.9rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

    .ep-modal-body[b-3y6eb2lic5]::-webkit-scrollbar {
        width: 4px;
    }

    .ep-modal-body[b-3y6eb2lic5]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

/* معرض الصور 16:9 */
.ep-media-showcase[b-3y6eb2lic5] {
    flex-shrink: 0 !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #02060C !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(24, 200, 248, 0.25) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

.ep-img-frame.single[b-3y6eb2lic5] {
    width: 100% !important;
    height: 100% !important;
}

    .ep-img-frame.single img[b-3y6eb2lic5] {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

.ep-img-frame.dual[b-3y6eb2lic5] {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    gap: 2px !important;
}

    .ep-img-frame.dual img[b-3y6eb2lic5] {
        flex: 1 !important;
        width: 50% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

/* كتلة العناوين */
.ep-title-block[b-3y6eb2lic5] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
}

.ep-name-ar[b-3y6eb2lic5] {
    font-size: clamp(1.1rem, 2.8vw, 1.3rem) !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.ep-name-en[b-3y6eb2lic5] {
    font-size: 0.82rem !important;
    color: #B6D5E8 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* بطاقات الأقسام التفصيلية */
.ep-card-section[b-3y6eb2lic5] {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
}

.ep-section-title[b-3y6eb2lic5] {
    font-size: 0.84rem !important;
    color: #18C8F8 !important;
    margin: 0 0 0.45rem 0 !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.neon-icon-sm[b-3y6eb2lic5] {
    color: #18C8F8;
    font-size: 0.8rem;
}

.ep-desc-text[b-3y6eb2lic5] {
    color: #FFFFFF !important;
    margin: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
}

/* شبكة المواصفات الهندسية */
.ep-specs-grid[b-3y6eb2lic5] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
}

.ep-spec-row[b-3y6eb2lic5] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.4rem 0.65rem !important;
    background: rgba(4, 12, 20, 0.6) !important;
    border: 1px solid rgba(24, 200, 248, 0.15) !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
}

.ep-spec-key[b-3y6eb2lic5] {
    color: #B6D5E8 !important;
    font-weight: 600 !important;
}

.ep-spec-val[b-3y6eb2lic5] {
    color: #18C8F8 !important;
    font-weight: 800 !important;
    direction: ltr !important;
}

/* قائمة المميزات النقطية */
.ep-features-list[b-3y6eb2lic5] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

    .ep-features-list li[b-3y6eb2lic5] {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.45rem !important;
        font-size: 0.8rem !important;
        color: #FFFFFF !important;
        line-height: 1.4 !important;
    }

        .ep-features-list li i[b-3y6eb2lic5] {
            color: #00D084 !important;
            font-size: 0.75rem !important;
            margin-top: 3px !important;
            flex-shrink: 0 !important;
        }

/* 🌟 5. تذييل المودال */
.modal-footer-cyber[b-3y6eb2lic5] {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 1rem 1.4rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-3y6eb2lic5] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-3y6eb2lic5] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

@media (max-width: 768px) {
    .modal-backdrop-cyber[b-3y6eb2lic5] {
        padding: 8px !important;
    }

    .equipment-preview-card[b-3y6eb2lic5] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .ep-modal-body[b-3y6eb2lic5] {
        padding: 1rem 0.85rem !important;
    }

    .ep-specs-grid[b-3y6eb2lic5] {
        grid-template-columns: 1fr !important;
    }

    .modal-footer-cyber[b-3y6eb2lic5] {
        padding: 0.75rem 0.85rem !important;
    }

        .modal-footer-cyber button[b-3y6eb2lic5] {
            width: 100% !important;
            justify-content: center !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/ProjectFormModal.razor.rz.scp.css */
/* ==========================================================================
   PROJECT FORM MODAL (ADD / EDIT EVENT & PROJECT) - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.ProjectFormModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم الشاملة مع عزل وقفل اللمس والسحب */
.modal-backdrop-cyber[b-kvxnczqdn3] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important; /* 👈 قفل تام للتمرير والسحب على الخلفية */
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة المودال الرئيسية */
.modal-card-cyber[b-kvxnczqdn3] {
    width: min(680px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(24, 200, 248, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important; /* 👈 السماح بالسحب الرأسي داخل محتوى المودال فقط */
}

/* 🌟 3. تأصيل نموذج الفليكس */
.modal-form-flex[b-kvxnczqdn3] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 🌟 4. رأس المودال الثابت */
.modal-header-cyber[b-kvxnczqdn3] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-kvxnczqdn3] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon[b-kvxnczqdn3] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.btn-close-modal[b-kvxnczqdn3] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-kvxnczqdn3] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 5. جسم المودال القابل للتمرير الداخلي */
.modal-body-cyber[b-kvxnczqdn3] {
    padding: 1.3rem 1.5rem !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    box-sizing: border-box !important;
}

    .modal-body-cyber[b-kvxnczqdn3]::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-cyber[b-kvxnczqdn3]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

/* 🌟 6. شبكات الحقول المتوازية */
.form-row-2col[b-kvxnczqdn3] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.1rem !important;
    width: 100% !important;
}

.form-group[b-kvxnczqdn3] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

    .form-group label[b-kvxnczqdn3] {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.84rem !important;
        color: #B6D5E8 !important;
        margin-bottom: 0.2rem !important;
        font-weight: 700 !important;
    }

.neon-icon-sm[b-kvxnczqdn3] {
    color: #18C8F8;
    font-size: 0.82rem;
}

/* 🌟 7. التكستبوكس وحقول الإدخال */
.form-control-cyber[b-kvxnczqdn3] {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.28) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

    .form-control-cyber:focus[b-kvxnczqdn3] {
        border-color: #18C8F8 !important;
        background: rgba(6, 19, 31, 0.98) !important;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.45), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    .form-control-cyber[b-kvxnczqdn3]::placeholder {
        color: rgba(182, 213, 232, 0.45) !important;
        font-size: 0.84rem !important;
    }

    .form-control-cyber.textarea[b-kvxnczqdn3] {
        min-height: 90px !important;
        line-height: 1.6 !important;
        resize: vertical !important;
        padding: 0.8rem 1rem !important;
    }

.val-msg[b-kvxnczqdn3] {
    color: #FF5E36 !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* 🌟 8. بطاقات الاختيار والتفعيل */
.form-row-checkbox-cards[b-kvxnczqdn3] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    margin-top: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.custom-checkbox-card[b-kvxnczqdn3] {
    background: rgba(4, 12, 20, 0.85) !important;
    border: 1px solid rgba(24, 200, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

    .custom-checkbox-card:hover[b-kvxnczqdn3] {
        border-color: #18C8F8 !important;
        background: rgba(11, 35, 65, 0.6) !important;
    }

    .custom-checkbox-card.is-checked[b-kvxnczqdn3] {
        border-color: #00D084 !important;
        background: rgba(0, 208, 132, 0.08) !important;
        box-shadow: 0 0 15px rgba(0, 208, 132, 0.15) !important;
    }

.cyber-checkbox-hidden[b-kvxnczqdn3] {
    display: none !important;
}

.checkbox-card-content[b-kvxnczqdn3] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.cb-title[b-kvxnczqdn3] {
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
}

.cb-status-badge[b-kvxnczqdn3] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

    .cb-status-badge.active[b-kvxnczqdn3] {
        color: #00FF9D !important;
    }

    .cb-status-badge.featured[b-kvxnczqdn3] {
        color: #18C8F8 !important;
    }

    .cb-status-badge.inactive[b-kvxnczqdn3] {
        color: #FF5E36 !important;
    }

.cb-toggle-switch[b-kvxnczqdn3] {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.is-checked .cb-toggle-switch[b-kvxnczqdn3] {
    background: #00D084 !important;
    border-color: #00D084 !important;
    box-shadow: 0 0 10px #00D084 !important;
}

    .is-checked .cb-toggle-switch[b-kvxnczqdn3]::after {
        content: '✓';
        color: #040C14;
        font-size: 0.75rem;
        font-weight: 900;
    }

/* 🌟 9. تذييل المودال الثابت */
.modal-footer-cyber[b-kvxnczqdn3] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-kvxnczqdn3] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-kvxnczqdn3] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-kvxnczqdn3] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-kvxnczqdn3] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-kvxnczqdn3] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-kvxnczqdn3] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .modal-backdrop-cyber[b-kvxnczqdn3] {
        padding: 8px !important;
    }

    .modal-card-cyber[b-kvxnczqdn3] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .form-row-2col[b-kvxnczqdn3] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .form-row-checkbox-cards[b-kvxnczqdn3] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .modal-body-cyber[b-kvxnczqdn3] {
        padding: 1rem 0.85rem !important;
    }

    .modal-footer-cyber[b-kvxnczqdn3] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-kvxnczqdn3] {
            width: 100% !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/ProjectTimelineModal.razor.rz.scp.css */
/* ==========================================================================
   PROJECT TIMELINE SCRUBBER MODAL - SCOPED CYBER STYLES
   Component: EliteTechWeb.Web.Components.Modals.ProjectTimelineModal
   ========================================================================== */

/* 🌟 1. خلفية التعتيم الشاملة مع قفل اللمس والتمرير */
.modal-backdrop-cyber[b-7sskpcz01n] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

/* 🌟 2. بطاقة التايم لاين السيبرانية */
.timeline-scrubber-card[b-7sskpcz01n] {
    width: min(800px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(24, 200, 248, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

/* 🌟 3. رأس المودال الثابت */
.modal-header-cyber[b-7sskpcz01n] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-7sskpcz01n] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.neon-accent-icon[b-7sskpcz01n] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.btn-close-modal[b-7sskpcz01n] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-7sskpcz01n] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

/* 🌟 4. جسم المودال ومشغل الفيديو */
.timeline-modal-body[b-7sskpcz01n] {
    padding: 1.2rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
}

.video-scrub-viewport[b-7sskpcz01n] {
    width: 100%;
    height: clamp(200px, 40vh, 380px);
    background: #02060C;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(24, 200, 248, 0.28);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8);
}

.scrub-video-player[b-7sskpcz01n] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 🌟 5. صندوق أدوات التحكم الزمني والـ Scrubber */
.timeline-controls-box[b-7sskpcz01n] {
    background: rgba(4, 12, 20, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.timeline-time-row[b-7sskpcz01n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-badge[b-7sskpcz01n] {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

    .time-badge.current-time[b-7sskpcz01n] {
        background: rgba(24, 200, 248, 0.15);
        color: #18C8F8;
        border: 1px solid rgba(24, 200, 248, 0.35);
        box-shadow: 0 0 10px rgba(24, 200, 248, 0.2);
    }

    .time-badge.total-time[b-7sskpcz01n] {
        color: #B6D5E8;
    }

/* شريط السحب الزمني */
.cyber-range-slider[b-7sskpcz01n] {
    width: 100%;
    -webkit-appearance: none;
    height: 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .cyber-range-slider:hover[b-7sskpcz01n] {
        background: rgba(255, 255, 255, 0.25);
    }

    .cyber-range-slider[b-7sskpcz01n]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #18C8F8;
        cursor: pointer;
        box-shadow: 0 0 12px #18C8F8;
        border: 2.5px solid #FFFFFF;
        transition: transform 0.15s ease;
    }

        .cyber-range-slider[b-7sskpcz01n]::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

/* أزرار الإزاحة والتشغيل */
.micro-step-buttons[b-7sskpcz01n] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.btn-micro[b-7sskpcz01n] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(24, 200, 248, 0.25);
    color: #B6D5E8;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-micro:hover[b-7sskpcz01n] {
        background: rgba(24, 200, 248, 0.15);
        color: #18C8F8;
        border-color: #18C8F8;
    }

    .btn-micro.active-play[b-7sskpcz01n] {
        background: #18C8F8;
        color: #06131F;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 14px rgba(24, 200, 248, 0.5);
    }

        .btn-micro.active-play:hover[b-7sskpcz01n] {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(24, 200, 248, 0.8);
        }

/* 🌟 6. تذييل المودال */
.modal-footer-cyber[b-7sskpcz01n] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-7sskpcz01n] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-7sskpcz01n] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.btn-primary-cyber[b-7sskpcz01n] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
}

    .btn-primary-cyber:hover[b-7sskpcz01n] {
        transform: translateY(-2px) !important;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55) !important;
    }

    .btn-primary-cyber.btn-green[b-7sskpcz01n] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%) !important;
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3) !important;
    }

        .btn-primary-cyber.btn-green:hover[b-7sskpcz01n] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55) !important;
        }

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .modal-backdrop-cyber[b-7sskpcz01n] {
        padding: 8px !important;
    }

    .timeline-scrubber-card[b-7sskpcz01n] {
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .timeline-modal-body[b-7sskpcz01n] {
        padding: 1rem 0.85rem !important;
    }

    .video-scrub-viewport[b-7sskpcz01n] {
        height: 200px;
    }

    .modal-footer-cyber[b-7sskpcz01n] {
        padding: 0.75rem 0.85rem !important;
        flex-direction: column-reverse !important;
    }

        .modal-footer-cyber button[b-7sskpcz01n] {
            width: 100% !important;
        }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/Modals/QuotationDesignerModal.razor.rz.scp.css */
/* =========================================================================
   تنسيق المظهر واللوحات وشريط الاختصارات المطور
   ========================================================================= */
.main-workspace[b-4k6f2sm2sh], [b-4k6f2sm2sh] .main-workspace {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
}

/* لوحة الخصائص على اليمين */
.properties-panel[b-4k6f2sm2sh], [b-4k6f2sm2sh] .properties-panel {
    width: 330px !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 50 !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.04) !important;
}

/* لوحة الأدوات على اليسار */
.toolbox-panel[b-4k6f2sm2sh], [b-4k6f2sm2sh] .toolbox-panel {
    width: 220px !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 50 !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.04) !important;
}

@media (max-width: 900px) {
    .properties-panel[b-4k6f2sm2sh], [b-4k6f2sm2sh] .properties-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }

        .properties-panel.open[b-4k6f2sm2sh], [b-4k6f2sm2sh] .properties-panel.open {
            transform: translateX(0) !important;
        }

    .toolbox-panel[b-4k6f2sm2sh], [b-4k6f2sm2sh] .toolbox-panel {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
    }

        .toolbox-panel.open[b-4k6f2sm2sh], [b-4k6f2sm2sh] .toolbox-panel.open {
            transform: translateX(0) !important;
        }
}

/* إزالة التأطير المزعج عند تحرير النصوص واعتماد تظليل التحديد العالمي النظيف */
[contenteditable="true"][b-4k6f2sm2sh], [b-4k6f2sm2sh] [contenteditable="true"] {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    cursor: text !important;
}

    [contenteditable="true"][b-4k6f2sm2sh]::selection,
    .txt-holder[b-4k6f2sm2sh]::selection,
    .cell-txt[b-4k6f2sm2sh]::selection,
    [b-4k6f2sm2sh] [contenteditable="true"]::selection,
    [b-4k6f2sm2sh] .txt-holder::selection,
    [b-4k6f2sm2sh] .cell-txt::selection {
        background: #38bdf8 !important;
        color: #ffffff !important;
    }

/* شريط الاختصارات العائم بتصميم نحيف وأرتب */
.floating-shortcuts-bar[b-4k6f2sm2sh], [b-4k6f2sm2sh] .floating-shortcuts-bar {
    position: absolute;
    background: rgba(11, 19, 41, 0.96) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 8px !important;
    padding: 3px 6px !important;
    display: none;
    align-items: center !important;
    gap: 3px !important;
    z-index: 300 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    pointer-events: auto !important;
    direction: rtl;
    user-select: none;
}

    .floating-shortcuts-bar.active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .floating-shortcuts-bar.active {
        display: flex !important;
    }

.f-drag-handle[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #38bdf8 !important;
    cursor: grab !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.3) 0%, rgba(56, 189, 248, 0.18) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    transition: all 0.15s ease !important;
    touch-action: none !important;
    user-select: none !important;
}

    .f-drag-handle:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle:hover {
        background: #0284c7 !important;
        color: #ffffff !important;
        cursor: grab !important;
    }

    .f-drag-handle:active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle:active {
        cursor: grabbing !important;
        background: #0369a1 !important;
    }

.f-btn[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    min-height: 22px !important;
    box-sizing: border-box !important;
}

    .f-btn:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn:hover {
        background: #0284c7 !important;
        color: #ffffff !important;
        border-color: #38bdf8 !important;
    }

    .f-btn.active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn.active {
        background: #0284c7 !important;
        border-color: #38bdf8 !important;
        color: #ffffff !important;
    }

.f-btn-danger[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn-danger {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

    .f-btn-danger:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn-danger:hover {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
    }

.f-sep[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-sep {
    width: 1px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    margin: 0 2px !important;
}


/* =========================================================================
   شريط الاختصارات العائم المطور مع مقبض السحب (Floating Toolbar & Drag Handle)
   ========================================================================= */
.floating-shortcuts-bar[b-4k6f2sm2sh], [b-4k6f2sm2sh] .floating-shortcuts-bar {
    position: absolute;
    background: rgba(11, 19, 41, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.38) !important;
    border-radius: 10px !important;
    padding: 4px 6px !important;
    display: none;
    align-items: center !important;
    gap: 4px !important;
    z-index: 300 !important;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.25) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    pointer-events: auto !important;
    transform: translateY(-100%);
    margin-top: -10px;
    direction: rtl;
    user-select: none;
}

    .floating-shortcuts-bar.active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .floating-shortcuts-bar.active {
        display: flex !important;
    }

.f-drag-handle[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    color: #38bdf8 !important;
    cursor: grab !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.28) 0%, rgba(56, 189, 248, 0.18) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
    touch-action: none !important;
    user-select: none !important;
}

    .f-drag-handle:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle:hover {
        background: #0284c7 !important;
        color: #ffffff !important;
        border-color: #38bdf8 !important;
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
    }

    .f-drag-handle:active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-drag-handle:active {
        cursor: grabbing !important;
        background: #0369a1 !important;
        transform: scale(0.95);
    }

.f-btn[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    min-height: 26px !important;
    box-sizing: border-box !important;
}

    .f-btn:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn:hover {
        background: rgba(2, 132, 199, 0.8) !important;
        color: #ffffff !important;
        border-color: #38bdf8 !important;
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.35) !important;
    }

    .f-btn.active[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn.active {
        background: #0284c7 !important;
        border-color: #38bdf8 !important;
        color: #ffffff !important;
    }

.f-btn-danger[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn-danger {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

    .f-btn-danger:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-btn-danger:hover {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
    }

.f-sep[b-4k6f2sm2sh], [b-4k6f2sm2sh] .f-sep {
    width: 1px !important;
    height: 18px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    margin: 0 3px !important;
}

/* =========================================================================
   تطوير وتحديث لوحة الخصائص (Upgraded Modern Properties Panel)
   ========================================================================= */
.properties-panel[b-4k6f2sm2sh], [b-4k6f2sm2sh] .properties-panel {
    width: 330px !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 50 !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05) !important;
}

.properties-body[b-4k6f2sm2sh], [b-4k6f2sm2sh] .properties-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 50px !important;
}

    .properties-body[b-4k6f2sm2sh]::-webkit-scrollbar, [b-4k6f2sm2sh] .properties-body::-webkit-scrollbar {
        width: 6px !important;
    }

    .properties-body[b-4k6f2sm2sh]::-webkit-scrollbar-track, [b-4k6f2sm2sh] .properties-body::-webkit-scrollbar-track {
        background: #f8fafc !important;
    }

    .properties-body[b-4k6f2sm2sh]::-webkit-scrollbar-thumb, [b-4k6f2sm2sh] .properties-body::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }

        .properties-body[b-4k6f2sm2sh]::-webkit-scrollbar-thumb:hover, [b-4k6f2sm2sh] .properties-body::-webkit-scrollbar-thumb:hover {
            background: #94a3b8 !important;
        }

.prop-section[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-section {
    border-bottom: 1px solid #edf2f7 !important;
}

.prop-section-title[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-section-title {
    background: #f8fafc !important;
    padding: 9px 14px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-top: 1px solid #edf2f7 !important;
    border-bottom: 1px solid #edf2f7 !important;
    letter-spacing: 0.2px !important;
}

    .prop-section-title i[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-section-title i {
        font-size: 13px !important;
        color: #0284c7 !important;
    }

.prop-row[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-row {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    border-bottom: 1px solid #f8fafc !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    transition: background 0.15s ease !important;
}

    .prop-row:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-row:hover {
        background: rgba(248, 250, 252, 0.75) !important;
    }

.prop-label[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-label {
    width: 44% !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

.prop-ctrl[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-ctrl {
    width: 56% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

    .prop-ctrl input[type="text"][b-4k6f2sm2sh],
    .prop-ctrl input[type="number"][b-4k6f2sm2sh],
    .prop-ctrl select[b-4k6f2sm2sh],
    .prop-ctrl textarea[b-4k6f2sm2sh],
    [b-4k6f2sm2sh] .prop-ctrl input[type="text"],
    [b-4k6f2sm2sh] .prop-ctrl input[type="number"],
    [b-4k6f2sm2sh] .prop-ctrl select,
    [b-4k6f2sm2sh] .prop-ctrl textarea {
        width: 100% !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 6px 8px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        color: #1e293b !important;
        outline: none !important;
        transition: all 0.15s ease !important;
        box-sizing: border-box !important;
    }

        .prop-ctrl input[type="text"]:focus[b-4k6f2sm2sh],
        .prop-ctrl input[type="number"]:focus[b-4k6f2sm2sh],
        .prop-ctrl select:focus[b-4k6f2sm2sh],
        .prop-ctrl textarea:focus[b-4k6f2sm2sh],
        [b-4k6f2sm2sh] .prop-ctrl input[type="text"]:focus,
        [b-4k6f2sm2sh] .prop-ctrl input[type="number"]:focus,
        [b-4k6f2sm2sh] .prop-ctrl select:focus,
        [b-4k6f2sm2sh] .prop-ctrl textarea:focus {
            border-color: #0284c7 !important;
            background: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
        }

    .prop-ctrl input[type="color"][b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-ctrl input[type="color"] {
        width: 32px !important;
        height: 30px !important;
        border-radius: 6px !important;
        padding: 1px 2px !important;
        cursor: pointer !important;
        border: 1.5px solid #cbd5e1 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

        .prop-ctrl input[type="color"]:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-ctrl input[type="color"]:hover {
            border-color: #0284c7 !important;
        }

    .prop-ctrl input[type="checkbox"][b-4k6f2sm2sh], [b-4k6f2sm2sh] .prop-ctrl input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        accent-color: #0284c7 !important;
        cursor: pointer !important;
    }

.btn-group-full[b-4k6f2sm2sh], [b-4k6f2sm2sh] .btn-group-full {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 14px !important;
}

.icon-trigger-btn[b-4k6f2sm2sh], [b-4k6f2sm2sh] .icon-trigger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    transition: all 0.15s ease !important;
}

    .icon-trigger-btn:hover[b-4k6f2sm2sh], [b-4k6f2sm2sh] .icon-trigger-btn:hover {
        border-color: #0284c7 !important;
        background: #f0f9ff !important;
        color: #0369a1 !important;
    }


.txt-holder[b-4k6f2sm2sh], .cell-txt[b-4k6f2sm2sh], [b-4k6f2sm2sh] .txt-holder, [b-4k6f2sm2sh] .cell-txt {
    cursor: text;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.el-content[b-4k6f2sm2sh], [b-4k6f2sm2sh] .el-content {
    pointer-events: auto !important;
}

/* ==========================================================================
   QUOTATION DESIGNER - MASTER COMPLETE STYLESHEET
   ========================================================================== */
.designer-modal-backdrop[b-4k6f2sm2sh] {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(2, 6, 12, 0.98) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    direction: rtl;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.designer-modal-container[b-4k6f2sm2sh] {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: var(--el-canvas-bg, #1e293b) !important;
    color: var(--el-text, #0f172a);
    user-select: none;
}


[contenteditable="true"][b-4k6f2sm2sh], [b-4k6f2sm2sh] [contenteditable="true"] {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
    outline: 2px solid #0284c7 !important;
    background: rgba(2, 132, 199, 0.1) !important;
}


:root[b-4k6f2sm2sh] {
    --el-primary: #0284c7;
    --el-primary-dark: #0369a1;
    --el-accent: #38bdf8;
    --el-bg: #0b1329;
    --el-canvas-bg: #1e293b;
    --el-panel-bg: #ffffff;
    --el-border: #e2e8f0;
    --el-text: #0f172a;
    --el-text-muted: #64748b;
    --snap-line-color: #ec4899;
    --grid-line-color: rgba(148, 163, 184, 0.22);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*[b-4k6f2sm2sh] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body[b-4k6f2sm2sh] {
    background-color: var(--el-canvas-bg);
    color: var(--el-text);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

/* =========================================================================
           الشريط العلوي الموحد (Unified Master Navbar)
           ========================================================================= */
.top-navbar[b-4k6f2sm2sh] {
    background: #0b1329;
    color: #ffffff;
    padding: calc(6px + var(--safe-top)) 14px 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.app-brand[b-4k6f2sm2sh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #38bdf8;
    white-space: nowrap;
}

    .app-brand i[b-4k6f2sm2sh] {
        color: #f59e0b;
        font-size: 18px;
    }

.nav-actions[b-4k6f2sm2sh] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .nav-actions[b-4k6f2sm2sh]::-webkit-scrollbar {
        display: none;
    }

.btn-elite[b-4k6f2sm2sh] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .btn-elite:hover:not(:disabled)[b-4k6f2sm2sh] {
        background: rgba(255, 255, 255, 0.22);
        border-color: #38bdf8;
        color: #38bdf8;
    }

    .btn-elite:disabled[b-4k6f2sm2sh] {
        opacity: 0.35;
        cursor: not-allowed;
    }

.btn-primary[b-4k6f2sm2sh] {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
}

    .btn-primary:hover:not(:disabled)[b-4k6f2sm2sh] {
        background: #0369a1;
        color: #fff;
    }

.btn-ai-magic[b-4k6f2sm2sh] {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    border: 1px solid #f472b6;
    color: #fff;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

    .btn-ai-magic:hover:not(:disabled)[b-4k6f2sm2sh] {
        box-shadow: 0 0 18px rgba(236, 72, 153, 0.7);
    }

.btn-db-save[b-4k6f2sm2sh] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border: 1px solid #34d399;
    color: #fff;
}

.btn-danger[b-4k6f2sm2sh] {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
}

/* راية وضع تعديل الخلفية */
.bg-mode-alert[b-4k6f2sm2sh] {
    position: absolute;
    top: calc(12px + var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    background: #ec4899;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 5000;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    white-space: nowrap;
}

    .bg-mode-alert.active[b-4k6f2sm2sh] {
        display: flex;
    }

/* فضاء العمل الرئيسي */
.main-workspace[b-4k6f2sm2sh] {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* اللوحة الجانبية: صندوق الأدوات */
.toolbox-panel[b-4k6f2sm2sh] {
    width: 220px;
    background: #ffffff;
    border-right: 1px solid var(--el-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform 0.25s ease;
}

.panel-header[b-4k6f2sm2sh] {
    background: #f8fafc;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    border-bottom: 1px solid var(--el-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tools-container[b-4k6f2sm2sh] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.tool-btn[b-4k6f2sm2sh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

    .tool-btn i[b-4k6f2sm2sh] {
        font-size: 15px;
        color: #0284c7;
        width: 20px;
        text-align: center;
    }

    .tool-btn:hover[b-4k6f2sm2sh] {
        background: #e0f2fe;
        border-color: #0284c7;
        color: #0369a1;
    }

    .tool-btn.active[b-4k6f2sm2sh] {
        background: #0284c7;
        border-color: #0284c7;
        color: #ffffff;
    }

        .tool-btn.active i[b-4k6f2sm2sh] {
            color: #ffffff;
        }

/* الكانفاس ومساحة العرض */
.canvas-area[b-4k6f2sm2sh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--el-canvas-bg);
    position: relative;
    overflow: hidden;
}

.tabs-bar[b-4k6f2sm2sh] {
    background: #0f172a;
    padding: 4px 12px 0 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 2px solid #000;
    scrollbar-width: none;
}

    .tabs-bar[b-4k6f2sm2sh]::-webkit-scrollbar {
        display: none;
    }

.page-tab[b-4k6f2sm2sh] {
    background: #334155;
    color: #cbd5e1;
    padding: 6px 12px;
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .page-tab.active[b-4k6f2sm2sh] {
        background: #ffffff;
        color: #0f172a;
        border-top: 3px solid #0284c7;
    }

.page-tab-add[b-4k6f2sm2sh] {
    background: rgba(255,255,255,0.12);
    color: #38bdf8;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* أدوات التكبير/التصغير العائمة */
.zoom-controls-floating[b-4k6f2sm2sh] {
    position: absolute;
    bottom: calc(16px + var(--safe-bottom));
    left: 16px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 80;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

    .zoom-controls-floating button[b-4k6f2sm2sh] {
        background: transparent;
        border: none;
        color: #f8fafc;
        padding: 4px 6px;
        cursor: pointer;
        font-size: 11px;
        font-weight: bold;
        border-radius: 4px;
    }

        .zoom-controls-floating button:hover[b-4k6f2sm2sh] {
            background: rgba(255,255,255,0.15);
            color: #38bdf8;
        }

.canvas-viewport[b-4k6f2sm2sh] {
    flex: 1;
    padding: 25px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    touch-action: pan-x pan-y;
}

/* صفحة A4 القياسية */
.a4-page[b-4k6f2sm2sh] {
    width: 210mm;
    min-width: 210mm;
    height: 297mm;
    min-height: 297mm;
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    transform-origin: top center;
    transition: transform 0.05s linear;
}

    .a4-page.show-grid[b-4k6f2sm2sh] {
        background-image: linear-gradient(var(--grid-line-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
        background-size: 5mm 5mm;
    }

    .a4-page[b-4k6f2sm2sh]::before {
        content: '';
        position: absolute;
        top: var(--m-top, 38px);
        left: var(--m-left, 38px);
        right: var(--m-right, 38px);
        bottom: var(--m-bottom, 38px);
        border: 1px dashed rgba(2, 132, 199, 0.45);
        pointer-events: none;
        z-index: 5;
    }

/* طبقات الخلفية */
.bg-layer-item[b-4k6f2sm2sh] {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

    .bg-layer-item.editing-mode[b-4k6f2sm2sh] {
        pointer-events: auto !important;
        border: 2px dashed #ec4899 !important;
        cursor: move;
        z-index: 1000 !important;
    }

/* حاويات العناصر */
.element-wrapper[b-4k6f2sm2sh] {
    position: absolute;
    border: 1px dashed transparent;
    cursor: move;
    z-index: 20;
    box-sizing: border-box;
    touch-action: none;
}

    .element-wrapper:hover[b-4k6f2sm2sh] {
        border-color: #94a3b8;
    }

    .element-wrapper.selected[b-4k6f2sm2sh] {
        border: 1.5px solid #0284c7 !important;
        box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.3);
        z-index: 200 !important;
    }

    .element-wrapper.hide-for-bg-edit[b-4k6f2sm2sh] {
        display: none !important;
    }

.el-content[b-4k6f2sm2sh] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: flex-start !important;
    box-sizing: border-box;
    word-break: break-word;
}

    .el-content.with-icon[b-4k6f2sm2sh] {
        gap: 8px;
    }

.resize-handle[b-4k6f2sm2sh] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 2px solid #0284c7;
    display: none;
    z-index: 205;
    border-radius: 3px;
}

    .resize-handle[b-4k6f2sm2sh]::after {
        content: '';
        position: absolute;
        top: -12px;
        left: -12px;
        right: -12px;
        bottom: -12px;
    }

.element-wrapper.selected .resize-handle[b-4k6f2sm2sh],
.bg-layer-item.editing-mode .resize-handle[b-4k6f2sm2sh] {
    display: block;
}

.rh-nw[b-4k6f2sm2sh] {
    top: -6px;
    right: -6px;
    cursor: nwse-resize;
}

.rh-n[b-4k6f2sm2sh] {
    top: -6px;
    right: calc(50% - 5px);
    cursor: ns-resize;
}

.rh-ne[b-4k6f2sm2sh] {
    top: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.rh-e[b-4k6f2sm2sh] {
    top: calc(50% - 5px);
    left: -6px;
    cursor: ew-resize;
}

.rh-se[b-4k6f2sm2sh] {
    bottom: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.rh-s[b-4k6f2sm2sh] {
    bottom: -6px;
    right: calc(50% - 5px);
    cursor: ns-resize;
}

.rh-sw[b-4k6f2sm2sh] {
    bottom: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.rh-w[b-4k6f2sm2sh] {
    top: calc(50% - 5px);
    right: -6px;
    cursor: ew-resize;
}

.snap-line[b-4k6f2sm2sh] {
    position: absolute;
    background: var(--snap-line-color);
    z-index: 999;
    pointer-events: none;
    display: none;
}

.snap-v[b-4k6f2sm2sh] {
    width: 1px;
    top: 0;
    height: 100%;
}

.snap-h[b-4k6f2sm2sh] {
    height: 1px;
    left: 0;
    width: 100%;
}

/* شريط الاختصارات العائم */
.floating-shortcuts-bar[b-4k6f2sm2sh] {
    position: absolute;
    background: #0b1329;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    padding: 4px 6px;
    display: none;
    align-items: center;
    gap: 4px;
    z-index: 300;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    transform: translateY(-100%);
    margin-top: -8px;
}

    .floating-shortcuts-bar.active[b-4k6f2sm2sh] {
        display: flex;
    }

.f-btn[b-4k6f2sm2sh] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .f-btn:hover[b-4k6f2sm2sh] {
        background: #0284c7;
        color: #fff;
        border-color: #38bdf8;
    }

.f-sep[b-4k6f2sm2sh] {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.2);
    margin: 0 2px;
}

/* محرك الجداول الفائق الدقة */
.table-root[b-4k6f2sm2sh] {
    width: 100%;
    height: auto !important;
    border-collapse: collapse;
    table-layout: fixed;
    pointer-events: auto;
    box-sizing: border-box;
}

    .table-root th[b-4k6f2sm2sh], .table-root td[b-4k6f2sm2sh] {
        border: 1px solid #cbd5e1;
        position: relative;
        padding: 6px 8px;
        box-sizing: border-box;
        user-select: none;
        vertical-align: top;
        white-space: pre-wrap !important;
        line-height: 1.5;
    }

    .table-root th[b-4k6f2sm2sh] {
        background-color: #0f172a !important;
        color: #ffffff !important;
        font-weight: 800;
        text-align: center;
        padding: 7px;
    }

        .table-root td.cell-selected[b-4k6f2sm2sh], .table-root th.cell-selected[b-4k6f2sm2sh] {
            background-color: #bae6fd !important;
            outline: 2px solid #0284c7;
            outline-offset: -2px;
            z-index: 10;
        }

.cell-resizer-col[b-4k6f2sm2sh] {
    position: absolute;
    top: 0;
    left: -5px;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    z-index: 25;
    touch-action: none;
}

.cell-resizer-row[b-4k6f2sm2sh] {
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 100%;
    height: 14px;
    cursor: row-resize;
    z-index: 25;
    touch-action: none;
}

[contenteditable="true"][b-4k6f2sm2sh] {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
    outline: 2px solid #0284c7 !important;
    background: rgba(2, 132, 199, 0.1) !important;
}

/* لوحة الخصائص الجانبية */
.properties-panel[b-4k6f2sm2sh] {
    width: 320px;
    background: #ffffff;
    border-right: 1px solid var(--el-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform 0.25s ease;
}

.properties-body[b-4k6f2sm2sh] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 40px;
}

.prop-section[b-4k6f2sm2sh] {
    border-bottom: 1px solid #e2e8f0;
}

.prop-section-title[b-4k6f2sm2sh] {
    background: #f1f5f9;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.prop-row[b-4k6f2sm2sh] {
    display: flex;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid #f8fafc;
    padding: 4px 12px;
    font-size: 12px;
}

.prop-label[b-4k6f2sm2sh] {
    width: 44%;
    color: #475569;
    font-weight: 600;
    font-size: 11px;
}

.prop-ctrl[b-4k6f2sm2sh] {
    width: 56%;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .prop-ctrl input[b-4k6f2sm2sh], .prop-ctrl select[b-4k6f2sm2sh], .prop-ctrl textarea[b-4k6f2sm2sh] {
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        padding: 4px 6px;
        font-size: 11px;
        background: #f8fafc;
        outline: none;
    }

        .prop-ctrl input:focus[b-4k6f2sm2sh], .prop-ctrl select:focus[b-4k6f2sm2sh] {
            border-color: #0284c7;
            background: #ffffff;
        }

        .prop-ctrl input[type="color"][b-4k6f2sm2sh] {
            padding: 0;
            height: 24px;
            cursor: pointer;
            border: 1px solid #94a3b8;
        }

.btn-group-full[b-4k6f2sm2sh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}

/* شريط التنقل السفلي في شاشات الموبايل */
.mobile-bottom-bar[b-4k6f2sm2sh] {
    display: none;
    background: #0b1329;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 6px 12px calc(6px + var(--safe-bottom)) 12px;
    justify-content: space-around;
    align-items: center;
    z-index: 150;
}

.mobile-tab-btn[b-4k6f2sm2sh] {
    background: transparent;
    border: none;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    cursor: pointer;
}

    .mobile-tab-btn i[b-4k6f2sm2sh] {
        font-size: 16px;
        color: #38bdf8;
    }

    .mobile-tab-btn.active[b-4k6f2sm2sh] {
        color: #38bdf8;
        font-weight: bold;
    }

/* النوافذ المنبثقة */
.designer-popup-overlay[b-4k6f2sm2sh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(11, 19, 41, 0.85) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483646 !important;
    backdrop-filter: blur(4px) !important;
    padding: 10px !important;
}

    .designer-popup-overlay.active[b-4k6f2sm2sh] {
        display: flex !important;
    }

    .designer-popup-overlay.active[b-4k6f2sm2sh] {
        display: flex;
    }

.designer-popup-card[b-4k6f2sm2sh] {
    background: #ffffff;
    width: 760px;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header[b-4k6f2sm2sh] {
    background: #0b1329;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body[b-4k6f2sm2sh] {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.ai-tabs-row[b-4k6f2sm2sh] {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 14px;
}

.ai-tab-btn[b-4k6f2sm2sh] {
    background: none;
    border: none;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

    .ai-tab-btn.active[b-4k6f2sm2sh] {
        color: #0284c7;
        border-color: #0284c7;
    }

.ai-upload-box[b-4k6f2sm2sh] {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
}

    .ai-upload-box:hover[b-4k6f2sm2sh] {
        border-color: #0284c7;
        background: #f0f9ff;
    }

.tmpl-grid[b-4k6f2sm2sh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.tmpl-item[b-4k6f2sm2sh] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s;
}

    .tmpl-item:hover[b-4k6f2sm2sh] {
        border-color: #0284c7;
        background: #e0f2fe;
        transform: translateY(-3px);
    }

.icons-picker-grid[b-4k6f2sm2sh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.icon-card-item[b-4k6f2sm2sh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 54px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s;
}

    .icon-card-item i[b-4k6f2sm2sh] {
        font-size: 20px;
        color: #334155;
    }

    .icon-card-item:hover[b-4k6f2sm2sh] {
        background: #e0f2fe;
        border-color: #0284c7;
        transform: scale(1.08);
    }

    .icon-card-item.selected[b-4k6f2sm2sh] {
        background: #0284c7;
        border-color: #0284c7;
    }

        .icon-card-item.selected i[b-4k6f2sm2sh] {
            color: #ffffff;
        }

.icon-trigger-btn[b-4k6f2sm2sh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
}

/* التجاوب مع شاشات الجوال */
@media (max-width: 900px) {
    .mobile-bottom-bar[b-4k6f2sm2sh] {
        display: flex;
    }

    .toolbox-panel[b-4k6f2sm2sh], .properties-panel[b-4k6f2sm2sh] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100% !important;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.2);
        border-bottom: none;
    }

        .toolbox-panel.open[b-4k6f2sm2sh], .properties-panel.open[b-4k6f2sm2sh] {
            transform: translateY(0);
        }

    .canvas-viewport[b-4k6f2sm2sh] {
        padding: 8px;
    }

    .floating-shortcuts-bar[b-4k6f2sm2sh] {
        max-width: 95vw;
        overflow-x: auto;
    }
}

/* =========================================================================
   قواعد الطباعة المحكمة: عزل تام لأوراق A4 وإخفاء كامل لشاشات التحكم
   ========================================================================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 0 !important;
    }

    html[b-4k6f2sm2sh], body[b-4k6f2sm2sh] {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        width: 210mm !important;
        height: auto !important;
        overflow: visible !important;
    }

        body > *:not(#print-mount)[b-4k6f2sm2sh],
        #app[b-4k6f2sm2sh],
        .admin-layout-wrapper[b-4k6f2sm2sh],
        .admin-topbar[b-4k6f2sm2sh],
        .admin-sidebar[b-4k6f2sm2sh],
        .admin-page-frame[b-4k6f2sm2sh],
        .designer-modal-backdrop[b-4k6f2sm2sh],
        .designer-modal-container[b-4k6f2sm2sh],
        .top-navbar[b-4k6f2sm2sh],
        .main-workspace[b-4k6f2sm2sh],
        .toolbox-panel[b-4k6f2sm2sh],
        .canvas-area[b-4k6f2sm2sh],
        .canvas-viewport[b-4k6f2sm2sh],
        .properties-panel[b-4k6f2sm2sh],
        .mobile-bottom-bar[b-4k6f2sm2sh],
        .bg-mode-alert[b-4k6f2sm2sh],
        .designer-popup-overlay[b-4k6f2sm2sh],
        .floating-shortcuts-bar[b-4k6f2sm2sh],
        .zoom-controls-floating[b-4k6f2sm2sh],
        .snap-line[b-4k6f2sm2sh] {
            display: none !important;
        }

    #print-mount[b-4k6f2sm2sh] {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        z-index: 2147483647 !important;
    }

    .print-sheet[b-4k6f2sm2sh], [b-4k6f2sm2sh] .print-sheet {
        width: 210mm !important;
        height: 297mm !important;
        min-height: 297mm !important;
        max-height: 297mm !important;
        position: relative !important;
        overflow: hidden !important;
        background: #ffffff !important;
        page-break-after: always !important;
        break-after: page !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .print-sheet .element-wrapper[b-4k6f2sm2sh], [b-4k6f2sm2sh] .print-sheet .element-wrapper {
            border: none !important;
            box-shadow: none !important;
        }

        .print-sheet .resize-handle[b-4k6f2sm2sh],
        .print-sheet .cell-resizer-col[b-4k6f2sm2sh],
        .print-sheet .cell-resizer-row[b-4k6f2sm2sh],
        .floating-shortcuts-bar[b-4k6f2sm2sh],
        [b-4k6f2sm2sh] .print-sheet .resize-handle,
        [b-4k6f2sm2sh] .print-sheet .cell-resizer-col,
        [b-4k6f2sm2sh] .print-sheet .cell-resizer-row,
        [b-4k6f2sm2sh] .floating-shortcuts-bar {
            display: none !important;
        }
}

#print-mount[b-4k6f2sm2sh] {
    display: none;
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/ProjectsAdmin.razor.rz.scp.css */
/* ==========================================================================
   PROJECTS ADMIN BOARD - MASTER PAGE STYLESHEET (CLEANED & OPTIMIZED)
   Component: EliteTechWeb.Web.Components.Pages.Admin.ProjectsAdmin
   ========================================================================== */

/* 🌟 1. إطار وهيكل الصفحة الرئيسي */
.admin-page-frame[b-b3mo2hr3kw] {
    width: 100%;
    margin-top: calc(70px + 1rem);
    padding: 0 1rem 2rem 1rem;
    box-sizing: border-box;
    color: #FFFFFF;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px - 1rem);
}

.admin-panel-header[b-b3mo2hr3kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
}

.header-title-block h2[b-b3mo2hr3kw] {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: #FFFFFF;
    margin: 0 0 0.2rem 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.neon-accent-icon[b-b3mo2hr3kw] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.header-title-block p[b-b3mo2hr3kw] {
    margin: 0;
    font-size: 0.8rem;
    color: #B6D5E8;
}

.btn-primary-cyber[b-b3mo2hr3kw] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    box-sizing: border-box;
}

    .btn-primary-cyber:hover[b-b3mo2hr3kw] {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55);
    }

    .btn-primary-cyber.btn-green[b-b3mo2hr3kw] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
        box-shadow: 0 0 14px rgba(0, 208, 132, 0.3);
    }

        .btn-primary-cyber.btn-green:hover[b-b3mo2hr3kw] {
            box-shadow: 0 0 20px rgba(0, 208, 132, 0.55);
        }

/* 🌟 2. نظام التبويبات المتجاوب */
.panel-navigation-tabs[b-b3mo2hr3kw] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}

    .panel-navigation-tabs[b-b3mo2hr3kw]::-webkit-scrollbar {
        display: none;
    }

.nav-tab-btn[b-b3mo2hr3kw] {
    background: none;
    border: none;
    color: #B6D5E8;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.25s ease;
    white-space: nowrap;
    min-height: 40px;
}

    .nav-tab-btn.active[b-b3mo2hr3kw] {
        color: #18C8F8;
    }

        .nav-tab-btn.active[b-b3mo2hr3kw]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #18C8F8;
            box-shadow: 0 0 10px #18C8F8;
        }

.dashboard-inner-card[b-b3mo2hr3kw] {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 🌟 3. شريط الفلترة والبحث */
.filter-action-bar[b-b3mo2hr3kw] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.search-cyber-wrapper[b-b3mo2hr3kw] {
    position: relative;
}

    .search-cyber-wrapper input[b-b3mo2hr3kw] {
        width: 100%;
        background: rgba(4, 12, 20, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 0.55rem 2.2rem 0.55rem 0.75rem;
        color: #FFFFFF;
        font-size: 0.84rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
        min-height: 40px;
    }

        .search-cyber-wrapper input:focus[b-b3mo2hr3kw] {
            border-color: #18C8F8;
        }

    .search-cyber-wrapper i[b-b3mo2hr3kw] {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: #18C8F8;
        font-size: 0.82rem;
    }

.select-cyber-dropdown[b-b3mo2hr3kw] {
    background: rgba(4, 12, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 40px;
}

/* 🌟 4. جدول المشاريع السيبراني */
.table-scroll-container[b-b3mo2hr3kw] {
    flex: 1;
    overflow-x: auto;
}

.cyber-admin-table[b-b3mo2hr3kw] {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.86rem;
}

    .cyber-admin-table th[b-b3mo2hr3kw] {
        color: #18C8F8;
        padding: 0.8rem 0.65rem;
        border-bottom: 2px solid rgba(24, 200, 248, 0.25);
        font-weight: 700;
        white-space: nowrap;
    }

    .cyber-admin-table td[b-b3mo2hr3kw] {
        padding: 0.75rem 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

.project-title-cell strong[b-b3mo2hr3kw] {
    color: #FFFFFF;
    display: block;
    font-size: 0.88rem;
}

.sub-en-text[b-b3mo2hr3kw] {
    font-size: 0.75rem;
    color: #B6D5E8;
}

.category-badge[b-b3mo2hr3kw] {
    color: #18C8F8;
    font-weight: 600;
    font-size: 0.82rem;
}

.cover-thumbnail-box[b-b3mo2hr3kw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mini-cover-img[b-b3mo2hr3kw] {
    width: 44px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(24, 200, 248, 0.4);
}

.badge-pill[b-b3mo2hr3kw] {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .badge-pill.image-pill[b-b3mo2hr3kw] {
        background: rgba(0, 208, 132, 0.15);
        color: #00D084;
    }

    .badge-pill.warn-pill[b-b3mo2hr3kw] {
        background: rgba(255, 165, 0, 0.15);
        color: #FFA500;
    }

.btn-media-count[b-b3mo2hr3kw] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-media-count:hover[b-b3mo2hr3kw] {
        background: #18C8F8;
        color: #06131F;
    }

.status-badge-pill[b-b3mo2hr3kw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
    width: fit-content;
    margin: 0;
}

    .status-badge-pill.active[b-b3mo2hr3kw] {
        background: rgba(0, 208, 132, 0.15);
        border: 1px solid #00D084;
        color: #00FF9D;
        box-shadow: 0 0 10px rgba(0, 208, 132, 0.25);
    }

    .status-badge-pill.inactive[b-b3mo2hr3kw] {
        background: rgba(255, 77, 77, 0.15);
        border: 1px solid #FF4D4D;
        color: #FF5E36;
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.25);
    }

.status-dot[b-b3mo2hr3kw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

/* أزرار الإجراءات */
.action-buttons[b-b3mo2hr3kw] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.btn-icon[b-b3mo2hr3kw] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.upload-btn[b-b3mo2hr3kw] {
    background: rgba(0, 210, 255, 0.1);
    color: var(--color-accent-cyan, #18C8F8);
    border: 1px solid rgba(0, 210, 255, 0.3);
}

    .upload-btn:hover[b-b3mo2hr3kw] {
        background: var(--color-accent-cyan, #18C8F8);
        color: #040c14;
        box-shadow: 0 0 12px rgba(24, 200, 248, 0.5);
        transform: scale(1.05);
    }

.edit-btn[b-b3mo2hr3kw] {
    background: rgba(255, 173, 71, 0.1);
    color: #ffad47;
    border: 1px solid rgba(255, 173, 71, 0.3);
}

    .edit-btn:hover[b-b3mo2hr3kw] {
        background: #ffad47;
        color: #040c14;
        box-shadow: 0 0 12px rgba(255, 173, 71, 0.5);
        transform: scale(1.05);
    }

.delete-btn[b-b3mo2hr3kw] {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

    .delete-btn:hover[b-b3mo2hr3kw] {
        background: #ff4d4d;
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 77, 77, 0.5);
        transform: scale(1.05);
    }

/* 🌟 5. استوديو وسائط الفعاليات ورفع الملفات */
.media-header-controls[b-b3mo2hr3kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    background: rgba(4, 12, 20, 0.6);
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(24, 200, 248, 0.15);
}

.project-selector-group[b-b3mo2hr3kw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
}

    .project-selector-group label[b-b3mo2hr3kw] {
        font-size: 0.84rem;
        font-weight: 700;
        color: #B6D5E8;
    }

.project-dropdown[b-b3mo2hr3kw] {
    flex: 1;
    min-width: 200px;
}

.upload-progress-card[b-b3mo2hr3kw] {
    background: rgba(6, 19, 31, 0.9);
    border: 1px solid #18C8F8;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px rgba(24, 200, 248, 0.25);
}

.progress-info-row[b-b3mo2hr3kw] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.82rem;
    color: #18C8F8;
    margin-bottom: 0.35rem;
}

.progress-track[b-b3mo2hr3kw] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-b3mo2hr3kw] {
    height: 100%;
    background: linear-gradient(90deg, #18C8F8, #00FF9D);
    transition: width 0.3s ease;
}

.progress-status-msg[b-b3mo2hr3kw] {
    font-size: 0.76rem;
    color: #B6D5E8;
    margin: 0.35rem 0 0 0;
}

.upload-banner-container[b-b3mo2hr3kw] {
    width: 100%;
    margin-bottom: 1.2rem;
}

.btn-upload-banner[b-b3mo2hr3kw] {
    width: 100%;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
}

.media-gallery-grid[b-b3mo2hr3kw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.media-card-item[b-b3mo2hr3kw] {
    background: rgba(6, 19, 31, 0.9);
    border: 1px solid rgba(24, 200, 248, 0.25);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.media-preview-box[b-b3mo2hr3kw] {
    position: relative;
    width: 100%;
    height: 160px;
    background: #020810;
    overflow: hidden;
}

.media-element[b-b3mo2hr3kw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-type-tag[b-b3mo2hr3kw] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

    .media-type-tag.video-tag[b-b3mo2hr3kw] {
        background: rgba(6, 19, 31, 0.85);
        color: #18C8F8;
        border: 1px solid #18C8F8;
    }

    .media-type-tag.image-tag[b-b3mo2hr3kw] {
        background: rgba(6, 19, 31, 0.85);
        color: #00D084;
        border: 1px solid #00D084;
    }

.sequence-badge[b-b3mo2hr3kw] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.media-card-body[b-b3mo2hr3kw] {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.media-file-name[b-b3mo2hr3kw] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-size-info[b-b3mo2hr3kw] {
    font-size: 0.72rem;
    color: #B6D5E8;
}

.media-actions-footer[b-b3mo2hr3kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-scrub-timeline[b-b3mo2hr3kw] {
    background: linear-gradient(135deg, rgba(24, 200, 248, 0.2) 0%, rgba(0, 114, 255, 0.2) 100%);
    border: 1px solid rgba(24, 200, 248, 0.4);
    color: #18C8F8;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.empty-media-box[b-b3mo2hr3kw] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #B6D5E8;
}

.empty-icon[b-b3mo2hr3kw] {
    font-size: 2.8rem;
    color: rgba(24, 200, 248, 0.4);
    margin-bottom: 0.6rem;
}

/* 🌟 6. نافذة تأكيد الحذف السيبرانية */
.delete-backdrop[b-b3mo2hr3kw] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(3, 8, 16, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    touch-action: none !important;
}

.delete-confirm-card[b-b3mo2hr3kw] {
    width: min(440px, calc(100vw - 24px)) !important;
    background: #091422 !important;
    border: 1px solid rgba(255, 77, 77, 0.45) !important;
    border-radius: 18px !important;
    padding: 1.6rem !important;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 77, 77, 0.25) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.delete-icon-wrapper[b-b3mo2hr3kw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 77, 77, 0.12);
    border: 1px solid rgba(255, 77, 77, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.3);
}

.delete-danger-icon[b-b3mo2hr3kw] {
    font-size: 2rem;
    color: #FF4D4D;
    filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.8));
    animation: dangerPulse-b-b3mo2hr3kw 2s infinite ease-in-out;
}

@keyframes dangerPulse-b-b3mo2hr3kw {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.delete-content-block[b-b3mo2hr3kw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.delete-modal-title[b-b3mo2hr3kw] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.delete-item-target[b-b3mo2hr3kw] {
    font-size: 0.9rem;
    color: #B6D5E8;
    margin: 0;
    line-height: 1.5;
}

.highlight-target[b-b3mo2hr3kw] {
    color: #FFFFFF;
    font-weight: 800;
    display: block;
    margin-top: 0.2rem;
    word-break: break-word;
}

.delete-warning-banner[b-b3mo2hr3kw] {
    background: rgba(255, 77, 77, 0.08);
    border: 1px dashed rgba(255, 77, 77, 0.35);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font-size: 0.78rem;
    color: #fca5a5;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: right;
    margin-top: 0.4rem;
}

    .delete-warning-banner i[b-b3mo2hr3kw] {
        color: #FF4D4D;
        font-size: 0.9rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

.delete-modal-actions[b-b3mo2hr3kw] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

.btn-cancel-delete[b-b3mo2hr3kw] {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 42px;
}

    .btn-cancel-delete:hover[b-b3mo2hr3kw] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }

.btn-confirm-danger[b-b3mo2hr3kw] {
    flex: 1.2;
    background: linear-gradient(135deg, #FF4D4D 0%, #B91C1C 100%);
    border: 1px solid #FF4D4D;
    color: #FFFFFF;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.4);
    transition: all 0.25s ease;
    min-height: 42px;
}

    .btn-confirm-danger:hover[b-b3mo2hr3kw] {
        transform: translateY(-2px);
        box-shadow: 0 0 28px rgba(255, 77, 77, 0.7);
        filter: brightness(1.15);
    }

/* 🌟 7. نافذة التايم لاين لاقتطاع الغلاف */
.timeline-scrubber-card[b-b3mo2hr3kw] {
    width: min(800px, calc(100vw - 16px)) !important;
    background: rgba(6, 19, 31, 0.98) !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.timeline-modal-body[b-b3mo2hr3kw] {
    padding: 1.2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow-y: auto;
}

.video-scrub-viewport[b-b3mo2hr3kw] {
    width: 100%;
    height: clamp(180px, 35vh, 360px);
    background: #02060C;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(24, 200, 248, 0.25);
}

.scrub-video-player[b-b3mo2hr3kw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.timeline-controls-box[b-b3mo2hr3kw] {
    background: rgba(4, 12, 20, 0.75);
    border: 1px solid rgba(24, 200, 248, 0.2);
    border-radius: 10px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.timeline-time-row[b-b3mo2hr3kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-badge[b-b3mo2hr3kw] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

    .time-badge.current-time[b-b3mo2hr3kw] {
        background: rgba(24, 200, 248, 0.15);
        color: #18C8F8;
        border: 1px solid rgba(24, 200, 248, 0.3);
    }

    .time-badge.total-time[b-b3mo2hr3kw] {
        color: #B6D5E8;
    }

.cyber-range-slider[b-b3mo2hr3kw] {
    width: 100%;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
}

    .cyber-range-slider[b-b3mo2hr3kw]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #18C8F8;
        cursor: pointer;
        box-shadow: 0 0 10px #18C8F8;
        border: 2px solid #FFFFFF;
    }

.micro-step-buttons[b-b3mo2hr3kw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.btn-micro[b-b3mo2hr3kw] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(24, 200, 248, 0.25);
    color: #B6D5E8;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

    .btn-micro.active-play[b-b3mo2hr3kw] {
        background: #18C8F8;
        color: #06131F;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.modal-header-cyber[b-b3mo2hr3kw] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2) !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    flex-shrink: 0 !important;
}

    .modal-header-cyber h3[b-b3mo2hr3kw] {
        margin: 0 !important;
        font-size: 1.15rem !important;
        color: #FFFFFF !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

.btn-close-modal[b-b3mo2hr3kw] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #B6D5E8 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .btn-close-modal:hover[b-b3mo2hr3kw] {
        background: #FF4D4D !important;
        color: #FFFFFF !important;
        border-color: #FF4D4D !important;
    }

.modal-footer-cyber[b-b3mo2hr3kw] {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1rem 1.5rem !important;
    background: rgba(4, 12, 20, 0.75) !important;
    border-top: 1px solid rgba(24, 200, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.btn-cancel[b-b3mo2hr3kw] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    transition: all 0.2s ease !important;
    min-height: 40px !important;
}

    .btn-cancel:hover[b-b3mo2hr3kw] {
        background: rgba(255, 255, 255, 0.12) !important;
    }

.alert-box[b-b3mo2hr3kw] {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.alert-error[b-b3mo2hr3kw] {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.alert-success[b-b3mo2hr3kw] {
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid rgba(0, 208, 132, 0.4);
    color: #6ee7b7;
}

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال
   ========================================================================== */
@media (max-width: 768px) {
    .admin-page-frame[b-b3mo2hr3kw] {
        margin-top: calc(70px + 0.5rem);
        padding: 0 0.5rem 1.5rem 0.5rem;
    }

    .dashboard-inner-card[b-b3mo2hr3kw] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .filter-action-bar[b-b3mo2hr3kw] {
        grid-template-columns: 1fr;
    }

    .media-gallery-grid[b-b3mo2hr3kw] {
        grid-template-columns: 1fr;
    }

    .cyber-admin-table[b-b3mo2hr3kw],
    .cyber-admin-table thead[b-b3mo2hr3kw],
    .cyber-admin-table tbody[b-b3mo2hr3kw],
    .cyber-admin-table th[b-b3mo2hr3kw],
    .cyber-admin-table td[b-b3mo2hr3kw],
    .cyber-admin-table tr[b-b3mo2hr3kw] {
        display: block;
    }

        .cyber-admin-table thead[b-b3mo2hr3kw] {
            display: none;
        }

        .cyber-admin-table tbody tr[b-b3mo2hr3kw] {
            margin-bottom: 0.85rem;
            background: rgba(11, 35, 65, 0.7);
            border: 1px solid rgba(24, 200, 248, 0.25);
            border-radius: 12px;
            padding: 0.75rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        .cyber-admin-table td[b-b3mo2hr3kw] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.45rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.82rem;
            width: 100%;
            box-sizing: border-box;
        }

            .cyber-admin-table td[b-b3mo2hr3kw]::before {
                content: attr(data-label);
                font-weight: 700;
                color: #18C8F8;
                font-size: 0.76rem;
            }

            .cyber-admin-table td[data-label="الحالة"][b-b3mo2hr3kw] {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 0.45rem 0;
                box-sizing: border-box;
            }

            .cyber-admin-table td.td-actions[b-b3mo2hr3kw] {
                border-bottom: none;
                padding-top: 0.6rem;
                justify-content: flex-end;
            }

                .cyber-admin-table td.td-actions[b-b3mo2hr3kw]::before {
                    display: none !important;
                    content: "" !important;
                }
}

@media (max-width: 480px) {
    .admin-panel-header[b-b3mo2hr3kw] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary-cyber[b-b3mo2hr3kw] {
        width: 100%;
    }

    .panel-navigation-tabs[b-b3mo2hr3kw] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        border-bottom: none;
    }

    .nav-tab-btn[b-b3mo2hr3kw] {
        padding: 0.55rem 0.35rem;
        font-size: 0.76rem;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(24, 200, 248, 0.2);
        border-radius: 8px;
        white-space: normal;
        text-align: center;
    }

        .nav-tab-btn.active[b-b3mo2hr3kw] {
            background: rgba(24, 200, 248, 0.18);
            border-color: #18C8F8;
        }

            .nav-tab-btn.active[b-b3mo2hr3kw]::after {
                display: none;
            }

    .video-scrub-viewport[b-b3mo2hr3kw] {
        height: 180px;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/Admin/QuotationsAdmin.razor.rz.scp.css */
/* ==========================================================================
   QUOTATIONS ADMIN BOARD - CYBERNETIC LAYOUT (100% RESPONSIVE & MOBILE TOUCH)
   ========================================================================== */

.admin-page-frame[b-fuwgmxnyyt] {
    width: 100%;
    margin-top: calc(70px + 1rem);
    padding: 0 1rem 2rem 1rem;
    box-sizing: border-box;
    color: #FFFFFF;
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px - 1rem);
    min-height: calc(100dvh - 70px - 1rem);
}

.admin-panel-header[b-fuwgmxnyyt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(24, 200, 248, 0.2);
    padding-bottom: 0.8rem;
}

.header-title-block h2[b-fuwgmxnyyt] {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: #FFFFFF;
    margin: 0 0 0.2rem 0;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neon-accent-icon[b-fuwgmxnyyt] {
    color: #18C8F8;
    text-shadow: 0 0 12px rgba(24, 200, 248, 0.55);
}

.header-title-block p[b-fuwgmxnyyt] {
    margin: 0;
    font-size: 0.82rem;
    color: #B6D5E8;
}

/* الأزرار السيبرانية */
.btn-primary-cyber[b-fuwgmxnyyt] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.84rem;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.3);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
}

    .btn-primary-cyber:hover[b-fuwgmxnyyt] {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.55);
    }

    .btn-primary-cyber.btn-outline[b-fuwgmxnyyt] {
        background: rgba(6, 19, 31, 0.8);
        border: 1px solid rgba(24, 200, 248, 0.4);
        color: #18C8F8;
    }

    .btn-primary-cyber.btn-green[b-fuwgmxnyyt] {
        background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
        box-shadow: 0 0 12px rgba(0, 208, 132, 0.3);
    }

/* نظام التبويبات */
.panel-navigation-tabs[b-fuwgmxnyyt] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}

    .panel-navigation-tabs[b-fuwgmxnyyt]::-webkit-scrollbar {
        display: none;
    }

.nav-tab-btn[b-fuwgmxnyyt] {
    background: none;
    border: none;
    color: #B6D5E8;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.25s ease;
    white-space: nowrap;
    min-height: 40px;
}

    .nav-tab-btn.active[b-fuwgmxnyyt] {
        color: #18C8F8;
    }

        .nav-tab-btn.active[b-fuwgmxnyyt]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #18C8F8;
            box-shadow: 0 0 10px #18C8F8;
        }

/* البطاقة الزجاجية الداخلية */
.dashboard-inner-card[b-fuwgmxnyyt] {
    background: rgba(11, 35, 65, 0.45);
    border: 1px solid rgba(24, 200, 248, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* شريط الفلترة والبحث */
.filter-action-bar[b-fuwgmxnyyt] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.search-cyber-wrapper[b-fuwgmxnyyt] {
    position: relative;
}

    .search-cyber-wrapper input[b-fuwgmxnyyt] {
        width: 100%;
        background: rgba(4, 12, 20, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 0.55rem 2.2rem 0.55rem 0.75rem;
        color: #FFFFFF;
        font-size: 0.84rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.2s;
        min-height: 40px;
    }

        .search-cyber-wrapper input:focus[b-fuwgmxnyyt] {
            border-color: #18C8F8;
        }

    .search-cyber-wrapper i[b-fuwgmxnyyt] {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        color: #18C8F8;
        font-size: 0.82rem;
    }

/* جدول العروض */
.table-scroll-container[b-fuwgmxnyyt] {
    flex: 1;
    overflow-x: auto;
}

.cyber-admin-table[b-fuwgmxnyyt] {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 0.86rem;
}

    .cyber-admin-table th[b-fuwgmxnyyt] {
        color: #18C8F8;
        padding: 0.8rem 0.65rem;
        border-bottom: 2px solid rgba(24, 200, 248, 0.25);
        font-weight: 700;
        white-space: nowrap;
    }

    .cyber-admin-table td[b-fuwgmxnyyt] {
        padding: 0.75rem 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }

.badge-type[b-fuwgmxnyyt] {
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
}

.badge-blue[b-fuwgmxnyyt] {
    background: rgba(24, 200, 248, 0.15);
    color: #18C8F8;
    border: 1px solid rgba(24, 200, 248, 0.3);
}

.badge-purple[b-fuwgmxnyyt] {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.badge-source[b-fuwgmxnyyt] {
    font-size: 0.75rem;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-status[b-fuwgmxnyyt] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
}

.action-buttons-group[b-fuwgmxnyyt] {
    display: inline-flex;
    gap: 6px;
}

.btn-action-edit[b-fuwgmxnyyt], .btn-action-delete[b-fuwgmxnyyt] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-action-edit[b-fuwgmxnyyt] {
    background: rgba(24, 200, 248, 0.15);
    color: #18C8F8;
    border: 1px solid rgba(24, 200, 248, 0.3);
}

    .btn-action-edit:hover[b-fuwgmxnyyt] {
        background: #18C8F8;
        color: #06131F;
    }

.btn-action-delete[b-fuwgmxnyyt] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

    .btn-action-delete:hover[b-fuwgmxnyyt] {
        background: #ef4444;
        color: #ffffff;
    }

/* بطاقة وعرض المصمم الذكي */
.designer-host-card[b-fuwgmxnyyt] {
    background: #0b1329;
    border: 1px solid rgba(24, 200, 248, 0.2);
    border-radius: 14px;
    overflow: hidden;
    height: calc(100vh - 180px);
    height: calc(100dvh - 180px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.designer-iframe-viewport[b-fuwgmxnyyt] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.loading-state[b-fuwgmxnyyt], .empty-state[b-fuwgmxnyyt] {
    text-align: center;
    padding: 3rem 1rem;
    color: #B6D5E8;
}

.empty-icon[b-fuwgmxnyyt] {
    font-size: 2.5rem;
    color: rgba(24, 200, 248, 0.4);
    margin-bottom: 0.5rem;
}

/* التجاوب مع شاشات الجوال */
@media (max-width: 768px) {
    .admin-page-frame[b-fuwgmxnyyt] {
        margin-top: calc(70px + 0.5rem);
        padding: 0 0.5rem 1.5rem 0.5rem;
    }

    .filter-action-bar[b-fuwgmxnyyt] {
        grid-template-columns: 1fr;
    }

    .designer-host-card[b-fuwgmxnyyt] {
        height: calc(100dvh - 160px);
        border-radius: 8px;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/ComingSoon.razor.rz.scp.css */
/* الحاوية الرئيسية لكامل ارتفاع الشاشة مع قفل التمرير */
.coming-soon-viewport-frame[b-g3ykhyxfyj] {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background-color: #06131F;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* لمنع أي تمرير وظهور الصور كاملة في مجال الرؤية */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* الحاوية الرأسية المانعة للفراغات والتباعد نهائياً */
.gif-seamless-stack[b-g3ykhyxfyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0 !important; /* إلغاء التباعد بين الصور */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; /* إزالة فراغات الأسطر الافتراضية */
    height: 100%;
    max-height: 100dvh;
}

/* 🌟 كلاس الشفافية والدمج الذكي مع اقتسام ارتفاع الشاشة (640x640) */
.transparent-blend-gif[b-g3ykhyxfyj] {
    max-width: 100%;
    height: calc(96dvh / 4);
    display: block;
    object-fit: contain;
    /* 1. تحويل الخلفية البيضاء إلى سوداء وعكس الخطوط السوداء لبيضاء نيون مع بقاء اللون السماوي */

    filter: invert(1) hue-rotate(180deg) contrast(1.2) brightness(1.1);
    /* 2. إخفاء اللون الأسود الناتج بالكامل وجعله شفافاً 100% */

    mix-blend-mode: screen;
    /* 3. توهج نيون سيبراني اختياري للمظهر العام */

    drop-shadow: 0 0 15px rgba(24, 200, 248, 0.4);
} 



/* التجاوب مع شاشات الهواتف الذكية */
@media (max-width: 480px) {
    .transparent-blend-gif[b-g3ykhyxfyj] {
        height: calc(96dvh / 4);
        max-width: 95vw;
    }
}
/* _content/EliteTechWeb.Web/Components/Pages/EmployeeProfile.razor.rz.scp.css */
:root[b-gawkugb1b2] {
    --elite-cyan: #00d2ff;
    --elite-cyan-glow: rgba(0, 210, 255, 0.5);
    --dark-bg: #03152d;
}

body[b-gawkugb1b2] {
    margin: 0;
    padding: 0;
    background: #010813;
}

/* ==========================================================================
   🌟 1. الحاوية الأم: تضمن هامش 10 بكسل من كل حواف الشاشة بشكل قاطع
   ========================================================================== */
.profile-page-container[b-gawkugb1b2] {
    width: 100%;
    min-height: 100vh;
    padding: 10px; /* هامش 10 بكسل من كل الاتجاهات */
    box-sizing: border-box;
    direction: ltr;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    background: var(--dark-bg);
}

/* ==========================================================================
   🌟 2. حاوية الجوال: تنظم البطاقة والأزرار وتدفع الأزرار للأسفل
   ========================================================================== */
.mobile-wrapper[b-gawkugb1b2] {
    /* عرض الحاوية هو عرض الشاشة ناقص 20 بكسل (للهوامش)، مع حد أقصى 500 للكمبيوتر */
    --wrapper-width: min(100vw - 20px, 500px);
    width: 100%;
    max-width: 500px;
    flex: 1; /* تأخذ كل المساحة الطولية المتاحة */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* يدفع الأزرار لأسفل الحاوية تماماً */
}

/* ==========================================================================
   🌟 3. منطقة الباجة: تضمن تساوي المسافة العلوية والسفلية
   ========================================================================== */
.badge-display-area[b-gawkugb1b2] {
    flex: 1; /* تأخذ كل المساحة المتبقية بين أعلى الشاشة والأزرار السفلية */
    display: flex;
    justify-content: center;
    align-items: center; /* التوسيط هنا يضمن مسافة متساوية من أعلى وأسفل الباجة! */
    width: 100%;
}

/* ==========================================================================
   🌟 4. التحجيم الذكي للباجة (تعمل على كل الجوالات بمعادلة واحدة)
   ========================================================================== */
.badge-scale-wrapper[b-gawkugb1b2] {
    width: 350px;
    height: 540px;
    /* تحجيم الباجة لتأخذ 100% من عرض الحاوية */
    transform: scale(calc(var(--wrapper-width) / 350));
    transform-origin: center center;
    /* معالجة الارتفاع الوهمي الناتج عن الـ Transform ليتم توسيطها بدقة تامة */
    margin-top: calc(((540px * (var(--wrapper-width) / 350)) - 540px) / 2);
    margin-bottom: calc(((540px * (var(--wrapper-width) / 350)) - 540px) / 2);
    flex-shrink: 0;
}

/* ==========================================================================
   🌟 5. أزرار التبديل (مستقرة في الأسفل دون تداخل)
   ========================================================================== */
.toggle-mode-container[b-gawkugb1b2] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: rgba(2, 17, 36, 0.7);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-top: 15px; /* مسافة أمان إضافية لمنع الالتصاق بالباجة */
    flex-shrink: 0;
}

/* ==========================================================================
   تنسيقات الأزرار الداخلية
   ========================================================================== */
.dock-btn[b-gawkugb1b2] {
    flex: 1;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: #7ab4c7;
    padding: 12px 10px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dock-btn:hover:not(.active)[b-gawkugb1b2] {
        color: #00ffff;
        background: rgba(0, 210, 255, 0.05);
        border: 1px solid rgba(0, 210, 255, 0.3);
    }

    .dock-btn.active[b-gawkugb1b2] {
        background: linear-gradient(90deg, #00ffff 0%, #00bfff 100%);
        color: #010c1c;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.02);
    }

/* ==========================================================================
   المشهد السينمائي للتحميل (Cinematic Boot Sequence)
   ========================================================================== */
.cinematic-scene[b-gawkugb1b2] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #010813;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cinematic-backdrop[b-gawkugb1b2] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 210, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hud-scanner[b-gawkugb1b2] {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 40px;
}

.hud-ring[b-gawkugb1b2] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--elite-cyan);
}

.hud-ring-1[b-gawkugb1b2] {
    animation: spin-b-gawkugb1b2 2s linear infinite;
    border-width: 3px;
    border-style: dashed;
}

.hud-ring-2[b-gawkugb1b2] {
    inset: 15px;
    animation: spin-reverse-b-gawkugb1b2 3s linear infinite;
    border-bottom-color: var(--elite-cyan);
    opacity: 0.6;
}

.hud-ring-3[b-gawkugb1b2] {
    inset: 30px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    animation: pulse-glow-b-gawkugb1b2 2s infinite;
}

.fingerprint-box[b-gawkugb1b2] {
    position: absolute;
    inset: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--elite-cyan);
    font-size: 55px;
    filter: drop-shadow(0 0 15px var(--elite-cyan));
    overflow: hidden;
    animation: pulse-glow-b-gawkugb1b2 2s infinite alternate;
}

.scan-laser[b-gawkugb1b2] {
    position: absolute;
    left: -10%;
    top: 0;
    width: 120%;
    height: 3px;
    background: #00ff88;
    box-shadow: 0 0 15px #00ff88, 0 0 30px #00ff88;
    animation: laserScan-b-gawkugb1b2 1.2s ease-in-out infinite alternate;
}

.sys-text-container[b-gawkugb1b2] {
    position: relative;
    height: 40px;
    width: 320px;
    text-align: center;
}

.sys-text[b-gawkugb1b2] {
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: 0;
    text-shadow: 0 0 8px currentColor;
}

.text-init[b-gawkugb1b2] {
    animation: typeInOut-b-gawkugb1b2 1.5s 0.2s forwards;
    color: #a0a0a0;
}

.text-decrypt[b-gawkugb1b2] {
    animation: typeInOut-b-gawkugb1b2 1.4s 1.7s forwards;
    color: var(--elite-cyan);
}

.text-granted[b-gawkugb1b2] {
    animation: textGlitch-b-gawkugb1b2 0.6s 3.1s forwards;
    color: #00ff88;
    font-size: 18px;
    letter-spacing: 4px;
}

@keyframes spin-b-gawkugb1b2 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse-b-gawkugb1b2 {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes pulse-glow-b-gawkugb1b2 {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes laserScan-b-gawkugb1b2 {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes typeInOut-b-gawkugb1b2 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes textGlitch-b-gawkugb1b2 {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    20% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* الأخطاء */
.error-box[b-gawkugb1b2] {
    width: 90%;
    max-width: 350px;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    margin-top: 3rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
}

.error-icon[b-gawkugb1b2] {
    font-size: 48px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 10px rgba(220, 53, 69, 0.4));
}

.btn-return[b-gawkugb1b2] {
    display: inline-block;
    margin-top: 24px;
    background: var(--elite-cyan);
    color: #000;
    padding: 10px 32px;
    border-radius: 12px;
    font-weight: bold;
}

/* ==========================================================================
   تأثير الانبثاق الثلاثي الأبعاد (Card Reveal) 
   ========================================================================== */
.card-reveal[b-gawkugb1b2] {
    animation: cinematicReveal-b-gawkugb1b2 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cinematicReveal-b-gawkugb1b2 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(80px) rotateX(20deg);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

/* ==========================================================================
   تصميم البطاقة الأساسي 
   ========================================================================== */
.printable-badge-card[b-gawkugb1b2] {
    position: relative;
    min-width: 350px !important;
    min-height: 540px !important;
    max-width: 500px !important;
    max-height: 772px !important;
    box-sizing: border-box;
    flex-shrink: 0;
    background: linear-gradient(180deg, #03152d 0%, #063158 45%, #00a8cc 75%, #00e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 210, 255, 0.15);
    border: none;
    overflow: hidden;
    color: #fff;
    transform: translateZ(0);
}

.card-glossy-reflection[b-gawkugb1b2] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(25deg);
    z-index: 10;
    pointer-events: none;
}

.tech-canvas-bg[b-gawkugb1b2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: block;
}

.badge-content-overlay[b-gawkugb1b2] {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.company-logo[b-gawkugb1b2] {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    height: 35px;
    max-width: 250px;
    object-fit: contain;
}

.company-logo-center[b-gawkugb1b2] {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    z-index: 15;
}

.cyber-circle-wrapper[b-gawkugb1b2] {
    position: absolute;
    top: 115px;
    left: 50%;
    transform: translateX(-50%);
    width: 135px;
    height: 135px;
    border-radius: 50%;
    padding: 6px;
    background: rgba(2, 17, 36, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

    .cyber-circle-wrapper[b-gawkugb1b2]::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: var(--elite-cyan);
        border-bottom-color: var(--elite-cyan);
        animation: spin-b-gawkugb1b2 3s linear infinite;
        opacity: 0.9;
    }

    .cyber-circle-wrapper[b-gawkugb1b2]::after {
        content: '';
        position: absolute;
        inset: -11px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-left-color: rgba(0, 210, 255, 0.7);
        border-right-color: rgba(0, 210, 255, 0.7);
        animation: spin-reverse-b-gawkugb1b2 5s linear infinite;
    }

.cyber-circle-img[b-gawkugb1b2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 2;
    position: relative;
}

.name-block[b-gawkugb1b2] {
    position: absolute;
    top: 265px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 15;
    padding: 0 15px;
    box-sizing: border-box;
}

.emp-name[b-gawkugb1b2] {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.job-title-card[b-gawkugb1b2] {
    position: absolute;
    top: 300px;
    left: 0;
    width: 100%;
    height: 35px;
    background: rgba(0, 210, 255, 0.08);
    backdrop-filter: blur(3px);
    border-top: 1px solid rgba(0, 210, 255, 0.3);
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

.emp-title[b-gawkugb1b2] {
    font-size: 13px;
    font-weight: 700;
    color: var(--elite-cyan);
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-inserted-card[b-gawkugb1b2] {
    position: absolute;
    top: 345px;
    left: 145px;
    width: 195px;
    height: 35px;
    background: linear-gradient(90deg, #00ffff 0%, #00bfff 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 12px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 3;
    padding-left: 25px;
    box-sizing: border-box;
}

.id-label[b-gawkugb1b2] {
    font-size: 13px;
    font-weight: 800;
    color: #010c1c !important;
    letter-spacing: 1px;
}

.id-value[b-gawkugb1b2] {
    font-size: 16px;
    font-weight: 900;
    color: #010c1c !important;
    letter-spacing: 1.5px;
}

.bottom-data-block[b-gawkugb1b2] {
    position: absolute;
    top: 345px;
    width: 100%;
    height: 155px;
    z-index: 20;
}

.qr-squircle-box[b-gawkugb1b2] {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 130px;
    height: 130px;
    background: #021124;
    border-radius: 12px;
    border: 3.5px solid var(--elite-cyan);
    padding: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    box-sizing: border-box;
    z-index: 25;
}

.qr-img[b-gawkugb1b2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
}

.qr-side-info[b-gawkugb1b2] {
    position: absolute;
    left: 150px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 180px;
    z-index: 25;
}

.contact-row[b-gawkugb1b2] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
}

    .contact-row i[b-gawkugb1b2] {
        color: var(--elite-cyan);
        font-size: 13px;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
    }

    .contact-row span[b-gawkugb1b2] {
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 2px #000;
    }

.card-footer[b-gawkugb1b2] {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
}

.footer-item[b-gawkugb1b2] {
    font-size: 13px;
    font-weight: 900;
    color: #010c1c;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

    .footer-item i[b-gawkugb1b2] {
        color: #010c1c;
        font-size: 14px;
        text-align: center;
    }

/* Timeline Animation */
.card-reveal .tech-canvas-bg[b-gawkugb1b2], .card-reveal .company-logo[b-gawkugb1b2], .card-reveal .company-logo-center[b-gawkugb1b2], .card-reveal .cyber-circle-wrapper[b-gawkugb1b2], .card-reveal .cyber-circle-img[b-gawkugb1b2], .card-reveal .name-block[b-gawkugb1b2], .card-reveal .job-title-card[b-gawkugb1b2], .card-reveal .id-inserted-card[b-gawkugb1b2], .card-reveal .qr-side-info[b-gawkugb1b2], .card-reveal .card-footer[b-gawkugb1b2], .card-reveal .qr-squircle-box[b-gawkugb1b2], .card-reveal .qr-img[b-gawkugb1b2] {
    opacity: 0;
    animation-fill-mode: forwards;
}

.card-reveal .printable-badge-card[b-gawkugb1b2]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    border: 2px solid var(--elite-cyan);
    box-shadow: 0 0 15px var(--elite-cyan), inset 0 0 15px var(--elite-cyan);
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    animation: laserTrace-b-gawkugb1b2 0.6s 0.2s ease-out forwards;
}

@keyframes laserTrace-b-gawkugb1b2 {
    0% {
        opacity: 1;
        clip-path: inset(0 100% 100% 0);
    }

    33% {
        clip-path: inset(0 0 100% 0);
    }

    66% {
        clip-path: inset(0 0 0 0);
    }

    90% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
    }
}

.card-reveal .tech-canvas-bg[b-gawkugb1b2] {
    animation: fadeInElement-b-gawkugb1b2 0.5s 0.6s forwards;
}

.card-reveal .company-logo[b-gawkugb1b2], .card-reveal .company-logo-center[b-gawkugb1b2] {
    animation: sparkLogo-b-gawkugb1b2 0.6s 0.8s forwards;
}

@keyframes sparkLogo-b-gawkugb1b2 {
    0% {
        opacity: 0;
        filter: drop-shadow(0 0 20px #00ffff) brightness(3);
        transform: translateX(-50%) scale(1.2);
    }

    10% {
        opacity: 1;
        filter: drop-shadow(0 0 10px #00ffff) brightness(1);
        transform: translateX(-50%) scale(1);
    }

    15% {
        opacity: 0;
    }

    25% {
        opacity: 1;
        filter: drop-shadow(0 0 30px #00ffff) brightness(3);
    }

    35% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 5px #00ffff) brightness(1);
    }

    60% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)) brightness(1);
        transform: translateX(-50%) scale(1);
    }
}

.card-reveal .cyber-circle-wrapper[b-gawkugb1b2] {
    transform: translateX(-50%) scale(0) rotate(-180deg);
    animation: popRings-b-gawkugb1b2 0.4s 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-reveal .cyber-circle-img[b-gawkugb1b2] {
    transform: scale(0);
    animation: popPhoto-b-gawkugb1b2 0.5s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popRings-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0deg);
    }
}

@keyframes popPhoto-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.card-reveal .name-block[b-gawkugb1b2] {
    transform: translateY(-20px);
    animation: dropText-b-gawkugb1b2 0.4s 1.5s forwards;
}

.card-reveal .job-title-card[b-gawkugb1b2] {
    transform-origin: center;
    transform: scaleX(0);
    animation: expandTitle-b-gawkugb1b2 0.4s 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-reveal .id-inserted-card[b-gawkugb1b2] {
    transform: translateX(40px);
    animation: slideLeft-b-gawkugb1b2 0.4s 1.7s forwards;
}

.card-reveal .qr-side-info[b-gawkugb1b2] {
    transform: translateX(-30px);
    animation: slideRight-b-gawkugb1b2 0.4s 1.8s forwards;
}

.card-reveal .card-footer[b-gawkugb1b2] {
    transform: translateY(20px);
    animation: dropText-b-gawkugb1b2 0.4s 1.9s forwards;
}

@keyframes dropText-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandTitle-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes slideLeft-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight-b-gawkugb1b2 {
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInElement-b-gawkugb1b2 {
    to {
        opacity: 1;
    }
}

/* Scanner */
.card-reveal .qr-squircle-box[b-gawkugb1b2] {
    animation: fadeInElement-b-gawkugb1b2 0.1s 2.2s forwards;
}

.card-reveal .qr-img[b-gawkugb1b2] {
    clip-path: inset(0 0 100% 0);
    animation: scanReveal-b-gawkugb1b2 1.2s 2.2s ease-in-out forwards;
}

@keyframes scanReveal-b-gawkugb1b2 {
    0% {
        opacity: 1;
        clip-path: inset(0 0 100% 0);
        filter: brightness(3) contrast(1.5);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: brightness(1) contrast(1);
    }
}

.card-reveal .qr-squircle-box[b-gawkugb1b2]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 25px;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.4) 80%, rgba(0, 255, 255, 1) 100%);
    border-bottom: 2px solid #fff;
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.8);
    opacity: 0;
    z-index: 30;
    pointer-events: none;
    animation: scanLaserLine-b-gawkugb1b2 1.2s 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scanLaserLine-b-gawkugb1b2 {
    0% {
        top: -20%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        top: 100%;
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* _content/EliteTechWeb.Web/Components/Sections/EquipmentShowcase.razor.rz.scp.css */
/* ==========================================================================
   EQUIPMENT SHOWCASE SECTION & 3D COVERFLOW STYLES (iOS & 360px Optimized)
   ========================================================================== */

.equipment-showcase-section[b-nfbuk740qz] {
    padding: 3.5rem 1rem 4rem 1rem;
    background: transparent;
    position: relative;
    --cf-card: clamp(280px, 28vw, 340px);
}

.container[b-nfbuk740qz] {
    max-width: 1300px;
    margin: 0 auto;
}

/* ==========================================================================
   🌟 رأس القسم (Header)
   ========================================================================== */
.header-content[b-nfbuk740qz] {
    text-align: center;
    margin-bottom: 1.2rem;
}

.sub-heading[b-nfbuk740qz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.4));
}

.section-title[b-nfbuk740qz] {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: var(--color-text-main, #FFFFFF);
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
    margin: 0 0 0.4rem 0;
    line-height: 1.25;
}

.section-subheading[b-nfbuk740qz] {
    color: var(--color-text-muted, #B6D5E8);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 680px;
    margin: 0 auto;
}

/* ==========================================================================
   🌟 شريط أزرار الأقسام الأفقي (أزرار حرة عائمة مع سحب وتمرير)
   ========================================================================== */
.categories-nav-wrapper[b-nfbuk740qz] {
    width: 100%;
    margin: 0.8rem auto 0.6rem auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.5rem;
    scroll-behavior: smooth;
    display: flex;
    justify-content: flex-start;
    user-select: none;
    cursor: grab;
}

    .categories-nav-wrapper:active[b-nfbuk740qz] {
        cursor: grabbing;
    }

    .categories-nav-wrapper[b-nfbuk740qz]::-webkit-scrollbar {
        display: none;
    }

.categories-nav-track[b-nfbuk740qz] {
    display: inline-flex;
    gap: 0.65rem;
    padding: 0.2rem 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0 auto;
}

.category-tab-btn[b-nfbuk740qz] {
    position: relative;
    background: rgba(6, 19, 31, 0.92);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 12px;
    padding: 0.55rem 1.15rem;
    color: var(--color-text-muted, #B6D5E8);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

    .category-tab-btn:hover[b-nfbuk740qz] {
        border-color: rgba(24, 200, 248, 0.5);
        color: #FFFFFF;
        transform: translateY(-1px);
    }

    .category-tab-btn.active[b-nfbuk740qz] {
        color: #FFFFFF;
        background: rgba(11, 35, 65, 0.96);
        border-color: #18C8F8;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
        transform: scale(1.03);
    }

.cat-progress-fill[b-nfbuk740qz] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(24, 200, 248, 0.4) 0%, rgba(100, 232, 255, 0.85) 100%);
    border-radius: 10px;
    transition: width 0.3s ease;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.6);
}

.cat-btn-content[b-nfbuk740qz] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.cat-icon[b-nfbuk740qz] {
    font-size: 0.95rem;
    color: var(--color-accent-cyan, #18C8F8);
    filter: drop-shadow(0 0 5px rgba(24, 200, 248, 0.5));
}

.cat-count-badge[b-nfbuk740qz] {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 700;
}

.category-tab-btn.active .cat-count-badge[b-nfbuk740qz] {
    background: var(--color-accent-cyan, #18C8F8);
    color: var(--color-bg-dark, #06131F);
    font-weight: 800;
    border-color: transparent;
}

.category-description-box[b-nfbuk740qz] {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 1rem auto;
    color: var(--color-text-muted, #B6D5E8);
    font-size: 0.88rem;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(24, 200, 248, 0.12);
    padding: 0.55rem 1.2rem;
    border-radius: 12px;
}

/* ==========================================================================
   🌟 مسرح الـ 3D Coverflow المعزول طبقياً لمنع تقاطع حواف البطاقات
   ========================================================================== */
.coverflow-wrapper[b-nfbuk740qz] {
    position: relative;
    width: 100%;
    margin-top: 0.2rem;
}

.coverflow-stage[b-nfbuk740qz] {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    perspective: 1200px;
    perspective-origin: center center;
    outline: none;
}

    .coverflow-stage:active[b-nfbuk740qz] {
        cursor: grabbing;
    }

/* 🌟 المسار معزول طبقياً لمنع تقاطع أسطح المضلعات ثلاثية الأبعاد */
.coverflow-track[b-nfbuk740qz] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: flat !important;
    isolation: isolate !important; /* 👈 عزل طبقي كامل يمنع تقاطع أسطح وحواف البطاقات */
}

/* 🌟 بطاقة الكوفرفلو ثلاثية الأبعاد */
.coverflow-card[b-nfbuk740qz] {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--cf-card);
    height: 435px;
    background: linear-gradient(145deg, rgba(6, 19, 31, 0.98) 0%, rgba(11, 35, 65, 0.98) 100%);
    border: 1.5px solid rgba(24, 200, 248, 0.28);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    will-change: transform, opacity;
    transform-style: flat !important;
}

    .coverflow-card.is-active-card[b-nfbuk740qz] {
        border-color: rgba(24, 200, 248, 0.9);
        box-shadow: 0 0 30px rgba(24, 200, 248, 0.45), 0 25px 60px rgba(0, 0, 0, 0.9);
    }

.card-top-badges[b-nfbuk740qz] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.badge-code[b-nfbuk740qz] {
    background: rgba(4, 12, 20, 0.88);
    border: 1px solid var(--color-accent-cyan, #18C8F8);
    color: var(--color-accent-cyan, #18C8F8);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.card-media-viewport[b-nfbuk740qz] {
    width: 100%;
    height: 180px;
    background: #02060C;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

    .card-media-viewport.single-view .single-image-cover[b-nfbuk740qz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .card-media-viewport.dual-view .dual-images-split[b-nfbuk740qz] {
        display: flex;
        width: 100%;
        height: 100%;
        gap: 2px;
    }

        .card-media-viewport.dual-view .dual-images-split img[b-nfbuk740qz] {
            flex: 1;
            width: 50%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

/* ==========================================================================
   🌟 تنسيق الليبلات والمحتوى أسفل الصورة (Clean Cyber Labels Layout)
   ========================================================================== */
.card-body-content[b-nfbuk740qz] {
    padding: 0.95rem 1.1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 0.55rem;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
}

/* 1. صف الليبلات والشارات المنظم */
.card-meta-row[b-nfbuk740qz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.card-category-badge[b-nfbuk740qz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.35);
    border-radius: 6px;
    color: #18C8F8;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

    .card-category-badge i[b-nfbuk740qz] {
        font-size: 0.7rem;
    }

.card-pitch-badge[b-nfbuk740qz] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid #00D084;
    border-radius: 6px;
    color: #00FF9D;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 10px rgba(0, 208, 132, 0.25);
}

    .card-pitch-badge i[b-nfbuk740qz] {
        font-size: 0.68rem;
    }

/* 2. كتلة العناوين والوصف */
.card-text-block[b-nfbuk740qz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.card-item-title[b-nfbuk740qz] {
    font-size: 1.12rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-item-desc[b-nfbuk740qz] {
    color: var(--color-text-muted, #B6D5E8);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. زر الإجراء */
.card-actions-row[b-nfbuk740qz] {
    margin-top: auto;
    padding-top: 0.35rem;
    width: 100%;
}

.btn-details[b-nfbuk740qz] {
    width: 100%;
    background: linear-gradient(135deg, rgba(24, 200, 248, 0.14) 0%, rgba(0, 114, 255, 0.16) 100%);
    border: 1px solid rgba(24, 200, 248, 0.4);
    color: #FFFFFF;
    padding: 0.52rem 1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

    .btn-details:hover[b-nfbuk740qz] {
        background: #18C8F8;
        color: #06131F;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.6);
        border-color: #18C8F8;
        transform: translateY(-2px);
    }

/* أزرار التنقل الجانبية */
.coverflow-nav-btn[b-nfbuk740qz] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(6, 19, 31, 0.9);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 120;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

    .coverflow-nav-btn:hover[b-nfbuk740qz] {
        background: #18C8F8;
        color: #06131F;
        box-shadow: 0 0 18px rgba(24, 200, 248, 0.7);
    }

.prev-btn[b-nfbuk740qz] {
    right: 15px;
}

.next-btn[b-nfbuk740qz] {
    left: 15px;
}

/* ==========================================================================
   📱 التجاوب مع الجوال وشاشات 360px
   ========================================================================== */
@media (max-width: 768px) {
    .coverflow-stage[b-nfbuk740qz] {
        height: 410px;
    }

    .coverflow-card[b-nfbuk740qz] {
        height: 395px;
    }

    .card-media-viewport[b-nfbuk740qz] {
        height: 155px;
    }

    .coverflow-nav-btn[b-nfbuk740qz] {
        display: none !important;
    }

    .card-item-title[b-nfbuk740qz] {
        font-size: 1.02rem;
    }

    .card-item-desc[b-nfbuk740qz] {
        font-size: 0.76rem;
    }
}

@media (max-width: 640px) {
    .equipment-showcase-section[b-nfbuk740qz] {
        --cf-card: min(250px, 70vw) !important;
        padding: 2.5rem 0.5rem 3rem 0.5rem;
    }

    .coverflow-stage[b-nfbuk740qz] {
        height: 375px;
    }

    .coverflow-card[b-nfbuk740qz] {
        height: 360px;
        border-radius: 16px;
    }

    .card-media-viewport[b-nfbuk740qz] {
        height: 140px;
    }

    .coverflow-nav-btn[b-nfbuk740qz] {
        display: none !important;
    }

    .card-body-content[b-nfbuk740qz] {
        padding: 0.75rem 0.9rem;
        gap: 0.35rem;
    }

    .card-item-title[b-nfbuk740qz] {
        font-size: 0.95rem;
    }

    .card-item-desc[b-nfbuk740qz] {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .btn-details[b-nfbuk740qz] {
        padding: 0.45rem 0.8rem;
        font-size: 0.78rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/FeaturedProjects.razor.rz.scp.css */
/* ==========================================================================
   FEATURED PROJECTS - 360px MOBILE OPTIMIZED ANTI-CLIPPING HORIZON STAGE
   ========================================================================== */

.featured-projects-section[b-3t569m7x9w] {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4.2rem) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
}

.container[b-3t569m7x9w] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 0.5rem;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

/* توهج خلفي محيطي */
.glow-ambient-projects[b-3t569m7x9w] {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 60vw, 650px);
    height: clamp(240px, 35vw, 400px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.16) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

/* 1. رأس القسم */
.header-content[b-3t569m7x9w] {
    text-align: center;
    margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
    padding: 0 1rem;
}

.sub-heading[b-3t569m7x9w] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-3t569m7x9w] {
    font-size: clamp(1.4rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 0.75rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.section-subheading[b-3t569m7x9w] {
    font-size: clamp(0.82rem, 1.8vw, 1rem);
    color: #B6D5E8;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

.loading-state-box[b-3t569m7x9w] {
    text-align: center;
    padding: 4rem;
    color: #18C8F8;
}

/* 2. مسرح البطاقات */
.card-stack-stage[b-3t569m7x9w] {
    position: relative;
    width: 100%;
    height: clamp(280px, 44vw, 420px);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: pan-y;
    overflow: hidden;
}

    .card-stack-stage:active[b-3t569m7x9w] {
        cursor: grabbing;
    }

/* أزرار التنقل الجانبية (تعمل في شاشات الكمبيوتر) */
.stage-edge-cue[b-3t569m7x9w] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(6, 19, 31, 0.88);
    border: 1.5px solid rgba(24, 200, 248, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #18C8F8;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 150;
    transition: all 0.25s ease;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.35);
}

    .stage-edge-cue.left-edge[b-3t569m7x9w] {
        left: 12px;
    }

    .stage-edge-cue.right-edge[b-3t569m7x9w] {
        right: 12px;
    }

    .stage-edge-cue:hover[b-3t569m7x9w] {
        background: #18C8F8;
        color: #06131F;
        box-shadow: 0 0 24px rgba(24, 200, 248, 0.8);
        transform: translateY(-50%) scale(1.1);
    }

/* 🌟 حاوية المنظور معزولة كلياً لمنع تقاطع حواف البطاقات */
.cards-perspective-container[b-3t569m7x9w] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: center center;
    transform-style: flat !important;
    isolation: isolate !important; /* 👈 عزل طبقي كامل يمنع تقاطع أسطح المضلعات */
}

/* 🌟 بطاقة المشروع ثلاثية الأبعاد */
.stack-card-wrapper[b-3t569m7x9w] {
    position: absolute;
    width: min(450px, 80vw);
    height: clamp(265px, 35vw, 320px);
    border-radius: 20px;
    will-change: transform, opacity;
    cursor: pointer;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85);
    transition: box-shadow 0.35s ease;
    touch-action: pan-y;
    transform-style: flat !important;
}

.stack-card-inner[b-3t569m7x9w] {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(24, 200, 248, 0.28);
    background: #040C14;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border-color 0.35s ease;
}

.stack-card-wrapper.is-active .stack-card-inner[b-3t569m7x9w] {
    border-color: #18C8F8;
    box-shadow: 0 0 35px rgba(24, 200, 248, 0.45);
}

.card-media[b-3t569m7x9w] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #02060C;
}

.cover-media-element[b-3t569m7x9w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-bottom-vignette[b-3t569m7x9w] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(4, 12, 20, 0.98) 0%, rgba(4, 12, 20, 0.7) 40%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.category-pill[b-3t569m7x9w] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(4, 12, 20, 0.85);
    border: 1px solid #18C8F8;
    color: #18C8F8;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.card-play-icon-btn[b-3t569m7x9w] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(24, 200, 248, 0.25);
    border: 1.5px solid #18C8F8;
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(24, 200, 248, 0.5);
}

    .card-play-icon-btn:hover[b-3t569m7x9w] {
        background: #18C8F8;
        color: #06131F;
        transform: translate(-50%, -50%) scale(1.12);
    }

.card-info-content[b-3t569m7x9w] {
    position: relative;
    z-index: 5;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.client-tag[b-3t569m7x9w] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00FF9D;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.card-title[b-3t569m7x9w] {
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-desc[b-3t569m7x9w] {
    font-size: 0.76rem;
    color: #B6D5E8;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. شريط التنقل السفلي */
.stack-navigation-bar[b-3t569m7x9w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.dots-track[b-3t569m7x9w] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dot-indicator[b-3t569m7x9w] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
}

    .dot-indicator.active[b-3t569m7x9w] {
        width: 22px;
        border-radius: 10px;
        background: #18C8F8;
        box-shadow: 0 0 10px #18C8F8;
    }

/* ==========================================================================
   📱 التجاوب الدقيق والمحسوب لشاشات الجوال (360px فما فوق)
   ========================================================================== */
@media (max-width: 640px) {
    .featured-projects-section[b-3t569m7x9w] {
        padding: 2.5rem 0 2rem 0;
    }

    /* 🌟 إخفاء الأزرار العائمة على الجوال لمنح كامل عرض الشاشة للبطاقات والأجنحة */
    .stage-edge-cue[b-3t569m7x9w] {
        display: none !important;
    }

    .card-stack-stage[b-3t569m7x9w] {
        height: 275px;
    }

    /* 🌟 عرض البطاقة 240px على شاشة 360px يترك مساحة كافية 60px لظهور كل جناح */
    .stack-card-wrapper[b-3t569m7x9w] {
        width: min(240px, 68vw) !important;
        height: 225px !important;
        border-radius: 16px !important;
    }

    .stack-card-inner[b-3t569m7x9w] {
        border-radius: 16px !important;
    }

    .category-pill[b-3t569m7x9w] {
        top: 7px;
        right: 7px;
        padding: 0.15rem 0.45rem;
        font-size: 0.62rem;
    }

    .card-play-icon-btn[b-3t569m7x9w] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .card-info-content[b-3t569m7x9w] {
        padding: 0.6rem 0.75rem;
        gap: 0.12rem;
    }

    .client-tag[b-3t569m7x9w] {
        font-size: 0.65rem;
    }

    .card-title[b-3t569m7x9w] {
        font-size: 0.88rem;
        line-height: 1.2;
    }

    .card-desc[b-3t569m7x9w] {
        font-size: 0.68rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/FinalCallToAction.razor.rz.scp.css */
/* ==========================================================================
   FINAL CALL TO ACTION - 100% RESPONSIVE (360x740+ READY) WITH HEADER INSET
   ========================================================================== */

.final-cta-section[b-ozsmkhn1lt] {
    position: relative;
    padding: clamp(2rem, 5vw, 3.8rem) 0 clamp(1.8rem, 4vw, 2.6rem) 0;
    scroll-margin-top: 95px !important; /* 👈 يضمن توقف التمرير تحت الهيدر الزجاجي دائماً */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

    .final-cta-section .container[b-ozsmkhn1lt] {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        padding: 0 clamp(0.75rem, 3vw, 1.5rem);
        box-sizing: border-box;
    }

/* 🌟 البطاقة الزجاجية الفاخرة المدمجة */
.final-cta-card-glass[b-ozsmkhn1lt] {
    position: relative;
    background: rgba(6, 19, 31, 0.9);
    border: 1px solid rgba(24, 200, 248, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: clamp(18px, 4vw, 28px);
    padding: clamp(1.5rem, 4.5vw, 2.6rem) clamp(1rem, 3.8vw, 2.4rem);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(24, 200, 248, 0.25);
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

/* التوهجات الخلفية */
.cta-glow-orb-primary[b-ozsmkhn1lt] {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(24, 200, 248, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.cta-glow-orb-secondary[b-ozsmkhn1lt] {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 🌟 رأس القسم */
.cta-header-block[b-ozsmkhn1lt] {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-badge-pill[b-ozsmkhn1lt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid var(--color-accent-cyan, #18C8F8);
    color: var(--color-accent-cyan, #18C8F8);
    font-size: clamp(0.72rem, 2.2vw, 0.82rem);
    font-weight: 800;
    padding: 0.22rem 0.85rem;
    border-radius: 20px;
    margin-bottom: clamp(0.6rem, 1.8vw, 0.85rem);
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.25);
}

.cta-main-title[b-ozsmkhn1lt] {
    font-size: clamp(1.28rem, 4.2vw, 2.1rem);
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem) 0;
    line-height: 1.25;
    text-shadow: 0 0 20px rgba(100, 232, 255, 0.3);
}

.cta-main-desc[b-ozsmkhn1lt] {
    font-size: clamp(0.82rem, 2.4vw, 0.95rem);
    color: #B6D5E8;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}

/* 🌟 شبكة قنوات التواصل المباشرة */
.quick-channels-grid-2col[b-ozsmkhn1lt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 2vw, 1.2rem);
    width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* 🌟 بطاقة القناة */
.channel-card[b-ozsmkhn1lt] {
    position: relative;
    background: rgba(11, 35, 65, 0.6);
    border: 1px solid rgba(24, 200, 248, 0.25);
    border-radius: clamp(14px, 3vw, 18px);
    padding: clamp(0.8rem, 2.4vw, 1.15rem) clamp(0.85rem, 2.8vw, 1.3rem);
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 2vw, 1rem);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    overflow: hidden;
}

    .channel-card:hover[b-ozsmkhn1lt] {
        background: rgba(11, 35, 65, 0.9);
        border-color: var(--color-accent-cyan, #18C8F8);
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.4);
    }

.channel-card-glow[b-ozsmkhn1lt] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(24, 200, 248, 0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.channel-card:hover .channel-card-glow[b-ozsmkhn1lt] {
    opacity: 1;
}

/* صندوق الأيقونة */
.channel-icon-box[b-ozsmkhn1lt] {
    width: clamp(40px, 9vw, 48px);
    height: clamp(40px, 9vw, 48px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.email-bg[b-ozsmkhn1lt] {
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid #18C8F8;
    color: #18C8F8;
}

.proposal-bg[b-ozsmkhn1lt] {
    background: rgba(0, 255, 157, 0.15);
    border: 1px solid #00FF9D;
    color: #00FF9D;
}

.channel-card:hover .email-bg[b-ozsmkhn1lt] {
    background: #18C8F8;
    color: #06131F;
    box-shadow: 0 0 16px #18C8F8;
}

.channel-card:hover .proposal-bg[b-ozsmkhn1lt] {
    background: #00FF9D;
    color: #06131F;
    box-shadow: 0 0 16px #00FF9D;
}

/* نصوص البطاقة */
.channel-text-content[b-ozsmkhn1lt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0; /* 👈 يمنع تمدد النص خارج البطاقة في الشاشات الصغيرة */
    text-align: right;
}

[dir="ltr"] .channel-text-content[b-ozsmkhn1lt] {
    text-align: left;
}

.channel-sub-label[b-ozsmkhn1lt] {
    font-size: clamp(0.68rem, 1.9vw, 0.76rem);
    font-weight: 700;
    color: #8CAABF;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .channel-sub-label i[b-ozsmkhn1lt] {
        color: var(--color-accent-cyan, #18C8F8);
        font-size: 0.65rem;
    }

.channel-main-val[b-ozsmkhn1lt] {
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* سهم الإجراء */
.channel-action-arrow[b-ozsmkhn1lt] {
    width: clamp(28px, 6vw, 34px);
    height: clamp(28px, 6vw, 34px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #B6D5E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.75rem, 1.8vw, 0.88rem);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.channel-card:hover .channel-action-arrow[b-ozsmkhn1lt] {
    background: var(--color-accent-cyan, #18C8F8);
    border-color: var(--color-accent-cyan, #18C8F8);
    color: #06131F;
    transform: scale(1.08);
}

/* ==========================================================================
   📱 التجاوب مع شاشات الجوال والشاشات الصغيرة (360x740)
   ========================================================================== */
@media (max-width: 860px) {
    .quick-channels-grid-2col[b-ozsmkhn1lt] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .final-cta-section[b-ozsmkhn1lt] {
        padding: 1.8rem 0 1.5rem 0;
        scroll-margin-top: 85px !important;
    }

    .final-cta-card-glass[b-ozsmkhn1lt] {
        padding: 1.25rem 0.9rem;
        border-radius: 18px;
    }

    .channel-card[b-ozsmkhn1lt] {
        padding: 0.75rem 0.85rem;
        border-radius: 14px;
        gap: 0.7rem;
    }

    .channel-icon-box[b-ozsmkhn1lt] {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .channel-action-arrow[b-ozsmkhn1lt] {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
    }
}

@media (max-width: 375px) {
    .final-cta-card-glass[b-ozsmkhn1lt] {
        padding: 1.1rem 0.75rem;
    }

    .channel-main-val[b-ozsmkhn1lt] {
        font-size: 0.82rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/HeroSection.razor.rz.scp.css */


/* ==========================================================================
   HERO SECTION - UNIFIED CORPORATE HERO & WHO WE ARE (100% RESPONSIVE)
   ========================================================================== */

.hero-section[b-0rlsd5clxd] {
    min-height: 75vh;
    padding: calc(70px + 1.5rem) 1rem 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.hero-container[b-0rlsd5clxd] {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 🌟 كرة التوهج النيونية المحيطية */
.glow-backdrop[b-0rlsd5clxd] {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(340px, 50vw, 550px);
    height: clamp(340px, 50vw, 550px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.25) 0%, rgba(20, 127, 193, 0) 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
    animation: heroGlowPulse-b-0rlsd5clxd 7s ease-in-out infinite;
}

@keyframes heroGlowPulse-b-0rlsd5clxd {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 0.65;
    }
}

/* 1. الشعار الرئيسي */
.logo-wrapper[b-0rlsd5clxd] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
}

.hero-logo[b-0rlsd5clxd] {
    width: min(360px, 80vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(24, 200, 248, 0.4));
    transition: transform 0.4s ease, filter 0.4s ease;
    display: block;
}

    .hero-logo:hover[b-0rlsd5clxd] {
        transform: scale(1.02);
        filter: drop-shadow(0 0 30px rgba(100, 232, 255, 0.65));
    }

/* ==========================================================================
   🌟 شبكة WHO WE ARE المدمجة
   ========================================================================== */
.who-we-are-grid[b-0rlsd5clxd] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    margin-bottom: 2.8rem;
    box-sizing: border-box;
}

/* الجانب النصي */
.text-content-column[b-0rlsd5clxd] {
    display: flex;
    flex-direction: column;
    text-align: right;
}

[dir="ltr"] .text-content-column[b-0rlsd5clxd] {
    text-align: left;
}

.section-badge-pill[b-0rlsd5clxd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.35);
    border-radius: 20px;
    color: #18C8F8;
    font-size: clamp(0.74rem, 2vw, 0.84rem);
    font-weight: 700;
    margin-bottom: 1.2rem;
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.2);
    width: fit-content;
}

.icon-saudi[b-0rlsd5clxd] {
    color: #00FF9D;
}

.section-main-title[b-0rlsd5clxd] {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 1.2rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.desc-expandable-box[b-0rlsd5clxd] {
    margin: 0 0 1.8rem 0;
}

.section-main-desc[b-0rlsd5clxd] {
    font-family: 'Roboto Mono', 'Cairo', sans-serif;
    font-size: clamp(0.88rem, 1.8vw, 1.02rem);
    line-height: 1.75;
    color: #B6D5E8;
    margin: 0;
}

/* بطاقات الرؤية والرسالة */
.vision-mission-wrapper[b-0rlsd5clxd] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.vm-card[b-0rlsd5clxd] {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.4rem;
    background: rgba(6, 19, 31, 0.85);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.card-vision[b-0rlsd5clxd] {
    border: 1px solid rgba(24, 200, 248, 0.35);
}

    .card-vision:hover[b-0rlsd5clxd] {
        border-color: #18C8F8;
        box-shadow: 0 0 22px rgba(24, 200, 248, 0.35);
        transform: translateY(-2px);
    }

.card-mission[b-0rlsd5clxd] {
    border: 1px solid rgba(0, 208, 132, 0.35);
}

    .card-mission:hover[b-0rlsd5clxd] {
        border-color: #00FF9D;
        box-shadow: 0 0 22px rgba(0, 208, 132, 0.35);
        transform: translateY(-2px);
    }

.vm-label-row[b-0rlsd5clxd] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 0.35rem;
}

.vm-tag-pill[b-0rlsd5clxd] {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    letter-spacing: 0.6px;
    font-family: monospace;
    white-space: nowrap;
}

.tag-cyan[b-0rlsd5clxd] {
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid #18C8F8;
    color: #18C8F8;
}

.tag-green[b-0rlsd5clxd] {
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid #00D084;
    color: #00FF9D;
}

.vm-title-row[b-0rlsd5clxd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.vm-icon-ring[b-0rlsd5clxd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ring-cyan[b-0rlsd5clxd] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid #18C8F8;
    color: #18C8F8;
}

.ring-green[b-0rlsd5clxd] {
    background: rgba(0, 208, 132, 0.12);
    border: 1px solid #00D084;
    color: #00FF9D;
}

.vm-title[b-0rlsd5clxd] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.vm-desc-text[b-0rlsd5clxd] {
    font-size: 0.86rem;
    line-height: 1.65;
    color: #B6D5E8;
    margin: 0;
}

/* 2. الجانب البصري: بطاقة الـ 4 E's */
.visual-content-column[b-0rlsd5clxd] {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.elite-4e-card[b-0rlsd5clxd] {
    background: rgba(6, 19, 31, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 1.6rem 1.8rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    text-align: right;
}

[dir="ltr"] .elite-4e-card[b-0rlsd5clxd] {
    text-align: left;
}

.elite-4e-card:hover[b-0rlsd5clxd] {
    border-color: #18C8F8;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.25);
    transform: translateY(-3px);
}

.card-ambient-glow[b-0rlsd5clxd] {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 140px;
    height: 140px;
    background: rgba(24, 200, 248, 0.25);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
}

.card-header-badge[b-0rlsd5clxd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: #00FF9D;
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.25);
    padding: 0.2rem 0.65rem;
    border-radius: 14px;
    margin-bottom: 0.65rem;
    width: fit-content;
}

.four-e-headline[b-0rlsd5clxd] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.3rem 0;
}

.four-e-subheadline[b-0rlsd5clxd] {
    font-size: 0.82rem;
    color: #8CAABF;
    margin: 0 0 1.1rem 0;
}

.four-e-list[b-0rlsd5clxd] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.e-pillar-item[b-0rlsd5clxd] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(24, 200, 248, 0.15);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    transition: all 0.25s ease;
}

    .e-pillar-item:hover[b-0rlsd5clxd] {
        background: rgba(24, 200, 248, 0.06);
        border-color: #18C8F8;
        transform: translateX(-3px);
    }

[dir="ltr"] .e-pillar-item:hover[b-0rlsd5clxd] {
    transform: translateX(3px);
}

.e-badge[b-0rlsd5clxd] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.e-details[b-0rlsd5clxd] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.e-name[b-0rlsd5clxd] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
}

.e-desc[b-0rlsd5clxd] {
    font-size: 0.75rem;
    color: #B6D5E8;
    line-height: 1.35;
}

.slogan-footer-strip[b-0rlsd5clxd] {
    margin-top: 1.1rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: monospace;
    font-size: 0.72rem;
    color: #18C8F8;
    letter-spacing: 1px;
    text-align: center;
}

/* ==========================================================================
   🌟 أزرار الدعوة لاتخاذ إجراء (Hero Buttons)
   ========================================================================== */
.hero-buttons[b-0rlsd5clxd] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .hero-buttons .btn-primary[b-0rlsd5clxd] {
        background: rgba(6, 19, 31, 0.85);
        border: 1.5px solid rgba(24, 200, 248, 0.45);
        color: var(--color-accent-cyan, #18C8F8);
        font-weight: 800;
        font-size: 0.98rem;
        padding: 0.95rem 2.2rem;
        border-radius: 14px;
        cursor: pointer;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        font-family: inherit;
        box-sizing: border-box;
        min-height: 52px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

        .hero-buttons .btn-primary:hover[b-0rlsd5clxd] {
            background: rgba(24, 200, 248, 0.15);
            border-color: #18C8F8;
            color: #FFFFFF;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(24, 200, 248, 0.45);
        }

.btn-hero-unified[b-0rlsd5clxd] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.98rem;
    padding: 0.95rem 2.4rem;
    border-radius: 14px;
    border: 1px solid #18C8F8;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    box-sizing: border-box;
    min-height: 52px;
}

    .btn-hero-unified:hover[b-0rlsd5clxd] {
        transform: translateY(-3px);
        box-shadow: 0 0 40px rgba(24, 200, 248, 0.85);
    }

.action-arrow[b-0rlsd5clxd] {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-hero-unified:hover .action-arrow[b-0rlsd5clxd] {
    transform: translateX(-4px);
}

[dir="ltr"] .btn-hero-unified:hover .action-arrow[b-0rlsd5clxd] {
    transform: translateX(4px);
}

/* ==========================================================================
   📱 التجاوب مع الجوال والشاشات المتوسطة
   ========================================================================== */
@media (max-width: 992px) {
    .who-we-are-grid[b-0rlsd5clxd] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hero-section[b-0rlsd5clxd] {
        padding: calc(70px + 1.2rem) 1rem 3.5rem 1rem;
    }

    .hero-buttons[b-0rlsd5clxd] {
        gap: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-section[b-0rlsd5clxd] {
        padding: calc(70px + 0.8rem) 0.85rem 3rem 0.85rem;
    }

    .hero-buttons[b-0rlsd5clxd] {
        flex-direction: column;
        width: 100%;
        gap: 0.8rem;
    }

        .hero-buttons .btn-primary[b-0rlsd5clxd],
        .btn-hero-unified[b-0rlsd5clxd] {
            width: 100%;
            justify-content: center;
            padding: 0.9rem 1.2rem;
            font-size: 0.92rem;
            min-height: 50px;
        }
}
/* _content/EliteTechWeb.Web/Components/Sections/MetricsImpact.razor.rz.scp.css */
/* ==========================================================================
   METRICS & IMPACT SECTION - ASCENDING COUNTERS & NEON GLOW (100% RESPONSIVE)
   ========================================================================== */

.metrics-impact-section[b-x1n3xb7l7g] {
    padding: 4rem 1rem;
    background-color: transparent;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-x1n3xb7l7g] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* توهج خلفي محيطي */
.glow-ambient-metrics[b-x1n3xb7l7g] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 650px);
    height: clamp(200px, 30vw, 350px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.14) 0%, transparent 70%);
    filter: blur(85px);
    pointer-events: none;
    z-index: 1;
}

/* شبكة الإحصائيات */
.metrics-container[b-x1n3xb7l7g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

/* بطاقة الإحصائية الزجاجية */
.metric-item[b-x1n3xb7l7g] {
    background: rgba(6, 19, 31, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    padding: 2rem 1.2rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
}

    .metric-item:hover[b-x1n3xb7l7g] {
        border-color: #18C8F8;
        background: rgba(11, 35, 65, 0.9);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.35);
        transform: translateY(-5px);
    }

/* أيقونة الإحصائية */
.metric-icon-wrap[b-x1n3xb7l7g] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.2);
    transition: all 0.3s ease;
}

.metric-item:hover .metric-icon-wrap[b-x1n3xb7l7g] {
    background: #18C8F8;
    border-color: #18C8F8;
    box-shadow: 0 0 18px rgba(24, 200, 248, 0.6);
}

.metric-icon[b-x1n3xb7l7g] {
    font-size: 1.15rem;
    color: #18C8F8;
    transition: color 0.3s ease;
}

.metric-item:hover .metric-icon[b-x1n3xb7l7g] {
    color: #06131F;
}

/* الرقم النيوني الصاعد */
.metric-number-wrapper[b-x1n3xb7l7g] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    direction: ltr; /* لضمان ظهور البادئة واللاحقة في الموضع الرياضي السليم */
}

.metric-prefix[b-x1n3xb7l7g] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 900;
    color: #18C8F8;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.6));
}

.metric-number[b-x1n3xb7l7g] {
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #18C8F8 50%, #00FF9D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(24, 200, 248, 0.45));
    font-family: monospace, sans-serif;
    display: inline-block;
}

.metric-suffix[b-x1n3xb7l7g] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 900;
    color: #00FF9D;
    filter: drop-shadow(0 0 8px #00FF9D);
}

.metric-label[b-x1n3xb7l7g] {
    font-size: clamp(0.78rem, 1.4vw, 0.88rem);
    font-weight: 700;
    color: #B6D5E8;
    line-height: 1.45;
}

/* ==========================================================================
   📱 التجاوب مع مختلف الشاشات (Tablet & Mobile 360x740)
   ========================================================================== */
@media (max-width: 992px) {
    .metrics-container[b-x1n3xb7l7g] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 576px) {
    .metrics-impact-section[b-x1n3xb7l7g] {
        padding: 2.8rem 0.75rem;
    }

    /* شبكة 2x2 في الجوال */
    .metrics-container[b-x1n3xb7l7g] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .metric-item[b-x1n3xb7l7g] {
        padding: 1.2rem 0.65rem;
        border-radius: 14px;
    }

    .metric-icon-wrap[b-x1n3xb7l7g] {
        width: 36px;
        height: 36px;
        margin-bottom: 0.5rem;
    }

    .metric-icon[b-x1n3xb7l7g] {
        font-size: 0.95rem;
    }

    .metric-prefix[b-x1n3xb7l7g] {
        font-size: 1.3rem;
    }

    .metric-number[b-x1n3xb7l7g] {
        font-size: 1.85rem;
    }

    .metric-suffix[b-x1n3xb7l7g] {
        font-size: 1.3rem;
    }

    .metric-label[b-x1n3xb7l7g] {
        font-size: 0.74rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/Modals/EquipmentDetailsModal.razor.rz.scp.css */
/* ==========================================================================
   EQUIPMENT DETAILS MODAL - ULTRA-CINEMATIC LASER PORTAL (0.85s / 0.45s)
   ========================================================================== */

.modal-overlay[b-mr6jklfedo] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: radial-gradient(circle at center, rgba(11, 35, 65, 0.94) 0%, rgba(2, 6, 12, 0.98) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    direction: rtl;
    box-sizing: border-box !important;
    outline: none;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain !important;
    animation: eqmOverlayIn-b-mr6jklfedo 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, backdrop-filter;
}

@keyframes eqmOverlayIn-b-mr6jklfedo {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
    }
}

.modal-overlay.is-closing[b-mr6jklfedo] {
    animation: eqmOverlayOut-b-mr6jklfedo 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes eqmOverlayOut-b-mr6jklfedo {
    0% {
        opacity: 1;
        backdrop-filter: blur(28px);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

.modal-card-stage-wrapper[b-mr6jklfedo] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(560px, calc(100vw - 20px));
    height: min(860px, calc(100vh - 24px));
    max-height: calc(100dvh - 24px);
    perspective: 1400px;
    perspective-origin: center center;
}

/* 🌟 الشعاع الليزري المتوهج ثلاثي الطبقات */
.laser-beam-blade[b-mr6jklfedo] {
    position: absolute;
    left: -3%;
    right: -3%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(24, 200, 248, 0.4) 15%, #18C8F8 35%, #FFFFFF 50%, #00FF9D 65%, rgba(24, 200, 248, 0.4) 85%, transparent 100%);
    box-shadow: 0 0 16px #FFFFFF, 0 0 35px #18C8F8, 0 0 65px #00FF9D;
    pointer-events: none;
    z-index: 30;
    will-change: top, opacity, transform;
}

    .laser-beam-blade[b-mr6jklfedo]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 8%;
        right: 8%;
        height: 15px;
        background: radial-gradient(ellipse at center, rgba(100, 232, 255, 0.75) 0%, rgba(24, 200, 248, 0.35) 50%, transparent 80%);
        filter: blur(4px);
        pointer-events: none;
    }

    .laser-beam-blade.beam-top[b-mr6jklfedo] {
        top: 50%;
        transform: translateY(-50%);
        animation: eqmBladeUpCinema-b-mr6jklfedo 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .laser-beam-blade.beam-bottom[b-mr6jklfedo] {
        top: 50%;
        transform: translateY(-50%);
        animation: eqmBladeDownCinema-b-mr6jklfedo 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

@keyframes eqmBladeUpCinema-b-mr6jklfedo {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 32%;
        opacity: 0.95;
    }

    82% {
        top: 0%;
        opacity: 0.85;
    }

    100% {
        top: -8px;
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

@keyframes eqmBladeDownCinema-b-mr6jklfedo {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 68%;
        opacity: 0.95;
    }

    82% {
        top: 100%;
        opacity: 0.85;
    }

    100% {
        top: calc(100% + 8px);
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

.laser-beam-blade.beam-top.is-closing[b-mr6jklfedo] {
    animation: eqmBladeCloseUpCinema-b-mr6jklfedo 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.laser-beam-blade.beam-bottom.is-closing[b-mr6jklfedo] {
    animation: eqmBladeCloseDownCinema-b-mr6jklfedo 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes eqmBladeCloseUpCinema-b-mr6jklfedo {
    0% {
        top: -8px;
        opacity: 0;
    }

    25% {
        top: 0%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

@keyframes eqmBladeCloseDownCinema-b-mr6jklfedo {
    0% {
        top: calc(100% + 8px);
        opacity: 0;
    }

    25% {
        top: 100%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

/* 🌟 بطاقة المودال */
.modal-card.equipment-details-modal[b-mr6jklfedo] {
    width: 100% !important;
    height: 100% !important;
    background: #06131F !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 20px !important;
    padding: 1.15rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.35) !important;
    transform-origin: center center;
    clip-path: inset(50% 0 50% 0);
    animation: eqmCardEmergeCinema-b-mr6jklfedo 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter, clip-path;
}

@keyframes eqmCardEmergeCinema-b-mr6jklfedo {
    0%, 20% {
        opacity: 0;
        transform: perspective(1400px) scale(0.92) translateY(24px) rotateX(3deg);
        filter: brightness(2) blur(6px);
        clip-path: inset(50% 0 50% 0);
    }

    38% {
        opacity: 0.92;
        filter: brightness(1.4) blur(2px);
    }

    75% {
        clip-path: inset(0% 0 0% 0);
        filter: brightness(1.1) blur(0px);
    }

    100% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg);
        filter: brightness(1) blur(0px);
        clip-path: inset(0% 0 0% 0);
    }
}

.modal-card.equipment-details-modal.is-closing[b-mr6jklfedo] {
    animation: eqmCardCollapseCinema-b-mr6jklfedo 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes eqmCardCollapseCinema-b-mr6jklfedo {
    0% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0);
        clip-path: inset(0% 0 0% 0);
    }

    60% {
        opacity: 0.5;
        transform: perspective(1400px) scale(0.96) translateY(-10px);
        filter: brightness(1.4);
    }

    100% {
        opacity: 0;
        transform: perspective(1400px) scale(0.90) translateY(-22px);
        clip-path: inset(50% 0 50% 0);
    }
}

.modal-fixed-media-container[b-mr6jklfedo] {
    width: 100%;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
}

.modal-media-viewport[b-mr6jklfedo] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #02060C;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(24, 200, 248, 0.3);
}

.single-image-element[b-mr6jklfedo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dual-images-frame[b-mr6jklfedo] {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
}

    .dual-images-frame img[b-mr6jklfedo] {
        flex: 1;
        width: 50%;
        height: 100%;
        object-fit: cover;
    }

.modal-body-scrollable[b-mr6jklfedo] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 2;
}

    .modal-body-scrollable[b-mr6jklfedo]::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-scrollable[b-mr6jklfedo]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.35);
        border-radius: 4px;
    }

.equipment-meta-row[b-mr6jklfedo] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.modal-cat-badge[b-mr6jklfedo] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid #18C8F8;
    color: #18C8F8;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.modal-code-badge[b-mr6jklfedo] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #B6D5E8;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

.modal-pitch-badge[b-mr6jklfedo] {
    background: rgba(0, 208, 132, 0.15);
    border: 1px solid #00D084;
    color: #00FF9D;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.modal-title-block[b-mr6jklfedo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.equipment-main-title[b-mr6jklfedo] {
    font-size: clamp(1.15rem, 2.8vw, 1.4rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.25;
}

.equipment-sub-title[b-mr6jklfedo] {
    font-size: 0.8rem;
    color: #8CAABF;
    font-weight: 600;
}

.feature-chips-wrap[b-mr6jklfedo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip-item[b-mr6jklfedo] {
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    color: #B6D5E8;
    font-size: 0.74rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .chip-item i[b-mr6jklfedo] {
        color: #18C8F8;
        font-size: 0.68rem;
    }

.short-desc-highlight[b-mr6jklfedo] {
    background: rgba(24, 200, 248, 0.06);
    border-inline-start: 3px solid #18C8F8;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
}

    .short-desc-highlight p[b-mr6jklfedo] {
        margin: 0;
        font-size: 0.84rem;
        color: #E0F2FE;
        line-height: 1.55;
    }

.details-section[b-mr6jklfedo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.section-heading-sm[b-mr6jklfedo] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #18C8F8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.full-desc-card[b-mr6jklfedo] {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.8rem;
    border-radius: 10px;
}

    .full-desc-card p[b-mr6jklfedo] {
        margin: 0;
        font-size: 0.85rem;
        color: #B6D5E8;
        line-height: 1.6;
    }

.specs-table-box[b-mr6jklfedo] {
    background: rgba(4, 12, 20, 0.7);
    border: 1px solid rgba(24, 200, 248, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.compact-specs-table[b-mr6jklfedo] {
    width: 100%;
    border-collapse: collapse;
}

    .compact-specs-table td[b-mr6jklfedo] {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

.spec-label[b-mr6jklfedo] {
    color: #8CAABF;
    font-weight: 700;
    width: 40%;
}

.spec-val[b-mr6jklfedo] {
    color: #FFFFFF;
    font-weight: 600;
}

.bullets-check-list[b-mr6jklfedo] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

    .bullets-check-list li[b-mr6jklfedo] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.82rem;
        color: #FFFFFF;
    }

        .bullets-check-list li i[b-mr6jklfedo] {
            color: #00FF9D;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

.modal-footer[b-mr6jklfedo] {
    flex-shrink: 0;
    width: 100%;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
}

.btn-cta.btn-whatsapp-order[b-mr6jklfedo] {
    width: 100%;
    background: linear-gradient(135deg, #00D084 0%, #008A57 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(0, 208, 132, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-cancel[b-mr6jklfedo] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #B6D5E8;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 540px) {
    .modal-card.equipment-details-modal[b-mr6jklfedo] {
        padding: 1rem 0.9rem !important;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/Modals/ProjectReelsModal.razor.rz.scp.css */
/* ==========================================================================
   PROJECT REELS MODAL - ULTRA-CINEMATIC LASER PORTAL (0.85s / 0.45s)
   ========================================================================== */

/* 1. 🌟 خلفية التعتيم الشاملة وقفل التمرير مع حركة الدخول والخروج السينمائية */
.reels-modal-overlay[b-8hqjkn0w4s] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: radial-gradient(circle at center, rgba(11, 35, 65, 0.94) 0%, rgba(2, 6, 12, 0.98) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    direction: rtl;
    outline: none;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain !important;
    animation: reelsOverlayIn-b-8hqjkn0w4s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, backdrop-filter;
    cursor: pointer;
}

@keyframes reelsOverlayIn-b-8hqjkn0w4s {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
    }
}

.reels-modal-overlay.is-closing[b-8hqjkn0w4s] {
    animation: reelsOverlayOut-b-8hqjkn0w4s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes reelsOverlayOut-b-8hqjkn0w4s {
    0% {
        opacity: 1;
        backdrop-filter: blur(28px);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* 2. 🌟 حاوية المنظور ثلاثي الأبعاد المحددة بأبعاد 9:16 السينمائية */
.reels-card-stage-wrapper[b-8hqjkn0w4s] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(440px, calc(100vw - 24px));
    height: min(840px, calc(100vh - 30px));
    max-height: calc(100dvh - 30px);
    aspect-ratio: 9 / 16;
    perspective: 1400px;
    perspective-origin: center center;
}

/* 🌟 الشعاع الليزري المتوهج ثلاثي الطبقات البصرية (Cyan / White / Neon Green) */
.laser-beam-blade[b-8hqjkn0w4s] {
    position: absolute;
    left: -4%;
    right: -4%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(24, 200, 248, 0.4) 15%, #18C8F8 35%, #FFFFFF 50%, #00FF9D 65%, rgba(24, 200, 248, 0.4) 85%, transparent 100%);
    box-shadow: 0 0 16px #FFFFFF, 0 0 35px #18C8F8, 0 0 65px #00FF9D;
    pointer-events: none;
    z-index: 30;
    will-change: top, opacity, transform;
}

    .laser-beam-blade[b-8hqjkn0w4s]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 8%;
        right: 8%;
        height: 15px;
        background: radial-gradient(ellipse at center, rgba(100, 232, 255, 0.75) 0%, rgba(24, 200, 248, 0.35) 50%, transparent 80%);
        filter: blur(4px);
        pointer-events: none;
    }

    .laser-beam-blade.beam-top[b-8hqjkn0w4s] {
        top: 50%;
        transform: translateY(-50%);
        animation: reelsBladeUpCinema-b-8hqjkn0w4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .laser-beam-blade.beam-bottom[b-8hqjkn0w4s] {
        top: 50%;
        transform: translateY(-50%);
        animation: reelsBladeDownCinema-b-8hqjkn0w4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

@keyframes reelsBladeUpCinema-b-8hqjkn0w4s {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 32%;
        opacity: 0.95;
    }

    82% {
        top: 0%;
        opacity: 0.85;
    }

    100% {
        top: -8px;
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

@keyframes reelsBladeDownCinema-b-8hqjkn0w4s {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 68%;
        opacity: 0.95;
    }

    82% {
        top: 100%;
        opacity: 0.85;
    }

    100% {
        top: calc(100% + 8px);
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

.laser-beam-blade.beam-top.is-closing[b-8hqjkn0w4s] {
    animation: reelsBladeCloseUpCinema-b-8hqjkn0w4s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.laser-beam-blade.beam-bottom.is-closing[b-8hqjkn0w4s] {
    animation: reelsBladeCloseDownCinema-b-8hqjkn0w4s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes reelsBladeCloseUpCinema-b-8hqjkn0w4s {
    0% {
        top: -8px;
        opacity: 0;
    }

    25% {
        top: 0%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

@keyframes reelsBladeCloseDownCinema-b-8hqjkn0w4s {
    0% {
        top: calc(100% + 8px);
        opacity: 0;
    }

    25% {
        top: 100%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

/* 3. 🌟 بطاقة ومسرح الريلز بالتجسيد الهولوجرافي المباشر (0.85s / 0.45s) */
.reels-fixed-stage[b-8hqjkn0w4s] {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
    border: 1.5px solid rgba(24, 200, 248, 0.45) !important;
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(24, 200, 248, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    cursor: default;
    z-index: 2;
    transform-origin: center center;
    clip-path: inset(50% 0 50% 0);
    animation: reelsCardEmergeCinema-b-8hqjkn0w4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter, clip-path;
}

@keyframes reelsCardEmergeCinema-b-8hqjkn0w4s {
    0%, 20% {
        opacity: 0;
        transform: perspective(1400px) scale(0.92) translateY(24px) rotateX(3deg);
        filter: brightness(2) blur(6px);
        clip-path: inset(50% 0 50% 0);
    }

    38% {
        opacity: 0.92;
        filter: brightness(1.4) blur(2px);
    }

    75% {
        clip-path: inset(0% 0 0% 0);
        filter: brightness(1.1) blur(0px);
    }

    100% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg);
        filter: brightness(1) blur(0px);
        clip-path: inset(0% 0 0% 0);
    }
}

.reels-fixed-stage.is-closing[b-8hqjkn0w4s] {
    animation: reelsCardCollapseCinema-b-8hqjkn0w4s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes reelsCardCollapseCinema-b-8hqjkn0w4s {
    0% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg);
        filter: brightness(1);
        clip-path: inset(0% 0 0% 0);
    }

    45% {
        opacity: 0.9;
        filter: brightness(2.5) blur(3px);
    }

    100% {
        opacity: 0;
        transform: perspective(1400px) scale(0.94) translateY(20px) rotateX(3deg);
        filter: brightness(4) blur(8px);
        clip-path: inset(50% 0 50% 0);
    }
}

/* 4. 🌟 زر الإغلاق العلوي الوحيد والأنيق */
.btn-top-close-reel[b-8hqjkn0w4s] {
    position: absolute;
    top: 16px;
    left: 14px;
    z-index: 70;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(2, 6, 12, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

    .btn-top-close-reel:hover[b-8hqjkn0w4s] {
        background: #FF4D4D !important;
        border-color: #FF4D4D !important;
        color: #FFFFFF !important;
        transform: scale(1.12);
        box-shadow: 0 0 16px rgba(255, 77, 77, 0.6);
    }

/* 5. 🌟 شريط الستوريز العلوي */
.reels-top-stories-bar[b-8hqjkn0w4s] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 10px 58px 10px 14px; /* مسافة أمان لزر الإغلاق */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    pointer-events: none;
}

.reels-stories-progress[b-8hqjkn0w4s] {
    display: flex;
    gap: 4px;
    width: 100%;
}

.story-seg-track[b-8hqjkn0w4s] {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
}

.story-seg-fill[b-8hqjkn0w4s] {
    height: 100%;
    width: 0%;
    background: #18C8F8;
    transition: width 0.1s linear;
}

    .story-seg-fill.completed[b-8hqjkn0w4s] {
        width: 100% !important;
        background: #FFFFFF !important;
    }

    .story-seg-fill.active-seg[b-8hqjkn0w4s] {
        background: #18C8F8;
        box-shadow: 0 0 8px #18C8F8;
    }

/* 6. 🌟 مسار الانتقال الرأسي للريلز */
.reels-vertical-viewport[b-8hqjkn0w4s] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
}

.reels-vertical-track[b-8hqjkn0w4s] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.reel-slide-card[b-8hqjkn0w4s] {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.reel-media-viewport[b-8hqjkn0w4s] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    position: relative;
    cursor: pointer;
}

.reel-full-video[b-8hqjkn0w4s],
.reel-full-image[b-8hqjkn0w4s] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    display: block;
    margin: auto;
    pointer-events: none;
}

.reel-pause-watermark[b-8hqjkn0w4s] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(6, 19, 31, 0.75);
    border: 2px solid rgba(24, 200, 248, 0.8);
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.6);
    color: #18C8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    pointer-events: none;
    z-index: 50;
    animation: pulseWatermark-b-8hqjkn0w4s 1.5s infinite;
}

@keyframes pulseWatermark-b-8hqjkn0w4s {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.reels-kinetic-swipe-indicator[b-8hqjkn0w4s] {
    position: absolute;
    bottom: 125px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 55;
}

.swipe-kinetic-orb[b-8hqjkn0w4s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: swipeBounce-b-8hqjkn0w4s 1.6s infinite ease-in-out;
}

.swipe-arrow-first[b-8hqjkn0w4s],
.swipe-arrow-second[b-8hqjkn0w4s] {
    color: #18C8F8;
    font-size: 1rem;
    text-shadow: 0 0 10px #18C8F8;
}

.swipe-arrow-second[b-8hqjkn0w4s] {
    margin-top: -6px;
    opacity: 0.5;
}

@keyframes swipeBounce-b-8hqjkn0w4s {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.swipe-hint-text[b-8hqjkn0w4s] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* 7. 🌟 لوحة التحكم والبيانات السفلية */
.reel-bottom-master-deck[b-8hqjkn0w4s] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 2.2rem 1rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 65%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: auto;
}

.deck-meta-badges[b-8hqjkn0w4s] {
    display: flex;
    align-items: center;
}

.reel-category-badge[b-8hqjkn0w4s] {
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid rgba(24, 200, 248, 0.4);
    color: #18C8F8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    backdrop-filter: blur(4px);
}

.deck-title-block[b-8hqjkn0w4s] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reel-project-title[b-8hqjkn0w4s] {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.reel-client-name[b-8hqjkn0w4s] {
    color: #B6D5E8;
    font-size: 0.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .reel-client-name i[b-8hqjkn0w4s] {
        color: #18C8F8;
        font-size: 0.75rem;
    }

.reel-timeline-container[b-8hqjkn0w4s] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
}

.reel-timeline-slider[b-8hqjkn0w4s] {
    width: 100%;
    accent-color: #18C8F8;
    height: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.reel-time-labels[b-8hqjkn0w4s] {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #8CAABF;
    font-family: monospace;
    direction: ltr;
}

.deck-bottom-actions-bar[b-8hqjkn0w4s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.2rem;
}

.deck-circular-buttons-group[b-8hqjkn0w4s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-deck-circular[b-8hqjkn0w4s] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(6, 19, 31, 0.75);
    border: 1px solid rgba(24, 200, 248, 0.35);
    color: #FFFFFF;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn-deck-circular:hover[b-8hqjkn0w4s] {
        background: rgba(24, 200, 248, 0.25);
        border-color: #18C8F8;
        color: #18C8F8;
        transform: scale(1.08);
    }

.badge-media-counter[b-8hqjkn0w4s] {
    background: rgba(6, 19, 31, 0.75);
    border: 1px solid rgba(24, 200, 248, 0.3);
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #B6D5E8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .badge-media-counter i[b-8hqjkn0w4s] {
        color: #18C8F8;
    }

/* 8. 🌟 التجاوب مع شاشات الهواتف المحمولة */
@media (max-width: 500px) {
    .reels-modal-overlay[b-8hqjkn0w4s] {
        padding: 0 !important;
    }

    .reels-card-stage-wrapper[b-8hqjkn0w4s] {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        aspect-ratio: auto;
    }

    .reels-fixed-stage[b-8hqjkn0w4s] {
        border-radius: 0 !important;
        border: none !important;
    }

    .btn-top-close-reel[b-8hqjkn0w4s] {
        top: calc(env(safe-area-inset-top, 14px) + 8px);
        left: 12px;
    }

    .reels-top-stories-bar[b-8hqjkn0w4s] {
        top: env(safe-area-inset-top, 0px);
    }

    .reel-bottom-master-deck[b-8hqjkn0w4s] {
        padding-bottom: calc(env(safe-area-inset-bottom, 12px) + 8px);
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/Modals/ProposalRequestModal.razor.rz.scp.css */
/* ==========================================================================
   PROPOSAL REQUEST MODAL - ULTRA-CINEMATIC LASER PORTAL (0.85s / 0.45s)
   ========================================================================== */

.modal-overlay[b-yxq4wdkqt3] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: radial-gradient(circle at center, rgba(11, 35, 65, 0.94) 0%, rgba(2, 6, 12, 0.98) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    direction: rtl;
    box-sizing: border-box !important;
    outline: none;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain !important;
    animation: prmOverlayIn-b-yxq4wdkqt3 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, backdrop-filter;
}

@keyframes prmOverlayIn-b-yxq4wdkqt3 {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
    }
}

.modal-overlay.is-closing[b-yxq4wdkqt3] {
    animation: prmOverlayOut-b-yxq4wdkqt3 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes prmOverlayOut-b-yxq4wdkqt3 {
    0% {
        opacity: 1;
        backdrop-filter: blur(28px);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

.modal-card-stage-wrapper[b-yxq4wdkqt3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(680px, calc(100vw - 20px));
    height: min(860px, calc(100vh - 24px));
    max-height: calc(100dvh - 24px);
    perspective: 1400px;
    perspective-origin: center center;
}

/* 🌟 الشعاع الليزري المتوهج ثلاثي الطبقات */
.laser-beam-blade[b-yxq4wdkqt3] {
    position: absolute;
    left: -3%;
    right: -3%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(24, 200, 248, 0.4) 15%, #18C8F8 35%, #FFFFFF 50%, #00FF9D 65%, rgba(24, 200, 248, 0.4) 85%, transparent 100%);
    box-shadow: 0 0 16px #FFFFFF, 0 0 35px #18C8F8, 0 0 65px #00FF9D;
    pointer-events: none;
    z-index: 30;
    will-change: top, opacity, transform;
}

    .laser-beam-blade[b-yxq4wdkqt3]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 8%;
        right: 8%;
        height: 15px;
        background: radial-gradient(ellipse at center, rgba(100, 232, 255, 0.75) 0%, rgba(24, 200, 248, 0.35) 50%, transparent 80%);
        filter: blur(4px);
        pointer-events: none;
    }

    .laser-beam-blade.beam-top[b-yxq4wdkqt3] {
        top: 50%;
        transform: translateY(-50%);
        animation: prmBladeUpCinema-b-yxq4wdkqt3 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .laser-beam-blade.beam-bottom[b-yxq4wdkqt3] {
        top: 50%;
        transform: translateY(-50%);
        animation: prmBladeDownCinema-b-yxq4wdkqt3 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

@keyframes prmBladeUpCinema-b-yxq4wdkqt3 {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 32%;
        opacity: 0.95;
    }

    82% {
        top: 0%;
        opacity: 0.85;
    }

    100% {
        top: -8px;
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

@keyframes prmBladeDownCinema-b-yxq4wdkqt3 {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 68%;
        opacity: 0.95;
    }

    82% {
        top: 100%;
        opacity: 0.85;
    }

    100% {
        top: calc(100% + 8px);
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

.laser-beam-blade.beam-top.is-closing[b-yxq4wdkqt3] {
    animation: prmBladeCloseUpCinema-b-yxq4wdkqt3 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.laser-beam-blade.beam-bottom.is-closing[b-yxq4wdkqt3] {
    animation: prmBladeCloseDownCinema-b-yxq4wdkqt3 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes prmBladeCloseUpCinema-b-yxq4wdkqt3 {
    0% {
        top: -8px;
        opacity: 0;
    }

    25% {
        top: 0%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

@keyframes prmBladeCloseDownCinema-b-yxq4wdkqt3 {
    0% {
        top: calc(100% + 8px);
        opacity: 0;
    }

    25% {
        top: 100%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

/* 🌟 بطاقة المودال بتجسد هولوجرافي سينمائي (0.85s) */
.modal-card.proposal-details-modal[b-yxq4wdkqt3] {
    width: 100% !important;
    height: 100% !important;
    background: #06131F !important;
    border: 1.5px solid rgba(24, 200, 248, 0.4) !important;
    border-radius: 22px !important;
    padding: 1.4rem 1.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 35px rgba(24, 200, 248, 0.35) !important;
    transform-origin: center center;
    clip-path: inset(50% 0 50% 0);
    animation: prmCardEmergeCinema-b-yxq4wdkqt3 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter, clip-path;
}

@keyframes prmCardEmergeCinema-b-yxq4wdkqt3 {
    0%, 20% {
        opacity: 0;
        transform: perspective(1400px) scale(0.92) translateY(24px) rotateX(3deg);
        filter: brightness(2) blur(6px);
        clip-path: inset(50% 0 50% 0);
    }

    38% {
        opacity: 0.92;
        filter: brightness(1.4) blur(2px);
    }

    75% {
        clip-path: inset(0% 0 0% 0);
        filter: brightness(1.1) blur(0px);
    }

    100% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg);
        filter: brightness(1) blur(0px);
        clip-path: inset(0% 0 0% 0);
    }
}

.modal-card.proposal-details-modal.is-closing[b-yxq4wdkqt3] {
    animation: prmCardCollapseCinema-b-yxq4wdkqt3 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes prmCardCollapseCinema-b-yxq4wdkqt3 {
    0% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0);
        clip-path: inset(0% 0 0% 0);
    }

    60% {
        opacity: 0.5;
        transform: perspective(1400px) scale(0.96) translateY(-10px);
        filter: brightness(1.4);
    }

    100% {
        opacity: 0;
        transform: perspective(1400px) scale(0.90) translateY(-22px);
        clip-path: inset(50% 0 50% 0);
    }
}

.modal-header[b-yxq4wdkqt3] {
    flex-shrink: 0;
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: right;
    position: relative;
    z-index: 2;
}

[dir="ltr"] .modal-header[b-yxq4wdkqt3] {
    text-align: left;
}

.header-icon-badge[b-yxq4wdkqt3] {
    width: 44px;
    height: 44px;
    background: rgba(24, 200, 248, 0.12);
    border: 1.5px solid #18C8F8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18C8F8;
    font-size: 1.25rem;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.25);
    flex-shrink: 0;
}

.header-titles[b-yxq4wdkqt3] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.modal-title[b-yxq4wdkqt3] {
    font-size: clamp(1.2rem, 3.2vw, 1.45rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.25;
}

.modal-tagline[b-yxq4wdkqt3] {
    font-size: 0.8rem;
    color: #00FF9D;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-close-modal[b-yxq4wdkqt3] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #B6D5E8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .btn-close-modal:hover[b-yxq4wdkqt3] {
        background: #FF4D4D;
        color: #FFFFFF;
        border-color: #FF4D4D;
    }

.modal-body-scrollable[b-yxq4wdkqt3] {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 0.2rem 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    text-align: right;
    position: relative;
    z-index: 2;
}

[dir="ltr"] .modal-body-scrollable[b-yxq4wdkqt3] {
    text-align: left;
}

.modal-body-scrollable[b-yxq4wdkqt3]::-webkit-scrollbar {
    width: 4px;
}

.modal-body-scrollable[b-yxq4wdkqt3]::-webkit-scrollbar-thumb {
    background: rgba(24, 200, 248, 0.35);
    border-radius: 4px;
}

.form-grid-2col[b-yxq4wdkqt3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

.form-input-group[b-yxq4wdkqt3] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

    .form-input-group.full-width[b-yxq4wdkqt3] {
        margin-top: 0.9rem;
    }

.input-label[b-yxq4wdkqt3] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

    .input-label i[b-yxq4wdkqt3] {
        color: var(--color-accent-cyan, #18C8F8);
        font-size: 0.78rem;
    }

.req-star[b-yxq4wdkqt3] {
    color: #FF4D4D;
    font-weight: 900;
}

.luxury-form-input[b-yxq4wdkqt3] {
    background: rgba(4, 12, 20, 0.95);
    border: 1px solid rgba(24, 200, 248, 0.25);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
    width: 100%;
}

    .luxury-form-input:focus[b-yxq4wdkqt3] {
        border-color: #18C8F8;
        box-shadow: 0 0 16px rgba(24, 200, 248, 0.35);
        background: rgba(11, 35, 65, 0.95);
    }

.select-wrapper[b-yxq4wdkqt3] {
    position: relative;
    width: 100%;
}

.luxury-select[b-yxq4wdkqt3] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.5rem;
}

.select-chevron[b-yxq4wdkqt3] {
    position: absolute;
    top: 50%;
    inset-inline-end: 1rem;
    transform: translateY(-50%);
    color: var(--color-accent-cyan, #18C8F8);
    pointer-events: none;
    font-size: 0.78rem;
}

.luxury-textarea[b-yxq4wdkqt3] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

.input-error-msg[b-yxq4wdkqt3] {
    color: #FF6B6B;
    font-size: 0.76rem;
    font-weight: 700;
}

.form-alert-banner[b-yxq4wdkqt3] {
    border-radius: 12px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

    .form-alert-banner.success[b-yxq4wdkqt3] {
        background: rgba(0, 208, 132, 0.12);
        border: 1px solid #00D084;
        box-shadow: 0 0 18px rgba(0, 208, 132, 0.25);
    }

    .form-alert-banner.error[b-yxq4wdkqt3] {
        background: rgba(255, 77, 77, 0.12);
        border: 1px solid #FF4D4D;
    }

.alert-icon-ring[b-yxq4wdkqt3] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.form-alert-banner.success .alert-icon-ring[b-yxq4wdkqt3] {
    color: #00FF9D;
}

.form-alert-banner.error .alert-icon-ring[b-yxq4wdkqt3] {
    color: #FF4D4D;
}

.alert-text-body h4[b-yxq4wdkqt3] {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFFFFF;
}

.alert-text-body p[b-yxq4wdkqt3] {
    margin: 0;
    font-size: 0.84rem;
    color: #C8E3F5;
    line-height: 1.5;
}

.modal-actions-footer[b-yxq4wdkqt3] {
    display: flex;
    gap: 0.85rem;
    margin-top: 1.4rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.btn-luxury-submit[b-yxq4wdkqt3] {
    flex: 2;
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(24, 200, 248, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
    font-family: inherit;
}

    .btn-luxury-submit:hover:not(:disabled)[b-yxq4wdkqt3] {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(24, 200, 248, 0.7);
    }

    .btn-luxury-submit:disabled[b-yxq4wdkqt3] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.action-arrow[b-yxq4wdkqt3] {
    font-size: 0.82rem;
}

.btn-cancel[b-yxq4wdkqt3] {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #B6D5E8;
    padding: 0.8rem 1.1rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-yxq4wdkqt3] {
        background: rgba(255, 255, 255, 0.08);
        color: #FFFFFF;
        border-color: rgba(24, 200, 248, 0.4);
    }

@media (max-width: 600px) {
    .modal-card-stage-wrapper[b-yxq4wdkqt3] {
        width: calc(100vw - 20px);
        height: calc(100dvh - 20px);
    }

    .modal-card.proposal-details-modal[b-yxq4wdkqt3] {
        padding: 1.1rem 1rem !important;
        border-radius: 16px !important;
    }

    .form-grid-2col[b-yxq4wdkqt3] {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .modal-actions-footer[b-yxq4wdkqt3] {
        flex-direction: column;
        gap: 0.65rem;
    }

    .btn-luxury-submit[b-yxq4wdkqt3], .btn-cancel[b-yxq4wdkqt3] {
        width: 100%;
        min-height: 46px;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/Modals/ServiceDetailsModal.razor.rz.scp.css */
/* ==========================================================================
   SERVICE DETAILS MODAL - ULTRA-CINEMATIC LASER PORTAL (0.85s / 0.45s)
   ========================================================================== */

.modal-overlay[b-2gjq5m5pzu] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: radial-gradient(circle at center, rgba(11, 35, 65, 0.94) 0%, rgba(2, 6, 12, 0.98) 100%) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    direction: rtl;
    box-sizing: border-box !important;
    outline: none;
    user-select: none;
    touch-action: pan-y;
    overscroll-behavior: contain !important;
    animation: sdmOverlayIn-b-2gjq5m5pzu 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, backdrop-filter;
}

@keyframes sdmOverlayIn-b-2gjq5m5pzu {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
    }
}

.modal-overlay.is-closing[b-2gjq5m5pzu] {
    animation: sdmOverlayOut-b-2gjq5m5pzu 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes sdmOverlayOut-b-2gjq5m5pzu {
    0% {
        opacity: 1;
        backdrop-filter: blur(28px);
    }

    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

.modal-card-stage-wrapper[b-2gjq5m5pzu] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(680px, calc(100vw - 20px));
    height: min(900px, calc(100vh - 20px));
    max-height: calc(100dvh - 20px);
    perspective: 1400px;
    perspective-origin: center center;
}

/* 🌟 الشعاع الليزري ثلاثي الطبقات متقدم المظهر */
.laser-beam-blade[b-2gjq5m5pzu] {
    position: absolute;
    left: -3%;
    right: -3%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(24, 200, 248, 0.4) 15%, #18C8F8 35%, #FFFFFF 50%, #00FF9D 65%, rgba(24, 200, 248, 0.4) 85%, transparent 100%);
    box-shadow: 0 0 16px #FFFFFF, 0 0 35px #18C8F8, 0 0 65px #00FF9D;
    pointer-events: none;
    z-index: 30;
    will-change: top, opacity, transform;
}

    /* الهالة البلازمية الضبابية المصاحبة للشعاع */
    .laser-beam-blade[b-2gjq5m5pzu]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 8%;
        right: 8%;
        height: 15px;
        background: radial-gradient(ellipse at center, rgba(100, 232, 255, 0.75) 0%, rgba(24, 200, 248, 0.35) 50%, transparent 80%);
        filter: blur(4px);
        pointer-events: none;
    }

    .laser-beam-blade.beam-top[b-2gjq5m5pzu] {
        top: 50%;
        transform: translateY(-50%);
        animation: sdmBladeUpCinema-b-2gjq5m5pzu 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .laser-beam-blade.beam-bottom[b-2gjq5m5pzu] {
        top: 50%;
        transform: translateY(-50%);
        animation: sdmBladeDownCinema-b-2gjq5m5pzu 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

@keyframes sdmBladeUpCinema-b-2gjq5m5pzu {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 32%;
        opacity: 0.95;
    }

    82% {
        top: 0%;
        opacity: 0.85;
    }

    100% {
        top: -8px;
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

@keyframes sdmBladeDownCinema-b-2gjq5m5pzu {
    0% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
        filter: brightness(4);
    }

    22% {
        top: 50%;
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
        filter: brightness(3);
    }

    45% {
        top: 68%;
        opacity: 0.95;
    }

    82% {
        top: 100%;
        opacity: 0.85;
    }

    100% {
        top: calc(100% + 8px);
        opacity: 0;
        transform: translateY(-50%) scaleX(1.03);
    }
}

.laser-beam-blade.beam-top.is-closing[b-2gjq5m5pzu] {
    animation: sdmBladeCloseUpCinema-b-2gjq5m5pzu 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.laser-beam-blade.beam-bottom.is-closing[b-2gjq5m5pzu] {
    animation: sdmBladeCloseDownCinema-b-2gjq5m5pzu 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes sdmBladeCloseUpCinema-b-2gjq5m5pzu {
    0% {
        top: -8px;
        opacity: 0;
    }

    25% {
        top: 0%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

@keyframes sdmBladeCloseDownCinema-b-2gjq5m5pzu {
    0% {
        top: calc(100% + 8px);
        opacity: 0;
    }

    25% {
        top: 100%;
        opacity: 1;
    }

    75% {
        top: 50%;
        opacity: 1;
        filter: brightness(4);
    }

    100% {
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scaleX(0);
    }
}

/* 🌟 بطاقة المودال بتجسد هولوجرافي سينمائي (0.85s) */
.modal-card.service-details-modal[b-2gjq5m5pzu] {
    width: 100% !important;
    height: 100% !important;
    background: #06131F !important;
    border: 1.5px solid rgba(24, 200, 248, 0.45) !important;
    border-radius: 22px !important;
    padding: 1.1rem 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(24, 200, 248, 0.35) !important;
    transform-origin: center center;
    clip-path: inset(50% 0 50% 0);
    animation: sdmCardEmergeCinema-b-2gjq5m5pzu 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity, filter, clip-path;
}

@keyframes sdmCardEmergeCinema-b-2gjq5m5pzu {
    0%, 20% {
        opacity: 0;
        transform: perspective(1400px) scale(0.92) translateY(24px) rotateX(3deg);
        filter: brightness(2) blur(6px);
        clip-path: inset(50% 0 50% 0);
    }

    38% {
        opacity: 0.92;
        filter: brightness(1.4) blur(2px);
    }

    75% {
        clip-path: inset(0% 0 0% 0);
        filter: brightness(1.1) blur(0px);
    }

    100% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg);
        filter: brightness(1) blur(0px);
        clip-path: inset(0% 0 0% 0);
    }
}

.modal-card.service-details-modal.is-closing[b-2gjq5m5pzu] {
    animation: sdmCardCollapseCinema-b-2gjq5m5pzu 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes sdmCardCollapseCinema-b-2gjq5m5pzu {
    0% {
        opacity: 1;
        transform: perspective(1400px) scale(1) translateY(0);
        clip-path: inset(0% 0 0% 0);
    }

    60% {
        opacity: 0.5;
        transform: perspective(1400px) scale(0.96) translateY(-10px);
        filter: brightness(1.4);
    }

    100% {
        opacity: 0;
        transform: perspective(1400px) scale(0.90) translateY(-22px);
        clip-path: inset(50% 0 50% 0);
    }
}

/* تفاصيل العناصر الداخلية */
.modal-header[b-2gjq5m5pzu] {
    flex-shrink: 0;
    width: 100%;
    padding: 0 0 0.55rem 0;
    border-bottom: 1px solid rgba(24, 200, 248, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    position: relative;
    z-index: 2;
}

.modal-service-img-center-wrap[b-2gjq5m5pzu] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -0.2rem;
    margin-bottom: 0.15rem;
}

.modal-top-service-img[b-2gjq5m5pzu] {
    width: auto !important;
    max-width: 230px !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    filter: none !important;
    background: transparent !important;
}

.modal-top-icon-fallback[b-2gjq5m5pzu] {
    font-size: 2rem;
    color: var(--color-accent-cyan, #18C8F8);
}

.modal-title[b-2gjq5m5pzu] {
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 900;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 0 16px rgba(100, 232, 255, 0.35);
}

.modal-tagline-wrap[b-2gjq5m5pzu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #00FF9D;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.22);
    padding: 0.16rem 0.75rem;
    border-radius: 16px;
}

.modal-body-scrollable[b-2gjq5m5pzu] {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 2;
}

    .modal-body-scrollable[b-2gjq5m5pzu]::-webkit-scrollbar {
        width: 4px;
    }

    .modal-body-scrollable[b-2gjq5m5pzu]::-webkit-scrollbar-thumb {
        background: rgba(24, 200, 248, 0.4);
        border-radius: 4px;
    }

.subpillar-luxury-block[b-2gjq5m5pzu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: right;
}

[dir="ltr"] .subpillar-luxury-block[b-2gjq5m5pzu] {
    text-align: left;
}

.pillar-lead-header[b-2gjq5m5pzu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pillar-badge-capsule[b-2gjq5m5pzu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(24, 200, 248, 0.12);
    border: 1.5px solid #18C8F8;
    border-radius: 10px;
    flex-shrink: 0;
}

.pillar-idx-num[b-2gjq5m5pzu] {
    font-size: 0.95rem;
    font-weight: 900;
    color: #18C8F8;
    line-height: 1;
}

.pillar-idx-label[b-2gjq5m5pzu] {
    font-size: 0.54rem;
    font-weight: 800;
    color: #B6D5E8;
}

.pillar-title-group[b-2gjq5m5pzu] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pillar-main-heading[b-2gjq5m5pzu] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.pillar-sub-tag[b-2gjq5m5pzu] {
    font-size: 0.8rem;
    color: #00FF9D;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pillar-cinematic-viewport[b-2gjq5m5pzu] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(24, 200, 248, 0.35);
    background: #02060C;
    margin: 0.2rem 0;
}

.pillar-cinematic-img[b-2gjq5m5pzu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pillar-cinematic-overlay[b-2gjq5m5pzu] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 19, 31, 0.85) 0%, transparent 70%);
}

.pillar-narrative-text[b-2gjq5m5pzu] {
    font-size: 0.9rem;
    color: #C8E3F5;
    line-height: 1.7;
    margin: 0;
}

.capability-matrix-grid[b-2gjq5m5pzu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.capability-matrix-tile[b-2gjq5m5pzu] {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(24, 200, 248, 0.18);
    border-inline-start: 2.5px solid #18C8F8;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.tile-icon-indicator[b-2gjq5m5pzu] {
    width: 18px;
    height: 18px;
    background: rgba(0, 255, 157, 0.15);
    border: 1px solid #00FF9D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00FF9D;
    font-size: 0.6rem;
    font-weight: 900;
}

.tile-text[b-2gjq5m5pzu] {
    font-size: 0.82rem;
    color: #FFFFFF;
    font-weight: 600;
}

.pillar-laser-divider[b-2gjq5m5pzu] {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(24, 200, 248, 0.35) 50%, transparent 100%);
    margin: 1.2rem 0 0.4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-diamond[b-2gjq5m5pzu] {
    color: #18C8F8;
    font-size: 0.6rem;
    background: #06131F;
    padding: 0 0.5rem;
}

.modal-footer-compact-row[b-2gjq5m5pzu] {
    flex-shrink: 0;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 2;
}

.btn-cta-proposal-scroll[b-2gjq5m5pzu] {
    flex: 2;
    height: 42px;
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0 1rem;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    transition: all 0.25s ease;
}

    .btn-cta-proposal-scroll:hover[b-2gjq5m5pzu] {
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.65);
        transform: translateY(-1px);
    }

.cta-arrow-icon[b-2gjq5m5pzu] {
    font-size: 0.78rem;
}

.btn-cancel-compact[b-2gjq5m5pzu] {
    flex: 1;
    height: 42px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #B6D5E8;
    padding: 0 0.8rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

    .btn-cancel-compact:hover[b-2gjq5m5pzu] {
        background: rgba(255, 255, 255, 0.08);
        color: #FFFFFF;
        border-color: rgba(24, 200, 248, 0.4);
    }

@media (max-width: 600px) {
    .modal-card-stage-wrapper[b-2gjq5m5pzu] {
        width: calc(100vw - 20px);
        height: calc(100dvh - 20px);
    }

    .modal-card.service-details-modal[b-2gjq5m5pzu] {
        padding: 1rem 1rem !important;
        border-radius: 18px !important;
    }

    .capability-matrix-grid[b-2gjq5m5pzu] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .pillar-cinematic-viewport[b-2gjq5m5pzu] {
        max-height: 160px;
    }

    .btn-cta-proposal-scroll[b-2gjq5m5pzu] {
        font-size: 0.82rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/OurCapabilities.razor.rz.scp.css */
/* ==========================================================================
   OUR FOUR CORE SERVICES SECTION - MODERN CYBER-GLASS CARDS
   ========================================================================== */

.our-capabilities-section[b-x0e45ax4wy] {
    padding: 5.5rem 1rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-x0e45ax4wy] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.glow-ambient-bg[b-x0e45ax4wy] {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 650px);
    height: clamp(350px, 60vw, 650px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.16) 0%, transparent 70%);
    filter: blur(95px);
    pointer-events: none;
    z-index: 1;
}

.header-content[b-x0e45ax4wy] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sub-heading[b-x0e45ax4wy] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-x0e45ax4wy] {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.section-subheading[b-x0e45ax4wy] {
    font-size: clamp(0.88rem, 1.8vw, 1.05rem);
    line-height: 1.7;
    color: var(--color-text-muted, #B6D5E8);
    max-width: 740px;
    margin: 0 auto;
}

/* 🌟 شبكة الخدمات الأربع (2x2 Grid) */
.core-services-grid[b-x0e45ax4wy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem;
    margin-top: 2.5rem;
    width: 100%;
}

/* 🌟 بطاقة الخدمة الزجاجية المتطورة */
.service-card-glass[b-x0e45ax4wy] {
    position: relative;
    background: linear-gradient(165deg, rgba(8, 24, 40, 0.92) 0%, rgba(4, 14, 24, 0.96) 100%);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    overflow: hidden;
}

    .service-card-glass:hover[b-x0e45ax4wy] {
        border-color: rgba(24, 200, 248, 0.65);
        transform: translateY(-8px);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(24, 200, 248, 0.25);
    }

/* خط التوهج السيبراني بأعلى البطاقة */
.card-glow-bar[b-x0e45ax4wy] {
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #18C8F8, #00FF9D, transparent);
    opacity: 0.6;
    transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
}

.service-card-glass:hover .card-glow-bar[b-x0e45ax4wy] {
    opacity: 1;
    left: 5%;
    right: 5%;
}

/* 1. رأس البطاقة: الترقيم والأيقونة */
.card-header-top[b-x0e45ax4wy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
}

.service-index-badge[b-x0e45ax4wy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.25);
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #18C8F8;
    letter-spacing: 0.8px;
    font-family: 'Plus Jakarta Sans', monospace;
}

.index-num[b-x0e45ax4wy] {
    color: #00FF9D;
}

.index-sep[b-x0e45ax4wy] {
    color: rgba(255, 255, 255, 0.3);
}

.service-icon-bubble[b-x0e45ax4wy] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18C8F8;
    font-size: 1.25rem;
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card-glass:hover .service-icon-bubble[b-x0e45ax4wy] {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(24, 200, 248, 0.35);
    color: #FFFFFF;
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
}

/* 2. منصة العرض البصري للصورة */
.card-media-stage[b-x0e45ax4wy] {
    width: 100%;
    height: 110px;
    background: rgba(4, 12, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.service-showcase-img[b-x0e45ax4wy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

.service-card-glass:hover .service-showcase-img[b-x0e45ax4wy] {
    transform: scale(1.08);
}

.service-fallback-icon[b-x0e45ax4wy] {
    font-size: 3rem;
    color: #18C8F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. الكتلة النصية */
.card-text-block[b-x0e45ax4wy] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.4rem;
}

.service-tagline-pill[b-x0e45ax4wy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-status-success, #00FF9D);
    margin-bottom: 0.55rem;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.35);
}

.service-title[b-x0e45ax4wy] {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.65rem 0;
    line-height: 1.35;
}

.service-description[b-x0e45ax4wy] {
    font-size: 0.92rem;
    color: var(--color-text-muted, #B6D5E8);
    line-height: 1.65;
    margin: 0;
}

/* 4. ركائز التنفيذ المنسقة */
.pillars-container[b-x0e45ax4wy] {
    margin-top: auto;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(24, 200, 248, 0.12);
    border-radius: 16px;
    padding: 1rem 1.1rem;
}

.pillars-header-title[b-x0e45ax4wy] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #18C8F8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.pillars-grid-pills[b-x0e45ax4wy] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pillar-pill-item[b-x0e45ax4wy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    background: rgba(4, 12, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: all 0.25s ease;
}

    .pillar-pill-item:hover[b-x0e45ax4wy] {
        background: rgba(24, 200, 248, 0.08);
        border-color: rgba(24, 200, 248, 0.25);
        transform: translateX(-3px);
    }

[dir="ltr"] .pillar-pill-item:hover[b-x0e45ax4wy] {
    transform: translateX(3px);
}

.pillar-order[b-x0e45ax4wy] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #00FF9D;
    background: rgba(0, 255, 157, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-family: monospace;
}

.pillar-text[b-x0e45ax4wy] {
    font-size: 0.84rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.35;
}

/* 5. زر الاستكشاف الفاخر */
.service-cta-container[b-x0e45ax4wy] {
    width: 100%;
}

.btn-card-explore[b-x0e45ax4wy] {
    width: 100%;
    background: rgba(24, 200, 248, 0.06);
    border: 1px solid rgba(24, 200, 248, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1.2rem;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

    .btn-card-explore:hover[b-x0e45ax4wy] {
        background: linear-gradient(135deg, rgba(24, 200, 248, 0.25) 0%, rgba(0, 114, 255, 0.25) 100%);
        border-color: #18C8F8;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.35);
        color: #FFFFFF;
    }

.btn-icon-wrap[b-x0e45ax4wy] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid rgba(24, 200, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18C8F8;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.btn-card-explore:hover .btn-icon-wrap[b-x0e45ax4wy] {
    background: #18C8F8;
    color: #040E18;
    transform: translateX(-4px);
}

[dir="ltr"] .btn-card-explore:hover .btn-icon-wrap[b-x0e45ax4wy] {
    transform: translateX(4px);
}

/* التجاوب مع شاشات الجوال والتابلت */
@media (max-width: 992px) {
    .core-services-grid[b-x0e45ax4wy] {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .service-card-glass[b-x0e45ax4wy] {
        padding: 1.8rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .card-media-stage[b-x0e45ax4wy] {
        height: 95px;
    }

    .service-title[b-x0e45ax4wy] {
        font-size: 1.25rem;
    }

    .pillar-text[b-x0e45ax4wy] {
        font-size: 0.8rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/OurProcess.razor.rz.scp.css */
/* ==========================================================================
   OUR PROCESS SECTION - 5 SEQUENTIAL STEPS TRACK & UNIFIED CTA
   ========================================================================== */

.our-process-section[b-ka1ga9rjh8] {
    padding: 5.5rem 1rem 6.5rem 1rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-ka1ga9rjh8] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 1. رأس القسم الموحد */
.header-content[b-ka1ga9rjh8] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sub-heading[b-ka1ga9rjh8] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-ka1ga9rjh8] {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.section-subheading[b-ka1ga9rjh8] {
    font-size: clamp(0.88rem, 1.8vw, 1.05rem);
    line-height: 1.7;
    color: var(--color-text-muted, #B6D5E8);
    max-width: 720px;
    margin: 0 auto;
}

/* 2. مسار الخطوات الخمس */
.process-steps-track[b-ka1ga9rjh8] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    margin-top: 2.5rem;
    position: relative;
}

.step-card-glass[b-ka1ga9rjh8] {
    background: rgba(6, 19, 31, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 18px;
    padding: 2rem 1.2rem;
    text-align: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

    .step-card-glass:hover[b-ka1ga9rjh8] {
        border-color: var(--color-accent-cyan, #18C8F8);
        background: rgba(11, 35, 65, 0.92);
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8), 0 0 22px rgba(24, 200, 248, 0.3);
    }

.step-badge-num[b-ka1ga9rjh8] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(24, 200, 248, 0.12);
    border: 1.5px solid var(--color-accent-cyan, #18C8F8);
    color: var(--color-accent-cyan, #18C8F8);
    font-weight: 900;
    font-size: 1.05rem;
    font-family: 'Plus Jakarta Sans', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.3);
    transition: all 0.3s ease;
}

.step-card-glass:hover .step-badge-num[b-ka1ga9rjh8] {
    background: var(--color-accent-cyan, #18C8F8);
    color: #06131F;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.7);
    transform: scale(1.1);
}

.step-title[b-ka1ga9rjh8] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.6rem 0;
    line-height: 1.3;
}

.step-desc[b-ka1ga9rjh8] {
    font-size: 0.86rem;
    color: var(--color-text-muted, #B6D5E8);
    line-height: 1.6;
    margin: 0;
}

/* 🌟 3. الزر الفخم الموحد */
.process-action-cluster[b-ka1ga9rjh8] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.5rem;
    width: 100%;
}

.btn-process-unified[b-ka1ga9rjh8] {
    background: linear-gradient(135deg, #18C8F8 0%, #0072FF 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1.02rem;
    padding: 0.95rem 2.8rem;
    border-radius: 16px;
    border: 1px solid #18C8F8;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.35s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .btn-process-unified:hover[b-ka1ga9rjh8] {
        transform: translateY(-3px);
        box-shadow: 0 0 38px rgba(24, 200, 248, 0.8);
    }

.action-arrow[b-ka1ga9rjh8] {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-process-unified:hover .action-arrow[b-ka1ga9rjh8] {
    transform: translateX(-5px);
}

[dir="ltr"] .btn-process-unified:hover .action-arrow[b-ka1ga9rjh8] {
    transform: translateX(5px);
}

/* ==========================================================================
   📱 التجاوب مع الشاشات
   ========================================================================== */
@media (max-width: 1100px) {
    .process-steps-track[b-ka1ga9rjh8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .process-steps-track[b-ka1ga9rjh8] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .our-process-section[b-ka1ga9rjh8] {
        padding: 3.5rem 0.85rem 4.5rem 0.85rem;
    }

    .process-steps-track[b-ka1ga9rjh8] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .btn-process-unified[b-ka1ga9rjh8] {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.4rem;
        font-size: 0.92rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/RegionalPresence.razor.rz.scp.css */
/* ==========================================================================
   REGIONAL PRESENCE - ULTRA-LUXURY STRATEGIC HUBS SHOWCASE
   ========================================================================== */

.regional-presence-section[b-6ua22x1wxw] {
    padding: 5.5rem 1rem 6.5rem 1rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-6ua22x1wxw] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* التوهج الخلفي */
.regional-ambient-glow[b-6ua22x1wxw] {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 700px);
    height: clamp(350px, 60vw, 700px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.15) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

/* 1. رأس القسم */
.header-content[b-6ua22x1wxw] {
    text-align: center;
    margin-bottom: 3.8rem;
}

.sub-heading[b-6ua22x1wxw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-6ua22x1wxw] {
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 0.9rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.35);
    letter-spacing: -0.3px;
}

.section-subheading[b-6ua22x1wxw] {
    font-size: clamp(0.92rem, 1.8vw, 1.08rem);
    line-height: 1.75;
    color: var(--color-text-muted, #B6D5E8);
    max-width: 760px;
    margin: 0 auto;
}

/* 🌟 2. شبكة البطاقات الثلاث */
.regional-hubs-grid[b-6ua22x1wxw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.hub-card-glass[b-6ua22x1wxw] {
    position: relative;
    background: rgba(6, 19, 31, 0.88);
    border: 1.5px solid rgba(24, 200, 248, 0.25);
    border-radius: 24px;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    overflow: hidden;
    text-align: right;
}

[dir="ltr"] .hub-card-glass[b-6ua22x1wxw] {
    text-align: left;
}

.hub-card-glow-bg[b-6ua22x1wxw] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.ksa-hub .hub-card-glow-bg[b-6ua22x1wxw] {
    background: radial-gradient(circle at 80% 20%, rgba(0, 208, 132, 0.15) 0%, transparent 65%);
}

.egypt-hub .hub-card-glow-bg[b-6ua22x1wxw], .jordan-hub .hub-card-glow-bg[b-6ua22x1wxw] {
    background: radial-gradient(circle at 80% 20%, rgba(24, 200, 248, 0.15) 0%, transparent 65%);
}

.hub-card-glass:hover[b-6ua22x1wxw] {
    transform: translateY(-8px);
    border-color: rgba(24, 200, 248, 0.8);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.9), 0 0 30px rgba(24, 200, 248, 0.3);
}

.ksa-hub:hover[b-6ua22x1wxw] {
    border-color: #00D084;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 208, 132, 0.3);
}

.hub-card-glass:hover .hub-card-glow-bg[b-6ua22x1wxw] {
    opacity: 1;
}

/* رأس بطاقة المركز */
.hub-card-header[b-6ua22x1wxw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.hub-flag-circle[b-6ua22x1wxw] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(24, 200, 248, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.2);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hub-card-glass:hover .hub-flag-circle[b-6ua22x1wxw] {
    transform: scale(1.08);
}

.flag-emoji[b-6ua22x1wxw] {
    font-size: 2rem;
    line-height: 1;
}

.hub-titles-wrap[b-6ua22x1wxw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hub-country-name[b-6ua22x1wxw] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
}

.hub-badge-role[b-6ua22x1wxw] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #00FF9D;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pulse-dot-green[b-6ua22x1wxw] {
    width: 7px;
    height: 7px;
    background-color: #00FF9D;
    border-radius: 50%;
    box-shadow: 0 0 8px #00FF9D;
    animation: hubPulse-b-6ua22x1wxw 1.8s infinite;
}

.pulse-dot-cyan[b-6ua22x1wxw] {
    width: 7px;
    height: 7px;
    background-color: #18C8F8;
    border-radius: 50%;
    box-shadow: 0 0 8px #18C8F8;
    animation: hubPulse-b-6ua22x1wxw 1.8s infinite;
}

@keyframes hubPulse-b-6ua22x1wxw {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}

.hub-narrative-desc[b-6ua22x1wxw] {
    font-size: 0.92rem;
    color: #B6D5E8;
    line-height: 1.7;
    margin: 0 0 1.4rem 0;
}

/* قائمة نقاط التركيز للمركز */
.hub-focus-points[b-6ua22x1wxw] {
    list-style: none;
    padding: 1.1rem 0;
    margin: 0 0 1.5rem 0;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-grow: 1;
}

.focus-point-item[b-6ua22x1wxw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    color: #FFFFFF;
    font-weight: 600;
}

    .focus-point-item i[b-6ua22x1wxw] {
        color: #18C8F8;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

.ksa-hub .focus-point-item i[b-6ua22x1wxw] {
    color: #00FF9D;
}

/* تذييل البطاقة */
.hub-card-footer[b-6ua22x1wxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.6rem;
}

.hub-iso-tag[b-6ua22x1wxw] {
    font-size: 0.82rem;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', monospace;
    color: #18C8F8;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid rgba(24, 200, 248, 0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
}

.hub-status-text[b-6ua22x1wxw] {
    font-size: 0.78rem;
    color: #8CAABF;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .hub-status-text i[b-6ua22x1wxw] {
        color: #00FF9D;
    }

/* ==========================================================================
   📱 التجاوب مع مختلف الشاشات
   ========================================================================== */
@media (max-width: 1080px) {
    .regional-hubs-grid[b-6ua22x1wxw] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 650px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .regional-presence-section[b-6ua22x1wxw] {
        padding: 4rem 0.85rem 5rem 0.85rem;
    }

    .hub-card-glass[b-6ua22x1wxw] {
        padding: 1.8rem 1.3rem;
        border-radius: 20px;
    }

    .hub-country-name[b-6ua22x1wxw] {
        font-size: 1.15rem;
    }

    .flag-emoji[b-6ua22x1wxw] {
        font-size: 1.7rem;
    }

    .hub-flag-circle[b-6ua22x1wxw] {
        width: 46px;
        height: 46px;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/TargetSectors.razor.rz.scp.css */
/* ==========================================================================
   TARGET SECTORS SECTION - 100% RESPONSIVE & NEON GLASSMORPHISM
   ========================================================================== */

.target-sectors-section[b-2brjrpcd7l] {
    padding: 5rem 1rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-2brjrpcd7l] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* توهج خلفي محيطي */
.glow-ambient-sectors[b-2brjrpcd7l] {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 600px);
    height: clamp(350px, 60vw, 600px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.15) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

/* 1. رأس القسم */
.header-content[b-2brjrpcd7l] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sub-heading[b-2brjrpcd7l] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #18C8F8;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-2brjrpcd7l] {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.section-subheading[b-2brjrpcd7l] {
    font-size: clamp(0.88rem, 1.8vw, 1.05rem);
    line-height: 1.7;
    color: #B6D5E8;
    max-width: 700px;
    margin: 0 auto;
}

/* 2. شبكة القطاعات الـ 4 */
.sectors-container[b-2brjrpcd7l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

/* بطاقة القطاع الزجاجية */
.sector-card[b-2brjrpcd7l] {
    background: rgba(6, 19, 31, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    padding: 1.8rem 1.4rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

    .sector-card:hover[b-2brjrpcd7l] {
        border-color: #18C8F8;
        background: rgba(11, 35, 65, 0.9);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.35);
        transform: translateY(-6px);
    }

/* رأس بطاقة القطاع */
.sector-card-header[b-2brjrpcd7l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    width: 100%;
}

.sector-icon-ring[b-2brjrpcd7l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.25);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sector-card:hover .sector-icon-ring[b-2brjrpcd7l] {
    background: #18C8F8;
    border-color: #18C8F8;
    box-shadow: 0 0 20px rgba(24, 200, 248, 0.6);
}

.sector-icon[b-2brjrpcd7l] {
    font-size: 1.35rem;
    color: #18C8F8;
    transition: color 0.3s ease;
}

.sector-card:hover .sector-icon[b-2brjrpcd7l] {
    color: #06131F;
}

.sector-tag-pill[b-2brjrpcd7l] {
    font-size: 0.68rem;
    font-weight: 800;
    color: #00FF9D;
    background: rgba(0, 208, 132, 0.12);
    border: 1px solid rgba(0, 208, 132, 0.35);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.sector-title[b-2brjrpcd7l] {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.65rem 0;
    line-height: 1.35;
}

.sector-desc[b-2brjrpcd7l] {
    font-size: clamp(0.82rem, 1.5vw, 0.88rem);
    line-height: 1.65;
    color: #B6D5E8;
    margin: 0;
}

/* ==========================================================================
   📱 التجاوب مع مختلف الشاشات (Tablet & Mobile 360x740)
   ========================================================================== */
@media (max-width: 992px) {
    .sectors-container[b-2brjrpcd7l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .header-content[b-2brjrpcd7l] {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 576px) {
    .target-sectors-section[b-2brjrpcd7l] {
        padding: 3.5rem 0.85rem;
    }

    .sectors-container[b-2brjrpcd7l] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sector-card[b-2brjrpcd7l] {
        padding: 1.4rem 1.1rem;
        border-radius: 16px;
    }

    .sector-icon-ring[b-2brjrpcd7l] {
        width: 42px;
        height: 42px;
    }

    .sector-icon[b-2brjrpcd7l] {
        font-size: 1.2rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/TechnologyAlliances.razor.rz.scp.css */
/* ==========================================================================
   TECHNOLOGY ALLIANCES SECTION - 100% RESPONSIVE & BRAND LOGOS (500x130 Aspect)
   ========================================================================== */

.technology-alliances-section[b-s2joa6vle2] {
    padding: 5rem 1rem;
    background-color: transparent;
    border-top: 1px solid rgba(24, 200, 248, 0.15);
    border-bottom: 1px solid rgba(24, 200, 248, 0.15);
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-s2joa6vle2] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* توهج خلفي محيطي */
.glow-ambient-alliances[b-s2joa6vle2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 60vw, 650px);
    height: clamp(250px, 35vw, 400px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.14) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

/* 1. رأس القسم */
.header-content[b-s2joa6vle2] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sub-heading[b-s2joa6vle2] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #18C8F8;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-s2joa6vle2] {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

/* 2. شبكة التحالفات الـ 5 */
.alliances-grid[b-s2joa6vle2] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    align-items: stretch;
}

/* بطاقة الشريك الزجاجية */
.partner-card[b-s2joa6vle2] {
    background: rgba(6, 19, 31, 0.85);
    border: 1px solid rgba(24, 200, 248, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 1.6rem 1rem;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    height: 100%;
}

    .partner-card:hover[b-s2joa6vle2] {
        border-color: #18C8F8;
        background: rgba(11, 35, 65, 0.9);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.4);
        transform: translateY(-5px);
    }

/* 🌟 صندوق اللوغو السيبراني المتناسق بنسبة 500x130 العريضة */
.partner-logo-box[b-s2joa6vle2] {
    width: 100%;
    max-width: 165px;
    height: 52px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(24, 200, 248, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(24, 200, 248, 0.15);
    transition: all 0.3s ease;
    padding: 6px 12px;
    box-sizing: border-box;
}

.partner-card:hover .partner-logo-box[b-s2joa6vle2] {
    background: #FFFFFF;
    border-color: #18C8F8;
    box-shadow: inset 0 0 16px rgba(24, 200, 248, 0.2), 0 0 20px rgba(24, 200, 248, 0.5);
    transform: scale(1.04);
}

.partner-brand-logo[b-s2joa6vle2] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.35));
    transition: filter 0.3s ease;
}

.partner-card:hover .partner-brand-logo[b-s2joa6vle2] {
    filter: drop-shadow(0 0 12px rgba(24, 200, 248, 0.7));
}

.partner-brand-icon[b-s2joa6vle2], .partner-fallback-icon i[b-s2joa6vle2] {
    font-size: 1.6rem;
    color: #18C8F8;
    transition: color 0.3s ease;
}

.partner-card:hover .partner-brand-icon[b-s2joa6vle2] {
    color: #00FF9D;
    filter: drop-shadow(0 0 8px #00FF9D);
}

.partner-name[b-s2joa6vle2] {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.partner-tier[b-s2joa6vle2] {
    font-size: 0.74rem;
    font-weight: 700;
    color: #00FF9D;
    line-height: 1.35;
}

/* ==========================================================================
   📱 التجاوب مع مختلف الشاشات (Tablet & Mobile 360x740)
   ========================================================================== */
@media (max-width: 992px) {
    .alliances-grid[b-s2joa6vle2] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .header-content[b-s2joa6vle2] {
        margin-bottom: 2.5rem;
    }

    .partner-logo-box[b-s2joa6vle2] {
        max-width: 160px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .technology-alliances-section[b-s2joa6vle2] {
        padding: 3rem 0.75rem;
    }

    /* 🌟 شبكة مدمجة 2x2 في الجوال */
    .alliances-grid[b-s2joa6vle2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .partner-card[b-s2joa6vle2] {
        padding: 1.3rem 0.65rem;
        border-radius: 14px;
    }

    .partner-logo-box[b-s2joa6vle2] {
        max-width: 135px;
        height: 44px;
        padding: 4px 8px;
        margin-bottom: 0.6rem;
    }

    .partner-brand-icon[b-s2joa6vle2] {
        font-size: 1.35rem;
    }

    .partner-name[b-s2joa6vle2] {
        font-size: 0.86rem;
    }

    .partner-tier[b-s2joa6vle2] {
        font-size: 0.68rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/TrustedBy.razor.rz.scp.css */
/* ==========================================================================
   TRUSTED BY SECTION - DIRECT NATIVE IMAGE SHOWCASE (ASPECT RATIO 4534 / 2552)
   ========================================================================== */

.trusted-by-section[b-7woj1a84jf] {
    padding: clamp(2rem, 5vw, 3.8rem) 0;
    background-color: transparent !important;
    border-top: 1px solid rgba(24, 200, 248, 0.08);
    border-bottom: 1px solid rgba(24, 200, 248, 0.08);
    position: relative;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
}

    .trusted-by-section .container[b-7woj1a84jf] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 clamp(0.75rem, 3vw, 1.5rem);
        box-sizing: border-box;
    }

/* 🌟 رأس القسم */
.section-header-block[b-7woj1a84jf] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.section-tag-pill[b-7woj1a84jf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(24, 200, 248, 0.1);
    border: 1px solid var(--color-accent-cyan, #18C8F8);
    color: var(--color-accent-cyan, #18C8F8);
    font-size: clamp(0.72rem, 2vw, 0.8rem);
    font-weight: 800;
    padding: 0.22rem 0.85rem;
    border-radius: 20px;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    box-shadow: 0 0 15px rgba(24, 200, 248, 0.2);
    letter-spacing: 0.5px;
}

.section-main-title[b-7woj1a84jf] {
    font-size: clamp(1.25rem, 3.8vw, 1.9rem);
    font-weight: 900;
    color: #FFFFFF;
    margin: 0 0 clamp(0.4rem, 1.2vw, 0.65rem) 0;
    line-height: 1.3;
    text-shadow: 0 0 20px rgba(100, 232, 255, 0.3);
}

.section-sub-desc[b-7woj1a84jf] {
    font-size: clamp(0.84rem, 2.2vw, 0.96rem);
    color: #B6D5E8;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}

/* 🌟 الحاوية الخارجية الشفافة */
.trusted-clients-showcase-frame[b-7woj1a84jf] {
    position: relative;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

/* 🌟 حاوية الصورة المقفلة بنسبة الأبعاد الأصلية (4534 / 2552) */
.showcase-media-container[b-7woj1a84jf] {
    position: relative;
    width: 100%;
    aspect-ratio: 4534 / 2552 !important;
    background: transparent !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* 🌟 الصورة الأصلية المستجيبة والمستقرة بصرياً */
.trusted-by-img[b-7woj1a84jf] {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4534 / 2552 !important;
    object-fit: contain !important;
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    pointer-events: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
    transition: transform 0.3s ease;
}

/* التجاوب مع شاشات الجوال */
@media (max-width: 480px) {
    .trusted-by-section[b-7woj1a84jf] {
        padding: 1.6rem 0;
    }

    .section-main-title[b-7woj1a84jf] {
        font-size: 1.2rem;
    }

    .section-sub-desc[b-7woj1a84jf] {
        font-size: 0.8rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/WhoWeAre.razor.rz.scp.css */
/* ==========================================================================
   WHO WE ARE SECTION - ULTRA LUXURY CYBERNETIC THEME (100% RESPONSIVE)
   Focus: Eye Comfort, High Visual Polish & Adaptive Fluid Typography
   ========================================================================== */

.who-we-are-section[b-h153g6crta] {
    padding: clamp(3.5rem, 6vw, 6rem) 1.25rem;
    background: radial-gradient(circle at 10% 20%, rgba(24, 200, 248, 0.05) 0%, transparent 45%), radial-gradient(circle at 90% 80%, rgba(0, 255, 157, 0.04) 0%, transparent 45%), #040c14;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    border-top: 1px solid rgba(24, 200, 248, 0.08);
}

.container[b-h153g6crta] {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* هالات التوهج النيوني المحيطية المريحة للعين */
.glow-backdrop-cyan[b-h153g6crta] {
    position: absolute;
    top: 25%;
    right: 3%;
    width: clamp(260px, 32vw, 420px);
    height: clamp(260px, 32vw, 420px);
    background: radial-gradient(circle, rgba(24, 200, 248, 0.16) 0%, rgba(20, 127, 193, 0) 70%);
    filter: blur(85px);
    pointer-events: none;
    z-index: 1;
}

.glow-backdrop-emerald[b-h153g6crta] {
    position: absolute;
    bottom: 15%;
    left: 2%;
    width: clamp(240px, 30vw, 380px);
    height: clamp(240px, 30vw, 380px);
    background: radial-gradient(circle, rgba(0, 255, 157, 0.12) 0%, rgba(0, 180, 100, 0) 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

/* شبكة القسم الرئيسية المتجاوبة */
.who-we-are-grid[b-h153g6crta] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   1. الجانب النصي (الهوية، الرؤية، والرسالة)
   -------------------------------------------------------------------------- */
.text-content-column[b-h153g6crta] {
    display: flex;
    flex-direction: column;
}

/* شارة التميز والهوية */
.section-badge-pill[b-h153g6crta] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 1.15rem;
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.3);
    border-radius: 20px;
    color: #18C8F8;
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 700;
    margin-bottom: 1.1rem;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.15);
    width: fit-content;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.icon-saudi[b-h153g6crta] {
    color: #00FF9D;
    font-size: 0.95rem;
}

/* العنوان الرئيسي الفخم */
.section-main-title[b-h153g6crta] {
    font-size: clamp(1.55rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0 0 1.1rem 0;
    text-shadow: 0 2px 20px rgba(100, 232, 255, 0.25);
    letter-spacing: -0.3px;
}

/* الوصف الرئيسي مع زر اقرأ المزيد */
.desc-expandable-box[b-h153g6crta] {
    margin: 0 0 1.8rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-main-desc[b-h153g6crta] {
    font-size: clamp(0.88rem, 1.8vw, 1rem);
    line-height: 1.85;
    color: #BBD7EB; /* لون بلاتيني مريح جداً للعين يمنع الإجهاد */
    margin: 0 0 0.65rem 0;
    transition: all 0.35s ease;
    font-weight: 500;
}

/* زر اقرأ المزيد للوصف العام */
.btn-read-more[b-h153g6crta] {
    background: rgba(24, 200, 248, 0.08);
    border: 1px solid rgba(24, 200, 248, 0.3);
    color: #18C8F8;
    padding: 0.38rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.12);
    min-height: 36px;
}

    .btn-read-more:hover[b-h153g6crta] {
        background: #18C8F8;
        color: #040c14;
        box-shadow: 0 0 20px rgba(24, 200, 248, 0.5);
        transform: translateY(-2px);
    }

.btn-read-more-inline[b-h153g6crta] {
    background: transparent;
    border: none;
    color: #18C8F8;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    margin-top: 0.4rem;
    transition: all 0.2s ease;
}

    .btn-read-more-inline:hover[b-h153g6crta] {
        color: #00FF9D;
        text-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
        transform: translateX(-3px);
    }

[dir="ltr"] .btn-read-more-inline:hover[b-h153g6crta] {
    transform: translateX(3px);
}

/* بطاقات الرؤية والرسالة */
.vision-mission-wrapper[b-h153g6crta] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.vm-card[b-h153g6crta] {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.45rem;
    background: linear-gradient(135deg, rgba(6, 20, 34, 0.84) 0%, rgba(4, 13, 22, 0.92) 100%);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.card-vision[b-h153g6crta] {
    border: 1px solid rgba(24, 200, 248, 0.25);
}

    .card-vision:hover[b-h153g6crta],
    .card-vision.is-card-expanded[b-h153g6crta] {
        border-color: #18C8F8;
        box-shadow: 0 10px 30px rgba(24, 200, 248, 0.25);
        transform: translateY(-2px);
    }

.card-mission[b-h153g6crta] {
    border: 1px solid rgba(0, 208, 132, 0.25);
}

    .card-mission:hover[b-h153g6crta],
    .card-mission.is-card-expanded[b-h153g6crta] {
        border-color: #00FF9D;
        box-shadow: 0 10px 30px rgba(0, 208, 132, 0.25);
        transform: translateY(-2px);
    }

/* السطر الأول: الليبل في الزاوية المعاكسة */
.vm-label-row[b-h153g6crta] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 0.35rem;
}

.vm-tag-pill[b-h153g6crta] {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    letter-spacing: 0.7px;
    font-family: 'Plus Jakarta Sans', monospace;
    white-space: nowrap;
}

.tag-cyan[b-h153g6crta] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid rgba(24, 200, 248, 0.4);
    color: #18C8F8;
}

.tag-green[b-h153g6crta] {
    background: rgba(0, 208, 132, 0.12);
    border: 1px solid rgba(0, 208, 132, 0.4);
    color: #00FF9D;
}

/* السطر الثاني: الأيقونة والعنوان */
.vm-title-row[b-h153g6crta] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.vm-icon-ring[b-h153g6crta] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ring-cyan[b-h153g6crta] {
    background: rgba(24, 200, 248, 0.12);
    border: 1px solid #18C8F8;
    color: #18C8F8;
    box-shadow: 0 0 12px rgba(24, 200, 248, 0.35);
}

.ring-green[b-h153g6crta] {
    background: rgba(0, 208, 132, 0.12);
    border: 1px solid #00D084;
    color: #00FF9D;
    box-shadow: 0 0 12px rgba(0, 208, 132, 0.35);
}

.vm-icon[b-h153g6crta] {
    font-size: 0.95rem;
}

.vm-title[b-h153g6crta] {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.18rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
}

/* السطر الثالث: نص الوصف المريح للعين */
.vm-desc-box[b-h153g6crta] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vm-desc-text[b-h153g6crta] {
    margin: 0;
    font-size: clamp(0.82rem, 1.5vw, 0.92rem);
    line-height: 1.75;
    color: #B4D3E7;
    transition: all 0.35s ease;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   2. الجانب البصري: بطاقة الـ 4 E's (Masterpiece Glass Card)
   -------------------------------------------------------------------------- */
.visual-content-column[b-h153g6crta] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.elite-4e-card[b-h153g6crta] {
    width: 100%;
    max-width: 490px;
    background: linear-gradient(160deg, rgba(7, 24, 40, 0.88) 0%, rgba(4, 13, 22, 0.95) 100%);
    border: 1.5px solid rgba(24, 200, 248, 0.28);
    border-radius: 20px;
    padding: 2.1rem 1.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(24, 200, 248, 0.15);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    .elite-4e-card:hover[b-h153g6crta] {
        border-color: #18C8F8;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(24, 200, 248, 0.3);
        transform: translateY(-4px);
    }

.card-ambient-glow[b-h153g6crta] {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(24, 200, 248, 0.3) 0%, transparent 70%);
    filter: blur(45px);
    pointer-events: none;
}

.card-header-badge[b-h153g6crta] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: #18C8F8;
    background: rgba(24, 200, 248, 0.1);
    padding: 0.28rem 0.8rem;
    border-radius: 20px;
    border: 1px solid rgba(24, 200, 248, 0.25);
    margin-bottom: 0.9rem;
}

.four-e-headline[b-h153g6crta] {
    font-size: clamp(1.18rem, 2.4vw, 1.45rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.35rem 0;
    line-height: 1.35;
}

.four-e-subheadline[b-h153g6crta] {
    font-size: 0.84rem;
    color: #A9CAE0;
    margin: 0 0 1.3rem 0;
    font-weight: 500;
}

.four-e-list[b-h153g6crta] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.e-pillar-item[b-h153g6crta] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.95rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.25s ease;
}

    .e-pillar-item:hover[b-h153g6crta] {
        background: rgba(24, 200, 248, 0.08);
        border-color: rgba(24, 200, 248, 0.3);
        transform: translateX(-4px);
    }

[dir="ltr"] .e-pillar-item:hover[b-h153g6crta] {
    transform: translateX(4px);
}

.e-badge[b-h153g6crta] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #18C8F8 0%, #00D084 100%);
    color: #040c14;
    font-weight: 900;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(24, 200, 248, 0.45);
    font-family: 'Plus Jakarta Sans', monospace;
}

.e-details[b-h153g6crta] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.e-name[b-h153g6crta] {
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

.e-desc[b-h153g6crta] {
    font-size: 0.78rem;
    color: #B4D3E7;
    line-height: 1.4;
    font-weight: 500;
}

.slogan-footer-strip[b-h153g6crta] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(24, 200, 248, 0.16);
    font-size: 0.78rem;
    font-weight: 800;
    color: #18C8F8;
    letter-spacing: 1.6px;
    font-family: 'Plus Jakarta Sans', monospace;
}

.neon-bolt[b-h153g6crta] {
    color: #00FF9D;
    font-size: 0.85rem;
    animation: boltPulse-b-h153g6crta 2s ease-in-out infinite;
}

@keyframes boltPulse-b-h153g6crta {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        text-shadow: 0 0 10px #00FF9D;
    }
}

/* ==========================================================================
   📱 التجاوب مع الأجهزة اللوحية والجوال (خاصة 360x740)
   ========================================================================== */
@media (max-width: 992px) {
    .who-we-are-grid[b-h153g6crta] {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }

    .elite-4e-card[b-h153g6crta] {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .who-we-are-section[b-h153g6crta] {
        padding: 3.2rem 0.85rem; /* حواف محسوبة لشاشات 360px لمنع التماس مع حواف الشاشة */
    }

    .vm-card[b-h153g6crta] {
        padding: 0.95rem 1.05rem;
        border-radius: 14px;
    }

    .vm-title[b-h153g6crta] {
        font-size: 0.98rem;
    }

    .vm-tag-pill[b-h153g6crta] {
        font-size: 0.6rem;
        padding: 0.16rem 0.48rem;
    }

    .elite-4e-card[b-h153g6crta] {
        padding: 1.5rem 1.15rem;
        border-radius: 16px;
    }

    .e-pillar-item[b-h153g6crta] {
        padding: 0.58rem 0.75rem;
        gap: 0.7rem;
    }

    .e-badge[b-h153g6crta] {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    .four-e-headline[b-h153g6crta] {
        font-size: 1.18rem;
    }
}

@media (max-width: 380px) {
    .who-we-are-section[b-h153g6crta] {
        padding: 2.8rem 0.65rem;
    }

    .section-badge-pill[b-h153g6crta] {
        font-size: 0.68rem;
        padding: 0.35rem 0.8rem;
    }

    .section-main-title[b-h153g6crta] {
        font-size: 1.42rem;
    }

    .e-name[b-h153g6crta] {
        font-size: 0.86rem;
    }

    .e-desc[b-h153g6crta] {
        font-size: 0.74rem;
    }
}
/* _content/EliteTechWeb.Web/Components/Sections/WhyElite.razor.rz.scp.css */
/* ==========================================================================
   WHY ELITE SECTION - 6 VALUE PILLARS & NEON GLASSMORPHISM
   ========================================================================== */

.why-elite-section[b-ymc4jzxwnq] {
    padding: 5.5rem 1rem;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
}

.container[b-ymc4jzxwnq] {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.header-content[b-ymc4jzxwnq] {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sub-heading[b-ymc4jzxwnq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent-cyan, #18C8F8);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(24, 200, 248, 0.5));
}

.section-title[b-ymc4jzxwnq] {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 0 25px rgba(100, 232, 255, 0.3);
}

.why-elite-grid[b-ymc4jzxwnq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 2.5rem;
}

.pillar-card-glass[b-ymc4jzxwnq] {
    background: rgba(6, 19, 31, 0.82);
    border: 1px solid rgba(24, 200, 248, 0.22);
    border-radius: 20px;
    padding: 2.2rem 1.8rem;
    text-align: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

    .pillar-card-glass:hover[b-ymc4jzxwnq] {
        border-color: var(--color-accent-cyan, #18C8F8);
        background: rgba(11, 35, 65, 0.92);
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(24, 200, 248, 0.3);
    }

.pillar-icon-box[b-ymc4jzxwnq] {
    width: 62px;
    height: 62px;
    background: rgba(24, 200, 248, 0.1);
    border: 1.5px solid rgba(24, 200, 248, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: var(--color-accent-cyan, #18C8F8);
    margin-bottom: 1.3rem;
    box-shadow: 0 0 16px rgba(24, 200, 248, 0.2);
    transition: all 0.3s ease;
}

.pillar-card-glass:hover .pillar-icon-box[b-ymc4jzxwnq] {
    background: rgba(24, 200, 248, 0.22);
    border-color: #18C8F8;
    box-shadow: 0 0 25px rgba(24, 200, 248, 0.55);
    transform: scale(1.08);
}

.pillar-card-glass h3[b-ymc4jzxwnq] {
    font-size: 1.22rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 0.6rem 0;
    line-height: 1.3;
}

.pillar-card-glass p[b-ymc4jzxwnq] {
    font-size: 0.9rem;
    color: var(--color-text-muted, #B6D5E8);
    line-height: 1.65;
    margin: 0;
}

/* التجاوب */
@media (max-width: 992px) {
    .why-elite-grid[b-ymc4jzxwnq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }
}

@media (max-width: 576px) {
    .why-elite-grid[b-ymc4jzxwnq] {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .why-elite-section[b-ymc4jzxwnq] {
        padding: 3.5rem 0.85rem;
    }
}




/* 🌟 أيقونة مركبة: كف يحمل ترساً */
.fa-custom-hand-gear[b-ymc4jzxwnq] {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    font-style: normal;
    line-height: 1;
}

    /* 1. الكف المفتوح في الأسفل (باللون السماوي) */
    .fa-custom-hand-gear[b-ymc4jzxwnq]::before {
        content: "\f4bd"; /* كود أيقونة fa-hand-holding */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 1.15em;
        color: var(--color-accent-cyan, #18C8F8);
        display: inline-block;
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 2. الترس المستقر فوق راحة اليد (باللون الأخضر النيوني المضيء) */
    .fa-custom-hand-gear[b-ymc4jzxwnq]::after {
        content: "\f013"; /* كود أيقونة الترس fa-gear */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.62em;
        color: var(--color-accent-cyan, #18C8F8);
        display: inline-block;
    }
/* _content/EliteTechWeb.Web/Components/UI/InstallButton.razor.rz.scp.css */
/* ==========================================================================
   🌟 تصميم زجاجي ضبابي ناعم وفاخر (Soft Glassmorphism)
   ========================================================================== */
.pwa-glass-banner[b-47yrcz4neb] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px; /* عرض أنيق وملموم */
    /* 🔴 السر في النعومة: شفافية عالية وتغبيش قوي مع تشبع لوني */
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12); /* إطار مضيء خفيف جداً */
    border-radius: 20px; /* زوايا أكثر نعومة */
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 99999;
    /* ظل ناعم جداً ممتد للأسفل */
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideUpFadeIn-b-47yrcz4neb 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    direction: rtl;
}

@keyframes slideUpFadeIn-b-47yrcz4neb {
    0% {
        opacity: 0;
        transform: translate(-50%, 40px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* 🌟 المحتوى: الصورة والنصوص */
.pwa-banner-content[b-47yrcz4neb] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    min-width: 0;
}

.pwa-app-icon[b-47yrcz4neb] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover; /* cover مهم جداً لصور الموظفين */
    background: #ffffff;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.pwa-app-info[b-47yrcz4neb] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .pwa-app-info h4[b-47yrcz4neb] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pwa-app-info p[b-47yrcz4neb] {
        margin: 0.2rem 0 0 0;
        font-size: 0.75rem;
        color: #94a3b8; /* لون رمادي مزرق مريح */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* 🌟 الأزرار */
.pwa-banner-actions[b-47yrcz4neb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.btn-pwa-install[b-47yrcz4neb] {
    background: linear-gradient(135deg, #18c8f8, #0ea5e9); /* تدرج سماوي ناعم */
    border: none;
    color: #ffffff; /* نص أبيض لتباين أجمل */
    padding: 0.5rem 1.1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 15px rgba(24, 200, 248, 0.3);
    transition: all 0.3s ease;
}

    .btn-pwa-install:hover:not(:disabled)[b-47yrcz4neb] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(24, 200, 248, 0.5);
        filter: brightness(1.1);
    }

    .btn-pwa-install:disabled[b-47yrcz4neb] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-pwa-close[b-47yrcz4neb] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-pwa-close:hover[b-47yrcz4neb] {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.2);
    }

/* 🌟 التجاوب مع الشاشات الصغيرة جداً */
@media (max-width: 380px) {
    .pwa-glass-banner[b-47yrcz4neb] {
        padding: 0.6rem 0.8rem;
        bottom: 16px;
    }

    .pwa-app-icon[b-47yrcz4neb] {
        width: 36px;
        height: 36px;
    }

    .pwa-app-info h4[b-47yrcz4neb] {
        font-size: 0.85rem;
    }

    .pwa-app-info p[b-47yrcz4neb] {
        font-size: 0.65rem;
    }

    .btn-pwa-install[b-47yrcz4neb] {
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
    }
}
/* _content/EliteTechWeb.Web/Components/UI/LanguageSwitcher.razor.rz.scp.css */
/* ==========================================================================
   MICRO FLOATING LANGUAGE SWITCHER - COMPACT LUXURY DOCK (360px READY)
   ========================================================================== */

.lang-switcher[b-44bik1tamz] {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-end: 20px !important;
    z-index: 9999 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

    .lang-switcher.is-cinematic-hidden[b-44bik1tamz] {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(20px) scale(0.85) !important;
    }

.lang-btn[b-44bik1tamz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.9rem;
    background: rgba(6, 19, 31, 0.9) !important;
    border: 1px solid rgba(24, 200, 248, 0.35) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    color: #F8FAFC !important;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(24, 200, 248, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap;
    box-sizing: border-box;
}

    .lang-btn:hover[b-44bik1tamz] {
        background: rgba(11, 35, 65, 0.95) !important;
        border-color: #18C8F8 !important;
        box-shadow: 0 0 25px rgba(24, 200, 248, 0.5) !important;
        color: #64E8FF !important;
        transform: translateY(-2px) scale(1.03) !important;
    }

.neon-globe-icon[b-44bik1tamz] {
    font-size: 0.95rem;
    color: #18C8F8;
    filter: drop-shadow(0 0 6px rgba(24, 200, 248, 0.5));
}

.lang-code-badge[b-44bik1tamz] {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.12rem 0.38rem;
    background: rgba(24, 200, 248, 0.15);
    border: 1px solid rgba(24, 200, 248, 0.3);
    border-radius: 6px;
    color: #18C8F8;
    letter-spacing: 0.5px;
}

/* شاشات الجوال الصغيرة (360px) */
@media (max-width: 480px) {
    .lang-switcher[b-44bik1tamz] {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        inset-inline-end: 14px !important;
    }

    .lang-btn[b-44bik1tamz] {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }

    .lang-text[b-44bik1tamz], .lang-code-badge[b-44bik1tamz] {
        display: none !important;
    }

    .neon-globe-icon[b-44bik1tamz] {
        font-size: 1.15rem !important;
    }
}
/* _content/EliteTechWeb.Web/Components/UI/WhatsAppFloatingButton.razor.rz.scp.css */
/* ==========================================================================
   FLOATING WHATSAPP BUTTON - COMPACT LUXURY DOCK (360px READY)
   ========================================================================== */

.floating-whatsapp-wrapper[b-qsg8x75rcp] {
    position: fixed !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-end: 20px !important;
    z-index: 9998 !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

    .floating-whatsapp-wrapper.is-cinematic-hidden[b-qsg8x75rcp] {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(20px) scale(0.85) !important;
    }

.whatsapp-float-btn[b-qsg8x75rcp] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.95rem;
    background: rgba(6, 19, 31, 0.9) !important;
    border: 1px solid rgba(37, 211, 102, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    color: #FFFFFF !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box;
    white-space: nowrap;
}

    .whatsapp-float-btn:hover[b-qsg8x75rcp] {
        background: rgba(11, 35, 65, 0.95) !important;
        border-color: #25D366 !important;
        box-shadow: 0 0 25px rgba(37, 211, 102, 0.6) !important;
        transform: translateY(-2px) scale(1.03) !important;
    }

.neon-whatsapp-icon[b-qsg8x75rcp] {
    font-size: 1rem;
    color: #25D366;
    filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.6));
}

.whatsapp-text[b-qsg8x75rcp] {
    letter-spacing: 0.3px;
}

/* شاشات الجوال الصغيرة (360px) */
@media (max-width: 480px) {
    .floating-whatsapp-wrapper[b-qsg8x75rcp] {
        bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        inset-inline-end: 14px !important;
    }

    .whatsapp-float-btn[b-qsg8x75rcp] {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }

    .whatsapp-text[b-qsg8x75rcp] {
        display: none !important;
    }

    .neon-whatsapp-icon[b-qsg8x75rcp] {
        font-size: 1.15rem !important;
    }
}