/* ====================================================================== EN Group ERP — تحسينات تصميم احترافية للوحة الإدارة (Filament 5.6) تُحقن عبر renderHook فوق أصول Filament — الوضع الفاتح وحده: الداكن مقفول (قرار المالك ١٠ أكتوبر). ====================================================================== */ :root { /* ── الألوان (المرحلة ٢ — قرار المالك ١٠ أكتوبر: «اللون الأساسي Teal») ── كل لونٍ في هذا الملف من ألوان اللوحة نفسها (AdminPanelProvider::colors): primary=Teal، gray=Slate، success=Emerald، warning=Amber، danger=Rose، info=Sky — بالدرجة نفسها (var(--primary-600) …) والشفافُ color-mix بالنسبة نفسها. فتغييرُ اللون الأساسي يكون هناك وحده، ولا لونَ حرفيًّا خارج هذه الكتلة. */ --en-accent: var(--primary-500); --en-accent-soft: color-mix(in srgb, var(--primary-500) 12%, transparent); --en-accent-hover: color-mix(in srgb, var(--primary-500) 8%, transparent); /* فواصل الصفوف والخانات: slate-500 بشفافية أعلى — على الشاشات ضعيفة التباين كانت «سايحة» */ --en-line: color-mix(in srgb, var(--gray-500) 38%, transparent); --en-white: #fff; --en-black: #000; /* ألوانٌ لها معنى بعينها خارج ألوان اللوحة */ --en-empty-bg: #fef9c3; /* تظليل الخانة الفارغة بالأصفر (بطلب المستخدم) — أصفرُ بعينه لا «تحذير» */ --en-empty-line: #eab308; --en-violet-50: #f5f3ff; /* بطاقة «المحصَّل» في التقارير، و«استلمها» في الواتساب القديم */ --en-violet-500: #8b5cf6; --en-violet-600: #7c3aed; --en-violet-700: #6d28d9; --en-indigo-500: #6366f1; /* لوحة «تبويبات الوثيقة» في شاشات الأدوار */ /* ── الخطوط (قرار المالك ١٠ أكتوبر: Cairo من السيرفر، وأصغر حجم 12px) ── سلّمٌ واحد بالـrem: كل حجمٍ في الملف واحدٌ منه، والأصغر من 12px صار 12px. */ --en-fs-xs: .75rem; /* 12px — أصغر حجم */ --en-fs-sm: .8125rem; /* 13px */ --en-fs-base: .875rem; /* 14px — نصّ اللوحة */ --en-fs-md: .9375rem; /* 15px */ --en-fs-lg: 1rem; /* 16px */ --en-fs-xl: 1.125rem; /* 18px */ --en-fs-2xl: 1.25rem; /* 20px */ --en-fs-3xl: 1.375rem; /* 22px */ --en-fs-icon: 2.875rem; /* 46px — أيقونة حالة الواتساب (إيموجي) */ --en-fs-map: 26px; /* اسم المحافظة داخل خريطة التربة (وحدات الرسم نفسه) */ --en-fs-none: 0; /* نصٌّ مخفي تبقى أيقونته (أزرار الشريط المختصرة على التليفون) */ /* الأوزان: الخطُّ مصرَّحٌ به 400–700 وحدها (public/css/en-font.css) — فلا 800: كانت تُرسم 700 */ --en-fw-normal: 400; --en-fw-medium: 500; --en-fw-semibold: 600; --en-fw-bold: 700; /* تباعد الحروف */ --en-ls-wide: .01em; --en-ls-tight: -.01em; --en-ls-tighter: -.02em; --en-radius: .85rem; /* محتوى الخلية 1.85rem يتّسع لحدود خانة الإدخال داخل صفٍّ من 42 بكسل بالضبط */ --en-cell-content: 1.85rem; --en-row-h: 42px; /* أقلُّ مساحة لمسٍ لزرٍّ وحيد على التليفون (زرُّ الخروج في الشريط العلوي)، وأيقونتُه داخلها */ --en-touch: 44px; --en-touch-icon: 20px; /* ── الجداول (المرحلة ٤ — توحيد الجداول) ── كلُّ جدولٍ في النظام من هذه الرموز وحدها: الصفُّ سطرٌ واحد بارتفاع --en-row-h، والرأسُ والخطوطُ والتظليلُ والشاراتُ والتلميحُ بشكلٍ واحد، والأرقامُ جدوليةُ العرض. وتنسيقُ القيمة (المال، التاريخ، القصّ، الحجم) من مصنع الأعمدة App\Filament\Design\Columns — لا من الشاشات. */ --en-ta-pad-block: .3rem; /* حشوُ الخلية الرأسي: سطرُ الاسم + الحشو = ٤٢ */ --en-ta-stack-pad-block: .25rem; /* الخليةُ المكدّسة (شارة أو نص + سطرُ وصف 12px): محتواها ٣٢ فيبقى صفُّها ٤٢ */ --en-ta-text-max: 20rem; /* أقصى عرضٍ لنصّ الخلية قبل «…» — ومقبضُ عرض العمود يتجاوزه */ --en-ta-text-max-narrow: 16rem; /* السقفُ الأضيق (Columns::clipped narrow): جدولٌ يتجاوز ١٢٨٠ والقائمةُ مفتوحة */ --en-ta-head-bg: var(--gray-50); /* رأسُ الجدول (ثابتٌ عند التمرير) */ --en-ta-sticky-bg: var(--en-white); /* الأعمدةُ المثبّتة وعمودُ الأزرار: معتمةٌ فلا يظهر ما تحتها */ --en-ta-row-hover: var(--en-accent-hover); --en-ta-sticky-hover: color-mix(in srgb, var(--primary-500) 8%, var(--en-white)); /* تظليلُ الصف نفسه معتمًا */ --en-ta-line: var(--gray-300); /* فاصلُ الصفوف */ --en-ta-head-line: var(--gray-400); /* خطُّ أسفل الرأس */ --en-ta-col-line: var(--gray-200); /* فاصلُ الأعمدة */ --en-ta-sticky-line: var(--gray-400); /* حدُّ الأعمدة المثبّتة وعمود الأزرار */ --en-ta-badge-pad-block: .1rem; /* الشارةُ على ارتفاع سطر الاسم */ /* التلميح: تلميحُ فيلامنت (x-tooltip) وصندوقُ الخلية المقصوصة (en-cell-tip) بشكلٍ واحد */ --en-tip-bg: var(--en-white); --en-tip-fg: var(--gray-800); --en-tip-radius: .25rem; --en-tip-shadow: 0 0 20px 4px color-mix(in srgb, var(--gray-400) 15%, transparent), 0 4px 80px -8px color-mix(in srgb, var(--gray-900) 25%, transparent), 0 4px 4px -2px color-mix(in srgb, var(--gray-600) 15%, transparent); /* النوافذ والأقسام (المرحلة ٥): عنوانُ النافذة بحجم عنوان القسم ووزنه، ورأسُها وشريطُ أزرارها بخطٍّ فاصل وحشوٍ واحد — الوسطى كالمنزلقة. الحشوُ الجانبيّ ٢٠ بكسل في الثلاثة */ --en-heading-fs: var(--en-fs-lg); /* 16px — عنوانُ القسم وعنوانُ النافذة */ --en-modal-pad-x: 1.25rem; --en-modal-head-pad-y: .85rem; --en-modal-body-pad-y: 1rem; --en-modal-foot-pad-y: .75rem; --en-modal-line: var(--gray-200); } * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- الشريط الجانبي (Sidebar) ---------- */ .fi-sidebar .fi-sidebar-nav { gap: .125rem; padding: .65rem .55rem; } /* عناوين المجموعات: صغيرة، واضحة، رمادية هادئة، بمسافة علوية للفصل */ .fi-sidebar-group { margin-top: .7rem; } .fi-sidebar-group:first-child { margin-top: .1rem; } .fi-sidebar-group-label, .fi-sidebar-group-btn .fi-sidebar-group-label { font-size: var(--en-fs-sm) !important; font-weight: var(--en-fw-bold) !important; letter-spacing: var(--en-ls-wide); padding-inline-start: .35rem; } .fi-sidebar-group-btn { border-radius: .55rem; } /* عناصر التنقّل: مقاس مريح، خط متوسط، لون نص واضح، زوايا مستديرة */ .fi-sidebar-item-btn { border-radius: .55rem; padding-block: .5rem; transition: background-color .15s ease, color .15s ease; } .fi-sidebar-item-btn .fi-sidebar-item-label { font-size: var(--en-fs-md); font-weight: var(--en-fw-semibold); } .fi-sidebar-item-icon { width: 1.3rem; height: 1.3rem; } /* العنصر النشط: خلفية teal خفيفة + نص/أيقونة teal + شريط تمييز على جهة البداية (يمين في RTL) */ .fi-sidebar-item.fi-active .fi-sidebar-item-btn, .fi-sidebar-item-btn.fi-active { position: relative; } .fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-label { font-weight: var(--en-fw-bold); } .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before, .fi-sidebar-item-btn.fi-active::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .35rem; width: 3px; border-radius: 99px; } .fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-icon, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon { color: var(--en-accent) !important; } /* رأس الشعار */ .fi-sidebar-header { border-bottom: 1px solid var(--en-line); box-shadow: none; } /* ---------- الشريط العلوي (Topbar) ---------- */ .fi-topbar { box-shadow: 0 1px 0 var(--en-line); } .fi-topbar > nav { backdrop-filter: saturate(1.15); } /* ---------- الأقسام والبطاقات ---------- */ .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { border-radius: var(--en-radius) !important; } /* ---------- بطاقات المؤشّرات (KPIs) ---------- */ .fi-wi-stats-overview-stat { border: 1px solid var(--en-line); box-shadow: 0 1px 2px color-mix(in srgb, var(--gray-900) 5%, transparent); transition: transform .16s ease, box-shadow .16s ease; overflow: hidden; } .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--gray-900) 12%, transparent); } .fi-wi-stats-overview-stat-value { font-weight: var(--en-fw-bold); letter-spacing: var(--en-ls-tight); } .fi-wi-stats-overview-stat-description { opacity: .85; } /* ---------- العناوين ---------- */ .fi-header-heading, .fi-section-header-heading { font-weight: var(--en-fw-bold); letter-spacing: var(--en-ls-tight); } /* ---------- الجداول (رموزُها في :root — «الجداول») ---------- */ .fi-ta-header-cell-label { font-weight: var(--en-fw-bold); } .fi-ta-row { transition: background-color .12s ease; } .fi-ta-row:hover { background-color: var(--en-ta-row-hover); } /* الأرقامُ متساويةُ العرض فتصطفّ خاناتُها في العمود (المبالغ والتواريخ والأكواد). Cairo جدوليُّ الأرقام أصلًا (مقيس: ‎1111111111‎ و‎0000000000‎ بالعرض نفسه)، والرمزُ يحفظ الاصطفافَ متى رُسم الجدولُ بخطٍّ احتياطي قبل تحميله */ .fi-ta-table { font-variant-numeric: tabular-nums; } /* ---------- الأزرار ---------- */ .fi-btn { font-weight: var(--en-fw-semibold); } /* ---------- شارات (Badges) أوضح ---------- */ .fi-badge { font-weight: var(--en-fw-bold); } /* ====== شريط جانبي داكن (طلب المستخدم: خليه غامق) ====== */ .fi-sidebar, .fi-sidebar-header { background-color: var(--gray-900) !important; /* slate-900 */ border-color: color-mix(in srgb, var(--gray-400) 12%, transparent) !important; } .fi-sidebar { border-inline-end: 1px solid color-mix(in srgb, var(--gray-400) 14%, transparent) !important; } /* اسم العلامة فاتح */ .fi-sidebar-header, .fi-sidebar-header * { color: var(--gray-200) !important; } /* عناوين المجموعات */ .fi-sidebar-group-label, .fi-sidebar-group-btn .fi-sidebar-group-label { color: var(--gray-300) !important; } .fi-sidebar-group-btn { color: var(--gray-100) !important; } .fi-sidebar-group-btn:hover { background-color: color-mix(in srgb, var(--en-white) 5%, transparent) !important; } /* عناصر التنقّل */ .fi-sidebar-item-btn { color: var(--gray-50) !important; } .fi-sidebar-item-icon { color: var(--gray-300) !important; } .fi-sidebar-item-btn:hover { background-color: color-mix(in srgb, var(--primary-500) 14%, transparent) !important; color: var(--primary-300) !important; } .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: var(--primary-400) !important; } /* العنصر النشط */ .fi-sidebar-item.fi-active .fi-sidebar-item-btn, .fi-sidebar-item-btn.fi-active { background-color: color-mix(in srgb, var(--primary-500) 20%, transparent) !important; color: var(--primary-300) !important; } .fi-sidebar-item.fi-active .fi-sidebar-item-icon, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon { color: var(--primary-400) !important; } .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before, .fi-sidebar-item-btn.fi-active::before { background: var(--primary-400) !important; } /* لون نص العناصر نفسه (الـlabel) فاتح — Filament يلوّنه بمفرده */ .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--gray-50) !important; } .fi-sidebar-item-btn:hover .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar-item-btn.fi-active .fi-sidebar-item-label { color: var(--primary-300) !important; } /* ====== إخفاء أفاتار قائمة المستخدم (استُبدل بالاسم + زر خروج في الشريط العلوي) ====== */ .fi-user-menu { display: none !important; } /* ====== تثبيت عمود الاسم (sticky) في الجداول العريضة — جهة البداية (يمين في RTL) ====== */ .en-sticky-col { position: sticky !important; inset-inline-start: 0; z-index: 5; background-color: var(--en-ta-sticky-bg); border-inline-end: 2px solid var(--en-line); } /* العمود المثبّت يتبع تظليل الصف عند مرور المؤشّر (يبقى مُعتمًا فلا يظهر ما تحته) — بلونه نفسه لا بأخضرٍ آخر */ .fi-ta-row:hover .en-sticky-col { background-color: var(--en-ta-sticky-hover); } /* ====== رأس الجدول ثابت عند التمرير الرأسي ====== */ /* حاوية الجدول لها overflow-x:auto (للتمرير الأفقي والعمود المثبّت)، وهذا وحده يكسر ثبات الرأس رأسيًا. نجعل نفس الحاوية تمرّر رأسيًا (بارتفاع محدود) فيثبت الرأس داخلها، ويبقى ترقيم الصفحات أسفلها ثابتًا. */ .fi-ta-content-ctn { /* dvh لا vh: شريط المتصفّح المتحرك على الأجهزة يجعل vh أكبر من المعروض فعلًا، فينزل أسفل الحاوية — ومعه الشريط الأفقي — تحت حافة الشاشة. و12rem بدل 15: رأس الصفحة هنا سطران وشريط أدوات لا أكثر. */ /* !important لازم: ستايل فيلامنت يُحمَّل بعد هذا الملف بنفس التخصيص فيعيد max-height إلى none وoverflow إلى auto (قِيس في المتصفّح). */ max-height: calc(100dvh - 12rem) !important; overflow-y: scroll !important; /* لا auto: الشريط ظاهر دائمًا فلا يُظنّ غير موجود */ overflow-x: scroll !important; } /* شريطا التمرير أعرض وأوضح — الرفيع الافتراضي يكاد لا يُرى */ .fi-ta-content-ctn::-webkit-scrollbar { width: 13px; height: 13px; } .fi-ta-content-ctn::-webkit-scrollbar-track { background: var(--gray-100); } .fi-ta-content-ctn::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } .fi-ta-content-ctn::-webkit-scrollbar-thumb:hover { background: var(--gray-500); background-clip: content-box; } .fi-ta-content-ctn::-webkit-scrollbar-corner { background: var(--gray-100); } .fi-ta-table thead .fi-ta-header-cell { /* !important لازم: قاعدة فيلامنت «.fi-ta th.fi-ta-header-cell» تخصيصها أعلى وتضع position: relative فتُبطل الثبات (قِيس في المتصفّح). */ position: sticky !important; top: 0; z-index: 8; background-color: var(--en-ta-head-bg); } /* خلية رأس العمود المثبّت: تثبت أفقيًا ورأسيًا معًا (تبقى في الزاوية) */ .fi-ta-table thead .fi-ta-header-cell.en-sticky-col { z-index: 9; background-color: var(--en-ta-head-bg); } /* ====== فروزن: عمودان مثبّتان جهة البداية (يمين RTL) بعرض ثابت وإزاحات تراكمية ====== */ .en-frozen-1, .en-frozen-2 { position: sticky !important; z-index: 5; background-color: var(--en-ta-sticky-bg); width: 15rem; min-width: 15rem; max-width: 15rem; } .en-frozen-1 { inset-inline-start: 0; } .en-frozen-2 { inset-inline-start: 15rem; border-inline-end: 2px solid var(--en-line); } .fi-ta-row:hover .en-frozen-1, .fi-ta-row:hover .en-frozen-2 { background-color: var(--en-ta-sticky-hover); } .fi-ta-table thead .fi-ta-header-cell.en-frozen-1, .fi-ta-table thead .fi-ta-header-cell.en-frozen-2 { z-index: 9; background-color: var(--en-ta-head-bg); } /* ====== الإجراءات مثبّتة جهة النهاية (شمال RTL) ====== */ .fi-ta-cell:has(.fi-ta-actions), .fi-ta-table thead .fi-ta-actions-header-cell { position: sticky !important; inset-inline-end: 0; z-index: 6; background-color: var(--en-ta-sticky-bg); border-inline-start: 2px solid var(--en-line); } .fi-ta-table thead .fi-ta-actions-header-cell { z-index: 9; background-color: var(--en-ta-head-bg); } .fi-ta-row:hover .fi-ta-cell:has(.fi-ta-actions) { background-color: var(--en-ta-sticky-hover); } /* ====== صفوف أقصر (كثافة أعلى) في كل الجداول ====== */ .fi-ta-cell, .fi-ta-header-cell { padding-block: var(--en-ta-pad-block) !important; } .fi-ta-cell .fi-ta-text { --gap: 0; } /* ====== «لوحة التحكم» مثبّتة أعلى الشريط (لا تتحرك مع تمرير القائمة) ====== */ .fi-sidebar-nav-groups > li:first-child { position: sticky; top: 0; z-index: 20; margin-top: 0 !important; background-color: var(--gray-900); /* مطابق لخلفية الشريط حتى تختفي العناصر خلفها */ box-shadow: 0 8px 8px -8px color-mix(in srgb, var(--en-black) 55%, transparent); } /* ====== «خدمة وثائق تأمين»: قائمة منسدلة مطاطية (طي/فتح يدوي) ====== */ .fi-sidebar-item.en-reflist > .fi-sidebar-item-btn { cursor: pointer; } .fi-sidebar-item.en-reflist > .fi-sidebar-item-btn .fi-sidebar-item-label::after { content: '▾'; margin-inline-start: .4rem; font-size: var(--en-fs-xs); display: inline-block; transition: transform .15s ease; } .fi-sidebar-item.en-reflist.en-collapsed > .fi-sidebar-item-btn .fi-sidebar-item-label::after { transform: rotate(-90deg); } .fi-sidebar-item.en-reflist.en-collapsed > ul.fi-sidebar-sub-group-items { display: none !important; } /* ====== تقليل الفراغات الرأسية في الصفحات (كثافة أعلى) — كانت 2rem لكل منها ====== */ .fi-page-header-main-ctn { padding-block: .25rem !important; row-gap: .35rem !important; } .fi-page-main { gap: .35rem !important; } .fi-page-content { row-gap: .6rem !important; } /* ====== وثائق التأمين: إخفاء شريط التبويبات (استُبدل بقائمة «المراحل» المنسدلة برأس الصفحة) ====== */ .en-hide-stage-tabs nav.fi-tabs { display: none !important; } /* ====== مراحل خدمات النقابة على التليفون: الأزرار الستة شبكةٌ من عمودين بدل شريطٍ يُسحب جانبًا — كلُّ مرحلةٍ وعددُها أمام العين (بطلب المالك: «زر كل التقارير و علي الزر عدد كل التقارير …») ====== */ @media (max-width: 640px) { .fi-resource-list-records-page.fi-resource-consultant-reports nav.fi-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 1); width: 100%; } } /* ====== ومراحل طلبات الرسومات كذلك: سبعةُ أزرارٍ بأعدادها أعرضُ من الشريط الذي رفضه المالك في النقابة — الشبكةُ نفسها (بطلبه: «عايز الازرار الي فوق … وكل زر عليه الاعداد») ====== */ @media (max-width: 640px) { .fi-resource-list-records-page.fi-resource-drawing-requests nav.fi-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 1); width: 100%; } } /* وعلى الكمبيوتر حين لا تسعها المساحة تلتفّ سطرًا ثانيًا ولا تُقصّ: كانت «السجل» وعددُها تُقصّ على ١٢٨٠ بالقائمة (٣٨ بكسل) وتغيب ثلاثةٌ منها خلف السحب الجانبي على ١٠٢٤ بها (٢٩٤ بكسل، مقيس) — والسحبُ الجانبيُّ هو الشريط الذي رفضه المالك أعلاه. والتي تسعها كما هي سطرًا واحدًا */ @media (min-width: 641px) { .fi-resource-list-records-page.fi-resource-drawing-requests nav.fi-tabs { flex-wrap: wrap; row-gap: calc(var(--spacing) * 1); } } /* ====== كثافة الفورمات: فراغات أقل بين الصفوف وارتفاع خانات أصغر ====== */ .fi-section-content-ctn > .fi-section-content { padding: .65rem .9rem !important; } .fi-grid { gap: .55rem 1rem !important; } /* بين الحقول */ .fi-fo-field { row-gap: .2rem !important; } /* بين الليبل والخانة */ .fi-input { padding-block: .35rem !important; } /* ارتفاع خانة الإدخال */ .fi-select-input { padding-block: .35rem !important; } .fi-section-header { padding-block: .55rem !important; } /* رأس البطاقة */ .fi-fieldset { padding: .5rem .75rem !important; } /* المجموعات الداخلية (الأبعاد/الشوارع…) */ .fi-fieldset-not-contained { padding-top: .7rem !important; } /* ====== النوافذ والأقسام بشكلٍ واحد (المرحلة ٥ — «وحّد شكل النوافذ: العناوين والأزرار والمسافات») ====== كانت النافذةُ الوسطى رأسًا بلا فاصل وعنوانًا أخفّ من عنوان القسم (600) وأزرارًا ملتصقةً بآخر خانة، والمنزلقةُ رأسًا وشريطَ أزرارٍ بخطٍّ فاصل وحشوٍ آخر. صارتا شكلًا واحدًا: عنوانٌ عريض بحجم عنوان القسم، وخطٌّ تحت الرأس، وشريطُ أزرارٍ بخطٍّ فوقه، وحشوٌ واحد. نوافذُ التأكيد (أيقونةٌ في الوسط بلا فورم) تبقى بشكلها المركزي — والعنوانُ العريض لها أيضًا. والحشوُ الجانبي للرأس من جهة البداية وحدها: جهةُ النهاية يحجزها فيلامنت لزرّ الإغلاق فلا يركبه عنوانٌ طويل */ .fi-modal-heading { font-size: var(--en-heading-fs); font-weight: var(--en-fw-bold); } .fi-modal-window.fi-modal-window-has-content:not(.fi-modal-window-has-icon) > .fi-modal-header { padding-block: var(--en-modal-head-pad-y) !important; padding-inline-start: var(--en-modal-pad-x) !important; border-bottom: 1px solid var(--en-modal-line); } .fi-modal-window.fi-modal-window-has-content:not(.fi-modal-window-has-icon) > .fi-modal-content { padding: var(--en-modal-body-pad-y) var(--en-modal-pad-x) !important; } .fi-modal-window.fi-modal-window-has-content:not(.fi-modal-window-has-icon) > .fi-modal-footer { padding: var(--en-modal-foot-pad-y) var(--en-modal-pad-x) !important; border-top: 1px solid var(--en-modal-line); } /* الأقسام: عنوانٌ واحدُ الحجم (كان ١٦ في التسعين قسمًا بلا تصريح؛ صار رمزًا مشتركًا مع عنوان النافذة) */ .fi-section-header-heading { font-size: var(--en-heading-fs); } /* الإشعارُ المنبثق (.fi-no > إشعار — لا إشعاراتُ لوحة الجرس، فهي نافذةٌ منزلقة أيضًا وأزرارُها شغلُ الموظفين) والنافذةُ المنزلقة مفتوحة: كان «تمت الإضافة» يقع على ركن ✕ النافذة نفسه (بعد «إضافة» ثم فتحٍ فوري، وبعد «إضافة وبدء إضافة المزيد») و✕ الإشعار فوق ✕ النافذة. - الشاشةُ العريضة (تسع النافذةَ ٧٦٨ والإشعارَ ٣٨٤ جنبها): الإشعارُ في الجهة الأخرى فوق الخلفية — لا يغطي من النافذة شيئًا ويبقى كلُّه يُضغط. - الأضيق: يُترك ركنُ ✕ النافذة مكشوفًا (٤rem)، وجسمُ الإشعار يمرّر الضغطَ لما تحته (عنوانُ النافذة وأولُ خانة) وأزرارُه هو تُضغط فتغلقه وحده */ @media (min-width: 75rem) { body:has(.fi-modal-slide-over.fi-modal-open) .fi-no { align-items: flex-start; } } @media (max-width: 74.99rem) { body:has(.fi-modal-slide-over.fi-modal-open) .fi-no { inset-inline-end: 4rem; } body:has(.fi-modal-slide-over.fi-modal-open) .fi-no > .fi-no-notification { pointer-events: none; } body:has(.fi-modal-slide-over.fi-modal-open) .fi-no > .fi-no-notification :is(a, button) { pointer-events: auto; } } /* قائمة «تبديل الأعمدة»: أعمدتنا كثيرة (55+) — سكرول داخلي بدل تمطيط الصفحة (كانت تمتد لأسفل فيهبط الشريط الجانبي وتضيع أزرارها) */ .fi-ta-col-manager-dropdown .fi-dropdown-panel { max-height: 72vh !important; overflow-y: auto !important; } /* زر «تطبيق الأعمدة» مثبّت أسفل القائمة — يظهر دائمًا بلا نزول للسكرول */ .fi-ta-col-manager-dropdown .fi-ta-col-manager-actions-ctn { position: sticky; bottom: 0; background: var(--en-white); padding: .5rem 0 .25rem; margin-top: .25rem; box-shadow: 0 -6px 8px -6px color-mix(in srgb, var(--en-black) 18%, transparent); } /* «إعادة الضبط» في قائمة الأعمدة مخفيّ (بطلب المالك: «بدون ارجعها للافتراضي نهائي»): ضغطةٌ واحدة بلا تأكيد بجوار العنوان تمحو اختيار الموظف كلَّه وتحفظ الافتراضي — وكلُّ عمودٍ يُعلَّم ويُلغى بيده. ولا موضعَ «بلا زر» في فيلامنت (ColumnManagerResetActionPosition رأسٌ أو ذيل) */ .fi-ta-col-manager [wire\:click="resetTableColumnManager"] { display: none !important; } /* خانة الرسوم بورقة أوامر الدفع: على قدر 6 أرقام وكسرين — مطاطية داخل حدها */ .fi-ta td input[type="number"] { text-align: center; } /* خانةُ المبلغ (Columns::moneyInput) على الشمال كعمود المال (قرار المالك ١١ أكتوبر: «المبالغ في الجداول كلها على الشمال») — والتوسيطُ أعلاه باقٍ لخانات الأعداد (قراءاتُ العدادات، عددُ الأشهر) */ .fi-ta td input[type="number"].fi-align-end { text-align: end; } /* قوائم الاختيار داخل الجداول (نوع السداد…): على قدر الاختيار لا تتمدد */ /* عمودا «الرسوم» و«نوع السداد»: عرض العمود نفسه مقفول — الفراغ يذهب لأعمدة الأسماء */ /* بقية أعمدة الإدخال بورقة أوامر الدفع: عرض مقفول موحّد حتى لا تتزاحم الأعمدة */ /* كل خانة إدخال داخل الجدول تملأ عمودها بالضبط — لا تفيض على العمود المجاور */ .fi-ta td input[type="number"], .fi-ta td input[type="date"], .fi-ta td input[type="text"], .fi-ta td select { min-width: 0 !important; } .fi-ta-cell-fees-amount, .fi-ta-cell-submitted-at, .fi-ta-cell-receipt-date, .fi-ta-cell-payment-method, .fi-ta-cell-notes { padding-inline: 0.5rem !important; } /* خانة التاريخ الأصلية اتجاهها LTR داخل RTL — تُعرض كاملة بلا قص */ .fi-ta td input[type="date"] { direction: ltr; text-align: center; } /* غلاف خانات الإدخال في فيلامنت له عرض ثابت 12rem يفيض على الأعمدة الضيقة — يُجبر على عرض عموده (هذا كان سبب «الأعمدة دخلت في بعضها») */ .fi-ta td .fi-ta-text-input, .fi-ta td .fi-ta-select { min-width: 0 !important; } /* خانة الرسوم: إخفاء سهمي الزيادة/النقصان — أرقام فقط */ .fi-ta td input[type="number"]::-webkit-outer-spin-button, .fi-ta td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fi-ta td input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* عرض التاريخ يوم/شهر/سنة فوق خانة التاريخ الأصلية (كروم لا يسمح بتغيير صيغتها) */ .en-date-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: var(--en-fs-sm); letter-spacing: var(--en-ls-tight); direction: ltr; color: var(--gray-900); padding-inline-end: 1.4rem; white-space: nowrap; overflow: hidden; } /* إخفاء نصّ الخانة الأصلية تحت العرض المكتوب فوقها. سفاري على الآيفون لا يحترم ::-webkit-datetime-edit وحده، فيظهر تاريخُه فوق تاريخنا ويتراكبان («24Aug2026» فوق «2026-08-24») — بلاغ المستخدم: «مشكلة في عرض التاريخ على التليفون». إخفاء لون الحروف على الخانة نفسها يشمل الحالتين. */ .fi-ta td input[type="date"].en-date-masked, .fi-ta td input[type="date"].en-date-masked::-webkit-datetime-edit, .fi-ta td input[type="date"].en-date-masked::-webkit-datetime-edit-text, .fi-ta td input[type="date"].en-date-masked::-webkit-datetime-edit-day-field, .fi-ta td input[type="date"].en-date-masked::-webkit-datetime-edit-month-field, .fi-ta td input[type="date"].en-date-masked::-webkit-datetime-edit-year-field { color: transparent !important; -webkit-text-fill-color: transparent; } /* عمود كود أمر الدفع بورقة أوامر الدفع: عرض مقفول */ /* ===== الوضع الديناميكي (بطلب المستخدم): كل عمود على قدر محتواه ===== يلغي أقفال العرض السابقة — الخانة بمقاسها الطبيعي والعمود يلتف حولها */ .fi-ta-cell-fees-amount, .fi-ta-header-cell-fees-amount, .fi-ta-cell-payment-method, .fi-ta-header-cell-payment-method, .fi-ta-cell-submitted-at, .fi-ta-header-cell-submitted-at, .fi-ta-cell-receipt-date, .fi-ta-header-cell-receipt-date, .fi-ta-cell-receipt-code, .fi-ta-header-cell-receipt-code, .fi-ta-cell-notes, .fi-ta-header-cell-notes { width: auto !important; max-width: none !important; white-space: nowrap; } .fi-ta td .fi-ta-text-input, .fi-ta td .fi-ta-select { width: auto !important; max-width: none !important; } .fi-ta td input[type="date"] { width: 8.7rem !important; max-width: none !important; } .fi-ta td input[type="number"] { width: 6rem !important; max-width: none !important; } .fi-ta td select { width: auto !important; max-width: none !important; } .fi-ta td input[type="text"] { width: 9.5rem !important; max-width: none !important; } /* نوع السداد: «اختر» تظهر كاملة دائمًا؛ والملاحظات تتوسع أثناء الكتابة */ .fi-ta td select { min-width: 6.5rem !important; text-overflow: ellipsis; } .fi-ta td input[type="text"] { transition: width 0.15s ease; } .fi-ta td input[type="text"]:focus { width: 16rem !important; } /* ===== مقبض سحب عرض الأعمدة من رأس الجدول (بطلب المستخدم) ===== */ .fi-ta th.fi-ta-header-cell, .fi-ta table thead th { position: relative; } .en-col-resizer { position: absolute; top: 0; bottom: 0; left: -4px; width: 11px; cursor: col-resize; z-index: 3; user-select: none; -webkit-user-select: none; } /* الفاصل ظاهر دائمًا بلون مميز في رأس الجدول (بطلب المستخدم) */ .en-col-resizer::after { content: ''; position: absolute; top: 18%; bottom: 18%; left: 4px; width: 3px; border-radius: 2px; background: var(--primary-600); opacity: 0.65; } .en-col-resizer:hover, .en-col-resizer.en-dragging { background: color-mix(in srgb, var(--warning-500) 15%, transparent); border-radius: 3px; } /* عند الوقوف عليه أو السحب: يتضخّم ويتحوّل كهرماني ليبان أنه ممسوك */ .en-col-resizer:hover::after, .en-col-resizer.en-dragging::after { top: 4%; bottom: 4%; left: 3px; width: 5px; background: var(--warning-500); opacity: 1; } body.en-col-dragging { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; } /* ===== الأعمدة على أقل عرض تلقائيًا — والتكبير يدويًا بمقبض السحب (بطلب المستخدم) ===== */ .fi-ta table thead th { width: 1%; white-space: nowrap; } /* آخر عمود يمتص الفائض حتى لا تتمدد بقية الأعمدة */ .fi-ta table thead th:last-child { width: auto; } /* الخلايا سطر واحد (ارتفاع الصف ثابت) — عدا الأعمدة الملفوفة عمدًا */ .fi-ta table td { white-space: nowrap; } /* ===== بطلب المستخدم (كل الشاشات): الصف 1 سم على سطر واحد على قدر الاسم، النص الطويل يُقص «…» ويظهر كاملًا فور الوقوف عليه (صندوق en-cell-tip من admin-sidebar.js أو tooltip العمود) ===== */ /* الارتفاع على الصف والخلية معًا: على الصف وحده تتجاهله بعض الصفوف فتخرج أقصر */ .fi-ta table tbody tr, .fi-ta table tbody td { height: var(--en-row-h); } /* جداولُنا داخل النوافذ (عمليات/قراءات) ليست جداول فيلامنت وإن سكنت داخل .fi-ta: ارتفاعٌ مفروضٌ ٤٢ بكسل على صفوفها كان يجعل بطاقة التلفون (ستّ خانات فوق بعضها) تتراكب على نفسها (بلاغ المستخدم: «الشاشة بايظة») */ .en-ops table tbody tr, .en-ops table tbody td { height: auto !important; } .fi-ta table td .fi-ta-text { display: block; max-width: var(--en-text-max, var(--en-ta-text-max)); /* مقبض عرض العمود يلغي الحد عند التوسيع */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; } /* نصٌّ حرٌّ بسقفٍ أضيق (Columns::clipped narrow — البيان في المحذوفات): الجدولُ يدخل في ١٢٨٠ والقائمةُ مفتوحة */ .fi-ta table td .fi-ta-text.en-text-narrow { max-width: var(--en-text-max, var(--en-ta-text-max-narrow)); } /* عمودٌ على الشمال (alignEnd — المبالغ كلها، قرار المالك ١١ أكتوبر): صندوقُ النص بسقف عرضه يُدفع لنهاية الخلية، فالمبلغ على حافة العمود الشمال مهما اتّسع العمود — كان يقف عند ٢٠rem من اليمين في العمود الأعرض («الرصيد» في أكبر المدينين على ١٢٨٠ المطوية: من ٣٩٦ إلى ٥٨ بكسل، حافةُ العمود) */ .fi-ta table td.fi-align-end .fi-ta-text { margin-inline-start: auto; } /* الأعمدة الملفوفة عمدًا والقوائم متعددة الأسطر: سطر واحد أيضًا */ .fi-ta table td .fi-ta-text.fi-wrapped, .fi-ta table td .fi-ta-text.fi-ta-text-has-line-breaks { white-space: nowrap !important; } .fi-ta table td .fi-ta-text .fi-ta-text-item { display: inline !important; white-space: nowrap !important; vertical-align: middle; } .fi-ta table td .fi-ta-text .fi-ta-text-item + .fi-ta-text-item::before { content: '، '; color: var(--gray-400); } /* الوصف (كان سطرًا ثانيًا) يلحق بالنص في نفس السطر */ .fi-ta table td .fi-ta-text .fi-ta-text-description { display: inline !important; margin: 0 !important; color: var(--gray-500); font-size: var(--en-fs-xs); } .fi-ta table td .fi-ta-text .fi-ta-text-item + .fi-ta-text-description::before, .fi-ta table td .fi-ta-text .fi-ta-text-description + .fi-ta-text-item::before { content: ' — '; color: var(--gray-400); } /* الشارات قصيرة — بلا قص */ .fi-ta table td .fi-ta-text.fi-ta-text-has-badges { max-width: none; overflow: visible; } /* رقم الوثيقة وتحته رقم الملحق (بطلب المستخدم): الوصف سطرٌ ثانٍ مضغوط داخل الصف نفسه — ٤٢ بكسل مقيسة */ .fi-ta table td .fi-ta-text.en-cell-stack { font-size: var(--en-fs-base); } .fi-ta table td .fi-ta-text.en-cell-stack, .fi-ta table td .fi-ta-text.en-cell-stack .fi-ta-text-item, .fi-ta table td .fi-ta-text.en-cell-stack .fi-ta-text-description { line-height: 1.15 !important; } .fi-ta table td .fi-ta-text.en-cell-stack .fi-ta-text-description { display: block !important; } .fi-ta table td .fi-ta-text.en-cell-stack .fi-ta-text-item + .fi-ta-text-description::before { content: none; } /* الشارة داخل الخلية المكدّسة بنصف حشوها الرأسي: الوصفُ تحتها صار 12px (أصغر حجم، المرحلة ٢) فلا يطول الصفُّ عمّا كان */ .fi-ta table tbody td .fi-ta-text.en-cell-stack .fi-badge { padding-block: .05rem !important; } /* (المرحلة ٤) وحشوُ خليتها الرأسي أقلّ قليلًا: المكدّسُ ٣٢ بكسل + حشو ٠٫٣rem + خطّ الصف = ٤٢٫٨ — فكان صفُّ «حالة الوثيقة» في الرسومات وكلُّ صفٍّ برقم ملحقٍ تحت رقم الوثيقة أطولَ من صفوف النظام كلِّها (مقيس على الحي بعد خط Cairo) */ .fi-ta table tbody td:has(.fi-ta-text.en-cell-stack) { padding-block: var(--en-ta-stack-pad-block) !important; } /* ملخّصُ المقدمات تحت اسم المالك في كشف العميل (D13 — AdvanceMemo::forEntries): يلتفّ داخل الخلية ولا يُقصّ رقمٌ مالي أبدًا. كان سطرًا واحدًا يُقصّ من الشمال بلا «…» حين صار أربعة أجزاء («مدفوع 115,000» ظهر «مدفوع 5,000» — مراجعة الشاشات الثانية). الرقمُ ملتصقٌ بعنوانه بمسافةٍ لا تنكسر فالالتفافُ بعد «•» وحده، والكاملُ بتواريخه في التلميح. والداكنُ برماديٍّ فاتحٍ مقروء: لونُ الأوصاف الثابت كان تباينُه نحو ٣٫٦ إلى ١ على خلفية الجدول الداكنة */ .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-description { white-space: normal !important; line-height: 1 !important; } /* ثلاثةُ أسطرٍ (الاسمُ وسطرا الملخّص) في الصف الموحّد ٤٢ بكسل: بلا حشوٍ رأسي للخلية والاسمُ على خطّ القاعدة — مقيسة ٤٠٫٧ بكسل. والقصُّ أفقيٌّ وحده (clip لا hidden): ذيلُ الياء آخرَ الملخّص كان يُقصّ من تحت فتُقرأ «الباقي» «الباق» */ .fi-ta table tbody td:has(.fi-ta-text.en-adv-sum) { padding-block: 0 !important; } .fi-ta table td .fi-ta-text.en-adv-sum { overflow-x: clip !important; overflow-y: visible !important; } .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-item { vertical-align: baseline !important; } .dark .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-description { color: var(--gray-400); } /* (مراجعة الشاشات الثالثة) عرضٌ أدنى للخلية ذات الملخّص: صفحةٌ كلُّ أسماء ملاكها قصيرة كانت تضيّق العمود لأعرض كلمة فيلتفّ الملخّص ٣–٤ أسطر والصف ٥٤–٦٦ بكسل (العميل 21). و15rem تحمل أسوأ ملخّصٍ واقعي سطرين — أربعةُ أجزاءٍ بسبع خانات و«زيادة … له» بسبع خانات — مقيسة، و13rem كانت تترك «زيادة» ثلاثة أسطر. وسطرُ الاسم بارتفاع خطّه (1): نصفُ فراغه الزائد كان يدفع ذيلَ «مدفوع» آخرَ الملخّص فوق خطّ حدّ الصف — والآن حبرُ همزة الاسم وذيلُ «مدفوع» بين الخطّين (بكسلات لقطةٍ حقيقية على 1 و2 و3) */ .fi-ta table td .fi-ta-text.en-adv-sum { min-width: 15rem !important; line-height: 1 !important; } .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-item { line-height: 1 !important; } /* (مراجعة الشاشات الخامسة — بعد توحيد الشكل ٢: خط Cairo من السيرفر وأصغر خط 12px) حبرُ Cairo أطولُ من سطره: الاسمُ 14px وسطرا الملخّص 12px كانوا يلمسون خطّ حدّ الصف السفلي (ذيلُ «مدفوع» والياء)، وذيولُ الاسم الطويل تتراكب مع شدّة «اتسعّرتش» — بكسلات لقطاتٍ حقيقية على 390 و1280 والمطوية. الآن الخليةُ عمودٌ بارتفاع الصف: الاسمُ أعلاها والملخّصُ أسفلها والفراغُ بينهما (سطرٌ واحد ⟵ فراغٌ واسع، سطران ⟵ نحو ٢ بكسل)، وحشوٌ سفلي ٣ بكسل لذيل الياء آخرَ الملخّص، والاسمُ بأصغر حجم كالملخّص ويتميّز بلونه. والاسمُ بعرض نصّه فالوقوفُ عليه يُظهر التلميح، و«…» الاسم الطويل عليه هو بعد أن صارت الخليةُ عمودًا */ .fi-ta table td .fi-ta-text.en-adv-sum { display: flex !important; flex-direction: column; justify-content: space-between; gap: 0 !important; height: calc(var(--en-row-h) - 1px); padding-block: 0 3px !important; } .fi-ta table td .fi-ta-text.en-adv-sum, .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-item, .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-item * { font-size: var(--en-fs-xs) !important; } .fi-ta table td .fi-ta-text.en-adv-sum .fi-ta-text-item { align-self: flex-start; max-width: 100%; overflow-x: clip !important; overflow-y: visible !important; text-overflow: ellipsis; white-space: nowrap; } /* صندوق النص الكامل عند الوقوف على خلية مقصوصة */ .en-cell-tip { position: fixed; z-index: 9999; max-width: 28rem; padding: .45rem .7rem; border-radius: var(--en-tip-radius); background: var(--en-tip-bg); color: var(--en-tip-fg); font-size: var(--en-fs-base); line-height: 1.5; white-space: normal; box-shadow: var(--en-tip-shadow); pointer-events: none; direction: rtl; text-align: right; } /* تلميحُ فيلامنت (x-tooltip — أزرار الصف والأعمدة ذات التلميح) بالرموز نفسها: كان صندوقُ الخلية المقصوصة داكنًا وتلميحُ العمود المجاور أبيضَ في الجدول الواحد. الأبيضُ بظلّه هو تلميحُ فيلامنت الفاتح كما كان، والسهمُ بلون الخلفية */ .tippy-box[data-theme~=light] { background-color: var(--en-tip-bg); color: var(--en-tip-fg); border-radius: var(--en-tip-radius); box-shadow: var(--en-tip-shadow); } .tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow::before { border-top-color: var(--en-tip-bg); } .tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow::before { border-bottom-color: var(--en-tip-bg); } /* ===== تظليل الخانات الناقصة بالأصفر في مرحلة ادخال البيانات (بطلب المستخدم) ===== */ .en-missing-field .fi-input-wrp { background-color: var(--en-empty-bg) !important; /* أصفر فاتح */ border-color: var(--en-empty-line) !important; box-shadow: inset 0 0 0 1px var(--en-empty-line) !important; } .en-missing-field .fi-input-wrp input, .en-missing-field .fi-input-wrp textarea, .en-missing-field .fi-input-wrp select { background-color: transparent !important; } /* ===== توحيد ارتفاع خانات الفورم: القوائم المنسدلة (بزر +) على ارتفاع خانة النص (بطلب المستخدم) ===== */ .fi-fo-field .fi-input-wrp:not(:has(textarea)) { min-height: 2.4rem; max-height: 2.4rem; align-items: center; } .fi-fo-field .fi-input-wrp .choices__inner { min-height: 0 !important; padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; } .fi-fo-field .fi-input-wrp .choices__list--single { padding-top: 0 !important; padding-bottom: 0 !important; } /* القيمة المختارة سطرٌ واحد بـ«…» تحت سقف الارتفاع أعلاه: اسمُ قريةٍ طويل («عزبةالوصيف الدواخلي - قرية ميت مرجا») كان يلتفّ ثلاثة أسطر في خانةٍ ارتفاعها سطر فيطفح فوق عنوانها وعلى الخانة التي تحتها (نافذة «تعديل خدمة»، ٢٧ سبتمبر). والاسم كاملًا في القائمة عند فتحها. وعلى التلفون (≤640) لا سقف فيلتفّ ويكبر كما هو. والنصُّ الإرشادي (placeholder) مثلها (المرحلة ٥): «اختر المركز / المدينة أولًا» في عنوان الموقع الضيّق كان يلتفّ حرفًا حرفًا ويطفح */ @media (min-width: 641px) { fieldset:has(.fi-select-input), .fi-fo-field:has(.fi-select-input), .fi-fo-field .fi-input-wrp:has(.fi-select-input), .fi-fo-field .fi-input-wrp-content-ctn:has(.fi-select-input), .fi-fo-field .fi-select-input, .fi-fo-field .fi-select-input .fi-select-input-ctn, .fi-fo-field .fi-select-input .fi-select-input-btn, .fi-fo-field .fi-select-input .fi-select-input-value-ctn { min-width: 0; } .fi-fo-field .fi-select-input .fi-select-input-value-ctn { overflow: hidden; } .fi-fo-field .fi-select-input .fi-select-input-value-label, .fi-fo-field .fi-select-input .fi-select-input-placeholder { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; } } /* ===== تظليل كل خانة فارغة بالأصفر في كل الفورمات (بطلب المستخدم) — يُطبَّق من admin-sidebar.js ===== */ .fi-input-wrp.en-empty-field { background-color: var(--en-empty-bg) !important; border-color: var(--en-empty-line) !important; box-shadow: inset 0 0 0 1px var(--en-empty-line) !important; } .fi-input-wrp.en-empty-field input, .fi-input-wrp.en-empty-field textarea, .fi-input-wrp.en-empty-field select, .fi-input-wrp.en-empty-field .choices__inner { background-color: transparent !important; } /* ===== كشف الأسعار والأرباح لكل خدمة (شاشة العميل/المورّد + شاشة أرباح الخدمات) ===== */ .en-svc-wrap { font-size: var(--en-fs-base); } table.en-svc-table { width: 100%; border-collapse: collapse; } table.en-svc-table th, table.en-svc-table td { border: 1px solid var(--gray-200); padding: .35rem .5rem; } table.en-svc-table thead th { background: var(--primary-600); color: var(--en-white); font-weight: var(--en-fw-bold); white-space: nowrap; } table.en-svc-table td.c { text-align: center; } table.en-svc-table .num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; } table.en-svc-table tr.grp td { background: var(--gray-100); font-weight: var(--en-fw-bold); color: var(--gray-900); } table.en-svc-table tr.grp .cnt { color: var(--gray-500); font-weight: var(--en-fw-medium); } table.en-svc-table tr.sub td { background: var(--gray-50); font-weight: var(--en-fw-bold); } table.en-svc-table tfoot td { background: var(--success-50); font-weight: var(--en-fw-bold); } table.en-svc-table .pos { color: var(--success-700); } table.en-svc-table .neg { color: var(--danger-700); } table.en-svc-table .muted { color: var(--gray-400); } table.en-svc-table a.lnk { color: var(--primary-600); text-decoration: underline; } /* بطلب المستخدم: لا نصوص توضيحية في البرنامج كله — عناوين الشرح تحت العناوين، شروح الأقسام، شروح الجداول الفارغة */ .fi-header-subheading, .fi-section-header-description, .fi-ta-empty-state-description { display: none !important; } /* نص المساعدة تحت خانات الفورم (helperText يُرسم كـ Text أسفل الخانة) */ .fi-fo-field-content-col > .fi-sc-text { display: none !important; } /* نص المساعدة يُرسم داخل حاوية fi-sc (inline) لا كابن مباشر — تعميم القاعدة لأي عمق */ .fi-fo-field-content-col .fi-sc-text { display: none !important; } /* ===== بطلب المستخدم: فواصل الصفوف والخانات أوضح — على شاشات ضعيفة التباين كانت الصفحة «سايحة» ===== حدود أغمق (slate-300/400 بدل gray-100/200) لصفوف الجداول وخلاياها، وخانات الفورم، وعناصر المكررات، والأقسام */ /* الفواصل على الخلايا لا على الصفوف: الجدول صار border-collapse:separate من أجل رأسه اللاصق في فَيَرفُكس (أسفل الملف)، وفي هذا النموذج تُهمَل حدود الصف فكانت فواصل الصفوف مُعطّلة بلا أثر (وجده فحص النظام: الصفوف متلاصقة) */ .fi-ta-table tbody td { border-bottom: 1px solid var(--en-ta-line) !important; } .fi-ta-table thead th { border-bottom: 2px solid var(--en-ta-head-line) !important; } .fi-ta-table tbody td + td, .fi-ta-table thead th + th { border-inline-start: 1px solid var(--en-ta-col-line) !important; } /* فواصل رأسية بين الخانات */ /* تفصيلٌ ثانويّ داخل خيار القائمة (رقم المحفظة، الرصيد): أصغر وأخفت من الاسم (بطلب المستخدم: «خلي رقم المحفظة جنب المحفظة بخط أصغر من الاسم») — ثلاث محافظ «وي باي» كانت تظهر بالاسم نفسه فلا يُعرف أيّها */ .en-opt-sub { font-size: var(--en-fs-xs); font-weight: var(--en-fw-medium); color: var(--gray-500); margin-inline-start: .4rem; direction: ltr; unicode-bidi: isolate; } /* خانات الإدخال: حد أوضح */ .fi-input-wrp { border: 1px solid var(--gray-400) !important; box-shadow: none; } /* slate-400 */ .fi-input-wrp:focus-within { border-color: var(--primary-600) !important; box-shadow: 0 0 0 1px var(--primary-600) !important; } /* عناصر المكررات (الأوراق المطلوبة، المُلّاك…): كل عنصر بإطار وفاصل واضح */ .fi-fo-repeater-item { border: 1px solid var(--gray-300) !important; border-radius: .5rem; } .fi-fo-repeater-item + .fi-fo-repeater-item { margin-top: .35rem; } .fi-fo-repeater-item-header { border-bottom: 1px solid var(--gray-200) !important; } /* الأقسام والبطاقات والجداول: إطار خارجي أوضح */ .fi-section, .fi-ta-ctn, .fi-fieldset { border: 1px solid var(--gray-300) !important; } .fi-section-header { border-bottom: 1px solid var(--gray-200) !important; } /* الأعمدة والخلايا المثبّتة تحافظ على فاصلها المميز */ .en-sticky-col, .en-frozen-2, .fi-ta-cell:has(.fi-ta-actions) { border-color: var(--en-ta-sticky-line) !important; } /* ===== شريحة الحفظ التلقائي (بطلب المستخدم) ===== لا تغطي زرًّا (بلاغ ٢٨ سبتمبر: كانت أربع ثوانٍ فوق «حفظ/حفظ مؤقت/الطباعة» في شريط فورم الوثيقة، وعلى التليفون سطرين فوق الشريط كله): admin-sidebar.js يرفعها فوق أي شريط أزرار سفلي تتقاطع معه، ولا تلتقط الضغط (pointer-events) فما تحتها من خانات يُضغط كأنها غير موجودة. وتنكسر أسطرًا داخل الشاشة بلا قصّ (max-width)، وزاويتها 1.1rem: سطرٌ واحد (٣٥ بكسل) يبقى كبسولةً كما كان، وأكثر من سطر مستطيلٌ مستدير لا كبسولةٌ يخرج النصُّ من حوافّها. */ .en-autosave-chip { position: fixed; bottom: 1.1rem; left: 1.1rem; z-index: 60; max-width: calc(100vw - 2.2rem); pointer-events: none; padding: .4rem .9rem; border-radius: 1.1rem; font-size: var(--en-fs-base); font-weight: var(--en-fw-bold); box-shadow: 0 6px 18px color-mix(in srgb, var(--gray-900) 25%, transparent); direction: rtl; } .en-autosave-chip.is-saved { background: var(--success-100); color: var(--success-800); border: 1px solid var(--success-300); } .en-autosave-chip.is-invalid { background: var(--warning-100); color: var(--warning-800); border: 1px solid var(--warning-300); } /* ===== زر التعديل في الصف: تكرار مع الضغط على الصف (بطلب المستخدم) ===== */ /* في الجداول التي تُعدَّل في نافذة منزلقة، فيلامنت يجعل خلايا الصف نفسها تفتح نفس الإجراء (mountTableAction('edit')) فزر القلم تكرار محض. لا يُحذف من الكود: رابط الصف وإجراؤه يُستنتجان من وجود الإجراء (ListRecords::recordAction) فحذفه يقتل الضغط على الصف — لذلك يُخفى الزر وحده. الوسم للتوثيق: en-redundant-row-edit */ .fi-ta-actions button[wire\:click^="mountAction('edit'"] { display: none !important; } /* ===== ارتفاع موحّد لصفوف كل الجداول — نظام جدول وثائق التأمين (بطلب المستخدم) ===== المرجع المقيس: صف وثائق التأمين ٦٧ بكسل، محتوى الخلية فيه 2rem داخل .fi-ta-col. الصفوف التي تحمل خانات إدخال كانت ٨٠ بكسل لأن غلاف الخانة أطول (٦٩ بدل ٥٦)، فتُقيَّد الخانة هنا بنفس ارتفاع المحتوى ليتساوى الصف مع المرجع في كل الشاشات. */ /* ارتفاع محتوى الخلية: 1.85rem كي تتسع حدود خانة الإدخال داخل صف 42 بكسل بالضبط */ /* غلاف خانة الإدخال داخل خلية الجدول: بارتفاع المحتوى لا بارتفاع خانة الفورم */ .fi-ta table tbody td .fi-ta-text-input .fi-input-wrp, .fi-ta table tbody td .fi-ta-select .fi-input-wrp { min-height: var(--en-cell-content); height: var(--en-cell-content); align-items: center; } /* الخانة نفسها: نفس الارتفاع بلا حشو رأسي — النص يتوسّط بـline-height */ .fi-ta table tbody td input:not([type="checkbox"]):not([type="radio"]), .fi-ta table tbody td select { height: var(--en-cell-content) !important; min-height: 0 !important; padding-block: 0 !important; line-height: var(--en-cell-content) !important; } /* الأزرار والأيقونات داخل الصف لا تتجاوز ارتفاع المحتوى فتمدّ الصف */ .fi-ta table tbody td .fi-ta-actions .fi-icon-btn { min-height: 0; } /* ===== ارتفاع الصف على قد سطر الاسم (بطلب المستخدم) ===== كان ٦٧ بكسل: مصدره حشو رأسي ١٦ بكسل أعلى وأسفل نص الخلية فيصير محتواها ٥٦. بإلغاء الحشو يعود المحتوى إلى ٢٤ بكسل = سطر الاسم، والصف يُثبَّت على ٤٢ بكسل وهو أطول محتوى ممكن (خانة إدخال ٢rem + حشو الخلية) فتتساوى كل صفوف النظام. */ /* نص الخلية بلا حشو رأسي — الحشو كان يضاعف ارتفاع الصف */ /* الغلاف والمحتوى معًا: الحشو الرأسي ١٦ بكسل على الغلاف كان يطوّل الصف */ .fi-ta table tbody td .fi-ta-text, .fi-ta table tbody td .fi-ta-text-input, .fi-ta table tbody td .fi-ta-select, .fi-ta table tbody td .fi-ta-text-item, .fi-ta table tbody td .fi-ta-text-description, .fi-ta table tbody td .fi-ta-icon, .fi-ta table tbody td .fi-ta-image { padding-block: 0 !important; } .fi-ta table tbody td > .fi-ta-col, .fi-ta table tbody td > a.fi-ta-col, .fi-ta table tbody td > button.fi-ta-col { min-height: 0 !important; } /* الشارات (المرحلة/الموقف) على ارتفاع سطر الاسم نفسه */ .fi-ta table tbody td .fi-badge { padding-block: var(--en-ta-badge-pad-block) !important; } /* ===== شاشة خزينة الفرع (بطلب المستخدم: احترافية لأقصى درجة) ===== القالب كان بأصناف تيلويند غير موجودة في تنسيق اللوحة المبني، فكان يُرسم عاريًا. كل ما يلي أصناف حقيقية في هذا الملف الذي يُحقن مع كل صفحة. */ .en-tr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin-bottom: .9rem; } .en-tr-strip-cell { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem; background: var(--en-white); border: 1px solid var(--gray-300); border-radius: .6rem; border-inline-start: 4px solid var(--gray-400); } .en-tr-strip-cell.is-balance { border-inline-start-color: var(--primary-600); } .en-tr-strip-cell.is-in { border-inline-start-color: var(--success-600); } .en-tr-strip-cell.is-out { border-inline-start-color: var(--danger-600); } .en-tr-strip-cell.is-closed { border-inline-start-color: var(--info-600); } .en-tr-strip-cell .en-tr-v { font-size: var(--en-fs-xl); font-weight: var(--en-fw-bold); letter-spacing: var(--en-ls-tight); } .en-tr-strip-cell.is-balance .en-tr-v { color: var(--primary-700); } .en-tr-strip-cell.is-in .en-tr-v { color: var(--success-700); } .en-tr-strip-cell.is-out .en-tr-v { color: var(--danger-700); } .en-tr-strip-cell.is-closed .en-tr-v { color: var(--info-700); } .en-tr-k { font-size: var(--en-fs-xs); color: var(--gray-500); font-weight: var(--en-fw-semibold); } .en-tr-n { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--gray-900); } .en-tr-n i { font-style: normal; color: var(--gray-500); font-weight: var(--en-fw-medium); font-size: var(--en-fs-xs); } /* بطاقات الخزائن صغيرة وفي صفّين على الأكثر (بطلب المستخدم): أحد عشر فرعًا كانت تأخذ ثلث الشاشة قبل أن تظهر الحركات. السقف بارتفاع صفّين مع تمرير رأسي — فلا يختفي فرع مهما ضاقت الشاشة. */ .en-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .4rem; margin-bottom: .7rem; max-height: 16rem; /* كان 15.2rem — البطاقة أطول ١٢ بكسل مع حدّ 12px (المرحلة ٢) */ overflow-y: auto; padding-inline-end: .15rem; } .en-tr-card { display: flex; flex-direction: column; gap: .3rem; padding: .45rem .55rem; background: var(--en-white); border: 1px solid var(--gray-300); border-radius: .55rem; box-shadow: 0 1px 2px color-mix(in srgb, var(--gray-900) 4%, transparent); } /* الخزينة التي بها نقدية لم تُقفَّل بعد: حافة تنبيه هادئة */ .en-tr-card.has-cash { border-color: var(--warning-300); background: linear-gradient(180deg, var(--warning-50) 0, var(--en-white) 2.6rem); } .en-tr-card.is-main { border-color: var(--primary-200); background: linear-gradient(180deg, var(--primary-50) 0, var(--en-white) 2.6rem); } .en-tr-head { display: flex; align-items: center; gap: .3rem; } .en-tr-name { font-weight: var(--en-fw-bold); font-size: var(--en-fs-sm); color: var(--gray-900); line-height: 1.25; } .en-tr-chip { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--primary-700); background: var(--primary-100); border: 1px solid var(--primary-300); padding: .02rem .3rem; border-radius: 999px; } .en-tr-balance { display: flex; align-items: baseline; gap: .2rem; } .en-tr-balance b { font-size: var(--en-fs-lg); font-weight: var(--en-fw-bold); letter-spacing: var(--en-ls-tighter); color: var(--gray-700); } .en-tr-balance span { font-size: var(--en-fs-xs); color: var(--gray-400); font-weight: var(--en-fw-semibold); } .en-tr-card.has-cash .en-tr-balance b { color: var(--warning-700); } .en-tr-card.is-main .en-tr-balance b { color: var(--primary-700); } .en-tr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .en-tr-stat { display: flex; flex-direction: column; gap: 0; padding: .2rem .35rem; border-radius: .35rem; } .en-tr-stat.is-in { background: var(--success-50); } .en-tr-stat.is-in .en-tr-n { color: var(--success-700); } .en-tr-stat.is-out { background: var(--danger-50); } .en-tr-stat.is-out .en-tr-n { color: var(--danger-700); } .en-tr-foot { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem; padding-top: .3rem; border-top: 1px dashed var(--gray-200); } /* حدّ 12px (المرحلة ٢ — قرار المالك ١٠ أكتوبر) على بطاقات الخزائن: عناوينُها الصغيرة كانت 9.9–10.6px فصارت 12، فالتفّت «مصروف اليوم» و«آخر تقفيل» و«العهدة الثابتة» سطرين، وانكسر تاريخُ التقفيل عند شَرطته، وخرج فرقُ العهدة من إطاره (مقيس على ١٢٨٠ بالقائمة و٣٩٠). الحشوُ الأفقي أضيق والعنوانُ سطرٌ واحد، وما لا يتّسع في سطر العهدة أو التذييل ينزل سطرًا كاملًا لا حرفًا حرفًا، والتاريخُ كتلةٌ واحدة. عددُ البطاقات في الصف كما هو. */ .en-tr-card { padding-inline: .45rem; } .en-tr-stat { padding-inline: .3rem; } .en-tr-stat .en-tr-k, .en-tr-custody > *, .en-tr-foot > * { white-space: nowrap; } .en-tr-custody, .en-tr-foot { flex-wrap: wrap; row-gap: .1rem; } .en-tr-n i { direction: ltr; unicode-bidi: isolate; white-space: nowrap; } /* التلفون: بطاقة في كل سطر وأرقام أكبر قليلًا لسهولة القراءة */ @media (max-width: 640px) { .en-tr-grid { grid-template-columns: 1fr 1fr; max-height: 18rem; } .en-tr-strip { grid-template-columns: 1fr 1fr; } .en-tr-balance b { font-size: var(--en-fs-xl); } } /* ===== خانات الفورم على التلفون: لا سقف ارتفاع (en-narrow-field-fix) ===== السقف 2.4rem أعلاه وُضع لتوحيد ارتفاع خانات الفورم على الكمبيوتر، وهو سليم هناك لأن محتوى الخانة يقع في سطر واحد. على عرض التلفون يلتف نص القائمة المنسدلة أو قيمتها المختارة إلى سطرين فيُقصّان تحت السقف، فتبدو القائمة «بايظة» عند فتحها. الحد الأدنى يبقى فيتوحّد الشكل، والسقف يُرفع للشاشات الضيقة وحدها. */ @media (max-width: 640px) { .fi-fo-field .fi-input-wrp:not(:has(textarea)) { max-height: none; height: auto; } /* لوحة الاختيار المنسدلة تعلو كل شيء ولا يقصّها أي غلاف */ .fi-dropdown-panel, .choices__list--dropdown { z-index: 60; max-width: calc(100vw - 1.5rem); } } /* ===== التلفون: زر الحذف بعيد عن العرض والرفع (en-phone-delete-gap) ===== أزرار صف الورقة الثلاثة متلاصقة، وعلى شاشة اللمس يسهل أن تقع الإصبع على الحذف بدل العرض أو الرفع. المسافة والفاصل هنا للشاشات الضيقة وحدها — الكمبيوتر كما هو. */ @media (max-width: 640px) { .fi-fo-repeater-item-header-end-actions { gap: 1rem; align-items: center; } /* الحذف وحده أحمر (fi-color-danger): يُفصَل بمسافة وحدّ خفيف قبله */ .fi-fo-repeater-item-header-end-actions > li:has(.fi-color-danger) { margin-inline-start: 1.5rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--gray-200); } /* أهداف لمس أكبر لأزرار الصف على التلفون */ .fi-fo-repeater-item-header-end-actions .fi-icon-btn { min-width: 2.25rem; min-height: 2.25rem; } } /* العهدة الثابتة داخل بطاقة الخزينة: مطابق/زائد/ناقص */ .en-tr-custody { display: flex; align-items: baseline; gap: .45rem; padding: .35rem .55rem; border-radius: .45rem; background: var(--gray-100); border: 1px dashed var(--gray-300); } .en-tr-custody .en-tr-gap { margin-inline-start: auto; font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); } .en-tr-custody.is-exact .en-tr-gap { color: var(--success-700); } .en-tr-custody.is-over .en-tr-gap { color: var(--warning-700); } .en-tr-custody.is-under .en-tr-gap { color: var(--danger-700); } /* ===== شاشة «الدفع من المحافظ» ===== */ .en-wp-ask { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .8rem; margin-bottom: .7rem; background: var(--en-white); border: 1px solid var(--gray-300); border-radius: .6rem; border-inline-start: 4px solid var(--primary-600); } .en-wp-input { width: 11rem; padding: .35rem .55rem; font-size: var(--en-fs-lg); font-weight: var(--en-fw-bold); color: var(--gray-900); background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: .45rem; } .en-wp-best { font-size: var(--en-fs-base); font-weight: var(--en-fw-bold); color: var(--success-700); background: var(--success-50); border: 1px solid var(--success-300); border-radius: 999px; padding: .12rem .6rem; } .en-wp-none { font-size: var(--en-fs-base); font-weight: var(--en-fw-bold); color: var(--danger-700); background: var(--danger-50); border: 1px solid var(--danger-300); border-radius: 999px; padding: .12rem .6rem; } .en-wp-card.is-best { border-color: var(--success-400); background: linear-gradient(180deg, var(--success-50) 0, var(--en-white) 2.6rem); } .en-wp-card.is-fit { border-color: var(--success-200); } .en-wp-card.is-blocked { opacity: .62; } .en-wp-tag { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); border-radius: 999px; padding: .05rem .45rem; margin-inline-start: auto; } .en-wp-tag.is-best { color: var(--success-800); background: var(--success-100); border: 1px solid var(--success-300); } .en-wp-tag.is-blocked { color: var(--danger-800); background: var(--danger-100); border: 1px solid var(--danger-300); } .en-wp-phone { font-size: var(--en-fs-xs); color: var(--gray-500); font-weight: var(--en-fw-semibold); margin-inline-start: auto; white-space: nowrap; } /* حدّ 12px على بطاقات المحافظ (جولة إصلاح المرحلة ٢): الرقمُ «+201022949989» بجوار رصيدٍ من خمسة أرقام كان يخرج من إطار البطاقة ١٣ بكسل وتقصّه الشبكة (تمريرُها الرأسي يقصّ الأفقي أيضًا)، و«حساب بنكي» يلتفّ كلمتين داخل شريحته، وعلى ٣٩٠ تتّسع البطاقتان أعرضَ من الشاشة. ما لا يتّسع ينزل سطرًا كاملًا: الهاتفُ تحت الرصيد والشريحةُ تحت الاسم، كلٌّ كتلةٌ واحدة. */ .en-wp-card .en-tr-balance { flex-wrap: wrap; row-gap: 0; } .en-wp-card .en-tr-head { flex-wrap: wrap; row-gap: .15rem; } .en-wp-card .en-tr-chip { white-space: nowrap; } .en-wp-bars { display: grid; gap: .35rem; } .en-wp-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; } .en-wp-track { height: .35rem; background: var(--gray-200); border-radius: 999px; overflow: hidden; } .en-wp-track i { display: block; height: 100%; background: var(--primary-600); } .en-wp-card.is-blocked .en-wp-track i { background: var(--danger-600); } .en-wp-bars.is-ip { padding-top: .3rem; border-top: 1px dashed var(--gray-200); } .en-wp-chan { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--info-700); } .en-wp-bars.is-ip .en-wp-track i { background: var(--info-600); } /* ===== التلفون: لا أعمدة مثبّتة في الجداول العريضة ===== العمودان المثبّتان ١٥rem لكلٍّ (٤٨٠ بكسل معًا) أوسعُ من شاشة التلفون نفسها، فيغطّيان المنطقة المتحركة كلها: يُسحب الجدول أفقيًا فلا يتحرك تحت الإصبع شيء ويبدو الاسكرول «عالقًا» (بطلب المستخدم: «الاسكرول الافقي بيعلق من الهاتف»). على الشاشات الضيقة يتحرر الجدول: بلا تثبيت، وبلا ارتفاع محدود يجعل التمرير محبوسًا في صندوق داخل صفحة تُمرَّر هي الأخرى. */ @media (max-width: 900px) { /* relative لا static: خلية الرأس مرجعُ مقبض تغيير العرض المطلق، وstatic تفكّ ارتباطه بها فيمتدّ خطًّا أخضر على طول الجدول فوق الأسماء */ .en-frozen-1, .en-frozen-2, .en-sticky-col, .fi-ta-table thead .fi-ta-header-cell { position: relative !important; z-index: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; top: auto !important; } /* عمود الأزرار وحده يبقى مثبّتًا على الحافة اليسرى بعرض الأزرار فقط (بطلب المستخدم) — عمودُ أسماءٍ عريض يبتلع الشاشة، أما الأزرار فلا */ .fi-ta-cell:has(.fi-ta-actions), .fi-ta-table thead .fi-ta-actions-header-cell { position: sticky !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; top: auto !important; z-index: 6 !important; width: 1% !important; white-space: nowrap; padding-inline: .25rem !important; } .fi-ta-cell:has(.fi-ta-actions) .fi-ta-actions { flex-wrap: nowrap; gap: .15rem; } /* سحب عرض الأعمدة لا معنى له باللمس، والمقبض يعلو النص */ .en-col-resizer { display: none !important; } .en-frozen-1, .en-frozen-2 { width: auto !important; min-width: 9rem !important; max-width: none !important; } .fi-ta-content-ctn { max-height: none !important; overflow-y: visible !important; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } } /* العمود المثبّت الثاني حين يُخفى الأول: إزاحته ١٥rem تترك فراغًا وتغطّي ما تحته، فإن صار أول خلية في الصف رجع إلى الحافة (بعد أن صارت كل الأعمدة قابلة للإخفاء) */ .fi-ta-cell.en-frozen-2:first-child, .fi-ta-header-cell.en-frozen-2:first-child { inset-inline-start: 0 !important; } /* ===== شاشة الرسومات الهندسية (en-frozen-fit): «العميل» و«المالك» المثبّتان ١٢rem لا ١٥ ===== عمودُ أزرارها عريض (حتى ٣١٣ بكسل عند الإدارة) فكان ١٥rem×٢ + الأزرار يتركان للتمرير ١٠١ بكسل على ١٢٨٠ بالقائمة، ويغطّي عمودُ الأزرار «المالك» على ١٠٢٤–١١٠٠ بالقائمة (٤٧–١٥٥ بكسل، مقيس). والاسمُ الأطول يُقصّ بـ«…» وكاملًا في التلميح. وشاشةُ الوثائق كما هي (الصنف في هذه الشاشة وحدها) */ .fi-ta-table .en-frozen-fit.en-frozen-1, .fi-ta-table .en-frozen-fit.en-frozen-2 { width: 12rem; min-width: 12rem; max-width: 12rem; } .fi-ta-table .en-frozen-fit.en-frozen-2 { inset-inline-start: 12rem; } /* وحين لا يتسع الجدول لهما وللأزرار ومعها ~١٨٠ بكسل تُمرَّر يُفكّان (يتحرّكان مع الجدول) — عرضُ الجدول الشاشةُ − ٦٦ بلا القائمة و− ٣٨٦ بها (مقيس)، فالحدّ ٩٤٠ بلا القائمة و١٢٦٠ بها. والرأسُ باقٍ ثابتًا رأسيًّا، وتحت ٩٠٠ قاعدةُ التليفون كما هي */ @media (min-width: 901px) and (max-width: 940px) { .fi-ta-table .fi-ta-cell.en-frozen-fit, .fi-ta-table .fi-ta-header-cell.en-frozen-fit { inset-inline-start: auto !important; } } @media (min-width: 1024px) and (max-width: 1260px) { body:has(.fi-sidebar.fi-sidebar-open) .fi-ta-table .fi-ta-cell.en-frozen-fit, body:has(.fi-sidebar.fi-sidebar-open) .fi-ta-table .fi-ta-header-cell.en-frozen-fit { inset-inline-start: auto !important; } } /* عدّادُ «الملفات» يعلو ركنَ زرّه جهةَ جاره: مسافةٌ بقدره فلا يركب «رفع ملفات» بجواره (٨×١٤ بكسل على الكمبيوتر و١٦×١٤ على التليفون، مقيس — وصار على كل الصفوف تقريبًا بعد عدّ ملفات الوثيقة) */ .fi-resource-drawing-requests .fi-ta-actions .fi-icon-btn:has(> .fi-icon-btn-badge-ctn) { margin-inline-end: .75rem; } /* وعددُ النواقص الأحمر على «استلام الإدخال» («بانتظار الإدخال» في شاشة الإدخال) كان يقع فوق دائرة «نقل المرحلة» بجواره فيُقرأ عددًا لها — المسافةُ نفسُها تُبقيه على ركن زرّه */ .fi-ta-actions .fi-icon-btn[wire\:click^="mountAction('claimEntry'"]:has(> .fi-icon-btn-badge-ctn) { margin-inline-end: .75rem; } /* قائمةُ «…» في صفّ جدول: خليةُ الأزرار المثبّتة طبقةٌ ٦ في كل صف، فكانت لوحتُها تنزل تحت خلايا الصفوف التالية فلا تُرى (مقيس) — الخليةُ التي قائمتُها مفتوحةٌ فوق جاراتها، وتحت رأس الجدول (٩) */ .fi-ta-cell:has(.fi-dropdown-panel:not([style*="display: none"])) { z-index: 8 !important; } /* ===== شاشة الواتساب: صندوق مشترك يفتحه أكثر من موظف ===== */ .en-wa-offline { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .6rem .9rem; margin-bottom: .7rem; background: var(--danger-50); border: 1px solid var(--danger-300); border-radius: .6rem; color: var(--danger-800); } .en-wa-offline b { font-weight: var(--en-fw-bold); } .en-wa-offline span { font-size: var(--en-fs-sm); } .en-wa-offline a { margin-inline-start: auto; font-weight: var(--en-fw-bold); color: var(--primary-700); text-decoration: underline; } .en-wa { display: grid; grid-template-columns: 21rem 1fr; gap: .6rem; height: calc(100vh - 12rem); min-height: 30rem; } .en-wa-list { display: flex; flex-direction: column; overflow: hidden; background: var(--en-white); border: 1px solid var(--gray-300); border-radius: var(--en-radius); } .en-wa-search { padding: .5rem; border-bottom: 1px solid var(--gray-200); } .en-wa-search input { width: 100%; padding: .4rem .6rem; font-size: var(--en-fs-base); background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: .45rem; } .en-wa-tabs { display: flex; gap: .25rem; padding: .4rem .5rem; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; } .en-wa-tab { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .5rem; font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; } .en-wa-tab.is-on { background: var(--primary-600); border-color: var(--primary-600); color: var(--en-white); } .en-wa-tab i { font-style: normal; font-size: var(--en-fs-xs); opacity: .85; } .en-wa-chats { flex: 1; min-height: 0; overflow-y: auto; } .en-wa-chat { display: block; width: 100%; text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--gray-100); cursor: pointer; /* المكان محجوز دائمًا: وسمُ «جديدة» كان يزيح نصّ صفّه وحده ٣ بكسل */ border-inline-start: 3px solid transparent; } .en-wa-chat:hover { background: var(--gray-50); } .en-wa-chat.is-active { background: var(--success-50); } .en-wa-chat.is-new { border-inline-start-color: var(--warning-500); } .en-wa-chat-top { display: flex; justify-content: space-between; gap: .4rem; } .en-wa-name { font-weight: var(--en-fw-bold); font-size: var(--en-fs-base); color: var(--gray-900); } .en-wa-time { font-size: var(--en-fs-xs); color: var(--gray-400); } .en-wa-chat-mid { display: flex; justify-content: space-between; gap: .4rem; align-items: center; min-width: 0; } .en-wa-last { flex: 1; font-size: var(--en-fs-xs); color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .en-wa-unread { font-style: normal; font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--en-white); background: var(--success-600); border-radius: 999px; padding: .1rem .4rem; line-height: 1.5; } .en-wa-chat-foot { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; } .en-wa-chip { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); border-radius: 999px; padding: .12rem .45rem; line-height: 1.6; } .en-wa-chip.is-NEW { color: var(--warning-800); background: var(--warning-100); border: 1px solid var(--warning-300); } .en-wa-chip.is-OPEN { color: var(--info-800); background: var(--info-100); border: 1px solid var(--info-300); } .en-wa-chip.is-DONE { color: var(--success-800); background: var(--success-100); border: 1px solid var(--success-300); } .en-wa-who { font-size: var(--en-fs-xs); color: var(--gray-500); } .en-wa-who.is-take { color: var(--en-violet-600); font-weight: var(--en-fw-bold); } .en-wa-who.is-live { color: var(--warning-700); font-weight: var(--en-fw-bold); } .en-wa-thread { display: flex; flex-direction: column; overflow: hidden; background: var(--en-white); border: 1px solid var(--gray-300); border-radius: var(--en-radius); } .en-wa-blank, .en-wa-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem; color: var(--gray-400); font-size: var(--en-fs-base); } .en-wa-pane { display: flex; flex-direction: column; height: 100%; } .en-wa-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); } .en-wa-head b { font-size: var(--en-fs-md); color: var(--gray-900); } .en-wa-num { font-size: var(--en-fs-xs); color: var(--gray-400); margin-inline-start: .4rem; } .en-wa-head-actions { display: flex; align-items: center; gap: .5rem; } .en-wa-btn { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--primary-700); background: var(--primary-100); border: 1px solid var(--primary-300); border-radius: .4rem; padding: .18rem .55rem; } .en-wa-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem; background: var(--gray-50); } .en-wa-msg { display: flex; margin-bottom: .35rem; } .en-wa-msg.is-out { justify-content: flex-start; } .en-wa-msg.is-in { justify-content: flex-end; } .en-wa-bubble { max-width: 70%; padding: .35rem .6rem; border-radius: .6rem; background: var(--en-white); border: 1px solid var(--gray-200); font-size: var(--en-fs-sm); color: var(--gray-900); display: flex; flex-direction: column; gap: .15rem; } .en-wa-msg.is-out .en-wa-bubble { background: var(--success-100); border-color: var(--success-200); } .en-wa-author { font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--primary-600); } .en-wa-text { white-space: pre-wrap; word-break: break-word; } .en-wa-file { font-weight: var(--en-fw-bold); color: var(--info-700); text-decoration: underline; } /* الصورة داخل الفقاعة: تُعرض ولا يُنزَّل الملف لرؤيتها */ .en-wa-img { display: block; max-width: 260px; max-height: 260px; width: auto; height: auto; border-radius: 10px; margin: 4px 0; object-fit: cover; background: var(--gray-200); } /* فاصل نتائج دفتر الأسماء عن المحادثات */ .en-wa-sep { padding: 6px 10px; font-size: var(--en-fs-xs); font-weight: var(--en-fw-bold); color: var(--gray-500); background: var(--gray-100); border-block: 1px solid var(--gray-200); } .en-wa-chat.is-contact { opacity: .92; } .en-wa-meta { display: flex; gap: .3rem; align-self: flex-end; } .en-wa-meta i { font-style: normal; font-size: var(--en-fs-xs); color: var(--gray-400); } .en-wa-compose { display: flex; align-items: flex-end; gap: .4rem; padding: .5rem; border-top: 1px solid var(--gray-200); background: var(--en-white); } .en-wa-compose textarea { flex: 1; resize: none; max-height: 7rem; padding: .45rem .6rem; font-size: var(--en-fs-base); background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: .5rem; } .en-wa-attach { display: inline-flex; align-items: center; cursor: pointer; padding: .35rem; border-radius: .4rem; color: var(--gray-500); } .en-wa-attach:hover { background: var(--gray-100); color: var(--primary-700); } .en-wa-send { font-weight: var(--en-fw-bold); font-size: var(--en-fs-sm); color: var(--en-white); background: var(--primary-600); border-radius: .5rem; padding: .45rem .9rem; } .en-wa-send:disabled { background: var(--gray-400); } /* استجابةُ الأزرار والحقول كبقية اللوحة: كانت ساكنةً بلا تمرير ولا تركيز */ .en-wa-tab, .en-wa-btn, .en-wa-send { transition: background-color .15s ease, border-color .15s ease; } .en-wa-tab:hover:not(.is-on) { background: var(--gray-200); } .en-wa-btn:hover { background: var(--primary-200); } .en-wa-send:hover:not(:disabled) { background: var(--primary-700); } .en-wa-tab:focus-visible, .en-wa-btn:focus-visible, .en-wa-send:focus-visible, .en-wa-attach:focus-visible, .en-wa-chat:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; } .en-wa-search input:focus, .en-wa-compose textarea:focus { outline: none; border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600); } @media (max-width: 900px) { .en-wa { grid-template-columns: 1fr; height: auto; } .en-wa-list { max-height: 22rem; } .en-wa-thread { min-height: 28rem; } .en-wa-bubble { max-width: 88%; } } /* ===== كتل ورقة أوامر الدفع: عنوان الكتلة هو الفاصل بين المجموعات ===== عنوان المجموعة في فيلامنت ٥ عنصر div بصنف fi-ta-group-header داخل صف fi-ta-group-header-row، وعنوانه fi-ta-group-heading — لا tr ولا fi-ta-group-header-heading (قواعد سابقة لم تطابق شيئًا فلم يظهر الفاصل). */ /* فاصلٌ ثقيل بين الكتل (بطلب المستخدم: «افصل كل فرع لوحده بفاصل ثقيل»): خطٌّ داكنٌ ثخين فوق عنوان الكتلة، وظلٌّ خفيف تحته يفصل بصريًّا. */ .fi-ta-group-header { border-top: 6px solid var(--gray-500) !important; background: var(--gray-200) !important; box-shadow: inset 0 -1px 0 var(--gray-300); } .fi-ta-group-heading { font-weight: var(--en-fw-bold) !important; font-size: var(--en-fs-md) !important; color: var(--gray-900) !important; } /* عنوان الكتلة يبقى ظاهرًا مع التمرير الأفقي (بطلب المستخدم: «وأنا بعمل اسكرول أفقي كلمة كتلة الورقة والاسم والعدد يظل ظاهر») — خلية العنوان تمتد على عرض الجدول كله (colspan)، فنصُّها يغيب يسارًا مع أول تمرير. الملصوق هو العنصرُ الملصوق هو ابنُ الغلاف لا الغلافُ نفسه ولا العنوانُ داخله: إلصاقُ الغلاف يجرّ معه الفاصل الثقيل فيصير شريطًا قصيرًا بدل خطٍّ يعبر الجدول، وإلصاقُ العنوان لا يعمل لأن غلافه المباشر عنصرٌ مرنٌ بعرض محتواه (١٥٢px مقيسًا) فلا مسافةَ التصاقٍ فيه — أما ابنُ الغلاف فكتلتُه الحاوية هي الغلاف بعرض الجدول كله (٣٠٠٠px). وخلفية الغلاف ممتدةٌ على العرض كله فلا حاجة لخلفيةٍ خاصة. */ .fi-ta-group-header-cell > .fi-ta-group-header > div:first-child { position: sticky; inset-inline-start: 1rem; } /* أول كتلة في الجدول لا تحتاج فاصلًا فوقها */ .fi-ta-group-header-row:first-child .fi-ta-group-header { border-top: 0 !important; } /* فرع بلا عهدة مسجَّلة: يُنبَّه بهدوء بدل أن يختفي السطر فلا يُعرف أنه ناقص */ .en-tr-custody.is-unset { background: var(--warning-50); border: 1px dashed var(--warning-300); color: var(--warning-800); } /* «متبقي X من الحد» — الحدّ أصغر وأخفت كي يُقرأ المتبقي أولًا */ .en-wp-bar-top .en-tr-n i { font-style: normal; font-size: var(--en-fs-xs); color: var(--gray-400); font-weight: var(--en-fw-medium); } /* الشريط الثابت أسفل فورم الوثيقة: «المرحلة» وزرّا الحفظ والإلغاء في شريطٍ واحد (بطلب المستخدم مكرّرًا) — الشريط هو تذييل الفورم نفسه، فلا قسمَ لاصقًا فوق شريط. غلاف فيلامنت حول التذييل بارتفاعه نفسه وsticky لا تتحرك إلا داخل أبيها، فيُذاب الغلاف بـdisplay:contents ليصير الأب هو الفورم كله. */ .fi-fo-form-footer:has(.en-stage-bar), .fi-sc-component:has(> .en-stage-bar), .fi-grid-col:has(> .fi-sc-component > .en-stage-bar), .fi-sc:has(> .fi-grid-col > .fi-sc-component > .en-stage-bar) { display: contents; } .en-stage-bar { position: sticky; bottom: 0; z-index: 20; display: flex; gap: .75rem; padding: .55rem .9rem; background: var(--en-white); border-top: 1px solid color-mix(in srgb, var(--gray-400) 35%, transparent); box-shadow: 0 -6px 14px -10px color-mix(in srgb, var(--gray-900) 35%, transparent); } /* صفٌّ واحد دائمًا: المرحلة ثم الأزرار — حتى على التليفون (بطلب المستخدم). Flex في فيلامنت يوزّع أبناءه بالتساوي (flex:1 1 0) فتضيق خانة الأزرار على الشاشة الصغيرة وتنكسر أربعة أسطر فوق بعض. القائمة بعرضها والأزرار تأخذ الباقي، وما زاد عن العرض يُمرَّر أفقيًا بدل أن يتكوّم. */ /* التمرير الأفقي على خانة الأزرار وحدها لا على الشريط: overflow-x:auto مع overflow-y:visible لا وجود له في CSS — المحور «visible» يُحسب auto متى كان الآخر غيره، فكان الشريط (٨٠ بكسل) يقصّ قائمة المرحلة رأسيًا (بلاغ المستخدم: «القائمة تتقص»). الأزرار لا قوائم منسدلة فيها فتمريرها آمن. */ .en-stage-bar { overflow: visible; align-items: center; } .en-stage-bar > *:last-child { overflow-x: auto; } /* أي قائمة تُفتح من الشريط تفتح لأعلى كاملةً من أول ضغطة (بطلب المستخدم: «مش لازم اعمل اسكرول»): الشريط ملاصق لأسفل الشاشة فلا مساحة تحته، وفيلامنت يضع top بنمطٍ سطري فلا يُزاح إلا بـ!important. والمراحل أربع فلا تمرير. */ .en-stage-bar .fi-dropdown-panel { top: auto !important; bottom: calc(100% + .4rem) !important; max-height: min(60vh, 24rem) !important; } /* الابن الأول (المرحلة) بعرضٍ ثابت، والثاني (الأزرار) يأخذ الباقي ويُسمح له بالانكماش (min-width:0) وإلا دفع القائمةَ خارج الشاشة */ .en-stage-bar > *:first-child { flex: 0 0 14rem !important; width: 14rem; min-width: 0; } .en-stage-bar > *:last-child { flex: 1 1 auto !important; min-width: 0; } .en-stage-bar .en-stage-bar-select { min-width: 9rem; max-width: 20rem; } .en-stage-bar .fi-ac, .en-stage-bar .fi-sc-actions { flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: .4rem; } .en-stage-bar .fi-ac button { white-space: nowrap; } /* بين ٦٤١ و١١٥٠ تقريبًا (تليفون أفقي، آيباد، لابتوب بتكبير ١٢٥٪) تزيد الأزرار عن خانتها فيتوسّطها center ويُقصّ «حفظ» تحت قائمة المرحلة — safe يُبقي البداية ظاهرة (والفائض يتمرّر)، وحيث تتسع الأزرار لا يتغيّر شيء؛ ومتصفحٌ بلا safe يُسقط السطر كما اليوم */ .en-stage-bar .fi-sc-actions { align-items: safe center; } /* على التليفون: صفٌّ واحد وكل الأزرار ظاهرةٌ بلا تمرير ومركزُ كلٍّ منها تحت الإصبع هو الزرّ نفسه (مقيسٌ ٢٨ سبتمبر على ٣٩٠ و٤٣٠ بـelementFromPoint). كان «حفظ» تحت قائمة المرحلة فيفتحها الإصبع بدل الحفظ: القائمة min-width 9rem في عمودٍ من 7.5rem تفيض ٢٤ بكسل فوق الأزرار ونصُّها ثلاثة أسطر، وخانة الأزرار عمودٌ مرن بـalign-items:center فتتوسّط الأزرار حين تزيد عن العرض وتُقصّ من الجهتين — «حفظ» من جهة البداية التي لا يصلها التمرير، و«إلغاء» من الأخرى. زادت الأزرار من ٧ سبتمبر إلى ستة. الآن: الأزرار بعرضها تبدأ من جهة القائمة، والقائمة تأخذ الباقي (5.5–14rem) بنصٍّ سطرٍ واحد ينتهي بنقاط، والشريط بعرض الشاشة (يلغي حشو الصفحة 1rem)، و«إلغاء» نصٌّ بلا أيقونة كـ«حفظ» وأزرار الطباعة أيقوناتٌ كما كانت. وما زاد يومًا (زرٌّ جديد، شاشةٌ أضيق) يُمرَّر داخل خانته من بدايتها. */ @media (max-width: 640px) { .en-stage-bar { gap: .3rem; padding: .4rem .5rem; margin-inline: -1rem; } /* القائمة تنكمش قبل الأزرار (1000 مقابل 1)؛ وwidth:auto لأن fi-growable في فيلامنت w-full فيبدأ كل عمودٍ بعرض الشريط */ .en-stage-bar > *:first-child { flex: 1 1000 14rem !important; width: auto; min-width: 5.5rem; max-width: 14rem; } .en-stage-bar > *:last-child { flex: 0 1 auto !important; width: auto; } /* أغلفة الخانة (شبكة) أدنى عرضها طول النص — تُفكّ ليصير النص هو ما يضيق */ .en-stage-bar > *:first-child .fi-grid-col, .en-stage-bar > *:first-child .fi-fo-field-label-col, .en-stage-bar > *:first-child .fi-fo-field-content-col, .en-stage-bar .fi-select-input-value-ctn { min-width: 0; } .en-stage-bar .en-stage-bar-select { min-width: 0; max-width: none; } .en-stage-bar .fi-select-input-value-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* المرحلة مطلوبة: زرّ المسح × لا يُنتج إلا «المرحلة مطلوبة»، ويحجز 1.5rem من نصٍّ ضيّق */ .en-stage-bar .fi-select-input-value-remove-btn { display: none; } .en-stage-bar .fi-select-input-ctn-clearable .fi-select-input-btn { padding-inline: .5rem 2rem; } /* القائمة المفتوحة لا تضيق بضيق خانتها: تبدأ من حافّتها اليمنى وبعرض أطول مرحلة */ .en-stage-bar .fi-select-input .fi-dropdown-panel { width: max-content !important; min-width: 100%; left: auto !important; right: 0 !important; } .en-stage-bar .fi-sc-actions { align-items: flex-start; } .en-stage-bar .fi-ac { gap: .3rem; } .en-stage-bar .fi-fo-field-wrp-label { font-size: var(--en-fs-xs); } .en-stage-bar .fi-ac button .fi-btn-label { font-size: var(--en-fs-xs); } /* نصّ الزر عقدةٌ نصّية حرّة لا عنصر له صنف — يُخفى بحجم خطٍّ صفر (--en-fs-none) وتبقى الأيقونة */ .en-stage-bar .en-bar-compact { font-size: var(--en-fs-none); gap: 0; padding-inline: .55rem; } .en-stage-bar .en-bar-compact svg { width: 1.15rem; height: 1.15rem; } /* الرابط الوحيد في الشريط بلا en-bar-compact هو «إلغاء» (حفظ/حفظ مؤقت أزرار