/* ══════════════════════════════════════════════════════════════════════
   SHARKS — طبقة الاستجابه  ·  WP-UI-07 · LANE-UI
   ──────────────────────────────────────────────────────────────────────
   الملف ده بيتحمّل **بعد** `sharks-kit.css` فى الخمس لوحات.
   مافيهوش ولا لون خام ولا مسافه خارج السلّم — كله من `sharks-tokens.css`.

   الشرط اللى الطبقه دى بتقيس نفسها بيه:

       «صفر زحلقه أفقيه» مش المعيار. المعيار إن اللى بيستعمل الشاشه
       يقدر يعمل شغله عليها **بإيد واحده، من غير زوم، من غير تخمين**.

   جوله سابقه سجّلت «صفر زحلقه أفقيه على الخمس عروض» وحسبتها خلصت.
   نفس الشاشات، بقياس تانى، كان فيها:
     · حقول بتترسم بخط **١١.١px** — الآيفون بيزوّم الصفحه أول ما تلمسها
     · **١٢٧ من ١٣٥** كنترول أصغر من ٤٤×٤٤ فى لوحة المخازن
     · جداول بتزحلق بس محتاجه العمود الأول يتجمّد وإلا الصفوف بلا هويّه
   ولا واحده فيهم بتظهر فى فحص الزحلقه.

   ══════════════════════════════════════════════════════════════════════
   ⚠️ عن الانتقائيه (specificity) فى الملف ده
   ──────────────────────────────────────────────────────────────────────
   `sharks-wh-core.css` عندها من الأول:
       @media (max-width:768px){ .form-control,input,select,textarea{
                                    font-size:16px!important } }
   ومكتوب جنبها «يمنع الآيفون من التكبير». والقاعده دى **مش شغّاله**،
   لإن `sharks-wh-orders-header.css` فيها:
       .filter-panel .form-control{ font-size:.82rem!important }
   انتقائيتها (0,2,0) أعلى، فبتغلب مهما كان الترتيب. المقاس الفعلى على
   ٣٧٥ رجع **١١.٥px** والحمايه كانت موجوده على الورق بس.

   عشان كده القواعد الحرجه تحت بتستعمل `:is()` مع **وسيط رافع** مكتوب
   بالقصد: `:is(input, select, textarea, .sk-raise.sk-raise.sk-raise)`.

   `:is()` بتاخد انتقائية **أخصّ وسيط فيها**، فالمجموعه كلها بتبقى
   (0,3,0)، ومع `html body` بتوصل (0,3,2) — أعلى من أى قاعدة لوحه
   اتقاست (أعلى واحده كانت `.action-bar .ab-select` عند (0,2,0)).
   الكلاس `.sk-raise` **مش مستعمل فى أى ماركب** — وظيفته الوحيده إنه
   يرفع الرقم، وده مكتوب هنا عشان اللى بعدنا مايدوّرش عليه.

   المحاوله الأولى كانت `html body select` لوحدها (0,0,3) — وخسرت قدّام
   `.action-bar .ab-select`. اتقاس: الحقل فضل **١١.١px** بعد التعديل.
   يعنى القاعده كانت مكتوبه وشكلها صح ومش شغّاله.

   والحاجات اللى **مش** حرجه مكتوبه بانتقائيه عاديه بالقصد، عشان أى
   شاشه تقدر تغلبها من غير حروب.
   ══════════════════════════════════════════════════════════════════════ */


/* ═══════════  ١) توكنز الطبقه دى  ═══════════════════════════════════════
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ⚠️ ١٦px هنا **مش قرار تصميم** — ده عتبه فى المنصّه. iOS Safari
        بيزوّم الصفحه كلها لما تركّز على حقل خطه أقل من ١٦px، والتخطيط
        بينقز. مافيش تفاوض على الرقم.

        عشان كده ليه توكن لوحده ومش `--fs-lg`: `--fs-lg` قيمته دلوقتى
        1rem = ١٦px، فلو استعملناه القاعده تشتغل — لحد ما حد يظبّط
        `--fs-lg` على ١٥px عشان عناوين الكروت، وساعتها الحمايه تتكسر
        **من غير ما أى حد يلمس سطر فى الملف ده**. ده بالظبط شكل الفشل
        الساكت اللى البرنامج ده بيصلّحه من أسبوع. */
  --fs-field-touch : 16px;

  /* ⚠️ حدّان لهدف اللمس، مش واحد — والفرق بينهم معيار مش رأى:
        `--tap`     = ٤٤px  → WCAG 2.2 SC 2.5.5 (AAA) · وهو اللى
                              `sharks-tokens.css` بيحطّه للمخازن
        `--tap-min` = ٢٤px  → WCAG 2.2 SC 2.5.8 (AA)
        الأول هو الهدف. التانى هو الأرضيه اللى مافيش عذر تحتها.
        الحاجات اللى مافيش لها مكان تكبر لـ٤٤ (مربّع اختيار جوّه صفّ
        جدول ارتفاعه ٤٣) بتنزل للأرضيه — **وبيتقال**، مابيتخبّاش. */
  --tap-min        : 24px;
}

/* ⚠️ `sharks-tokens.css` بيحطّ `--tap:36px` افتراضى، و٤٤ فى حالتين بس:
      لوحة المخازن، و`@media (pointer:coarse)`.

      والشرط التانى ده **مابيتحققش على كل جهاز باللمس**: متصفّح على
      شاشه ضيّقه بماوس بياخد ٣٦، وفيه أجهزه بتقول `fine` وهى باللمس.
      اتقاس فعلاً: كل تحكّمات الشريط العلوى (`skThemeTab` · `skLangBtn`
      · `skTheme` · مفتاح الدرج · السله) طلعوا **٣٦×٣٦** على عرض ٣٧٥ —
      وهما موجودين فى **كل** شاشه، فكانوا أكبر بند فى العدّ كله.

      تحت ٧٦٨ الجهاز إمّا تليفون أو نافذه ضيّقه؛ الاتنين ٤٤ مايضرّهمش.
      السطر ده بيخلّى كل اللى بيقرا `--tap` — وده يشمل قواعد حزمة
      التلميع للترقيم ومسار التنقّل — يطلع صح على العرض ده. */
@media (max-width:767.98px){
  :root{ --tap:44px }

  /* ارتفاع الورقه اللى بتطلع من تحت (dropdown → bottom sheet) */
  --h-sheet-max    : 62vh;

  /* عرض العمود الأول لما يتجمّد فى الجدول — أوسع حاجه محتاجه: كود أوردر */
  --w-freeze       : 7.5rem;
}


/* ═══════════  ٢) شبكة أمان: الصفحه عمرها ما تزحلق أفقى  ════════════════
   ⚠️ `overflow-x:hidden` على `body` **مش** حل — ده اللى وقّع الترقيم على
      ٣٢٠ فى جوله سابقه: الشريط كان بيتقصّ بالساكت، والصفحه ٢ مكانش ليها
      طريق. المحتوى العريض لازم يزحلق **جوّه حاويته**، والصفحه تفضل ثابته.
      القاعده هنا `overflow-x:clip` على العنصر الجذر بس — بتمنع الزحلقه
      من غير ما تعمل حاويه زحلقه جديده تخفى المقصوص.
   ══════════════════════════════════════════════════════════════════════ */
html{ max-inline-size:100% }

