/* 
 * Messages CSS
 * Alle Definition für Messages (Erfolgs- und Fehlermeldungen)
 * Messages CSS Definitionen dürfen in keiner anderen CSS-Datei vorhanden sein
 */

.widget-message {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
}

.widget-message-success {
    background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success-green-alt-rgba-15) 100%);
    border: 1px solid var(--color-success-rgba-30);
    color: var(--color-success);
}

.widget-message-success::before {
    content: '✓';
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

.widget-message-error {
    background: linear-gradient(135deg, var(--color-error-light) 0%, var(--color-error-light) 100%);
    border: 1px solid var(--color-error-rgba-30);
    color: var(--color-error);
}

.widget-message-error::before {
    content: '⚠';
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

.widget-message-warning {
    background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-warning-light) 100%);
    border: 1px solid var(--color-warning-rgba-30);
    color: var(--color-warning);
}

.widget-message-warning::before {
    content: '⚠';
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

.widget-message-info {
    background: linear-gradient(135deg, var(--color-info-light) 0%, var(--color-info-light) 100%);
    border: 1px solid var(--color-info-rgba-30);
    color: var(--color-info);
}

.widget-message-info::before {
    content: 'ℹ';
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
}

/* Badge Styles */
.widget-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.widget-badge-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success-rgba-30);
}

.widget-badge-error {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error-rgba-30);
}

.widget-badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-rgba-30);
}