/* ═══════════════════════════════════════════════════════════════════════════ jadhlah — القوائم البحثيّة ومنتقي التاريخ · `jadhlah-picker.css` ═══════════════════════════════════════════════════════════════════════════ **قرار سعود (٢٢ سبتمبر ٢٠٢٦) بالحرف:** «عند وجود قائمة منسدلة — افتراضي حسب المتصفح — القوائم هذه ليست مخصصة ولا عملية، وفي حال وجود عدد أسماء كبير صعب البحث. الأفضل قائمة منسدلة صديقة ui-ux تدعم البحث. نفس الموضوع ينطبق على التواريخ.» ── 🔑 والورقةُ **مُنطاقةٌ تحت بادئتين** لا غير ──────────────────────────── `.jpk*` للقائمة و`.jdp*` للتاريخ. ولا قاعدةٌ واحدة على وسمٍ عارٍ (`select` · `input` · `button`) — فهذه الورقة تُحمَّل في **كل** لوحة، وقاعدةٌ عامّةٌ فيها تُغيّر شكل صفحاتٍ لم يطلب أحدٌ تغييرها. ── ⚠️ وكلُّ رمزٍ له احتياطيّ ───────────────────────────────────────────── `var(--surface-2, #1a1a21)` — فـ`tokens.css` تُحمَّل في ٤٤ ملفاً **لا في كلّها**، و**متغيّرٌ غير معرَّف لا يرمي شيئاً**: تُسقَط الخاصيةُ بصمت فيخرج المكوّن بلا خلفية. (سابقةُ `--gold-light` في `portal.css` موثَّقةٌ في `CLAUDE.md`.) ── 🔴 و١٦ بكسل حدٌّ أدنى لحقل البحث ────────────────────────────────────── سفاري على iOS **يُكبّر الصفحة تلقائياً** عند التركيز على حقلٍ أصغر، فيقفز التخطيط ويفقد المستخدم مكانه. وعلاجه رقمٌ واحد. ── ⚠️ والطبقةُ أعلى من كل شيء ──────────────────────────────────────────── النافذة تُرسَم في `` مباشرةً (portal) لأن القوائم تعيش داخل نوافذ SweetAlert (`z-index: 1060`) وداخل حاوياتٍ فيها `overflow:hidden`. فلو رُسمت في مكانها لاختفت خلف النافذة أو قُصّت — وكلاهما «يعمل عندي ولا يعمل عنده». ═══════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════ ١) الرموز المحليّة — نقطةُ ضبطٍ واحدة للمكوّنين معاً ═════════════════════════════════════════════════════════════════════ */ .jpk, .jdp, .jpk-pop, .jdp-pop { --k-bg: var(--surface, #131318); --k-bg-2: var(--surface-2, #1a1a21); --k-bg-3: var(--surface-3, #24242c); --k-line: var(--line, #2a2a34); --k-txt: var(--txt, #f4f4f6); --k-txt-2: var(--txt-2, #adafb8); --k-txt-3: var(--txt-3, #71717c); --k-gold: var(--gold, #D4AF37); --k-gold-2: var(--gold-bright,#EACB66); --k-gold-d: var(--gold-deep, #b8941e); --k-r: var(--r-sm, 10px); --k-r-lg: var(--r, 14px); --k-ease: var(--ease, cubic-bezier(.22,.61,.36,1)); --k-sh: var(--sh-3, 0 12px 40px -12px rgba(0,0,0,.7)); /* ── وثلاثةٌ كانت تُقرأ خاماً خارج هذه الخريطة ────────────────────── كُشفت بجردٍ آليّ في ن٩ حين وُصّل المكوّنُ بصفحاتٍ **لا تحمّل `tokens.css`**. ⚠️ **ولم تكن تفشل صامتةً** — الثمانيةُ كلُّها كانت مكتوبةً باحتياطيّها السطريّ (`var(--fs-input, 16px)` …)، فحدُّ الـ١٦ بكسل كان قائماً ولم يُكبّر سفاري شيئاً. **وقياسٌ أثبت ذلك قبل اللمس** — فلا يُوصف إصلاحٌ لعطلٍ لم يقع. 🔑 **والنقلُ لموضعِ القرار لا لعطلٍ يُصلَح:** أربعةَ عشرَ رمزاً تُعلن تبعيّةَ الورقة هنا، وثلاثةٌ تُعلنها في ثمانيةِ أسطرٍ متفرّقة — فمن غيّر الاحتياطيّ في موضعٍ تركه في سبعة. ➕ **وكسبٌ واحدٌ حقيقيّ:** `--font-num` كان احتياطيُّه `inherit` أي خطَّ الصفحة، وصار سلسلةً تبدأ بـ`YearCamel` — **وهو الوحيدُ الذي فيه `tnum`** (مقيسٌ بـ`fontTools`، موثَّقٌ في `CLAUDE.md`). فصفحةٌ تُعرّفه بنفسها (تسعةَ عشرَ ملفاً تفعل) تكسب أرقاماً جدوليةً كانت تضيع. **واسمٌ بلا `@font-face` يُتخطّى بصمت** فالسقوطُ آمنٌ في كل حال. */ --k-num: var(--font-num, 'YearCamel','Tajawal',-apple-system,'Segoe UI',Tahoma,sans-serif); --k-fsin: var(--fs-input, 16px); --k-bad: var(--bad, #f2555a); } /* ═════════════════════════════════════════════════════════════════════ ٢) القائمة البحثيّة — الزرّ الذي يحلّ محلّ `` الأصليّ يبقى في الصفحة** — شفافاً فوق الزرّ تماماً، لا محذوفاً ولا `display:none`. وثلاثةُ أسبابٍ مقيسة: ١. كلُّ جافاسكربت قائم يقرأ `.value` و`.selectedIndex` يبقى يعمل. ٢. `FormData` و`required` و`name` تعمل كما هي. ٣. 🔑 **وكروم يرفض إظهار رسالة التحقّق لحقلٍ `display:none`** («not focusable») بينما يقبلها لحقلٍ `opacity:0`. فالفرق ليس تجميلياً: نموذجٌ لا يُرسَل ولا يقول لماذا. */ .jpk { position: relative; display: block; width: 100%; min-width: 0; } .jpk[data-jpk-inline="1"] { display: inline-block; width: auto; vertical-align: middle; } .jpk > select.jpk-native, .jdp > input.jdp-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; /* الضغطُ يصل الزرّ تحته */ z-index: 2; /* 🔴 **والصندوقُ يُصفَّر كلُّه — وليس تزييناً لما لا يُرى.** العنصرُ يرث صنفَ الصفحة (`.form-select` فيه `padding:9px 12px`)، فـ`width:100%` بـ`content-box` تُنتج عرضاً أكبر من غلافه ⇒ يتجاوز الشاشة. ومقيسٌ على جوال ٣٩٠: `scrollWidth = 396` وحقلُ تاريخٍ عرضُه ٣٧٦ داخل غلافٍ عرضُه ٣٦٤ — **تمريرٌ أفقيّ بلا سببٍ ظاهر**. */ box-sizing: border-box; margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; } .jpk-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; /* ⚠️ الإصبع ليست مؤشّراً */ padding: 9px 12px; text-align: start; font: inherit; font-size: var(--k-fsin); line-height: 1.5; color: var(--k-txt); background: var(--k-bg-2); background-image: none; /* يُلغي سهم `.form-select` المرسوم */ border: 1px solid var(--k-line); border-radius: var(--k-r); cursor: pointer; transition: border-color .16s var(--k-ease), background .16s var(--k-ease); -webkit-appearance: none; appearance: none; } .jpk[data-jpk-inline="1"] .jpk-btn { width: auto; } .jpk-btn:hover { border-color: var(--k-gold-d); } .jpk-btn:focus-visible, .jpk-btn.is-open { outline: none; border-color: var(--k-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); } .jpk-btn .jpk-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jpk-btn .jpk-txt.is-ph { color: var(--k-txt-3); } .jpk-btn .jpk-caret { flex: 0 0 auto; width: 15px; height: 15px; opacity: .62; transition: transform .18s var(--k-ease); } .jpk-btn.is-open .jpk-caret { transform: rotate(180deg); } /* حالةُ التعطيل — تتبع `select[disabled]` */ .jpk.is-disabled .jpk-btn { opacity: .55; cursor: not-allowed; border-color: var(--k-line); } /* 🔑 **وشارةُ العدد** حين تكون القائمة طويلة: تقول قبل الفتح أن فيها بحثاً — فمن لا يعرف أن الضغط يفتح بحثاً يبحث بعينه كما كان. */ .jpk-btn .jpk-n { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: var(--k-txt-3); background: var(--k-bg-3); font-family: var(--k-num); font-variant-numeric: tabular-nums; } /* ═════════════════════════════════════════════════════════════════════ ٣) النافذة — تُرسَم في `` مباشرةً ═════════════════════════════════════════════════════════════════════ */ .jpk-pop, .jdp-pop { box-sizing: border-box; /* 🔴 وإلّا صار العرضُ ٣٩٢ على شاشة ٣٩٠ — حدّان يُضافان خارج المئة بالمئة فيُنتجان تمريراً أفقياً على الجوال. مقيسٌ لا مظنون. */ position: fixed; z-index: 2147483000; /* فوق SweetAlert (1060) وفوق كل شريط */ direction: rtl; display: flex; flex-direction: column; max-height: 60vh; background: var(--k-bg); border: 1px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-sh); overflow: hidden; font-family: inherit; color: var(--k-txt); opacity: 0; transform: translateY(-6px); transition: opacity .14s var(--k-ease), transform .14s var(--k-ease); } .jpk-pop.is-in, .jdp-pop.is-in { opacity: 1; transform: none; } .jpk-pop *, .jdp-pop * { box-sizing: border-box; } /* ستارةٌ للجوال وحده — على الحاسوب تُغلق النافذة بالضغط خارجها بلا ستارة */ .jpk-veil { position: fixed; inset: 0; z-index: 2147482999; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .16s var(--k-ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .jpk-veil.is-in { opacity: 1; } /* ── حقل البحث ─────────────────────────────────────────────────────── */ .jpk-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--k-line); background: var(--k-bg-2); } .jpk-head svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .55; } .jpk-head input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--k-fsin); /* 🔴 سفاري iOS — لا يُنقَص */ min-height: 34px; padding: 4px 2px; color: var(--k-txt); background: transparent; border: 0; outline: none; } .jpk-head input::placeholder { color: var(--k-txt-3); } .jpk-head input::-webkit-search-cancel-button { display: none; } /* ── القائمة ───────────────────────────────────────────────────────── */ .jpk-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; scrollbar-width: thin; } .jpk-list::-webkit-scrollbar { width: 9px; } .jpk-list::-webkit-scrollbar-thumb { background: var(--k-bg-3); border-radius: 999px; } .jpk-grp { padding: 9px 10px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; color: var(--k-txt-3); } .jpk-opt { display: flex; align-items: center; gap: 8px; padding: 10px 10px; min-height: 42px; border-radius: 9px; font-size: 14.5px; line-height: 1.6; color: var(--k-txt); cursor: pointer; /* 🔑 والاسمُ الطويل يلتفّ ولا يُبتَر — فاسمٌ مبتورٌ لا يُميَّز عن اسمٍ آخر يبدأ مثله، وهو أسوأ من سطرين. */ overflow-wrap: anywhere; } .jpk-opt:hover, .jpk-opt.is-on { background: var(--k-bg-3); } .jpk-opt[aria-selected="true"] { color: var(--k-gold-2); background: rgba(212,175,55,.12); font-weight: 700; } .jpk-opt.is-dis { opacity: .45; cursor: not-allowed; } .jpk-opt .jpk-tick { flex: 0 0 auto; width: 15px; height: 15px; opacity: 0; } .jpk-opt[aria-selected="true"] .jpk-tick { opacity: 1; } /* 🔑 المطابقةُ تُميَّز — فمن كتب «احمد» يرى أين طابقت في ثلاثين اسماً */ .jpk-opt mark { background: rgba(212,175,55,.26); color: inherit; border-radius: 3px; padding: 0 1px; } /* ⚠️ «لا نتيجة» تقول ذلك — وشبكةٌ فارغة بلا كلمة تبدو عطلاً لا نتيجة */ .jpk-empty { padding: 26px 18px; text-align: center; font-size: 13.5px; line-height: 1.9; color: var(--k-txt-2); } .jpk-empty b { color: var(--k-txt); } .jpk-foot { flex: 0 0 auto; padding: 7px 12px; border-top: 1px solid var(--k-line); background: var(--k-bg-2); font-size: 11.5px; color: var(--k-txt-3); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .jpk-foot kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--k-line); background: var(--k-bg-3); color: var(--k-txt-2); } /* ═════════════════════════════════════════════════════════════════════ ٤) الجوال — لوحةٌ سفليّة لا قائمةٌ صغيرة ═════════════════════════════════════════════════════════════════════ 🔑 قائمةٌ منسدلة بعرض الحقل على شاشة ٣٩٠ بكسل تُظهر ستّة أسماء ونصفاً، ولوحة المفاتيح تغطّي نصفها. واللوحةُ السفليّة تُري ضعفها ولا تُزاح. */ @media (max-width: 640px) { .jpk-pop, .jdp-pop { inset: auto 0 0 0 !important; width: 100% !important; max-width: 100% !important; max-height: 82vh; border-radius: 18px 18px 0 0; border-bottom: 0; transform: translateY(14px); } .jpk-pop.is-in, .jdp-pop.is-in { transform: none; } .jpk-pop::before, .jdp-pop::before { content: ''; display: block; flex: 0 0 auto; width: 38px; height: 4px; border-radius: 999px; background: var(--k-bg-3); margin: 8px auto 2px; } .jpk-opt { min-height: 48px; font-size: 15px; } .jpk-foot { display: none; } /* لا لوحةَ مفاتيح ⇒ لا تلميحَ لها */ } /* ═════════════════════════════════════════════════════════════════════ ٥) منتقي التاريخ ═════════════════════════════════════════════════════════════════════ 🔴 **و`` الأصليّ يبقى** للسبب نفسه: `valueAsDate` و`min`/`max` و`required` و`FormData` — وكلُّ قارئٍ قائم للقيمة يجدها `YYYY-MM-DD` كما كانت حرفاً. */ .jdp { position: relative; display: block; width: 100%; min-width: 0; } .jdp[data-jdp-inline="1"] { display: inline-block; width: auto; vertical-align: middle; } .jdp-btn { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 9px 12px; text-align: start; font: inherit; font-size: var(--k-fsin); color: var(--k-txt); background: var(--k-bg-2); border: 1px solid var(--k-line); border-radius: var(--k-r); cursor: pointer; transition: border-color .16s var(--k-ease); -webkit-appearance: none; appearance: none; } .jdp[data-jdp-inline="1"] .jdp-btn { width: auto; } .jdp-btn:hover { border-color: var(--k-gold-d); } .jdp-btn:focus-visible, .jdp-btn.is-open { outline: none; border-color: var(--k-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); } .jdp.is-disabled .jdp-btn { opacity: .55; cursor: not-allowed; } .jdp-btn .jdp-ico { flex: 0 0 auto; width: 16px; height: 16px; opacity: .6; } .jdp-btn .jdp-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--k-num); font-variant-numeric: tabular-nums; } .jdp-btn .jdp-txt.is-ph { color: var(--k-txt-3); font-family: inherit; } /* ⚠️ والهجريُّ سطرٌ ثانٍ لا بديلٌ — فالقاعدة ميلاديّة والعقود كذلك، والهجريّ **قراءةٌ مساعدة** لمن يحفظ موعده به. */ .jdp-btn .jdp-hj { flex: 0 0 auto; font-size: 11px; color: var(--k-txt-3); font-family: var(--k-num); } .jdp-btn .jdp-clr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--k-txt-3); cursor: pointer; } .jdp-btn .jdp-clr:hover { background: var(--k-bg-3); color: var(--k-bad); } .jdp-btn .jdp-clr svg { width: 13px; height: 13px; } /* ── رأس النافذة: شهرٌ وسنة وسهمان ─────────────────────────────────── */ .jdp-pop { width: 320px; max-height: none; } .jdp-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; } .jdp-nav { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--k-line); background: var(--k-bg-2); color: var(--k-txt-2); cursor: pointer; } .jdp-nav:hover:not(:disabled) { color: var(--k-gold); border-color: var(--k-gold-d); } .jdp-nav:disabled { opacity: .35; cursor: not-allowed; } .jdp-nav svg { width: 15px; height: 15px; } .jdp-sel { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; } .jdp-sel select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; min-height: 34px; padding: 4px 8px; border-radius: 9px; color: var(--k-txt); background: var(--k-bg-2); border: 1px solid var(--k-line); -webkit-appearance: none; appearance: none; text-align: center; } .jdp-sel select:focus { outline: none; border-color: var(--k-gold); } /* ── الشبكة ────────────────────────────────────────────────────────── */ .jdp-wk, .jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 10px; } .jdp-wk { padding-bottom: 4px; } .jdp-wk span { text-align: center; font-size: 11px; font-weight: 700; color: var(--k-txt-3); padding: 4px 0; } .jdp-grid { padding-bottom: 8px; } .jdp-day { aspect-ratio: 1 / 1; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--k-txt); font: inherit; font-size: 13.5px; font-family: var(--k-num); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s var(--k-ease); } .jdp-day:hover:not(:disabled) { background: var(--k-bg-3); } .jdp-day.is-out { color: var(--k-txt-3); opacity: .45; } .jdp-day.is-today { border-color: var(--k-gold-d); } .jdp-day[aria-selected="true"] { background: var(--k-gold); color: #17140a; font-weight: 800; border-color: var(--k-gold); } .jdp-day:disabled { opacity: .22; cursor: not-allowed; } .jdp-day small { font-size: 9px; opacity: .6; line-height: 1; margin-top: 1px; } .jdp-day[aria-selected="true"] small { opacity: .8; } /* ── ذيل النافذة ───────────────────────────────────────────────────── */ .jdp-foot { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--k-line); } .jdp-foot button { flex: 1 1 auto; min-height: 38px; font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; cursor: pointer; border: 1px solid var(--k-line); background: var(--k-bg-2); color: var(--k-txt-2); } .jdp-foot button:hover { color: var(--k-gold); border-color: var(--k-gold-d); } .jdp-foot button.is-primary { background: rgba(212,175,55,.14); color: var(--k-gold-2); border-color: var(--k-gold-d); } @media (max-width: 640px) { .jdp-pop { width: 100% !important; } .jdp-day { min-height: 44px; font-size: 15px; } } /* ═════════════════════════════════════════════════════════════════════ ٦) من يُعطّل الحركة في نظامه — تُحترَم ═════════════════════════════════════════════════════════════════════ ⚠️ ومن يُصاب بدوار الحركة يُعطّلها في نظامه، وتجاهلُ تفضيله يُؤذيه. */ @media (prefers-reduced-motion: reduce) { .jpk-pop, .jdp-pop, .jpk-veil, .jpk-btn, .jdp-btn, .jpk-btn .jpk-caret, .jpk-opt, .jdp-day { transition: none !important; } .jpk-pop, .jdp-pop { transform: none !important; } } /* ═════════════════════════════════════════════════════════════════════ ٧) الطباعة — لا نوافذ ولا أزرار ═════════════════════════════════════════════════════════════════════ */ @media print { .jpk-pop, .jdp-pop, .jpk-veil { display: none !important; } .jpk-btn, .jdp-btn { border-color: #999; color: #000; background: #fff; } }