/* Beheer-pagina (admin.php). Eigen compacte stylesheet, los van het
   rp- design-systeem van de app (css/style.css). Verplaatst uit het
   inline <style>-blok van admin.php. */
:root {
  /* Het palet en de schalen komen uit css/tokens.css. Hier alleen wat van het beheer is. */
  --violet:#6b4fa1; --violet-tint:#ece4f6;   /* rol-badge Beheerder */
  /* Bewust anders dan de app: het beheer is een rustiger werkscherm met een vlakkere
     schaduw onder panelen. */
  --shadow:0 6px 20px rgba(60,50,30,.05);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); font-family:var(--font); color:var(--ink); }
h1,h2 { font-family:var(--font-display); }
.muted { color:var(--ink-3); }
.hidden { display:none !important; }
a { color:var(--sea); }
[data-lucide] { width:18px; height:18px; stroke-width:2; }

/* ── Login-kaart ─────────────────────────── */
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-24); }
.card { width:100%; max-width:380px; background:var(--surface); border:var(--lijn) solid var(--line); border-radius:var(--radius); padding:30px var(--sp-28); box-shadow:0 10px 40px rgba(60,50,30,.08); }
.card label { display:block; font-size:var(--fs-13); font-weight:600; margin:var(--sp-14) 0 var(--sp-4); }
.card input { width:100%; padding:var(--sp-10) var(--sp-12); border:var(--lijn) solid var(--line); border-radius:var(--radius-xs); font:inherit; font-size:var(--fs-14); background:var(--surface-2);
  transition:border-color var(--transition) var(--ease), box-shadow var(--transition) var(--ease), background-color var(--transition) var(--ease); }
.card input:focus { outline:none; border-color:var(--sea); background:var(--surface); box-shadow:0 0 0 3px var(--sea-tint); }
.err { margin-top:var(--sp-12); font-size:var(--fs-13); color:var(--danger); min-height:18px; }

/* ── Knoppen (zelfde verloop-taal als .rp-btn.is-primary in de app) ── */
.btn { display:inline-flex; align-items:center; gap:var(--sp-6); border:var(--lijn) solid var(--sea-600); border-radius:var(--radius-xs);
  background:linear-gradient(180deg, color-mix(in srgb, var(--sea) 86%, white) 0%, var(--sea) 55%, var(--sea-600) 100%);
  color:var(--on-accent); font:inherit; font-weight:700; font-size:var(--fs-14); cursor:pointer; padding:var(--sp-8) var(--sp-14);
  box-shadow:inset 0 1px 0 var(--dark-3), 0 2px 8px color-mix(in srgb, var(--sea) 30%, transparent); }
@media (hover: hover) { .btn:hover { background:linear-gradient(180deg, var(--sea) 0%, var(--sea-600) 100%); } }
.btn.ghost { background:transparent; color:var(--sea); border:var(--lijn) solid var(--line); box-shadow:none; }
@media (hover: hover) { .btn.ghost:hover { background:var(--surface-2); } }
.btn.sm { padding:var(--sp-6) var(--sp-10); font-size:var(--fs-13); }
.btn.danger { background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 88%, white) 0%, var(--danger) 60%, var(--danger-hover) 100%); border-color:var(--danger-hover);
  box-shadow:inset 0 1px 0 var(--dark-3), 0 2px 8px color-mix(in srgb, var(--danger) 30%, transparent); }
@media (hover: hover) { .btn.danger:hover { background:linear-gradient(180deg, var(--danger) 0%, var(--danger-hover) 100%); } }
.btn:disabled { opacity:.4; cursor:default; pointer-events:none; }
.btn [data-lucide] { width:15px; height:15px; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:var(--btn-sm); height:var(--btn-sm); padding:0; border:var(--lijn) solid var(--line); border-radius:var(--radius-xs); background:var(--surface); color:var(--ink-2); cursor:pointer; }
@media (hover: hover) { .iconbtn:hover { color:var(--ink); background:var(--surface-2); } }
.iconbtn [data-lucide] { width:16px; height:16px; }

/* ── App-shell: sidebar + main ───────────── */
.admin-shell { display:flex; min-height:100vh; }
.ad-side { width:var(--sidebar-w); flex:0 0 var(--sidebar-w); color:var(--on-dark); display:flex; flex-direction:column; padding:var(--sp-22) var(--sp-16) var(--sp-16);
  background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.14) 100%), var(--sidebar); }
.rp-brand { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-4) var(--sp-8) var(--sp-18); }
.rp-brand-mark { width:34px; height:34px; border-radius:var(--radius-sm); flex:0 0 34px; background:linear-gradient(150deg,var(--sea) 0%,var(--sea-600) 100%); display:flex; align-items:center; justify-content:center; color:var(--on-accent);
  box-shadow:inset 0 1px 0 var(--dark-3), 0 4px 10px rgba(0,0,0,.35); }
