/* The G11 Web Page — estilos propios sobre Bootstrap 5 */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------- Classificació ---------- */

/* Las cifras se leen en columna: que no bailen de ancho. */
.ranking td,
.ranking th {
  font-variant-numeric: tabular-nums;
}

/*
 * Bandas de classificació.
 *
 * La aplicación antigua las pintaba desde el code-behind con System.Drawing.Color
 * (SeasonRanking.aspx.cs:66-76), un tipo que además no sobrevive a .NET Core.
 * Aquí son CSS, y el color sale de las variables de Bootstrap para que funcionen
 * igual en tema claro y oscuro.
 */
.band-champions,
.band-europa,
.band-intertoto,
.band-relegation {
  border-left: 4px solid transparent;
}

.band-champions  { border-left-color: var(--bs-teal); }
.band-europa     { border-left-color: var(--bs-cyan); }
.band-intertoto  { border-left-color: var(--bs-orange); }
.band-relegation { border-left-color: var(--bs-red); }

/* Cuadraditos de la leyenda */
.band-key {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: .15rem;
}

.band-key.band-champions  { background: var(--bs-teal); }
.band-key.band-europa     { background: var(--bs-cyan); }
.band-key.band-intertoto  { background: var(--bs-orange); }
.band-key.band-relegation { background: var(--bs-red); }

/* ---------- Graella d'equips ---------- */

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-align: center;
}

/*
 * Alcada fixa per a l'escut: els fitxers tenen mides molt diferents
 * (de 100 a 400 px) i sense aixo la graella queda irregular.
 */
.team-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
}

.team-card__badge img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.team-card__name {
  display: block;
  font-size: .875rem;
  line-height: 1.25;
  text-wrap: balance;
}

.team-card:hover {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

/* ---------- Detall d'equip ---------- */

.team-detail__badge {
  height: 6rem;
  width: auto;
  object-fit: contain;
}

.squad td,
.squad th {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Els retrats de Transfermarkt son de 28x36 px. Retallar-los a un cercle
 * se'n menja la cara, aixi que es respecta la proporcio i nomes es limita
 * l'alcada, com feia l'aplicacio antiga.
 */
.squad__portrait {
  height: 1.5rem;
  width: auto;
  margin-right: .35rem;
  vertical-align: -.4rem;

  /* Molts jugadors joves no tenen foto a Transfermarkt i el servei retorna una
     silueta gris molt clara, que sobre fons blanc sembla que falti la imatge.
     El fons fa que es llegeixi com "sense foto" i no com un error de carrega. */
  background: var(--bs-secondary-bg);
  border-radius: 2px;
}

/*
 * Posicions per linia del camp. L'aplicacio antiga les pintava des del
 * code-behind amb System.Drawing.Color, que no existeix a .NET Core.
 */
.pos {
  display: inline-block;
  min-width: 2.75rem;
  padding: .05rem .35rem;
  border-radius: var(--bs-border-radius-sm);
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
}

.pos--gk  { background: color-mix(in srgb, var(--bs-yellow) 35%, var(--bs-body-bg)); }
.pos--def { background: color-mix(in srgb, var(--bs-blue)   28%, var(--bs-body-bg)); }
.pos--mid { background: color-mix(in srgb, var(--bs-green)  28%, var(--bs-body-bg)); }
.pos--att { background: color-mix(in srgb, var(--bs-orange) 32%, var(--bs-body-bg)); }

/* ---------- Calendari ---------- */

.fixtures {
  font-size: .8125rem;
}

.fixtures td {
  padding: .25rem .5rem;
  vertical-align: middle;
}

.fixtures__num {
  width: 2rem;
  font-variant-numeric: tabular-nums;
}

.fixtures__result {
  width: 3.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Els partits jugats es marquen amb un to de fons. L'aplicacio antiga ho feia
 * amb Color.PaleTurquoise des de RowDataBound; aqui surt de les variables de
 * Bootstrap perque funcioni tambe en tema fosc.
 */
.fixtures__played td {
  background: color-mix(in srgb, var(--bs-info) 12%, transparent);
}

/* Substitueix el glyphicon-ok de Bootstrap 3, que ja no existeix a Bootstrap 5. */
.fixtures__check {
  color: var(--bs-success);
  font-size: .75rem;
  margin-left: .15rem;
}

/* ---------- Fitxa de manager ---------- */

.manager__photo {
  height: 5rem;
  width: auto;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
}

/* ---------- Graella de managers ---------- */

.manager-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-align: center;
}

.manager-card:hover {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.manager-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  width: 100%;
}

.manager-card__photo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--bs-border-radius);
}

