/* ==========================================================================
   components/alerts.css — page-level messages (success / error / info / warning)
   --------------------------------------------------------------------------
   Used by: form results, flash messages, empty states.
   All message texts come from i18n. FLAT: tinted surface + 1px border.
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

/* Operation succeeded (saved, sent, created...) */
.alert-success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Operation failed / validation error */
.alert-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Warning (e.g. unverified email) */
.alert-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

/* Neutral information */
.alert-info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info);
}