/* VTV Nieuwegein rood thema - gebaseerd op originele style.css, layout behouden */
:root{--green:#8b000c;--line:#d90416;--red:#d70000;--pink:#ffd6c9;--gray:#ddd;--ink:#101010;--muted:#666;--card:#fff;--bg:#f7f8f7}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}.top{position:sticky;top:0;z-index:10;background:linear-gradient(#d90416,#8b000c);color:white;padding:.7rem 1rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 12px #0004}.brand{font-size:clamp(1.1rem,4vw,2rem);letter-spacing:.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav{margin-left:auto;display:flex;gap:.45rem;flex-wrap:wrap}nav a{color:white;text-decoration:none;padding:.45rem .6rem;border-radius:.7rem;background:#ffffff14}.hamb{display:none;margin-left:auto;font-size:1.4rem;background:#fff2;color:white;border:0;border-radius:.5rem}.container{max-width:1050px;margin:0 auto;padding:1rem}.foot{text-align:center;padding:2rem;color:#fff;background:#8b000c}.flash{padding:.8rem 1rem;margin:0 0 1rem;border-radius:.8rem;background:#ffe5e7;border:1px solid #d90416}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start}.panel,.card{background:var(--card);border-radius:1rem;padding:1rem;box-shadow:0 2px 12px #0001}.title{text-align:center;margin:1.2rem 0}.sub{text-align:center;color:var(--muted)}.ladder-toolbar{display:flex;gap:.5rem;align-items:center;justify-content:center;margin:1rem 0;flex-wrap:wrap}.select,.input,select,input,textarea{font:inherit;padding:.55rem;border:1px solid #bbb;border-radius:.45rem;max-width:100%}.btn,button{font:inherit;padding:.58rem .8rem;border:0;border-radius:.55rem;background:#b30010;color:white;text-decoration:none;display:inline-block;cursor:pointer}.btn.light{background:#eee;color:#111}.btn.warn{background:#b00020}.ladder-list{display:flex;flex-direction:column;gap:.75rem}.ladder-card{position:relative;background:#fff;border:5px solid var(--line);border-radius:1rem;min-height:92px;padding:.35rem .6rem;display:grid;grid-template-columns:56px 1fr 86px;align-items:center;overflow:hidden}.ladder-card.inactive{border-color:var(--red);background:var(--gray)}.ladder-card.warm{background:var(--pink)}.pos{font-size:1.7rem}.player-name{font-size:clamp(1.25rem,5vw,2rem);text-align:center}.meta{font-size:.85rem;color:#222}.stars{text-align:center;color:#d8a100;text-shadow:0 1px 1px #0005;font-size:1.3rem}.right{text-align:right}.delta.up{color:#8b000c}.delta.down{color:#a00}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.table{width:100%;border-collapse:collapse;background:white;border-radius:.8rem;overflow:hidden}.table th{background:#8b000c;color:white}.table th,.table td{padding:.55rem;border-bottom:1px solid #eee;text-align:left}.period-table{max-width:680px;margin:auto}.period-table td:nth-child(1),.period-table td:nth-child(3),.period-table td:nth-child(4){text-align:center}.profile-head{display:flex;gap:1rem;align-items:center}.avatar{width:70px;height:70px;border-radius:50%;background:#b30010;color:white;display:grid;place-items:center;font-size:2rem}.chart{height:220px;border-left:2px solid #333;border-bottom:2px solid #333;padding:1rem;display:flex;align-items:end;gap:.4rem}.bar{background:#b30010;min-width:22px;border-radius:.3rem .3rem 0 0}.comment{border-left:4px solid #d90416;padding:.5rem;margin:.5rem 0;background:#fff3f4}.badge{display:inline-block;padding:.2rem .45rem;border-radius:99px;background:#eee}.badge.ok{background:#d7ffd7}.badge.bad{background:#ffd7d7}@media(max-width:760px){.hero{grid-template-columns:1fr}.hamb{display:block}nav{display:none;width:100%;margin-left:0}.navopen nav{display:flex;flex-direction:column}.top{flex-wrap:wrap}.brand{max-width:calc(100% - 60px)}.container{padding:.75rem}.ladder-card{grid-template-columns:45px 1fr 70px;min-height:84px;padding:.3rem}.meta{font-size:.78rem}.right{font-size:.82rem}.stars{font-size:1rem}.player-name{text-align:center}.table{font-size:.9rem}}
/* VTV v4 mobiele optimalisatie - toevoegen onderaan assets/style.css */

@media(max-width:760px){
  .top{padding:.55rem .7rem}
  nav a{display:block;width:100%;padding:.7rem .8rem}
  .hero{grid-template-columns:1fr}
  .ladder-toolbar{position:sticky;top:58px;background:var(--bg);z-index:5;padding:.4rem;border-radius:.7rem}
  .ladder-card{grid-template-columns:42px 1fr 64px;min-height:96px;border-width:4px}
  .player-name{font-size:1.35rem;line-height:1.1}
  .meta{font-size:.74rem}
  .panel,.card{padding:.8rem}
  .grid{grid-template-columns:1fr!important}
  .table{display:block;overflow-x:auto;white-space:nowrap}
  .btn,button{min-height:42px}
  input,select,textarea{min-height:42px}
}



/* VTV Livegang fine-tuning pakket 1 - herstel */
.nav-alert-pulse{
  background:#fff!important;
  color:#b00016!important;
  font-weight:800;
  position:relative;
  animation:vtvPulse 1.45s infinite;
  box-shadow:0 0 0 0 rgba(255,255,255,.75);
}
@keyframes vtvPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.85);transform:translateY(0)}
  70%{box-shadow:0 0 0 10px rgba(255,255,255,0);transform:translateY(-1px)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:translateY(0)}
}
.vtv-spinner{
  width:56px;
  height:56px;
  border-radius:50%;
  border:6px solid #ffd6d6;
  border-top-color:#b00016;
  animation:vtvSpin .8s linear infinite;
  margin:0 auto 1rem;
}
@keyframes vtvSpin{to{transform:rotate(360deg)}}
button.vtv-busy-disabled,.btn.vtv-busy-disabled{
  opacity:.7;
  cursor:wait!important;
}
.page-help{
  background:#fff7f7;
  border-left:5px solid #b00016;
  padding:.75rem 1rem;
  border-radius:.8rem;
  margin:.75rem 0 1rem;
  color:#222;
}
@media(max-width:760px){
  .nav-alert-pulse{width:100%;text-align:center}
}


