/* AF CRM — barra lateral recolhida: compacta so o quanto precisar (20/09/2026)
   Com o item novo "Atendimentos avulsos" a coluna de icones passou de uma tela
   em janelas mais baixas. Em vez de apertar tudo sempre, o af-menu-lateral JS
   mede e liga o nivel minimo necessario em <html data-af-rail="1|2|3">.
   Sem o atributo, nada muda. A barra ABERTA nunca e tocada. */

/* nivel 1 — o cabecalho vazio encolhe e sobra menos respiro em cima e embaixo */
html[data-af-rail] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .h-16 {
  height: 2.5rem;
  min-height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
}
html[data-af-rail] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .flex-1 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* nivel 2 — cabecalho menor ainda, rodape mais justo */
html[data-af-rail="2"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .h-16,
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .h-16 {
  height: 2rem;
  min-height: 2rem;
}
html[data-af-rail="2"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .flex-1,
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .flex-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
html[data-af-rail="2"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .border-t,
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > .border-t {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* nivel 3 — ultimo recurso: os botoes ficam um pouco mais baixos */
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] ul {
  gap: 1px;
}
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] ul > li > a,
html[data-af-rail="3"] [data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] ul > li > button {
  height: 2rem !important;
  min-height: 2rem;
}

/* ------------------------------------------- renomear sem piscar --------
   O JS so' consegue trocar o texto DEPOIS que o React pinta, entao o item
   aparecia "Atendimentos" por um instante e virava "Regimes". Aqui a troca e'
   feita em CSS, que ja' esta' no <head> quando o primeiro quadro e' desenhado:
   o rotulo original fica com tamanho zero e o ::before escreve o novo. O JS
   continua trocando o texto (fica invisivel) como rede de seguranca, caso o
   app mude a estrutura e este seletor pare de casar. */
[data-sidebar="sidebar"] a[href="/kanban"] > span { font-size: 0; }
[data-sidebar="sidebar"] a[href="/kanban"] > span::before {
  content: "Regimes";
  font-size: .875rem;
  font-weight: inherit;
  letter-spacing: normal;
}

/* dica flutuante do item injetado (o Radix do app nao cobre um item clonado) */
.af-dica-menu {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
}
.af-dica-menu.af-dica-on {
  opacity: 1;
}

/* ------------------------------------------------- páginas embutidas ----
   O miolo da antiga janela flutuante passa a ocupar a área de conteúdo. */
.af-pagina {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.af-pagina-oculta { display: none !important; }

/* A casca (o antigo fundo escuro que cobria a tela) vem junto, porque os
   add-ons escrevem dentro dela por referência. Aqui ela deixa de ser
   sobreposição e vira só um contêiner que preenche a área de conteúdo. */
.af-pagina > .afe-overlay,
.af-pagina > .kb-ov {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
}

.af-pagina > .afe-overlay > .afe-janela,
.af-pagina > .kb-ov > .kb-mod,
.af-pagina > .afe-janela,
.af-pagina > .kb-mod {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* o × do painel agora é "voltar para a tela" — fica discreto */
.af-pagina .afe-fechar,
.af-pagina .kb-x { opacity: .7; }
.af-pagina .afe-fechar:hover,
.af-pagina .kb-x:hover { opacity: 1; }

/* ------------------------------------------- nada de animacao no rail ----
   O ajuste de encaixe e medido a cada renderizacao do app. Se os itens
   tiverem transicao de altura/padding, cada medicao reinicia a animacao e a
   coluna parece pulsar (icones subindo e descendo). Aqui a mudanca de nivel
   e instantanea, entao mesmo que o nivel mude nao ha movimento visivel. */
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"],
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] > div,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] ul,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] li,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] li > a,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] li > button,
[data-collapsible="icon"][data-state="collapsed"] [data-sidebar="sidebar"] li svg {
  transition-property: background-color, color, opacity, box-shadow !important;
}