/* table-pagination.css -- controls for table-pagination.js. Generic,
   not soccer-specific, so it can be reused on any other table page
   later. */

.sm-pagination__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.9rem;
  color: #364258;
}

.sm-pagination__page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sm-pagination__page-size select {
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 0.88rem;
  color: #13233a;
  background: #ffffff;
  cursor: pointer;
}

.sm-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sm-pagination__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid #163f78;
  border-radius: 8px;
  background: #ffffff;
  color: #163f78;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.sm-pagination__nav button:hover:not(:disabled) {
  background: #eef3fa;
}

.sm-pagination__nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

.sm-pagination__indicator {
  white-space: nowrap;
  font-weight: 600;
}

.sm-page-meta {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #5a6b82;
}

@media (max-width: 560px) {
  .sm-pagination__controls {
    justify-content: center;
    text-align: center;
  }
}