/**
 * iOS PWA Fixes
 *
 * This file contains CSS fixes for iOS PWA mode, particularly for handling
 * the status bar and safe areas.
 */

/* ---------- SAFE AREA INSETS & BASIC LAYOUT ---------- */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Add padding to body for status bar */
  body {
    padding-top: env(safe-area-inset-top);
    /* Remove bottom padding that causes extra space */
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Adjust fixed elements for iOS safe areas */
  .fixed-top,
  .sticky-top,
  .navbar {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  /* PWA specific overrides - these need higher specificity */
  html.ios-pwa body,
  body.ios-pwa {
    padding-bottom: 0 !important;
  }

  /* Adjust modals and dialogs */
  .modal-content,
  .dialog-content {
    margin-top: env(safe-area-inset-top);
    margin-bottom: 0; /* Remove bottom margin */
  }
}

/* ---------- GLOBAL iOS ELEMENT STYLING ---------- */

/* Prevent rubber-band scrolling effect in iOS - only when in PWA mode */
html.ios.ios-pwa {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body.ios.ios-pwa {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* Make sure the app takes full height and masks the browser UI in PWA mode */
html.ios.ios-pwa #app {
  min-height: 100vh;
}

/* Make iOS inputs more native-like - but don't override form styling */
input:not(.form-input):not(.form-textarea):not(.form-select),
select:not(.form-input):not(.form-textarea):not(.form-select),
textarea:not(.form-input):not(.form-textarea):not(.form-select) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
}

/* Enhanced touch handling for interactive elements - exclude buttons with existing styles */
a, input, select, textarea,
[role="button"], .interactive-element {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Fix for iOS button styling - but don't override .btn class styles */
button:not(.btn):not([class*="btn-"]) {
  -webkit-appearance: none;
  appearance: none;
}

/* Standard iOS scrolling classes */
.ios-scroll-container,
.ios-momentum-scroll,
.ios-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.ios-scroll-container {
  height: 100%;
  width: 100%;
}

/* ---------- PWA SPECIFIC FIXES ---------- */

/* iOS PWA specific fixes */
@media all and (display-mode: standalone) {
  /* Ensure proper fullscreen in standalone mode */
  html.ios-pwa {
    height: 100vh;
    /* Use the whole height, including notches */
    height: -webkit-fill-available;
    overflow: auto;
  }

  html.ios-pwa body {
    min-height: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    overflow: auto;
  }

  html.ios-pwa #app {
    min-height: 100%;
    overflow: auto;
  }

  /* Fix navbar in iOS PWA mode */
  html.ios-pwa .navbar {
    position: sticky;
    height: auto;
    min-height: 50px;
    display: flex;
    align-items: center;
  }
}

/* iOS browser mode fixes (non-PWA) */
html.ios:not(.ios-pwa) body {
  /* Standard height */
  min-height: 100%;
}

html.ios:not(.ios-pwa) #app {
  /* Ensure app container fills the viewport */
  min-height: 100%;
}

/* Add custom styles for browser-mode to look more like a native app */
html[data-display-mode="browser"] #app {
  /* Provide a sense of "native app container" when in browser */
  margin: 0 auto;
  max-width: 100%;
  background-color: var(--bg-primary);
  position: relative;
  /* Create extra padding at the bottom to compensate for the browser UI */
  padding-bottom: 0;
}

/* ---------- INPUT AND FORM CONTROLS ---------- */

/* Ensure form inputs and buttons still get iOS touch improvements without losing styling */
.form-input,
.form-textarea,
.form-select,
.btn,
[class*="btn-"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* Ensure good scrolling behavior on iOS */
  -webkit-overflow-scrolling: touch;
}

/* Prevent text zoom on input focus on iOS - target only non-form-class inputs */
@media screen and (max-width: 768px) {
  input:not(.form-input):not(.form-textarea):not(.form-select),
  select:not(.form-input):not(.form-textarea):not(.form-select),
  textarea:not(.form-input):not(.form-textarea):not(.form-select) {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
}

/* Hide input labels when focused (for compact forms) */
.compact-form input:focus + label,
.compact-form textarea:focus + label,
.compact-form select:focus + label {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

/* Improve scrolling performance for input containers */
.form-group,
.input-wrapper,
.input-container,
.form-container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform; /* Performance hint */
  backface-visibility: hidden;
  perspective: 1000px;
  position: relative;
  z-index: 1;
}

/* ---------- KEYBOARD AND INPUT FOCUS HANDLING ---------- */

/* Consolidated keyboard visibility handling */
html.ios.keyboard-visible,
html.ios.keyboard-visible body,
body.ios.keyboard-open,
body.keyboard-open,
body.ios-keyboard-open,
.is-mobile.keyboard-visible,
.keyboard-open {
  /* Allow natural scrolling */
  height: auto !important;
  overflow: auto !important;
  position: static !important;
  /* Don't manipulate the scroll position */
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
}

/* Fix content containers when keyboard is visible */
.router-view-container {
  /* Base styling for router view container */
  position: relative;
}

html.ios.keyboard-visible .router-view-container,
body.ios.keyboard-open .router-view-container,
body.ios-keyboard-open .router-view-container,
.ios-device.keyboard-visible .router-view-container,
.keyboard-open .router-view-container {
  height: auto !important;
  position: static !important;
  overflow: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* Fix input handling on iOS devices */
@supports (-webkit-touch-callout: none) {
  /* iOS device detection - apply these styles to all iOS devices */
  body.ios-device {
    /* Override iOS auto-scroll behavior */
    position: relative;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Base styling for non-form-class input elements */
  input:not(.form-input):not(.form-textarea):not(.form-select),
  textarea:not(.form-input):not(.form-textarea):not(.form-select),
  select:not(.form-input):not(.form-textarea):not(.form-select) {
    /* Let browser handle positioning naturally */
    position: relative;
    z-index: 1;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* Apply hardware acceleration by default */
    transform: translateZ(0);
    /* Ensure inputs don't zoom */
    font-size: 16px !important;
  }

  /* Focus-specific handling - override transform on focus to prevent repositioning for non-form inputs */
  input:not(.form-input):not(.form-textarea):not(.form-select):focus,
  textarea:not(.form-input):not(.form-textarea):not(.form-select):focus,
  select:not(.form-input):not(.form-textarea):not(.form-select):focus {
    /* Override hardware acceleration to prevent reposition on focus */
    transform: none !important;
    /* Ensure inputs are properly positioned */
    position: relative;
    /* Ensure good scrolling behavior */
    -webkit-overflow-scrolling: touch;
  }

  /* Additional scroll prevention on containers */
  .input-container, .form-container, .form-group, .input-wrapper {
    /* Make sure containers don't cause unwanted scroll behavior */
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    z-index: 1;
  }
}

/* Additional PWA-specific fixes */
html.ios-pwa,
body.ios-pwa {
  /* Reset any safe area insets */
  --safe-area-inset-bottom: 0px !important;
  /* Ensure proper height calculation */
  height: 100% !important;
  min-height: 100% !important;
}