/* Portal Technomar — carta nautica desfocada + superficies de vidro.
   Sem fonte web, sem asset externo: o fundo e o preview sao SVG servidos pelo
   proprio servico (`/fundo.svg`, `/preview/<nome>.svg`).

   🔴 Nada de `style="..."` nos templates. A CSP da pagina manda
   `style-src 'self'` (ver `rest_api/routers/portal.py`), entao atributo de
   estilo inline e BLOQUEADO — e o sintoma e uma tela sem estilo nenhum, sem
   erro visivel a nao ser no console. Estilo mora aqui. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Superficies de vidro. 🔑 ESCURO translucido, nao branco: a carta por
     baixo e CLARA (verde/azul medio), e vidro branco sobre fundo claro nao
     separa o cartao do fundo — o texto some. O alfa e o compromisso: alto o
     bastante para o texto ter contraste, baixo o bastante para a carta ainda
     aparecer e o desenho fazer sentido. */
  --vidro: rgba(14, 19, 26, 0.66);
  --vidro-forte: rgba(255, 255, 255, 0.07);
  --borda: rgba(255, 255, 255, 0.09);
  --borda-suave: rgba(255, 255, 255, 0.06);

  --cor-texto: #e8ecf1;
  --cor-texto-sec: #9aa6b4;
  --cor-texto-fraco: #7f8b99;
  --cor-destaque: #2f6df6;
  --cor-destaque-clara: #8fb2ff;
  --cor-aviso: #f5b942;
  --cor-erro: #ff8a8a;
  --cor-sucesso: #3ddc97;

  --fonte: 'Helvetica Neue', Helvetica, system-ui, -apple-system, Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* Escala de respiro. 🔑 Existe para que as duas colunas concordem: antes
     eram literais soltos (1rem aqui, 1.5rem ali, 2rem acolá) e o detalhe
     respirava diferente da lista. */
  --e1: 6px;
  --e2: 10px;
  --e3: 16px;
  --e4: 22px;
  --e5: 34px;

  --raio: 14px;
  --raio-menor: 10px;
}

html {
  /* 🔴 A cor base mora no HTML, NAO no body. Com `background` opaco no body,
     o `body::before` de `z-index: -1` fica invisivel: na ordem de pintura o
     fundo de um descendente em fluxo vem DEPOIS dos filhos de z-index
     negativo. O sintoma e uma pagina preta, sem erro nenhum — a carta esta
     desenhada ali embaixo, coberta. */
  background: #0e1116;
}

html, body {
  height: 100%;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto);
}

/* ── Fundo cartografico ───────────────────────────────────────────────────
   Camada fixa: nao rola junto e nao entra no fluxo. O desfoque ja vem assado
   dentro do SVG — ver o comentario em `fundo-carta.svg`. O veu por cima e o
   que garante contraste do texto: sem ele, o texto claro sobre a parte clara
   da carta fica ilegivel. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(10, 14, 20, 0.26), rgba(10, 14, 20, 0.42)),
    url("/fundo.svg");
  background-size: cover;
  background-position: center;
}

:focus-visible {
  outline: 2px solid var(--cor-destaque-clara);
  outline-offset: 2px;
}

/* ── Esqueleto ──────────────────────────────────────────────────────────── */
.painel {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  height: 100dvh;
  padding: var(--e4) 26px var(--e5);
}

/* A superficie de vidro, uma so definicao para tudo que flutua. */
.cabecalho,
.lateral,
.detalhe,
.falhas {
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio);
  background: var(--vidro);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 12px 18px;
  flex-shrink: 0;
}

.cabecalho h1 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.aviso-antiga {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--cor-aviso);
  white-space: nowrap;
}

.busca {
  margin-left: auto;
  width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-menor);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  outline: none;
}

.busca:focus {
  border-color: rgba(47, 109, 246, 0.55);
}

.busca::placeholder {
  color: var(--cor-texto-fraco);
}

/* ── Mestre-detalhe ─────────────────────────────────────────────────────── */
.conteudo {
  display: flex;
  gap: var(--e3);
  flex: 1;
  /* ⚠️ `min-height: 0` e obrigatorio: sem ele um filho flex que rola nao
     encolhe, estoura a altura do painel e a pagina inteira ganha barra. */
  min-height: 0;
}

.lateral {
  width: 300px;
  min-width: 240px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: var(--e2);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.detalhe {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--e4);
}

/* ── Lista de servicos ──────────────────────────────────────────────────── */
.lista-servicos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.item-servico {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--e2) 12px;
  border: 1px solid transparent;
  border-radius: var(--raio-menor);
  text-decoration: none;
  color: var(--cor-texto);
  transition: background 0.15s, border-color 0.15s;
}

