/* ===== نظام تصميم متتبّع الضمانات (عربي RTL) — من docs/design-system.md ===== الوضع الفاتح افتراضي على :root، والوضع الداكن يُعيد تعريف نفس المتغيّرات عبر [data-bs-theme="dark"] (يضبطه سكربت مبكر في ثم زر التبديل). */ /* ===== التباين (WCAG 2.2 AA) ===== كل زوج «نص/خلفية» أدناه محسوب: ≥ 4.5:1 للنص، و≥ 3:1 للعناصر الرسومية (حدود الحقول، أعمدة الرسوم). لون ممتلئ مع نص أبيض يجب أن يكون داكناً بما يكفي؛ لذا يحمل الوضع الداكن نصاً داكناً (--wt-on-*) فوق الألوان الفاتحة بدل الأبيض. عند إضافة لون جديد: احسب تباينه في الوضعين قبل استخدامه. */ :root { --wt-primary: #1E40AF; /* أبيض عليه 8.72:1 */ --wt-primary-hover: #1E3A8A; --wt-primary-rgb: 30, 64, 175; --wt-on-primary: #FFFFFF; --wt-primary-fg: #1E40AF; /* الأساسي كنص/رابط/زر محدَّد فوق الأسطح (لا كتعبئة) */ --wt-accent: #047857; /* أبيض عليه 5.48:1 (كان #059669 = 3.77:1 ✗) */ --wt-success-hover: #065F46; --wt-on-accent: #FFFFFF; --wt-background: #F8FAFC; --wt-card: #FFFFFF; --wt-foreground: #0F172A; --wt-muted: #E9EEF5; --wt-muted-fore: #475569; /* على البطاقة 7.58:1 */ --wt-border: #BFDBFE; /* ألوان دلالية للنص والأيقونات والأزرار المحدَّدة (Outline) — ≥ 4.5:1 على البطاقة والخلفية */ --wt-success-fg: #047857; --wt-warning-fg: #92400E; /* #ffc107 الافتراضي على الأبيض 1.63:1 ✗؛ هذا ≥ 5.9:1 حتى على #E9ECEF */ --wt-danger-fg: #B91C1C; --wt-secondary-fg: #475569; --wt-on-fill: #FFFFFF; /* نص فوق خلفية ممتلئة بأحد الألوان الدلالية أعلاه */ /* بطاقات الإحصاء الناعمة (خلفية + لون المحتوى) */ --wt-soft-primary-bg: #E0E7FF; --wt-soft-primary-fg: var(--wt-primary); --wt-soft-success-bg: #D1FAE5; --wt-soft-success-fg: #047857; --wt-soft-warning-bg: #FEF3C7; --wt-soft-warning-fg: #B45309; --wt-soft-danger-bg: #FEE2E2; --wt-soft-danger-fg: #B91C1C; --wt-soft-secondary-bg: #F1F5F9; --wt-soft-secondary-fg: #475569; --wt-soft-info-bg: #CFFAFE; --wt-soft-info-fg: #0E7490; /* لوحة ألوان الرسوم البيانية (مصدر واحد تقرؤه reports.js، وتتبدّل مع السمة). كل لون ≥ 4.5:1 على البطاقة، ويُكمَّل بنقش مختلف لكل سلسلة فلا يُعتمد على اللون وحده. */ --wt-chart-1: #1E40AF; --wt-chart-2: #047857; --wt-chart-3: #B45309; --wt-chart-4: #7C3AED; --wt-chart-5: #B91C1C; --wt-chart-6: #0E7490; --wt-chart-7: #BE185D; --wt-chart-8: #4D7C0F; --wt-chart-pattern: rgba(255, 255, 255, .55); /* لون الظلال (rgb) + تدرّج شاشة المصادقة + وميض الهيكل */ --wt-shadow-rgb: 15, 23, 42; --wt-auth-grad-1: #1E40AF; --wt-auth-grad-2: #1E3A8A; --wt-sk-shine: #F2F6FB; /* الشكل والتخطيط: مقياس واحد لأنصاف الأقطار والظلال بدل قيم متفرّقة (تتبدّل الظلال مع --wt-shadow-rgb) */ --wt-radius-sm: .5rem; /* حقول صغيرة، هياكل التحميل */ --wt-radius-md: .6rem; /* عناصر القوائم والتبويبات والأيقونات */ --wt-radius-lg: .9rem; /* البطاقات والأشرطة */ --wt-shadow-sm: 0 1px 2px rgba(var(--wt-shadow-rgb), .04); --wt-shadow-md: 0 4px 12px rgba(var(--wt-shadow-rgb), .07); --wt-topbar-h: 58px; /* ارتفاع الشريط العلوي الملتصق: إزاحة العناصر الملتصقة وأهداف المراسي */ --bs-primary: #1E40AF; --bs-primary-rgb: 30, 64, 175; } /* ===== الوضع الليلي ===== */ [data-bs-theme="dark"] { --wt-primary: #3B82F6; /* نص داكن عليه 5.09:1 (الأبيض كان 3.68:1 ✗) */ --wt-primary-hover: #60A5FA; --wt-primary-rgb: 59, 130, 246; --wt-on-primary: #0B1220; /* #3B82F6 كنص على سطح Bootstrap الداكن (#212529 للبطاقات والنوافذ) = 4.19:1 ✗ ⇒ درجة أفتح للنص */ --wt-primary-fg: #60A5FA; --wt-accent: #10B981; /* نص داكن عليه 7.38:1 (الأبيض كان 2.54:1 ✗) */ --wt-success-hover: #34D399; --wt-on-accent: #0B1220; --wt-background: #0B1220; --wt-card: #131C2E; --wt-foreground: #E5EAF2; --wt-muted: #1E293B; --wt-muted-fore: #A5B4C8; /* ≥ 5.4:1 على كل أسطح الوضع الداكن (حتى #343A40) */ --wt-border: #2A3A55; /* ألوان Bootstrap الدلالية (#dc3545/#198754/#6c757d) على بطاقة داكنة ≈ 3.7:1 ✗ */ --wt-success-fg: #34D399; --wt-warning-fg: #FBBF24; --wt-danger-fg: #FCA5A5; --wt-secondary-fg: #A5B4C8; --wt-on-fill: #0B1220; --wt-soft-primary-bg: rgba(59, 130, 246, .16); --wt-soft-primary-fg: #93C5FD; --wt-soft-success-bg: rgba(16, 185, 129, .16); --wt-soft-success-fg: #6EE7B7; --wt-soft-warning-bg: rgba(217, 119, 6, .18); --wt-soft-warning-fg: #FCD34D; --wt-soft-danger-bg: rgba(220, 38, 38, .18); --wt-soft-danger-fg: #FCA5A5; --wt-soft-secondary-bg: rgba(148, 163, 184, .16); --wt-soft-secondary-fg: #CBD5E1; --wt-soft-info-bg: rgba(6, 182, 212, .16); --wt-soft-info-fg: #67E8F9; --wt-chart-1: #60A5FA; --wt-chart-2: #34D399; --wt-chart-3: #FBBF24; --wt-chart-4: #A78BFA; --wt-chart-5: #F87171; --wt-chart-6: #22D3EE; --wt-chart-7: #F472B6; --wt-chart-8: #A3E635; --wt-chart-pattern: rgba(11, 18, 32, .5); --wt-shadow-rgb: 0, 0, 0; --wt-auth-grad-1: #0F1D3A; --wt-auth-grad-2: #0B1220; --wt-sk-shine: #26324c; --bs-primary: #3B82F6; --bs-primary-rgb: 59, 130, 246; } /* لا نفرض حجم خط الجذر بالبكسل: 100% تحترم حجم الخط الذي اختاره المستخدم في متصفحه (WCAG 1.4.4)، وكل المقاسات بوحدة rem فتتدرّج معه. */ html { font-size: 100%; } body { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; background-color: var(--wt-background); color: var(--wt-foreground); line-height: 1.5; /* شبكة أمان: يمنع أي تمرّر/إزاحة أفقية (مثل القوائم المنسدلة قرب الحافة). clip بدل hidden للحفاظ على position: sticky للشريط العلوي والجانبي. */ overflow-x: clip; } h1, h2, h3, h4, h5, .navbar-brand { font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif; } /* أزرار وروابط أساسية بلون الثقة — لون النص مصرَّح به في كل حالة (عادي/مرور/ضغط/معطّل) كي لا يرث Bootstrap الأبيض فوق لون فاتح في الوضع الداكن. */ .btn-primary { --bs-btn-color: var(--wt-on-primary); --bs-btn-bg: var(--wt-primary); --bs-btn-border-color: var(--wt-primary); --bs-btn-hover-color: var(--wt-on-primary); --bs-btn-hover-bg: var(--wt-primary-hover); --bs-btn-hover-border-color: var(--wt-primary-hover); --bs-btn-active-color: var(--wt-on-primary); --bs-btn-active-bg: var(--wt-primary-hover); --bs-btn-active-border-color: var(--wt-primary-hover); --bs-btn-disabled-color: var(--wt-on-primary); --bs-btn-disabled-bg: var(--wt-primary); --bs-btn-disabled-border-color: var(--wt-primary); --bs-btn-focus-shadow-rgb: var(--wt-primary-rgb); } .btn-success { --bs-btn-color: var(--wt-on-accent); --bs-btn-bg: var(--wt-accent); --bs-btn-border-color: var(--wt-accent); --bs-btn-hover-color: var(--wt-on-accent); --bs-btn-hover-bg: var(--wt-success-hover); --bs-btn-hover-border-color: var(--wt-success-hover); --bs-btn-active-color: var(--wt-on-accent); --bs-btn-active-bg: var(--wt-success-hover); --bs-btn-active-border-color: var(--wt-success-hover); --bs-btn-disabled-color: var(--wt-on-accent); --bs-btn-disabled-bg: var(--wt-accent); --bs-btn-disabled-border-color: var(--wt-accent); } /* الأزرار المحدَّدة (Outline): ألوان Bootstrap ثابتة لا تتكيّف مع الوضع الداكن (≈ 3.7:1 على البطاقة)، وoutline-warning غير مقروء على الأبيض (1.63:1). نربطها برموز السمة؛ والتعبئة عند المرور بنص --wt-on-fill. */ .btn-outline-primary { --wt-btn-tone: var(--wt-primary-fg); --wt-btn-on: var(--wt-on-primary); } .btn-outline-success { --wt-btn-tone: var(--wt-success-fg); --wt-btn-on: var(--wt-on-fill); } .btn-outline-danger { --wt-btn-tone: var(--wt-danger-fg); --wt-btn-on: var(--wt-on-fill); } .btn-outline-warning { --wt-btn-tone: var(--wt-warning-fg); --wt-btn-on: var(--wt-on-fill); } .btn-outline-secondary { --wt-btn-tone: var(--wt-secondary-fg); --wt-btn-on: var(--wt-on-fill); } .btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-secondary { --bs-btn-color: var(--wt-btn-tone); --bs-btn-border-color: var(--wt-btn-tone); --bs-btn-hover-color: var(--wt-btn-on); --bs-btn-hover-bg: var(--wt-btn-tone); --bs-btn-hover-border-color: var(--wt-btn-tone); --bs-btn-active-color: var(--wt-btn-on); --bs-btn-active-bg: var(--wt-btn-tone); --bs-btn-active-border-color: var(--wt-btn-tone); --bs-btn-disabled-color: var(--wt-btn-tone); --bs-btn-disabled-border-color: var(--wt-btn-tone); } a { color: var(--wt-primary-fg); } .text-primary { color: var(--wt-primary-fg) !important; } /* نصوص وأيقونات دلالية بألوان مقروءة في الوضعين (بدل ألوان Bootstrap الثابتة) */ .text-success { color: var(--wt-success-fg) !important; } .text-warning { color: var(--wt-warning-fg) !important; } .text-danger { color: var(--wt-danger-fg) !important; } /* تركيز لوحة المفاتيح ظاهر دائماً (لا يختفي مع أي تنسيق مخصّص) */ :focus-visible { outline: 2px solid var(--wt-primary-fg); outline-offset: 2px; } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: none; /* Bootstrap يرسم حلقة box-shadow خاصة بهذه العناصر */ } /* الحركات ناعمة — خصائص محدَّدة لا «all» (لا تُحرَّك الأبعاد ولا تُشغَّل إعادة التخطيط) */ .btn, .nav-link, .badge { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .card { transition: box-shadow .18s ease-in-out; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ===== رابط «تخطَّ إلى المحتوى» (يظهر عند التركيز بلوحة المفاتيح فقط) ===== */ .wt-skip-link { position: fixed; top: .5rem; inset-inline-start: .5rem; z-index: 1090; padding: .6rem 1rem; border-radius: .5rem; background: var(--wt-primary); color: var(--wt-on-primary) !important; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(var(--wt-shadow-rgb), .25); } /* الهدف يستقبل التركيز برمجياً فقط؛ لا حاجة لحلقة حول المحتوى كله */ #main-content:focus { outline: none; } /* ===== شريط تقدّم التنقل (تغذية راجعة لكل انتقال صفحة أو إرسال نموذج) ===== */ .wt-nav-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 1095; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, var(--wt-primary), transparent); background-size: 50% 100%; background-repeat: no-repeat; } .wt-nav-progress.is-active { opacity: 1; animation: wt-nav-progress 1.1s ease-in-out infinite; } @keyframes wt-nav-progress { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } } @media (prefers-reduced-motion: reduce) { /* بلا حركة: شريط ثابت يكفي كإشارة */ .wt-nav-progress.is-active { background: var(--wt-primary); } } /* ===== زر أثناء الإرسال (يمنع الإرسال المزدوج) ===== */ .btn.wt-is-busy { position: relative; pointer-events: none; } .btn.wt-is-busy .wt-btn-spinner { margin-inline-end: .35rem; } /* ===== ملخّص أخطاء النموذج ===== */ .wt-error-summary:focus { outline: 2px solid var(--wt-danger-fg); outline-offset: 2px; } .wt-error-summary a { color: inherit; font-weight: 600; } .field-validation-error { display: block; margin-top: .25rem; } /* ===== تقدّم رفع الملفات ===== */ .wt-upload-progress { height: .6rem; } .wt-upload-progress .progress-bar { transition: width .2s linear; } /* أثناء تبديل السمة: نُعطّل كل الانتقالات لحظياً كي يتبدّل الوضع فوراً ومتزامناً (يمنع «الوميض» الناتج عن تحرّك بعض العناصر تدريجياً وبقيّتها فوراً). */ .wt-theme-switching, .wt-theme-switching *, .wt-theme-switching *::before, .wt-theme-switching *::after { transition: none !important; } /* ===== الهيكل: شريط علوي + جانبي + محتوى ===== */ .wt-topbar { background: var(--wt-card); border-bottom: 1px solid var(--wt-muted); box-shadow: 0 1px 3px rgba(var(--wt-shadow-rgb), .04); } .wt-shell { display: flex; min-height: calc(100vh - var(--wt-topbar-h)); } .wt-sidebar { width: 250px; flex-shrink: 0; background: var(--wt-card); border-inline-start: 1px solid var(--wt-muted); } @media (min-width: 992px) { .wt-sidebar { position: sticky; top: var(--wt-topbar-h); height: calc(100vh - var(--wt-topbar-h)); } } .wt-sidebar .nav-link { color: var(--wt-muted-fore); border-radius: var(--wt-radius-md); font-weight: 500; padding: .6rem .9rem; } .wt-sidebar .nav-link:hover { background: var(--wt-muted); color: var(--wt-foreground); } .wt-sidebar .nav-link.active { background: var(--wt-primary); color: var(--wt-on-primary); } .wt-main { flex: 1 1 auto; min-width: 0; } /* ===== البطاقات ===== */ .card { border: 1px solid var(--wt-muted); border-radius: var(--wt-radius-lg); box-shadow: var(--wt-shadow-sm); } .card:hover { box-shadow: var(--wt-shadow-md); } /* بطاقات الإحصاء */ .wt-stat { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; } .wt-stat .wt-stat-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: .8rem; font-size: 1.5rem; flex-shrink: 0; } .wt-stat .wt-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; } .wt-stat .wt-stat-label { color: var(--wt-muted-fore); font-size: .9rem; } /* الجوال (< 576px): بطاقتان في الصف لا تتّسعان لأيقونة 52px بجانب النص (تنكسر التسمية على 3 أسطر والقيمة على سطرين)؛ فتعلو الأيقونة النص بحجم أصغر ويأخذ النص عرض البطاقة كاملاً. */ @media (max-width: 575.98px) { .wt-stat { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem 1rem; } .wt-stat .wt-stat-icon, .wt-stat .wt-sk-circle { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; border-radius: var(--wt-radius-md); } .wt-stat .wt-stat-value { font-size: 1.35rem; } .wt-stat .wt-stat-label { font-size: .85rem; } .wt-stat > .flex-fill { align-self: stretch; } } /* بطاقة إحصاء ثانوية مضغوطة (أيقونة + رقم + تسمية): ثلاث في الصف دائماً؛ على الجوال تتكدّس في الوسط بدل ثلاثة صفوف شبه فارغة */ .wt-mini-stat { display: flex; align-items: center; gap: 1rem; } .wt-mini-stat .wt-mini-stat-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; } @media (max-width: 575.98px) { .wt-mini-stat { flex-direction: column; justify-content: center; gap: .35rem; padding: .85rem .5rem; text-align: center; } .wt-mini-stat .wt-mini-stat-icon { font-size: 1.4rem; } .wt-mini-stat > .flex-fill { align-self: stretch; } } .bg-soft-primary { background: var(--wt-soft-primary-bg); color: var(--wt-soft-primary-fg); } .bg-soft-success { background: var(--wt-soft-success-bg); color: var(--wt-soft-success-fg); } .bg-soft-warning { background: var(--wt-soft-warning-bg); color: var(--wt-soft-warning-fg); } .bg-soft-danger { background: var(--wt-soft-danger-bg); color: var(--wt-soft-danger-fg); } .bg-soft-secondary { background: var(--wt-soft-secondary-bg); color: var(--wt-soft-secondary-fg); } .bg-soft-info { background: var(--wt-soft-info-bg); color: var(--wt-soft-info-fg); } /* الشارات */ .badge { font-weight: 600; padding: .4em .7em; } /* ===== زر تبديل السمة (فاتح / داكن / تلقائي) ===== */ .wt-theme-toggle { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; line-height: 1; } .wt-theme-toggle i { font-size: 1.15rem; } /* نسخة عائمة تظهر في شاشة تسجيل الدخول (لا يوجد شريط علوي هناك) */ .wt-theme-toggle-float { position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 1050; box-shadow: 0 2px 8px rgba(var(--wt-shadow-rgb), .18); } /* ===== شاشة المصادقة ===== */ .wt-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg, var(--wt-auth-grad-1) 0%, var(--wt-auth-grad-2) 100%); } .wt-auth-card { width: 100%; max-width: 430px; margin-inline: auto; background: var(--wt-card); border-radius: 1.1rem; box-shadow: 0 20px 50px rgba(var(--wt-shadow-rgb), .25); padding: 2rem; } /* بطاقات بدل الجداول على الجوال */ .wt-mobile-card { display: none; } @media (max-width: 767.98px) { .wt-table-wrap { display: none; } .wt-mobile-card { display: block; } } /* ===== جدول متجاوب «مكدّس» (wt-stack-table) ===== ترميز واحد للجدول (بلا نسخة ثانية للجوال تُضاعف DOM والمعرّفات): دون 768px يصير كل صف بطاقة، وكل خلية سطراً يسبقه عنوان عمودها من data-label. الترويسة تُخفى بصرياً وتبقى لقارئات الشاشة. */ @media (max-width: 767.98px) { .wt-stack-table { min-width: 0 !important; table-layout: auto !important; } .wt-stack-table > thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } .wt-stack-table, .wt-stack-table > tbody, .wt-stack-table > tbody > tr, .wt-stack-table > tbody > tr > td { display: block; width: 100% !important; } .wt-stack-table > tbody > tr { border: 1px solid var(--wt-muted); border-radius: .75rem; padding: .5rem .75rem; margin-bottom: .75rem; background: var(--wt-card); } .wt-stack-table > tbody > tr > td { border: 0 !important; padding: .35rem 0 !important; text-align: start !important; background: transparent !important; } .wt-stack-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--wt-muted-fore); margin-bottom: .1rem; } .wt-stack-table > tbody > tr.table-danger { border-color: var(--wt-danger-fg); border-inline-start-width: 4px; } .wt-stack-table > tbody > tr > td.wt-stack-actions { padding-top: .6rem !important; } .wt-stack-table > tbody > tr > td.wt-stack-actions .btn-group { flex-wrap: wrap; } .wt-stack-table .wt-col-time, .wt-stack-table .wt-col-ip { white-space: normal; } } /* أزرار الأيقونات في الجداول: هدف لمس كافٍ على الشاشات اللمسية */ @media (pointer: coarse) { .btn-group-sm > .btn, .btn-sm.wt-icon-btn { min-width: 2.75rem; min-height: 2.75rem; } } /* ===== جدول سجل التدقيق ===== */ /* يملأ عرض البطاقة ببنية شبكية واضحة: رأس مميّز، فواصل صفوف، تظليل متناوب، أعمدة بعرض ثابت متوازن، والعمود المرن (الحدث) يمتصّ المساحة المتبقية. */ .wt-audit-table { table-layout: fixed; width: 100%; min-width: 780px; /* دون هذا الحد يظهر تمرير أفقي (table-responsive) بدل انسحاق الأعمدة */ } /* محاذاة يمين موحّدة (بداية RTL) للرؤوس والخلايا معاً — كي يتطابق كل عنوان فوق محتواه؛ خلايا dir="ltr" (الوقت/IP/البريد) تبقى بترتيب أحرف LTR لكن بمحاذاة يمين فلا ينزاح محتواها عن رأسه. */ .wt-audit-table > thead > tr > th, .wt-audit-table > tbody > tr > td { text-align: right; vertical-align: middle; } /* رأس مميّز بخلفية ثانوية حسب مرجع التصميم (--wt-muted) */ .wt-audit-table > thead > tr > th { background: var(--wt-muted); color: var(--wt-muted-fore); font-weight: 600; font-size: .8125rem; white-space: nowrap; border-bottom: 2px solid var(--wt-border); } /* تظليل متناوب + فواصل خفيفة لتتبّع الصفوف بصرياً */ .wt-audit-table > tbody > tr:nth-of-type(odd):not(.table-danger) > td { background: rgba(var(--wt-shadow-rgb), .025); } .wt-audit-table > tbody > tr > td { border-top: 1px solid var(--wt-border); } .wt-audit-table > tbody > tr:hover:not(.table-danger) > td { background: rgba(var(--wt-primary-rgb), .06); } /* أعراض الأعمدة (rem كي تتناسب مع حجم الخط) */ .wt-audit-table .wt-col-time { width: 11.5rem; white-space: nowrap; } .wt-audit-table .wt-col-cat { width: 8rem; } .wt-audit-table .wt-col-actor { width: 15rem; } .wt-audit-table .wt-col-ip { width: 8.5rem; } .wt-audit-table .wt-col-event { width: auto; } /* الوقت وIP بخط أحادي لمحاذاة رقمية أنيقة */ .wt-audit-table .wt-col-time, .wt-audit-table .wt-col-ip { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; } /* كسر السلاسل الطويلة (بريد/معرّفات GUID) داخل خليتها بدل تمدّد الجدول */ .wt-audit-table .wt-col-actor, .wt-audit-table .wt-col-event, .wt-audit-table .wt-col-ip { word-break: break-word; } /* ===== سجل الأخطاء ===== */ /* أعمدة جدول الأخطاء (تُكمّل أنماط .wt-audit-table المشتركة) */ .wt-audit-table .wt-col-status { width: 6rem; } .wt-audit-table .wt-col-level { width: 7.5rem; } .wt-audit-table .wt-col-path { width: 16rem; word-break: break-word; } /* زرّ كشف الأثر: يرث لون النص ويُظهر حلقة تركيز واضحة (إتاحة) */ .wt-trace-toggle { border: 0; background: transparent; padding: .1rem .25rem; font: inherit; color: var(--wt-primary-fg); cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; } .wt-trace-toggle .bi { transition: transform .2s ease; } .wt-trace-toggle[aria-expanded="true"] .bi-chevron-left { transform: rotate(-90deg); } /* صندوق الأثر الكامل: أحادي المسافة، LTR، قابل للتمرير، بخلفية داكنة خفيفة للتباين */ .wt-trace-box { margin: .5rem 0 0; padding: .75rem 1rem; max-height: 22rem; overflow: auto; background: #0f172a; color: #e2e8f0; border-radius: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; } @media (prefers-reduced-motion: reduce) { .wt-trace-toggle .bi { transition: none; } } /* أدوات */ .wt-empty { text-align: center; color: var(--wt-muted-fore); padding: 3rem 1rem; } .wt-empty i { font-size: 3rem; opacity: .5; } .cursor-pointer { cursor: pointer; } /* نقطة لون بجانب اسم التصنيف في فلتر التقارير */ .wt-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: middle; background: var(--wt-muted); } /* لوحة فلتر التقارير المنسدلة (تبقى مضغوطة مهما كثُرت العناصر) */ .wt-filter-menu { min-width: 15rem; } .wt-filter-list { max-height: 15rem; overflow-y: auto; } .wt-filter-list .form-check { margin-bottom: .15rem; } .wt-filter-list .form-check-label { cursor: pointer; } .wt-filter-action { min-height: 2rem; padding-inline: .35rem; } .wt-chart-scroll { overflow-x: auto; } .wt-chart-frame { position: relative; height: 18rem; min-width: 100%; } .wt-chart-frame.wt-chart-medium { min-width: max(100%, 44rem); height: 21rem; } .wt-chart-frame.wt-chart-wide { min-width: max(100%, 64rem); height: 25rem; } .wt-chart-frame.wt-chart-very-wide { min-width: max(100%, 88rem); height: 31rem; } .wt-report-data summary { color: var(--wt-primary-fg); cursor: pointer; font-weight: 600; } @media (pointer: coarse) { .wt-filter-action { min-height: 2.75rem; padding-inline: .5rem; } .wt-filter-list .form-check { min-height: 2.75rem; display: flex; align-items: center; } } .table > :not(caption) > * > * { padding: .75rem .75rem; } .form-label { font-weight: 600; font-size: .92rem; } /* ===== هيكل التحميل (Skeleton) — يظهر ريثما تصل البيانات على الشبكة الضعيفة ===== */ .wt-skeleton { --wt-sk-base: var(--wt-muted); /* --wt-sk-shine يأتي من :root ويتبدّل حسب السمة */ display: inline-block; width: 100%; height: 1rem; border-radius: .5rem; background-color: var(--wt-sk-base); /* الوميض يمرّ من اليسار لليمين ليناسب اتجاه RTL */ background-image: linear-gradient(90deg, var(--wt-sk-base) 0%, var(--wt-sk-shine) 50%, var(--wt-sk-base) 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: wt-shimmer 1.4s ease-in-out infinite; } .wt-sk-line { height: .85rem; } .wt-sk-line.sm { width: 40%; } .wt-sk-line.md { width: 65%; } .wt-sk-line.lg { width: 85%; } .wt-sk-circle { width: 52px; height: 52px; border-radius: .8rem; flex-shrink: 0; } .wt-sk-btn { height: 2rem; width: 4.5rem; border-radius: .5rem; } @keyframes wt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* منطقة تُحمَّل بـ AJAX أثناء انتظارها */ .wt-load[aria-busy="true"] { position: relative; } /* عند تعطيل JavaScript لا يظهر هيكل تحميل سيبقى بلا نهاية؛ تظهر رسالة noscript بدلاً منه. */ html:not(.wt-js) .wt-load > .wt-skeleton-shell { display: none; } /* حالة تعذّر التحميل */ .wt-load-error { text-align: center; color: var(--wt-muted-fore); padding: 2.5rem 1rem; } .wt-load-error i { font-size: 2.5rem; opacity: .6; display: block; margin-bottom: .5rem; color: var(--wt-soft-warning-fg); } /* ===== صفحات الحالة (404/403/500…) ===== */ .wt-status-icon { font-size: 3rem; display: block; line-height: 1; } /* حقول مضغوطة في صفوف القوائم (بدل سمات style المضمّنة) */ .wt-category-name { max-width: 17.5rem; } .wt-threshold-days { max-width: 7rem; } .wt-reminder-done { color: var(--wt-muted-fore); } .wt-reminder-done .fw-semibold { text-decoration: line-through; text-decoration-thickness: 1px; } .wt-progress-sm { height: .75rem; } @media (min-width: 768px) { .wt-col-quota { min-width: 12.5rem; } } /* مصغّرات مرفقات المنتج في صفحة الفاتورة */ .wt-att-thumb { width: 100%; height: 110px; object-fit: cover; } .btn.wt-is-busy .bi { display: none; } /* table-responsive للتمرير الأفقي فقط: overflow-x:auto يجعل المحور العمودي auto أيضاً، فيصير أي تقريب كسري للارتفاع (1px) منطقة تمرير عمودي لا يصلها مستخدم لوحة المفاتيح. الجداول هنا بلا ارتفاع ثابت فلا تحتاجه. */ .table-responsive { overflow-y: hidden; } /* ===================================================================================== بنية المعلومات والمكوّنات المشتركة (docs/design-system.md §8–§9) ===================================================================================== */ /* ===== القائمة الجانبية: أقسام ومجموعات (SidebarViewComponent) ===== */ .wt-nav-section-title { margin: 0; padding: 1rem 1.5rem .35rem; font-size: .8125rem; font-weight: 700; color: var(--wt-muted-fore); } .wt-nav-group-title { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .7rem 1.5rem .3rem; font-family: 'Cairo', system-ui, sans-serif; font-size: .75rem; font-weight: 600; color: var(--wt-muted-fore); } /* خط خافت يمتدّ بعد عنوان المجموعة: يفصل المجموعات بصرياً دون أن ينافس الروابط */ .wt-nav-group-title::after { content: ""; flex: 1; border-top: 1px solid var(--wt-muted); } .wt-nav-list { padding: 0 1rem; margin: 0; } .wt-nav-divider { margin: .75rem 1rem 0; border-color: var(--wt-muted); opacity: 1; } /* ===== قائمة الحساب ===== */ .wt-account-menu { min-width: 14rem; } .wt-account-menu-header { white-space: normal; color: var(--wt-muted-fore); } .wt-account-menu .dropdown-item.active, .wt-account-menu .dropdown-item:active { background: var(--wt-primary); color: var(--wt-on-primary); } /* ===== رأس الصفحة الموحّد (_PageHeader) + مسار التنقل ===== */ .wt-page-header { margin-bottom: 1.5rem; } .wt-page-header-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; } .wt-page-header-text { min-width: 0; } .wt-page-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; font-size: calc(1.3rem + .6vw); /* مقياس h3 في Bootstrap نفسه */ font-weight: 700; line-height: 1.3; } @media (min-width: 1200px) { .wt-page-title { font-size: 1.75rem; } } .wt-page-title-icon { color: var(--wt-primary-fg); font-size: .9em; flex-shrink: 0; } .wt-page-subtitle { margin: 0; color: var(--wt-muted-fore); max-width: 70ch; } .wt-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .wt-breadcrumb { /* ‹ تشير إلى اتجاه التقدّم في RTL (من الأعلى يميناً إلى الصفحة الحالية يساراً) */ --bs-breadcrumb-divider: '‹'; --bs-breadcrumb-divider-color: var(--wt-muted-fore); --bs-breadcrumb-item-active-color: var(--wt-foreground); --bs-breadcrumb-margin-bottom: .5rem; font-size: .875rem; } .wt-breadcrumb .breadcrumb-item { color: var(--wt-muted-fore); } .wt-breadcrumb .breadcrumb-item.active { font-weight: 600; } .wt-breadcrumb a { color: var(--wt-muted-fore); text-decoration: none; } .wt-breadcrumb a:hover { color: var(--wt-primary-fg); text-decoration: underline; } /* ===== ترويسة البطاقة الموحّدة ===== */ .wt-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .85rem 1.25rem; background: transparent; border-bottom: 1px solid var(--wt-muted); } .wt-card-title { margin: 0; font-size: 1rem; font-weight: 700; } .wt-card-subtitle { margin: .2rem 0 0; font-size: .875rem; color: var(--wt-muted-fore); } /* ===== بطاقة إحصاء كرابط (اختصار فلترة) ===== */ .wt-stat-link { color: inherit; text-decoration: none; } .wt-stat-link:hover { color: inherit; border-color: var(--wt-border); } /* ===== «أقسام الإدارة» في نظرة المنصّة ===== */ .wt-shortcut { display: flex; flex-direction: row; /* ‎.card عمودي افتراضياً في Bootstrap */ align-items: center; gap: 1rem; padding: 1rem 1.25rem; color: inherit; text-decoration: none; transition: box-shadow .18s ease-in-out, border-color .18s ease-in-out; } .wt-shortcut:hover { color: inherit; border-color: var(--wt-border); } .wt-shortcut-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--wt-radius-md); font-size: 1.25rem; } .wt-shortcut-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .wt-shortcut-group { font-size: .75rem; font-weight: 600; color: var(--wt-muted-fore); } .wt-shortcut-title { font-weight: 700; color: var(--wt-foreground); } .wt-shortcut-desc { font-size: .875rem; color: var(--wt-muted-fore); } .wt-shortcut-chevron { color: var(--wt-muted-fore); transition: transform .15s ease-in-out; } .wt-shortcut:hover .wt-shortcut-chevron { transform: translateX(-3px); } /* ===== صفحة الإعدادات: فهرس أقسام + أقسام + شريط حفظ ===== */ .wt-settings-nav { display: flex; flex-wrap: wrap; gap: .25rem; } .wt-settings-nav-link { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; /* هدف لمس ≥ 44px */ padding: .5rem .85rem; border-radius: var(--wt-radius-md); color: var(--wt-muted-fore); font-weight: 500; text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out; } .wt-settings-nav-link:hover { background: var(--wt-muted); color: var(--wt-foreground); } .wt-settings-nav-link.active { background: var(--wt-soft-primary-bg); color: var(--wt-soft-primary-fg); font-weight: 600; } @media (min-width: 992px) { .wt-settings-nav { flex-direction: column; position: sticky; top: calc(var(--wt-topbar-h) + 1.5rem); } } /* هدف المرساة لا يختبئ تحت الشريط العلوي الملتصق */ .wt-settings-section { scroll-margin-top: calc(var(--wt-topbar-h) + 1rem); } .wt-context-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 1.25rem; padding: .75rem 1rem; background: var(--wt-muted); border-radius: var(--wt-radius-md); } .wt-context-strip dt { font-size: .8125rem; font-weight: 500; color: var(--wt-muted-fore); } .wt-context-strip dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } /* وضع العرض فقط: الحقل للقراءة (يُركَّز ويُنسخ) ومميَّز عن المعطَّل — خلفية ثانوية وحدّ متقطّع، والنص بلونه الكامل */ .wt-form-readonly .form-control[readonly] { background-color: var(--wt-muted); border-style: dashed; cursor: default; } .wt-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.5rem; padding: .85rem 1.25rem; background: var(--wt-card); border: 1px solid var(--wt-muted); border-radius: var(--wt-radius-lg); box-shadow: 0 -4px 16px rgba(var(--wt-shadow-rgb), .08); } /* نموذج تعديل الفاتورة قد يطول بعدة منتجات؛ إجراءات الحفظ تبقى متاحة على شاشة الجوال. */ @media (max-width: 991.98px) { .wt-invoice-edit-form { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); } .wt-invoice-edit-actions { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; padding-block: .625rem calc(.625rem + env(safe-area-inset-bottom)); padding-inline: max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-left)); background: var(--wt-card); border-top: 1px solid var(--wt-border); box-shadow: 0 -4px 16px rgba(var(--wt-shadow-rgb), .12); } .wt-invoice-edit-actions .btn { min-height: 2.75rem; } .wt-invoice-edit-actions .btn-primary { flex: 1 1 auto; } } /* قائمة «مفتاح: قيمة» للقراءة فقط (سياسات الأمان) */ .wt-kv-row { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: .25rem 1.5rem; padding: .75rem 0; border-top: 1px solid var(--wt-muted); } .wt-kv-row:first-child { border-top: 0; padding-top: 0; } .wt-kv-row:last-child { padding-bottom: 0; } .wt-kv dt { font-weight: 600; } .wt-kv dd { margin: 0; color: var(--wt-muted-fore); } @media (max-width: 575.98px) { .wt-kv-row { grid-template-columns: 1fr; } } /* ===== إعدادات الحساب: بطاقة الهوية + التبويبات ===== */ .wt-account-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.25rem; } .wt-account-avatar { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; font-size: 1.4rem; } .wt-account-name { min-width: 0; } .wt-account-tabs { padding: 0 1.25rem; border-top: 1px solid var(--wt-muted); } .wt-account-tabs .nav-underline { --bs-nav-underline-gap: 1.5rem; --bs-nav-underline-link-active-color: var(--wt-primary-fg); } .wt-account-tabs .nav-link { display: flex; align-items: center; min-height: 2.75rem; padding: .75rem 0; color: var(--wt-muted-fore); } .wt-account-tabs .nav-link:hover { color: var(--wt-foreground); } .wt-account-tabs .nav-link.active { color: var(--wt-primary-fg); font-weight: 700; } /* ===== أدوات صغيرة (بدل سمات style المضمّنة) ===== */ .wt-currency-combobox { position: relative; } .wt-currency-toggle { display: flex; align-items: center; width: 100%; min-height: 2.75rem; text-align: right; color: var(--wt-foreground); background-color: var(--wt-card); border-color: var(--wt-border); } .wt-currency-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wt-currency-panel { position: absolute; top: calc(100% + .25rem); left: 0; z-index: 1080; width: max(100%, min(22rem, calc(100vw - 2rem))); padding: .75rem; background: var(--wt-card); color: var(--wt-foreground); border: 1px solid var(--wt-border); border-radius: var(--wt-radius-md); box-shadow: 0 12px 28px rgba(var(--wt-shadow-rgb), .18); } .wt-currency-options { max-height: min(18rem, 45vh); overflow-y: auto; } .wt-currency-option { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--wt-radius-sm); cursor: pointer; } .wt-currency-option:hover, .wt-currency-option:focus-visible, .wt-currency-option[aria-selected="true"] { color: var(--wt-soft-primary-fg); background: var(--wt-soft-primary-bg); } .wt-currency-empty { padding: .75rem; color: var(--wt-muted-fore); } .wt-progress-lg { height: 1.25rem; } .wt-steps { line-height: 2; } .wt-qr { max-width: 200px; } .wt-code-text { letter-spacing: .1em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .wt-hero-icon { font-size: 2.5rem; } .wt-sk-circle-sm { width: 2.5rem; height: 2.5rem; border-radius: var(--wt-radius-md); } @media (prefers-reduced-motion: reduce) { .wt-shortcut:hover .wt-shortcut-chevron { transform: none; } } /* ===== عرض أشرطة التقدّم (ProgressWidth.CssClass) ===== أصناف بدل سمة style المضمّنة: CSP لا تسمح بالأنماط المضمّنة (لا 'unsafe-inline' في style-src). */ .wt-w-0 { width: 0%; } .wt-w-1 { width: 1%; } .wt-w-2 { width: 2%; } .wt-w-3 { width: 3%; } .wt-w-4 { width: 4%; } .wt-w-5 { width: 5%; } .wt-w-6 { width: 6%; } .wt-w-7 { width: 7%; } .wt-w-8 { width: 8%; } .wt-w-9 { width: 9%; } .wt-w-10 { width: 10%; } .wt-w-11 { width: 11%; } .wt-w-12 { width: 12%; } .wt-w-13 { width: 13%; } .wt-w-14 { width: 14%; } .wt-w-15 { width: 15%; } .wt-w-16 { width: 16%; } .wt-w-17 { width: 17%; } .wt-w-18 { width: 18%; } .wt-w-19 { width: 19%; } .wt-w-20 { width: 20%; } .wt-w-21 { width: 21%; } .wt-w-22 { width: 22%; } .wt-w-23 { width: 23%; } .wt-w-24 { width: 24%; } .wt-w-25 { width: 25%; } .wt-w-26 { width: 26%; } .wt-w-27 { width: 27%; } .wt-w-28 { width: 28%; } .wt-w-29 { width: 29%; } .wt-w-30 { width: 30%; } .wt-w-31 { width: 31%; } .wt-w-32 { width: 32%; } .wt-w-33 { width: 33%; } .wt-w-34 { width: 34%; } .wt-w-35 { width: 35%; } .wt-w-36 { width: 36%; } .wt-w-37 { width: 37%; } .wt-w-38 { width: 38%; } .wt-w-39 { width: 39%; } .wt-w-40 { width: 40%; } .wt-w-41 { width: 41%; } .wt-w-42 { width: 42%; } .wt-w-43 { width: 43%; } .wt-w-44 { width: 44%; } .wt-w-45 { width: 45%; } .wt-w-46 { width: 46%; } .wt-w-47 { width: 47%; } .wt-w-48 { width: 48%; } .wt-w-49 { width: 49%; } .wt-w-50 { width: 50%; } .wt-w-51 { width: 51%; } .wt-w-52 { width: 52%; } .wt-w-53 { width: 53%; } .wt-w-54 { width: 54%; } .wt-w-55 { width: 55%; } .wt-w-56 { width: 56%; } .wt-w-57 { width: 57%; } .wt-w-58 { width: 58%; } .wt-w-59 { width: 59%; } .wt-w-60 { width: 60%; } .wt-w-61 { width: 61%; } .wt-w-62 { width: 62%; } .wt-w-63 { width: 63%; } .wt-w-64 { width: 64%; } .wt-w-65 { width: 65%; } .wt-w-66 { width: 66%; } .wt-w-67 { width: 67%; } .wt-w-68 { width: 68%; } .wt-w-69 { width: 69%; } .wt-w-70 { width: 70%; } .wt-w-71 { width: 71%; } .wt-w-72 { width: 72%; } .wt-w-73 { width: 73%; } .wt-w-74 { width: 74%; } .wt-w-75 { width: 75%; } .wt-w-76 { width: 76%; } .wt-w-77 { width: 77%; } .wt-w-78 { width: 78%; } .wt-w-79 { width: 79%; } .wt-w-80 { width: 80%; } .wt-w-81 { width: 81%; } .wt-w-82 { width: 82%; } .wt-w-83 { width: 83%; } .wt-w-84 { width: 84%; } .wt-w-85 { width: 85%; } .wt-w-86 { width: 86%; } .wt-w-87 { width: 87%; } .wt-w-88 { width: 88%; } .wt-w-89 { width: 89%; } .wt-w-90 { width: 90%; } .wt-w-91 { width: 91%; } .wt-w-92 { width: 92%; } .wt-w-93 { width: 93%; } .wt-w-94 { width: 94%; } .wt-w-95 { width: 95%; } .wt-w-96 { width: 96%; } .wt-w-97 { width: 97%; } .wt-w-98 { width: 98%; } .wt-w-99 { width: 99%; } .wt-w-100 { width: 100%; }