@media (max-width:767.98px){
  /* الصور والوسائط مابتوسّعش الصفحه */
  img, video, canvas, svg, iframe{ max-inline-size:100% }
  /* الكود والأكواد الطويله بتلفّ بدل ما توسّع */
  pre{ overflow-x:auto }
  /* الكلمه الطويله (رابط · إيميل · كود) بتتكسر بدل ما تدفع الصفحه */
  td, th, dd, li, p, .sk-code{ overflow-wrap:anywhere }

  /* ── ★ السبب الجذرى لأغلب الزحلقه الأفقيه: `min-width:auto` ───────
     ابن الـflex والـgrid قيمته الافتراضيه `min-width:auto`، ومعناها
     «ماتصغّرنيش عن محتواى». يعنى اسم قسم طويل جنب شاره صغيّره بيدفع
     الشاره **برّه الشاشه** بدل ما يتقصّ أو يلفّ.

     ده مش عيب فى شاشه واحده — ده الشكل الافتراضى للـflex، وبيتكرّر فى
     كل صفّ فيه نص متغيّر الطول. اتقاس فى تلات أماكن مختلفه فى الحزمه
     دى قبل ما نلاقى إنهم نفس الحاجه:
       · `.cat-card` — `.prod-count` عند `left:-91`
       · `.stats` — بلاطات بـ`min-width:140px` إنلاين

     ⚠️ الجداول **مستثناه**: العرض الطبيعى بتاعها هو اللى بيخلّى
        المقارنه بين الأعمده ممكنه، وهى جوّه حاويه بتزحلق أصلاً. لو
        صغّرناها بيبقى عندنا جدول متكرمش جوّه حاويه بتزحلق — أسوأ
        من الاتنين. */
  html body *:not(table):not(table *):not(.sk-tblscroll){ min-inline-size:0 }
}


