/* =========================================================================
   Responsividade — NEW Intercambio CRM
   Ajustes para o CRM funcionar em celular e tablet sem quebrar o desktop.
   ========================================================================= */

/* Impede que um filho largo (tabela, linha de cards) estique a página inteira.
   Itens flex têm min-width:auto por padrão, o que permite passarem do container. */
.wrapper,
.main,
main.content,
.content > .container-fluid,
.tab-content {
  min-width: 0;
}

.main,
main.content {
  overflow-x: hidden;
  max-width: 100%;
}

/* O body nunca rola na horizontal */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* A navbar do topo se contém na largura disponível */
.navbar {
  max-width: 100%;
}
.navbar .navbar-collapse {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   Linha de cards de status (dashboard de Leads): rola na horizontal
   em vez de empurrar a página.
   ------------------------------------------------------------------------- */
#dashboard-status-count {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: .5rem;
  padding-bottom: .5rem;
}
#dashboard-status-count > * {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Tabelas largas: sempre rolam dentro do próprio container.
   ------------------------------------------------------------------------- */
.wrapper-table,
.table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabela solta dentro de um card (sem wrapper) também ganha rolagem */
.card-body > .table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* DataTables: a tabela rola na horizontal dentro do card */
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dataTables_wrapper > .row > [class^="col"] {
  max-width: 100%;
}
.dataTables_wrapper table.dataTable {
  white-space: nowrap;
}

/* select2 e campos nunca passam da largura do container */
.select2-container {
  max-width: 100%;
}
.form-control {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Telas até 767px (celular)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  main.content {
    padding: 1.25rem 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Títulos e barras de ação deixam de flutuar e empilham */
  h1.h2,
  h1.h3 {
    float: none !important;
    font-size: 1.35rem;
  }
  .content .float-right,
  .content .float-left {
    float: none !important;
    text-align: left !important;
  }
  .content .float-right .btn,
  .content .float-left .btn {
    margin: 0 .35rem .4rem 0;
  }

  /* Botões dentro de tabela não quebram no meio da palavra */
  td .btn,
  .btn-sm {
    white-space: nowrap;
  }

  /* Paginação grande ocupa menos espaço */
  .pagination-lg .page-link {
    padding: .5rem .75rem;
    font-size: .9rem;
  }

  /* Formulários de busca: cada campo em linha cheia com respiro.
     Zera as margens negativas da .row e o pr-0 de várias colunas,
     que causavam ~15px de vazamento à direita. */
  .card-body .row {
    margin-left: 0;
    margin-right: 0;
  }
  .card-body .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Colunas de conteúdo sem breakpoint (col-6, col-4...) ocupam a tela toda */
  main.content .container-fluid > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   Modais nunca passam da largura da tela
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    max-width: calc(100vw - 1rem);
    margin: .5rem auto;
  }
}

/* -------------------------------------------------------------------------
   Menu lateral (AdminKit 3.5): .sidebar = 260px; .collapsed = escondido.
   Desktop começa aberto; celular começa escondido (o hambúrguer abre).
   ------------------------------------------------------------------------- */
.sidebar .logo-sidebar { max-width: 150px; height: auto; }

@media (max-width: 991.98px) {
  /* menu aberto no celular ganha uma sombra pra separar do conteúdo */
  .sidebar.collapsed { box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
}