body { display: block; }
.full-page { font-family: sans-serif; padding:1rem; line-height: 1.4; max-width: 1400px; margin: 0 auto; }

.main-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.filters {
  flex: 0 0 250px;
  padding: 2px; /* Required for halo effect on select */
}

.filter-group {
  display: block;
  margin-bottom: 1rem;
}

.content-panel {
  flex: 1;
}

.dropdown-content {
  z-index: 2 !important;
}

.filter-group label { font-size:1rem; margin-bottom:0.3rem; display: block; }
.filter-group select,
.filter-group input { padding:.6rem .8rem; font-size:1rem; border:1px solid #bbb; border-radius:.5rem; width: 100%; box-sizing: border-box; }
.filter-group select:focus,
.filter-group input:focus { border-color:#888; }
.clearable { position: relative; }
.clearable input { width: 100%; box-sizing: border-box; }
table { border-collapse:collapse; width:100%; font-size:.95rem; }
thead { background:#dcd9d9; position:sticky; top:-1px; z-index:1; }
thead th { background:#dcd9d9;}

/*
td, th { border:1px solid #ddd; padding:.6rem !important; text-align:left; white-space:nowrap; }
*/
tbody tr:nth-child(even) { background:#fcfcfc; }
tbody tr:hover { background:#f5faff; }
.pagination { margin-top:1rem; text-align:center; }
.pagination button { margin:0 .2rem; padding:.4rem .8rem; }

@media (max-width: 800px) {
  .main-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .filters, .content-panel {
    flex-basis: auto;
    width: 100%;
  }
  table {
    display: block;
    width: 100%;
    margin: 0 auto;
    border: none;
  }
  tbody {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
  }
  tbody tr td[data-label="Date"] { display: none; }
  .date-in-event { display: block; margin-top: 0; margin-left: auto; color: #555; font-size: 0.9rem; }
  .event-cell { display: flex; align-items: center; gap: 0.25rem; }
  tbody tr td[data-label="Round"]:empty { display: none; }
  thead { display: none; }
  tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 0;

    width: 100%;
    box-sizing: border-box;
    margin: 0 auto 1rem;
  }
  tbody tr td {
    /* remove default cell borders, only horizontal dividers */
    border: none;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    white-space: normal;
    padding: 0.5rem;
  }
  tbody tr td:last-child { border-bottom: none; }
  tbody tr td::before {
    display: none;
  }
  .ss-main {
    width: 100% !important;
  }
  .matchup-cell {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  /* center the entire matchup line within its card cell */
  tbody tr td[data-label="Matchup"] {
    justify-content: center;
  }
  tbody tr td[data-label="Round"] {
    justify-content: center;
    font-size: 0.9rem;
    color: #555;
  }

  tbody tr td[data-label="VOD"] {
    padding: 0;
  }
  tbody tr td[data-label="VOD"] a.vod-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.75rem 0;
    background-color: #fde0e0;
    color: #e63946;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 0 0 0.5rem 0.5rem;
  }
}

@media (min-width: 801px) {
  #vodTable tbody tr > td, 
  #vodTable thead tr > th { border:1px solid #ddd; padding:.6rem; text-align:left; white-space:nowrap; }
  .filters {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    /* overflow-y: auto; */
  }
  .date-in-event { display: none; }
  /* center VS on desktop with grid layout */
  .matchup-cell {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  /* Desktop VS alignment override */
  #vodTable .matchup-cell {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    align-items: center !important;
    min-height: 24px;
  }
  #vodTable .matchup-cell > .player-info:first-child {
    justify-self: start !important;
  }
  #vodTable .matchup-cell > .versus {
    justify-self: center !important;
  }
  #vodTable .matchup-cell > .player-info:last-child {
    justify-self: end !important;
  }
  /* enforce VS centering via absolute positioning */
  #vodTable .matchup-cell {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #vodTable .matchup-cell .versus {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
}

.searchable-select {
  position: relative;
  font-family: inherit;
}

.searchable-select input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 1px solid #bbb;
  border-radius: 0.5rem;
  outline: none;
  box-sizing: border-box;
}

.clear-btn {
  position: absolute;
  top: 50%;                    /* vertically center */
  right: 0.8rem;               /* inset from right edge of input */
  transform: translateY(-50%); /* shift up by half its height */
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  display: none;
  padding: 0;
  line-height: 1;
  opacity: 50%;
}

.searchable-select .options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #bbb;
  border-top: none;
  background: #fff;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.searchable-select .options li {
  padding: 0.5rem;
  cursor: pointer;
}

.searchable-select .options li:hover {
  background: #f0f0f0;
}

.matchup-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.player-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.player-info .chars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.player-info img {
  height: 24px;
}
.versus { font-weight: bold; margin: 0 0.5rem; }

/* Slim Select custom styles to match native look */
.ss-main, .ss-content {
  font-size: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #bbb;
  padding: 0;
  min-height: 40px;
}
.ss-content {
  border-radius: 0 !important; /* Square corners for dropdown */
  font-size: 16px !important;
  color: #000 !important;
  animation: none !important;
  transition: none !important;
  max-height: 600px !important; /* Increase dropdown height */
}
.ss-content .ss-option {
  padding: 6px !important;
  color: #000 !important;
  font-size: 16px !important;
}
.ss-main .ss-single-selected img,
.ss-content .ss-option img {
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}
.ss-main .ss-placeholder {
  color: #888;
}
.ss-main {
  padding: 0.6rem 0.8rem;
  color: #000;
}

.ss-main.placeholder-selected {
  color: #888;
}