/* Vanilla CSS for the TV display pages. Targets very old smart-TV
   browsers (~Chromium 38) so no CSS variables, custom properties,
   :is/:where, aspect-ratio, etc. */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.display-body {
  font-family: Arial, sans-serif;
  color: #1a1a1a;
  background-color: #ffffff;
  overflow: hidden;
}

a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; padding: 0; }

/* ---------- Picker page ---------- */

/* The picker shares the .display-body theme but needs to scroll when there
   are many units or tournaments. Override height/overflow so the page can
   grow past the viewport. */
body.picker-body {
  height: auto;
  min-height: 100%;
  overflow: auto;
}

.picker-content {
  display: block;
  margin: 20px auto;
  max-width: 1100px;
  padding: 0 16px;
}

.picker-content h1 {
  text-align: center;
  font-size: 22pt;
  margin-bottom: 8px;
}

.picker-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 auto;
  max-width: 1100px;
}

.picker-col {
  flex: 1 1 360px;
  min-width: 280px;
}

.picker-col-title {
  font-size: 15pt;
  font-weight: normal;
  color: #00498f;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d8d8d8;
}

.unit-list {
  display: block;
}

.unit {
  display: block;
  margin: 8px 0;
  background-color: #f2f2f2;
  border-radius: 6px;
  overflow: hidden;
}

.unit-header {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16pt;
  font-weight: bold;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.unit-header:focus { outline: 2px solid #00498f; outline-offset: -2px; }

.unit-name { display: inline-block; }

.unit-toggle {
  float: right;
  width: 1em;
  height: 1em;
  text-align: center;
  line-height: 1;
  color: #666;
}

.unit-toggle:before { content: '\25B8'; }                    /* ▸ collapsed */
.unit[data-collapsed='false'] .unit-toggle:before { content: '\25BE'; } /* ▾ expanded */

.unit-body {
  padding: 0 16px 12px 16px;
}

.unit[data-collapsed='true'] .unit-body { display: none; }

.unit.locked .unit-header { cursor: default; }
.unit.locked .unit-toggle { opacity: 0.35; }

.venue-list, .court-list, .tournament-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.venue-list { margin-left: 12px; }
.court-list { margin-left: 16px; font-size: 14pt; }
.court-list li, .tournament-list li { padding: 4px 0; }

.venue-list h2 {
  color: #00498f;
  font-size: 13pt;
  font-weight: normal;
  margin-top: 6px;
}

.court-id-display, .tournament-id-display {
  display: none;
  margin-left: 6px;
  color: #888;
  font-size: 11pt;
}

.tournament-list {
  display: block;
  margin: 0;
  padding: 8px 16px;
  background-color: #f2f2f2;
  border-radius: 6px;
}

.tournament-list-extra {
  margin-top: 8px;
}

.tournament-item {
  padding: 6px 0;
}
.tournament-item + .tournament-item {
  border-top: 1px solid #e2e2e2;
}

.tournament-name { font-size: 14pt; }

.show-more {
  display: block;
  margin: 8px auto 0;
  padding: 6px 14px;
  border: 1px solid #ccc;
  background-color: #fafafa;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11pt;
  color: #00498f;
}

.tournament-date {
  margin: 0 0 0 25px;
  font-size: 11pt;
  color: darkgreen;
}

.multiple-section {
  display: block;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px;
  margin-top: 20px;
}

.description-section {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 10px;
  max-width: 320px;
  min-width: 180px;
  min-height: 100px;
  text-align: left;
}

.description-section table {
  font-size: 11pt;
  border-collapse: collapse;
}

.description-section th {
  text-align: left;
  font-weight: normal;
  padding-right: 6px;
}

.description-section input[type='number'] {
  width: 60px;
}

.show-court-id {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fafafa;
  cursor: pointer;
  font-size: 11pt;
}

.picker-submit {
  padding: 12px 18px;
  border: 1px solid #ddd;
  background-color: #f3f3f3;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13pt;
  color: #008000;
}

/* ---------- Display grid (mixed court cards + tournament boards) ---------- */

#display_container {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: #263238;
  color: #ffffff;
}

body.color-light    #display_container { background-color: #fcfcfc; color: #111111; }
body.color-contrast #display_container { background-color: #000000; color: #ffffff; }

#screensaver, .screensaver {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1000;
  background-color: #222;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../../../images/tv_splash_1280.png');
}

.court-card {
  box-sizing: border-box;
  overflow: hidden;
  border-color: #007bae;
  border-style: solid;
  border-width: 0;
}

.court-card:not(.last-row)    { border-bottom-width: 1px; }
.court-card:not(.last-column) { border-right-width: 1px; }

