/**
 * 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);
    /* Use capped bottom inset set by mobile-viewport.js (10px instead of ~34px on Face ID iPhones) */
    padding-bottom: var(--ios-safe-bottom, 0px);
    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%;
  height: -webkit-fill-available;
  overflow-x: hidden;
}

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

/* The dashboard left menu is position: fixed, so body safe-area padding does not
   move it. Apply margin-top to push the fixed menu below the status bar, and let
   dashboard.css handle the corresponding height reduction. */
html.ios.ios-pwa .left-menu {
  margin-top: env(safe-area-inset-top);
}

/* Dashboard pages should use a single scroll container: .dashboard-content.
   In iOS standalone mode, leaving body/#app scrollable creates a second scroll
   path when the user drags on .dashboard-header, which lets the header slip
   behind the browser/status-bar area. Move the top safe-area ownership to the
   dashboard layout itself and lock the page shell for dashboard routes. */
html.ios-pwa:has(.dashboard-layout) {
  overflow: hidden !important;
}

html.ios-pwa body:has(.dashboard-layout) {
  padding-top: 0 !important;
  overflow: hidden !important;
}

html.ios-pwa #app:has(.dashboard-layout) {
  min-height: 100%;
  overflow: hidden !important;
}

html.ios-pwa .dashboard-layout {
  height: 100vh;
  height: -webkit-fill-available;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}

/* ---------- STANDALONE PWA DETECTION (CSS-native, replaces ios-pwa class) ---------- */
/* The ios-pwa class is NOT applied in the actual installed PWA. These rules use
   @media (display-mode: standalone) which is the reliable CSS-native way to detect
   when the app is running as an installed PWA. Combined with html.ios-device
   (which IS applied) to scope to iOS only. */
@media (display-mode: standalone) {
  /* Reset body padding for dashboard pages — the dashboard-layout handles its
     own safe area. Without this, body padding-top creates overflow at the bottom
     equal to the status bar height. */
  html.ios-device body:has(.dashboard-layout) {
    padding-top: 0 !important;
    overflow: hidden !important;
    border: 2px solid yellow;;
  }

  /* Lock html and #app overflow to prevent rubber-band scroll past content */
  html.ios-device:has(.dashboard-layout) {
    overflow: hidden !important;
  }

  html.ios-device #app:has(.dashboard-layout) {
    min-height: 100%;
    overflow: hidden !important;
  }

  /* Dashboard layout owns its safe area in standalone mode */
  html.ios-device .dashboard-layout {
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }
}

/* 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) {
  /* Apply background-color immediately to html in standalone mode.
     This prevents the white canvas gap at the bottom before JS adds .ios-pwa class.
     Without this, the manifest background_color (#ffffff) peeks through the bottom
     safe area because html has no background-color set. */
  html {
    background-color: var(--bg-primary, #121212);
  }

  /* 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 {
    height: 100vh;
    height: -webkit-fill-available;
    margin: 0;
    /* IMPORTANT: Use individual padding properties instead of shorthand.
       The shorthand 'padding: 0' was killing padding-top: env(safe-area-inset-top)
       from the @supports block above, causing the entire app to render behind
       the status bar/notch in iOS PWA mode. */
    padding-top: env(safe-area-inset-top);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    overflow: auto;
  }

  html.ios-pwa #app {
    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):not(.docs-console-input),
  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;
  }
}