/* Beheerpaneel — zelfde tokens als de publieke site, sober toegepast. */

.admin-body { background: var(--kleur-muted); }

.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 780px) {
  .admin-layout { grid-template-columns: 1fr; }
}

.admin-sidebar {
  background: var(--kleur-voorgrond);
  color: var(--kleur-accent-voorgrond);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  border-right: var(--rand-dikte) solid var(--kleur-voorgrond);
}
.admin-sidebar .brand--admin .brand__naam { color: var(--kleur-accent-voorgrond); }
.admin-nav { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 2rem; }
.admin-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: #D9C4AC;
}
.admin-nav a:hover { background: #5A4530; color: var(--kleur-accent-voorgrond); }
.admin-nav a.is-actief { background: var(--kleur-accent); color: var(--kleur-accent-voorgrond); font-weight: 700; }

/* Rood meldingsbolletje: aantal nieuwe/ongelezen items per sidebar-onderdeel. */
.admin-nav__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: var(--kleur-accent);
  color: var(--kleur-accent-voorgrond);
  font-size: var(--tekst-xs);
  font-weight: 800;
  line-height: 1;
}
/* Op de actieve link is de achtergrond zelf al accentkleur — dan het bolletje
   omkeren zodat het niet in de link verdwijnt. */
.admin-nav a.is-actief .admin-nav__badge { background: var(--kleur-accent-voorgrond); color: var(--kleur-accent); }

.admin-sidebar__onder { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.5rem; }
.admin-sidebar__link { font-size: var(--tekst-sm); color: #B89B7C; }
.admin-sidebar__link:hover { color: var(--kleur-accent-voorgrond); }

.admin-main { padding: 2rem 2.5rem 4rem; max-width: 1100px; }
@media (max-width: 640px) { .admin-main { padding: 1.5rem 1.25rem 3rem; } }

.admin-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-kop h1 { font-size: var(--tekst-2xl); margin: 0; }

/* Statistiekkaarten dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.stat-kaart {
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 5px 5px 0px var(--kleur-rand);
}
.stat-kaart__getal { font-family: var(--font-kop); font-size: var(--tekst-3xl); font-weight: 800; }
.stat-kaart__label { color: var(--kleur-muted-voorgrond); font-weight: 500; }

/* Login */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.login-kaart {
  width: 100%;
  max-width: 24rem;
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 8px 8px 0px var(--kleur-accent);
}

/* Tabellen */
.tabel-wrap { overflow-x: auto; background: var(--kleur-kaart); border: var(--rand-dikte) solid var(--kleur-voorgrond); border-radius: var(--radius-md); box-shadow: 5px 5px 0px var(--kleur-rand); }
table.data-tabel { width: 100%; border-collapse: collapse; min-width: 520px; }
.data-tabel th, .data-tabel td { text-align: left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--kleur-rand); vertical-align: top; }
.data-tabel th { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--kleur-muted-voorgrond); }
.data-tabel tr:last-child td { border-bottom: none; }
.data-tabel .acties { display: flex; gap: 0.75rem; white-space: nowrap; }
.data-tabel .acties a, .data-tabel .acties button { font-weight: 700; font-size: var(--tekst-sm); background: none; border: none; cursor: pointer; color: var(--kleur-accent); padding: 0; font-family: inherit; }
.data-tabel .acties .verwijder { color: var(--kleur-secundair); }

.leeg-bericht { padding: 3rem 1.5rem; text-align: center; color: var(--kleur-muted-voorgrond); }

/* Fotobeheer */
.foto-beheer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.foto-beheer-item {
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 5px 5px 0px var(--kleur-rand);
  position: relative;
}
.foto-beheer-item:has(.foto-beheer-item__kies:checked) { border-color: var(--kleur-accent); box-shadow: 5px 5px 0px var(--kleur-accent); }
.foto-beheer-item__beeld { display: block; cursor: pointer; }
.foto-beheer-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.foto-beheer-item__kies {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--kleur-accent);
}
.foto-beheer-item__onder { padding: 0.85rem 1rem; }
.foto-beheer-item__onder p { margin: 0 0 0.4rem; font-size: var(--tekst-sm); }
.foto-beheer-item__album { color: var(--kleur-muted-voorgrond); font-weight: 500; }

/* Filter op album + acties op de selectie */
.filter-balk { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 1.25rem; }
.bulk-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-md);
  box-shadow: 5px 5px 0px var(--kleur-rand);
}
.bulk-balk__alles { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--tekst-sm); cursor: pointer; }
.bulk-balk__alles input { accent-color: var(--kleur-accent); width: 1.15rem; height: 1.15rem; }
.bulk-balk select { border: var(--rand-dikte) solid var(--kleur-voorgrond); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-family: var(--font-body); background: var(--kleur-input); max-width: 100%; }
.bulk-balk .verwijder { font-weight: 700; font-size: var(--tekst-sm); background: none; border: none; cursor: pointer; color: var(--kleur-secundair); padding: 0.5rem 0; font-family: inherit; margin-left: auto; }

/* Sponsorbeheer — alle logo's in hetzelfde vak (3:2), zoals op de publieke site */
.sponsor-beheer-logo { width: 5rem; aspect-ratio: 3 / 2; object-fit: contain; display: block; }
.sponsor-beheer-voorbeeld { width: 9rem; aspect-ratio: 3 / 2; object-fit: contain; display: block; margin-bottom: 0.75rem; background: var(--kleur-kaart); border: var(--rand-dikte) solid var(--kleur-voorgrond); border-radius: var(--radius-sm); }

/* Albumbeheer */
.album-beheer-omslag { width: 5rem; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: var(--rand-dikte) solid var(--kleur-voorgrond); border-radius: var(--radius-sm); }

.kaart-formulier {
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: 5px 5px 0px var(--kleur-rand);
  max-width: 42rem;
}

.detail-kaart {
  background: var(--kleur-kaart);
  border: var(--rand-dikte) solid var(--kleur-voorgrond);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  box-shadow: 5px 5px 0px var(--kleur-rand);
  margin-bottom: 1.25rem;
}
.detail-kaart__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.detail-kaart dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-size: var(--tekst-sm); }
.detail-kaart dt { color: var(--kleur-muted-voorgrond); font-weight: 700; }
.detail-kaart dd { margin: 0; }
.status-form { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.status-form select { border: var(--rand-dikte) solid var(--kleur-voorgrond); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-family: var(--font-body); }