/* ============================================================
   META 360 · Meta Contabilidade
   cobranca-mobile.css — camada MOBILE do Painel de Cobranca
   ------------------------------------------------------------
   Arquivo ADITIVO. Carrega DEPOIS de cobranca.css e so atua em
   telas de celular (max-width). Nao altera o desktop e nao
   depende de mudancas no cobranca.js (usa as classes/ids que ja
   existem no HTML gerado). Onde o JS aplica estilo inline, aqui
   sobrescrevemos com !important so no escopo mobile.
   Objetivo: usar a aba Cobranca pelo celular com conforto —
   gerar boleto, acompanhar boletos, dar baixa e disparar WhatsApp.
   ============================================================ */

/* =====================================================
   1) TELA DE CELULAR (retrato e paisagem estreita) <= 640px
   ===================================================== */
@media (max-width: 640px) {

  #view-cobranca { max-width: 100%; }
  #view-cobranca * { min-width: 0; }

  /* INPUTS: 16px evita o zoom automatico do iOS ao focar.
     Vale pra aba E pros modais (fora do #view-cobranca no DOM). */
  #view-cobranca input,
  #view-cobranca select,
  #view-cobranca textarea,
  input[id^="ce-"], select[id^="ce-"], textarea[id^="ce-"],
  input[id^="cob-bol-"], select[id^="cob-bol-"],
  input[id^="cob-int-"], select[id^="cob-int-"] {
    font-size: 16px !important;
    min-height: 44px;
  }
  #view-cobranca textarea, textarea[id^="ce-"] { min-height: 64px; }

  /* BARRA DE FERRAMENTAS: botoes grandes, 2 por linha */
  .cob-toolbar { gap: 10px; }
  .cob-toolbar__actions { width: 100%; }
  .cob-toolbar__actions .btn {
    flex: 1 1 46%;
    min-height: 46px;
    font-size: .9rem;
    justify-content: center;
  }

  /* ABAS INTERNAS: faixa rolavel na horizontal */
  .cob-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cob-tabs::-webkit-scrollbar { display: none; }
  .cob-tab { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }

  /* FILTROS */
  .cob-filters { gap: 8px; }
  .cob-search { flex: 1 1 100%; min-width: 100%; }
  .cob-field { flex: 1 1 46%; }

  /* SECOES */
  .cob-section__head { padding: 12px 13px; }
  .cob-section__body { padding: 14px 12px; }

  /* TABELAS: rolagem horizontal suave; celula enxuta */
  .cob-table-wrap { -webkit-overflow-scrolling: touch; max-height: 60vh; }
  .cob-table { font-size: .8rem; }
  .cob-table thead th { padding: 8px 9px; }
  .cob-table tbody td { padding: 8px 9px; }
  .cob-table button,
  #cob-bol-lista button,
  #cob-int-list button,
  .cob-inter-section button { min-height: 38px; }
  #cob-bol-lista { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* CARTOES DE DISPARO (WhatsApp) */
  .cob-mcard__actions { gap: 8px; }
  .cob-mcard__actions .btn { min-height: 42px; }
  .cob-wa { min-height: 44px; padding: 10px 16px; font-size: .85rem; }

  /* KPIs / faixas */
  .cob-kpis, .cob-strip { grid-template-columns: repeat(2, 1fr); }
  .cob-kpi__value { font-size: 1.35rem; }

  /* MODAL DE CLIENTE (cob-modal): tela cheia */
  .cob-modal { padding: 12px 8px; align-items: stretch; }
  .cob-modal__panel { max-width: 100%; }
  .cob-modal__body { max-height: 74vh; }
  .cob-mstats { grid-template-columns: repeat(2, 1fr); }

  /* Botoes de acao dos modais Emitir/Boletos: grandes e cheios */
  #ce-emitir, #ce-fechar, #ce-buscar,
  #cob-bol-close, #cob-bol-buscar, #cob-bol-flimpar {
    min-height: 46px !important;
    font-size: .92rem !important;
  }
}

/* =====================================================
   2) CELULAR ESTREITO <= 480px
   ===================================================== */
@media (max-width: 480px) {

  .cob-kpis, .cob-strip, .cob-mstats { grid-template-columns: 1fr; }
  .cob-rcounts { grid-template-columns: repeat(2, 1fr); }
  .cob-aging { grid-template-columns: 1fr; }

  .cob-toolbar__actions .btn { flex: 1 1 100%; }
  .cob-field { flex: 1 1 100%; }

  /* MODAL EMITIR BOLETO: empilha o grid inline 1fr 1fr via :has() */
  div:has(> #ce-nome) { grid-template-columns: 1fr !important; }

  #ce-busca, #ce-nome, #ce-doc, #ce-fone, #ce-email,
  #ce-valor, #ce-venc, #ce-desc { width: 100% !important; }
}