/* ============================================================
   IT2B LOGIN CORPORATIVO V3
   GLPI 11
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

html:has(body.welcome-anonymous),
body.welcome-anonymous {

    margin: 0 !important;

    min-height: 100vh !important;

    background: #eef0f2 !important;
}


/* ============================================================
   ESTRUTURA
   ============================================================ */

body.welcome-anonymous
.page-anonymous {

    display: grid !important;

    grid-template-columns:
        minmax(0, 56%)
        minmax(440px, 44%);

    width: 100% !important;

    min-height: 100vh !important;

    background: #f2f3f4 !important;
}


/* ============================================================
   PAINEL ESQUERDO
   ============================================================ */

body.welcome-anonymous
.it2b-login-brand {

    position: relative;

    min-width: 0;

    min-height: 100vh;

    overflow: hidden;

    background-image:

        linear-gradient(
            90deg,
            rgba(3,6,8,.80) 0%,
            rgba(3,6,8,.55) 45%,
            rgba(3,6,8,.12) 100%
        ),

        url("/plugins/it2bportal/pics/login_backgorund.png");

    background-size: cover;

    background-position: center;

    color: #ffffff;
}


body.welcome-anonymous
.it2b-login-brand::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            0deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.10) 48%,
            rgba(0,0,0,.12) 100%
        );
}


body.welcome-anonymous
.it2b-login-brand-overlay {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 100vh;

    padding:

        clamp(50px, 7vh, 90px)

        clamp(42px, 6vw, 100px)

        clamp(45px, 6vh, 72px);
}


/* ============================================================
   TEXTO INSTITUCIONAL
   ============================================================ */

body.welcome-anonymous
.it2b-login-copy {

    margin-top: auto;

    margin-bottom: auto;
}


body.welcome-anonymous
.it2b-login-copy h1 {

    margin: 0 0 26px;

    color: #ffffff;

    font-size:
        clamp(42px, 4.1vw, 72px);

    font-weight: 750;

    line-height: 1.04;

    letter-spacing: -.045em;

    text-shadow:
        0 5px 24px rgba(0,0,0,.28);
}


body.welcome-anonymous
.it2b-login-copy h1 span {

    color: #f58220;
}


body.welcome-anonymous
.it2b-login-copy p {

    margin: 0;

    color:
        rgba(255,255,255,.91);

    font-size:
        clamp(15px, 1.1vw, 18px);

    line-height: 1.65;

    text-shadow:
        0 2px 10px rgba(0,0,0,.25);
}


/* ============================================================
   BENEFICIOS
   ============================================================ */

body.welcome-anonymous
.it2b-login-benefits {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    max-width: 680px;
}


body.welcome-anonymous
.it2b-login-benefit {

    color: #ffffff;

    font-size: 14px;

    line-height: 1.35;
}


body.welcome-anonymous
.it2b-login-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    margin-bottom: 12px;

    border:
        2px solid #f58220;

    border-radius: 50%;

    color: #f58220;

    font-size: 18px;

    font-weight: 700;

    background:
        rgba(0,0,0,.18);
}


/* ============================================================
   AREA DIREITA
   ============================================================ */

body.welcome-anonymous
.page-anonymous
> .flex-fill {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 0;

    min-height: 100vh !important;

    margin: 0 !important;

    padding: 42px !important;

    background:

        radial-gradient(
            circle at 80% 10%,
            #ffffff 0%,
            #f7f8f9 42%,
            #e9ecef 100%
        ) !important;
}


/* ============================================================
   CONTAINER
   ============================================================ */

body.welcome-anonymous
.container-tight {

    width: 100% !important;

    max-width: 525px !important;

    padding: 0 !important;
}


/* ============================================================
   LOGO
   ============================================================ */

body.welcome-anonymous
.page-anonymous
.glpi-logo {

    --logo:
        url("/plugins/it2bportal/pics/it2b-operator-logo.png")
        !important;

    display: block !important;

    width: 175px !important;

    height: 72px !important;

    margin:
        0 auto 21px !important;

    background:

        url("/plugins/it2bportal/pics/it2b-operator-logo.png")

        center center /
        contain

        no-repeat !important;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0,0,0,.10)
        );
}


/* ============================================================
   CARD
   ============================================================ */

body.welcome-anonymous
.main-content-card {

    position: relative;

    width: 100% !important;

    margin: 0 !important;

    overflow: hidden;

    background:
        rgba(255,255,255,.985)
        !important;

    border:
        1px solid
        rgba(20,30,40,.07)
        !important;

    border-radius:
        18px !important;

    box-shadow:

        0 28px 70px
        rgba(25,30,35,.16),

        0 4px 14px
        rgba(25,30,35,.05)

        !important;
}


body.welcome-anonymous
.main-content-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:

        linear-gradient(
            90deg,
            #f58220,
            #ff5a00
        );
}


body.welcome-anonymous
.main-content-card
> .card-header:empty {

    display: none !important;
}


body.welcome-anonymous
.main-content-card
> .card-body {

    padding:
        42px 44px !important;
}


