/* Gedeelde stijl voor solliciteren.html en admin.html (index.html heeft zijn eigen inline CSS). */
:root {
  --bg: #0b0716;
  --bg-alt: #120b24;
  --card: #181030;
  --card-hover: #1f1540;
  --border: #2e2050;
  --text: #f3effc;
  --muted: #a99cc8;
  --purple: #9b4dff;
  --purple-light: #c08bff;
  --groen: #2ecc71;
  --rood: #ff5a6e;
  --geel: #f5c400;
  --blauw: #5b8cff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px); }
main { flex: 1; padding: 48px 0 80px; }

/* Header */
header { position: sticky; top: 0; z-index: 10; background: rgba(11, 7, 22, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.brand img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; color: var(--muted); }
nav a:hover, nav a.actief { color: var(--text); }
.account { display: inline-flex; align-items: center; gap: 8px; color: var(--text); border: 1px solid var(--border); padding: 7px 14px 7px 8px; border-radius: 999px; font-weight: 600; }
.account img { width: 26px; height: 26px; border-radius: 50%; background: var(--card); }

/* Typografie */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--purple-light); }
h1 { margin-top: 10px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sub { margin-top: 10px; color: var(--muted); line-height: 1.7; max-width: 640px; }
.muted { color: var(--muted); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: filter .15s ease, background .15s ease; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-ghost { background: var(--card); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--card-hover); }
.btn-danger { background: transparent; border-color: #5a2030; color: var(--rood); }
.btn-danger:hover:not(:disabled) { background: #2a1020; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }

/* Kaarten & formulieren */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
label.veld { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
label.veld .verplicht { color: var(--rood); }
input[type="text"], textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 400; outline: none; }
input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--purple); }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.keuze { display: flex; gap: 10px; }
.keuze label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 500; }
.keuze input { accent-color: var(--purple); }

