/*
 * Info4you Login — GLPI 11.0.8
 * Versão visual v1.0.5
 *
 * Objetivo:
 * - aproximar a implementação real do mockup premium aprovado;
 * - preservar o formulário/autenticação nativos do GLPI;
 * - manter os ativos e a logo original sem alterações.
 */

body.info4you-login-page {
    --i4y-navy-950: #031229;
    --i4y-navy-900: #061b38;
    --i4y-navy-800: #0a2a55;
    --i4y-blue: #1287f5;
    --i4y-cyan: #29b9ff;
    --i4y-text: #10223f;
    --i4y-muted: #67778e;
    --i4y-border: #dbe4ef;
    --i4y-surface: #f7f9fc;
    --i4y-white: #ffffff;

    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--i4y-surface);
}

body.info4you-login-page #page.page-anonymous,
body.info4you-login-page #page > .flex-fill,
body.info4you-login-page .container-tight,
body.info4you-login-page .main-content-card,
body.info4you-login-page .main-content-card > .card-body,
body.info4you-login-page .main-content-card form {
    min-height: 100vh;
}

body.info4you-login-page #page.page-anonymous {
    padding: 0;
}

body.info4you-login-page #page > .flex-fill {
    margin: 0 !important;
    padding: 0 !important;
}

body.info4you-login-page .container-tight {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0 !important;
}

body.info4you-login-page .container-tight > .text-center:first-child,
body.info4you-login-page .container-tight > .text-center.text-muted.mt-3 {
    display: none;
}

body.info4you-login-page .main-content-card {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

body.info4you-login-page .main-content-card > .card-header {
    display: none;
}

body.info4you-login-page .main-content-card > .card-body {
    padding: 0;
}

body.info4you-login-page .main-content-card form {
    margin: 0;
}

body.info4you-login-page .main-content-card form > .row {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(430px, 42fr);
    min-height: 100vh;
    margin: 0;
}

/* =========================================================
   PAINEL INSTITUCIONAL — ESQUERDA
   ========================================================= */

body.info4you-login-page .main-content-card form > .row > .col-auto {
    order: 1;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    text-align: left !important;
}

body.info4you-login-page .info4you-brand-panel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: var(--i4y-white);

    /* O overlay agora é propositalmente mais leve para a arte aparecer. */
    background:
        linear-gradient(90deg, rgba(3, 18, 41, .44) 0%, rgba(3, 18, 41, .20) 52%, rgba(3, 18, 41, .10) 100%),
        linear-gradient(0deg, rgba(2, 15, 34, .35) 0%, rgba(2, 15, 34, .02) 48%),
        url("../img/login-background.webp") 62% center / cover no-repeat;
}

body.info4you-login-page .info4you-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% 42%, rgba(41,185,255,.12), transparent 27%),
        radial-gradient(circle at 72% 76%, rgba(18,135,245,.14), transparent 33%);
}

body.info4you-login-page .info4you-brand-panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(91, 177, 255, .38) 20%,
        rgba(91, 177, 255, .20) 80%,
        transparent
    );
}

body.info4you-login-page .info4you-brand-panel__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Vignette local para manter leitura sem “apagar” o background. */
    background:
        radial-gradient(circle at 19% 48%, rgba(2, 16, 37, .34), transparent 44%);
}

body.info4you-login-page .info4you-brand-panel__content {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: clamp(48px, 4.8vw, 82px) clamp(48px, 5.3vw, 92px);
    display: flex;
    flex-direction: column;
}

/* A logo original permanece intacta no arquivo.
 * A versão branca é obtida apenas por CSS para não modificar o ativo original.
 */
body.info4you-login-page .info4you-brand-logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    /* Aproximadamente 2 cm abaixo da posição anterior em telas desktop. */
    margin-top: 76px;
    padding: 0;
}

body.info4you-login-page .info4you-brand-logo::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 190px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.085), transparent 70%);
}

