/* ---------------------------------------------------------------------------
   Navegação dinâmica
   Os menus passaram a ser gerados a partir do registro de rotas (app/routes.php),
   com ícones SVG no lugar dos glifos de texto. Este arquivo adapta o CSS legado
   ao novo markup e adiciona o indicador deslizante do item ativo.
   --------------------------------------------------------------------------- */

/* --- Sidebar ------------------------------------------------------------- */

/* O tema antigo desenhava um losango via ::after em todo ícone da sidebar.
   Com SVG real isso vira ruído — desligado apenas nos itens gerados. */
.sidebar nav.nav-dynamic a i.nav-icon::after{content:none !important}

.sidebar{overflow:hidden}
.sidebar nav.nav-dynamic{
    position:relative;display:flex;flex:1 1 auto;min-height:0;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    margin-right:-8px;padding-right:8px;padding-bottom:14px;
    scrollbar-width:thin;scrollbar-color:#c9d8d2 transparent;
}
.sidebar nav.nav-dynamic::-webkit-scrollbar{width:6px}
.sidebar nav.nav-dynamic::-webkit-scrollbar-track{background:transparent}
.sidebar nav.nav-dynamic::-webkit-scrollbar-thumb{border-radius:999px;background:#c9d8d2}
.sidebar nav.nav-dynamic::-webkit-scrollbar-thumb:hover{background:#9fb7ae}
.sidebar nav.nav-dynamic a.nav-item{position:relative;overflow:hidden;isolation:isolate;transition:color .22s ease,background-color .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
.sidebar nav.nav-dynamic a.nav-item .nav-icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),color .22s ease}
.sidebar nav.nav-dynamic a.nav-item .nav-icon .app-icon{width:19px;height:19px}
.sidebar nav.nav-dynamic a.nav-item .nav-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar nav.nav-dynamic a.nav-item:hover{background:#f2f8f6;color:#2c4c42;transform:translateX(2px)}
.sidebar nav.nav-dynamic a.nav-item:hover .nav-icon{transform:scale(1.12)}
.sidebar nav.nav-dynamic a.nav-item:active{transform:translateX(2px) scale(.985)}

/* Barra vertical do item ativo, com crescimento suave. */
.sidebar nav.nav-dynamic a.nav-item::before{
    content:'';position:absolute;left:0;top:50%;width:3px;height:0;
    transform:translateY(-50%);border-radius:0 3px 3px 0;background:var(--green);
    transition:height .28s cubic-bezier(.2,.9,.3,1.2);
}
.sidebar nav.nav-dynamic a.nav-item.active::before{height:60%}
.sidebar nav.nav-dynamic a.nav-item.active .nav-icon{transform:scale(1.06)}

.sidebar nav.nav-dynamic a.nav-item:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Sem entrada escalonada: os itens do menu apareciam um a um, deslizando da
   esquerda, com atraso crescente até 0,23s. Em cada recarga a lateral se
   remontava na frente de quem já sabe o que tem ali — chamava atenção para a
   moldura em vez do conteúdo, e o último item só assentava depois que a
   página já estava pronta. O menu agora entra junto com o resto. */

/* --- Sidebar recolhida --------------------------------------------------- */

/* O botão fica no fluxo, na mesma linha da marca. Já tentei pendurá-lo fora da
   sidebar com position:absolute e o resultado é frágil — depende do contexto de
   posicionamento e de nada recortar o transbordo. Em fluxo não tem como quebrar. */
.sidebar-head{display:flex;align-items:center;gap:10px}
.sidebar-head .brand{flex:1 1 auto;min-width:0}
.sidebar-head .brand span{min-width:0}
.sidebar-head .brand b,.sidebar-head .brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidebar-collapse{
    flex:0 0 36px;width:36px;height:36px;display:none;place-items:center;
    border:1px solid #dce7e2;border-radius:11px;
    background:#f4f8f6;color:#61726a;cursor:pointer;padding:0;
    box-shadow:0 4px 12px #163a2c0b;
    transition:transform .25s ease,color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.sidebar-collapse .app-icon{width:18px;height:18px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sidebar-collapse:hover{color:var(--green);border-color:#bddbce;background:#eaf6f1;box-shadow:0 7px 18px #163a2c16}
.sidebar-collapse:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 22%,transparent);outline-offset:2px}
.sidebar-collapse:active{transform:scale(.9)}

/* Só faz sentido no desktop: no mobile a sidebar já abre e fecha por gaveta. */
@media(min-width:981px){.sidebar-collapse{display:grid}}

@media(min-width:981px){
    .app-shell{transition:grid-template-columns .32s cubic-bezier(.3,.8,.3,1)}
    body.sidebar-collapsed .app-shell{grid-template-columns:76px 1fr}
    body.sidebar-collapsed .sidebar{width:76px;padding-left:12px;padding-right:12px}
    body.sidebar-collapsed .sidebar .brand span,
    body.sidebar-collapsed .sidebar .nav-label,
    body.sidebar-collapsed .sidebar .nav-text{opacity:0;visibility:hidden;width:0;overflow:hidden;white-space:nowrap}
    body.sidebar-collapsed .sidebar nav.nav-dynamic a.nav-item{justify-content:center;padding-left:0;padding-right:0}
    /* Recolhida não cabem marca e botão lado a lado: empilha e centraliza. */
    body.sidebar-collapsed .sidebar-head{flex-direction:column;gap:14px}
    body.sidebar-collapsed .sidebar-head .brand{flex:0 0 auto;justify-content:center;padding:0}
    body.sidebar-collapsed .sidebar-collapse .app-icon{transform:rotate(180deg)}
    body.sidebar-collapsed .sidebar-collapse:active{transform:scale(.9)}
    .sidebar .brand span,.sidebar .nav-text{transition:opacity .2s ease}
}

/* Rótulo flutuante quando recolhida. */
body.sidebar-collapsed .sidebar nav.nav-dynamic a.nav-item::after{
    content:attr(title);position:absolute;left:calc(100% + 14px);top:50%;
    transform:translateY(-50%) translateX(-6px);padding:7px 11px;border-radius:8px;
    background:#12312a;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:40;
}
body.sidebar-collapsed .sidebar nav.nav-dynamic a.nav-item:hover::after{opacity:1;transform:translateY(-50%)}

/* --- Barra inferior (mobile) --------------------------------------------- */

.mobile-bottom-nav{grid-template-columns:repeat(var(--nav-count,5),minmax(0,1fr))}
.mobile-bottom-nav i .app-icon{width:19px;height:19px}
.mobile-bottom-nav i{transition:background-color .24s ease,transform .3s cubic-bezier(.2,.9,.3,1.3)}
.mobile-bottom-nav .active i{transform:translateY(-2px) scale(1.06)}
.mobile-bottom-nav a:active i,.mobile-bottom-nav button:active i{transform:scale(.9)}

/* --- Folha "Mais" -------------------------------------------------------- */

.mobile-more-grid a span .app-icon{width:21px;height:21px}
.mobile-more-grid a{transition:transform .22s cubic-bezier(.2,.8,.3,1.2)}
.mobile-more-grid a span{transition:background-color .22s ease,transform .22s cubic-bezier(.2,.8,.3,1.2)}
.mobile-more-grid a:active{transform:scale(.94)}
.mobile-more-grid a.active span{background:var(--green);color:#fff}
.mobile-more-sheet.open .mobile-more-grid a{animation:sheet-item-in .38s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(.04s * var(--i, 0) + .06s)}
@keyframes sheet-item-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* --- Navegação contextual ------------------------------------------------- */

.nav-dynamic-inline a{position:relative;transition:color .2s ease,background-color .2s ease}
.nav-dynamic-inline a::after{
    content:'';position:absolute;left:50%;right:50%;bottom:2px;height:2px;border-radius:2px;
    background:currentColor;opacity:.75;transition:left .26s cubic-bezier(.2,.9,.3,1),right .26s cubic-bezier(.2,.9,.3,1);
}
.nav-dynamic-inline a:hover::after,.nav-dynamic-inline a.active::after{left:22%;right:22%}

/* --- Ícones no menu do usuário ------------------------------------------- */

.user-dropdown a{display:flex;align-items:center;gap:9px;transition:background-color .18s ease,padding-left .18s ease}
.user-dropdown a:hover{padding-left:14px}
.user-dropdown a .app-icon{width:17px;height:17px;flex:0 0 17px}
.notification-trigger .app-icon{width:20px;height:20px}

@media(prefers-reduced-motion:reduce){
    .sidebar nav.nav-dynamic a.nav-item,
    .mobile-more-sheet.open .mobile-more-grid a{animation:none}
}

@media(max-width:980px){
    .sidebar{height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
    .sidebar nav.nav-dynamic{margin-top:22px;-webkit-overflow-scrolling:touch}
}

/* --- Grupos do menu (Geral, Site, Comunicação...) ------------------------
   No computador o botão do grupo tem a mesma cara do rótulo antigo e os itens
   ficam sempre visíveis. No celular vira sanfona com ícone e seta, controlada
   por js/menu-mobile.js, e a gaveta rola até o último item. */
.sidebar nav.nav-dynamic .nav-group{display:block}
.sidebar nav.nav-dynamic .nav-group-toggle{display:flex;align-items:center;gap:10px;width:100%;margin:22px 0 8px;padding:0 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:default}
.sidebar nav.nav-dynamic .nav-group-toggle .nav-label{margin:0}
.sidebar nav.nav-dynamic .nav-group-icon,
.sidebar nav.nav-dynamic .nav-group-chevron{display:none;font-style:normal}
body.sidebar-collapsed .sidebar nav.nav-dynamic .nav-group-toggle{height:0;margin:14px 0 0;padding:0;overflow:hidden}
@media(max-width:980px){
  .sidebar nav.nav-dynamic{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .sidebar nav.nav-dynamic .nav-group--recolhivel{border-bottom:1px solid var(--line,#e3ebe7)}
  .sidebar nav.nav-dynamic .nav-group--recolhivel:last-child{border-bottom:0}
  .sidebar nav.nav-dynamic .nav-group-toggle{margin:0;min-height:54px;padding:0 8px;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sidebar nav.nav-dynamic .nav-group-toggle:active{background:color-mix(in srgb,var(--green) 8%,transparent)}
  .sidebar nav.nav-dynamic .nav-group-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .sidebar nav.nav-dynamic .nav-group-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
  .sidebar nav.nav-dynamic .nav-group-icon .app-icon{width:18px;height:18px}
  .sidebar nav.nav-dynamic .nav-group-toggle .nav-label{flex:1 1 auto;min-width:0;font-size:12px!important;letter-spacing:.08em;color:inherit;opacity:.85}
  .sidebar nav.nav-dynamic .nav-group-chevron{display:grid;place-items:center;flex:0 0 24px;color:#8a9892;transition:transform .22s ease}
  .sidebar nav.nav-dynamic .nav-group-chevron .app-icon{width:16px;height:16px}
  .sidebar nav.nav-dynamic .nav-group.is-open .nav-group-chevron{transform:rotate(180deg)}
  .sidebar nav.nav-dynamic .nav-group--recolhivel .nav-group-items{display:none;padding:0 0 10px 10px}
  .sidebar nav.nav-dynamic .nav-group--recolhivel.is-open .nav-group-items{display:block}
  .sidebar nav.nav-dynamic a.nav-item{min-height:46px}
}
@media(prefers-reduced-motion:reduce){.sidebar nav.nav-dynamic .nav-group-chevron{transition:none}}