/*
 * Default styling of the matchplay output. The file is loaded via the asset
 * collector of the layout. Project specific adjustments belong into
 * gkmb_template/Resources/Public/Css/Extensions/matchplay.css, that file is loaded
 * before this one and needs more specific selectors.
 *
 * The class names are the ones of the predecessor, so existing project styles
 * keep working. What used to be written into style attributes by the PHP class
 * (cell widths, text alignment, table widths) lives here now.
 *
 * The colours of gkmb_template are RGB triplets ("170, 170, 170"), they have to
 * be wrapped in rgb(). The fallbacks keep the extension usable in projects
 * without that stylesheet.
 */

.tx-gkmbmatchplay-bracket {
  /* Every line of the bracket looks the same: the one below a name and the
     bracket that leads to the next round have to form one figure. */
  --mp-line-color: rgb(var(--c-neutral-dark, 74, 74, 74));
  --mp-line: 1px solid var(--mp-line-color);
  /* Width of the columns holding the connecting lines */
  --mp-line-width: 18px;
  /* Every row of the bracket holds exactly one box, so a fixed row height keeps
     the boxes of a round between the two boxes they were built from. */
  --mp-row: 2.5rem;
  --mp-box: rgb(var(--c-neutral-lighter, 240, 240, 240));
  --mp-box-open: rgb(var(--c-neutral-lightest, 255, 255, 255));
  --mp-accent: rgb(var(--c-primary, 190, 24, 25));
  --mp-accent-text: rgb(var(--c-neutral-lightest, 255, 255, 255));
}

/* Headline, status and registration counters */

