/* ============================================================
   Sistema Rodo Wall — Responsividade Mobile (plataforma)
   ------------------------------------------------------------
   Otimização para celular das telas COMUNS e do módulo Gestão
   do Motorista, já que os motoristas passam a acessar pelo
   celular. (O módulo Checklist tem responsividade própria.)
   ============================================================ */

@media (max-width: 860px){

  /* ---------- Login ---------- */
  .login-card{ width:min(94vw, 400px) !important; padding:26px 20px !important; }
  .login-card input{ font-size:16px !important; } /* 16px evita zoom automático no iOS */

  /* ---------- Hub de módulos ---------- */
  .hub-grid{ grid-template-columns:1fr !important; padding:0 14px; }
  .hub-inner{ padding:14px !important; }
  .hub-head{ flex-wrap:wrap; gap:8px; }

  /* ---------- Hub Admin ---------- */
  #hubAdminScreen .asec{ overflow-x:auto; }
  #hubAdminScreen .crud-table{ min-width:560px; }
  #hubAdminScreen .asec-hd{ flex-wrap:wrap; gap:8px; }

  /* ---------- Módulo Gestão do Motorista (PAD) ---------- */
  /* App deixa de travar overflow para permitir rolagem no celular */
  #app{ height:auto !important; min-height:100vh; overflow:auto !important; }

  /* Barra superior rola horizontalmente em vez de espremer */
  #app .topbar{
    overflow-x:auto; flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
  #app .tn{ white-space:nowrap; flex-shrink:0; }

  /* Faixa de estatísticas empilha em 2 colunas */
  #app .statsbar{ flex-wrap:wrap !important; }
  #app .statsbar > *{ min-width:46% !important; flex:1 1 46%; }

  /* Layout principal: lista de motoristas em cima, detalhe embaixo */
  #app .main{ flex-direction:column !important; height:auto !important; }
  #app .sidebar{ width:100% !important; max-width:none !important; max-height:40vh; overflow-y:auto; }
  #app .detail{ width:100% !important; }
  #app .detail-inner{ padding:12px !important; }

  /* Tabelas grandes ganham rolagem própria */
  #app table{ display:block; overflow-x:auto; }

  /* Modais ocupam a tela quase toda */
  .modal, .modal-card{ width:94vw !important; max-width:94vw !important; max-height:90vh; overflow-y:auto; }

  /* Toques maiores */
  #app button, #hubAdminScreen button{ min-height:38px; }
}

@media (max-width: 480px){
  #app .statsbar > *{ min-width:100% !important; }
}

/* ============================================================
   Mobile: rodapé sutil (não cobre botões) + botões proporcionais
   ============================================================ */
@media (max-width: 860px){
  /* Rodapé "Developed by": deixa de ser barra fixa (cobria os botões)
     e vira uma nota discreta no fim do conteúdo. */
  body > footer{
    position:static !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:transparent !important;
    border-top:1px solid var(--border) !important;
    font-size:9px !important; line-height:1.4;
    padding:10px 12px 14px !important;
    opacity:.55;
  }
  body > footer span{ font-size:9px !important; }

  /* Garante que o conteúdo dos módulos tenha respiro no fim */
  .cl-view{ padding-bottom:28px; }
  #app .detail-inner{ padding-bottom:28px; }
  .hub-foot{ font-size:9px; opacity:.55; padding-bottom:14px; }

  /* Botões proporcionais: nada de botão gigante ou estourando a linha */
  .cl-carreta-row{ flex-wrap:wrap; }
  .cl-carreta-row select{ flex:1 1 100%; }
  .cl-carreta-row .cl-btn{ flex:1 1 100%; }
  .cl-acoes-fim{ flex-wrap:wrap; }
  .cl-acoes-fim .cl-btn{ flex:1 1 auto; min-width:130px; }
  .cl-home-cards .cl-btn, .cl-btn-primary{ width:auto; }

  /* Faixa de ações no fim das telas não gruda no rodapé */
  .cl-acoes-fim{ margin-bottom:8px; }
}