/* ==========================================================================
   Alerts — Auto-dismissing flash notifications
   Layer 5 — Component (requires tokens.css, base.css)
   /css/admin/alerts.css

   Purpose: Success, danger, and warning alerts shown after form submissions,
   deletions, sync operations, and other admin actions.
   ========================================================================== */

/* ==========================================================================
   1. Alert Base
   ========================================================================== */

.alert {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn var(--transition-slow);
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   2. Alert Variants
   ========================================================================== */

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

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

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

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

/* Inline action link inside an alert (e.g. "Upload now →") */
.alert-link {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: inherit;
    text-decoration: underline;
    margin-left: var(--spacing-3);
    white-space: nowrap;
}

.alert-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ==========================================================================
   3. Dismiss Button
   ========================================================================== */

.alert-dismiss {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    opacity: var(--opacity-muted);
    padding: 0 var(--spacing-1);
    margin-left: var(--spacing-3);
    color: inherit;
}

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

/* ==========================================================================
   4. Progress Bar (auto-dismiss countdown)
   ========================================================================== */

.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--size-progress-bar);
    background: currentColor;
    opacity: var(--opacity-subtle);
    animation: shrink var(--duration-alert-dismiss) linear forwards;
}

/* ==========================================================================
   5. State Animations
   ========================================================================== */

.alert.fade-out {
    animation: fadeOut var(--transition-slow) forwards;
}

@keyframes slideIn {
    from { transform: translateY(calc(-1 * var(--spacing-2))); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(calc(-1 * var(--spacing-2))); opacity: 0; }
}

@keyframes shrink {
    from { width: 100%; }
    to   { width: 0; }
}