/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVO GLOBAL v2 (14/09/2026) — carregado por ÚLTIMO (depois do extras.css).
   Auditoria de celular/tablet pedida pelo dono. Dois pontos de corte, os mesmos do base.css:
   TABLET (≤900px) e CELULAR (≤560px). Tudo aqui é max-width → no desktop NADA muda.
   Os blocos antigos continuam valendo (base.css 900/560, cadastros.css cartões, etc.);
   este arquivo cobre as lacunas encontradas:
     · faixa 821–900px: listas ficavam em grade cortada (cartões só começavam em 820 → agora 900)
     · cabeçalho de página (.page-header) não quebrava linha: título + botões espremidos
     · campos com fonte < 16px: o iPhone dá zoom ao focar e desalinha a tela
     · Financeiro: única lista sem tratamento (agora rola na horizontal, colunas legíveis)
     · abas do Financeiro/Contratos estouravam sem rolagem
     · rodapé de modal com 3 botões estourava; cabeçalho do modal sumia ao rolar
     · alvos de toque de 22px (ícones de ação) → mínimo 40px
     · grades de 3 e 4 colunas (.form-grid-3/4, turnos, KPIs do resumo) nunca colapsavam
   Regra pra telas novas: use as classes de grade do sistema (.form-grid, .form-grid-3, .two-col…)
   e .data-table com span[data-th] nas células — a responsividade vem de graça.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── TABLET e abaixo (≤900px) ───────────────────────────── */
