/* Feedback banners (error / success / warning).

   Soft tinted background + tinted border + dark readable text + a leading
   icon, matching the Cowork/Console `Alert` primitive — not a solid saturated
   fill with white text, which reads as louder than the message deserves and
   crowds the body copy beneath it. */
.alert-error,
.alert-success,
.alert-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

.alert-error .pf-c-alert__icon,
.alert-success .pf-c-alert__icon,
.alert-warning .pf-c-alert__icon {
    display: flex;
    flex-shrink: 0;
    /* Optically align the icon with the cap height of the first text line. */
    margin-top: 0.0625rem;
}

.alert-error .pf-c-alert__icon svg,
.alert-success .pf-c-alert__icon svg,
.alert-warning .pf-c-alert__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.alert-error {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}

.alert-success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.alert-warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

/* Info messages (e.g. Keycloak's "Please re-authenticate to continue." on a
   prompt=login re-auth) are plain prompt text, not an alarm, so they read like
   the page's other centered elements rather than the colored error/success/
   warning banners: centered, with matching spacing below. */
.alert-info {
    text-align: center;
    margin-bottom: 1rem;
}

.alert-info .pf-c-alert__icon {
    display: none;
}