/* Header band reserved for the court name (left) and the match category
   + class description (right). The team rows below are offset so the
   label band has its own space even when team text fills its box. */
.court-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  padding: 0 1.5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.court-label-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.court-label-right {
  flex: 0 0 auto;
  padding-left: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
body.color-light .court-label    { color: rgba(0, 0, 0, 0.5); }
body.color-contrast .court-label { color: #ffffff; }

/* Court card layout mirrors the original courtControl: each team-half
   stacks player-names → club-names → sets, with the sets row pushed to
   the inner edge (toward the card's horizontal midline). The score
   occupies the right column at full team height with text centered
   vertically — its alignment to the player-name comes from the overall
   layout symmetry, not from a shared baseline. */
.court-card .court-team {
  position: absolute;
  left: 0;
  right: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
}

/* Top 8% reserved for .court-label, remaining 92% split equally between
   the two teams. */
.court-card .court-team-1 { top: 8%;  bottom: 46%; }
.court-card .court-team-2 { top: 54%; bottom: 0;   }

/* Score: full team height on the right, text vertically + horizontally
   centered. */
.court-card .court-score {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

/* Player + club names occupy 60% of each team, on the OUTER edge:
     top team   → upper 60% (top 0% → 60% of team)
     bottom team → lower 60% (top 40% → 100% of team)
   Player-names is the upper half of that block, club-row the lower.
   The club-row is a flex container so an optional team logo can sit to
   the left of the club name without disturbing the fit logic — fit
   measures the club-name's box width, which excludes the logo's width
   automatically. */
.court-card .court-player-names {
  position: absolute;
  left: 4%;
  right: 23%;
  height: 30%;
  display: flex;
  align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
}

.court-card .court-team-row {
  position: absolute;
  left: 4%;
  right: 23%;
  height: 30%;
  display: flex;
  align-items: stretch;
}

.court-card .court-team-1 .court-player-names { top: 0; }
.court-card .court-team-1 .court-team-row     { top: 30%; }

.court-card .court-team-2 .court-player-names { top: 40%; }
.court-card .court-team-2 .court-team-row     { bottom: 0; }

.court-card .court-team-logo {
  height: 100%;
  max-width: 30%;
  width: auto;
  object-fit: contain;
  object-position: left bottom;
  flex-shrink: 0;
}

.court-card .court-team-names {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  line-height: 1;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 0.4em;
}

/* Set history sits at the INNER edge of each team — bottom 40% of the
   top team, top 40% of the bottom team — so the two sets rows sit next
   to each other across the card's midline. Each historic set has a
   fixed slot (set 1 leftmost, set 4 rightmost) so finished sets fill
   in left-to-right as the match progresses, matching the original. */
.court-card .court-set-history {
  position: absolute;
  left: 4%;
  right: 23%;
}
.court-card .court-team-1 .court-set-history { top: 60%; bottom: 4%; }
.court-card .court-team-2 .court-set-history { top: 4%; bottom: 60%; }

.court-card .court-set-history .court-set {
  position: absolute;
  display: none;
  top: 0;
  bottom: 0;
  width: 25%;
  line-height: 1;
  font-weight: bold;
  opacity: 0.7;
  white-space: nowrap;
}
.court-card .court-set-history .court-set.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
.court-card .court-set-history .court-set-1 { left: 0; }
.court-card .court-set-history .court-set-2 { left: 25%; }
.court-card .court-set-history .court-set-3 { left: 50%; }
.court-card .court-set-history .court-set-4 { left: 75%; }

/* Team 1 = blue / brand colour */
.court-card .court-team-1 { color: #00aaff; }
.court-card .court-team-1.is-serving { background-color: rgba(0, 170, 255, 0.12); }
body.color-light .court-card .court-team-1 { color: #005580; }
body.color-light .court-card .court-team-1.is-serving { background-color: rgba(0, 85, 128, 0.10); }
body.color-contrast .court-card .court-team-1 { color: #dc6427; }
body.color-contrast .court-card .court-team-1.is-serving { background-color: rgba(220, 100, 39, 0.18); }

/* Team 2 = white / second colour */
.court-card .court-team-2 { color: #ffffff; }
.court-card .court-team-2.is-serving { background-color: rgba(255, 255, 255, 0.10); }
body.color-light .court-card .court-team-2 { color: #333333; }
body.color-light .court-card .court-team-2.is-serving { background-color: rgba(0, 0, 0, 0.06); }
body.color-contrast .court-card .court-team-2 { color: #67fd8b; }
body.color-contrast .court-card .court-team-2.is-serving { background-color: rgba(103, 253, 139, 0.18); }

.court-card.idle .court-team .court-player-names::after {
  content: '—';
  opacity: 0.4;
}

/* ---------- Tournament boards (rendered inside #display_container) ---------- */

.series-board {
  box-sizing: border-box;
  overflow: hidden;
  padding: 2%;
  border-color: #007bae;
  border-style: solid;
  border-width: 0;
}
.series-board:not(.last-row)    { border-bottom-width: 1px; }
.series-board:not(.last-column) { border-right-width: 1px; }

.series-title {
  position: absolute;
  top: 2%;
  left: 4%;
  right: 4%;
  height: 11%;
  line-height: 1;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  font-size: 38px; /* small fixed; not part of fit */
}

.series-row {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 38%;
  display: flex;
  align-items: stretch;
}

.series-row-top    { top: 15%; }
.series-row-bottom { bottom: 4%; }

/* Optional team logo sits to the left of the team name. Hidden via
   inline display:none when the tournament has no logo, in which case the
   name flex-grows to fill the freed space. */
.series-team-logo {
  height: 100%;
  max-width: 18%;
  width: auto;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  margin-right: 0.4em;
}

/* Names and scores get their font-size from display.fit at runtime so the
   two rows in a board always share one size. Flex with align-items:center
   centers each text in its own box; since name and score share the row's
   top/bottom, their visual centers line up even though fit gives them
   different font sizes. */
.series-team-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
}

.series-team-score {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  padding-left: 0.4em;
}

.series-team-name.series-team-1, .series-team-score.series-team-1 { color: #00aaff; }
.series-team-name.series-team-2, .series-team-score.series-team-2 { color: #ffffff; }

body.color-light .series-team-name.series-team-1,
body.color-light .series-team-score.series-team-1 { color: #005580; }
body.color-light .series-team-name.series-team-2,
body.color-light .series-team-score.series-team-2 { color: #111111; }
body.color-contrast .series-team-name.series-team-1,
body.color-contrast .series-team-score.series-team-1 { color: #dc6427; }
body.color-contrast .series-team-name.series-team-2,
body.color-contrast .series-team-score.series-team-2 { color: #67fd8b; }

/* ---------- Top-right hover menu ---------- */

/* Invisible trigger zone in the top-right corner. The menu reveals when
   the cursor enters this zone or the menu itself, and hides shortly
   after the cursor leaves both. */
.display-menu-trigger {
  position: fixed;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  z-index: 1499;
}

.display-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1500;
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 0 0 0 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
.display-menu.visible { visibility: visible; opacity: 1; }

.display-menu-section { margin-bottom: 8px; }
.display-menu-section:last-child { margin-bottom: 0; }

.display-menu-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 4px;
}

.display-menu-button {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 4px;
  margin-bottom: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.display-menu-button:hover  { background-color: rgba(255, 255, 255, 0.2); }
.display-menu-button.active {
  background-color: #00aaff;
  border-color:    #00aaff;
  color: #000000;
}

/* ---------- Header visibility (driven by .display-menu) ---------- */

/* When the header is hidden, drop the label / title and reclaim the
   space for the team rows. */
body.header-hidden .court-label,
body.header-hidden .series-title { display: none; }
body.header-hidden .court-card .court-team-1 { top: 0;   bottom: 50%; }
body.header-hidden .court-card .court-team-2 { top: 50%; bottom: 0;   }
body.header-hidden .series-row-top { top: 4%; }

/* ---------- Layout variants (driven by .display-menu) ---------- */

/* Names only — hide scores and historic sets, let the team-row and
   player-names use the freed horizontal space. The category line on
   the right of the court header is hidden too — it belongs on the
   "scores" TV, not the "names" TV. */
body.layout-names .court-card .court-score,
body.layout-names .court-card .court-set-history { display: none; }
body.layout-names .court-card .court-player-names,
body.layout-names .court-card .court-team-row { right: 4%; }
body.layout-names .court-card .court-label-right { display: none; }

body.layout-names .series-team-score { display: none; }

/* Scores only — hide player names, club names and the team logo, give
   the historic sets the left half and the live score the right half so
   the score reads big from across the room. The court name is hidden so
   only the category + class description (right side of the header) is
   shown — kept right-aligned via justify-content. */
body.layout-scores .court-card .court-player-names,
body.layout-scores .court-card .court-team-row { display: none; }
body.layout-scores .court-card .court-score      { width: 50%; }
body.layout-scores .court-card .court-set-history { left: 4%; right: 51%; }
body.layout-scores .court-card .court-label-left  { display: none; }
body.layout-scores .court-card .court-label       { justify-content: flex-end; }

body.layout-scores .series-title,
body.layout-scores .series-team-name,
body.layout-scores .series-team-logo { display: none; }
body.layout-scores .series-team-score {
  flex: 1 1 auto;
  justify-content: center;
  padding-left: 0;
}