body.info4you-login-page .info4you-brand-logo img {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(235px, 18vw, 320px);
    max-height: 165px;
    object-fit: contain;
    object-position: center;

    /* Converte visualmente todas as cores para branco sem editar o PNG original. */
    filter:
        brightness(0)
        saturate(100%)
        invert(100%)
        drop-shadow(0 12px 28px rgba(0, 0, 0, .18));
}

body.info4you-login-page .info4you-brand-copy {
    width: min(640px, 92%);
    margin: auto 0;
    transform: translateY(-2vh);
}

body.info4you-login-page .info4you-eyebrow {
    margin: 0 0 18px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .19em;
    color: rgba(255,255,255,.72);
}

body.info4you-login-page .info4you-brand-copy h1 {
    margin: 0;
    max-width: 610px;
    font-size: clamp(36px, 3.05vw, 54px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 750;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

body.info4you-login-page .info4you-brand-copy h1 .info4you-highlight {
    color: #3aa7ff;
}

body.info4you-login-page .info4you-brand-copy h1::after {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    margin: 23px 0 19px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1692ff, #42c8ff);
    box-shadow: 0 0 20px rgba(41,185,255,.24);
}

body.info4you-login-page .info4you-lead {
    max-width: 560px;
    margin: 0;
    font-size: clamp(14px, .98vw, 16.5px);
    line-height: 1.65;
    color: rgba(255,255,255,.80);
    text-shadow: 0 3px 14px rgba(0,0,0,.14);
}

body.info4you-login-page .info4you-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    width: min(430px, 100%);
    margin-top: clamp(30px, 4vh, 46px);
}

body.info4you-login-page .info4you-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

body.info4you-login-page .info4you-benefit:first-child,
body.info4you-login-page .info4you-benefit:last-child {
    padding: 0;
    border: 0;
}

body.info4you-login-page .info4you-benefit i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(48,182,255,.30);
    border-radius: 11px;
    background: rgba(7, 45, 87, .28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    font-size: 22px;
    color: #39bbff;
    text-shadow: 0 0 18px rgba(41,185,255,.20);
}

body.info4you-login-page .info4you-benefit span {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255,255,255,.90);
}

body.info4you-login-page .info4you-brand-signature {
    display: none;
}

/* =========================================================
   LOGIN — DIREITA
   ========================================================= */

