/* ══════════════════════════════════════════════════════════════════════
   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، وبيتكرّر فى
     كل صفّ فيه نص متغيّر الطول. اتقاس فى تلات أماكن مختلفه فى الحزمه
     دى قبل ما نلاقى إنهم نفس الحاجه:
       · `.topbar` فى لوحة المتجر — `.topbar-r` عند `left:-76`
       · `.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"` كان متحطّ فعلاً على الجدول
        والمربّعات فضلت **٢٤×٢٤**. نفس الفخّ اللى الملف ده كله متكتوب
        عشانه — واتكرّر جوّاه. */
  html body :is(input[type="checkbox"], input[type="radio"], .sk-raise.sk-raise.sk-raise):not(table tbody input),
  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% }
}


/* ═══════════  ٩ب) ★ لوحة المتجر — القايمه كانت بتتشال خالص  ════════════
   ──────────────────────────────────────────────────────────────────────
   التمن شاشات كلها فيها نفس السطر:
       @media(max-width:900px){ .sidebar{display:none} .main{margin:0} }
   من غير أى بديل. يعنى تحت ٩٠٠ **مفيش تنقّل فى اللوحه دى خالص**.

   ده مش «شاشه ضيّقه» — دى وظيفه اتشالت عشان الباقى يفتّ. نفس شكل
   الفشل بتاع شريحة المخازن فوق، بس هنا أوضح: هناك الزرار اتخبّى،
   هنا القايمه نفسها اتشالت.

   العلاج: نفس الـ`<aside>` بيبقى درج بيفتح ويتقفل. مافيش ماركب جديد
   ومافيش كومبوننت تانى — `data-sk-drawer` على الزرار و`sharks-ui.js`
   بياخد التظليل وحبس التركيز وEsc ورجوع التركيز.

   ⚠️ البريكبوينت هنا ٩٠٠ **مش** ٧٦٨: ده البريكبوينت اللى الشاشات
      نفسها بتخفى فيه السايدبار. لو كتبناه ٧٦٨ يبقى فيه شريحه
      ٧٦٨→٩٠٠ القايمه فيها متخفيه والدرج مش شغّال — نفس الغلط
      بالظبط اللى بنصلّحه فى المخازن، بأرقام تانيه.
   ══════════════════════════════════════════════════════════════════════ */
.sk-storenav{
  display:none;                     /* فوق ٩٠٠ السايدبار ثابت — الزرار مالوش لازمه */
  position:fixed;
  inset-block-start:var(--sp-2);
  inset-inline-start:var(--sp-2);
  z-index:var(--z-sticky);
  inline-size:var(--tap);
  block-size:var(--tap);
  align-items:center;
  justify-content:center;
  background:var(--surf);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  cursor:pointer;
}
.sk-storenav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

@media (max-width:900px){
  .sk-storenav{ display:inline-flex }

  html body .sidebar{
    display:flex !important;
    inline-size:min(17rem, 84vw) !important;
    max-inline-size:84vw;
    z-index:var(--z-modal);
    /* مقفول: مزحلق برّه الشاشه ناحية بداية السطر */
    transform:translateX(-100%);

    /* ⚠️ `visibility:hidden` مش زياده — من غيرها الدرج المقفول بيزوّد
          مساحة الزحلقه بتاعة المستند. اتقاس على `/store/categories`:
          الصفحه فضلت بتزحلق **٧٦px** بعد ما كل عنصر تانى اتصلّح،
          والمصدر كان الـ`<aside>` المقفول نفسه عند `x=375..647`.

          والبديل التقليدى (`overflow-x:hidden` على `body`) **ممنوع**
          هنا: هو اللى قصّ شريط الترقيم على ٣٢٠ فى جوله سابقه وخلّى
          الصفحه ٢ مالهاش طريق. `visibility` بتشيله من التخطيط ومن
          الزحلقه ومن شجرة الوصوليه — من غير ما تعمل حاويه قصّ على
          حاجه تانيه.

          المهله `.22s` على `visibility` عشان يفضل باين وهو بيتقفل،
          وإلا بيختفى فجأه بدل ما يتزحلق. */
    visibility:hidden;
    transition:transform .22s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s;
  }
  html[dir="rtl"] body .sidebar{ transform:translateX(100%) }

  /* مفتوح — الكلاس بيتحطّ على `body` من `data-sk-drawer-class` */
  html body.sk-storenav-open .sidebar{
    transform:translateX(0) !important;
    visibility:visible;
    transition:transform .22s cubic-bezier(.4,0,.2,1), visibility 0s;
  }

  /* الشريط العلوى بيسيب مكان للزرار عشان مايركبش على العنوان */
  html body .topbar{ padding-inline-start:calc(var(--tap) + var(--sp-3)) !important }

  /* ★ `.main` بتسيب ٢٤٠px للسايدبار الثابت. سبع شاشات من التمن بتصفّرها
     فى ميديا كويرى بتاعتها؛ `categories.blade.php` **مافيهاش ولا ميديا
     كويرى خالص**، فالهامش فضل شغّال على ٣٢٠ كمان.

     النتيجه المقيسه: عرض مفيد ٨٠px من ٣٢٠. الشريط العلوى اتقاس ٨٤px
     والزراير عند `left:-8`. الصفحه كانت شكلها «شبه شغّاله» فى اللقطه
     لإن المحتوى بيلفّ — والقياس هو اللى قال إنها ربع شاشه.

     ⚠️ متكتوبه هنا مش فى الشاشه: الشاشات التمنيه بتكرّر نفس السطر
        وواحده نسيته. القاعده فى مكان واحد معناها إن الشاشه رقم تسعه
        مش هتنساه. */
  html body .main{ margin-inline-start:0 !important; margin-inline-end:0 !important }
}

