/* styles.tables.css */

.olhoNoJogoTable-container {
  margin-bottom: 20px;
  max-height: none;     /* Desktop: altura total */

  overflow-y: auto;
  border-radius: 8px;
}

.olhoNoJogoTable {
  width: 100%;
  background-color: #ffffffcc !important; /* Um pouco mais opaco para melhor contraste */
  color: #000; /* Garante texto preto */
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* border-collapse: collapse; */
  /* border-spacing: 0; */
  /* overflow: hidden; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.olhoNoJogoTable thead th {
  background-color: #343a40;
  color: #fff;
  padding: 4px 6px;         /* Aumenta o espaço interno */
  text-align: left;           /* Deixa o texto alinhado à esquerda (melhora leitura) */
  white-space: nowrap;        /* Impede quebra de linha (opcional) */
  font-size: 0.95rem;         /* Um pouco menor se for necessário */

  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1);
}

.olhoNoJogoTable th:not(:first-child),
.olhoNoJogoTable td:not(:first-child) {
  min-width: auto;
}

.olhoNoJogoTable thead th:first-child {
  border-top-left-radius: 10px;
}

.olhoNoJogoTable thead th:last-child {
  border-top-right-radius: 10px;
}

.olhoNoJogoTable tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Mantém a linha entre registros */
}

.olhoNoJogoTable tbody tr:last-child td {
  border-bottom: none;
}

/* Melhoria para mobile */
@media (max-width: 768px) {
  .olhoNoJogoTable-container {
    max-height: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Linha filha com sombra e transição */
.olhoNoJogoTable tr.detalhes {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  background-color: #fdfdfd62;
}

.olhoNoJogoTable tr.detalhes.mostrar {
  opacity: 1;
  max-height: 200px; /* ajuste conforme seu conteúdo */
  visibility: visible;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}