:root {
  color-scheme: light dark;
  --bg: #eef1f4;
  --topbar-bg: #a1d2ff;
  --surface: #ffffff;
  --border: #000000;
  --divider: #e2e6ea;
  --text: #000000;
  --text-muted: #6b6b67;
  --accent: #123a57;
  --accent-dark: #123a57;
  --accent-soft: #e2e9f0;
  --good: #47be00;
  --good-soft: #e3f5d6;
  --bad: #ff000a;
  --bad-soft: #ffdfe1;
  --tile-stroke: #e6e6e2;
  --input-bg: #f4f4ee;


  --menu-blue: #2f5f86;
  --banner-accent: #e2e6ea;
  --radius: 18px;
  --radius-sm: 11px;
  --radius-pill: 999px;
  --shadow: none;
  --max-width: 560px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-condensed: "Anton", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-display: var(--font-condensed);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1720;
    --topbar-bg: #16222f;
    --surface: #182430;
    --divider: #2c3a48;
    --text: #f2f5f8;
    --text-muted: #9aa5ad;
    --accent: #7fb8e8;
    --accent-dark: #dbe9f5;
    --accent-soft: #22303d;
    --good: #5fd15a;
    --good-soft: #1e3a17;
    --bad: #ff6b5e;
    --bad-soft: #3a1a1c;
    --tile-stroke: #3a4a5a;
    --input-bg: #22303d;
    --menu-blue: #3d6f99;
    --banner-accent: #1e2a36;
    --shadow: none;
  }
  /* Het pijltje van <select> is als data-URI met een vaste zwarte lijn
     getekend -- in dark mode is dat onzichtbaar op de donkere achtergrond. */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f2f5f8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  }
  /* #calendar-btn gebruikt normaal var(--accent-dark) als achtergrond, maar
     die variabele draait in dark mode juist om naar een lichte kleur (voor
     tekst op donkere kaarten) -- dat maakt de ronde kalenderknop wit-op-wit.
     Hier expliciet dezelfde donkere navy als in light mode vasthouden. */
  #calendar-btn,
  #calendar-btn:hover {
    background: #123a57;
    border-color: #123a57;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  /* Zonder dit veert de pagina op iOS even terug ("rubber band") als je
     voorbij de bovenkant swipet, waardoor de achtergrond boven de sticky
     header (.topbar) even zichtbaar wordt. overscroll-behavior schakelt die
     bounce uit zodat de header altijd naadloos bovenaan blijft zitten. */
  overscroll-behavior-y: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }








#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--topbar-bg);
  overflow: hidden;
  transition: opacity 0.35s ease;
}
#app-splash.app-splash-hidden {
  opacity: 0;
  pointer-events: none;
}


#app-splash-logo {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}
#app-splash-spinner {
  position: relative;
  width: 34px;
  height: auto;
  display: block;
  animation: app-splash-spin 1.1s linear infinite;
}
@keyframes app-splash-spin {
  to { transform: rotate(360deg); }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px 116px;
}

.app-view.hidden { display: none; }

.bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  max-width: calc(var(--max-width) - 24px);
  margin: 0 auto;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--divider);
  box-shadow: var(--shadow);
  padding: 8px 6px;
}
.bottom-nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 8px 2px;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.bottom-nav-btn svg { width: 21px; height: 21px; }
.bottom-nav-btn span {
  font-size: 10px;
  font-weight: 500;
}
.bottom-nav-btn.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.bottom-nav-btn.active span { font-weight: 700; }

body:has(.bottom-nav) .site-footer { display: none; }

.mini-desktop-columns { display: none; }

.dash-greeting {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--accent-dark);
  margin: 20px 0 14px;
}
.dash-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.dash-tap-card { cursor: pointer; }
.dash-card.stat-grid-2x2 { padding: 0; background: none; box-shadow: none; margin-bottom: 16px; }

.dash-card-title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.dash-banner-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.dash-banner-card-header {
  background: var(--topbar-bg);
  padding: 14px 18px;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
/* Live-aanduiding tijdens een lopende speeldag */
@keyframes live-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(226, 75, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0); }
}
.live-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e24b4a;
  margin-right: 8px;
  vertical-align: 2px;
  animation: live-dot-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
.live-note {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text-muted, var(--text));
  font-size: 12px;
  line-height: 1.4;
}
.live-note-text .live-dot { vertical-align: 1px; }
.dash-banner-card-body {
  padding: 16px 18px;
}
/* Instagram-kaart bestaat enkel uit de titelbalk (een <a>, geen losse
   .dash-banner-card-body) -- display:flex nodig want een <a> is standaard
   inline, en text-decoration expliciet uitgeschakeld (ook bij :hover) zodat
   het als knop/balk oogt i.p.v. als tekstlink. */
.dash-instagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.dash-instagram-header:hover { text-decoration: none; color: var(--text); }
.dash-instagram-icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
/* De titelbalk van "Volgende speeldag" toont nu titel + countdown samen
   (i.p.v. de countdown los in de kaart-body zoals voorheen bij
   .dash-countdown-text, dat hierdoor overbodig is geworden). */
.dash-countdown-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dash-countdown-header-timer {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  opacity: 0.85;
  white-space: nowrap;
}
/* Op mobiel staat de titelbalk vaak te krap voor titel + aftelklok naast
   elkaar (vooral bij een langere bannertitel) -- daar komt de klok onder de
   titel, links uitgelijnd, i.p.v. rechts op dezelfde lijn. */
@media (max-width: 720px) {
  .dash-countdown-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
.dash-countdown-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.dash-countdown-actions .btn-secondary {
  width: 100%;
}
.dash-banner-card.dash-tap-card { cursor: pointer; }
.dash-points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.dash-points-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  white-space: nowrap;
}
/* "Algemeen klassement" is de langste van de 4 labels en wrapt op smalle
   telefoonschermen als enige naar 2 regels (de kolom in de 2x2-grid is maar
   zo'n 140-150px breed) -- iets kleinere letter-spacing/font-size op mobiel
   houdt 'm op 1 lijn, in lijn met de andere 3 labels. */
