/* Responsive fixes for web/desktop view */

/* Constrain the main app container on large screens */
@media (min-width: 769px) {
  #root {
    max-width: 480px !important;
    margin: 0 auto !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
  }

  /* Login container adjustments */
  .login-container {
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  .login-box {
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* Button sizing fixes */
  button {
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Input field sizing */
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    max-width: 400px !important;
  }

  /* Mobile app banner on desktop */
  .mobile-app-banner {
    max-width: 480px !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* Even larger screens - keep it mobile-sized */
@media (min-width: 1200px) {
  #root {
    max-width: 430px !important;
  }
}