/* Alerts and the pop-up notices. */

.alert-list { display: grid; gap: 10px; }
.alert-card { display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--warn); }
.alert-card.critical { border-left-color: var(--bad); }
.alert-card.info { border-left-color: var(--accent); }
.alert-card .title { font-weight: 600; }
.alert-card .value { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.all-clear { color: var(--good); display: flex; gap: 10px; align-items: center; }

.rule-error { color: var(--bad); }
.rule-query-cell { white-space: normal; font-family: var(--mono); font-size: 12px; }

.event { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.event:last-child { border-bottom: 0; }
.event .when { color: var(--muted); font-family: var(--mono); font-size: 12px; min-width: 70px; }
.event.firing .what { color: var(--bad); }
.event.resolved .what { color: var(--good); }

.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 50; }
.toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px var(--shadow);
  animation: slide-in 0.25s ease;
  max-width: 360px;
}
.toast.critical { border-left-color: var(--bad); }
.toast.resolved { border-left-color: var(--good); }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }