/* ============ SoftOne — o painel ============
 * Servido em runtime pelo Express em /css/painel.css — NAO passa pelo Vite, entao mexer
 * aqui nao exige rebuild.
 *
 * O app.css tem os componentes genericos (botao, campo, cartao, modal, tabela). Aqui esta
 * o que monta a FERRAMENTA: a casca (lateral + trilha + corpo) e o editor de texto rico.
 * Vem do /admin do softone-institucional, que o DESIGN-PAINEL.md declara como molde dos
 * SaaS da casa — copiado, nao reinventado.
 *
 * Os dois SPAs usam este arquivo: o do cliente e o do back-office. O prefixo continua
 * .adm-* para o codigo ser reconhecivel de um projeto para o outro.
 */

/* ---------------------------------------------------------------- Editor de texto rico */
.ed-barra{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border:1px solid var(--line-strong);border-bottom:none;border-radius:var(--rad-sm) var(--rad-sm) 0 0;background:var(--bg2)}
.ed-btn{
  min-width:30px;height:28px;padding:0 8px;border:1px solid transparent;border-radius:6px;
  background:none;color:var(--dim);font:inherit;font-size:0.8125rem;cursor:pointer;
}
.ed-btn:hover{background:var(--panel);border-color:var(--line);color:var(--txt)}
/* Campo de link do editor — nasce entre a barra e a área de texto, encostado nos dois,
   para ler como parte da mesma peça. Substituiu o window.prompt. */
.ed-link{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:8px;border:1px solid var(--line-strong);border-bottom:none;background:var(--panel2);
}
.ed-link input{
  flex:1;min-width:190px;padding:8px 10px;font:inherit;font-size:0.875rem;
  border:1px solid var(--line-strong);border-radius:var(--rad-sm);background:var(--bg);color:var(--txt);
}
.ed-link input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 16%,transparent)}
.ed-area{
  border:1px solid var(--line-strong);border-radius:0 0 var(--rad-sm) var(--rad-sm);
  padding:14px;background:var(--bg);overflow-y:auto;line-height:1.7;
}
.ed-area:focus{outline:none;border-color:var(--marca)}
.ed-area h2{font-size:1.3rem;margin:.7em 0 .35em}
.ed-area h3{font-size:1.1rem;margin:.7em 0 .35em}
.ed-area ul,.ed-area ol{padding-left:1.3em;margin:.5em 0}
.ed-area blockquote{border-left:3px solid var(--marca);padding-left:14px;color:var(--dim);margin:.6em 0}
.ed-area:empty::before{content:'Escreva aqui…';color:var(--faint)}

/* ---------------------------------------------------------------- Casca do painel */
.adm{display:flex;min-height:100dvh;background:var(--bg2)}
.adm-side{
  width:230px;flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
}
.adm-side-topo{padding:20px 18px 14px;border-bottom:1px solid var(--line)}
/* A marca (logo + nome da conta) e a trilha saem do JSX com CLASSE, nao com style inline:
   tamanho de letra literal espalhado por componente e o jeito de uma escala virar seis. */
.adm-marca-sub{
  font-size:0.65625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:6px;
}
.adm-trilha{display:flex;align-items:center;gap:6px;min-width:0;font-size:0.84375rem}
.adm-trilha strong{font-size:0.9375rem;font-weight:600}
/* O canto direito da barra: quem esta logado, o botao de posicao do menu e — no menu de topo —
   trocar de empresa e sair. */
.adm-barra-fim{display:flex;align-items:center;gap:8px;flex:none}
/* Nome da empresa com o CNPJ embaixo: quem opera matriz e filial com a MESMA razao social so
   distingue as duas pelo numero, e e ai que o lancamento vai para a empresa errada. */
.adm-usuario{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;
  font-size:0.84375rem;white-space:nowrap;
}
.adm-usuario-doc{font-size:0.6875rem;color:var(--faint);font-variant-numeric:tabular-nums}
/* Um fio separa "onde estou" das ACOES. Sem ele o nome da empresa e o primeiro botao leem como
   uma coisa so, e a pessoa clica no nome achando que troca de empresa. */
.adm-emcima .adm-usuario{padding-right:10px;border-right:1px solid var(--line)}
/* ⚠️ No topo, "Trocar de empresa" fica so com o icone: o rotulo inteiro comia ~150px de uma
   barra que ja disputa largura com o menu. Quem garante o nome acessivel e o `aria-label` do
   botao — escondido por display:none, o texto sai tambem da arvore de acessibilidade. */
.adm-barra-fim .btn-rotulo{display:none}
.adm-barra-fim .btn{padding-left:9px;padding-right:9px}
.adm-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.adm-nav button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
  border:none;background:none;border-radius:var(--rad-sm);color:var(--dim);
  font:inherit;font-size:0.875rem;cursor:pointer;text-align:left;transition:background .14s;
}
/* ⚠️ `color` SAIU da transição, e não é preciosismo — foi medido no navegador.
   Este botão pinta com `color:var(--dim)`. Trocar o tema em tempo de execução muda o
   --dim, mas o valor ESPECIFICADO continua sendo a mesma string `var(--dim)`: o navegador
   não vê mudança que justifique reiniciar a transição, e a cor computada fica CONGELADA no
   tema anterior. Medido nos dois sentidos — no escuro o item do menu ficava #5c5c68 sobre
   #1c1c22, ou seja 2,57:1, reprovado no AA. Carregar a página já no tema certo esconde o
   defeito: ele só aparece para quem CLICA no botão de tema.
   Sem a transição de cor, o token é lido a cada repaint; a troca fica instantânea, o que em
   140ms ninguém percebe. Vale para qualquer `transition` sobre propriedade cujo valor venha
   de custom property que o tema redefine. */
.adm-nav button:hover{background:var(--panel2);color:var(--txt)}
/* Item ativo: fundo neutro + filete vermelho na borda, em vez de lavado de vermelho.
   A LETRA é neutra — em #e83700 a 14px/600 sobre o --panel2 dava 3,78:1, reprovado no AA
   e exatamente a armadilha 4 (vermelho pequeno sobre fundo claro lê laranja). Quem marca
   o estado é o filete + o peso + o fundo, três sinais que não dependem de enxergar cor. */
.adm-nav button.ativo{background:var(--panel2);color:var(--txt);font-weight:700;box-shadow:inset 2.5px 0 0 var(--marca)}
.adm-nav .adm-nav-sep{
  font-size:0.65625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);
  padding:14px 12px 5px;font-weight:700;
}
.adm-side-fim{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}

/* ---------------------------------------------------------------- Menu no topo
   A alternativa a lateral, escolhida pela pessoa (ui/menu.js). Duas fileiras:

     1. .adm-barra  logo · grupos · quem esta logado e as acoes
     2. .adm-itens  os itens do grupo aberto

   ⚠️ A segunda fileira e uma LINHA de verdade, nao um flutuante. Dropdown com `position:
   absolute` dentro de um contêiner que rola sai clipado — e aqui nao ha o que clipar. De
   quebra ela empurra o conteudo em vez de tapa-lo, entao nada fica escondido atras do menu.

   ⚠️ Nao ha trilha neste modo: o grupo aberto e o item ativo ja dizem onde a pessoa esta.
   Repetir em cima seria dizer duas vezes a mesma coisa e comer uma terceira fileira de altura,
   que e justamente o que este layout existe para devolver. */
.adm-emcima{flex-direction:column}
/* O padding lateral casa com o do .adm-corpo (26px): as duas fileiras e o conteudo compartilham
   a mesma margem esquerda, e a coluna fica reta de cima a baixo. */
.adm-barra{
  display:flex;align-items:center;gap:16px;min-height:62px;padding:0 26px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.adm-emcima .adm-marca{flex:none}
/* ⚠️ O nome da CONTA sai da marca neste modo. Na lateral ele cabe embaixo da logo; aqui
   competiria por largura horizontal com o menu, que e a razao de o layout existir — e o
   "Conta" do fim da fileira era o primeiro a ser cortado. Quem opera com mais de uma conta
   troca pelo botao de empresa, que continua na barra. */
.adm-emcima .adm-marca-sub{display:none}

.adm-grupos{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto}
.adm-grupos button{
  display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
  padding:8px 11px;border:none;background:none;border-radius:var(--rad-sm);
  color:var(--dim);font:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;
  transition:background .14s;
}
.adm-grupos button:hover{background:var(--panel2);color:var(--txt)}
/* O grupo da secao atual: filete embaixo + peso + fundo, os MESMOS tres sinais do item ativo
   da lateral, so que virados 90°. A letra continua neutra — vermelho em 14px/600 sobre o
   --panel2 da 3,78:1, reprovado no AA, e e a armadilha do vermelho pequeno da casa. */
.adm-grupos button.ativo{background:var(--panel2);color:var(--txt);box-shadow:inset 0 -2.5px 0 var(--marca)}
/* A seta gira quando o grupo esta aberto: e o unico jeito de saber, olhando so a primeira
   fileira, qual dos grupos abriu a de baixo. */
.adm-grupos button svg{transition:transform .16s}
.adm-grupos button[aria-expanded="true"] svg{transform:rotate(180deg)}

.adm-itens{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:8px 22px;background:var(--panel2);border-bottom:1px solid var(--line);
  position:sticky;top:62px;z-index:19;
}
.adm-itens button{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 11px;border:none;background:none;border-radius:var(--rad-sm);
  color:var(--dim);font:inherit;font-size:0.875rem;cursor:pointer;transition:background .14s;
}
.adm-itens button:hover{background:var(--panel);color:var(--txt)}
/* Item ativo aqui e fundo + peso + icone na cor da marca (o `Ico` ja troca), tres sinais que
   nao dependem de enxergar cor. Sem filete lateral: numa fileira horizontal ele viraria um
   risco solto no meio do caminho. */
.adm-itens button.ativo{background:var(--panel);color:var(--txt);font-weight:700}
.adm-emcima .adm-corpo{padding:26px}
/* No topo, "Trocar de empresa" e "Sair" entram na barra e nao podem ocupar a largura toda. */
.adm-barra-fim .btn-block{width:auto}

@media(prefers-reduced-motion:reduce){
  .adm-grupos button svg{transition:none}
}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-topo{
  height:62px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 26px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.adm-corpo{padding:26px;flex:1}
.adm-login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg2)}
.adm-login-card{width:100%;max-width:400px}
@media(max-width:820px){
  .adm{flex-direction:column}
  .adm-side{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--line)}
  .adm-nav{flex-direction:row;overflow-x:auto;padding:8px;align-items:center}
  .adm-nav button{white-space:nowrap;width:auto}
  /* Os rótulos de grupo ficavam `display:none` aqui, e os dez itens viravam uma faixa
     rolável indiferenciada — sem grupo e sem pista de que havia mais coisa à direita.
     Em linha eles continuam separando Acompanhar / Conteúdo / Site e, por aparecerem no
     meio da rolagem, são a própria evidência de que a faixa anda. */
  .adm-nav .adm-nav-sep{
    padding:0 12px 0 4px;white-space:nowrap;align-self:center;
    border-left:1px solid var(--line);margin-left:4px;
  }
  .adm-nav .adm-nav-sep:first-child{border-left:none;margin-left:0;padding-left:8px}
  .adm-corpo{padding:18px}
  /* "Ver o site" e "Sair" empilhados comiam ~110px acima do conteúdo em TODA tela — 14%
     de um celular de 812px, gasto em dois botões de uso raro. Lado a lado e compactos
     ocupam uma linha; o conteúdo sobe e a primeira dobra volta a ser do trabalho. */
  .adm-side-fim{display:flex;flex-direction:row;gap:8px;padding:8px 12px}
  .adm-side-fim>*{flex:1;margin:0!important}

  /* Menu no topo, no celular. A barra quebra em duas linhas (marca e acoes em cima, grupos
     embaixo), e as duas fileiras deixam de ser grudentas: o `top:62px` da fileira de itens
     supoe a barra com altura exata, e quebrada ela nao tem mais. Grudento com altura errada
     tapa o conteudo — pior que nao grudar. */
  .adm-emcima .adm-barra{flex-wrap:wrap;gap:10px;padding:10px 14px;position:static}
  .adm-emcima .adm-grupos{order:3;flex-basis:100%}
  /* ⚠️ As acoes PRECISAM quebrar. Em 375px a marca mais o nome da empresa mais "Trocar de
     empresa" mais "Sair" nao cabem numa linha, e sem o wrap o ultimo botao saia da tela — o
     "Sair" ficava inalcancavel no celular. Nada da barra pode depender de caber. */
  .adm-emcima .adm-barra-fim{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .adm-emcima .adm-usuario{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .adm-itens{position:static;flex-wrap:nowrap;overflow-x:auto;padding:8px 14px}
  .adm-emcima .adm-corpo{padding:18px}
}
/* O item do menu sai com 40px de altura, abaixo do alvo mínimo de 44px no dedo. */
@media(pointer:coarse){
  .adm-nav button{min-height:44px}
}