/* =========================================================
 * RESPONSIVIDADE — Fatia R1 (Catálogo, Estoque, OS, Locação,
 * Alertas e estruturas comuns).
 *
 * Padrão de 3 breakpoints:
 *   --bp-mobile : até 640px   (celular em pé)
 *   --bp-tablet : até 1024px  (celular deitado, tablet em pé)
 *   --bp-desk   : ≥ 1024px    (desktop)
 *
 * Estratégia: classes utilitárias + overrides com !important
 * pros estilos inline da Fatia 10 (que usam style="..." direto).
 * Ruim em teoria, mas o sistema legado não usa classes — sem
 * isso teríamos que reescrever tudo.
 * ========================================================= */

:root {
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
}

/* ─────────────────────────────────────────────────────────────
 * MOBILE — até 640px
 * Foco: tudo empilhado, fontes legíveis, alvos de toque ≥ 44px
 * ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ──── Grids "1fr 1fr" da Fatia 10 viram 1 coluna ──── */
  /* Identificadores típicos: pares de campos em modais */
  .sub-pane [style*="grid-template-columns:1fr 1fr"],
  .sub-pane [style*="grid-template-columns: 1fr 1fr"],
  #view-os [style*="grid-template-columns:1fr 1fr"],
  #view-os [style*="grid-template-columns: 1fr 1fr"],
  [id^="sub-cat-loja"] [style*="grid-template-columns:1fr 1fr"],
  [id^="sub-locacao"] [style*="grid-template-columns:1fr 1fr"],
  [id^="sub-estoque"] [style*="grid-template-columns:1fr 1fr"],
  [id^="cat-modal-ovl"] [style*="grid-template-columns:1fr 1fr"],
  [id^="loc-modal-ovl"] [style*="grid-template-columns:1fr 1fr"],
  [id^="os-modal-ovl"] [style*="grid-template-columns:1fr 1fr"],
  [id^="est-modal-ovl"] [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ──── Grids "2fr 1fr" e "1fr 2fr" (também viram 1 coluna) ──── */
  .sub-pane [style*="grid-template-columns:2fr 1fr"],
  .sub-pane [style*="grid-template-columns:1fr 2fr"],
  #view-os [style*="grid-template-columns:2fr 1fr"],
  #view-os [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ──── Grids 3 colunas ("1fr 1fr 1fr") viram 1 coluna ──── */
  .sub-pane [style*="grid-template-columns:1fr 1fr 1fr"],
  [id^="cat-modal-ovl"] [style*="grid-template-columns:1fr 1fr 1fr"],
  [id^="loc-modal-ovl"] [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ──── Tabelas com colunas fixas (Catálogo, Estoque) ──── */
  /* As tabelas usam grid-template-columns com pixels fixos.
     No celular, transformamos em "cards empilhados" mantendo
     a primeira coluna grande e empilhando o resto. */
  [style*="grid-template-columns:1fr 90px"],
  [style*="grid-template-columns: 1fr 90px"],
  [style*="grid-template-columns:1fr 100px"],
  [style*="grid-template-columns:1fr 110px"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 12px !important;
  }
  /* Esconde header da "tabela" (linha de títulos) em mobile */
  .sub-pane [style*="text-transform:uppercase"][style*="grid-template-columns"],
  #view-os [style*="text-transform:uppercase"][style*="grid-template-columns"] {
    display: none !important;
  }
  /* Cada célula da linha vira display flex com label inline */
  .sub-pane [style*="text-align:right"][style*="font-family:ui-monospace"] {
    text-align: left !important;
  }

  /* ──── Cards de OS abertas ──── */
  /* Já usam auto-fill,minmax(380px,1fr) — vai pra 1 coluna sozinho.
     Só ajusto o min: 380px é grande demais pra mobile. */
  #view-os [style*="minmax(380px"] {
    grid-template-columns: 1fr !important;
  }
  /* Mesmo pra Locação ativa */
  [id^="sub-locacao"] [style*="minmax(360px"],
  [id^="sub-locacao"] [style*="minmax(380px"] {
    grid-template-columns: 1fr !important;
  }

  /* ──── Modais: largura total em celular ──── */
  #cat-modal-ovl > div,
  #loc-modal-ovl > div,
  #os-modal-ovl > div,
  #est-modal-ovl > div {
    max-width: 100% !important;
    width: calc(100vw - 16px) !important;
    margin: 0 8px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  #cat-modal-ovl,
  #loc-modal-ovl,
  #os-modal-ovl,
  #est-modal-ovl {
    padding: 8px !important;
    align-items: flex-start !important;
  }

  /* ──── Filtros: barra com input + selects + botões ──── */
  /* Eles usam display:flex com flex-wrap, mas em celular fica feio.
     Forço empilhamento. */
  .sub-pane [style*="flex-wrap:wrap"][style*="align-items:center"] > input[type="text"],
  .sub-pane [style*="flex-wrap:wrap"][style*="align-items:center"] > select,
  #view-os [style*="flex-wrap:wrap"][style*="align-items:center"] > input[type="text"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* ──── Botões: alvo de toque mínimo 40px ──── */
  /* Sem aumentar todos (causaria estrago em telas densas).
     Foco nos botões da Fatia 10. */
  [id^="sub-cat-loja"] button.btn,
  [id^="sub-cat-loja"] button[onclick],
  [id^="sub-locacao"] button.btn,
  [id^="sub-estoque"] button.btn,
  #view-os button.btn {
    min-height: 38px;
  }
  /* Exceto os "btn-sm" e ações inline em listas */
  [id^="sub-cat-loja"] button.btn-sm,
  [id^="sub-locacao"] button.btn-sm,
  [id^="sub-estoque"] button.btn-sm,
  #view-os button.btn-sm {
    min-height: 32px;
  }

  /* ──── Tabs internas dos módulos (quando empilham) ──── */
  /* Ex: tabs "OS Abertas | Nova OS | Histórico" */
  #view-os > div > div[style*="border-bottom:1px solid"] button.btn,
  [id^="sub-cat-loja"] [style*="border-bottom:2px solid"] button.sub-tab {
    flex: 1 1 auto;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* ──── KPIs: grids auto-fit com minmax ──── */
  /* Já são responsivos, mas alguns ficam apertados. Ajuste fino. */
  [style*="minmax(170px"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  [style*="minmax(220px"] { grid-template-columns: 1fr !important; }

  /* ──── Aba "OS" no topo: tab pode ficar apertada ──── */
  #tab-aba-os {
    font-size: 12px !important;
  }

  /* ──── Comprovante de OS impresso: não responsivo, fica como está ──── */
  /* (gera HTML novo em outra janela, não afeta) */

  /* ──── Widget de alertas: cards menores ──── */
  #alertas-loja-widget [style*="minmax(220px"] {
    grid-template-columns: 1fr !important;
  }

  /* ──── Modais com max-height controlado: usar viewport mobile ──── */
  #cat-modal-ovl > div,
  #loc-modal-ovl > div,
  #os-modal-ovl > div,
  #est-modal-ovl > div {
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
  }

  /* ──── Inputs: zoom safari iOS quando font-size < 16px ──── */
  /* Truque: aumentar font do input pra 16px específico em mobile,
     evita zoom automático ao focar. */
  .sub-pane input[type="text"],
  .sub-pane input[type="number"],
  .sub-pane input[type="date"],
  .sub-pane select,
  .sub-pane textarea,
  #view-os input,
  #view-os select,
  #view-os textarea {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * TABLET — 641px até 1024px
 * Foco: 2 colunas onde fizer sentido, modais médios
 * ─────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Grids "1fr 1fr 1fr" (3 colunas) ficam 2 colunas em tablet */
  .sub-pane [style*="grid-template-columns:1fr 1fr 1fr"],
  [id^="cat-modal-ovl"] [style*="grid-template-columns:1fr 1fr 1fr"],
  [id^="loc-modal-ovl"] [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modais: 90% da largura mas com max */
  #cat-modal-ovl > div,
  #loc-modal-ovl > div,
  #os-modal-ovl > div,
  #est-modal-ovl > div {
    max-width: 90vw !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * UTILITÁRIOS RESPONSIVOS
 * Pra usar em código novo: classes em vez de inline.
 * ─────────────────────────────────────────────────────────── */
.r-hide-mobile { display: revert; }
.r-only-mobile { display: none; }
@media (max-width: 640px) {
  .r-hide-mobile { display: none !important; }
  .r-only-mobile { display: revert !important; }
}

.r-stack-mobile { display: grid; gap: 10px; }
@media (max-width: 640px) {
  .r-stack-mobile { grid-template-columns: 1fr !important; }
}