/*
  O "olhinho": esconde o que identifica o vendedor, para ele gravar o painel e
  divulgar sem entregar de quais lojas, produtos e anúncios se trata.
  Ligado pelo botão ao lado do sol, no cartão de perfil do menu.

  POR QUE ISTO É CSS, E NÃO JAVASCRIPT TROCANDO TEXTO
  O painel redesenha a tela inteira a cada troca de aba, filtro ou busca
  (`view.innerHTML = ...`). Um script que trocasse os textos por pontinhos
  seria desfeito no primeiro clique em "Filtrar" — e o dado reapareceria no
  meio da gravação, que é exatamente a hora em que ninguém está olhando para
  isso. Regra de CSS não tem esse problema: vale para o que existe agora e
  para o que for desenhado depois, sem ninguém precisar lembrar de reaplicar.

  POR QUE PONTINHOS, E NÃO DESFOQUE
  Desfoque em imagem publicada pode ser desfeito — existem ferramentas prontas
  para isso, e o destino aqui é a internet. `font-size:0` some com o texto de
  verdade; o que aparece na foto é só o `::before`.

  COMO MARCAR MAIS UM DADO
  Ponha `data-sigiloso` no elemento, ou acrescente o seletor à LISTA — as duas
  listas abaixo (a do elemento e a do `::before`) têm de ser iguais, e há um
  teste que reprova se saírem de sincronia.
*/

/* ══ LISTA ══════════════════════════════════════════════════════
   `:where()` não soma especificidade, então uma regra da tela sempre pode
   falar mais alto — nenhum layout quebra por causa desta folha.

   `:not(input):not(textarea)` porque campo de formulário é tratado logo
   abaixo, de outro jeito: `font-size:0` num campo deixaria quem digita sem
   enxergar o que escreve, e `::before` nem aparece dentro de um <input>. */
html.privado :where(
  [data-sigiloso],
  /* Cartão de perfil do menu: quem está logado e a empresa. */
  #perfil-nome, #perfil-empresa,
  /* Dashboard, "Top 10 produtos — Curva A": nome e SKU de cada cartão. */
  .pn-prod-nome, .pn-prod-sku,
  /* Produtos Cadastrados e Curva ABC (a tabela da curva reusa estas classes):
     nome, SKU e em que conta o produto está anunciado. */
  .pr-nome, .pr-sku, .pr-conta-anuncios,
  /* Anúncios: título e o código MLB (o código leva direto ao anúncio). */
  .an-title, .an-mlb, .ml-rep-mlb,
  /* Análise de Pedidos: produto, conta, canal e o SKU da etiqueta. */
  .pd-nome, .pd-conta, .pd-canal-nome, .pd-tag.sku,
  /* Precificação em massa e Promoções: título e SKU do item. */
  .prec-title, .prec-sku-chip, .ml-promo-item-title, .ml-imp-title,
  /* Publicidade: item anunciado e nome da campanha (campanha costuma levar o
     nome do produto dentro). */
  .dec-item-title, .dec-camp-name,
  /* Perguntas: a conta e o anúncio de que a pergunta fala. O TEXTO da
     pergunta fica à vista de propósito — é o que o vendedor quer mostrar
     quando divulga a resposta automática. */
  .perg-account-title, .perg-item-link,
  /* Automações > Promoções, em TODAS as abas (Sugestões, Por que não entrou,
     Regras por SKU, Sem promoção, Auditoria): SKU e título do anúncio.
     Estas duas classes foram acrescentadas ao dashboard só para isto — as
     células não tinham nome nenhum, e mirar por posição de coluna ("a
     terceira <td>") deixaria o dado à mostra em silêncio no dia em que
     alguém movesse uma coluna. */
  .gp-sku, .gp-titulo,
  /* Usuários da empresa: nome e e-mail de gente de verdade. */
  .us-nome, .us-email,
  /* Balão que segue o mouse nos gráficos. Só aparece ao passar por cima —
     numa GRAVAÇÃO isso acontece, e o balão traz o nome da fatia. */
  .tt
):not(input):not(textarea):not(img) {
  font-size: 0 !important;
  /* `letter-spacing` herdado esticaria os pontinhos e viraria uma barra
     preta, que se lê como falha de desenho e não como dado escondido. */
  letter-spacing: normal !important;
  user-select: none;
}

html.privado :where(
  [data-sigiloso],
  #perfil-nome, #perfil-empresa,
  .pn-prod-nome, .pn-prod-sku,
  .pr-nome, .pr-sku, .pr-conta-anuncios,
  .an-title, .an-mlb, .ml-rep-mlb,
  .pd-nome, .pd-conta, .pd-canal-nome, .pd-tag.sku,
  .prec-title, .prec-sku-chip, .ml-promo-item-title, .ml-imp-title,
  .dec-item-title, .dec-camp-name,
  .perg-account-title, .perg-item-link,
  .gp-sku, .gp-titulo,
  .us-nome, .us-email,
  .tt
):not(input):not(textarea):not(img)::before {
  /* Largura fixa: máscara do tamanho do texto entregaria o tamanho do nome
     da loja ou do produto, e nome curto ou longo já é uma pista. */
  content: "••••••••";
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--muted, #667085);
}

/* ══ AVATAR DO MENU ═════════════════════════════════════════════
   No painel do dono a foto do perfil é a LOGO DA LOJA — identifica tanto
   quanto o nome escrito ao lado, e esconder só o nome não esconderia nada.
   As iniciais idem ("LB").

   Fica fora das listas de cima de propósito: dentro de um círculo de 46px os
   pontinhos virariam uma mancha. O círculo só fica neutro. */
html.privado #perfil-iniciais { font-size: 0 !important; }
html.privado #perfil-img { filter: brightness(0) saturate(0) opacity(.12) !important; }

/* ══ CAMPO DE FORMULÁRIO ════════════════════════════════════════
   `-webkit-text-security` mostra bolinhas SEM tocar no valor — é o mesmo
   mecanismo do campo de senha. Trocar o `value` seria muito pior: salvar com
   o olhinho fechado gravaria "••••••••" como apelido ou CNPJ da conta. */
html.privado input[data-sigiloso],
html.privado textarea[data-sigiloso] {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Navegador sem suporte não pode simplesmente mostrar o dado: aí o campo fica
   com o texto invisível, que na foto dá no mesmo. */
@supports not (-webkit-text-security: disc) {
  html.privado input[data-sigiloso],
  html.privado textarea[data-sigiloso] {
    color: transparent !important;
    text-shadow: none !important;
  }
}

/* ══ FOTO DO PRODUTO ════════════════════════════════════════════
   A imagem identifica o produto tão bem quanto o nome — esconder o título e
   deixar a foto ao lado não esconderia nada. Vira um retângulo neutro, e não
   `display:none`, para a tabela não pular de largura ao ligar e desligar. */
html.privado :where(
  .pn-prod-foto img, .pr-foto img, .pd-thumb img, .prec-thumb, .ml-imp-thumb,
  .ml-rep-thumb-wrap img, .dec-item-thumb img, img[data-sigiloso]
) {
  filter: brightness(0) saturate(0) opacity(.12) !important;
}