/* ===========================================================
   Beachvolleybal toernooi — styling (mobiel-eerst)
   Systeemfonts: werkt ook zonder internet op locatie.
   =========================================================== */
:root{
  /* Via Jou-palet: marineblauw basis, oranje accent, groen voor acties, warm crème */
  --zand:      #f5f0e9;   /* warme crème achtergrond */
  --zand-diep: #e6dccd;   /* randen / rijen */
  --inkt:      #1f2d3d;   /* donkere blauwgrijze tekst */
  --grijs:     #6b7688;
  --zee:       #0a4793;   /* Via Jou marineblauw = primair */
  --zee-diep:  #083a78;   /* donkerder marineblauw */
  --zee-licht: #eaf0f7;   /* lichte blauwtint */
  --groen:     #2ea88f;   /* actieknoppen, zoals de zoekknop */
  --groen-diep:#248a75;
  --koraal:    #d9482f;   /* fout / wissen */
  --zon:       #f0740f;   /* Via Jou oranje accent & highlights */
  --wit:       #ffffff;
  --radius:    14px;
  --schaduw:   0 1px 2px rgba(20,58,110,.05), 0 8px 24px rgba(20,58,110,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--zand); color:var(--inkt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:16px 14px 64px}

/* ---------- kop ---------- */
header.top{
  position:relative;
  background:linear-gradient(135deg,var(--zee) 0%,var(--zee-diep) 100%);
  color:#fff; border-bottom:4px solid var(--zon);
}
.top-binnen{
  display:flex; align-items:center; gap:14px;
  max-width:980px; margin:0 auto; padding:16px 16px 14px;
}
.top-logos{flex:0 0 auto; display:flex; align-items:center; gap:10px; min-width:52px}
.top-logos.rechts{justify-content:flex-end}
.header-logo{
  height:46px; width:auto; max-width:120px;
  background:#fff; border-radius:9px; padding:5px 7px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.header-bal{font-size:1.7rem}
.top-titel{flex:1 1 auto; text-align:center; min-width:0}
header.top h1{
  margin:0; font-size:clamp(1.05rem,3.4vw,1.5rem); font-weight:800;
  letter-spacing:.2px; line-height:1.2;
}
/* "VIA JOU" in de blauwe header: oranje, zwaar, rechtop, hoofdletters */
header.top .merk{
  color:var(--zon);
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.5px;
}
header.top .sub{opacity:.92; font-size:.85rem; margin-top:5px; text-align:center}
a.nav{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5)}
a.nav:hover{border-bottom-color:#fff}

/* hoofdmenu onder de titel */
.hoofdmenu{
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:0 12px 12px;
}
.hoofdmenu a{
  color:#fff; text-decoration:none; font-weight:700; font-size:.9rem;
  padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); transition:background .15s ease;
}
.hoofdmenu a:hover{background:rgba(255,255,255,.26)}
.hoofdmenu a.aan{background:var(--zon); color:#fff}

/* smalle content-breedte voor formulieren/info */
.wrap.smal{max-width:640px}

/* aanmeldformulier */
.aanmeldform{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.aanmeldform .veldlabel{display:flex; flex-direction:column; gap:5px; font-weight:600; color:var(--zee-diep)}
.aanmeldform .opt{font-weight:400; color:var(--grijs); font-size:.85rem}
.aanmeldform input, .aanmeldform textarea{width:100%}
.aanmeldform textarea{min-height:70px; font-family:inherit; font-size:1rem; padding:11px}
.knop-link{
  display:inline-block; background:var(--zee); color:#fff; text-decoration:none;
  padding:10px 20px; border-radius:10px; font-weight:700;
}
.knop-link:hover{background:var(--zee-diep)}

/* info-blokken */
.infoblok{padding:18px 20px; margin-bottom:14px}
.infoblok h2{margin:0 0 8px; color:var(--zee-diep); font-size:1.15rem}
.infotekst{line-height:1.65; color:var(--inkt)}

/* ---------- secties ---------- */
h2.sectie{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:800;
  color:var(--zee-diep); margin:32px 0 14px;
}
h2.sectie::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--zon); flex:none}
h2.sectie::after{content:""; flex:1; height:2px; background:var(--zand-diep); border-radius:2px}
h3.knock{margin:20px 0 10px; color:var(--zee-diep); font-size:1rem; font-weight:800}

/* inklapbare sectie (publieke pagina) */
details.sectie-fold{margin:32px 0 0}
details.sectie-fold > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:.82rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:800;
  color:var(--zee-diep);
}
details.sectie-fold > summary::-webkit-details-marker{display:none}
details.sectie-fold > summary::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--zon); flex:none}
details.sectie-fold > summary::after{content:"▸"; color:var(--grijs); transition:transform .15s ease}
details.sectie-fold[open] > summary::after{transform:rotate(90deg)}
.fold-tel{margin-left:auto; text-transform:none; letter-spacing:0; font-weight:700; font-size:.78rem; color:var(--grijs); font-variant-numeric:tabular-nums}

