/* ===================================
   GM TECH — MOBILE MENU (ÚNICO / SEM CONFLITO)
   - Topbar fixa
   - Drawer lateral
   - Tabela com scroll horizontal (mostra colunas da direita)
=================================== */

@media (max-width: 860px){

  /* não corta colunas da direita */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* ✅ deixa a tabela rolar pro lado quando precisar */
  }

  /* remove sidebar desktop no mobile */
  .sidebar{ display:none !important; }

  /* layout */
  .app{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    grid-template-columns: 1fr !important;
  }

  /* evita duplicar userbar do conteúdo */
  .userbar{ display:none !important; }

  /* TOPBAR fixa */
  #gmMobileTopbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    width: 100%;
  }

  .gm-topbar{
    height: 56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 8px 12px;
    background: rgba(20, 18, 22, .95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
  }

  #gmMenuBtn{
    width:40px;
    height:40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color:#fff;
    font-size:18px;
    cursor:pointer;
  }

  .gm-logo{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-weight:900;
    white-space:nowrap;
  }

  .gm-logo img{
    width:26px;
    height:26px;
    border-radius:8px;
    object-fit:contain;
  }

  .gm-user{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 0;
  }

  #gmUserLabel{
    padding:8px 10px;
    border-radius:999px;
    background: rgba(201,42,63,.20);
    border: 1px solid rgba(201,42,63,.35);
    color:#fff;
    font-weight:900;
    font-size:12px;
    white-space:nowrap;
    max-width:46vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #gmLogout{
    border:none;
    background:#fff;
    color:#111;
    border-radius:12px;
    padding:10px 12px;
    font-weight:900;
    cursor:pointer;
  }

  /* empurra conteúdo pra não ficar atrás da topbar */
  .content{
    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
    padding: 12px !important;
    padding-top: 76px !important; /* ✅ espaço da topbar */
  }

  /* Drawer overlay */
  #gmDrawer{
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
  }
  #gmDrawer.open{ pointer-events: auto; }

  .gm-drawer-bg{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.45);
    opacity:0;
    transition: .2s;
  }
  #gmDrawer.open .gm-drawer-bg{ opacity:1; }

  .gm-drawer{
    position:absolute;
    top:0;
    left:0;
    height:100dvh;
    width:78vw;
    max-width:320px;
    background: rgba(20, 18, 22, .98);
    border-right: 1px solid rgba(255,255,255,.10);
    transform: translateX(-105%);
    transition: .22s;
    overflow:auto;
    padding: 10px;
  }
  #gmDrawer.open .gm-drawer{ transform: translateX(0); }

  /* Tabelas: rolagem horizontal só na área da tabela */
  .table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* evita “sumir” botão/coluna por min-width pequeno */
  .table{
    min-width: 900px;
  }

  /* ações empilhadas no mobile (melhor leitura) */
  .card-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px;
  }
  .card-actions .btn{ width:100%; }
}

@media (max-width:860px){

.table{

font-size:12px;

}

.table th,
.table td{

padding:6px 8px !important;

}

}