/* A tela de transmissão: fontes grandes, contraste alto, nada clicável de
   comando. As cores de SÉRIE são variáveis próprias — usar --warn como cor de
   série colidiria com a semântica de severidade do resto do sistema. */

:root {
  --serie1: #4ea3f2;
  --serie2: #f4791f;
  --serie3: #b78af7;
}

body.dash { padding: 0 24px 24px; }

.dhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0 6px;
}

.dhead h1 { font-size: 26px; margin: 0; }
.dhead .dsub { color: var(--muted); font-size: 15px; font-weight: 400; }
.dhead .spacer { flex: 1; }
.dclock { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--fg); }

/* --- o placar --- */
.placar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 10px 0 16px;
}

.bignum {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

.bignum b { font-size: 54px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bignum span { color: var(--muted); font-size: 14px; }
.bignum.alerta b { color: var(--bad); }
.bignum.alerta.zero b { color: var(--ok); }

/* --- os gráficos --- */
.graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.gbox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.gbox h2 { font-size: 14px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.gbox svg { width: 100%; height: 150px; display: block; }
.legenda { display: flex; gap: 16px; font-size: 12px; margin-top: 4px; }
.legenda .l1::before,
.legenda .l2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.legenda .l1::before { background: var(--serie1); }
.legenda .l2::before { background: var(--serie2); }

/* --- o mapa de calor --- */
.mapa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.sede {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--ok);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
}

.sede.warn { border-left-color: var(--warn); }
.sede.bad { border-left-color: var(--bad); }
.sede.off { opacity: 0.45; }

.sede .sid { font-weight: 700; font-size: 15px; }
.sede .son { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sede .son b { color: var(--fg); }

.sede .badge {
  position: absolute;
  top: -7px;
  right: -6px;
  background: var(--bad);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
}

.medidor { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; }
.medidor .rot { width: 34px; color: var(--muted); }
.medidor .trilho { flex: 1; height: 7px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.medidor .trilho i { display: block; height: 100%; background: var(--ok); }
.medidor .trilho i.warn { background: var(--warn); }
.medidor .trilho i.bad { background: var(--bad); }
.medidor .val { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .placar { grid-template-columns: repeat(2, 1fr); }
  .graficos { grid-template-columns: 1fr; }
}

/* o mapa usa a largura inteira — o max-width do main comum é para formulário */
body.dash main { max-width: none; padding: 0; }

.gbox { position: relative; }
.gbox .gagora {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 17px;
  display: flex;
  gap: 12px;
}

/* os cartões são clicáveis: o zoom é o "entender a situação" */
.sede { cursor: pointer; transition: transform 0.1s; }
.sede:hover { transform: translateY(-2px); border-color: var(--accent); }

/* cabeçalho de região */
.regiao {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 700;
}
.regiao .ral { color: var(--bad); }

/* --- o zoom ------------------------------------------------------------- */
/* O [hidden] precisa vencer QUALQUER display de autor: o atributo é só um
   display:none de USER-AGENT. Já mordeu duas vezes nesta página — o overlay
   que nascia visível (produção) e o botão de hotconfig que o modo
   compartilhado "escondia" e continuava na tela. Regra geral, com !important,
   porque a terceira vez viria. */
body.dash [hidden] { display: none !important; }

.zoom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 4vw;
  z-index: 60;
  overflow-y: auto;
}

.zoomcard {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 18px 22px;
  width: min(1500px, 100%);
}

.zhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.zhead .sid {
  font-family: ui-monospace, monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
}
.zhead .sname { font-size: 19px; font-weight: 600; }
.zhead .spacer { flex: 1; }

.zgraf { margin-bottom: 12px; }

.zalerta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-left: 3px solid var(--bad);
  padding: 4px 10px;
  margin-bottom: 4px;
  font-size: 14px;
}

.zmaq {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.zmac {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: 8px;
  padding: 9px 11px;
}
.zmac.stale { border-left-color: var(--warn); }
.zmac.off { border-left-color: var(--line); opacity: 0.5; }
.zmac.alerta { border-color: var(--bad); border-left-color: var(--bad); }
.zmac .ztitulo { font-weight: 700; font-size: 14px; }
.zmac .zmacaddr { color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; }

/* --- abas de visão --- */
.dabas { display: flex; gap: 8px; margin: 2px 0 14px; }
.dabas button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 14px;
  cursor: pointer;
}
.dabas button.on { border-color: var(--accent); color: var(--fg); font-weight: 700; }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .duas { grid-template-columns: 1fr; } }

/* barras horizontais das distribuições */
.hbarra { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.hbarra .hrot { width: 46%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.hbarra .htrilho { flex: 1; height: 16px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.hbarra .htrilho i { display: block; height: 100%; background: var(--serie1); }
.hbarra .hval { width: 52px; font-variant-numeric: tabular-nums; }

/* a lista dos piores discos */
.disco-linha {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.disco-linha .dsede { font-weight: 700; color: var(--accent); font-family: ui-monospace, monospace; }
.disco-linha .dquem { min-width: 180px; }
.disco-linha .dpct { font-weight: 700; font-variant-numeric: tabular-nums; }
.disco-linha .dpct.warn { color: var(--warn); }
.disco-linha .dpct.bad { color: var(--bad); }
.disco-linha.offline { opacity: 0.5; }
.ral { color: var(--bad); }

/* a barra de período, estilo painel de monitoramento: predefinições rápidas
   e o horário absoluto ("a prova começou às 14:00") */
.dtempo { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.dtempo button {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
}
.dtempo button.on { border-color: var(--accent); color: var(--fg); font-weight: 600; }
.dtempo input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 13px;
  color-scheme: dark;
}

/* a rosca da memória instalada: parte-de-um-todo com poucas fatias — o único
   lugar onde pizza é a leitura certa */
.rosca-caixa { display: flex; align-items: center; gap: 22px; }
.rosca-caixa svg { width: 190px; height: 190px; flex: none; }
.rosca-centro { font-size: 26px; font-weight: 700; fill: var(--fg); }
.rosca-centro-sub { font-size: 11px; fill: var(--muted); }
.rosca-leg { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rosca-leg .quad { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }

/* melhor × pior sede */
.ranking { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ranking .hbarra .htrilho i.top { background: var(--ok); }
.ranking .hbarra .htrilho i.bottom { background: var(--bad); }

.dsharenote { color: var(--muted); font-size: 13px; }


/* a aba de editores */
.bignum.edmulti { padding: 4px 0 12px; }
.bignum.edmulti b { font-size: 40px; }
#g-ed-leg .quad { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#g-ed-leg { flex-wrap: wrap; }

/* o recorte da frota que a tela está mostrando */
.dchip { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin-right: 12px; }
.dchip:hover { border-color: var(--accent); color: var(--accent); }