/* =============================================================
   Player rankings — visuele herindeling (FI-9 vervolgplan stap 1)
   KPI-strip, donut+tabel naast elkaar (2 losse compacte kaarten),
   positie-rijenlijst met gekleurde tab, FAQ-tabs + competitielijst.
   Alle kleuren via bestaande custom properties zodat licht/donker
   automatisch blijft werken.
   ============================================================= */

/* Alle FontAwesome-iconen op deze pagina consistent goud (feedback: "gebruik voor alle
   iconen gold over de gehele page"). Scoped op .dt-page__panel (deze CSS laadt alleen
   op /player-rankings) i.p.v. .dt-icon globaal aan te passen. */
.dt-page__panel i.fa-solid.dt-icon {
  color: var(--dt-color-gold, #d4af37);
}

/* Raw sprite-svg's (rating/goals/assists in de positie-rijen) hebben geen eigen kleur/fill
   ingesteld en vallen anders terug op zwart. Zelfde svg.dt-icon-markup wordt ook door
   renderSummary() in player-rankings.js hergebouwd, dus dit dekt beide (SSR + AJAX). */
.dt-page__panel svg.dt-icon {
  color: var(--dt-color-gold, #d4af37);
  fill: currentcolor;
}

/* ── SEO-introblok: crawler-content, visueel compact als <details> ── */
.dt-rankings-seo-intro {
  font-size: var(--fs-xs, .75rem);
  color: var(--dt-text-muted, var(--muted));
}

.dt-rankings-seo-intro summary {
  cursor: pointer;
  list-style: none;
}

.dt-rankings-seo-intro summary::-webkit-details-marker {
  display: none;
}

.dt-rankings-seo-intro[open] summary {
  margin-bottom: 6px;
}

/* ── KPI-strip (KEY STATS & HIGHLIGHTS) — één rij, tegels + badges ── */
.dt-rankings-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3, 12px);
}

.dt-rankings-kpi-strip__tile {
  flex: 1 1 180px;
  min-width: 160px;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--dt-border-color, rgb(255 255 255 / 12%));
  background: var(--panel, #162234);
  padding: var(--space-3, 12px) var(--space-4, 16px);
}

.dt-rankings-kpi-strip__tile--player {
  border-color: rgb(212 175 55 / 40%);
  flex-basis: 220px;
}

.dt-rankings-kpi-strip__label {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-2xs, .7rem);
  font-weight: var(--fw-semibold, 600);
  color: var(--dt-text-muted, var(--muted));
  margin-bottom: 4px;
}

.dt-rankings-kpi-strip__value {
  font-size: 2.2rem;
  font-weight: var(--fw-bold, 700);
  color: var(--dt-color-gold, #d4af37);
  line-height: 1.1;
}

.dt-rankings-kpi-strip__value--md {
  font-size: 1.05rem;
  color: #fff;
}

.dt-rankings-kpi-strip__sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs, .75rem);
  color: var(--dt-text-muted, var(--muted));
  margin-top: 2px;
}

.dt-rankings-kpi-strip__leagues {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: var(--fs-2xs, .7rem);
  color: var(--dt-text-muted, var(--muted));
}

.dt-rankings-kpi-strip__leagues img {
  border-radius: 2px;
  vertical-align: -1px;
}

.dt-rankings-kpi-strip__actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
}

.dt-rankings-kpi-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs, .75rem);
  color: var(--dt-text-muted, var(--muted));
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--dt-border-color, rgb(255 255 255 / 12%));
  background: var(--panel, #162234);
  padding: 6px 12px;
  white-space: nowrap;
}

/* ── Cross-navigatie tussen algemene ranglijst / topscorers / de 4 positie-pagina's ──
   Hergebruikt de bestaande .dt-tabs/.dt-tab-look (zelfde als de periode-tabs in
   "Rangschikking totaalscores", feedback: moet één visuele eenheid zijn). .dt-tab is elders
   altijd een <button>, hier zijn het <a>'s — alleen de linkeigen defaults (underline, kleur)
   hoeven hier bijgesteld te worden, de rest (padding/kleur/is-active) komt uit .dt-tab zelf. */
/* Grid i.p.v. flex: feedback vroeg om de volle breedte te vullen met 6 gelijke knoppen
   i.p.v. content-breedte per knop. Mobiel (<=700px, zelfde breakpoint als de rest van deze
   pagina) minder kolommen zodat de labels niet dichtslibben. */
