/* Métricas do dashboard.

   Duas regras moldam tudo isto:

   1. A CSP proíbe `style=` inline e `<script>` inline. Alturas e larguras são
      classes utilitárias calculadas no servidor (.bar-h0..24, .w1..w50), e o
      selector de datas é um `<form method=get>` com `<input type=date>` — o
      calendário é o do sistema operativo, sem uma linha de JavaScript.

   2. Cor por pessoa é estável: a mesma pessoa tem a mesma cor no avatar da
      equipa, na barra de quota e no gráfico dela. Sem isso o olho não liga as
      três coisas. */

:root {
  --m-ink:   #0d1117;
  --m-mut:   #667085;
  --m-line:  #eaecf0;
  --m-soft:  #f7f8fa;
  --m-marca: #ffb800;
}

/* ---- Cabeçalho ---- */
.met__topo { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 14px; flex-wrap: wrap; }
.met__topo h2 { margin: 0; letter-spacing: -.02em; }
.met__intervalo { margin: 3px 0 0; font-size: 13px; color: var(--m-mut); }
.met__csv { font-size: 13px; font-weight: 600; color: var(--m-mut);
            text-decoration: none; border: 1px solid var(--m-line);
            border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.met__csv:hover { color: var(--m-ink); border-color: #d6d9df; background: var(--m-soft); }

/* ---- Controlos: atalhos, calendário, dia/semana ---- */
.ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
       margin: 16px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--m-line); }
