/* © 2026 Jose Carvalho. Nova Ceasa - ERP interno. Obra protegida (Lei 9.610/98 e
   9.609/98). Sem licenca de uso, copia ou obra derivada: ver LICENSE. NCE-PERFIL */
/* ============================================================
   Perfil do usuario: rodape da barra lateral (NavUser do Sidebar do
   shadcn) e o dialogo "Minha conta" (assets/erp/perfil.js).
   Regua: docs/SISTEMA-DESIGN.md, secoes 2 a 7.

   TOKENS COM RESERVA. Os nomes do shadcn (--primary, --popover,
   --border, --ring, --radius-*, --dur-*, --curva) vem de
   assets/sistema.css, que outra equipe esta criando em paralelo.
   Enquanto ele nao chega, cada var() leva uma reserva, e a reserva
   aponta para o token do PROJETO que ja existe (--sup-1, --line,
   --green-500...), nao para um hex fixo: esses tokens ja trocam de
   valor no tema escuro, e um hex fixo deixaria o menu branco no
   escuro ate a integracao.

   --muted e --muted-foreground: no shadcn --muted e um FUNDO; neste
   projeto --muted sempre foi a cor do texto de apoio. Por isso o
   texto de apoio aqui usa --muted-foreground, com --muted de reserva.

   A barra lateral e escura nos dois temas (--forest), entao o botao
   do rodape usa as mesmas cores claras fixas que o resto da barra
   (erp.css: #fff, #a9c8b3), e nao os tokens de texto da pagina.

   Esta folha entra DEPOIS de erp.css (index.html) para vencer as
   regras antigas do bloco .erp-usuario sem !important.
   ============================================================ */

/* ---------- avatar: 32px, circulo, foto ou iniciais sobre a cor escolhida ---------- */
.erp-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--av-fundo, #c9e96b);
  color: var(--av-texto, #0a3626);
  font-family: var(--body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1;
  user-select: none;
}
.erp-avatar img,
.hdr .user .avatar.erp-avatar-pintado img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Fio de 1px por cima (e nao borda): a amostra "floresta" e da mesma cor da barra lateral e o
   circulo sumiria no fundo. ::after porque a foto cobriria uma sombra interna do proprio span. */
.erp-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--av-anel, rgba(10, 54, 38, 0.14));
  pointer-events: none;
}
.erp-menu .erp-avatar {
  --av-anel: rgba(255, 255, 255, 0.22);
}
/* 48 e o "grande" da escala de espaco (secao 4): a previa do dialogo precisa ler a foto */
.erp-avatar-g {
  width: 48px;
  height: 48px;
  font-size: var(--fs-15);
}
/* avatar do cabecalho do mapa (index.html .hdr .user): troca o degrade antigo pela cor escolhida */
.hdr .user .avatar.erp-avatar-pintado {
  background: var(--av-fundo);
  color: var(--av-texto);
  overflow: hidden;
}

/* ---------- rodape da barra: o bloco e o botao ---------- */
.erp-menu .erp-perfil {
  position: relative; /* ancora do menu suspenso */
  display: block;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.erp-perfil-botao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px; /* o "lg" do SidebarMenuButton, que e o que o NavUser usa */
  padding: 8px;
  border: 0;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  color: #fff;
  font-family: var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-rapida, 150ms) var(--curva, cubic-bezier(0.4, 0, 0.2, 1));
}
.erp-perfil-botao:hover {
  background: rgba(255, 255, 255, 0.08);
}
.erp-perfil-botao[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}
.erp-perfil-botao:active {
  transform: translateY(1px);
}
/* anel de 3px do --ring, que nunca anima (secao 5). Sobre o --forest da barra o verde da
   reserva (#2e9e63) da 3,94:1, acima dos 3:1 que contorno de controle pede. */
