/* ============================================================================
   ApolloKey — telas de credenciais (login · registro · senha perdida · ativação)
   no padrao da familia Apollo (mesma linguagem do login do ApolloAuth).

   Injetado pelo nginx `brand` da stack (sub_filter no </head>), porque o Psono
   7.2.2 NAO tem chave de CSS custom no config.json — so logo e tema MUI.

   ESCOPO: tudo abaixo vive sob `html.apollo-login`, classe que o apollo-brand.js
   poe SO nas telas de credenciais. O cofre logado roda no MESMO index.html — sem
   esse escopo, o layout de login vazaria para dentro do app.

   DEGRADACAO: se um upgrade mudar a estrutura, o JS nao acha os ancoras, a classe
   nao entra e a tela volta ao stock. Nada quebra funcionalmente.

   Regras duras da marca: dark-first · mono-accent (#2FE68C e o UNICO destaque) ·
   texto sobre verde SEMPRE grafite (WCAG) · glow so no destaque.
   ============================================================================ */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/apollo-brand/JetBrainsMono-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

html.apollo-login {
  --apollo-verde: #2fe68c;
  --apollo-verde-escuro: #00783d;
  --apollo-quase-preto: #141414;
  --apollo-superficie: #2a2a2a;
  --apollo-corpo: #eff8f3;
  --apollo-cinza: #9a9a96;
  --apollo-radius: 12px;
  --split-pad: 16px;
  --split-panel-w: calc(50vw - 24px);
}

/* ---- Base: fundo near-black e tipografia da casa ----
   ⚠ O fundo mora em html/body. O #app (e o #root) precisam ficar
   TRANSPARENTES: eles cobrem a viewport inteira e ficam ACIMA do painel no
   split — com fundo opaco, o painel existe no CSS (getComputedStyle mostra
   tudo certo) e mesmo assim nao aparece um pixel dele na tela. */
html.apollo-login,
html.apollo-login body {
  background: #0d0d0d !important;
  color: var(--apollo-corpo);
}
html.apollo-login #app,
html.apollo-login #root {
  background: transparent !important;
  color: var(--apollo-corpo);
}
html.apollo-login body,
html.apollo-login input,
html.apollo-login button,
html.apollo-login .MuiTypography-root,
html.apollo-login .MuiInputBase-root,
html.apollo-login .MuiFormLabel-root {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace !important;
}

/* ---- Fora: superficies do fornecedor ----
   (1) barra de download da extensao; (2) a coluna promocional da tela de
   registro — screenshots do produto Psono + lista de features com link p/
   psono.com. O painel de marca abaixo ocupa esse lugar. */
html.apollo-login #PsonoDownloadBanner,
html.apollo-login #app > .MuiGrid-container > .MuiGrid-item:first-child,
html.apollo-login #root > .MuiGrid-container > .MuiGrid-item:first-child {
  display: none !important;
}

/* ============================================================================
   CARD DE CREDENCIAIS — fallback (mobile e < 1101px) e base do split
   ============================================================================ */
html.apollo-login #app, html.apollo-login #root {
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--split-pad);
  box-sizing: border-box !important;
}
/* wrapper intermediario do registro (avo do form): nasce com 100vh + padding,
   o que jogava o card para o topo da coluna */
html.apollo-login .MuiGrid-item > div:has(> div > form) {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* A tela de registro monta um MuiGrid de 2 colunas (promo | formulario). Com a
   promo fora, o container vira coluna unica e centrada — igual ao login. */
html.apollo-login #app > .MuiGrid-container,
html.apollo-login #root > .MuiGrid-container {
  width: 100% !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
}
html.apollo-login #app > .MuiGrid-container > .MuiGrid-item,
html.apollo-login #root > .MuiGrid-container > .MuiGrid-item {
  width: 100% !important;
  max-width: 420px !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* ⚠ O card do login nasce `position:absolute; top:40%; left:50%` com translate:
   fora do fluxo, ele ignora a centralizacao do #app e a posicao passa a depender
   da altura da janela (numa janela baixa some para fora da tela). Devolver ao
   fluxo e a base de TODO o resto — vale no fallback e no split. */
