/*
 * A casca: barra lateral, topo e o que toda pagina autenticada compartilha.
 *
 * Nao redefine token nenhum. Tudo aqui sai de `estilos.css`, que ja carrega a marca copiada do
 * painel Electron — um roxo aproximado aqui faria as duas telas do mesmo produto parecerem
 * dois produtos.
 *
 * ## Quem responde o que
 *
 *   a barra   — "onde estou?"        marca do produto, lugares, os servidores, a conta
 *   o topo    — "em que contexto?"   o nome da vista e o estado global, numa linha fina
 *   o corpo   — "o que faco?"        tudo que age mora aqui
 *
 * Ate 04/09/2026 o topo repetia "Gold-Isle" a doze pixels da mesma marca na barra. A marca fica
 * na barra; o topo carrega o contexto.
 *
 * ## O celular mora AQUI
 *
 * As regras abaixo de 860px viviam em `gerentes.css`, que o dashboard so carregava por isso, e
 * quem editava a casca nao achava o breakpoint dela. Agora a folha que desenha a barra e a mesma
 * que a deita. O estado (pulso, faixas, esqueleto) vive em `pulso.css`, logo depois desta.
 */

/* ------------------------------------------------------------------------------ estrutura */

.app {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
}

.barra {
  background: linear-gradient(180deg, var(--elevado), var(--preto) 70%);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
}

/* ---------------------------------------------------------------------------------- marca */

.marca-bloco {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 0;
  text-decoration: none;
  color: inherit;
}

.marca-tile {
  width: 38px;
  height: 38px;
  border-radius: var(--raio-m);
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--roxo-claro), var(--roxo));
  box-shadow: var(--relevo), 0 8px 18px -10px rgba(124, 58, 237, 0.8);
  flex: none;
}

.marca-tile svg { width: 18px; height: 18px; }

/* O icone da comunidade de quem VENDE entra como `<img>` por cima do losango. O degrade some:
   por tras de uma imagem opaca ele so acrescentaria uma borda onde o icone nao for quadrado. */
img.marca-tile {
  background: var(--elevado);
  object-fit: cover;
  display: block;
  box-shadow: var(--relevo), 0 0 0 1px var(--borda);
}

.marca-sub {
  color: var(--texto-tenue);
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------------------------ nav */

.grupo-rotulo {
  font-family: var(--maquina);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 0 10px;
  margin: 0 0 6px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--raio-p);
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  background: none;
  box-shadow: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada);
}

.nav-item:hover { background: rgba(168, 85, 247, 0.08); color: var(--texto); border-color: transparent; }

/*
 * O item ativo ganha uma BARRA, e nao so um fundo: com doze servidores na barra, achar o que
 * esta aberto exigia comparar peso de fonte item a item. A barra e `inset box-shadow` para nao
 * mexer no box model — borda de verdade empurraria o conteudo e faria a lista dancar.
 */
.nav-item[aria-current='page'] {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.08));
  border-color: color-mix(in srgb, var(--roxo) 35%, transparent);
  box-shadow: inset 2px 0 0 var(--roxo-claro);
  color: var(--texto);
  font-weight: 600;
}

.nav-item svg { width: 15px; height: 15px; flex: none; opacity: 0.85; }

.nav-item .rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O icone da comunidade em miniatura, ao lado do nome de cada servidor da barra. */
.nav-item .mini-tile {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(124, 58, 237, 0.18);
  color: var(--roxo-claro);
}

.nav-item .mini-tile svg { width: 11px; height: 11px; opacity: 1; }

.rodape-barra {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 6px;
  border-top: 1px solid var(--linha);
  min-width: 0;
}

.usuario > span:last-child { min-width: 0; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4c1d95, var(--roxo));
  display: grid;
  place-items: center;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 0.76rem;
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--elevado), 0 0 0 3px var(--borda);
}

.usuario-nome {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-abaixo {
  color: var(--texto-fraco);
  font-size: 0.68rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ---------------------------------------------------------------------------- comunidade */

/*
 * O icone da guild do dono: a cara do SERVIDOR dele dentro do produto.
 *
 * Quadrado arredondado, nunca circulo — circulo e o avatar de gente. Um anel fino de borda para
 * um icone escuro nao se fundir com o cartao. Quem decide entre a imagem e o simbolo generico e
 * `iconeDaComunidade.js`; aqui so a forma.
 */
.tile-comunidade {
  display: block;
  object-fit: cover;
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--borda), var(--relevo);
  flex: none;
}

/* ---------------------------------------------------------------------------------- topo */

.topo-app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 30px;
  height: 56px;
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--preto) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 5;
}

/* A marca do topo so existe no celular, onde a barra deitada perde o texto. */
.topo-app > .marca { display: none; }

