/* ---------------------------------------------------------
  PAINEL DE ESTATÍSTICAS — embutido na sidebar, mesmo padrão
  do painel de coordenadas (.search-section / .sp-section)
--------------------------------------------------------- */
.stats-empty {
  font-size: 11px;
  color: var(--text-hint);
  line-height: 1.5;
}
.stats-empty[hidden] { display: none; }

.stats-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stats-tiles:empty { display: none; }

.stats-tile {
  background: var(--md-grey-100, #f1f3f4);
  border-radius: var(--r-md);
  padding: 8px 10px;
  min-width: 0;
}
.stats-tile-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-tile-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-tile-sub {
  font-size: 10.5px;
  color: var(--text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-bars { display: flex; flex-direction: column; gap: 8px; }

/* Linhas em grade de tabela: nome | Qtd. | %, trilha embaixo */
.stats-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 48px;
  column-gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-primary);
}
.stats-grid-row .stats-bar-track { grid-column: 1 / -1; }
.stats-grid-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hint);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.stats-grid-head .stats-num { color: var(--text-hint); }
.stats-grid-total {
  font-weight: 600;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.stats-grid-total .stats-num { color: var(--text-primary); }

.stats-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-bar-name.is-muted { color: var(--text-hint); font-style: italic; }
.stats-num {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Seletor de tipo de gráfico (Barras / Rosca) */
.stats-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stats-seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 0;
  border: none;
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.stats-seg button + button { border-left: 1px solid var(--border); }
.stats-seg button:hover { background: var(--md-grey-100, #f1f3f4); }
/* Ativo: amarelo do projeto bem claro, texto em amarelo escuro legível */
.stats-seg button[aria-pressed="true"] {
  background: #fdf6e3;
  color: #7a5a00;
  font-weight: 600;
}

/* Rosca + legenda */
.stats-donut { display: flex; justify-content: center; }
.stats-donut-total { font: 600 18px var(--font-ui); fill: var(--text-primary); }
.stats-donut-sub   { font: 400 10px var(--font-ui); fill: var(--text-secondary); }
.stats-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.stats-legend-item {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  column-gap: 6px;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-primary);
}
.stats-legend-item i { width: 10px; height: 10px; border-radius: 2px; }

.stats-bar-track {
  height: 6px;
  margin-top: 3px;
  border-radius: var(--r-pill);
  background: var(--md-grey-100, #f1f3f4);
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sga-amarelo, #E8B838);
}
.stats-bar-fill.is-muted { background: var(--md-grey-500, #9aa0a6); }

.stats-msg {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--primary-light);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.stats-msg[hidden] { display: none; }
.stats-msg .md-btn-primary { margin-top: 8px; }

.stats-progress { margin-bottom: 10px; }
.stats-progress[hidden] { display: none; }
.stats-progress-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--md-grey-100, #f1f3f4);
  overflow: hidden;
}
.stats-progress-bar > div {
  height: 100%;
  width: 0;
  background: var(--sga-amarelo, #E8B838);
  transition: width var(--t-fast);
}
.stats-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-hint);
}

.stats-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.stats-link-btn:hover { text-decoration: underline; }

#statsGroupSection[hidden] { display: none; }
#statsLayer[hidden] { display: none; }

/* Dica ao passar o mouse — mesmo visual do data-tip da rail
   (rail_inspector.css): fundo escuro, letra branca. Abre acima do
   item, alinhada à esquerda e limitada à largura do painel, para não
   ser cortada pelo overflow da área rolável. */
.stats-tile, .stats-bar { position: relative; }
.stats-tile[data-tip]:hover::after,
.stats-bar[data-tip]:hover::after,
.stats-legend-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 100%;
  background: var(--ink, #202124);
  color: #fff;
  font: 500 11px 'DM Sans', sans-serif;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: normal;
  pointer-events: none;
  z-index: 1300;
}