body {
    /* Tornar o background base transparente para que as camadas de cor/imagem e overlay do login fiquem visíveis */
    background-color: transparent;
    color: var(--login-text-color, #fff);
    font-family: 'Arial', sans-serif;
    height: 100vh;
    display: flex;
    /* Empilhar filhos verticalmente para que o bloco de mensagens não empurre o formulário para a lateral */
    flex-direction: column;
    /* Mantém a semântica dos tokens: vertical -> justify-content; horizontal -> align-items */
    justify-content: var(--login-form-vertical-align, center);
    align-items: var(--login-form-horizontal-align, center);
    position: relative;
    overflow: hidden;
}

.login-container {
    background-color: var(--login-container-bg-color, #19A09C);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    margin-top: var(--login-form-margin-top, 0px);
    margin-bottom: var(--login-form-margin-bottom, 0px);
    margin-left: var(--login-form-margin-left, 0px);
    margin-right: var(--login-form-margin-right, 0px);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--login-title-color, var(--text-heading-color));
}

label {
    display: block;
    margin-bottom: 5px;
    color: var(--login-label-color, var(--text-muted-color));
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--surface-border-color);
    border-radius: 3px;
}

/* Color background layer with controllable opacity */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0; /* camada de fundo de cor do login */
    background-color: var(--login-bg-color, #1c354f);
    opacity: var(--login-bg-opacity, 1);
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* camada de imagem do login */
    background-image: var(--login-bg-image, none);
    background-position: var(--login-bg-position, center);
    background-repeat: var(--login-bg-repeat, no-repeat);
    background-size: var(--login-bg-fit, cover);
    opacity: var(--login-bg-opacity, 1);
}
body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* overlay acima da cor/imagem, abaixo do conteúdo */
    background: rgba(0,0,0, var(--login-overlay-opacity, 0.2));
}

.is-invalid {
    border-color: #ff4c4c;
}

.invalid-feedback {
    color: #ff4c4c;
}

.form-label {
    color: var(--login-label-color, var(--text-muted-color));
}

/* Mobile: sempre centralizar */
@media (max-width: 768px) {
    body {
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem;
    }
    .login-container {
        margin: 0 !important;
    }
}

/* Neutralizar overlays/fundos globais da Home no contexto do Login */
body.has-bg-image::before,
body.has-bg-overlay::after {
    content: none !important;
}

/* Reforço de precedência: garantir que o login use as cores do AppIdentity mesmo com regras globais !important */
.login-container label,
.login-container .form-label {
    color: var(--login-label-color, var(--text-muted-color)) !important;
}

.login-container,
.login-container input,
.login-container select,
.login-container textarea,
.login-container .form-control,
.login-container .form-select {
    color: var(--login-text-color, #fff) !important;
}

.login-container .form-text,
.login-container .text-muted {
    color: var(--login-label-color, var(--text-muted-color)) !important;
}

.login-container input::placeholder,
.login-container textarea::placeholder {
    color: var(--login-label-color, var(--text-muted-color)) !important;
}

/* Garantir que o conteúdo fique acima das camadas de fundo */
.login-container {
  position: relative;
  z-index: 3;
}