/**
 * CSS fixes for browser compatibility and selector issues
 */

/* Fix for theme variables */
:root[data-theme="light"] {
  --chakra-colors-chakra-body-bg: #f7fafc;
  --chakra-colors-chakra-body-text: #1a202c;
}

:root[data-theme="dark"] {
  --chakra-colors-chakra-body-bg: #1a202c;
  --chakra-colors-chakra-body-text: #f7fafc;
}

/* Common browser compatibility fixes */
html {
  /* Removed text-size-adjust property as it causes warnings */
  font-size: 100%;
}

body {
  -webkit-font-smoothing: antialiased; /* Keep this as Safari still uses it */
  text-rendering: optimizeLegibility; /* Alternative to font-smoothing */
}

/* Fix for placeholder text in various browsers */
::placeholder {
  color: #a0aec0;
  opacity: 1;
}

/* Modern browsers now use ::placeholder instead of vendor prefixes */

/* Fix for select appearance */
select {
  appearance: none; /* Standard property */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M3.5 4.5L6 7l2.5-2.5L9 5l-3 3-3-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2rem;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px !important; /* Prevents zooming on iOS */
  }
  
  /* Increase tap target sizes on mobile */
  button, 
  [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Fix for mobile table display */
@media (max-width: 640px) {
  .mobile-optimize-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Keep this as iOS Safari still uses it */
  }
}