/*
 * File: public/assets/css/mobile/login.css
 * Description: Specific styles for the admin login form on mobile and small devices (<= 768px).
 * Overrides or additions to public/assets/css/desktop/login.css for mobile optimization.
 * This file is included *only* when the screen size is small.
 */

/* Force body to align content to the top instead of center-aligning vertically,
   which is better for content heavy pages or forms on small screens. */
body {
    align-items: flex-start;
    padding-top: 5vh; /* Small padding from the top */
}

.login-container {
    padding: 10px;
    /* On mobile, we can let the container be full width if the card is meant to be minimal */
}

.login-card {
    padding: 20px 15px; /* Reduce padding on smaller screens */
    margin: 0;
    /* Remove shadow and border for a simpler, app-like look on mobile */
    box-shadow: none;
    border: none;
    border-radius: 0; /* Optional: Make it full width without rounded corners on edge-to-edge screens */
}

/* Ensure the title is prominent but fits well */
.login-card h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* Input fields should remain clear */
.form-group input {
    padding: 10px;
    font-size: 1rem;
}

/* Make the button size appropriate */
.btn-login {
    padding: 14px;
    font-size: 1.1rem;
}