/* ---------- TABELA COMPACTA E RESPONSIVA ---------- */
.styled-table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.9rem;                   /* base desktop */
  font-family: Arial, sans-serif;
  min-width: 1100px;                   /* força scroll horizontal no mobile */
  width: 100%;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--background-color);
  color: var(--text-color);
}

/* Área rolável com inércia (mobile) + altura controlada */
.table-scroll {
  max-height: 65vh;
  overflow: auto;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.table-scroll::after { /* fade no rodapé ao rolar */
  content: "";
  position: sticky;
  bottom: -1px;
  display: block;
  height: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.25));
  pointer-events: none;
}

/* Cabeçalho */
.styled-table thead tr {
  background: var(--primary-color);
  color: #000;
  font-weight: bold;
  white-space: nowrap;
}
.styled-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--primary-color);    /* fixa a cor ao grudar */
}

/* Células */
.styled-table th,
.styled-table td {
  padding: 4px 6px;                    /* compacto */
  text-align: center;
  white-space: nowrap;                  /* evita quebra de números */
  border-bottom: 1px solid var(--background-color-2);
}

/* Listras */
.styled-table tbody tr:nth-of-type(even) {
  background: var(--background-color-2);
}
.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid var(--primary-color);
}

/* Sticky das 2 primeiras colunas (Concurso / Data)
   -> se preferir, adicione classes .col-concurso / .col-data no HTML e troque pelos seletores abaixo */
.styled-table th:nth-child(1),
.styled-table td:nth-child(1) {
  position: sticky; left: 0; z-index: 6;
  background: inherit;                  /* mantém o fundo */
  min-width: 76px;                      /* largura previsível */
}
.styled-table th:nth-child(2),
.styled-table td:nth-child(2) {
  position: sticky; left: 76px; z-index: 6;
  background: inherit;
  min-width: 100px;
}

/* Rodapé (Sequência/Atraso/Frequência) fixo ao fundo do wrapper */
.styled-table tfoot td {
  font-weight: 600;
  background: rgba(0,0,0,.08);
}
.table-scroll tfoot { position: sticky; bottom: 0; z-index: 4; }

/* Tema escuro */
body.dark-theme .styled-table { background: var(--background-color); color: var(--text-color); }
body.dark-theme .styled-table thead th { background: var(--primary-color); color: #000; }

/* Círculos (ajuste para mobile) */
.circle.small-circle {
  width: 22px; height: 22px; line-height: 22px;
  font-size: 12px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Toolbar/controles (mantém seu estilo) */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px;
  background: var(--background-color);
  border-radius: 10px;
}

/* Botão carregar */
.load-button,
#aplicar-janela {
  padding: 10px 20px;
  background: var(--primary-color);
  color: #fff;
  border: none; border-radius: 8px;
  cursor: pointer; font-size: 1rem; font-weight: 700;
  transition: transform .2s;
}
.load-button:hover, #aplicar-janela:hover { transform: scale(1.03); }
.load-button:focus, #aplicar-janela:focus { outline: none; }

/* ---------- RESPONSIVIDADE ---------- */
@media (max-width: 1000px) {
  .table-scroll { max-height: 60vh; }
  .styled-table { font-size: 0.85rem; }
  .styled-table th, .styled-table td { padding: 3px 5px; }
  .circle.small-circle { width: 20px; height: 20px; font-size: 11px; }
}

@media (max-width: 600px) {
  .table-scroll { max-height: 56vh; }
  .styled-table { font-size: 0.8rem; min-width: 980px; } /* um pouco menor, ainda com scroll */
  .styled-table th, .styled-table td { padding: 2px 4px; }
  .circle.small-circle { width: 18px; height: 18px; font-size: 10px; }
  /* ajusta offsets das colunas sticky p/ telas pequenas (mesmas larguras previstas) */
  .styled-table th:nth-child(1), .styled-table td:nth-child(1) { left: 0;  min-width: 70px; }
  .styled-table th:nth-child(2), .styled-table td:nth-child(2) { left: 70px; min-width: 92px; }
}

@media (max-width: 414px) {
  .styled-table { font-size: 0.75rem; }
  .circle.small-circle { width: 16px; height: 16px; font-size: 9px; }
}
/* ======== Tabela dentro do segundo modal ======== */
#secondModal .modal-large{
  display: flex;
  flex-direction: column;
  max-height: 85vh;     /* já é o seu padrão */
}

/* container da tabela ocupa o espaço disponível */
#secondModal .modal-table-container{
  flex: 1 1 auto;
  min-height: 0;        /* essencial p/ o filho poder rolar */
  padding: 0;           /* opcional */
}

/* wrapper rolável (vertical e horizontal) com inércia no iOS */
#secondModal #table-scroll-modal{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                     /* rola nos dois eixos */
  -webkit-overflow-scrolling: touch;  /* inércia no iOS */
  overscroll-behavior: contain;       /* não “vaza” pro fundo */
  touch-action: pan-x pan-y;          /* melhora gesto no mobile */
}

/* como a tabela é larga, garante o scroll horizontal */
#secondModal .styled-table{
  min-width: 980px;    /* pode manter 1100px se preferir */
}

/* sticky do header/foot continua funcionando no modal */
#secondModal .styled-table thead th{ top: 0; }
#secondModal .styled-table tfoot{ position: sticky; bottom: 0; z-index: 4; }