/* ---------- kaart ---------- */
.grid{display:grid; gap:14px}
.grid.poules{grid-template-columns:1fr}
.kaart{
  background:var(--wit); border:1px solid var(--zand-diep);
  border-radius:var(--radius); box-shadow:var(--schaduw); overflow:hidden;
}
.kaart .kop{
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 14px; font-weight:800; font-size:.95rem;
  background:linear-gradient(var(--zee-licht),#fff); color:var(--zee-diep);
  border-bottom:1px solid var(--zand-diep);
}
.kaart .kop .badge{
  background:var(--zee); color:#fff; border-radius:8px;
  min-width:28px; height:28px; padding:0 6px;
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
}

/* ---------- tabellen ---------- */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{padding:9px 12px; text-align:left; vertical-align:middle}
thead th{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--grijs); font-weight:700; padding-top:10px; padding-bottom:8px;
}
tbody tr{border-top:1px solid #f0e9d8}
tbody tr:nth-child(even){background:#fcfaf4}
td.num,th.num{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap}
th.num{padding-left:6px; padding-right:6px}
td.num{padding-left:6px; padding-right:6px}
td.pts{font-weight:800; color:var(--zee-diep); font-size:.95rem}
.teamnaam{font-weight:600; overflow-wrap:anywhere}

/* leider / nummer 2 markering */
tr.top1 .teamnaam{position:relative; padding-left:16px}
tr.top1 .teamnaam::before{content:"🥇"; position:absolute; left:-2px; font-size:.85rem}
tr.top2 .teamnaam{position:relative; padding-left:16px}
tr.top2 .teamnaam::before{content:"🥈"; position:absolute; left:-2px; font-size:.85rem}
tr.top1 td:first-child{box-shadow:inset 4px 0 0 var(--zon)}
tr.top2 td:first-child{box-shadow:inset 4px 0 0 #b9c2cc}

/* ---------- speelschema ---------- */
.schema td{padding-top:10px; padding-bottom:10px}
.pill{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.3px;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.pill.tijd{background:var(--zee); color:#fff; font-variant-numeric:tabular-nums}
.pill.veld{background:var(--zand-diep); color:#4a5568}
.pill.poule{background:#fff; border:1px solid var(--zand-diep); color:var(--zee-diep)}
.match{display:flex; align-items:center; gap:6px; flex-wrap:wrap; overflow-wrap:anywhere}
.match .vs{color:var(--grijs); flex:none}
.match .t{font-weight:600}
.winnaar{color:var(--zee-diep); font-weight:800}
.verliezer{color:var(--grijs)}
.uitslag{font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; text-align:right}
.wachten{color:#c3bda9}

/* ---------- knockout ---------- */
.bracket{display:grid; gap:12px; grid-template-columns:1fr}
.bracket-stapel{display:grid; gap:12px; grid-template-columns:1fr; max-width:440px}
.wed{
  background:var(--wit); border:1px solid var(--zand-diep); border-radius:12px;
  padding:12px 14px; box-shadow:var(--schaduw);
}
.wed .label{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.7px;
  color:var(--grijs); font-weight:700; margin-bottom:7px;
}
.wed .regel{
  display:flex; justify-content:space-between; gap:10px; padding:5px 0;
  font-weight:600; overflow-wrap:anywhere;
}
.wed .regel + .regel{border-top:1px solid #f0e9d8}
.wed .regel .sc{font-variant-numeric:tabular-nums; flex:none; color:var(--grijs)}
.wed .regel.win{color:var(--zee-diep); font-weight:800}
.wed .regel.win .sc{color:var(--zee-diep)}
.wed.finale{border:2px solid var(--zon); box-shadow:0 8px 24px rgba(232,115,12,.16)}

.kampioen{
  color:var(--zee-diep);
  background:linear-gradient(135deg,#fff3e6,#ffe1c4);
  border:2px solid var(--zon); border-radius:var(--radius);
  padding:14px 16px; margin:18px 0; box-shadow:var(--schaduw);
  display:grid; gap:10px;
}

/* ---------- meldingen ---------- */
.melding{background:var(--zee-licht); border-left:4px solid var(--zee); padding:12px 15px; border-radius:10px; margin:16px 0}
.fout{background:#fdece7; border-left-color:var(--koraal)}

/* ---------- admin ---------- */
.knoppen{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; align-items:center}
button,.btn{
  font:inherit; cursor:pointer; border:none; border-radius:10px;
  padding:11px 18px; background:var(--groen); color:#fff; font-weight:700;
  transition:background .15s ease, transform .05s ease; min-height:44px;
}
button:hover,.btn:hover{background:var(--groen-diep)}
button:active{transform:translateY(1px)}
button.grijs{background:var(--grijs)}
button.rood{background:var(--koraal)}
button:disabled{background:#d7d2c4; color:#fff; cursor:not-allowed}
input[type=number]{
  width:54px; padding:9px 6px; text-align:center; font-variant-numeric:tabular-nums;
  border:1px solid #cdd4dc; border-radius:8px; font:inherit; min-height:44px;
}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=search],textarea{
  width:100%; padding:11px; border:1px solid #cdd4dc; border-radius:8px; font:inherit; min-height:44px;
}
textarea{min-height:200px; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem}
label.veldlabel{display:block; font-weight:700; margin:12px 0 6px}
.saverij .num{white-space:nowrap}
.score-cel{white-space:nowrap}
.save-status{display:inline-block; min-width:18px; text-align:center; margin-left:8px; font-size:.95rem; font-weight:800; vertical-align:middle}
.save-status.ok{color:var(--groen)}
.save-status.bezig{color:var(--grijs); font-weight:400}
.save-status.fout{color:var(--koraal)}
.hint{color:var(--grijs); font-size:.85rem}

/* ---------- inklapbare stappen ---------- */
details.stap{margin:28px 0 0}
details.stap > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  font-size:.82rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:800;
  color:var(--zee-diep); padding:4px 0 8px; border-bottom:2px solid var(--zand-diep);
}
details.stap > summary::-webkit-details-marker{display:none}
details.stap > summary::before{content:"▸"; color:var(--zon); display:inline-block; transition:transform .15s ease}
details.stap[open] > summary::before{transform:rotate(90deg)}
.stap-status{margin-left:auto; text-transform:none; letter-spacing:0; font-weight:700; font-size:.78rem; color:var(--grijs)}
details.stap > .stap-body{padding-top:14px}

/* ---------- inklapbare wedstrijdgroepen ---------- */
details.fase > summary.kop{cursor:pointer; justify-content:flex-start; gap:9px}
details.fase > summary.kop::-webkit-details-marker{display:none}
details.fase > summary.kop{list-style:none}
details.fase > summary.kop::before{content:"▸"; color:var(--zee); display:inline-block; transition:transform .15s ease}
details.fase[open] > summary.kop::before{transform:rotate(90deg)}
.fase-tel{margin-left:auto; font-weight:700; font-size:.78rem; color:var(--grijs); font-variant-numeric:tabular-nums}
.poule-chips{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--zee-licht); color:var(--zee-diep);
  border:1px solid var(--zand-diep); border-radius:999px;
  padding:5px 8px 5px 11px; font-size:.82rem; font-weight:700;
}
.chip b{
  background:var(--zee); color:#fff; border-radius:999px;
  min-width:19px; height:19px; padding:0 5px;
  display:inline-grid; place-items:center; font-size:.72rem;
}
.waarschuw{color:var(--koraal); font-weight:700}

/* ---------- focus / toegankelijkheid ---------- */
:focus-visible{outline:3px solid var(--zon); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===========================================================
   GROTERE SCHERMEN
   =========================================================== */
@media (min-width:560px){
  header.top h1{font-size:1.6rem}
  .wrap{padding:20px 18px 72px}
  table{font-size:.92rem}
}
@media (min-width:720px){
  .grid.poules{grid-template-columns:repeat(2,1fr)}
  .bracket{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .grid.poules{grid-template-columns:repeat(3,1fr)}
  .bracket{grid-template-columns:repeat(4,1fr)}
}

/* ---------- v4: vervolgronde ---------- */
.scheids{
  display:block; font-size:.72rem; color:var(--grijs); margin-top:2px;
}
.scheids .fluit{vertical-align:-2px; color:var(--zon)}

/* ---------- v6: mobiele schema-weergave + vervolg-grid ---------- */

/* Vervolgronde-standen: 2 kolommen op desktop (H1+H2 / M1+M2 / Bonus) */
.grid.vervolg{grid-template-columns:1fr}
@media (min-width:720px){
  .grid.vervolg{grid-template-columns:repeat(2,1fr)}
}

/* Schema-tabellen op smalle schermen: gestapelde rijen i.p.v. krappe kolommen */
@media (max-width:680px){
  .schema thead{display:none}
  .schema tbody tr{
    display:grid;
    grid-template-columns:max-content max-content max-content 1fr;
    align-items:center; column-gap:7px; row-gap:8px;
    padding:11px 12px;
  }
  .schema tbody td{display:block; padding:0; border:none}
  .schema tbody td:nth-child(4){grid-column:1 / -1; grid-row:2}  /* wedstrijd op volle breedte */
  .schema tbody td:nth-child(5){grid-column:4; grid-row:1; justify-self:end; text-align:right}
  .schema .match{gap:4px 6px}
  .schema input[type=number]{width:46px; min-height:40px; padding:7px 4px}
  .schema .save-status{margin-left:5px}
}

/* ---------- v7: kampioen-banner in nette regels ---------- */
.kampioen .kamp{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px 14px; flex-wrap:wrap;
}
.kampioen .kamp-label{font-weight:700; font-size:.88rem; letter-spacing:.2px; white-space:nowrap}
.kampioen .kamp-naam{font-weight:800; font-size:1.05rem; text-align:right; margin-left:auto; overflow-wrap:anywhere}
.kampioen .kamp.hoofd .kamp-naam{font-size:1.3rem}
.kampioen .kamp.hoofd{padding-bottom:10px; border-bottom:1px solid rgba(232,115,12,.35)}
.kampioen .kamp.hoofd:last-child{padding-bottom:0; border-bottom:none}

/* ---------- v8: gevolgen-modal + markering gewijzigde wedstrijden ---------- */
.modal-achtergrond{
  position:fixed; inset:0; background:rgba(15,30,55,.55); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.modal-achtergrond[hidden]{display:none}   /* hidden-attribuut moet winnen van display:flex */
.modal{
  background:#fff; border-radius:var(--radius); box-shadow:0 18px 50px rgba(0,0,0,.3);
  max-width:520px; width:100%; max-height:80vh; overflow:auto; padding:20px;
  border-top:4px solid var(--zon);
}
.modal h3{margin:0 0 8px; color:var(--zee-diep)}
.modal ul{margin:0 0 16px; padding-left:20px; line-height:1.6}
.modal li{margin-bottom:6px}
tr.rij-gewijzigd{background:#fff3e6 !important; box-shadow:inset 4px 0 0 var(--zon)}

/* ---------- v11: splashscreen in affiche-stijl ---------- */
#splash{
  position:fixed; inset:0; z-index:100; overflow:hidden;
  background:#8ec3e6;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .5s ease;
}
#splash[hidden]{display:none}
#splash.weg{opacity:0}
.splash-bg{position:absolute; inset:0; width:100%; height:100%}
.splash-bg.staand{display:none}
@media (max-width:600px){
  .splash-bg.liggend{display:none}
  .splash-bg.staand{display:block}
}
.splash-inhoud{
  position:relative; z-index:1; text-align:center;
  max-width:min(78vw, 460px);
  animation:splash-in .6s ease;
}
.splash-bal{width:clamp(72px, 18vw, 110px); margin:0 auto; animation:splash-stuiter 1.3s ease infinite}
.splash-bal-svg{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 8px rgba(28,86,165,.25))}
.splash-titel{
  margin-top:12px; font-weight:900; color:var(--zee); letter-spacing:.3px;
  font-size:clamp(1.35rem, 5.6vw, 2.05rem); line-height:1.12;
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.splash-titel .oranje{
  color:var(--zon);
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900; text-transform:uppercase; letter-spacing:.6px; margin-right:.12em;
}
.splash-sub{margin-top:10px; font-size:clamp(.8rem,3vw,.95rem); font-weight:600; color:var(--zee); opacity:.75}
@keyframes splash-in{from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes splash-stuiter{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.splash-bal,.splash-inhoud{animation:none}}

.splash-logos{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:22px; flex-wrap:wrap;
}
.splash-logo{
  height:clamp(34px, 9vw, 52px); width:auto; max-width:42vw;
  background:rgba(255,255,255,.85); padding:7px 11px; border-radius:12px;
  box-shadow:0 3px 10px rgba(28,86,165,.18);
}


/* ---------- v15: inschrijvingen + info-beheer ---------- */
.insch-lijst{display:flex; flex-direction:column; gap:8px}
.insch-rij{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:11px 12px; border:1px solid var(--zand-diep); border-radius:10px; background:#fff;
  flex-wrap:wrap;
}
.insch-rij.status-goedgekeurd{border-color:#bfe3d3; background:#f2fbf7}
.insch-rij.status-afgewezen{opacity:.6}
.insch-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.insch-meta{font-size:.85rem; color:var(--grijs)}
.insch-opm{font-size:.85rem; color:var(--inkt); font-style:italic}
.insch-acties{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.insch-badge{font-size:.72rem; padding:2px 8px; border-radius:999px; font-weight:700}
.insch-badge.b-nieuw{background:var(--zee-licht); color:var(--zee)}
.insch-badge.b-goedgekeurd{background:#2ea88f; color:#fff}
.insch-badge.b-afgewezen{background:#e6dccd; color:#6b7688}
.insch-badge.b-reserve{background:#f6d9b8; color:#8a5a1e}
button.mini.rood{background:var(--koraal); color:#fff; border-color:var(--koraal)}

/* install-hint in admin */
.install-hint{
  display:flex; gap:10px; align-items:center; background:var(--zee-licht);
  border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:.9rem; color:var(--zee-diep);
}

/* uitslagen nog niet zichtbaar */
.melding.groot-scherm{
  text-align:center; font-size:1.15rem; padding:40px 20px; line-height:1.6;
}

/* install-tip sluitknop */
.install-hint{position:relative}
#install-dicht{
  position:absolute; top:6px; right:8px; border:none; background:transparent;
  font-size:1.2rem; line-height:1; color:inherit; opacity:.6; cursor:pointer; padding:2px 6px;
}
#install-dicht:hover{opacity:1}

/* instellingenformulier */
.instel-form{display:flex; flex-direction:column; gap:2px}
.instel-rij{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 4px; border-bottom:1px solid var(--zand-diep);
}
.instel-rij:last-of-type{border-bottom:none}
.instel-label{font-weight:600; color:var(--zee-diep); flex:1}
.instel-rij input[type=number]{width:90px}
.instel-rij input[type=text]{max-width:260px}
.instel-rij input[type=date],.instel-rij input[type=time],.instel-rij select{
  padding:8px 10px; border:1px solid #cdd4dc; border-radius:8px; font:inherit; min-height:40px;
}
.instel-rij input[type=checkbox]{width:22px; height:22px}