@import url('colors.css');
@import url('fonts.css');

/* --- Global Settings --- */
*, *::before, *::after {
  box-sizing: border-box; /* Makes width/height calculations include padding/border */
}

.not-selectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version */
}

body {
    background-color: var(--login-screen-bg);
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    padding: 1rem; /* Add some padding, especially useful on mobile */
    margin: 0; /* Remove default body margin */
}

#mainBox {
    /* --- Desktop Styles (Base) --- */
    width: 90%; /* Use percentage for flexibility */
    max-width: 500px; /* Limit maximum width on large screens */
    background-color: var(--custom-white);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally within the box */
    padding: 2rem 1.5rem; /* Add internal padding */
    margin-top: 5vh; /* Adjust vertical positioning */
    margin-bottom: 5vh;
    gap: 1.5rem; /* Defines the space between title, subtitle, and form */
}

#title {
    font-family: 'Poppins';
    font-weight: 250;
    font-size: 2.4rem;
    margin-top: 0;
    text-align: center;
}

#subtitle {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 1.2rem;
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.login-info-text {
    font-family: 'Poppins';
    font-weight: 300; /* Lighter weight for secondary info */
    font-size: 0.85rem; /* Slightly smaller than subtitle */
    text-align: start;
    color: #4b5563; /* A slightly muted gray color */
    margin-top: -0.25rem; /* Reduce space below subtitle */
    margin-bottom: 0.5rem; /* Add space before the form fields */
    max-width: 350px; /* Keep width consistent with form */
    width: 100%; /* Allow it to take available width */
    line-height: 1.4; /* Improve readability */
}

#login-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements */
    width: 100%; /* Form takes full width of its container (#mainBox padding handles spacing) */
    max-width: 350px; /* Limit form width within the box */
    margin-bottom: 0.5rem;
}

.input-field {
    width: 100%; /* Make container full width */
    margin-bottom: 1.25rem;
}

.input-field > input {
    width: 100%; /* Input takes full width of its container */
    position: relative;
    border: solid 1px rgb(156 163 175);
    border-radius: 0.5rem;
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 0.9rem; /* Adjusted size */
    line-height: 1.25rem;
    padding: 0.75rem 0.75rem; /* Adjusted padding */
    background-color: var(--custom-white);
}

.input-field > input::placeholder {
    color: #9ca3af;
    font-weight: 200;
}

#login-status {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 0.8rem;
    color: #ff6d6d; /* Ensure high contrast */
    width: 100%; /* Take full width */
    /* Ensure space above if inputs don't have margin-bottom */
    margin-top: -0.25rem;
    text-align: center; /* Center error messages */
}

/* Style for flashed messages */
.alert {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    text-align: center;
}
.alert-error, .alert-danger { /* Add categories used by Flask */
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.alert-success {
     background-color: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
}
/* Add other categories (warning, info) if needed */


*:focus {
    outline: none; /* Remove default focus outline */
}

#login-form button {
    /* Let the button size itself, but set a max/min width */
    width: auto; /* Remove fixed width */
    min-width: 150px; /* Ensure minimum tappable area */
    max-width: 200px; /* Prevent it from getting too large */
    /* Removed: width: 12vw; */
}

#submitButton {
    position: relative;
}

button {
    background: var(--button-bg);
    background-color: var(--button-bg);
    border-radius: 4rem;
    border: solid 1px black;
    display: inline-block;
    cursor: pointer;
    color: black;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 1rem;
    padding: 0.6rem 1.2rem; /* Adjusted padding */
    text-decoration: none;
    margin-top: 1rem; /* Add space above button */
    margin-bottom: 1rem; /* Adjusted margin */
    transition: all 0.2s;
    text-align: center; /* Center text if needed */
}

button:hover {
    background-color: var(--custom-light-gray);
    /* Add subtle transform for feedback */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button__text {
    display: flex;
    justify-content: center; /* Center content */
    align-items: center; /* Align icon vertically */
}

.button__text > img {
    width: 1.2rem; /* Slightly smaller icon */
    margin-left: 0.5rem; /* Space between text and icon */
    /* Remove other margin/padding adjustments for simplicity */
    transition: transform 0.2s ease-out; /* Change transition property */
}

button:hover > .button__text > img {
    transform: translateX(4px); /* Move icon slightly on hover */
    /* Removed padding changes */
}

/* --- Loading Spinner (No changes needed for responsiveness) --- */
.button--loading {
    transition: 0.2s ease all;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--custom-white); /* Make sure this contrasts with button bg */
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) { /* Target smaller screens (adjust breakpoint if needed) */

    body {
        padding: 0.5rem; /* Reduce padding slightly on mobile */
        align-items: flex-start; /* Align box to top on mobile */
    }

    #mainBox {
        width: 95vw; /* Take up more screen width */
        min-height: auto; /* Allow height to shrink */
        padding: 2rem 1rem; /* Reduce internal padding */
        margin-top: 8vh; /* Adjust top margin */
        margin-bottom: 3vh;
        gap: 1rem; /* Slightly smaller gap on mobile */
    }

    #title {
        font-size: 2rem; /* Reduce title font size */
    }

    #subtitle {
        font-size: 1.1rem; /* Reduce subtitle font size */
    }

    .login-info-text {
        font-size: 0.8rem; /* Adjust font size for mobile */
        max-width: none; /* Allow full width within padded container */
    }

    #login-form {
       max-width: none; /* Allow form to use full width of padded #mainBox */
    }

     .input-field > input {
        font-size: 1rem; /* Ensure readable font size on mobile */
        padding: 0.8rem;
     }

    #login-status {
        font-size: 0.75rem;
    }

    #login-form button {
         width: 70%; /* Make button wider relative to container */
         max-width: 250px; /* Still cap the max width */
         min-width: 120px;
         padding: 0.7rem 1rem; /* Adjust padding */
         font-size: 1rem;
    }

    .button__text > img {
      width: 1.1rem; /* Slightly smaller icon */
    }
}