/* * تحديث ألوان الهوية (Deep Navy / Royal Blue) بدون الحاجة لإعادة بناء * Tailwind عبر npm/vite — نفس القيم بالضبط الموجودة الآن في * resources/css/app.css (@theme)، لكن مُعاد تعريفها هنا كملف ثابت يُخدَّم * كما هو مباشرة، فيسري فورًا بعد أي نشر (view:clear فقط)، بدون أي خطوة * بناء. متى ما توفر بناء npm run build حقيقي على جهازك، تصبح هذه القيم * مطابقة لما هو مبني أصلاً في app.css ويمكن حينها حذف هذا الملف بأمان. * * هذا ملف عادي (غير مُغلّف بـ @layer)، وقواعد CSS غير المُغلّفة بطبقة * تتفوق تلقائيًا على أي قاعدة داخل @layer بصرف النظر عن الترتيب أو * التخصيصية — لهذا هذا الملف يضمن الأولوية على مخرجات Tailwind المبنية. */ :root { --color-ink-50: #f8fafc; --color-ink-100: #f1f5f9; --color-ink-200: #e2e8f0; --color-ink-300: #cbd5e1; --color-ink-400: #94a3b8; --color-ink-500: #64748b; --color-ink-600: #475569; --color-ink-700: #334155; --color-ink-800: #1e293b; --color-ink-900: #0f172a; --color-ink-950: #020617; --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-200: #bfdbfe; --color-brand-300: #93c5fd; --color-brand-400: #60a5fa; --color-brand-500: #3b82f6; --color-brand-600: #2563eb; --color-brand-700: #1d4ed8; --color-brand-800: #1e40af; --color-brand-900: #1e3a8a; --color-brand-950: #172554; --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary-950: #172554; --color-accent-50: #eff6ff; --color-accent-100: #dbeafe; --color-accent-400: #60a5fa; --color-accent-500: #3b82f6; --color-accent-600: #2563eb; --color-surface-50: #f8fafc; --color-surface-100: #f1f5f9; --color-surface-800: #1e293b; --color-surface-900: #0f172a; --color-surface-950: #020617; } /* هذه الثلاث قواعد وحدها بالملف الأصلي تكتب قيم hex/rgb حرفيًا داخل جسم القاعدة بدل استخدام var(--color-*)، فتحديث المتغيرات أعلاه وحده لا يصل لها — تُستهدف هنا بنفس أسماء الكلاس المركّبة (compiled) مباشرة. */ .btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%) !important; box-shadow: 0 1px 2px rgb(29 78 216 / 0.2), 0 8px 24px -4px rgb(29 78 216 / 0.35) !important; } .stat-card-accent { background: linear-gradient(145deg, rgb(59 130 246 / 0.08) 0%, rgb(255 255 255 / 0.72) 50%, rgb(255 255 255 / 0.55) 100%) !important; } .dark .stat-card-accent { background: linear-gradient(145deg, rgb(59 130 246 / 0.14) 0%, rgb(15 23 42 / 0.85) 55%, rgb(2 6 23 / 0.95) 100%) !important; } .data-table-wrap.is-loading tbody::after { background: linear-gradient(90deg, transparent, rgb(59 130 246 / 0.06), transparent) !important; } /* * v89 — الشريط العلوي العائم القديم (شعار+اسم/شريحة المتبقي/زر * الإشعارات كوحدة واحدة متوسّطة) اتحذف بالكامل بطلب المستخدم بعد 4 * محاولات توسيط فاشلة (v84 transform، v86-87 flexbox+غلاف خارجي، v88 * auto-margin) — كلها فشلت لسبب لم يتحدد رغم تأكيد صحة الكود وCSS الحي * مطابق تمامًا لما رُفع بكل مرة. بدل تكرار نفس فخ "عنصر fixed يحتاج * توسيطًا أفقيًا"، صار زر الإشعارات وحده زرًا دائريًا صغيرًا مستقلًا * بزاوية واحدة من الشاشة (top+right فقط) — بدون أي توسيط إطلاقًا، وهذا * نمط تموضع بسيط لا يحتاج التوسيط أصلاً فلا يتكرر فيه نفس الخلل. */ .notif-corner-btn { position: fixed; top: calc(1rem + env(safe-area-inset-top)); right: 1rem; z-index: 55; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.85); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px -4px rgb(15 23 42 / 0.14); color: #475569; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .notif-corner-btn:hover { background: rgba(255,255,255,0.95); color: #1d4ed8; } html.dark .notif-corner-btn { border-color: rgba(255,255,255,0.1); background: rgba(15,23,42,0.7); color: #cbd5e1; } html.dark .notif-corner-btn:hover { background: rgba(15,23,42,0.85); color: #fff; } .notif-corner-btn:active { transform: scale(0.94); } .notif-corner-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.5); } html.dark .notif-corner-btn:focus-visible { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px rgba(59,130,246,.55); } html.is-offline .notif-corner-btn { top: calc(2.5rem + env(safe-area-inset-top)); } .notif-corner-dot { position: absolute; top: 0.4rem; left: 0.4rem; width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: #f43f5e; box-shadow: 0 0 0 2px #fff; } html.dark .notif-corner-dot { box-shadow: 0 0 0 2px #0f172a; } /* ============================================================ نظام تفاعل الأزرار الفاخر (v76) — إحساس فيزيائي حقيقي: انزلاق ناعم بالتحويم، ضغط واقعي بالنقر، توهج تركيز واضح، حالتا تعطيل وتحميل. بنفس روح حركة Apple / Linear / Stripe: منحنيات سريعة نظيفة، لا حركات مبالغ فيها. يُحسّن الأزرار المبنية مسبقًا (btn-primary/secondary/danger/ghost) دون المساس بسلوكها، ويضيف نفس المستوى للعناصر التفاعلية الجديدة بهذا التصميم. ============================================================ */ :root { --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-press: cubic-bezier(0.4, 0, 0.2, 1); } .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .notif-corner-btn, .quick-action-item, .dash-list-row, .overview-item, .chart-tab, .dock-item { transition-timing-function: var(--ease-premium) !important; } .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover { box-shadow: 0 4px 14px -2px rgb(15 23 42 / 0.18), 0 12px 28px -8px rgb(15 23 42 / 0.16) !important; } .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-ghost:active { transform: scale(0.96) !important; transition-duration: .1s !important; transition-timing-function: var(--ease-press) !important; } .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-ghost:disabled { cursor: not-allowed !important; transform: none !important; } .btn-ghost { position: relative; } .btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.55); } html.dark .btn-ghost:focus-visible { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px rgba(59,130,246,.6); } /* حالة تحميل عامة — تُفعَّل بإضافة data-loading على أي زر إجراء (بدون أي تغيير على منطق الإرسال نفسه، فقط مؤشر بصري + منع نقر مزدوج). */ [data-loading] { position: relative; color: transparent !important; pointer-events: none; } [data-loading]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; border-radius: 9999px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: btn-spin .6s linear infinite; } .btn-secondary[data-loading]::after, .btn-ghost[data-loading]::after { border-color: rgba(37,99,235,.25); border-top-color: #2563eb; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* بطاقات/صفوف/تبويبات تفاعلية جديدة — نفس إحساس الضغط الفيزيائي. */ .quick-action-item:active .quick-action-circle { transform: scale(0.92) !important; } .dash-list-row:active, .overview-item:active { transform: scale(0.985); } .chart-tab:active { transform: scale(0.95); } /* v114 — عنصر تنقل واحد فقط (لا يوجد شريطان بعد الآن). كان التصميم السابق (v113) يستخدم عنصرَي