/* Right-align title columns in header and cells */
.pairingsTable thead th.col-tit-white,
.pairingsTable thead th.col-tit-black,
.pairingsTable td.col-tit-white,
.pairingsTable td.col-tit-black {
  text-align: right;
}
/* Pairings table styles — adapted to rankings look: compact, yellow header, sticky head */
.pairingsDiv {
  overflow: auto; /* enable internal scrolling so sticky headers work */
}

.pairingsTable {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

/* Compact header paddings */
.pairingsTable thead th {
  background-color: #fef200;
  padding: 2px 4px;
  border: 1px solid #d0d0d0;
  font-size: 13px;
  text-align: left;
  z-index: 3;
  box-sizing: border-box;
}

/* Center header for Pkte and Erg. columns */
.pairingsTable thead th.col-pkte-white,
.pairingsTable thead th.col-pkte-black,
.pairingsTable thead th.col-erg {
  text-align: center;
}

/* Round select row (top header) stays on top */
.pairingsTable thead tr.pairings-round-select-row th {
  position: sticky;
  top: 0;
  background-color: #fef200;
  padding: 2px 4px;
  z-index: 6;
}

/* Make the inner header container flexible and allow wrapping */
.pairingsTable thead tr.pairings-round-select-row th > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* allow children to wrap to next line */
}

/* The column header row sits below the round-select row and sticks below it */
.pairingsTable thead tr:not(.pairings-round-select-row) th {
  position: sticky;
  top: 30px; /* adjusted for compact header height */
  background-color: #fef200;
  z-index: 5;
}

/* Cells compact */
.pairingsTable td {
  padding: 2px 2px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Center cell content for Pkte and Erg. columns */
.pairingsTable td.col-pkte-white,
.pairingsTable td.col-pkte-black,
.pairingsTable td.col-erg {
  text-align: center;
}
.pairingsTable td.col-erg {font-weight: 700;}

/* Center the points columns and make sure parentheses are visible and centered */
.pairingsTable td.col-pkte-white,
.pairingsTable td.col-pkte-black {
  text-align: center;
  font-weight: normal;
}

/* For stacked layout, center the two pkt lines */
.main-copy.main-pkt,
.paired-copy.paired-pkt {
  text-align: center;
}

/* Right-align black # column */
.pairingsTable td.col-nr-black {
  text-align: right;
}

.pairingsTable tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.pairingsTable tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Compact link style like rankings */
.pairingsTable .stl_link_name {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

/* Favorite highlight uses same class as rankings */
.row-favorite {
  background-color: plum;
}

/* Highlight for individual favorite cells (board cell + the favorite's own cells) */
.cell-favorite {
  background-color: plum;
}
.pairingsTable td.col-brett.cell-favorite {
  background-color: plum;
  font-weight: 700;
}

/* Filter / input styling inside header */
.pairings-round-input,
.pairings-searchInput {
  padding: 3px 5px;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-size: 13px;
}

.pairings-favs-filter-star {
  cursor: pointer;
  font-size: 1.1em;
}



/* Fixed column widths using colgroup classes for reliability */
.pairingsTable col.col-brett         { width: 25px; min-width:25px; max-width:25px; }
.pairingsTable col.col-nr-white      { width: 30px; min-width:30px; max-width:30px; }
.pairingsTable col.col-tit-white     { width: 30px; min-width:30px; max-width:30px; }
.pairingsTable .col-name-white    { width: 120px; min-width:80px; max-width:180px; }
.pairingsTable col.col-pkte-white    { width: 33px; min-width:33px; max-width:33px; }
.pairingsTable col.col-erg           { width: 45px; min-width:45px; max-width:45px; }
.pairingsTable col.col-pkte-black    { width: 33px; min-width:33px; max-width:33px; }
.pairingsTable col.col-tit-black     { width: 30px; min-width:30px; max-width:30px; }
.pairingsTable col.col-name-black    { width: 120px; min-width:80px; max-width:180px; }
.pairingsTable col.col-nr-black      { width: 30px; min-width:30px; max-width:30px; }

/* Responsive: allow horizontal scroll on small screens */
@media (max-width: 767px) {
  .pairingsDiv {
    overflow-x: auto;
  }
  .pairingsTable thead tr:not(.pairings-round-select-row) th {
    top: 28px;
  }
  /* For stacked layout we render rows differently via JS renderer; keep CSS minimal here. */
}

/* Default (wide screens): hide stacked erg and show main result */
.pairingsTable td.col-erg .erg-stacked { display: none; }
.pairingsTable td.col-erg .erg-main { display: block; }

/* Vertical result for stacked layout (renderer supplies .erg-vertical) */
.erg-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  text-align: center;
  font-weight: 700;
  padding: 2px 4px;
}

.erg-vertical .erg-line {
  line-height: 1;
  padding: 0;
  margin: 0;
  min-width: 18px;
}

/* top/bottom erg lines inherit styles from .erg-line */

/* Small utility to reduce cell content when needed */
.pairingsTable td > div {
  overflow: hidden;
  text-overflow: ellipsis;
}