.rea-auth
{
    --color-blanc: #FFFFFF;
    --color-bg-primary: #D9E2EF;
    --color-bg-second: #F0F4FA;
    --tblr-font-size-h1: 40px;
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;

    .h1, h1
    {
        font-weight: var( --tblr-font-weight-black );
        margin-bottom: 45px;
    }

    .corner
    {
        width: 100px;
        height: 100px;
        overflow: hidden;
        position: relative;

        &:before
        {
            content: "";
            display: block;
            width: 200%;
            height: 200%;
            position: absolute;
            border-radius: 50%;
        }
    }
}

.rea-auth__info
{
    padding: 50px 100px;
    position: relative;
    background: var( --color-blanc );
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    text-align: center;

    @media only screen and ( max-width: 992px )
    {
        display: none;
    }

    .corner
    {
        position: absolute;
        top: 0;
        right: 0;

        &:before
        {
            top: 0;
            right: 0;
            box-shadow: 50px -50px 0 0 var(--color-bg-primary);
        }
    }
}

.rea-auth__connexion
{
    padding: 150px 100px;
    position: relative;
    background: linear-gradient(147.41deg, var( --color-bg-primary ) 18.6%, var( --color-bg-second ) 81.29%);
    height: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    @media only screen and ( max-width: 1650px )
    {
        padding: 100px;
    }

    form
    {

        @media only screen and ( max-width: 992px )
        {
            margin-top: 0;
        }
    }

    .corner
    {
        position: absolute;
        bottom: 0;
        left: 0;

        &:before
        {
            bottom: 0;
            left: 0;
            box-shadow: -50px 50px 0 0 var(--color-blanc);
        }
    }
}

.rea-auth__register-info
{
    padding: 50px 100px 50px 50px;
    position: relative;
    background: linear-gradient(147.41deg, var( --color-bg-primary ) 18.6%, var( --color-bg-second ) 81.29%);
    height: 100%;
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media only screen and ( max-width: 992px )
    {
        display: none;
    }

    .corner
    {
        position: absolute;
        bottom: 0;
        right: 0;

        &:before
        {
            bottom: 0;
            right: 0;
            box-shadow: 50px 50px 0 0 var(--color-blanc);
        }
    }
}

.rea-auth__register
{
    padding: 50px 50px;
    position: relative;
    background: var( --color-blanc );
    height: 100%;
    display: flex;
    width: 100%;
    overflow: auto;
    scrollbar-width: none;
    flex-direction: column;
    justify-content: safe center;

    @media only screen and ( max-width: 992px )
    {
        justify-content: start;
        padding: 50px;
    }

    form
    {

        @media only screen and ( max-width: 992px )
        {
            margin-top: 0;
        }
    }

    .corner
    {
        position: absolute;
        top: 0;
        left: 0;


        @media only screen and ( max-width: 992px )
        {
            display: none;
        }

        &:before
        {
            top: 0;
            left: 0;
            box-shadow: -50px -50px 0 0 var(--color-bg-primary);
        }
    }
}

.scrollable-container
{
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.organisation-item
{
    margin-bottom: 20px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.empty-items-message
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--tblr-primary);
    opacity: 0.6;
    padding: 40px 20px;

    &.d-none
    {
        display: none;
    }
}


/* ----------------------------------- */


.form-label
{
    color: var(--tblr-primary);
    margin-bottom: 0;
    font-weight: 600;
}

.form-control,
.input-group-text,
.form-check-input
{
    border: 1px solid var(--tblr-primary);
    background-color: transparent;
    box-shadow: none;
    color: var(--tblr-primary);
    transition: 200ms all;

    &:focus-within
    {
        background-color: transparent;
    }
}
.form-check-input
{
    &:checked
    {
        background-color: var(--tblr-primary);
    }
}

.input-group-flat
{
    &:focus-within
    {
        transition: 200ms all;

        .form-control, 
        .input-group-text
        {
            border-color: var(--tblr-primary) !important; /* [SAM 2026.2.2] : Fuck you Tabler */
            background-color: transparent !important; /* [SAM 2026.2.2] : Fuck you Tabler */

            &.is-invalid
            {
                border-color: var(--tblr-form-invalid-border-color) !important; /* [SAM 2026.2.2] : Fuck you Tabler */
            }
        }

        .form-control.is-invalid + .input-group-text
        {
            border-color: var(--tblr-form-invalid-border-color) !important;
        }
    }
    
    .input-group-text
    {
        background: transparent;
        border-left: none;
    }

    .form-control.is-invalid + .input-group-text
    {
        border-color: var(--tblr-form-invalid-border-color);
    }
}

.form-control,
.input-group-text,
.invalid-feedback
{
    padding-left: 20px;
    padding-right: 20px;
}

.form-footer
{
    text-align: right;
}

.form-check
{
    padding-left: 50px;
}

.form-control.is-invalid, 
.was-validated .form-control:invalid
{
    background-image: none;
}

.rea-auth__register
{
    .form-label
    {
        color: var(--tblr-muted);
    }

    .form-control,
    .form-select,
    select.form-control,
    select,
    .input-group-text
    {
        border: 1px solid var(--tblr-bg-forms);
        background-color: var(--tblr-bg-forms);
        color: var(--tblr-body-color);

        &:focus-within
        {
            background-color: var(--tblr-bg-forms);
        }
    }

    .form-check-input
    {
        background-color: var(--tblr-bg-forms);

        &:hover
        {
            background-color: var(--tblr-bg-forms);
        }

        &:checked
        {
            background-color: var(--tblr-primary);
        }
    }

    .input-group-flat
    {
        &:focus-within
        {
            .form-control,
            .input-group-text
            {
                border-color: var(--tblr-bg-forms) !important;
                background-color: var(--tblr-bg-forms) !important;

                &.is-invalid
                {
                    border-color: var(--tblr-form-invalid-border-color) !important;
                }
            }

            .form-control.is-invalid + .input-group-text
            {
                border-color: var(--tblr-form-invalid-border-color) !important;
            }
        }

        .input-group-text
        {
            background: var(--tblr-bg-forms);
        }
    }

    .select2-container--bootstrap .select2-selection,
    .select2-container--default .select2-selection,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple
    {
        box-shadow: none !important;
        border: 1px solid var(--tblr-bg-forms) !important;
        background-color: var(--tblr-bg-forms) !important;
    }

    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--bootstrap.select2-container--focus .select2-selection
    {
        border-color: var(--tblr-bg-forms) !important;
        background-color: var(--tblr-bg-forms) !important;
    }
}

/*
|-----
| Adding Cursor Agent
|-----
| Shared portail left menu styles (logo, title, description) for auth register steps.
|-----
| ##AGENT_CODE
*/
.rea-portail-info
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: start;
    max-width: 100%;
}

.rea-portail-info__logo
{
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 32px;
}

.rea-portail-info__title
{
    color: var(--tblr-primary);
    font-weight: var(--tblr-font-weight-black);
}

.rea-portail-info__description
{
    color: var(--tblr-primary);
    opacity: 0.75;
    font-size: 1.125rem;
    font-weight: var(--tblr-font-weight-normal);
    line-height: 1.5;
}
/* ##AGENT_CODE */