/* ==========================================================================
   Alerts, Messages & Empty States
   Extracted from main.css for modularity (v0.8.0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Messages / Alerts
   -------------------------------------------------------------------------- */
.messages {
    margin-bottom: 1rem;
    padding: 0 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.message,
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideUp var(--transition-slow, 0.3s ease) ease-out;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.25rem;
}

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

.message-success,
.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.message-error,
.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.message-warning,
.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.message-info,
.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.empty-state-message {
    font-size: 0.9rem;
}