/* VTV Livegang pakket 4 - wedstrijdbeheer + compacte scoreinvoer */
.match-card{background:#fff;border-radius:1rem;padding:1rem;box-shadow:0 2px 12px rgba(0,0,0,.08);margin:1rem 0}
.match-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.match-card-head h2{margin:.1rem 0 .55rem;font-size:1.35rem}
.match-card-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.match-card-actions details{position:relative}
.match-card-actions summary{list-style:none;cursor:pointer}
.match-card-actions summary::-webkit-details-marker{display:none}
.match-mini-form{margin-top:.5rem;background:#fff;border:1px solid #eee;border-radius:.8rem;padding:.75rem;min-width:260px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.score-compact-grid{display:grid;grid-template-columns:minmax(135px,190px) repeat(var(--games),minmax(54px,86px));gap:.55rem .7rem;align-items:center;overflow-x:auto;padding:.3rem 0}
.score-compact-grid.played{--games:5}
.score-game-head{text-align:center;font-weight:800;color:#8b000c}
.score-player-name{background:#9b0011;color:#fff;font-weight:800;border-radius:.35rem;padding:.65rem .55rem;white-space:nowrap}
.score-input{width:100%;min-width:54px;text-align:center;font-size:1.1rem;padding:.55rem .35rem;border:1px solid #bbb;border-radius:.5rem}
.score-input.game-winner{border:2px solid #168a16;background:#f0fff0}
.score-input.game-disabled{background:#eee;color:#999}
.score-played-cell{text-align:center;background:#f7f7f7;border-radius:.5rem;padding:.55rem .35rem;font-weight:700}
.score-compact-footer{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
@media(max-width:760px){
  .match-card-head{display:block}
  .match-card-actions{justify-content:flex-start;margin-top:.75rem}
  .score-compact-grid{grid-template-columns:minmax(105px,130px) repeat(var(--games),minmax(48px,58px));gap:.45rem}
  .score-player-name{white-space:normal;font-size:.9rem}
  .score-input{min-width:48px;font-size:1rem;padding:.5rem .25rem}
}



/* LIVEGANG PAKKET 5 - ladder layout professionalisering */
.hero{
  grid-template-columns:minmax(0, 1.45fr) minmax(300px, .85fr);
  align-items:start;
  gap:1rem;
}
.ladder-side-panel{
  position:sticky;
  top:92px;
  min-height:260px;
}
.ladder-side-panel h2{
  margin-top:0;
}
.ladder-side-panel hr{
  margin:1rem 0;
  border:0;
  border-top:1px solid #ddd;
}
.player-info-card h3{
  margin:.1rem 0 1rem;
}
.player-info-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem 0;
  border-bottom:1px solid #f0f0f0;
}
.player-info-row strong{
  color:#111;
}
.player-info-row span{
  text-align:right;
}
.player-info-action{
  margin-top:1rem;
}
.ladder-list{
  max-width:640px;
}
.ladder-card{
  width:100%;
}
@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
  }
  .ladder-side-panel{
    position:static;
    min-height:auto;
  }
  .ladder-list{
    max-width:none;
  }
}

/* Header logo beheer - layout van de bestaande rode balk behouden
   De originele .top en .brand instellingen hierboven blijven leidend.
   Het logo wordt absoluut over de plek van de tekst VTV geplaatst,
   zodat de afbeelding de hoogte van de balk niet kan vergroten. */
.brand-with-logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  overflow:visible;
  text-overflow:clip;
  line-height:1.2;
  min-width:3.4em;
  max-width:none;
}
.brand-logo-measure{
  visibility:hidden;
  white-space:nowrap;
}
.brand-logo-img{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:block;
  width:auto;
  height:calc(1.2em + 1.4rem); /* teksthoogte + originele desktop padding van .top */
  max-height:calc(1.2em + 1.4rem);
  max-width:none;
  object-fit:contain;
}
.header-logo-preview{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(#d90416,#8b000c);
  border-radius:.7rem;
  padding:.7rem 1rem;
  min-width:110px;
}
.header-logo-preview img{
  display:block;
  height:calc(1.2 * clamp(1.1rem,4vw,2rem) + 1.4rem);
  width:auto;
  max-width:180px;
  object-fit:contain;
}
@media(max-width:760px){
  .brand-with-logo{
    max-width:calc(100% - 60px);
  }
  .brand-logo-img{
    height:calc(1.2em + 1.1rem); /* teksthoogte + originele mobiele padding van .top */
    max-height:calc(1.2em + 1.1rem);
  }
  .header-logo-preview{
    padding:.55rem .7rem;
  }
  .header-logo-preview img{
    height:calc(1.2 * clamp(1.1rem,4vw,2rem) + 1.1rem);
  }
}

/* Admin tools - nette tegel/knoppen layout
   Herstelt de weergave van admin_tools.php: tool-items worden weer als duidelijke kaarten/knoppen getoond. */
.admin-tools-panel{
  margin:1rem 0;
}
.admin-tools-panel h2{
  margin-top:0;
  margin-bottom:.9rem;
}
.admin-tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.85rem;
  align-items:stretch;
}
.admin-tool-card{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-height:112px;
  padding:1rem;
  border-radius:.9rem;
  background:#fff7f7;
  border:1px solid #ffd0d5;
  color:var(--ink);
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.admin-tool-card:hover,
.admin-tool-card:focus{
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(0,0,0,.12);
  border-color:#d90416;
  outline:none;
}
.admin-tool-card strong{
  color:#8b000c;
  font-size:1.05rem;
}
.admin-tool-card span{
  color:#222;
  line-height:1.35;
}
.admin-tool-card em{
  margin-top:auto;
  color:var(--muted);
  font-size:.86rem;
  word-break:break-word;
}
@media(max-width:760px){
  .admin-tools-grid{
    grid-template-columns:1fr;
  }
  .admin-tool-card{
    min-height:auto;
  }
}


/* Kalender beheer - blokkades voor datumvoorstellen */
.calendar-block-form label{
  font-weight:700;
}
.calendar-block-two-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.75rem;
  align-items:end;
}
.calendar-blocks-player-hint{
  background:#fff7f7;
  border:1px solid #d90416;
  border-left:5px solid #b00016;
  border-radius:.8rem;
  padding:.75rem 1rem;
  margin:.75rem 0 1rem;
}
.calendar-blocks-player-hint ul{
  margin:.45rem 0 0;
  padding-left:1.2rem;
}
.calendar-blocks-player-hint li{
  margin:.2rem 0;
}
@media(max-width:760px){
  .calendar-block-two-cols{grid-template-columns:1fr}
}

/* Kalender beheer - terugkerende blokkades */
.calendar-weekday-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:.45rem;
  margin:.5rem 0;
}
.calendar-weekday-grid label{
  display:flex;
  align-items:center;
  gap:.35rem;
  background:#fff7f7;
  border:1px solid #ffd0d5;
  border-radius:.55rem;
  padding:.5rem .6rem;
}
.calendar-block-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.calendar-block-actions form{
  margin:0;
}
.calendar-block-actions .btn,
.calendar-block-actions button{
  white-space:nowrap;
}
@media(max-width:760px){
  .calendar-block-actions{display:block}
  .calendar-block-actions form{margin:.25rem 0}
}


/* VTV livefeed layout herstel - datum/tijd en tekst niet meer naast/over elkaar
   Geldt voor alle blokken met Laatste wijzigingen / Laatste activiteiten
   op Ladder, Dashboard en soortgelijke livefeed-kaarten. */
body .vtv-live-card .vtv-live-list{
  padding:.65rem .8rem;
}
body .vtv-live-card .vtv-live-row{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  padding:.55rem 0!important;
  line-height:1.35!important;
  border-bottom:1px solid #eee;
}
body .vtv-live-card .vtv-live-row:last-child{
  border-bottom:none;
}
body .vtv-live-card .vtv-live-date{
  display:block!important;
  white-space:normal!important;
  color:#666!important;
  font-size:.78rem!important;
  font-weight:700!important;
  margin:0 0 .18rem 0!important;
  font-variant-numeric:tabular-nums;
}
body .vtv-live-card .vtv-live-row > div:not(.vtv-live-date){
  display:block!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(max-width:760px){
  body .vtv-live-card .vtv-live-list{
    max-height:none;
  }
}


/* VTV contact + overzichten + mobiel submenu */
.required{color:#b00016;font-weight:800}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:1rem;align-items:start}
.contact-panel h2,.contact-info h2{margin-top:0}
.contact-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;opacity:0}
.join-error-summary{
  background:#fff0f2;
  border:1px solid #c40018;
  border-radius:1rem;
  padding:1rem;
  margin:1rem 0;
}
.input.field-error{
  border:2px solid #c40018!important;
  box-shadow:0 0 0 3px rgba(196,0,24,.12);
}
.field-error-text{
  color:#a00014;
  font-size:.9rem;
  margin-top:.25rem;
  font-weight:600;
}
.overview-tabs{display:flex;gap:.55rem;flex-wrap:wrap;margin:1rem 0}
.overview-tabs a{
  background:#eee;
  color:#111;
  text-decoration:none;
  padding:.6rem .85rem;
  border-radius:.65rem;
  display:inline-block;
}
.overview-tabs a.active{
  background:#b30010;
  color:#fff;
  font-weight:700;
}
.overview-panel h2{margin-top:0}
.overview-table td,.overview-table th{vertical-align:top}
.mobile-submenu-container{display:none}
.mobile-submenu-details{
  background:#fff;
  border:1px solid #ffd0d5;
  border-left:5px solid #b30010;
  border-radius:1rem;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow:hidden;
}
.mobile-submenu-details summary{
  cursor:pointer;
  list-style:none;
  padding:.75rem 1rem;
  font-weight:800;
  color:#b00016;
}
.mobile-submenu-details summary::-webkit-details-marker{display:none}
.mobile-submenu-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  padding:0 1rem 1rem;
}
.mobile-submenu-links a{
  background:#f2f2f2;
  color:#111;
  text-decoration:none;
  padding:.65rem .7rem;
  border-radius:.6rem;
}
.mobile-submenu-links a:hover,.mobile-submenu-links a:focus{
  background:#b30010;
  color:#fff;
}
@media(max-width:760px){
  .contact-layout{grid-template-columns:1fr}
  .mobile-submenu-container{display:block;padding-top:.25rem;padding-bottom:.25rem}
  .mobile-submenu-links{grid-template-columns:1fr}
}


/* VTV fix - mobiel submenu in ladderstijl */
.mobile-submenu-container{display:none}
.mobile-submenu-details{
  background:#fff;
  border:2px solid #d90416;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
}
.mobile-submenu-details summary{
  cursor:pointer;
  list-style:none;
  padding:.85rem 1rem;
  font-weight:900;
  color:#fff;
  background:linear-gradient(#d90416,#8b000c);
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.mobile-submenu-details summary::after{
  content:'▼';
  font-size:.8rem;
  opacity:.9;
}
.mobile-submenu-details[open] summary::after{content:'▲'}
.mobile-submenu-details summary::-webkit-details-marker{display:none}
.mobile-submenu-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  padding:1rem;
  background:#fff7f7;
}
.mobile-submenu-links a{
  background:#fff;
  color:#111;
  text-decoration:none;
  padding:.75rem .8rem;
  border-radius:.75rem;
  border:1px solid #ffd0d5;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-weight:700;
  display:block;
}
.mobile-submenu-links a:hover,.mobile-submenu-links a:focus{
  background:#b30010;
  color:#fff;
  border-color:#b30010;
  outline:none;
}
@media(max-width:760px){
  .mobile-submenu-container{display:block;padding-top:.25rem;padding-bottom:.5rem}
  .mobile-submenu-links{grid-template-columns:1fr}
}

/* VTV fix - overzichten robuust en rustig op mobiel */
.overview-tabs{display:flex;gap:.55rem;flex-wrap:wrap;margin:1rem 0}
.overview-tabs a{
  background:#eee;
  color:#111;
  text-decoration:none;
  padding:.65rem .9rem;
  border-radius:.7rem;
  display:inline-block;
  font-weight:700;
}
.overview-tabs a.active{
  background:#b30010;
  color:#fff;
}
.overview-panel h2{margin-top:0}
.overview-table td,.overview-table th{vertical-align:top}
@media(max-width:760px){
  .overview-tabs a{flex:1 1 100%;text-align:center}
  .overview-table{font-size:.88rem}
}


/* VTV patch - ladderpijlen en één gecombineerd blok Laatste activiteit */
.delta.up{
  color:#168a16!important;
  font-weight:900;
}
.delta.down{
  color:#b00016!important;
  font-weight:900;
}
.vtv-live-card-wide .vtv-live-list,
.vtv-live-list-tall{
  max-height:420px;
  overflow-y:auto;
}
@media(max-width:760px){
  .vtv-live-card-wide .vtv-live-list,
  .vtv-live-list-tall{
    max-height:360px;
  }
}


/* VTV ladderlogo toegankelijk via menu/logo */
.vtv-logo-link{
  color:white;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.vtv-logo-link:hover,.vtv-logo-link:focus{
  color:white;
  text-decoration:none;
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:3px;
}
.ladder-logo-page{
  text-align:center;
}
.ladder-logo-page .panel{
  max-width:760px;
  margin:0 auto;
}
.ladder-logo-img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1rem auto;
  border-radius:1rem;
  background:#fff;
}
@media(max-width:760px){
  .ladder-logo-page .panel{padding:.75rem}
}


/* VTV header titel naast logo - patch
   Toont linksboven het bestaande VTV-logo met daarnaast de tekst "VTV Laddercompetitie".
   De afbeelding zelf blijft ongewijzigd. */
.top .brand.brand-with-logo.vtv-logo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  max-width:min(52vw,520px);
  overflow:visible;
  letter-spacing:0;
  line-height:1.1;
}
.top .brand-with-logo .brand-logo-measure{
  display:none!important;
}
.top .brand-with-logo .brand-logo-img{
  position:static!important;
  transform:none!important;
  flex:0 0 auto;
  display:block;
  height:52px;
  max-height:52px;
  width:auto;
  max-width:86px;
  object-fit:contain;
}
.top .brand-with-logo .brand-title{
  display:inline-block;
  color:#fff;
  font-weight:900;
  font-size:clamp(1.05rem,2.2vw,1.8rem);
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
@media(max-width:760px){
  .top .brand.brand-with-logo.vtv-logo-link{
    max-width:calc(100% - 82px);
    gap:.5rem;
  }
  .top .brand-with-logo .brand-logo-img{
    height:46px;
    max-height:46px;
    max-width:76px;
  }
  .top .brand-with-logo .brand-title{
    font-size:clamp(.98rem,4.2vw,1.25rem);
    white-space:normal;
    line-height:1.05;
  }
}
@media(max-width:380px){
  .top .brand-with-logo .brand-title{
    font-size:.92rem;
  }
  .top .brand-with-logo .brand-logo-img{
    height:42px;
    max-height:42px;
    max-width:68px;
  }
}


/* SPOEDFIX R2 2026-06-14 - challenges.php smartphone layout
   Geen lege tabelkop meer bij Open voorstellen en geen extreem horizontaal swipen.
   Alleen actief op smartphone/touchscreen of smalle schermen. */
@media (max-width:900px), (pointer:coarse) {
  html, body{
    max-width:100%;
    overflow-x:hidden!important;
  }

  .vtv-proposals-table,
  .vtv-my-challenges-table,
  .vtv-mobile-card-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .vtv-proposals-table tbody,
  .vtv-my-challenges-table tbody,
  .vtv-mobile-card-table tbody{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  .vtv-proposals-header,
  .vtv-my-challenges-header,
  .vtv-proposals-table tr:first-child,
  .vtv-my-challenges-table tr:first-child{
    display:none!important;
  }

  .vtv-proposals-table tr,
  .vtv-my-challenges-table tr,
  .vtv-mobile-card-table tr{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:.85rem 0!important;
    padding:.85rem!important;
    border:1px solid #eee!important;
    border-radius:1rem!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(0,0,0,.06)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .vtv-proposals-table td,
  .vtv-my-challenges-table td,
  .vtv-mobile-card-table td{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border:0!important;
    padding:.42rem 0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    box-sizing:border-box!important;
  }

  .vtv-proposals-table td::before,
  .vtv-my-challenges-table td::before,
  .vtv-mobile-card-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:.12rem;
    color:#8b000c;
    font-weight:900;
    font-size:.9rem;
  }

  .vtv-proposals-table td[data-label="Actie"],
  .vtv-my-challenges-table td[data-label="Actie"],
  .vtv-mobile-card-table td[data-label="Actie"]{
    margin-top:.55rem!important;
    padding-top:.8rem!important;
    border-top:1px solid #eee!important;
  }

  .vtv-proposals-table form,
  .vtv-my-challenges-table form,
  .vtv-mobile-card-table form{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:.6rem 0!important;
    box-sizing:border-box!important;
  }

  .vtv-proposals-table button,
  .vtv-proposals-table .btn,
  .vtv-my-challenges-table button,
  .vtv-my-challenges-table .btn,
  .vtv-mobile-card-table button,
  .vtv-mobile-card-table .btn{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:48px!important;
    text-align:center!important;
    white-space:normal!important;
    font-weight:800!important;
    box-sizing:border-box!important;
  }

  .vtv-proposals-table input,
  .vtv-proposals-table select,
  .vtv-proposals-table textarea,
  .vtv-my-challenges-table input,
  .vtv-my-challenges-table select,
  .vtv-my-challenges-table textarea,
  .vtv-mobile-card-table input,
  .vtv-mobile-card-table select,
  .vtv-mobile-card-table textarea{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .vtv-proposals-table .meta,
  .vtv-my-challenges-table .meta,
  .vtv-mobile-card-table .meta{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}


/* VTV mobiele layout patch A - spelergerichte overzichten als kaartjes
   Geldt alleen voor tabellen die in de PHP bewust de class .vtv-player-card-table krijgen.
   LIVE-schermen worden hiermee niet geraakt. Desktopweergave blijft tabelweergave. */
@media (max-width:900px), (pointer:coarse) {
  .vtv-player-card-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .vtv-player-card-table tbody{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  .vtv-player-card-table tr.vtv-card-header{
    display:none!important;
  }

  .vtv-player-card-table tr{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:.85rem 0!important;
    padding:.85rem!important;
    border:1px solid #eee!important;
    border-radius:1rem!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(0,0,0,.06)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .vtv-player-card-table td{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border:0!important;
    padding:.42rem 0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    box-sizing:border-box!important;
  }

  .vtv-player-card-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:.12rem;
    color:#8b000c;
    font-weight:900;
    font-size:.9rem;
  }

  .vtv-player-card-table td[colspan]::before{
    content:'';
    display:none;
  }

  .vtv-player-card-table .meta,
  .vtv-player-card-table div,
  .vtv-player-card-table span,
  .vtv-player-card-table strong,
  .vtv-player-card-table a{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .vtv-player-card-table .badge{
    display:inline-block;
    margin:.1rem 0;
  }

  .vtv-period-card-table td.period-hide-mobile{
    display:block!important;
  }
}


/* SPOEDFIX R3 2026-06-14 - Nieuwe uitdaging smartphone herstel
   Voorkomt horizontaal uitrekken door lange wedstrijdformat-teksten.
   Raakt alleen challenges.php / Nieuwe uitdaging en niet de LIVE-weergave. */
@media (max-width:900px), (pointer:coarse) {
  .challenge-format-section,
  .challenge-format-grid,
  .challenge-details-fieldset,
  #challengeFormatSection,
  #challengeDetailsFieldset{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .challenge-format-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.65rem!important;
  }

  .challenge-format-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:start!important;
    gap:.55rem!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:.8rem .72rem!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .challenge-format-card input{
    width:1.25rem!important;
    height:1.25rem!important;
    margin:.18rem 0 0 0!important;
    justify-self:center!important;
  }

  .challenge-format-card-body{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.32!important;
    box-sizing:border-box!important;
  }

  .challenge-format-card-body strong,
  .challenge-format-card-body span{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .challenge-format-card-body strong{
    font-size:1rem!important;
    line-height:1.25!important;
    margin-bottom:.25rem!important;
  }

  .challenge-format-card-body span{
    font-size:.92rem!important;
    line-height:1.32!important;
    color:#444!important;
  }

  .challenge-format-section .meta,
  .challenge-format-section p,
  .challenge-details-fieldset p,
  .calendar-blocks-player-hint,
  .calendar-blocks-player-hint li,
  #handicapPreview,
  #formatChoiceNotice{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    box-sizing:border-box!important;
  }

  .challenge-details-fieldset{
    border:0!important;
    padding:0!important;
    margin:1rem 0 0!important;
  }

  .challenge-details-fieldset legend{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:1.08rem!important;
    line-height:1.25!important;
    margin-bottom:.6rem!important;
  }

  .challenge-details-fieldset select,
  .challenge-details-fieldset input,
  .challenge-details-fieldset textarea,
  .challenge-details-fieldset button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .challenge-details-fieldset button,
  .challenge-details-fieldset .btn{
    min-height:48px!important;
    white-space:normal!important;
    text-align:center!important;
    font-weight:800!important;
  }
}