/**
 * Public tournament views. Scoped under .lfto so it never leaks into the theme.
 * Uses the theme's font/colours by inheritance; only layout + tournament-specific
 * bits are set here.
 */

.lfto {
  --lfto-accent:          #f3e70c;  /* Haags Open yellow */
  --lfto-accent-ink:      #1b1a05;  /* text on yellow */
  --lfto-accent-wash:     #fefce3;  /* 10% yellow, pre-flattened onto white */
  --lfto-ink:             #111827;  /* emphasis text */
  --lfto-muted:           #6b7280;  /* secondary text */
  --lfto-border:          #e5e7eb;  /* hairlines */
  --lfto-border-strong:   #d1d5db;
  --lfto-win-bg:          #ecfdf5;  /* completed / won row */
  --lfto-win-ink:         #065f46;
  --lfto-card-bg:         #ffffff;
  --lfto-surface:         #f9fafb;  /* table + card headers */
  --lfto-radius:          6px;
  --lfto-gap:             1rem;
  --lfto-table-cell-pad:  0.5rem 0.625rem;
  /* type scale is inherited from the theme; local step-downs only */
  --lfto-fs-compact:      0.875em;
  --lfto-fs-micro:        0.75em;
  margin: 1.5rem 0;
}

.lfto * {
  box-sizing: border-box;
}

.lfto :focus-visible {
  outline: 2px solid var(--lfto-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.lfto .lfto-empty {
  color: var(--lfto-muted);
  font-style: italic;
  margin: 0.5rem 0;
}

/* ---- Tables ------------------------------------------------------------- */

.lfto-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}

/* Last-resort horizontal scroll: if a table still can't fit (a very long name,
 * a dense table on a mid-width screen) it scrolls inside this box instead of
 * widening the page. Invisible on desktop — it only scrolls when it has to. */
.lfto-tablewrap {
  margin: 0.5rem 0 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.lfto-tablewrap > .lfto-table {
  margin: 0;
}

.lfto-table th,
.lfto-table td {
  border-bottom: 1px solid var(--lfto-border);
  padding: 0.4rem 0.55rem;
  text-align: left;
  vertical-align: middle;
}

.lfto-table thead th {
  border-bottom-width: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.lfto-table__num,
.lfto-table__c {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

.lfto .is-winner {
  font-weight: 700;
}

.lfto-match__vs {
  color: var(--lfto-muted);
  margin: 0 0.35rem;
}

.lfto-match__status {
  color: var(--lfto-muted);
  font-size: 0.85em;
}

.lfto-match--completed td,
.lfto-match--walkover td {
  background: var(--lfto-win-bg);
}

/* ---- View header ----------------------------------------------------- */

/* Every shortcode opens with one of these so several can share a page and
 * still read as distinct sections. The theme styles bare <h2>; we only set
 * spacing and a hairline so the section start is unmistakable. */
.lfto > .lfto-heading {
  margin: 0 0 var(--lfto-gap);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--lfto-ink);
  font-size: 1.4em;
  line-height: 1.2;
}

.lfto-header {
  margin-bottom: var(--lfto-gap);
}

.lfto-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.lfto-header__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
}

.lfto-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-compact);
}

.lfto-header__meta > li + li::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: var(--lfto-border-strong);
}

/* ---- Status pill --------------------------------------------------------- */

.lfto-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.5em;
  border: 1px solid var(--lfto-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lfto-pill--ink {
  background: var(--lfto-ink);
  border-color: var(--lfto-ink);
  color: #fff;
}

/* ---- Filter bar ------------------------------------------------------- */

.lfto-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--lfto-border);
  border-radius: var(--lfto-radius);
  background: var(--lfto-surface);
  margin-bottom: var(--lfto-gap);
}

.lfto-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 12rem;
}

.lfto-filters__label {
  font-size: var(--lfto-fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lfto-muted);
}

.lfto-filters input[type="search"],
.lfto-filters select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--lfto-border-strong);
  border-radius: var(--lfto-radius);
  background: #fff;
  font: inherit;
  font-size: var(--lfto-fs-compact);
  color: inherit;
}

.lfto-filters__count {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-end;
  padding-bottom: 0.45rem;
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-compact);
}

.lfto-filters__count b {
  color: var(--lfto-ink);
}

.lfto-filters__submit {
  align-self: flex-end;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--lfto-ink);
  border-radius: var(--lfto-radius);
  background: #fff;
  font: inherit;
  font-size: var(--lfto-fs-compact);
  font-weight: 600;
  cursor: pointer;
}

/* JS on: server-side submit fallback isn't needed */
.lfto.has-js .lfto-filters__submit {
  display: none;
}

@media (max-width: 40rem) {
  .lfto-filters__count {
    margin-left: 0;
    padding-bottom: 0;
  }
}

