/* mobile.css — חווית-מובייל אחידה לכל עמודי המערכת (טלפון = כלי-עבודה ראשי).
   שמרני בכוונה: לא משנה layout של דסקטופ; מוסיף נוחות-מגע, בטיחות-רוחב, וניווט-אגודל. */

:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }

@media (max-width: 640px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }

  /* טבלאות רחבות → גלילה אופקית בתוך מיכל, לא דוחפות את העמוד */
  .tbl-wrap, .table-wrap, .doc-table-wrap,
  [class*="table-wrap"], [class*="tbl-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table { max-width: 100%; }

  /* כותרות עם הרבה כפתורים — יורדות שורה במקום לחתוך */
  header { flex-wrap: wrap !important; row-gap: 6px; }

  /* גריד של כרטיסים/שדות → עמודה אחת */
  .grid2, .grid3, .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* מודאלים תופסים כמעט מסך מלא + גלילה פנימית (לא נחתכים) */
  .modal {
    width: 96% !important; max-width: 96% !important;
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* תמונות/מדיה לא חורגות */
  img, canvas, svg, video { max-width: 100%; height: auto; }

  /* מניעת zoom לא-רצוי בפוקוס על אינפוט ב-iOS (גופן ≥16px) */
  input, select, textarea { font-size: 16px; }

  /* ===== נוחות-מגע (חדש) ===== */
  /* אזור-מגע מינימלי ~44px — קל ללחוץ עם אגודל בלי לפספס */
  button, .hbtn, .btn, a.btn, [role="button"],
  input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }
  /* שדות-טופס עם ריווח-פנימי נדיב יותר לאצבע */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 10px 12px; }

  /* גלילה חלקה בכל המסך */
  * { -webkit-tap-highlight-color: rgba(232,96,63,.12); }

  /* מרווח-תחתון לגוף כדי שהתוכן לא יסתתר מאחורי סרגל-הניווט התחתון */
  body { padding-bottom: calc(60px + var(--safe-b)) !important; }
}

/* ===== סרגל-ניווט תחתון (bottom-nav) — מוזרק ע"י mobilenav.js, מוצג רק בנייד ===== */
#appBottomNav { display: none; }
@media (max-width: 640px) {
  /* מקובע תמיד לתחתית ה-viewport. left/right:0 + transform:none מפורשות כדי
     שלא ייגרר/ייתקע באמצע גם אם עמוד-אב שינה מרווח/כיוון. */
  #appBottomNav {
    display: flex; position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    inset-inline: 0; width: 100%; margin: 0; transform: none !important;
    z-index: 9000;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e5e0d8);
    padding-bottom: var(--safe-b);
    box-shadow: 0 -2px 14px rgba(0,0,0,.07);
  }
  #appBottomNav a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; padding: 6px 1px; min-height: 54px;
    text-decoration: none; color: var(--muted, #7a7268);
    font-size: 10px; font-weight: 600; font-family: 'Heebo', sans-serif;
    white-space: nowrap; transition: color .12s;
  }
  #appBottomNav a .bn-ic { font-size: 20px; line-height: 1; }
  #appBottomNav a.active { color: var(--accent, #e8603f); }
  #appBottomNav a:active { background: var(--hover, rgba(0,0,0,.04)); }
  /* כפתור-חזרה צף של nav.js (בעמודים ללא header) — מעל הסרגל, לא עליו */
  #_navBack { bottom: calc(66px + var(--safe-b)) !important; }
}