.rp-brand-name { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); letter-spacing:-.02em; }
.rp-brand-sub { font-size:var(--fs-12); color:var(--on-dark-2); }
.ad-side-label { font-size:var(--fs-11); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-2); padding:0 var(--sp-8); margin:var(--sp-18) 0 var(--sp-8); }
.ad-nav { display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-10) var(--sp-10); border-radius:var(--radius-sm); cursor:pointer; color:var(--on-dark-2); margin-bottom:var(--sp-2); width:100%; background:transparent; border:0; text-align:left; font-family:var(--font); font-weight:600; font-size:var(--fs-14); }
@media (hover: hover) { .ad-nav:hover { background:var(--dark-1); } }
.ad-nav.is-active { background:var(--dark-2); color:var(--on-dark); }
.ad-nav [data-lucide] { width:18px; height:18px; flex:0 0 18px; }
.ad-side-foot { margin-top:auto; display:flex; flex-direction:column; gap:var(--sp-8); padding:var(--sp-14) var(--sp-4) var(--sp-4); border-top:var(--lijn) solid var(--dark-2); }
.ad-side-foot a { display:inline-flex; align-items:center; gap:var(--sp-8); color:var(--on-dark-2); font-size:var(--fs-13); font-weight:600; text-decoration:none; padding:var(--sp-6) var(--sp-6); border-radius:var(--radius-sm); }
@media (hover: hover) { .ad-side-foot a:hover { color:var(--on-dark); background:var(--dark-1); } }
.ad-logout { display:inline-flex; align-items:center; gap:var(--sp-8); background:var(--sidebar-2); border:var(--lijn) solid var(--dark-2); border-radius:var(--radius-sm); color:var(--on-dark-2); cursor:pointer; font:inherit; font-weight:600; font-size:var(--fs-13); padding:var(--sp-8) var(--sp-10); }
@media (hover: hover) { .ad-logout:hover { color:var(--on-dark); border-color:var(--dark-4); } }
.ad-logout [data-lucide] { width:16px; height:16px; }
/* Inklap-knop + icoon-rail */
.rp-brand-text { min-width:0; }
.ad-collapse { margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:var(--btn-xs); height:var(--btn-xs); border:0; border-radius:var(--radius-xs); background:transparent; color:var(--on-dark-2); cursor:pointer; }
@media (hover: hover) { .ad-collapse:hover { color:var(--on-dark); background:var(--dark-1); } }
.ad-collapse [data-lucide] { width:18px; height:18px; }
@media (min-width:781px) {
  .ad-side.is-collapsed { width:var(--sidebar-w-rail); flex:0 0 var(--sidebar-w-rail); padding:var(--sp-22) var(--sp-10) var(--sp-16); }
  .ad-side.is-collapsed .rp-brand { flex-direction:column; gap:var(--sp-10); padding:var(--sp-4) 0 var(--sp-14); }
  .ad-side.is-collapsed .rp-brand-text,
  .ad-side.is-collapsed .ad-side-label,
  .ad-side.is-collapsed .ad-nav span,
  .ad-side.is-collapsed .ad-side-foot span { display:none; }
  .ad-side.is-collapsed .ad-collapse { margin:0; }
  .ad-side.is-collapsed .ad-nav { justify-content:center; padding:var(--sp-10) 0; }
  .ad-side.is-collapsed .ad-side-foot { align-items:center; }
  .ad-side.is-collapsed .ad-side-foot a,
  .ad-side.is-collapsed .ad-logout { justify-content:center; }
}

.ad-main { flex:1; min-width:0; overflow:auto; }
.ad-wrap { max-width:940px; margin:0 auto; padding:30px var(--sp-32) 60px; }
.ad-head { margin-bottom:var(--sp-22); }
.ad-head h1 { font-size:var(--fs-page); margin:0 0 var(--sp-4); }
.ad-head p { margin:0; font-size:var(--fs-14); }