@media (max-width: 480px) {
  .dash-points-label {
    font-size: 11px;
    letter-spacing: 0.01em;
  }
}
.dash-points-value {
  font-family: var(--font-condensed);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
}

.dash-howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-howto-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.dash-howto-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
}

.profiel-footer { margin-top: 22px; }


.container-wide { max-width: 980px; }





.app-fixed-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--topbar-bg);
}




.fixed-tabs-wrap {
  margin: 16px 0 6px;
}




.countdown-bar {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}



.app-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 16px 0;
}





.app-header.menu-bar {
  background: transparent;
  padding: 14px 16px;
  border-radius: 0;
}

#topbar {
  background: var(--topbar-bg);
  border-bottom: none;
}

.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.app-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-header-row .topbar-icons { display: flex; gap: 8px; flex: 0 0 auto; }

.brand-link { display: inline-flex; align-items: center; min-width: 0; flex: 1 1 auto; cursor: pointer; }

.topbar-nav {
  display: none;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-right: 24px;
}
.topbar-nav-btn {
  border: none;
  background: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  white-space: nowrap;
}
.topbar-nav-btn:hover { background: rgba(255, 255, 255, 0.35); }
.topbar-nav-btn.active {
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
}

.profile-btn-name {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
}







.brand-logo {
  display: block;
  width: 239px;
  max-width: 100%;
  height: auto;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.profile-link:hover { text-decoration: none; }

.profile-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 7px;
  box-shadow: var(--shadow);
  border: 1px solid var(--tile-stroke);
  overflow: hidden;
}



.avatar-ball {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: url("../assets/bal.svg");
  mask-image: url("../assets/bal.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.avatar-sm {
  width: 26px;
  height: 26px;
  padding: 5px;
  box-shadow: none;
  border: 1.5px solid var(--text);
}

.player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}






.segmented-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  background: #e4e1d4;
  border-radius: calc(var(--radius-sm) + 2px);
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(20, 30, 30, 0.08);
}





.seg-tab-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(20, 30, 30, 0.14);
  z-index: 0;
  will-change: transform;
}

.seg-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: 7px 6px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.15s ease;
}
.seg-tab:hover { text-decoration: none; color: var(--text); }
.seg-tab:active { transform: scale(0.97); }
.seg-tab.active {
  color: var(--text);
}
.seg-tab.active:hover { color: var(--text); }



.segmented-tabs.primary { background: var(--accent-soft); padding: 4px; }
.segmented-tabs.primary .seg-tab { font-size: 13px; font-weight: 800; padding: 9px 6px; }
.segmented-tabs.primary .seg-tab.active { color: var(--accent-dark); }

#standings-mode-tabs.segmented-tabs {
  background: var(--accent-soft);
  box-shadow: inset 0 1px 2px rgba(20, 30, 30, 0.08);
}
#standings-mode-tabs .seg-tab {
  color: var(--text-muted);
  font-size: 15px;
}
#standings-mode-tabs .seg-tab:hover { color: var(--accent-dark); }
#standings-mode-tabs .seg-tab.active,
#standings-mode-tabs .seg-tab.active:hover {
  color: var(--accent-dark);
}


.matchday-progress { margin: 4px 0 20px; }
.matchday-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
  margin-bottom: 8px;
}
.matchday-progress-fill {
  height: 100%;
  background: var(--menu-blue);
  border-radius: 999px;
}




.swipe-viewport {
  overflow: hidden;
  width: 100%;
  /* Laat de browser verticaal scrollen direct native afhandelen i.p.v.
     eerst even te "twijfelen" tussen native scroll en de JS-drag, wat als
     een korte vertraging/schokje aanvoelde bij de start van een sleep. */
  touch-action: pan-y;
}
.swipe-track {
  display: flex;
  gap: 16px;
}
.swipe-pane {
  flex: 0 0 auto;
  min-width: 0;
}
.swipe-pane-desktop-title { display: none; }

/* Drag-following swipe-carousel voor de minicompetitie-tabs (WeeVee Sports +
   eigen groepen). Zelfde opbouw als .swipe-viewport/.swipe-track/.swipe-pane
   hierboven (vaste px-breedtes per pane, gezet door layoutMiniSwipeTrack() in
   dashboard.js), maar met 3 slots (prev/current/next) i.p.v. 2, omdat het
   aantal competities dynamisch is. */
.mini-swipe-viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  /* Een kort klassement (weinig leden) liet de viewport maar zo hoog zijn
     als de inhoud zelf -- de lege ruimte ERONDER (tot waar het scherm
     visueel ophoudt) hoorde dan niet meer bij dit element, waardoor een
     sleep die daar start niet werd opgepikt (voelde aan als "je kan
     alleen swipen op de competitie zelf"). min-height rekt de swipe-zone
     door tot ruim voorbij een typisch kort klassement, ongeacht de
     werkelijke inhoudslengte (bij een langere lijst heeft dit geen effect,
     de inhoud bepaalt dan gewoon zelf de hoogte). */
  min-height: 55vh;
}
.mini-swipe-track {
  display: flex;
  gap: 16px;
}
.mini-swipe-pane {
  flex: 0 0 auto;
  min-width: 0;
}

.pane-note {
  min-height: 0;
  margin: 0;
}
/* Gecentreerde bijschrift-regel boven het klassement/pronostiek-blok --
   dezelfde stijl voor "GES +/- PTN" (Huidig klassement) als voor "Klik
   onderaan om je voorspelling te bewerken" (Mijn pronostiek), zodat beide
   tabbladen exact dezelfde hoogte/ruimte hebben tussen de schuiver en de
   eerste rij. */
.pane-top-caption {
  margin: 0 0 4px;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
/* GES/+/-/PTN moet rechts uitgelijnd staan, exact boven de stat-box-kolommen
   (die ook 132px breed zijn en rechts in elke rij staan) i.p.v. gecentreerd. */
#real-top-caption { justify-content: flex-end; }


.topbar {
  border-bottom: 1px solid var(--divider);
  background: var(--topbar-bg);
}




body.floating-header .topbar {
  border-bottom: none;
  background: transparent;
}
body.floating-header .app-header {
  padding-top: 28px;
  padding-bottom: 4px;
}
body.floating-header .brand-logo {
  height: 52px;
}

.topbar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}