.item-servico:hover {
  background: var(--vidro-forte);
}

.item-servico.ativo,
.item-servico[aria-current="page"] {
  background: rgba(47, 109, 246, 0.13);
  border-color: rgba(47, 109, 246, 0.42);
}

.monograma {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: #c9d4e2;
}

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

.item-nome {
  font-size: 13.5px;
  color: #eef2f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-area {
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  color: var(--cor-texto-fraco);
}

/* ── Detalhe ────────────────────────────────────────────────────────────── */
.servico-detalhe {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.servico-detalhe header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.monograma-grande {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: #dce4ee;
}

.servico-detalhe h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f4f7fa;
}

.tag-area, .tag-dono {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 2px 8px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.descricao {
  font-size: 13.5px;
  line-height: 1.6;
  color: #c4cedb;
  text-wrap: pretty;
}

/* ── Preview ────────────────────────────────────────────────────────────── */
.preview {
  /* `.servico-detalhe` e flex-column e item de flex encolhe por padrao quando
     o conteudo passa da altura; sem isto a arte achataria ao rolar. */
  flex-shrink: 0;
  /* ⚠️ Teto na largura NATIVA da arte (640). Sem isto o 16/9 se estica com o
     painel: num monitor largo a ilustracao passa de 600px de altura, domina o
     detalhe e ainda e cortada pelo fim da area rolavel. */
  max-width: 640px;
  border: 1px solid var(--borda-suave);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.preview-img {
  display: block;
  width: 100%;
  /* 🔴 `height: auto` e obrigatorio. O `<img>` carrega `width="640"` e
     `height="360"` como ATRIBUTOS (que evitam pulo de layout no carregamento).
     Com as duas dimensoes ja resolvidas, o `aspect-ratio` abaixo e IGNORADO:
     a altura ficava presa em 360px enquanto a largura esticava, e o
     `object-fit: cover` cortava o topo da arte — o titulo sumia e a
     ilustracao so parecia mal enquadrada. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Hospedeiro ─────────────────────────────────────────────────────────── */
.hospedeiro-bloco {
  padding: 14px 16px;
  border: 1px solid var(--borda-suave);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.hospedeiro {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  color: var(--cor-destaque-clara);
  word-break: break-all;
}

.hospedeiro-acoes {
  display: flex;
  gap: var(--e1);
  margin-top: var(--e2);
}

.btn-copiar, .btn-abrir {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cor-texto);
  font-family: var(--fonte-mono);
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
}

.btn-copiar:hover, .btn-abrir:hover {
  background: var(--vidro-forte);
}

.btn-abrir {
  border-color: rgba(47, 109, 246, 0.45);
  background: rgba(47, 109, 246, 0.14);
  color: var(--cor-destaque-clara);
}

/* ── Status e tags ──────────────────────────────────────────────────────── */
.info-status {
  font-family: var(--fonte-mono);
  font-size: 11px;
}

.status-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.status-valor {
  margin-left: var(--e1);
}

.status-running {
  color: var(--cor-sucesso);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}

.tag {
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  color: var(--cor-texto-sec);
}

/* ── Pendentes ──────────────────────────────────────────────────────────── */
.secao-pendentes {
  margin-top: var(--e3);
  padding: var(--e2) 12px 0;
  border-top: 1px solid var(--borda-suave);
}

.secao-pendentes h2 {
  margin-bottom: var(--e2);
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.lista-pendentes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.item-pendente {
  padding: var(--e1) 0;
  font-size: 12.5px;
}

.pendente-nome {
  color: var(--cor-texto-sec);
}

.pendente-motivo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  color: var(--cor-aviso);
}

.pendente-detalhe {
  display: block;
  font-size: 10.5px;
  color: var(--cor-texto-fraco);
}

/* ── Estado vazio ───────────────────────────────────────────────────────── */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 60vh;
  padding: var(--e5) var(--e4);
  text-align: center;
}

.vazio-icone {
  font-size: 44px;
  color: var(--cor-texto-fraco);
}

.estado-vazio h2 {
  font-size: 18px;
  font-weight: 500;
}

.vazio-explicacao {
  max-width: 460px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cor-texto-sec);
}

.vazio-explicacao code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--fonte-mono);
  font-size: 12px;
}

.vazio-falhas {
  list-style: disc inside;
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  color: var(--cor-erro);
}

/* ── Falhas no rodape ───────────────────────────────────────────────────── */
.falhas {
  flex-shrink: 0;
  padding: var(--e2) var(--e3);
  font-family: var(--fonte-mono);
  font-size: 11px;
}

.falhas summary {
  color: var(--cor-aviso);
  cursor: pointer;
}

.falhas ul {
  margin-top: var(--e1);
  list-style: disc inside;
  color: var(--cor-erro);
}