/* map-hub.css — Map Hub off-canvas (vervangt #navModal).
   Niet onder body.beta-ui gescopet: directe cutover voor alle gebruikers.
   .rds-scope draagt een fallback-tokenset (exacte spiegel van nav-beta.css
   body.beta-ui) zodat non-beta-gebruikers de juiste look krijgen. */
.rds-scope{
  --rds-surface: rgba(20,26,42,.78);
  --rds-surface-strong: rgba(13,17,28,.90);
  --rds-surface-2: rgba(28,35,56,.72);
  --rds-panel: rgba(15,19,32,.84);
  --rds-line: rgba(120,135,170,.22);
  --rds-line-strong: rgba(120,135,170,.30);
  --rds-line-faint: rgba(120,135,170,.10);
  --rds-text:#e9edf7; --rds-muted:#cdd6ea;
  --rds-accent:#16c8db; --rds-accent-hover:#4dd9e8; --rds-accent-ink:#04222a;
  --rds-accent-soft: rgba(22,200,219,.16); --rds-accent-line: rgba(22,200,219,.32);
  --rds-accent-soft-strong: rgba(22,200,219,.22);
  --rds-sp-1:4px; --rds-sp-2:6px; --rds-sp-3:8px; --rds-sp-4:12px; --rds-sp-5:14px; --rds-sp-6:16px; --rds-sp-7:20px;
  --rds-r-1:8px; --rds-r-2:10px; --rds-r-3:12px; --rds-r-4:16px; --rds-r-pill:999px;
  --rds-font:"Space Grotesk", sans-serif;
  --rds-fs-xs:11px; --rds-fs-sm:12px; --rds-fs-md:13px; --rds-fs-base:14px;
  --rds-fw-reg:400; --rds-fw-med:500; --rds-fw-semi:600; --rds-fw-bold:700;
  --rds-shadow-1:0 4px 20px rgba(0,0,0,.40);
  --rds-shadow-2:0 10px 30px rgba(0,0,0,.55);
  --rds-shadow-3:0 16px 48px rgba(0,0,0,.65);
  --rds-blur:blur(16px) saturate(140%);
  --rds-blur-strong:blur(24px) saturate(160%);
  --rds-sheet: rgba(10,13,22,.97);
  --rds-dur-fast:.12s; --rds-dur:.15s; --rds-dur-slow:.22s; --rds-ease:ease;
  --rds-safe: max(env(safe-area-inset-bottom, 0px), 14px);
}

/* ===== Shell — off-canvas panel ===== */

.map-hub{position:fixed;z-index:1090;background:var(--rds-sheet);
  -webkit-backdrop-filter:var(--rds-blur-strong);backdrop-filter:var(--rds-blur-strong);
  border:1px solid var(--rds-line-strong);box-shadow:var(--rds-shadow-3);
  display:flex;flex-direction:column;overflow:hidden;color:var(--rds-text);
  transition:transform var(--rds-dur-slow) var(--rds-ease)}
/* mobiel = base */
.map-hub{left:0;right:0;bottom:0;max-height:86vh;
  border-radius:var(--rds-r-4) var(--rds-r-4) 0 0;transform:translateY(105%);
  padding-bottom:var(--rds-safe)}
.map-hub.open{transform:translateY(0)}
.mh-grab{display:block;padding:10px 0 4px;flex:0 0 auto;touch-action:none;cursor:grab}
.mh-grab span{display:block;width:40px;height:5px;margin:0 auto;border-radius:var(--rds-r-pill);background:rgba(235,240,250,.28)}
@media (min-width:768px){
  .map-hub{top:0;right:0;bottom:0;left:auto;width:400px;max-height:none;
    border-radius:var(--rds-r-4) 0 0 var(--rds-r-4);transform:translateX(105%);padding-bottom:0}
  .map-hub.open{transform:translateX(0)}
  .mh-grab{display:none}
}
.mh-backdrop{position:fixed;inset:0;background:rgba(2,4,8,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity var(--rds-dur-slow) var(--rds-ease),visibility var(--rds-dur-slow);z-index:1089}
.mh-backdrop.open{opacity:1;visibility:visible}
/* Verberg de zwevende map-filters-knop terwijl de Hub open is (lag boven de Hub, z-index 1200) */
body.maphub-open .mf-toggle{display:none !important}
@media (prefers-reduced-motion: reduce){
  .map-hub,.mh-backdrop{transition:none}
}

/* ===== Header ===== */

.mh-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 16px 12px;border-bottom:1px solid var(--rds-line)}
.mh-head h2{margin:0;font-size:17px;font-weight:var(--rds-fw-bold)}
.mh-head .sub{font-size:var(--rds-fs-sm);color:var(--rds-muted)}
.mh-close{all:unset;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--rds-r-2);
  border:1px solid var(--rds-line);background:var(--rds-surface-2);color:var(--rds-muted);cursor:pointer}
.mh-close:hover{color:var(--rds-text);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}

/* ===== Segmented jump-nav ===== */

.mh-nav{flex:0 0 auto;display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--rds-line-faint)}
.mh-nav button{all:unset;flex:1;text-align:center;padding:8px 0;border-radius:var(--rds-r-2);font-size:var(--rds-fs-sm);
  font-weight:var(--rds-fw-med);color:var(--rds-muted);cursor:pointer}
.mh-nav button.active{background:var(--rds-accent-soft);color:var(--rds-accent);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}

/* ===== Body (scrollable) ===== */