/* ---- Players -------------------------------------------------------- */

.lfto-players__group + .lfto-players__group {
  margin-top: calc(var(--lfto-gap) * 1.5);
}

.lfto-players__group[hidden] {
  display: none;
}

.lfto-players__grouphead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--lfto-ink);
  font-size: 1em;
}

.lfto-players__count {
  color: var(--lfto-muted);
  font-weight: 400;
  font-size: var(--lfto-fs-compact);
}

.lfto-players__row[hidden] {
  display: none;
}

.lfto-players .lfto-table__num {
  color: var(--lfto-muted);
}

.lfto-players__name {
  font-weight: 600;
  color: var(--lfto-ink);
}

.lfto-players__tag {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: 1px solid var(--lfto-border-strong);
  border-radius: 3px;
  background: #fff;
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-micro);
  white-space: nowrap;
}

.lfto-players__tag--seeded {
  border-color: var(--lfto-ink);
  color: var(--lfto-ink);
  font-weight: 700;
}

.lfto-players__tag--youth {
  border-color: #93c5fd;
  color: #1e40af;
}

.lfto-table--zebra tbody tr:nth-child(even) {
  background: var(--lfto-surface);
}

/* ---- Standings grid -------------------------------------------------- */

.lfto-standings__grid {
  display: grid;
  /* min(20rem, 100%) so a single column can't overflow a narrow phone */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}

.lfto-standings__group-title,
.lfto-schedule__group-title {
  margin: 0.75rem 0 0.25rem;
}

.lfto-schedule__round,
.lfto-standings__round {
  margin-bottom: 2rem;
}

.lfto-schedule__meta {
  color: var(--lfto-muted);
  font-size: 0.8em;
  font-weight: 400;
  margin-left: 0.5rem;
}

/* ---- Poule schedule toggle (used by [lfto_poules]) -------------------- */

.lfto-poule-schedule {
  margin-top: 0.5rem;
  border-top: 1px solid var(--lfto-border);
  padding-top: 0.15rem;
}

.lfto-poule-schedule__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
  list-style: none;
}

.lfto-poule-schedule__toggle::-webkit-details-marker {
  display: none;
}

.lfto-poule-schedule__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--lfto-fs-compact);
  color: var(--lfto-ink);
}

.lfto-poule-schedule__label::before {
  content: "\25B8";
  display: inline-block;
  color: var(--lfto-muted);
  transition: transform 0.15s ease;
}

.lfto-poule-schedule[open] > .lfto-poule-schedule__toggle .lfto-poule-schedule__label::before {
  transform: rotate(90deg);
}

.lfto-poule-schedule__toggle .lfto-muted {
  font-size: var(--lfto-fs-micro);
}

.lfto-poule-schedule__table {
  margin-top: 0.1rem;
}

/* ---- Play-off (bottom of each qualifier day in [lfto_poules]) --------- */

.lfto-playoff {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--lfto-border-strong);
}

.lfto-playoff__title {
  margin: 0 0 0.75rem;
}

.lfto-playoff__col + .lfto-playoff__col {
  margin-top: 1.5rem;
}

.lfto-playoff__col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.15rem;
}

.lfto-playoff__col-title {
  margin: 0;
  font-size: 1em;
}

.lfto-playoff__col-meta {
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-compact);
}

.lfto-po-src {
  display: inline-block;
  min-width: 1.7em;
  margin-right: 0.3em;
  padding: 0.05em 0.3em;
  border: 1px solid var(--lfto-border-strong);
  border-radius: 3px;
  color: var(--lfto-muted);
  font-size: var(--lfto-fs-micro);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* ---- Qualifiers banner — a single day's ([lfto_poules]) or the whole
 * tournament's ([lfto_bracket stage=playoff]) hoofdtoernooi qualifiers. --- */

.lfto-qualified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.85rem;
  margin: 0.5rem 0 1.1rem;
  padding: 0.55rem 0.8rem;
  background: var(--lfto-accent-wash);
  border: 1px solid var(--lfto-accent);
  border-radius: var(--lfto-radius);
}

.lfto-qualified__label {
  font-weight: 700;
  font-size: var(--lfto-fs-compact);
  color: var(--lfto-accent-ink);
}

.lfto-qualified__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfto-qualified__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: var(--lfto-fs-compact);
  color: var(--lfto-ink);
  white-space: nowrap;
}

.lfto-qualified__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--lfto-accent-ink);
  color: var(--lfto-accent);
  font-size: var(--lfto-fs-micro);
  font-weight: 700;
}

/* multi-day summary (top of [lfto_bracket stage=playoff]): label stacks
   above one list per day, instead of the single-day banner's one flat row. */
