/* CSS extra apenas para o HUB RFS.
   Mantém o padrão do styles.css e só complementa layout do hub. */

.rfs-state { padding: 16px; }
.rfs-state-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.rfs-state-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.rfs-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.rfs-actions-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas (desktop) */
}
.rfs-bigbtn{
  width:100%;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  min-height: 48px; /* deixa os 4 botões com “altura” consistente */
}

/* Mobile: esconde o bloco de botões (já existe o menu no mobile) */
@media (max-width: 720px){
  #moduleActions{ display:none !important; }
}

/* Cards de evento (público) */
.rfs-event-card .rfs-ev-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.rfs-event-card .rfs-ev-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rfs-event-card .rfs-ev-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.rfs-event-card .rfs-ev-actions .btn{
  text-decoration:none;
}

/* Link "desabilitado" visual (para Resultados/Ranking fase 2 e Admin sem ACL) */
.rfs-disabled-link{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:auto; /* mantém foco/tooltip se quiser */
}

/* Info extra do evento (settings do módulo) */
.rfs-ev-banner{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}
.rfs-ev-banner i{ margin-top: 2px; opacity:.85; }

.rfs-ev-info{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px 12px;
}
@media (max-width: 980px){
  .rfs-ev-info{ grid-template-columns: 1fr; }
}


/* ===== Hub: eventos em 1 coluna (sem dividir em colunas) ===== */
#eventsGrid.cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Ajusta ações dentro do card do evento (mobile: vira coluna) */
@media (max-width: 720px){
  .rfs-event-card .rfs-ev-actions{ flex-direction:column; align-items:stretch; }
  .rfs-event-card .rfs-ev-actions .btn{ width:100%; justify-content:center; }
}

/* ===== MENU no rodapé (somente mobile) ===== */
.rfs-mobmenu{ display:none; }

/* container do rodapé (fora do header) */
.rfs-mobile-footer{ display:none; }

@media (max-width: 720px){
  /* no mobile, escondemos os botões do topo pra sobrar espaço pro nome */
  .topbar .userbox #btnGoMain,
  .topbar .userbox #btnSignOut{ display:none !important; }

  /* exibe o rodapé */
  .rfs-mobile-footer{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20; /* abaixo do sheet (9999) */

    background: rgba(255,255,255,.90);
    border-top: 1px solid rgba(0,0,0,.10);
    backdrop-filter: blur(8px);
    box-shadow: 0 -12px 30px rgba(0,0,0,.10);

    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* botão ocupa o rodapé inteiro */
  .rfs-footer-btn{
    display:flex !important;
    width: 100%;
    justify-content:center;
    gap:10px;

    border-radius: 12px;
    padding: 12px 14px;
  }

  /* reserva espaço para o conteúdo não ficar por trás do rodapé */
  main.app{
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  /* agora o botão existe, então pode ser mostrado */
  .rfs-mobmenu{ display:inline-flex; }
}

/* ===== Bottom sheet menu (mobile) ===== */
.rfs-sheet{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.rfs-sheet[hidden]{ display:none !important; }
.rfs-sheet-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.rfs-sheet-card{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 -18px 60px rgba(0,0,0,.20);
  max-height: 82vh;
  overflow:hidden;
}
.rfs-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.rfs-sheet-title{ font-weight: 950; font-size: 15px; }
.rfs-sheet-x{ width:44px;height:44px;border-radius:14px; display:flex; align-items:center; justify-content:center; padding:0; }
.rfs-sheet-body{
  padding: 12px 14px 14px 14px;
  overflow:auto;
  max-height: calc(82vh - 64px);
}
.rfs-sheet-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.rfs-sheet-row:first-child{ margin-top:0; }
.rfs-sheet-btn{
  flex: 1 1 0;
  border-radius: 16px;
  justify-content:center;
  padding: 12px 14px;
}
.rfs-sheet-footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.rfs-sheet-user{ min-width: 200px; }
.rfs-sheet-name{ font-weight: 950; line-height:1.1; }
.rfs-sheet-signout{ border-radius: 16px; padding: 12px 14px; }

.rfs-sheet-pick{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rfs-sheet-pickbtn{
  width:100%;
  justify-content:flex-start;
  border-radius: 16px;
  padding: 12px 14px;
}

/* trava scroll do fundo quando sheet aberto */
body.rfs-sheet-open{ overflow:hidden; }