.erp-perfil-botao:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring, var(--green-500));
}
.erp-perfil-botao .erp-usuario-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
/* 14/500 e 12/400: os tamanhos do NavUser (text-sm font-medium e text-xs) e da secao 3 */
.erp-perfil-botao .erp-usuario-txt b {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-perfil-botao .erp-usuario-txt small {
  font-size: var(--fs-12);
  color: #a9c8b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-perfil-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: #a9c8b3;
}

/* ---------- menu suspenso ---------- */
/* Aberta, a barra tem 256px e o menu sobe por cima do rodape, na largura da barra. Recolhida (bloco
   abaixo), ele sai para a direita. */
.erp-perfil-pop {
  --pf-x: 0px;
  --pf-y: 4px;
  position: absolute;
  z-index: 20;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 4px);
  min-width: 224px;
  max-height: calc(100dvh - 96px); /* celular deitado: o menu rola em vez de sair da tela */
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border, var(--line));
  border-radius: var(--radius-xl, 12px);
  background: var(--popover, var(--sup-1));
  color: var(--popover-foreground, var(--ink));
  box-shadow: var(--shadow); /* discreta, e ja escurece sozinha no tema escuro (styles.css) */
  text-align: left;
  transform-origin: bottom center;
  animation: erp-perfil-entra var(--dur-media, 200ms) var(--curva, cubic-bezier(0.4, 0, 0.2, 1));
}
@keyframes erp-perfil-entra {
  from {
    opacity: 0;
    transform: translate(var(--pf-x), var(--pf-y)) scale(0.98);
  }
}
.erp-perfil-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.erp-perfil-cabeca-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.erp-perfil-pop .erp-perfil-cabeca-txt b {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--popover-foreground, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-perfil-pop .erp-perfil-cabeca-txt small {
  font-size: var(--fs-12);
  color: var(--muted-foreground, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-perfil-separador {
  height: 1px;
  margin: 4px -4px;
  background: var(--border, var(--line));
}
.erp-perfil-grupo-titulo {
  display: block;
  padding: 6px 8px 2px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--muted-foreground, var(--muted));
}
.erp-perfil-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px; /* altura padrao de controle (secao 4); 44 no toque, abaixo */
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-lg, 8px);
  background: transparent;
  color: inherit;
  font-family: var(--body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-rapida, 150ms) var(--curva, cubic-bezier(0.4, 0, 0.2, 1));
}
.erp-perfil-item:hover {
  background: var(--accent, var(--sup-2));
}
/* Foco por teclado: fundo do hover + anel de 3px do --ring. position/z-index para o anel passar
   por cima do item vizinho em vez de ficar escondido embaixo dele. O verde da reserva da 3,39:1
   sobre o branco do menu, acima dos 3:1 de contorno. */
.erp-perfil-item:focus-visible {
  position: relative;
  z-index: 1;
  outline: none;
  background: var(--accent, var(--sup-2));
  box-shadow: 0 0 0 3px var(--ring, var(--green-500));
}
.erp-perfil-item:active {
  transform: translateY(1px);
}
.erp-perfil-rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erp-perfil-indicador {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted-foreground, var(--muted));
}
.erp-perfil-indicador svg {
  width: 16px;
  height: 16px;
}
/* Marcado nao se diz so pela cor (WCAG 1.4.1): o radio ganha um ponto e o checkbox um visto.
   Desmarcado, a coluna fica vazia, mas continua ocupando os 16px para o texto nao pular. */
.erp-perfil-item[role="menuitemradio"] .erp-perfil-indicador::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  visibility: hidden;
}
.erp-perfil-item[role="menuitemcheckbox"] .erp-perfil-indicador svg {
  visibility: hidden;
}
.erp-perfil-item[aria-checked="true"] .erp-perfil-indicador {
  color: var(--primary, var(--green-700));
}
.erp-perfil-item[role="menuitemradio"][aria-checked="true"] .erp-perfil-indicador::before,
.erp-perfil-item[role="menuitemcheckbox"][aria-checked="true"] .erp-perfil-indicador svg {
  visibility: visible;
}
.erp-perfil-atalho {
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  color: var(--muted-foreground, var(--muted));
}

/* ---------- barra recolhida: so o avatar, menu para a direita ----------
   Decidido pela largura REAL da barra (a consulta de container "menu" que erp.css ja declara), e
   nao pelo atributo body[data-menu]: recolhida, a barra ainda abre por cima quando se passa o
   mouse ou se foca nela, e nesse estado ela tem 256px e o botao inteiro cabe de novo. A
   consulta acompanha os tres estados sem repetir as regras de cada um. */