.lfto-qualified--summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.lfto-qualified__days {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  width: 100%;
}

.lfto-qualified__day-label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
  font-size: var(--lfto-fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lfto-accent-ink);
  opacity: 0.7;
}

/* ---- Podium ([lfto_b_toernooi]: winner/runner-up/3rd/4th) --------------- */

.lfto-podium {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--lfto-accent-wash);
  border: 2px solid var(--lfto-accent);
  border-radius: var(--lfto-radius);
}

.lfto-podium__label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 700;
  font-size: var(--lfto-fs-compact);
  color: var(--lfto-accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lfto-podium__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfto-podium__place {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--lfto-ink);
}

.lfto-podium__place--1 {
  font-weight: 800;
  font-size: 1.15em;
}

.lfto-podium__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--lfto-accent-ink);
  color: var(--lfto-accent);
  font-size: var(--lfto-fs-micro);
  font-weight: 700;
}

/* ---- Bracket: one full-width table per round, stacked -------------------
 * (not side-scrolling columns — reads cleanly on both small and large
 * screens, and never truncates a name). */

.lfto-bracket__day + .lfto-bracket__day {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--lfto-border-strong);
}

.lfto-bracket__day-title {
  margin: 0 0 1rem;
}

.lfto-bracket__round + .lfto-bracket__round {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lfto-border);
}

.lfto-bracket__round-title {
  margin: 0 0 0.4rem;
}

/* per-row winner mark — a light-touch cue on every round (playoff + finals);
   the champion banner below is the emphatic one, reserved for the final. */
.lfto-win-mark {
  display: inline-block;
  margin-right: 0.3em;
  color: #2b8a3e;
  font-weight: 700;
}

.lfto-champion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin-top: 0.85rem;
  padding: 0.85rem 1.1rem;
  background: var(--lfto-accent-wash);
  border: 2px solid var(--lfto-accent);
  border-radius: var(--lfto-radius);
}

.lfto-champion__icon {
  font-size: 1.6em;
  line-height: 1;
}

.lfto-champion__label {
  font-weight: 700;
  font-size: var(--lfto-fs-compact);
  color: var(--lfto-accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lfto-champion__name {
  font-weight: 800;
  font-size: 1.2em;
  color: var(--lfto-ink);
}

/* ---- Small screens (< 40rem) -----------------------------------------------
 * Desktop and tablet layout is untouched. On phones two things change:
 *  1. Match-up cells put each player on their own line (no more "Naam A – Naam
 *     B" running off the edge).
 *  2. Wide stat tables (.lfto-table--stack: standings, deelnemers, breaks,
 *     poule-indeling) turn into one card per row, each stat labelled from its
 *     data-label instead of a column header. */
@media (max-width: 40rem) {

  /* 1. match-up cells — schedule, poules, play-off, bracket, results, B-toernooi */
  .lfto .lfto-match__p {
    display: block;
  }

  .lfto .lfto-match__vs {
    display: none;
  }

  .lfto .lfto-po-src {
    margin: 0 0 0.15rem;
  }

  /* 2. dense stat tables -> one card per row. Cells run as inline flow; a hard
   *    line break (a "\A" in the name cell's ::after, rendered via white-space:
   *    pre) drops every stat onto line 2, so the name is always alone on line 1
   *    with the number — no stat beside it, no baseline drift. */
  .lfto-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lfto-table--stack tbody tr {
    display: block;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lfto-border);
    border-radius: var(--lfto-radius);
    background: var(--lfto-card-bg);
  }

  .lfto-table--stack tbody tr + tr {
    margin-top: 0.5rem;
  }

  .lfto-table--stack.lfto-table--zebra tbody tr:nth-child(even) {
    background: var(--lfto-surface);
  }

  .lfto-table--stack td {
    display: inline;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .lfto-table--stack td.lfto-table__num {
    margin-right: 0.3rem;
    font-weight: 700;
    color: var(--lfto-muted);
  }

  .lfto-table--stack td.lfto-table__num::after {
    content: ".";
  }

  .lfto-table--stack td.lfto-cell--head {
    font-weight: 700;
    color: var(--lfto-ink);
  }

  /* hard line break after the name -> stats start on the next line */
  .lfto-table--stack td.lfto-cell--head::after {
    content: "\A";
    white-space: pre;
  }

  .lfto-table--stack td[data-label] {
    display: inline-block;
    margin: 0.2rem 0.85rem 0 0;
    font-size: var(--lfto-fs-compact);
  }

  .lfto-table--stack td[data-label]::before {
    content: attr(data-label) "\00a0";
    font-weight: 700;
    font-size: var(--lfto-fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lfto-muted);
  }

  .lfto-table--stack td.lfto-empty {
    display: block;
    margin-top: 0.3rem;
  }
}