.brand span { color: var(--accent); }

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}



h1 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; margin: 0 0 12px; letter-spacing: -0.005em; text-align: center; text-transform: uppercase; }
.subtitle { color: var(--text-muted); margin: 0 0 28px; font-size: 14px; }
.page-header { margin-bottom: 20px; }

.back-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.back-link:hover { color: var(--text); text-decoration: none; }



.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 20px; }



.card.scoreboard {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}




.stat-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-wrap: unset;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  flex: 1;
  min-width: 140px;
  box-shadow: var(--shadow);
}

.stat .label { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.stat .value { font-family: var(--font-heading); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.stat .value.accent { color: var(--accent-dark); }

.stat .value.provisional { color: var(--text); }


#klassement-rank, #klassement-matchday-stat { font-size: 22px; }

.stat .matchday-progress-track { margin: 10px 0 0; height: 6px; }
#klassement-provisional-note {
  display: block;
  margin: -12px 0 16px;
  font-size: 12px;
  color: var(--text);
  text-align: center;
}



label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }

input, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}

input:focus, select:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}




input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}



select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 13px;
  padding-right: 44px;
}

.field { margin-bottom: 16px; }

/* Inputs zijn standaard beige (#f4f4ee), bedoeld voor contrast op witte
   kaarten -- de nieuwe-competitie/toetreden-velden bij Minicompetitie staan
   los op de grijze paginabackground, waar dat beige bijna onzichtbaar is. */
#create-group-section input,
#join-group-section input {
  background: var(--surface);
  border-color: var(--divider);
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 2px 0 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.newsletter-consent input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #000;
  box-shadow: none;
}

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: opacity 0.12s ease;
}

button:hover, .btn:hover { opacity: 0.85; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
}
.btn-secondary:hover { background: var(--accent-soft); opacity: 1; }

/* Call-to-action-knoppen onderaan dashboard-kaarten (Spelregels, Volledig
   klassement bekijken). Op mobiel mogen ze de volle kaartbreedte innemen,
   maar op desktop groeien de kaarten zelf breder mee met het scherm -- dan
   zou zo'n knop ook steeds langer worden. Vandaar de vaste breedte in de
   @media (min-width: 1024px)-blok onderaan dit bestand. */
.dash-card-cta { width: 100%; margin-top: 12px; }

.btn-small { min-height: 34px; padding: 6px 14px; font-size: 13px; }

.btn-secondary.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }



#logout-btn {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}
#logout-btn:hover { background: var(--accent); opacity: 0.85; }








.result-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.result-row:last-child { border-bottom: none; }
.result-date {
  font-size: 11px;
  color: var(--text-muted);
}




.result-date-input {
  width: auto;
  min-height: 28px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text-muted);
  border-width: 1px;
}
.result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.result-postponed-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.result-postponed-label input { width: auto; }
.result-row.is-postponed .result-row-match { opacity: 0.48; }
.result-postponed-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
.result-row-match {
  display: flex;
  align-items: center;
  gap: 8px;
}
.result-row .team-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  overflow-wrap: break-word;
}
.result-row .team-name.right { text-align: right; }
.result-row select.team-name { flex: 1 1 0; min-width: 0; }
.result-row .score-input {
  width: 42px;
  min-height: 36px;
  flex: 0 0 auto;
  text-align: center;
  padding: 6px 2px;
}
.result-row .score-sep { color: var(--text-muted); flex: 0 0 auto; }
.result-day-heading {
  font-size: 12px;
  color: var(--text-muted);
  margin: 14px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.result-day-heading:first-child { margin-top: 0; }

.form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }





body.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--topbar-bg);
}

.auth-shell {
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}



@media (min-width: 700px) {
  .auth-shell {
    align-items: flex-start;
    padding-top: 8vh;
  }
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 48px 40px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.auth-subtitle {
  text-align: center;
  font-size: 15px;
  color: var(--text);
  margin: 24px 0 28px;
  line-height: 1.4;
}

.auth-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 0 0 24px;
}



table { width: 100%; border-collapse: collapse; }

th, td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
}

th {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

td.num, th.num { text-align: center; width: 46px; }
tr.match td { background: var(--good-soft); }
tr:last-child td { border-bottom: none; }

.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-dark);
  color: #fff;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 14px;
  flex: 0 0 auto;
}



.pos-badge.pos-badge-lg {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}

.team-row.selectable { cursor: pointer; }
.team-row.selected td { background: var(--accent-soft); }

.delta { font-size: 13px; font-weight: 600; }
.delta.pos { color: var(--good); }
.delta.neg { color: var(--bad); }
.delta.zero { color: var(--text-muted); }



