/* League headline */
.league__group {
  margin: 0.25rem 0 0;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-dark));
}

/* League table */
table.-league th.empty {
  background: transparent;
}

table.-league th,
table.-league td {
  text-align: center;
}

table.ce-table.-league td {
  min-width: 100px;
}

table.-league td.team {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
}

/* Says that the table goes on sideways.
   A table that ends at the edge of the screen looks cut off, not scrollable -
   the more so since the team column stays put and only the dates move. So the
   right edge fades out while there is more to come, and an arrow appears on
   each side that has something left.
   The fade is deliberately only on the right: on the left sits the sticky team
   column, and a mask there would make the club names see-through. */
.league-scroll {
  position: relative;
}

.league-scroll.-fadeend .ce-table-scroll {
  mask-image: linear-gradient(to right, rgb(0, 0, 0) calc(100% - 48px), transparent);
}

.league-scroll__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgb(var(--c-neutral-light));
  border-radius: 999px;
  background: rgb(var(--c-neutral-lightest));
  color: rgb(var(--c-neutral-darker));
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  cursor: pointer;
  transform: translateY(-50%);
}

/* beside the sticky team column, not on top of the club names; the width comes
   from league.js, the fallback keeps it inside the table if that never runs */
.league-scroll__arrow.-prev {
  left: calc(var(--league-sticky, 0px) + 6px);
}

.league-scroll__arrow.-next {
  right: 4px;
}

/* The template paints every button:hover in the primary colour. On a small
   white arrow that reads as a warning light, and on a phone the hover state
   sticks after the tap - so the arrow keeps its own colours. */
.league-scroll__arrow:hover,
.league-scroll__arrow:focus {
  background: rgb(var(--c-neutral-lightest));
  color: rgb(var(--c-primary));
}

.league-scroll.-fadestart .league-scroll__arrow.-prev,
.league-scroll.-fadeend .league-scroll__arrow.-next {
  display: inline-flex;
}

/* The team column stays put while the match dates scroll past it. On a phone
   the table is wider than the screen, and a column of numbers without the team
   it belongs to cannot be read at all. Both cells bring their own background,
   so nothing shows through them; the z-index keeps them above the cells
   sliding underneath and below the comment bubble, which sits at 2. */
table.ce-table.-league th:first-child,
table.ce-table.-league td.team {
  position: sticky;
  left: 0;
  z-index: 1;
}

table.ce-table.-league th:first-child {
  background-color: rgb(var(--c-primary));
}

/* With border-collapse the white cell borders belong to the table, not to the
   cell - they scroll away with the dates while the sticky cell stays, and the
   headings sliding past peek out in the gap. The shadows stand in for the
   borders on both sides and move along with the cell. */
table.ce-table.-league th:first-child,
table.ce-table.-league td.team {
  box-shadow: 2px 0 0 rgb(var(--c-neutral-lightest)), -2px 0 0 rgb(var(--c-neutral-lightest));
}

.content .frame-bg-grey table.ce-table.-league th:first-child,
.content .frame-bg-grey table.ce-table.-league td.team {
  box-shadow: 2px 0 0 rgb(var(--c-neutral-lighter)), -2px 0 0 rgb(var(--c-neutral-lighter));
}

table.-league td.total,
table.-league td.rank {
  font-weight: var(--f-weight-b);
}

table.-league th:first-child,
table.-league td.team {
  text-align: left;
}

table.-league td.-home {
  background-color: rgb(var(--c-neutral-light));
}

/* ---------------------------------------------------------------------------
   Frontend maintenance (LeagueEdit plugin)
   Variables come from gkmb_template; the fallbacks keep the plugin usable
   in projects without it.
   --------------------------------------------------------------------------- */

.tx-gkmbleague-edit {
  --gkmb-edit-gap: 1.5rem;
  --gkmb-edit-gap-s: 0.75rem;
  --gkmb-edit-border: rgb(var(--c-neutral, 222 226 230));
  --gkmb-edit-bg: rgb(var(--c-neutral-lightest, 248 249 250));
  --gkmb-edit-radius: var(--b-radius-s, 3px);
}