@media (prefers-reduced-motion:reduce){
  html body .sidebar{ transition:none !important }
}

/* ═══════════  ٩ج) شبكات لوحة المتجر — أعمده ثابته على شاشه ضيّقه ══════
   `categories.blade.php` مافيهاش **ولا ميديا كويرى**، وشبكتها
   `repeat(auto-fill, minmax(240px,1fr))`. على ٣٧٥ ناقص الحشوه، العمود
   ٢٤٠px مابيدخلش، والمتصفح بيطلّع الكروت برّه الشاشه: اتقاس
   `left:-133px` على `.cat-card`، وزحلقة صفحه ١٤٨px.

   ⚠️ العلاج مش «صغّر الـminmax» — ده بيسيب المشكله لأى شبكه جديده.
      العلاج إن أى شبكه بأعمده ثابته بتبقى عمود واحد تحت ٧٦٨.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body :is(.cats-grid, .qa-grid, .stats-grid, .grid-2, .grid-3, .kpi-strip,
                .money-grid, .kpi-grid, .charts-row, .fg-row, .pc-row,
                .prod-assign-list, .stats, .sk-raise.sk-raise.sk-raise){
    grid-template-columns:1fr !important;
  }
  /* الشبكات المكتوبه إنلاين فى الماركب — الإنلاين بيغلب، فمحتاجه وسم */
  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 }

  /* ── الشريط العلوى بتاع لوحة المتجر ──────────────────────────────
     `.topbar` عليه `justify-content:space-between` و`height:60px` وبلا
     لفّ. لما ضفنا حشوة الزرار على البدايه، مجموعة الأزرار اليمين
     (`.topbar-r`) اتزقّت برّه الشاشه — اتقاست عند `left:-76`.
     يعنى تعديل بيصلّح حاجه كان بيكسر حاجه جنبها. الصفّ بيلفّ دلوقتى. */
  html body .topbar{
    flex-wrap:wrap;
    block-size:auto !important;
    row-gap:var(--sp-2);
    padding-block:var(--sp-2) !important;
  }
  /* ⚠️ `min-inline-size:0` على ولاد الـflex: الافتراضى `auto` معناه
        «مايصغرش عن محتواك»، وده اللى بيخلّى عنوان طويل يدفع اللى جنبه
        برّه الشاشه بدل ما يتقصّ. */
  /* ⚠️ **كل** اللى جوّه الشريط، مش الولاد المباشرين بس. أول نسخه كتبت
        `.topbar > *` — والعنوان جوّه `<div>` تانى، فالـ`div` صغّر
        والعنوان جوّاه لأ. اتقاس على ٣٢٠: العنوان لسه عند `left:-50`. */
  html body .topbar *{ min-inline-size:0 }
  html body .topbar h1{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:var(--fs-xl);
  }

  /* الكارت مايعدّيش عرض حاويته مهما كان جوّاه.
     `.card` اتقاس ٣٠٨px جوّه ٣٠٤ متاحين على ٣٢٠ — أربع بكسل، بس
     الصفحه بتزحلق بسببهم. */
  html body :is(.card, .cat-card, .tbl-card, .sk-raise.sk-raise.sk-raise){
    max-inline-size:100%;
    min-inline-size:0;
  }
}


/* ═══════════  ١٠) الستوروفرنت — العميل على تليفون  ═════════════════════
   ده طريق الإيراد. لازم يبقى عمود واحد، بكيبوردات صح، وزرار التأكيد
   باين على أى عرض.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  html body .checkout-grid,
  html body .co-grid,
  html body .form-grid{ grid-template-columns:1fr !important }

  html body .fg{ margin-block-end:var(--gap-formrow) }
  html body .fg > label{ display:block; margin-block-end:var(--gap-label) }
  html body .fg > input,
  html body .fg > select,
  html body .fg > textarea{ inline-size:100% }
}


/* ═══════════  ١٠ب) آخر تلات مصادر زحلقه — اتلقوا بالقياس بعد التصليح ══
   ══════════════════════════════════════════════════════════════════════ */
@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;
  }
}


/* ═══════════  ١١) الطباعه  ═════════════════════════════════════════════
   الفواتير والليبلات بتطبع من نفس الشاشات. الورقه مش شاشه موبايل:
   الكروت بترجع جداول، والحاجات المثبّته بتتشال.
   ══════════════════════════════════════════════════════════════════════ */
@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 }
}