/*
 * Estilos do dashboard de planejamento de capacidade (tarefa 13.5).
 * ---------------------------------------------------------------------------
 * Consome os tokens de marca de theme.css (tarefa 13.7). Tema claro, WCAG AA.
 * As cores de déficit/capacidade ociosa usam as cores semânticas dos tokens,
 * SEMPRE acompanhadas de ícone + rótulo textual no HTML (não dependem apenas de
 * cor). Reaproveita utilitários (.surface/.btn/.form-field/.sr-only). Importar
 * DEPOIS de theme.css (e após dashboard.css, com o qual compartilha .status-badge).
 */

.planning-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
 * Filtros
 * ------------------------------------------------------------------------ */
.planning-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 16px;
}

.planning-filtros .form-field {
  flex: 1 1 200px;
  min-width: 180px;
}

.planning-filtros input[type="text"],
.planning-filtros select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  width: 100%;
}

.planning-filtros-acoes {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.planning-feedback {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Aviso de fallback do ProServ (Requisito 10.5)
 * ------------------------------------------------------------------------ */
.planning-aviso-fallback {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background-color: #fdf4e0;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.planning-aviso-icon {
  color: var(--color-warning);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
 * Resultados (tabelas por dimensão)
 * ------------------------------------------------------------------------ */
.planning-resultados {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.planning-dimensao {
  padding: 16px;
}

.planning-dimensao-titulo {
  margin: 0 0 12px;
  font-size: 1.125rem;
  color: var(--color-text);
}

.planning-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.planning-table th,
.planning-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.planning-table thead th {
  color: var(--color-text-secondary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}

.planning-table .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Bucket "Não mapeado" (Requisito 10.12): destaque + rótulo explícito. */
.planning-row--nao-mapeado {
  background-color: var(--color-primary-tint);
}

.planning-nao-mapeado-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.planning-nota-nao-mapeado {
  margin: 12px 0 0;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
 * Badges de situação (cor semântica + ícone + rótulo — nunca só cor)
 * Complementam as classes .status-badge de dashboard.css.
 * ------------------------------------------------------------------------ */

/* Déficit (necessário > disponível) — vermelho semântico. */
.status-badge--deficit {
  color: #8a1f1f;
  background-color: #fdecec;
  border-color: var(--color-error);
}

/* Capacidade ociosa (disponível > necessário) — verde semântico. */
.status-badge--ocioso {
  color: #1f6b3d;
  background-color: #e9f6ee;
  border-color: var(--color-success);
}

/* Equilíbrio (disponível = necessário) — roxo de marca. */
.status-badge--equilibrio {
  color: var(--color-primary);
  background-color: var(--color-primary-tint);
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
 * Estado vazio
 * ------------------------------------------------------------------------ */
.planning-empty {
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.planning-empty-icon {
  font-size: 2rem;
  color: var(--color-warning);
}

.planning-empty-titulo {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-text);
}