/* Custom styles for two_factor login page */

.auth-shell-login {
    align-items: flex-start;
    padding-top: clamp(1.5rem, 7vh, 4rem);
}

@media (max-width: 767.98px) {
    .auth-shell-login {
        padding-top: 1.25rem;
    }
}

/* General SSO Button Styling */
.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important; /* Ensure no underline */
    width: 100%; /* Make buttons full width of their container */
    padding: 0.5rem 1rem; /* Standardized padding */
    margin-bottom: 0.75rem; /* Space below each SSO button */
    font-size: 1rem; /* Consistent font size */
    line-height: 1.5;
    border-radius: 0.375rem; /* Standard Bootstrap border radius */
    box-sizing: border-box; /* Ensure padding/border are included in width */
}

/* Google, Xero, and Microsoft Sign-In Button Specifics */
.sso-btn.sso-btn-google,
.sso-btn.sso-btn-xero,
.sso-btn.sso-btn-microsoft {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.sso-btn.sso-btn-google:hover,
.sso-btn.sso-btn-google:focus,
.sso-btn.sso-btn-xero:hover,
.sso-btn.sso-btn-xero:focus,
.sso-btn.sso-btn-microsoft:hover,
.sso-btn.sso-btn-microsoft:focus {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: rgba(var(--bs-emphasis-color-rgb), 0.25);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.1);
}

.sso-btn.sso-btn-google .google-signin-logo,
.sso-btn.sso-btn-xero .xero-signin-logo,
.sso-btn.sso-btn-microsoft .microsoft-signin-logo {
    margin-right: 10px; /* Space between logo and text */
    /* Height and width for the Xero logo can be set here or inline in the SVG if needed */
    /* For example, if the SVG doesn't have explicit size: */
    /* height: 20px; */
    /* width: 20px; */
}


/* Styles for floating labels if you use them for the main form */
.form-signin .form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.form-signin .form-floating > label {
    padding-top: .8rem; /* Adjust label padding for floating labels */
}

.django-messages .alert {
    text-align: left;
}