/* ==========================================================================
   ERTEL — Módulo Solicitações de Serviço
   ========================================================================== */

.ertel-ss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ertel-space-4);
}
.ertel-ss-card .ertel-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ertel-space-3);
  padding-bottom: var(--ertel-space-3);
  border-bottom: 1px solid var(--ertel-border);
}
.ertel-ss-card__desc {
  font-weight: var(--ertel-weight-semibold);
  font-size: var(--ertel-text-sm);
  margin-top: 2px;
}
.ertel-ss-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}

/* -- Kanban de OS --------------------------------------------------------------------- */

/* Indicadores padrão acima do quadro -- contagem por status + botão pra
   entrar na Lista já filtrada (pedido explícito do usuário). Nunca
   reaproveita cor fixa -- `data-tone` bate com os mesmos tons semânticos
   já usados no resto do sistema (warning/primary/success). */
.ertel-kanban-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ertel-space-4);
  margin-bottom: var(--ertel-space-4);
}
.ertel-kanban-indicador {
  background: var(--ertel-surface-alt);
  border: 1px solid var(--ertel-border);
  border-left: 4px solid var(--ertel-muted);
  border-radius: var(--ertel-radius-lg);
  padding: var(--ertel-space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ertel-kanban-indicador[data-tone="warning"] { border-left-color: var(--ertel-warning); }
.ertel-kanban-indicador[data-tone="primary"] { border-left-color: var(--ertel-primary); }
.ertel-kanban-indicador[data-tone="success"] { border-left-color: var(--ertel-success); }
.ertel-kanban-indicador__valor {
  font-size: var(--ertel-text-2xl);
  font-weight: var(--ertel-weight-bold);
}
.ertel-kanban-indicador__label {
  font-size: var(--ertel-text-sm);
  color: var(--ertel-muted);
}
.ertel-kanban-indicador__botao {
  align-self: flex-start;
  margin-top: 4px;
}

.ertel-kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ertel-space-4);
  align-items: start;
}
@media (max-width: 1000px) {
  .ertel-kanban-board {
    grid-template-columns: 1fr;
  }
}

/* -- Lista de uma única classificação, aberta ao clicar num indicador -----------------
   (Task #71) — nunca um grid/quadrado: sempre uma coluna só, cards um abaixo do
   outro, usando a extensão da tela. As regras/estilos de cada card (inclusive o
   alerta luminoso de máquina parada, `.ertel-kanban-card--piscando`) são os MESMOS
   já usados no quadro Kanban — este container só empilha, nunca redefine card. */
.ertel-kanban-lista-classificacao {
  margin-bottom: var(--ertel-space-4);
}
.ertel-kanban-lista-classificacao__topo {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  margin-bottom: var(--ertel-space-4);
}
.ertel-kanban-lista-classificacao__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ertel-text-base);
  font-weight: var(--ertel-weight-semibold);
}
.ertel-kanban-lista-classificacao__cards {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-3);
  width: 100%;
}

.ertel-kanban-coluna {
  background: var(--ertel-surface-alt);
  border-radius: var(--ertel-radius-lg);
  padding: var(--ertel-space-4);
  min-height: 200px;
}
.ertel-kanban-coluna__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ertel-text-base);
  font-weight: var(--ertel-weight-semibold);
  margin-bottom: var(--ertel-space-3);
}
.ertel-kanban-coluna__cards {
  display: flex;
  flex-direction: column;
  gap: var(--ertel-space-3);
}

/* Borda colorida por Tipo de Manutenção da Solicitação — a cor vem via
   variável CSS setada por elemento em kanban-view.js (`--ertel-kanban-card-cor`,
   uma por card, do cadastro de Tipos de Manutenção); sem tipo reconhecido cai
   pro cinza neutro de sempre, nunca fica sem nenhuma borda. Convive com o
   alerta de máquina parada (`--piscando`, ver abaixo) — o piscar continua
   sendo o contorno inteiro (box-shadow), a cor do tipo fica só na lateral. */
.ertel-kanban-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--ertel-space-4);
  background: var(--ertel-surface);
  border: none;
  border-left: 4px solid var(--ertel-kanban-card-cor, var(--ertel-border));
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ertel-transition-fast), transform var(--ertel-transition-fast);
}
.ertel-kanban-card:hover {
  box-shadow: var(--ertel-shadow-lg);
  transform: translateY(-1px);
}
.ertel-kanban-card__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ertel-space-2);
}
.ertel-kanban-card__desc {
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
  margin-bottom: var(--ertel-space-2);
}
.ertel-kanban-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  margin-bottom: var(--ertel-space-2);
}
.ertel-kanban-card__meta [data-alerta="true"] {
  color: var(--ertel-crit-a);
  font-weight: 600;
}
.ertel-kanban-card__tempo {
  font-family: var(--ertel-font-mono);
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
}
.ertel-kanban-card__acao {
  margin-top: var(--ertel-space-3);
  padding-top: var(--ertel-space-3);
  border-top: 1px solid var(--ertel-border);
  font-size: var(--ertel-text-xs);
  font-weight: 600;
  color: var(--ertel-primary);
}

/* -- Formulário de Solicitação --------------------------------------------------------- */

.ertel-ss-form-card {
  padding: var(--ertel-space-5);
}

/* -- Card piscando — máquina parada, ainda aguardando apropriação ------------------------ */

.ertel-kanban-card--piscando {
  animation: ertel-piscar-vermelho 1.4s ease-in-out infinite;
}

@keyframes ertel-piscar-vermelho {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--ertel-crit-a), var(--ertel-shadow-sm);
    background: var(--ertel-surface);
  }
  50% {
    box-shadow: 0 0 0 2px var(--ertel-crit-a), 0 0 14px 2px rgba(220, 38, 38, 0.45);
    background: var(--ertel-crit-a-bg);
  }
}

.ertel-kanban-card--piscando [data-alerta="true"] {
  color: var(--ertel-crit-a);
  font-weight: 700;
}