.dt-rankings-cross-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (width > 480px) {
  .dt-rankings-cross-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width > 700px) {
  .dt-rankings-cross-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.dt-rankings-cross-nav .dt-tab {
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* ── Overview-rij: donut-kaart + tabel-kaart naast elkaar ── */
.dt-rankings-overview-row {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-4, 16px);
  align-items: start;
}

.dt-rankings-overview-row__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  /* Zonder min-width:0 respecteert een grid-item de min-content-breedte van zijn kinderen
     (bv. een niet-wrappende donut-legenda) i.p.v. de eigen grid-kolombreedte, waardoor de
     hele kolom — inclusief de titelbalk van de kaart eronder — buiten het scherm duwt. */
  min-width: 0;
}

.dt-rankings-overview-row__table {
  min-width: 0;
}

.dt-rankings-overview-row__chart .dt-card:first-child .dt-sc-body {
  display: flex;
  justify-content: center;
}

@media (width <= 900px) {
  .dt-rankings-overview-row {
    grid-template-columns: 1fr;
  }
}

/* ── Positie-lijst: verticale rijen i.p.v. grid van kaarten ── */
.dt-rankings-position-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-ranking-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 7px solid var(--dt-color-gold, #d4af37);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  background: var(--panel, #162234);
  min-height: auto;
  padding: 8px 12px;
}

/* Zelfde hex + zelfde opzet (kleur op de rand, lichte tint als achtergrond) als
   .dt-position-badge in stat-icons.css — 1 dunne rand oogt door een bekend
   perceptie-effect minder verzadigd dan de badge; de tint compenseert dat. */
