/* ============================================================
   Admin panel stijlen — Arnout Timmerman portfolio
   Systeem-fontstack, geen externe afhankelijkheden.
   ============================================================ */

/* ── Variabelen ───────────────────────────────────────────── */
:root {
  --rood:   #E03A3A;
  --blauw:  #2B5EA7;
  --geel:   #D4A017;
  --groen:  #2E8B57;

  --rood-licht:  #fdf0f0;
  --blauw-licht: #f0f4fc;
  --geel-licht:  #fdf8ec;
  --groen-licht: #f0f7f4;

  --wit:          #ffffff;
  --achtergrond:  #f5f6f8;
  --rand:         #e2e5ea;
  --rand-sterk:   #c8cdd5;
  --tekst:        #1a1d23;
  --tekst-licht:  #6b7280;
  --tekst-fijn:   #9ca3af;

  --nav-hoog:   60px;
  --radius:     8px;
  --radius-lg:  12px;
  --schaduw:    0 1px 4px rgba(0,0,0,.08);
  --schaduw-md: 0 4px 16px rgba(0,0,0,.10);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* ── Reset / basis ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: var(--font);
  background: var(--achtergrond);
  color: var(--tekst);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--blauw); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigatie ────────────────────────────────────────────── */
.admin-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-hoog);
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
  box-shadow: var(--schaduw);
}

.admin-nav__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tekst);
  font-weight: 600;
}

.admin-nav__initialen {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--blauw);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.admin-nav__naam { font-size: 15px; }

.admin-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-nav__link {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--tekst-licht);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.admin-nav__link:hover,
.admin-nav__link.is-actief {
  background: var(--achtergrond);
  color: var(--tekst);
  text-decoration: none;
}

.admin-nav__link--site  { color: var(--blauw); }
.admin-nav__link--uitloggen { color: var(--rood); }
.admin-nav__link--uitloggen:hover { background: var(--rood-licht); }

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── Paginakop ────────────────────────────────────────────── */
.paneel-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.paginatitel {
  font-size: 22px;
  font-weight: 700;
  color: var(--tekst);
  line-height: 1.2;
}

.paginasubtitel {
  font-size: 14px;
  color: var(--tekst-licht);
  margin-top: 4px;
}

/* ── Knoppen ──────────────────────────────────────────────── */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
  line-height: 1;
}

.knop--primair {
  background: var(--blauw);
  color: #fff;
  border-color: var(--blauw);
}
.knop--primair:hover { background: #1e4a8a; border-color: #1e4a8a; text-decoration: none; color: #fff; }

.knop--secundair {
  background: var(--wit);
  color: var(--tekst);
  border-color: var(--rand-sterk);
}
.knop--secundair:hover { background: var(--achtergrond); text-decoration: none; color: var(--tekst); }

.knop--gevaar {
  background: var(--wit);
  color: var(--rood);
  border-color: #f0c0c0;
}
.knop--gevaar:hover { background: var(--rood-licht); border-color: var(--rood); text-decoration: none; color: var(--rood); }

.knop--ghost {
  background: transparent;
  color: var(--tekst-licht);
  border-color: transparent;
}
.knop--ghost:hover { background: var(--achtergrond); color: var(--tekst); text-decoration: none; }

.knop--klein  { padding: 5px 11px; font-size: 13px; }
.knop--groot  { padding: 12px 28px; font-size: 15px; }
.knop--volledig { width: 100%; }

/* ── Statistieken ─────────────────────────────────────────── */
.stat-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.stat-rij--types { margin-bottom: 28px; }

.stat-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top-width: 3px;
}

.stat-kaart--rood   { border-top-color: var(--rood);  }
.stat-kaart--blauw  { border-top-color: var(--blauw); }
.stat-kaart--geel   { border-top-color: var(--geel);  }
.stat-kaart--groen  { border-top-color: var(--groen); }
.stat-kaart--type   { border-top-color: var(--rand-sterk); }

.stat-kaart__getal {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--tekst);
}

.stat-kaart__label {
  font-size: 13px;
  color: var(--tekst-licht);
  text-transform: capitalize;
}

/* ── Toolbar ──────────────────────────────────────────────── */
.tabel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.zoek-invoer {
  padding: 8px 12px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  width: 220px;
  background: var(--wit);
}
.zoek-invoer:focus { outline: 2px solid var(--blauw); border-color: transparent; }

.filter-select {
  padding: 8px 10px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  background: var(--wit);
  cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--blauw); border-color: transparent; }

.tabel-teller {
  font-size: 13px;
  color: var(--tekst-fijn);
  white-space: nowrap;
}

/* ── Tabel ────────────────────────────────────────────────── */
.tabel-omhulsel {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schaduw);
  overflow-x: auto;
}

.items-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.items-tabel thead {
  background: var(--achtergrond);
  border-bottom: 1px solid var(--rand);
}

.items-tabel th {
  text-align: left;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-licht);
  white-space: nowrap;
}

.items-tabel td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

.items-tabel tbody tr:last-child td { border-bottom: none; }

