/* 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));
}

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));
}

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;
}