/**
 * Device Compatibility CSS
 * Industry-standard compatibility for all device types
 * 
 * Standards:
 * - iOS: Minimum 44x44px touch targets (Apple HIG)
 * - Android: Minimum 48x48dp touch targets (Material Design)
 * - Font size: Minimum 16px to prevent iOS zoom
 * - Viewport: Proper meta tags for all devices
 */

/* ========================================
 * GLOBAL TOUCH TARGET STANDARDS
 * ======================================== */

/* Industry Standard: Minimum 44x44px touch targets for mobile */
/* iOS HIG: 44x44pt minimum, Android Material: 48x48dp minimum */
/* We use 44px as the minimum to satisfy both standards */

/* Base button touch targets */
button,
a[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  /* Ensure minimum touch target size on mobile */
  min-height: 30px;
  min-width: 60px;
}

/* Touch device specific: Ensure proper touch targets */
@media (hover: none) and (pointer: coarse) {
  button,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 1rem !important; /* Ensure adequate padding */
  }
  
  /* Small screens: Allow slightly smaller but still accessible */
  @media (max-width: 375px) {
    button,
    a[role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"] {
      min-height: 40px !important; /* Slightly reduced for very small screens */
      min-width: 40px !important;
      padding: 0.625rem 0.875rem !important;
    }
  }
}

/* ========================================
 * INPUT FIELD STANDARDS
 * ======================================== */

/* Industry Standard: Minimum 16px font-size to prevent iOS zoom */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  min-height: 44px; /* Minimum touch target */
  padding: 0.75rem 1rem; /* Adequate padding for touch */
}

/* Touch device specific: Ensure proper input sizing */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important; /* Critical: Prevent iOS zoom */
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }
  
  /* Small screens: Slightly reduced but still accessible */
  @media (max-width: 375px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
      font-size: 16px !important; /* Still 16px to prevent zoom */
      min-height: 40px !important; /* Slightly reduced height */
      padding: 0.625rem 0.875rem !important;
    }
  }
}

/* ========================================
 * RESPONSIVE BREAKPOINTS (Industry Standard)
 * ======================================== */

/* Standard breakpoints:
 * - Mobile: 320px-767px (most common: 375px, 414px)
 * - Tablet: 768px-1023px (most common: 768px, 1024px)
 * - Desktop: 1024px+ (most common: 1280px, 1920px)
 */

/* Mobile First Approach */
@media (max-width: 767px) {
  /* Mobile-specific adjustments */
  body {
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-specific adjustments */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Desktop-specific adjustments */
}

/* ========================================
 * TOUCH INTERACTION OPTIMIZATION
 * ======================================== */

/* Optimize touch interactions on mobile */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover delays on touch devices */
  * {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    touch-action: manipulation; /* Optimize touch scrolling */
  }
  
  /* Improve button touch feedback */
  button:active,
  a:active,
  [role="button"]:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ========================================
 * ACCESSIBILITY STANDARDS
 * ======================================== */

/* Ensure focus indicators are visible */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  button,
  a,
  input,
  select,
  textarea {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}