/* Recanvi per si algun manager es queda sense foto. */
.manager-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 1.75rem;
  font-weight: 600;
}

.manager-card__name {
  display: block;
  font-size: .9375rem;
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- Historic de posicions ---------- */

.historic {
  font-size: .8125rem;
}

.historic td,
.historic th {
  font-variant-numeric: tabular-nums;
}

.historic__pos {
  width: 2rem;
  padding-left: .3rem;
  padding-right: .3rem;
}

/*
 * La columna de campions es la que es mira primer.
 *
 * Cal pujar l'especificitat: Bootstrap pinta les cel.les amb
 * `.table > :not(caption) > * > * { background-color: var(--bs-table-bg) }`,
 * que amb (0,1,1) guanya a una classe sola i deixava la columna en blanc.
 *
 * El color es translucid perque el fons de les files B -que Bootstrap aplica
 * com a box-shadow inset, per sobre del background- s'hi pugui superposar.
 */
.historic td.historic__pos--first,
.historic th.historic__pos--first {
  background-color: color-mix(in srgb, var(--bs-warning) 22%, transparent);
  font-weight: 600;
}

/* Miniatura del manager. Es serveix des de /managers/{id}/photo, no incrustada. */
.manager-thumb {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin-right: .4rem;
  vertical-align: -.4rem;
  background: var(--bs-secondary-bg);
}

/*
 * Files dels equips B.
 *
 * Es fa servir --bs-table-bg-type, que es el mateix mecanisme que fa servir
 * .table-striped de Bootstrap. Aixi el hover -que va per --bs-table-bg-state-
 * segueix guanyant, cosa que no passaria posant un background directament.
 *
 * El to es translucid a proposit: sota hi ha la columna de campions, que te el
 * seu propi tint, i ha de continuar veient-se.
 */
.historic__row--b > * {
  --bs-table-bg-type: color-mix(in srgb, var(--bs-secondary-color) 12%, transparent);
}

/*
 * El hover per defecte de Bootstrap es negre al 7,5%, gairebe identic al gris
 * de les files B (negre al 9%). Amb els dos tan iguals, passar el ratolo per
 * una fila A la feia semblar una fila B, i per una fila B gairebe no es notava
 * -de fet l'aclaria, perque el hover SUBSTITUEIX el fons en lloc de sumar-s'hi-.
 *
 * Es canvia de to, no d'intensitat: el hover passa a ser blavos i mes marcat,
 * aixi que no es pot confondre amb el gris neutre de l'equip B.
 */
.historic {
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-primary) 16%, transparent);
}

/*
 * I una marca que sobreviu al hover: mentre el ratoli es a sobre, el fons de la
 * fila queda substituit i la B es perdria. La vora esquerra no depen del fons.
 */
.historic__row--b > td:first-child,
.historic__row--b > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--bs-secondary-border-subtle);
}

/*
 * Targetes de Fair Play.
 *
 * L'aplicacio antiga feia servir dues imatges com a capcalera de columna
 * (HeaderImageUrl a Images/YellowCard.png i RedCard.png). Aqui es CSS: no cal
 * baixar dos fitxers per a dos rectangles de color.
 */
.card-badge {
  display: inline-block;
  width: .7rem;
  height: 1rem;
  border-radius: 2px;
  vertical-align: -.15rem;
  border: 1px solid rgba(0, 0, 0, .25);
}

.card-badge--yellow { background: var(--bs-yellow); }
.card-badge--red    { background: var(--bs-red); }

/* Fletxa d'ordenacio a les capceleres del llistat de jugadors. */
.sort-ind {
  color: var(--bs-primary);
  font-size: .75em;
}

/* ---------- Fitxa de jugador ---------- */

.player-detail__portrait {
  height: 9rem;
  width: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-secondary-bg);
}

