/* ============================================================
   سي ماش — طبقة الاستجابة الموحّدة (Responsive Layer)
   تُحمّل في كل الصفحات. آمنة: تضيف قواعد للهاتف/اللوحي فقط
   ولا تُغيّر تصميم الشاشات الكبيرة (> 1024px).
   الإصدار: 1.1
   نقاط التوقّف:
     ≤1024px  لوحي أفقي   : جداول قابلة للتمرير + حاويات مرنة
     ≤900px   لوحي/هاتف   : أهداف لمس + شريط سفلي + نوافذ ممتلئة
     ≤600px   هاتف        : كل الشبكات عمود واحد + التفاف + حقول ممتلئة
     ≤400px   هاتف صغير   : حشو أضيق
   ============================================================ */

/* --- أساسيات آمنة على كل الأحجام --- */
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video,canvas,iframe{ max-width:100%; }
img,video{ height:auto; }

#smBottomNav{ display:none; }
.sm-drawer-btn{ display:none; }

/* ============================================================
   ≤ 1024px — اللوحيّات الأفقية والشاشات المتوسطة
   ============================================================ */
@media (max-width: 1024px){
  /* الجداول العريضة: تمرير أفقي سلس بدل كسر الصفحة */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .container,.wrap,.wrapper,.card-wide{ max-width:100% !important; }
}

/* ============================================================
   ≤ 900px — يظهر الشريط السفلي وتكبر أهداف اللمس
   (يتزامن مع اختفاء القائمة الجانبية في لوحة التحكم)
   ============================================================ */
@media (max-width: 900px){
  /* حقول تمنع تكبير iOS التلقائي + أهداف لمس مريحة */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size:16px; min-height:44px; }
  button, .btn, a.btn, [role="button"]{ min-height:44px; }

  /* حشو أقل للحاويات */
  .content,.container,.wrap,.wrapper,.page,.panel{
    padding-left:14px !important; padding-right:14px !important;
  }

  /* النوافذ المنبثقة تقارب ملء الشاشة */
  .modal,.popup,.dialog,.pp-modal,.sheet,[class*="modal"]{ max-width:96vw !important; }
  .modal-body,.popup-body{ max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* مساحة أسفل الصفحة حتى لا يغطّي الشريط السفلي المحتوى */
  body.sm-has-bottomnav{ padding-bottom:66px; }
  body.sm-has-bottomnav .content{ padding-bottom:76px; }

  /* الشريط السفلي */
  body.sm-has-bottomnav #smBottomNav{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:2147482000;
    background:#0f2233; border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -6px 22px rgba(0,0,0,.28);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    justify-content:space-around; align-items:stretch;
    font-family:'Tajawal',sans-serif;
  }
  #smBottomNav .sm-bn{
    flex:1; min-width:0; background:none; border:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:#9fb3c8; font-size:10.5px; font-weight:800; padding:4px 2px; text-decoration:none;
  }
  #smBottomNav .sm-bn .sm-bn-ic{
    width:22px; height:22px; display:grid; place-items:center; font-size:18px; line-height:1;
  }
  #smBottomNav .sm-bn .sm-bn-ic svg{ stroke:currentColor; }
  #smBottomNav .sm-bn.active{ color:#2dd4bf; }
  #smBottomNav .sm-bn:active{ transform:scale(.94); }
}

/* ============================================================
   ≤ 600px — الهاتف: كل الشبكات عمود واحد
   ============================================================ */
@media (max-width: 600px){
  /* الشبكات المضمّنة (inline grid) → عمود واحد */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .grid,.grid-2,.grid-3,.grid-4,.cards,.cards-grid,.stats,.stat-grid,.kpi,.kpis,.pp-stats,.pp-g2,.pp-g3{
    grid-template-columns:1fr !important;
  }

  /* صفوف flex → تلتفّ بدل الخروج عن الشاشة */
  [style*="display:flex"],[style*="display: flex"]{ flex-wrap:wrap; }
  /* استثناء ما صُمّم ليبقى صفاً واحداً */
  [style*="white-space:nowrap"],[style*="flex-wrap:nowrap"],
  .no-wrap,.keep-row,.numpad,.num-row,.qty,.stepper,.tbl-tot{ flex-wrap:nowrap !important; }

  /* حقول النماذج تملأ العرض */
  form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not(.sm-keep),
  form select:not(.sm-keep), form textarea:not(.sm-keep){
    width:100% !important; box-sizing:border-box;
  }

  h1{ font-size:22px } h2{ font-size:19px } h3{ font-size:17px }
  table th, table td{ padding:8px 9px !important; font-size:13px; }

  .content,.container,.wrap,.wrapper,.page,.panel{
    padding-left:12px !important; padding-right:12px !important;
  }
}

/* ============================================================
   ≤ 400px — هاتف صغير جداً
   ============================================================ */
@media (max-width: 400px){
  .content,.container,.wrap,.wrapper,.page,.panel{
    padding-left:9px !important; padding-right:9px !important;
  }
  table th, table td{ padding:6px 7px !important; font-size:12px; }
  #smBottomNav .sm-bn{ font-size:9.5px; }
}

@media print{
  #smBottomNav,.sm-drawer-btn{ display:none !important; }
  body.sm-has-bottomnav{ padding-bottom:0 !important; }
}