/* ============================================================
   II ENCONTRO DESGEO EDU
   Correção do menu horizontal da Área do Participante no celular

   Problema corrigido:
   Quando .dashboard muda de duas colunas para uma coluna, o CSS geral
   mantinha o menu .sidebar como item de CSS Grid. O alinhamento padrão
   podia esticar verticalmente a linha do menu e, consequentemente,
   o item ativo ("Meus trabalhos", "Certificados" etc.) ocupava uma
   grande área azul vazia.

   Este arquivo afeta SOMENTE body.app-shell (Área do Participante).
   ============================================================ */

/* A chamada para novas propostas encerrou em 28/08/2026.
   Mantemos "Minhas propostas" para quem já enviou acompanhar o status. */
body.app-shell .sidebar a[href="proposta-oficina.html"],
body.app-shell #sec-propostas .panel-head a[href="proposta-oficina.html"]{
  display:none!important;
}

@media (max-width:1000px){

  /* No celular/tablet a navegação deixa de participar do grid.
     Assim sua altura passa a ser apenas a altura real dos botões. */
  body.app-shell .dashboard{
    display:block;
    min-height:calc(100vh - 66px);
  }

  body.app-shell .sidebar{
    display:flex;
    flex-direction:row;
    align-items:center;
    align-content:center;

    width:100%;
    height:auto;
    min-height:0;
    max-height:none;

    padding:10px 8px;
    gap:4px;

    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  body.app-shell .sidebar .group{
    display:none;
  }

  /* Fundamental: cada opção ocupa somente o espaço do próprio texto,
     em vez de esticar até a altura total da linha. */
  body.app-shell .sidebar a,
  body.app-shell .sidebar button{
    display:inline-flex;
    flex:0 0 auto;
    align-self:center;
    align-items:center;
    justify-content:center;

    width:auto;
    height:auto;
    min-height:44px;

    margin:0;
    padding:10px 14px;

    white-space:nowrap;
    line-height:1.2;
    border-radius:12px;
  }

  body.app-shell .sidebar a.active{
    background:rgba(255,255,255,.12);
  }

  body.app-shell .sidebar::-webkit-scrollbar{
    height:4px;
  }

  body.app-shell .sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:999px;
  }

  body.app-shell .main-panel{
    width:100%;
    min-width:0;
    padding:20px;
  }
}

@media (max-width:760px){
  body.app-shell .main-panel{
    padding:15px;
  }

  body.app-shell .sidebar{
    padding:9px 7px;
  }

  body.app-shell .sidebar a,
  body.app-shell .sidebar button{
    min-height:42px;
    padding:9px 13px;
  }
}

@media (max-width:480px){
  body.app-shell .sidebar a,
  body.app-shell .sidebar button{
    font-size:.94rem;
  }
}