/* Mobile responsiveness for login page */

@media (max-width: 767px) {
    /* Make the container take full width on mobile */
    .container {
        width: 95%;
        padding-left: 10px;
        padding-right: 10px;
    }
    /* Card adjustments */
    .login-card {
        margin: 0 10px;
    }
    
    /* Header and title adjustments */
    .card-header h3 {
        font-size: 1.5rem;
    }
      /* Form control size adjustments */
    .form-control-lg, .input-group-text {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        height: 38px;
    }
      /* Button size adjustments */
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
    }
    
    /* Make the login button more touch-friendly */
    .btn-primary.btn-lg {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Input group spacing */
    .input-group {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .input-group > .form-control {
        flex: 1;
    }
    
    /* Eye button styling */
    .toggle-btn, #togglePassword {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        height: 32px !important;
        width: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem !important;
        margin-left: 0.25rem !important;
    }
      .toggle-btn i, #togglePassword i {
        font-size: 0.9rem;
        line-height: 1;
    }
    
    /* Card body padding reduction */
    .card-body {
        padding: 1.25rem !important;
    }
    
    /* Remember me and forgot password adjustment */
    .form-check-label {
        font-size: 0.9rem;
    }
    
    /* Links size adjustment */
    a.text-decoration-none {
        font-size: 0.9rem;
    }
    
    /* Make the width of the card use more of the screen */
    .col-md-8.col-lg-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Adjust vertical spacing */
    .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Specific fixes for very small screens (under 375px) */
@media (max-width: 374px) {
    .card-header h3 {
        font-size: 1.25rem;
    }
    
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .form-check {
        margin-bottom: 0.5rem;
    }
    
    .btn-lg {
        padding: 0.4rem 0.75rem;
    }
    
    /* Very small screen optimizations */
    .card-body {
        padding: 1rem !important;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
    
    ::placeholder {
        font-size: 0.85rem;
    }
    
    .input-group-text {
        padding: 0.4rem 0.6rem;
    }
    
    /* Make eye button even smaller on tiny screens */
    .toggle-btn, #togglePassword {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.8rem !important;
    }
}

/* iPhone and other mobile devices specific fixes */
@media (max-width: 480px) and (min-height: 568px) {
    /* Prevent zoom on input focus for iOS devices */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Better padding for top and bottom on taller mobile screens */
    .container.py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* iPhone SE and very small height screens */
@media (max-width: 380px) and (max-height: 667px) {
    .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .card-header {
        padding: 0.75rem !important;
    }
}