.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.pill.muted { background: var(--divider); color: var(--text-muted); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.live { background: var(--divider); color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }


.pill.pill-provisional { background: #80e877; color: #0a3d0a; font-weight: 600; }



/* Pill-vormige melding i.p.v. de vroegere volle-breedte balk met een
   accentstreepje links -- rondom een dunne stroke in de kleur van het
   berichttype, en shrink-to-content (inline-flex) zodat het echt als pill
   oogt. Elke .message krijgt automatisch een sluitkruisje rechts
   (setupMessageDismissButtons in dashboard.js voegt dat toe aan élke
   .message die in de DOM verschijnt, tenzij er al een is). */
.message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.message::before { font-weight: 700; flex: 0 0 auto; }
.message-text { flex: 1 1 auto; min-width: 0; }
.message-dismiss {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}
.message-dismiss:hover { opacity: 1; }
.message.error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.message.error::before { content: "\2715"; }
.message.success { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.message.success::before { content: "\2713"; }
.message.info { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-dark); }
.message.info::before { content: "i"; }

.message-text { flex: 1 1 auto; }

.message-dismiss {
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.7;
}
.message-dismiss:hover { opacity: 1; }

.hidden { display: none !important; }

.muted { color: var(--text-muted); }
.small { font-size: 13px; }





.subtle-link {
  display: inline;
  min-height: 0;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
}
.subtle-link:hover, .subtle-link:hover:not(:disabled) { color: var(--text); opacity: 1; background: none; }
.subtle-link:disabled { opacity: 0.5; }

.divider { border: none; border-top: 1px solid var(--divider); margin: 20px 0; }

.section-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 14px;
}






.modal-top-title-lg {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.modal-top-title-lg svg { flex: 0 0 auto; }




.klassement-group-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 16px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.klassement-group-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.klassement-group-tabs button { flex: 0 0 auto; white-space: nowrap; }
.klassement-group-tabs .tab-action-pill {
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent-dark);
  background: none;
}
.klassement-group-tabs .tab-action-pill:hover { background: var(--accent-soft); }

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--divider);
}
.list-row:last-child { border-bottom: none; }
.list-row .name { flex: 1; font-size: 14px; }
.list-row.selectable { cursor: pointer; border-radius: 7px; }
.list-row.selectable:hover { background: var(--accent-soft); }
.list-row.selected { background: var(--accent-soft); }
.list-row.pending { background: var(--accent-soft); }
.list-row .row-actions { display: flex; gap: 4px; }

.icon-btn {
  width: 34px;
  height: 34px;
  min-height: 0; 
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; background: var(--surface); color: var(--text-muted); }

#calendar-btn {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
#calendar-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; opacity: 0.85; }

.list-row[draggable="true"] { cursor: grab; }
.list-row.dragging { opacity: 0.35; }
.list-row.drop-target { border-top: 2px solid var(--accent); }
.drag-handle { color: var(--text-muted); padding: 0 2px; font-size: 15px; line-height: 1; user-select: none; }
.list-row .name-input { flex: 1; width: auto; margin-right: 8px; }





.groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.group-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  min-height: 96px;
  padding: 14px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.group-card:hover { opacity: 0.85; }
.group-card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.group-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.group-card-count {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.group-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text);
}

.group-action-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-height: 96px;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.group-action-tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-active-group-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Zelfde lichtblauw als de andere balken (dashboard-headers, popups,
     topbar) -- var(--topbar-bg), i.p.v. een apart tweede blauw. */
  background: var(--topbar-bg);
  /* .dash-card geeft standaard margin-bottom:18px, groter dan de ruimte
     tussen de klassement-rijen zelf (.scoreboard-row heeft padding:6px 0,
     dus 12px tussen twee rijen) -- hier gelijkgetrokken. */
  margin-bottom: 12px;
}
/* Zelfde tekstkleur-aanpak als .dash-banner-card-header: var(--text) is
   zwart op de lichtblauwe balk in light mode, en bijna wit op de donkere
   var(--topbar-bg) in dark mode -- dus in beide gevallen leesbaar. Op
   .mini-active-group-count (klasse i.p.v. enkel #mini-active-group-count)
   zodat ook de swipe-preview-pane (buildMiniCompetitionPaneHtml() in
   dashboard.js, die dezelfde klasse meegeeft maar geen id) meteen dezelfde
   kleur toont -- anders sprong de tekst van donkergrijs (.muted, zonder deze
   regel) naar zwart zodra de "echte" render (met de id) na de swipe
   plaatsvond. */
.mini-active-group-card .mini-active-group-name,
.mini-active-group-card .mini-active-group-count {
  color: var(--text);
}
/* Donkerdere blauwe tint dan de balk zelf (var(--topbar-bg)) i.p.v. de
   standaard .icon-btn-look (witte cirkel met randje) -- zonder stroke, met
   var(--menu-blue) (elders in dit bestand ook al gebruikt als "donkerder
   blauw"-accent, bv. .matchday-progress-fill) als achtergrond. Icoon wordt
   wit voor voldoende contrast op dat blauw, zelfde aanpak als #calendar-btn. */
.mini-active-group-card .icon-btn {
  background: var(--menu-blue);
  border: none;
  color: #fff;
}
.mini-active-group-card .icon-btn:hover {
  background: var(--menu-blue);
  border-color: transparent;
  color: #fff;
  opacity: 0.85;
}
.mini-active-group-name {
  margin: 0;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
}
.mini-group-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 30, 30, 0.14);
}
.mini-group-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 0;
  text-align: left;
  padding: 11px 14px;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.mini-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.mini-group-menu button svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-muted); }
.mini-group-menu button:hover { background: var(--accent-soft); }
.mini-group-menu button + button { border-top: 1px solid var(--divider); }

.mini-action-pill {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
}
.mini-action-pill:hover { background: var(--accent); opacity: 0.85; }


.fixture-day-heading {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 5px 12px 4px;
  margin: 18px 0 8px;
}
.fixture-day-heading:first-child { margin-top: 0; }

.fixture-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
  gap: 12px;
}
.fixture-item:last-child { border-bottom: none; }




.fixture-teams {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.fixture-team {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.fixture-vs { flex: 0 0 auto; color: var(--text-muted); }
.team-ball {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}
.fixture-time { color: var(--text-muted); font-size: 13px; flex: 0 0 auto; min-width: 40px; white-space: nowrap; text-align: left; }
.fixture-status { flex: 0 0 auto; min-width: 40px; text-align: right; }




#calendar-list { min-height: 370px; }

.rules-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: rule;
}
/* ">" (direct-child) hier is bewust -- zonder die combinator matchte
   ".rules-list li" ook de genestelde <li>-bullets van "Uiteindelijke
   voorspelling" (in de "Eindbonus"-sectie), die daardoor zelf ook meetelden
   voor de doorlopende nummering en het genummerde badge-uiterlijk kregen,
   met verkeerde nummers bij "Klassement"/"Groepen"/"Praktische
   beslissingen" tot gevolg. */
.rules-list > li {
  counter-increment: rule;
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
  line-height: 1.6;
}
.rules-list > li:first-child { padding-top: 0; }
.rules-list > li:last-child { border-bottom: none; padding-bottom: 0; }
.rules-list > li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules-list > li:first-child::before { top: 0; }



.scoreboard-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.scoreboard-panel {
  border-radius: 8px;
  min-width: 0;
}




.history-matchday-block { padding: 14px 0; }
.history-matchday-block + .history-matchday-block { border-top: 1px solid var(--divider); }
.history-matchday-heading { font-weight: 700; margin: 0 0 8px; }

.scoreboard-col-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
  text-align: left;
}




