/* ============================================================
   Attendly — base.css
   الهوية اللونية: أزرق ملكي + سماوي · متغيّرات، تهيئة، عناصر أساسية
   ============================================================ */

:root{
  /* --- العلامة: أزرق ملكي --- */
  --brand-950:#0b1533;
  --brand-900:#15296b;
  --brand-800:#1a3489;
  --brand-700:#1d4ed8;
  --brand-600:#2563eb;
  --brand-500:#3b82f6;
  --brand-400:#60a5fa;
  --brand-300:#93c5fd;
  --brand-200:#bfdbfe;
  --brand-100:#dbeafe;
  --brand-50:#eff6ff;

  /* --- اللمسة: سماوي --- */
  --cyan-700:#0e7490;
  --cyan-600:#0891b2;
  --cyan-500:#06b6d4;
  --cyan-400:#22d3ee;
  --cyan-300:#67e8f9;
  --cyan-100:#cffafe;

  /* --- ألوان الحالات --- */
  --green-700:#047857;
  --green-600:#059669;
  --green-500:#10b981;
  --green-100:#d1fae5;

  --gold-700:#b45309;
  --gold-600:#d97706;
  --gold-500:#f59e0b;
  --gold-400:#fbbf24;
  --gold-100:#fef3c7;

  --rose-700:#b91c1c;
  --rose-600:#dc2626;
  --rose-500:#ef4444;
  --rose-100:#fee2e2;

  --violet-600:#7c3aed;
  --violet-500:#8b5cf6;

  /* توافق مع التسميات القديمة */
  --blue-600:var(--brand-600);
  --blue-500:var(--brand-500);
  --blue-100:var(--brand-100);

  /* --- الواجهة (الوضع الفاتح) --- */
  --bg:#eef2f8;
  --bg-soft:#e2e8f2;
  --surface:#ffffff;
  --surface-2:#f5f8fd;
  --line:#dbe3ef;
  --line-strong:#bcc9dd;
  --text:#0b1729;
  --text-soft:#41546f;
  --text-mute:#6b7f99;

  --shadow-sm:0 1px 2px rgba(15,35,75,.07), 0 1px 3px rgba(15,35,75,.06);
  --shadow:0 6px 18px rgba(15,35,75,.10);
  --shadow-lg:0 22px 50px rgba(15,35,75,.18);
  --shadow-brand:0 10px 26px rgba(29,78,216,.30);
  --ring:rgba(59,130,246,.38);

  --grad-brand:linear-gradient(135deg,#2563eb,#1d4ed8 55%,#1a3489);
  --grad-cyan:linear-gradient(135deg,#22d3ee,#0891b2);
  --grad-hero:linear-gradient(160deg,#1a3489 0%,#15296b 55%,#0b1533 100%);

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sidebar-w:268px;
  --header-h:66px;
  --ff:"Tajawal","Inter","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;
  --transition:180ms cubic-bezier(.4,0,.2,1);
}

html[lang="fr"], html[lang="en"]{
  --ff:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}

[data-theme="dark"]{
  --bg:#080f1f;
  --bg-soft:#0e1830;
  --surface:#111c33;
  --surface-2:#16233e;
  --line:#22314f;
  --line-strong:#33456a;
  --text:#e8eefb;
  --text-soft:#aebdd6;
  --text-mute:#8296b4;
  --brand-100:#17275a;
  --brand-50:#131f45;
  --gold-100:#3b2a07;
  --rose-100:#3d1414;
  --green-100:#062f22;
  --cyan-100:#0a3444;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow:0 8px 22px rgba(0,0,0,.5);
  --shadow-lg:0 26px 55px rgba(0,0,0,.6);
  --shadow-brand:0 10px 26px rgba(37,99,235,.4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition),color var(--transition);

  /* iOS كيكبّر النصوص وحدو منين الهاتف كيتقلب أفقياً — والنتيجة
     تخطيط مكسّر. هادي كتوقفو وكتخلي التحكم فالـCSS. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;

  /* Android كيلوّح مربع رمادي فوق كل حاجة كتنضغط. كنحيّدوه
     حيت عندنا :active و:focus-visible ديالنا. */
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.35;letter-spacing:-.2px}
p{margin:0}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
/* ⚠ Firefox ما كيعرفش `::-webkit-scrollbar` إطلاقاً — كيتجاهلها
   بلا خطأ، فالمستخدم كيشوف شريط تمرير النظام الخام وسط واجهة
   مصمّمة. و`scrollbar-width`/`scrollbar-color` هي المعيار اللي
   كيفهمو Firefox (64+) وChromium (121+) وSafari (18.2+).
   الاثنين معاً: القديم كياخد -webkit-، والحديث كياخد المعيار. */
html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}
::selection{background:var(--brand-200);color:var(--brand-900)}

/* ---------- أدوات ---------- */
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.center{display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}
.mute{color:var(--text-mute)}
.soft{color:var(--text-soft)}
.tiny{font-size:12.5px}
.small{font-size:13.5px}
.bold{font-weight:800}
/* الأرقام والتواريخ تُعرض بترتيب لاتيني صحيح داخل النصّ العربي،
   مع بقاء المحاذاة تابعة لاتجاه الصفحة (plaintext يكتشف اتجاه المحتوى وحده) */
.num{font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
.text-c{text-align:center}
.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:20px}.mt-5{margin-top:28px}
.gap-2{gap:8px}.gap-3{gap:14px}

/* ---------- الأزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;
  background:var(--surface-2);color:var(--text);
  transition:var(--transition);white-space:nowrap;
}
/* ⚠ محصور فالأجهزة اللي عندها مؤشر حقيقي.
   فالهاتف، :hover كيتعلّق بعد النقر — الزر كيبقى مرفوع ومضوي حتى
   للنقرة الجاية، وكيبان وكأنه مختار. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);text-decoration:none}
}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{box-shadow:0 14px 30px rgba(29,78,216,.42)}
.btn-cyan{background:var(--grad-cyan);color:#04262f;box-shadow:0 8px 20px rgba(8,145,178,.32)}
.btn-gold{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:#3a2400;box-shadow:0 8px 20px rgba(217,119,6,.3)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface-2);color:var(--brand-600);border-color:var(--brand-300)}
.btn-white{background:#fff;color:var(--brand-800)}
.btn-danger{background:var(--rose-600);color:#fff;box-shadow:0 8px 20px rgba(220,38,38,.28)}
.btn-sm{padding:6px 13px;font-size:13px}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:var(--transition);color:var(--text-soft);flex:none;
}
.icon-btn:hover{background:var(--brand-50);color:var(--brand-600);border-color:var(--brand-300)}

/* ---------- الشاشات اللمسية ---------- */
/* الحد الأدنى اللي كتوصي بيه آبل وغوغل هو 44px. الأزرار الصغيرة
   (34–38px) كانت كتخلي المستخدم يضغط جوج ثلاث مرات باش يصيب —
   وخصوصاً زر إظهار كلمة السر وزر الخروج، اللي كيتنقرو كل نهار. */
@media (pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .btn{padding:12px 20px}
  .btn-sm{padding:9px 15px;font-size:13.5px}
  .btn-lg{padding:15px 26px}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}

  /* ⚠ هادو بانو فالفحص وما كانوش مغطيين:
     .chip  = فلاتر الأقسام وشارات الأيام — 37px، كيتنقرو بزاف
     .lang-btn = مبدّل اللغة — 32px، وهو من أول ما كيلمس المستخدم */
  .chip{padding:11px 16px}
  .lang-btn{padding:11px 14px}
}

/* ---------- الحقول ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > label{font-size:13px;font-weight:700;color:var(--text-soft)}
.input,select.input,textarea.input{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:var(--r);background:var(--surface);
  transition:var(--transition);font-size:14.5px;
}
/* ⚠ iOS Safari كيزوّم الصفحة كاملة منين المستخدم يضغط على خانة خطها
   أصغر من 16px — الصفحة كتكبر وكتزيح، وخاصو يزوّم بيدو باش يرجع.
   16px بالضبط هي العتبة اللي كتوقف هاد السلوك.
   كنطبقوها غير على الشاشات اللمسية باش الكثافة فالحاسوب تبقى كما هي. */
@media (pointer:coarse){
  .input,select.input,textarea.input{font-size:16px}
}
.input:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--ring);outline:none}
.input::placeholder{color:var(--text-mute)}
textarea.input{resize:vertical;min-height:88px;line-height:1.6}
select.input{cursor:pointer}
input[type="checkbox"]{accent-color:var(--brand-600);width:16px;height:16px;cursor:pointer}
input[type="radio"]{accent-color:var(--brand-600)}

