/* ══════════════════════════════════════════════════════════════════════════ SHARKS — طقم الكومبوننتس · WP-UI-02 · LANE-UI · R07 · 2026-08-30 ────────────────────────────────────────────────────────────────────────── الملف ده فيه الكومبوننتس اللى كل شاشه محتاجاها، مكتوبين مره واحده. بيتحمّل فى الست لوحات بعد sharks-identity.css. قواعد الملف ده، ومحصلش استثناء عليها: ١. مفيش ولا قيمه لون خام. كله var(). لو محتاج لون مش موجود، التوكن بيتضاف فى sharks-tokens.css مش هنا. ٢. خصائص منطقيه بس — margin-inline-start مش margin-left. اللوحات بتشتغل عربى RTL وإنجليزى LTR على نفس الماركب، وأى left/right بيقلب الشاشه فى لغه من الاتنين. ٣. اللون ممنوع يكون الإشاره الوحيده. كل شاره فيها أيقونه أو نص جنب اللون. حد مايفرقش بين الأحمر والأخضر لازم يقرا نفس المعلومه. ٤. كل حاجه تتوصلها بالكيبورد ليها حلقة تركيز ظاهره. مفيش outline:none من غير بديل، ولا مره واحده. ٥. الجداول مابتقصّش نص ساكت. اللى مش لاقى مكان بيلف أو بيتزحلق جوّه حاويته — الصفحه نفسها عمرها ما بتزحلق أفقى. البادئه sk- على كل كلاس عشان ما تتخانقش مع بوتستراب ولا مع الأربع قوالب اللى اللوحات مبنيه عليها. ══════════════════════════════════════════════════════════════════════════ */ /* ═══════════ ٠) الأساسيات المشتركه ═══════════════════════════════════ */ /* حلقة التركيز — مكان واحد بيمسك الموضوع ده فى النظام كله. :focus-visible بيدّيها للكيبورد بس، فالماوس مش بيرسم إطار على كل دوسه. */ [class^="sk-"]:focus-visible, [class*=" sk-"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } /* الأرقام — سطر واحد بيمسك كل رقم فى النظام. direction:ltr مع unicode-bidi:isolate عشان الرقم ما يتقلبش جوّه جمله عربى. ده بيحصل فعلاً من غير العزل، والمبلغ بيتقرا مقلوب. */ .sk-num{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; white-space:nowrap; } /* أى كود بيتقرا حرف حرف — AWB · SKU · رقم الأوردر · التليفون. نفس علّة الأرقام بالظبط. */ .sk-code{ font-family:var(--f-num); direction:ltr; unicode-bidi:isolate; white-space:nowrap; letter-spacing:.02em; } /* أيقونه بتلفّ فى RTL (سهم · شيفرون · رجوع · تالى). الأيقونات اللى مابتلفش — بحث · مستخدم · ساعه · صح — مالهاش الكلاس ده. */ [dir="rtl"] .sk-icon-flip{ transform:scaleX(-1) } /* مخفى بصريًا بس قارئ الشاشه بيقراه */ .sk-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ═══════════ ١) شارة الحاله ═══════════════════════════════════════════ ────────────────────────────────────────────────────────────────────── اللون بييجى من --st-<رقم>-* فى ملف التوكنز، والرقم بيتحط على العنصر كـ data-status. يعنى لون الحاله بيتقرّر فى مكان واحد فى النظام كله. الشاره دايمًا فيها تلات حاجات: نقطه ملوّنه · علامه نصّيه · اسم الحاله بالحروف. الاسم مش اختيارى — من غيره الشاره بتبقى لون وخلاص. ══════════════════════════════════════════════════════════════════════ */ .sk-badge{ display:inline-flex; align-items:center; gap:var(--sp-1); min-block-size:var(--h-chip); padding-block:0; padding-inline:var(--pad-chip-x); border:1px solid var(--st-x-br); background:var(--st-x-bg); color:var(--st-x-tx); border-radius:var(--r-xs); font-size:var(--fs-xs); font-weight:var(--fw-semibold); line-height:1.6; white-space:nowrap; max-width:100%; } .sk-badge__dot{ inline-size:6px; block-size:6px; border-radius:var(--r-full); background:currentColor; flex:0 0 auto; } .sk-badge__mark{ font-size:var(--fs-2xs); flex:0 0 auto; line-height:1 } .sk-badge__txt{ overflow:hidden; text-overflow:ellipsis } .sk-badge[data-status="0"] { background:var(--st-0-bg); border-color:var(--st-0-br); color:var(--st-0-tx) } .sk-badge[data-status="1"] { background:var(--st-1-bg); border-color:var(--st-1-br); color:var(--st-1-tx) } .sk-badge[data-status="2"] { background:var(--st-2-bg); border-color:var(--st-2-br); color:var(--st-2-tx) } .sk-badge[data-status="3"] { background:var(--st-3-bg); border-color:var(--st-3-br); color:var(--st-3-tx) } .sk-badge[data-status="4"] { background:var(--st-4-bg); border-color:var(--st-4-br); color:var(--st-4-tx) } .sk-badge[data-status="5"] { background:var(--st-5-bg); border-color:var(--st-5-br); color:var(--st-5-tx) } .sk-badge[data-status="6"] { background:var(--st-6-bg); border-color:var(--st-6-br); color:var(--st-6-tx) } .sk-badge[data-status="7"] { background:var(--st-7-bg); border-color:var(--st-7-br); color:var(--st-7-tx) } .sk-badge[data-status="8"] { background:var(--st-8-bg); border-color:var(--st-8-br); color:var(--st-8-tx) } .sk-badge[data-status="9"] { background:var(--st-9-bg); border-color:var(--st-9-br); color:var(--st-9-tx) } .sk-badge[data-status="10"]{ background:var(--st-10-bg); border-color:var(--st-10-br); color:var(--st-10-tx) } .sk-badge[data-status="11"]{ background:var(--st-11-bg); border-color:var(--st-11-br); color:var(--st-11-tx) } .sk-badge[data-status="12"]{ background:var(--st-12-bg); border-color:var(--st-12-br); color:var(--st-12-tx) } .sk-badge[data-status="13"]{ background:var(--st-13-bg); border-color:var(--st-13-br); color:var(--st-13-tx) } .sk-badge[data-status="14"]{ background:var(--st-14-bg); border-color:var(--st-14-br); color:var(--st-14-tx) } /* ═══════════ ٢) الفلوس ═══════════════════════════════════════════════ يمين العمود · أرقام جدوليه · منزلتين · LTR جوّه العربى. العمله بتتكتب فى رأس العمود مره واحده، مش على كل صف. ⚠️ sk-money--none هى الحاله اللى المواصفه بتصرّ عليها: منتج من غير سعر مش منتج ببلاش. 0.00 هنا كانت هتبقى كذبه بتتاخد عليها قرارات. ══════════════════════════════════════════════════════════════════════ */ .sk-money{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; text-align:end; white-space:nowrap; font-weight:var(--fw-medium); } .sk-money--none{ font-family:var(--f-ui); direction:inherit; color:var(--warn-tx); font-size:var(--fs-xs); font-weight:var(--fw-semibold); } .sk-money--neg{ color:var(--err-tx) } th.sk-money-h, td.sk-money{ text-align:end } .sk-money-h__cur{ display:block; font-size:var(--fs-2xs); font-weight:var(--fw-regular); color:var(--mist); letter-spacing:.04em; } /* ═══════════ ٣) الجدول ═══════════════════════════════════════════════ ────────────────────────────────────────────────────────────────────── الجدول بيتلفّ فى حاويه ليها زحلقه أفقيه خاصه بيها. الصفحه نفسها عمرها ما بتزحلق — ده شرط من المواصفه على كل الشاشات. تحت ٧٦٨: العمود الأول بيتجمّد. ده الحل التانى اللى المواصفه بتسمح بيه بدل تحويل الصف لكارت — بيتشال للجداول اللى فيها عمود تعريف واضح (كود الأوردر · اسم المنتج) لإن من غيره الزحلقه بتضيّع السياق. ══════════════════════════════════════════════════════════════════════ */ .sk-tablewrap{ inline-size:100%; max-inline-size:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--surf); } .sk-table{ inline-size:100%; border-collapse:collapse; font-size:var(--fs-sm); color:var(--ink); } .sk-table caption{ caption-side:top; text-align:start; padding:var(--pad-cell-y) var(--pad-cell-x); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--slate); border-block-end:1px solid var(--line); } .sk-table th, .sk-table td{ padding:var(--pad-cell-y) var(--pad-cell-x); border-block-end:1px solid var(--line); text-align:start; vertical-align:middle; } .sk-table thead th{ position:sticky; inset-block-start:0; z-index:var(--z-sticky); background:var(--paper2); color:var(--mist); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase; border-block-end:1px solid var(--line2); } .sk-table tbody tr:hover{ background:var(--paper2) } .sk-table tbody tr:last-child td{ border-block-end:0 } /* الترتيب — الزرار جوّه الـth عشان يتوصله بالكيبورد ويتقرا كزرار */ .sk-sort{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:var(--sp-1); font:inherit; color:inherit; letter-spacing:inherit; } .sk-sort:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .sk-sort__ar{ opacity:.35; font-size:var(--fs-2xs) } [aria-sort="ascending"] .sk-sort__ar, [aria-sort="descending"] .sk-sort__ar{ opacity:1; color:var(--accent) } /* الاختيار الجماعى */ .sk-table td.sk-pick, .sk-table th.sk-pick{ inline-size:2.5rem; text-align:center } .sk-table tr[data-picked="1"]{ background:var(--accent-soft) } /* تحت ٧٦٨ — العمود الأول بيتجمّد */ @media (max-width:767.98px){ .sk-table--freeze th:first-child, .sk-table--freeze td:first-child{ position:sticky; inset-inline-start:0; z-index:calc(var(--z-sticky) - 1); background:var(--surf); border-inline-end:1px solid var(--line2); } .sk-table--freeze thead th:first-child{ z-index:var(--z-sticky); background:var(--paper2) } .sk-table--freeze tbody tr:hover td:first-child{ background:var(--paper2) } } /* ═══════════ ٤) بلاطة الإحصائيه ══════════════════════════════════════ الرقم · اسمه · النافذه الزمنيه · وحجم العيّنه لو الرقم نسبه. النافذه مش زينه: «نسبة التسليم ٩٤٪» من غير مده مالهاش معنى. ══════════════════════════════════════════════════════════════════════ */ .sk-tile{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:2px; min-inline-size:0; } .sk-tile__n{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; font-size:var(--fs-3xl); font-weight:var(--fw-bold); line-height:1.15; color:var(--ink); } .sk-tile__l{ font-size:var(--fs-sm); color:var(--slate); font-weight:var(--fw-medium) } .sk-tile__w{ font-size:var(--fs-2xs); color:var(--mist) } .sk-tile__n--none{ font-family:var(--f-ui); font-size:var(--fs-md); color:var(--warn-tx) } /* عيّنه صغيره — الرقم بيتعرض رمادى ومكتوب جنبه على كام. نسبه محسوبه على ٣ شحنات مش نسبه، دى صدفه. */ .sk-tile--low .sk-tile__n{ color:var(--mist) } .sk-tile__low{ font-size:var(--fs-2xs); color:var(--warn-tx); font-weight:var(--fw-semibold); display:inline-flex; align-items:center; gap:var(--sp-1); } .sk-tile__d{ font-size:var(--fs-xs); font-weight:var(--fw-semibold) } .sk-tile__d--up{ color:var(--ok-tx) } .sk-tile__d--down{ color:var(--err-tx) } /* ═══════════ ٥) الحالات الخمسه ═══════════════════════════════════════ تحميل · فاضى · مش مفعّل · خطأ · ممنوع. الحاله التالته دى قاعده ملزمه (DEC-002): شاشه فاضيه ممنوع تبان كأنها شغّاله. لازم تقول إنها لسه مش حيّه ومين تسأله. ══════════════════════════════════════════════════════════════════════ */ .sk-state{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:var(--sp-8) var(--sp-6); display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; color:var(--slate); } .sk-state__i{ font-size:var(--fs-3xl); line-height:1; opacity:.75 } .sk-state__t{ margin:0; font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--ink) } .sk-state__p{ margin:0; max-inline-size:38rem; font-size:var(--fs-md) } .sk-state__act{ margin-block-start:var(--sp-2); display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center } .sk-state--notactive{ background:var(--warn-bg); border-color:var(--warn-br); color:var(--warn-tx) } .sk-state--notactive .sk-state__t{ color:var(--warn-tx) } .sk-state--error{ background:var(--err-bg); border-color:var(--err-br); color:var(--err-tx) } .sk-state--error .sk-state__t{ color:var(--err-tx) } .sk-state--denied{ background:var(--paper2); border-color:var(--line2) } /* شريط علوى للحاله «مش مفعّل» — بيتحط فوق شاشه فيها محتوى تجريبى */ .sk-notactive-bar{ display:flex; align-items:center; gap:var(--sp-2); background:var(--warn-bg); color:var(--warn-tx); border:1px solid var(--warn-br); border-radius:var(--r); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); font-weight:var(--fw-semibold); margin-block-end:var(--sp-3); } /* ── التحميل: هياكل بنفس شكل النتيجه، مش سبينر على الصفحه كلها ──────── */ .sk-skel{ background:linear-gradient(90deg,var(--paper2) 25%,var(--line) 37%,var(--paper2) 63%); background-size:400% 100%; animation:sk-shimmer 1.4s ease-in-out infinite; border-radius:var(--r-xs); block-size:.85em; } .sk-skel--line{ inline-size:100% } .sk-skel--w60{ inline-size:60% } .sk-skel--w40{ inline-size:40% } .sk-skel--tile{ block-size:1.9rem; inline-size:55% } @keyframes sk-shimmer{ from{background-position:100% 0} to{background-position:0 0} } /* حركه أقل — إعداد الجهاز بيغلب. الهيكل بيفضل ظاهر، بس ساكن. */ @media (prefers-reduced-motion:reduce){ .sk-skel{ animation:none; background:var(--paper2) } } /* ═══════════ ٦) معاينة الفعل الجماعى ═════════════════════════════════ ممنوع أى فعل جماعى ينفّذ من غير ما يعرض مين بالظبط هيتأثّر. العدد لوحده مش معاينه — رقم ٤١٢ مش بيقول لحد إن فيه أوردر متسلّم جوّه. ══════════════════════════════════════════════════════════════════════ */ .sk-bulk{ border:1px solid var(--accent-line); border-radius:var(--r); background:var(--accent-soft); overflow:hidden; } .sk-bulk__h{ padding:var(--sp-2) var(--sp-3); border-block-end:1px solid var(--accent-line); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; } .sk-bulk__list{ margin:0; padding:var(--sp-2) var(--sp-3); list-style:none; max-block-size:14rem; overflow-y:auto; font-size:var(--fs-sm); background:var(--surf); } .sk-bulk__list li{ padding-block:var(--sp-1); border-block-end:1px dashed var(--line); display:flex; justify-content:space-between; gap:var(--sp-3); align-items:center; } .sk-bulk__list li:last-child{ border-block-end:0 } .sk-bulk__warn{ padding:var(--sp-2) var(--sp-3); background:var(--warn-bg); color:var(--warn-tx); font-size:var(--fs-xs); font-weight:var(--fw-semibold); border-block-start:1px solid var(--warn-br); } .sk-bulk__f{ padding:var(--sp-2) var(--sp-3); display:flex; gap:var(--sp-2); flex-wrap:wrap; border-block-start:1px solid var(--accent-line); } /* ═══════════ ٧) علامة «مش نهائى» ═════════════════════════════════════ ────────────────────────────────────────────────────────────────────── هويّة الفولفلمنت مش متختاره — لا اسم ولا دومين ولا لوجو ولا ألوان. is_placeholder = true فى config/sharks.php بيولّد العلامه دى. غرضها الوحيد: إن الحاجه المؤقته ما تبقاش هويّة الشركه بالسكوت. أى أصل مؤقت بيتعرض ومعاه العلامه دى، على الشاشه، مش فى تعليق. ماتشيلهاش عشان الشاشه تبقى أنضف — شيلها قرار مالك. ══════════════════════════════════════════════════════════════════════ */ .sk-ph{ display:inline-flex; align-items:center; gap:var(--sp-1); padding:1px var(--sp-2); background:repeating-linear-gradient(135deg,var(--warn-bg),var(--warn-bg) 6px,transparent 6px,transparent 12px); border:1px dashed var(--warn-br); color:var(--warn-tx); border-radius:var(--r-xs); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.03em; white-space:nowrap; vertical-align:middle; } .sk-ph__i{ line-height:1 } .sk-phwrap{ display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap } /* ═══════════ ٨) حقول الإدخال ═════════════════════════════════════════ كل حقل ليه label حقيقى مربوط بـfor. الـplaceholder مش ليبل — بيختفى أول ما المستخدم يكتب، وقارئ الشاشه مش مضمون يقراه. ══════════════════════════════════════════════════════════════════════ */ .sk-field{ display:flex; flex-direction:column; gap:var(--gap-label); min-inline-size:0 } .sk-field > label{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--slate); } .sk-field__hint{ font-size:var(--fs-2xs); color:var(--mist) } .sk-field__err{ font-size:var(--fs-2xs); color:var(--err-tx); font-weight:var(--fw-semibold) } /* ── التحكّمات: ارتفاع واحد · حشوه واحده · نصف قطر واحد ──────────────── الحقل والزرار والـselect كلهم بيقعدوا على **نفس** --h-control، وهو نفسه محسوب من --pad-btn-y مش مكتوب بالإيد. يعنى لما الكثافه تتغيّر، التلاته بيتحرّكوا مع بعض ويفضلوا مترّصين فى نفس الصف. ⚠️ box-sizing مقفول هنا بالقصد: القوالب التلاته بتحطّ border-box على * بس مش كلهم بيوصلوا للعناصر اللى جوّه shadow-ish widgets. ══════════════════════════════════════════════════════════════════ */ .sk-input, .sk-select, .sk-btn{ box-sizing:border-box; min-block-size:var(--h-control); border-radius:var(--r-sm); font-family:var(--f-ui); font-size:var(--fs-md); line-height:var(--lh-control); } .sk-input, .sk-select{ padding-block:var(--pad-btn-y); padding-inline:var(--pad-cell-x); border:1px solid var(--line2); background:var(--surf); color:var(--ink); inline-size:100%; min-inline-size:0; } .sk-input::placeholder, .sk-select::placeholder{ color:var(--mist); opacity:1 } /* حالة التركيز — ظاهره على الاتنين (الحلقه + الحدّ). الحلقه لوحدها بتضيع على خلفيه غامقه، والحدّ لوحده مش كفايه لضعاف البصر. */ .sk-input:focus-visible, .sk-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } /* الخطأ — مش لون بس: الحدّ بيتخن والخلفيه بتتلوّن، والرساله جنبه نص. اللون لوحده مش إشاره. */ .sk-input[aria-invalid="true"], .sk-select[aria-invalid="true"], .sk-input.is-invalid, .sk-select.is-invalid{ border-color:var(--err); border-inline-start-width:3px; background:var(--err-bg); } .sk-input[disabled], .sk-select[disabled], .sk-input[readonly]{ background:var(--paper2); color:var(--mist); cursor:not-allowed; } .sk-input--num{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; text-align:end; } /* ── الـselect ──────────────────────────────────────────────────────── ⚠️ العيب المقيس: select من غير option مختار كان بيرسم **بقايا حبّه صغيّره** — سهم القالب مرسوم على خلفيه بمقاس ثابت، فلما النص فاضى الخلفيه بتفضل ظاهره لوحدها كحته لون بلا معنى. الحل: بنرسم السهم بنفسنا كـSVG مموضَّع من الحافه المنطقيه، وبنحجز له مكان بـpadding-inline-end. الحافه المنطقيه معناها إنه بيقلب لوحده فى RTL من غير قاعده تانيه. و`appearance:none` بيشيل رسمة المتصفح الأصليه اللى كانت بتتراكب. */ .sk-select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; /* مكان محجوز للسهم من ناحية النهايه المنطقيه */ padding-inline-end:calc(var(--pad-cell-x) * 2 + var(--icon)); } /* السهم — عنصر مرسوم بالماسك، مش صورة خلفيه. ⚠️ الصوره جوّه `data:` URI **مايقدرش يقرا `var()`**، فلونها بيتكتب حرفيًا. سهم رمادى غامق مكتوب بلونه بيبقى شبه مختفى على حقل غامق. الماسك بياخد لونه من `background` بتاع العنصر، فبيتبع التوكن. ⚠️ والموضع من `inset-inline-end` — بيقلب لوحده فى RTL من غير قاعده تانيه. النسخه القديمه كانت بـ`background-position:left` وقاعده منفصله لـ`[dir="ltr"]`. */ .sk-selectwrap{ position:relative; display:block; min-inline-size:0 } .sk-selectwrap::after{ content:''; position:absolute; inset-inline-end:var(--pad-cell-x); inset-block-start:50%; transform:translateY(-50%); inline-size:var(--icon); block-size:var(--icon); pointer-events:none; background:var(--mist); -webkit-mask:var(--sk-caret) center / contain no-repeat; mask:var(--sk-caret) center / contain no-repeat; } :root{ --sk-caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .sk-select::-ms-expand{ display:none } /* الخيار الفاضى بيتقرا «اختار» مش فراغ */ .sk-select:invalid, .sk-select[data-empty="1"]{ color:var(--mist) } /* ── الأزرار — تلات مقاسات وبس ──────────────────────────────────────── sm · md (الافتراضى) · lg. مفيش مقاس رابع، ومفيش حشوه مكتوبه على زرار لوحده. كلهم على نفس --pad-btn-* بدرجه فوق أو تحت. */ .sk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--gap-icon); padding-block:var(--pad-btn-y); padding-inline:var(--pad-btn-x); font-weight:var(--fw-semibold); border:1px solid var(--line2); background:var(--surf); color:var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, color .15s ease; } .sk-btn--sm{ --pad-btn-y:var(--sp-1); padding-inline:var(--sp-3); font-size:var(--fs-xs); } .sk-btn--lg{ --pad-btn-y:var(--sp-3); padding-inline:var(--sp-6); font-size:var(--fs-lg); } /* زرار أيقونه بس — مربّع، وعرضه = ارتفاعه، فبيفضل هدف لمس كامل */ .sk-btn--icon{ padding-inline:0; inline-size:var(--h-control); min-inline-size:var(--tap); min-block-size:var(--tap); } .sk-btn:hover{ background:var(--paper2); border-color:var(--line2) } .sk-btn:active{ transform:translateY(1px) } .sk-btn--primary{ background:var(--solid); border-color:var(--solid); color:var(--solid-tx) } .sk-btn--primary:hover{ background:var(--solid-hv); border-color:var(--solid-hv); color:var(--solid-tx) } .sk-btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-tx) } .sk-btn--accent:hover{ background:var(--accent-2); border-color:var(--accent-2) } .sk-btn--danger{ background:var(--err-fill); border-color:var(--err-fill); color:var(--fill-tx) } .sk-btn--danger:hover{ background:var(--err); border-color:var(--err) } .sk-btn--ghost{ background:transparent; border-color:transparent; color:var(--slate) } .sk-btn--ghost:hover{ background:var(--paper2); color:var(--ink) } .sk-btn[disabled], .sk-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; } .sk-btn[disabled]:hover{ background:var(--surf) } /* صف أزرار — مسافه واحده، من الـgap مش من هوامش على كل زرار */ .sk-btnrow{ display:flex; flex-wrap:wrap; gap:var(--gap-inline); align-items:center } /* ── صفوف الفورم — إيقاع واحد ───────────────────────────────────────── ⚠️ العيب المقيس على admin/orders: تلتاشر صف فلتر، المسافه بين الليبل والحقل مختلفه من صف لصف والمسافه بين الصفوف كمان. الحل هنا **إيقاع بس** — مفيش إعادة ترتيب للفلتر نفسه (حزمه تانيه). المسافه بين الصفوف من `gap` على الحاويه، مش من margin على كل صف: الهوامش بتتجمّع وبتتلغى مع بعض، والـgap لأ. */ .sk-form{ display:flex; flex-direction:column; gap:var(--gap-formrow) } .sk-formgrid{ display:grid; gap:var(--gap-formrow); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); } .sk-form > *, .sk-formgrid > *{ margin-block:0 } /* عنوان القسم فوق مجموعة الحقول — العلاقه بينه وبين أول حقل واحده */ .sk-form__h{ margin:0 0 var(--gap-card); font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--ink); } /* شريط الفعل تحت الفورم — مربوط بالفورم بمسافة قسم، مش عايم */ .sk-form__act{ display:flex; flex-wrap:wrap; gap:var(--gap-inline); align-items:center; margin-block-start:var(--gap-section); padding-block-start:var(--pad-card); border-block-start:1px solid var(--line); } /* ═══════════ ٩) حساب التكلفه الحيّه — كتالوج المسوّق ══════════════════ ────────────────────────────────────────────────────────────────────── المواصفه §8: الحاسبه جوّه الكتالوج، مش صفحه تانيه ومش عرض ساكن. تلات أرقام منفصله ظاهره (سعر التاجر · عمولة شاركس · أساس الشحن)، وبعدين هامش المسوّق، وبعدين سعر العميل ومكسبه — بيتحدّثوا وهو بيكتب. sk-calc__row--gap هى الحاله اللى الرقم فيها مش موجود فى الداتا. بتتعرض صريحه. ممنوع تتحسب ولا تتخفى ولا يتحط صفر مكانها. ══════════════════════════════════════════════════════════════════════ */ .sk-calc{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surf); } .sk-calc__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-card); padding:var(--pad-cell-y) var(--pad-cell-x); border-block-end:1px solid var(--line); font-size:var(--fs-sm); } .sk-calc__row:last-child{ border-block-end:0 } .sk-calc__k{ color:var(--slate); min-inline-size:0 } .sk-calc__v{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; font-weight:var(--fw-medium); white-space:nowrap; } .sk-calc__row--head{ background:var(--paper2); color:var(--mist); font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase; } .sk-calc__row--head .sk-calc__v{ font-family:var(--f-ui); letter-spacing:.04em } .sk-calc__row--gap{ background:var(--warn-bg); color:var(--warn-tx) } .sk-calc__row--gap .sk-calc__k{ color:var(--warn-tx); font-weight:var(--fw-semibold) } .sk-calc__row--gap .sk-calc__v{ font-family:var(--f-ui); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); white-space:normal; text-align:end; } .sk-calc__row--sum{ background:var(--paper2); font-weight:var(--fw-bold) } .sk-calc__row--earn{ background:var(--ok-bg); color:var(--ok-tx); font-weight:var(--fw-bold) } .sk-calc__row--earn .sk-calc__v{ font-size:var(--fs-lg) } .sk-calc__row--input{ background:var(--accent-soft) } .sk-calc__row--input .sk-input{ max-inline-size:7.5rem; padding-block:var(--sp-1) } /* ═══════════ ١٠) أرباح المسوّق — أربع خطوط ═══════════════════════════ إجمالى · معلّق · تحت الاسترداد · صافى مستحق. ممنوع يتجمّعوا فى رقم. الفرق بينهم هو الفرق بين «كسبت» و«تقدر تقبض». ══════════════════════════════════════════════════════════════════════ */ .sk-earn{ display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--gap-grid) } .sk-earn__c{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad-card); display:flex; flex-direction:column; gap:var(--gap-label); border-inline-start:3px solid var(--line2); } .sk-earn__c--gross { border-inline-start-color:var(--slate) } .sk-earn__c--pending{ border-inline-start-color:var(--warn) } .sk-earn__c--claw { border-inline-start-color:var(--err) } .sk-earn__c--net { border-inline-start-color:var(--ok) } .sk-earn__n{ font-family:var(--f-num); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; font-size:var(--fs-2xl); font-weight:var(--fw-bold); line-height:1.2; } .sk-earn__l{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink) } .sk-earn__w{ font-size:var(--fs-2xs); color:var(--mist) } /* ═══════════ ١١) الشبكه والتخطيط ═════════════════════════════════════ */ .sk-grid{ display:grid; gap:var(--gap-grid) } .sk-grid--cards{ grid-template-columns:repeat(auto-fill,minmax(20rem,1fr)) } .sk-grid--tiles{ grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:var(--gap-grid) } .sk-card{ background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad-card); display:flex; flex-direction:column; gap:var(--gap-card); min-inline-size:0; } .sk-card__t{ margin:0; font-size:var(--fs-lg); font-weight:var(--fw-semibold); line-height:1.5 } .sk-chips{ display:flex; flex-wrap:wrap; gap:var(--gap-label) } .sk-chip{ border:1px solid var(--line); background:var(--paper2); color:var(--slate); border-radius:var(--r-xs); min-block-size:var(--h-chip); padding-block:0; padding-inline:var(--pad-chip-x); display:inline-flex; align-items:center; font-size:var(--fs-2xs); white-space:nowrap; } .sk-chip--ok { color:var(--ok-tx); background:var(--ok-bg); border-color:var(--ok-br) } .sk-chip--warn{ color:var(--warn-tx); background:var(--warn-bg); border-color:var(--warn-br) } .sk-chip--err { color:var(--err-tx); background:var(--err-bg); border-color:var(--err-br) } /* الصفحه نفسها ممنوع تزحلق أفقى — الشرط ده على الست لوحات */ .sk-page{ max-inline-size:100%; overflow-x:clip } /* ═══════════ ١٢) العروض ══════════════════════════════════════════════ ١٤٤٠ · ١٠٢٤ · ٧٦٨ · ٣٧٥ · ٣٢٠ — كلهم متجرّبين. ٣٢٠ هو أضيق جهاز لسه بيتباع؛ لو اشتغل عليه بيشتغل على اللى فوقه. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:767.98px){ .sk-grid--cards{ grid-template-columns:1fr } .sk-state{ padding:var(--sp-6) var(--sp-4) } .sk-earn{ grid-template-columns:1fr } } @media (max-width:400px){ .sk-grid--tiles{ grid-template-columns:1fr 1fr } .sk-tile__n{ font-size:var(--fs-2xl) } .sk-calc__row{ padding-inline:var(--sp-2) } .sk-badge__txt{ max-inline-size:9rem } } /* ═══════════ ١٣) الترقيم ═══════════════════════════════════════════════ ────────────────────────────────────────────────────────────────────── مقيس يوم 2026-08-30 على عرض ٣٢٠: شريط الترقيم بيطلع **٥٢ عنصر برّه الشاشه**. والـ عليه overflow-x:hidden، يعنى الزياده مابتتزحلقش — بتتقصّ. النتيجه إن المسوّق على تليفون صغيّر مش قادر يوصل للصفحه ٢ أصلاً: الأرقام موجوده فى الصفحه بس مقصوصه ومفيش طريقه توصلها. الصفحه نفسها مابتزحلقش أفقى (scrollWidth == clientWidth == 320)، فالفحص الآلى كان بيعدّى — الكسر مكانش سكرول، كان **قصّ ساكت**. الحل: الشريط بيلفّ، ولو لسه مش لاقى مكان بيزحلق **جوّه حاويته هو**. ══════════════════════════════════════════════════════════════════════ */ .pagination{ flex-wrap:wrap; row-gap:var(--sp-1) } @media (max-width:480px){ /* ⚠️ اتقاس تانى يوم 2026-09-03 على /admin/orders عرض ٣٢٠: **تمن روابط ترقيم لسه مش موصوله** — الصفحات ٤ لـ٨ و١٨ و١٩ و«»». إحداثياتهم بالسالب (‎-85‎ لحد ‎-553‎) ومفيش أى أب بيزحلق يوصلهم. السبب إن العلاج القديم كان بيدّى الزحلقه لـ`nav:has(> .pagination)` — يعنى بيفترض إن الترقيم ملفوف فى