/**
 * Mobile Viewport Fixes
 * Specific fixes for mobile viewport issues
 */

/* ===== GLOBAL VIEWPORT FIXES ===== */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix for app container */
#app-container {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Fix for container */
.container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding: 1rem !important;
}

/* Fix for buttons */
.button {
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fix for forms */
.login-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 1.25rem !important;
}

/* Fix for inputs */
input:not([type="hidden"]) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== MOBILE SPECIFIC FIXES ===== */
@media screen and (max-width: 480px) {
  /* Reduce padding for better fit */
  .container {
    padding: 0.75rem !important;
  }
  
  /* Adjust button sizes */
  .button {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
  }
  
  /* Adjust heading sizes */
  h1 {
    font-size: 1.8rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  /* Ensure register button fits */
  .register-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ===== NARROW MOBILE FIXES (320px) ===== */
@media screen and (max-width: 320px) {
  /* Further reduce padding */
  .container {
    padding: 0.5rem !important;
  }
  
  /* Smaller buttons */
  .button {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Smaller headings */
  h1 {
    font-size: 1.6rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
}

/* ===== iOS SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
  /* iOS specific fixes */
  html, body {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Fix for iOS notch */
  .container {
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }
  
  /* Fix for iOS buttons */
  .button {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* ===== ANDROID SPECIFIC FIXES ===== */
@supports not (-webkit-touch-callout: none) {
  /* Android specific fixes */
  body {
    padding-bottom: 16px !important; /* Add padding for gesture area */
  }
}

/* ===== PWA MODE SPECIFIC FIXES ===== */
@media (display-mode: standalone) {
  /* PWA specific fixes */
  html, body {
    position: fixed !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  #app-container {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== VIEWPORT HEIGHT FIX ===== */
:root {
  --vh: 1vh;
}

.vh-fix {
  height: calc(var(--vh, 1vh) * 100) !important;
}

#app-container.vh-fix {
  height: calc(var(--vh, 1vh) * 100) !important;
}