/* ══════════════════════════════════════════════════════════
   TRAILINX — Global mobile UX fixes
   Applies to every public + panel page. Loaded last so it can
   override page-specific rules without !important most of the
   time. Keep this file scoped to genuinely-mobile-only fixes.
   ══════════════════════════════════════════════════════════ */

/* ── 1. iOS input zoom (Safari zooms when focused field is <16px) ── */
@media(max-width:430px){
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select{
    font-size:16px!important;
  }
}

/* ── 2. Touch targets ≥ 44×44 px (Apple HIG / Material) ── */
@media(hover:none) and (pointer:coarse){
  button,
  a.btn,
  .btn,
  .btn-sm,
  .btn-primary,
  .btn-secondary,
  input[type="submit"],
  input[type="button"],
  .nav-link,
  .nav-icon,
  .nav-cta{
    min-height:44px;
  }
  /* Icon-only buttons inside dense panels (close ✕, expand, etc.)
     keep their visual size but get a transparent hit-area expansion. */
  .btn-icon,
  .icon-btn{
    min-width:44px;
    min-height:44px;
  }
}

/* ── 3. Remove 300ms tap delay + customize tap highlight ── */
*{
  -webkit-tap-highlight-color:rgba(26,109,255,.18);
}
button,a,[role="button"],.nav-link,.nav-icon,label,input,textarea,select{
  touch-action:manipulation;
}

/* ── 4. Safe-area insets (notched iPhones, Android with gesture nav) ──
   Don't touch desktop. The padding-top:env(safe-area-inset-top) rule
   was overwriting each page's existing nav padding on desktop (where
   env() returns 0), so it shrank the header. Now scoped to mobile and
   only on the bottom nav, which already had its own safe-area handling. */
@media(max-width:900px) and (pointer:coarse){
  @supports(padding:max(0px)){
    body{
      padding-bottom:env(safe-area-inset-bottom);
    }
    .mobile-bottom-nav{
      padding-bottom:env(safe-area-inset-bottom);
    }
  }
}

/* ── 5. Sticky/fixed bottom nav must clear safe-area + give content room ── */
@media(max-width:900px){
  body:has(.mobile-bottom-nav){
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
  }
}

/* ── 6. Form input rounded corners on iOS Safari ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select{
  -webkit-appearance:none;
  appearance:none;
  border-radius:8px;
}
input[type="checkbox"],
input[type="radio"]{
  -webkit-appearance:auto;
  appearance:auto;
}

/* ── 7. Prevent overflow from images/iframes/videos ── */
img,video,iframe{
  max-width:100%;
}

/* ── 8. Tables in mobile: scroll only the table, not the page ── */
@media(max-width:768px){
  .table-card,
  .responsive-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ── 9. Modals: dynamic viewport height (iOS Safari url bar collapses) ── */
@media(max-width:768px){
  .modal-overlay,
  .detail-overlay,
  .auth-page,
  .chat-modal{
    min-height:100vh;
    min-height:100dvh;
  }
}

/* ── 10. Disable iOS auto-zoom on landscape rotation ── */
@media screen and (orientation:landscape) and (max-width:900px){
  html{
    -webkit-text-size-adjust:100%;
  }
}

/* ── 11. Prevent pull-to-refresh inside scrollable inner panels ── */
.detail-modal,
.chat-modal,
.modal{
  overscroll-behavior:contain;
}

/* ── 12. Tap-friendly date/time pickers ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  min-height:44px;
}

/* ── 13. Smooth scroll the school panel sidebar offcanvas ── */
.sidebar{
  -webkit-overflow-scrolling:touch;
}

/* ── 14. Modal close buttons clear notch on full-screen mobile modals ── */
@media(max-width:430px){
  .detail-close,
  .modal-close,
  .chat-close{
    top:max(12px,env(safe-area-inset-top))!important;
  }
  .detail-modal{
    padding-top:env(safe-area-inset-top);
  }
}

/* ── 15. School/instructor sidebar offcanvas — full-height + safe-area ── */
@media(max-width:900px){
  .sidebar.open,
  .sidebar.show{
    height:100vh;
    height:100dvh;
    padding-top:max(12px,env(safe-area-inset-top));
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
}

/* ── 16. Don't let toast container land under iOS home indicator ── */
#toast-container{
  bottom:max(1rem,env(safe-area-inset-bottom))!important;
}

/* ── 17. Sticky top nav — block content from sliding under it on iOS ── */
.nav-sticky-spacer{
  height:env(safe-area-inset-top);
}

/* ── 18. Long-press text selection on tap-only elements ── */
button,
a,
[role="button"],
.btn,
.nav-link,
.sidebar-item,
.school-card,
.resort-card,
.tlx-ls-btn{
  -webkit-user-select:none;
  user-select:none;
}
input,textarea,[contenteditable]{
  -webkit-user-select:text;
  user-select:text;
}

/* ── 19. iOS overscroll bounce — keep on body but contain in modals ── */
.detail-overlay,
.modal-overlay,
.auth-page{
  overscroll-behavior:contain;
}

/* ── 20. Form labels block taps on adjacent buttons (iOS quirk) ── */
label{
  cursor:pointer;
}