/* Satis · Estatísticas (separador de satis-solution, só Administração).
   Mesma linguagem de vidro claro do resto do Satis (tokens --ss-* de
   satis-solution.css). Marcas finas e recessivas: o dado é a única coisa
   com cor forte; texto sempre em tinta, nunca na cor da série. */

.ss-st-filters { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); }

.ss-st-error {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--ss-danger-soft);
  color: var(--ss-danger);
  font-weight: 600;
}
.ss-st-error[hidden] { display: none; }

.ss-st { display: flex; flex-direction: column; gap: var(--sp-4); transition: opacity 0.2s ease; }
.ss-st[hidden] { display: none; }
/* Ao mudar os filtros, o que já está desenhado fica a meia-luz em vez de piscar. */
.ss-st.is-busy { opacity: 0.5; pointer-events: none; }

.ss-st-range { margin: 0; color: var(--ss-secondary); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- números de topo ---------- */
.ss-st-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
}
.ss-st-kpis .ss-st-kpi {
  padding: var(--sp-4) var(--sp-5);
  border-radius: 22px;
  background: var(--ss-glass-bg-strong);
  border: 1px solid var(--ss-glass-border);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 46px -28px rgba(20, 30, 60, 0.24);
}

.ss-st-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-st-kpi__label { margin: 0; color: var(--ss-secondary); font-size: var(--fs-sm); font-weight: 600; }
.ss-st-kpi__value {
  margin: 0;
  color: var(--ss-ink);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ss-st-kpi__unit { margin-left: 2px; color: var(--ss-secondary); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; }
.ss-st-kpi__sub { margin: 0; color: var(--ss-secondary); font-size: var(--fs-xs); }
.ss-st-kpi__sub--warning { color: var(--ss-warning); font-weight: 650; }
.ss-st-kpi__sub--critical { color: var(--ss-danger); font-weight: 650; }

/* Números pequenos dentro de um cartão. */
.ss-st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.ss-st-tiles .ss-st-kpi__value { font-size: 1.5rem; }

/* ---------- secções e cartões ---------- */
.ss-st-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.ss-st-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: 18px;
  background: rgba(120, 120, 128, 0.05);
  border: 1px solid var(--ss-hairline);
}
.ss-st-card--wide { grid-column: 1 / -1; }
.ss-st-card__head { display: flex; flex-direction: column; gap: 2px; }
.ss-st-card__title { margin: 0; color: var(--ss-ink); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.ss-st-card__note { margin: 0; color: var(--ss-secondary); font-size: var(--fs-xs); }

.ss-st-empty { margin: 0; padding: var(--sp-4) 0; color: var(--ss-tertiary); font-size: var(--fs-sm); }
.ss-st-lead { margin: 0; color: var(--ss-ink-soft); font-weight: 650; }

.ss-st-chart { position: relative; height: 260px; }

/* ---------- barras horizontais ---------- */
.ss-st-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ss-st-bar {
  display: grid;
  grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.ss-st-bar__label { color: var(--ss-ink-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-st-bar__track { height: 10px; border-radius: 0 4px 4px 0; background: rgba(120, 120, 128, 0.08); }
.ss-st-bar__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width 0.3s ease; }
.ss-st-bar__value { color: var(--ss-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- mapa de calor (dia × hora) ---------- */
.ss-st-heat {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.ss-st-heat__hour { color: var(--ss-tertiary); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.ss-st-heat__day { color: var(--ss-secondary); font-size: var(--fs-xs); font-weight: 600; }
.ss-st-heat__cell { display: block; aspect-ratio: 1; min-height: 14px; border-radius: 4px; }
.ss-st-heat__cell.is-zero { background: rgba(120, 120, 128, 0.08); }
.ss-st-heat__legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--ss-secondary);
  font-size: var(--fs-xs);
}
.ss-st-heat__legend .ss-st-heat__cell { width: 14px; min-height: 14px; }
.ss-st-heat__legend span:first-child { margin-right: 4px; }
.ss-st-heat__legend span:last-child { margin-left: 4px; }

/* ---------- comentários ---------- */
.ss-st-comments { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ss-st-comment {
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ss-hairline);
}
.ss-st-comment__meta { margin: 0 0 2px; color: var(--ss-secondary); font-size: var(--fs-xs); }
.ss-st-comment__meta strong { color: var(--ss-danger); }
.ss-st-comment__text { margin: 0; color: var(--ss-ink-soft); overflow-wrap: anywhere; }

/* ---------- tabela "Ver dados" (alternativa ao gráfico) ---------- */
.ss-st-data summary {
  width: fit-content;
  color: var(--ss-accent);
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
}
.ss-st-data__wrap { max-height: 280px; margin-top: var(--sp-2); overflow: auto; }
.ss-st-data table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ss-st-data th,
.ss-st-data td { padding: 6px 10px; border-bottom: 1px solid var(--ss-hairline); text-align: right; }
.ss-st-data th:first-child,
.ss-st-data td:first-child { text-align: left; }
.ss-st-data th { color: var(--ss-secondary); font-weight: 650; }
.ss-st-data td { color: var(--ss-ink-soft); }

@media (max-width: 900px) {
  .ss-st-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-st,
  .ss-st-bar__fill { transition: none; }
}