/* ── Voedselbos Uitleenlijst ────────────────────────────────────────────────── */

:root {
    --vbl-groen:       #3B6D11;
    --vbl-groen-mid:   #639922;
    --vbl-groen-licht: #EAF3DE;
    --vbl-groen-rand:  #C0DD97;
    --vbl-groen-donker:#27500A;
    --vbl-oranje:      #854F0B;
    --vbl-oranje-licht:#FAEEDA;
    --vbl-rood:        #A32D2D;
    --vbl-rood-licht:  #FCEBEB;
    --vbl-radius:      8px;
    --vbl-radius-lg:   12px;
}

/* ── Admin ───────────────────────────────────────────────────────────────────── */

.vbl-wrap  { max-width: 1100px; }
.vbl-h1    { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }

.vbl-grid  { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .vbl-grid { grid-template-columns: 1fr; } }

.vbl-card       { background:#fff; border:1px solid #ddd; border-radius:var(--vbl-radius-lg); padding:1.25rem 1.5rem; }
.vbl-card-full  { grid-column:1/-1; }
.vbl-card-titel { font-size:1rem; font-weight:600; margin:0 0 1rem; color:var(--vbl-groen-donker); }

.vbl-form-table th                               { width:120px; font-weight:500; }
.vbl-form-table td input[type=text],
.vbl-form-table td input[type=email],
.vbl-form-table td textarea,
.vbl-form-table td select                        { width:100%; max-width:360px; }

.vbl-table    { margin-top:.5rem; font-size:.875rem; }
.vbl-table th { font-weight:600; background:var(--vbl-groen-licht); }

.vbl-acties               { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.vbl-acties input[type=text],
.vbl-acties input[type=email] { font-size:.8125rem; height:28px; }

.vbl-badge        { display:inline-block; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.vbl-badge-groen  { background:var(--vbl-groen-licht);  color:var(--vbl-groen-donker); }
.vbl-badge-oranje { background:var(--vbl-oranje-licht); color:var(--vbl-oranje); }
.vbl-badge-rood   { background:var(--vbl-rood-licht);   color:var(--vbl-rood); }

.vbl-btn-groen  { background:var(--vbl-groen) !important;  border-color:var(--vbl-groen-donker) !important; color:#fff !important; }
.vbl-btn-groen:hover { background:var(--vbl-groen-donker) !important; }
.vbl-btn-rood   { color:var(--vbl-rood) !important; border-color:#F7C1C1 !important; }
.vbl-btn-rood:hover  { background:var(--vbl-rood-licht) !important; }
.vbl-btn-verleng { color:var(--vbl-groen) !important; border-color:var(--vbl-groen-rand) !important; }
.vbl-btn-verleng:hover { background:var(--vbl-groen-licht) !important; }

.vbl-tabs     { display:flex; gap:4px; margin-bottom:1rem; border-bottom:2px solid var(--vbl-groen-rand); }
.vbl-tab      { padding:6px 16px; font-size:.875rem; text-decoration:none; color:#555; border-radius:var(--vbl-radius) var(--vbl-radius) 0 0; border:1px solid transparent; }
.vbl-tab.active { background:#fff; border-color:var(--vbl-groen-rand); border-bottom-color:#fff; color:var(--vbl-groen-donker); font-weight:600; margin-bottom:-2px; }
.vbl-tab:hover  { background:var(--vbl-groen-licht); color:var(--vbl-groen); }

/* ── Frontend ────────────────────────────────────────────────────────────────── */

.vbl-front { font-family:inherit; max-width:760px; margin:0 auto; }

.vbl-front-header { text-align:center; padding:2rem 0 1.5rem; }
.vbl-front-logo   { font-size:2.5rem; margin-bottom:.5rem; }
.vbl-front-titel  { font-size:1.5rem; font-weight:600; color:var(--vbl-groen-donker); margin:0 0 .35rem; }
.vbl-front-sub    { color:#666; font-size:.9375rem; margin:0; }
.vbl-front-termijn {
    display:inline-block; margin-top:8px; font-size:.875rem;
    color:var(--vbl-groen); background:var(--vbl-groen-licht);
    border:1px solid var(--vbl-groen-rand); border-radius:20px; padding:4px 14px;
}

.vbl-melding      { padding:12px 16px; border-radius:var(--vbl-radius); margin-bottom:1.25rem; font-size:.9375rem; line-height:1.5; }
.vbl-melding-ok   { background:var(--vbl-groen-licht); color:var(--vbl-groen-donker); border:1px solid var(--vbl-groen-rand); }
.vbl-melding-fout { background:var(--vbl-rood-licht);  color:var(--vbl-rood);         border:1px solid #F7C1C1; }

.vbl-front-stats { display:flex; gap:12px; margin-bottom:1.5rem; background:#f9f9f9; border-radius:var(--vbl-radius-lg); padding:1rem 1.5rem; }
.vbl-stat        { flex:1; text-align:center; }
.vbl-stat-n      { display:block; font-size:1.75rem; font-weight:600; }
.vbl-stat-l      { display:block; font-size:.8125rem; color:#666; margin-top:2px; }
.vbl-groen       { color:var(--vbl-groen); }
.vbl-oranje      { color:var(--vbl-oranje); }

.vbl-zoekbalk           { margin-bottom:1rem; }
.vbl-zoekbalk input     { width:100%; padding:10px 14px; font-size:1rem; border:1.5px solid #ddd; border-radius:var(--vbl-radius); outline:none; transition:border-color .15s; box-sizing:border-box; }
.vbl-zoekbalk input:focus { border-color:var(--vbl-groen-mid); }

.vbl-cat-filters  { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:1rem; }
.vbl-cat-btn      { padding:6px 14px; font-size:.8125rem; font-weight:500; border:1.5px solid #ddd; border-radius:20px; background:#fff; color:#555; cursor:pointer; transition:all .15s; }
.vbl-cat-btn:hover  { border-color:var(--vbl-groen-rand); color:var(--vbl-groen); background:var(--vbl-groen-licht); }
.vbl-cat-btn.active { border-color:var(--vbl-groen); background:var(--vbl-groen); color:#EAF3DE; }

.vbl-boek-rij     { display:flex; align-items:center; gap:12px; padding:.9rem 1.1rem; background:#fff; border:1px solid #e5e5e5; border-radius:var(--vbl-radius-lg); margin-bottom:8px; transition:border-color .15s; }
.vbl-boek-rij:hover { border-color:var(--vbl-groen-rand); }
.vbl-boek-icoon   { font-size:1.5rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--vbl-groen-licht); border-radius:var(--vbl-radius); flex-shrink:0; }
.vbl-boek-info    { flex:1; min-width:0; }
.vbl-boek-titel   { font-weight:600; font-size:.9375rem; margin-bottom:2px; }
.vbl-boek-meta    { font-size:.8125rem; color:#666; }
.vbl-boek-notitie { font-size:.8125rem; color:var(--vbl-groen); margin-top:3px; font-style:italic; }
.vbl-boek-rechts  { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }

.vbl-btn-reserveer { padding:6px 16px; font-size:.8125rem; font-weight:600; background:var(--vbl-groen); color:#EAF3DE; border:none; border-radius:var(--vbl-radius); cursor:pointer; transition:background .15s; }
.vbl-btn-reserveer:hover { background:var(--vbl-groen-donker); }

#vbl-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:1rem; }
#vbl-modal         { background:#fff; border-radius:var(--vbl-radius-lg); padding:1.75rem 2rem; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; box-shadow:0 4px 24px rgba(0,0,0,.15); }
#vbl-modal h3      { font-size:1.125rem; font-weight:600; margin:0 0 .25rem; }

.vbl-label           { display:block; font-size:.875rem; font-weight:500; color:#444; margin-bottom:.75rem; }
.vbl-label input,
.vbl-label textarea  { display:block; width:100%; margin-top:4px; padding:8px 12px; font-size:.9375rem; border:1.5px solid #ddd; border-radius:var(--vbl-radius); box-sizing:border-box; outline:none; transition:border-color .15s; }
.vbl-label input:focus,
.vbl-label textarea:focus { border-color:var(--vbl-groen-mid); }
.vbl-label textarea  { resize:vertical; }

.vbl-btn-cancel  { padding:8px 18px; font-size:.875rem; border:1.5px solid #ddd; border-radius:var(--vbl-radius); background:none; cursor:pointer; color:#555; }
.vbl-btn-cancel:hover { background:#f5f5f5; }
.vbl-btn-verstuur { padding:8px 20px; font-size:.875rem; font-weight:600; background:var(--vbl-groen); color:#EAF3DE; border:none; border-radius:var(--vbl-radius); cursor:pointer; transition:background .15s; }
.vbl-btn-verstuur:hover { background:var(--vbl-groen-donker); }

@media (max-width:500px) {
    .vbl-front-stats { flex-direction:column; gap:8px; }
    .vbl-boek-rij    { flex-wrap:wrap; }
    .vbl-boek-rechts { flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}

.vbl-uitlog-knop {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #E75480;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: var(--vbl-radius);
    margin: .75rem 0;
    transition: background .15s;
}
.vbl-uitlog-knop:hover { background: #c23b6a; color: #fff; text-decoration: none; }

/* Uitlogbalk: knop rechts uitgelijnd op desktop, vol breedte op mobiel */
.vbl-uitlog-balk {
    display: flex;
    justify-content: flex-end;
    margin: .5rem 0;
}
@media (max-width: 500px) {
    .vbl-uitlog-balk { justify-content: stretch; }
    .vbl-uitlog-knop { display: block; width: 100%; text-align: center; padding: 14px; font-size: 1.0625rem; }
}