/* ============================================================
   FIRMAFUNTEAM KLEUREN
   Pas alleen de kleurcodes hieronder aan om de hele site te wijzigen.
   Voorbeeld groen: #20d060 | blauw: #2f80ed | rood: #e63946
   ============================================================ */
:root{
  --achtergrond: #050407;
  --kaart: #100b16;
  --kaart-donker: #09060d;
  --rand: #42205f;
  --rand-invoer: #603080;
  --hoofdkleur: #b84cff;
  --hoofdkleur-tekst: #100016;
  --tekst: #f5f7fb;
  --tekst-zacht: #c0b0c9;
  --live: #d82b3a;
  --succes: #39204a;
  --gevaar: #7a2630;
  --gedraaid: #b66cff;
}

*{box-sizing:border-box}
body{margin:0;background:var(--achtergrond);color:var(--tekst);font:16px system-ui,-apple-system,Segoe UI,sans-serif}
a{color:var(--hoofdkleur)}
.wrap{max-width:680px;margin:auto;padding:24px}.narrow{max-width:440px}
.hero{text-align:center;padding:24px 0}.brand{font-size:28px;font-weight:900;color:var(--hoofdkleur)}
.live{display:inline-block;margin:14px;background:var(--live);padding:7px 13px;border-radius:99px;font-weight:800}
.djphoto{width:180px;height:180px;display:block;margin:5px auto 14px;object-fit:cover;border-radius:50%;border:5px solid var(--rand)}
.placeholder{display:grid;place-items:center;background:var(--kaart);font-size:70px}.hero h1{margin:4px;font-size:34px}.hero p{color:var(--tekst-zacht)}
.card{background:var(--kaart);border:1px solid var(--rand);border-radius:20px;padding:22px;box-shadow:0 15px 40px #0005}
label{display:block;font-weight:700;margin:14px 0}
input,textarea{width:100%;margin-top:7px;padding:14px;border-radius:12px;border:1px solid var(--rand-invoer);background:var(--kaart-donker);color:var(--tekst);font:inherit}
input:focus,textarea:focus{outline:2px solid var(--hoofdkleur);outline-offset:1px}
textarea{min-height:90px;resize:vertical}
button{width:100%;padding:15px;border:0;border-radius:12px;background:var(--hoofdkleur);color:var(--hoofdkleur-tekst);font-size:17px;font-weight:900;cursor:pointer}
.success,.flash,.closed{padding:15px;margin:12px 0;border-radius:12px;background:var(--succes)}.closed{background:#452027}.flash{max-width:680px;margin:12px auto}
.adminlink{display:block;text-align:center;margin:22px}.admin{max-width:1100px;margin:auto;padding:22px}
header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}header b{font-size:24px;color:var(--hoofdkleur)}header span{display:block;color:var(--tekst-zacht)}
nav{display:flex;gap:15px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.toggle input{width:auto;margin-right:8px}.title{margin-top:30px}
.requests{display:grid;gap:12px}.request{background:var(--kaart);border:1px solid var(--rand);border-left:5px solid var(--hoofdkleur);border-radius:15px;padding:17px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.request.gedraaid{opacity:.55;border-left-color:var(--gedraaid)}.request h3{margin:7px 0}.request p{margin:0;color:#bac3d3}.badge{text-transform:uppercase;font-size:11px;font-weight:900;color:var(--hoofdkleur)}
.actions{display:flex;gap:8px}.actions form{margin:0}.small{width:auto;padding:10px 12px;font-size:13px}.danger{background:var(--gevaar);color:white}.empty{text-align:center;color:var(--tekst-zacht);padding:40px}
.obs{background:transparent;overflow:hidden}.obsbar{position:absolute;left:25px;bottom:25px;min-width:500px;background:#111d;border:1px solid #ffffff26;border-left:5px solid var(--hoofdkleur);border-radius:18px;padding:14px 22px;display:flex;gap:16px;align-items:center}.obsbar img{width:80px;height:80px;border-radius:50%;object-fit:cover}.obsbar b,.obsbar strong,.obsbar span{display:block}.obsbar b{color:var(--hoofdkleur);font-size:13px}.obsbar strong{font-size:25px}.obsbar span{color:#d2d7e0;margin-top:3px}
.account-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.account-actions form{display:flex;gap:8px;align-items:center;margin:0}.inline-input{width:190px;margin:0;padding:10px}.account-actions .small{white-space:nowrap}
@media(max-width:650px){.grid{grid-template-columns:1fr}header,.request{align-items:stretch;flex-direction:column}.actions{flex-wrap:wrap}.actions form{flex:1}.small{width:100%}.brand{font-size:24px}.account-actions,.account-actions form{width:100%;flex-direction:column}.inline-input,.account-actions .small{width:100%}}


.offline{display:inline-block;background:#3a1115;color:#ff7b86;border:1px solid #8b2730;padding:7px 12px;border-radius:999px;font-weight:800}.obs-offline{font-size:clamp(28px,5vw,72px);font-weight:900;text-align:center;padding:24px;color:#ff7b86;background:#120507;border:2px solid #8b2730;border-radius:18px;margin:20px}

/* DJ-foto upload voorbeeld */
.photo-preview-wrap{display:flex;align-items:center;gap:14px;margin:10px 0 18px;min-height:72px}
.photo-preview{width:72px;height:72px;object-fit:cover;border-radius:50%;border:3px solid var(--hoofdkleur);background:var(--kaart-donker)}
.photo-name{color:var(--tekst-zacht);font-size:14px;word-break:break-all}