/* ============================================================
   FORMULARIO
   ============================================================ */

body.welcome-anonymous
.main-content-card
form
.row.justify-content-center
> .col-md-5 {

    width: 100% !important;

    max-width: none !important;
}


/* ============================================================
   TITULO
   ============================================================ */

body.welcome-anonymous
.main-content-card
form
.col-md-5
> .card-header {

    margin:
        0 0 27px !important;

    padding: 0 !important;

    background:
        transparent !important;

    border: 0 !important;

    text-align: left !important;
}


body.welcome-anonymous
.main-content-card
h2 {

    margin:
        0 0 6px !important;

    color:
        #171b1f !important;

    font-size:
        25px !important;

    font-weight:
        700 !important;

    letter-spacing:
        -.02em;

    text-align:
        left !important;
}


body.welcome-anonymous
.it2b-login-subtitle {

    margin: 0;

    color: #7b838b;

    font-size: 14px;

    line-height: 1.45;
}


/* ============================================================
   LABELS
   ============================================================ */

body.welcome-anonymous
.main-content-card
.form-label {

    color:
        #343a40 !important;

    font-weight:
        500 !important;
}


/* ============================================================
   INPUTS
   ============================================================ */

body.welcome-anonymous
.main-content-card
.form-control,

body.welcome-anonymous
.main-content-card
.form-select,

body.welcome-anonymous
.main-content-card
.select2-selection {

    min-height: 45px;

    background:
        #ffffff !important;

    border:
        1px solid
        #d8dde2 !important;

    border-radius:
        7px !important;

    color:
        #24292e !important;

    box-shadow:
        none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


body.welcome-anonymous
.main-content-card
.form-control:hover,

body.welcome-anonymous
.main-content-card
.form-select:hover {

    border-color:
        #bbc2c9 !important;
}


body.welcome-anonymous
.main-content-card
.form-control:focus,

body.welcome-anonymous
.main-content-card
.form-select:focus {

    border-color:
        #f58220 !important;

    box-shadow:

        0 0 0 .2rem
        rgba(245,130,32,.12)

        !important;
}


/* ============================================================
   CHECKBOX
   ============================================================ */

body.welcome-anonymous
.form-check-input:checked {

    background-color:
        #f58220 !important;

    border-color:
        #f58220 !important;
}


body.welcome-anonymous
.form-check-input:focus {

    border-color:
        #f58220 !important;

    box-shadow:

        0 0 0 .18rem
        rgba(245,130,32,.12)

        !important;
}


/* ============================================================
   BOTAO ENTRAR
   ============================================================ */

body.welcome-anonymous
.main-content-card
.btn-primary {

    min-height: 46px;

    background:

        linear-gradient(
            90deg,
            #ff7000,
            #f25c00
        ) !important;

    border: 0 !important;

    border-radius:
        7px !important;

    color:
        #ffffff !important;

    font-weight:
        600 !important;

    box-shadow:

        0 8px 20px
        rgba(245,100,15,.23);

    transition:

        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


body.welcome-anonymous
.main-content-card
.btn-primary:hover {

    background:
        #dd5900 !important;

    transform:
        translateY(-1px);

    box-shadow:

        0 10px 24px
        rgba(245,100,15,.30);
}


/* ============================================================
   LINKS
   ============================================================ */

body.welcome-anonymous
.main-content-card a {

    color:
        #df6709 !important;
}


body.welcome-anonymous
.main-content-card a:hover {

    color:
        #f58220 !important;
}


/* ============================================================
   COPYRIGHT
   ============================================================ */

body.welcome-anonymous
.container-tight
> .text-muted {

    margin-top:
        17px !important;

    color:
        #8b9299 !important;

    font-size:
        11px;
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1100px) {

    body.welcome-anonymous
    .page-anonymous {

        grid-template-columns:
            48% 52%;
    }


    body.welcome-anonymous
    .it2b-login-brand-overlay {

        padding:
            45px 36px;
    }


    body.welcome-anonymous
    .it2b-login-copy h1 {

        font-size:
            44px;
    }

}


@media (max-width: 850px) {

    body.welcome-anonymous
    .page-anonymous {

        display:
            block !important;
    }


    body.welcome-anonymous
    .it2b-login-brand {

        display:
            none;
    }


    body.welcome-anonymous
    .page-anonymous
    > .flex-fill {

        min-height:
            100vh !important;

        padding:
            24px 16px !important;
    }


    body.welcome-anonymous
    .main-content-card
    > .card-body {

        padding:
            32px 25px !important;
    }


    body.welcome-anonymous
    .page-anonymous
    .glpi-logo {

        width:
            150px !important;

        height:
            62px !important;
    }

}


/* ============================================================
   FIM - IT2B LOGIN CORPORATIVO V3
   ============================================================ */


/* ============================================================
   IT2B LOGIN V3 - ACABAMENTO FINAL
   ============================================================ */


/* Titulo e subtitulo obrigatoriamente empilhados */

body.welcome-anonymous
.main-content-card
form
.col-md-5
> .card-header {

    display: block !important;

    width: 100% !important;

    text-align: left !important;
}


body.welcome-anonymous
.main-content-card
form
.col-md-5
> .card-header h2 {

    display: block !important;

    width: 100% !important;

    margin: 0 0 6px 0 !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;
}


body.welcome-anonymous
.main-content-card
.it2b-login-subtitle {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    line-height: 1.4 !important;
}


/* Card um pouco mais elegante/compacto */

body.welcome-anonymous
.container-tight {

    max-width: 500px !important;
}


body.welcome-anonymous
.main-content-card
> .card-body {

    padding:
        38px 40px !important;
}


/* Logo */

body.welcome-anonymous
.page-anonymous
.glpi-logo {

    width: 190px !important;

    height: 76px !important;

    margin:
        0 auto 18px !important;
}


/* Titulo institucional */

body.welcome-anonymous
.it2b-login-copy h1 {

    font-size:
        clamp(40px, 3.65vw, 63px) !important;

    line-height:
        1.04 !important;
}


/* Ajuste vertical do conteudo esquerdo */

body.welcome-anonymous
.it2b-login-copy {

    transform:
        translateY(8px);
}


/* Campos */

body.welcome-anonymous
.main-content-card
.form-control,

body.welcome-anonymous
.main-content-card
.form-select,

body.welcome-anonymous
.main-content-card
.select2-selection {

    min-height:
        44px !important;
}


/* Botao */

body.welcome-anonymous
.main-content-card
.btn-primary {

    min-height:
        45px !important;

    margin-top:
        5px;
}


/* Copyright mais discreto */

body.welcome-anonymous
.container-tight
> .text-muted {

    opacity:
        .72;

    font-size:
        10px !important;
}


/* ============================================================
   FIM - ACABAMENTO LOGIN V3
   ============================================================ */


/* IT2B_LOGIN_ALINHAMENTO_INICIO */

/* Cabeçalho do formulário */
body.welcome-anonymous
.main-content-card form .card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 6px !important;
}

/* Título */
body.welcome-anonymous
.main-content-card form .card-header h2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
}

