/* ========================================
   E5.4 — ALERTS
   ======================================== */
.alert {
    position: relative;
    padding: var(--erp-space-3) var(--erp-space-4);
    margin-bottom: var(--erp-space-4);
    border: 1px solid transparent;
    border-radius: var(--erp-radius-md);
    font-size: var(--erp-font-size-md);
    line-height: var(--erp-line-height-normal);
}

.alert-link {
    font-weight: var(--erp-font-weight-bold);
    color: inherit;
    text-decoration: underline;
}

/* Alert Variants */
.alert-primary {
    color: var(--erp-color-primary-700);
    background-color: var(--erp-color-primary-50);
    border-color: var(--erp-color-primary-100);
}

.alert-secondary {
    color: var(--erp-color-slate-700);
    background-color: var(--erp-color-slate-100);
    border-color: var(--erp-color-slate-200);
}

.alert-success {
    color: var(--erp-color-success-600);
    background-color: var(--erp-color-success-50);
    border-color: #bbf7d0; /* A bit darker than 50 for border */
}

.alert-danger {
    color: var(--erp-color-danger-600);
    background-color: var(--erp-color-danger-50);
    border-color: #fecaca;
}

.alert-warning {
    color: var(--erp-color-warning-600);
    background-color: var(--erp-color-warning-50);
    border-color: #fde68a;
}

.alert-info {
    color: #0369a1; /* Sky/Blue blend for info */
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

.alert-light {
    color: var(--erp-color-slate-600);
    background-color: var(--erp-color-slate-50);
    border-color: var(--erp-color-slate-100);
}

.alert-dark {
    color: var(--erp-color-slate-50);
    background-color: var(--erp-color-slate-700);
    border-color: var(--erp-color-slate-800);
}

/* ========================================
   E5.4 — PROGRESS
   ======================================== */
.progress {
    display: flex;
    height: 16px;
    overflow: hidden;
    font-size: var(--erp-font-size-xs);
    background-color: var(--erp-color-slate-100);
    border-radius: var(--erp-radius-full);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--erp-text-inverse);
    text-align: center;
    white-space: nowrap;
    background-color: var(--erp-color-primary-500);
    transition: width var(--erp-transition-normal);
}

.progress-bar-danger {
    background-color: var(--erp-color-danger-500);
}

.progress-striped .progress-bar,
.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: 1s linear infinite progress-bar-stripes;
}

@keyframes progress-bar-stripes {
    0% { background-position-x: 1rem; }
}

/* ========================================
   E5.4 — SPINNERS
   ======================================== */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: 0.75s linear infinite spinner-border;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* ========================================
   E5.4 — TOASTS
   ======================================== */
.toast-container {
    position: absolute;
    z-index: 1090; /* High enough to overlay most UI */
    pointer-events: none;
}

.toast {
    width: 350px;
    max-width: 100%;
    font-size: var(--erp-font-size-sm);
    color: var(--erp-text-secondary);
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.95);
    background-clip: padding-box;
    border: 1px solid var(--erp-border-default);
    box-shadow: var(--erp-shadow-lg);
    border-radius: var(--erp-radius-md);
    display: none; /* hidden by default */
}

.toast.showing {
    display: block;
    opacity: 0;
}

.toast.show {
    display: block;
    opacity: 1;
    transition: opacity var(--erp-transition-normal);
}

.toast.hide {
    display: none;
}

.toast-header {
    display: flex;
    align-items: center;
    padding: var(--erp-space-2) var(--erp-space-3);
    color: var(--erp-text-primary);
    background-color: rgba(255, 255, 255, 0.85);
    background-clip: padding-box;
    border-bottom: 1px solid var(--erp-border-light);
    border-top-left-radius: calc(var(--erp-radius-md) - 1px);
    border-top-right-radius: calc(var(--erp-radius-md) - 1px);
}

.toast-body {
    padding: var(--erp-space-3);
    word-wrap: break-word;
}