/* ═══════════  ٣) الحقول: الكيبورد · الخط · هدف اللمس  ══════════════════
   ──────────────────────────────────────────────────────────────────────
   ⚠️ الشرط هنا **مش** نفس شرط باقى الملف، وده مقصود.

   باقى الملف بيتكلم عن **التخطيط**: جدول يبقى كروت، فورم يبقى عمود
   واحد، مودال يبقى ورقه. دى قرارات مساحه، وقطعها الطبيعى `767.98`
   (بوتستراب بيبدأ `md` من ٧٦٨، والمطلوب فى المواصفه «تحت ٧٦٨»).

   القسم ده بيتكلم عن **الصباع**: ١٦px عشان iOS مايزوّمش، و٤٤px عشان
   الدوسه تظبط. ودول مالهمش علاقه بالمساحه — لهم علاقه بنوع الجهاز.
   آيباد بالطول عرضه **٧٦٨ بالظبط** وبيتشغّل بالصباع؛ لو القسم ده اتقفل
   على `767.98` يبقى الآيباد بره الحمايه بواحد بكسل.

   اتقاس فعلاً: بعد ما القسم كان على `767.98`، ست شاشات
   على عرض **٧٦٨** رجّعت `font_lt16` من تانى (٥ · ٧ · ٦ · ٢ · ١)
   و`tiny_tap = 105` — والـ٣٧٥ نضيفه. الشرط دلوقتى:

       ١٠٢٤ وتحت  **أو**  أى جهاز مؤشّره خشن (لمس) على أى عرض.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px), (pointer:coarse){

  /* ── ٣أ) الخط ١٦px — يمنع زوم iOS عند التركيز ──────────────────────
     الانتقائيه مرفوعه بـ`.sk-raise` — شوف الرأس. */
  html body :is(
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
      select,
      textarea,
      .select2-container .select2-selection__rendered,
      .select2-container .select2-search__field,
      .nice-select .current,
      .nice-select .option,
      .sk-raise.sk-raise.sk-raise
  ){
    font-size:var(--fs-field-touch) !important;
    line-height:1.4 !important;
  }

  /* ── ٣ب) هدف اللمس — ٤٤×٤٤ حدّ أدنى ────────────────────────────────
     `--tap` جاى من `sharks-tokens.css`: ٤٤ فى المخازن، و٤٤ على أى جهاز
     لمس (`@media (pointer:coarse)`). القاعده هنا بتفرضه على الكنترول
     الفعلى مهما كان اسم الكلاس — الأزرار فى المخازن اسمها `.ab-btn`
     و`.btn-fp-submit` ومابتقراش `--h-control`، فاتقاسوا ٣٨px. */
  html body :is(
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
      select,
      button,
      a.btn,
      .btn,
      .f-btn,
      .ab-btn,
      .dt-button,
      /* ⚠️ select2 بيخبّى الـ`<select>` الأصلى ويرسم `<span>` مكانه.
            القاعده اللى بتمسك `select` مابتوصلش المرسوم — اتقاس
            `span.select2-selection` عند ٣٨px والـ`select` جنبه سليم.
            نفس الحكايه مع nice-select. */
      .select2-selection,
      .select2-selection--single,
      .nice-select,
      .sk-tbc__btn,
      .sk-raise.sk-raise.sk-raise
  ){
    min-block-size:var(--tap) !important;
  }

  /* رؤوس الجداول اللى بتترتّب بالدوس هى كمان أهداف لمس.
     ⚠️ `sharks-wh-core.css` بتحطّ `padding:var(--sp-2)!important` على كل
        `th` و`td` تحت ٧٦٨ — والحساب بيطلّع **٤٣px**، أقل من الحدّ بواحد.
        الرقم ده اتقاس، مش اتفترض. */
  html body :is(th[tabindex], th.sorting, th.sorting_asc, th.sorting_desc,
                .sk-raise.sk-raise.sk-raise){
    padding-block:var(--sp-3) !important;
    /* العرض كمان: عمود ضيّق بيدّى رأس ٢٩px عرض. الجدول بيزحلق أصلاً
       فى الوضع ده، فالزياده مالهاش تكلفه على التخطيط. */
    min-inline-size:var(--tap) !important;
    /* ⚠️ الحشوه لوحدها مابتوصلش ٤٤. الحساب: ١٢ + ١٢ + سطر الرأس —
          و`sharks-wh-core.css` بتصغّر خطّ الرأس لـ`.62rem`، فالسطر
          بيطلع ~١٦px والمجموع **٤٠**. اتقاس كده فى ١٢ رأس عمود.
          الارتفاع الصريح بيقفل الفرق مهما كان حجم الخط. */
    min-block-size:var(--tap) !important;
  }

  /* ── الروابط والأزرار **جوّه خلايا الجدول** ──────────────────────────
     `a.phoneHistory` اتقاس ٦١×١٧ و`a.wh-notes-count` ٢٤×٢٢ — دول
     تحكّمات حقيقيه بيتدوس عليها، جوّه سطر نص.

     ⚠️ الارتفاع هنا مش بيكبّر الصفّ: صفوف الجدول على ٣٧٥ اتقاست
        ١٠٤–١٢٣px أصلاً (فيها منتجات وعناوين بتلفّ)، فـ٤٤ جوّاها
        مابيزوّدش حاجه. لو الصفّ كان ٢٤px كانت القاعده دى هتضاعف طول
        الجدول — عشان كده هى مقصوره على الخليّه، مش على كل `<a>`. */
  html body :is(td, th) :is(a[href], button, .btn, [onclick], [role="button"],
                            .sk-raise.sk-raise.sk-raise){
    min-block-size:var(--tap);
    /* العرض كمان — زرار أيقونه اتقاس ٢٩×٤٤: الارتفاع اتصلّح والعرض لأ.
       الجدول بيزحلق فى الوضع ده، فالعرض الزياده مالوش تكلفه. */
    min-inline-size:var(--tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* الحقل اللى بيتكتب فيه سطور بياخد ارتفاعه من صفوفه مش من الحدّ */
  html body :is(textarea, .sk-raise.sk-raise.sk-raise){
    min-block-size:calc(var(--tap) * 2) !important;
  }

  /* ── مربّعات الاختيار ─────────────────────────────────────────────
     ⚠️⚠️ **حشوه + هامش سالب مابيشتغلش على مربّع اختيار أصلى.**
        دى كانت أول محاوله هنا: حشوه بتكبّر مساحة اللمس وهامش سالب
        بيرجّع المساحه اللى بتاخدها فى التخطيط، فالصفّ مايطولش.
        الفكره سليمه على `div`، وعلى `<input type=checkbox>` **لأ**:
        كروم بيرسم الكنترول جوّه صندوق المحتوى ويصفّر الحشوه المستعمله.
        اتقاس بعد التطبيق: `margin:-15px` اتطبّق و`padding:0px`.

        يعنى النتيجه كانت **مربّع مزحلق ١٥px فى كل اتجاه ومساحة لمس زى
        ما هى** — عيب جديد مكانش موجود. اتشال.

     البديل، وهو صريح عن حدوده:

       · برّه الجداول وفى وضع الكروت → `--tap` كامل (٤٤). فيه مكان.
       · جوّه صفوف جدول بيزحلق → **٢٤×٢٤**، مش ٤٤.

     ليه ٢٤ ومش ٤٤ جوّه الجداول: صفّ الجدول على ٣٧٥ ارتفاعه ~٤٣px.
     مربّع ٤٤px جوّه صفّ ٤٣px بيتراكب مع الصفّ اللى فوق واللى تحت،
     والدوسه اللى برّه بشعره بتختار **الأوردر الغلط** — وبعدها «غيّر
     حالة المختار» بتشتغل على أوردر مش اللى انت شايفه. هدف بيختار
     الحاجه الغلط أسوأ من هدف بيتطلب دقّه.

     ٢٤ مش رقم مخترع: هو `WCAG 2.2 SC 2.5.8 Target Size (Minimum)`،
     مستوى AA. و٤٤ هو `SC 2.5.5` مستوى AAA. يعنى الجداول بتحقّق AA
     والباقى بيحقّق AAA. الفرق ده **مكتوب فى التقرير**، مش متخبّى.

     ⚠️ تكبير المربّع نفسه بيبوّظ ترصيص الجداول؛ المطلوب مساحة الاستقبال.

     ⚠️ ومستثنى من ده **صفوف الجسم** فى جدول وضع الزحلقه، لسببين:
        · `sharks-kit.css` سايبه مربّعات الجداول بمقاسها بالقصد («الصفّ
          كله هو الهدف هناك، وتكبيرها بيكسر ارتفاع الصفّ»).
        · وأهم: صفّ الجدول على ٣٧٥ ارتفاعه ~٤٣px. مساحة لمس ٤٤ على
          مربّع ١٣px بتمتدّ ~١٥px فوق وتحت — يعنى **جوّه الصفّ اللى فوق
          واللى تحت**. الدوسه اللى برّه بشعره بتختار الأوردر الغلط،
          وبعدها «غيّر حالة المختار» بتشتغل على أوردر مش اللى انت شايفه.
          هدف لمس بيختار الحاجه الغلط أسوأ من هدف صغيّر بيتطلب دقّه.

        مربّع «اختار الكل» فى الرأس مستثنى من الاستثناء: هو لوحده فى
        خليّته، ومفيش صفّ فوقه يتاخد بالغلط. وفى وضع الكروت الصفّ بقى
        كارت وارتفاعه مش مسأله، فكل المربّعات بتاخد مساحتها.

     ⚠️⚠️ الحشوه والهامش لازم **الاتنين** يتكتبوا بـ`!important`.
        أول نسخه كتبت الاتنين بلا `!important`: الهامش السالب اتطبّق
        (`-15px`) والحشوه اتصفّرت من قاعده أخصّ فى القالب. النتيجه كانت
        **أسوأ من مفيش تعديل**: المربّع اتزحلق ١٥px فى كل اتجاه ومساحة
        اللمس ماكبرتش. اتقاس على `.checkAllData`: `margin:-15px`
        و`padding:0px`. النصّ التانى من التقنيه من غير الأول = عيب جديد. */
  /* الحدّ الأدنى AA — على كل مربّع، فى أى مكان */
  html body :is(input[type="checkbox"], input[type="radio"], .sk-raise.sk-raise.sk-raise){
    inline-size:var(--tap-min) !important;
    block-size:var(--tap-min) !important;
    min-block-size:auto !important;
  }

  /* الحدّ الكامل AAA — لما يكون فيه مكان:
       · برّه الجداول
       · فى وضع الكروت (الصفّ بقى كارت، ارتفاعه مش مسأله)
       · وفى جدول **اتقاس** إن صفوفه بتسع ٤٤ + هامش أمان
         (`data-sk-rowtap="full"` بيتحطّ من `sharks-responsive.js`
          بعد قياس أول صفّ — مش بافتراض) */
  /* ⚠️ الرافع `.sk-raise` لازم يبقى فى **الثلاثه**، مش فى الأولانى بس.
        أول نسخه كتبت الاتنين التانيين من غيره:
            html body table[data-sk-mode="cards"] :is(input[type=checkbox])
        انتقائيتها (0,2,4)، وأرضية AA فوقيها (0,3,2) — والكلاسات بتغلب
        العناصر، فالأرضيه كانت بتكسب والقاعده دى مابتشتغلش.
        اتقاس: `data-sk-rowtap="full"` كان متحطّ فعلاً على الجدول
        والمربّعات فضلت **٢٤×٢٤**. نفس الفخّ اللى الملف ده كله متكتوب
        عشانه — واتكرّر جوّاه. */
  /* ⚠️ 2026-09-28 — برّه الجداول اتشال: المربّع نفسه كان بيتكبّر لـ٤٤×٤٤،
        فكان بيبان مربّع فاضى ضخم شكله مكسور جنب «المتوفر فقط» (شاشة
        المنتجات). مساحة اللمس هناك مكانها الـ<label> اللى جنبه (١٢هـ).
        جوّه الجداول بيفضل ٤٤ — الخليّه هى مساحته ومفيش label جنبه، ولما
        اتشال من هنا كمان مربّعات الصفوف نزلت ٢٤ (اتقاس: ١٠١ هدف صغيّر فى
        /admin/orders). */
  html body table[data-sk-mode="cards"] :is(input[type="checkbox"], input[type="radio"], .sk-raise.sk-raise.sk-raise),
  html body table[data-sk-rowtap="full"] :is(input[type="checkbox"], input[type="radio"], .sk-raise.sk-raise.sk-raise){
    inline-size:var(--tap) !important;
    block-size:var(--tap) !important;
  }

  /* ── بنود القايمه فى الدرج ────────────────────────────────────────
     دى **التنقّل الأساسى** على الموبايل. اتقاست ٢٤px ارتفاع فى درج
     الأدمن — فوق أرضية AA بواحد وتحت هدف اللمس بعشرين. الإيد الواحده
     فى ممرّ مخزن مش هتظبّط على ٢٤. */
  html body :is(.metismenu > li > a, .dlabnav a, #sidebar-menu a, .sb-link,
                .sidebar a, .sk-raise.sk-raise.sk-raise){
    min-block-size:var(--tap);
    display:flex;
    align-items:center;
    gap:var(--gap-icon);
  }

  /* مسار التنقّل (breadcrumb) — اتقاس ٦٢×٢٤ فى `div.page-title-box`.
     حزمة التلميع ظبّطت `.breadcrumb-item > a`، والماركب هنا مش بيستعمل
     الكلاس ده — فالقاعده مالقتش حاجه. */
  html body :is(.breadcrumb a, .page-title-box a, .sk-raise.sk-raise.sk-raise){
    min-block-size:var(--tap);
    display:inline-flex;
    align-items:center;
  }

  /* ── زرار الأيقونه — مربّع كامل ───────────────────────────────────
     الوسم بيتحطّ من `sharks-responsive.js` على أى `a`/`button` محتواه
     المرئى أيقونه بس. مقيس قبل: `#skTheme` ٤٢×٤٤ · `.toggle-sidebar`
     ٣٦×٤٤ · `.nav-control` ٣٧×٤٤ · «السله» و«الوضع» ٣٦×٣٦ — الارتفاع
     كان اتظبّط والعرض لأ، ودول فى **كل** شاشه. */
  /* ⚠️ `.nav-control` و`.toggle-sidebar` مكتوبين `<div>` من غير
        `role="button"` — فالكاشف مابيشوفهمش (بيدوّر على
        `a[href]`/`button`/`[role=button]`). دول مفاتيح الدرج فى الأربع
        لوحات، فاتسمّوا بالاسم هنا. مقيس: ٣٧×٤٤. */
  html body :is([data-sk-iconbtn], .sk-tbc__btn, .nav-control, .toggle-sidebar,
                .sk-raise.sk-raise.sk-raise){
    min-inline-size:var(--tap);
    min-block-size:var(--tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* شارة الحاله اللى بيتدوس عليها — اتقاست ٥٤×٢٥.
     ⚠️ أول نسخه اشترطت `[onclick]` على الشاره نفسها، والماركب حاططه
        على الخليّه اللى لافّاها — فالقاعده مالقتش حاجه واتقاست ٥٤×٢٥
        تانى فى ٢٤ ظهور. دلوقتى الشاره بتاخد الارتفاع مهما كان مين
        شايل الحدث. */
  html body :is(.status-pill, .sk-raise.sk-raise.sk-raise){
    min-block-size:var(--tap);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* ── الروابط اللى بتشتغل كتحكّم ───────────────────────────────────
     ⚠️ الحيله هنا إن `min-block-size` **مالهاش أى أثر على عنصر inline**.
        يعنى الرابط اللى جوّه فقره بيفضل زى ما هو بالظبط، والرابط اللى
        اتعمل `inline-flex` أو `inline-block` (يعنى اتصمّم كزرار) هو
        بس اللى بياخد الأرضيه. قاعده واحده، وصفر خطر على النص الجارى.

        اتقاس على `/store`: «عرض الكل ←» ٥٩×٢١ و«إدارة ←» ٣٣×٢١ —
        الاتنين تحكّمات فى رأس كارت، مش نص. */
  html body a[href]{
    min-block-size:var(--tap-min);
    /* العرض كمان: اتقاس `a.mini «→»` عند **١٠×٢٤** فى لوحة الأدمن —
       سهم «روح» جنب كل بلاطه. الارتفاع كان اتصلّح والعرض فضل عشره. */
    min-inline-size:var(--tap-min);
  }

  /* المسافه بين هدفين متجاورين — ٨px على الأقل عشان الصباع مايغلطش */
  html body .btn + .btn,
  html body .ab-btn + .ab-btn,
  html body .dt-button + .dt-button{ margin-inline-start:var(--sp-2) }
}


/* ═══════════  ٣ج) الفورم بيبقى عمود واحد  ══════════════════════════════
   ده **تخطيط** مش إرجونوميه، فبيرجع لقطع الـ٧٦٨: على تابلت عرضه ٩٠٠
   عمودين فى الفورم أحسن من عمود واحد طويل، حتى لو الجهاز باللمس.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){

  /* ── عمود واحد: الليبل فوق، الحقل بعرض كامل ────────────────────────
     بوتستراب بيكسّر `.col-md-*` تحت md لوحده. اللى مابيكسرش هو
     `.col-3` و`.col-xs-3` — دى ثابته على كل العروض. مقيس: ١٥٥ منهم
     فى ٨٢ شاشه. جوّه فورم أو فلتر بيبقوا عمود واحد. */
  html body form .row > [class*="col-"],
  html body .form-group.row > [class*="col-"],
  html body .filter-panel .row > [class*="col-"],
  html body .fp-grid > [class*="col-"]{
    flex:0 0 100% !important;
    max-inline-size:100% !important;
    inline-size:100% !important;
  }

  /* الليبل فوق الحقل — مش جنبه */
  html body .form-group.row > label[class*="col-"],
  html body .form-group.row > .label-control[class*="col-"]{
    text-align:start !important;
    margin-block-end:var(--gap-label);
  }

  /* المسافه الرأسيه بين صفوف الفورم بقت هى المسافه الوحيده */
  html body .form-group.row > [class*="col-"] + [class*="col-"]{
    margin-block-start:var(--gap-label);
  }

  /* مجموعة الحقل والزرار (input-group) بتنزل تحت بعضها لو ضاقت */
  html body .input-group{ flex-wrap:wrap }
  html body .input-group > .form-control{ min-inline-size:60% }
}


/* ═══════════  ٤) الجداول تحت ٧٦٨  ══════════════════════════════════════
   قاعدتين مختلفتين، والاختيار بيتحدد من **إزاى الجدول بيتقرا**:

     · قايمه بتتصفّح صفّ صفّ  →  كروت (صفّ = كارت، ليبل: قيمه)
     · شبكه بتتقارن عبر الأعمده →  العمود الأول بيتجمّد والباقى بيزحلق

   `sharks-responsive.js` بيحطّ `data-sk-mode` على كل جدول: الجداول اللى
   DataTables ماسكها بتاخد `scroll` (هى شبكات مقارنه، وتحويلها كروت
   بيكسّر حساب العرض بتاع المكتبه)، والباقى بياخد `cards`. أى شاشه تقدر
   تغلب القرار بـ`data-sk-table="cards|scroll"` فى الماركب.

   ⚠️ مفيش قصّ ساكت فى الحالتين. الجدول بيزحلق جوّه حاويته أو بيبقى كروت،
      والصفحه نفسها عمرها ما بتزحلق أفقى.
   ══════════════════════════════════════════════════════════════════════ */

/* الحاويه اللى بتزحلق — بتتعمل من الجافاسكريبت لو الجدول ملفّوش حاجه */
.sk-tblscroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* ⚠️ الحواف الدايره لازم تكون على **الحاويه** مش على الجدول.
        `overflow:hidden` على `<table>` عشان الأركان هو اللى قصّ ٧٠px من
        جدول المخازن فى جوله سابقه، وآخر زرار فى الصفّ بقى إحداثيّته -33. */
  border-radius:var(--r);
}
.sk-tblscroll > table{ overflow:visible !important; margin-block-end:0 }

/* بيّن إن فيه كمان — حافّه بتتلاشى على الناحيه اللى فيها باقى الجدول */
.sk-tblscroll[data-sk-more="1"]{
  mask-image:linear-gradient(to var(--sk-more-dir, right), #000 calc(100% - 2rem), transparent);
}

@media (max-width:767.98px){

  /* ── ٤أ) وضع الكروت ────────────────────────────────────────────── */
  table[data-sk-mode="cards"]{
    display:block;
    border:0;
    inline-size:100%;
  }
  table[data-sk-mode="cards"] > thead,
  /* ⚠️ فيه جداول رأسها **جوّه `tbody`** — أول `<tr>` كله `<th>` من غير
        `<thead>` خالص. المتصفح مابيرقّيهوش، فلو خبّينا `thead` بس، صفّ
        الرأس بيفضل ظاهر ويطلع كارت فاضى العناوين. الجافاسكريبت بيوسمه. */
  table[data-sk-mode="cards"] > tbody > tr[data-sk-thead="1"]{
    /* ⚠️ `display:none` بيشيل الرأس من شجرة الوصوليه كمان. الليبل
          بيرجع على كل خليّه فى `td::before`، فالمعلومه مش بتضيع —
          بتتكرّر لكل صفّ، وده الصح فى وضع الكروت. */
    display:none;
  }
  table[data-sk-mode="cards"] > tbody,
  table[data-sk-mode="cards"] > tfoot{ display:block }

  table[data-sk-mode="cards"] > tbody > tr{
    display:block;
    background:var(--surf);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:var(--pad-card);
    margin-block-end:var(--gap-card);
  }
  table[data-sk-mode="cards"] > tbody > tr:last-child{ margin-block-end:0 }

  table[data-sk-mode="cards"] > tbody > tr > td{
    display:flex;
    align-items:baseline;
    gap:var(--gap-icon);
    inline-size:auto;
    padding:var(--sp-1) 0;
    border:0;
    text-align:start;
    white-space:normal;
  }
  table[data-sk-mode="cards"] > tbody > tr > td + td{
    border-block-start:1px solid var(--line2);
  }

  /* الليبل — من `data-label` اللى الجافاسكريبت خدها من `<th>` */
  table[data-sk-mode="cards"] > tbody > tr > td::before{
    content:attr(data-label);
    flex:0 0 40%;
    max-inline-size:40%;
    color:var(--slate);
    font-size:var(--fs-sm);
    /* الخليّه اللى فيها فلوس (td.sk-num) خطها mono — الليبل العربى كان
       بيورثه ويطلع «س ع ر  ا ل ط ل ب» */
    font-family:var(--f-ui);
    letter-spacing:0;
    font-variant-numeric:normal;
    font-weight:var(--fw-medium);
  }
  /* خليّه بلا ليبل (مربّع اختيار · أزرار الصفّ) بتاخد العرض كله */
  table[data-sk-mode="cards"] > tbody > tr > td[data-label=""]::before{ content:none }
  table[data-sk-mode="cards"] > tbody > tr > td[data-label=""]{
    flex-wrap:wrap;
    gap:var(--gap-inline);
  }

  /* الخليّه اللى فيها أزرار: الأزرار بتلفّ وكل واحد بيوصل ٤٤ */
  table[data-sk-mode="cards"] > tbody > tr > td .btn,
  table[data-sk-mode="cards"] > tbody > tr > td .ab-btn{ flex:0 1 auto }

  /* صفّ «مفيش بيانات» فى DataTables مايتحوّلش كارت فاضى */
  table[data-sk-mode="cards"] > tbody > tr > td.dataTables_empty{ justify-content:center }
  table[data-sk-mode="cards"] > tbody > tr > td.dataTables_empty::before{ content:none }

  /* ── ٤ب) وضع الزحلقه: العمود الأول بيتجمّد ─────────────────────────
     من غير تجميد، الصفّ بيفقد هويّته أول ما تزحلق — بتبص على أرقام
     من غير ما تعرف بتاعة مين. */
  table[data-sk-mode="scroll"]{ inline-size:auto; min-inline-size:100% }

  table[data-sk-mode="scroll"] > thead > tr > th:first-child,
  table[data-sk-mode="scroll"] > tbody > tr > td:first-child{
    position:sticky;
    inset-inline-start:0;
    z-index:calc(var(--z-sticky) - 1);
    background:var(--surf);
    max-inline-size:var(--w-freeze);
    border-inline-end:1px solid var(--line2);
  }
  table[data-sk-mode="scroll"] > thead > tr > th:first-child{
    z-index:var(--z-sticky);
    background:var(--paper2);
  }

  /* الرأس بيفضل باين وانت بتزحلق رأسيًا فى جدول طويل */
  table[data-sk-mode="scroll"] > thead > tr > th{
    position:sticky; inset-block-start:0;
    background:var(--paper2);
    z-index:calc(var(--z-sticky) - 2);
  }

  /* الخلايا مابتلفّش فى وضع الزحلقه — اللفّ بيخلّى المقارنه مستحيله */
  table[data-sk-mode="scroll"] > tbody > tr > td{ white-space:nowrap }
}


/* ═══════════  ٥) المودال بيبقى ورقه بكامل الشاشه تحت ٧٦٨  ══════════════
   صندوق صغيّر فى نص شاشه ٣٢٠ = حقول بعرض ٢٠٠px وزرار حفظ مش باين.
   ⚠️ التلات نسخ بوتستراب بتسمّى المودال المفتوح بأسماء مختلفه:
      بوتستراب ٣ = `.modal.in` · ٤ و٥ = `.modal.show`. الاتنين مغطّيين.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body .modal-dialog{
    margin:0 !important;
    max-inline-size:100% !important;
    inline-size:100% !important;
    min-block-size:100% !important;
    display:flex; align-items:stretch;
  }
  html body .modal.in .modal-dialog,
  html body .modal.show .modal-dialog{ transform:none !important }

  html body .modal-content{
    inline-size:100%;
    min-block-size:100dvh;
    border:0 !important;
    border-radius:0 !important;
    display:flex; flex-direction:column;
  }

  /* الجسم هو اللى بيزحلق — مش الورقه كلها. عشان الرأس والفوتر يفضلوا. */
  html body .modal-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch }

  html body .modal-header,
  html body .modal-footer{ position:sticky; z-index:1; background:var(--surf); flex:0 0 auto }
  html body .modal-header{ inset-block-start:0 }
  html body .modal-footer{
    inset-block-end:0;
    /* ⚠️ حشوه بمقدار الأمان تحت — على iOS فيه شريط نظام بياكل آخر
          صفّ. `env(safe-area-inset-bottom)` بترجع صفر على غير iOS. */
    padding-block-end:calc(var(--pad-card) + env(safe-area-inset-bottom, 0px));
    flex-wrap:wrap; gap:var(--sp-2);
  }
  html body .modal-footer > .btn{ flex:1 1 auto }
}


/* ═══════════  ٦) القايمه المنسدله بتبقى ورقه من تحت  ═══════════════════
   قايمه منسدله جنب زرارها فى الشريط العلوى بتخرج برّه شاشه ٣٢٠، أو
   بتفتح فى مكان الصباع مش قادر يوصله. تحت ٧٦٨ بتطلع من تحت.

   ⚠️ Popper (بوتستراب ٤ و٥) بيكتب `transform` و`position` **إنلاين** على
      القايمه. الإنلاين بيغلب أى ملف ستايل، فالقواعد دى محتاجه
      `!important` — ده مش تشدّد، ده الطريقه الوحيده.

   ⚠️ قوايم select2 و nice-select **مستثناه**: هى مربوطه بمكان الحقل
      نفسه (والـsearch جوّاها)، وتحويلها ورقه بيفصلها عن اللى بتفلتره.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body .dropdown-menu.show,
  html body .dropdown.open > .dropdown-menu,
  html body .dropdown-menu[data-sk-sheet="1"]{
    position:fixed !important;
    inset-inline:0 !important;
    inset-block:auto 0 !important;
    transform:none !important;
    margin:0 !important;
    inline-size:auto !important;
    max-inline-size:none !important;
    min-inline-size:0 !important;
    max-block-size:var(--h-sheet-max) !important;
    overflow-y:auto;
    border-radius:var(--r) var(--r) 0 0 !important;
    border:1px solid var(--line) !important;
    box-shadow:var(--sh-lg);
    z-index:var(--z-modal);
    padding-block-end:calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  }
  /* البنود جوّه الورقه بتاخد هدف لمس كامل */
  html body .dropdown-menu.show > .dropdown-item,
  html body .dropdown.open > .dropdown-menu > li > a{
    min-block-size:var(--tap);
    display:flex; align-items:center; gap:var(--gap-icon);
  }
}


