/* ============================================================
   AUTH PAGES RESPONSIVE CSS - Login, Signup, Password Reset
   Strategy: preserve existing design, only fix layout breaks
   on screens where content overflows or gets too cramped.
   ============================================================ */

/* ---- Logo scales down on small screens ---- */
.logo-img {
  width: clamp(90px, 16vw, 220px) !important;
  height: auto !important;
}

/* ---- Signup illustration scales down ---- */
.device-img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---- Input pill: prevent overflow on tiny screens ---- */
.pill {
  min-width: 0;
}
.pill input {
  min-width: 0;
  width: 100%;
}

/* ---- max-w containers fill screen on mobile ---- */
.max-w-\[430px\] {
  max-width: 100% !important;
}
.w-full.max-w-md {
  max-width: 100% !important;
}

/* ============================================================
   LARGE SCREENS  ≥ 1920px
   ============================================================ */
@media (min-width: 1920px) {
  .logo-img {
    width: 260px !important;
  }
}

@media (min-width: 2560px) {
  .logo-img {
    width: 320px !important;
  }
  .login-gradient,
  .login-title {
    font-size: 1.8rem !important;
  }
  .glow-text {
    font-size: 2rem !important;
  }
  .btn-pill {
    font-size: 1.1rem !important;
    padding: 10px 40px !important;
  }
}

/* ============================================================
   TABLET PORTRAIT  768px – 1023px
   ============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Signup: left panel shrinks, right panel gets more room */
  .col-span-2.p-14.bg-blue-500\/10 {
    padding: 24px !important;
  }
  .col-span-2.p-12 {
    padding: 24px !important;
  }
  .device-img {
    max-width: 220px !important;
  }
}

/* ============================================================
   MOBILE LANDSCAPE  600px – 767px
   ============================================================ */
@media (max-width: 767px) and (min-width: 600px) {
  /* Signup: hide illustration, show only form */
  .col-span-2.p-14.bg-blue-500\/10 {
    display: none !important;
  }
  /* form column spans full width */
  .bg-white.rounded-lg.overflow-hidden.card-shadow.w-\[clamp\(260px\,90vw\,1200px\)\].main-card.grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  .col-span-2.p-12 {
    padding: 20px !important;
  }
  .logo-img {
    width: 120px !important;
  }
}

/* ============================================================
   MOBILE PORTRAIT  ≤ 599px
   ============================================================ */
@media (max-width: 599px) {
  /* Login card: use most of the screen width */
  .bg-white.rounded-lg.overflow-hidden.card-shadow.main-card {
    width: 92vw !important;
    min-width: 0 !important;
  }
  .bg-white.rounded-lg.overflow-hidden.card-shadow.main-card .p-6 {
    padding: 16px !important;
  }

  /* Signup card: single column, hide illustration */
  .bg-white.rounded-lg.overflow-hidden.card-shadow.w-\[clamp\(260px\,90vw\,1200px\)\].main-card.grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    width: 95vw !important;
  }
  .col-span-2.p-14.bg-blue-500\/10 {
    display: none !important;
  }
  .col-span-2.p-12 {
    padding: 16px !important;
  }

  /* logo */
  .logo-img {
    width: 100px !important;
  }

  /* background circles shrink so they don't cause scroll */
  .bg-circle-left-1  { width: 180px !important; height: 180px !important; }
  .bg-circle-left-2  { width: 155px !important; height: 155px !important; }
  .bg-circle-left-3  { width: 130px !important; height: 130px !important; }
  .bg-circle-right-1 { width: 155px !important; height: 155px !important; }
  .bg-circle-right-2 { width: 130px !important; height: 130px !important; }
  .bg-circle-right-3 { width: 105px !important; height: 105px !important; }
}

/* ============================================================
   VERY SMALL  ≤ 380px
   ============================================================ */
@media (max-width: 380px) {
  .logo-img {
    width: 80px !important;
  }
  .bg-white.rounded-lg.overflow-hidden.card-shadow.main-card .p-6 {
    padding: 12px !important;
  }
  .col-span-2.p-12 {
    padding: 12px !important;
  }
  /* pill inputs don't overflow */
  .pill {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}