/* O nome da vista: quem esta em "Billing" le "Billing" sem procurar. */
.topo-vista {
  font-family: var(--titulo);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.topo-app .espaco { flex: 1; }

.conteudo {
  padding: 28px 30px 40px;
  max-width: 1240px;
}

.cabeca-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.pagina-titulo {
  font-family: var(--titulo);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  text-wrap: balance;
}

.pagina-sub { color: var(--texto-fraco); margin: 0 0 22px; font-size: 0.93rem; max-width: 60ch; }
.cabeca-pagina .pagina-sub { margin-bottom: 0; }

/* --------------------------------------------------------------------------------- pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--vidro);
  font-size: 0.78rem;
  color: var(--texto-fraco);
  box-shadow: var(--relevo);
  white-space: nowrap;
}

.pill.boa { color: var(--ok); border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.07); }
.pill.alerta { color: var(--atencao); border-color: rgba(251, 191, 36, 0.32); background: rgba(251, 191, 36, 0.08); }

.pill .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.boa .ponto { animation: pulso-vivo 2.4s ease-in-out infinite; }

/* Um link com cara de botao: `<a>`, e nao `<button>`, porque a acao e NAVEGAR. */
.botao-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--elevado);
  color: var(--texto);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  box-shadow: var(--relevo);
  transition: border-color var(--t-rapido) var(--entrada), background var(--t-rapido) var(--entrada);
}

.botao-link:hover { border-color: var(--roxo); background: var(--vidro-alto); }

.secao-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.secao-titulo {
  font-family: var(--titulo);
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}

.secao-cabeca .contagem { color: var(--texto-tenue); }

/* ------------------------------------------------------------------------------- celular */

@media (max-width: 860px) {
  /*
   * `minmax(0, 1fr)`, e nao `1fr`.
   *
   * Um item de grid tem `min-width: auto` — o minimo dele e o CONTEUDO. A barra deitada tem oito
   * lugares numa fila, entao ela media 654px numa tela de 390 e esticava a coluna junto: a pagina
   * inteira passava a rolar de lado, e o conteudo ficava cortado a direita em TODAS as telas
   * autenticadas. O `overflow-x: auto` que ela ja tinha nunca chegava a valer, porque nada
   * obrigava a coluna a ser menor que ele.
   *
   * Medido em 390px: documento 654 antes, 390 depois.
   */
  .app { grid-template-columns: minmax(0, 1fr); }
  .barra { min-width: 0; }

  /*
   * A barra deita e vira UMA faixa de 56px: marca, lugares, e a conta presa a direita.
   *
   * Esconder deixaria o celular sem navegacao nenhuma. O rodape (Admin, Sign out) NAO some: e
   * ele que carrega a saida da conta, e sem menu nem gaveta ela deixava de existir abaixo de
   * 860px. Deitado e preso a direita com `sticky`, ele fica ao alcance em qualquer ponto da
   * rolagem — medido em 390px, onde antes o `margin-left: auto` o empurrava quatro telas para
   * fora.
   */
  .barra {
    position: static;
    height: 56px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--linha);
    background: var(--elevado);
    scrollbar-width: none;
  }

  .barra::-webkit-scrollbar { display: none; }

  .barra > div { display: flex; align-items: center; }

  .barra .grupo-rotulo,
  .barra .usuario { display: none; }

  /* Os servidores estao nos cartoes da propria pagina; na faixa eles so tiravam espaco. */
  .barra #barra-grupo-servidores { display: none; }

  .marca-bloco { padding: 0; gap: 0; }
  .marca-tile { width: 34px; height: 34px; }
  /* So o simbolo: o texto ja esta no topo, logo abaixo. */
  .barra .marca-bloco > span:not(.marca-tile) { display: none; }

  .barra .nav { flex-direction: row; gap: 2px; }
  .nav-item { width: auto; white-space: nowrap; min-height: 38px; padding: 0 10px; }
  /* Deitada, a barra do ativo vira sublinhado: a lateral esquerda nao existe numa fila. */
  .nav-item[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--roxo-claro); }

  /* Admin e Sign out so com o icone. O texto continua para o leitor de tela. */
  .barra .rodape-barra .rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* NAO dar `padding-right` a barra para abrir folga: o Chrome encolhe o retangulo do sticky
     pelo padding, e o rodape passa a flutuar no meio da faixa. */
  .barra .rodape-barra {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    position: sticky;
    right: 0;
    padding-left: 8px;
    background: var(--elevado);
    box-shadow: -14px 0 14px -8px var(--elevado);
  }

  /* O topo vira a segunda linha do mesmo cabecalho: marca em texto, contexto e o estado. */
  .topo-app { height: 44px; padding: 0 16px; gap: 10px; }
  .topo-app > .marca { display: block; font-size: 1.05rem; }
  .topo-vista { font-size: 0.78rem; color: var(--texto-fraco); }
  .pill { font-size: 0.72rem; padding: 4px 10px; }

  .conteudo { padding: 18px 16px 40px; }
  .pagina-titulo { font-size: 1.5rem; }
}