/* ═══════════  ٧) الفعل الأساسى بيفضل موصول  ════════════════════════════
   فورم أطول من الشاشه = زرار الحفظ تحت خارج المجال، والمستخدم لازم
   يزحلق لتحت كل مره.

   ⚠️ `position:sticky` **مش** `fixed`، وده قرار:
      `fixed` بيطلّع العنصر برّه السياق فبيغطّى آخر صفّ محتوى — وده عيب
      لوحده (`fixed_covering` فى الفحص). `sticky` بيفضل جوّه السياق،
      فمفيش حاجه تتغطّى ومفيش حشوه تعويضيه محتاجه تتحسب.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body [data-sk-formaction]{
    position:sticky;
    inset-block-end:0;
    z-index:var(--z-sticky);
    background:var(--surf);
    border-block-start:1px solid var(--line);
    margin-block-start:var(--gap-card);
    padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
  }
  html body [data-sk-formaction] > .btn,
  html body [data-sk-formaction] > button{ flex:1 1 8rem }
}


/* ═══════════  ٨) اللمس: كل حاجه بتظهر بالمرور محتاجه طريق لمس  ═════════
   على جهاز لمس مافيش `hover`. أى تحكّم ظاهره مربوط بالمرور = تحكّم
   **مش موجود** بالنسبه للمستخدم.

   `@media (hover:none)` بتوصف الأجهزه اللى مافيهاش مؤشّر بيمرّ —
   دقّتها أعلى من العرض: تابلت عرضه ١٠٢٤ بلمس محتاج نفس المعالجه،
   وشاشه ٣٧٥ بماوس مش محتاجه.
   ══════════════════════════════════════════════════════════════════════ */