html.apollo-login div:has(> form):not(.MuiCardContent-root) {
  /* `relative` e nao `static`: o rodape "Excluir Conta" e absolute com
     bottom:-50px ancorado NO CARD — em static ele reancorava no #app e caia
     fora da tela, criando barra de rolagem do nada.
     ⚠ `:not(.MuiCardContent-root)`: no portal admin quem tem o form e o
     CardContent DENTRO de um MuiCard — a moldura vai no Card (abaixo), senao
     saem duas molduras aninhadas. */
  position: relative !important;
  /* o bundle desloca com top:40%/left:50% + translate; zerar os DOIS — so o
     transform deixava o card 50% da largura do pai para a direita */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  background: rgba(20, 20, 20, 0.92) !important;
  border: 1px solid rgba(47, 230, 140, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
  padding: 32px !important;
  width: 100% !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
}
/* Portal admin: o wrapper nasce com 100vh DENTRO de um #root que ja tem padding
   — 32px de scroll do nada; e a moldura mora no MuiCard, nao no CardContent. */
html.apollo-login #root > div {
  height: auto !important;
  min-height: 0 !important;
}
html.apollo-login #root .MuiPaper-root {
  /* nasce inline-block: `margin:auto` nao centraliza nesse display */
  display: block !important;
  background: rgba(20, 20, 20, 0.92) !important;
  border: 1px solid rgba(47, 230, 140, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
  margin: 0 auto !important;
  color: var(--apollo-corpo) !important;
}

/* lockup dentro do card: some no split (migra p/ o painel), fica no mobile */
html.apollo-login div:has(> form) > img {
  display: block;
  max-width: 240px;
  height: auto;
  margin: 4px auto 26px;
}

/* ---- Campos: escuros, borda discreta, foco emerald ---- */
html.apollo-login .MuiOutlinedInput-root {
  background: rgba(32, 32, 32, 0.9) !important;
  border-radius: var(--apollo-radius) !important;
  color: var(--apollo-corpo) !important;
}
html.apollo-login .MuiOutlinedInput-notchedOutline {
  border-color: rgba(239, 248, 243, 0.14) !important;
  border-radius: var(--apollo-radius) !important;
}
html.apollo-login .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(47, 230, 140, 0.35) !important;
}
html.apollo-login .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--apollo-verde) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 3px rgba(47, 230, 140, 0.12);
}
html.apollo-login .MuiInputBase-input { color: var(--apollo-corpo) !important; }
html.apollo-login .MuiInputBase-input::placeholder,
html.apollo-login .MuiFormLabel-root { color: var(--apollo-cinza) !important; }
html.apollo-login .MuiFormLabel-root.Mui-focused { color: var(--apollo-verde) !important; }
/* sufixo "@dominio" do nome de usuario */
html.apollo-login .MuiInputAdornment-root .MuiTypography-root { color: var(--apollo-cinza) !important; }

/* O portal admin e MUI v4 e usa campos `underline` (nao outlined): a linha de
   base vem de ::before/::after, e o foco nasce azul-indigo do tema default. */
html.apollo-login .MuiInput-underline::before {
  border-bottom-color: rgba(239, 248, 243, 0.2) !important;
}
html.apollo-login .MuiInput-underline:hover::before {
  border-bottom-color: rgba(47, 230, 140, 0.45) !important;
}
html.apollo-login .MuiInput-underline::after {
  border-bottom-color: var(--apollo-verde) !important;
}

/* ---- CTA: emerald com texto GRAFITE + glow (regra da marca) ---- */
html.apollo-login .MuiButton-containedPrimary {
  background: var(--apollo-verde) !important;
  color: var(--apollo-quase-preto) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border-radius: var(--apollo-radius) !important;
  box-shadow: 0 0 24px rgba(47, 230, 140, 0.28) !important;
  text-transform: none !important;
}
html.apollo-login .MuiButton-containedPrimary:hover {
  background: #4ff0a3 !important;
  box-shadow: 0 0 32px rgba(47, 230, 140, 0.42) !important;
}
html.apollo-login .MuiButton-containedPrimary.Mui-disabled {
  background: rgba(47, 230, 140, 0.22) !important;
  color: rgba(20, 20, 20, 0.55) !important;
  box-shadow: none !important;
}
/* O portal admin nao usa `containedPrimary`: o CTA e um MuiButton-text pintado
   por classes JSS geradas (o roxo padrao do MUI, ja que ele ignora o tema do
   config.json). Miramos o botao do proprio formulario. */
