/**
 * mobile.css — تحسينات CSS عالميّة للموبايل
 * v5.5.166
 */

/* ── safe-area لـ iPhone notch ────────────────── */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Touch targets ──────────────────────────── */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;  /* إزالة تأخير 300ms في iOS */
}

/* ── Scrolling ──────────────────────────────── */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* ── Input zoom prevention ─────────────────── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: max(16px, 1em);  /* يمنع zoom في iOS */
  }
}

/* ── Pull-to-refresh prevention ────────────── */
body {
  overscroll-behavior-y: none;
}

/* ── Prevent text selection on tap ─────────── */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Active states for touch ─────────────── */
.touch-active:active {
  opacity: 0.75;
  transform: scale(0.97);
  transition: transform 0.1s, opacity 0.1s;
}

/* ── Bottom nav safe area ──────────────────── */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Swipe indicator ───────────────────────── */
.swipe-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}

/* ── Full-screen for POS ────────────────────── */
@media (display-mode: standalone) {
  .hide-in-pwa { display: none !important; }
  .pwa-only    { display: block !important; }
}

/* ── Responsive POS grid ────────────────────── */
@media (max-width: 767px) {
  .pos-grid {
    grid-template-columns: 1fr !important;
  }
  .pos-sidebar {
    display: none !important;
  }
  .pos-main {
    padding: 8px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pos-grid {
    grid-template-columns: 1fr 300px !important;
  }
}

/* ── KDS & Waiter tablet ─────────────────────── */
@media (max-width: 1024px) {
  .kds-card {
    min-height: 120px;
    font-size: 15px;
  }
  .waiter-table-btn {
    min-height: 80px;
    font-size: 15px;
  }
}

/* ── Print styles ──────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: white !important; }
}

/* ════════════════════════════════════════════════════════════════
   ⭐ v5.14.57 — طبقة استجابة شاملة (responsive overhaul pass)
   تعالج: الاقتطاع الأفقيّ، التخطيطات الجامدة، النوافذ، الجداول، اللوحيّ
   ملاحظة: تستخدم !important لتجاوز الأنماط المضمّنة (inline) في التطبيق
   ════════════════════════════════════════════════════════════════ */

/* — منع أيّ تجاوز أفقيّ (سبب اختفاء أجزاء الشاشة) — */
html, body, #root, .rn-app-content {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }
/* السماح بكسر الكلمات الطويلة بدل دفع التخطيط */
p, span, h1, h2, h3, h4, div, td, th, label { overflow-wrap: anywhere; word-break: break-word; }

/* — الجداول: تمرير أفقيّ بدل الاقتطاع — */
@media (max-width: 1024px) {
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ── الجوّال (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* كلّ الشبكات عمودًا واحدًا (يحلّ الأعمدة الجامدة المتجاوزة) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* الحاويات ذات العرض الجامد الكبير تصبح مرنة */
  [style*="min-width: 7"], [style*="min-width: 8"], [style*="min-width: 9"],
  [style*="min-width:7"], [style*="min-width:8"], [style*="min-width:9"],
  [style*="min-width: 1000"], [style*="min-width: 1100"], [style*="min-width: 1200"] {
    min-width: 0 !important;
  }
  [style*="width: 300px"], [style*="width: 320px"], [style*="width: 360px"],
  [style*="width: 400px"], [style*="width: 420px"], [style*="width: 480px"] {
    width: 100% !important; max-width: 100% !important;
  }

  /* النوافذ المنبثقة/الحوارات: عرض كامل تقريبًا */
  [style*="position: fixed"][style*="max-width"],
  [role="dialog"], .modal, .dialog {
    max-width: 96vw !important;
  }

  /* تقليل الحشو الكبير */
  .rn-app-content { padding-left: 0 !important; padding-right: 0 !important; }

  /* صفوف flex أفقيّة تلتفّ بدل التجاوز */
  [style*="display: flex"]:not([style*="column"]) { flex-wrap: wrap; }

  /* أزرار/مدخلات بحجم لمس مناسب */
  button, [role="button"], input, select { min-height: 40px; }
}

/* ── اللوحيّ (641px – 1024px) — مثل 10 إنش ───────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* الشبكات ذات 3+ أعمدة جامدة → عمودان */
  [style*="grid-template-columns"][style*="repeat(3"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="min-width: 1000"], [style*="min-width: 1100"], [style*="min-width: 1200"],
  [style*="min-width: 1300"], [style*="min-width: 1400"] { min-width: 0 !important; }
  /* عناصر العرض الثابت الكبيرة تصبح مرنة */
  [style*="width: 480px"], [style*="width: 520px"], [style*="width: 600px"] {
    width: 100% !important; max-width: 100% !important;
  }
}

/* ── أفقيّ على الجوّال: ارتفاعات 100vh لا تخنق المحتوى ──────── */
@media (max-height: 480px) and (orientation: landscape) {
  [style*="height: 100vh"], [style*="min-height: 100vh"] { height: auto !important; min-height: 100vh; }
}