/* ============================================================
   CHROME DA PLATAFORMA — cabeçalho, menu do usuário e rodapé
   ============================================================
   Carregado por TODAS as telas: as do hub (junto do app.css) e as
   ferramentas (sozinho, sem o app.css).

   Duas regras que fazem este arquivo funcionar nos dois casos:

   1. Nenhum seletor de elemento nu. Tudo é `.vh-*`. O app.css pode
      estilizar `header`/`footer`/`body` porque só ele governa as telas do
      hub; aqui não, porque cada ferramenta traz o próprio CSS e os
      próprios nomes.

   2. Nenhum token que uma ferramenta possa redefinir. `--accent` vale
      #6c63ff no QR Code e #ff9900 no LED — usar esse nome pintaria o
      cabeçalho de laranja. Os valores saem de `--vision-*` e `--bg-*`,
      que vêm do vision.css e nenhuma ferramenta toca.
   ============================================================ */

/* ── Cabeçalho ───────────────────────────────── */
.vh-header {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.vh-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-1);
  text-decoration: none;
  flex: none;
}
.vh-brand .vh-mark { width: 34px; height: 34px; color: var(--vision-purple); }
.vh-brand .vh-mark svg { width: 100%; height: 100%; fill: currentColor; }
.vh-brand .vh-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.vh-brand .vh-wordmark b { font-weight: 700; }

/* Nome da ferramenta aberta, ao lado da marca. Sem isto, sair do hub para
   uma ferramenta não muda nada no topo da tela. */
.vh-tool-name {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vh-tool-name::before {
  content: "";
  width: 1px;
  height: 22px;
  flex: none;
  background: var(--border-1);
}

.vh-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.vh-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}
/* Os atalhos (Clientes, Equipe) ficam agrupados, e o menu do usuário
   separado deles — ele não é navegação, é a conta. */
.vh-header-actions .vh-user-menu { margin-left: var(--space-3); }

/* ── Tema, para quem não tem menu (tela de login) ── */
.vh-theme-toggle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.vh-theme-toggle:hover { color: var(--vision-purple); border-color: var(--vision-purple); }
.vh-theme-toggle svg { width: 18px; height: 18px; }
.vh-theme-toggle .vh-to-light { display: none; }
[data-theme="dark"] .vh-theme-toggle .vh-to-light { display: block; }
[data-theme="dark"] .vh-theme-toggle .vh-to-dark { display: none; }

/* ── Atalho no cabeçalho (Equipe) ────────────── */
.vh-header-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2); text-decoration: none;
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.vh-header-link:hover { color: var(--vision-purple); border-color: var(--vision-purple); }
.vh-header-link svg { width: 15px; height: 15px; }

/* ── Avatar ──────────────────────────────────── */
.vh-avatar {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--surface-overlay);
  border: 1px solid var(--border-1);
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--vision-purple);
}
/* Os tamanhos moram juntos: espalhá-los entre chrome.css e app.css daria
   dois lugares para conferir quando um deles precisar mudar. */
.vh-avatar.is-pill { width: 24px; height: 24px; font-size: 0.62rem; }
.vh-avatar.is-md { width: 48px; height: 48px; font-size: 1rem; }
.vh-avatar.is-lg { width: 96px; height: 96px; font-size: 1.9rem; }

/* ── Menu do usuário ─────────────────────────── */
.vh-user-menu { position: relative; }

.vh-user-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  /* A foto é o último elemento antes do chevron, então a folga maior fica
     à esquerda, do lado do texto. */
  padding: 5px 8px 5px 14px;
  background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  color: inherit; cursor: pointer;
  font-family: var(--font-sans); font-size: 1rem;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.vh-user-trigger:hover { background: var(--surface-overlay); border-color: var(--border-1); }
.vh-user-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.vh-user-chip {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; text-align: right;
}
.vh-user-chip .vh-name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.vh-user-chip .vh-role {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vision-purple);
}

.vh-user-trigger .vh-chevron {
  width: 13px; height: 13px; color: var(--fg-3);
  transition: transform var(--dur-2);
}
.vh-user-trigger[aria-expanded="true"] .vh-chevron { transform: rotate(180deg); }

.vh-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 212px;
  display: flex; flex-direction: column;
  padding: var(--space-2);
  background: var(--bg-1);
  border: 1px solid var(--border-1); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
.vh-dropdown[hidden] { display: none; }
.vh-dropdown form { display: flex; margin: 0; }

.vh-dropdown-item {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--fg-2); font-family: var(--font-sans); font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--dur-1), color var(--dur-1);
}
.vh-dropdown-item:hover { background: var(--surface-overlay); color: var(--fg-1); }
.vh-dropdown-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vh-dropdown-item svg { width: 16px; height: 16px; flex: none; }

/* Sair fica separado: é a ação de saída, não mais um item de menu. */
.vh-dropdown-item.is-danger {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.vh-dropdown-item.is-danger:hover { color: var(--vision-danger); }

/* `.vh-to-light` / `.vh-to-dark` nomeiam o DESTINO do clique, não o tema
   atual: no escuro o item diz "Tema claro". Nomear o estado faria o item
   parecer um indicador, e ninguém saberia o que o clique faz. */
.vh-dropdown-item .vh-to-light { display: none; }
[data-theme="dark"] .vh-dropdown-item .vh-to-dark { display: none; }
[data-theme="dark"] .vh-dropdown-item svg.vh-to-light { display: block; }
[data-theme="dark"] .vh-dropdown-item span.vh-to-light { display: inline; }

/* ── Rodapé ──────────────────────────────────── */
.vh-footer {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
  border-top: 1px solid var(--border-1);
  background: var(--bg-0);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--fg-4);
  text-align: center;
}

@media (max-width: 860px) {
  /* O nome da ferramenta sai antes do menu: o menu é navegação, o nome é
     só rótulo — e o título da aba já diz onde a pessoa está. */
  .vh-tool-name { display: none; }
}

@media (max-width: 560px) {
  .vh-header { padding: var(--space-4) var(--space-5); }
  /* Só o avatar: nome e cargo não cabem ao lado da marca. */
  .vh-user-chip, .vh-user-trigger .vh-chevron { display: none; }
  .vh-user-trigger { padding: 4px; }
  /* O atalho de Equipe vira só o ícone. */
  .vh-header-link { padding: 8px; font-size: 0; gap: 0; }
  .vh-header-link svg { width: 17px; height: 17px; }
}