/* Mobile Responsive Enhancements for QR Generator */

/* Extra small screens (320px and up) */
@media (max-width: 475px) {
  /* Hide xs class elements on very small screens */
  .hidden-xs {
    display: none !important;
  }
  
  /* Adjust padding for very small screens */
  .px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Make buttons more touch-friendly */
  button, a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure text doesn't overflow */
  .break-words {
    word-wrap: break-word;
    word-break: break-word;
  }
  
  /* Adjust grid layouts for very small screens */
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Make color inputs more accessible */
  input[type="color"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Small screens (475px and up) */
@media (min-width: 475px) {
  .xs\:block {
    display: block !important;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch devices */
  button, a, input, select, textarea {
    min-height: 44px;
  }
  
  /* Add visual feedback for touch */
  button:active, a:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Canvas responsiveness */
#qrCanvas {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem;
}

/* History cards mobile optimization */
@media (max-width: 640px) {
  .history-card {
    padding: 0.75rem !important;
  }
  
  .history-card .text-xs {
    font-size: 0.7rem !important;
  }
  
  .history-card .text-sm {
    font-size: 0.8rem !important;
  }
}

/* Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}

/* Ensure all containers respect mobile viewport */
.max-w-6xl {
  max-width: 100% !important;
}

/* Mobile viewport adjustments */
@media (max-width: 768px) {
  .lg\:col-span-5, .lg\:col-span-7 {
    grid-column: span 12 !important;
  }
  
  /* Stack columns on mobile */
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Status badge mobile optimization */
@media (max-width: 640px) {
  #statusBadge {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Form elements mobile optimization */
@media (max-width: 640px) {
  input[type="range"] {
    height: 6px;
  }
  
  input[type="text"], input[type="color"], select, textarea {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
}