/* ===== واجهة الجوال واللوحي =====
   تُبنى على أنماط الحاسوب لا بدلاً منها: الملف يُحمَّل بعد style.css
   وبعد أنماط الصفحة، ولا يغيّر إلا ما لا يصلح باليد أو على شاشة
   صغيرة. فالشاشات والأزرار والصلاحيات واحدة في الحالتين، والذي
   يتبدّل هو التخطيط ومقاس ما يُلمس.

   المفتاح سمة data-device على <html>: يكتبها الخادم من ترويسة
   المتصفح ثم يصحّحها device.js. والاعتماد على السمة لا على عرض
   النافذة وحده مقصود: آيباد في وضع العرض أوسع من كثير من نوافذ
   الحاسوب، ومع ذلك يُلمس بالإصبع لا بالفأرة.

   المقاس الأدنى لما يُلمس 44 بكسلاً: قياس إبهامٍ متوسط، ودونه يُخطئ
   المستخدم الزر فيضغط جاره - وجار "حفظ الطلب" هنا "طلب جديد".      */

/* ===== ما يعمّ كل جهاز لمسي ===== */
[data-touch="1"] .btn,
[data-touch="1"] .navbtn{min-height:40px}
[data-touch="1"] .field{min-height:40px}

/* حجم الخط في الحقول 16 بكسلاً على الأقل: سفاري على iOS يقرّب
   الصفحة تلقائياً عند التركيز على حقلٍ أصغر من ذلك، فتنزاح الشاشة
   ولا تعود. لا حيلة غير تكبير الخط - منع التقريب يُعطّل تكبير
   المستخدم أيضاً وهو حقّه. */
[data-touch="1"] input,
[data-touch="1"] select,
[data-touch="1"] textarea{font-size:16px}

/* مربّع الاختيار الافتراضي 13 بكسلاً: يُصاب بالفأرة ولا يُصاب
   بالإصبع، وهو في التعديل السريع مفتاح حذف الصفوف. */
[data-touch="1"] input[type="checkbox"]:not(.toggle){width:20px; height:20px}
[data-touch="1"] .toggle{width:44px; height:26px}
[data-touch="1"] .toggle::after{width:20px; height:20px}
[data-touch="1"] .toggle:checked::after{inset-inline-start:22px}
[data-touch="1"] .swatch-input{width:46px; height:34px}

/* التحويم لا وجود له باللمس: أثره على الجوال أن اللون يعلق على آخر
   صفٍّ لُمس فيبدو مختاراً وليس كذلك. */
@media (hover:none){
  tbody tr:hover td,
  tbody tr:hover td:first-child{background:inherit}
  .btn:hover:not(:disabled){border-color:var(--line)}
  .navbtn:hover:not(:disabled){background:none; color:var(--ink-soft)}
  /* والضغط يجب أن يُرى بدل التحويم الذي لا يُرى */
  .btn:active:not(:disabled){background:var(--line-soft)}
  .navbtn:active:not(:disabled){background:var(--line-soft)}
  tbody tr:active td{background:var(--row-hover)}
}

[data-device="mobile"] .table-wrap,
[data-device="tablet"] .table-wrap,
[data-device="mobile"] .settings-body,
[data-device="tablet"] .settings-body,
[data-device="mobile"] .dlg-body,
[data-device="tablet"] .dlg-body{-webkit-overflow-scrolling:touch}

/* ===== الجوال ===== */
/* مقاييس الشاشة الصغيرة: حوافٍ أنعم وخطٌّ أكبر قليلاً. الحافة الحادّة
   (5 بكسل) صُمِّمت لجدولٍ من مئات الخلايا على شاشة مكتب؛ وعلى الهاتف
   العناصر قليلةٌ كبيرة، فالحافة الحادّة تجعلها تبدو صناديق مرصوصة. */
[data-device="mobile"]{--radius:9px}
[data-device="mobile"] body{font-size:14px}
[data-device="mobile"] body{
  height:100dvh;
  /* للمتصفحات التي لا تعرف dvh: القيمة يكتبها device.js */
  height:var(--app-vh,100vh);
  height:100dvh;
}

/* شريط التنقّل ينزل إلى أسفل الشاشة: أعلى الشاشة أبعد ما يكون عن
   الإبهام على هاتفٍ يُمسك بيد، وأسفلها موضع التنقّل في كل تطبيق
   يعرفه المستخدم. والأيقونة وحدها لا تكفي هنا فيُكتب تحتها اسمها. */
[data-device="mobile"] .shell{flex-direction:column}
[data-device="mobile"] .main{order:1; min-height:0}
[data-device="mobile"] .sidebar{
  order:2; width:auto; flex:none; flex-direction:row; align-items:stretch;
  gap:0; padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  border-inline-start:0; border-top:1px solid var(--line);
  overflow-x:auto; overflow-y:hidden;
  box-shadow:0 -6px 16px -14px var(--shadow);
}
[data-device="mobile"] .sidebar .brand,
[data-device="mobile"] .sidebar .sep,
[data-device="mobile"] .sidebar .spacer{display:none}
/* #navbar غلافٌ حول أزرار الشاشات، وفي شريطٍ أفقي يجعل الأزرار
   الأربعة تتقاسم حصّةً واحدة بينما يأخذ الإعدادات والخروج حصّةً
   لكلٍّ منهما - فتُضغط الأربعة حتى تتراكب. display:contents يرفع
   الغلاف من الحساب فتصير الستة إخوةً تتقاسم العرض بالتساوي. */
[data-device="mobile"] .sidebar #navbar{display:contents}
[data-device="mobile"] .navbtn{
  flex:1 1 0; min-width:52px; width:auto; overflow:hidden;
  flex-direction:column; justify-content:center; gap:3px;
  padding:6px 2px; font-size:10.5px; line-height:1.25; text-align:center;
}
/* الاسم المختصر بدل الكامل تحت الأيقونة: "الأسعار" لا "مقارنة
   الأسعار" - يكتبه navButton في data-short. */
