/* ============================================================================
 * alerts-panel.css — Fase 1 · F1.2
 *
 * Painel "Alertas recentes" da home (novo, no lugar do painel fixo de
 * câmeras — ver PRD-FASE1-LAYOUT.md). Sobre os tokens do design system
 * (design-tokens.css, F1.1). Populado por alerts-panel.js a partir de
 * GET /api/alerts/recent/.
 * ==========================================================================*/

.alerts-panel {
  animation: fadeUp .6s .1s both;
}

.alerts-view-all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ac);
  text-decoration: none;
}

.alerts-view-all:hover {
  text-decoration: underline;
}

.alerts-body {
  overflow-y: auto;
  max-height: 320px;
  transition: max-height .2s ease;
}

.alerts-body.is-expanded {
  max-height: 640px;
}

.alerts-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

.alerts-loading,
.alerts-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--mu);
  font-size: 13px;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--bd-soft);
}

.alert-item:last-child {
  border-bottom: 0;
}

.alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: var(--sev-color, var(--alerta));
}

.alert-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alert-item-message {
  margin: 0;
  font: 600 13.5px 'IBM Plex Sans', sans-serif;
  color: var(--tx);
}

.alert-item-meta {
  margin: 0;
  font-size: 12px;
  /* F1.4 · auditoria AA: --mu2 sobre --sf dá 3.04:1 — abaixo de 4.5:1.
     Local/tempo relativo (.alert-item-site/.alert-item-time, filhos que
     herdam esta cor) são texto real, não decorativo — trocado para --mu,
     4.76:1. */
  color: var(--mu);
}

.alert-item-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sev-color, var(--alerta));
  background: color-mix(in srgb, var(--sev-color, var(--alerta)) 14%, transparent);
}

.alert-item--moderado { --sev-color: var(--st-moderado); }
.alert-item--alerta { --sev-color: var(--alerta); }
.alert-item--critico { --sev-color: var(--st-muito-ruim); }

/* F1.3 — checagem rápida de contraste (regra 4/tarefa 4 do plano): a tag
   herdava a MESMA cor (--sev-color) para o texto e para o tom do fundo
   translúcido (color-mix 14%) — no tema claro isso dá texto amarelo/laranja
   sobre um fundo quase branco da mesma cor, ~1.6–3.1:1 (abaixo do mínimo AA
   de 4.5:1 para texto normal; medido com a fórmula de luminância relativa
   do WCAG 2.1). Corrigido com uma cor de TEXTO própria por severidade,
   mais escura que o token de status usado no fundo/dot — só no tema claro,
   onde o fundo é bem claro; no escuro o texto original já passava (5.6–
   7.6:1) exceto "crítico", que ficava em ~4.0:1 (abaixo por pouco) e ganhou
   uma variante mais clara. Auditoria formal completa (demais pares da app)
   continua na F1.4; este é só o ajuste do óbvio identificado aqui. */
.alert-item--moderado .alert-item-tag { color: #6B5300; }
.alert-item--alerta .alert-item-tag { color: #8A4110; }
.alert-item--critico .alert-item-tag { color: #991B1B; }

.dk .alert-item--moderado .alert-item-tag,
.dk .alert-item--alerta .alert-item-tag {
  color: var(--sev-color);
}

.dk .alert-item--critico .alert-item-tag {
  color: #F5A99B;
}

.alerts-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--bd-soft);
  font-size: 12px;
  color: var(--mu);
}

.alerts-footer #alerts-footer-count {
  font-weight: 600;
  color: var(--tx);
}

/* Painel de alertas em largura cheia (fallback SHOW_CAMERA_PANEL=true —
   ver index.html/_alerts_panel.html) */
.alerts-panel-standalone {
  animation: fadeUp .6s .1s both;
}