/* ---------- البطاقات ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
/* ⚠ flex-wrap إجباري: رأس البطاقة فيه العنوان + صف أزرار.
   صفحة التلاميذ فيها 4 أزرار (إضافة · استيراد Excel · إضافة سريعة ·
   طباعة البطاقات) — على شاشة 360px كانو كيوصلو 900px والصفحة كتمشى
   أفقياً. الأزرار عندها white-space:nowrap إذن ما كتقدرش تنكسر
   داخلياً؛ الحل الوحيد هو أنها تنزل لسطر تحت. */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head > .row{flex-wrap:wrap}
.card-title{font-size:16.5px;font-weight:800;display:flex;align-items:center;gap:9px}
.card-title .dot{width:9px;height:9px;border-radius:50%;background:var(--brand-500);flex:none;
  box-shadow:0 0 0 4px var(--brand-100)}

/* ---------- الشارات ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:700;line-height:1.7;
}
.badge-present{background:var(--green-100);color:var(--green-700)}
.badge-late{background:var(--gold-100);color:var(--gold-700)}
.badge-absent{background:var(--rose-100);color:var(--rose-700)}
.badge-excused{background:var(--cyan-100);color:var(--cyan-700)}
.badge-neutral{background:var(--bg-soft);color:var(--text-soft)}
.badge-brand{background:var(--brand-100);color:var(--brand-700)}
[data-theme="dark"] .badge-present{color:var(--green-500)}
[data-theme="dark"] .badge-late{color:var(--gold-400)}
[data-theme="dark"] .badge-absent{color:#fca5a5}
[data-theme="dark"] .badge-excused{color:var(--cyan-400)}
[data-theme="dark"] .badge-brand{color:var(--brand-300)}

/* ---------- الجداول ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
thead th{
  background:var(--surface-2);text-align:start;padding:12px 14px;font-size:12.5px;
  font-weight:800;color:var(--text-soft);white-space:nowrap;border-bottom:1px solid var(--line);
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background 120ms}
tbody tr:hover{background:var(--surface-2)}
.t-empty{padding:38px 14px;text-align:center;color:var(--text-mute)}

/* ---------- الصور الرمزية ---------- */
.avatar{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;flex:none;letter-spacing:-.5px;
  background:var(--grad-brand);
}
.avatar.sm{width:32px;height:32px;font-size:12px}
.avatar.lg{width:58px;height:58px;font-size:19px}
.avatar.g1{background:linear-gradient(135deg,#f59e0b,#b45309)}
.avatar.g2{background:linear-gradient(135deg,#22d3ee,#0e7490)}
.avatar.g3{background:linear-gradient(135deg,#f43f5e,#9f1239)}
.avatar.g4{background:linear-gradient(135deg,#8b5cf6,#5b21b6)}
.avatar.g5{background:linear-gradient(135deg,#10b981,#047857)}

/* ============================================================
   شريط وضع العرض

   ⚠ المشكل اللي كيصلح: الشريط كان `position:sticky;top:0` بستايل
     مضمّن، والصفحة عندها **تلاتة** ديال العناصر كيتنازعو نفس
     البلاصة:

       .sidebar  → fixed; top:0
       .topbar   → sticky; top:0
       .net-bar  → sticky; top:0

     والشريط بـz-index:400 كيربح على الجميع وكيغطّيهم. النتيجة:
     شعار المنصة مقصوص، وعنوان الصفحة مخبّي تحت الشريط.

   الحل: الشريط `fixed` وخارج التدفّق، والتخطيط كامل كينزل
   بقدر ارتفاعه عبر `--demo-h`. ما كاين حتى تغطية.

   ⚠ الارتفاع كيتقاس بـJS (boot.js) ماشي مكتوب هنا: الشريط
     كيلتفّ على سطرين فالشاشات الصغيرة، وأي رقم ثابت كيغلط.
   ============================================================ */
.demo-bar{
  position:fixed;top:0;inset-inline:0;z-index:400;
  display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;justify-content:center;
  padding:5px 12px;
  /* ⚠ رفيع وهادي عمداً. جرّبنا برتقالي عريض: كيسرق النظر من
     المنتج نفسو. الرسالة خاصها تكون حاضرة، ماشي صارخة. */
  background:var(--brand-900);color:var(--brand-200);
  font:600 11.5px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.2px;text-align:center;
}
.demo-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-400);flex:none}
.demo-bar a{
  color:#fff;text-decoration:underline;opacity:.85;
  /* ⚠ الحشو ماشي زينة: بلاه الرابط كيولّي 24×17 بكسل — أصغر
     بزاف باش يتنقر بالإبهام. */
  padding:8px 10px;margin:-8px -4px;display:inline-block;
}
.demo-bar a:hover{opacity:1}

/* التخطيط كينزل بقدر الشريط — كل عنصر حسب طبيعته */
html.has-demo body{padding-top:var(--demo-h,0px)}

/* ============================================================
   شريط التثبيت

   ⚠ تحت وماشي فوق: الفوق فيه شريط وضع العرض، وشريط الشبكة،
     والرأس اللاصق. رابع فوق = صفحة كلها شرائط.

   ⚠ فوق التنبيهات بشوية (z-index 290 مقابل 300): تنبيه
     «تم الحفظ» خاصو يبقى يبان فوقو.
   ============================================================ */
/* ============================================================
   الزرّ الثابت للتثبيت

   ⚠ الشريط أسفلُ اقتراحٌ يمرّ مرّة ويُغلق إلى الأبد. وهذا هو
     المكان الدائم — لمن أغلقه، أو لمن لم يُطلق متصفّحه الحدث
     أصلاً (فايرفوكس لا يُطلقه إطلاقاً).

   ⚠ في الزاوية السفلى لا العليا: الأعلى مزدحم بشريط الوضع
     التجريبي وشريط الشبكة والرأس اللاصق. والأسفل هو مدى
     الإبهام على الهاتف — وهو الجهاز الذي يُثبَّت عليه فعلاً.

   ⚠ `inset-inline-start`: في العربية هذه الزاوية اليمنى، وفي
     الفرنسية اليسرى. الزرّ يتبع اتجاه القراءة بلا قاعدتين.
   ============================================================ */
.install-fab{
  position:fixed;z-index:285;
  inset-inline-start:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;
  /* ⚠ 48px الحدّ الأدنى لهدف اللمس. أقلّ منه يُخطئه الإبهام
     ويُحبط المستخدم مرّتين قبل أن ينجح. */
  min-height:48px;padding:0 18px 0 14px;
  border:1px solid var(--brand-700);border-radius:var(--r-pill);
  background:var(--grad-brand);color:#fff;
  font-family:inherit;font-size:14px;font-weight:700;
  box-shadow:var(--shadow-brand);cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition);
}
.install-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.install-fab:active{transform:translateY(0)}
.install-fab:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.install-fab .if-ic{display:grid;place-items:center;flex:none}
.install-fab[hidden]{display:none}

/* ⚠ الشاشات الضيّقة جدّاً: تبقى الأيقونة وتُطوى التسمية. زرّ
   بتسمية يزاحم المحتوى على 340px أسوأ من زرّ بلا تسمية —
   و`aria-label` يحمل المعنى لقارئ الشاشة على أيّة حال. */
@media(max-width:359px){
  .install-fab{padding:0;width:48px;justify-content:center}
  .install-fab .if-lab{display:none}
}

/* شريط التبويبات السفلي في التطبيق يشغل مدى الإبهام — نرفعه فوقه */
body.has-tabs .install-fab{bottom:calc(74px + env(safe-area-inset-bottom))}

/* ⚠⚠ الزرّ العائم يحجب ما تحته — دائماً، لا أحياناً. وأوّل ما
   حجبه هنا كان زرّ «تجربة التطبيق بحساب جاهز» أسفل صفحة
   الدخول: زرٌّ جديد يخنق زرّاً أضفناه بالأمس.

   فنُزيح المحتوى بمقدار الزرّ زائد هامشاً، بدل أن نترك آخر
   عنصر في كلّ صفحة يعيش تحته. والصنف يضعه install.js عند
   التركيب — فالصفحة لا تحجز فراغاً لزرّ لا يظهر (التطبيق
   المثبَّت مثلاً). */
body.has-install-fab .auth-main{
  padding-bottom:calc(38px + 66px + env(safe-area-inset-bottom));
}
body.has-install-fab .lp-footer{
  padding-bottom:calc(66px + env(safe-area-inset-bottom));
}

/* نافذة «لماذا تثبّته» */
.pwa-why{margin:0 0 18px;padding-inline-start:20px;display:grid;gap:8px}
.pwa-why li{font-size:14px;color:var(--text-soft);line-height:1.7}
.pwa-h{font-size:14px;font-weight:800;margin:0 0 8px}
.pwa-steps{
  margin:0;font-size:14px;line-height:1.8;color:var(--text-soft);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;
}

.install-bar{
  position:fixed;z-index:290;
  inset-inline:14px;bottom:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  max-width:520px;margin-inline:auto;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  animation:installIn .3s cubic-bezier(.2,1.1,.4,1) both;
}
@keyframes installIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.install-bar .ib-ic{
  width:40px;height:40px;flex:none;border-radius:12px;
  display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);
}
.install-bar .ib-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.install-bar .ib-txt b{font-size:13.5px;line-height:1.3}
.install-bar .ib-txt span{font-size:11.5px;color:var(--text-mute);line-height:1.4}
.install-bar .ib-x{
  width:32px;height:32px;flex:none;font-size:20px;line-height:1;
  color:var(--text-mute);
}
@media(max-width:420px){
  .install-bar{gap:9px;padding:10px 11px}
  .install-bar .ib-ic{width:34px;height:34px}
  .install-bar .ib-txt b{font-size:12.5px}
}

/* ============================================================
   وضع التطبيق المثبَّت

   ⚠ ما كاينش شريط عنوان ولا زر رجوع فالمتصفح — يعني أي شي
     كيتعتمد عليهم خاصو يتصلح هنا.
   ============================================================ */
@media (display-mode: standalone){
  /* ⚠ الهاتف عندو نتوء وشريط سفلي. بلا هاد الحشو، الرأس
     كيدخل تحت الساعة والأزرار السفلية تحت شريط النظام. */
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  html.has-demo body{
    padding-top:calc(var(--demo-h,0px) + env(safe-area-inset-top));
  }
  /* ⚠ سحب-للتحديث كيمشي مع تمرير الصفحة وكيعاود يحمّل التطبيق
     وسط تسجيل الحضور. فتطبيق مثبّت ما كاين علاش نخليوه. */
  html{overscroll-behavior-y:none}
  /* الشعار والعناوين ما خاصهومش يتحدّدو كنص — كيبان كعطب
     منين المستخدم يضغط شوية بزاف بالإبهام */
  .sidebar,.topbar,.nav-item{user-select:none;-webkit-user-select:none}
}

/* ============================================================
   صقل اللمس — آيفون بالخصوص

   ⚠ `touch-action:manipulation` يُلغي انتظار الـ300ms الذي كان
     Safari يقضيه بعد كلّ نقرة يتحسّس هل ستتبعها نقرة ثانية
     (تكبير بالنقر المزدوج). الفرق محسوس في كلّ زرّ: الواجهة
     تبدو «بطيئة» لا لشيء إلّا لهذا الانتظار. وهو يبقي التمرير
     والقرص للتكبير عاملين — يُلغي النقر المزدوج وحده.

   ⚠ `overscroll-behavior:contain` على المناطق التي تُمرَّر
     داخلياً: بلاه يصل التمرير إلى نهاية القائمة فيبدأ بجرّ
     الصفحة كلّها خلفه (سلسلة التمرير) — والمستخدم يظنّ أنّ
     الواجهة قفزت.
   ============================================================ */
.btn,.icon-btn,.nav-item,.tab-item,.chip,.lang-btn,.seg button,
.list-item button,a[href],label,summary,
input[type="checkbox"],input[type="radio"],select{
  touch-action:manipulation;
}

.nav,.modal-body,.table-wrap{overscroll-behavior:contain}

/* ⚠ التمرير بالقصور الذاتي داخل الأطر: بلا هذا يقف المحتوى
   جافّاً بمجرّد رفع الإصبع في نسخ iOS القديمة، ويبدو معطوباً
   إلى جانب بقيّة النظام. */
.table-wrap,.modal-body,.nav{-webkit-overflow-scrolling:touch}

/* ============================================================
   ⚠ آيفون والحقول داخل نافذة سفلية

   لوحة المفاتيح تصعد فتغطّي نصف الشاشة، وSafari لا يُقلّص
   المنظور بل يزيح الصفحة. الحقل الذي يكتب فيه المستخدم قد يقع
   تحتها. `scroll-margin` يجعل المتصفّح يُبقي مسافة فوق الحقل
   حين يُمرّر إليه تلقائياً.
   ============================================================ */
.input,select.input,textarea.input{scroll-margin-block:90px}