/* ─── VARIABELEN — LICHT THEMA ───────────────────────────────────────────── */
:root {
  --header-hoogte: 130px;   /* 1.5× van ~60px */
  /* Hoofdkleuren licht thema */
  --achtergrond:  #f0f4f8;
  --kaart:        #ffffff;
  --kaart2:       #f8fafc;
  --invoer:       #f1f5f9;
  --tekst:        #1e293b;
  --tekst2:       #334155;
  --gedempt:      #64748b;
  --rand:         rgba(0,0,0,0.08);
  --rand2:        rgba(0,0,0,0.14);
  /* Accentkleuren */
  --goud:         #c9a84c;
  --goud2:        #9a7208;
  --goud-bg:      rgba(201,168,76,0.12);
  --rood:         #dc2626;
  --rood2:        #ef4444;
  --groen:        #16a34a;
  --oranje:       #ea580c;
  --blauw:        #2563eb;
  /* Sidebar — blijft donker */
  --sb-bg:        #1a2238;
  --sb-bg2:       #131929;
  --sb-bg3:       #0f1520;
  --sb-tekst:     #e2e8f0;
  --sb-gedempt:   #94a3b8;
  --sb-rand:      rgba(255,255,255,0.08);
  --sb-goud:      #c9a84c;
  --sb-goud2:     #e8c96a;
  /* Layout */
  --sidebar-breedte: 220px;
  --radius:   10px;
  --radius-sm: 6px;
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
.layout-wrapper { display:flex; min-height:100vh; }
.hoofd-inhoud {
  flex: 1;
  margin-left: var(--sidebar-breedte);
  margin-top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--achtergrond);
}
.pagina-inhoud { flex:1; }

