/* Hotwire Native specific styles */
body.hotwire-native .d-none-hotwire-native,
body.hotwire-native .breadcrumbs {
  display: none !important;
}

body.hotwire-native {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: calc(max(env(safe-area-inset-bottom), 2.5rem) * 1.1);
}

body.hotwire-native * {
  -webkit-tap-highlight-color: transparent;
}

/* Onboarding has no tab bar or nav bar — just enough top space for status bar */
body.hotwire-native.onboarding {
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: 0;
}

/* Auth pages (login/signup/password reset) have no tab bar or nav bar either,
   and their own centered-card layout already adds vertical breathing room —
   stacking the full safe-area padding on top pushed the card down too far.
   Centering shorter-than-viewport content in a full 100vh body also leaves a
   large gap above the card on native, so anchor to the top instead. */
body.hotwire-native.auth {
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: 0;
}

body.hotwire-native.auth .flex.items-center.justify-center {
  align-items: flex-start !important;
  padding-top: 1.5rem !important;
}

/* Sticky elements respect safe areas */
body.hotwire-native .sticky-top {
  top: env(safe-area-inset-top) !important;
}

body.hotwire-native .sticky-bottom {
  bottom: env(safe-area-inset-bottom) !important;
}

/* Remove min-h-screen on native — pages don't need full viewport height */
body.hotwire-native .min-h-screen {
  min-height: unset !important;
}

/* bg-canvas sets min-height: 100vh on <body> itself for web — on native
   this forces the WebView content taller than its actual content, which
   throws off the native tab bar's height calculation. */
body.hotwire-native.bg-canvas {
  min-height: unset !important;
}

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
body.hotwire-native input,
body.hotwire-native textarea,
body.hotwire-native select {
  font-size: max(16px, 1em);
}