/*
  Transfers refactor (juli 2026) — scherm-specifieke stijlen voor .dt-transfers.
*/

fieldset.dt-fieldset.dt-fieldset--light.dt-transfers__quick-filters-fieldset {
  margin-top: 12px;
}

/* .dt-tabs is sitewide een CSS-grid met zoveel kolommen als tabs (--dt-tab-count) — bij 4 tabs
   ("Transfers"/"Transfer overzicht"/"Scout overzicht"/"Scout Radar") past dat niet naast elkaar op
   een telefoon en duwt de rij buiten beeld. Zelfde oplossing als .dt-stat-card-tabs op de
   stats-pagina's: op mobiel terug naar 1 kolom, dus onder elkaar gestapeld. Scoped op .dt-transfers
   zodat andere pagina's met ui.tab_bar() ongemoeid blijven. */
@media (width<=640px) {
  .dt-transfers .dt-tabs {
    grid-template-columns: 1fr;
  }
}

/* Sitewide gedrag: elk .dt-fieldset--light krijgt een groene focus-ring zodra een veld erbinnen
   focus krijgt (app.css). Op dit brede zoek/snelfilter-kader (met 6+ velden) voelt dat storend aan
   bij elke klik — hier bewust uitgeschakeld, elders op de site blijft het gedrag ongewijzigd. */
.dt-transfers fieldset.dt-fieldset.dt-transfers__filters-fieldset:focus-within,
.dt-transfers fieldset.dt-fieldset.dt-transfers__quick-filters-fieldset:focus-within {
  border-color: rgb(255 255 255 / 18%);
  box-shadow: none;
}

.dt-transfers__section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-2xs, .7rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dt-text-muted, #b8c3d7);
  margin-bottom: var(--space-2);
}

.dt-transfers__divider {
  border: none;
  border-top: 1px solid rgb(255 255 255 / 12%);
  margin: var(--space-3, 12px) 0 0;
}

.dt-transfers__active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dt-transfers__active-filters-label {
  font-size: var(--fs-sm, .875rem);
  color: var(--dt-text-muted, #b8c3d7);
  margin-right: var(--space-1);
}

.dt-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill, 999px);
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--fs-sm, .875rem);
  color: var(--dt-text, #e2e8f0);
}

.dt-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--dt-text-muted, #b8c3d7);
  line-height: 1;
}

.dt-filter-chip__remove:hover {
  color: #ef4444;
}

.dt-transfers__clear-filters {
  margin-left: auto;
  color: #ef4444;
  font-size: var(--fs-sm, .875rem);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
}

/* Tab-bar wordt nu als <a> gerenderd (cross-page links) i.p.v. <button> — reset browser-onderstreping */
.dt-transfers .dt-tab {
  text-decoration: none;
}

/* "Meer/Minder filters"-knop blijft op vaste positie rechts, ongeacht labellengte */
.dt-transfers .dt-filters-row__toggle {
  margin-left: auto;
  min-width: 140px;
  justify-content: center;
}

/* Leeftijd/Status/Waarde-dropdowns hebben langere labels dan het smalle inputveld zelf;
   dropdown-paneel breedte laten meegroeien met de langste optie i.p.v. afkappen. */
.dt-transfers .dt-select__dropdown {
  width: max-content;
  min-width: 100%;
  max-width: 320px;
  right: auto;
}

.dt-transfers .dt-select__option-text {
  overflow: visible;
  text-overflow: clip;
}

/* Positie-picker pitch-overlay (Fase B). Zonder JS blijft de native <select> zichtbaar/werkend;
   .is-enhanced (position-picker.js) verbergt 'm en toont de klikbare trigger + overlay. */
.dt-position-picker {
  position: relative;
  display: inline-block;
}

.dt-position-picker__trigger {
  display: none;
  width: 100%;
  height: var(--dt-input-height);
  align-items: center;
  gap: 10px;
  padding: var(--dt-input-padding-y) var(--dt-input-padding-x);
  color: #fff;
  text-align: left;
  background: linear-gradient(rgb(255 255 255 / 20%), rgb(255 255 255 / 6%));
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 16px;
  cursor: pointer;
}

.dt-position-picker.is-enhanced .dt-position-picker__trigger {
  display: inline-flex;
}

.dt-position-picker__trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dt-position-picker.is-enhanced .dt-position-picker__native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* app.css heeft [hidden]{display:none!important} — position-picker.js zet daarom overlay.hidden
   direct via JS i.p.v. hier op display:block te vertrouwen om die !important te verslaan. */
.dt-position-picker__overlay {
  display: none;
}

/* Altijd (elke schermbreedte) een vast gecentreerd paneel — geen breakpoint-conditionele variant
   meer. Eerdere pogingen met "relatief t.o.v. trigger op desktop, gecentreerd vanaf 640px" hadden
   een gat tussen 641-900px: precies het bereik waarin de mobiele bottom-navigatiebalk (--z-header,
   zichtbaar tot 901px breed) nog zichtbaar is maar mijn mobiele fix nog niet actief was — met een
   onbegrensde hoogte en verkeerde z-index als gevolg. Eén universele weergave sluit dat gat volledig.
   Inset+margin:auto i.p.v. top/left 50%+transform (zelfde techniek als .dt-modal__dialog elders):
   blijft altijd binnen de zichtbare viewport geklemd, ook als de content hoger is dan het scherm.
   z-index op --z-modal (200): ruim boven --z-header (120, o.a. de bottom-navigatiebalk).
   Selector is .dt-position-picker__overlay.is-open (niet .dt-position-picker.is-open ...): JS
   verplaatst overlay+backdrop naar <body> (portal) zodra position-picker.js draait, want position:fixed
   wordt "gekaapt" door backdrop-filter op een voorouder (.dt-panel — zelfde reden als .dt-compare-fab
   elders via {% block after_panel %}). Daardoor is overlay geen DOM-afstammeling van .dt-position-picker
   meer en moet de open/dicht-status als eigen klasse op overlay/backdrop zelf staan. */
