/* Variaveis de tema: centralizam cores usadas no painel. */
:root {
  /* Cor base do fundo da pagina. */
  --fundo: #dbeafe;
  --fundo-secundario: #bfdbfe;
  /* Cor padrao dos cards. */
  --cartao: #ffffff;
  --cartao-suave: #eef4ff;
  /* Cor principal de texto. */
  --texto: #0b1f3a;
  /* Cor de texto secundaria para subtitulos e labels. */
  --texto-suave: #425b80;
  /* Cores de destaque para graficos e elementos visuais. */
  --destaque-1: #06b6d4;
  --destaque-2: #f59e0b;
  --destaque-3: #2563eb;
  /* Cor de borda padrao dos cards. */
  --borda: #c8d8f0;
}

/* Garante que largura/altura incluam padding e borda em todos os elementos. */
* {
  box-sizing: border-box;
}

/* Utilitario para texto somente para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Estilo global da pagina. */
body {
  /* Remove margem padrao do navegador. */
  margin: 0;
  /* Mantem a tela ocupando a altura minima da viewport. */
  min-height: 100vh;
  /* Fonte principal do projeto. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  /* Cor de texto principal. */
  color: var(--texto);
  /* Fundo geral da pagina. */
  background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo-secundario) 100%);
  /* Evita scroll horizontal acidental em layouts responsivos. */
  overflow-x: hidden;
}

/* Container principal do painel. Usa flex em coluna para organizar secoes. */
.painel {
  /* Base mobile-first: layout pensado primeiro para telas pequenas. */
  width: 94%;
  /* Centraliza horizontalmente e cria espacamento vertical externo. */
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  /* Espaco entre blocos principais. */
  gap: 20px;
}

/* Cabecalho superior com titulo e subtitulo. */
.topo {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 20px;
  /* Sombra leve para destacar do fundo. */
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

/* Titulo principal da dashboard. */
.topo h1 {
  margin: 0;
  font-size: 1.35rem;
}

/* Texto auxiliar abaixo do titulo. */
.topo-esquerda {
  width: 100%;
}

.topo-esquerda p {
  margin: 8px 0 0;
  color: var(--texto-suave);
}

.topo-direita {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-grid {
  display: flex;
  /* No mobile, empilha os cards de status em 1 coluna. */
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-card {
  width: 100%;
  background: var(--cartao-suave);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 12px;
}

.status-label {
  display: block;
  font-size: 0.75rem;
  color: var(--texto-suave);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-valor {
  margin: 6px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
}

#fonte-dados {
  /* Evita quebrar URL longa em varias linhas no card de status. */
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ponto-status {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.ponto-status.online {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.ponto-status.offline {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.botao-atualizar {
  align-self: stretch;
  border: 0;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.botao-atualizar:hover {
  filter: brightness(1.05);
}

.botao-atualizar:focus-visible {
  outline: 3px solid #1e3a8a;
  outline-offset: 2px;
}

/* Grade de indicadores (KPIs) com quebra de linha em telas menores. */
.indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Card individual de indicador. */
.card-indicador {
  /* Permite cards fluidos com largura minima confortavel. */
  width: 100%;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px;
}

/* Rotulo do indicador. */
.card-indicador h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--texto-suave);
  font-weight: 600;
}

/* Valor numerico do indicador. */
.card-indicador p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Grade dos cards de graficos. */
.grade-graficos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Card individual de grafico. */
.card-grafico {
  /* Mantem largura flexivel para 1, 2 ou 3 colunas conforme viewport. */
  width: 100%;
  /* Altura fixa para o Chart.js calcular o canvas de forma estavel. */
  height: 300px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 16px;
}

/* Titulo de cada grafico. */
.card-grafico h3 {
  margin: 0 0 14px;
  font-size: 1rem;
}

/* Area interna onde o Chart.js calcula o tamanho do canvas. */
.area-grafico {
  /* Necessario para overlays (offline) e para referencia de tamanho do chart. */
  position: relative;
  /* Reserva area de desenho abaixo do titulo do card. */
  height: calc(100% - 36px);
}

.estado-grafico-offline {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  color: var(--texto-suave);
  font-weight: 700;
  background: var(--cartao-suave);
}

.area-grafico.offline .estado-grafico-offline {
  display: flex;
}

.area-grafico.offline canvas {
  display: none;
}

/* Canvas do Chart.js ajustado para preencher totalmente a area do grafico. */
.card-grafico canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* A partir de 500px: indicadores em 2 colunas. */
@media (min-width: 500px) {
  .card-indicador {
    /* 2 colunas: largura total menos 1 gap horizontal (14px). */
    width: calc((100% - 14px) / 2);
  }
}

/* A partir de 521px: cards de status em 2 colunas. */
@media (min-width: 521px) {
  .status-grid {
    /* A partir daqui, status sai de coluna unica para grade flexivel. */
    flex-direction: row;
  }

  .status-card {
    /* 2 colunas de status: subtrai 1 gap (10px). */
    width: calc((100% - 10px) / 2);
  }
}

/* A partir de 701px: layout desktop do topo e dos cards de grafico. */
@media (min-width: 701px) {
  .painel {
    width: min(1200px, 92%);
    margin: 32px auto;
  }

  .topo h1 {
    font-size: 1.7rem;
  }

  .status-card {
    /* 4 colunas de status: subtrai 3 gaps (3 x 10px). */
    width: calc((100% - 30px) / 4);
  }

  .botao-atualizar {
    align-self: flex-end;
  }

  .card-grafico {
    height: 360px;
  }
}

@media (min-width: 900px) {
  .card-indicador {
    /* 4 indicadores por linha: subtrai 3 gaps (3 x 14px). */
    width: calc((100% - 42px) / 4);
  }

  .card-grafico {
    /* 3 graficos por linha: subtrai 2 gaps (2 x 14px). */
    width: calc((100% - 28px) / 3);
  }
}