/* iOS PWA Optimizations */

/* iOS Safari PWA specific styles */
@supports (-webkit-touch-callout: none) {
  /* iOS-specific overrides */
  
  /* Fix viewport issues on iOS */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    /* Ensure proper touch handling */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Fix iOS safari viewport */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  /* Fix the dreaded iOS zoom issue */
  input, textarea, select {
    font-size: 16px !important;
    -webkit-appearance: none;
    border-radius: 0;
  }

  /* Better button styling for iOS */
  button {
    -webkit-appearance: none;
    border-radius: 6px;
    cursor: pointer;
  }

  /* Fix for rounded buttons to appear as circles on iOS */
  .p-button.p-button-rounded,
  .p-button-rounded {
    -webkit-appearance: none !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* Ensure icon-only rounded buttons maintain circle shape */
  .p-button.p-button-rounded.p-button-icon-only {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Fix iOS status bar overlap in standalone mode */
  @media all and (display-mode: standalone) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Header adjustments for notch */
    .app-header, .main-header {
      padding-top: calc(env(safe-area-inset-top) + 10px);
    }

    /* Fix for workspace header components */
    workspace-user-profile-header .profile-header-toolbar,
    workspace-lib-app-header .profile-header-toolbar {
      padding-top: calc(env(safe-area-inset-top) + 0.5rem);
      min-height: calc(3.5rem + env(safe-area-inset-top));
    }

    /* Ensure toolbar content is properly aligned */
    workspace-user-profile-header .p-toolbar,
    workspace-lib-app-header .p-toolbar {
      padding-top: env(safe-area-inset-top);
    }

    /* Fix for header buttons to maintain circle shape */
    workspace-user-profile-header .p-button.p-button-rounded,
    workspace-lib-app-header .p-button.p-button-rounded {
      width: 2.5rem !important;
      height: 2.5rem !important;
      border-radius: 50% !important;
      -webkit-border-radius: 50% !important;
      -webkit-clip-path: circle(50%) !important;
      clip-path: circle(50%) !important;
      will-change: transform !important;
    }

    /* Adjust for landscape orientation */
    @media (orientation: landscape) {
      workspace-user-profile-header .profile-header-toolbar,
      workspace-lib-app-header .profile-header-toolbar {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }
    }
  }

  /* Ensure components scale properly on iOS */
  .p-card {
    transform: scale(0.95);
    transform-origin: center;
    /* margin: 0.5rem !important; */
  }

  .p-button {
    min-height: 44px; /* iOS minimum touch target */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  /* Specific handling for rounded buttons to maintain circle shape with scale */
  .p-button.p-button-rounded {
    transform: scale(0.95) translateZ(0) !important;
    -webkit-transform: scale(0.95) translateZ(0) !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Non-rounded buttons can use regular scale */
  .p-button:not(.p-button-rounded) {
    transform: scale(0.95);
  }

  /* Fitness home specific optimizations */
  workspace-fitness-home {
    .p-card-content {
      padding: 0.75rem !important;
    }

    .p-card-title {
      font-size: 1rem !important;
    }

    .p-button {
      padding: 0.75rem 1rem !important;
      font-size: 0.9rem !important;
    }

    .p-inputtext {
      padding: 0.75rem !important;
      font-size: 16px !important; /* Prevent zoom */
    }
  }

  /* Better scrolling on iOS */
  .scrollable-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  /* Fix iOS keyboard issues */
  .form-container {
    padding-bottom: 20px;
  }

  /* Loading spinner adjustments */
  .p-progress-spinner {
    transform: scale(0.8);
  }

  /* Dialog adjustments for iOS */
  .p-dialog {
    max-width: 95vw !important;
    max-height: 90vh !important;
  }

  /* Toast adjustments */
  .p-toast {
    top: calc(env(safe-area-inset-top) + 20px) !important;
  }
}

/* iPhone specific optimizations */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  /* iPhone X/XS specific styles */
  .fitness-app-container {
    padding-bottom: 34px; /* Account for home indicator */
  }
}

/* iPhone 12/13/14 specific optimizations */
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  .fitness-app-container {
    padding-bottom: 34px;
  }
}

/* General iOS PWA improvements */
@media (display-mode: standalone) {
  /* Hide any browser UI elements that might appear */
  body {
    overscroll-behavior: none;
  }

  /* Improve touch targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing for PWA */
  /* .container {
    padding: 1rem 0.75rem;
  } */

  /* Optimize for smaller screens */
  .p-grid {
    margin: 0 !important;
  }

  .p-col {
    padding: 0.25rem !important;
  }
}

/* Reduce component sizes for better mobile experience */
@media (max-width: 768px) {
  .p-card {
    /* margin: 0.25rem; */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .p-card-body {
    padding: 0.75rem;
  }

  .p-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .p-button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .p-inputtext {
    padding: 0.6rem;
    font-size: 1rem;
  }

  /* Compact grid layout */
  .p-grid {
    margin: 0;
  }

  .p-col-12 {
    padding: 0.25rem;
  }
}