/* Ajustes de tablet e celular (auditoria de 2026-11-02). Carregado por último de propósito: só corrige o que estourava a largura.
   Causas tratadas: (1) barras de abas em grid de colunas fixas, (2) cartões-resumo com colunas fixas, (3) painéis com coluna fixa,
   (4) filhos de grid que crescem até o conteúdo (tabela de 1800 px dentro de janela), (5) PDV sem total à vista no celular. */

/* Filhos de grid/janela nunca crescem além do espaço: a tabela rola dentro do .table-wrap em vez de alargar a janela inteira */
.entry-form { grid-template-columns: minmax(0, 1fr); }
.entry-form > * { min-width: 0; }
.table-wrap { max-width: 100%; }

@media (max-width: 1024px) {
  .budget-layout { grid-template-columns: minmax(0, 1fr); }
}

.platform-layout { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.platform-layout > * { min-width: 0; }

@media (max-width: 900px) {
  /* Barras de abas: uma linha só com rolagem horizontal (antes eram colunas de 130–160 px que passavam da tela) */
  .report-tabs, .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .report-tabs > *, .tabs > * { flex: 0 0 auto; min-width: 110px; white-space: nowrap; scroll-snap-align: start; }
  .tab { padding: 0 18px; }

  /* Cartões-resumo: quantas colunas couberem (o de Combustível trazia 8 colunas em estilo inline) */
  .cp-summary-cards, #combSummarySection { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

@media (max-width: 720px) {
  /* Toque: abas de tipo em Produtos tinham 22 px de altura */
  .product-type-tab { min-height: 38px; }
}

/* ── PDV no celular: barra fixa com o total e atalho para o carrinho ── */
.pdv-mobile-bar { display: none; }
@media (max-width: 900px) {
  #pdvView { padding-bottom: 84px; }
  .pdv-mobile-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--gp-navy);
    box-shadow: 0 -4px 16px rgba(8, 36, 59, .25);
    transition: transform .2s;
  }
  .pdv-mobile-bar.is-hidden { transform: translateY(110%); pointer-events: none; }
  .pdv-mobile-bar button {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    border: 0; border-radius: 12px; padding: 12px 14px;
    background: var(--gp-gold); color: var(--gp-navy);
    font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  }
  .pdv-mobile-bar button .material-icons-round { font-size: 22px; }
  .pdv-mobile-bar button span:nth-child(2) { flex: 1; text-align: left; }
  .pdv-mobile-bar button strong { font-size: 18px; font-variant-numeric: tabular-nums; }
}

/* Grades de duas colunas com a 1ª fixa (360/420 px) viram uma coluna só em tablet em pé e celular */
@media (max-width: 900px) {
  .settings-layout, .assistant-layout, .training-layout, .support-layout, .cm-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-layout > *, .assistant-layout > *, .training-layout > *, .support-layout > *, .cm-grid > * { min-width: 0; }
}
@media (max-width: 720px) {
  .assistant-analysis-form { grid-template-columns: minmax(0, 1fr); }
  .platform-client-actions { min-width: 0; grid-template-columns: 1fr 1fr; }
}

/* Tabela dentro de janela rola dentro do próprio quadro (a de parcelas da NFS-e passava da janela) */
.entry-dialog .table-wrap { overflow-x: auto; }

/* Grades com estilo inline (≈50 no HTML): colunas "1fr" crescem até o conteúdo e passavam da tela (ex.: Combustível > Resumos, com 5.000 px).
   Em tablet em pé/celular viram minmax(0,1fr) e as de 3+ colunas se reorganizam. O !important é necessário por causa do estilo inline. */
[style*="grid-template-columns"] > * { min-width: 0; }
@media (max-width: 900px) {
  .subscription-grid { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
  .subscription-grid > * { min-width: 0; overflow-wrap: anywhere; }
  [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 720px) {
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"], [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(6,1fr)"], [style*="repeat(8,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="2fr 1fr auto"], [style*="3fr 1fr 1fr auto"], [style*="1fr 3fr 1fr 1fr auto"], [style*="1fr 110px 1fr auto"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Painéis com tabela solta (sem .table-wrap, ex.: Combustível > Resumos) rolam por dentro; janelas com tabela idem
   (a de parcelas da NFS-e trazia overflow:visible inline). */
@media (max-width: 900px) {
  .table-panel { overflow-x: auto; }
  .entry-dialog .table-wrap { overflow-x: auto !important; }
}
/* Rede de segurança no celular: sobra de poucos pixels não faz a página inteira rolar de lado (clip não cria rolagem, não quebra o menu fixo) */
@media (max-width: 720px) {
  html, body { overflow-x: clip; }
}

/* Formulários em grade: no celular a grade vira 1 coluna, mas campos com "grid-column: span 2" criavam uma 2ª coluna implícita e estouravam a janela */
@media (max-width: 600px) {
  .product-form-grid > * { grid-column: 1 / -1 !important; }
}

/* Janelas no celular: colunas de grade/label nunca passam do espaço (o conteúdo "mínimo" de um select/campo largo alargava tudo) e os recuos
   em cascata (janela 22 + aba 22 + cartão 16) comiam metade da largura útil. */
@media (max-width: 720px) {
  .entry-form { padding: 16px; }
  .entry-form label { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .gp-searchable-select { min-width: 0; max-width: 100%; }
  .product-tabpanel { padding-left: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  .product-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* O select nativo escondido do campo com busca herdava min-width:160px e saía do próprio quadro (+55 px no Calendário em tablet) */
.gp-searchable-select-native { min-width: 0 !important; max-width: 100% !important; }

/* Combustível > Resumos: três tabelas lado a lado sem .table-wrap passavam da tela até em 1024 px */
#combustivelView .table-panel { overflow-x: auto; }

/* Painel Gerencial: os painéis "Período" e "Mais filtros" eram ancorados à DIREITA do botão com 360 px de largura; como o botão fica
   à esquerda no celular/tablet em pé, o painel passava da borda esquerda da tela (começava em -206 px). Agora ficam ancorados à
   barra de filtros inteira, alinhados à esquerda e nunca maiores que ela. */
@media (max-width: 900px) {
  .home-top-actions { position: relative; }
  .hf-wrap { position: static; }
  .hf-pop { left: 0; right: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow-y: auto; }
}