.tx-gkmbmatchplay-bracket .gkmbmatchplayStatusline,
.tx-gkmbmatchplay-bracket .gkmbmatchplayRegline,
.tx-gkmbmatchplay-bracket .gkmbmatchplayReglineClosed {
  margin-bottom: 0.25rem;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayStatuslinePre,
.tx-gkmbmatchplay-bracket .gkmbmatchplayReglinePre {
  font-weight: var(--f-weight-b, 700);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayReglineClosed {
  margin-top: 1rem;
  font-weight: var(--f-weight-b, 700);
  color: var(--mp-accent);
}

/* Registration list */

.tx-gkmbmatchplay-bracket .gkmbmatchplayRegListTable {
  width: 100%;
  max-width: 50rem;
  margin-top: 1.5rem;
  border-collapse: collapse;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerHeadline {
  padding: 0.5rem 0.75rem;
  text-align: left;
  color: var(--mp-accent-text);
  background: var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerHeadlineId,
.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerLineId {
  width: 20%;
  text-align: center;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerLine {
  padding: 0.4rem 0.75rem;
  border-bottom: var(--mp-line);
  background: var(--mp-box);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayRegListTable tr:nth-child(even) .gkmbmatchplayPlayerLine {
  background: var(--mp-box-open);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerLineWithImage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The two representations of the bracket: the wide table with the connecting
   lines and the narrow list of pairings. Only one of them is visible. The
   breakpoint is the width the wide bracket of a small tournament needs; it
   cannot be a custom property, media queries do not evaluate those. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop {
  display: none;
}

@media (min-width: 48rem) {
  .tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop {
    display: block;
    /* A bracket of 64 or 128 players is wider than the content area */
    overflow-x: auto;
  }

  .tx-gkmbmatchplay-bracket .gkmbmatchplayMobile {
    display: none;
  }
}

/* Bracket, both representations */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDrawListTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-size-s-1, 88%);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDrawListTable td {
  height: var(--mp-row);
  vertical-align: middle;
}

/* The deadlines form one continuous bar across the whole table: the cells
   between the dates carry the same background, only the date itself sits above
   the column of the round it belongs to. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDeadlineCell,
.tx-gkmbmatchplay-bracket .gkmbmatchplayDeadlineCellRang34,
.tx-gkmbmatchplay-bracket .gkmbmatchplayEmptyDeadlineCell {
  color: var(--mp-accent-text);
  background: var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDeadlineCell,
.tx-gkmbmatchplay-bracket .gkmbmatchplayDeadlineCellRang34 {
  padding: 0.35rem 0.75rem;
  font-weight: var(--f-weight-b, 700);
  white-space: nowrap;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDeadlineSpacerCell {
  height: 0.75rem;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplaySpacerCell {
  height: 1.5rem;
}

/* A box of the bracket: the image and the name form one unit, framed as a
   whole. The border between the two cells is dropped on both sides - with
   border-collapse that leaves no line inside the box. The frame continues into
   the connecting lines, they have the same colour and width. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayImageCell,
.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayPlayerCell {
  border: var(--mp-line);
  background: var(--mp-box);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayImageCell {
  border-right: 0;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayPlayerCell {
  border-left: 0;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayImageCell {
  width: 1%;
  padding-left: 0.35rem;
  text-align: center;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayImageCell img {
  display: block;
  /* The image must not make its row higher than the others, the bracket would
     lose its alignment. */
  max-height: var(--mp-row);
  width: auto;
  /* The cell is shrink-to-fit ("width: 1%"), so a global "img { max-width: 100% }"
     would squeeze the image down to nothing. */
  max-width: none;
  border-radius: var(--b-radius-s, 3px);
}

/* In the wide bracket the image fills its half of the box up to the frame: no
   padding on the cell, and the link becomes a block so no line box adds a gap
   below the image. Only towards the name there is space, it comes from the
   padding of the name cell. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayImageCell {
  padding: 0;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayPlayerImage {
  display: block;
  line-height: 0;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayImageCell img {
  height: var(--mp-row);
  border-radius: 0;
}

/* The narrow bracket has no row geometry to keep, the images may be larger */
.tx-gkmbmatchplay-bracket .gkmbmatchplayMobile .gkmbmatchplayImageCell img {
  max-height: 3rem;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerCell {
  padding: 0.25rem 0.75rem 0.25rem 0.35rem;
  white-space: nowrap;
}

/* An empty box: the match has not been played yet, or nobody was drawn. Both
   cells of the box carry the class, so the background stays in one piece. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayBoxOpen {
  background: var(--mp-box-open);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerId {
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerId::after {
  content: " –";
}

.tx-gkmbmatchplay-bracket .addinfo {
  margin-left: 0.5rem;
  font-size: var(--f-size-s-2, 75%);
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayFreedraw,
.tx-gkmbmatchplay-bracket .gkmbmatchplayOpen {
  font-style: italic;
  color: rgb(var(--c-neutral, 170, 170, 170));
}

/* The winner column next to the two finalists and the block for rank three */

.tx-gkmbmatchplay-bracket .gkmbmatchplayWinnerCell,
.tx-gkmbmatchplay-bracket .gkmbmatchplaySubHeadCell {
  padding: 0.25rem 0.75rem;
  font-weight: var(--f-weight-b, 700);
  white-space: nowrap;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayWinnerCell {
  color: var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayWinnerCell .gkmbmatchplayPlayerName {
  padding: 0.25rem 0.5rem;
  color: var(--mp-accent-text);
  background: var(--mp-accent);
  border-radius: var(--b-radius-s, 3px);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayWinnerCell .addinfo {
  color: inherit;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplaySubHeadCell {
  /* The heading sits above the two losers of the semi final, a line below it
     would run across the whole width of the table. */
  padding-top: 0.75rem;
  vertical-align: bottom;
}

/* Wide bracket: the connecting lines are drawn as borders of empty cells.
   A pair of boxes is bracketed from the line below the first name down to the
   line above the last one, in the middle the line branches off to the box of
   the next round. */

.tx-gkmbmatchplay-bracket .gkmbmatchplayBottomLine,
.tx-gkmbmatchplay-bracket .gkmbmatchplayRightLine,
.tx-gkmbmatchplay-bracket .gkmbmatchplayTopLine,
.tx-gkmbmatchplay-bracket .gkmbmatchplayDesktop .gkmbmatchplayEmptyCell[colspan="1"] {
  width: var(--mp-line-width);
  min-width: var(--mp-line-width);
  padding: 0;
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayBottomLine {
  border-bottom: var(--mp-line);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayRightLine {
  border-right: var(--mp-line);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayTopLine {
  border-top: var(--mp-line);
}

/* Narrow bracket: one row per pairing */

.tx-gkmbmatchplay-bracket .gkmbmatchplayMatch td {
  padding: 0.4rem 0.5rem;
  border-bottom: var(--mp-line);
  background: var(--mp-box);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayPlayerColonCell {
  width: 1%;
  text-align: center;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayWinner {
  font-weight: var(--f-weight-b, 700);
  color: var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayLoser {
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

/* Random draw */

.tx-gkmbmatchplay-bracket .gkmbmatchplayRandomDrawValue code {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.75rem;
  background: var(--mp-box);
  border-left: 3px solid var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayRandomDrawHint {
  font-style: italic;
}

/* Errors and footer */

.tx-gkmbmatchplay-bracket .gkmbmatchplayError {
  padding: 0.75rem;
  font-weight: var(--f-weight-b, 700);
  color: var(--mp-accent);
  background: var(--mp-box);
  border-left: 3px solid var(--mp-accent);
}

.tx-gkmbmatchplay-bracket .gkmbmatchplayadminline {
  margin-top: 1.5rem;
}

.tx-gkmbmatchplay-bracket .gkmb_mpFooterPrint {
  margin-top: 1.5rem;
  font-size: var(--f-size-s-2, 75%);
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}