.scoreboard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  min-height: 44px;
}


.scoreboard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 16px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: var(--accent-dark);
  color: #fff;
}

.team-tile {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 9px;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.15;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-tile.split .team-tile-corner {
  position: absolute;
  /* -1px i.p.v. 0: zelfde antialiasing-naad-fix als .rank-tile-corner
     hierboven -- .team-tile knipt dit sowieso af tot zijn eigen afgeronde
     vorm, dus dit vergroot niets zichtbaars. */
  inset: -1px;

  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.team-tile.split .team-tile-label {
  position: relative;
  z-index: 1;
}

.team-tile.bordered {
  border: 1px solid #d5d5d0;
  box-shadow: none;
}

.team-tile.empty {
  background: transparent;
  color: #7a9a9d;
  box-shadow: none;
  border: 1px dashed #a9c9cc;
  font-weight: 500;
}

.scoreboard-row.match .team-tile {
  outline: 2px solid #1e1e1c;
  outline-offset: 1px;
}

.scoreboard-note {
  margin: 0 0 12px;
}


.info-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--banner-accent);
  color: var(--accent-dark);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 12px;
}
.info-box-text {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.info-box-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 58, 87, 0.1);
  color: var(--accent-dark);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.info-box-close:hover { background: rgba(18, 58, 87, 0.18); }





.app-banner { margin: 16px 0 12px; }
.app-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-banner-title {
  margin: 0;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.app-banner-message {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
}
.app-banner-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: 0;
  border-radius: 50%;
  border: none;
  background: rgba(18, 58, 87, 0.1);
  color: var(--accent-dark);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-banner-close:hover { background: rgba(18, 58, 87, 0.18); }



.scoreboard-row.editable-row { cursor: pointer; }
.scoreboard-row.selected-row .rank-tile { outline: 2px solid var(--accent-dark); outline-offset: 1px; }
.scoreboard-row .row-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.scoreboard-row .row-actions .icon-btn { width: 24px; height: 24px; font-size: 11px; }


.scoreboard-row .row-actions .icon-btn.bare-icon {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text);
}
.scoreboard-row .row-actions .icon-btn.bare-icon:hover { background: transparent; color: var(--accent-dark); }
.scoreboard-row .row-actions .icon-btn.bare-icon:disabled { opacity: 0.3; }
.scoreboard-row .pill { font-size: 10px; padding: 2px 7px; flex: 0 0 auto; }


.btn-with-icon { display: flex; align-items: center; justify-content: center; gap: 8px; }





.rank-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 8px 18px;
  border-radius: 14px;
  font-family: var(--font-condensed);
  box-shadow: none;
  overflow: hidden;
}

/* Witte tegels (bg:#FFFFFF in teamStyles.js, of een wit gekozen
   avatar_color/avatar_bg_color2 via playerRankTileHtml in session.js -- die
   laatste valt terug op kleine letters "#ffffff") krijgen geen eigen rand,
   wat klopt op de grijze paginabackground maar niet in witte kaarten/modals
   -- daar geven we ze alsnog een dunne stroke terug (met !important om de
   inline stijl te overrulen). De "i" hierin maakt de match hoofdletter-
   ongevoelig, want attribuutselectors zijn dat standaard niet en
   #FFFFFF/#ffffff komen beide voor. */
.modal-sheet [style*="background:#FFFFFF" i],
.dash-card [style*="background:#FFFFFF" i],
.dash-banner-card-body [style*="background:#FFFFFF" i],
.mini-desktop-col [style*="background:#FFFFFF" i],
#leaderboard-list [style*="background:#FFFFFF" i],
#dash-mini-content [style*="background:#FFFFFF" i],
#minicompetitie-desktop-columns [style*="background:#FFFFFF" i],
/* .mini-swipe-pane dekt ook de prev/next-preview-panes tijdens het slepen
   tussen minicompetities (buildMiniCompetitionPaneHtml() bouwt daar dezelfde
   tegel-HTML, maar zonder de #leaderboard-list-wrapper) -- zonder deze regel
   ontbrak de stroke rond witte tegels zolang je nog aan het slepen was en
   verscheen hij pas na afloop, als de "echte" #leaderboard-list-render
   plaatsvond. */
.mini-swipe-pane [style*="background:#FFFFFF" i] {
  border: 1px solid var(--tile-stroke) !important;
}

#leaderboard-list .rank-tile[data-user-id] { cursor: pointer; }

.rank-tile-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  min-width: 30px;
}

.rank-tile-label {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 20px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-tile-slot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rank-tile-slot .icon-btn {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
}
.rank-tile-slot .icon-btn:hover { background: rgba(255, 255, 255, 0.2); color: inherit; }





.row-arrows { display: flex; gap: 4px; flex: 0 0 auto; }
.rank-tile-slot.bare.arrow-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}
.rank-tile-slot.bare.arrow-btn svg { width: 100%; height: 100%; }
.rank-tile-slot.bare.arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.rank-tile.split .rank-tile-corner {
  position: absolute;
  /* -1px i.p.v. 0: laat de kleuroverlay net iets buiten de tegel "bloeden".
     .rank-tile knipt dit sowieso af tot zijn eigen afgeronde vorm
     (overflow:hidden), dus dit vergroot niets zichtbaars -- het voorkomt
     enkel een sub-pixel naad tussen de rechte hoek van deze diagonale
     clip-path en de afgeronde overflow-clip van de tegel, waar anders een
     haardun randje van de andere kleur kon doorschijnen bij de hoek. */
  inset: -1px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.rank-tile.bordered {
  border: 1px solid #d5d5d0;
  box-shadow: none;
}

.rank-tile.empty {
  background: transparent;
  color: #7a9a9d;
  box-shadow: none;
  border: 1px dashed #a9c9cc;
}















.real-stats-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 6px;
}
/* "Mijn pronostiek" heeft geen GES/+/-/PTN kopregel zoals "Huidig
   klassement" (.real-stats-header) -- deze onzichtbare spacer zorgt dat de
   ploegtegels in beide tabbladen op dezelfde hoogte beginnen bij het
   swipen ertussen, i.p.v. dat "Mijn pronostiek" hoger begint. */
