/* ═══════════════════════════════════════════════════════════════════
   components/alerts.css

   Alert components — accessible, no auto-dismiss.
   ═══════════════════════════════════════════════════════════════════ */

@layer components {
    /* Elevation-first alert (Phase 1 refresh): replaces the all-around colored
       border with a clean elevation-1 shadow + 3px left accent strip. The
       semantic color is still loud (left strip + tinted bg + text color) but
       the surface reads as a card, not a colored box. Reduces visual noise
       at scale (10+ alerts on a busy page used to be a checkerboard). */
    .alert {
        padding: 0.875rem 1.125rem 0.875rem 1.25rem;
        border-radius: var(--radius-lg);
        border: 0;
        border-left: 3px solid transparent;
        background: var(--surface-1);
        box-shadow: var(--elevation-1);
        margin-bottom: var(--space-4);
        position: relative;
        font-size: 0.8125rem;
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    .alert-dismissible {
        padding-right: 3rem;
    }

    .alert-success {
        background: color-mix(in srgb, var(--color-success) 8%, var(--surface-1));
        border-left-color: var(--color-success);
        color: var(--color-success);
    }

    .alert-warning {
        background: color-mix(in srgb, var(--color-warning) 8%, var(--surface-1));
        border-left-color: var(--color-warning);
        color: var(--color-warning);
    }

    .alert-danger {
        background: color-mix(in srgb, var(--color-danger) 8%, var(--surface-1));
        border-left-color: var(--color-danger);
        color: var(--color-danger);
    }

    .alert-info {
        background: color-mix(in srgb, var(--color-info) 8%, var(--surface-1));
        border-left-color: var(--color-info);
        color: var(--color-info);
    }

    /* Bootstrap-style overlay: absolute-positioned close button at top-right
       of the alert. Padding 1.25rem 1rem makes the click target comfortable;
       opacity 0.6 fades to 1 on hover. */
    .alert-dismissible .btn-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        padding: 1.25rem 1rem;
        opacity: 0.6;
        transition: opacity var(--duration-fast);
    }

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

    /* Alerts must remain visible — no auto-dismiss for accessibility */
}