/* iOS-specific PWA optimizations for iPhone */

/* Safe area support for iPhone X and newer models */
:root {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .ios-safe-area {
    padding-top: max(1rem, var(--safe-area-inset-top));
    padding-bottom: max(1rem, var(--safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-area-inset-left));
    padding-right: max(1rem, var(--safe-area-inset-right));
  }
  
  /* Fix for iOS Safari bottom navigation bar */
  .ios-bottom-padding {
    padding-bottom: max(1rem, calc(var(--safe-area-inset-bottom) + 1rem));
  }
  
  /* Prevent zoom on input focus (iOS Safari) */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* iOS Safari scroll fix */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* iOS Safari pull-to-refresh disable */
  body {
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }
  
  /* iOS Safari address bar compensation */
  .ios-full-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* iPhone specific responsive optimizations */
@media screen and (max-width: 428px) {
  /* iPhone 12 Pro Max and smaller */
  .task-item {
    padding: 0.875rem;
  }
  
  .task-title {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  .task-description {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  
  /* Improve tap targets for iOS */
  button, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iPhone SE and smaller screens */
@media screen and (max-width: 375px) and (max-height: 667px) {
  .container {
    padding: 0.75rem;
  }
  
  .header-title {
    font-size: 1.25rem;
  }
  
  .task-grid {
    gap: 0.5rem;
  }
}

/* iPhone landscape mode optimizations */
@media screen and (orientation: landscape) and (max-height: 430px) {
  .header {
    padding: 0.5rem 1rem;
  }
  
  .main-content {
    padding-top: 0.5rem;
  }
  
  .task-item {
    padding: 0.75rem;
  }
}

/* iOS Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  /* Better contrast for iOS dark mode */
  .task-item {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  
  .task-item:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }
  
  /* iOS Safari dark mode status bar */
  meta[name="theme-color"] {
    content: "#102323";
  }
}

/* iOS Light mode specific adjustments */
@media (prefers-color-scheme: light) {
  .task-item {
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  
  .task-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
  
  /* iOS Safari light mode status bar */
  meta[name="theme-color"] {
    content: "#06f9f9";
  }
}

/* iOS haptic feedback simulation through CSS */
@keyframes ios-haptic {
  0% { transform: scale(1); }
  50% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.ios-haptic-feedback:active {
  animation: ios-haptic 0.1s ease-in-out;
}

/* iOS Safari specific form improvements */
input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 8px;
  background-color: transparent;
}

/* iOS Safari specific button improvements */
button {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Disable iOS Safari selection highlighting */
.no-select {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari specific loading animations */
@keyframes ios-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ios-loading {
  animation: ios-spin 1s linear infinite;
}

/* iOS Safari PWA fullscreen optimizations */
@media all and (display-mode: standalone) {
  /* Hide elements that are only needed in browser */
  .browser-only {
    display: none !important;
  }
  
  /* Adjust spacing for PWA mode */
  .pwa-header {
    padding-top: var(--safe-area-inset-top);
  }
  
  .pwa-content {
    padding-bottom: var(--safe-area-inset-bottom);
  }
}

/* iOS Safari performance optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Use hardware acceleration for smooth animations on iOS */
.hardware-accelerated {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}