/* ── Tabel-toolbar (template-app patroon) ── */
.admin-tbl-toolbar { display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; margin-bottom:var(--sp-14); }
.tbl-actions { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.tbl-filter { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; margin-left:auto; }
.tbl-filter-row { margin-left:0; margin-bottom:var(--sp-12); }
.filter-ic { color:var(--ink-3); opacity:.55; width:15px; height:15px; }
.filter-pill { display:inline-flex; align-items:center; gap:var(--sp-4); border:var(--lijn) solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:var(--sp-4) var(--sp-12); font:inherit; font-size:var(--fs-12-5); font-weight:600; cursor:pointer; }
.filter-pill.active { background:var(--sea); border-color:var(--sea); color:var(--on-accent); }

/* ── Tabellen ────────────────────────────── */
.panel { background:var(--surface); border:var(--lijn) solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-14); }
th, td { text-align:left; padding:var(--sp-12) var(--sp-14); border-bottom:var(--lijn) solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
th { background:var(--surface); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
/* De actiekolom draagt sinds 16-08-2026 TWEE knopjes (bewerken en verwijderen), dus 54px is te
   smal: ze vielen onder elkaar en lijnden niet meer uit met de rijen ernaast. Vandaar de bredere
   kolom plus een flexrij die niet wrapt; `white-space:nowrap` alleen is niet genoeg, want
   inline-flex-knoppen wrappen op de flexregel en niet op de tekst. */
th.col-act, td.col-act { width:86px; text-align:center; padding-left:var(--sp-10); padding-right:var(--sp-6); }
td.col-act { white-space:nowrap; }
td.col-act > .row-quick + .row-quick { margin-left:var(--sp-4); }
tbody tr.selectable { cursor:pointer; }
@media (hover: hover) { tbody tr.selectable:hover { background:var(--surface-2); } }
tbody tr.selected-row { background:var(--sea-tint); }
.row-quick { display:inline-flex; align-items:center; justify-content:center; width:var(--btn-xs); height:var(--btn-xs); padding:0; border:var(--lijn) solid var(--line); border-radius:var(--radius-xs); background:var(--surface); color:var(--sea); cursor:pointer; }
@media (hover: hover) { .row-quick:hover { background:var(--surface-2); } }
.row-quick [data-lucide] { width:15px; height:15px; }
.pill { display:inline-block; padding:var(--sp-2) var(--sp-8); border-radius:999px; font-size:var(--fs-12); font-weight:700; }
.pill.actief { background:var(--sea-tint); color:var(--sea); }
.pill.archief { background:var(--surface-3); color:var(--sun-ink); }
.pill.rol { background:var(--surface-2); color:var(--ink-2); border:var(--lijn) solid var(--line); }
.pill.rol-admin { background:var(--violet-tint); color:var(--violet); }
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
@media (hover: hover) { th.sortable:hover { color:var(--ink); } }
.sort-ic { display:inline-block; width:0; height:0; margin-left:var(--sp-4); vertical-align:middle; }
.sort-ic.asc { border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:5px solid var(--sea); }
.sort-ic.desc { border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--sea); }

/* ── Modals ──────────────────────────────── */
.modal-overlay { position:fixed; inset:0; z-index:400; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:var(--sp-24); -webkit-backdrop-filter:var(--scrim-blur); backdrop-filter:var(--scrim-blur); }
.modal { width:100%; max-width:480px; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; max-height:90vh; }
.modal-header { display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-20) var(--sp-22) var(--sp-14); border-bottom:var(--lijn) solid var(--line); }
.modal-title { font-size:var(--fs-h4); margin:0; flex:1; }
.modal-body { padding:var(--sp-18) var(--sp-22); overflow:auto; }
.modal-footer { display:flex; justify-content:flex-end; gap:var(--sp-10); padding:var(--sp-14) var(--sp-22); border-top:var(--lijn) solid var(--line); }
.form-group { margin-bottom:var(--sp-14); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); }
.form-label { display:block; font-size:var(--fs-13); font-weight:600; margin-bottom:var(--sp-4); }
.form-input, .form-select { width:100%; padding:var(--sp-10) var(--sp-12); border:var(--lijn) solid var(--line); border-radius:var(--radius-xs); font:inherit; font-size:var(--fs-14); background:var(--surface-2);
  transition:border-color var(--transition) var(--ease), box-shadow var(--transition) var(--ease), background-color var(--transition) var(--ease); }
.form-input:focus, .form-select:focus { outline:none; border-color:var(--sea); background:var(--surface); box-shadow:0 0 0 3px var(--sea-tint); }
.form-check { display:flex; align-items:center; gap:var(--sp-8); font-weight:600; font-size:var(--fs-14); cursor:pointer; }
.form-check input { width:auto; }
.req { color:var(--danger); }

/* ── Toast ───────────────────────────────── */
.toast-wrap { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:600; display:flex; flex-direction:column; gap:var(--sp-8); align-items:center; pointer-events:none; }
.toast { background:var(--ink); color:var(--on-accent); padding:var(--sp-10) var(--sp-18); border-radius:var(--radius-sm); font-size:var(--fs-14); font-weight:600; box-shadow:0 10px 30px rgba(42,37,32,.25); }
.toast.err { background:var(--danger); }

