/*
 * MCP Login — tela de login da MCP Virtual para o GLPI 11.
 *
 * Escopo: tudo fica preso a `body.welcome-anonymous:has(.mcp-login-panel)`.
 * O painel só é impresso na página de login (hook display_login), então as demais
 * páginas anônimas (recuperação de senha, 2FA, etc.) permanecem com o visual padrão.
 *
 * Estrutura do core em que este CSS se apoia (templates/pages/login.html.twig, 11.0.x):
 *   body.welcome-anonymous > main#page.page-anonymous > div > .container-tight
 *     > .card.main-content-card > .card-body > form > .row > (.col-md-5 | .col-auto)
 * Se um upgrade mudar essas classes, é aqui que se ajusta.
 */

@font-face {
    font-family: "MCP Plex";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "MCP Plex";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "MCP Plex";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "MCP Plex";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

/*
 * Tudo abaixo fica dentro de @layer com !important. É proposital: pela regra de cascata
 * do CSS, declarações !important dentro de uma camada vencem declarações !important
 * fora de camadas, independentemente de ordem e especificidade. É isso que garante que
 * este layout prevaleça sobre o CSS personalizado da entidade (tema do GLPI), que é
 * carregado depois e usa !important.
 */
@layer mcplogin {

body.welcome-anonymous:has(.mcp-login-panel) {
    --mcpl-navy: #1f3864;          /* cor da marca */
    --mcpl-navy-deep: #182c50 !important;
    --mcpl-gold: #b58a2a;          /* cor da marca (traços e ícones) */
    --mcpl-gold-text: #e3b65c !important;     /* dourado clareado: texto pequeno legível sobre o azul */
    --mcpl-ink: #111c33 !important;
    --mcpl-muted: #55617a;
    --mcpl-page: #f4f6fa;
    --mcpl-line: #cbd2de;
    --mcpl-panel-w: 53%;
    /* Unidade fluida: 1px em telas até ~1440x800 e cresce com a janela (até 1,6x) em monitores
       maiores, limitada também pela altura para o painel nunca precisar de rolagem. */
    --mcpl-u: clamp(1px, min(0.0694vw, 0.125vh), 1.6px);
    --mcpl-font: "MCP Plex", "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    background: var(--mcpl-page) !important;
    color: var(--mcpl-ink) !important;
    font-family: var(--mcpl-font) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
}

/* ---------- Estrutura: coluna do formulário ---------- */

body.welcome-anonymous:has(.mcp-login-panel) .page-anonymous {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin-left: var(--mcpl-panel-w) !important;
    padding: 0 !important;
    background: transparent !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .page-anonymous > div {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .container-tight {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(48 * var(--mcpl-u)) calc(32 * var(--mcpl-u)) calc(28 * var(--mcpl-u)) !important;
}

/* A marca já está no painel azul */
body.welcome-anonymous:has(.mcp-login-panel) .container-tight > .text-center:first-child {
    display: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .main-content-card {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .main-content-card > .card-header {
    display: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .main-content-card > .card-body {
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form > .row {
    margin: 0 !important;
    --tblr-gutter-x: 0;
    --tblr-gutter-y: 0;
}

/* Coluna dos campos */
body.welcome-anonymous:has(.mcp-login-panel) form > .row > .col-md-5 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: calc(400 * var(--mcpl-u)) !important;
    padding: 0 !important;
}

/* O contêiner do hook some do layout; os filhos (painel e contato móvel) se posicionam sozinhos */
body.welcome-anonymous:has(.mcp-login-panel) form > .row > .col-auto {
    display: contents !important;
}

/* Texto livre configurado em "Texto na página de login", se houver */
body.welcome-anonymous:has(.mcp-login-panel) form > .rich_text_container {
    max-width: calc(400 * var(--mcpl-u)) !important;
    margin: 0 auto calc(24 * var(--mcpl-u)) !important;
    text-align: left !important;
    color: var(--mcpl-muted) !important;
}

/* ---------- Formulário ---------- */

body.welcome-anonymous:has(.mcp-login-panel) form .card-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 calc(28 * var(--mcpl-u)) !important;
    border: 0 !important;
    background: transparent !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .card-header h2 {
    margin: 0 !important;
    font-family: var(--mcpl-font) !important;
    font-size: calc(30 * var(--mcpl-u)) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--mcpl-ink) !important;
    text-align: left !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-subtitle {
    margin: calc(10 * var(--mcpl-u)) 0 0 !important;
    font-size: calc(14 * var(--mcpl-u)) !important;
    line-height: 1.5 !important;
    color: var(--mcpl-muted) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-label {
    margin-bottom: calc(8 * var(--mcpl-u)) !important;
    font-size: calc(13 * var(--mcpl-u)) !important;
    font-weight: 600 !important;
    color: var(--mcpl-ink) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .d-flex:has(> label[for="login_password"]) {
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: calc(12 * var(--mcpl-u)) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-control,
body.welcome-anonymous:has(.mcp-login-panel) form .form-select {
    min-height: calc(46 * var(--mcpl-u)) !important;
    padding: calc(10 * var(--mcpl-u)) calc(14 * var(--mcpl-u)) !important;
    font-family: var(--mcpl-font) !important;
    font-size: calc(15 * var(--mcpl-u)) !important;
    color: var(--mcpl-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--mcpl-line) !important;
    border-radius: calc(8 * var(--mcpl-u)) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-control::placeholder {
    color: #8791a5 !important;
    opacity: 1 !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-control:focus,
body.welcome-anonymous:has(.mcp-login-panel) form .form-select:focus {
    border-color: var(--mcpl-navy) !important;
    box-shadow: 0 0 0 3px rgba(31, 56, 100, 0.22) !important;
    outline: 0 !important;
}

/* Seletor "Origem do login" (select2), quando essa opção está ligada no GLPI */
body.welcome-anonymous:has(.mcp-login-panel) form .select2-container {
    width: 100% !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .select2-container .select2-selection {
    display: flex !important;
    align-items: center !important;
    min-height: calc(46 * var(--mcpl-u)) !important;
    padding: 0 calc(14 * var(--mcpl-u)) !important;
    font-size: calc(15 * var(--mcpl-u)) !important;
    background-color: #fff !important;
    border: 1px solid var(--mcpl-line) !important;
    border-radius: calc(8 * var(--mcpl-u)) !important;
    box-shadow: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .select2-container .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    color: var(--mcpl-ink) !important;
}

/* Campo de senha com botão de mostrar/ocultar (criado pelo JS) */
body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password {
    position: relative !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password .form-control {
    padding-right: calc(48 * var(--mcpl-u)) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(40 * var(--mcpl-u)) !important;
    height: calc(38 * var(--mcpl-u)) !important;
    padding: 0 !important;
    font-size: calc(19 * var(--mcpl-u)) !important;
    color: var(--mcpl-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password-toggle:hover {
    color: var(--mcpl-navy) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password-toggle:focus-visible {
    outline: 2px solid var(--mcpl-navy) !important;
    outline-offset: 1px !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check {
    display: flex !important;
    align-items: center !important;
    gap: calc(10 * var(--mcpl-u)) !important;
    min-height: calc(24 * var(--mcpl-u)) !important;
    padding-left: 0 !important;
    margin: 4px 0 0 !important;
    cursor: pointer !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input {
    flex: 0 0 auto !important;
    float: none !important;
    width: calc(18 * var(--mcpl-u)) !important;
    height: calc(18 * var(--mcpl-u)) !important;
    margin: 0 !important;
    border: 1px solid #9aa5b8 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input:checked {
    background-color: var(--mcpl-navy) !important;
    border-color: var(--mcpl-navy) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 56, 100, 0.22) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-label {
    font-size: calc(14 * var(--mcpl-u)) !important;
    color: var(--mcpl-ink) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-footer {
    margin-top: calc(24 * var(--mcpl-u)) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary {
    min-height: calc(48 * var(--mcpl-u)) !important;
    margin: 0 !important;
    font-family: var(--mcpl-font) !important;
    font-size: calc(15 * var(--mcpl-u)) !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--mcpl-navy) !important;
    border: 1px solid var(--mcpl-navy) !important;
    border-radius: calc(8 * var(--mcpl-u)) !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary:hover,
body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary:active {
    color: #fff !important;
    background: var(--mcpl-navy-deep) !important;
    border-color: var(--mcpl-navy-deep) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary:focus-visible {
    outline: 2px solid var(--mcpl-navy) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form a,
body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-forgot-inline {
    color: var(--mcpl-navy) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form a:hover {
    text-decoration: underline !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-password-block {
    position: relative !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-forgot-inline {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    font-size: calc(13 * var(--mcpl-u)) !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

/* Com a cópia ao lado do rótulo, o link original (abaixo do botão) fica só para telas pequenas */
body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-forgot-original {
    display: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .forgot_password {
    margin-top: calc(18 * var(--mcpl-u)) !important;
    font-size: calc(14 * var(--mcpl-u)) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-secure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: calc(18 * var(--mcpl-u)) 0 0 !important;
    font-size: calc(13 * var(--mcpl-u)) !important;
    color: var(--mcpl-muted) !important;
}

/* Rodapé: crédito do GLPI */
body.welcome-anonymous:has(.mcp-login-panel) .container-tight > .text-center.text-muted {
    flex: 0 0 auto !important;
    margin: calc(28 * var(--mcpl-u)) 0 0 !important;
    font-size: calc(12 * var(--mcpl-u)) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .container-tight > .text-center.text-muted a {
    color: var(--mcpl-muted) !important;
    text-decoration: none !important;
}

/* ---------- Painel de marca (metade esquerda) ---------- */

.mcp-login-panel {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1 !important;
    width: var(--mcpl-panel-w) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: calc(40 * var(--mcpl-u)) !important;
    padding: clamp(calc(40 * var(--mcpl-u)), 6.5vh, calc(72 * var(--mcpl-u))) clamp(calc(40 * var(--mcpl-u)), 5.6vw, calc(96 * var(--mcpl-u))) !important;
    overflow: hidden auto !important;
    text-align: left !important;
    color: #fff !important;
    background: var(--mcpl-navy) !important;
    font-family: var(--mcpl-font) !important;
}

/* Círculos concêntricos decorativos.
   Desenhados como fundo de um pseudo-elemento do tamanho exato do painel: assim não geram
   área de rolagem (uma versão anterior, com o círculo saindo do painel, criava uma barra de rolagem). */
.mcp-login-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    --ring: rgba(255, 255, 255, 0.08);
    background: radial-gradient(
        circle at 75% 92%,
        transparent calc(10vw - 1px), var(--ring) calc(10vw - 1px), var(--ring) 10vw, transparent 10vw,
        transparent calc(15.5vw - 1px), var(--ring) calc(15.5vw - 1px), var(--ring) 15.5vw, transparent 15.5vw,
        transparent calc(21vw - 1px), var(--ring) calc(21vw - 1px), var(--ring) 21vw, transparent 21vw
    ) !important;
}

.mcp-login-panel > * {
    position: relative !important;
    z-index: 1 !important;
}

.mcp-login-brand {
    display: flex !important;
    flex-direction: column !important;
    gap: calc(8 * var(--mcpl-u)) !important;
}

.mcp-login-brand-name {
    font-size: calc(24 * var(--mcpl-u)) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
}

.mcp-login-brand-tagline {
    display: flex !important;
    align-items: center !important;
    gap: calc(12 * var(--mcpl-u)) !important;
    font-size: calc(11 * var(--mcpl-u)) !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #d5dcea !important;
}

.mcp-login-brand-tagline::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: calc(28 * var(--mcpl-u)) !important;
    height: 2px !important;
    background: var(--mcpl-gold) !important;
}

.mcp-login-pitch {
    max-width: calc(580 * var(--mcpl-u)) !important;
}

.mcp-login-eyebrow {
    margin: 0 0 calc(22 * var(--mcpl-u)) !important;
    font-size: calc(12 * var(--mcpl-u)) !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--mcpl-gold-text) !important;
}

.mcp-login-headline {
    margin: 0 0 calc(22 * var(--mcpl-u)) !important;
    font-size: clamp(calc(30 * var(--mcpl-u)), 3.1vw, calc(46 * var(--mcpl-u))) !important;
    line-height: 1.16 !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance !important;
}

.mcp-login-lead {
    max-width: 34em !important;
    margin: 0 0 calc(30 * var(--mcpl-u)) !important;
    font-size: calc(16 * var(--mcpl-u)) !important;
    line-height: 1.6 !important;
    color: #d5dcea !important;
}

.mcp-login-features {
    display: grid !important;
    gap: calc(16 * var(--mcpl-u)) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mcp-login-features li {
    display: flex !important;
    align-items: center !important;
    gap: calc(14 * var(--mcpl-u)) !important;
    font-size: calc(15 * var(--mcpl-u)) !important;
    font-weight: 500 !important;
}

.mcp-login-feature-icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(36 * var(--mcpl-u)) !important;
    height: calc(36 * var(--mcpl-u)) !important;
    font-size: calc(18 * var(--mcpl-u)) !important;
    color: var(--mcpl-gold-text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: calc(8 * var(--mcpl-u)) !important;
}

.mcp-login-support {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: calc(13 * var(--mcpl-u)) !important;
    line-height: 1.5 !important;
}

.mcp-login-support-label {
    color: #d5dcea !important;
}

.mcp-login-support-contacts {
    font-weight: 600 !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .mcp-login-panel a {
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .mcp-login-panel a:hover {
    text-decoration: underline !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .mcp-login-panel a:focus-visible {
    outline: 2px solid var(--mcpl-gold-text) !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}

.mcp-login-support-mobile {
    display: none !important;
}

/* Telas largas e baixas (notebook 1366x768 com zoom): enxuga o painel para não precisar rolar */
@media (min-width: 992px) and (max-height: 700px) {
    .mcp-login-panel {
        gap: calc(24 * var(--mcpl-u)) !important;
        padding-top: calc(32 * var(--mcpl-u)) !important;
        padding-bottom: calc(32 * var(--mcpl-u)) !important;
    }
    .mcp-login-lead {
        margin-bottom: calc(20 * var(--mcpl-u)) !important;
    }
    .mcp-login-features {
        gap: calc(10 * var(--mcpl-u)) !important;
    }
}

/* ---------- Tablet e celular: painel vira faixa no topo ---------- */

@media (max-width: 991.98px) {
    body.welcome-anonymous:has(.mcp-login-panel) {
        --mcpl-u: 1px;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .page-anonymous {
        margin-left: 0 !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .container-tight {
        padding: 0 0 calc(20 * var(--mcpl-u)) !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .main-content-card {
        justify-content: flex-start !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) form > .row {
        flex-direction: column !important;
        align-items: center !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) form > .row > .col-md-5 {
        max-width: calc(480 * var(--mcpl-u)) !important;
        padding: calc(32 * var(--mcpl-u)) calc(20 * var(--mcpl-u)) 0 !important;
    }

    .mcp-login-panel {
        position: static !important;
        order: -1 !important;
        width: 100% !important;
        gap: calc(28 * var(--mcpl-u)) !important;
        /* alinha o texto do painel com a coluna do formulário (440px úteis) em tablets */
        padding: calc(32 * var(--mcpl-u)) max(calc(20 * var(--mcpl-u)), calc(50% - calc(220 * var(--mcpl-u)))) calc(30 * var(--mcpl-u)) !important;
        overflow: hidden !important;
    }

    .mcp-login-brand-name {
        font-size: calc(20 * var(--mcpl-u)) !important;
    }

    .mcp-login-eyebrow {
        margin-bottom: calc(10 * var(--mcpl-u)) !important;
        font-size: calc(11 * var(--mcpl-u)) !important;
    }

    .mcp-login-headline {
        margin: 0 !important;
        font-size: clamp(calc(24 * var(--mcpl-u)), 6.4vw, calc(32 * var(--mcpl-u))) !important;
    }

    .mcp-login-lead,
    .mcp-login-features,
    .mcp-login-support,
    .mcp-login-panel::before {
        display: none !important;
    }

    /* O título "Entrar" repete o botão logo abaixo: em tela pequena o formulário começa nos campos */
    body.welcome-anonymous:has(.mcp-login-panel) form .card-header {
        display: none !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-forgot-inline {
        display: none !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-forgot-original {
        display: block !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) form .form-control {
        font-size: calc(16 * var(--mcpl-u)) !important; /* evita o zoom automático do iOS ao focar o campo */
    }

    body.welcome-anonymous:has(.mcp-login-panel) .mcp-login-support-mobile {
        display: block !important;
        order: 1 !important;
        width: 100% !important;
        margin: calc(36 * var(--mcpl-u)) 0 0 !important;
        padding: 0 calc(20 * var(--mcpl-u)) !important;
        font-size: calc(13 * var(--mcpl-u)) !important;
        line-height: 1.6 !important;
        text-align: center !important;
        color: var(--mcpl-muted) !important;
    }

    body.welcome-anonymous:has(.mcp-login-panel) .container-tight > .text-center.text-muted {
        margin-top: calc(10 * var(--mcpl-u)) !important;
        padding: 0 calc(20 * var(--mcpl-u)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.welcome-anonymous:has(.mcp-login-panel) form .form-control,
    body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary {
        transition: none !important;
    }
}

/* ---------- Neutraliza o tema personalizado do GLPI (CSS da entidade) nesta tela ---------- */
/* O tema atual estiliza o login antigo com !important: fundo com imagem, cartão de vidro
   (backdrop-filter, que prende elementos position:fixed dentro do cartão), título trocado
   por ::before, botão ciano e "lembrar de mim" oculto. */

body.welcome-anonymous:has(.mcp-login-panel) {
    background-image: none !important;
    background-attachment: scroll !important;
}

body.welcome-anonymous:has(.mcp-login-panel) #page,
body.welcome-anonymous:has(.mcp-login-panel) .page {
    background: transparent !important;
    color: var(--mcpl-ink) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .card,
body.welcome-anonymous:has(.mcp-login-panel) .container-tight {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .card {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) .card h2::before,
body.welcome-anonymous:has(.mcp-login-panel) .card .card-title::before,
body.welcome-anonymous:has(.mcp-login-panel) .card .h2::before {
    content: none !important;
    display: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input {
    display: inline-block !important;
    background-color: #fff !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input:checked {
    background-color: var(--mcpl-navy) !important;
    border-color: var(--mcpl-navy) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-check-input:focus {
    border-color: var(--mcpl-navy) !important;
    box-shadow: 0 0 0 3px rgba(31, 56, 100, 0.22) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .btn-primary:focus {
    color: #fff !important;
    background: var(--mcpl-navy) !important;
    border-color: var(--mcpl-navy) !important;
    box-shadow: none !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-control,
body.welcome-anonymous:has(.mcp-login-panel) form .form-control:focus,
body.welcome-anonymous:has(.mcp-login-panel) form .form-control:-webkit-autofill {
    color: var(--mcpl-ink) !important;
    background-color: #fff !important;
    -webkit-text-fill-color: var(--mcpl-ink) !important;
    caret-color: var(--mcpl-ink) !important;
}

body.welcome-anonymous:has(.mcp-login-panel) form .form-control::placeholder {
    -webkit-text-fill-color: #8791a5 !important;
}

.mcp-login-panel,
.mcp-login-panel p,
.mcp-login-panel li,
.mcp-login-panel span {
    font-family: var(--mcpl-font) !important;
}

.mcp-login-headline,
.mcp-login-brand-name,
.mcp-login-features li,
.mcp-login-support-contacts {
    color: #fff !important;
}

/* "Manter conectado" oculto por configuração (inc/config.php: show_remember = false) */
body.welcome-anonymous:has(.mcp-login-hide-remember) form div:has(> .form-check > #login_remember) {
    display: none !important;
}

body.welcome-anonymous:has(.mcp-login-hide-remember) form .mb-4:has(#login_password) {
    margin-bottom: 0 !important;
}

} /* fim @layer mcplogin */