/* ═══════════════════════════════════════════════════════════════════════════ ✦ VexLap Pro · طبقة تصميم احترافية (v5.1) تُحمَّل بعد style.css و Bootstrap → تُجمّل كل الصفحات بشكل متناسق دون كسر أي كود قائم. هوية لونية ذكية تتكيّف مع نوع الحساب (data-role) + جرافيك، حركة راقية، وعمق زجاجي على طراز لوحات التحكم الاحترافية. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1) تحديث التوكنز (ألوان أنقى + ظلال أنعم + تدرّجات إشارة) ───────────────────────────────────────────────────────────── */ :root { /* العلامة الأساسية — كحلي عميق راقٍ */ --vx-primary: #1e3a8a; --vx-primary-dark: #16306f; --vx-primary-light: #2f50ad; --vx-primary-soft: #eaeefb; /* لون الإشارة الافتراضي (يتبدّل حسب الحساب) */ --vx-accent: #2563eb; --vx-accent-dark: #1d4ed8; --vx-accent-soft: #e8efff; /* لون هوية الحساب — يُستخدم في الشرائط والإضاءات */ --vx-role: #2563eb; --vx-role-2: #3b82f6; --vx-role-soft: #e8efff; --vx-role-glow: rgba(37,99,235,.30); --vx-success: #0ea371; --vx-success-soft: #ddf6ec; --vx-warning: #e08a00; --vx-warning-soft: #fdf0d8; --vx-danger: #e23b3b; --vx-danger-soft: #fde4e4; --vx-info: #2563eb; --vx-info-soft: #e8efff; /* خلفيات أنظف */ --vx-bg: #eef1f8; --vx-bg-card: #ffffff; --vx-bg-hover: #f1f4fc; --vx-bg-elevated:#f9fbff; --vx-text: #111a33; --vx-text-muted: #5b657c; --vx-text-light: #8f97ab; --vx-border: #dbe2f0; --vx-border-light: #eceff7; /* ظلال متعدّدة الطبقات (أنعم + أعمق) */ --vx-shadow-sm: 0 1px 2px rgba(17,26,51,.05), 0 1px 3px rgba(17,26,51,.05); --vx-shadow: 0 2px 6px rgba(17,26,51,.05), 0 8px 22px rgba(17,26,51,.07); --vx-shadow-md: 0 6px 16px rgba(17,26,51,.07), 0 18px 44px rgba(17,26,51,.10); --vx-shadow-lg: 0 12px 30px rgba(17,26,51,.10), 0 32px 70px rgba(17,26,51,.16); --vx-shadow-primary: 0 6px 18px var(--vx-role-glow); /* تدرّجات */ --vx-gradient-primary: linear-gradient(135deg, #2f50ad 0%, #1e3a8a 100%); --vx-gradient-accent: linear-gradient(135deg, var(--vx-role-2) 0%, var(--vx-role) 100%); --vx-gradient-dark: linear-gradient(165deg, #233a78 0%, #14213d 70%, #0e1830 100%); --vx-gradient-role: linear-gradient(135deg, var(--vx-role-2) 0%, var(--vx-role) 100%); --vx-radius-sm: 9px; --vx-radius: 13px; --vx-radius-lg: 18px; --vx-radius-xl: 26px; } /* ── هوية لونية لكل نوع حساب (تظهر تلقائياً عبر data-role على ) ── */ :root[data-role="admin"] { --vx-accent:#2563eb; --vx-accent-dark:#1d4ed8; --vx-accent-soft:#e8efff; --vx-role:#2563eb; --vx-role-2:#3b82f6; --vx-role-soft:#e8efff; --vx-role-glow:rgba(37,99,235,.30); } :root[data-role="superadmin"] { --vx-accent:#7c3aed; --vx-accent-dark:#6d28d9; --vx-accent-soft:#f1e9fe; --vx-role:#7c3aed; --vx-role-2:#a855f7; --vx-role-soft:#f1e9fe; --vx-role-glow:rgba(124,58,237,.32); } :root[data-role="teacher"] { --vx-accent:#0d9488; --vx-accent-dark:#0f766e; --vx-accent-soft:#d9f5f1; --vx-role:#0d9488; --vx-role-2:#14b8a6; --vx-role-soft:#d9f5f1; --vx-role-glow:rgba(13,148,136,.30); } :root[data-role="supervisor"] { --vx-accent:#0891b2; --vx-accent-dark:#0e7490; --vx-accent-soft:#d6f3fb; --vx-role:#0891b2; --vx-role-2:#06b6d4; --vx-role-soft:#d6f3fb; --vx-role-glow:rgba(8,145,178,.30); } :root[data-role="security"] { --vx-accent:#4f46e5; --vx-accent-dark:#4338ca; --vx-accent-soft:#e8e7fd; --vx-role:#4f46e5; --vx-role-2:#6366f1; --vx-role-soft:#e8e7fd; --vx-role-glow:rgba(79,70,229,.30); } :root[data-role="parent"] { --vx-accent:#0284c7; --vx-accent-dark:#0369a1; --vx-accent-soft:#dcf0fe; --vx-role:#0284c7; --vx-role-2:#0ea5e9; --vx-role-soft:#dcf0fe; --vx-role-glow:rgba(2,132,199,.30); } /* ───────────────────────────────────────────────────────────── 2) أجواء الخلفية — عمق ناعم خلف لوحة التحكم بالكامل ───────────────────────────────────────────────────────────── */ body { position: relative; background: var(--vx-bg); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 92% -8%, var(--vx-role-soft), transparent 60%), radial-gradient(900px 560px at -6% 8%, rgba(30,58,138,.07), transparent 60%), radial-gradient(800px 800px at 50% 120%, rgba(17,26,51,.05), transparent 55%); opacity: .9; } .main { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────── 3) الشريط الجانبي — لمسة فاخرة ───────────────────────────────────────────────────────────── */ .sidebar { background: var(--vx-gradient-dark); box-shadow: -1px 0 0 rgba(255,255,255,.05), -22px 0 60px rgba(17,26,51,.16); } .sidebar::after { /* وهج خفيف بلون الحساب أعلى الشريط */ content:""; position:absolute; top:0; right:0; left:0; height:160px; pointer-events:none; background: radial-gradient(420px 160px at 80% 0%, var(--vx-role-glow), transparent 70%); opacity:.5; } .sb-brand { padding: 22px 20px 20px; } .sb-brand .icon { background: var(--vx-gradient-role); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 6px 18px var(--vx-role-glow), inset 0 1px 0 rgba(255,255,255,.25); border-radius: 13px; } .sb-brand h6 { letter-spacing: -.3px; } .sb-section { color:#8893ad; letter-spacing:.12em; } .sb-link { border-radius: 11px; font-weight: 600; color:#cdd4e6; } .sb-link i { transition: transform .25s cubic-bezier(.34,1.4,.5,1); opacity:.92; } .sb-link:hover { background: rgba(255,255,255,.07); color:#fff; transform: translateX(-2px); } .sb-link:hover i { transform: scale(1.12); } .sb-link.active { background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); color:#fff; font-weight:700; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .sb-link.active::before { /* مؤشر بلون الحساب على الحافة (RTL = يمين) */ content:""; position:absolute; top:50%; right:-12px; transform: translateY(-50%); width:4px; height:62%; border-radius:0 4px 4px 0; background: var(--vx-gradient-role); box-shadow: 0 0 14px var(--vx-role-glow); } .sb-link.active i { color:#fff; } /* ───────────────────────────────────────────────────────────── 4) الشريط العلوي الزجاجي ───────────────────────────────────────────────────────────── */ .topbar { background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid rgba(17,26,51,.07); box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 30px -22px rgba(17,26,51,.5); } .topbar-title { letter-spacing: -.02em; } .topbar-title i { color: var(--vx-role) !important; } .notify-bell, .lang-toggle, .mobile-menu-btn { border-radius: 12px; border: 1px solid var(--vx-border-light); background: var(--vx-bg-card); color: var(--vx-text-muted); transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s; } .notify-bell:hover, .lang-toggle:hover, .mobile-menu-btn:hover { color: var(--vx-role); border-color: var(--vx-role); background: var(--vx-role-soft); box-shadow: 0 4px 12px var(--vx-role-glow); } .notify-bell:active, .lang-toggle:active, .mobile-menu-btn:active { transform: scale(.94); } .lang-toggle .lang-label { font-weight: 700; letter-spacing:.4px; } .badge-dot { box-shadow: 0 0 0 2px var(--vx-bg-card); } /* ───────────────────────────────────────────────────────────── 5) البطاقات ───────────────────────────────────────────────────────────── */ .card, .stat-card { border: 1px solid var(--vx-border-light); border-radius: var(--vx-radius-lg); box-shadow: var(--vx-shadow-sm); transition: box-shadow .28s cubic-bezier(.28,.11,.32,1), transform .28s cubic-bezier(.28,.11,.32,1), border-color .28s; } .card { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 90px), var(--vx-bg-card); } .card:hover { box-shadow: var(--vx-shadow); border-color: var(--vx-border); } .card-head { font-weight: 700; letter-spacing: -.01em; } .card-head i { color: var(--vx-role); } /* ───────────────────────────────────────────────────────────── 6) بطاقات الإحصائيات — جرافيك راقٍ ───────────────────────────────────────────────────────────── */ .stat-card { position: relative; isolation: isolate; } .stat-card::before { /* شريط لون علوي */ content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--vx-gradient-role); opacity:.9; } .stat-card::after { /* توهّج خلفي خفيف */ content:""; position:absolute; z-index:-1; top:-40px; left:-30px; width:130px; height:130px; border-radius:50%; background: var(--vx-role-soft); opacity:.55; filter: blur(4px); } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px -16px var(--vx-role-glow), var(--vx-shadow-md); } .stat-icon { background: var(--vx-gradient-role); color:#fff; border-radius: 14px; box-shadow: 0 8px 18px -6px var(--vx-role-glow), inset 0 1px 0 rgba(255,255,255,.3); } .stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing:-.03em; } /* تلوين أيقونات الإحصائيات حسب الفئة لو وُجدت كلاسات الألوان */ .stat-icon.bg-primary-soft, .stat-icon.icon-primary { background: var(--vx-gradient-role); } .stat-icon.bg-success-soft, .stat-icon.icon-success { background: linear-gradient(135deg,#22c08a,#0ea371); } .stat-icon.bg-warning-soft, .stat-icon.icon-warning { background: linear-gradient(135deg,#f6ad2b,#e08a00); } .stat-icon.bg-danger-soft, .stat-icon.icon-danger { background: linear-gradient(135deg,#f15b5b,#e23b3b); } .stat-icon.bg-info-soft, .stat-icon.icon-info { background: linear-gradient(135deg,#3b82f6,#2563eb); } .stat-ring .ri-num { font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────── 7) الجداول ───────────────────────────────────────────────────────────── */ .tbl, table.table { border-collapse: separate; border-spacing: 0; } .tbl thead, table.table thead { background: linear-gradient(180deg, var(--vx-bg-elevated), #fff); } .tbl th, table.table > thead > tr > th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--vx-text-muted); font-weight: 700; border-bottom: 1.5px solid var(--vx-border); } .tbl td { font-variant-numeric: tabular-nums; } .tbl tbody tr { transition: background .15s, box-shadow .15s; } .tbl tbody tr:hover { background: var(--vx-role-soft); box-shadow: inset 3px 0 0 var(--vx-role); } [dir="rtl"] .tbl tbody tr:hover { box-shadow: inset -3px 0 0 var(--vx-role); } .tbl-wrap, .table-responsive { border-radius: var(--vx-radius); } /* ───────────────────────────────────────────────────────────── 8) الأزرار — تتغلّب على Bootstrap بالـ specificity ───────────────────────────────────────────────────────────── */ .btn { border-radius: var(--vx-radius-pill, 980px); font-weight: 600; letter-spacing:-.01em; transition: background .2s, color .2s, box-shadow .2s, transform .12s, filter .2s; position: relative; overflow: hidden; } .btn:active { transform: scale(.97); } .btn.btn-primary { background: var(--vx-gradient-role); border: none; color:#fff; box-shadow: 0 6px 18px -4px var(--vx-role-glow), inset 0 1px 0 rgba(255,255,255,.2); } .btn.btn-primary:hover, .btn.btn-primary:focus { filter: brightness(1.06); color:#fff; box-shadow: 0 10px 26px -6px var(--vx-role-glow), inset 0 1px 0 rgba(255,255,255,.25); } .btn.btn-success { background: linear-gradient(135deg,#22c08a,#0ea371); border:none; color:#fff; box-shadow: 0 6px 16px -5px rgba(14,163,113,.4); } .btn.btn-success:hover { filter: brightness(1.05); color:#fff; } .btn.btn-danger { background: linear-gradient(135deg,#f15b5b,#e23b3b); border:none; color:#fff; box-shadow: 0 6px 16px -5px rgba(226,59,59,.4); } .btn.btn-danger:hover { filter: brightness(1.05); color:#fff; } .btn.btn-warning { background: linear-gradient(135deg,#f6ad2b,#e08a00); border:none; color:#fff; } .btn.btn-warning:hover { filter: brightness(1.05); color:#fff; } .btn.btn-outline-primary { border:1.5px solid var(--vx-role); color: var(--vx-role); background: transparent; } .btn.btn-outline-primary:hover { background: var(--vx-role); color:#fff; box-shadow: 0 6px 16px -6px var(--vx-role-glow); } .btn.btn-light, .btn.btn-outline-secondary { border:1px solid var(--vx-border); background: var(--vx-bg-card); color: var(--vx-text); } .btn.btn-light:hover, .btn.btn-outline-secondary:hover { background: var(--vx-bg-hover); border-color: var(--vx-border); } /* وميض راقٍ يمر على الأزرار الأساسية عند المرور */ .btn.btn-primary::after, .btn.btn-success::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-130%); transition: transform .6s cubic-bezier(.3,.1,.3,1); } .btn.btn-primary:hover::after, .btn.btn-success:hover::after { transform: translateX(130%); } /* ───────────────────────────────────────────────────────────── 9) الفورم ───────────────────────────────────────────────────────────── */ .form-control, .form-select { border-radius: var(--vx-radius); border: 1.5px solid var(--vx-border); background: var(--vx-bg-card); transition: border-color .18s, box-shadow .18s, background .18s; } .form-control:focus, .form-select:focus { border-color: var(--vx-role); background:#fff; box-shadow: 0 0 0 4px var(--vx-role-soft); } .form-control::placeholder { color: var(--vx-text-light); } label, .form-label { font-weight: 600; color: var(--vx-text); } /* ───────────────────────────────────────────────────────────── 10) البادچات والوسوم ───────────────────────────────────────────────────────────── */ .badge { border-radius: 980px; font-weight: 700; letter-spacing:0; padding: .4em .75em; } .badge.bg-primary { background: var(--vx-role) !important; } .chip { border:1px solid var(--vx-border-light); box-shadow: var(--vx-shadow-sm); } /* ───────────────────────────────────────────────────────────── 11) المودال / التوست / لوحة الإشعارات ───────────────────────────────────────────────────────────── */ .modal-content { border-radius: var(--vx-radius-lg); box-shadow: var(--vx-shadow-lg); } .modal-header { background: linear-gradient(180deg, var(--vx-bg-elevated), #fff); } .modal-title i { color: var(--vx-role); } .toast-msg { border-radius: var(--vx-radius); box-shadow: var(--vx-shadow-lg); border:1px solid var(--vx-border-light); } .notify-panel { border-radius: var(--vx-radius-lg); box-shadow: var(--vx-shadow-lg); border:1px solid var(--vx-border-light); overflow:hidden; } .notify-panel-head { background: linear-gradient(180deg, var(--vx-bg-elevated), #fff); } .notify-item.unread { background: var(--vx-role-soft); } .notify-readall { color: var(--vx-role); } /* ───────────────────────────────────────────────────────────── 12) صفحة تسجيل الدخول — تجربة فاخرة + شفق متحرّك ───────────────────────────────────────────────────────────── */ .auth-wrap { background: radial-gradient(1200px 700px at 78% -12%, var(--vx-role-soft), transparent 60%), radial-gradient(1000px 620px at 6% 108%, rgba(30,58,138,.10), transparent 60%), linear-gradient(160deg, #f4f7fe 0%, #e9eef9 60%, #e3e9f6 100%); overflow: hidden; } .auth-wrap::before, .auth-wrap::after { /* كتل شفق ناعمة تطفو */ content:""; position:absolute; border-radius:50%; filter: blur(70px); opacity:.45; z-index:0; pointer-events:none; animation: vxFloat 16s ease-in-out infinite; } .auth-wrap::before { width:520px; height:520px; top:-160px; right:-120px; background: var(--vx-gradient-role); } .auth-wrap::after { width:460px; height:460px; bottom:-180px; left:-120px; background: linear-gradient(135deg,#1e3a8a,#2f50ad); animation-delay:-8s; } @keyframes vxFloat { 0%,100% { transform: translateY(0) translateX(0) scale(1);} 50% { transform: translateY(28px) translateX(-18px) scale(1.06);} } .auth-card { position: relative; z-index: 1; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px); border: 1px solid rgba(255,255,255,.7); border-radius: var(--vx-radius-xl); box-shadow: 0 30px 70px -30px rgba(17,26,51,.45), 0 2px 0 rgba(255,255,255,.6) inset; padding: 42px 34px; animation: vxAuthIn .6s cubic-bezier(.2,.8,.25,1) both; } @keyframes vxAuthIn { from { opacity:0; transform: translateY(18px) scale(.985);} to { opacity:1; transform:none;} } .auth-logo { width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 22px; display:flex; align-items:center; justify-content:center; font-size: 2.4rem; background: var(--vx-gradient-role); color:#fff; box-shadow: 0 14px 30px -10px var(--vx-role-glow), inset 0 1px 0 rgba(255,255,255,.35); } .auth-title { background: linear-gradient(120deg, var(--vx-text), #2f50ad 60%, var(--vx-role)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing:-.04em; } .auth-input-wrap .form-control { padding-top: 12px; padding-bottom: 12px; } .auth-input-wrap:focus-within .icon { color: var(--vx-role); } .auth-btn { font-weight: 700; letter-spacing:-.01em; } .auth-btn i { transition: transform .25s cubic-bezier(.34,1.4,.5,1); } .auth-btn:hover i.bi-arrow-left { transform: translateX(-4px); } .auth-btn:hover i.bi-arrow-right { transform: translateX(4px); } /* ───────────────────────────────────────────────────────────── 13) المساعد الذكي العائم (تناغم مع الهوية) ───────────────────────────────────────────────────────────── */ #vxAiFab { background: var(--vx-gradient-role) !important; box-shadow: 0 12px 30px -8px var(--vx-role-glow), 0 2px 8px rgba(17,26,51,.18) !important; } #vxAiFab::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--vx-role); opacity:.35; animation: vxPulse 2.4s ease-out infinite; } @keyframes vxPulse { 0% { transform: scale(1); opacity:.4;} 100% { transform: scale(1.45); opacity:0;} } /* ───────────────────────────────────────────────────────────── 14) دخول العناصر للمشهد (Stagger) — راقٍ وسريع ───────────────────────────────────────────────────────────── */ @keyframes vxRise { from { opacity:.001; transform: translateY(14px);} to { opacity:1; transform:none;} } .main .content > .row > [class*="col-"], .main .content > .card, .main .content > .stat-card, .main .content .stat-card { animation: vxRise .5s cubic-bezier(.2,.8,.25,1) both; } .main .content .stat-card:nth-child(1){ animation-delay:.02s; } .main .content .stat-card:nth-child(2){ animation-delay:.07s; } .main .content .stat-card:nth-child(3){ animation-delay:.12s; } .main .content .stat-card:nth-child(4){ animation-delay:.17s; } .main .content .stat-card:nth-child(5){ animation-delay:.22s; } .main .content .stat-card:nth-child(6){ animation-delay:.27s; } /* ───────────────────────────────────────────────────────────── 15) عناصر مساعدة + شريط المعاينة (impersonation) ───────────────────────────────────────────────────────────── */ .brand-gradient { background: var(--vx-gradient-role); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } a { color: var(--vx-role); } a:hover { color: var(--vx-accent-dark); } ::selection { background: var(--vx-role-soft); color: var(--vx-text); } ::-webkit-scrollbar-thumb { background: rgba(17,26,51,.2); background-clip: content-box; } /* احترام تقليل الحركة */ @media (prefers-reduced-motion: reduce) { .auth-wrap::before, .auth-wrap::after, #vxAiFab::after { animation: none; } .auth-card, .main .content .stat-card, .main .content > .card { animation: none; } .btn.btn-primary::after, .btn.btn-success::after { display:none; } } /* ═══════════════════════════════════════════════════════ 🔄 تنقّل ناعم بين الصفحات (View Transitions) القائمة الجانبية تفضل ثابتة ومتعملش "refresh" بصري عند الضغط على أي رابط، والمحتوى بس هو اللي بيتبدّل بسلاسة. (يشتغل على Chrome/Edge؛ غير كده تنقّل عادي) ═══════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } /* المحتوى الرئيسي: كروس-فيد سريع */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } /* القائمة الجانبية: عنصر "ثابت" — يفضل مكانه من غير وميض/تحديث */ .sidebar { view-transition-name: vx-sidebar; } ::view-transition-group(vx-sidebar) { animation-duration: .001s; } ::view-transition-old(vx-sidebar), ::view-transition-new(vx-sidebar) { animation: none; mix-blend-mode: normal; height: 100%; } /* احترام تقليل الحركة */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ═══════════════════════════════════════════════════════ 📱 تنسيق الهاتف — Mobile Responsive ═══════════════════════════════════════════════════════ */ /* ─── القائمة الجانبية على الهاتف ─── */ @media (max-width: 768px) { /* القائمة تتحوّل لـ drawer من الجانب */ .sidebar { position: fixed !important; top: 0; right: -280px; bottom: 0; width: 260px !important; z-index: 1055; transition: right .28s cubic-bezier(.4,0,.2,1); box-shadow: none; } .sidebar.open { right: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); } /* المحتوى الرئيسي يأخذ الشاشة كاملة */ .main { width: 100% !important; min-width: 0; } .d-flex { flex-direction: column; } /* الـ Topbar */ .topbar { padding: 10px 14px !important; gap: 6px; flex-wrap: wrap; } .topbar .page-title { font-size: .95rem !important; } /* زرار فتح القائمة على الهاتف */ .btn-menu-toggle { display: flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--vx-role-soft, #eff6ff); border: 1.5px solid var(--vx-border, #e2e8f0); border-radius: 10px; cursor: pointer; color: var(--vx-role, #2563eb); font-size: 1.1rem; } /* الجداول: تمرير أفقي */ .table-responsive, .table { width: 100%; overflow-x: auto; } table.table { min-width: 540px; font-size: .82rem; } /* البطاقات الإحصائية */ .stat-cards-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; gap: 10px; } .stat-card { min-width: 140px !important; flex: 0 0 140px; } /* الـ Content */ .content { padding: 12px !important; } /* الأزرار في المودالات تتكدّس */ .modal-footer { flex-wrap: wrap; gap: 6px; } .modal-footer .btn { flex: 1 1 auto; } /* الـ Cards */ .row.g-3 .col-md-6, .row.g-3 .col-md-4, .row.g-3 .col-xl-4 { width: 100% !important; } /* إخفاء النص الطويل في الجداول */ .d-none-mobile { display: none !important; } /* الفورمات */ .row.g-2 .col-md-6, .row.g-2 .col-md-4, .row.g-2 .col-md-3 { width: 100% !important; } } /* ─── تابلت (769px - 1024px) ─── */ @media (min-width: 769px) and (max-width: 1024px) { .sidebar { width: 200px !important; } .stat-card { min-width: 130px; } table.table { font-size: .85rem; } } /* ─── زرار القائمة: مخفي على الكمبيوتر ─── */ .btn-menu-toggle { display: none; } /* ─── Overlay لإغلاق السيدبار على الهاتف ─── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1054; } @media (max-width: 768px) { .sidebar.open ~ .sidebar-overlay, .sidebar.open + .sidebar-overlay { display: block; } } /* زرار الهامبرغر: يظهر على الهاتف */ @media (max-width: 768px) { .mobile-menu-btn { display: flex !important; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--vx-role-soft, #eff6ff); border: 1.5px solid var(--vx-border, #e2e8f0); border-radius: 10px; cursor: pointer; color: var(--vx-role, #2563eb); font-size: 1.2rem; } } @media (min-width: 769px) { .mobile-menu-btn { display: none !important; } } /* ═══════════════════════════════════════════════════════ 📱 صفحة الدخول على الهاتف ═══════════════════════════════════════════════════════ */ @media (max-width: 576px) { .auth-wrap { padding: 16px !important; overflow: hidden; } .auth-wrap::before { width: 260px !important; height: 260px !important; top: -80px; right: -60px; } .auth-wrap::after { width: 220px !important; height: 220px !important; bottom: -80px; left: -60px; } .auth-card { padding: 24px 18px !important; border-radius: 18px !important; max-width: 100% !important; } .auth-logo { width: 62px !important; height: 62px !important; font-size: 1.9rem !important; } .auth-title { font-size: 1.5rem !important; } .auth-subtitle { font-size: .82rem !important; } .auth-btn { padding: 11px !important; font-size: .95rem !important; } .auth-input-wrap .form-control { font-size: .95rem !important; } html, body { overflow-x: hidden; } } .broadcast-bar .bc-text { flex: 1; } .broadcast-bar .bc-close { background: rgba(255,255,255,.22); border: none; color: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: .75rem; flex-shrink: 0; } @media (max-width: 576px) { .broadcast-bar { font-size: .82rem; padding: 7px 12px; } } /* ═══════════════════════════════════════════════════════ 🔒 Safety: منع النص المخفي (gradient text في مكان غلط) ═══════════════════════════════════════════════════════ */ /* فقط نعيد -webkit-text-fill-color للقيمة الطبيعية في منطقة المحتوى (دون لمس color عشان الألوان المتعمدة فضل تشتغل — أزرار، بادجات، إلخ) */ .main .content td, .main .content th, .main .content label, .main .content .form-label, .main .content p:not([class]), .main .content h1, .main .content h2, .main .content h3, .main .content h4, .main .content h5, .main .content h6 { -webkit-text-fill-color: currentColor; } /* ─── broadcast bar: التصميم + موبايل ─── */ .broadcast-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, var(--vx-role), var(--vx-role-2)); color: #fff; padding: 9px 16px; font-size: .88rem; font-weight: 600; position: sticky; top: 0; z-index: 1040; box-shadow: 0 2px 10px -4px var(--vx-role-glow); } .broadcast-bar .bc-text { flex: 1; } .broadcast-bar .bc-close { background: rgba(255,255,255,.22); border: none; color: #fff; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: .75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 576px) { .broadcast-bar { font-size: .82rem; padding: 7px 12px; } }