/* ============================================================================= Mega-Menu / App Launcher Grid (V25) ============================================================================= قرار تصميم متعمّد: القوائم المنسدلة الحالية (.nav-hover-menu / .hover-item / .item-icon) عندها Cascade قديم كثيف فى static/style.css (تعريفات متكررة بـ !important فى أكتر من مكان، منها ألوان الوضع الداكن). بدل ما نلمس أو نستبدل الكلاسات القديمة دي (خطر حقيقي على شاشات تانية ممكن تستخدمها لسه)، أضفنا كلاس اختياري جديد "mm-grid" على حاويات القوائم المطلوب تحويلها للشكل الجديد بس - أي قائمة قديمة ماخدتش الكلاس ده بتفضل شغالة بشكلها الأصلي 100%. الألوان هنا كلها متغيرات العلامة الموحّدة (--nile-green...) بنسب شفافية 5%/10% بالظبط زي ما هو مطلوب - صفر ألوان عشوائية خارج نظام التصميم. هذا الملف لازم يتحمّل بعد static/style.css فى (الترتيب فى base.html). ============================================================================= */ .nav-hover-menu.mm-grid.menu-open:not(.mega-menu){ display: grid !important; grid-template-columns: repeat(3, minmax(80px, 1fr)) !important; gap: 6px !important; width: 296px !important; } .nav-hover-menu.mm-grid:not(.mega-menu) .dropdown-header-title{ grid-column: 1 / -1 !important; } .nav-hover-menu.mm-grid.mega-menu.menu-open{ width: auto !important; min-width: 300px !important; } .nav-hover-menu.mm-grid .mega-col{ display: grid !important; grid-template-columns: repeat(3, minmax(76px, 1fr)) !important; gap: 6px !important; align-content: start !important; } .nav-hover-menu.mm-grid .mega-col .dropdown-header-title{ grid-column: 1 / -1 !important; } /* البلاطة نفسها: أيقونة فى شارة دائرية فوق + تسمية تحتها فى النص - الحالة الأساسية (Resting): سطح رمادي هادي + شارة أيقونة بتلوين خفيف 5% من لون العلامة + نص رمادي غامق. */ .nav-hover-menu.mm-grid .hover-item{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; padding: 10px 4px !important; min-height: 72px !important; border-radius: 12px !important; background: var(--surface-alt) !important; color: var(--text-dim) !important; border: 1px solid transparent !important; font-size:0.6875rem !important; font-weight: 700 !important; line-height: 1.25 !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease !important; } .nav-hover-menu.mm-grid .hover-item .item-icon{ width: 34px !important; height: 34px !important; border-radius: 50% !important; background: rgba(46,168,78,.05) !important; color: var(--nile-green-dark) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; transition: transform .15s ease, background .15s ease !important; } /* حالة التحويم (Hover): ظل ارتفاع + خلفية بلون العلامة 10% + حدّ لون العلامة + تكبير خفيف للأيقونة. */ .nav-hover-menu.mm-grid .hover-item:hover{ background: rgba(46,168,78,.10) !important; border-color: rgba(46,168,78,.35) !important; color: var(--nile-green-deep) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px -4px rgba(15,23,42,.18) !important; } .nav-hover-menu.mm-grid .hover-item:hover .item-icon{ background: rgba(46,168,78,.14) !important; transform: scale(1.08) !important; } /* الحالة النشطة (Active): تظليل كامل بلون العلامة الأساسي. */ .nav-hover-menu.mm-grid .hover-item.active{ background: var(--nile-green) !important; color: #fff !important; border-color: var(--nile-green) !important; box-shadow: none !important; font-weight: 800 !important; } .nav-hover-menu.mm-grid .hover-item.active .item-icon{ background: rgba(255,255,255,.24) !important; color: #fff !important; } [data-theme="dark"] .nav-hover-menu.mm-grid .hover-item{ background: var(--surface-alt) !important; color: var(--text) !important; } [data-theme="dark"] .nav-hover-menu.mm-grid .hover-item .item-icon{ background: rgba(46,168,78,.14) !important; } [data-theme="dark"] .nav-hover-menu.mm-grid .hover-item:hover{ background: rgba(46,168,78,.20) !important; color: #fff !important; } [data-theme="dark"] .nav-hover-menu.mm-grid .hover-item.active{ background: var(--nile-green) !important; color: #fff !important; }