@media (max-width:900px){
  /* A. Contenção horizontal: nada estoura a largura da tela; filhos flex/grid podem encolher */
  html{overflow-x:hidden}   /* (v=1912) só no html: com o body junto, o body vira o scroll container e o sticky da topbar (☰) some */
  #main,.content,.panel{min-width:0;max-width:100%}
  .panel > *{min-width:0}
  .topbar > *{min-width:0}

  /* B. Grades de 3 e 4 colunas → 2 colunas */
  .form-grid-3,.form-grid-4,.turno-campos,.resumo-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid-3 .form-group.span-2,.form-grid-4 .form-group.span-2,.form-grid-4 .form-group.span-3{grid-column:1/-1}
  .chart-row{grid-template-columns:1fr !important}   /* Financeiro: gráficos lado a lado (inline "1fr 1fr" também) */
  /* B2. Classes de grade que vêm com estilo inline por cima (12 telas): o inline vence a folha, então aqui vai !important */
  .two-col,.dash-two,.form-grid,.agd-info-grid{grid-template-columns:1fr !important}
  /* B3. Grades inline SEM classe (≈36, quase todas em modais): 3 e 4 colunas viram 2 aqui e 1 no celular.
        Só pega os valores "1fr 1fr 1fr" e "repeat(3|4,1fr)" — grade com coluna em px (ícone + texto) e o
        calendário (repeat(7,1fr)) ficam como estão. */
  [style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important}
  /* B4. Modais com largura fixa maior que a tela (18 modais entre 580 e 820px): nunca passam da largura da tela */
  .modal{max-width:calc(100vw - 32px)}
  /* B5. Tabela crua de permissões (cadastro de usuário → Acessos): rola na horizontal em vez de cortar */
  .perm-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* B6. Cartões de lista cujo renderizador ainda não põe rótulo (data-th) nas células: ao menos separa os valores */
  .panel:not(#p-financeiro) .data-table:not(.vendas-table):not(.usuarios-table) .dt-row > span:not([data-th]):not(:first-of-type){border-top:1px dashed var(--border);padding-top:5px}

  /* C. Barras com muitos controles quebram linha em vez de espremer */
  .page-header,.fin-toolbar,.fin-filtros,.crm-toolbar,.search-row,.agenda-topbar{flex-wrap:wrap;gap:10px}

  /* D. Abas de sub-navegação (Financeiro, Contratos): rolam na horizontal em vez de estourar */
  .fin-tabs,.contrato-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .fin-tab,.ct-tab{flex:0 0 auto}

  /* E. Financeiro: as listas (extrato, vendas, parcelas…) não têm rótulo por célula, então em vez de
        virar cartão elas ROLAM na horizontal com as colunas na largura original — legível e sem cortar. */
  #p-financeiro .data-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #p-financeiro .lancamentos-head,#p-financeiro .lancamento-row,
  #p-financeiro .data-table .dt-head,#p-financeiro .data-table .dt-row{min-width:780px}   /* Contas a Pagar tem 9 colunas */

  /* F. Qualquer .data-table que NÃO virou cartão (exceções) também rola em vez de cortar */
  .data-table.vendas-table,.data-table.usuarios-table{overflow-x:auto}

  /* F2. Agenda SEMANAL: 7 dias com largura mínima e rolagem (antes espremia cada dia em ~45px) */
  .agw-grid{grid-template-columns:44px repeat(7,minmax(96px,1fr)) !important}
  /* F3. Marketplace/parceiros: produto com foto ao lado do texto → empilha */
  .mkt-prod-grid{grid-template-columns:1fr !important}
}

/* ───────────────────────────── CELULAR (≤560px) ───────────────────────────── */
@media (max-width:560px){
  /* G. Tudo em 1 coluna — inclusive as grades inline sem classe ("1fr 1fr…" e repeat(2|3|4,1fr)) */
  .form-grid-3,.form-grid-4,.turno-campos,.resumo-kpi-grid,.flt-grid{grid-template-columns:1fr}
  .stats-grid,.pagto-opts,.fin-row,.parcelas-row,.retorno-stats,.agv2-srv-cfg,.agv2-prof-card-grid{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],[style*="grid-template-columns: repeat(2,1fr)"]{grid-template-columns:1fr !important}
  /* repeat(3|4,1fr) costuma ser grade de CARTÕES de opção (tipo de agendamento, forma de pagamento): 2 por linha cabe e não fica uma torre */
  [style*="grid-template-columns:repeat(3,1fr)"],[style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns: repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  /* Financeiro: 6 KPIs em 1 coluna viravam uma torre de rolagem → 2 por linha */
  #p-financeiro .kpi-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .content{overflow-x:visible}   /* o base.css cortava aqui; a contenção agora é no html/body (bloco A) — devolve o sticky/popover dos filhos */

  /* H. Campos com 16px: o iPhone NÃO dá zoom ao focar (abaixo de 16px ele aproxima a tela e desalinha tudo) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  select,textarea{font-size:16px !important}

  /* I. Cabeçalho de página: título em cima, ações embaixo, esticadas (fácil de tocar) */
  .page-header{flex-direction:column;align-items:stretch;gap:10px}
  .page-header > *{margin-left:0 !important}
  .page-header .page-title{font-size:17px}
  .page-header > div{display:flex;flex-wrap:wrap;gap:8px}
  .page-header > button,.page-header > a,.page-header > div > button,.page-header > div > a{flex:1 1 auto;justify-content:center;min-height:40px}

  /* J. Alvos de toque ≥ 40px (recomendação de acessibilidade móvel) */
  .ic-btn{min-width:40px;min-height:40px;font-size:17px;display:inline-flex;align-items:center;justify-content:center}
  .btn-primary,.btn-ghost,.btn-danger,.btn-today{min-height:40px}
  .nav-btn{width:38px;height:38px}
  .dt-actions,.clausula-actions{flex-wrap:wrap;gap:6px}

  /* K. Modais: quase tela cheia, cabeçalho e rodapé sempre à vista, botões do rodapé quebram linha */
  .modal-overlay{padding:8px}
  .modal{width:calc(100vw - 16px) !important;max-width:none;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .modal > .modal-head,.modal > .modal-header{position:sticky;top:0;background:var(--surface);z-index:2;padding:12px 14px}
  .modal-body{padding:14px}
  .modal > .modal-footer{position:sticky;bottom:0;background:var(--surface);z-index:2}
  .modal-footer{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .modal-footer > button{flex:1 1 calc(50% - 4px);justify-content:center;min-height:42px}
  /* K2. Listas DENTRO de modal (bloqueios, saúde do sistema, logs de acesso): a regra de cartões do cadastros.css
        só alcança listas dentro de .panel; os modais ficam em #modals-container. Mesmo cartão, aqui. */
  .modal-overlay .data-table{border:none;background:transparent;overflow:visible;box-shadow:none}
  .modal-overlay .data-table .dt-head{display:none}
  .modal-overlay .data-table .dt-row{
    display:flex !important;flex-direction:column;align-items:stretch;gap:5px;grid-template-columns:none !important;
    border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:12px;background:var(--surface);
    padding:11px 13px;margin-bottom:8px;
  }
  .modal-overlay .data-table .dt-row > span:first-of-type{font-size:13.5px;font-weight:600;color:var(--txt)}
  .modal-overlay .data-table .dt-row > span[data-th]{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;font-size:12.5px;padding:5px 0;border-top:1px dashed var(--border)}
  .modal-overlay .data-table .dt-row > span[data-th]::before{content:attr(data-th);color:var(--txt3);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em;flex:0 0 76px}
  .modal-overlay .data-table .dt-row .dt-actions{display:flex !important;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:6px}

  /* L. Financeiro: filtros de período em duas colunas; KPI não corta o valor com "…" */
  .fin-filtros > input,.fin-filtros > select{flex:1 1 40%;min-width:0}
  .fin-filtros > button{flex:1 1 30%}
  .kpi-val,.kpi-value{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

  /* M. Tipografia: piso de leitura em rótulos de dado */
  .tag{font-size:11px}
  .dt-row > span[data-th]::before{font-size:10.5px}

  /* N. Agenda: coluna da hora mais estreita (sobra espaço pros profissionais), rótulo legível,
        grade não força altura maior que a tela em paisagem */
  :root{--time-w:44px}
  .tl{font-size:10px}
  .ag-scroll{max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);min-height:260px}
}