@media (hover:none){
  /* أسهم اللايت-بوكس — بتظهر بالمرور بس فى `lightbox.min.js`.
     على تليفون كانت الصوره تفتح ومفيش طريقه تروح للّى بعدها. */
  .lb-nav a.lb-prev,
  .lb-nav a.lb-next{ opacity:1 !important }

  /* أى صفّ جدول تحكّماته بتظهر بالمرور — تبان دايمًا */
  tr:not(:hover) [data-sk-hoveronly]{ opacity:1 !important; visibility:visible !important }
}


/* ═══════════  ٩) المخازن — الموبايل أساسى، مش سطح مكتب مصغّر  ══════════
   الاستعمال الحقيقى: تليفون، فى ممرّ مخزن، بإيد واحده، وممكن بجوانتى.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ ٩أ) ★ الشريحه اللى مالهاش قايمه خالص: ٧٦٨ → ١٠٢٣ ══════════════════
   ──────────────────────────────────────────────────────────────────────
   ده مش تلميع. ده **فقدان تنقّل كامل** على الآيباد بالطول.

   اللى بيحصل، مقيس:

     · `manageResponsiveSidebar()` فى `vendor/global/global.min.js`:
           if (innerWidth > 767 && innerWidth < 1024)
               body.attr("data-sidebar-style", "mini");
     · و`style.css` فيها قاعده **من غير أى ميديا كويرى**:
           [data-sidebar-style="mini"] .nav-control { display:none }
     · وفى نفس الوقت `sharks-wh-core.css` بتخلّى `.dlabnav` طبقه
       خارج-الشاشه من `1199.98px` وتحت.

   يعنى فى الشريحه دى: الدرج `translateX(238px)` — برّه الشاشه —
   **والهامبرجر اللى بيفتحه `display:none`**. مفيش أى طريقه توصل
   للقايمه. اتقاس على ٧٦٨ و١٠٠٠: الاتنين كده.

   السبب الجذرى **بريكبوينتين على نفس السلوك**: القالب كان بيفترض
   «سايدبار مصغّر لسه ظاهر» فى الشريحه دى، وسطر شاركس حوّله لطبقه
   بتفتح وتتقفل — من غير ما يردّ الزرار.

   العلاج هنا هو ربط الاتنين: **طول ما الدرج طبقه، الزرار ظاهر.**
   ⚠️ متعمّد إن الشرط هو نفس بريكبوينت الدرج (`1199.98`) وبيتكتب مره
      واحده — لو اتغيّر، الاتنين بيتغيّروا مع بعض.

   ⚠️ الخاصيه دى على `<body>` **نفسه**، مش على عنصر جوّاه. أول نسخه
      اتكتبت `html body :is([data-sidebar-style="mini"]) .nav-control`
      — ودى معناها «حفيد لـbody عليه الخاصيه»، وbody مش حفيد نفسه.
      القاعده كانت سليمه نحويًا ومامطبّقتش على حاجه. اتقاس بعدها:
      الهامبرجر لسه `display:none` على ٧٦٨ و٩٠٠ و١٠٢٣. */