.ctl__datas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; }
.ctl__rot { font-size: 12.5px; color: var(--m-mut); margin: 0; font-weight: 500; }
.ctl__data { font: inherit; font-size: 13px; color: var(--m-ink); margin: 0;
             border: 1px solid var(--m-line); border-radius: 8px; padding: 6px 9px;
             background: #fff; width: auto; min-width: 0; }
.ctl__data:focus { outline: 2px solid #cfe3ff; border-color: #8fbcf5; }

.segm { display: inline-flex; background: var(--m-soft); border-radius: 9px; padding: 3px;
        gap: 2px; }
.segm--fim { margin-left: auto; }
.segm__b { font-size: 13px; font-weight: 600; color: var(--m-mut); text-decoration: none;
           padding: 5px 12px; border-radius: 7px; white-space: nowrap; }
.segm__b:hover { color: var(--m-ink); }
.segm__b.is-on { background: #fff; color: var(--m-ink);
                 box-shadow: 0 1px 2px rgba(16,24,40,.09); }

/* Botão discreto: num painel plano, um botão azul cheio puxa mais atenção do
   que os números, que são o que ali interessa. */
.btn--mini { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
             background: var(--m-ink); border: 1px solid var(--m-ink); color: #fff; }
.btn--mini:hover { background: #2b333d; border-color: #2b333d; }

/* ---- Números grandes ---- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
        background: var(--m-line); border: 1px solid var(--m-line); border-radius: 14px;
        overflow: hidden; margin: 0 0 24px; }
.kpi { background: #fff; padding: 16px 16px 15px; }
.kpi__n { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.035em;
          line-height: 1.05; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.kpi__r { margin: 7px 0 0; font-size: 12px; color: var(--m-mut); line-height: 1.5;
          display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi__vs { font-variant-numeric: tabular-nums; }
.delta { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
         letter-spacing: 0; }
.delta--up { background: #e7f8ed; color: #087443; }
.delta--down { background: #fdecea; color: #b42318; }

/* ---- Gráfico principal ---- */
.grafico { margin: 0 0 10px; padding: 16px 16px 12px; border: 1px solid var(--m-line);
           border-radius: 14px; background: #fff; }
.grafico__corpo { display: flex; gap: 12px; }
.grafico__escala { display: flex; flex-direction: column; justify-content: space-between;
                   font-size: 11px; color: #98a2b3; font-variant-numeric: tabular-nums;
                   text-align: right; min-width: 22px; padding-bottom: 14px; }
.grafico .barras { flex: 1 1 auto; align-items: flex-end; gap: 3px; height: 148px;
                   border-bottom: 1px solid var(--m-line); }
.grafico .barra i { background: var(--m-marca); border: 0; border-radius: 4px 4px 1px 1px; }
.grafico .barra i.bar-h0 { background: #edeff2; }
.grafico .barra:hover i { background: var(--m-ink); }
.grafico .eixo { margin: 9px 0 0 34px; font-variant-numeric: tabular-nums; }

/* Valor imediato, no gráfico principal e por pessoa. A zona activa ocupa a
   coluna inteira, para os dias a zero também serem fáceis de consultar. */
.barra--valor { position: relative; }
.barra__valor {
  display: none; position: absolute; bottom: 100%; left: 0;
  z-index: 10; width: max-content; max-width: 180px;
  padding: 8px 11px; border-radius: 8px;
  background: var(--m-ink); color: #fff;
  box-shadow: 0 4px 12px rgba(16,24,40,.16);
  font-size: 12px; line-height: 1.5; text-align: left;
  font-variant-numeric: tabular-nums; font-style: normal;
}
.barra__valor strong, .barra__valor > span { display: block; }
.barra__valor > span { color: #d0d5dd; }
.barra--direita .barra__valor { left: auto; right: 0; }
.barra--valor:hover, .barra--valor:focus { z-index: 11; }
.barra--valor:hover .barra__valor,
.barra--valor:focus .barra__valor { display: block; }
.barra--valor:focus-visible { outline: 2px solid var(--m-ink); outline-offset: 2px; }
.grafico .barra--valor:focus i { background: var(--m-ink); }
.barras--mini .barra--valor:hover i,
.barras--mini .barra--valor:focus i { filter: brightness(.75); }

/* ---- Quota da equipa: uma barra, uma cor por pessoa ---- */
.quota { display: flex; height: 8px; border-radius: 99px; overflow: hidden;
         background: var(--m-line); margin: 4px 0 18px; gap: 1px; }
.quota__p { display: block; height: 100%; }

/* ---- Lista por pessoa ---- */
.pessoas-met { list-style: none; margin: 0 0 14px; padding: 0; }
.pm { display: flex; align-items: center; gap: 12px; padding: 11px 2px;
      border-bottom: 1px solid #f2f4f7; }
.pm:last-child { border-bottom: 0; }
.pm__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm__nome { font-weight: 650; color: var(--m-ink); }
.pm__sub { font-size: 12px; color: var(--m-mut); }
.pm__n { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; min-width: 46px;
         text-align: right; font-variant-numeric: tabular-nums; color: var(--m-ink); }
.barras--mini { flex: 0 0 172px; height: 30px; gap: 1px; align-items: flex-end;
                border-bottom: 0; }
.barras--mini .barra i { border-radius: 2px 2px 0 0; border: 0; }
.barras--mini .barra i.bar-h0 { background: #eef0f3; }

/* As oito cores das pessoas, planas e iguais às dos avatares. */
.cor0, .barras--cor0 .barra i { background: #f5a524; }
.cor1, .barras--cor1 .barra i { background: #2e90fa; }
.cor2, .barras--cor2 .barra i { background: #12b76a; }
.cor3, .barras--cor3 .barra i { background: #9e77ed; }
.cor4, .barras--cor4 .barra i { background: #f04438; }
.cor5, .barras--cor5 .barra i { background: #06aed4; }
.cor6, .barras--cor6 .barra i { background: #ee46bc; }
.cor7, .barras--cor7 .barra i { background: #475467; }

@media (max-width: 1040px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(4), .kpi:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .segm--fim { margin-left: 0; }
  .barras--mini { flex-basis: 96px; }
  .pm__n { min-width: 38px; }
}
@media (max-width: 560px) {
  .ctl { gap: 12px; }
  .ctl__datas { width: 100%; }
  .segm { width: 100%; }
  .segm__b { flex: 1 1 0; text-align: center; }
  .grafico .barras { height: 120px; }
  .barras--mini { display: none; }
}

/* Larguras utilitárias para a barra de quota (passos de 2%). */
.w1 { width: 2%; }
.w2 { width: 4%; }
.w3 { width: 6%; }
.w4 { width: 8%; }
.w5 { width: 10%; }
.w6 { width: 12%; }
.w7 { width: 14%; }
.w8 { width: 16%; }
.w9 { width: 18%; }
.w10 { width: 20%; }
.w11 { width: 22%; }
.w12 { width: 24%; }
.w13 { width: 26%; }
.w14 { width: 28%; }
.w15 { width: 30%; }
.w16 { width: 32%; }
.w17 { width: 34%; }
.w18 { width: 36%; }
.w19 { width: 38%; }
.w20 { width: 40%; }
.w21 { width: 42%; }
.w22 { width: 44%; }
.w23 { width: 46%; }
.w24 { width: 48%; }
.w25 { width: 50%; }
.w26 { width: 52%; }
.w27 { width: 54%; }
.w28 { width: 56%; }
.w29 { width: 58%; }
.w30 { width: 60%; }
.w31 { width: 62%; }
.w32 { width: 64%; }
.w33 { width: 66%; }
.w34 { width: 68%; }
.w35 { width: 70%; }
.w36 { width: 72%; }
.w37 { width: 74%; }
.w38 { width: 76%; }
.w39 { width: 78%; }
.w40 { width: 80%; }
.w41 { width: 82%; }
.w42 { width: 84%; }
.w43 { width: 86%; }
.w44 { width: 88%; }
.w45 { width: 90%; }
.w46 { width: 92%; }
.w47 { width: 94%; }
.w48 { width: 96%; }
.w49 { width: 98%; }
.w50 { width: 100%; }

/* ---- Exemplo enquanto não há dados ------------------------------------- */
/* Um painel a zeros não ensina nada a quem acabou de se registar. Mostra-se a
   forma do que virá — mas marcado de duas maneiras (aviso em cima e selo no
   canto), para nunca ser confundido com dados reais. */
.aviso--demo { border-left: 4px solid var(--m-marca); background: #fffbeb; }
.aviso--demo p:last-child { margin-bottom: 0; }

.e-exemplo { position: relative; }
.e-exemplo::before {
  content: "Example data"; position: absolute; top: 16px; right: 16px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #93700a; background: #fff6da; border: 1px solid #f2dc9c;
  border-radius: 99px; padding: 3px 11px;
}
.e-exemplo .met__csv, .e-exemplo .ctl { visibility: hidden; }
.e-exemplo .kpis, .e-exemplo .grafico, .e-exemplo .quota, .e-exemplo .pessoas-met {
  opacity: .62; filter: saturate(.8);
}