body.info4you-login-page .main-content-card form > .row > .col-md-5 {
    order: 2;
    position: relative;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: clamp(48px, 5.2vw, 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(18,135,245,.055), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

/* Mantém o conteúdo do formulário elegante e não excessivamente largo. */
body.info4you-login-page .main-content-card form > .row > .col-md-5 > * {
    width: min(100%, 540px);
    margin-left: auto;
    margin-right: auto;
}

body.info4you-login-page .main-content-card form > .row > .col-md-5 > .card-header {
    display: block;
    padding: 0;
    margin-bottom: 34px !important;
    border: 0;
    background: transparent;
}

body.info4you-login-page .main-content-card form h2 {
    margin: 0 !important;
    max-width: 520px;
    font-size: clamp(28px, 2.12vw, 38px);
    line-height: 1.08;
    letter-spacing: -.032em;
    font-weight: 750;
    color: var(--i4y-text);
    text-wrap: balance;
}

body.info4you-login-page .info4you-login-subtitle {
    max-width: 470px;
    margin: 11px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--i4y-muted);
}

body.info4you-login-page .main-content-card .mb-3,
body.info4you-login-page .main-content-card .mb-4 {
    margin-bottom: 14px !important;
}

body.info4you-login-page .main-content-card .form-label {
    margin-bottom: 7px;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .055em;
    color: #263a55;
}

body.info4you-login-page .main-content-card .form-control,
body.info4you-login-page .main-content-card .form-select,
body.info4you-login-page .main-content-card .select2-selection {
    min-height: 42px;
    border: 1px solid var(--i4y-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.02);
    background-color: #fff;
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.info4you-login-page .main-content-card .form-control:hover,
body.info4you-login-page .main-content-card .form-select:hover {
    border-color: #c6d3e2;
}

body.info4you-login-page .main-content-card .form-control:focus,
body.info4you-login-page .main-content-card .form-select:focus {
    border-color: rgba(18,135,245,.80);
    box-shadow: 0 0 0 3px rgba(18,135,245,.10);
}

body.info4you-login-page .main-content-card .form-check {
    margin-top: 2px;
}

body.info4you-login-page .main-content-card .form-check-label {
    font-size: 12px;
    color: #5f6f84;
}

body.info4you-login-page .main-content-card .form-check-input:checked {
    background-color: #1287f5;
    border-color: #1287f5;
}

body.info4you-login-page .main-content-card .form-footer {
    margin-top: 19px;
}

body.info4you-login-page .main-content-card .btn-primary {
    min-height: 46px;
    margin-top: 2px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #086fe5 0%, #1287f5 52%, #0d79eb 100%);
    box-shadow:
        0 12px 28px rgba(18,135,245,.17),
        inset 0 1px 0 rgba(255,255,255,.18);
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: .055em;
    color: #fff;
}

body.info4you-login-page .main-content-card .btn-primary:hover {
    background: linear-gradient(90deg, #0768d7 0%, #0f7fee 52%, #0b72dc 100%);
    box-shadow: 0 14px 32px rgba(18,135,245,.22);
}

body.info4you-login-page .forgot_password {
    margin-top: 8px;
}

body.info4you-login-page .forgot_password a {
    font-size: 11.5px;
    color: var(--i4y-blue);
}

body.info4you-login-page .info4you-security-line {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 25px;
    padding-top: 19px;
    border-top: 1px solid #edf1f5;
    font-size: 10.5px;
    color: #718198;
}

body.info4you-login-page .info4you-security-line span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

body.info4you-login-page .info4you-security-line span + span::before {
    content: "•";
    margin-right: 7px;
    color: var(--i4y-blue);
}

body.info4you-login-page .info4you-security-line i {
    font-size: 14px;
    color: #52708f;
}

/* =========================================================
   WHATSAPP — APENAS LOGIN
   ========================================================= */

body.info4you-login-page .info4you-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.80);
    border-radius: 999px;
    text-decoration: none;
    background: #25d366;
    color: #fff;
    box-shadow:
        0 18px 42px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 12px;
    font-weight: 750;
    transition: transform .18s ease, box-shadow .18s ease;
}

body.info4you-login-page .info4you-whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 46px rgba(15,23,42,.25);
}

body.info4you-login-page .info4you-whatsapp i {
    font-size: 23px;
}

/* =========================================================
   NOTEBOOK / TABLET
   ========================================================= */