html.apollo-login #root form button {
  background: var(--apollo-verde) !important;
  color: var(--apollo-quase-preto) !important;
  font-weight: 700 !important;
  border-radius: var(--apollo-radius) !important;
  box-shadow: 0 0 24px rgba(47, 230, 140, 0.28) !important;
  text-transform: none !important;
}
html.apollo-login #root form button:hover {
  background: #4ff0a3 !important;
  box-shadow: 0 0 32px rgba(47, 230, 140, 0.42) !important;
}

/* acao secundaria (Registrar / Abortar): texto claro, sem caixa */
html.apollo-login .MuiButton-text {
  color: var(--apollo-corpo) !important;
  text-transform: none !important;
}
html.apollo-login .MuiButton-text:hover { color: var(--apollo-verde) !important; background: transparent !important; }

/* ---- Checkboxes e links ---- */
html.apollo-login .MuiCheckbox-root { color: rgba(239, 248, 243, 0.35) !important; }
html.apollo-login .MuiCheckbox-root.Mui-checked { color: var(--apollo-verde) !important; }
html.apollo-login .MuiFormControlLabel-label { color: var(--apollo-cinza) !important; font-size: 0.82rem !important; }
html.apollo-login a { color: var(--apollo-verde) !important; text-decoration: none !important; }
html.apollo-login a.infolabel { color: rgba(239, 248, 243, 0.45) !important; }
/* o logo e envolvido por <a href="psono.com"> cravado no bundle: o JS tira o
   href; aqui tiramos o affordance de link */
html.apollo-login a:not([href]) { cursor: default !important; }

/* rodape do login ("Excluir Conta"): discreto, sob o card */
html.apollo-login .box-footer {
  text-align: center;
  font-size: 0.75rem !important;
}
html.apollo-login .box-footer a { color: rgba(239, 248, 243, 0.45) !important; }
html.apollo-login .box-footer a:hover { color: var(--apollo-verde) !important; }

/* ============================================================================
   SPLIT-SCREEN (>= 1101px) — painel de marca a esquerda, credenciais a direita.
   Mesma geometria do login do ApolloAuth: respiro de 16px, painel de 50vw-24px,
   raio 16, borda emerald 16%, lockup no topo e legenda no rodape do painel.
   ============================================================================ */
@media (min-width: 1101px) {
  /* luz ambiente: o proprio wallpaper desfocado atras do painel (ambilight) */
  html.apollo-login body::after {
    content: "";
    position: fixed;
    left: var(--split-pad);
    top: var(--split-pad);
    width: var(--split-panel-w);
    height: calc(100vh - 2 * var(--split-pad));
    background: url("/apollo-brand/panel-bg.webp") center / cover no-repeat;
    filter: blur(64px) saturate(1.3) brightness(1.35);
    z-index: 0;
    pointer-events: none;
  }

  /* painel: wallpaper nitido + lockup + scrim + legenda */
  html.apollo-login body::before {
    content: "ApolloKey — suas senhas em um cofre que só você abre.";
    position: fixed;
    left: var(--split-pad);
    top: var(--split-pad);
    width: var(--split-panel-w);
    height: calc(100vh - 2 * var(--split-pad));
    box-sizing: border-box;
    padding: 0 0 36px 40px;
    display: flex;
    align-items: flex-end;
    border-radius: 16px;
    border: 1px solid rgba(47, 230, 140, 0.16);
    background:
      url("/apollo-brand/apollokey-lockup.png") no-repeat 28px 28px / 210px auto,
      linear-gradient(to top, rgba(4, 15, 9, 0.78) 0%, rgba(4, 15, 9, 0) 38%),
      url("/apollo-brand/panel-bg.webp") center / cover no-repeat;
    box-shadow: 0 0 48px rgba(47, 230, 140, 0.1);
    color: rgba(239, 248, 243, 0.92);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    z-index: 1;
    pointer-events: none;
  }

  /* credenciais na metade direita, acima da luz ambiente */
  html.apollo-login #app, html.apollo-login #root {
    position: relative;
    z-index: 2;
    padding-left: calc(50vw + 8px);
    justify-content: center;
  }
  /* no split o card fica "solto": sem moldura, o painel ja e a moldura.
     A largura vem do bundle (340/540px conforme media query) — fixamos aqui
     para o form nao encolher junto com a coluna. */
  html.apollo-login #root .MuiPaper-root,
  html.apollo-login div:has(> form):not(.MuiCardContent-root) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 380px !important;
  }
  /* o lockup vive no painel — no card viraria repeticao */
  html.apollo-login div:has(> form) > img { display: none !important; }
}