/* Alertek és toast értesítések – szerkesztőségi: bal oldali szabályvonal */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-1);
    margin-bottom: 1rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--rule);
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border-left: 3px solid var(--success);
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border-left: 3px solid var(--danger);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning);
    border-left: 3px solid var(--warning);
}

.alert-info {
    background: var(--info-bg);
    color: var(--info);
    border-left: 3px solid var(--info);
}

/* Toast értesítések – a base.html-beli aria-live régióban jelennek meg */
.toast-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0;
    background-color: var(--surface-raised);
    box-shadow: var(--shadow-overlay);
    animation: slideIn 0.3s ease;
}

/* Toast animációk (korábban az app.js injektálta) */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}