/*
 * Estilos do painel inicial (home) — gráfico de capacidade por equipe.
 * ---------------------------------------------------------------------------
 * Consome os tokens de marca de theme.css. Tema claro, WCAG AA. As séries do
 * gráfico usam cores de marca SEMPRE acompanhadas de padrão/hachura (no SVG) e
 * rótulo textual (legenda + tabela) — nunca dependem apenas de cor. Reaproveita
 * utilitários (.surface / .sr-only / .status-badge). Importar DEPOIS de
 * theme.css e dashboard.css (compartilha .status-badge / .sr-only) e planning.css
 * (compartilha os modificadores .status-badge--deficit/--ocioso/--equilibrio).
 */

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

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

.home-resultados {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
 * Gráfico (SVG)
 * ------------------------------------------------------------------------ */
.home-chart {
  padding: 16px;
}

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

.home-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.home-chart-team-label {
  fill: var(--color-text);
  font-size: 12px;
  font-weight: 600;
}

.home-chart-value-label {
  fill: var(--color-text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.home-chart-axis-label {
  fill: var(--color-text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.home-chart-axis-title {
  fill: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Legenda (swatch com padrão + rótulo textual — nunca só cor)
 * ------------------------------------------------------------------------ */
.home-legend {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.home-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text);
}

.home-legend-swatch {
  flex: 0 0 auto;
  border-radius: 2px;
}

.home-legend-label {
  line-height: 1;
}

/* --------------------------------------------------------------------------
 * Tabela equivalente
 * ------------------------------------------------------------------------ */
.home-tabela {
  padding: 16px;
  overflow-x: auto;
}

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

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

.home-table th,
.home-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

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

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

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

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

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