/* ============================================================
   responsive.css — אופטימיזציות נגישות ורספונסיביות משותפות
   נטען אחרי ה-<style> של כל דף כדי שיעקוף לפי סדר המפלים.
   יעדים: iPhone/iPad (Safari), אנדרואיד, טאבלטים, דסקטופ.
   ============================================================ */

/* ── Base: טייפוגרפיה ואנטי-אליאסינג ── */
html {
  -webkit-text-size-adjust: 100%;       /* Safari iOS: מנע התאמת גופן אוטומטית בסיבוב */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(41, 121, 255, 0.15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;                    /* חסום scroll אופקי רוחבי שנולד מטעות פריסה */
  -webkit-overflow-scrolling: touch;     /* iOS momentum */
  overscroll-behavior-y: none;           /* מנע "bounce" לא-רצוי במסכים מוגבלים */
}

img, svg { max-width: 100%; height: auto; }

/* ── Forms: מנע זום אוטומטי של Safari iOS בעת focus (חייב ≥16px) ── */
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=search],
input[type=file],
select,
textarea {
  font-size: 16px;
  -webkit-appearance: none;              /* הסר עיצוב iOS/Android ברירת מחדל */
  appearance: none;
  border-radius: 8px;
}

/* גודל אחסון קובץ input — מונע חיתוך */
input[type=file] { padding: 10px 14px; }

/* ── Tap targets: Apple HIG 44×44pt מינימום ── */
button,
.btn,
.dl-btn,
nav a,
header a,
.logout-link {
  min-height: 44px;
  touch-action: manipulation;            /* מנע double-tap-to-zoom באפל */
}

.btn-sm,
button.btn-sm {
  min-height: 36px;                      /* כפתורי פעולה קטנים בשורות טבלה */
}

/* ── Fixed cookie banner: כבד את ה-safe area של iPhone notch/Home Indicator ── */
#cookie-banner {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  padding-right:  calc(24px + env(safe-area-inset-right,  0px)) !important;
  padding-left:   calc(24px + env(safe-area-inset-left,   0px)) !important;
}

/* ── Navigation: שבירה לשורות, לא גלילה הצידה ──
   שונה 19/08/2026. הכלל הקודם היה overflow-x:auto עם scrollbar מוסתר —
   כלומר בטלפון נראו שלושה קישורים והשאר נעלמו מחוץ למסך בלי שום רמז
   שהם קיימים. אורן עצמו עובד מהטלפון, וזה בדיוק הכשל שקבר 9 בקשות
   מנוי מאחורי הקישור האחרון בסרגל הניהול. עדיף שתי שורות מלאות
   מרצועה נגללת שאי אפשר לגלות. */
nav {
  overflow-x: visible;
  flex-wrap: wrap;
}
nav a { white-space: nowrap; }

/* ── Tables: אפשר scroll אופקי בפלאפון מבלי לשבור את הלייאאוט ── */
.file-table,
.links-table {
  width: 100%;
}

/* ============================================================
   Tablet & מסך בינוני (iPad portrait ≈ 768px, iPad Pro 11" 834)
   ============================================================ */
@media (max-width: 980px) {
  main { padding: 0 16px; }
  .card { padding: 26px; }
  header { padding: 14px 20px; gap: 12px; }
  nav { padding: 0 14px; }
  nav a { padding: 12px 16px; font-size: 0.9rem; }
}

/* ============================================================
   Smartphone (<=640px) — iPhone SE/13/15 vertical
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 15px; }

  main { padding: 0 12px; margin: 18px auto; }

  .card {
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow-x: auto;                    /* טבלאות ברוחב-יתר נגללות בתוך הכרטיס */
    -webkit-overflow-scrolling: touch;
  }
  .card h2 { font-size: 1.05rem; margin-bottom: 14px; padding-bottom: 10px; }
  .card p { font-size: 0.92rem; line-height: 1.65; }

  header { padding: 12px 14px; gap: 10px; }
  header h1 { font-size: 0.98rem; }

  .logout-link { padding: 6px 10px; }

  /* כפתורים — פחות padding אופקי, אבל שומרים על tap height */
  .btn { padding: 11px 18px; font-size: 0.92rem; }
  .btn-sm { padding: 6px 12px; font-size: 0.8rem; }

  /* ── index.html ── */
  .slogan-main { font-size: 1.25rem; letter-spacing: 0.02em; }
  .slogan-sub  { font-size: 0.82rem; }
  .name-strip h1 { font-size: 1.25rem; }
  .name-strip p  { font-size: 0.78rem; }
  .israel-flag { width: 54px; height: 36px; }
  .action-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero-card { padding: 24px; }

  /* ── stats bars ── */
  .stats-bar { gap: 8px; }
  .stat-box, .stat-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    padding: 10px 12px;
  }
  .stat-box .val, .stat-item .val { font-size: 1.15rem; }

  /* ── tables: עמודות דחוסות + scroll אופקי דרך .card ── */
  .file-table th, .file-table td,
  .links-table th, .links-table td {
    padding: 9px 10px;
    font-size: 0.84rem;
    white-space: nowrap;
  }
  .file-table td.fname { max-width: 180px; }

  /* ── drop zone (upload.php) ── */
  .drop-zone { padding: 26px 12px; }
  .drop-zone .icon { font-size: 2.3rem; }
  .drop-zone .text-main { font-size: 0.98rem; }
  .drop-zone .text-sub  { font-size: 0.78rem; }

  /* ── cookie banner: ערימה אנכית במקום שורה ── */
  #cookie-banner {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
    padding-top: 14px !important;
  }
  #cookie-banner form {
    display: flex;
    justify-content: stretch !important;
    width: 100%;
  }
  #cookie-banner form button { flex: 1; }

  /* ── share page: תיבת קישור ── */
  .link-box {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .link-box input { text-align: center; font-size: 14px !important; }

  /* ── form rows (share.php) ── */
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── confirm overlay / modal (upload.php delete) ── */
  .confirm-box { padding: 22px; }
}

/* ============================================================
   מסך קטן במיוחד (<=380px) — iPhone SE 1st gen, Galaxy Fold
   ============================================================ */
@media (max-width: 380px) {
  main { padding: 0 10px; }
  .card { padding: 14px; }
  header { padding: 10px 12px; }
  header h1 { font-size: 0.88rem; }
  .slogan-main { font-size: 1.05rem; }
  .israel-flag { width: 44px; height: 30px; }
  nav a { padding: 11px 12px; font-size: 0.84rem; }
  .stat-box .val, .stat-item .val { font-size: 1rem; }
}

/* ============================================================
   Landscape phone — גובה נמוך, הקטן margins אנכיים
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  main { margin: 12px auto; }
  .card { padding: 16px; margin-bottom: 12px; }
  header { padding: 8px 16px; }
  .hero-card { padding: 16px; }
}

/* ============================================================
   Hover רק במכשירים עם עכבר — מונע "stuck hover" אחרי tap באפל
   ============================================================ */
@media (hover: none) {
  .action-card:hover { transform: none; box-shadow: 0 4px 16px rgba(0,51,153,0.1); }
  .btn:hover, .dl-btn:hover { opacity: 1; }
}

/* ============================================================
   Print — ניקוי לפני הדפסה (שימושי לרשימת קבצים להורדה)
   ============================================================ */
@media print {
  header, nav, footer, #cookie-banner, .btn, .logout-link, form { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}