/* ═══════════════════════════════════════════════════════════════════
   Primix OS — Mobile Enhancement v3 (FINAL)
   يستهدف #pmx-sb (القائمة الفعلية) و .os-ai-panel (لوحة AI)
   ═══════════════════════════════════════════════════════════════════ */

/* ════ Safe areas للـ iPhone notch ════ */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   🔑 THE KEY FIX: على الجوال، لا margin-right من sidebar
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body {
    margin-inline-end: 0 !important;
  }

  /* القائمة الجانبية #pmx-sb — drawer من جهة الـ inline-start (يمين في RTL، يسار في LTR) */
  #pmx-sb {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    bottom: 0 !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9998 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[dir="rtl"] #pmx-sb {
    transform: translateX(100%) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5) !important;
  }
  html[dir="ltr"] #pmx-sb {
    transform: translateX(-100%) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5) !important;
  }

  /* مفتوحة */
  body #pmx-sb:not(.collapsed),
  #pmx-sb.pmx-mobile-open,
  body.pmx-sb-mobile-open #pmx-sb {
    transform: translateX(0) !important;
  }

  /* مقفولة */
  html[dir="rtl"] #pmx-sb.collapsed {
    transform: translateX(100%) !important;
  }
  html[dir="ltr"] #pmx-sb.collapsed {
    transform: translateX(-100%) !important;
  }

  /* os-ai-panel (لوحة AI) - نخليها tucked في الزاوية */
  .os-ai-panel {
    position: fixed !important;
    bottom: 70px !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    z-index: 100 !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
  }

  .os-ai-panel:not(.collapsed) {
    width: calc(100vw - 20px) !important;
    height: 70vh !important;
    border-radius: 16px !important;
    bottom: 80px !important;
  }

  /* المحتوى الرئيسي بكامل العرض */
  .os-main {
    padding: 12px !important;
    padding-top: calc(env(safe-area-inset-top, 0) + 70px) !important;
    max-width: 100% !important;
  }

  /* KPI grid — عمودين بدل 4 */
  .os-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .os-kpi {
    padding: 14px !important;
  }

  .os-kpi-val {
    font-size: 20px !important;
  }

  /* Main grid (cards) — عمود واحد */
  .os-grid,
  .os-grid.cols-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Topbar — ترتيب عمودي */
  .os-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  .os-greeting-name {
    font-size: 20px !important;
  }

  .os-health {
    width: 100% !important;
    min-width: auto !important;
  }

  /* Cards padding أقل */
  .os-card {
    padding: 14px !important;
  }

  /* جداول قابلة للتمرير */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* أزرار أكبر */
  button:not(.os-chip):not(.pmx-sb-sec-btn),
  .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* حقول الإدخال — منع iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* منع horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ════ Hamburger toggle button ════ */
@media (max-width: 900px) {
  .pmx-mobile-menu-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0) + 12px) !important;
    left: 12px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: white !important;
    border: none !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
    padding: 0 !important;
  }

  .pmx-mobile-menu-toggle::before {
    content: "☰" !important;
  }

  .pmx-mobile-menu-toggle.active {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  }

  .pmx-mobile-menu-toggle.active::before {
    content: "✕" !important;
  }
}

@media (min-width: 901px) {
  .pmx-mobile-menu-toggle { display: none !important; }
}

/* ════ Overlay ════ */
@media (max-width: 900px) {
  .pmx-mobile-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9997 !important;
  }

  body.pmx-sb-mobile-open .pmx-mobile-backdrop {
    display: block !important;
  }
}

/* ════ Desktop: خلي الأمور كما هي ════ */
@media (min-width: 901px) {
  /* Only apply sidebar spacing when #pmx-sb exists */
body:has(#pmx-sb) { margin-inline-start: 240px; }
  #pmx-sb { transform: none !important; }
  .pmx-mobile-backdrop { display: none !important; }
}


/* === PMX_TOUCH_TARGETS_FIX_V3 === */
@media (max-width:1023px){
  button,[role="button"],a,.btn,.pmx-btn,.nav-link,.tab,
  [onclick],[data-action],.chip,.badge-clickable,
  input[type="submit"],input[type="button"]{
    font-size:16px!important;
    min-height:48px!important;min-width:48px!important;
  }
  input,select,textarea{
    font-size:16px!important;
    min-height:44px!important;
  }
}