/* m-phone-lock.css — موبايل/تابلت (<900px) فقط: يعيد هيدر شاشة الليدز لشكل النسخة المنضبطة (الصورة الأولى):
   صف أزرار علوي (رجوع · إضافة · بحث · إشعارات · تحديث · حساب) + صف أيقونات واحد تتبع الصلاحيات.
   لا يغيّر موضع الهيدر (يبقى sticky كما في النسخة المنضبطة). يُحمَّل آخر ملف. للتراجع: احذف سطره من index.html. */
@media(max-width:899px){
  /* الهيدر بارتفاع واحد ثابت (الصفّان) مهما تعدّدت الملفات التي تعرّفه */
  html body header.top{position:sticky;top:0;transform:none;flex-wrap:wrap;align-content:flex-start;height:calc(var(--shell-h) + env(safe-area-inset-top,0px))}
  html body header.top.sk-hide{top:0;transform:none}
  html body header.top>.bk,html body header.top>.bh-i,html body header.top>.hd-search,html body header.top>.notif-bell{flex:none}
  /* زر الإضافة يظهر دائماً في Leads (كالنسخة المنضبطة) */
  html body header.top>.bh-i.bh-add{display:inline-grid}
  /* صف الأيقونات: سطر واحد؛ قليلة (موظف) = وسط، كثيرة (مدير) = تمرير أفقي */
  html body header.top nav.nv-grp{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  html body header.top nav.nv-grp>button{flex:0 0 auto}
  html body header.top nav.nv-grp>button:first-child{margin-left:auto}
  html body header.top nav.nv-grp>button:last-child{margin-right:auto}
  /* الصفحة لا ترتد تحت الهيدر */
  html,html body{overscroll-behavior-y:none}
  /* القائمة: رأس المجموعة كان يلتصق بآخر بطاقة قبله (المسافة بين الصفوف padding علوي فقط في .pv-r).
     الآن لكل رأس مجموعة مسافة علوية داخل نفس العنصر المقاس (pv-i = flow-root) فلا يتغيّر حساب الارتفاعات ولا تتحرك القائمة. */
  html body .list .pv-i:not(:has(.pv-r)){padding-top:var(--sp-3)}
  html body .list .pv-pad0+.pv-i:not(:has(.pv-r)){padding-top:0}

  /* ===== لا حركة يمين/يسار: الصفحة بعرض الشاشة تماماً =====
     iOS يتجاهل overflow:hidden/clip على html وbody عند السحب باللمس، لذلك: touch-action يمنع السحب الأفقي للصفحة نفسها
     (المناطق التي تتمرّر أفقياً عمداً — صف الأيقونات، الجداول — هي scroll containers فتحتفظ بسحبها)، وm-fit.js يعيد scrollX إلى 0 كشبكة أمان. */
  html{overflow-x:hidden;width:100%;max-width:100%}
  html body{overflow-x:clip;width:100%;max-width:100%;min-width:0;position:relative;touch-action:pan-y pinch-zoom}
  html body header.top,html body main,html body #app,html body .list,html body .lf-top,html body .pv-host,html body .pv-bar{max-width:100%;min-width:0;box-sizing:border-box}
  html body header.top{width:100%;left:0;right:0}
  html body main{width:100%;overflow-x:clip}
  html body main img,html body main svg,html body main video,html body main canvas{max-width:100%}
  /* البطاقات والمجموعات لا تتجاوز عرض العمود، والنص الطويل يلتف بدل أن يوسّع الصفحة */
  html body .list .lead,html body .list .lg,html body .list .pv-i,html body .list .pv-r{max-width:100%;min-width:0;box-sizing:border-box}
  html body .lead.lx .lx-head,html body .lead.lx .lx-top,html body .lead.lx .l2,html body .lead.lx .lx-meta,html body .lead.lx .lx-acts{min-width:0;max-width:100%}
  html body .lead.lx .lx-name,html body .lead.lx .l2,html body .lead.lx .lx-sub{overflow-wrap:anywhere}
  /* صف الأيقونات يتمرّر أفقياً داخل نفسه فقط */
  html body header.top nav.nv-grp{touch-action:pan-x pan-y;max-width:100%}
  /* القوائم المنبثقة تبقى داخل الشاشة */
  html body .lf-mo-pop{max-width:calc(100vw - 24px)}
  html body .rf-menu{max-width:calc(100vw - 16px)}
}

/* ===== الماتشز على الموبايل/التابلت (<1024px) =====
   السبب: m-lead-card.css يخفي `.lead.lx .lx-mt` عالمياً (لأن نفس الاسم يُستخدم لسطر "assigned/matches" داخل رأس البطاقة)،
   ولا يُظهر `.lx-panel>.lx-mt` (حاوية الماتشز في اللوحة المفتوحة) إلا ملفات الديسكتوب (>=1024px) → السهم يفتح لوحة بلا ماتشز.
   هنا نُظهرها للموبايل، ونضع الماتشز والخيارات (Send / More / اختيار الوحدات) أول اللوحة. */
@media(max-width:1023px){
  html body .lead.lx.open .lx-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 12px 12px;min-width:0;max-width:100%;box-sizing:border-box}
  html body .lead.lx .lx-panel>.lx-mt{display:block;order:-1;min-width:0;width:100%;max-width:100%;padding:0;border:0;background:none}
  html body .lead.lx .lx-panel>:not(.lx-mt){order:1;min-width:0}
  html body .lead.lx .lx-mrows{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:100%;min-width:0}
  html body .lead.lx .lx-mrows>*{min-width:0;max-width:100%;box-sizing:border-box}
  html body .lead.lx .lx-mrows>.bm-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:700}
  html body .lead.lx .lx-mrows .bm-r{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--ln,var(--c-n200));border-radius:12px;background:var(--bg-surface,var(--c-white))}
  html body .lead.lx .lx-mrows .bm-r.on{border-color:var(--c-blue);background:var(--c-blue-soft)}
  html body .lead.lx .lx-mrows .bm-b{flex:1 1 auto;min-width:0}
  html body .lead.lx .lx-mrows .bm-ck{flex:none;width:32px;height:32px}
  html body .lead.lx .lx-mrows .bm-l1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
  html body .lead.lx .lx-mrows .bm-l3{display:flex;flex-wrap:wrap;gap:2px 8px;min-width:0;overflow-wrap:anywhere}
  /* أزرار الخيارات: صفّ واحد قابل للالتفاف، لمس مريح 44px */
  html body .lead.lx .lx-mrows>.bm-f{display:flex;flex-wrap:wrap;gap:8px}
  html body .lead.lx .lx-mrows>.bm-f .btn{flex:1 1 140px;min-height:44px;white-space:normal}
  html body .lead.lx .lx-mrows .lm-sk{display:block;height:64px;border-radius:12px;background:linear-gradient(90deg,var(--bg-tint) 25%,var(--bg-tint-2,var(--bg-tint)) 50%,var(--bg-tint) 75%);background-size:200% 100%}
  html body .lead.lx .lx-mrows>.lm-empty{padding:8px 2px;color:var(--tx-muted)}
}

