/* iOS-specific performance optimizations */

/* Reduce animation complexity on iOS */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  
  /* Faster transitions */
  .cell-item,
  .station-item,
  .tab-btn {
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
  
  /* Reduce shadow effects */
  .cell-item:hover,
  .station-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* Optimize scrolling */
  .sidebar,
  .station-list,
  .cell-list {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) {
    .cell-item:hover,
    .station-item:hover,
    .tab-btn:hover {
      transform: none;
      box-shadow: initial;
    }
  }
  
  /* Optimize map container */
  #map {
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* Reduce font rendering overhead */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Optimize button interactions */
  button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  
  /* Faster image loading */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Memory optimization */
img[data-src] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

img[data-src].loaded {
  opacity: 1;
}

/* Reduce repaints */
.sidebar,
.container {
  contain: layout style paint;
}

/* Optimize animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Use transform instead of changing position */
.cell-item,
.station-item {
  will-change: transform;
  backface-visibility: hidden;
}

/* Reduce GPU usage */
.sidebar {
  transform: translateZ(0);
}

/* Optimize for low-end devices */
@media (max-width: 768px) {
  .cell-item,
  .station-item {
    transition: none;
  }
  
  .cell-item:hover,
  .station-item:hover {
    transform: none;
  }
}