/* ════════════════════════════════════════════════════════════
   optica-mobile.css — תצוגה בנייד
   ════════════════════════════════════════════════════════════
   🔴 אריאל (17/09): *"אני מנסה לגשת מהמובייל והכל לא נגיש ולא קריא.
   לא מחפש למכור — מחפש לראות, לבדוק ולהדריך עובדים."*

   המערכת נבנתה למסך רחב: ‎@media‎ הופיע פעם־פעמיים בכל קובץ, כלומר
   כמעט אפס התאמה. במקום לשכתב 42 מסכים — קובץ אחד משותף, בדיוק
   כמו ‎optica-a11y.css‎ שכבר מוזרק ל-37 מסכים.

   🔑 **הכל בתוך ‎@media (max-width:820px)‎** — המסך הרגיל לא משתנה
   באף פיקסל, ואין סיכון רגרסיה למי שעובד עכשיו בחנות.

   המטרה כאן היא **קריאוּת וניווט**, לא מכירה. הקופה נשארת למסך רחב:
   היא בנויה לשלושה פאנלים במקביל, ודחיסתה לנייד היא עבודה אחרת.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  /* ── מעטפת הפורטל: הסרגל הצדי הופך לרצועה עליונה ──
     בלי זה 188 פיקסלים נגרסים מרוחב מסך של 360, והתוכן נמחץ. */
  .sidebar {
    width: 100% !important;
    max-height: 52px;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    border-left: 0 !important;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    padding: 4px 6px;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar > * { flex: 0 0 auto; white-space: nowrap; }
  /* כותרות קיבוץ בסרגל מיותרות ברצועה אופקית וגוזלות רוחב */
  .sidebar .group-hdr, .sidebar .nav-group-title { display: none !important; }

  .main, .content, .frame-area { min-width: 0 !important; }
  body { overflow-x: hidden; }

  /* ── לשוניות: גלילה אופקית במקום שבירה לשלוש שורות ── */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: 0 0 auto !important; white-space: nowrap; }

  /* ── רשתות רב-עמודתיות → עמודה אחת ──
     טופס בן שתי עמודות על מסך צר הופך לשדות ברוחב 80px. */
  .info-grid, .g2, .g3, .inp-row, .form-grid, .grid-2, .grid-3,
  .cards, .stat-row, .kpi-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }

  /* ── טבלאות: גלילה אופקית בתוך המיכל, לא דחיסה ──
     טבלה דחוסה היא טבלה בלתי קריאה; עדיף לגלול. */
  .scroll, .table-wrap, .card, .section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: max-content; }

  /* ── חלונות: כמעט מסך מלא ── */
  .modal, .cust-modal, .modal-content, .dlg {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }

  /* ── קריאוּת: המערכת משתמשת ב-9–11px, קטן מדי בנייד ── */
  body, .card, .section, td, th, .cust-detail, .order-desc { font-size: 13px; }
  .sub, .hint, small, .muted { font-size: 12px !important; }
  h1 { font-size: 19px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }

  /* ── שטח מגע: אצבע אינה עכבר ── */
  button, .btn, .tab, .nav-item, select, input[type="checkbox"] {
    min-height: 38px;
  }
  input, select, textarea {
    font-size: 16px !important;  /* מתחת ל-16 ספארי מזייף זום בכל מיקוד */
    max-width: 100%;
  }

  /* ── שורות רשימה: מלבן אחד במקום שורה שנגררת החוצה ── */
  .order-row, .branch-row, .family-item, .sr-item, .cust-card {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── סרגלי פעולה: לא לגלוש מהמסך ── */
  .bar, .toolbar, .actions, .edit-foot, .card-h {
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  /* ── עיטורי רקע כבדים: מיותרים בנייד וגוזלים סוללה ── */
  .bg-grid, .bg-glow { display: none !important; }

  /* ── הודעות צפות: לא לחסום חצי מסך ── */
  .toast, .notif-toast { max-width: 92vw !important; }
}

/* מסך צר במיוחד (טלפון בתצוגה לאורך) */
@media (max-width: 480px) {
  .sidebar { max-height: 46px; }
  .top-bar, .topbar { padding: 6px 10px !important; }
  .top-info, .top-title { display: none !important; }
}