/* ============================================
   Alerts - Corporate Notifications
   Aligneer Design System v1.0
   ============================================ */

/* ===== BASE ALERT ===== */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid;
    display: flex;
    align-items: start;
    gap: var(--spacing-md);
    font-size: var(--font-base);
}

.alert-icon {
    font-size: var(--font-xl);
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-xs);
}

/* ===== ALERT VARIANTS ===== */
.alert-error,
.error {
    background: var(--error-light);
    color: #991b1b;
    border-left-color: var(--error);
    border: 1px solid #fecaca;
    border-left: 4px solid var(--error);
}

.alert-success,
.success {
    background: var(--success-light);
    color: #065f46;
    border-left-color: var(--success);
    border: 1px solid #a7f3d0;
    border-left: 4px solid var(--success);
}

.alert-info,
.info {
    background: var(--info-light);
    color: #1e40af;
    border-left-color: var(--info);
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--info);
}

.alert-warning,
.warning {
    background: var(--warning-light);
    color: #92400e;
    border-left-color: var(--warning);
    border: 1px solid #fde68a;
    border-left: 4px solid var(--warning);
}

/* ===== DISMISSIBLE ALERT ===== */
.alert-dismissible {
    position: relative;
    padding-right: 3rem;
}

.alert-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: var(--font-xl);
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

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

/* ===== COMPACT ALERT ===== */
.alert-compact {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-sm);
}

/* ===== ALERT WITH ACTIONS ===== */
.alert-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* ===== DARK MODE ===== */
body.dark-mode .alert-error,
body.dark-mode .error {
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

body.dark-mode .alert-success,
body.dark-mode .success {
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .alert-info,
body.dark-mode .info {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .alert-warning,
body.dark-mode .warning {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}