/* Meldingen */
.melding { padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.6; border: 1px solid; }
.melding-fout { background: #2a0f1c; border-color: #5a2030; color: #ffd0d8; }
.melding-ok { background: #0f2a1c; border-color: #1f5a3a; color: #c8f5da; }
.melding-info { background: var(--bg-alt); border-color: var(--border); color: var(--muted); }

/* Status-badges */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-nieuw { color: var(--blauw); background: rgba(91,140,255,.12); }
.status-in_behandeling { color: var(--geel); background: rgba(245,196,0,.12); }
.status-aangenomen { color: var(--groen); background: rgba(46,204,113,.12); }
.status-afgewezen { color: var(--rood); background: rgba(255,90,110,.12); }

/* Tabs */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 28px 0 24px; overflow-x: auto; }
.tab { background: none; border: 0; padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tab.actief { color: var(--text); border-bottom-color: var(--purple); }
.tab .teller { margin-left: 6px; background: var(--purple); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }

/* Lijsten */
.lijst { display: flex; flex-direction: column; gap: 8px; }
.rij { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
button.rij { width: 100%; text-align: left; cursor: pointer; }
button.rij:hover { background: var(--card-hover); }
.rij img.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); flex-shrink: 0; }
.rij .grow { flex: 1; min-width: 0; }
.rij .titel { font-weight: 700; }
.rij .meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filters select { width: auto; padding: 9px 12px; font-size: 14px; }

/* Leeg / laden */
.leeg { text-align: center; padding: 48px 16px; color: var(--muted); border: 1px dashed var(--border); border-radius: 16px; }
.verborgen { display: none !important; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 24px 0; font-size: 13px; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a:hover { color: var(--text); }

@media (max-width: 640px) {
  .nav-tekst { display: none; }
  nav { gap: 14px; }
  .tabs { flex-wrap: wrap; overflow-x: visible; gap: 0 4px; }
  .tab { padding: 10px 10px; }
  .rij { flex-wrap: wrap; }
}

/* ---- Meldingen (toasts) ---- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; border: 1px solid var(--border); background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.4); cursor: pointer; animation: toast-in .2s ease; transition: opacity .25s ease, transform .25s ease; }
.toast.weg { opacity: 0; transform: translateY(8px); }
.toast-ok { border-color: #1f5a3a; background: #0f2a1c; color: #c8f5da; }
.toast-fout { border-color: #5a2030; background: #2a0f1c; color: #ffd0d8; }
.toast-bezig { border-color: #5a4a10; background: #2a230a; color: #fbe8a6; }
.toast-wachtrij { border-color: #2e3f7a; background: #121a3a; color: #cfdcff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Dialoog ---- */
.dialoog-achtergrond { position: fixed; inset: 0; z-index: 90; background: rgba(5, 3, 12, .7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialoog { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.dialoog-tekst { color: var(--muted); line-height: 1.6; font-size: 14px; }
.dialoog-hulp { font-size: 12px; color: var(--muted); font-weight: 400; }
.dialoog-check { font-size: 14px; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.btn-gevaar { background: #c92a45; color: #fff; }
.btn-gevaar:hover:not(:disabled) { filter: brightness(1.1); }
input[type="number"] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 15px; outline: none; color: var(--text); }
input[type="number"]:focus { border-color: var(--purple); }

/* ---- Spelersbeheer ---- */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { background: var(--card); border: 1px solid var(--border); color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pill:hover { color: var(--text); }
.pill.actief { background: var(--purple); border-color: var(--purple); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stat-kaart { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.stat-kaart .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat-kaart .waarde { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; word-break: break-word; }
.stat-kaart .knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.knop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.knop-grid .btn { justify-content: flex-start; }
.sectie-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sectie-kop p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.werkbalk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.werkbalk input[type="text"], .werkbalk input[type="number"] { flex: 1; min-width: 160px; padding: 10px 12px; font-size: 14px; width: auto; }
.werkbalk input[type="number"] { flex: 0 0 110px; min-width: 0; }
.item-lijst { display: flex; flex-direction: column; }
.item-rij { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.item-rij .naam { flex: 1; min-width: 0; font-weight: 600; word-break: break-word; }
.item-rij .aantal { font-weight: 800; min-width: 48px; text-align: right; }
.kaart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mini-kaart { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mini-kaart.aan { border-color: rgba(46,204,113,.45); }
.mini-kaart .titel { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mini-kaart .knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-klein { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-klein.groen { color: var(--groen); background: rgba(46,204,113,.12); }
.badge-klein.grijs { color: var(--muted); background: var(--card); }
.schakelaar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; }
.schakelaar input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s ease; }
.schakelaar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.schakelaar input:checked { background: var(--groen); }
.schakelaar input:checked::after { transform: translateX(16px); }
.schakelaar input:disabled { opacity: .5; cursor: wait; }
.uitleg { font-size: 13px; color: var(--muted); line-height: 1.6; }
.uitleg-blok { padding: 12px 14px; border-radius: 10px; background: var(--bg-alt); border: 1px solid var(--border); font-size: 13px; color: var(--muted); line-height: 1.6; }
.status-icoon { font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-icoon.klaar { color: var(--groen); }
.status-icoon.wachten { color: var(--geel); }
.status-icoon.wachtrij { color: var(--blauw); }
.status-icoon.mislukt { color: var(--rood); }
.status-icoon.geannuleerd { color: var(--muted); }
.gegevens-lijst { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.gegevens-lijst dt { color: var(--muted); }
.gegevens-lijst dd { font-weight: 600; word-break: break-word; }
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dialoog { padding: 20px; }
}

/* ---- Gamepasses & toegang ---- */
.toegang-rij { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.toegang-rij.vrij { opacity: .75; }
.toegang-naam { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toegang-acties { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gp-blok { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.gp-blok:hover { border-color: var(--purple); }
.gp-blok img, .gp-icoon-leeg { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background: var(--card); }
.badge-klein.blauw { color: var(--blauw); background: rgba(91,140,255,.12); }
.link-knop { background: none; border: 0; padding: 0; color: var(--purple-light); font-weight: 700; cursor: pointer; }
.link-knop:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .toegang-rij { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- Spelerskaart (Beheer + Spelers-pagina) ---- */
  .speler-kop { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .speler-kop img { width: 72px; height: 72px; border-radius: 50%; background: var(--bg); }
  .online-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; vertical-align: middle; }
  .online-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .online-badge.aan { color: var(--groen); background: rgba(46,204,113,.12); }
  .online-badge.uit { color: var(--muted); background: var(--bg); }
  .store-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .store-tabs button.gekozen { border-color: var(--purple); background: var(--card-hover); }
  .data-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
  .data-tabel td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
  .data-tabel td.veld-naam { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; width: 40%; }
  .data-tabel input[type="text"], .data-tabel input[type="number"] { padding: 8px 10px; font-size: 14px; width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); outline: none; }
  .data-tabel input:focus { border-color: var(--purple); }
  .data-tabel input[type="checkbox"] { accent-color: var(--purple); width: 18px; height: 18px; }
  .data-tabel td.acties { width: 1%; white-space: nowrap; text-align: right; }
  .rij-status { font-size: 12px; margin-left: 8px; }
  .rij-status.ok { color: var(--groen); }
  .rij-status.fout { color: var(--rood); }
  .rij-status.wacht { color: var(--geel); }
  .data-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .data-tools input[type="text"] { flex: 1; min-width: 180px; padding: 9px 12px; font-size: 14px; }
  .log-regel { font-size: 13px; padding: 8px 0; border-top: 1px solid var(--border); color: var(--muted); line-height: 1.5; word-break: break-word; }
  .log-regel strong { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .speler-kop img { width: 56px; height: 56px; }
}

/* ---- Beheer: zijbalk ---- */
.beheer-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.zijbalk { position: sticky; top: 90px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 14px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.zijbalk-kop { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 6px; }
.zijbalk-kop:first-child { padding-top: 4px; }
.zijbalk .tab { text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zijbalk .tab:hover { background: var(--card-hover); color: var(--text); }
.zijbalk .tab.actief { background: var(--card-hover); border-left-color: var(--purple); color: var(--text); }
.beheer-inhoud { min-width: 0; }
@media (max-width: 900px) {
  .beheer-layout { grid-template-columns: 1fr; gap: 16px; }
  .zijbalk { position: static; flex-direction: row; flex-wrap: wrap; padding: 8px; }
  .zijbalk-kop { display: none; }
  .zijbalk .tab { border-left: 0; padding: 8px 10px; font-size: 13px; }
}

/* ---- Dashboard / Logs ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.dash-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.dash-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.balk-grafiek { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 6px; }
.balk-grafiek .balk { flex: 1; background: var(--purple); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; position: relative; }
.balk-grafiek .balk:hover { opacity: 1; }
.rang-nr { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0; }
.log-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.log-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.log-filters input, .log-filters select { padding: 9px 10px; font-size: 14px; }
input[type="date"] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; color: var(--text); color-scheme: dark; }
.log-item { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.log-item .streep { border-radius: 3px; background: var(--purple); }
.log-item .kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.log-item .tekst { font-size: 14px; color: var(--text); margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.log-item .velden { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.log-item .velden b { color: var(--text); font-weight: 600; }
.log-item .meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bezit-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.bezit-tabel th { text-align: right; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; }
.bezit-tabel th:first-child, .bezit-tabel td:first-child { text-align: left; }
.bezit-tabel td { padding: 8px; border-top: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
.bezit-tabel td.nul { color: var(--border); }
.bezit-tabel td.totaal { font-weight: 800; }

/* Reports, staff in dienst, game-instellingen */
.twee-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.badge-klein.rood { color: var(--rood); background: rgba(255,90,110,.12); }
.report-rij { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.report-rij.open { border-left: 3px solid var(--rood); padding-left: 10px; }
.report-kop { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.report-tekst { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.inst-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.inst-tabel th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px; white-space: nowrap; }
.inst-tabel td { padding: 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.inst-tabel input[type=number] { width: 110px; }
.inst-tabel input[type=text], .inst-tabel select { width: 100%; min-width: 90px; }
.inst-tabel td.gewijzigd { background: rgba(91,140,255,.08); }
.inst-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inst-velden label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.inst-balk { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); }
.pakket-kaart textarea { min-height: 70px; font-size: 13px; }