/* ============================================================
   Alerts — Refined Glass Design
   ============================================================ */

/* ---------- Pulse animation for unresolved HIGH severity ---------- */
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 85, 90, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(210, 85, 90, 0.06); }
}

/* ---------- Alert Card ---------- */
.alert-card {
  border: 1px solid var(--border, #E1E5EF);
  border-radius: 14px;
  background: var(--bg-card, #fff);
  padding: 1.2rem 1.4rem;
  margin-bottom: 0.85rem;
  transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  overflow: hidden;
  animation: appFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.alert-card:hover {
  box-shadow: 0 8px 28px rgba(22, 34, 56, 0.07);
  transform: translateY(-2px);
}

/* Severity accent */
.alert-card--high {
  border-left: 4px solid var(--color-danger, #D2555A);
  animation: appFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both,
             alertPulse 3s ease-in-out infinite 1s;
}
.alert-card--high:hover {
  box-shadow: 0 8px 28px rgba(210, 85, 90, 0.10);
  animation: appFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.alert-card--medium {
  border-left: 4px solid var(--color-warning, #B7791F);
}
.alert-card--medium:hover {
  box-shadow: 0 8px 28px rgba(255, 201, 40, 0.08);
}

/* Resolved state — use direct color instead of opacity to preserve contrast */
.alert-card--resolved {
  border-left-color: var(--border, #E1E5EF);
  animation: appFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.alert-card--resolved .alert-type-label {
  color: #9AA0AB;   /* muted text instead of opacity overlay */
}
.alert-card--resolved .alert-meta {
  color: #B0B7C0;   /* slightly muted meta text */
}

/* ---------- Header ---------- */
.alert-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.alert-type-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main, #1E2430);
  letter-spacing: -0.01em;
}

/* ---------- Meta ---------- */
.alert-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #6B7280);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.alert-meta i {
  color: #9AA0AB;   /* was opacity:0.6 — effective contrast was 2.3:1 FAIL; now uses solid color */
}

/* ---------- Actions ---------- */
.alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(var(--primary-rgb, 215, 25, 32), 0.06);
}

.alert-actions .btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  transition: all 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.alert-actions .btn:hover {
  transform: translateY(-1px);
}

/* ---------- Resolved Info ---------- */
.alert-resolved-info {
  background: rgba(45, 143, 111, 0.04);
  border: 1px solid rgba(45, 143, 111, 0.08);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--text-sub, #4B5565);
}

/* Stagger animation */
#alertList .alert-card:nth-child(1) { animation-delay: 0.04s; }
#alertList .alert-card:nth-child(2) { animation-delay: 0.08s; }
#alertList .alert-card:nth-child(3) { animation-delay: 0.12s; }
#alertList .alert-card:nth-child(4) { animation-delay: 0.16s; }
#alertList .alert-card:nth-child(5) { animation-delay: 0.20s; }
#alertList .alert-card:nth-child(6) { animation-delay: 0.24s; }
#alertList .alert-card:nth-child(7) { animation-delay: 0.28s; }
#alertList .alert-card:nth-child(8) { animation-delay: 0.32s; }