/* ═══════════════════════════════════════════════════════════
   Alerts & status messages — extracted from TNonline
   (Settings status-message / Login error / export-error banner)
   Inline banners in success / error / warning / info tones,
   with an optional leading icon and a dismiss button.
   ═══════════════════════════════════════════════════════════ */

.tn-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--tn-radius);
    font-size: var(--tn-font-size-sm);
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.tn-alert .bi:first-child {
    font-size: 1rem;
    flex-shrink: 0;
}

.tn-alert-text {
    flex: 1;
}

.tn-alert-close {
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--tn-transition);
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.tn-alert-close:hover {
    opacity: 1;
}

/* ── Tones ── */
.tn-alert--success {
    background: var(--tn-success-light);
    color: var(--tn-success);
    border-color: rgba(45, 139, 78, 0.12);
}

.tn-alert--error {
    background: var(--tn-danger-light);
    color: var(--tn-danger);
    border-color: rgba(197, 48, 48, 0.12);
}

.tn-alert--warning {
    background: var(--tn-warning-light);
    color: var(--tn-warning-text);
    border-color: rgba(184, 134, 11, 0.15);
}

.tn-alert--info {
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    border-color: rgba(13, 115, 119, 0.15);
}