/*
 * Login e demais páginas anônimas, somente com CSS sobre o template original
 * (templates/pages/login.html.twig): formulário, CSRF e autenticação são os nativos.
 * Duas colunas no desktop: o painel de marca é um pseudo-elemento decorativo.
 */
:root[data-glpi-theme^="central_"] body.welcome-anonymous {
    background-color: var(--cs-bg);

    .page-anonymous {
        min-height: 100vh;
        min-height: 100dvh;
        background-color: var(--cs-bg);
    }

    .page-anonymous > .flex-fill {
        margin: 0 !important;
        padding: var(--cs-space-5) var(--cs-space-4) !important;
    }

    .container-tight {
        width: 100%;
        max-width: 26rem !important;
        padding: 0 !important;
        margin-inline: auto;
    }

    .page-anonymous .glpi-logo {
        --logo: var(--cs-logo-on-light);
        display: block;
        width: 136px;
        height: 40px;
        margin-inline: auto;
        content: var(--logo);
    }

    .main-content-card {
        background: var(--cs-surface);
        border: 1px solid var(--cs-border);
        border-radius: var(--cs-radius-lg);
        box-shadow: var(--cs-shadow-md);
    }

    .main-content-card .card-body {
        padding: var(--cs-space-6);
    }

    /* A grade do template reserva 5/12 para o formulário; aqui ele ocupa o cartão. */
    .main-content-card .row > .col-md-5 {
        width: 100%;
        flex: 0 0 100%;
    }

    .main-content-card .card-header {
        padding: 0;
        margin-bottom: var(--cs-space-5) !important;
        border: 0;
        background: transparent;
    }

    .main-content-card h2 {
        margin: 0 !important;
        color: var(--cs-text);
        font-size: 1.375rem;
        font-weight: 650;
        letter-spacing: -0.01em;
    }

    .form-label {
        margin-bottom: var(--cs-space-1);
        font-size: 0.8125rem;
    }

    .form-control {
        height: 44px;
        padding-inline: var(--cs-space-3);
        font-size: 0.9375rem;
    }

    .form-footer {
        margin-top: var(--cs-space-5);
    }

    .form-footer .btn-primary {
        position: relative;
        min-height: 44px;
        font-weight: 600;
    }

    /* Estado de carregamento: o core marca o envio com data-submit-once. */
    form[data-submitted="true"] .form-footer .btn-primary {
        color: transparent;
        pointer-events: none;
    }

    form[data-submitted="true"] .form-footer .btn-primary::after {
        content: "";
        position: absolute;
        inset: calc(50% - 9px) auto auto calc(50% - 9px);
        width: 18px;
        height: 18px;
        border: 2px solid var(--cs-primary-fg);
        border-right-color: transparent;
        border-radius: 50%;
        animation: cs-spin 0.7s linear infinite;
    }

    .forgot_password a,
    .page-anonymous a:not(.btn) {
        color: var(--cs-primary);
    }

    .text-muted,
    .text-muted a,
    .copyright {
        color: var(--cs-text-muted) !important;
        font-size: 0.75rem;
    }

    /* Tela de erro: a mensagem é o próprio conteúdo do cartão, sem caixa dentro de caixa. */
    .main-content-card .alert {
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .main-content-card .alert .ti-alert-triangle {
        color: var(--cs-danger);
    }

    .main-content-card .alert .alert-title {
        color: var(--cs-text);
        font-size: var(--cs-text-section);
        font-weight: 650;
    }

    .main-content-card .alert .btn {
        min-height: 40px;
    }

    @media (min-width: 992px) {
        .page-anonymous {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            position: relative;
        }

        /* Painel de marca: textos em themes/_tokens.scss. */
        .page-anonymous::before {
            content: var(--cs-login-headline);
            display: flex;
            align-items: flex-end;
            padding: 0 clamp(40px, 6vw, 88px) 180px;
            color: #FFFFFF;
            font-size: clamp(1.875rem, 2.8vw, 2.75rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.02em;
            text-wrap: balance;
            background:
                var(--cs-logo-on-dark) clamp(40px, 6vw, 88px) 48px / 136px 40px no-repeat,
                var(--cs-login-pattern) center / cover no-repeat,
                var(--cs-brand-navy);
        }

        .page-anonymous::after {
            content: var(--cs-login-tagline);
            position: absolute;
            left: clamp(40px, 6vw, 88px);
            bottom: 96px;
            width: calc(52.38% - 2 * clamp(40px, 6vw, 88px));
            color: #CBD5E1;
            font-size: 1.0625rem;
            line-height: 1.55;
        }

        .page-anonymous > .flex-fill {
            justify-content: center;
            min-width: 0;
        }

        /* A marca já aparece no painel. */
        .text-center:has(> .col-md > .glpi-logo) {
            display: none;
        }
    }

    @media (max-width: 991.98px) {
        .page-anonymous .glpi-logo {
            margin-bottom: var(--cs-space-5) !important;
        }

        .main-content-card .card-body {
            padding: var(--cs-space-5);
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root[data-glpi-theme="central_claro"] body.welcome-anonymous .page-anonymous .glpi-logo {
        --logo: var(--cs-logo-on-dark);
    }
}

:root[data-glpi-theme="central_escuro"] body.welcome-anonymous .page-anonymous .glpi-logo {
    --logo: var(--cs-logo-on-dark) !important;
}

@keyframes cs-spin {
    to {
        transform: rotate(360deg);
    }
}