@media (max-width:1199.98px){
  html body:is([data-sidebar-style="mini"], [data-sidebar-style="overlay"],
                [data-layout="horizontal"], .sk-raise.sk-raise.sk-raise) .nav-control{
    display:inline-flex !important;
  }
}
@media (max-width:767.98px){
  /* الفلتر بيبقى عمود واحد وحقوله كلها بعرض الشاشه */
  html[data-panel="warehouse"] body .filter-panel .fp-grid,
  html[data-panel="warehouse"] body .filter-panel .row{
    grid-template-columns:1fr !important;
  }

  /* ⚠️ `sharks-wh-orders-header.css` بتحطّ `min-height:40px!important`
        على `.filter-panel .form-control`. ٤٠ أقل من ٤٤. الانتقائيه هنا
        (0,3,2) بتغلب (0,2,0) بتاعتها. */
  html[data-panel="warehouse"] body .filter-panel .form-control,
  html[data-panel="warehouse"] body .modal .form-control{
    min-block-size:var(--tap) !important;
    font-size:var(--fs-field-touch) !important;
  }

  /* حقل المسح هو الفعل الأساسى فى الشاشه — بياخد العرض كله وبنط أكبر */
  html body [data-sk-scan]{
    inline-size:100% !important;
    max-inline-size:none !important;
    font-size:var(--fs-xl) !important;
    min-block-size:calc(var(--tap) + var(--sp-2)) !important;
    font-family:var(--f-num);
    letter-spacing:.04em;
  }
}

/* ── شريط المسح — التقديم اتنقل من `style=` الإنلاين لهنا ────────────
   كان مكتوب إنلاين على العنصر: `display:flex` بلا لفّ، حقل
   `max-width:280px` و`min-height:38px`، وليبل `white-space:nowrap`.
   الستايل الإنلاين بيغلب أى ملف — يعنى طبقة الاستجابه مكانتش هتوصله
   مهما كتبنا. الحلّ إنه يطلع من الماركب، مش إن نحاربه بـ!important. */
.sk-scanbar{
  display:flex;
  align-items:center;
  gap:var(--gap-icon);
  flex-wrap:wrap;
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad-card);
  margin-block-end:var(--gap-card);
}
.sk-scanbar > label{
  display:inline-flex; align-items:center; gap:var(--gap-icon);
  color:var(--slate); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  margin:0; white-space:nowrap;
}
.sk-scanbar > input{ flex:1 1 14rem; min-inline-size:0 }
.sk-scanbar__hint{ font-size:var(--fs-xs); color:var(--slate); flex:1 1 100% }

@media (max-width:767.98px){
  /* على الموبايل الحقل بياخد سطر لوحده — هو الفعل الأساسى */
  .sk-scanbar > label,
  .sk-scanbar > input{ flex:1 1 100% }
}


/* ═══════════  ٩ب) الشبكات والكروت — مايعدّوش عرض الشاشه  ═══════════════
   الشبكات المكتوبه إنلاين فى الماركب (grid-template-columns ثابت)
   الجافاسكريبت بيوسمها (sharks-responsive.js → inlineGrids) — الإنلاين
   بيغلب الكلاسات، فمحتاجه وسم.

   ⚠️ 2026-09-28: أقسام لوحة المتجر والستوروفرنت اتشالت (المتجر اتشال
      من السيستم). كانت فيها قواعد على `.topbar` بـ!important — ولوحة
      الأدمن بتستعمل نفس الاسم، فكانت بتلفّ شريط الأدمن على الموبايل.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body [data-sk-grid1]{ grid-template-columns:1fr !important }
  /* `min-width:140px` إنلاين على بلاطات جوّه صفّ بيلفّ */
  html body [data-sk-minw]{ min-inline-size:0 !important; flex:1 1 auto }
  /* الكارت مايعدّيش عرض حاويته مهما كان جوّاه */
  html body :is(.card, .tbl-card, .sk-raise.sk-raise.sk-raise){
    max-inline-size:100%;
    min-inline-size:0;
  }
}


