/* Mobile-First UI/UX Enhancements for Etail Depot */

/* Touch Target Optimization */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Enhanced Button Spacing for Mobile */
@media (max-width: 768px) {
  .btn-mobile {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 48px;
  }
  
  .btn-mobile-lg {
    padding: 20px 32px;
    font-size: 18px;
    min-height: 56px;
  }
}

/* Mobile Typography Improvements */
@media (max-width: 768px) {
  /* Prevent zoom on iOS when focusing inputs */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Better reading sizes */
  .text-mobile-lg { font-size: 18px; line-height: 1.6; }
  .text-mobile-xl { font-size: 20px; line-height: 1.5; }
  .text-mobile-2xl { font-size: 24px; line-height: 1.4; }
  .text-mobile-3xl { font-size: 32px; line-height: 1.3; }
}

/* Mobile Form Enhancements */
@media (max-width: 768px) {
  .form-mobile {
    padding: 16px 20px;
    min-height: 56px;
    border-radius: 12px;
  }
  
  .form-group-mobile {
    margin-bottom: 24px;
  }
  
  .form-label-mobile {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
  }
}

/* Mobile Card Spacing */
@media (max-width: 768px) {
  .card-mobile {
    padding: 20px;
    margin-bottom: 16px;
    border-radius: 16px;
  }
  
  .card-mobile-lg {
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 20px;
  }
}

/* Mobile Navigation Enhancements */
@media (max-width: 768px) {
  .nav-mobile-item {
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 12px;
    margin-bottom: 4px;
  }
  
  .nav-mobile-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
  }
}

/* Mobile Table/List Improvements */
@media (max-width: 768px) {
  .table-mobile {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .table-mobile tr {
    border-bottom: 1px solid #e5e7eb;
  }
  
  .table-mobile td {
    padding: 16px 12px;
    font-size: 14px;
  }
  
  /* Stack table on mobile */
  .table-stack {
    display: block;
  }
  
  .table-stack tr {
    display: block;
    margin-bottom: 16px;
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .table-stack td {
    display: block;
    text-align: left;
    padding: 4px 0;
    border: none;
  }
  
  .table-stack td:before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: #374151;
  }
}

/* Mobile Spacing Utilities */
@media (max-width: 768px) {
  .mobile-px-4 { padding-left: 16px; padding-right: 16px; }
  .mobile-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .mobile-px-6 { padding-left: 24px; padding-right: 24px; }
  .mobile-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .mobile-px-8 { padding-left: 32px; padding-right: 32px; }
  .mobile-py-8 { padding-top: 32px; padding-bottom: 32px; }
  
  .mobile-mb-4 { margin-bottom: 16px; }
  .mobile-mb-6 { margin-bottom: 24px; }
  .mobile-mb-8 { margin-bottom: 32px; }
}

/* Mobile Modal/Popup Improvements */
@media (max-width: 768px) {
  .modal-mobile {
    margin: 16px;
    max-width: calc(100vw - 32px);
    border-radius: 20px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  
  .modal-mobile-full {
    margin: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-height: 100vh;
  }
}

/* Floating Action Button Mobile */
@media (max-width: 768px) {
  .fab-mobile {
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  
  .fab-mobile:active {
    transform: scale(0.95);
  }
}

/* Mobile Loading States */
.loading-mobile {
  padding: 20px;
  text-align: center;
}

.loading-mobile .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Mobile Success/Error States */
@media (max-width: 768px) {
  .alert-mobile {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 16px;
  }
  
  .alert-mobile-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }
  
  .alert-mobile-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }
  
  .alert-mobile-warning {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fed7aa;
  }
}

/* Mobile Scroll Indicators */
.scroll-indicator-mobile {
  position: sticky;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #1e40af);
  z-index: 100;
  transform-origin: left;
}

/* Safe Area Support for iOS */
@supports (padding: max(0px)) {
  .safe-area-inset-top {
    padding-top: max(20px, env(safe-area-inset-top));
  }
  
  .safe-area-inset-bottom {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  
  .safe-area-inset-left {
    padding-left: max(16px, env(safe-area-inset-left));
  }
  
  .safe-area-inset-right {
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Mobile Accessibility Improvements */
@media (max-width: 768px) {
  /* Larger focus indicators for mobile */
  .focus-mobile:focus {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
  }
  
  /* Better contrast for mobile */
  .contrast-mobile {
    color: #111827;
    background-color: #ffffff;
  }
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .reduced-motion {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Optimize transforms for mobile */
  .mobile-transform {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
}