/* /static/css/login.css */

/* Original styles (keep these for larger screens) */
.u-section-1 .u-sheet-1 {
  min-height: 464px;
}

.u-section-1 .u-layout-wrap-1 {
  width: 700px;
  margin: 0 198px 60px auto;
}

.u-section-1 .u-layout-cell-1 {
  min-height: 489px;
}

.u-section-1 .u-container-layout-1 {
  padding: 30px 0;
}

.u-section-1 .u-image-1 {
  width: 177px;
  height: 222px;
  margin: 0 0 0 auto;
}

.u-section-1 .u-layout-cell-2 {
  min-height: 489px;
}

.u-section-1 .u-container-layout-2 {
  padding: 30px 0;
}

.u-section-1 .u-form-1 {
  height: 277px;
  margin: 14px 12px 0 0;
}

.u-section-1 .u-input-1 {
  background-image: none;
}

.u-section-1 .u-input-2 {
  background-image: none;
}

.u-section-1 .u-btn-1 {
  width: 100%;
  padding: 10px 30px;
}

.u-section-1 .u-btn-2 {
  border-style: none none solid;
  font-size: 1rem;
  margin: -9px 20px 0 auto;
  padding: 0;
}

.u-section-1 .u-btn-3 {
  border-style: none none solid;
  align-self: center;
  font-size: 1rem;
  margin: -26px auto 0 14px;
  padding: 0;
}

/* --- Media Queries for Responsiveness --- */

@media (max-width: 1199px) {
  .u-section-1 .u-layout-wrap-1 {
    width: 90%; /* Make it fluid */
    margin: 1px auto 60px; /* Center it */
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: 400px;
  }

  .u-section-1 .u-image-1 {
    height: 223px;
    /* Ensure image respects its container */
    max-width: 100%;
    height: auto;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: 470px;
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    min-height: auto; /* Allow height to adjust naturally */
    padding-top: 20px; /* Add some top padding if needed */
    padding-bottom: 20px; /* Add some bottom padding if needed */
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 95%; /* Even wider for smaller desktops/tablets */
    margin: 20px auto; /* Center with more top/bottom margin */
  }

  /* Force columns to stack on top of each other */
  .u-layout-row {
    flex-direction: column !important; /* Make columns stack */
    align-items: center; /* Center items when stacked */
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: auto; /* Remove fixed min-height for stacked cells */
    width: 100% !important; /* Take full width when stacked */
    margin-bottom: 30px; /* Add space between image and form */
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: auto; /* Remove fixed min-height */
    width: 100% !important; /* Take full width when stacked */
  }

  /* Adjust image for stacking */
  .u-section-1 .u-image-1 {
    width: 150px; /* Reduce image size if it's too big */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center image */
  }

  /* Adjust form container for stacking */
  .u-section-1 .u-form-1 {
    height: auto; /* Allow form height to adjust */
    margin: 0 auto; /* Center the form */
    width: 100% !important; /* Ensure form takes full width */
    max-width: 400px; /* Optional: limit max width for better readability */
  }

  .u-section-1 .u-container-layout-1,
  .u-section-1 .u-container-layout-2 {
    padding: 15px; /* Reduce padding inside these containers */
  }
}

@media (max-width: 767px) {
  .u-section-1 .u-sheet-1 {
    min-height: auto; /* Allow height to adjust */
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 95%; /* Still fluid, slightly smaller */
    margin: 5px auto;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: auto;
    width: 100% !important;
    margin-bottom: 20px; /* Less space between image and form on smaller screens */
  }

  .u-section-1 .u-image-1 {
    width: -50px; /* Further reduce image size */
    height: 60px;
    margin: 0 auto; /* Keep centered */
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: auto;
    width: 100% !important;
  }

  .u-section-1 .u-container-layout-1,
  .u-section-1 .u-container-layout-2 {
    padding: 5px; /* Further reduce padding */
  }

  .u-section-1 .u-form-1 {
    width: 100% !important;
    margin-top: 0; /* Remove negative margin */
    margin-left: 0;
    margin-right: 0;
  }

  /* Adjust specific margins for form elements if needed */
  .u-form-group {
    margin-bottom: 10px; /* Reduce space between form fields */
  }

  .u-section-1 .u-btn-2,
  .u-section-1 .u-btn-3 {
    margin: 5px auto; /* Center buttons and give them some space */
    width: 80%; /* Make buttons take more width if needed */
    display: block; /* Make buttons block level to take full width and stack */
  }
}

@media (max-width: 575px) {
  .u-section-1 .u-sheet-1 {
    min-height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .u-section-1 .u-layout-wrap-1 {
    width: 50%; /* Almost full width for very small screens */
    margin: 10px auto;
  }

  .u-section-1 .u-layout-cell-1 {
    min-height: -10px;
    margin-bottom: 0px; /* Smaller gap */
  }

  .u-section-1 .u-image-1 {
    width: -60px; /* Smallest image size */
    height: 50%;
    margin-top: 0; /* Remove negative margin */
    margin-left: auto; /* Center it */
    margin-right: auto;
  }

  .u-section-1 .u-layout-cell-2 {
    min-height: auto;
  }

  .u-section-1 .u-form-1 {
    margin-top: 0; /* Remove negative margin from form */
    width: 100%; /* Ensure form is full width */
  }

  .u-section-1 .u-btn-2,
  .u-section-1 .u-btn-3 {
    font-size: 0.8rem; /* Smaller font for very small screens */
    padding: 0px 5px; /* Smaller padding for buttons */
    width: 90%; /* Adjust button width */
  }
}