/* =========================================== */
/* MOBILE KEYBOARD OPTIMIZATIONS */
/* Prevents zoom on input focus, improves UX */
/* =========================================== */

/* ===== PREVENT ZOOM ON INPUT FOCUS (iOS) ===== */
/* iOS Safari zooms in when input font-size < 16px */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px !important; /* Prevents zoom on iOS */
}

@media (max-width: 768px) {
  /* Ensure all inputs have minimum font size */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Larger touch targets for mobile */
  input,
  textarea,
  select,
  button {
    min-height: 44px; /* WCAG AAA touch target */
    padding: 0.75rem 1rem;
  }
  
  /* Better spacing for form elements */
  .form-control,
  .form-select {
    padding: 0.75rem 1rem;
    font-size: 16px;
  }
  
  /* Improve textarea usability */
  textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  /* Better input focus states */
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--bs-primary, #6366f1);
    outline-offset: 2px;
    border-color: var(--bs-primary, #6366f1);
  }
}

/* ===== KEYBOARD APPEARANCE HANDLING ===== */
/* Adjust viewport when keyboard appears */
@media (max-width: 768px) {
  /* Prevent layout shift when keyboard appears */
  html {
    height: 100%;
    height: -webkit-fill-available;
  }
  
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Keep important content visible above keyboard */
  .main-content {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ===== INPUT MODE ATTRIBUTES (via JS) ===== */
/* These will be applied via JavaScript for better keyboard types */
/* 
  inputmode="numeric" - numeric keypad
  inputmode="tel" - phone keypad
  inputmode="email" - email keyboard
  inputmode="url" - URL keyboard
  inputmode="search" - search keyboard
*/

/* ===== AUTOCOMPLETE OPTIMIZATIONS ===== */
input[autocomplete="email"],
input[type="email"] {
  inputmode: email;
}

input[autocomplete="tel"],
input[type="tel"] {
  inputmode: tel;
}

input[autocomplete="url"],
input[type="url"] {
  inputmode: url;
}

/* ===== SEARCH INPUTS ===== */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  inputmode: search;
}

/* Remove iOS search input styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ===== NUMBER INPUTS ===== */
input[type="number"] {
  inputmode: numeric;
  -moz-appearance: textfield; /* Remove spinner on Firefox */
}

/* Remove spinner on Chrome/Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== DATE/TIME INPUTS ===== */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  font-size: 16px !important; /* Prevent zoom */
  min-height: 44px;
}

/* ===== FOCUS VISIBLE FOR KEYBOARD NAVIGATION ===== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--bs-primary, #6366f1);
  outline-offset: 2px;
}

/* ===== PLACEHOLDER STYLING ===== */
input::placeholder,
textarea::placeholder {
  opacity: 0.6;
  font-size: 16px; /* Match input font size */
}

/* ===== DISABLED STATE ===== */
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] textarea:disabled,
[data-bs-theme="dark"] select:disabled {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ===== FORM VALIDATION STATES ===== */
input:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #ef4444;
}

input:valid:not(:focus):not(:placeholder-shown),
textarea:valid:not(:focus):not(:placeholder-shown) {
  border-color: #10b981;
}

/* ===== SUBMIT BUTTON OPTIMIZATION ===== */
button[type="submit"],
input[type="submit"] {
  min-height: 48px; /* Larger for mobile */
  font-size: 16px;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===== LABEL POSITIONING ===== */
@media (max-width: 768px) {
  label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
  }
  
  /* Better spacing for form groups */
  .form-group,
  .mb-3 {
    margin-bottom: 1.25rem !important;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select,
  button {
    transition: none !important;
  }
}