/* ── Dev-banner (localhost-waarschuwing, zelfde patroon als templateapp) ── */
.dev-banner {
  background:var(--dev-amber);
  background-image:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.06) 10px, rgba(0,0,0,.06) 20px);
  color:var(--on-accent); height:var(--devbar-h);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-6);
  font-size:var(--fs-12); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  position:sticky; top:0; z-index:9999;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.dev-banner [data-lucide] { width:14px; height:14px; }
body.has-dev-banner .admin-shell { min-height:calc(100vh - var(--devbar-h)); }
body.has-dev-banner .center { min-height:calc(100vh - var(--devbar-h)); }


/* Badge met het aantal open aanvragen (nav-item Aanvragen). */
.req-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 var(--sp-6); border-radius: 999px;
  background: var(--terra); color: var(--on-accent); font-size: var(--fs-11); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ad-side.is-collapsed .req-badge { display: none; }

/* ── Responsive: breed -> smal, zodat een smaller scherm altijd wint. Zelfde
   afspraak als in style.css: media-blokken staan HIER, na alle basisregels, en
   elke breakpoint komt precies EEN keer voor. ── */

@media (max-width:780px) {
  .admin-shell { flex-direction:column; }
  .ad-side { width:100%; flex:none; flex-direction:row; flex-wrap:wrap; align-items:center; padding:var(--sp-14); gap:var(--sp-8); }
  .rp-brand { padding:0 var(--sp-8) 0 0; }
  .ad-side-label { display:none; }
  .ad-nav { width:auto; }
  .ad-side-foot { margin:0 0 0 auto; flex-direction:row; border:0; padding:0; }
  .ad-collapse { display:none; }
  .form-row { grid-template-columns:1fr; }
  .tbl-filter { margin-left:0; }
}

/* Telefoon: tabelregels als verzorgde cards (titel + meta-chips + actie rechtsboven). */
@media (max-width:600px) {
  .panel { background:transparent; border:0; box-shadow:none; padding:0; }
  table, tbody { display:block; }
  thead { display:none; }
  /* Accentbalk via ::before, NIET via border-left:5px: bij ongelijke randdiktes
     interpoleert de browser de dikte over de bocht, waardoor de balk linksboven en
     linksonder een dikke gebogen hoorn wordt. Nu een strak balkje dat de ronding van
     de kaart volgt (overflow:hidden clipt hem). */
  tbody tr {
    display:block; position:relative; overflow:hidden; background:var(--surface);
    border:var(--lijn) solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--sp-14) var(--sp-16) var(--sp-14) var(--sp-20); margin-bottom:var(--sp-12);
  }
  tbody tr::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--sea);
  }
  tbody tr.selected-row { border-color:var(--sea); box-shadow:0 0 0 1px var(--sea); }
  td { display:block; border:0; padding:0; width:auto; text-align:left; }
  td.rp-cardtitle { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); letter-spacing:-.01em; min-height:30px; padding-right:46px; margin-bottom:var(--sp-8); }
  td[data-label] { display:inline-flex; align-items:center; gap:var(--sp-6); margin:var(--sp-4) var(--sp-16) 0 0; font-size:var(--fs-13-5); color:var(--ink); }
  td[data-label]::before {
    content:attr(data-label); font-size:var(--fs-11); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);
  }
  td.col-act { position:absolute; top:12px; right:12px; display:inline-flex; gap:var(--sp-4); flex-wrap:nowrap; width:auto; padding:0; }
  /* Een cel met VOLLE tekstknoppen (Aanvragen: Goedkeuren / Afwijzen) past niet in
     die absolute rechterbovenhoek - die is gekalibreerd op een enkel icoonknopje.
     Zulke knoppen staan op een telefoon onder de kaartinhoud, vol breed. */
  td.col-act.col-act-wide {
    position:static; top:auto; right:auto; display:flex; flex-wrap:wrap; gap:var(--sp-8);
    width:100%; margin-top:var(--sp-12);
  }
  td.col-act.col-act-wide .btn { flex:1 1 auto; justify-content:center; }
  tr:has(td.col-act-wide) td.rp-cardtitle { padding-right:0; }
}

@media print { .dev-banner { display:none !important; } }

/* ── Toegankelijkheid (13-10-2026, naar het design system van templateapp) ── */
/* Een zichtbare focusrand voor wie met het toetsenbord werkt; de velden hebben hun
   eigen ring (zie .form-input:focus). */
:is(button, a, [tabindex], summary, select):focus-visible { outline:var(--lijn-dik) solid var(--sea); outline-offset:var(--sp-2); }
/* Op een aanraakscherm 16px in een invoerveld, anders zoomt iOS in bij het focussen. */
@media (pointer: coarse) {
  .form-input, .form-select, textarea, .card input { font-size:var(--fs-16); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:0s !important; animation-duration:0s !important; }
}