.pane-header-spacer { height: 20px; }
.real-stats-header-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.real-stats-header-inner {
  display: flex;
  justify-content: space-between;
  width: 132px;
  flex: 0 0 auto;
}
.real-stats-header-col {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}
.stat-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 132px;
  min-height: 54px;
  flex: 0 0 auto;
  background: var(--surface);
  border-radius: 14px;
  border: none;
  box-shadow: none;
  padding: 0 8px;
}
.stat-box-col {
  flex: 1;
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}



.rank-tile-crown {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin-left: 5px;
}
.rank-tile-crown svg { display: block; }



.rank-tile-delta {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.85;
}












.rank-tile.match {
  /* 2 eerdere pogingen mislukten: 4 scherpe drop-shadows (versmolt tot 1
     blok bij meerdere ACHTER ELKAAR STAANDE tegels) en daarna een 3px/5px
     zachte blur (versmolt nog steeds bij 3+ opeenvolgende tegels). De
     ruimte tussen 2 rijen is exact 12px (.scoreboard-row heeft
     padding:6px 0, dus 6px eigen ruimte boven/onder elke tegel) -- een
     gloed die duidelijk BINNEN die 6px blijft (niet tot aan de buurtegel
     reikt) kan dus nooit versmelten. Enkele, kleine drop-shadow (geen 2de
     bredere laag erbovenop) -- blur-radius blijft ruim onder de 6px
     (fysieke uitloop, bepaalt het risico op versmelten), de zichtbaarheid
     wordt vooral via een hogere opacity opgekrikt (dat maakt de gloed
     helderder zonder hem verder te laten uitlopen). */
  filter: drop-shadow(0 0 4px rgba(128, 232, 119, 1));
  /* Poging met een extra outline (1px outer stroke, buiten de bestaande
     inner stroke) TERUGGEDRAAID op vraag van gebruiker -- gaf niet het
     gewenste resultaat. Enkel de drop-shadow hierboven + de inner-stroke
     .rank-tile-match-ring hieronder blijven staan. */
}
.rank-tile-match-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}
.rank-tile.match .rank-tile-match-ring {
  border: 3px solid #80e877;
}





.rank-tile.picker-placeholder {
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--divider);
}
.rank-tile-slot.bare {
  border: none;
  background: transparent;
  line-height: 1;
}


.rank-tile-slot.bare.chevron {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.rank-tile-slot.bare.chevron svg { width: 100%; height: 100%; }


.rank-tile-slot.bare.reset-team-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.rank-tile-slot.bare.reset-team-btn svg { width: 100%; height: 100%; }
.rank-tile-slot.bare.reset-team-btn:hover { opacity: 1; }






.rank-tile-slot.bare.swap-pick-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  border-radius: 50%;
}
.rank-tile-slot.bare.swap-pick-btn svg { width: 100%; height: 100%; }








.rank-tile-slot.bare.swap-pick-btn:disabled { cursor: not-allowed; opacity: 0.3; }













.rank-tile-swap-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}
.rank-tile.swap-selected .rank-tile-swap-ring {
  border: 4px solid #91e6ff;
}
/* TERUGGEDRAAID: dezelfde poging als bij .rank-tile.match hierboven (scherpe
   drop-shadows om de rand naar buiten te duwen) gaf ook hier bij 2 naast/
   onder elkaar staande geselecteerde tegels een samengevloeid rechthoekig
   blok i.p.v. een losse rand per tegel -- dus geen extra filter meer hier,
   enkel de gewone (naar binnen afgeknipte) rand hierboven. */



.scoreboard-row.swap-dimmed {
  opacity: 0.35;
  transition: opacity 0.15s ease;
}






.swap-saved-banner {
  background: #ffffff;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 18px;
  margin: 22px 0 16px;
  box-shadow: 0 1px 2px rgba(20, 30, 30, 0.15);
}
.swap-saved-banner-title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  text-align: center;
}
.swap-saved-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.swap-saved-team {
  font-family: var(--font-condensed);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--text);
}
.swap-saved-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  display: flex;
}
.swap-saved-icon svg { width: 100%; height: 100%; }

button.rank-tile-slot.bare {
  padding: 0;
  min-height: 0;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.picker-row { position: relative; cursor: pointer; }
.rank-tile.picker-placeholder { cursor: pointer; }
.picker-native-select {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}



.countdown-card {
  background: #cce6e9;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  text-align: center;
}

.countdown-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3d6a6e;
  margin: 0 0 10px;
}

.countdown-clock {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.countdown-num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 30px;
  color: #1e1e1c;
  line-height: 1;
}

.countdown-suffix {
  font-size: 11px;
  color: #3d6a6e;
  text-transform: uppercase;
  margin-top: 4px;
}



.list-row .team-tile {
  flex: 1 1 auto;
  min-height: 40px;
  font-size: 15px;
}



.admin-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--divider);
  border-radius: 5px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 8px;
  vertical-align: middle;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 20px;
}

.admin-tab {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.admin-tab:hover {
  color: var(--text);
  background: none;
}

.admin-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

.danger-zone {
  border-color: #c9c9c3;
  background: #f2f1ec;
}

.scores-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.scores-table th,
.scores-table td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}

.scores-table th:first-child,
.scores-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
}

.scores-table td.total,
.scores-table th.total {
  font-weight: 700;
  font-family: var(--font-body);
}