/* ═══════════  ١٠ب) آخر تلات مصادر زحلقه — اتلقوا بالقياس بعد التصليح ══
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){

  /* ── شريط المدى الزمنى فى لوحة الأدمن ────────────────────────────
     `.sk-range-label{white-space:nowrap}` + حقلين تاريخ
     `width:140px!important` فى صفّ flex مابيلفّش. اتقاس على ٣٧٥:
     العنصر **٥٧٩px** — يعنى الفلتر بتاع لوحة الأدمن الرئيسيه بيطلع
     برّه الشاشه بالكامل. */
  html body .sk-range{ flex-wrap:wrap; row-gap:var(--sp-2) }
  html body .sk-range-label{ white-space:normal }
  html body .sk-range-custom{
    margin-inline-start:0;
    flex-wrap:wrap;
    inline-size:100%;
  }
  html body .sk-range-custom .form-control{
    inline-size:auto !important;
    flex:1 1 8rem;
    min-inline-size:0;
  }

  /* ── `.row` جوّه `.page-title` ────────────────────────────────────
     ⚠️ ده لغم متكرّر فى النظام ده: `.row` بتاعة بوتستراب عليها هامش
        سالب ‎-12px‎ من كل ناحيه، وبتعتمد على إن أبوها `container` أو
        `col-*` فيه حشوه ‎12px‎ بتعوّضها. `.page-title` مافيهاش الحشوه
        دى — فالصفّ بيطلع **٢٤px أوسع من أبوه**. اتقاس: ٣٩٥px على
        شاشه ٣٧٥، و٧٨٠ على ٧٦٨.

        نفس الشكل ده وقّع ٣٤ شاشه فى لوحة المسوّق قبل كده لما
        `container-fluid` و`row` كانوا على نفس العنصر. */
  html body .page-title > .row,
  html body .page-title-box > .row{ margin-inline:0 }

  /* ── مجموعة أزرار الفلتر ─────────────────────────────────────────
     `.btn-group` بتاعة بوتستراب صفّ واحد مابيلفّش. خمس أزرار حاله فى
     `/admin/returns` اتقاسوا **٣٣١px على شاشه ٣٢٠** — والزرار الواحد
     طلع **٤٣px** عرض، ناقص واحد عن الحدّ.
     بتلفّ دلوقتى، وكل زرار بياخد حدّه. الحواف المشتركه بتتفكّ لما
     يلفّ — وده الصح: زرارين فى سطرين مالهمش حافّه مشتركه أصلاً. */
  html body .btn-group{ flex-wrap:wrap; gap:var(--sp-1) }
  html body .btn-group > .btn{
    min-inline-size:var(--tap);
    flex:0 1 auto;
    border-radius:var(--r-sm) !important;
  }
}


