/* ============================================================
   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:var(--fs-lg) !important; } /* 16px evita zoom automático no iOS */

  /* ---------- 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; }
  #app .cl-main{ overflow:visible; }

  /* 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, com uma sombra nas bordas
     indicando que dá pra rolar (sem precisar acertar a cor de fundo
     exata do painel por trás — é só uma sombra, não um degradê sólido). */
  #app table{
    display:block; overflow-x:auto;
    box-shadow:inset -14px 0 10px -10px rgba(0,0,0,.35), inset 14px 0 10px -10px rgba(0,0,0,.35);
  }

  /* 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: respiro no fim + botões proporcionais
   ============================================================ */
@media (max-width: 860px){
  /* Garante que o conteúdo dos módulos tenha respiro no fim */
  .cl-view{ padding-bottom:28px; }
  #app .detail-inner{ padding-bottom:28px; }

  /* 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; }
}