.tx-gkmbleague-edit h1,
.tx-gkmbleague-edit h2,
.tx-gkmbleague-edit h3 {
  margin: 0 0 var(--gkmb-edit-gap-s);
}

.tx-gkmbleague-edit > * + * {
  margin-top: var(--gkmb-edit-gap);
}

/* Header and toolbar */

.gkmb-edit-header {
  padding-bottom: var(--gkmb-edit-gap-s);
}

.gkmb-edit-header p {
  margin: 0;
}

.gkmb-edit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gkmb-edit-gap-s);
}

/* Grouped blocks (league group, team) */

.gkmb-edit-group {
  border: 1px solid var(--gkmb-edit-border);
  border-radius: var(--gkmb-edit-radius);
  padding: var(--gkmb-edit-gap-s);
}

.gkmb-edit-group + .gkmb-edit-group {
  margin-top: var(--gkmb-edit-gap);
}

.gkmb-edit-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gkmb-edit-gap-s);
  margin-bottom: var(--gkmb-edit-gap-s);
}

.gkmb-edit-group-header .gkmb-edit-actions {
  margin-left: auto;
}

.gkmb-edit-meta {
  color: rgb(var(--c-neutral-dark, 108 117 125));
  font-weight: normal;
}

/* One league inside the overview */

.gkmb-edit-league {
  border-top: 1px solid var(--gkmb-edit-border);
  padding-top: var(--gkmb-edit-gap-s);
  margin-top: var(--gkmb-edit-gap-s);
}

.gkmb-edit-league-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gkmb-edit-gap-s);
}

.gkmb-edit-league-header h4 {
  margin: 0;
}

.gkmb-edit-league-header .gkmb-edit-actions {
  margin-left: auto;
}

.gkmb-edit-cols {
  display: grid;
  gap: var(--gkmb-edit-gap);
  margin-top: var(--gkmb-edit-gap-s);
}

.gkmb-edit-col-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gkmb-edit-gap-s);
  margin-bottom: 0.25rem;
}

.gkmb-edit-col-header h5 {
  margin: 0;
}

/* Notices and hints */

.gkmb-edit-notice {
  border-left: 4px solid rgb(var(--c-primary, 30 64 120));
  background-color: var(--gkmb-edit-bg);
  padding: var(--gkmb-edit-gap-s) 1rem;
}

.gkmb-edit-notice p:last-child {
  margin-bottom: 0;
}

.gkmb-edit-empty {
  color: rgb(var(--c-neutral-dark, 108 117 125));
  font-style: italic;
}

.gkmb-hint {
  display: block;
  font-size: 0.85em;
  color: rgb(var(--c-neutral-dark, 108 117 125));
}

.gkmb-delete-warning {
  font-weight: var(--f-weight-b, 700);
}

.gkmb-delete-list {
  margin: 0 0 var(--gkmb-edit-gap);
}

.gkmb-edit-locked {
  margin-left: auto;
  font-size: 0.85em;
  color: rgb(var(--c-neutral-dark, 108 117 125));
}

/* Tables */

.gkmb-edit-table-scroll {
  overflow-x: auto;
}

table.gkmb-edit-table {
  width: 100%;
  border-collapse: collapse;
}

/* Same look as the ce-table of gkmb_base/gkmb_template: coloured header,
   no lines, alternating solid rows. */

table.gkmb-edit-table th,
table.gkmb-edit-table td {
  border: none;
  padding: 0.3rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

table.gkmb-edit-table th {
  background: rgb(var(--c-primary, 190 24 25));
  color: rgb(var(--c-neutral-lightest, 255 255 255));
  font-weight: normal;
  white-space: nowrap;
}

table.gkmb-edit-table tbody tr:nth-child(odd) td {
  background: rgb(var(--c-neutral-lightest, 255 255 255));
}

table.gkmb-edit-table tbody tr:nth-child(even) td {
  background: rgb(var(--c-neutral-lighter, 240 240 240));
}

/* numbers line up on the right, and their headings with them - a left-aligned
   heading over right-aligned figures reads as if the dash belonged to the
   column before */
table.gkmb-edit-table th.-number,
table.gkmb-edit-table td.-number {
  text-align: right;
  white-space: nowrap;
}

.gkmb-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gkmb-edit-gap-s);
  white-space: nowrap;
}

