/* ===== Media Queries ===== */

/* Menu deslizante sobre página em telas pequenas */
@media (max-width: 768px) {
  .indexMainConteudoMenuEsquerda {
    position: fixed;
    left: 0;
    top: 50px;
    height: calc(100vh - 50px);
    width: 280px;
    background-color: #fff;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  .indexMain.indexMainMenuOpen .indexMainConteudoMenuEsquerda {
    transform: translateX(0);
  }
  .indexMainConteudoDireita {
    flex: 1;
  }
}

/* Layout cheio (desktop): permitir colapsar o menu para dar mais espaço */
@media (min-width: 769px) {
  .indexMain.indexMainMenuCollapsed .indexMainConteudoMenuEsquerda {
    width: 0;
    flex-basis: 0;
    overflow: hidden;
  }
}

/* Ajuste de grid para telas muito estreitas */
@media (max-width: 360px) {
  .indexMainPaginaMesasMapa {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Header do detalhe da mesa (mobile) */
@media (max-width: 480px) {
  .indexMainPaginaMesasDetalheHeader {
    height: auto; /* expande conforme conteúdo em coluna */
    display: grid;
    grid-template-columns: 1fr 32px; /* título/ocupação + botão fechar */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title close"
      "ocup close"
      "actions actions";
    align-items: center;
    gap: 6px;
  }
  .indexMainPaginaMesasDetalheTitulo { grid-area: title; min-width: 0; }
  .indexMainPaginaMesasOcupacaoInfo { grid-area: ocup; min-width: 0; }
  .indexMainPaginaMesasDetalheFechar { grid-area: close; justify-self: end; }

  .indexMainPaginaMesasDetalheHeaderActions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* não quebra */
    overflow-x: auto; /* scroll horizontal para caber todos */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .indexMainPaginaMesasDetalheHeaderBtn {
    flex: 0 0 auto; /* largura estável */
    white-space: nowrap; /* sem quebra no texto */
    padding: 0 8px; /* um pouco mais compacto */
    font-size: 12px; /* reduzido para caber melhor */
  }
}