/**
 * Mobile-specific optimizations and touch interactions
 * Basketball OCR PWA - Mobile Enhancement Layer
 * Version 1.0.0
 */

/* Mobile-First Responsive Breakpoints */
:root {
  --mobile-small: 320px;
  --mobile-medium: 375px;
  --mobile-large: 428px;
  --tablet-small: 768px;
  --tablet-large: 1024px;
  --desktop: 1200px;
}

/* Touch-optimized interactions */
@media (pointer: coarse) {
  /* Minimum touch target sizes */
  button,
  input,
  select,
  textarea,
  [role="button"],
  .upload-area,
  .feature-card-link,
  .mode-card,
  .date-range-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  
  /* Enhanced touch feedback */
  button:active,
  [role="button"]:active,
  .upload-area:active,
  .mode-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* Remove hover effects that don't work on touch */
  .upload-area:hover,
  .feature-card:hover,
  .mode-card:hover {
    transform: none;
  }
  
  /* Improve touch scrolling */
  .player-stats,
  .raw-ocr,
  .activity-table {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Small Mobile Devices (320px - 374px) */
@media (max-width: 374px) {
  .header {
    padding: var(--space-3) var(--space-2);
  }
  
  .header-content {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  
  .logo {
    height: 32px;
  }
  
  .main-content {
    padding: var(--space-4) var(--space-2);
  }
  
  .upload-area {
    padding: var(--space-4);
  }
  
  .upload-title {
    font-size: var(--text-xl);
  }
  
  .upload-subtitle {
    font-size: var(--text-sm);
  }
  
  .supported-formats {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  
  .feature-card {
    padding: var(--space-4);
  }
  
  .mode-options {
    flex-direction: column;
    align-items: center;
  }
  
  .mode-option {
    width: 100%;
    max-width: 280px;
  }
  
  .results-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  
  .results-actions {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .results-actions button {
    width: 100%;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Medium Mobile Devices (375px - 427px) */
@media (min-width: 375px) and (max-width: 427px) {
  .header {
    padding: var(--space-4) var(--space-3);
  }
  
  .main-content {
    padding: var(--space-6) var(--space-3);
  }
  
  .upload-area {
    padding: var(--space-6);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .mode-options {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  
  .mode-option {
    width: 100%;
    max-width: 320px;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Large Mobile Devices (428px - 767px) */
@media (min-width: 428px) and (max-width: 767px) {
  .header-content {
    justify-content: center;
    text-align: center;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .mode-options {
    justify-content: center;
    gap: var(--space-4);
  }
  
  .results-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .results-actions {
    justify-content: center;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Tablet Optimizations (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5);
  }
  
  .mode-options {
    justify-content: center;
    gap: var(--space-5);
  }
  
  .results-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-5);
  }
  
  .player-stats {
    font-size: var(--text-sm);
  }
  
  .stats-table th,
  .stats-table td {
    padding: var(--space-2);
  }
}

/* Mobile Navigation Enhancements */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-2);
}

@media (max-width: 767px) {
  .mobile-nav-toggle {
    display: block;
  }
  
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--space-4);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-medium) ease;
  }
  
  .header-nav.mobile-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--duration-normal) ease;
  }
  
  .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Mobile-optimized form inputs */
@media (max-width: 767px) {
  input[type="file"] {
    /* Ensure file input works well on mobile */
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Optimize date range selector for mobile */
  .date-range-selector {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .date-range-btn {
    width: 100%;
    min-height: 48px;
    font-size: var(--text-base);
  }
  
  /* Mobile-optimized analytics cards */
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  
  .summary-card {
    padding: var(--space-3);
  }
  
  .summary-value {
    font-size: var(--text-xl);
  }
  
  .summary-label {
    font-size: var(--text-xs);
  }
  
  /* Charts responsive behavior */
  .chart-container {
    margin-bottom: var(--space-4);
  }
  
  .chart-container canvas {
    max-height: 250px;
  }
  
  /* Activity table mobile optimization */
  .activity-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .activity-header {
    min-width: 600px;
    font-size: var(--text-xs);
  }
  
  .activity-header span {
    padding: var(--space-2);
  }
}

/* PWA Install Banner Mobile Optimization */
@media (max-width: 767px) {
  .pwa-install-banner {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  
  .pwa-install-content {
    text-align: center;
  }
  
  .pwa-install-actions {
    width: 100%;
    justify-content: center;
  }
  
  .pwa-install-btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Mobile keyboard optimizations */
@media (max-width: 767px) {
  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Optimize viewport on keyboard open */
  .ios-keyboard-open {
    height: 100vh;
    overflow: hidden;
  }
}

/* Touch-friendly loading states */
.mobile-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18, 18, 18, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.mobile-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--electric-orange);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

.mobile-loading-text {
  color: white;
  font-size: var(--text-lg);
  text-align: center;
  margin-bottom: var(--space-2);
}

.mobile-loading-progress {
  color: var(--cloud-grey);
  font-size: var(--text-sm);
  text-align: center;
}

/* Safe area handling for devices with notches */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  }
  
  .pwa-install-banner {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  
  .footer {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}

/* Haptic feedback simulation */
.haptic-light {
  animation: haptic-pulse-light 0.1s ease;
}

.haptic-medium {
  animation: haptic-pulse-medium 0.15s ease;
}

.haptic-heavy {
  animation: haptic-pulse-heavy 0.2s ease;
}

@keyframes haptic-pulse-light {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes haptic-pulse-medium {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes haptic-pulse-heavy {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Mobile-specific error states */
@media (max-width: 767px) {
  .error-banner {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    background: var(--miss-red);
    color: white;
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform var(--duration-medium) ease;
  }
  
  .error-banner.show {
    transform: translateY(0);
  }
  
  .success-banner {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    background: var(--made-green);
    color: white;
    padding: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform var(--duration-medium) ease;
  }
  
  .success-banner.show {
    transform: translateY(0);
  }
}

/* Mobile gesture support */
.swipe-indicator {
  position: relative;
  overflow: hidden;
}

.swipe-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: swipe-hint 2s ease-in-out infinite;
}

@keyframes swipe-hint {
  0% { left: -100%; }
  50% { left: 0; }
  100% { left: 100%; }
}

/* Mobile pull-to-refresh indicator */
.pull-to-refresh {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-medium) ease;
}

.pull-to-refresh.active {
  top: 20px;
  background: var(--electric-orange);
}

.pull-to-refresh svg {
  width: 20px;
  height: 20px;
  color: white;
  transition: transform var(--duration-medium) ease;
}

.pull-to-refresh.active svg {
  transform: rotate(180deg);
}

/* Orientation change handling */
@media (orientation: landscape) and (max-height: 500px) {
  .header {
    padding: var(--space-2) var(--space-4);
  }
  
  .logo {
    height: 32px;
  }
  
  .main-content {
    padding: var(--space-4);
  }
  
  .upload-area {
    padding: var(--space-4);
  }
  
  .upload-title {
    font-size: var(--text-xl);
  }
  
  .mode-options {
    flex-direction: row;
    gap: var(--space-3);
  }
  
  .mode-card {
    padding: var(--space-3);
  }
  
  .processing-animation {
    height: 80px;
  }
}