.fixture-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.fixture-edit-row:last-child { border-bottom: none; }
.fixture-edit-row input[type="number"] { width: 68px; flex: 0 0 auto; }
.fixture-edit-row input[type="datetime-local"] { width: 180px; flex: 0 0 auto; }
.fixture-edit-row select { flex: 1 1 130px; min-width: 110px; }
.fixture-edit-row .postponed-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.footer-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 40px;
}




button.seg-tab {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}



#auth-mode-tabs .seg-tab + .seg-tab {
  border-left: 1px solid var(--divider);
}
/* .segmented-tabs heeft standaard een vaste beige achtergrond (#e4e1d4) die
   niet met dark mode meeschakelt, en deze schuiver heeft (anders dan
   #standings-mode-tabs) geen eigen achtergrond-override -- in dark mode
   bleef de balk dus licht, met de actieve tab-tekst (var(--text), bijna wit)
   er nauwelijks leesbaar bovenop. Hier dezelfde var(--accent-soft)-aanpak
   als #standings-mode-tabs, die wel met het thema meeschakelt. */
#auth-mode-tabs.segmented-tabs {
  background: var(--accent-soft);
}
#auth-mode-tabs .seg-tab {
  color: var(--text-muted);
}
#auth-mode-tabs .seg-tab.active,
#auth-mode-tabs .seg-tab.active:hover {
  color: var(--accent-dark);
}

.profile-btn {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  


  padding: 0;
  min-height: 0;
  border-radius: var(--radius-pill);
}



.profile-btn.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: var(--surface);
}
.profile-btn.icon-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}


.site-footer {
  width: 100%;
  margin-top: 32px;
  background: #000;
  color: #fff;
  padding: 15px 18px;
  font-size: 13px;
  text-align: center;
}

.site-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.site-footer a,
.cookie-notice a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-notice {
  position: relative;
  z-index: 200;
  width: 100%;
  background: #000;
  color: #fff;
  padding: 11px 16px;
  font-size: 13px;
}

.cookie-notice-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.cookie-notice p { margin: 0; }

.cookie-notice-close {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid #fff;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 520px) {
  .cookie-notice-inner { align-items: flex-start; }
  .cookie-notice-close { margin-top: 1px; }
}


.privacy-page { background: var(--bg); }

.privacy-header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.privacy-header-inner {
  width: min(100% - 32px, 760px);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.privacy-header img {
  display: block;
  width: min(210px, 52vw);
  height: auto;
}

.privacy-back {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
}

.privacy-content {
  width: min(100% - 32px, 760px);
  margin: 40px auto;
  padding: 38px clamp(22px, 5vw, 52px);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.privacy-content h1 {
  font-size: clamp(28px, 6vw, 42px);
  margin-bottom: 8px;
}

.privacy-content h2 {
  margin: 32px 0 10px;
  text-align: left;
  font-size: 19px;
  text-transform: none;
}

.privacy-content h3 {
  margin: 25px 0 8px;
  font-family: var(--font-heading);
  font-size: 17px;
}

.rules-table-wrap {
  width: 100%;
  margin: 16px 0 22px;
  overflow-x: auto;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.rules-points-table td { color: var(--text); }

.rules-points-table {
  width: 100%;
  /* Was 310px -- op smalle telefoons (< ~340px) was dat samen met de
     brede, uppercase kolomtitels breder dan het scherm, waardoor de
     tabel half buiten het popup-kader viel. */
  min-width: 220px;
  border-collapse: collapse;
}

.rules-points-table th,
.rules-points-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  font-size: 13px;
}

.rules-points-table th {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
  /* Overschrijft de globale th-stijl (regel ~1125) die hoofdletters,
     letter-spacing en 12px-formaat toepast -- die combinatie maakte
     "Punten per juiste ploeg" als titel onnodig breed. */
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}

.rules-points-table th:last-child,
.rules-points-table td:last-child {
  text-align: right;
}

.rules-points-table td:last-child {
  /* Enkel de datacellen (korte getallen) mogen niet afbreken -- de
     titel "Punten per juiste ploeg" mocht voorheen ook niet wrappen
     omdat ze :last-child was, wat de tabel extra breed duwde. Een titel
     die op 2 lijnen mag staan, kost veel minder breedte. */
  white-space: nowrap;
}

.rules-points-table tbody tr:last-child td { border-bottom: 0; }

.privacy-legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.privacy-legal-table th,
.privacy-legal-table td {
  width: 50%;
  padding: 13px 14px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
}

.privacy-legal-table th {
  background: var(--accent-soft);
  font-weight: 700;
}

.privacy-legal-table tbody tr:last-child td { border-bottom: 0; }

.privacy-content p,
.privacy-content li {
  font-size: 16px;
  line-height: 1.7;
}

.privacy-content ul { padding-left: 22px; }
.privacy-updated { color: var(--text-muted); font-size: 14px !important; }

@media (max-width: 520px) {
  .privacy-content { margin: 20px auto; padding: 28px 20px; }
  .privacy-header-inner { min-height: 64px; gap: 10px; }
}

.view-panel { display: block; }
.view-panel.hidden { display: none; }








body.overlay-open {
  overflow: hidden;
  height: 100%;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 24, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
}

.modal-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: var(--max-width);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: var(--shadow);
  /* .modal-top staat hier nu als apart, niet-scrollend flex-item boven
     .modal-scroll-body (zie hieronder) i.p.v. als position:sticky-kind
     BINNEN de scrollende inhoud. Zo kan de titelbalk nooit meer los van de
     rest van de kaart renderen tijdens het slepen (swipe-to-dismiss) --
     eerder loste dit op WebKit niet altijd goed op zolang de titelbalk
     sticky was in een ouder waarvan de transform elk frame veranderde. */
  display: flex;
  flex-direction: column;
}
/* Sleeptransitie voor swipe-to-dismiss (js: setupModalSwipeToDismiss) --
   tijdens het slepen zet JS transition:none voor 1-op-1 vingervolging, bij
   loslaten komt deze terug voor de terugveer- of sluit-animatie. */
.modal-sheet.dragging { transition: none !important; }
.modal-sheet { transition: transform 0.25s ease; }

/* Scrollende inhoud van een popup, ONDER de vaste titelbalk (.modal-top).
   Enkel dit gedeelte scrollt -- de titelbalk zelf staat hier volledig los
   van en beweegt dus altijd als één geheel mee met .modal-sheet. */
.modal-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Voorkomt dat een omlaag-sleep die net bovenaan de inhoud begint, eerst
     nog een native overscroll-bounce laat zien vooraleer setupModalSwipeToDismiss
     in dashboard.js de beweging overneemt om de popup te sluiten. */
  overscroll-behavior-y: contain;
}
.modal-scroll-body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Grijpbalkje bovenaan de titelbalk -- puur visuele affordance die aangeeft
   dat de hele .modal-top-balk naar onder gesleept kan worden om de popup te
   sluiten (swipe-to-dismiss, zie setupModalSwipeToDismiss in dashboard.js).
   Op verzoek visueel verborgen (display:none) -- de swipe-luisteraar zit op
   .modal-sheet zelf (de hele kaart), niet op dit balkje, dus het slepen blijft
   overal werken, enkel het streepje zelf is niet meer zichtbaar. */