/* Enllacos a Transfermarkt, PESDB i PES Master. */
.player-detail__link {
  display: inline-flex;
  align-items: center;
  padding: .25rem .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.player-detail__link:hover {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.player-detail__link img {
  height: 1.75rem;
  width: auto;
}

/* ---------- Detall de pressupost ---------- */

.budget-summary {
  display: grid;
  gap: .15rem .75rem;
  grid-template-columns: auto auto;
  align-content: start;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-size: .875rem;
}

.budget-summary > div {
  display: contents;
}

.budget-summary dt {
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.budget-summary dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.budget-summary__total dt,
.budget-summary__total dd {
  padding-top: .35rem;
  border-top: 1px solid var(--bs-border-color);
  font-weight: 600;
}

.budget-summary__total dt {
  color: var(--bs-body-color);
}

/*
 * Taula de pressupost.
 *
 * La versio anterior d'aquesta pagina feia servir bandes grises tant per a la
 * capcalera de grup com per al subtotal, i no es distingia on comencava ni on
 * acabava cada bloc. La web antiga ho resolia amb capceleres blaves de text
 * blanc; aixo es el que es recupera aqui, pero donant al subtotal una FORMA
 * diferent -linia de tancament, sense fons- en lloc d'un altre gris.
 */

/* Els imports han de quedar a prop del concepte, no a l'altre extrem de la
   pantalla. La web antiga tenia la taula a 500 px per aquest motiu. */
.budget-wrap {
  max-width: 46rem;
}

.budget {
  font-size: .8125rem;
}

.budget td,
.budget th {
  padding: .25rem .5rem;
  font-variant-numeric: tabular-nums;
}

.budget thead th {
  border-bottom-width: 2px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}

.budget__id     { width: 4rem; color: var(--bs-secondary-color); }
.budget__amount { width: 9rem; }
.budget__in     { color: var(--bs-success-text-emphasis); }
.budget__out    { color: var(--bs-danger-text-emphasis); }

/* Capcalera de grup: banda de color amb text blanc, com a la web antiga, pero
   amb el blau del propi lloc en lloc d'un to solt. */
.budget__header th {
  background: var(--bs-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

/* Subtotal: linia de tancament, no una altra banda. */
.budget__subtotal td {
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 0;
  padding-top: .35rem;
  padding-bottom: .5rem;
  font-weight: 600;
  background: transparent;
}

/* El net del grup: la pregunta real es si suma o resta. */
.budget__net {
  display: inline-block;
  margin-left: .5rem;
  padding: 0 .4rem;
  border-radius: 1rem;
  font-size: .75rem;
  font-weight: 600;
}

.budget__net--pos {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.budget__net--neg {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Total i saldo final. */
.budget__total td {
  border-top: 2px solid var(--bs-emphasis-color);
  border-bottom: 0;
  padding-top: .45rem;
  font-weight: 700;
}

.budget__balance td {
  border: 0;
  padding-top: .15rem;
  color: var(--bs-secondary-color);
}

.budget__final {
  margin-left: .6rem;
  padding: .1rem .5rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-weight: 700;
}

/* ---------- Capcalera compacta d'equip ---------- */

/*
 * Abans aixo era una graella de parells etiqueta/valor -Acronim, Manager,
 * Numero d'equip, Plantilla- que surava sense estructura. Ara el nom mana i
 * la resta va en una sola linia de dades secundaries.
 */
.team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.team-head__badge {
  height: 3rem;
  width: auto;
  object-fit: contain;
  flex: none;
}

.team-head__main {
  flex: 1 1 16rem;
  min-width: 0;
}

.team-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .9rem;
  margin: .3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

/* Separadors entre elements, sense pintar-ne un al principi. */
.team-head__meta li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .8em;
  margin-right: .9rem;
  background: var(--bs-border-color);
  vertical-align: -.05em;
}

.team-head__meta .manager-thumb {
  margin-right: .25rem;
}

/* El resum ja no necessita marge propi: el gap del contenidor el situa. */
.team-head .budget-summary {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Quan el resum nomes te una fila -com a la fitxa d'equip- la regla de
   separacio del total no separa res. */
.budget-summary > div:only-child dt,
.budget-summary > div:only-child dd {
  padding-top: 0;
  border-top: 0;
}

/* Variants del distintiu de la capcalera segons el tipus de fitxa. */
.team-head__badge--photo {
  height: 3.5rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
}

.team-head__badge--portrait {
  height: 4.5rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-secondary-bg);
}

/* A la fitxa de jugador, l'espai de la dreta porta els enllaços externs
   en lloc del panell de xifres. */
.team-head__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

/* ---------- Detall de partit ---------- */

.match-head {
  justify-content: center;
}

.match-head .team-head__main {
  flex: 1 1 auto;
}

.match-head .team-head__meta {
  justify-content: center;
}

/* Marcador: equips als extrems i el resultat al mig. */
.scoreline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.scoreline__team {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.scoreline__team--home { justify-content: flex-end; text-align: right; }
.scoreline__team--away { justify-content: flex-start; }

.scoreline__team:hover .scoreline__name {
  text-decoration: underline;
}

.scoreline__team img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
  flex: none;
}

.scoreline__result {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scoreline__sep { color: var(--bs-secondary-color); font-weight: 400; }

.scoreline__pending {
  font-size: .875rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/*
 * Titulars i suplents es distingeixen per dos senyals alhora: els que han jugat
 * porten un fons blau clar, i els que no queden atenuats.
 */
.lineup__played > * {
  --bs-table-bg-type: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.lineup__unused > td {
  opacity: .45;
}

/* El hover els torna llegibles, per si cal consultar-los. */
.lineup tbody tr.lineup__unused:hover > td {
  opacity: .8;
}

/*
 * El hover ha de ser clarament mes fort que el blau dels titulars, o passar-hi
 * el ratoli no es notaria. Substitueix el fons de la fila, no s'hi suma, aixi
 * que el mateix to serveix per a titulars i suplents.
 *
 * El de Bootstrap per defecte -negre al 7,5%- quedava massa a prop del blau
 * clar dels titulars.
 */
.lineup {
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

/* ---------- Fila del calendari clicable ---------- */

/*
 * Cada cel.la conte un enllac, i el pseudoelement de l'enllac cobreix la
 * cel.la sencera. Amb les quatre cel.les cobertes, tota la fila es clicable.
 *
 * El bloc contenidor es el <td>, no el <tr>: position:relative sobre una fila
 * s'accepta pero no genera un bloc contenidor fiable -provat, el pseudoelement
 * no cobria la fila-. Sobre una cel.la si que funciona.
 *
 * L'enllac es queda al flux normal per no alterar la mida de la cel.la; nomes
 * el pseudoelement esta posicionat. Aixi una cel.la amb el nom en dues linies
 * segueix sent clicable de dalt a baix, cosa que no passava fent creixer
 * l'enllac.
 *
 * Descartat onclick sobre la fila: no arriba amb teclat, no permet obrir en
 * una pestanya nova ni amb el boto del mig, i no dona cap pista
 * d'accessibilitat.
 */
.fixtures__row td {
  position: relative;
}

.fixtures__cell {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  color: inherit;
  text-decoration: none;
}

.fixtures__cell::after {
  content: "";
  position: absolute;
  inset: 0;
}

.fixtures__row:hover {
  background: var(--bs-tertiary-bg);
  cursor: pointer;
}

/* El focus del teclat marca la fila sencera, no nomes el numero. */
.fixtures__row:focus-within {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.fixtures__cell:focus-visible {
  outline: none;
}

/* ---------- Resum de pressupostos ---------- */

/*
 * Drets televisius. A la web antiga era un <h4> amb una frase llarga i tres
 * imports enganxats amb "+" i ":" dins del mateix text, i costava veure quina
 * de les tres xifres era el total. Aqui la frase es l'etiqueta i els imports
 * son la dada.
 */
.tv-rights {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .65rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

.tv-rights__label {
  font-size: .875rem;
}

.tv-rights__value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tv-rights__part,
.tv-rights__op {
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

.tv-rights__total {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Els imports han de poder-se comparar columna a columna. */
.budget-resum td:nth-child(n + 4),
.budget-resum tfoot td {
  font-variant-numeric: tabular-nums;
}

/*
 * Fila de totals. Bootstrap no pinta el <tfoot>, i sense separacio la suma
 * sembla un equip mes.
 */
.budget-resum tfoot td {
  border-top: 2px solid var(--bs-border-color);
  font-weight: 600;
}

.budget-resum tfoot .budget__in,
.budget-resum tfoot .budget__out {
  font-weight: 400;
}

/* ---------- Premis i multes ---------- */

/*
 * Etiqueta del tipus d'operacio. A la web antiga "Premi" i "Multa" ocupaven una
 * columna sencera de text en negre, i era l'unica manera de saber si un import
 * sumava o restava.
 */
.op-tag {
  display: inline-block;
  margin-right: .4rem;
  padding: .05rem .4rem;
  border-radius: var(--bs-border-radius-sm);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.op-tag--in {
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
}

.op-tag--out {
  color: var(--bs-danger-text-emphasis);
  background: var(--bs-danger-bg-subtle);
}

.awards td:nth-last-child(-n + 2) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Targetes per jornada ---------- */

/*
 * Columnes de jornada. Son 17 o 19 a la Lliga G-11, aixi que han de ser tan
 * estretes com el distintiu que hi va dins.
 */
.cards__day {
  width: 1.6rem;
  padding-left: .15rem;
  padding-right: .15rem;
  text-align: center;
}

.cards thead .cards__day {
  color: var(--bs-secondary-color);
  font-weight: 400;
  font-size: .75rem;
}

/* Amb dues targetes la mateixa jornada, que no s'encavalquin. */
.cards__day .card-badge + .card-badge {
  margin-left: .1rem;
}

/* Panell de filtres. */
.filters {
  padding: .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

.filters .form-label {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

/* ---------- Llistat d'operacions de mercat ---------- */

.op-tag--neutral {
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
}

.transfers td:nth-last-child(-n + 3) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Control de rang amb dos extrems ---------- */

/*
 * La web antiga feia servir el slider de jQuery UI, que arrossegava jQuery i
 * jQuery UI sencers nomes per a aixo. Aixo son dos <input type="range">
 * natius superposats: funcionen amb teclat, amb lector de pantalla i sense
 * JavaScript. El JS nomes hi afegeix la lectura del valor, la barra pintada i
 * que no s'enviin els extrems quan no filtren.
 */

.dual-range__value {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
  margin-bottom: .1rem;
}

.dual-range__value output {
  color: var(--bs-body-color);
  font-weight: 600;
}

.dual-range__track {
  position: relative;
  height: 1.25rem;
}

.dual-range__rail,
.dual-range__fill {
  position: absolute;
  top: 50%;
  height: .25rem;
  border-radius: .25rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.dual-range__rail {
  left: 0;
  right: 0;
  background: var(--bs-secondary-bg);
}

.dual-range__fill {
  background: var(--bs-primary);
}

/* Els dos inputs ocupen tota la pista i no reben clics: nomes els polzes. */
.dual-range__track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.dual-range__track input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
}

.dual-range__track input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
}

.dual-range__track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background: var(--bs-primary);
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 1px var(--bs-border-color);
  cursor: grab;
}

.dual-range__track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--bs-primary);
  border: 2px solid var(--bs-body-bg);
  box-shadow: 0 0 0 1px var(--bs-border-color);
  cursor: grab;
}

.dual-range__track input[type="range"]:focus {
  outline: none;
}

.dual-range__track input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.dual-range__track input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ---------- Barra de filtres d'una sola linia ---------- */

/*
 * Sis filtres en una fila. La graella de Bootstrap va de dotze columnes
 * enteres i no hi caben sense arrodonir amplades cap amunt, aixi que aqui es
 * flexbox amb una amplada base per camp: creixen per omplir el que hi ha i
 * salten de linia sols quan la finestra es estreta.
 */
.filters-inline {
  display: flex;
  /* .card de Bootstrap ja es un flex en columna: cal tornar-lo a fila. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem 1rem;
}

.filters-inline__field {
  flex: 1 1 9rem;
  min-width: 0;
}

.filters-inline__field--wide   { flex-basis: 12rem; }
.filters-inline__field--narrow { flex-basis: 6rem; }

.filters-inline .form-label {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .25rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.filters-inline__actions {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

/* El control de rang ha de quedar a l'alcada d'un form-select-sm. */
.filters-inline .dual-range__track {
  height: calc(1.5em + .5rem + 2px);
}

/* ---------- Quadre d'eliminatories ---------- */

/*
 * El quadre es una graella CSS: una columna per ronda mes la del campio, i
 * tantes files com eliminatories te la primera ronda. Cada eliminatoria de la
 * ronda N ocupa el doble de files que una de la ronda N-1, aixi que queda
 * centrada entre les dues que hi desemboquen i el quadre s'alinea sol.
 *
 * La versio anterior ho feia amb una <table> de rowspan calculats a ma, i
 * escrivia el CSS dins del HTML a cada peticio.
 */

.bracket-scroll {
  overflow-x: auto;
}

.bracket {
  display: grid;
  grid-template-columns: repeat(var(--bracket-rounds), minmax(10rem, 1fr));
  grid-template-rows: auto repeat(var(--bracket-rows), minmax(2.5rem, auto));
  gap: .35rem .75rem;
  min-width: 48rem;
  align-items: center;
}

.bracket__heading {
  grid-row: 1;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  text-align: center;
}

.bracket__tie {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  padding: .3rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  font-size: .8125rem;
}

.bracket__tie:hover {
  border-color: var(--bs-primary);
}

.bracket__side {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;

  /* El coixi el porten totes dues bandes perque el fons del guanyador no
     desplaci res quan apareix. */
  padding: .05rem .25rem;
  border-radius: var(--bs-border-radius-sm);
}

.bracket__side img {
  flex: 0 0 auto;
}

.bracket__side a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Qui passa la ronda es llegeix sense haver de comparar els resultats. */
.bracket__side--won {
  background: color-mix(in srgb, var(--bs-success) 15%, transparent);
}

.bracket__side--won a {
  font-weight: 600;
}

.bracket__side--lost {
  opacity: .55;
}

.bracket__pending {
  color: var(--bs-secondary-color);
  font-style: italic;
}

.bracket__scores {
  display: flex;
  gap: .4rem;
  padding: .1rem 0;
  border-top: 1px dotted var(--bs-border-color);
  border-bottom: 1px dotted var(--bs-border-color);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
}

.bracket__champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .75rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  text-align: center;
  font-weight: 600;
}

.bracket__trophy {
  font-size: 1.75rem;
  line-height: 1;
}

/* ---------- Detall d'una eliminatoria ---------- */

.playoff {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/*
 * Cada partit es una graella de tres columnes amb el marcador al mig, de manera
 * que els dos equips queden simetrics respecte del resultat. L'aspx ho feia amb
 * una taula de cinc columnes i alineacions per cel·la.
 */
.playoff__leg {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.playoff__label {
  grid-column: 1 / -1;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  text-align: center;
}

.playoff__side {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.playoff__side--home { justify-content: flex-end; }
.playoff__side--away { justify-content: flex-start; }

.playoff__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Marca que la alineacio del partit ja esta registrada. */
.playoff__registered {
  color: var(--bs-success);
  font-weight: 700;
}

.playoff__result {
  min-width: 4.5rem;
  padding: .15rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.playoff__pending {
  font-size: .8125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--bs-secondary-color);
}

.playoff__winner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-weight: 600;
}

.playoff__winner-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/*
 * Acces al detall de l'eliminatoria: l'enllac cobreix tota la caixa. Els
 * enllacos de dins -equip i resultat- pugen per sobre amb z-index, aixi que
 * clicar un nom d'equip segueix anant a la seva fitxa.
 */
.bracket__tie-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--bs-border-radius);
}

.bracket__tie-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.bracket__side a,
.bracket__scores a {
  position: relative;
  z-index: 1;
}

/* ---------- Competicions europees ---------- */

.euro-matches__registered {
  color: var(--bs-success);
  font-weight: 700;
}

.euro-matches__pending {
  font-size: .8125rem;
  font-style: italic;
}

.euro-ranking td:nth-child(n + 4) {
  font-variant-numeric: tabular-nums;
}

/*
 * El primer classificat es el que passa. L'original li pintava d'aiguamarina
 * nomes la cel·la de la posicio, que quedava com una taca sense significat.
 */
.euro-ranking__first > * {
  --bs-table-bg-type: color-mix(in srgb, var(--bs-success) 12%, transparent);
}

/* ---------- Palmares ---------- */

/*
 * Columnes de trofeu: tantes com files te la taula Awards, aixi que han de ser
 * tan estretes com la icona que hi va dins.
 */
/*
 * min-width i no width: totes les columnes valen el mateix encara que estiguin
 * buides, i les que porten dos o tres guanyadors s'eixamplen. Amb width fix les
 * columnes buides s'encongien i les plenes creixien, i la taula quedava a
 * grumolls.
 */
.palmares__award {
  min-width: 2.75rem;
  padding: .35rem .5rem;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;

  /* Un trofeu pot tenir dos o tres guanyadors la mateixa temporada: la cel·la
     s'eixampla en lloc de partir els escuts en dues linies. */
  white-space: nowrap;
}

/* Separador suau entre columnes, que amb quinze ajuda a seguir la fila. */
.palmares__award + .palmares__award {
  border-left: 1px solid var(--bs-border-color-translucent);
}

.palmares thead .palmares__award img {
  width: auto;
  max-height: 22px;
}

/*
 * Al palmares per temporada totes les columnes son estretes, aixi que si la
 * taula s'estira al 100% l'espai sobrant se'l queda la primera i els trofeus
 * queden despenjats a la dreta. Aqui la taula val el que valen les columnes.
 */
.palmares--compact {
  width: auto;
}

.palmares--compact th[scope="row"] {
  padding-right: 1.5rem;
  font-weight: 600;
}

/* Mes alcada de fila: quinze columnes d'escuts necessiten aire vertical. */
.palmares--compact tbody td,
.palmares--compact tbody th {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Amb dos guanyadors del mateix trofeu la mateixa temporada. */
.palmares__award a + a {
  margin-left: .3rem;
}

.palmares td:last-child,
.palmares td:nth-last-child(2) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Escuts d'equip ---------- */

/*
 * Quinze dels trenta-sis escuts son de 56x42, no quadrats. Amb width i height
 * iguals al marcatge sortien aixafats horitzontalment. Deixant l'amplada en
 * auto, el navegador la calcula a partir de l'alcada i de la proporcio real, i
 * els quadrats segueixen sortint quadrats.
 *
 * L'atribut width del marcatge es queda: serveix de reserva d'espai mentre la
 * imatge no ha carregat, i el CSS el guanya despres.
 */
.team-badge {
  width: auto;
  object-fit: contain;
}

/* ---------- Portada ---------- */

.home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.home-hero__logo {
  width: auto;
  height: 5rem;
}


/* Un document per descarregar. */
.doc {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .85rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-decoration: none;
  color: inherit;
}

.doc:hover {
  border-color: var(--bs-primary);
  background: var(--bs-tertiary-bg);
}

.doc__icon {
  flex: 0 0 auto;
}

.doc__title {
  flex: 1 1 auto;
  color: var(--bs-link-color);
}

.doc__date {
  flex: 0 0 auto;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Llistes de la portada: mes llegibles que una taula quan la targeta es estreta. */
.home-list .list-group-item {
  padding: .45rem .85rem;
  font-size: .875rem;
}

/*
 * La classificacio i els propers partits comparteixen alcada de fila: son el
 * mateix component -.home-list- i totes dues posen els escuts a 20 px, aixi que
 * les dues targetes queden alineades fila a fila.
 */
.home-rank,
.home-fixture {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.home-rank__pos {
  flex: 0 0 1.1rem;
  text-align: right;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

.home-rank__badge {
  flex: 0 0 1.25rem;
  display: flex;
  justify-content: center;
}

.home-rank__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rank__pts {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.home-fixture__side {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 0;
  min-width: 0;
}

.home-fixture__side--home {
  justify-content: flex-end;
}

.home-fixture__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-fixture__vs {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
}

/*
 * L'escut a l'esquerra, ocupant l'alcada de les dues linies. El buit te amplada
 * fixa perque el text quedi alineat tambe a les files que no en tenen.
 */
.home-move {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.home-move__badge {
  flex: 0 0 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-move__badge img {
  height: 1.75rem;
}

.home-move__body {
  flex: 1 1 auto;
  min-width: 0;
}

.home-move__top {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.home-move__what {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-move__amount {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.home-move__teams {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-top: .1rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.home-move__teams a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Edicio d'un partit ---------- */

.scoreline-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

.scoreline-edit input {
  width: 4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.scoreline-edit .form-label {
  margin: 0;
  font-weight: 600;
}

/* Els comptadors de gols i assistencies no han d'eixamplar la taula. */
.lineup__number {
  width: 4rem;
}

.lineup__number input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.playoff__register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* Menu d'administracio. Les targetes que encara porten a la web antiga es
   veuen apagades, pero llegibles: son informacio, no un boto trencat. */
.admin-option {
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.admin-option:hover,
a.admin-option:focus-visible {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.admin-option--pending {
    background-color: var(--bs-tertiary-bg);
}