@container menu (max-width: 100px) {
  /* erp.css poe 6px de cada lado no bloco recolhido (body[data-menu] .erp-usuario, que pesa mais
     que .erp-menu .erp-perfil): sobravam 36px para um botao de 40. Com 4px sobram 40 (48 no toque). */
  .erp-menu .erp-usuario.erp-perfil {
    padding-inline: 4px;
  }
  .erp-perfil-botao {
    justify-content: center;
    width: 40px;
    min-height: 40px;
    margin-inline: auto;
    padding: 4px;
  }
  .erp-perfil-chevron {
    display: none;
  }
  .erp-perfil-pop {
    --pf-x: -4px;
    --pf-y: 0px;
    left: calc(100% + 8px);
    right: auto;
    bottom: 8px;
    width: 240px;
    transform-origin: left bottom;
  }
}
/* Com o menu aberto a barra sobe de camada: recolhida, o menu sai para a direita, por cima do
   conteudo, e o conteudo vem depois no DOM. So acima de 860px: abaixo disso a barra e a gaveta,
   que ja e fixa com z-index 60, e "position: relative" aqui a tiraria do lugar. */
@media (min-width: 861px) {
  body[data-perfil-aberto] .erp-menu {
    position: relative;
    z-index: 65;
  }
}

/* ---------- dialogo "Minha conta" ---------- */
.erp-perfil-foto {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.erp-perfil-foto-campos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erp-perfil-foto-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.erp-perfil-cores,
.erp-perfil-prefs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.erp-perfil-cores legend,
.erp-perfil-prefs legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.erp-perfil-prefs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 16px;
}
@media (min-width: 700px) {
  .erp-perfil-prefs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}
.erp-perfil-amostras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
/* O radio de verdade fica por cima da bolinha, transparente e do tamanho do alvo: e ele que
   recebe o clique, o foco e as setas do teclado. */
.erp-perfil-amostra {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.erp-perfil-amostra input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.erp-perfil-bolinha {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--av-fundo);
  color: var(--av-texto);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 1px rgba(10, 54, 38, 0.14);
  transition: box-shadow var(--dur-rapida, 150ms) var(--curva, cubic-bezier(0.4, 0, 0.2, 1));
}
/* marcada: anel de 2px na cor do texto, com uma folga da cor do fundo (forma, nao so cor) */
.erp-perfil-amostra input:checked + .erp-perfil-bolinha {
  box-shadow:
    0 0 0 2px var(--popover, var(--sup-1)),
    0 0 0 4px var(--foreground, var(--ink));
}
.erp-perfil-amostra input:focus-visible + .erp-perfil-bolinha {
  box-shadow:
    0 0 0 2px var(--popover, var(--sup-1)),
    0 0 0 5px var(--ring, var(--green-500));
}
.erp-perfil-amostra input:checked:focus-visible + .erp-perfil-bolinha {
  box-shadow:
    0 0 0 2px var(--popover, var(--sup-1)),
    0 0 0 4px var(--foreground, var(--ink)),
    0 0 0 7px var(--ring, var(--green-500));
}

/* ---------- toque: alvo de 44px (piso deste projeto, secao 4) ---------- */
@media (pointer: coarse) {
  .erp-perfil-item {
    min-height: 44px;
  }
  .erp-perfil-botao {
    min-width: 44px;
    min-height: 48px;
  }
  .erp-perfil-amostra {
    width: 44px;
    height: 44px;
  }
  /* A caixa de marcar do kit tem 24px de altura (erp.css). O alvo de toque de 44px vem do rotulo,
     que marca e desmarca junto (label for=): ele ocupa o resto da linha com 44px de altura. */
  .erp-perfil-prefs .erp-campo-check label {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-height: 44px;
  }
}
@container menu (max-width: 100px) {
  @media (pointer: coarse) {
    .erp-perfil-botao {
      width: 44px;
      min-height: 44px;
    }
  }
}

/* ---------- menos movimento: duracao zero (secao 5) ---------- */
@media (prefers-reduced-motion: reduce) {
  .erp-perfil-pop {
    animation: none;
  }
  .erp-perfil-botao,
  .erp-perfil-item,
  .erp-perfil-bolinha {
    transition: none;
  }
  .erp-perfil-botao:active,
  .erp-perfil-item:active {
    transform: none;
  }
}