/* ===========================================================
   ReJo Radio — beheerpaneel, in de huisstijl van de site
   =========================================================== */
:root{
  --oranje:#FF5F01;
  --oranje-dark:#D94E00;
  --zij:#1d1d1d;
  --zij-actief:#2a2a2a;
  --tekst:#333;
  --muted:#777;
  --line:#e6e6e6;
  --bg:#f4f4f5;
  --wit:#fff;
  --groen:#2e9e4f;
  --rood:#cf2e2e;
  --radius:5px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--tekst);
  font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Roboto',Helvetica,Arial,sans-serif;margin:0;line-height:1.25;color:#1d1d1b}
a{color:var(--oranje);text-decoration:none}
a:hover{color:var(--oranje-dark)}
table{width:100%;border-collapse:collapse}
img{max-width:100%}

/* ---------- Raamwerk ---------- */
.beheer{display:flex;min-height:100vh}
.zij{
  width:232px;flex-shrink:0;background:var(--zij);color:#fff;
  display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.zij .merk{
  font-family:'Roboto',sans-serif;font-weight:900;font-size:21px;
  padding:0 22px 20px;letter-spacing:.3px;
}
.zij .merk .re{color:var(--oranje)}
.zij .merk-sub{font-weight:400;font-size:13px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:1.5px}
.zij a{
  display:flex;align-items:center;gap:12px;
  padding:11px 22px;color:rgba(255,255,255,.78);font-size:14px;font-weight:600;
  border-left:3px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.zij a:hover{background:var(--zij-actief);color:#fff}
.zij a.actief{background:var(--zij-actief);color:#fff;border-left-color:var(--oranje)}
.zij a .ico{width:19px;height:19px;flex-shrink:0}
.zij a .teller{
  margin-left:auto;background:var(--oranje);color:#fff;font-size:11px;font-weight:700;
  min-width:20px;text-align:center;border-radius:10px;padding:1px 6px;
}
.zij .onder{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.hoofd{flex:1;padding:28px 34px 60px;min-width:0;max-width:1500px}

/* ---------- Koppen ---------- */
.kop,.inhoud-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.kop h1,.inhoud-kop h1{font-size:27px;font-weight:700}
.inhoud-kop p{margin:4px 0 0;color:var(--muted);max-width:60ch}
.k-sub{color:var(--muted);font-size:13px;font-weight:400}
.kaart h2,.paneel-kop h2{font-size:17px;font-weight:700;margin-bottom:2px}

/* ---------- KPI's ---------- */
.kpi-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:18px}
.kpi{
  background:var(--wit);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease;
}
a.kpi:hover{border-color:var(--oranje);transform:translateY(-2px)}
.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.kpi .cijfer{font-family:'Roboto',sans-serif;font-size:30px;font-weight:900;line-height:1.1}
.kpi .cijfer.accent{color:var(--oranje)}

.live-pil{
  display:inline-flex;align-items:center;gap:8px;background:var(--wit);
  border:1px solid var(--line);border-radius:30px;padding:7px 15px;font-size:13px;white-space:nowrap;
}
.live-pil b{color:var(--oranje)}
.live-pil .stip{width:8px;height:8px;border-radius:50%;background:var(--oranje);animation:pols 1.6s ease-in-out infinite}
@keyframes pols{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,95,1,.55)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(255,95,1,0)}}

/* ---------- Kaarten & panelen ---------- */
.kaart,.paneel{background:var(--wit);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.paneel{padding:0;overflow:hidden}
.paneel-kop{padding:16px 20px;border-bottom:1px solid var(--line)}
.paneel-body{padding:20px}
.paneel-voet{padding:14px 20px;border-top:1px solid var(--line);background:#fafafa;display:flex;gap:10px;justify-content:flex-end}
.rooster{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.twee-kolom{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;background:#f0f0f0;border-radius:30px;padding:3px}
.tabs button{
  border:0;background:none;padding:6px 15px;border-radius:30px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--muted);transition:background .2s ease,color .2s ease;
}
.tabs button.actief{background:var(--oranje);color:#fff}

/* ---------- Tabellen ---------- */
thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid #f2f2f2;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafafa}
tbody tr.gedimd{opacity:.55}
.td-titel{display:block;font-weight:700;color:#1d1d1b}
.td-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ip{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)}
.chip{display:inline-block;background:#f2f2f2;border-radius:4px;padding:2px 8px;font-size:12px;color:var(--muted)}
.leeg-cel{color:var(--muted)}
.mini-thumb{
  display:block;width:44px;height:44px;border-radius:4px;
  background:#eee center/cover no-repeat;flex-shrink:0;
}
.hit-pos{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
  background:var(--oranje);color:#fff;border-radius:4px;font-family:'Roboto',sans-serif;font-weight:900;
}
.beweging{font-weight:700}
.beweging.op{color:var(--groen)}
.beweging.neer{color:var(--rood)}
.beweging.gelijk{color:var(--muted)}
.badge{display:inline-block;background:#eee;color:#555;border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:700}
.badge.groen{background:rgba(46,158,79,.13);color:var(--groen)}
.badge.oranje{background:rgba(255,95,1,.13);color:var(--oranje-dark)}
.acties{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.acties form{margin:0}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 17px;border-radius:4px;border:2px solid transparent;cursor:pointer;
  font-family:'Roboto',sans-serif;font-weight:600;font-size:14px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn .ico{width:17px;height:17px}
.btn-primair{background:var(--oranje);border-color:var(--oranje);color:#fff}
.btn-primair:hover{background:var(--oranje-dark);border-color:var(--oranje-dark);color:#fff}
.btn-lijn{border-color:var(--line);background:var(--wit);color:var(--tekst)}
.btn-lijn:hover{border-color:var(--oranje);color:var(--oranje)}
.btn-rood{border-color:var(--line);background:var(--wit);color:var(--rood)}
.btn-rood:hover{background:var(--rood);border-color:var(--rood);color:#fff}
.btn-klein{padding:6px 11px;font-size:13px}

/* ---------- Formulieren ---------- */
.veld{margin-bottom:16px;display:flex;flex-direction:column}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld label{font-weight:600;font-size:13px;margin-bottom:6px;color:#1d1d1b}
.hint{font-weight:400;color:var(--muted);font-size:12px}
.veld input,.veld textarea,.veld select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  font:inherit;background:var(--wit);color:var(--tekst);
}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,95,1,.12)}
.veld input[type=color]{padding:3px;height:42px;cursor:pointer}
.veld input[type=file]{padding:8px;background:#fafafa}
.keuze{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;cursor:pointer}
.keuze input{width:auto;margin:0}
.foto-voor{margin-bottom:10px}
.foto-voor img{max-height:150px;border-radius:4px;border:1px solid var(--line)}
.foto-voor .mini{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400;color:var(--muted);margin-top:7px}
.foto-voor .mini input{width:auto}
.rij-form{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.rij-form input{flex:1;min-width:130px;padding:9px 11px;border:1px solid var(--line);border-radius:4px;font:inherit}
.rij-form input:focus{outline:none;border-color:var(--oranje)}
.week-paneel{margin-bottom:18px}
.week-paneel .veld-rij{grid-template-columns:260px auto}

/* ---------- Meldingen & leegte ---------- */
.melding{padding:12px 16px;border-radius:4px;font-weight:600;font-size:13.5px}
.melding.ok{background:rgba(46,158,79,.1);color:var(--groen);border:1px solid rgba(46,158,79,.25)}
.melding.fout{background:rgba(207,46,46,.08);color:var(--rood);border:1px solid rgba(207,46,46,.25)}
.leeg{padding:50px 20px;text-align:center;color:var(--muted)}
.leeg .ico{width:38px;height:38px;color:#ccc;margin-bottom:10px}
.leeg p{margin:0}
.uitleg{color:var(--muted);font-size:13px;margin:0 0 10px}
.code{
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:#1d1d1d;color:#eee;
  padding:11px 13px;border-radius:4px;overflow-x:auto;margin:0 0 10px;
}
code{background:#f2f2f2;padding:1px 5px;border-radius:3px;font-size:12.5px}
.lijst-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f2f2f2}
.lijst-item:last-child{border-bottom:0}
.lijst-item .info{flex:1;min-width:0}
.lijst-item form{margin:0}

/* ---------- Balkjes (landen / pagina's) ---------- */
.landen{list-style:none;margin:12px 0 0;padding:0}
.landen li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.landen .vlag{font-size:17px}
.landen .naam{min-width:96px}
.landen .bar{flex:1;height:7px;background:#f0f0f0;border-radius:4px;overflow:hidden}
.landen .bar i{display:block;height:100%;background:var(--oranje);border-radius:4px}
.landen .n{font-weight:700;min-width:34px;text-align:right}

/* ---------- Inloggen ---------- */
.inlog-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--zij);padding:24px}
.inlog-kaart{
  background:var(--wit);border-radius:8px;padding:34px 32px;width:100%;max-width:390px;
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}
.inlog-logo{display:block;height:52px;width:auto;margin:0 auto 20px}
.inlog-kaart h1{font-size:25px;text-align:center;margin-bottom:5px}
.inlog-kaart .sub{text-align:center;color:var(--muted);font-size:13.5px;margin:0 0 20px}
.inlog-kaart label{display:block;font-weight:600;font-size:13px;margin-bottom:14px}
.inlog-kaart input{
  width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:4px;font:inherit;
}
.inlog-kaart input:focus{outline:none;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,95,1,.12)}
.inlog-kaart .btn{width:100%;justify-content:center;margin-top:6px}
.inlog-kaart .melding{margin-bottom:14px}
.terug{text-align:center;margin:18px 0 0;font-size:13px}
.terug a{color:var(--muted)}
.terug a:hover{color:var(--oranje)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .rooster,.twee-kolom{grid-template-columns:1fr}
}
@media (max-width:860px){
  .beheer{flex-direction:column}
  .zij{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding:12px;gap:4px}
  .zij .merk{width:100%;padding:0 10px 10px}
  .zij a{padding:8px 12px;border-left:0;border-bottom:3px solid transparent;border-radius:4px}
  .zij a.actief{border-left:0;border-bottom-color:var(--oranje)}
  .zij .onder{margin-top:0;padding-top:0;border-top:0;display:flex;width:100%}
  .hoofd{padding:20px 16px 50px}
  .veld-rij,.week-paneel .veld-rij{grid-template-columns:1fr}
}

/* ---------- Media-pagina ---------- */
.media-veld label{display:flex;align-items:center;gap:9px}
.media-merk{display:inline-flex;width:20px;height:20px;color:var(--oranje)}
.media-merk .merk-ico{width:100%;height:100%}