/* Tema do JWD Manager, a partir da referência do mapa de infraestrutura. */
:root {
  color-scheme: dark;
  --fundo: #101017;
  --texto: #d1d1df;
  --cartao: #171720;
  --titulo: #ededf2;
  --primaria: #a2b9ff;
  --primaria-texto: #171720;
  --suave: #242431;
  --apagado: #ababbd;
  --perigo: #ff9ea4;
  --borda: #30303e;
  --campo: #535369;
  --raio: 0.75rem;
  --fonte: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
}
a { color: var(--primaria); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
h1, h2 { color: var(--titulo); line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 600; }
h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.75rem; }
code { font-family: var(--mono); font-size: 0.85em; word-break: break-all; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--borda); background: var(--cartao);
}
.marca { color: var(--titulo); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.marca:hover { text-decoration: none; }
.marca span { color: var(--primaria); }
.marca.grande { font-size: 1.6rem; }
.sair { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.quem { color: var(--apagado); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }

.pagina { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: grid; gap: 1rem; }
.centro { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; }
.apagado { color: var(--apagado); margin: 0; }
.nota { font-size: 0.85rem; }
.trilha { margin: 0; color: var(--apagado); font-size: 0.9rem; }
.trilha span { margin: 0 0.25rem; }
.vazio { text-align: center; color: var(--apagado); }
.aviso { max-width: 28rem; display: grid; gap: 0.5rem; }
.aviso p { margin: 0; }

.login { width: 100%; max-width: 22rem; display: grid; gap: 0.9rem; padding: 1.5rem; }
.login.estreito { justify-self: center; }
.sair a { font-size: 0.9rem; font-weight: 400; white-space: nowrap; }
label { display: grid; gap: 0.3rem; font-size: 0.9rem; font-weight: 500; color: var(--titulo); }
input[type="email"], input[type="password"] {
  font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--campo);
  border-radius: calc(var(--raio) * 0.6); background: var(--fundo); color: var(--titulo); width: 100%;
}
input:focus-visible, .botao:focus-visible, a:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.botao {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: calc(var(--raio) * 0.6);
  padding: 0.65rem 1rem; background: var(--primaria); color: var(--primaria-texto);
}
.botao:hover { filter: brightness(0.95); }
.botao.discreto { background: var(--suave); color: var(--titulo); padding: 0.4rem 0.8rem; font-weight: 500; }
.erro {
  margin: 0; padding: 0.6rem 0.75rem; border-radius: calc(var(--raio) * 0.6);
  background: color-mix(in oklch, var(--perigo) 15%, var(--cartao)); color: var(--perigo); font-size: 0.9rem; font-weight: 500;
}

.resumo { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.numero { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; }
.numero span { color: var(--apagado); font-size: 0.85rem; }
.numero strong { color: var(--titulo); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Dinheiro: símbolo fixo, número à direita, algarismos de mesma largura. */
.dinheiro { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dinheiro i { font-style: normal; color: var(--apagado); font-size: 0.8em; font-weight: 400; }

.tabela { padding: 0.5rem 0.25rem; overflow-x: auto; }
.tabela h2 { padding: 0.5rem 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.65rem 1rem; white-space: nowrap; }
th { color: var(--apagado); font-size: 0.8rem; font-weight: 500; }
tbody tr { border-top: 1px solid var(--borda); }
tbody tr:hover { background: var(--suave); }
.n { text-align: right; font-variant-numeric: tabular-nums; }

.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pares { margin: 0; display: grid; gap: 0.4rem; }
.pares div { display: flex; justify-content: space-between; gap: 1rem; }
.pares dt { color: var(--texto); }
.pares dd { margin: 0; color: var(--titulo); font-weight: 600; font-variant-numeric: tabular-nums; }

.selo { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; }
.selo.ok { background: color-mix(in oklch, var(--primaria) 18%, var(--cartao)); color: var(--primaria); }
.selo.off { background: var(--suave); color: var(--apagado); }

/* Celular: cada linha da tabela vira um cartão, com o rótulo ao lado do valor. */
@media (max-width: 46rem) {
  h1 { font-size: 1.35rem; }
  .tabela { padding: 0.25rem 0; overflow: visible; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tbody tr { padding: 0.6rem 0; }
  td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 1rem; white-space: normal; text-align: right; }
  td::before { content: attr(data-rotulo); color: var(--apagado); font-size: 0.85rem; text-align: left; flex: none; }
  td:first-child { font-size: 1.05rem; }
}

/* Navegação e mapa. Os nós são links, acessíveis sem JavaScript. */
.manager-autenticado { padding-inline-start: 3.4rem; }
.trilho-manager {
  position: fixed; inset: 0 auto 0 0; z-index: 2; width: 3.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.9rem 0.4rem; background: #14141d; border-inline-end: 1px solid var(--borda);
}
.trilho-manager a {
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
  color: var(--apagado); border-radius: 0.55rem;
}
.trilho-manager a:hover, .trilho-manager a[aria-current] { background: var(--suave); color: var(--titulo); text-decoration: none; }
.trilho-manager a.simbolo-manager {
  width: 2.1rem; height: 2.1rem; margin-bottom: 1rem; border-radius: 0.65rem;
  background: var(--titulo); color: var(--fundo); font-weight: 850;
}
.trilho-manager a span { display: none; }
.trilho-manager svg, .no-icone svg {
  width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.topo { min-height: 3.8rem; padding-inline: 1.4rem; background: var(--fundo); }
.topo-projeto { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.topo-projeto .marca { white-space: nowrap; }
.topo-secao {
  border-inline-start: 1px solid var(--borda); padding-inline-start: 0.85rem; color: var(--apagado);
  font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pagina-infra {
  max-width: none; min-height: calc(100dvh - 3.8rem); padding: 0.65rem; gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); align-items: start;
}
.pagina-infra.painel-aberto { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(14rem, 18rem); }
.mapa-infra {
  min-width: 0; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  background: radial-gradient(#39394a 0.75px, transparent 0.75px) center / 23px 23px, #15151e;
}
.mapa-cabecalho, .detalhe-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.15rem; background: #171720; border-bottom: 1px solid var(--borda);
}
.mapa-cabecalho h1 { font-size: 1.05rem; }
.mapa-cabecalho p, .detalhe-cabecalho p { margin: 0.15rem 0 0; color: var(--apagado); font-size: 0.8rem; }
.mapa-contagem {
  border: 1px solid var(--borda); border-radius: 0.45rem; padding: 0.25rem 0.5rem;
  color: var(--apagado); white-space: nowrap; font-size: 0.75rem;
}
.mapa-grade {
  position: relative; isolation: isolate; display: grid; align-items: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(8rem, 1fr));
  grid-template-areas: ". web worker postgres" "caddy api worker-ia redis" ". manager migrate manager-papel";
  min-height: clamp(28rem, 66vh, 42rem);
}
.mapa-conexoes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-conexoes path { fill: none; stroke: #54546a; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.mapa-conexoes .conexao-ativa { stroke: #91a4e8; stroke-dasharray: 5 5; }
.mapa-no {
  z-index: 1; min-width: 0; margin-inline: clamp(0.35rem, 1.2vw, 1.15rem); display: grid; gap: 0.35rem;
  padding: 0.65rem 0.75rem 0; color: var(--titulo); background: #1b1b26;
  border: 1px solid #3a3a4c; border-radius: 0.65rem; box-shadow: 0 8px 24px #0003;
}
.mapa-no:hover, .mapa-no[aria-current] { text-decoration: none; border-color: #91a4e8; }
.mapa-no[aria-current] { box-shadow: 0 0 0 2px #91a4e830; }
.painel-aberto .mapa-grade {
  grid-template-areas: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
  min-height: 0; gap: 0.55rem; padding: 0.75rem; align-items: stretch;
}
.painel-aberto .mapa-no[data-servico] { grid-area: auto; margin: 0; }
.painel-aberto .mapa-no[aria-current] { order: -1; }
.painel-aberto .mapa-conexoes { display: none; }
.mapa-no[data-servico="caddy"] { grid-area: caddy; }
.mapa-no[data-servico="web"] { grid-area: web; }
.mapa-no[data-servico="api"] { grid-area: api; }
.mapa-no[data-servico="manager"] { grid-area: manager; }
.mapa-no[data-servico="worker"] { grid-area: worker; }
.mapa-no[data-servico="worker-ia"] { grid-area: worker-ia; }
.mapa-no[data-servico="postgres"] { grid-area: postgres; }
.mapa-no[data-servico="redis"] { grid-area: redis; }
.mapa-no[data-servico="migrate"] { grid-area: migrate; }
.mapa-no[data-servico="manager-papel"] { grid-area: manager-papel; }
.no-titulo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; line-height: 1.2; }
.no-titulo strong { overflow-wrap: anywhere; }
.no-icone {
  display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 0.5rem;
  color: #c7cbf3; background: #303044;
}
.no-icone.tipo-web { color: #9cdae9; background: #253b44; }
.no-icone.tipo-banco, .no-icone.tipo-chave { color: #d4c1ff; background: #352c45; }
.no-icone.tipo-cache { color: #efc597; background: #41342b; }
.no-icone.tipo-worker { color: #a9ddb0; background: #303b32; }
.no-descricao { color: var(--apagado); font-size: 0.72rem; line-height: 1.25; }
.mapa-no code {
  margin: 0.25rem -0.75rem 0; padding: 0.4rem 0.75rem; border-top: 1px solid #343440;
  border-radius: 0 0 0.65rem 0.65rem; background: #20202b; color: var(--apagado); font-size: 0.72rem;
}
.infra-detalhe, .infra-atividade {
  min-width: 0; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cartao); overflow: hidden;
}
.infra-detalhe { min-height: min(72vh, 44rem); }
.detalhe-cabecalho { justify-content: flex-start; }
.detalhe-cabecalho h2 { margin: 0; }
.infra-detalhe .detalhe-cabecalho { padding: 1.35rem 1.25rem; border-bottom: 0; }
.infra-detalhe .detalhe-cabecalho h2 { font-size: 1.35rem; }
.fechar-detalhe { margin-inline-start: auto; padding: 0.3rem 0.55rem; color: var(--apagado); font-size: 1.2rem; }
.detalhe-grupo { display: grid; gap: 0.45rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--borda); }
.detalhe-grupo h3 { margin: 0; color: var(--titulo); font-size: 0.85rem; }
.detalhe-grupo p, .detalhe-grupo a { font-size: 0.8rem; }
.detalhe-abas { display: flex; gap: 1rem; padding: 0 1.15rem; border-bottom: 1px solid var(--borda); }
.detalhe-abas a { padding: 0.65rem 0; color: var(--apagado); font-size: 0.8rem; }
.detalhe-abas a[aria-current] { color: var(--titulo); border-bottom: 2px solid var(--primaria); }
.detalhe-variaveis-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.65rem; }
.detalhe-variaveis-lista { margin: 0.35rem 0; padding: 0; list-style: none; }
.detalhe-variavel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 35%); align-items: center;
  gap: 0.65rem; padding: 0.75rem 0.55rem; border-top: 1px solid var(--borda);
}
.detalhe-variavel a { color: var(--titulo); overflow-wrap: anywhere; }
.detalhe-variavel code { word-break: normal; }
.detalhe-variavel span, .detalhe-grupo time { font-size: 0.75rem; }
.atividade-estado[data-resultado="sucesso"] { color: #9bddbb; }
.atividade-estado[data-resultado="falhou"] { color: var(--perigo); }
.atividade-estado[data-resultado="em_andamento"] { color: var(--primaria); }
.historico-deploy summary { cursor: pointer; font-size: 0.8rem; }
.historico-deploy ul { padding: 0; margin: 0.35rem 0 0; list-style: none; }
.historico-deploy li { display: grid; gap: 0.2rem; padding-block: 0.5rem; border-top: 1px solid var(--borda); font-size: 0.8rem; }
form:target { scroll-margin-top: 1rem; }
.botao:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 68rem) {
  .pagina-infra, .pagina-infra.painel-aberto { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .mapa-grade { min-height: 28rem; }
  .painel-aberto .mapa-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .infra-detalhe { min-height: 0; }
}
@media (max-width: 46rem) {
  .manager-autenticado { padding-inline-start: 0; padding-bottom: calc(3.4rem + max(0.75rem, env(safe-area-inset-bottom))); }
  .trilho-manager {
    inset: auto auto max(0.75rem, env(safe-area-inset-bottom)) 50%; transform: translateX(-50%);
    width: auto; max-width: calc(100% - 1.25rem); flex-direction: row; gap: 0.2rem; padding: 0.35rem;
    border: 1px solid var(--borda); border-radius: 999px; box-shadow: 0 8px 26px #0007;
  }
  .trilho-manager a.simbolo-manager { display: none; }
  .trilho-manager a { display: flex; gap: 0.3rem; justify-content: center; width: auto; padding-inline: 0.55rem; border-radius: 999px; }
  .trilho-manager a span { display: inline; font-size: 0.7rem; }
  .trilho-manager svg { width: 0.9rem; height: 0.9rem; }
  .topo { padding-inline: 0.8rem; gap: 0.6rem; }
  .topo-secao, .quem { display: none; }
  .sair { gap: 0.5rem; }
  .sair a { font-size: 0.75rem; }
  .pagina-infra { min-height: auto; }
  .mapa-grade {
    grid-template-areas: none; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none; min-height: 0; align-items: stretch; gap: 0.55rem; padding: 0.65rem;
  }
  .mapa-no[data-servico] { grid-area: auto; margin: 0; }
  .mapa-conexoes { display: none; }
  .painel-aberto .mapa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.engenharia-titulo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.engenharia-titulo h1 { margin-bottom:.3rem; }
.engenharia-titulo p { margin:0; }
.engenharia-grade { display:grid; grid-template-columns:minmax(280px, 2fr) minmax(0, 3fr); gap:1rem; align-items:start; }
.engenharia-lista { padding:0; max-height:75vh; overflow:auto; }
.engenharia-lista h2, .engenharia-vazio { margin:0; padding:1rem; }
.engenharia-lista h2 span { margin-left:.4rem; font-size:.8rem; }
.engenharia-linha { display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; color:inherit; border-top:1px solid var(--borda, #303040); }
.engenharia-linha:hover, .engenharia-linha[aria-current] { background:rgba(161, 119, 232, .12); text-decoration:none; }
.engenharia-linha strong, .engenharia-linha small { display:block; overflow-wrap:anywhere; }
.engenharia-linha small { opacity:.75; margin-top:.25rem; }
.engenharia-avatar { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#362b48; color:#fff; }
.engenharia-detalhe { min-width:0; overflow-wrap:anywhere; }
.engenharia-texto { white-space:pre-wrap; font:inherit; background:rgba(161, 119, 232, .08); padding:.8rem; border-radius:.5rem; }
.engenharia-totais, .engenharia-filtros { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.engenharia-filtros { padding:.75rem 1rem; font-size:.85rem; }
.engenharia-filtros [aria-current] { font-weight:700; text-decoration:underline; }
.engenharia-arquivos { list-style:none; margin:.8rem 0 0; padding:0; }
.engenharia-arquivos li { display:flex; gap:.75rem; border-top:1px solid var(--borda, #303040); padding:.55rem 0; }
.engenharia-arquivos code { flex:1; min-width:0; }
.engenharia-mais { color:#62d7a0; }
.engenharia-menos { color:#f08b99; }
.engenharia-status { margin-left:auto; flex:none; font-size:.75rem; padding:.2rem .5rem; border-radius:1rem; background:#343142; }
.engenharia-status.status-em_andamento { background:#47365d; color:#edd8ff; }
.engenharia-status.status-concluido { background:#234039; color:#b0f1d3; }
.engenharia-form, .engenharia-campos { display:grid; gap:.8rem; }
.engenharia-campos { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.engenharia-form label { min-width:0; }
.engenharia-form textarea, .engenharia-form select { width:100%; font:inherit; color:inherit; background:var(--fundo, #15141e); border:1px solid var(--borda, #303040); border-radius:.5rem; padding:.65rem; }
.engenharia-form textarea { resize:vertical; }
.engenharia-form .botao { justify-self:start; }
@media (max-width: 850px) {
  .engenharia-grade { grid-template-columns:minmax(0, 1fr); }
  .engenharia-lista { max-height:34vh; }
}
@media (max-width: 560px) {
  .engenharia-titulo { align-items:flex-start; flex-wrap:wrap; }
  .engenharia-campos { grid-template-columns:minmax(0, 1fr); }
  .trilho-manager a { min-width:0; flex-direction:column; padding-inline:.3rem; gap:.2rem; }
}