/* Mobile Optimization Utilities for ZodiaGlow */

/* Ensure proper touch targets on mobile */
@media (max-width: 640px) {
  /* Minimum touch target size */
  button,
  a[role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improve form input sizing */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
  }

  /* Ensure readable text */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

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

  /* Improve table responsiveness */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack cards vertically */
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce padding on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Improve modal sizing */
  .modal-content {
    max-width: 95vw;
    margin: 1rem;
  }

  /* Better spacing for mobile */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  /* Improve button spacing */
  .button-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .button-group > * {
    width: 100%;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Adjust grid layouts for tablets */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape mobile optimizations */
@media (max-width: 896px) and (orientation: landscape) {
  /* Reduce header height in landscape */
  header {
    height: 3rem;
  }

  /* Adjust modal height */
  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Dark mode mobile adjustments */
@media (prefers-color-scheme: dark) and (max-width: 640px) {
  /* Reduce brightness for OLED screens */
  body {
    background-color: #000;
  }

  /* Improve contrast */
  .card {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  header {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}