/* Modern Login Page Styles */

body {
    background-color: #f0f2f5; /* Light grey background for modern feel */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0 !important; /* Override style.css padding */
    margin: 0 !important;
}

.login-page-container {
    background: linear-gradient(135deg, #00b050 0%, #008a3e 100%); /* Gradient background */
    min-height: 100vh;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 450px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.logo-img {
    max-height: 80px;
    object-fit: contain;
}

.login-heading {
    font-weight: 700;
    color: #333;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.5rem;
}

/*
   Input Group Styling - The "Container Border" Approach
   This ensures perfect alignment by putting the border on the container
   and removing it from the children.
*/

.custom-input-group {
    border: 1px solid #ced4da;
    border-radius: 5px;
    overflow: hidden; /* Ensures children don't overflow the rounded corners */
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    display: flex; /* Ensure flex layout for children */
    align-items: center; /* Vertically center children */
}

/* Focus state for the whole group when input is focused */
.custom-input-group:focus-within {
    border-color: #00b050;
    box-shadow: 0 0 0 0.2rem rgba(0, 176, 80, 0.25);
}

.custom-input-group .form-control {
    border: none !important; /* Remove border from input */
    padding: 0 12px; /* Horizontal padding */
    font-size: 1rem;
    height: 50px;
    line-height: normal; /* Reset line-height to avoid huge cursors or layout issues */
    box-shadow: none !important; /* Remove default bootstrap focus shadow */
    background-color: transparent;
    text-align: left !important; /* Force left alignment */
    flex: 1; /* Take up remaining space */
    width: auto; /* Reset width */
    margin: 0 !important; /* Reset margin from style.css */
}

.custom-input-group .input-group-text {
    border: none !important; /* Remove border from icon box */
    background-color: white;
    width: 50px;
    height: 50px; /* Match input height */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.login-btn {
    background-color: #343a40; /* Dark neutral color (Bootstrap dark) */
    border-color: #343a40;
    font-weight: 600;
    padding: 12px 40px;
    transition: all 0.3s ease;
    height: 50px; /* Match input height */
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 200px;
    border-radius: 5px; /* Square (slightly rounded) to match inputs */
    color: white;

    /* Fix alignment issues caused by style.css */
    display: inline-block;
    width: auto;
    margin: 0 !important; /* Override style.css input.btn margin */
}

.login-btn:hover {
    background-color: #23272b; /* Slightly darker on hover */
    border-color: #1d2124;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.otp-input {
    width: 45px !important; /* Force width to override form-control */
    height: 50px;
    font-size: 1.5rem;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: border-color 0.3s ease;
    text-align: center;
}

.otp-input:focus {
    border-color: #00b050;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 176, 80, 0.25);
}

/* Forgot Password Link */
.forgot-password-link {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.forgot-password-link:hover {
    color: #00b050;
    text-decoration: underline;
}

/* Alert Styles */
.alert {
    border-radius: 10px;
    font-size: 0.9rem;
    border: none;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-info {
    background-color: #cff4fc;
    color: #055160;
}

.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

.alert-warning {
    background-color: #fff3cd;
    color: #664d03;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-page-container {
        padding: 15px;
        /* Move content to the top on mobile to avoid keyboard covering inputs */
        justify-content: flex-start !important;
        padding-top: 60px;
    }

    .login-card {
        padding: 30px 20px;
    }

    .logo-img {
        max-height: 70px;
    }

    .login-heading {
        font-size: 1.8rem;
    }

    .custom-input-group .form-control {
        height: 50px; /* Reverted to 50px to prevent box becoming too high */
        line-height: normal;
        font-size: 1.1rem;
        padding: 0 15px;
    }

    .custom-input-group .input-group-text {
        height: 50px; /* Reverted to 50px */
        width: 50px; /* Reverted to 50px */
        font-size: 1.2rem;
    }

    .login-btn {
        height: 60px;
        font-size: 1.2rem;
        width: 100%; /* Full width for easier tapping on mobile */
        padding: 0; /* Reset padding since we are setting width */
    }

    .otp-input {
        height: 60px;
        width: 50px !important;
    }

    .forgot-password-link {
        font-size: 1rem;
        padding: 10px 0;
    }
}