/* Mobile Optimization Styles */

/* Hide scrollbar for horizontal navigation on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Smooth scrolling for navigation tabs */
.overflow-x-auto {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Mobile-friendly touch targets */
@media (max-width: 640px) {
  button, a {
    min-height: 44px; /* iOS recommended touch target size */
  }
  
  /* Better spacing for mobile */
  .mobile-spacing {
    padding: 0.75rem;
  }
  
  /* Prevent text selection on double tap */
  button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Mobile tab layout: vertical icon + text */
  [id^="tab-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop tab layout: horizontal icon + text */
@media (min-width: 641px) {
  [id^="tab-"] {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

/* Active tab indicator on mobile */
@media (max-width: 640px) {
  [id^="tab-"].border-blue-600 {
    background-color: rgba(37, 99, 235, 0.05);
  }
}

/* Sticky header on mobile */
@media (max-width: 640px) {
  header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* Form inputs on mobile */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Modal optimization for mobile */
@media (max-width: 640px) {
  /* Full width modal on mobile */
  .fixed.inset-0 > div {
    max-width: 100%;
    max-height: 95vh;
    margin: 0;
  }
  
  /* Larger touch target for close button */
  .fixed.inset-0 button {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Better spacing for modal content */
  .fixed.inset-0 .p-6 {
    padding: 1rem;
  }
  
  /* Fixed bottom button on mobile */
  .fixed.inset-0 .sticky.bottom-0 {
    position: sticky;
    bottom: 0;
  }
}