/* Mobile Native App Optimizations */

/* Prevent iOS bounce/scroll behavior and dragging */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Only fix body position when not showing modals/menus/flyouts */
  body:not(.menu-open):not(.modal-open):not(.flyout-open) {
    position: fixed;
    overflow: hidden;
  }


  /* Allow scrolling only in main content areas - exclude flyout content */
  main, .main-content, .mobile-login-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 1; /* Ensure main stays below flyouts */
  }
  
  /* Reset positioning for flyout content areas */
  body [data-flyout-target="panel"] .flex-1,
  body [data-flyout-target="panel"] form,
  body [data-flyout-target="panel"] .form-actions {
    position: static;
  }
  
  /* Enable scrolling on flyout panels on mobile */
  body.flyout-open [data-flyout-target="panel"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  
  /* Ensure flyout content is scrollable */
  body.flyout-open [data-flyout-target="panel"] .flex-1 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Add padding to flyout content to prevent thumb bar overlap */
  body [data-flyout-target="panel"] > .flex.h-full.flex-col > .flex-1 {
    padding-bottom: 120px;
  }

  /* But reset padding on desktop */
  @media (min-width: 768px) {
    body [data-flyout-target="panel"] > .flex.h-full.flex-col > .flex-1 {
      padding-bottom: 24px;
    }
  }

  /* Ensure flyouts render above mobile positioning */
  body [data-flyout-target="backdrop"] {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  /* Flyout panels use inset-y-0 for full height coverage */
  body [data-flyout-target="panel"] {
    position: fixed;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* When flyout is open on mobile, ensure proper stacking order */
  @media (max-width: 768px) {
    /* Lower the top bar z-index when flyout is open */
    body.flyout-open #mobile-top-bar,
    body.flyout-open nav.z-50,
    body.flyout-open nav[class*="z-50"] {
      z-index: 1 !important;
    }
    
    /* Ensure flyout has maximum z-index on mobile */
    body.flyout-open [data-flyout-target="backdrop"] {
      z-index: 9998 !important;
    }
    
    body.flyout-open [data-flyout-target="panel"] {
      z-index: 9999 !important;
      position: fixed !important;
    }
  }
  
  /* Flyout containers should not be affected by mobile positioning */
  body [data-controller*="flyout"] {
    position: relative;
    z-index: auto;
  }

  /* Ensure dropdowns render above everything on mobile */
  body .choices, body .choices__list, body .choices__list--dropdown,
  body [data-dropdown-target="menu"],
  body .tom-select, body .ts-dropdown,
  body .dropdown-menu, body .select2-dropdown {
    position: fixed;
    z-index: 10000;
  }

  /* Form selects and their dropdowns */
  body select, body .form-select, body .custom-select {
    position: relative;
    z-index: 100;
  }

  /* Form button positioning fixes */
  body form button, body form .btn, body .form-actions button {
    position: relative;
    z-index: 50;
  }
  
  /* TomSelect dropdowns must be above form buttons */
  body .ts-wrapper {
    position: relative;
    z-index: 500;
  }
  
  body .ts-control {
    position: relative;
    z-index: 501;
  }

  body .ts-dropdown {
    position: absolute;
    z-index: 10003;
    transform: none;
  }
  
  /* Force TomSelect dropdown container to be higher than everything in forms */
  body .ts-wrapper.single .ts-dropdown,
  body .ts-wrapper.multi .ts-dropdown {
    position: absolute;
    z-index: 10003;
    top: 100%;
    left: 0;
    right: 0;
  }
  
  /* Specifically target Add Waypoint button to be lower than TomSelect */
  body button[data-action*="waypoint"], body .waypoint-button {
    z-index: 49;
  }

  /* Prevent text selection on UI elements but allow touch events */
  body button, body .btn, body nav, body .navbar, body .sidebar, body [data-action] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;
    touch-action: manipulation;
    position: relative;
    z-index: 10;
  }

  /* Allow text selection in inputs and content areas */
  input, textarea, .content, p, span {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }

  /* Improve touch targets */
  button, .btn, a, input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* Better form inputs for mobile */
  input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Remove iOS input shadows and glows */
  input, textarea, select {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
  }

  input:focus, textarea:focus, select:focus {
    -webkit-box-shadow: 0 0 0 2px rgb(59 130 246);
    box-shadow: 0 0 0 2px rgb(59 130 246);
  }

  /* Prevent double-tap zoom */
  * {
    touch-action: manipulation;
  }

  /* Remove iOS highlight on tap */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Smooth scrolling for better native feel */
  * {
    scroll-behavior: smooth;
  }
}

/* Webview specific optimizations */
.webview, .touch-device {
  /* Prevent dragging/scrolling of entire page */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.webview body:not(.menu-open):not(.modal-open):not(.flyout-open), 
.touch-device body:not(.menu-open):not(.modal-open):not(.flyout-open) {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

.webview main, .touch-device main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1; /* Ensure main stays below flyouts */
}

/* Ensure mobile thumb bar stays at bottom */
body #mobile-thumb-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}


/* Login screen specific optimizations */
@media (max-width: 768px) {
  .mobile-login-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-touch-callout: none;
  }

  .mobile-login-card {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* iOS specific optimizations */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific */
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  /* Fix iOS viewport height issues */
  .min-h-screen {
    min-height: -webkit-fill-available;
  }

  /* Prevent iOS rubber band scrolling */
  .mobile-login-container, main {
    position: fixed;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* Android webview optimizations */
@media (max-width: 768px) {
  /* Prevent overscroll glow on Android */
  * {
    overscroll-behavior: none;
  }

  /* COMMENTED OUT - This creates stacking contexts that interfere with flyout z-index
  /* Improve Android webview performance - exclude flyouts and their content */
  /*
  *:not([data-flyout-target]):not([data-controller*="flyout"]):not([data-flyout-target] *) {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  */
}

/* Safe area handling for devices with notches */
@media (max-width: 768px) {
  .mobile-login-container {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Adjust main content for safe areas */
  main {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Prevent pull-to-refresh in webviews */
.webview, .touch-device {
  overscroll-behavior-y: contain;
}

@media (max-width: 768px) and (display-mode: standalone),
@media (max-width: 768px) and (-webkit-app-region: drag) {
  /* Additional webview optimizations */
  body {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }

  /* Prevent pull-to-refresh */
  body {
    overscroll-behavior-y: contain;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  button, .btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  body * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}