[data-device="mobile"] .sidebar .navbtn span{display:none}
[data-device="mobile"] .sidebar .navbtn::after{
  content:attr(data-short); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
[data-device="mobile"] .navbtn svg{width:21px; height:21px}
/* التبويب المفتوح: شريطٌ رفيع فوقه بلون البرنامج. الخلفية الملوّنة
   خلف الأيقونة كانت تصنع لطخةً في شريطٍ ضيّق، والشريط العلوي يقول
   الشيء نفسه بأثرٍ أخفّ - وهو ما تفعله شرائط التبويب المعروفة. */
[data-device="mobile"] .navbtn.on{background:none; color:var(--accent); font-weight:700}
[data-device="mobile"] .navbtn.on::before{
  content:""; position:absolute; top:0; inset-inline:22%; height:2.5px;
  border-radius:0 0 3px 3px; background:var(--accent);
}
[data-device="mobile"] .navbtn{position:relative}
[data-device="mobile"] .navbtn.on svg{stroke-width:2.1}

/* الأزرار الثانوية: خلفيةٌ رماديةٌ خفيفة بدل الأبيض. على الحاسوب
   الأبيض يفرّق الزر عن خلفية الشاشة، وعلى الهاتف - حيث الأزرار
   عريضةٌ متجاورة - يصير صفّاً من الصفائح البيضاء يغلب على الجدول
   وهو الأهمّ. الأساسيّ وحده يبقى ملوّناً فيُعرف من نظرة. */
[data-device="mobile"] .btn{
  background:var(--panel-soft); border-color:var(--line-soft);
  padding:9px 13px; font-size:13px; font-weight:500;
}
[data-device="mobile"] .btn.primary{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 1px 3px -1px var(--shadow);
}
[data-device="mobile"] .btn.on{background:var(--accent-soft); border-color:var(--accent)}
[data-device="mobile"] .field{border-radius:var(--radius)}

/* الشاشة نفسها: حشوٌ أقل، فعرض الهاتف كله 390 بكسلاً */
[data-device="mobile"] .screen{padding:8px 8px 0; gap:7px}

/* شريط السياق شريطُ رأسٍ لا صفّ أزرار: يمتدّ إلى حافتي الشاشة على
   لوحٍ خاصّ به، فيُقرأ رقم الطلب أولاً ثم أدواته. والبحث ينفرد بسطره
   لأنه أطول ما فيه استعمالاً. */
[data-device="mobile"] .screen > .row:first-child{
  margin:-8px -8px 0; padding:8px; gap:6px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
[data-device="mobile"] .screen > .row:first-child .pill{
  font-size:12px; padding:5px 10px; font-weight:700;
}
/* الزرّ الرئيس يبقى رئيساً: كان التجريد يمسح خلفيّته الخضراء ويُبقي
   لونَ نصّه الأبيض - أبيضُ على أبيض، فيظهر الزرّ صندوقاً فارغاً لا
   نصّ فيه ولا أيقونة. يُستثنى ``primary`` من التجريد وحده. */
[data-device="mobile"] .screen > .row:first-child .btn{
  padding:7px 11px; font-size:12.5px;
}
[data-device="mobile"] .screen > .row:first-child .btn:not(.primary){
  background:none; border-color:var(--line);
}
/* ترتيب الشريط: رقم الطلب سطراً وحده، فأدواته سطراً، فالبحث سطراً.
   بلا ترتيبٍ كانت الثلاثة تلتفّ حيث اتّفق: زرٌّ إلى جانب رقم الطلب
   وزرّان تحته، فلا يُقرأ شيءٌ منها في مكانه المتوقّع. */
[data-device="mobile"] .screen > .row:first-child .pill{flex:1 1 100%; text-align:center}
[data-device="mobile"] .screen > .row:first-child .btn{flex:1 1 auto}
[data-device="mobile"] .screen > .row:first-child .spacer{display:none}
[data-device="mobile"] .screen > .row:first-child .field{
  flex:1 1 100%; min-width:0!important; order:9;
}
[data-device="mobile"] .row{gap:7px}
/* الفواصل الرأسية بين مجموعات الأزرار تفقد معناها حين تلتفّ الأزرار
   إلى أسطر، فتصير خطوطاً معترضة في وسط الصف. */
[data-device="mobile"] .group{
  border-inline-start:0; padding-inline-start:0; margin-inline-start:0;
  gap:6px; flex-wrap:wrap;
}

/* النموذج: حقلٌ تحت حقل بعرضٍ كامل. عرض الحقول مكتوبٌ في الصفحة
   بالبكسل (150 و220 و100…) وهي مقاسات شاشةٍ عريضة، فتُلغى هنا. */
[data-device="mobile"] fieldset.form{padding:4px 10px 10px}
[data-device="mobile"] .fields{display:grid; grid-template-columns:1fr 1fr; gap:8px 8px}
[data-device="mobile"] .fbox{min-width:0}
[data-device="mobile"] .fields .field,
[data-device="mobile"] .fields select{width:100%!important; min-width:0!important}
/* أزرار النموذج تملأ سطرها بدل أن تتكوّم في طرفه، والفاصل المطّاط
   الذي يدفعها هناك لا معنى له في شبكةٍ من عمودين. */
[data-device="mobile"] .fields > .spacer{display:none}
[data-device="mobile"] .fields > .group .btn{flex:1 1 0}
/* رقم الصنف والبيان أعرض من الكمية والسعر: هما نصّان والباقي أرقام.
   وكمية المورد خامسةٌ فردية، فلو تُركت نصف سطرٍ بقي نصفه فارغاً. */
[data-device="mobile"] .fields .fbox:nth-child(-n+2),
[data-device="mobile"] .fields .fbox:nth-child(5){grid-column:span 2}
[data-device="mobile"] .fields > .row,
[data-device="mobile"] .fields > .group{grid-column:span 2}

/* الأقسام المطويّة: يبنيها phoneFold على الهاتف وحده. العنوان صفٌّ
   كامل يُلمس بلا تصويب، والسهم يقول أمفتوحٌ هو أم مطويّ. */
[data-device="mobile"] details.fold{
  flex:none; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
}
[data-device="mobile"] details.fold > summary{
  display:flex; align-items:center; gap:10px; min-height:44px;
  padding:10px 13px; cursor:pointer; list-style:none;
  font-size:13px; color:var(--ink-soft);
}
[data-device="mobile"] details.fold > summary::-webkit-details-marker{display:none}
[data-device="mobile"] .fold-name{font-weight:700; color:var(--ink); flex:none}
/* حال القسم إلى جانب اسمه: اسم المورد، أو الصنف الذي في النموذج */
[data-device="mobile"] .fold-hint{
  flex:1; min-width:0; text-align:start; color:var(--ink-soft); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* السهم يدور بدل أن يُستبدل بحرفٍ آخر: الحركة تربط الحالتين فتُفهم
   بلا قراءة، والاستبدال يقفز. */
/* الحدّان يُذكران بالجهة الفيزيائية (right/bottom) لا المنطقية: السهم
   شكلٌ هندسيّ لا نصّ، والمنطقية تنعكس مع اتجاه الصفحة فينقلب إلى
   الجنب بدل أن يشير إلى أسفل. */
[data-device="mobile"] details.fold > summary::after{
  content:""; flex:none; width:7px; height:7px; margin-inline-start:auto;
  border-right:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
[data-device="mobile"] details.fold[open] > summary{border-bottom:1px solid var(--line-soft)}
[data-device="mobile"] details.fold[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
[data-device="mobile"] details.fold[open]{border-color:var(--line)}
[data-device="mobile"] details.fold[open] .fold-hint{opacity:0}
/* طيّةٌ أنحف: تُفتح بعنوانها وبالنقر على سطرٍ في جدولها معاً، فلا
   تحتاج إلى أربعةٍ وأربعين بكسلاً من مساحة اللمس - وكل بكسلٍ توفّره
   يذهب إلى الجدول. */
[data-device="mobile"] details.fold.slim > summary{
  min-height:32px; padding:5px 12px; font-size:12.5px;
}
[data-device="mobile"] details.fold.slim > summary::after{width:6px; height:6px}
/* ===== شريط الطلب مطويّاً على الجوال =====
   خانتا الطلب وأربعةُ أوامرَ تأخذ سطرين من شاشةٍ عرضها ٣٩٠، وهي
   أمورٌ تُطرَق مرّةً عند فتح الطلب أو حفظه - بينما الجدول تحتها
   يُقرأ في كل لحظة. فالشريط كلّه طيّةٌ واحدة، ورقمُ الطلب وحالُه
   مكتوبان في عنوانها فيُقرآن وهي مطويّة.

   وارتفاعُ الشريط هنا يتبع طيّته لا ``--topbar-h``: ذلك الثابت كان
   ليقابل خطَّ اسم البرنامج في الشريط الجانبي، واسمُ البرنامج مخفيٌّ
   على الجوال أصلاً - فلا خطَّ ينكسر، ولو بقي ثابتاً لخرج المفتوحُ
   من تحته على ما بعده. */
[data-device="mobile"] .orderbar{
  height:auto; min-height:0; align-items:stretch; padding:6px 8px;
}
[data-device="mobile"] .orderbar details.fold{flex:1 1 100%; min-width:0}
[data-device="mobile"] .orderbar details.fold > .order-top{
  padding:8px 10px 10px; gap:8px; flex-wrap:wrap;
}
[data-device="mobile"] .orderbar details.fold > .order-top > .group{flex-wrap:wrap}
/* خانة الوصف مخفيّةٌ على الضيّق في الورقة الأصل، وهنا تعود: الطيّة
   تلتفّ فتسعها، وهي موضع تسمية الطلب.

   وسطرُها الخاصّ **بعد** الرقم لا قبله: الرقم أوّلُ ما يُقرأ. */
[data-device="mobile"] .orderbar details.fold .field.note{
  display:block; order:1; flex:1 1 100%;
}
[data-device="mobile"] .orderbar details.fold .order-acts{flex-wrap:wrap}
/* داخل الطيّة لا حاجة إلى إطارٍ ثانٍ ولا إلى عنوانٍ مكرّر */
[data-device="mobile"] details.fold > fieldset.form{border:0; padding:2px 10px 10px; background:none}
[data-device="mobile"] details.fold > fieldset.form > legend{display:none}
[data-device="mobile"] details.fold > .row{padding:8px 10px 10px}

/* ما زاد عن ارتفاع الشاشة يُمرَّر، ولا يبقى الجدول بلا ارتفاع */
[data-device="mobile"] .screen{overflow-y:auto; overflow-x:hidden}
/* على الهاتف الصفحة كلها تمرّ، فلا يلتصق شريط الحال بقاعٍ ثابت بل
   يمشي مع المحتوى في آخره. وحشوة الشاشة هنا ٨ بكسل لا ١٢، فيُصحَّح
   الهامش السالب معها. */
[data-device="mobile"] .screen-foot{margin:0 -8px; padding:8px 10px}
[data-device="mobile"] .table-wrap{min-height:min(46dvh,300px)}

/* الجدول: يبقى جدولاً ويُمرَّر أفقياً - وعمود رقم الصنف مثبّتٌ أصلاً
   فلا يضيع الصف. تحويله إلى بطاقات يُفقده ما وُجد له: مقارنة سعر
   المورد بجاره بنظرةٍ واحدة. */
[data-device="mobile"] table{font-size:12.5px}
[data-device="mobile"] th,[data-device="mobile"] td{padding:9px 8px}
[data-device="mobile"] th{font-size:11px; letter-spacing:.2px; color:var(--ink-soft)}
/* رأس الجدول يلقي ظلاً حين يُمرَّر ما تحته، فيُعرف أنه ثابتٌ لا
   صفٌّ أول انزلق معه. */
[data-device="mobile"] thead th{box-shadow:0 1px 0 var(--line)}
/* أرخص سعر: يبقى الأخضر لكن على خلفيةٍ ألطف من الخلية الممتلئة -
   الخلية الملوّنة كاملةً في جدولٍ ضيّق تصير كتلةً تُنافس الرقم. */
[data-device="mobile"] td.best,[data-device="mobile"] td.tie{font-weight:700}
[data-device="mobile"] .table-wrap{border-radius:10px}
/* خلية التعديل السريع: 16 بكسلاً منعاً لتقريب سفاري، وعرضٌ يسع
   "146.25" كاملاً - كان آخر رقمٍ من الكسر يُقصّ فيُقرأ السعر خطأً. */
[data-device="mobile"] .cell-input{min-width:80px; padding:6px 4px; font-size:16px}

/* ===== وضوح الجدول على الهاتف =====

   عمود الترقيم "م" يُحذف: هو خدمة قارئٍ يشير إلى صفٍّ في اجتماع، وعلى
   هاتفٍ عرضه 390 بكسلاً يأخذ من العرض ولا يعطي - ورقم الصنف يكفي
   للدلالة على الصف.

   ثم يُثبَّت رقم الصنف مكانه بدلاً منه. وهذا هو المهمّ: بلا تثبيتٍ
   يخرج رقم الصنف من الشاشة عند أول سحبةٍ نحو أعمدة الموردين، فيبقى
   المستخدم أمام صفٍّ من الأرقام لا يعرف لأيّ صنفٍ هي. */
[data-device="mobile"] th.serial,[data-device="mobile"] td.serial{display:none}
/* التثبيت نفسه ليس هنا: تتولّاه قواعد ``pin-N`` في index.html، وهي
   تحدّد العمود بصنفه لا بترتيبه. وكانت هنا قاعدةٌ تثبّت
   ``nth-child(2)`` - أي العمود الثاني أيّاً كان - فتصيب رقم الصنف في
   شاشة المقارنة وتخطئه في غيرها: في شاشة عرض السعر العمود الثاني هو
   الترقيم المخفيّ، وفي سجلّ التدقيق والتقارير هو "المستخدم"، فكان
   يُثبَّت عمودان عند الموضع صفر يركب أحدهما الآخر عند السحب.

   والباقي هنا مقاسٌ لا تثبيت: ما يخصّ عرض عمود رقم الصنف على شاشةٍ
   ضيّقة. ويُحدَّد بالصنف ``.code`` كما تفعل قواعد التثبيت. */
[data-device="mobile"] .table-wrap th.code,
[data-device="mobile"] .table-wrap td.code{
  /* عرضٌ ثابت يسع رقمي صنفٍ من كل ثلاثة في سطر، وما طال منها يُلَفّ
     سطرين ولا يخرج عن حدّه ولا يُختصر بنقاط: النقاط تُسقط آخر الرقم
     وهو ما يفرّق بين طرازٍ وطراز (…4EF32 و…4EF34). والثبات مقصود:
     يبقى عرض العمود واحداً في كل الشاشات فلا يقفز عرض الجدول كلما
     فُتح طلبٌ فيه رقمٌ أطول. والوقفة عند حدّ الأعمدة تُقاس مع ذلك
     من العرض الفعليّ بعد الرسم (--pin-w في index.html) لا من هذا
     الرقم، فتصحّ ولو تغيّر هنا أو اختلف عن اللوحي. */
  width:120px; min-width:120px; max-width:120px; font-size:12px; font-weight:500;
  /* اللفّ يقع عند الشرطة فيبقى الرقم كاملاً مقروءاً */
  white-space:normal; overflow-wrap:anywhere; line-height:1.3;
}

/* ===== شاشة التعديل السريع على الهاتف =====

   غرضُها إدخال الأسعار، وكان لا يظهر فيها عمود مورد واحد بلا تمرير:
   رقم الصنف المثبَّت ١٢٠ + التأشير ٣٧ + الكمية ٩٧ + البيان ١١٤ = ٣٦٨
   من ٣٧٤ بكسلاً، وأوّل مورد يبدأ عند ٣٧٧ - خارج الشاشة. فيدخل المستخدم
   السعر وهو لا يرى الخانة التي يكتب فيها حتى يسحب الجدول.

   فيُخفى البيان هنا وحده: رقم الصنف هو الهويّة وهو مثبَّت، والبيان
   يُقرأ في شاشة المقارنة وفي نموذج بيانات القطعة. أمّا في شاشة إدخالٍ
   على هاتفٍ عرضه ٣٩٠ فهو يأكل عمود مورد كامل ولا يُكتب فيه شيء. */
[data-device="mobile"] table.grid-edit th.name,
[data-device="mobile"] table.grid-edit td.name{display:none}
/* خانة الكمية تسع إدخالها: القاعدة العامة تفرض ٨٠ بكسلاً أدنى لكل
   خانة إدخال في الجدول، وهي للأسعار - والكمية رقمٌ من خانتين أو ثلاث.
   بلا هذا يفيض الإدخال ٢٨ بكسلاً خارج خليّته على جاره. */
[data-device="mobile"] table.grid-edit td.qty .cell-input{
  min-width:0; width:100%; padding-inline:4px; text-align:center;
}

/* ===== جدول المستخدمين على الهاتف =====

   أربعة أعمدة على شاشةٍ ضيّقة تحتاج تمريراً أفقياً لا محالة، لكنّ
   خانة الاسم كانت ٢٨٥ بكسلاً وحدها فتدفع الدور والأزرار بعيداً.
   تُحَدّ الخانة، وتُختصر الأزرار، فيصير الجدول في حدود الشاشة. */
[data-device="mobile"] table.users-table td.uname{width:130px; min-width:130px}
@media (max-width:380px){
  /* شاشة ٣٦٠: يُقتَصد من الاسم ليظهر عمود الدور بلا تمرير */
  [data-device="mobile"] table.users-table td.uname{width:104px; min-width:104px}
  [data-device="mobile"] table.users-table td.urole .field{min-width:64px}
  [data-device="mobile"] table.users-table th,
  [data-device="mobile"] table.users-table td{padding:6px 4px}
}
[data-device="mobile"] table.users-table td.uname .field{font-size:16px; padding:6px 8px}
[data-device="mobile"] table.users-table td.urole .field{min-width:76px; padding:6px 4px}
[data-device="mobile"] table.users-table td.uacts{white-space:nowrap}
[data-device="mobile"] table.users-table td.uacts .btn{
  padding:7px 8px; font-size:12px; min-height:34px;
}
[data-device="mobile"] table.users-table th,
[data-device="mobile"] table.users-table td{padding:6px 6px}

/* سطر الشرح تحت رقم الطلب: خطٌّ أصغر قليلاً على الهاتف ليسع السطر
   الواحد كاملاً بلا قصّ - قياسه على شاشة ٣٩٠ نحو ٣٧٢ بكسلاً بخط
   ١١٫٥، والمتاح أقلّ منه. */
[data-device="mobile"] .field-hint{
  font-size:10.5px; letter-spacing:-.1px;
  /* المجموعة كاملة العرض على الهاتف، فالشرح يمتدّ عليها كلّها */
  max-width:calc(100vw - 30px);
}
/* كامل العرض **حين يظهر الشرح** وحده: الشرح سطرٌ عريض يحتاج سطره،
   أمّا بلا شرحٍ فالخانة تتقاسم سطرها مع خانة الوصف كما كانت -
   وإفرادها بسطرٍ دائماً كان يزيد الشريط ٤٩ بكسلاً على الهاتف بلا داعٍ. */
[data-device="mobile"] .order-bar.has-hint .group.first > .field-box{
  flex:1 1 100%; min-width:0;
}
[data-device="mobile"] .field-box{min-width:0}
/* الفسحة بين سطور الشريط حين يظهر الشرح. تُعاد كتابتها هنا لأن
   ``[data-device] .row{gap:...}`` في هذا الملف يأتي بعد قاعدة
   ``.row.has-hint`` في index.html وبوزنٍ مساوٍ، فيغلبها ويعيد الفجوة
   إلى ٧ أو ٨ بكسل - فيمرّ ما التفّ فوق الشرح. */
/* اللوحي: الخانة تتقاسم سطرها، فالفسحة من فجوة السطور كما في الحاسوب. */
/* على اللوحي الزرّ أطول من الحقل (حشوته 9px لا 6px)، فكان طرفه
   السفلي ينزل على سطر الشرح تحت رقم الطلب. تُسوّى الحقول بارتفاع
   الأزرار في هذا الشريط: يزول التداخل، وتستوي المربعات والأزرار
   في صفٍّ واحد. */
[data-device="tablet"] .order-top .field{min-height:41px}
[data-device="tablet"] .order-bar.has-hint{gap:26px}
[data-device="tablet"] .order-bar.has-hint > .order-top{row-gap:26px}
/* الهاتف: الخانة وحدها في سطرها، فهامشٌ أسفلها يكفي - وزيادةُ فجوة
   السطور فوقه تحسب الفسحة مرّتين فيطول الشريط بلا داعٍ. */
[data-device="mobile"] .order-bar.has-hint{gap:6px}
[data-device="mobile"] .order-bar.has-hint > .order-top{row-gap:7px}
/* على الهاتف تلتفّ خانةُ الوصف **داخل** المجموعة لا في
   الصفّ، ففجوة الصفّ لا تبلغها. و``field-box`` هناك وحده في سطره
   (كامل العرض)، فهامشٌ أسفله يدفع ما بعده بلا أن يزيح شيئاً أفقياً. */
[data-device="mobile"] .order-bar.has-hint .field-box{margin-block-end:16px}
/* شاشة ٣٦٠ وأضيق: خطٌّ أصغر بنصف بكسل ليبقى السطر كاملاً بلا قصّ.
   وموضعها **بعد** القاعدة أعلاه لا قبلها: القاعدتان بوزنٍ واحد،
   فالأخيرة هي التي تسري. */
@media (max-width:380px){
  [data-device="mobile"] .field-hint{font-size:10px; max-width:calc(100vw - 20px)}
}

/* خانتا الرقم والوصف تتقاسمان السطر بدل أن ينزل كلٌّ منهما وحده.
   ``min-width`` المكتوب في الشيفرة (٢٠٠ للوصف و٢٣٠ للبحث) يفرض على
   كلٍّ سطراً كاملاً على شاشةٍ عرضها ٣٧٤. */
[data-device="mobile"] .row > .group.first{flex-wrap:wrap; gap:6px; flex:1 1 100%}
/* المحدِّد بالنسل لا بالابن المباشر: خانة رقم الطلب صارت داخل
   ``field-box`` (ليُعلَّق الشرح تحتها)، فلم تعد ابناً مباشراً للمجموعة
   ولا يبلغها محدِّدٌ يشترط ذلك - فتفقد مرونتها ويلتفّ الشريط سطراً
   زائداً على الشاشة الضيّقة. */
[data-device="mobile"] .row > .group.first .field{flex:1 1 120px; min-width:0}
[data-device="mobile"] .row > .group.first .field.num{flex:1 1 96px; max-width:132px}
[data-device="mobile"] .row > .group.first > .btn{flex:0 0 auto}
/* الصندوق يتقلّص مع ما فيه بدل أن يبقى كتلةً لا تنقسم */
[data-device="mobile"] .row > .group.first > .field-box{flex:1 1 auto; min-width:0}
/* خانة البحث تملأ سطرها على الهاتف بدل أن تزاحم الرقم والوصف */

/* الجوّال يلتفّ: خانة البحث سطرٌ وحدها تحت الرقم ووصفه. */
[data-device="mobile"] .order-top{flex-wrap:wrap}
[data-device="mobile"] .order-top > .field.search{flex:1 1 100%; min-width:0}


/* أسماء الموردين تُلَفّ في سطرين بدل أن تمدّ العمود على عرض الاسم
   كاملاً: "مؤسسة الخليج للتجارة" كانت وحدها تأخذ نصف الشاشة، فلا
   يظهر من الموردين إلا واحدٌ ونصف - والمقارنة تحتاج ثلاثةً معاً. */
[data-device="mobile"] thead th{white-space:normal; max-width:104px; line-height:1.35}
/* عرض الأعمدة الوسطى يُقتصد ليُرى من الموردين أكثر: العمودان بين
   رقم الصنف والموردين كانا يأخذان نصف ما بقي من الشاشة، فلا يظهر
   من الموردين إلا اثنان - والثالث هو الذي يُحسم به الأرخص غالباً. */
[data-device="mobile"] th.qty,[data-device="mobile"] td.qty{
  width:52px; min-width:52px; max-width:52px;
}
[data-device="mobile"] th.name,[data-device="mobile"] td.name{
  max-width:116px; overflow:hidden; text-overflow:ellipsis;
}
/* الأرقام أظهر من سواها: هي مقصود الجدول */
[data-device="mobile"] td.num{font-size:13.5px}
[data-device="mobile"] td.best,[data-device="mobile"] td.tie{font-size:14px}
[data-device="mobile"] .table-wrap{min-height:100px}
/* الإطار يُقلب إلى LTR كالجدول الذي فيه: في إطارٍ RTL يبدأ التمرير
   من آخر عمود، فيرى فاتح الشاشة "اقل مورد" ولا يرى رقم الصنف حتى
   يسحب الجدول كلّه. وترتيب الأعمدة نفسه لم يتغيّر. */
/* السلاسة: الاحتواء يمنع تمرير الجدول أفقياً من أن يُسلَّم إلى
   المتصفح عند حافته - وعلى iOS تُفهم تلك السحبة رجوعاً إلى الصفحة
   السابقة، فيخرج المستخدم من البرنامج وهو يقارن الأسعار. والتمرير
   بالزخم (touch) يجعل السحبة تنساب وتقف كما اعتادت اليد. */
[data-device="mobile"] .table-wrap,
[data-device="tablet"] .table-wrap{
  overscroll-behavior:contain; scroll-behavior:smooth;
  touch-action:pan-x pan-y;
}
/* السحبة تقف عند حدّ عمود، لا في منتصفه. على شاشةٍ تسع ثلاثة أعمدة
   كان الرابع يظهر منصوفاً - "168.7" بلا خمسها - فيُقرأ رقماً آخر.
   والوقوف يُحسب بعد عمود رقم الصنف المثبّت وإلا اختفى العمود خلفه.
   "proximity" لا "mandatory": يُصحّح الوقفة القريبة ولا يخطف السحبة
   الطويلة من يد صاحبها. */
[data-device="mobile"] .table-wrap{scroll-snap-type:x proximity; scroll-padding-left:var(--pin-w,104px)}
[data-device="mobile"] .table-wrap thead th{scroll-snap-align:start}
/* العمود المثبَّت لا يُوقَف عنده: هو واقفٌ أصلاً. وبالصنف لا بالترتيب
   للسبب نفسه أعلاه. */
[data-device="mobile"] .table-wrap thead th.q-pick,
[data-device="mobile"] .table-wrap thead th.serial,
[data-device="mobile"] .table-wrap thead th.code{scroll-snap-align:none}
[data-device="mobile"] .table-wrap,
[data-device="tablet"] .table-wrap{direction:ltr}
[data-device="mobile"] .table-wrap .empty,
[data-device="tablet"] .table-wrap .empty{direction:rtl}
/* رسالة "لا توجد أصناف" تقع في خليةٍ تمتدّ على عرض الجدول كلّه،
   وعرض الجدول أوسع من الشاشة، فكانت الرسالة تبدأ خارجها. تُلصَق
   بحافة الإطار وتُلفّ في سطور فتُقرأ كاملةً بلا تمرير. */
[data-device="mobile"] .empty,
[data-device="tablet"] .empty{
  position:sticky; left:0; max-width:92vw; white-space:normal; direction:rtl;
}
[data-device="mobile"] .empty{padding:22px 14px}

/* شريط الإجراءات: زرٌّ إلى جانب زر، وما زاد نزل سطراً. وحذف الصنف
   يبقى معزولاً في آخر السطر كما في الحاسوب. */
/* شريط الإجراءات: سطرٌ واحد يُمرَّر بالإصبع لا شبكةٌ من ستّة
   مربّعات. الستّة كانت تأكل ثلث الشاشة طولاً وتزاحم الجدول، والسطر
   الممرَّر يبقيها كلها في متناول الإبهام على ارتفاع صفٍّ واحد. */
[data-device="mobile"] .actions{
  padding:8px 0 9px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; scroll-padding-inline:8px;
}
[data-device="mobile"] .actions::-webkit-scrollbar{display:none}
/* تلاشٍ عند الحافة يقول إن وراءها بقيّة: شريطٌ ممرَّر بلا أثرٍ يدلّ
   عليه يُقرأ كأنه انتهى عند آخر زرٍّ ظاهر. */
[data-device="mobile"] .actions{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
}
[data-device="mobile"] .actions .group{flex:none; flex-wrap:nowrap}
[data-device="mobile"] .actions .btn{flex:none}
/* الفاصل المطّاط يدفع "حذف الصنف" إلى الطرف الآخر - وفي شريطٍ
   ممرَّر لا طرف، فيصير مسافةً ثابتة تفصل الحذف عمّا قبله. */
[data-device="mobile"] .actions .spacer{flex:none; width:18px}

/* سطرٌ واحد على الهاتف أيضاً: كان يلتفّ فيأخذ سطرين من شاشةٍ
   ارتفاعها ثمانمئة، والجدولُ هو المقصود منها. */
[data-device="mobile"] footer{
  padding:5px 10px; font-size:11.5px; gap:8px; flex-wrap:nowrap;
}
/* واسم المستخدم ثابتٌ هنا بالذات: الشاشة ضيّقة، وهو أوّل ما يُسأل
   عنه على جهازٍ يتناوبه أكثر من موظّف. يُقصّ باسمه وحده إن ضاق
   المكان - "مسجل الدخول:" مفهومةٌ من موضعها. */
[data-device="mobile"] footer > #who{
  max-width:45%; overflow:hidden; text-overflow:ellipsis;
}
/* النوافذ: على الهاتف تُفتح صفحةً كاملة لا مربّعاً في الوسط. مربّعٌ
   بعرض 94% من الشاشة على هاتف ليس مربّعاً على كل حال. */
[data-device="mobile"] dialog{
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  margin:0; border:0; border-radius:0;
}
[data-device="mobile"] .dlg-head{
  position:sticky; top:0; z-index:4; background:var(--panel);
  padding:11px 12px calc(11px + env(safe-area-inset-top,0px));
}
[data-device="mobile"] .dlg-body{
  min-width:0!important; padding:12px;
  max-height:calc(100dvh - 58px);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
/* مع تذييل: المساحة المارّة تنقص بقدره وبقدر شريط العنوان معاً،
   فيقف التذييل على حافة الشاشة لا خارجها. وحشوة أسفله هي حشوة
   الجسم كانت: الشريط السفلي للهاتف يقع تحته الآن لا تحت الجدول. */
[data-device="mobile"] .has-foot .dlg-body{
  max-height:calc(100dvh - 58px - 56px);
  padding-bottom:12px;
}
[data-device="mobile"] .dlg-foot{
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
}
/* لوحة عرض السعر على الهاتف: مجموعتا الأدوات فوق بعضهما، والإجماليات
   بعرض الشاشة كاملاً - كتلةٌ بحدٍّ أدنى ٢٧٠ بكسل تخرج عن شاشة ضيقة. */
[data-device="mobile"] .q-tools{flex-direction:column; gap:8px}
[data-device="mobile"] .q-tools fieldset.grow{flex:none; min-width:0}
[data-device="mobile"] .q-tools .line .field{flex:1 1 90px; min-width:0}
[data-device="mobile"] .q-foot{flex-direction:column-reverse}
[data-device="mobile"] .q-totals{min-width:0; width:100%}
[data-device="mobile"] .dlg-body .table-wrap{max-height:none}
[data-device="mobile"] .tabs{
  padding:8px 10px 0; flex-wrap:nowrap; overflow-x:auto; gap:6px;
}
[data-device="mobile"] .tabs .btn{flex:none}

/* الإعدادات: قائمتها تصير شريطاً أفقياً - وبأسمائها لا بأيقوناتها،
   فأيقونة "الصلاحيات" وأيقونة "المستخدمون" تتشابهان في 21 بكسلاً. */
[data-device="mobile"] .settings{flex-direction:column}
[data-device="mobile"] .settings-nav{
  width:auto; flex:none; flex-direction:row; overflow-x:auto; overflow-y:hidden;
  gap:6px; padding:8px; border-inline-end:0; border-bottom:1px solid var(--line);
}
[data-device="mobile"] .settings-nav .navbtn{
  flex:none; width:auto; flex-direction:row; gap:6px;
  padding:8px 11px; font-size:12.5px;
}
[data-device="mobile"] .settings-nav .navbtn span{display:inline}
[data-device="mobile"] .settings-nav .navbtn svg{width:16px; height:16px}
[data-device="mobile"] .settings-body{padding:12px 10px calc(16px + env(safe-area-inset-bottom))}
[data-device="mobile"] .picks{grid-template-columns:1fr}
[data-device="mobile"] .grid2{grid-template-columns:1fr}
[data-device="mobile"] .stat{gap:10px; align-items:flex-start; flex-wrap:wrap}
[data-device="mobile"] .paper-wrap{padding:8px}
/* سحب حدود الأعمدة بالإصبع: مقبضٌ بعرض 9 بكسل لا يُمسك، فيُوسَّع
   مجال إمساكه دون أن يُوسَّع الخط المرسوم. */
[data-device="mobile"] .pgrip::after,
[data-device="tablet"] .pgrip::after{inset-inline:-11px}

/* الهاتف عرضاً: الارتفاع 390 بكسلاً وقد ذهب نصفه في شريط الرأس
   والأقسام، فلم يبقَ للجدول شيء. تُضغط المسافات ويُجمع الرأس في سطرٍ
   واحد - العرض هنا وفيرٌ والارتفاع هو الشحيح، وهو عكس وضع الطول. */
@media (orientation:landscape) and (max-height:520px){
  [data-device="mobile"] .screen{gap:6px}
  [data-device="mobile"] .screen > .row:first-child{padding:6px 8px}
  [data-device="mobile"] .screen > .row:first-child .pill{flex:0 0 auto}
  [data-device="mobile"] .screen > .row:first-child .field{flex:1 1 190px; order:0}
  [data-device="mobile"] details.fold > summary{min-height:38px; padding:6px 12px}
  [data-device="mobile"] fieldset.form{padding:2px 10px 8px}
  [data-device="mobile"] .fields{gap:6px}
  [data-device="mobile"] .actions{padding:5px 0 6px}
  [data-device="mobile"] footer{padding:2px 10px; font-size:11px}
  [data-device="mobile"] .navbtn{padding:4px 2px; font-size:10px; gap:1px}
  [data-device="mobile"] .navbtn svg{width:18px; height:18px}
  [data-device="mobile"] .table-wrap{min-height:150px}
  /* البطاقات عمودان: البطاقة عرضها محدودٌ بمحتواها، وفي وضع العرض
     يبقى إلى جانبها فراغٌ بعرضها. */
  [data-device="mobile"] .cards{
    display:grid; grid-template-columns:1fr 1fr; align-content:start;
    min-height:120px; gap:7px;
  }
}

/* ===== البطاقات: صنفٌ في كل بطاقة =====
   الجدول يقارن الأصناف بعضها ببعض في عمود، والبطاقة تقارن الموردين
   على صنفٍ واحد. والسؤال على الهاتف - حيث لا تُرى ثلاثة أعمدة معاً
   بلا سحب - هو الثاني غالباً: "هذا الصنف، مَن أرخص فيه؟". فيُقرأ
   الجواب بلا سحبةٍ واحدة. */
[data-device="mobile"] .viewswitch{flex:none; gap:6px; padding:0 1px}
[data-device="mobile"] .viewswitch .btn{padding:6px 14px; font-size:12.5px; min-height:34px}

[data-device="mobile"] .cards{
  flex:1; min-height:min(46dvh,300px); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:7px; padding-bottom:4px;
}
[data-device="mobile"] .card{
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:9px 11px 7px;
}
[data-device="mobile"] .card.sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
[data-device="mobile"] .card-head{display:flex; align-items:center; gap:8px}
[data-device="mobile"] .card-code{
  font-size:14.5px; font-weight:700; direction:ltr; text-align:start;
  overflow-wrap:anywhere; flex:1; min-width:0;
}
[data-device="mobile"] .card-name{
  color:var(--ink-soft); font-size:12.5px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
[data-device="mobile"] .card-rows{margin-top:6px; border-top:1px solid var(--line-soft)}
/* سطر المورد: اسمه يميناً وسعره يساراً، والأسعار كلها على استقامةٍ
   واحدة فتُقارَن بالنظر لا بالقراءة. */
[data-device="mobile"] .card-row{
  display:flex; align-items:center; gap:8px; padding:6px 2px;
  border-bottom:1px solid var(--line-soft); font-size:13.5px;
}
[data-device="mobile"] .card-row:last-child{border-bottom:0}
[data-device="mobile"] .card-sup{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
[data-device="mobile"] .card-price{
  font-variant-numeric:tabular-nums; font-size:15px; font-weight:700;
  min-width:74px; text-align:end; direction:ltr;
}
[data-device="mobile"] .card-price.none{font-size:12.5px; font-weight:400; color:var(--ink-soft)}
/* الأرخص: لونٌ وشارةٌ معاً. اللون وحده لا يكفي لمن لا يميّز الأخضر،
   والشارة وحدها تُقرأ ولا تُلمح. */
[data-device="mobile"] .card-row.best{background:var(--accent-soft); border-radius:7px; padding-inline:8px}
[data-device="mobile"] .card-row.best .card-price,
[data-device="mobile"] .card-row.best .card-sup{color:var(--accent); font-weight:700}
[data-device="mobile"] .card-row.tie{background:var(--warn-soft); border-radius:7px; padding-inline:8px}
[data-device="mobile"] .card-row.tie .card-price,
[data-device="mobile"] .card-row.tie .card-sup{color:var(--warn); font-weight:700}
[data-device="mobile"] .card-row .tag{
  flex:none; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--accent); color:var(--on-accent);
}
[data-device="mobile"] .card-row.tie .tag{background:var(--warn); color:var(--panel)}
/* كمية المورد تلي سعره في السطر نفسه: لا تتمدّد ولا تزاحم الاسم،
   وعلى السطر الملوّن تأخذ خلفية اللوح وإلا ذابت في لونه. */
[data-device="mobile"] .card-row .cell-qty{flex:none; margin-inline-start:0}
[data-device="mobile"] .card-row.best .cell-qty,
[data-device="mobile"] .card-row.tie .cell-qty{background:var(--panel); color:inherit}
/* الفرق عن ثاني أرخص عرض: ذيلُ البطاقة، أبهت من الأسعار فوقه وأصغر.
   رقمٌ مشتقّ لا سعرٌ عرضه مورد، ولو ساواها في الوزن لزاحمها. */
[data-device="mobile"] .card-gap{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--line-soft);
  font-size:11.5px; color:var(--ink-soft);
}
[data-device="mobile"] .card-gap b{
  font-size:12.5px; color:var(--ink); font-variant-numeric:tabular-nums; direction:ltr;
}

/* بطاقة الخلاصة: آخر البطاقات وبإطارٍ أوضح - هي جوابُ الشاشة لا
   صنفاً من أصنافها، ولو تشابهت معها لقُرئت صنفاً اسمه "إجمالي الطلب". */
[data-device="mobile"] .card.totals-card{
  background:var(--panel-soft); border-color:var(--ink-soft);
  position:sticky; bottom:0;
}
[data-device="mobile"] .card.totals-card .card-code{direction:rtl}
[data-device="mobile"] .card.totals-card .card-price{font-size:14.5px}
/* بطاقة الإجمالي مطويّة: هي ملتصقةٌ بأسفل الشاشة، ومفتوحةً تأخذ من
   ارتفاعها بقدر عدد الموردين فتحجب البطاقات تحتها. رأسُها وحده يبقى
   شريطاً في الأسفل، وسهمٌ يقول إن وراءه شيئاً - كسهم بقيّة الطيّات
   في البرنامج، فلا يتعلّم المستخدم إشارتين لمعنى واحد. */
[data-device="mobile"] details.totals-card > summary{
  cursor:pointer; list-style:none; min-height:40px;
}
[data-device="mobile"] details.totals-card > summary::-webkit-details-marker{display:none}
[data-device="mobile"] details.totals-card > summary::after{
  content:""; flex:none; width:7px; height:7px; margin-inline-start:auto;
  border-right:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft);
  /* مطويّةً يشير السهم إلى أعلى: محتواها ينفتح صعوداً لا نزولاً،
     لأنها واقفةٌ في أسفل الشاشة. */
  transform:rotate(-135deg) translateY(2px); transition:transform .18s ease;
}
[data-device="mobile"] details.totals-card[open] > summary::after{
  transform:rotate(45deg) translateY(-2px);
}
[data-device="mobile"] details.totals-card[open] > summary{
  border-bottom:1px solid var(--line-soft); margin-bottom:6px;
}

[data-device="mobile"] .cards .empty{padding:26px 14px; text-align:center}

/* التنبيهات تُرفع فوق شريط التنقّل، وإلا اختفت خلفه */
[data-device="mobile"] #toast{
  inset-inline:10px; bottom:calc(64px + env(safe-area-inset-bottom));
}
[data-device="mobile"] .toast{font-size:13px}

/* ===== اللوحي (آيباد) ===== */
/* الشريط الجانبي يبقى: عرض اللوحي يحتمله، ونقله إلى الأسفل يُبعده
   عن اليد الممسكة بالجهاز من طرفه. الذي يتغيّر مقاس ما يُلمس. */
[data-device="tablet"] .sidebar{width:210px; padding:12px 9px; gap:4px}
[data-device="tablet"] .navbtn{padding:11px 10px; font-size:14px}
[data-device="tablet"] .navbtn svg{width:19px; height:19px}
[data-device="tablet"] .screen{padding:10px 12px 0; gap:9px}
[data-device="tablet"] .row{gap:8px}
[data-device="tablet"] .btn{padding:9px 14px; font-size:13.5px}
[data-device="tablet"] th,[data-device="tablet"] td{padding:8px 9px}
[data-device="tablet"] .cell-input{padding:6px 5px; min-width:74px}
/* اللوحي يُبقي عمود الترقيم (عرضه يحتمله) ويثبّت رقم الصنف إلى
   جانبه. والتثبيت من قواعد ``pin-N`` في index.html، ومواضع الوقوف
   تُقاس بعد الرسم في ``--pin-1`` و ``--pin-2`` - فلا حاجة هنا إلى
   قاعدةٍ بترتيب العمود ولا إلى ``left:34px`` مكتوبةً بالرقم، وقد كانت
   تخطئ حيثما اختلف عدد أعمدة التعريف أو عرضها. */
[data-device="tablet"] .settings-nav{width:215px}
[data-device="tablet"] .settings-nav .navbtn{padding:11px 10px}
[data-device="tablet"] .dlg-body{min-width:min(680px,92vw); max-height:76vh}
[data-device="tablet"] .has-foot .dlg-body{max-height:68vh}
[data-device="tablet"] dialog{max-width:96vw}
[data-device="tablet"] .fields{gap:12px}
[data-device="tablet"] #toast{bottom:calc(18px + env(safe-area-inset-bottom))}

/* آيباد في وضع الطول: الشريط الجانبي يأكل من عرضٍ محدود، فيُضيَّق
   إلى أيقوناته وحدها ويبقى مكانه. */
@media (max-width:834px){
  [data-device="tablet"] .sidebar{width:64px; align-items:center}
  [data-device="tablet"] .sidebar .brand{display:none}
  [data-device="tablet"] .navbtn{justify-content:center; padding:11px 6px}
  [data-device="tablet"] .navbtn span{display:none}
  [data-device="tablet"] .settings-nav{width:auto; flex-direction:row; overflow-x:auto;
    border-inline-end:0; border-bottom:1px solid var(--line)}
  [data-device="tablet"] .settings{flex-direction:column}
  [data-device="tablet"] .settings-nav .navbtn{flex:none; width:auto; flex-direction:row}
  [data-device="tablet"] .settings-nav .navbtn span{display:inline}
}

/* ===== صفحة الدخول ===== */
[data-device="mobile"] .login{
  width:100%; max-width:380px; padding:24px 20px; border-radius:12px;
  margin:0 12px;
}
[data-device="mobile"] .login button{padding:12px; font-size:15px}
[data-touch="1"] .login input{min-height:44px}

/* ===== الطباعة من الجهاز ===== */
@media print{
  .sidebar,footer,#toast,.actions{display:none!important}
  .screen{padding:0}
  .table-wrap{overflow:visible; border:0}
}

/* ===== شريط الطلب الثابت =====
   هو فوق كل شاشة الآن، لا في شريط كل شاشة على حدة. قواعد الشرح
   المعلَّق تحت خانة الرقم تُعاد له: كانت مكتوبةً على ``.order-bar``
   وهو وعاءٌ آخر، فلا تبلغه. */
/* ارتفاعه تلقائيّ هنا لا ثابتاً: الثابت على الحاسوب ليستقيم خطّه مع
   خطّ اسم البرنامج إلى جانبه، واسمُ البرنامج مخفيٌّ على الهاتف أصلاً -
   والخطّ هناك ١٦ بكسلاً ومساحةُ اللمس أكبر، فلا يسعها واحدٌ وخمسون. */
[data-device="mobile"] .orderbar{height:auto; padding:6px 10px}
[data-device="mobile"] .orderbar .order-top{flex-wrap:wrap; row-gap:6px}
/* وشرحُ "لا يوجد طلب مفتوح" يأخذ سطره هنا: لا فسحة لجواره في ٣٩٠ بكسلاً. */
[data-device="mobile"] .order-hint{flex:1 1 100%; white-space:normal}
/* اللوحي: الزرّ أطول من الحقل، فتُسوّى الحقول بارتفاعه - وإلا بدت
   المربّعات والأزرار غير مستوية في صفٍّ واحد. */
[data-device="tablet"] .orderbar{height:auto; padding-block:6px}
[data-device="tablet"] .orderbar .order-top .field{min-height:41px}

/* ===== خانات الإدخال داخل الجداول على اللمس =====
   على الحاسوب تُضبط بارتفاع سطر الخانة (‎--row-line‎) ليتساوى صفُّ
   «تعديل سريع» و«عرض سعر» بصفّ جدول الأسعار. وعلى الهاتف واللوحي
   يبقى الارتفاع تلقائياً: الإصبع تحتاج مساحةَ لمسٍ لا سطراً واحداً،
   وخطُّ الهاتف ١٦ بكسلاً لا ١٣ فلا يسعه ١٩٫٥. */
[data-device="mobile"] .cell-input,
[data-device="tablet"] .cell-input{height:auto; line-height:normal}