.mh-body{flex:1 1 auto;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.mh-seclabel{font-size:var(--rds-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--rds-muted);
  font-weight:var(--rds-fw-semi);margin-bottom:8px}

/* ===== Card ===== */

.mh-card{background:var(--rds-panel);border:1px solid var(--rds-line);border-radius:var(--rds-r-3);padding:12px}

/* ===== Layer tile grid ===== */

.mh-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mh-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;
  border-radius:var(--rds-r-3);background:var(--rds-surface-2);border:1px solid var(--rds-line);color:var(--rds-muted);cursor:pointer;text-decoration:none;padding:8px 4px}
.mh-tile:hover{color:var(--rds-text);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}
.mh-tile.active{background:var(--rds-accent-soft);color:var(--rds-accent);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}
.mh-tile svg{width:24px;height:24px}
.mh-tile span{font-size:var(--rds-fs-sm);font-weight:var(--rds-fw-med)}

/* ===== Quick-filter chips ===== */

.mh-chips{display:flex;flex-wrap:wrap;gap:8px}
.mh-qf{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:var(--rds-r-pill);
  background:var(--rds-surface-2);border:1px solid var(--rds-line);color:var(--rds-muted);font-size:var(--rds-fs-sm);cursor:pointer}
.mh-qf svg{width:16px;height:16px}
.mh-qf.active{color:var(--rds-accent);background:var(--rds-accent-soft);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}
.mh-qf.off{opacity:.55;text-decoration:line-through}

/* ===== Embedded location / filter dropdown overrides ===== */

.map-hub #locations .btn-secondary,
.map-hub #filters .btn-secondary{width:100%;text-align:left;background:var(--rds-surface-2);
  border:1px solid var(--rds-line);color:var(--rds-text);border-radius:var(--rds-r-2);padding:10px 12px}
.map-hub .dropdown-menu{background:var(--rds-surface-strong);border:1px solid var(--rds-line-strong);
  border-radius:var(--rds-r-2);z-index:1100}
.map-hub .dropdown-item{color:var(--rds-text);min-height:44px;display:flex;align-items:center}
.map-hub .dropdown-item:hover,.map-hub .dropdown-item.active{background:var(--rds-accent-soft);color:var(--rds-accent)}
.map-hub .scrollable-menu{max-height:240px;overflow:auto}

/* ===== Locatie-lijst (F1b) ===== */

.map-hub .mh-loc-active{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--rds-r-3);
  background:var(--rds-accent-soft);box-shadow:inset 0 0 0 1px var(--rds-accent-line);margin-bottom:10px}
.map-hub .mh-loc-active .ico{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rds-r-2);background:var(--rds-accent);color:var(--rds-accent-ink)}
.map-hub .mh-loc-active .nm{font-weight:var(--rds-fw-semi)}

.map-hub .mh-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:var(--rds-r-2);
  background:var(--rds-surface-2);border:1px solid var(--rds-line);color:var(--rds-muted);margin-bottom:8px}
.map-hub .mh-search input{all:unset;flex:1;color:var(--rds-text);font-size:var(--rds-fs-base)}
.map-hub .mh-search svg{width:16px;height:16px;flex-shrink:0}

.map-hub .mh-loc-list{display:flex;flex-direction:column;gap:2px}

.map-hub .mh-loc-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;
  border-radius:var(--rds-r-2);cursor:pointer;color:var(--rds-text);text-decoration:none;
  font-size:var(--rds-fs-base)}
.map-hub .mh-loc-row:hover{background:var(--rds-surface-2)}
.map-hub .mh-loc-row.active{background:var(--rds-surface-2);box-shadow:inset 0 0 0 1px var(--rds-accent-line)}
.map-hub .mh-loc-row .badge{font-size:var(--rds-fs-xs);color:var(--rds-accent);padding:2px 8px;
  border-radius:var(--rds-r-pill);background:var(--rds-accent-soft)}

.map-hub .mh-loc-empty{display:none;color:var(--rds-muted);font-size:var(--rds-fs-sm);padding:8px 10px}

.map-hub .mh-loc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.map-hub .mh-btn{all:unset;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  min-height:42px;padding:0 14px;border-radius:var(--rds-r-2);font-size:var(--rds-fs-base);
  font-weight:var(--rds-fw-med);cursor:pointer;border:1px solid var(--rds-line);
  color:var(--rds-text);background:var(--rds-surface-2)}
.map-hub .mh-btn:hover{box-shadow:inset 0 0 0 1px var(--rds-accent-line)}
.map-hub .mh-btn.accent{background:var(--rds-accent);color:var(--rds-accent-ink);border-color:transparent;
  font-weight:var(--rds-fw-semi);flex:1}
.map-hub .mh-btn svg{width:18px;height:18px}

.map-hub .mh-linkrow{display:flex;gap:16px;margin-top:10px;font-size:var(--rds-fs-sm)}
.map-hub .mh-linkrow a{color:var(--rds-accent);text-decoration:none}

/* ===== Settings: segmented-controls + setting-rows (F2 T1) ===== */

.map-hub .mh-setting{display:flex;align-items:center;gap:12px;padding:10px 0}
.map-hub .mh-setting+.mh-setting{border-top:1px solid var(--rds-line-faint)}
.map-hub .mh-setting .lbl{flex:1}
.map-hub .mh-setting .lbl .t{font-size:var(--rds-fs-base);font-weight:var(--rds-fw-med)}
.map-hub .mh-setting .lbl .d{font-size:var(--rds-fs-xs);color:var(--rds-muted)}
.map-hub .mh-seg{display:inline-flex;background:var(--rds-surface-2);border:1px solid var(--rds-line);border-radius:var(--rds-r-2);padding:3px;gap:2px}
.map-hub .mh-seg button{all:unset;padding:6px 12px;border-radius:7px;font-size:var(--rds-fs-sm);color:var(--rds-muted);cursor:pointer}
.map-hub .mh-seg button.active{background:var(--rds-accent);color:var(--rds-accent-ink);font-weight:var(--rds-fw-semi)}