/* ===== L98 — شكل الهيدر والأيقونات على الموبايل ===== */
@media(max-width:899px){
  /* زر الرجوع: سهم واحد ثابت. كان يُحرَّك دائماً (سهم + "شبح" شيفرون) فيظهر «‹‹» كأنه خلل */
  html body header.top .bk .bk-g{display:none;animation:none}
  html body header.top .bk .bk-a{animation:none;opacity:1}
  html body header.top .bk svg{width:18px;height:18px}
  html body header.top .bk.idle{opacity:.55}

  /* الهيدر أقصر قليلاً: صفّان محكمان بلا فراغ زائد */
  :root{--shell-h:92px}
  html body header.top .brand{height:50px;min-width:0}
  html body header.top nav.nv-grp{height:40px;min-height:40px;padding-top:2px;padding-bottom:2px;align-items:center}
  html body header.top img.lg-b{max-width:100%;height:auto;max-height:28px;object-fit:contain}

  /* صف التنقّل قليل العناصر (موظف: 2–3 صفحات) يملأ العرض كاملاً بأسماء ظاهرة بدل ترك فراغ على الجانبين */
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4))){gap:8px;padding-inline:12px}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button{flex:1 1 0;min-width:0;height:34px;justify-content:center;gap:7px;padding:0 10px}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button:first-child{margin-left:0}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button:last-child{margin-right:0}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button .nv-l{max-width:none;opacity:1;font-size:var(--fs-sm)}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button.on{padding:0 10px 0 3px}
  html body header.top nav.nv-grp:not(:has(>button:nth-child(4)))>button.on .nv-l{font-size:var(--fs-sm)}

  /* بداية المحتوى: مسافة صغيرة تحت الهيدر بدل التصاق شريط البحث به */
  html html body main:has(.lf-top){padding-top:calc(var(--hdr-total) + var(--sp-2))}
}
/* شاشات ضيقة (≤400px): أزرار وشعار أصغر حتى لا يلتصق الشعار بالأزرار */
@media(max-width:400px){
  html body header.top{gap:5px;padding-inline:8px}
  html body header.top>.bk,html body header.top>.bh-i,html body header.top>.hd-search,html body header.top>.notif-bell{width:32px;min-width:32px;height:32px}
  html body header.top img.lg-b{max-height:24px}
}
@media(max-width:340px){
  html body header.top{gap:3px;padding-inline:6px}
  html body header.top>.bk,html body header.top>.bh-i,html body header.top>.hd-search,html body header.top>.notif-bell{width:30px;min-width:30px;height:30px}
  html body header.top img.lg-b{max-height:20px}
}

/* ===== L99 — اختيار الشهر (Nov-26) كان يعلو أزرار الهيدر، وأيقونة "لم يُتصل به" ===== */
@media(max-width:899px){
  /* السبب: .lf-mo-wrap (z-index:40) يأتي بعد الهيدر (z-index:40) في الصفحة فيرتسم فوقه عند مرور شريط البحث تحت الهيدر.
     الهيدر الآن أعلى طبقة من محتوى الصفحة (ويبقى أدنى من مؤشر السحب للتحديث z-index:60 والنوافذ) */
  html body header.top,html body header.top.sk-hide{z-index:55}
  html body .lf-top .lf-mo-wrap{z-index:5}
  html body .lf-top{z-index:auto}
  /* أيقونات حالة الاتصال: دائرة أوضح ولمسة أكبر */
  html body .lead.lx .lb-i{width:28px;height:28px;border-width:1.5px}
  html body .lead.lx .lb-i svg{width:16px;height:16px}
  html body .lead.lx .lb-none{background:var(--c-danger-soft,rgba(192,40,63,.12))}
}

/* ===== L102 — سطر الإرشاد في الماتش ("inside the budget range · vacant now") بنفس حجم شارات ✓ الخضراء، بلون كحلي هادئ ===== */
@media(max-width:1023px){
  html body .lead.lx .lx-mrows .bm-l3 .bm-gd{flex:1 1 100%;min-width:0;font:600 var(--fs-xs) 'Source Sans 3',sans-serif;line-height:1.35;white-space:normal;overflow-wrap:anywhere;color:color-mix(in srgb,var(--c-starlight,#1b2f4f) 68%,var(--c-white,#fff))}
  html body .lead.lx .lx-mrows .bm-l3{gap:3px 8px}
}