/* =============================================================================
   mobile.css — Ajustes responsivos globais (jun/2026)
   Carregado DEPOIS de base.css e theme.css. Tudo dentro de @media de telas
   pequenas, então NÃO afeta o desktop. Usa !important pontual porque os
   fragments injetam <style> @scope em runtime (depois deste arquivo) e
   poderiam sobrescrever as regras mobile.

   Cobre os padrões reais das telas:
     - Tabelas largas: wrapper rola na horizontal + min-width na tabela
       (CCB da Asta, Cobrança Simples/Plus).
     - Filtros/formulários em grade: viram 1 coluna.
     - Modais: largura/altura de tela cheia + scroll.
     - Barras de abas: rolagem horizontal.
     - Telas do CRM (funil/lead/painel/consultas).
   ========================================================================== */

@media (max-width: 720px) {

  /* ---- Conteúdo: padding enxuto ---- */
  .content { padding: 14px !important; }

  /* ---- Cabeçalhos de tela: empilha título e ações ---- */
  .crud-header,
  .cf-head,
  .cl-top,
  .sc-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .crud-actions, .cf-actions { flex-wrap: wrap; }

  /* ============================ TABELAS (genérico por padrão de nome) ============================ */
  /* Todo wrapper de tabela do sistema termina em -table-wrap / -tabela-wrap /
     -table-wrapper / __table-wrap. Pega todos: rolagem horizontal por toque. */
  [class*="table-wrap"],
  [class*="tabela-wrap"],
  [class*="table-wrapper"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  /* A tabela dentro do wrapper assume a largura natural do conteúdo e rola
     (em vez de espremer colunas). max-content vence o width:100% das
     tabelas de layout fixo. */
  [class*="table-wrap"] > table,
  [class*="tabela-wrap"] > table,
  [class*="table-wrapper"] > table { min-width: max-content !important; width: auto !important; }
  /* Reforço pras duas tabelas de layout fixo mais largas. */
  .ccb-table { min-width: 900px !important; }
  .sc-table  { min-width: 1040px !important; }

  /* ============================ FILTROS (genérico) ============================ */
  /* Qualquer barra de filtros (flex OU grid) vira 1 coluna; campos 100%. */
  [class*="filtro"],
  [class*="filters"] {
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: 1fr !important;
  }
  [class*="filtro"] input, [class*="filtro"] select, [class*="filtro"] > div,
  [class*="filters"] input, [class*="filters"] select, [class*="filters"] > div { width: 100% !important; min-width: 0 !important; }
  .ccb-pagination { flex-direction: column; gap: 10px; align-items: stretch; }

  /* ============================ GRADES (forms) ============================ */
  /* Qualquer grade que termina em -grid ou contém __grid vira 1 coluna. */
  [class$="-grid"],
  [class*="__grid"],
  .cc-grid, .cf-grid, .cl-grid { grid-template-columns: 1fr !important; }
  .cp-kpis { grid-template-columns: 1fr 1fr !important; }

  /* ============================ ABAS (scroll horizontal) ============================ */
  .sc-parent-tabs,
  .sc-tabs,
  .cl-tabs,
  .ccb-modal-tabs,
  .ccb-export-group { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ============================ MODAIS ============================ */
  .ccb-modal,
  .ccb-confirm,
  .cf-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .ccb-modal-overlay, .cf-ov { padding: 8px !important; }

  /* ============================ CRM funil (kanban) ============================ */
  /* Colunas um pouco mais estreitas pra caber melhor; o board já rola. */
  .cf-col { flex: 0 0 82vw !important; max-width: 88vw; }
  .cf-busca { width: 100% !important; min-width: 0 !important; }

  /* ============================ CRM lead (detalhe) ============================ */
  .cl-controls { flex-direction: column; align-items: stretch; }
  .cl-controls .cl-sel, .cl-controls .cl-btn { width: 100%; }

  /* ============================ Inputs em geral (toque) ============================ */
  /* Evita zoom automático do iOS (font < 16px) nos campos de texto. */
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="datetime-local"], select, textarea {
    font-size: 16px !important;
  }
}

/* Telas bem estreitas: KPIs em 1 coluna */
@media (max-width: 460px) {
  .cp-kpis { grid-template-columns: 1fr !important; }
}