/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hotwire Native specific styles */
@media (hotwire-native) {
  .web-only { 
    display: none !important; 
  }
  
  .native-hidden { 
    display: none !important; 
  }
  
  /* Optimize forms for mobile */
  .form-container {
    padding: 1rem;
    margin: 0;
  }
  
  /* Remove web-specific elements */  
  .footer { 
    display: none; 
  }
  
  .desktop-sidebar { 
    display: none; 
  }
  
  /* Improve touch targets */
  button, 
  .btn,
  input[type="submit"] {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* Better form spacing on mobile */
  .form-group,
  .field {
    margin-bottom: 1.5rem;
  }
  
  /* Optimize input fields */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px;
    border-radius: 8px;
  }
}

.native-only { 
  display: none; 
}

@media (hotwire-native) {
  .native-only { 
    display: block; 
  }
}