:root{
  --bg:#efefef; --text:#222; --muted:#666;
  --sidebar:#f6a623; --sidebar-text:#fff;
  --panel:#ffffff; --border:#e0e0e0;
  --blue:#1976d2; --chip-bg:#1976d2; --chip-text:#fff;
  --radius:12px; --gap:14px; --shadow:0 6px 18px rgba(0,0,0,.08); --maxw:1400px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--text)}
.layout{display:flex;min-height:100vh;max-width:var(--maxw);margin:0 auto;}
.sidebar{width:260px;background:var(--sidebar);color:var(--sidebar-text);padding:16px 14px;position:sticky;top:0;height:100vh;}
/* Zijbalk: eigen scrollbar als de inhoud hoger is dan het scherm */
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;          /* staat er waarschijnlijk al */
  overflow-y: auto;       /* <-- belangrijk */
  overflow-x: hidden;
  overscroll-behavior: contain;   /* voorkomt “doorschieten” op mobiel */
  -webkit-overflow-scrolling: touch; /* soepel scrollen op iOS */
  scrollbar-gutter: stable;       /* voorkomt verspringen wanneer de scrollbar verschijnt */
}

.logo{display:flex;align-items:center;justify-content:center;margin:6px 0 16px 0}
.logo img{max-width:200px;height:auto;display:block}
.side-nav ul{list-style:none;margin:0;padding:0}
.side-nav > ul > li{margin:8px 0}
.side-nav a{color:var(--sidebar-text);text-decoration:none;font-weight:bold;display:block;padding:8px 10px;border-radius:8px}
.side-nav a:hover,.side-nav .active a{background:rgba(255,255,255,.2)}
/* Actieve hoofdmenu-item en subitem duidelijk markeren */
.side-nav li.active > a,
.side-nav a.active {
  background-color: rgba(255,255,255,0.25);
  color: #eaeaea;        /* lichtgrijs */
  font-weight: 700;
}

/* Specifiek voor submenu-items */
.submenu li.active > a {
  background-color: rgba(255,255,255,0.28);
  color: #ececec;
  border: 1px solid rgba(255,255,255,0.35);
}

/* Hover-effect consistent */
.side-nav a:hover {
  background-color: rgba(255,255,255,0.15);
}

.sidebar .stats{margin:10px 0 18px 0;font-size:0.9rem;line-height:1.35}
.content{flex:1;padding:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
h2{margin:0 0 12px 0;font-size:1.1rem;color:var(--text)}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.form-row{display:flex;align-items:center;gap:8px}
label{color:var(--muted);font-weight:bold}
select{background:#fff;color:var(--text);border:1px solid #cfd8dc;border-radius:8px;padding:8px 10px}
.badge{background:var(--chip-bg);color:var(--chip-text);padding:4px 8px;border-radius:999px;font-size:.8rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:var(--chip-bg);color:var(--chip-text);border-radius:999px;padding:4px 10px;display:inline-flex;gap:6px;align-items:center}
.chip .x{cursor:pointer;font-weight:700}
hr.sep{border:0;border-top:1px solid var(--border);margin:14px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap)}
.cap-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.cap-row{display:flex;gap:12px;align-items:center;padding:12px}
.cap-thumb{flex:0 0 auto;width:105px;height:105px;background:#fafafa;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.cap-thumb img{width:105px;height:105px;object-fit:contain;display:block;border-radius:10px}
.cap-meta{padding:0 12px 12px 12px}
.cap-title{margin:0 0 6px;font-size:1rem}
.meta-row{display:flex;gap:8px;flex-wrap:wrap}
.kv{font-size:.82rem;background:var(--blue);color:#fff;border-radius:999px;padding:4px 8px}
.pagination{display:flex;align-items:center;gap:12px;justify-content:center;margin:16px 0}
button{background:var(--blue);color:white;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}

/* Unknown modal */
#u-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:60}
#u-modal.active{display:flex}
.u-card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.18);padding:16px;max-width:760px;width:92vw;display:grid;grid-template-columns:1fr 220px;gap:16px}
#u-modal img{width:210px;height:210px;object-fit:contain;border-radius:12px;border:1px solid var(--border);background:#fafafa}
.u-input,.u-text{width:100%;background:#fff;border:1px solid #cfd8dc;border-radius:10px;color:#222;padding:10px}
textarea.u-text{min-height:120px}
.u-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}
.hp{position:absolute;left:-5000px;opacity:0;height:0;width:0;overflow:hidden}

/* Submenu stijl & inspringen */
.side-nav li.has-sub > a{
  display:flex; justify-content:space-between; align-items:center;
}

.side-nav .chev{ font-size:12px; opacity:.85; transition:transform .2s ease; }
.side-nav li.open > a .chev{ transform:rotate(90deg); }

/* actieve menukeuze in de zijbalk */
.side-nav a.active,
.side-nav li.active > a {
  background-color: rgba(255, 255, 255, 0.25); /* zachte witte highlight */
  color: #f5f5f5; /* lichtgrijze tekst (lijkt op de achtergrond) */
  font-weight: 600;
}

/* optioneel: hover net iets lichter */
.side-nav a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Highlight voor actief menu en submenu */
.side-nav li.active > a,
.side-nav a.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: #f5f5f5;
  font-weight: 600;
}

/* Submenu iets inspringen */
.submenu a {
  padding-left: 24px;
}

/* Hover-effect optioneel */
.side-nav a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Submenu open/dicht — zonder hoogte-limiet zodat scrollen werkt */
.submenu{
  list-style:none;
  margin:6px 0 0 0;
  padding-left:14px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

/* wanneer open: geen limiet meer */
.side-nav li.open .submenu{
  max-height:none;        /* <-- geen harde cap */
  overflow:visible;
}

/* WebKit (Chrome/Edge/Safari) */
.sidebar::-webkit-scrollbar{ width: 10px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.25); }


.submenu li{ margin:4px 0 0 8px; }   /* extra inspringing per item */
.submenu a{
  font-weight:normal;
  background:rgba(255,255,255,.12);
  padding:6px 10px 6px 18px;   /* ruimte voor '↳' */
  border-radius:8px; display:block;
  position:relative;
}

.submenu a::before{
  content:'↳'; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  opacity:.7; font-size:12px;
}

.submenu a:hover, .submenu a.active{ background:rgba(255,255,255,.25); }

/* Lightbox */
#lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:50}
#lightbox.active{display:flex}
.lb-frame{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:10px;position:relative}
.lb-frame img{width:630px;height:630px;object-fit:contain;display:block;border-radius:10px}
.lb-close{position:absolute;top:6px;right:10px;color:#333;cursor:pointer;font-size:20px}
@media (max-width:700px){.lb-frame img{width:90vw;height:90vw}}

/* kleine marge bij chips onder breadcrumb in zondermerk */
#zm-crumb .chips{ margin-top:6px; }

/* chip met mini-plaatje */
.chip { display:inline-flex; align-items:center; gap:8px; }
.chip-img{
  width:22px; height:22px; object-fit:cover; border-radius:6px;
  border:1px solid var(--border); background:#fff;
}

#zm-crumb {
  min-height: 32px;     /* zodat er altijd een beetje ruimte blijft, ook als leeg */
  margin: 0 0 10px 0;
  color: #666;
}