.modal-handle {
  display: none;
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  /* var(--accent-dark) is donker in light mode (zichtbaar op de lichtblauwe
     balk) en bijna wit in dark mode (zichtbaar op de donkere balk) --
     dezelfde aanpak als elders voor tekst op var(--topbar-bg). */
  background: var(--accent-dark);
  opacity: 0.35;
  pointer-events: none;
}

.modal-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 20px 20px 14px;
  background: var(--topbar-bg);
  border-radius: 20px 20px 0 0;
  /* Geen position:sticky meer -- .modal-top is nu een vast, niet-scrollend
     flex-item boven .modal-scroll-body (zie .modal-sheet hierboven), dus hij
     hoeft niet meer "mee te plakken" met scroll: hij staat er altijd los van
     en beweegt daardoor altijd fysiek mee met de rest van de kaart. */
  flex: 0 0 auto;
  touch-action: none;
}
.modal-top h2 {
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
.modal-top h2 svg { flex: 0 0 auto; }




#matchday-heading { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: normal; }

.modal-close {
  width: 30px;
  height: 30px;
  min-height: 0;
  border-radius: 50%;
  background: rgba(18, 58, 87, 0.1);
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-dark);
  line-height: 1;
  padding: 0;
}
.modal-close:hover { background: rgba(18, 58, 87, 0.18); color: var(--accent-dark); }









.podcast-episode-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
/* Uitgelichte kaart voor de meest recente aflevering -- padding zit op
   .podcast-featured-body i.p.v. op de kaart zelf, zodat de 16:9-thumb
   volledig randloos tot tegen de afgeronde hoeken van de kaart loopt. */
.podcast-episode-card.featured {
  padding: 0;
  overflow: hidden;
}
.podcast-featured-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--accent-soft);
  overflow: hidden;
}
.podcast-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.podcast-featured-body { padding: 16px; }
.podcast-featured-body .podcast-episode-heading { font-size: 17px; }
.podcast-featured-description {
  color: var(--text-muted);
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.podcast-episode-top { display: flex; align-items: flex-start; gap: 14px; }
.podcast-episode-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 14px;
  background-color: var(--accent-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.podcast-episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.podcast-episode-info { min-width: 0; }
.podcast-episode-heading { font-weight: 800; font-size: 15px; margin: 0 0 4px; }
.podcast-episode-subtitle { color: var(--text-muted); margin: 0; font-size: 13px; }
.podcast-episode-meta { color: var(--text-muted); margin: 3px 0 0; font-size: 13px; }
.podcast-episode-guests { color: var(--text-muted); margin: 3px 0 0; font-size: 13px; }
.podcast-episode-icons { display: flex; flex-direction: row; gap: 10px; margin-top: 12px; }
.podcast-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.podcast-icon-btn svg { width: 17px; height: 17px; }
.podcast-icon-btn.youtube { background: #ff0000; }
.podcast-icon-btn.spotify { background: #1db954; }
.podcast-icon-btn.apple { background: #000; }
.podcast-links { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.podcast-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}
.podcast-link:hover { background: var(--divider); }
.podcast-link-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.podcast-link-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.podcast-link-thumb.youtube { background-color: #ff0000; }
.podcast-link-thumb.spotify { background-color: #1db954; }
.podcast-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.podcast-link-title { font-weight: 700; }
.podcast-link-sub { color: var(--text-muted); font-size: 13px; }

/* Desktop (>=1024px) overrides. Kept at the very end of the stylesheet on
   purpose: CSS resolves ties between rules of equal specificity by source
   order, so any base (mobile) rule declared further down in this file than
   this block -- e.g. .topbar-nav / .profile-btn-name being display:none by
   default -- would otherwise silently win over these desktop overrides even
   though the media query matches. Keep new desktop rules inside this block,
   at the bottom of the file, rather than adding a second @media block. */
@media (min-width: 1024px) {
  body:has(.bottom-nav) {
    --max-width: 920px;
  }

  .bottom-nav { display: none; }
  .container { padding-bottom: 32px; }

  .topbar-nav { display: flex; }
  .profile-btn-name { display: inline; }
  #calendar-btn { display: none; }

  #pronostiek-subtabs-wrap { display: none !important; }
  #swipe-track {
    display: flex !important;
    gap: 24px;
    transform: none !important;
    width: auto !important;
  }
  .swipe-pane {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }
  .swipe-pane-desktop-title {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-dark);
  }

  .dash-card-cta {
    width: auto;
    min-width: 220px;
  }

  .dash-countdown-actions .btn-secondary {
    /* .dash-countdown-actions is een column-flexbox, en de standaard
       align-items:stretch daarvan rekt een kind met width:auto alsnog uit tot
       de volle containerbreedte -- min-width alleen is dan een ondergrens,
       geen bovengrens. align-self:flex-start schakelt die stretch uit zodat
       de knop echt op zijn (minimum)inhoudsbreedte blijft staan. */
    width: auto;
    min-width: 220px;
    align-self: flex-start;
  }

}