.dt-position-picker__overlay.is-open {
  display: block;
  position: fixed;
  inset: 16px;
  margin: auto;
  z-index: var(--z-modal, 200);
  width: min(calc(100vw - 32px), 340px);
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-md, 12px);
  background: rgb(15 23 42 / 96%);
  border: 1px solid rgb(34 197 94 / 30%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

.dt-position-picker__backdrop.is-open {
  display: block;
}

.dt-position-picker__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 200) - 1);
  background: rgb(0 0 0 / 55%);
}

.dt-position-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2, 8px);
}

.dt-position-picker__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm, .875rem);
  font-weight: 700;
  color: var(--dt-text, #e2e8f0);
}

.dt-position-picker__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dt-text-muted, #b8c3d7);
  line-height: 1;
}

.dt-position-picker__close:hover {
  color: #ef4444;
}

.dt-position-picker__close:focus-visible,
.dt-position-picker__trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Echt grasveld, zelfde grondkleur als _pitch.twig (#0b3d1a) + gemaaide-strepen-textuur en
   witte lijnmarkeringen (middenlijn + middencirkel) via pseudo-elementen, geen extra image-asset. */
.dt-position-picker__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-2, 8px);
  border-radius: var(--radius-md, 12px);
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 6%) 0 24px, transparent 24px 48px),
    #0b3d1a;
  border: 2px solid rgb(255 255 255 / 40%);
  position: relative;
  overflow: hidden;
}

.dt-position-picker__pitch::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: rgb(255 255 255 / 40%);
  z-index: 0;
}

.dt-position-picker__pitch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.dt-position-picker__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1, 4px);
  position: relative;
  z-index: 1;
}

.dt-position-picker__row--gk {
  grid-template-columns: 1fr;
  justify-items: center;
}

.dt-position-picker__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgb(255 255 255 / 30%);
  background: rgb(11 61 26 / 70%);
  color: #fff;
  font-size: var(--fs-2xs, .7rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgb(0 0 0 / 55%);
  transition: background .15s ease, border-color .15s ease;
}

.dt-position-picker__zone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dt-position-picker__zone:hover {
  background: rgb(34 197 94 / 40%);
  border-color: rgb(34 197 94 / 70%);
}

.dt-position-picker__zone.is-selected {
  background: rgb(34 197 94 / 30%);
  border-color: #22c55e;
  color: #fff;
}

.dt-position-picker__zone--gk {
  min-width: 72px;
}

.dt-position-picker__specialists {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
}

.dt-position-picker__specialists-label {
  font-size: var(--fs-2xs, .7rem);
  color: var(--dt-text-muted, #b8c3d7);
  margin-right: var(--space-1);
}

.dt-position-picker__zone--specialist {
  border-style: dashed;
}

.dt-position-picker__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: var(--space-2, 8px);
  background: none;
  border: none;
  color: var(--dt-text-muted, #b8c3d7);
  font-size: var(--fs-sm, .875rem);
  cursor: pointer;
}

.dt-position-picker__reset:hover {
  color: #ef4444;
}

.dt-position-picker__reset:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* "STATS ▾"-kolomkop-dropdown (Fase D) — sorteren hoort bij de kolomkop, niet bij "Meer filters".
   .dt-rosterlist__head heeft sitewide opacity:.75 (kolomkoppen-styling); dat drukt elke nakomeling
   — ook position:absolute — samen tot 75% doorzichtig vóór het composieten (een kind kan dat niet
   met een eigen opacity:1 overrulen). transfers-filters.js verplaatst .dt-sort-dropdown__menu
   daarom naar <body> (portal, zelfde soort fix als UI-1 in docs/bugs.md) en positioneert 'm zelf
   via position:fixed + inline top/left — geen CSS-anchoring meer op .dt-sort-dropdown nodig. */
.dt-sort-dropdown {
  position: relative;
}

.dt-sort-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  padding: 0;
}

/* Compacte variant: sorteerknop naast een andere kolomkop-tekst (bv. "Leeftijd" naast "Speler" in
   .rl-player, die op elke schermbreedte zichtbaar blijft — i.t.t. de eigen .rl-age-kolom die op
   smallere schermen verdwijnt via het bestaande responsieve grid). */
.dt-sort-dropdown--compact {
  margin-left: auto;
}

.dt-sort-dropdown--compact .dt-sort-dropdown__trigger {
  font-size: var(--fs-2xs, .7rem);
  font-weight: 400;
  opacity: .75;
  text-transform: none;
  letter-spacing: normal;
}

.dt-sort-dropdown__chevron {
  font-size: .65em;
  transition: transform .15s ease;
}

.dt-sort-dropdown__trigger[aria-expanded="true"] .dt-sort-dropdown__chevron {
  transform: rotate(180deg);
}

.dt-sort-dropdown__menu {
  z-index: var(--z-dropdown, 150);
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgb(15 23 42);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

/* Zelfde kleurpatroon als .dt-link (--dt-primary), i.p.v. de browser-standaard blauwe linkkleur. */
.dt-sort-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  color: var(--dt-text, #e2e8f0);
  font-size: var(--fs-sm, .875rem);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.dt-sort-dropdown__option:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--dt-primary, var(--accent, #00e5a4));
}

.dt-sort-dropdown__option.is-active {
  color: var(--dt-primary, var(--accent, #00e5a4));
  font-weight: 700;
}

.dt-sort-dropdown__check {
  font-size: .8em;
}