/**
 * Login page styles.
 *
 * Custom styling for the CORETransitions sign-in page. Loaded on top
 * of the BootstrapUI signin layout to provide the branded header,
 * card-style form container, and tweak the error/flash message appearance.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.login-container.form-signin {
    max-width: clamp(24rem, 62vw, 72rem);
    padding: 0;
    margin: auto;
}

.login-container {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: clamp(24rem, 62vw, 72rem);
    padding: 0;
    overflow: auto; /* Quick and dirty fix for form overflow based on height at certain very narrow widths, need to fix this to be more robust and make the whole form scale better, but this is good enough for now */
    margin: 0 auto;
    font-size: clamp(1rem, 0.3vw + 0.95rem, 1.2rem);
}

.login-header {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    color: white;
    text-align: center;
    padding: 2.5rem 2rem 2rem;
    border-bottom: 0.25rem solid #0d6efd;
}

.login-header h1 {
    color: white;
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.875rem, 3vw, 0.9375rem);
    font-weight: 300;
}

.users.form {
    margin: 0;
    padding: clamp(1.5rem, 5vw, 2.5rem);
}

.users.form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.users.form legend {
    display: none;
}

.users.form .form-group {
    margin-bottom: 1.5rem;
}

.users.form label {
    display: block;
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.users.form input[type="text"],
.users.form input[type="password"],
.users.form input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: #fff;
}

.users.form input[type="text"]:focus,
.users.form input[type="password"]:focus,
.users.form input[type="email"]:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: #fff;
}

.users.form input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.users.form input[type="checkbox"] + label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.remember-me {
    margin-bottom: 1.25rem;
    text-align: center;
}

.users.form .g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.remember-me .form-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-links {
    margin: 1.5rem 0;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    font-size: 0.875rem;
}

.login-links a {
    color: #0d6efd;
    text-decoration: none;
    margin: 0 0.375rem;
    transition: color 0.15s ease-in-out;
    font-weight: 500;
}

.login-links a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

.users.form button,
.users.form input[type="submit"] {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: #0d6efd;
    color: white;
    border: 1px solid #0d6efd;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    margin-top: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
    text-align: center;
    line-height: 1.5;
}

.users.form button:hover,
.users.form input[type="submit"]:hover {
    background: #0b5ed7;
    border-color: #0b5ed7;
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.25);
}

.users.form button:active,
.users.form input[type="submit"]:active {
    background: #0a58ca;
    border-color: #0a58ca;
    box-shadow: 0 0.0625rem 0.125rem rgba(13, 110, 253, 0.4);
}

.login-flash {
    padding: 1.25rem 1.5rem 0;
}

.login-flash:empty {
    display: none;
}

.login-container .message {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #055160;
    padding: 0.875rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: default;
}

.login-container .message::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.login-container .message.success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.login-container .message.success::before {
    content: '✓';
    background: #0f5132;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}

.login-container .message.error {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}

.login-container .message.error::before {
    content: '✕';
    background: #842029;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
}

.login-container .message.warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

.login-container .message.warning::before {
    content: '⚠';
    font-size: 1rem;
}

.login-container .message.info {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #055160;
}

.login-container .message.info::before {
    content: 'ℹ';
    font-size: 1rem;
    font-weight: bold;
}

.login-container .message-text {
    flex: 1;
    line-height: 1.45;
}

.login-container .message-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.75;
    padding: 0;
    cursor: pointer;
    height: auto;
    width: auto;
    letter-spacing: normal;
    text-transform: none;
    font-weight: normal;
    white-space: normal;
    text-align: center;
}

.login-container .message-close:hover,
.login-container .message-close:focus {
    opacity: 1;
}

.flash.alert {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.invalid-feedback {
    display: block;
    color: #c33;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.is-invalid {
    border-color: #c33 !important;
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .login-container.form-signin {
        max-width: 100%;
    }
    
    .login-header {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .users.form {
        padding: 1.5rem;
    }
    
    .login-links {
        font-size: 0.8125rem;
    }
    
    .login-links a {
        display: inline-block;
        margin: 0.25rem 0.25rem;
    }
}

@media (max-width: 400px) {
    .login-header h1 {
        font-size: 1.5rem;
    }
    
    .users.form {
        padding: 1.25rem;
    }
}

@media (min-width: 992px) {
    .login-container.form-signin {
        max-width: clamp(56rem, 68vw, 84rem);
    }

    .login-header {
        padding: 4rem 4.25rem 3.25rem;
    }

    .login-header h1 {
        font-size: 3.25rem;
    }

    .login-header p {
        font-size: 1.25rem;
    }

    .users.form {
        padding: 3.5rem 4.25rem;
    }

    .users.form .form-group {
        margin-bottom: 2rem;
    }

    .users.form label {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }

    .users.form input[type="text"],
    .users.form input[type="password"],
    .users.form input[type="email"] {
        padding: 1.25rem 1.5rem;
        font-size: 1.125rem;
    }

    .users.form button,
    .users.form input[type="submit"] {
        padding: 1.25rem 2rem;
        font-size: 1.125rem;
    }

    .login-links {
        font-size: 1rem;
        margin: 2rem 0;
        padding-top: 1.5rem;
    }

    .remember-me {
        margin-bottom: 1.5rem;
    }

    .users.form input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }
}
