/* Dashboard view (painel.html). The header comes from style.css, shared
   with the office. */

body.painel-page {
  display: block;
  overflow: auto;
  height: auto;
  min-height: 100%;
}

/* brand | period picker (centered) | actions */
.painel-page header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
}

.painel-page header .header-actions {
  justify-self: end;
}

.periodos-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

#painel {
  padding: 24px 32px 40px;
}

.painel-carregando,
.painel-vazio {
  color: #8691a2;
}

.muted {
  color: #8691a2;
}

.card {
  background: #111d2f;
  border: 1px solid #213450;
  border-radius: 14px;
  padding: 18px 20px;
}

.card-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-titulo h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #eef0f2;
}

.card-titulo .muted {
  font-size: 12px;
}

/* ---- period ---- */

/* the copy of the period picker for phones (see the 640px rule) */
.painel-topo {
  display: none;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.periodos {
  display: inline-flex;
  padding: 3px;
  background: #111d2f;
  border: 1px solid #213450;
  border-radius: 999px;
}

.periodos button {
  min-width: 64px;
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #a3abb6;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.periodos button:hover {
  color: #eef0f2;
}

.periodos button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-text, #111);
  font-weight: 600;
}

.periodos button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.painel-datas {
  font-size: 13px;
  color: #8691a2;
}

/* ---- big numbers ---- */

