/*
 * Neckarpixel NpBeLoginBundle
 * Styles for the login-screen notices (Confluence-style info/success/warning/error panels).
 * Uses Contao's own CSS custom properties, so it automatically follows the
 * light/dark backend theme.
 */
.np-belogin-logo + #container {
    margin-top: 5em;
}

.np-belogin-logo {
    text-align: center;
    padding-top: 3.5em;
}

.np-belogin-logo img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 140px;
}

.np-belogin-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    margin: 24px auto 0;
}

.np-belogin-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--border-radius, 6px);
    border-left: 4px solid transparent;
    background: var(--content-bg, #fff);
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
}

.np-belogin-message__icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.np-belogin-message__icon svg,
.np-belogin-message__icon img {
    width: 100%;
    height: 100%;
}

.np-belogin-message__body {
    flex: 1 1 auto;
    min-width: 0;
}

.np-belogin-message__title {
    display: block;
    margin-bottom: 2px;
}

.np-belogin-message__text {
    overflow-wrap: anywhere;
}

/* Info */
.np-belogin-message--info {
    border-left-color: var(--blue);
    background: var(--info-bg);
}

.np-belogin-message--info .np-belogin-message__title,
.np-belogin-message--info .np-belogin-message__icon {
    color: var(--blue);
}

/* Success */
.np-belogin-message--success {
    border-left-color: var(--green);
    background: var(--confirm-bg);
}

.np-belogin-message--success .np-belogin-message__title,
.np-belogin-message--success .np-belogin-message__icon {
    color: var(--green);
}

/* Warning */
.np-belogin-message--warning {
    border-left-color: var(--orange);
    background: var(--new-bg);
}

.np-belogin-message--warning .np-belogin-message__title,
.np-belogin-message--warning .np-belogin-message__icon {
    color: var(--orange);
}

/* Error */
.np-belogin-message--error {
    border-left-color: var(--red);
    background: var(--error-bg);
}

.np-belogin-message--error .np-belogin-message__title,
.np-belogin-message--error .np-belogin-message__icon {
    color: var(--red);
}

@media (max-width: 640px) {
    .np-belogin-messages {
        max-width: none;
        margin-left: 10px;
        margin-right: 10px;
    }
}