/* ─── SIDEBAR (donker) ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-breedte);
  min-width: var(--sidebar-breedte);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-rand);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 130px;
  left: 0;
  height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-bg3) transparent;
  z-index: 200;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--sb-bg3); }

.sidebar-logo { padding:16px 14px; border-bottom:1px solid var(--sb-rand); }
.sidebar-logo a { display:flex;align-items:center;gap:8px;text-decoration:none; }
.sidebar-logo-bal { font-size:1.3rem; }
.sidebar-logo-tekst { font-size:.82rem;font-weight:700;color:var(--sb-goud2);line-height:1.2; }

.sidebar-tijd { padding:10px 14px;border-bottom:1px solid var(--sb-rand);background:var(--sb-bg2); }
.sidebar-tijd-tekst { font-size:.82rem;font-weight:600;color:var(--sb-goud2);font-family:'Courier New',monospace; }
.sidebar-tijd-tz { font-size:.67rem;color:var(--sb-gedempt);margin-top:2px; }

.sidebar-sectie-label {
  font-size:.67rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sb-goud);font-weight:700;padding:0 14px 4px;
}
.sidebar-nav { display:flex;flex-direction:column;gap:1px;padding:0 8px 4px; }
.sn {
  display:flex;align-items:center;gap:7px;
  color:var(--sb-gedempt);text-decoration:none;
  padding:7px 8px;border-radius:var(--radius-sm);
  font-size:.83rem;font-weight:500;transition:color .15s,background .15s;
}
.sn:hover { color:var(--sb-tekst);background:var(--sb-bg2); }
.sn.actief { color:var(--sb-goud2);background:rgba(201,168,76,0.12); }
.sn-admin { color:rgba(239,68,68,0.7); }
.sn-admin:hover { color:#ef4444; }

.sidebar-gebruiker { margin:6px 8px;background:var(--sb-bg2);border-radius:var(--radius-sm);padding:10px; }
.sidebar-av-rij { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.avatar-cirkel {
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#0a0e1a;flex-shrink:0;
}
.sidebar-username { font-size:.82rem;font-weight:600;color:var(--sb-tekst); }
.sidebar-stats-tbl { width:100%;font-size:.78rem;border-collapse:collapse; }
.sidebar-stats-tbl td { padding:2px 0;color:var(--sb-gedempt); }
.sidebar-stats-tbl td:last-child { text-align:right;color:var(--sb-goud2);font-weight:700; }

.taal-wissel { display:flex;gap:.3rem;padding:6px 14px 8px; }
.taal-knop {
  background:none;border:.5px solid var(--sb-rand);color:var(--sb-gedempt);
  padding:.2rem .6rem;border-radius:4px;font-size:.72rem;cursor:pointer;text-decoration:none;transition:all .15s;
}
.taal-knop.actief,.taal-knop:hover { border-color:var(--sb-goud);color:var(--sb-goud2); }

.sidebar-info { padding:10px 14px 16px;font-size:.72rem;color:var(--sb-gedempt);border-top:1px solid var(--sb-rand);margin-top:auto; }

/* ─── MOBIEL ─────────────────────────────────────────────────────────────── */
.mob-topbar {
  display:none;background:var(--sb-bg);border-bottom:1px solid var(--sb-rand);
  padding:0 14px;height:50px;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:300;
}
.mob-logo { font-size:.9rem;font-weight:700;color:var(--sb-goud2);text-decoration:none; }
.mob-menu-btn { background:none;border:none;color:white;font-size:1.3rem;cursor:pointer;padding:6px; }
@media(max-width:700px) {
  .mob-topbar { display:flex; }
  .sidebar { transform:translateX(-100%);transition:transform .25s;top:50px;height:calc(100vh - 50px); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  .hoofd-inhoud { margin-left:0; }
}

/* ─── BANNER (altijd zichtbaar bovenaan content) ─────────────────────────── */
.pool-banner {
  background: linear-gradient(135deg, #1a2238 0%, #2d3a5e 50%, #1a2238 100%);
  border-bottom: 3px solid var(--goud);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.pool-banner-titel {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sb-goud2);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pool-banner-sub {
  font-size: .75rem;
  color: var(--sb-gedempt);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ─── HERO (alleen op homepage) ──────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #1a2238 0%, #2d3a5e 50%, #1a2238 100%);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.hero h1 { font-size:clamp(1.5rem,4vw,2.4rem);font-weight:900;color:var(--sb-goud2);letter-spacing:.04em;margin-bottom:.4rem; }
.hero p   { color:var(--sb-gedempt);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; }

/* ─── PAGINA ─────────────────────────────────────────────────────────────── */
.pagina       { max-width:960px;margin:0 auto;padding:2rem 1.5rem; }
.pagina-smal  { max-width:500px;margin:0 auto;padding:2rem 1.5rem; }
.pagina-breed { max-width:1100px;margin:0 auto;padding:2rem 1.5rem; }
.pagina-titel { font-size:1.5rem;font-weight:800;color:var(--tekst);margin-bottom:.3rem; }
.pagina-subtitel { color:var(--gedempt);font-size:.85rem;margin-bottom:1.5rem; }

/* ─── KAARTEN ────────────────────────────────────────────────────────────── */
.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.kaart-hoofd { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.kaart-titel { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--goud2); }

/* ─── KNOPPEN ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;
  border-radius:var(--radius-sm);font-size:.83rem;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;transition:all .15s;
  letter-spacing:.02em;white-space:nowrap;
}
.btn-goud    { background:var(--goud);color:#0a0e1a; }
.btn-goud:hover { background:#d4b040; }
.btn-outline { background:transparent;border:1px solid var(--rand2);color:var(--tekst); }
.btn-outline:hover { border-color:var(--goud);color:var(--goud2); }
.btn-rood    { background:var(--rood);color:#fff; }
.btn-rood:hover { background:var(--rood2); }
.btn-groen   { background:var(--groen);color:#fff; }
.btn-groen:hover { opacity:.85; }
.btn-paars   { background:#7c3aed;color:#fff; }
.btn-paars:hover { background:#6d28d9; }
.btn-sm      { padding:.3rem .75rem;font-size:.75rem; }
.btn-blok    { width:100%;justify-content:center;padding:.7rem; }

/* ─── FORMULIEREN ────────────────────────────────────────────────────────── */
.veld-groep { margin-bottom:1.1rem; }
.veld-label { display:block;font-size:.78rem;color:var(--gedempt);margin-bottom:.35rem;font-weight:500; }
.veld-input {
  width:100%;background:var(--invoer);border:1px solid var(--rand2);
  border-radius:var(--radius-sm);color:var(--tekst);padding:.6rem .9rem;
  font-size:.9rem;outline:none;transition:border-color .15s;
}
.veld-input:focus { border-color:var(--goud); }
.veld-input::placeholder { color:var(--gedempt); }
select.veld-input { cursor:pointer; }

/* ─── MELDINGEN ──────────────────────────────────────────────────────────── */
.melding { border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;font-size:.88rem; }
.melding-success { background:#f0fdf4;border-left:3px solid var(--groen);color:#15803d; }
.melding-error   { background:#fef2f2;border-left:3px solid var(--rood);color:#b91c1c; }
.melding-info    { background:#eff6ff;border-left:3px solid var(--blauw);color:#1d4ed8; }
.melding-warning { background:#fff7ed;border-left:3px solid var(--oranje);color:#c2410c; }

/* ─── STATS GRID ─────────────────────────────────────────────────────────── */
.stat-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-bottom:1.4rem; }
.stat-kaartje { background:var(--kaart);border:1px solid var(--rand);border-radius:var(--radius-sm);padding:1rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05); }
.stat-kaartje .getal { font-size:1.8rem;font-weight:900;color:var(--goud2); }
.stat-kaartje .label { font-size:.68rem;color:var(--gedempt);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem; }

/* ─── TABS ────────────────────────────────────────────────────────────────── */
.tabs { display:flex;gap:0;border-bottom:2px solid var(--rand);margin-bottom:1.2rem;overflow-x:auto;scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-knop {
  background:none;border:none;color:var(--gedempt);padding:.65rem .9rem;
  cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;transition:all .15s;text-decoration:none;
}
.tab-knop:hover { color:var(--tekst2); }
.tab-knop.actief { color:var(--goud2);border-bottom-color:var(--goud); }

/* ─── WEDSTRIJD RIJEN ────────────────────────────────────────────────────── */
.groep-sectie { margin-bottom:2rem; }
.groep-header { display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem; }
.groep-badge { width:34px;height:34px;background:var(--goud);color:#0a0e1a;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;flex-shrink:0; }
.groep-teams { display:flex;flex-wrap:wrap;gap:.35rem; }
.team-pill { background:var(--kaart2);border:1px solid var(--rand);border-radius:20px;padding:.2rem .65rem;font-size:.78rem;color:var(--gedempt); }
.ronde-label { font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--goud2);font-weight:700;margin:.9rem 0 .4rem 2px; }

.wedstrijd-rij {
  background:var(--kaart);border:1px solid var(--rand);border-radius:7px;
  padding:.65rem .9rem;display:grid;
  grid-template-columns:48px 1fr 40px 18px 40px 1fr 46px;
  align-items:center;gap:.4rem;margin-bottom:.45rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.wedstrijd-rij:hover { border-color:var(--rand2);box-shadow:0 2px 6px rgba(0,0,0,.08); }
.wedstrijd-rij.exact   { border-left:2px solid var(--groen); }
.wedstrijd-rij.goed    { border-left:2px solid var(--oranje); }
.wedstrijd-rij.fout    { border-left:2px solid var(--rood); }
.wedstrijd-rij.open    { border-left:2px solid var(--goud); }
.w-datum  { font-size:.68rem;color:var(--gedempt);text-align:center;line-height:1.3; }
.w-thuis  { text-align:right;font-size:.85rem;font-weight:600; }
.w-uit    { text-align:left;font-size:.85rem;font-weight:600; }
.score-streep { color:var(--gedempt);text-align:center; }
.w-status { text-align:right;font-size:.78rem; }

.score-veld {
  width:40px;height:34px;
  background:var(--invoer);border:1.5px solid var(--rand2);border-radius:5px;
  color:var(--goud2);font-size:1rem;font-weight:700;text-align:center;
  -moz-appearance:textfield;outline:none;transition:border-color .15s;
}
.score-veld::-webkit-outer-spin-button,.score-veld::-webkit-inner-spin-button { -webkit-appearance:none; }
.score-veld:focus { border-color:var(--goud); }
.score-veld:disabled { opacity:.4;cursor:not-allowed;background:var(--kaart2); }

/* ─── KNOCKOUT RIJEN ─────────────────────────────────────────────────────── */
.ko-rij2,.ko-rij {
  background:var(--kaart);border:1px solid var(--rand);border-radius:8px;
  padding:.65rem .9rem;display:grid;
  grid-template-columns:50px 1fr 40px 16px 40px 1fr 38px;
  align-items:center;gap:.4rem;margin-bottom:.45rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ko-rij2:hover,.ko-rij:hover { border-color:var(--rand2); }
.ko-rij2.open { border-left:2px solid var(--goud); }
.ko-team-select {
  background:var(--invoer);border:1.5px solid var(--rand2);border-radius:6px;
  color:var(--tekst);font-size:.82rem;font-weight:500;padding:4px 22px 4px 6px;
  outline:none;cursor:pointer;width:100%;transition:border-color .15s;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
}
.ko-team-select:focus { border-color:var(--goud); }
.ko-team-select.gevuld { border-color:var(--goud);color:var(--goud2); }

/* ─── AUTO INVUL KNOP ────────────────────────────────────────────────────── */
.auto-invul-btn {
  background:var(--kaart);border:1.5px solid var(--goud);color:var(--goud2);
  padding:.7rem 1.4rem;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:700;
  margin-bottom:1.4rem;transition:all .15s;display:inline-flex;align-items:center;gap:.5rem;
}
.auto-invul-btn:hover { background:var(--goud-bg); }
.spinner { display:none;width:14px;height:14px;border:2px solid var(--goud);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── STAND TABEL ────────────────────────────────────────────────────────── */
.stand-tabel { width:100%;border-collapse:collapse; }
.stand-tabel th { text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gedempt);padding:.5rem .75rem;border-bottom:2px solid var(--rand); }
.stand-tabel td { padding:.7rem .75rem;border-bottom:1px solid var(--rand);font-size:.87rem; }
.stand-tabel tr:last-child td { border-bottom:none; }
.stand-tabel tr:hover td { background:rgba(0,0,0,.02); }
.positie-num { font-size:.78rem;color:var(--gedempt);font-weight:700;text-align:center; }
.p1{color:#d4a017}.p2{color:#9ca3af}.p3{color:#cd7f32}
.stand-naam { display:flex;align-items:center;gap:.65rem;font-weight:600; }
.stand-avatar { width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.67rem;font-weight:700;color:#0a0e1a;flex-shrink:0; }
.stand-punten { font-size:.95rem;font-weight:800;color:var(--goud2);text-align:right; }
.stat-klein { font-size:.75rem;color:var(--gedempt);text-align:center; }
.jij-rij td { background:rgba(201,168,76,.06); }

/* ─── VOORTGANG ──────────────────────────────────────────────────────────── */
.voortgang-balk { background:var(--kaart2);border:1px solid var(--rand);border-radius:4px;height:8px;overflow:hidden;margin-top:.5rem; }
.voortgang-vulling { height:100%;background:linear-gradient(90deg,var(--goud),#d4a017);border-radius:4px;transition:width .4s ease; }
.voortgang-labels { display:flex;justify-content:space-between;font-size:.68rem;color:var(--gedempt);margin-top:.3rem; }

/* ─── POULE TABEL ────────────────────────────────────────────────────────── */
.poule-tabel { width:100%;border-collapse:collapse;font-size:.82rem; }
.poule-tabel th { font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gedempt);padding:.4rem .6rem;border-bottom:2px solid var(--rand);text-align:center; }
.poule-tabel th:nth-child(2) { text-align:left; }
.poule-tabel td { padding:.5rem .6rem;border-bottom:1px solid var(--rand);text-align:center;vertical-align:middle; }
.poule-tabel td:nth-child(2) { text-align:left;font-weight:500; }
.poule-tabel tr:last-child td { border-bottom:none; }
.poule-tabel tr:nth-child(1) td,.poule-tabel tr:nth-child(2) td { background:rgba(22,163,74,.05); }
.poule-tabel tr:nth-child(3) td { background:rgba(37,99,235,.04); }
.poule-pt { font-weight:800;color:var(--goud2); }

/* ─── BERICHTEN ──────────────────────────────────────────────────────────── */
.bericht-item { display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--rand); }
.bericht-item:last-child { border-bottom:none; }
.bericht-av { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#0a0e1a;flex-shrink:0; }
.bericht-tekst { flex:1; }
.bericht-auteur { font-size:.78rem;font-weight:700;color:var(--goud2); }
.bericht-tijd { font-size:.68rem;color:var(--gedempt);margin-left:.5rem; }
.bericht-inhoud { font-size:.85rem;margin-top:.2rem;color:var(--tekst2);line-height:1.5; }

/* ─── ADMIN ──────────────────────────────────────────────────────────────── */
.admin-topbar {
  background:linear-gradient(90deg,#fef2f2,#fff5f5);
  border-bottom:2px solid #fca5a5;
  padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;
  font-size:.85rem;font-weight:600;color:#991b1b;
}
.admin-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem; }
.admin-kaart {
  background:var(--kaart);
  border:2px solid var(--rand2);
  border-top:3px solid var(--rood);
  border-radius:var(--radius);
  padding:1.4rem 1.2rem;
  text-align:center;
  text-decoration:none;
  transition:all .18s;
  display:block;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.admin-kaart:hover {
  border-color:var(--goud);
  border-top-color:var(--goud);
  box-shadow:0 4px 14px rgba(0,0,0,.13);
  transform:translateY(-2px);
  background:var(--kaart2);
}
.admin-kaart .icon { font-size:2.2rem;margin-bottom:.8rem;display:block; }
.admin-kaart .titel { font-size:.95rem;font-weight:800;color:var(--tekst);margin-bottom:.25rem; }
.admin-kaart .omschrijving { font-size:.8rem;color:var(--gedempt);line-height:1.5; }

/* ─── INSTELLINGEN CHECKBOXES ────────────────────────────────────────────── */
.inst-checkbox-rij { padding:.7rem 0;border-bottom:1px solid var(--rand); }
.inst-checkbox-rij:last-child { border-bottom:none; }
.inst-checkbox-label { display:flex;align-items:flex-start;gap:.8rem;cursor:pointer; }
.inst-checkbox-label input[type=checkbox] { width:16px;height:16px;margin-top:.2rem;accent-color:var(--goud);flex-shrink:0;cursor:pointer; }
.inst-checkbox-tekst { display:flex;flex-direction:column;gap:.15rem;font-size:.88rem; }
.inst-checkbox-tekst strong { color:var(--tekst); }
.inst-checkbox-tekst span   { color:var(--gedempt);font-size:.8rem; }

/* ─── CAPTCHA ────────────────────────────────────────────────────────────── */
.captcha-veld {
  background:var(--kaart2);border:1px solid var(--rand);
  border-radius:var(--radius-sm);padding:.8rem 1rem;margin-top:.5rem;
}
.captcha-veld .veld-label { color:var(--tekst2);font-size:.85rem; }
.captcha-veld strong { color:var(--goud2);font-size:1rem; }

/* ─── VLAGGEN ────────────────────────────────────────────────────────────── */
.vlag { font-size:1rem;margin-right:.2rem; }
.vlag-sm { font-size:.85rem; }
.team-met-vlag { display:inline-flex;align-items:center;gap:.3rem; }

/* ─── SAVE TOAST ─────────────────────────────────────────────────────────── */
.save-toast {
  background:var(--groen);color:#fff;padding:.5rem 1rem;border-radius:7px;
  font-size:.8rem;font-weight:700;position:fixed;bottom:1.2rem;right:1.2rem;
  display:none;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ─── LINKS & FOOTER ─────────────────────────────────────────────────────── */
a { color:var(--goud2);text-decoration:none; }
a:hover { color:var(--goud); }
.hoofd-footer { background:var(--kaart);border-top:1px solid var(--rand);padding:1rem 1.5rem;margin-left:var(--sidebar-breedte); }
.footer-inner { max-width:960px;margin:0 auto;font-size:.72rem;color:var(--gedempt);display:flex;gap:.8rem;flex-wrap:wrap; }
.footer-sep { opacity:.4; }
@media(max-width:700px) { .hoofd-footer { margin-left:0; } }

/* ─── EXTRA VRAGEN ───────────────────────────────────────────────────────── */
.ev-rij { display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--rand); }
.ev-rij:last-child { border-bottom:none; }
.ev-vraag-info { flex:1;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.88rem; }
.ev-badge { font-size:.68rem;padding:.15rem .5rem;border-radius:8px;font-weight:600;text-transform:uppercase; }
.ev-badge-tekst  { background:#eff6ff;color:#2563eb; }
.ev-badge-getal  { background:#fff7ed;color:#ea580c; }
.ev-badge-lijst  { background:#f0fdf4;color:#16a34a; }

/* ─── RESPONSIEF ─────────────────────────────────────────────────────────── */
@media(max-width:680px) {
  .wedstrijd-rij,.ko-rij,.ko-rij2 { grid-template-columns:44px 1fr 36px 14px 36px 1fr 36px;gap:.3rem;padding:.6rem .5rem; }
  .w-thuis,.w-uit { font-size:.78rem; }
  .score-veld { width:36px;height:32px;font-size:.9rem; }
  .pagina { padding:1.5rem 1rem; }
  .stand-tabel th:nth-child(4),.stand-tabel td:nth-child(4),
  .stand-tabel th:nth-child(5),.stand-tabel td:nth-child(5) { display:none; }
  .uits-rij { grid-template-columns:52px 1fr 44px 16px 44px 1fr auto !important; font-size:.82rem; }
  .uts-team-sel { font-size:.78rem; }
}

/* ─── POOL BANNER (redesign) ──────────────────────────────────────────────── */
.pool-banner {
  background: linear-gradient(135deg, var(--banner-bg1,#1a2238) 0%, var(--banner-bg2,#2d3a5e) 50%, var(--banner-bg1,#1a2238) 100%);
  border-bottom: 3px solid var(--goud);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.pool-banner-links {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.pool-logo {
  height: 48px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  border-radius: 4px;
}
.pool-logo-placeholder {
  font-size: 2.2rem;
  line-height: 1;
}
.pool-banner-titel {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--banner-tekst,#e8c96a);
  letter-spacing: .03em;
}
.pool-banner-sub {
  font-size: .75rem;
  color: var(--banner-sub,#94a3b8);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .2rem;
}
.pool-banner-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0;
}
.pool-banner-tijd {
  font-size: .82rem;
  font-family: 'Courier New', monospace;
  color: var(--banner-tekst,#e8c96a);
  font-weight: 600;
}
.pool-banner-user {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--banner-sub,#94a3b8);
}
@media(max-width:600px) {
  .pool-banner { padding:.7rem 1rem; min-height:56px; }
  .pool-banner-titel { font-size:1rem; }
  .pool-banner-rechts { display:none; }
  .verberg-mobiel { display:none !important; }
}


/* ═══════════════════════════════════════════════════════
   VOLLEDIGE BREEDTE HEADER
   position: sticky → blijft altijd in de flow zichtbaar
═══════════════════════════════════════════════════════ */
.hoofd-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 130px;
  min-height: 130px;
  z-index: 500;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0 1.5rem;
  background: #1a2238;
  background: linear-gradient(135deg, #1a2238 0%, #253050 50%, #1a2238 100%);
  border-bottom: 3px solid #c9a84c;
  box-sizing: border-box;
}

/* Oranje thema override (via themas.php) */
.thema-oranje .hoofd-header {
  background: linear-gradient(135deg, #c25400 0%, #e05a00 50%, #c25400 100%);
}

.hh-logo {
  height: 64px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.hh-midden {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.hh-naam {
  font-size: 3.2rem;
  font-weight: 900;
  color: #e8c96a;
  letter-spacing: .04em;
  line-height: 1.2;
}
.hh-sub {
  font-size: .72rem;
  color: #94a3b8;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .15rem;
}
.hh-rechts {
  text-align: right;
  flex-shrink: 0;
}
.hh-tijd {
  font-size: .85rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #e8c96a;
}
.hh-tz {
  font-size: .68rem;
  color: #94a3b8;
  margin-top: .1rem;
}
.hh-user {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: flex-end;
  font-size: .75rem;
  color: #94a3b8;
  margin-top: .25rem;
}
.hh-login {
  font-size: .78rem;
  color: #94a3b8;
  text-decoration: none;
  display: block;
  margin-top: .25rem;
}
.hh-login:hover { color: #e8c96a; }
.hh-burger {
  display: none;
  background: none;
  border: none;
  color: #e8c96a;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 6px;
  margin-left: .5rem;
}

/* Sidebar begint NU direct onder de sticky header (niet meer top:0) */
.sidebar {
  top: 130px !important;
  height: calc(100vh - 130px) !important;
}

/* Verberg de oude pool-banner div als die er nog is */
.pool-banner { display: none !important; }

/* ═══════════════════════════════════════════════════
   MOBIEL (≤700px)
═══════════════════════════════════════════════════ */
@media(max-width: 700px) {
  /* Header */
  .hoofd-header    { height: 60px; padding: 0 .8rem; }
  .hh-naam         { font-size: 1.4rem; }
  .hh-sub          { display: none; }
  .hh-rechts       { display: none; }
  .hh-burger       { display: block; }
  .hh-logo         { height: 36px; }
  .hh-midden       { gap: .4rem; }

  /* Sidebar */
  .sidebar { top: 60px !important; height: calc(100vh - 60px) !important;
             transform: translateX(-100%); transition: transform .25s; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .hoofd-inhoud { margin-left: 0; }

  /* Pagina padding */
  .pagina, .pagina-smal, .pagina-breed { padding: 1.2rem .8rem; }
  .pagina-titel  { font-size: 1.3rem; }

  /* Tabs - horizontaal scrollbaar */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-knop { white-space: nowrap; flex-shrink: 0; }

  /* Kaarten */
  .kaart { padding: 1rem .9rem; }
  .kaart-hoofd { flex-wrap: wrap; gap: .4rem; }

  /* Stand tabel */
  .stand-tabel { font-size: .8rem; }
  .stand-avatar { width: 28px; height: 28px; font-size: .6rem; }
  .stand-naam   { font-size: .82rem; }

  /* Statistieken kaartjes */
  /* Stat grid: alle 4 op één rij op mobiel */
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 1rem; }
  .stat-kaartje { padding: .45rem .2rem; }
  .stat-kaartje .getal { font-size: 1.25rem; }
  .stat-kaartje .label { font-size: .55rem; letter-spacing: .02em; }

  /* Wedstrijden grid */
  .wedstrijd-rij { gap: .2rem; padding: .5rem .4rem; font-size: .8rem; }
  .w-thuis, .w-uit { font-size: .78rem; }

  /* Forms */
  .veld-input { font-size: 16px; } /* Voorkom zoom op iOS */
  .veld-groep { margin-bottom: .8rem; }

  /* Knoppen */
  .btn-blok { width: 100%; text-align: center; }

  /* Admin grid - 2 kolommen op tablet, 1 op klein scherm */
  .admin-grid { grid-template-columns: 1fr; gap: .8rem; }

  /* Vervolgronden voorspellen */
  .ko-rij { grid-template-columns: 26px 1fr 38px 12px 38px 1fr !important; gap: .2rem !important; font-size: .78rem; }

  /* Taalwissel */
  .taal-wissel { padding: .5rem .8rem; }

  /* Uitslagen admin */
  .uits-rij { grid-template-columns: 52px 1fr 42px 14px 42px 1fr 90px !important; gap: .3rem !important; padding: .6rem .5rem; }
  .uts-score { width: 42px; height: 36px; font-size: .95rem; }
  .uts-team  { font-size: .82rem; }

  /* Prijzen pagina */
  .prijs-kaart { flex-direction: column; align-items: center; text-align: center; }

  /* Voortgang balk */
  .voortgang-balk { height: 8px; }

  /* Taal-knopje in header rechts */
  .hh-taal { display: none; }

  /* Overlay voor sidebar */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 98;
  }
}

/* Klein mobiel (≤400px) */
@media(max-width: 400px) {
  .hh-naam { font-size: 1.1rem; }
  /* stat-kaartjes al ingesteld op 4 kolommen hierboven */
  .tabs { font-size: .8rem; }
  .tab-knop { padding: .4rem .6rem; }
  .stand-tabel th:nth-child(3),
  .stand-tabel td:nth-child(3) { display: none; } /* verberg extra kolom */
}

/* ─── RESPONSIVE 2-KOLOMS GRID ────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media(max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── MOBIEL EXTRA: tabellen scrollen horizontaal ──────────────────────── */
@media(max-width: 700px) {
  /* Tabellen binnen kaarten: horizontaal scrollbaar */
  .kaart table,
  .pagina table,
  .pagina-breed table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Poulestand: kleinere font */
  .poule-tabel th, .poule-tabel td { padding: .35rem .3rem; font-size: .75rem; }

  /* Wedstrijden: schermen <400px */
  .w-stad { display: none; }

  /* Countdown op homepage */
  .countdown-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .countdown-getal { font-size: 2rem !important; }

  /* Stand tabel: compacter */
  .stand-tabel td, .stand-tabel th { padding: .5rem .4rem; font-size: .82rem; }

  /* Voortgangsbalk op homepage */
  .voortgang-sectie { flex-direction: column; align-items: flex-start; }

  /* Kaart hoofd: buttons wrappen */
  .kaart-hoofd { flex-wrap: wrap; gap: .4rem; }
  .kaart-hoofd .btn { font-size: .75rem; padding: .25rem .6rem; }

  /* Hero sectie op homepage */
  .hero { padding: 1.2rem 1rem; }
  .hero h1 { font-size: clamp(1.2rem, 5vw, 1.8rem); }

  /* Extra vragen op voorspellen */
  .ev-rij { flex-direction: column; }

  /* Prijzen */
  .prijs-rij { flex-direction: column; align-items: flex-start; }

  /* Uits-rij admin: laat scrollen */
  .uits-rij { overflow-x: auto; }
}

/* Extra klein scherm (≤360px): stat-kaartjes nog compacter */
@media(max-width: 360px) {
  .stat-grid { gap: 4px; }
  .stat-kaartje  { padding: .35rem .1rem; }
  .stat-kaartje .getal { font-size: 1rem; }
  .stat-kaartje .label { font-size: .5rem; letter-spacing: 0; }
}