.items-tabel tbody tr:hover { background: #fafbfc; }

.tabel-titel {
  max-width: 280px;
}

.item-link {
  font-weight: 500;
  color: var(--tekst);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-link:hover { color: var(--blauw); text-decoration: underline; }

.item-id {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tekst-fijn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.tabel-acties {
  white-space: nowrap;
}

.tabel-acties .knop {
  vertical-align: middle;
}

.tabel-ster { text-align: center; font-size: 16px; }
.ster-leeg  { color: var(--rand-sterk); }

.tabel-leeg {
  text-align: center;
  color: var(--tekst-fijn);
  padding: 48px 16px !important;
  font-size: 14px;
}

.verwijder-form {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Thema-badges ─────────────────────────────────────────── */
.thema-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.thema-badge__stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.thema-badge--rood  { background: var(--rood-licht);  color: var(--rood);  }
.thema-badge--rood  .thema-badge__stip { background: var(--rood);  }
.thema-badge--blauw { background: var(--blauw-licht); color: var(--blauw); }
.thema-badge--blauw .thema-badge__stip { background: var(--blauw); }
.thema-badge--geel  { background: var(--geel-licht);  color: #a07800;      }
.thema-badge--geel  .thema-badge__stip { background: var(--geel);  }
.thema-badge--groen { background: var(--groen-licht); color: var(--groen); }
.thema-badge--groen .thema-badge__stip { background: var(--groen); }

/* ── Type-badges ──────────────────────────────────────────── */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  background: var(--achtergrond);
  color: var(--tekst-licht);
  border: 1px solid var(--rand);
  text-transform: capitalize;
}

.type-badge--foto    { background: #f0f7ff; color: #2563eb; border-color: #c3d9f7; }
.type-badge--pdf     { background: #fff5f5; color: #dc2626; border-color: #fcc; }
.type-badge--video   { background: #f5f0ff; color: #7c3aed; border-color: #d8c0f8; }
.type-badge--podcast { background: #f0fdf4; color: #16a34a; border-color: #b9e8c8; }

/* ── Meldingen ────────────────────────────────────────────── */
.melding {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}

.melding--succes { background: var(--groen-licht); color: var(--groen); border: 1px solid #b2dfcc; }
.melding--fout   { background: var(--rood-licht);  color: var(--rood);  border: 1px solid #f0c0c0; }
.melding--info   { background: var(--blauw-licht); color: var(--blauw); border: 1px solid #b8cef0; }

/* ── Loginpagina ──────────────────────────────────────────── */
.login-pagina {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-kaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw-md);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.login-logo__initialen {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--blauw);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.login-logo__naam {
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst-licht);
}

.login-titel    { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.login-subtitel { font-size: 14px; color: var(--tekst-licht); margin-bottom: 24px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }

/* ── Formulier ────────────────────────────────────────────── */
.bewerk-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-sectie {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--schaduw);
}

.form-sectie__titel {
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rand);
}

.form-groep {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-groep--checkbox {
  justify-content: center;
  padding-top: 24px;
}

.form-rij {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.form-rij--2 { grid-template-columns: 1fr 1fr; }
.form-rij--4 { grid-template-columns: 1fr 1fr 1fr auto; }

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tekst);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--tekst-fijn);
}

.verplicht { color: var(--rood); }

.form-invoer {
  padding: 9px 12px;
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 14px;
  color: var(--tekst);
  background: var(--wit);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.form-invoer:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgba(43,94,167,.15);
}

.form-invoer[readonly] {
  background: var(--achtergrond);
  color: var(--tekst-licht);
  cursor: default;
}

.form-select { cursor: pointer; }

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font);
  line-height: 1.5;
}

.form-textarea--klein  { min-height: 56px;  rows: 2; }
.form-textarea--galerij { font-family: var(--font-mono); font-size: 12px; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--blauw);
  cursor: pointer;
}

/* Upload rij */
.upload-rij {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-rij .form-invoer { flex: 1; }

.upload-zijbalk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  min-width: 140px;
}

.upload-tip {
  font-size: 11px;
  color: var(--tekst-fijn);
  line-height: 1.4;
}

.verborgen-upload { display: none !important; }

.cover-preview {
  margin-top: 10px;
  width: 100%;
  max-width: 260px;
}

.cover-preview__img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  display: block;
}

/* Form acties */
.form-acties {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0 0;
}

/* ── Responsief ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 20px 16px 48px; }

  .admin-nav__naam  { display: none; }
  .admin-nav__link  { padding: 6px 8px; font-size: 13px; }

  .form-rij--2,
  .form-rij--4 { grid-template-columns: 1fr; }

  .paneel-kop { flex-direction: column; align-items: stretch; }
  .paneel-kop .knop { text-align: center; }

  .tabel-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-form  { flex-direction: column; }
  .zoek-invoer   { width: 100%; }

  .login-kaart { padding: 28px 20px; }

  .upload-rij  { flex-wrap: wrap; }
  .upload-zijbalk { padding-left: 0; min-width: 100%; }
}