.tiles {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.tiles-4 {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

.tiles-3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.tile {
  position: relative;
  padding: 18px 20px;
  background: #111d2f;
  border: 1px solid #213450;
  border-radius: 14px;
  overflow: hidden;
}

.tile.heroi {
  background: linear-gradient(135deg, var(--brand-soft), #111d2f 70%);
  border-color: var(--brand);
}

.tile-numero {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tile.heroi .tile-numero {
  font-size: 44px;
}

.tile-rotulo {
  margin-top: 4px;
  font-size: 13px;
  color: #a3abb6;
}

.tile-variacao {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.tile-variacao.sobe {
  color: #5fd28b;
}

.tile-variacao.desce {
  color: #f08a80;
}

.tile-variacao.igual {
  color: #8691a2;
}

/* a short glow when the number goes up live */
.tile.subiu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--brand);
  animation: brilho 1.4s ease-out forwards;
  pointer-events: none;
}

@keyframes brilho {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ---- layout ---- */

/* medium screens: ranking and chart on the left, the live feed beside both */
.painel-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "ranking vivo"
    "grafico vivo";
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.painel-grade .ranking {
  grid-area: ranking;
  align-self: start;
}

.painel-grade .grafico {
  grid-area: grafico;
}

.painel-grade .ao-vivo {
  grid-area: vivo;
}

/* Mix: the office takes the live feed's place, and needs more room */
.painel-grade.mix {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* wide screens: everything side by side, filling the screen's height */
@media (min-width: 1700px) {
  #painel {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    padding-bottom: 24px;
  }
  body.tv #painel {
    min-height: calc(100vh - 72px);
  }
  .painel-grade {
    flex: 1;
  }
  .painel-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 380px;
    grid-template-areas: "ranking grafico vivo";
    grid-template-rows: auto;
  }
  .painel-grade.sem-grafico {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "ranking vivo";
  }
  .painel-grade .ranking {
    align-self: stretch;
  }
  .painel-grade.mix {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
  }
  .painel-grade.mix.sem-grafico {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
}

/* ---- Mix: the live office ---- */

.escritorio-vivo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* "Ao vivo – Financeiro" | status chips (centered) | carousel controls */
.escritorio-vivo {
  container-type: inline-size;
}

.escritorio-vivo .card-titulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.escritorio-vivo .card-titulo h2 {
  white-space: nowrap;
  min-width: 0;
}

.escritorio-setor {
  overflow: hidden;
  text-overflow: ellipsis;
}

.escritorio-vivo .escritorio-controles {
  justify-self: end;
}

.status-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}

/* a narrow card: the chips go to their own line, still centered */
@container (max-width: 820px) {
  .escritorio-vivo .card-titulo {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .escritorio-vivo .status-chips {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.escritorio-controles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.escritorio-controles .header-pill {
  height: 26px;
  padding: 0 9px;
}

.escritorio-pontos {
  display: inline-flex;
  gap: 5px;
  margin-right: 6px;
}

.escritorio-pontos i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a3e5a;
  transition: background 0.3s;
}

.escritorio-pontos i.atual {
  background: var(--brand);
}

.escritorio-moldura {
  position: relative;
  flex: 1;
  min-height: 380px;
  border-radius: 10px;
  overflow: hidden;
  background: #142339;
}

.escritorio-moldura iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.escritorio-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: #a3abb6;
}

.escritorio-rodape a {
  color: var(--brand-link, var(--brand));
  font-size: 12.5px;
}

/* robots of the sector the office is showing */
.ranking-item.do-setor {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ---- ranking per robot ---- */

.ranking-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ranking-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
}

.ranking-item + .ranking-item {
  border-top: 1px solid #1b2c45;
}

.ranking-item.atualizou {
  animation: atualizou 1.6s ease-out;
}

@keyframes atualizou {
  0% {
    background: var(--brand-soft);
  }
  100% {
    background: transparent;
  }
}

.ranking-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #142339;
  border-radius: 10px;
}

.ranking-avatar .status-ponto {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #111d2f;
  transition: background 0.3s;
}

.ranking-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ranking-nome strong {
  color: #eef0f2;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-nome .muted {
  font-size: 12px;
}

.ranking-barra {
  display: block;
  height: 6px;
  margin-top: 6px;
  background: #172840;
  border-radius: 3px;
  overflow: hidden;
}

.ranking-barra i {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.ranking-valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ranking-valor strong {
  font-size: 17px;
  color: #fff;
}

.ranking-valor span {
  font-size: 12.5px;
  color: #a3abb6;
}

.ranking-item.sem-config .ranking-valor span {
  font-size: 12px;
  color: #74839a;
}

.status-ponto {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* robot sprite, first frame of its strip, pixel-sharp */
.avatar-robo {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(assets/robot.png?v=4) 0 0 / 224px 32px no-repeat;
  image-rendering: pixelated;
}

.avatar-robo.classico {
  background-image: url(assets/robot_classico.png?v=1);
}

/* ---- chart ---- */

/* the chart grows to the height of its row */
.grafico {
  display: flex;
  flex-direction: column;
}

.grafico-area {
  flex: 1;
  display: flex;
  min-height: 200px;
  padding-bottom: 22px;
}

.grafico-barras {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid #2a3e5a;
}

.grafico-coluna {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  outline: none;
}

.grafico-coluna i {
  display: block;
  width: 100%;
  background: var(--brand);
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease, filter 0.15s;
}

/* the period's last bar is still filling up */
.grafico-coluna i.parcial {
  background: repeating-linear-gradient(135deg, var(--brand) 0 4px, color-mix(in srgb, var(--brand) 55%, #111d2f) 4px 7px);
}

.grafico-coluna:hover i,
.grafico-coluna:focus-visible i {
  filter: brightness(1.2);
}

.grafico-coluna:focus-visible {
  box-shadow: 0 0 0 2px var(--brand);
  border-radius: 4px;
}

.grafico-x {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 5px;
  transform: translateX(-50%);
  font-size: 11px;
  color: #8691a2;
  white-space: nowrap;
}

.painel-dica {
  position: fixed;
  z-index: 30;
  padding: 6px 10px;
  background: #0b1424;
  border: 1px solid #2a3e5a;
  border-radius: 8px;
  color: #eef0f2;
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ---- live feed ---- */

.ao-vivo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* the feed doesn't add height: it fills what the row has and scrolls */
.feed-caixa {
  position: relative;
  flex: 1;
  min-height: 380px;
}

.pulso-vivo {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
  animation: pulsar 2s infinite;
}

@keyframes pulsar {
  70% {
    box-shadow: 0 0 0 8px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

.ao-vivo-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #a3abb6;
}

.ao-vivo-resumo b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ao-vivo-resumo .com-erro b {
  color: #f08a80;
}

.feed {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3e5a transparent;
}

.feed::-webkit-scrollbar {
  width: 8px;
}

.feed::-webkit-scrollbar-track {
  background: transparent;
}

.feed::-webkit-scrollbar-thumb {
  background: #2a3e5a;
  border-radius: 4px;
}

.feed-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 8px 2px;
  border-top: 1px solid #1b2c45;
}

.feed-item .status-ponto {
  margin-top: 5px;
}

.feed-item.novo {
  animation: entrar 0.5s ease-out;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(-6px);
    background: var(--brand-soft);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.feed-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  font-size: 13px;
}

.feed-texto strong {
  color: #e3e5e8;
  font-weight: 600;
}

.feed-status {
  color: #8691a2;
}

.feed-status.s-success {
  color: #5fd28b;
}

.feed-status.s-error {
  color: #f08a80;
}

.feed-status.s-working {
  color: #efca80;
}

.feed-msg {
  flex-basis: 100%;
  color: #8691a2;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-item time {
  font-size: 12px;
  color: #74839a;
  white-space: nowrap;
}

.painel-aviso {
  margin: 18px 0 0;
  font-size: 13px;
  color: #8691a2;
}

.painel-aviso a,
.painel-vazio a {
  color: var(--brand-link, var(--brand));
}

@media (prefers-reduced-motion: reduce) {
  .tile.subiu::after,
  .ranking-item.atualizou,
  .feed-item.novo,
  .pulso-vivo {
    animation: none;
  }
}

/* ---- narrower screens ---- */

@media (max-width: 1000px) {
  .painel-grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ranking"
      "grafico"
      "vivo";
    grid-template-rows: auto;
  }
  .feed-caixa {
    min-height: 0;
  }
  .painel-grade.mix {
    grid-template-columns: minmax(0, 1fr);
  }
  .escritorio-moldura {
    min-height: 320px;
  }
  .feed {
    position: static;
    max-height: 480px;
  }
  .tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tiles-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* the header has no room for the period picker: it moves above the numbers */
  .periodos-topo {
    display: none;
  }
  .painel-topo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .painel-page header {
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  #painel {
    padding: 16px 16px 40px;
  }
  .tiles-3,
  .tiles-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile.heroi .tile-numero {
    font-size: 36px;
  }
  /* the header keeps the logo, the view switch and the avatar */
  .painel-page header {
    padding: 10px 16px;
  }
  .painel-page .header-actions {
    gap: 8px;
  }
  .painel-page .header-actions #tv-mode,
  .painel-page #conn-status,
  .painel-page .brand-text,
  .painel-page #user-name,
  .painel-page .user-btn .caret {
    display: none;
  }
}

/* ---- TV mode: the numbers alone, bigger, in full screen ---- */

#tv-barra {
  display: none;
}

body.tv header {
  display: none;
}

body.tv #tv-barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  background: #0d1726;
  border-bottom: 1px solid #213450;
}

#tv-periodo {
  flex: 1;
  font-size: 18px;
  color: #a3abb6;
}

#tv-relogio {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

body.tv #painel {
  max-width: none;
  padding: 28px 32px;
}

body.tv .painel-topo,
body.tv .painel-aviso {
  display: none;
}

body.tv .tile-numero {
  font-size: 54px;
}

body.tv .tile.heroi .tile-numero {
  font-size: 72px;
}

body.tv .tile-rotulo,
body.tv .tile-variacao {
  font-size: 17px;
}

body.tv .ranking-nome strong {
  font-size: 18px;
}

body.tv .ranking-valor strong {
  font-size: 22px;
}

body.tv .feed-texto {
  font-size: 15px;
}

body.tv.tv-parado,
body.tv.tv-parado * {
  cursor: none;
}

body.tv.tv-parado #tv-sair {
  visibility: hidden;
}