.gkmb-edit-actions a {
  text-decoration: underline;
}

/* Forms */

.gkmb-edit-form {
  max-width: 40rem;
}

.gkmb-edit-form fieldset {
  border: 1px solid var(--gkmb-edit-border);
  border-radius: var(--gkmb-edit-radius);
  padding: var(--gkmb-edit-gap-s);
  margin: 0 0 var(--gkmb-edit-gap);
}

.gkmb-edit-form legend {
  padding: 0 0.5rem;
  font-weight: var(--f-weight-b, 700);
}

.gkmb-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gkmb-form-row + .gkmb-form-row {
  margin-top: var(--gkmb-edit-gap-s);
}

.gkmb-form-row label {
  font-weight: var(--f-weight-b, 700);
}

.gkmb-form-row input,
.gkmb-form-row select,
.gkmb-form-row textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--gkmb-edit-border);
  border-radius: var(--gkmb-edit-radius);
  background-color: rgb(var(--c-neutral-lightest, 255 255 255));
  font: inherit;
}

.gkmb-form-row input[type="number"] {
  max-width: 10rem;
}

.gkmb-form-row.-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.gkmb-form-row.-checkbox label {
  font-weight: inherit;
}

.gkmb-form-row.-checkbox input {
  width: auto;
  margin: 0;
}

.gkmb-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gkmb-edit-gap-s);
  margin-top: var(--gkmb-edit-gap);
}

/* Buttons come from gkmb_template (.font__button and input[type="submit"]),
   only their placement is set here. */

.gkmb-edit-col-header .font__button {
  margin-left: auto;
}

@media screen and (min-width: 60rem) {
  .gkmb-edit-cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 48rem) {
  .gkmb-form-row {
    display: grid;
    grid-template-columns: 14rem 1fr;
    align-items: center;
    column-gap: var(--gkmb-edit-gap-s);
  }

  .gkmb-form-row .gkmb-hint {
    grid-column: 2;
  }

  .gkmb-form-row.-checkbox {
    display: grid;
  }

  .gkmb-form-row.-checkbox input {
    grid-column: 2;
    justify-self: start;
  }

  .gkmb-form-actions {
    padding-left: calc(14rem + var(--gkmb-edit-gap-s));
  }
}

/* Free text behind the total of a team, e.g. "Aufsteiger" */

.ce-table.-league .league-note {
  margin-left: 0.5em;
  white-space: nowrap;
}

/* Comment of a result: a small marker in the corner of the cell, opening a
   bubble on hover and - that is what makes it work on touch devices - as soon
   as the button takes the focus on tap. */

table.ce-table.-league td {
  position: relative;
}

.league-info {
  position: absolute;
  top: 2px;
  right: 2px;
  line-height: 1;
}

.league-info__button {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--c-neutral-dark, 74, 74, 74));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--f-weight-b, 700);
  line-height: 14px;
  text-align: center;
  cursor: help;
}

.league-info__button::before {
  content: "i";
}

/* Enlarges the tap target without changing the look */

.league-info__button::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.league-info__bubble {
  position: absolute;
  top: 18px;
  right: 0;
  z-index: 2;
  visibility: hidden;
  width: max-content;
  max-width: min(16em, 60vw);
  padding: 0.4em 0.6em;
  border-radius: 3px;
  opacity: 0;
  background: rgb(var(--c-neutral-darker, 41, 41, 41));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-size: 0.8em;
  font-weight: var(--f-weight-r, 400);
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  transition: opacity 0.15s ease;
}

.league-info:hover .league-info__bubble,
.league-info:focus-within .league-info__bubble {
  visibility: visible;
  opacity: 1;
}

/* The table scrolls horizontally, which cuts off anything below its last row -
   there the bubble opens upwards instead. */

table.ce-table.-league tr:last-child:not(:first-child) .league-info__bubble {
  top: auto;
  bottom: 18px;
}