/* ---------------------------------------------------------------------------
   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 nav.nav-dynamic{position:relative;display:flex;flex-direction:column}
.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}

/* Entrada escalonada dos itens no primeiro paint. */
.sidebar nav.nav-dynamic a.nav-item{animation:nav-item-in .42s cubic-bezier(.2,.8,.3,1) backwards}
.sidebar nav.nav-dynamic a.nav-item:nth-child(1){animation-delay:.02s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(2){animation-delay:.05s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(3){animation-delay:.08s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(4){animation-delay:.11s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(5){animation-delay:.14s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(6){animation-delay:.17s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(7){animation-delay:.20s}
.sidebar nav.nav-dynamic a.nav-item:nth-child(n+8){animation-delay:.23s}
@keyframes nav-item-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* --- 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 28px;width:28px;height:28px;display:none;place-items:center;
    border:1px solid var(--line,#e2ebe7);border-radius:50%;
    background:#fff;color:#6d7c76;cursor:pointer;padding:0;
    transition:transform .25s ease,color .2s ease,background-color .2s ease;
}
.sidebar-collapse .app-icon{width:15px;height:15px}
.sidebar-collapse:hover{color:var(--green);background:#f2f8f6}
.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,
    body.sidebar-collapsed .sidebar .sidebar-help b,
    body.sidebar-collapsed .sidebar .sidebar-help small{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{transform:rotate(180deg)}
    body.sidebar-collapsed .sidebar-collapse:active{transform:rotate(180deg) 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,.member-bottom-nav{grid-template-columns:repeat(var(--nav-count,5),minmax(0,1fr))}
.mobile-bottom-nav i .app-icon,.member-bottom-nav i .app-icon{width:19px;height:19px}
.mobile-bottom-nav i,.member-bottom-nav i{transition:background-color .24s ease,transform .3s cubic-bezier(.2,.9,.3,1.3)}
.mobile-bottom-nav .active i,.member-bottom-nav .active i{transform:translateY(-2px) scale(1.06)}
.mobile-bottom-nav a:active i,.member-bottom-nav a:active i,
.mobile-bottom-nav button:active i,.member-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}}

.member-more-sheet nav a i .app-icon{width:18px;height:18px}
.member-more-sheet.open nav a{animation:sheet-item-in .38s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(.05s * var(--i, 0) + .06s)}

/* --- Cabeçalho do associado / público ------------------------------------ */

.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,
    .member-more-sheet.open nav a{animation:none}
}