/* Mobile-Friendly CSS Overrides for Kayreal */

/* Prevent iOS zoom on input focus by ensuring font size is at least 16px */
input[type="email"],
input[type="password"],
input[type="text"],
textarea,
select {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #1f2937;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  zoom: 1 !important;
  transform: scale(1) !important;
}

/* Focus states for inputs */
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: #ffffff;
}

/* Dark mode input styles */
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="text"],
.dark textarea,
.dark select {
  background-color: #1a1a1a !important;
  border-color: #374151 !important;
  color: #ffffff !important;
  font-size: 16px !important;
}

.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="text"]:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #6b7280 !important;
  background-color: #2d2d2d !important;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1) !important;
}

.dark input::placeholder {
  color: #9ca3af !important;
  font-size: 16px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  /* Reduce margins and padding on mobile */
  .max-w-sm {
    max-width: 100% !important;
    margin: 0 auto;
  }
  
  /* Adjust container padding for mobile */
  .md\:px-10 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Reduce logo size on mobile */
  .h-24 {
    height: 5rem !important; /* Smaller logo on mobile */
  }
  
  .mb-12 {
    margin-bottom: 2rem !important; /* Less space on mobile */
  }
  
  /* Ensure buttons are properly sized on mobile */
  button {
    font-size: 16px !important;
    padding: 12px 16px !important;
    min-height: 48px; /* Touch-friendly button size */
    width: 100%;
    border-radius: 8px;
  }
  
  /* Improve touch targets */
  a, button, input, textarea, select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Form spacing on mobile */
  .space-y-3 > * + * {
    margin-top: 1rem !important;
  }
}

/* Prevent text selection on buttons and non-text elements on mobile */
@media (max-width: 640px) {
  button, .button, [role="button"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific input styling */
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    zoom: 1 !important;
  }
  
  /* Prevent iOS zoom */
  input, textarea, select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
  
  /* Force font size on all input elements */
  * input, * textarea, * select {
    font-size: 16px !important;
  }
}

/* Accessibility improvements for mobile */
@media (max-width: 640px) {
  /* Improve contrast and readability */
  .text-sm {
    font-size: 14px !important;
    line-height: 1.4;
  }
  
  /* Better error message display on mobile */
  #loginError, #registerError {
    font-size: 14px !important;
    padding: 12px !important;
    margin-top: 8px;
    border-radius: 8px;
  }
  
  /* Modal adjustments for mobile */
  #inviteModal .bg-white {
    margin: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
    border-radius: 12px;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 640px) and (orientation: landscape) {
  .h-screen {
    min-height: 100vh;
    height: auto !important;
  }
  
  .justify-center {
    justify-content: flex-start !important;
    padding-top: 2rem;
  }
  
  .mb-12 {
    margin-bottom: 1rem !important;
  }
  
  .h-24 {
    height: 3rem !important;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  /* Larger touch targets */
  button, a, input, textarea, select {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Better hover states for touch devices */
  button:hover, a:hover {
    transform: none !important;
  }
  
  button:active, a:active {
    transform: scale(0.98);
  }
}

/* Fix for viewport height on mobile browsers */
@media screen and (max-width: 640px) {
  .h-screen {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  html {
    height: -webkit-fill-available;
  }
}

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

/* Ensure form doesn't cause horizontal scroll */
.max-w-sm {
  max-width: min(24rem, calc(100vw - 2rem));
}

/* Override any Tailwind or other CSS that might affect input font size */
input.w-full,
input.\!w-full,
#email,
#password,
#username,
form input[type="email"],
form input[type="password"],
form input[type="text"] {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  zoom: 1 !important;
}

/* Additional mobile zoom prevention */
@media screen and (max-width: 640px) {
  input,
  textarea,
  select,
  button {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
  
  /* Prevent any zoom on these specific elements */
  #email,
  #password,
  #username,
  input[name="email"],
  input[name="password"],
  input[name="username"] {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    zoom: 1 !important;
    transform: scale(1) !important;
  }
}