/* Beheerpagina (/beheer/). Gebruikt de kleuren en knoppen van style.css. */

body.beheer { background: var(--sand); }

.beheer-kop { background: var(--paper); border-bottom: 1px solid var(--line); }
.beheer-kop .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.beheer-titel { color: var(--muted); font-weight: 600; padding-left: 20px; border-left: 1px solid var(--line); }
.beheer-links { margin-left: auto; display: flex; gap: 20px; }
.beheer-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.beheer-links a:hover { color: var(--red); }

.beheer-inhoud { padding-top: 36px; padding-bottom: 80px; max-width: 900px; }
.beheer-inhoud h1 { font-size: 2rem; margin: 0 0 12px; }
.beheer-inhoud h2 { font-size: 1.2rem; margin: 0 0 14px; }

.kaart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.kaart.inloggen { max-width: 420px; margin: 40px auto; }

.beheer label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.beheer label .opt { color: var(--muted); font-weight: 500; }
.beheer input:not([type=checkbox]):not([type=file]), .beheer select, .beheer textarea { width: 100%; font: inherit; padding: .8em 1em; border: 1px solid #cfcbc4; border-radius: 8px; background: #fff; margin-bottom: 16px; }
.beheer input:focus, .beheer select:focus, .beheer textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.beheer textarea { min-height: 140px; resize: vertical; margin-bottom: 0; }
.beheer label.vinkje { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0 0 20px; }
.beheer label.vinkje input { width: auto; margin: 0; flex: none; }
.beheer .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hulp, .klein { color: var(--muted); font-size: .92rem; margin: 0; }
.klein { margin-top: 16px; }
.terug { margin: 0 0 8px; }
.terug a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }

.melding { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.melding.ok { background: #eaf5ec; border: 1px solid #b9dcc0; color: #1f5a2b; }
.melding.fout { background: #fdecec; border: 1px solid #f2b8b8; color: #8c1d1d; }
.melding a, .melding .link { color: inherit; font: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.melding form.inline { display: inline; margin: 0; }

.kop-met-knop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kop-met-knop h1 { margin: 0; }
.kop-met-knop + .hulp { margin: 8px 0 20px; }

.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lijst li { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 10px 10px; }
.lijst img, .lijst .geen-foto { width: 84px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; background: var(--sand); }
.lijst .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lijst .tekst span { color: var(--muted); font-size: .92rem; }
.lijst .knoppen { display: flex; gap: 8px; flex: none; }
.lijst .knoppen form { margin: 0; }
.btn.klein { padding: .5em 1em; font-size: .92rem; }
.btn.verwijder { border-color: #e8b4b4; color: var(--red); background: #fff; }
.btn.verwijder:hover { background: var(--red); border-color: var(--red); color: #fff; }

.beheer label.sleepvak { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed #cfcbc4; border-radius: 8px; padding: 26px 18px; text-align: center; color: var(--ink-soft); cursor: pointer; margin-bottom: 16px; }
.sleepvak strong { color: var(--red); }
.sleepvak small { color: var(--muted); font-weight: 500; }
.sleepvak:hover, .sleepvak.over, .sleepvak:focus-within { border-color: var(--red); background: #fffafa; }
.sleepvak input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.fotos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.fotos li { position: relative; border-radius: 8px; overflow: hidden; background: var(--sand); aspect-ratio: 1; }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos li:first-child:not(.laden)::before { content: "Hoofdfoto"; position: absolute; left: 6px; top: 6px; background: var(--red); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.fotos .knoppen { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.fotos .knoppen button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.fotos .knoppen button[data-doe=weg] { color: var(--red); }
.fotos li:first-child .knoppen button[data-doe=links], .fotos li:last-child .knoppen button[data-doe=rechts] { visibility: hidden; }
.fotos li.laden { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.voortgang { margin: 8px 0 0; color: var(--red); font-weight: 600; min-height: 1.2em; }

.acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 640px) {
  .beheer-titel { display: none; }
  .beheer-links { gap: 14px; font-size: .95rem; }
  .beheer .twee { grid-template-columns: 1fr; gap: 0; }
  .lijst li { flex-wrap: wrap; }
  .lijst .knoppen { width: 100%; }
  .lijst .knoppen > * { flex: 1; }
  .lijst .knoppen .btn { width: 100%; justify-content: center; }
  .acties .btn { flex: 1; justify-content: center; }
}