/* ═══════════  ١٢) مراجعة الموبايل — 2026-09-28  ═════════════════════════
   اتقاس على ٣٧٥ بفحص جوّه الصفحه على ١٠٦ شاشه فى الخمس لوحات، وبالعين
   على الشاشات الأساسيه. كل بند هنا ليه عيب اتشاف فعلاً:
     أ) صفوف الفترات (٧ أيام · ٣٠ يوم...) والتبويبات: فى الأدمن الصفّ
        طلع ٥٠٢px جوّه ٣٤٧ واتقصّ؛ فى المسوّق التبويبات اترصّت عمود
        واحد (كل تبويب ٣٢٦px عرض) وارتفاعها ٢٤–٢٨px.
     ب) الفلاتر: فى منتجات وطلبات المسوّق الفلتر واخد الشاشه الأولى كلها
        — المنتج الأول بيبان بعد زحلقه. (الطىّ فى sharks-responsive.js)
     ج) خط ١٠–١١px فى مئات الأماكن (عناوين البلاطات، الجداول، الشارات) —
        العربى تحت ١٢ بيتقرا بالعافيه. (الأرضيه من الجافاسكريبت: .sk-fs12)
     د) شريط «الهويّه مؤقته» فى البراند ٣ سطور فوق كل شاشه.
     هـ) مساحة لمس المربّع مكانها الـlabel اللى جنبه.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){

  /* ── أ) سطر واحد بيتزحلق جوّه نفسه ─────────────────────────────── */
  html body :is(.sk-period, .sk-range-quick, .sk-catalog-tabs, .sk-order-tabs){
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex:1 1 100%;
    min-inline-size:0;
    max-inline-size:100%;
    gap:var(--sp-2);
    padding-block:2px;
    margin-inline:0;
  }
  html body :is(.sk-period, .sk-range-quick, .sk-catalog-tabs, .sk-order-tabs)::-webkit-scrollbar{ display:none }
  html body :is(.sk-catalog-tabs, .sk-order-tabs) > li{ flex:0 0 auto; list-style:none }
  html body :is(.sk-period > a, .sk-range-quick > a, .sk-catalog-tabs .nav-link, .sk-order-tabs .nav-link){
    flex:0 0 auto;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    min-block-size:40px;
    padding-inline:var(--sp-3);
    inline-size:auto !important;
  }
  /* التبويب اللى على الطرف (زى «تصدير الكتالوج») مايتزقّش لآخر الصفّ */
  html body .sk-catalog-tabs .sk-tab-right{ margin-inline-start:0 !important }

  /* ── ب) الفلتر المطوى ──────────────────────────────────────────── */
  html body .sk-mfold-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    inline-size:100%;
    min-block-size:44px;
    padding-inline:var(--sp-3);
    margin-block:var(--sp-2);
    background:var(--surf, var(--paper));
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:var(--r-sm, 8px);
    font-weight:600;
    cursor:pointer;
  }
  html body .sk-mfold-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  html body .sk-mfold-btn .sk-mfold-n{
    min-inline-size:22px; block-size:22px; padding-inline:6px;
    border-radius:11px; background:var(--accent); color:var(--accent-tx, #fff);
    font-size:12px; display:inline-flex; align-items:center; justify-content:center;
  }
  html body .sk-mfold-btn .sk-mfold-chev{ transition:transform .2s }
  html body .sk-mfold-btn[aria-expanded="true"] .sk-mfold-chev{ transform:rotate(180deg) }
  html body [data-sk-mfold-done]:not(.is-open){ display:none !important }

  /* ── ج) أرضية الخط ─────────────────────────────────────────────── */
  html body .sk-fs12{ font-size:12px !important; line-height:1.45 }

  /* ── د) شريط الهويّه المؤقته: سطر واحد، التحذير نفسه بيفضل ─────── */
  html body .sk-phbar{ padding-block:6px; font-size:12px; line-height:1.4 }
  html body .sk-phbar > span:last-child{
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* ── و) شريط المسوّق العلوى: لوجو صغيّر + زرار قايمه واضح ─────────
     قالب Cuba بيخفى اللوجو تحت ٩٩١، فالشريط كان ٧ أيقونات من غير اسم.
     زرار الوضع الغامق (القمر) نسخه من اللى جوّه لوحة المظهر، فبيتشال
     على الشاشات الصغيّره عشان اللوجو يلاقى مكان. */
  html body .page-header .header-wrapper .header-logo-wrapper{
    display:flex !important; align-items:center; gap:var(--sp-2);
  }
  html body .page-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper{ display:block !important }
  html body .page-header .header-wrapper .logo-wrapper img{
    max-block-size:26px; max-inline-size:96px; inline-size:auto; object-fit:contain;
  }
  html body .page-header .header-wrapper .toggle-sidebar svg{ inline-size:24px; block-size:24px }
  html body .page-header .nav-menus li:has(> div > #skModeBtn){ display:none !important }

  /* ── ز) بلاطات الأرقام: الهامش تحت الكارت فوق فراغ الشبكه ──────────
     `.card` عليه margin-bottom:16px من بوتستراب، والشبكه ليها gap —
     الاتنين مع بعض عملوا فراغ ٢٤px+ بين كل صفّين، والصفحه طويله فاضى. */
  html body :is(.sk-an__tiles, .sk-home__tiles) > .card{ margin-block-end:0 !important }
  html body .sk-an__tiles{ gap:var(--sp-2) !important }

  /* ── ح) رقم الإشعارات فى شريط الأدمن ───────────────────────────────
     اتقاس ٢٤×٢٧ بخلفيه شبه شفافه، فى نص الجرس — بيبان مربّع مكسور فوق
     الأيقونه. بقى نقطه صغيّره مليانه على طرف الجرس. */
  html body .topbar .noti-icon-badge.badge,
  html body .noti-icon-badge.badge.badge-danger{
    position:absolute !important;
    inset-block-start:4px !important;
    inset-inline-end:2px !important;
    top:4px !important;
    min-inline-size:18px; block-size:18px; min-block-size:0 !important;
    padding:0 5px !important;
    border-radius:9px !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    font-size:11px !important; line-height:1 !important; font-weight:700;
    background:var(--err, #dc2626) !important; color:#fff !important;
    border:2px solid var(--surf, #fff) !important;
  }

  /* ── ط) بلاطات الأدمن (mini-stat): عمودين مش واحد ──────────────────
     فى /admin/orders خمس بلاطات كل واحده صفّ كامل بخط ٢٨px — الملخّص
     لوحده واخد شاشه كامله قبل أول أوردر. */
  html body .row:has(> [class*="col"] > .card.mini-stat){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--sp-2);
    margin-inline:0;
  }
  html body .row:has(> [class*="col"] > .card.mini-stat) > [class*="col"]{
    inline-size:auto !important; max-inline-size:none !important; padding-inline:0 !important;
    display:block !important;
  }
  html body .card.mini-stat{ margin-block-end:0 !important; block-size:100% }
  html body .card.mini-stat .card-body{ padding:var(--sp-3) !important }
  html body .card.mini-stat :is(h4, .h4){ font-size:18px !important; line-height:1.3; margin:0; overflow-wrap:anywhere }
  html body .card.mini-stat .mini-stat-img{ display:none !important }
  html body .card.mini-stat .mb-4{ margin-block-end:0 !important }

  /* ── ى) المخازن: الصفحه كانت بتتهزّ ٣px يمين وشمال ─────────────────
     `.row` (بوتستراب ٤) هامشها ‎-15px‎، و`.container-fluid` حشوته ١٢px —
     فكل صفّ بيطلع ٣px من كل ناحيه، والصفحه كلها بتتزحلق ٣px. اتقاس
     scrollWidth=378 على شاشه ٣٧٥ فى ١٥ شاشه من شاشات المخازن. */
  html body .content-body > .container-fluid{ padding-inline:15px !important }

  /* ── ك) عمود ثابت فى الجداول اللى بتتزحلق (الوسم من stickyCols) ──── */
  html body table[data-sk-sticky] :is(th, td):first-child{
    position:sticky !important; inset-inline-start:0; z-index:2;
    background:var(--surf, #fff) !important;
  }
  html body table[data-sk-sticky="2"] :is(th, td):nth-child(2){
    position:sticky !important; inset-inline-start:var(--sk-stick1, 44px); z-index:2;
    background:var(--surf, #fff) !important;
    box-shadow:inset -1px 0 0 var(--line);
  }
  html[dir="rtl"] body table[data-sk-sticky="2"] :is(th, td):nth-child(2){ box-shadow:inset 1px 0 0 var(--line) }
  /* التانى مسلسل بس → الكود (التالت) هو اللى بيثبت جنب المربّع */
  html body table[data-sk-sticky="3"] :is(th, td):nth-child(3){
    position:sticky !important; inset-inline-start:var(--sk-stick1, 44px); z-index:2;
    background:var(--surf, #fff) !important;
    box-shadow:inset -1px 0 0 var(--line);
  }
  html[dir="rtl"] body table[data-sk-sticky="3"] :is(th, td):nth-child(3){ box-shadow:inset 1px 0 0 var(--line) }
  html body table[data-sk-sticky="1"] :is(th, td):first-child{ box-shadow:inset -1px 0 0 var(--line) }
  html[dir="rtl"] body table[data-sk-sticky="1"] :is(th, td):first-child{ box-shadow:inset 1px 0 0 var(--line) }

  /* ── ل) أزرار الاختصار فى الرئيسيه (طلب جديد · المنتجات ...) ٣٠px ── */
  html body .sk-quicks__a{ min-block-size:40px !important; display:inline-flex; align-items:center }

  /* ── م) أهداف صغيّره فاضله بعد القياس على ٣٢٠ و٤٣٠ ─────────────────
     لينك اللوجو ٦٧×٢٦ · أرقام الصفحات ٣٠px عرض. */
  html body .page-header .header-wrapper .logo-wrapper > a{
    display:inline-flex; align-items:center; min-block-size:40px;
  }
  html body .pagination .page-item .page-link{ min-inline-size:40px !important; justify-content:center; text-align:center }
  html body .sk-an__csv{ min-block-size:36px !important; display:inline-flex !important; align-items:center; padding-inline:var(--sp-2) }
  /* الشريط السفلى: ٥ زراير فى ٣٢٠ = ٦٤px للزرار. أرضية الـ١٢ (ج) بتلفّ
     «تحليل العملاء» على سطرين — هنا ١١ فى سطر واحد (استثناء مقصود). */
  html body .sk-tabbar a :is(span, .sk-fs12){
    font-size:11px !important; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-inline-size:100%; display:block; line-height:1.3;
  }
  /* المخازن: اختصارات الرئيسيه ٢٩px · أيقونات الشريط العلوى ٢٢px على ٣٢٠ */
  html body .sk-wh__quicks > a{ min-block-size:40px !important; display:inline-flex; align-items:center }
  html body .header :is(.notification_dropdown, .header-profile) > a.nav-link{
    min-inline-size:36px !important; justify-content:center;
  }

  /* ── هـ) المربّع: الـlabel اللى جنبه هو مساحة اللمس ─────────────── */
  html body .form-check{ min-block-size:var(--tap); display:flex; align-items:center; gap:var(--sp-2) }
  html body .form-check-label{ min-block-size:var(--tap); display:inline-flex; align-items:center; flex:1 }
}


/* ═══════════  ١٢ب) التليفونات الصغيّره (أقل من ٣٧٥) — الشريط العلوى  ═══
   اتقاس على ٣٢٠: الشريط فيه لوجو + قايمه + جرس + سلّه + لغه + مظهر +
   الحساب = أعرض من الشاشه، وصورة الحساب طلعت برّه (‎-28→-1‎).
   زرار «المظهر» (ألوان/وضع) مش أساسى على تليفون صغيّر — بيتشال هنا بس،
   وفاضل على ٣٧٥ وفوق. واللوجو بيصغر شويه. */
@media (max-width:374.98px){
  html body .page-header .nav-menus #skThemeTab,
  html body .page-header .nav-menus .sk-tbc:has(#skThemeTab){ display:none !important }
  html body .page-header .header-wrapper .logo-wrapper img{ max-inline-size:72px }
  html body .page-header .nav-menus{ gap:0 !important }
}


/* ═══════════  ١٣) الدرج المقفول مايكلش لمس — 2026-09-28  ════════════════
   لوحة المسوّق (Cuba): الدرج المقفول `.sidebar-wrapper.close_icon` عليه
   visibility:hidden — بس صفّ اللوجو جوّاه عليه قاعده بتقلبه visible، والابن
   بيقدر يكسر إخفاء أبوه. النتيجه: لينك شفاف فوق **زرار القايمه نفسه** فى
   الشريط العلوى (اتقاس: elementFromPoint على الزرار = لينك جوّه الدرج
   المقفول). أول دوسه على «القايمه» كانت بتروح للينك المخفى.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:991.98px){
  html body .page-wrapper .sidebar-wrapper.close_icon,
  html body .page-wrapper .sidebar-wrapper.close_icon *{
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* ═══════════  ١١) الطباعه  ═════════════════════════════════════════════
   الفواتير والليبلات بتطبع من نفس الشاشات. الورقه مش شاشه موبايل:
   الكروت بترجع جداول، والحاجات المثبّته بتتشال.
   ══════════════════════════════════════════════════════════════════════ */
@media print{
  table[data-sk-mode="cards"]{ display:table }
  table[data-sk-mode="cards"] > thead{ display:table-header-group }
  table[data-sk-mode="cards"] > tbody{ display:table-row-group }
  table[data-sk-mode="cards"] > tbody > tr{ display:table-row; border:0; padding:0 }
  table[data-sk-mode="cards"] > tbody > tr > td{ display:table-cell }
  table[data-sk-mode="cards"] > tbody > tr > td::before{ content:none }
  [data-sk-formaction]{ position:static }
  .sk-tblscroll{ overflow:visible }
}