/**
 * MultiFacet Responsive CSS Fixes
 * Fixes login form positioning on mobile devices
 */

/* Ensure the login form container is properly positioned */
@media screen and (max-width: 768px) {
  /* Fix the main container to be full width and centered */
  #root > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Center the login card and make it full width on mobile */
  [data-testid="login-card"],
  .login-card,
  div[style*="max-width: 400px"],
  div[style*="maxWidth: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
}

/* General mobile fixes for the app */
@media screen and (max-width: 480px) {
  /* Ensure content doesn't overflow */
  body, html, #root {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Fix any absolutely positioned elements */
  [style*="position: absolute"],
  [style*="position:absolute"] {
    max-width: 100vw !important;
  }
  
  /* Ensure flex containers stretch properly */
  [style*="display: flex"],
  [style*="display:flex"] {
    max-width: 100% !important;
  }
}

/* Fix for the login form specifically - target the white card */
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="backgroundColor: rgb(255, 255, 255)"],
div[style*="background: white"],
div[style*="background: rgb(255, 255, 255)"] {
  width: calc(100% - 32px) !important;
  max-width: 400px !important;
  margin: 16px auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  position: relative !important;
}

/* Ensure the splash image doesn't push content */
img[src*="splash"],
div[style*="background-image"] {
  max-height: 50vh !important;
}

/* Mobile-first login layout */
@media screen and (max-width: 768px) {
  /* Stack layout vertically */
  #root > div > div {
    flex-direction: column !important;
  }
  
  /* Login form should be at bottom, full width */
  #root > div > div > div:last-child {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}