@media (max-width: 1180px) {
    body.info4you-login-page .main-content-card form > .row {
        grid-template-columns: minmax(0, 55fr) minmax(400px, 45fr);
    }

    body.info4you-login-page .info4you-brand-panel__content {
        padding-left: 46px;
        padding-right: 46px;
    }

    body.info4you-login-page .info4you-benefits {
        width: min(400px, 100%);
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {
    body.info4you-login-page .main-content-card form > .row {
        display: flex;
        flex-direction: column;
    }

    body.info4you-login-page .main-content-card form > .row > .col-auto {
        order: 1;
    }

    body.info4you-login-page .main-content-card form > .row > .col-md-5 {
        order: 2;
        min-height: auto;
        padding: 38px 24px 88px;
    }

    body.info4you-login-page .info4you-brand-panel,
    body.info4you-login-page .info4you-brand-panel__content {
        min-height: auto;
    }

    body.info4you-login-page .info4you-brand-panel {
        background-position: 65% 48%;
    }

    body.info4you-login-page .info4you-brand-panel__content {
        padding: 28px 24px 30px;
    }

    body.info4you-login-page .info4you-brand-logo {
        margin-top: 0;
        padding: 0;
    }

    body.info4you-login-page .info4you-brand-logo img {
        width: 170px;
        max-height: 86px;
    }

    body.info4you-login-page .info4you-brand-copy {
        width: 100%;
        margin: 26px 0 0;
        transform: none;
    }

    body.info4you-login-page .info4you-brand-copy h1 {
        max-width: 390px;
        font-size: 30px;
    }

    body.info4you-login-page .info4you-eyebrow,
    body.info4you-login-page .info4you-lead,
    body.info4you-login-page .info4you-benefits,
    body.info4you-login-page .info4you-brand-signature {
        display: none;
    }

    body.info4you-login-page .info4you-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 52px;
        min-height: 52px;
        padding: 0;
        justify-content: center;
    }

    body.info4you-login-page .info4you-whatsapp span {
        display: none;
    }
}

/* Respeita preferência de redução de movimento do sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    body.info4you-login-page *,
    body.info4you-login-page *::before,
    body.info4you-login-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

@media (min-width: 1181px) {
    body.info4you-login-page .main-content-card form > .row > .col-md-5 {
        padding-left: clamp(46px, 4.4vw, 72px);
        padding-right: clamp(46px, 4.4vw, 72px);
    }

    body.info4you-login-page .main-content-card form > .row > .col-md-5 > * {
    width: min(100%, 540px);
    }
}


/* =========================================================
   ERRO DE AUTENTICAÇÃO — MESMA IDENTIDADE DO LOGIN
   ========================================================= */

body.info4you-login-error-page .main-content-card > .card-body {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(430px, 42fr);
    min-height: 100vh;
}

body.info4you-login-error-page .info4you-error-brand-panel {
    min-height: 100vh;
}

body.info4you-login-error-page .info4you-auth-error-panel {
    min-width: 0;
    min-height: 100vh;
    padding: clamp(48px, 5.2vw, 86px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(18,135,245,.055), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

body.info4you-login-error-page .info4you-auth-error-panel .alert {
    width: min(100%, 540px);
    margin: 0;
    padding: 28px 30px;
    border: 1px solid rgba(220, 53, 69, .24);
    border-left: 4px solid #dc3545;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(220,53,69,.045), rgba(220,53,69,.018)),
        #ffffff;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, .07),
        0 1px 2px rgba(15, 23, 42, .04);
    color: #26384f;
}

body.info4you-login-error-page
.info4you-auth-error-panel
.alert > .d-flex {
    align-items: flex-start !important;
}

body.info4you-login-error-page
.info4you-auth-error-panel
.alert .me-4 {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-right: 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(220, 53, 69, .10);
    color: #dc3545;
}

body.info4you-login-error-page
.info4you-auth-error-panel
.alert .me-4 i {
    font-size: 27px !important;
}

body.info4you-login-error-page
.info4you-auth-error-panel
.alert-title {
    margin: 2px 0 8px;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -.015em;
    color: #a7202d;
}

body.info4you-login-error-page .info4you-auth-error-detail {
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    color: #b02a37;
}

body.info4you-login-error-page .info4you-auth-error-helper {
    max-width: 410px;
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6f7f93;
}

body.info4you-login-error-page .info4you-auth-retry {
    min-height: 44px;
    margin-top: 20px !important;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #086fe5, #1287f5);
    box-shadow: 0 10px 24px rgba(18,135,245,.16);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}

body.info4you-login-error-page .info4you-auth-retry:hover {
    color: #fff;
    filter: brightness(.97);
}

body.info4you-login-error-page .info4you-brand-logo {
    margin-top: 76px;
}

@media (max-width: 820px) {
    body.info4you-login-error-page .main-content-card > .card-body {
        display: flex;
        flex-direction: column;
    }

    body.info4you-login-error-page .info4you-error-brand-panel {
        min-height: auto;
    }

    body.info4you-login-error-page .info4you-auth-error-panel {
        min-height: auto;
        padding: 38px 24px 88px;
    }

    body.info4you-login-error-page .info4you-brand-logo {
        margin-top: 0;
    }

    body.info4you-login-error-page .info4you-auth-error-panel .alert {
        padding: 22px 20px;
    }
}