/* Subtítulo */
body.welcome-anonymous
.main-content-card .it2b-login-subtitle {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: normal !important;
}

/* Campos do formulário */
body.welcome-anonymous
.main-content-card form .form-control,

body.welcome-anonymous
.main-content-card form .form-select {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

/* Botão principal */
body.welcome-anonymous
.main-content-card form button[type="submit"] {
    width: 100% !important;
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Rodapé e links do formulário */
body.welcome-anonymous
.main-content-card form .text-center {
    text-align: center !important;
}

/* IT2B_LOGIN_ALINHAMENTO_FIM */


/* ============================================================
   IT2B_LOGIN_INOVACAO_V4
   BENEFICIOS INSTITUCIONAIS
   ============================================================ */

body.welcome-anonymous .it2b-login-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: 760px;
    margin-top: 30px;
    padding: 18px 0;
}

body.welcome-anonymous .it2b-login-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 8px 18px;
    position: relative;
    transition: transform .25s ease;
}

body.welcome-anonymous .it2b-login-benefit:first-child {
    padding-left: 0;
}

body.welcome-anonymous .it2b-login-benefit:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: rgba(255,255,255,.20);
}

body.welcome-anonymous .it2b-login-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ff8200;
    border-radius: 50%;
    background: rgba(0,0,0,.38);
    color: #ff8200;
    box-shadow:
        0 0 12px rgba(255,130,0,.22),
        inset 0 0 12px rgba(255,130,0,.06);
    transition:
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;
}

body.welcome-anonymous .it2b-login-icon svg {
    width: 27px;
    height: 27px;
    display: block;
}

body.welcome-anonymous .it2b-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

body.welcome-anonymous .it2b-benefit-text strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

body.welcome-anonymous .it2b-benefit-text span {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

@media (hover: hover) {
    body.welcome-anonymous .it2b-login-benefit:hover {
        transform: translateY(-3px);
    }

    body.welcome-anonymous .it2b-login-benefit:hover
    .it2b-login-icon {
        background: rgba(255,130,0,.12);
        box-shadow:
            0 0 22px rgba(255,130,0,.45),
            inset 0 0 12px rgba(255,130,0,.12);
    }
}

@media (max-width: 1400px) and (min-width: 851px) {
    body.welcome-anonymous .it2b-login-benefits {
        gap: 8px;
    }

    body.welcome-anonymous .it2b-login-benefit {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 12px;
    }

    body.welcome-anonymous .it2b-login-benefit:first-child {
        padding-left: 0;
    }

    body.welcome-anonymous .it2b-login-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    body.welcome-anonymous .it2b-login-icon svg {
        width: 22px;
        height: 22px;
    }

    body.welcome-anonymous .it2b-benefit-text strong {
        font-size: 12px;
    }

    body.welcome-anonymous .it2b-benefit-text span {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-anonymous .it2b-login-benefit,
    body.welcome-anonymous .it2b-login-icon {
        transition: none;
    }
}

/* FIM IT2B_LOGIN_INOVACAO_V4 */