/*
 * 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.
 *
 *= require browser-compatibility
 *= require tabulator
 */

/* Link to Tabulator CSS directly from node_modules */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Apply Inter font to the body with iOS compatibility fixes */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Fix for iOS Safari overscroll behavior */
  -webkit-overflow-scrolling: touch;
  /* Improve tap target behavior */
  touch-action: manipulation;
}

/* Standardized form input styles with iOS compatibility */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
textarea,
select {
  padding: 0.5rem 0.875rem !important;
  /* Fix iOS Safari styling issues */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem; /* Match your design */
  /* Prevent zoom on focus in iOS Safari */
  font-size: 16px;
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Fix for iOS Safari select elements */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23444' d='M8 12L2 6h12z'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: 2rem !important;
}

/* Fix for iOS buttons */
button, 
[type="button"], 
[type="reset"], 
[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Fix for iOS Safari hover states */
@media (hover: hover) {
  a:hover, button:hover {
    opacity: 0.8;
  }
}

/* Fix for iOS Safari tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}