[data-pos="GK"] .dt-ranking-kpi { border-left-color: #60a5fa; background: linear-gradient(90deg, rgb(96 165 250 / 12%), transparent 40%), var(--panel, #162234); }
[data-pos="DEF"] .dt-ranking-kpi { border-left-color: #34d399; background: linear-gradient(90deg, rgb(52 211 153 / 12%), transparent 40%), var(--panel, #162234); }
[data-pos="MID"] .dt-ranking-kpi { border-left-color: #facc15; background: linear-gradient(90deg, rgb(250 204 21 / 12%), transparent 40%), var(--panel, #162234); }
[data-pos="FWD"] .dt-ranking-kpi { border-left-color: #fb923c; background: linear-gradient(90deg, rgb(251 146 60 / 12%), transparent 40%), var(--panel, #162234); }

/* Sprite-svg's (<svg class="dt-icon"><use>...) hebben van zichzelf geen intrinsieke
   afmeting — zonder expliciete width/height renderen ze op browser-default (~300x150px).
   Geldt nu nog voor de rating/goals/assists-iconen in .dt-ranking-kpi__stats (het
   header-icoon zelf is verwijderd, zie _position_cards.twig). */
.dt-ranking-kpi svg.dt-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dt-ranking-kpi__stats {
  justify-content: flex-start;
}

.dt-ranking-kpi__stats .dt-ranking-kpi__stat:first-child {
  font-size: 1.2rem;
  font-weight: var(--fw-bold, 700);
  color: var(--dt-color-gold, #d4af37);
  gap: 6px;
}

.dt-ranking-kpi__stats .dt-ranking-kpi__stat:first-child svg.dt-icon {
  width: 18px;
  height: 18px;
}

/* ── FAQ-tabs + competities-lijst naast elkaar ── */
.dt-rankings-faq-row {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: var(--space-4, 16px);
  align-items: start;
}

@media (width <= 900px) {
  .dt-rankings-faq-row {
    grid-template-columns: 1fr;
  }
}

/* Feedback: periode-tabs (Deze Week/Maand/Seizoen) moeten de volle breedte vullen met 3
   gelijke knoppen i.p.v. content-breedte. De positie-dropdown die hier vroeger naast stond
   is weg (zie _overview_panel.twig), dus de tabs-grid is nu het enige kind van deze flex-rij
   — gewoon 100% laten innemen. */
.dt-rankings-table-toolbar .dt-stat-card-tabs {
  width: 100%;
}

/* Zelfde breakpoint als de tab-stapeling (.dt-stat-card-tabs, zie hierboven) zodat beide
   tegelijk omschakelen. */
@media (width <= 900px) {
  .dt-rankings-table-toolbar > .dt-d-flex {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Mobiel (<= 700px, bevestigd goed): auto-fit/minmax laat tabs wrappen naar meerdere volle
   rijen zodra ze niet meer passen, met min-width:0 (zie .dt-tab hieronder) blijven ze binnen
   elke rij gelijk. Desktop (> 700px) forceert i.p.v. daarvan altijd exact --dt-tab-count
   gelijke kolommen op 1 rij — auto-fit gaf daar soms een onvolledige laatste rij (bv. 3 tabs
   op rij 1, 2 op rij 2 met een leeg vak erbij), wat ongelijk oogde. */
.dt-rankings-faq-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  /* De basis .dt-tabs-regel (app.css) zet align-items:center voor zijn flex-fallback —
     dat lekt hier door en laat elke tegel krimpen naar zijn eigen inhoudshoogte i.p.v.
     stretchen naar de hoogte van de langste rij (tabs die naar 2 regels wrappen bleven
     dan hoger dan de rest). stretch is de CSS Grid-default, maar moet hier expliciet
     terug omdat align-items al eerder in de cascade op center staat. */
  align-items: stretch;
  gap: 6px;
  margin-bottom: var(--space-3, 12px);
}

@media (width > 700px) {
  .dt-rankings-faq-tabs {
    grid-template-columns: repeat(var(--dt-tab-count, 5), 1fr);
  }
}

/* Bugfix 2026-07-30: op smalle telefoons (<=430px, bv. iPhone SE/375px) forceert de
   minmax(130px, ...) hierboven nog altijd minimaal 130px per kolom — bij 2 kolommen (260px+
   gap) past dat niet meer binnen de beschikbare kaartbreedte (padding van side-card + pagina
   erafgetrokken), waardoor de hele grid (en daarmee de hele pagina, want er zit geen
   overflow-x:hidden tussen) breder werd dan het scherm. minmax(0, 1fr) i.p.v. een vaste
   ondergrens laat de 2 kolommen echt krimpen; de tekst valt dan terug op 2 regels
   (min-width:0 op .dt-tab hieronder staat dat al toe). */
@media (width <= 430px) {
  .dt-rankings-faq-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Grid-items krijgen standaard een automatische min-breedte t.h.v. hun min-content (het
   langste, niet-afbreekbare woord — hier "wedstrijden?"), wat die kolom breder duwt dan
   zijn 1fr-aandeel en de rest juist smaller maakt. min-width:0 schakelt dat uit, zodat
   alle 5 tegels écht gelijk blijven ongeacht tekstlengte. */
.dt-rankings-faq-tabs .dt-tab {
  min-width: 0;
  justify-content: center;
  text-align: center;
}

.dt-rankings-faq-panel {
  padding-top: 4px;
}

.dt-rankings-leagues-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.dt-rankings-leagues-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm, .8125rem);
}

.dt-rankings-leagues-list img {
  border-radius: 2px;
  flex-shrink: 0;
}

/* Competitie-links: geen underline standaard, alleen bij hover (feedback). Op mobiel is er
   geen hover-affordance, dus daar een chevron als visuele "dit is klikbaar"-indicator i.p.v.
   de underline. */
.dt-rankings-leagues-list__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

.dt-rankings-leagues-list__link:hover,
.dt-rankings-leagues-list__link:focus-visible {
  text-decoration: underline;
}

.dt-rankings-leagues-list__chevron {
  display: none;
  margin-left: auto;
  color: var(--dt-text-muted, var(--muted));
  font-size: var(--fs-2xs, .7rem);
}

@media (width <= 700px) {
  .dt-rankings-leagues-list__chevron {
    display: inline-flex;
  }
}

/* ── Ranglijst-rijen: div-based i.p.v. <table> — horizontale table-scroll wordt nergens
   anders in de app gebruikt op mobiel; overal (bv. transfers/.dt-roster-row) lost men
   brede rijen op met een klapbaar mobiel-accordion. Zelfde mechanisme hier:
   .dt-rankings-row__accordion-body is `display:contents` op desktop (smelt samen met de
   grid-kolommen van de ouder), en een verborgen/klapbaar blok op mobiel. Referentie:
   public/css/modern/app.css .dt-roster-row / public/js/modern/pages/transfers-accordion.js.
   Breakpoint 700px — zelfde als transfers, voor consistentie. ── */
.dt-rankings-row-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-rankings-row {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.5fr) 90px minmax(100px, 1fr) minmax(90px, 1fr) 90px 80px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--dt-border-color, rgb(255 255 255 / 10%));
  background: var(--panel, #162234);
}

.dt-rankings-row--head {
  background: transparent;
  border: none;
  padding: 2px 12px 8px;
  font-size: var(--fs-2xs, .7rem);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dt-text-muted, var(--muted));
}

.dt-rankings-row__rank {
  text-align: center;
  font-weight: var(--fw-bold, 700);
  color: var(--dt-color-gold, #d4af37);
}

.dt-rankings-row__player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dt-rankings-row__player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dt-rankings-row__form {
  display: flex;
  justify-content: center;
}

.dt-rankings-row__competition {
  color: var(--dt-text-muted, var(--muted));
  font-size: var(--fs-sm, .8125rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dt-rankings-row__accordion-trigger {
  display: none;
}

.dt-rankings-row__accordion-body {
  display: contents;
}

/* Score staat in de DOM vóór de accordion-toggle (nodig voor de compacte mobiele rij —
   zie player-rankings.js), maar hoort op desktop als laatste kolom te staan, ná de
   accordion-inhoud (positie/club/competitie/vorm). `order` verlegt dat onafhankelijk van
   de brontekst-volgorde, alléén op desktop (grid); op mobiel (flex) geldt de natuurlijke
   DOM-volgorde al correct, dus geen override nodig. */
@media (width > 700px) {
  .dt-rankings-row__score {
    order: 7;
    text-align: center;
    font-weight: var(--fw-bold, 700);
    color: var(--success, #22c55e);
  }
}

/* ── Mobiel (<= 700px): "Mobile Player Card" — rank+naam bovenaan, klapbare
   score/positie/club/competitie/vorm-sectie, chevron als centrale voetregel. Score staat
   NIET meer op de altijd-zichtbare regel (bewuste keuze, 2026-07-28): ingeklapte rijen tonen
   alleen rang+naam+chevron, de score is onderdeel van de eerste paneelrij zodra je opent.
   Op desktop (display:contents op accordion-body) blijft score via `order` gewoon de laatste
   kolom, ongeacht deze nesting — zie het losse `@media (width > 700px)`-blok verderop. ── */
@media (width <= 700px) {
  .dt-rankings-row--head {
    display: none;
  }

  .dt-rankings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 2px 10px -4px rgb(0 0 0 / 35%);
  }

  .dt-rankings-row__rank {
    order: 1;
  }

  .dt-rankings-row__player {
    order: 2;
    flex: 1 1 auto;
  }

  .dt-rankings-row__accordion-trigger {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: none;
    border: none;
    color: var(--dt-text-muted, var(--muted));
    padding: 4px;
    margin-top: 2px;
    flex-shrink: 0;
    min-height: 32px;
  }

  .dt-rankings-row__accordion-trigger[aria-expanded="true"] .dt-icon {
    transform: rotate(180deg);
  }

  /* Paneel-grid: strak uitgelijnd op 2 kolommen, met scheidingslijnen tussen elke rij
     i.p.v. losse "vakjes" per veld.
       rij 1 (2 kolommen, verticale lijn ertussen): score | positie
       rij 2 (1 kolom, volle breedte): club-naam, competitie eronder (geen apart vak)
       rij 3 (1 kolom, volle breedte): vorm-grafiek
     `grid-template-areas` i.p.v. bron-volgorde, zodat de markup-volgorde (score, positie,
     club, competitie, vorm) er niet toe doet. */
  .dt-rankings-row__accordion-body {
    order: 3;
    display: none;
    width: 100%;
  }

  .dt-rankings-row.is-open .dt-rankings-row__accordion-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "score position"
      "club club"
      "competition competition"
      "form form";
    column-gap: 12px;
    row-gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--dt-border-color, rgb(255 255 255 / 10%));
  }

  .dt-rankings-row__score {
    grid-area: score;
    padding-right: 12px;
    border-right: 1px solid var(--dt-border-color, rgb(255 255 255 / 10%));
    font-size: 1.3rem;
    font-weight: var(--fw-bold, 700);
    color: var(--success, #22c55e);
  }

  .dt-rankings-row__position {
    grid-area: position;
  }

  .dt-rankings-row__club {
    grid-area: club;
    padding-top: 8px;
    border-top: 1px solid var(--dt-border-color, rgb(255 255 255 / 10%));
  }

  .dt-rankings-row__competition {
    grid-area: competition;
    /* Geen eigen rand/vak — visueel gewoon de regel ónder club-naam binnen hetzelfde blok. */
    margin-top: -4px;
  }

  .dt-rankings-row__form {
    grid-area: form;
    padding-top: 8px;
    border-top: 1px solid var(--dt-border-color, rgb(255 255 255 / 10%));
  }

  /* Sparkline mag de volle kaartbreedte gebruiken i.p.v. de standaard max-width:160px
     (die is bedoeld voor kleine tabelcellen elders). */
  .dt-rankings-row__form .dt-chart--spark {
    max-width: none;
  }

  .dt-rankings-row__competition,
  .dt-rankings-row__form {
    white-space: normal;
  }
}

/* ── Mobiel (<= 640px) ── */
@media (width <= 640px) {
  /* KPI-strip: stapelen i.p.v. wrappen — anders vallen tegels willekeurig 2-op-een-rij. */
  .dt-rankings-kpi-strip {
    flex-direction: column;
  }

  .dt-rankings-kpi-strip__tile,
  .dt-rankings-kpi-strip__tile--player,
  .dt-rankings-kpi-strip__actions {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }

  .dt-rankings-kpi-strip__badge {
    width: 100%;
    justify-content: center;
    /* "Laatst bijgewerkt: 28 juli 2026 09:50" past niet op 1 regel op smalle telefoons —
       laten wrappen i.p.v. de badge (en daarmee de hele kaart) breder te laten worden. */
    white-space: normal;
    text-align: center;
  }
}