/* ============================================================
   META 360 · Meta Contabilidade
   financeiro-mobile.css — camada MOBILE da aba Financeiro
   ------------------------------------------------------------
   Arquivo ADITIVO. Carrega DEPOIS de financeiro.css e so atua em
   telas de celular (max-width). Nao altera o desktop e nao
   depende de mudancas no financeiro.js (usa as classes/ids que ja
   existem no HTML gerado). Onde necessario usamos !important so
   no escopo mobile, para vencer grids/estilos que nao encolhem
   sozinhos (ex.: grid-template-columns com 1fr "duro").
   Objetivo: usar a aba Financeiro pelo celular com conforto —
   ver saldo/KPIs, consultar extrato do Inter, dar baixa em
   lançamentos e navegar entre Visão geral / Contas a pagar /
   Fluxo de caixa / Mais sem rolagem lateral da pagina inteira.
   ============================================================ */

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

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

  /* INPUTS/SELECTS: 16px evita o zoom automatico do iOS ao focar.
     Vale pra aba E pros modais (fora de #view-financeiro no DOM). */
  #view-financeiro input,
  #view-financeiro select,
  #view-financeiro textarea,
  .fin-modal input,
  .fin-modal select,
  .fin-modal textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  .fin-modal textarea { min-height: 64px; }

  /* GRIDS DE KPI/CARTOES/GRAFICOS: forcar encolher (minmax(0,1fr))
     em vez de 1fr puro, que trava no min-content do conteudo. */
  .fin-kpis, .fin-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .fin-kpi__value, .fin-strip .fin-kpi__value { font-size: 1.05rem; }
  .fin-charts, .fin-cards, .fin-form-grid, .fin-bm-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #view-financeiro canvas { max-width: 100%; height: auto !important; }

  /* NAVEGACAO INTERNA (Visão geral / Contas a pagar / Fluxo de
     caixa / Mais): faixa rolavel na horizontal em vez de quebrar
     linha de forma desalinhada. */
  #fin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #fin-tabs::-webkit-scrollbar { display: none; }
  .fin-tab { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .fin-tabmore { flex: 0 0 auto; }
  .fin-tabmore__menu { right: 0; left: auto; max-width: 80vw; }

  /* BARRAS DE BOTOES (toolbar do topo e ações do Banco Inter):
     botões grandes, 2 por linha. */
  .fin-toolbar__actions { gap: 8px; width: 100%; }
  .fin-toolbar__actions .btn {
    flex: 1 1 46%;
    min-height: 44px;
    font-size: .85rem;
    justify-content: center;
  }

  /* CAMPOS DE DATA + BOTÕES (ex.: Extrato — de/até, Importar &
     conciliar, Ver extrato): já usam flex-wrap no HTML; aqui só
     garantimos que cada campo/botão ocupe bem a largura. */
  #view-financeiro label.field { flex: 1 1 46%; min-width: 130px !important; }

  /* TABELAS (extrato do Inter, contas a pagar, lançamentos etc.):
     rolagem horizontal já existe via .table-wrap/.fin-table-wrap;
     aqui deixamos a tabela mais compacta e limitamos a altura
     pra não forçar rolagem infinita da página em listas longas. */
  .table-wrap, .fin-table-wrap {
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
  }
  .data-table, .fin-table {
    font-size: .8rem;
  }
  .data-table thead th, .fin-table thead th { padding: 8px 9px; }
  .data-table tbody td, .fin-table tbody td { padding: 8px 9px; }
  .data-table select, .fin-table select { font-size: .8rem; min-height: 36px; }
  .data-table button, .fin-table button,
  .data-table .btn, .fin-table .btn { min-height: 38px; }

  /* MODAIS (Novo lançamento, Categorias, Fechamento etc.): tela
     cheia com corpo rolável. */
  .fin-modal { padding: 12px 8px; align-items: stretch; }
  .fin-modal__panel, .fin-modal__panel--lg { max-width: 100%; }
  .fin-modal__body { max-height: 74vh; }
}

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

  .fin-kpis, .fin-strip, .fin-charts, .fin-cards, .fin-bm-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fin-toolbar__actions .btn { flex: 1 1 100%; }
  #view-financeiro label.field { flex: 1 1 100%; min-width: 0 !important; }
}