/* COBRETUDO — Menu lateral sincronizado (ADM + Cliente)
   2026-09-24
   Regra: menu participa do layout; nunca sobrepoe o conteudo.
   Ao abrir/fechar, coluna lateral e area principal se movem juntas.
*/

html{overflow-x:hidden}
body.admin-page,body.client-page{overflow-x:hidden}

@media (min-width:801px){
  body.admin-page .app,
  body.client-page .app{
    width:100%;
    max-width:100vw;
    overflow-x:clip;
    will-change:grid-template-columns;
    transition:grid-template-columns .24s cubic-bezier(.22,.61,.36,1)!important;
  }

  /* Mantem as dimensoes ja validadas em cada painel. */
  body.admin-page .app{grid-template-columns:72px minmax(0,1fr)!important}
  body.admin-page .app.menu-expanded{grid-template-columns:214px minmax(0,1fr)!important}
  body.client-page .app{grid-template-columns:76px minmax(0,1fr)!important}
  body.client-page .app.menu-expanded{grid-template-columns:238px minmax(0,1fr)!important}

  /* A coluna principal acompanha o grid sem invadir nem criar scroll horizontal. */
  body.admin-page .main,
  body.client-page main{
    min-width:0!important;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.admin-page .sidebar,
  body.client-page .side{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
    contain:layout paint;
    transition:padding .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s ease!important;
  }

  /* Tudo interno acompanha a mesma duracao da abertura. */
  body.admin-page .sidebar .brand-lockup>div,
  body.client-page .side .brand-lockup>div,
  body.client-page .client-nav .nav-label,
  body.client-page .client-logout .nav-label{
    transition:opacity .24s ease,width .24s cubic-bezier(.22,.61,.36,1)!important;
  }

  body.admin-page .sidebar .userbox,
  body.client-page .side .user{
    max-height:0;
    opacity:0;
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    border-top-width:0!important;
    border-bottom-width:0!important;
    overflow:hidden!important;
    pointer-events:none;
    transition:max-height .24s cubic-bezier(.22,.61,.36,1),opacity .18s ease,padding .24s ease,margin .24s ease,border-width .24s ease!important;
  }

  body.admin-page .app.menu-expanded .sidebar .userbox,
  body.client-page .app.menu-expanded .side .user{
    max-height:110px;
    opacity:1;
    pointer-events:auto;
  }

  body.admin-page .app.menu-expanded .sidebar .userbox{
    padding:11px!important;
    margin-bottom:12px!important;
    border-width:1px!important;
  }

  body.client-page .app.menu-expanded .side .user{
    padding:12px!important;
    margin-bottom:14px!important;
    border-width:1px!important;
  }
}

@media (max-width:800px){
  body.admin-page .app,
  body.client-page .app,
  body.admin-page .app.menu-expanded,
  body.client-page .app.menu-expanded{
    overflow-x:hidden!important;
    transition:none!important;
  }
}

/* 2026-09-24 — sincronismo fiel ao menu de referencia + topo sempre visivel */
html,
body.admin-page,
body.client-page{
  overflow-x:clip!important;
}

@media (min-width:801px){
  /* O hover muda o proprio grid imediatamente. O JS continua como fallback. */
  body.admin-page .app:has(.sidebar:hover),
  body.admin-page .app.menu-expanded{
    grid-template-columns:214px minmax(0,1fr)!important;
  }
  body.client-page .app:has(.side:hover),
  body.client-page .app.menu-expanded{
    grid-template-columns:238px minmax(0,1fr)!important;
  }

  /* clip evita barra horizontal sem transformar o conteudo em outro scroll-container.
     Assim o topo sticky continua preso ao alto da tela. */
  body.admin-page .main,
  body.client-page main{
    overflow-x:clip!important;
    overflow-y:visible!important;
    min-width:0!important;
  }

  body.admin-page .main>.view,
  body.client-page main>.view{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* Barra global no topo real dos dois paineis. */
  body.admin-page .admin-globalbar{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    margin:-22px -26px 16px!important;
    padding:9px 26px!important;
    min-height:58px!important;
    width:auto!important;
    box-shadow:0 5px 18px rgba(20,55,73,.06)!important;
  }
  body.client-page .client-globalbar{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    margin:-24px -24px 16px!important;
    padding:9px 24px!important;
    min-height:58px!important;
    width:auto!important;
    box-shadow:0 5px 18px rgba(20,55,73,.06)!important;
  }

  /* Sininho e lupa permanecem na extremidade superior direita. */
  body.admin-page .admin-globalbar .admin-tool-wrap,
  body.client-page .client-globalbar .client-tool-wrap{
    flex:0 0 auto!important;
  }
}


/* 2026-09-24 — abertura mais macia, sem salto de layout */
@media (min-width:801px){
  body.admin-page .app,
  body.client-page .app{
    transition:grid-template-columns .34s cubic-bezier(.25,.8,.25,1)!important;
  }
  body.admin-page .sidebar,
  body.client-page .side{
    transition:padding .34s cubic-bezier(.25,.8,.25,1),box-shadow .34s ease!important;
  }

  /* Evita o salto causado por height:0 -> height:auto das regras antigas. */
  body.admin-page .sidebar .userbox,
  body.client-page .side .user{
    height:auto!important;
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    transition:max-height .30s cubic-bezier(.25,.8,.25,1),opacity .22s ease,padding .30s ease,margin .30s ease,border-width .30s ease!important;
  }
  body.admin-page .app.menu-expanded .sidebar .userbox,
  body.client-page .app.menu-expanded .side .user{
    max-height:112px!important;
    opacity:1!important;
  }

  /* Texto do menu aparece por fade/slide, sem pular de font-size 0 para o tamanho final. */
  body.admin-page .sidebar .nav button{font-size:12px!important;transition:background-color .16s ease,color .16s ease!important}
  body.admin-page .sidebar .nav .nav-label,
  body.client-page .client-nav .nav-label,
  body.client-page .client-logout .nav-label{
    display:inline-block!important;
    opacity:0!important;
    width:0!important;
    max-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    transform:translateX(-5px);
    pointer-events:none!important;
    transition:opacity .20s ease .02s,width .30s cubic-bezier(.25,.8,.25,1),max-width .30s cubic-bezier(.25,.8,.25,1),transform .30s cubic-bezier(.25,.8,.25,1)!important;
  }
  body.admin-page .app.menu-expanded .sidebar .nav .nav-label{
    opacity:1!important;width:145px!important;max-width:145px!important;transform:translateX(0);pointer-events:auto!important;
  }
  body.client-page .app.menu-expanded .client-nav .nav-label,
  body.client-page .app.menu-expanded .client-logout .nav-label{
    opacity:1!important;width:160px!important;max-width:160px!important;transform:translateX(0);pointer-events:auto!important;
  }
  body.admin-page .sidebar .brand-lockup>div,
  body.client-page .side .brand-lockup>div{
    transform:translateX(-4px);
    transition:opacity .20s ease .03s,width .30s cubic-bezier(.25,.8,.25,1),transform .30s cubic-bezier(.25,.8,.25,1)!important;
  }
  body.admin-page .app.menu-expanded .sidebar .brand-lockup>div,
  body.client-page .app.menu-expanded .side .brand-lockup>div{transform:translateX(0)}
}