/* ============================================================================
   MOBILE QUICK FIXES & ENHANCEMENTS
   Additional mobile optimizations and fixes
   ============================================================================ */

/* Prevent text selection issues on mobile */
@media (max-width: 768px) {
  button, a, .btn {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    -webkit-touch-callout: none;
  }
  
  /* Allow selection only for inputs and editable content */
  input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* Fix iOS Safari bottom nav spacing */
    body {
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-bottom-nav {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
    
    /* Fix iOS input zoom */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
      font-size: 16px !important; /* Prevent zoom on focus */
    }
    
    /* Fix iOS momentum scrolling */
    .cart-list-area,
    .part-list-content,
    .dashboard-sidebar {
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* Android Chrome specific fixes */
@media (max-width: 768px) {
  /* Fix address bar hide/show layout shifts */
  .svg-viewer-container {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
  
  /* Prevent layout shift on keyboard open */
  .mobile-bottom-nav {
    position: fixed;
  }
}

/* Landscape mode specific adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-bottom-nav span {
    display: none; /* Hide text labels in landscape for more space */
  }
  
  .mobile-nav-item {
    padding: 0.5rem 0.25rem;
  }
  
  .kpi-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .svg-container {
    /* Maximize SVG area in landscape */
    position: relative;
  }
}

/* Small screen optimizations (<375px) */
@media (max-width: 374px) {
  .mobile-cart-fab {
    width: 48px;
    height: 48px;
    bottom: calc(var(--mobile-bottom-nav-height) + 0.75rem);
    right: 0.75rem;
  }
  
  .mobile-cart-fab i {
    font-size: 1.25rem;
  }
  
  .zoom-controls .control-btn {
    width: 38px;
    height: 38px;
  }
  
  .content-header {
    padding: 0.375rem 0.5rem;
  }
  
  .machine-name {
    font-size: 0.8125rem;
  }
}

/* High DPI / Retina displays */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 768px) and (min-resolution: 192dpi) {
  .mobile-cart-fab,
  .control-btn,
  .mobile-nav-item {
    /* Crisper rendering on retina */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Performance optimizations */
@media (max-width: 768px) {
  /* Hardware acceleration for smooth animations */
  .mobile-cart-drawer,
  .mobile-sidebar-overlay,
  .mobile-cart-overlay,
  .dashboard-sidebar,
  .part-list-panel {
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Dark mode preparation (future enhancement) */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  /* Future dark mode styles can be added here */
  /* Currently respecting user's system preference indication */
}

/* Focus visible for accessibility */
@media (max-width: 768px) {
  *:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  /* Remove outline for mouse users */
  *:focus:not(:focus-visible) {
    outline: none;
  }
}

/* Print styles - hide mobile UI elements */
@media print {
  .mobile-bottom-nav,
  .mobile-cart-fab,
  .mobile-cart-drawer,
  .mobile-sidebar-overlay,
  .mobile-cart-overlay,
  .zoom-controls {
    display: none !important;
  }
}

/* Animation classes for JavaScript control */
@media (max-width: 768px) {
  .slide-up {
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .slide-down {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .fade-in-mobile {
    animation: fadeInMobile 0.2s ease-out;
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fadeInMobile {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Status bar color meta tag support */
@media (max-width: 768px) {
  /* Styles supporting theme-color meta tag */
  .app-header {
    background: #667eea; /* Match theme-color */
  }
}

/* Loading states for mobile */
@media (max-width: 768px) {
  .mobile-loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  
  .mobile-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

/* Skeleton loading for better UX */
@media (max-width: 768px) {
  .skeleton {
    background: linear-gradient(
      90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

/* Haptic feedback simulation (visual) */
@media (max-width: 768px) {
  .haptic-light:active {
    transform: scale(0.98);
  }
  
  .haptic-medium:active {
    transform: scale(0.95);
  }
  
  .haptic-heavy:active {
    transform: scale(0.92);
  }
}

/* Mobile-specific utility classes */
@media (max-width: 768px) {
  .mobile-fullwidth {
    width: 100% !important;
  }
  
  .mobile-sticky-top {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
  }
  
  .mobile-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  
  .mobile-scroll-x::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
  
  .mobile-no-scroll {
    overflow: hidden;
    touch-action: none;
  }
}