/* =================================================================
   ALINHAMENTO DE LARGURA - TABELA E CARDS DE LABORATÓRIOS
   ================================================================= */

/* 1. Container principal - define largura base consistente */
.laboratory-management-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* 2. Card de botões - estabelece largura de referência */
.table-header-card {
  width: 100%;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 0; /* Espaçamento vertical ajustado */
  /* Força largura fixa para servir como referência */
  box-sizing: border-box;
}

/* 3. Card da lista - herda largura exata do card de botões */
.table-content-card {
  width: 100%;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Garante que herde a largura do container pai */
  box-sizing: border-box;
}

/* 4. Tabela - ajustada para não ultrapassar limites */
.laboratory-table {
  width: 100%;
  table-layout: fixed; /* Força colunas com largura fixa */
  border-collapse: collapse;
  /* Evita overflow horizontal */
  max-width: 100%;
}

/* 5. Células da tabela - controle de overflow */
.laboratory-table th,
.laboratory-table td {
  padding: 0.75rem 1.5rem;
  text-align: left;
  /* Quebra texto longo sem quebrar layout */
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  /* Limita largura máxima das células */
  max-width: 0;
}

/* 6. Coluna de nome - largura flexível */
.laboratory-table .col-nome {
  width: 40%;
  min-width: 200px;
}

/* 7. Coluna de ID - largura fixa */
.laboratory-table .col-id {
  width: 25%;
  min-width: 150px;
}

/* 8. Coluna de data - largura fixa */
.laboratory-table .col-data {
  width: 20%;
  min-width: 120px;
}

/* 9. Coluna de ações - largura fixa */
.laboratory-table .col-acoes {
  width: 15%;
  min-width: 100px;
  text-align: center;
}

/* 10. Responsividade - tablets */
@media (max-width: 768px) {
  .laboratory-management-container {
    padding: 0 1rem;
  }
  
  .laboratory-table th,
  .laboratory-table td {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Ajusta proporções em telas menores */
  .laboratory-table .col-nome { width: 35%; }
  .laboratory-table .col-id { width: 30%; }
  .laboratory-table .col-data { width: 20%; }
  .laboratory-table .col-acoes { width: 15%; }
}

/* 11. Responsividade - mobile */
@media (max-width: 640px) {
  .laboratory-table {
    font-size: 0.75rem;
  }
  
  .laboratory-table th,
  .laboratory-table td {
    padding: 0.5rem 0.75rem;
  }
  
  /* Em mobile, prioriza nome e ações */
  .laboratory-table .col-nome { width: 50%; }
  .laboratory-table .col-id { display: none; } /* Oculta ID em mobile */
  .laboratory-table .col-data { width: 30%; }
  .laboratory-table .col-acoes { width: 20%; }
}

/* 12. Flexbox para equalizar larguras entre cards */
.laboratory-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Aumenta espacamento uniforme entre os cards */
  width: 100%;
}

.laboratory-cards-container > * {
  flex: 1;
  width: 100%;
  /* Força todos os cards a terem a mesma largura */
  min-width: 0;
}

/* 13. Prevenção de overflow na barra de busca */
.search-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.search-container input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 14. Botões de ação - largura consistente */
.action-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.action-buttons-container button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 15. Paginação - alinhamento consistente */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 640px) {
  .pagination-container {
    flex-direction: column;
    text-align: center;
  }
}