/* trava o scroll do body quando modal está aberto */
body.has-empresas-modal {
  overflow: hidden !important;
}

/* overlay */
.overlay-empresas {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99998;
}

/* container do modal: agora é fullscreen + centralizado */
.popup-container-empresas {
  display: none;                 /* será alterado para flex via JS */
  position: fixed;
  inset: 0;                      /* ocupa a tela toda */
  z-index: 99999;
  align-items: center;           /* centraliza vertical */
  justify-content: center;       /* centraliza horizontal */
  padding: 24px;                 /* respiro nas bordas (responsivo) */
}

body.has-empresas-modal #navbar {
  z-index: 1 !important; /* ou 0 */
}

/* “card” do modal: vira layout flex vertical */
.modal-empresas {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 0px solid rgba(0,0,0,.08);

  width: min(1100px, 100%);
  max-height: calc(100vh - 48px); /* garante que nunca estoura a tela */
  display: flex;
  flex-direction: column;        /* header, body, footer empilhados */
}

.shadow-strong {
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* header */
.modal-empresas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px;
  color: #fff;
  flex: 0 0 auto;
}

.modal-empresas-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-empresas-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
}
.modal-empresas-close:hover {
  background: rgba(255,255,255,.14);
}

/* body: agora ocupa o espaço restante e rola */
.modal-empresas-body {
  padding: 16px 18px 10px 18px;
  overflow: auto;
  flex: 1 1 auto;          /* <- pega todo o espaço disponível */
  max-height: none;        /* <- tira o 70vh (não precisamos mais) */
}

.modal-empresas-subtitle {
  margin: 0 0 12px 0;
  color: #64748b;
  font-size: 14px;
}

/* barra de pesquisa */
.modal-empresas-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.modal-empresas-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  outline: none;
  font-size: 14px;
}
.modal-empresas-search:focus {
  border-color: rgba(47,85,212,.55);
  box-shadow: 0 0 0 3px rgba(47,85,212,.14);
}

/* tabela */
.modal-empresas-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
}

.modal-empresas-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* mantém scroll horizontal se precisar */
  font-size: 14px;
}

.modal-empresas-table thead th {
  background: #f3f6fb;
  color: #2b3b52;
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-weight: 600;
}

.modal-empresas-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
}

.modal-empresas-table tbody tr:hover {
  background: #f8fbff;
}

.emp-nome {
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.emp-razao {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

/* footer: sempre visível */
.modal-empresas-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;

  flex: 0 0 auto;
  position: sticky; /* gruda no final da área do modal quando rolar */
  bottom: 0;

  margin-right: 0;  /* <- removi seu margin-right:30px (desalinha) */
}

.btn-cancelar {
  white-space: nowrap; /* evita “quebrar” o texto do botão */
}

/* DESKTOP: a coluna nova não existe visualmente */
.modal-empresas-table th.col-razao,
.modal-empresas-table td.td-razao {
  display: none;
}

/* melhora geral contra overflow */
* { box-sizing: border-box; }

/* ===== MOBILE: tabela vira "cards" ===== */
@media (max-width: 768px) {

  /* MOBILE: não mostrar razão social "embaixo do cliente" */
  .modal-empresas-table tbody td[data-label="Cliente"] .emp-razao-desktop {
    display: none;
  }

  /* MOBILE: mostrar a célula Razão Social como um campo normal (label|valor) */
  .modal-empresas-table th.col-razao {
    display: none; /* thead já some no seu mobile, mas ok */
  }

  .modal-empresas-table td.td-razao {
    display: grid; /* porque no mobile seus td viram grid */
  }

.modal-empresas-table td span.emp-razao {
    display: none; /* esconde o span razão social*/
  }

  /* mais respiro e safe-area (iPhone) */
  .popup-container-empresas{
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* no mobile, não queremos scroll horizontal aqui */
  .modal-empresas-table-wrap{
    overflow: visible;          /* remove barra horizontal */
    border: 0;
  }

  /* remove largura mínima que força overflow */
  .modal-empresas-table{
    min-width: 0 !important;
    width: 100%;
  }

  /* esconde cabeçalho (os labels virão no td::before) */
  .modal-empresas-table thead{
    display: none;
  }

  /* cada linha vira um "card" */
  .modal-empresas-table tbody tr{
    display: block;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 12px;
    background: #fff;
  }

  .modal-empresas-table tbody td{
    display: grid;
    grid-template-columns: 90px 1fr; /* coluna do label + conteúdo */
    gap: 10px;
    padding: 8px 0;
    border: 0;
    align-items: start;
    text-align: left !important;     /* mata o inline text-align:right */
    white-space: normal;
    word-break: break-word;
  }

  /* label do campo (vem do data-label) */
  .modal-empresas-table tbody td::before{
    content: attr(data-label);
    font-weight: 700;
    color: #64748b;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 2px;
  }

  /* Cliente: deixa o texto confortável */
  .modal-empresas-table tbody td[data-label="Cliente"] .emp-nome{
    font-size: 14px;
  }

  /* Ações: botão sempre visível e ocupando 100% */
  .modal-empresas-table tbody td.td-acoes{
    grid-template-columns: 1fr;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  .modal-empresas-table tbody td.td-acoes::before{
    display: none;
  }

  .modal-empresas-table tbody td.td-acoes button{
    width: 100%;
  }

  /* footer: garante que não "empurre" largura */
  .modal-empresas-footer{
    position: relative; /* sticky às vezes dá comportamento estranho em iOS */
  }
}