/**
 * ERTEL — Análise de Vibração
 *
 * CSS PRÓPRIO deste módulo — nunca compartilhado com outro módulo
 * (CLAUDE.md §2), ainda que algumas classes (`.ertel-ativo-picker*`)
 * tenham nome igual ao já usado em Ordens de Serviço/Estoque — mesmo
 * princípio, cada módulo define a sua cópia.
 */

.ertel-vib-card {
  padding: var(--ertel-space-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.ertel-vib-botoes-indicador {
  display: flex;
  gap: var(--ertel-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--ertel-space-4);
}

.ertel-vib-cards-grafico {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-4);
}

.ertel-vib-chart-card {
  padding: var(--ertel-space-4);
  min-width: 0;
}

.ertel-vib-chart-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ertel-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ertel-space-3);
}

.ertel-vib-chart-card__canvas-wrap {
  position: relative;
  height: 280px;
  min-width: 0;
}

.ertel-vib-chart-card__canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* -- Visão Geral (grade com o gráfico de todos os Pontos juntos) -------- */

.ertel-vib-visao-geral-controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ertel-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ertel-space-4);
}

.ertel-vib-visao-geral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--ertel-space-4);
}

/* Card/gráfico mais baixo que o da Ficha (280px) -- na Visão Geral são
   muitos ao mesmo tempo, precisa caber vários por rolagem de tela. */
.ertel-vib-chart-card--compacto {
  padding: var(--ertel-space-3);
}
.ertel-vib-chart-card__canvas-wrap--compacto {
  height: 160px;
}

/* -- Alarme por indicador (limite configurável + abrir OS) --------------- */

/* Card em alarme na Visão Geral -- destaque visual pra pular aos olhos
   numa grade grande, sem precisar ler cada card um por um. */
.ertel-vib-chart-card--em-alarme {
  border-color: #E53935;
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.4);
}

.ertel-vib-badge-alarme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ertel-radius-sm);
  background: rgba(229, 57, 53, 0.15);
  color: #E53935;
  font-size: var(--ertel-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ertel-vib-lado-bloco {
  margin-top: var(--ertel-space-4);
}

.ertel-vib-lado-bloco h3 {
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
  margin-bottom: var(--ertel-space-2);
}

.ertel-vib-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ertel-text-xs);
}

.ertel-vib-tabela th,
.ertel-vib-tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ertel-border);
  text-align: left;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.ertel-vib-tabela th {
  color: var(--ertel-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ertel-vib-tabela tbody tr:hover {
  background: var(--ertel-surface-alt);
}

/* -- Seletor de Ativo (modal "Novo Monitoramento") ----------------------- */

.ertel-ativo-picker {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  flex-wrap: wrap;
  padding: var(--ertel-space-2) var(--ertel-space-3);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-md);
  background: var(--ertel-surface-alt);
}
.ertel-ativo-picker__nome {
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink-soft);
}
.ertel-ativo-picker__empty {
  font-size: var(--ertel-text-sm);
  color: var(--ertel-muted);
}
.ertel-ativo-picker-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ertel-ativo-picker-option {
  display: flex;
  gap: var(--ertel-space-3);
  align-items: baseline;
  text-align: left;
  padding: var(--ertel-space-2) var(--ertel-space-3);
  border-radius: var(--ertel-radius-md);
  background: none;
  border: 1px solid transparent;
  font-size: var(--ertel-text-sm);
  color: var(--ertel-ink);
}
.ertel-ativo-picker-option:hover {
  background: var(--ertel-primary-soft);
  border-color: var(--ertel-primary);
}