:root{
 --bg:#fff;--surface:#f8fafc;--surface2:#eef2f7;--text:#0f172a;--muted:#64748b;
 --border:#dbe4ef;--accent:#0f766e;--danger:#b91c1c;--orange:#9a3412;
 --purple:#6d28d9;--shadow:0 9px 28px rgba(15,23,42,.18)
}
*{box-sizing:border-box}
html,body,#map{width:100%;height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#e5ebf0;color:var(--text);overflow:hidden}
#map{background:#dfe6ec}
button,input,select{font:inherit}
.leaflet-control-attribution{font-size:9px!important}
.leaflet-control-zoom{box-shadow:0 3px 12px rgba(15,23,42,.16)!important}
.leaflet-control-zoom a{font-weight:900!important}
.leaflet-popup-content-wrapper{border-radius:11px;box-shadow:0 8px 28px rgba(15,23,42,.22)}
.leaflet-popup-content{margin:10px 11px}
.leaflet-div-icon{background:transparent!important;border:0!important}

/* ---------- Pro docks ---------- */
#proLeftDock,#proRightDock{
 position:fixed;z-index:1100;display:flex;flex-direction:column;gap:6px
}
#proLeftDock{left:8px;top:60px}
#proRightDock{right:8px;top:8px}
.proBtn{
 min-width:64px;height:38px;border:1px solid var(--border);border-radius:9px;
 background:rgba(255,255,255,.97);color:var(--text);box-shadow:0 4px 13px rgba(15,23,42,.14);
 cursor:pointer;font-size:9px;font-weight:900;padding:0 9px;display:flex;align-items:center;gap:6px
}
.proBtn:hover{background:#f8fafc}
.proBtn.active{background:#0f172a;color:#fff;border-color:#0f172a}
.proIcon{width:13px;text-align:center;font-size:11px}
.proCount{
 margin-left:auto;min-width:19px;height:18px;padding:0 5px;border-radius:999px;
 background:#e2e8f0;color:#334155;display:inline-flex;align-items:center;justify-content:center;
 font-size:8px;font-weight:950
}
.proBtn.active .proCount{background:#334155;color:#fff}
.proLiveDot{width:7px;height:7px;border-radius:50%;background:#22c55e}
#proLegend{
 position:fixed;z-index:1040;left:50%;bottom:9px;transform:translateX(-50%);
 display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);
 background:rgba(15,23,42,.94);color:#fff;border-radius:10px;padding:6px 9px;
 box-shadow:0 5px 18px rgba(15,23,42,.2);font-size:8px;font-weight:850;white-space:nowrap
}
.legendSwatch{display:inline-flex;align-items:center;gap:3px}
.legendBox{width:18px;height:16px;border-radius:5px;border:2px solid #fff;display:inline-grid;place-items:center;font-size:7px;color:#fff}
.legendDot{width:7px;height:7px;border-radius:50%;display:inline-block}
.legendDivider{width:1px;height:16px;background:#475569}

/* ---------- Search ---------- */
#searchBox{
 position:fixed;z-index:1090;overflow:hidden
}
#searchRow{display:flex;align-items:center}
#searchInput{width:100%;height:100%;border:0;background:transparent;outline:0}
#searchIcon{width:37px;text-align:center}
#searchResults{display:none;max-height:330px;overflow:auto;border-top:1px solid #e2e8f0}
#searchResults.open{display:block}
.searchSection{padding:6px 8px 4px;background:#f8fafc;color:#64748b;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.searchItem{padding:7px 8px;border-bottom:1px solid #edf2f7;cursor:pointer;font-size:10px}
.searchItem:hover{background:#f1f5f9}
.searchItem b{font-size:10px}
.searchItem small{display:block;color:#64748b;margin-top:2px}
.searchQuickGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px}
.searchQuick{border:1px solid #dbe4ef;background:#fff;border-radius:7px;padding:6px 5px;font-size:8px;font-weight:850;cursor:pointer}
.searchHint{padding:7px 8px;color:#64748b;font-size:8px;line-height:1.3}
.searchRecent{padding:4px 6px}

/* ---------- Panels ---------- */
.proPanel{
 position:fixed;z-index:1060;background:rgba(255,255,255,.985);border:1px solid var(--border);
 border-radius:12px;box-shadow:var(--shadow);display:none;overflow:hidden
}
.proPanel.open{display:block}
.proPanel .ph{
 display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;
 border-bottom:1px solid #eef2f7;background:#fff;cursor:move;user-select:none
}
.proPanel .ph b{font-size:11px}
.proPanel .close,.panelToggle{
 border:0;background:#eef2f7;color:#475569;width:24px;height:24px;border-radius:7px;
 cursor:pointer;font-weight:900
}
.panelBody{padding:9px;max-height:66vh;overflow:auto}
#filters{left:80px;top:60px;width:300px}
#filters.collapsed .filterBody{display:none}
#layers{right:80px;top:60px;width:250px}
#layers.collapsed .layerBody{display:none}
#navPanel{left:80px;top:110px;width:320px}
#favoritePanel{left:80px;top:155px;width:315px}
#disruptionPanel{right:80px;top:110px;width:350px}
#statusPanel{right:80px;top:155px;width:345px}

.filterBody,.layerBody{padding:8px}
.filterLabel{display:block;font-size:8px;color:#64748b;font-weight:900;text-transform:uppercase;margin:5px 0 4px}
.filterBody select,.filterBody input{
 width:100%;border:1px solid #dbe4ef;border-radius:7px;background:#fff;color:#0f172a;
 padding:6px 7px;font-size:10px
}
#proQuickFilters{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.quickFilter{
 border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#334155;
 padding:4px 7px;font-size:8px;font-weight:850;cursor:pointer
}
.quickFilter.active{background:#0f172a;color:#fff;border-color:#0f172a}
.checkRow{display:flex;align-items:center;gap:6px;font-size:10px;margin:7px 0}
#quickActions{display:flex;gap:5px;margin-top:7px}
#quickActions button,.presetBtn,.navAction,.statusActions button,.routeBar button{
 border:0;border-radius:7px;padding:6px 7px;font-size:9px;font-weight:850;cursor:pointer
}
.primary{background:#0f766e!important;color:#fff!important}
.secondary{background:#475569!important;color:#fff!important}
.light{background:#e2e8f0!important;color:#334155!important}
.danger{background:#b91c1c!important;color:#fff!important}
#presetRow{display:grid;grid-template-columns:1fr auto auto;gap:4px;margin-top:7px}
#filterCount{margin-top:6px;color:#64748b;font-size:8px}
.layerBody label{display:flex;align-items:center;gap:7px;padding:5px 2px;font-size:10px}
#densityHint{padding:6px 1px 1px;color:#64748b;font-size:8px;line-height:1.3}

/* ---------- Navigation ---------- */
.navSectionTitle{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:2px 0 6px}
.navCityGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:9px}
.navCity{
 border:1px solid #dbe4ef;background:#fff;color:#172033;border-radius:8px;
 padding:7px 8px;text-align:left;font-size:10px;font-weight:800;cursor:pointer
}
.navCity small{display:block;color:#64748b;font-size:7px;margin-top:2px}
.navActions{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:9px}
#navCarrierGrid{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:9px}
.navCarrier{
 border:1px solid #dbe4ef;border-radius:999px;background:#fff;padding:4px 7px;
 font-size:8px;font-weight:850;color:#334155;cursor:pointer
}
.recentList{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow:auto}
.recentItem{
 display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;padding:5px 3px;
 border-bottom:1px solid #eef2f7;cursor:pointer
}
.recentBadge{min-width:35px;text-align:center;color:#fff;border-radius:6px;padding:4px;font-size:8px;font-weight:950}
.recentMain{min-width:0}
.recentMain b{display:block;font-size:9px}
.recentMain small{display:block;color:#64748b;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recentEmpty{color:#64748b;font-size:9px;padding:5px}

/* ---------- Favorites ---------- */
.favSectionHead{
 display:flex;justify-content:space-between;align-items:center;padding:6px 9px;background:#f8fafc;
 color:#64748b;font-size:8px;font-weight:900;text-transform:uppercase
}
#favoriteList,#favoriteRecentList{max-height:210px;overflow:auto}
.favItem{
 display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px 9px;border-bottom:1px solid #edf2f7;cursor:pointer
}
.favItem:hover{background:#f5f3ff}
.favItem .main{min-width:0;font-size:9px}
.favItem .main b{font-size:10px}
.favItem small{display:block;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.favItem .rm{border:0;background:#ede9fe;color:#6d28d9;border-radius:6px;padding:4px 7px;cursor:pointer;font-weight:900}

/* ---------- Disruptions ---------- */
#disruptionSearch{
 width:calc(100% - 18px);margin:8px 9px 4px;border:1px solid #fed7aa;border-radius:7px;
 padding:6px 7px;font-size:10px
}
.disruptionControls{display:flex;gap:5px;padding:4px 9px}
.disruptionControls button{border:0;border-radius:7px;background:#fff7ed;color:#9a3412;padding:5px 7px;font-size:8px;font-weight:850;cursor:pointer}
#disruptionViewportOnly{margin-right:4px}
#disruptionMeta{padding:3px 9px 6px;color:#64748b;font-size:8px}
#disruptionList{max-height:48vh;overflow:auto}
.disItem{padding:8px 9px;border-bottom:1px solid #edf2f7;cursor:pointer}
.disItem:hover{background:#fff7ed}
.disItem .top{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.disItem .carrier{font-size:8px;font-weight:850;color:#64748b}
.disItem .line{font-size:8px;font-weight:900;background:#ffedd5;color:#9a3412;border-radius:6px;padding:2px 5px}
.disItem .msg{font-size:10px;font-weight:750}
.disItem .loc,.disItem .end{font-size:8px;color:#64748b;margin-top:2px}
.disItem .end{color:#9a3412}
.disruptionIcon{
 width:25px;height:25px;border-radius:50%;background:#f97316;color:#fff;border:2px solid #fff;
 display:grid;place-items:center;font-size:13px;font-weight:950;box-shadow:0 2px 7px rgba(0,0,0,.28)
}

/* ---------- Status ---------- */
.statusGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:9px}
.statCard{border:1px solid #e2e8f0;border-radius:9px;padding:8px;background:#f8fafc}
.statCard b{display:block;font-size:15px}
.statCard small{font-size:8px;color:#64748b;text-transform:uppercase;font-weight:850}
#statusDetail{padding:0 10px 9px;font-size:9px;color:#475569;line-height:1.45}
#liveSchedulerBox{margin:0 9px 9px;border:1px solid #dbeafe;border-radius:9px;padding:8px;background:#eff6ff}
#liveSchedulerBox h5{margin:0 0 6px;font-size:9px}
.lsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.lsGrid>div{background:#fff;border:1px solid #dbeafe;border-radius:7px;padding:5px}
.lsGrid b{display:block;font-size:12px}
.lsGrid small{font-size:7px;color:#64748b;text-transform:uppercase;font-weight:850}
.lsHint{font-size:8px;color:#64748b;line-height:1.35;margin-top:6px}
.statusActions{display:flex;gap:5px;padding:0 9px 9px}

/* ---------- Route / line focus ---------- */
#routeBar{
 position:fixed;z-index:1035;left:50%;bottom:44px;transform:translateX(-50%);
 display:none;align-items:center;gap:7px;background:rgba(255,255,255,.98);
 border:1px solid var(--border);border-radius:11px;padding:7px 8px;
 box-shadow:0 5px 20px rgba(15,23,42,.2);font-size:9px;max-width:min(760px,calc(100vw - 24px))
}
#routeBar.open{display:flex}
.routeInfo{min-width:200px;max-width:350px}
.routeInfo b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.routeMeta{font-size:8px;color:#64748b;margin-top:2px}
.routeProgress{height:4px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:4px}
.routeProgress span{display:block;height:100%;width:0;background:#0f766e}
#lineFocusBanner{
 position:fixed;z-index:1036;left:50%;top:9px;transform:translateX(-50%);
 display:none;align-items:center;gap:7px;background:#0f172a;color:#fff;border-radius:9px;padding:6px 8px;
 font-size:9px;font-weight:850;box-shadow:0 4px 14px rgba(15,23,42,.22)
}
#lineFocusBanner.open{display:flex}
#lineFocusBanner button{border:0;border-radius:6px;background:#334155;color:#fff;padding:3px 6px;cursor:pointer}
#lineHistoryText{opacity:.78;font-weight:750;white-space:nowrap}
#lineHistoryText:empty{display:none}

/* ---------- Health / perf ---------- */
#liveHealth{
 position:fixed;z-index:1020;left:50%;bottom:9px;transform:translateX(-50%);
 background:rgba(255,255,255,.95);color:#0f172a;border:1px solid var(--border);border-radius:9px;
 padding:6px 8px;font-size:8px;box-shadow:0 3px 12px rgba(15,23,42,.14);
 display:flex;gap:7px;align-items:center;white-space:nowrap
}
.healthDot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#94a3b8}
.healthDot.ok{background:#22c55e}.healthDot.warn{background:#f59e0b}.healthDot.bad{background:#ef4444}
.smartFlag{border-radius:5px;padding:2px 5px;background:#dcfce7;color:#166534;font-weight:950}
#perf{
 position:fixed;right:8px;bottom:54px;z-index:1020;background:rgba(15,23,42,.92);color:#fff;
 border-radius:9px;padding:6px 8px;font-size:8px;line-height:1.45;cursor:pointer;box-shadow:0 3px 12px rgba(15,23,42,.18)
}
#shareToast{
 position:fixed;z-index:1200;left:50%;top:56px;transform:translateX(-50%) translateY(-8px);
 background:#0f172a;color:#fff;border-radius:8px;padding:7px 10px;font-size:9px;font-weight:850;
 opacity:0;pointer-events:none;transition:.16s
}
#shareToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Vehicle marker / popup ---------- */
.ov-marker{
 position:relative;display:flex;align-items:center;justify-content:center;
 border:3px solid #fff;
 color:#fff;font-weight:950;
 white-space:nowrap;transform:translate(-50%,-50%)
}
.ov-marker.selected{box-shadow:0 0 0 3px rgba(15,23,42,.8),0 3px 10px rgba(15,23,42,.38)}
.ov-punct{
 position:absolute;right:-4px;bottom:-4px;border-radius:50%;border:2px solid #fff;background:#94a3b8
}
.ov-punct.green{background:#22c55e}.ov-punct.orange{background:#f59e0b}
.ov-punct.red{background:#ef4444}.ov-punct.blue{background:#3b82f6}.ov-punct.gray{background:#94a3b8}
.vehiclePopup{width:270px;font-size:10px}
.vehiclePopup .head{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.vehiclePopup .lineBadge{display:inline-block;padding:4px 7px;border-radius:7px;background:#0f172a;color:#fff;font-weight:900}
.vehiclePopup .dest{font-size:12px;font-weight:850}
.vehiclePopup .muted{color:#64748b}
.vehiclePopup p{margin:4px 0}
.popupStatus{background:#f8fafc;border-radius:7px;padding:6px 7px;margin:6px 0}
.popupStops{margin-top:7px;padding-top:6px;border-top:1px solid #e2e8f0}
.popupStops div{padding:2px 0;color:#475569}
.nearbyBox{margin-top:7px;padding-top:6px;border-top:1px solid #e2e8f0}
.nearbyRow{font-size:9px;padding:2px 0;cursor:pointer;color:#0f766e}
.popupActions{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px}
.popupActions button{
 border:0;border-radius:7px;padding:7px 6px;font-size:9px;font-weight:850;background:#e2e8f0;color:#0f172a;cursor:pointer
}
.popupActions .primary{background:#0f766e!important;color:#fff}
.routeStopIcon{
 width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #0f766e;
 box-shadow:0 1px 4px rgba(15,23,42,.3)
}

/* ---------- Low zoom hint ---------- */
#lowZoomHint{
 position:fixed;z-index:1010;bottom:42px;left:50%;transform:translateX(-50%);
 background:rgba(15,23,42,.92);color:#fff;border-radius:999px;padding:5px 8px;
 font-size:8px;font-weight:850;display:none
}
#lowZoomHint.show{display:block}

@media(max-width:800px){
 #searchBox{left:6px;top:6px;width:min(285px,calc(100vw - 90px))}
 #proLeftDock{left:6px;top:54px}
 #proRightDock{right:6px;top:6px}
 .proBtn{min-width:53px;height:36px;padding:0 7px}
 .proLabel{display:none}
 #filters,#layers,#navPanel,#favoritePanel,#disruptionPanel,#statusPanel{
  left:7px!important;right:7px!important;top:auto!important;bottom:7px!important;width:auto!important;max-height:74dvh
 }
 .panelBody,#disruptionList{max-height:60dvh}
 #proLegend{display:none!important}
 #liveHealth{font-size:7px;gap:4px;bottom:6px}
 #liveHealth .mobileHide{display:none}
 #perf{display:none}
 #routeBar{bottom:36px;max-width:calc(100vw - 14px)}
 .routeInfo{min-width:110px;max-width:170px}
 .vehiclePopup{width:220px}
}

/* ============================================================
   SAFE LEAFLET BOOTLOADER V14
   ============================================================ */
#bootState{
 position:fixed;z-index:5000;left:50%;top:50%;transform:translate(-50%,-50%);
 display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.98);
 border:1px solid #dbe4ef;border-radius:11px;padding:10px 13px;
 box-shadow:0 12px 34px rgba(15,23,42,.20);font-size:10px;font-weight:850;color:#334155
}
#bootState.hidden{display:none}
#bootState.error{background:#fff1f2;color:#991b1b;border-color:#fecdd3;cursor:pointer}
.bootSpinner{
 width:15px;height:15px;border:2px solid #cbd5e1;border-top-color:#0f766e;
 border-radius:50%;animation:bootspin .7s linear infinite
}
#bootState.error .bootSpinner{display:none}
@keyframes bootspin{to{transform:rotate(360deg)}}


/* ============================================================
   CLEAN UI V16 — NORMALE RUSTIGE WEERGAVE
   ============================================================ */

/* Oude Pro docks blijven in DOM voor compatibiliteit maar niet zichtbaar. */
#proLeftDock,#proRightDock{display:none!important}

/* Zoekbalk gewoon linksboven. */
@media(max-width:980px){
#searchBox{
 left:10px!important;top:10px!important;width:340px!important;
 border-radius:12px!important
}
}

/* Hoofdknoppen links. */
#cleanLeftDock{
 position:fixed;z-index:1110;
 display:flex;flex-direction:column
}
.cleanBtn{
 cursor:pointer;
 display:flex;align-items:center;gap:8px
}
.cleanBtn:hover{background:#f8fafc}
.cleanBtn.active{background:#0f172a;color:#fff;border-color:#0f172a}
.cleanBtn .icon{text-align:center}
.cleanBtn .count{
 margin-left:auto;border-radius:999px;
 display:inline-flex;align-items:center;justify-content:center;
 padding:0 6px;
 font-size:8px;font-weight:950
}
.cleanBtn.active .count{background:#334155;color:#fff}

/* Alleen locatie + fullscreen rechts. */
#cleanRightDock{
 position:fixed;z-index:1110;
 display:flex;flex-direction:column
}
.cleanIconBtn{
 width:42px;height:42px;border:1px solid #dbe4ef;border-radius:11px;
 background:rgba(255,255,255,.97);color:#0f172a;
 box-shadow:0 4px 14px rgba(15,23,42,.14);
 cursor:pointer;font-size:17px;font-weight:900
}
.cleanIconBtn:hover{background:#f8fafc}

/* Menu: alleen geavanceerde functies. */
#cleanMenuPanel{
 left:132px;top:60px;width:285px
}
.cleanMenuGrid{
 display:grid;grid-template-columns:repeat(2,1fr);gap:7px
}
.cleanMenuItem{
 border:1px solid #e2e8f0;border-radius:10px;background:#fff;
 padding:10px;text-align:left;cursor:pointer;color:#0f172a
}
.cleanMenuItem:hover{background:#f8fafc}
.cleanMenuItem b{display:block;font-size:10px}
.cleanMenuItem small{display:block;color:#64748b;font-size:8px;margin-top:3px;line-height:1.25}
.cleanMenuSection{
 font-size:8px;font-weight:900;color:#64748b;text-transform:uppercase;
 letter-spacing:.04em;margin:10px 0 6px
}
.cleanMenuActions{display:flex;gap:6px}
.cleanMenuActions button{
 border:0;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:850;cursor:pointer
}

/* Kleine status onderaan. */
#cleanStatusBar{
 position:fixed;z-index:1050;left:50%;bottom:10px;transform:translateX(-50%);
 display:flex;align-items:center;gap:9px;
 background:rgba(15,23,42,.94);color:#fff;
 border-radius:10px;padding:7px 10px;
 box-shadow:0 5px 16px rgba(15,23,42,.18);
 font-size:8px;font-weight:850;white-space:nowrap
}
.cleanStatusDot{width:7px;height:7px;border-radius:50%;background:#94a3b8;display:inline-block}
.cleanStatusDot.ok{background:#22c55e}
.cleanStatusDot.warn{background:#f59e0b}
.cleanStatusDot.bad{background:#ef4444}
#cleanNodeState{
 border-radius:999px;padding:2px 6px;background:#14532d;color:#dcfce7
}
#cleanNodeState.warn{background:#78350f;color:#fef3c7}
#cleanNodeState.bad{background:#7f1d1d;color:#fee2e2}

/* Oude technische balken verbergen in normale weergave. */
#liveHealth,#perf{display:none!important}

/* Legenda alleen als gebruiker die bewust opent. */
#proLegend{display:none!important}

/* Panelen krijgen een rustiger uiterlijk. */
.proPanel{
 border-radius:12px!important;
 box-shadow:0 12px 32px rgba(15,23,42,.17)!important
}
.proPanel .ph{
 cursor:default!important
}

/* Popup iets eenvoudiger. */
.vehiclePopup .popupStatus{
 background:#f8fafc!important;
 border:1px solid #eef2f7
}
.popupActions button{min-height:33px}

/* Routebalk niet op statusbalk laten botsen. */
#routeBar{bottom:48px!important}

/* De bestaande lijnfocus blijft klein bovenin. */
#lineFocusBanner{top:10px!important}

@media(max-width:800px){
 #searchBox{
  left:7px!important;top:7px!important;
  width:min(285px,calc(100vw - 62px))!important
 }
 #cleanLeftDock{left:7px;top:55px}
 .cleanBtn{
  min-width:44px;width:44px;height:38px;padding:0;
  justify-content:center
 }
 .cleanBtn .label,.cleanBtn .count{display:none}
 #cleanRightDock{right:7px;top:7px}
 .cleanIconBtn{width:39px;height:39px}
 #cleanMenuPanel{
  left:7px!important;right:7px!important;top:auto!important;bottom:52px!important;
  width:auto!important
 }
 #cleanStatusBar{
  bottom:7px;max-width:calc(100vw - 14px);font-size:7px;gap:5px
 }
 #cleanStatusBar .mobileHide{display:none}
 #routeBar{bottom:42px!important}
}


/* ============================================================
   STYLE C MEGA UPDATE V17
   ============================================================ */
:root{
 --c-navy:#102f52;--c-navy-2:#174b78;--c-blue:#246bb2;--c-teal:#00a3a3;
 --c-green:#20a45a;--c-orange:#f59e0b;--c-red:#dc3545;--c-purple:#6d4aff;
 --c-grey:#7b8798;--c-panel:rgba(255,255,255,.965);--c-line:#e3e9f1;
}
body.map-theme-calm .leaflet-tile-pane{filter:saturate(.62) brightness(1.095) contrast(.84)}
body.map-theme-standard .leaflet-tile-pane{filter:none}
body.map-theme-mono .leaflet-tile-pane{filter:saturate(.08) brightness(1.09) contrast(.88)}
.leaflet-tile-pane{transition:filter .18s ease}

#megaBrand{
 position:fixed;z-index:1120;left:max(16px,env(safe-area-inset-left));top:14px;font-size:23px;font-weight:950;
 letter-spacing:-.7px;color:var(--c-navy);text-shadow:0 1px 0 rgba(255,255,255,.8);
 pointer-events:none;line-height:1
}
#megaBrand span{color:var(--c-teal)}
#megaBrand:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border:3px solid var(--c-teal);border-radius:50%;box-shadow:0 0 0 3px rgba(0,163,163,.13);vertical-align:2px}
#megaBrand small{display:block;margin-top:4px;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#718096}

/* ---------- V49 routeplanner ---------- */
.routePlanner{position:fixed;z-index:1160;left:22px;top:342px;width:310px;padding:13px;border:1px solid rgba(219,228,239,.92);border-radius:15px;background:rgba(255,255,255,.97);box-shadow:0 12px 30px rgba(18,51,91,.16);color:#203753}
.routePlanner[hidden]{display:none}.routePlannerHead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:9px}.routePlannerHead b{font-size:14px}.routePlannerHead small{display:block;margin-top:2px;font-size:9px;color:#708096}.routePlannerHead .close{border:0;background:transparent;font-size:21px;line-height:16px;color:#607089;cursor:pointer}
.routePlannerPoint{display:grid;grid-template-columns:13px 1fr auto;gap:7px;align-items:center;padding:8px 0;border-top:1px solid #edf1f5}.routePlannerPoint small{display:block;font-size:8px;color:#718096;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.routePlannerPoint b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.routeDot{width:9px;height:9px;border-radius:50%;margin-left:1px}.routeDot.from{background:#00a3a3}.routeDot.to{background:#ef6b4a}.routePlannerPoint button,.routePlannerActions button{border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#24405e;padding:5px 7px;font-size:9px;font-weight:800;cursor:pointer}.routePlannerPoint button:hover,.routePlannerActions button:hover{border-color:#00a3a3;color:#007f80}.routePlannerSummary{margin-top:7px;padding:8px;border-radius:9px;background:#f1f8f8;color:#526a7d;font-size:9px;line-height:1.42}.routePlannerActions{display:flex;gap:5px;margin-top:8px}.routePlannerActions button:first-child{background:#102f52;color:#fff;border-color:#102f52}.routePlannerActions button:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:620px){.routePlanner{left:8px;right:8px;top:auto;bottom:calc(92px + env(safe-area-inset-bottom));width:auto}.routePlannerActions button{flex:1;padding:7px 4px;font-size:8px}}

#searchBox{
 left:156px!important;top:12px!important;width:min(540px,calc(100vw - 650px))!important;
 min-width:360px!important;border:1px solid rgba(219,228,239,.86)!important;
 border-radius:17px!important;background:rgba(255,255,255,.965)!important;
 box-shadow:0 7px 24px rgba(18,51,91,.10)!important;backdrop-filter:blur(14px)
}
#searchRow{height:52px!important}
#searchInput{font-size:13px!important;font-weight:650!important;padding:0 14px!important;color:#2e425d!important}
#searchInput::placeholder{color:#8996a9}
#searchIcon{font-size:18px!important;color:#566a83!important}

#cleanLeftDock{left:22px!important;top:82px!important;gap:9px!important}
.cleanBtn{
 width:142px!important;min-width:142px!important;height:48px!important;
 border:1px solid rgba(219,228,239,.92)!important;border-radius:13px!important;
 background:rgba(255,255,255,.965)!important;color:#203753!important;
 box-shadow:0 5px 16px rgba(18,51,91,.10)!important;padding:0 13px!important;
 font-size:11px!important;font-weight:820!important;backdrop-filter:blur(10px)
}
.cleanBtn:hover{transform:translateY(-1px);background:#fff!important}
.cleanBtn.active{background:var(--c-navy)!important;color:#fff!important;border-color:var(--c-navy)!important}
.cleanBtn .icon{width:19px!important;font-size:15px}
.cleanBtn .count{
 background:#eef2f7!important;color:#52647a!important;border:1px solid #e0e7f0;
 min-width:23px!important;height:22px!important
}
.cleanBtn.active .count{background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:transparent}
#megaLiveBtn .liveLed{
 width:8px;height:8px;border-radius:50%;background:#22b65c;margin-left:auto;
 box-shadow:0 0 0 4px rgba(34,182,92,.10)
}
#megaLiveBtn.degraded .liveLed{background:#f59e0b}
#megaStopsBtn.active{background:#eff9fa!important;color:#076b7b!important;border-color:#b9e3e7!important}

#cleanRightDock{right:22px!important;top:82px!important;gap:9px!important}
.cleanIconBtn,.megaRightBtn{
 width:154px!important;height:48px!important;border:1px solid rgba(219,228,239,.92)!important;
 border-radius:13px!important;background:rgba(255,255,255,.965)!important;color:#203753!important;
 box-shadow:0 5px 16px rgba(18,51,91,.10)!important;cursor:pointer;font-size:11px!important;
 font-weight:820!important;padding:0 13px!important;display:flex;align-items:center;gap:10px;
 text-align:left;backdrop-filter:blur(10px)
}
.cleanIconBtn:hover,.megaRightBtn:hover{transform:translateY(-1px);background:#fff!important}
.megaRightBtn.active{background:var(--c-navy)!important;color:#fff!important;border-color:var(--c-navy)!important}
.megaRightBtn .ri,.cleanIconBtn .ri{text-align:center}
#cleanLocationBtn{display:none!important}
#megaLocateQuick{
 position:fixed;z-index:1110;right:29px;bottom:154px;width:42px;height:42px;
 border:1px solid #dbe4ef;border-radius:12px;background:rgba(255,255,255,.97);
 box-shadow:0 5px 16px rgba(18,51,91,.12);color:#28415f;font-size:17px;font-weight:900;cursor:pointer
}

#cleanMenuPanel,#cleanMenuBtn{display:none!important}
#filters{left:178px!important;top:82px!important;width:315px!important}
#favoritePanel{left:178px!important;top:82px!important;width:330px!important}
#disruptionPanel{left:178px!important;right:auto!important;top:82px!important;width:380px!important}
#navPanel{left:178px!important;top:82px!important;width:335px!important}
#layers{right:188px!important;top:82px!important;width:275px!important}
#statusPanel{right:188px!important;top:82px!important;width:365px!important}
#themePanel{right:188px;top:82px;width:285px}
.proPanel{
 border:1px solid rgba(219,228,239,.92)!important;background:rgba(255,255,255,.975)!important;
 border-radius:15px!important;box-shadow:0 14px 38px rgba(18,51,91,.16)!important;
 backdrop-filter:blur(15px)
}
.proPanel .ph{padding:11px 13px!important;background:#fff!important}
.proPanel .ph b{font-size:12px!important;color:#1c3553}

.themeChoices{display:grid;gap:7px}
.themeChoice{
 border:1px solid #e0e7f0;background:#fff;border-radius:11px;padding:10px;cursor:pointer;
 text-align:left;color:#243c59
}
.themeChoice:hover{background:#f8fafc}
.themeChoice.active{border-color:#7bcbd5;background:#eefafa;box-shadow:0 0 0 2px rgba(7,132,152,.08)}
.themeChoice b{display:block;font-size:10px}
.themeChoice small{display:block;font-size:8px;color:#718096;margin-top:3px}
.themeSwatch{width:100%;height:22px;border-radius:7px;margin-bottom:7px;border:1px solid #e2e8f0}
.sw-calm{background:linear-gradient(90deg,#f8faf8,#e5f1f7,#f0f5ed)}
.sw-standard{background:linear-gradient(90deg,#e6f5d4,#b9dcf4,#f6e8ca)}
.sw-mono{background:linear-gradient(90deg,#f7f7f7,#dfe5e9,#eceff1)}

#cleanStatusBar{
 left:22px!important;bottom:18px!important;transform:none!important;
 background:rgba(255,255,255,.965)!important;color:#263d59!important;
 border:1px solid rgba(219,228,239,.92)!important;border-radius:14px!important;
 box-shadow:0 7px 22px rgba(18,51,91,.12)!important;padding:10px 13px!important;
 font-size:9px!important;gap:11px!important;backdrop-filter:blur(12px)
}
#cleanNodeState{background:transparent!important;color:#15904b!important;padding:0!important;font-weight:950!important}
#cleanNodeState.warn{color:#b96c00!important}
#cleanNodeState.bad{color:#c8333f!important}

#megaLegendBar{
 position:fixed;z-index:1048;left:50%;bottom:18px;transform:translateX(-50%);
 display:flex;align-items:center;gap:8px;max-width:calc(100vw - 520px);
 background:rgba(255,255,255,.965);border:1px solid rgba(219,228,239,.92);
 border-radius:16px;padding:8px 10px;box-shadow:0 7px 22px rgba(18,51,91,.12);
 backdrop-filter:blur(12px)
}
.legendGroup{display:flex;gap:6px;align-items:center}
.legendSep{width:1px;height:26px;background:#e3e9f1;margin:0 3px}
.megaChip{
 border:1px solid #dfe6ee;background:#fff;border-radius:999px;height:31px;padding:0 10px;
 font-size:8px;font-weight:850;color:#384e68;cursor:pointer;display:flex;align-items:center;
 gap:6px;white-space:nowrap
}
.megaChip:hover{background:#f7f9fb}
.megaChip.active{background:#edf5ff;border-color:#9bc1ec;color:#185b9c}
.megaChip .chipIcon{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:950}
.megaChip .chipDot{width:9px;height:9px;border-radius:50%}
.mode-bus .chipIcon{background:#2d73bd}.mode-tram .chipIcon{background:#f08b2c}
.mode-metro .chipIcon{background:#d92e3a}.mode-train .chipIcon{background:#269357}
.mode-ferry .chipIcon{background:#1597a6}

.leaflet-popup-content-wrapper{
 border:1px solid rgba(219,228,239,.96)!important;border-radius:17px!important;
 box-shadow:0 18px 44px rgba(18,51,91,.20)!important;background:rgba(255,255,255,.985)!important
}
.leaflet-popup-tip-container{display:none!important}
.leaflet-popup-content{margin:0!important}
.vehiclePopup{width:385px!important;font-size:11px!important;color:#263d59}
.vehiclePopup .megaVHead{display:flex;align-items:flex-start;gap:9px;padding:14px 15px 12px;border-bottom:1px solid #e8edf3}
.vehiclePopup .lineBadge{background:#286eb6!important;border-radius:8px!important;padding:6px 8px!important;font-size:10px!important}
.vehiclePopup .megaVTitle{min-width:0;flex:1}
.vehiclePopup .megaVTitle b{display:block;font-size:13px;color:#1b3452;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vehiclePopup .megaVTitle small{display:block;margin-top:3px;color:#77869a;font-size:9px}
.vehiclePopup .megaInfo{display:grid;grid-template-columns:105px 1fr;gap:7px 10px;padding:11px 15px;border-bottom:1px solid #e8edf3}
.vehiclePopup .megaInfo .k{font-weight:850;color:#50637a}
.vehiclePopup .megaInfo .v{color:#2d425d}
.vehiclePopup .megaStopHead{padding:11px 15px 6px;font-weight:900;color:#203753}
.vehiclePopup .megaStops{padding:0 15px 9px}
.vehiclePopup .megaStopRow{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:start;min-height:27px}
.vehiclePopup .megaStopRail{position:relative;display:flex;justify-content:center;height:100%}
.vehiclePopup .megaStopRail:after{content:"";position:absolute;top:12px;bottom:-12px;width:2px;background:#dbe3eb}
.vehiclePopup .megaStopRow:last-child .megaStopRail:after{display:none}
.vehiclePopup .megaStopDot{position:relative;z-index:1;margin-top:4px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #cbd5e1}
.vehiclePopup .megaStopRow.current .megaStopDot{background:#087f95;border-color:#087f95}
.vehiclePopup .megaStopName{font-size:10px;padding-top:1px}
.vehiclePopup .megaStopTime{text-align:right;font-size:9px;color:#4d6076}
.vehiclePopup .megaStopTime small{display:block;color:#8a98aa;font-size:7px;margin-top:1px}
.vehiclePopup .nearbyBox{margin:0 15px 9px!important;padding-top:8px!important}
.vehiclePopup .popupActions{grid-template-columns:repeat(2,1fr)!important;gap:7px!important;padding:11px 15px 14px;margin:0!important;border-top:1px solid #e8edf3}
.vehiclePopup .popupActions button{min-height:38px!important;border-radius:9px!important;font-size:9px!important;background:#f0f3f7!important;color:#263d59!important}
.vehiclePopup .popupActions .primary{background:#286eb6!important;color:#fff!important}

.stopPopup{width:330px;color:#263d59}
.stopPopup h3{margin:0;font-size:13px;color:#1d3858}
.stopPopup .sub{color:#7b8a9d;font-size:8px;margin-top:3px}
.stopBoard{margin-top:9px;border-top:1px solid #e6ecf2}
.stopRow{display:grid;grid-template-columns:46px 1fr 50px;gap:7px;padding:7px 0;border-bottom:1px solid #eef2f6;align-items:center;font-size:9px}
.stopLine{justify-self:start;border-radius:6px;background:#286eb6;color:#fff;padding:4px 6px;font-weight:950;min-width:32px;text-align:center}
.stopDest{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stopTime{text-align:right;font-weight:900}
.stopEmpty{padding:12px 0;color:#7b8a9d;font-size:9px}

#routeBar{bottom:70px!important;border-radius:14px!important;border:1px solid #dde5ee!important;box-shadow:0 8px 28px rgba(18,51,91,.16)!important}
#lineFocusBanner{top:15px!important;background:rgba(18,51,91,.96)!important;border-radius:10px!important}

.leaflet-control-zoom{border:1px solid #dbe4ef!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 5px 16px rgba(18,51,91,.12)!important}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;color:#27415f!important;background:rgba(255,255,255,.97)!important;border-color:#e8edf3!important}

@media(max-width:980px){
 #megaBrand{font-size:17px;left:12px;top:13px}
 #megaBrand small{font-size:6px;margin-top:3px}
 #searchBox{left:105px!important;top:8px!important;width:min(360px,calc(100vw - 175px))!important;min-width:0!important}
 #searchRow{height:44px!important}
 #cleanLeftDock{left:8px!important;top:62px!important}
 .cleanBtn{width:46px!important;min-width:46px!important;height:42px!important;padding:0!important;justify-content:center}
 .cleanBtn .label,.cleanBtn .count,.cleanBtn .liveLabel{display:none!important}
 #cleanRightDock{right:8px!important;top:62px!important}
 .cleanIconBtn,.megaRightBtn{width:44px!important;height:42px!important;padding:0!important;justify-content:center}
 .megaRightBtn .rlabel,.cleanIconBtn .rlabel{display:none!important}
 #filters,#favoritePanel,#disruptionPanel,#navPanel,#layers,#statusPanel,#themePanel{
  left:7px!important;right:7px!important;top:auto!important;bottom:62px!important;width:auto!important
 }
 #cleanStatusBar{left:8px!important;bottom:8px!important;padding:7px 8px!important}
 #cleanStatusBar .hideNarrow{display:none!important}
 #megaLegendBar{right:8px;left:auto;bottom:8px;transform:none;max-width:calc(100vw - 215px);overflow-x:auto}
 .megaChip{padding:0 8px;height:29px}
 #megaLocateQuick{right:13px;bottom:134px}
 .vehiclePopup{width:min(330px,calc(100vw - 38px))!important}
}
@media(max-width:620px){
 #megaBrand{display:block;left:auto;right:11px;top:auto;bottom:calc(106px + env(safe-area-inset-bottom));font-size:13px;padding:6px 8px;border:1px solid rgba(219,228,239,.78);border-radius:10px;background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(18,51,91,.10);text-shadow:none}
 #megaBrand small{display:none}
 #searchBox{left:7px!important;width:calc(100vw - 64px)!important}
 #megaLegendBar{display:none}
 #cleanStatusBar{max-width:calc(100vw - 16px)}
 .vehiclePopup{width:min(285px,calc(100vw - 34px))!important}
}


/* ============================================================
   STYLE C V18 — RUSTIGER, MODERNER, MEER KAART
   ============================================================ */

/* Kaart veel rustiger zonder voertuigkleuren aan te tasten. */
body.map-theme-calm .leaflet-tile-pane{
 filter:saturate(.40) brightness(1.12) contrast(.76) opacity(.94)!important
}
body.map-theme-softgreen .leaflet-tile-pane{
 filter:saturate(.46) brightness(1.10) contrast(.78) sepia(.035) hue-rotate(52deg)!important
}
body.map-theme-minimal .leaflet-tile-pane{
 filter:saturate(.16) brightness(1.15) contrast(.70) opacity(.90)!important
}
body.map-theme-dark .leaflet-tile-pane{
 filter:invert(.92) hue-rotate(178deg) saturate(.46) brightness(.64) contrast(.92)!important
}
body.map-theme-dark #map{background:#142337}
body.map-theme-dark #megaBrand{color:#e6edf7;text-shadow:none}
body.map-theme-dark #megaBrand span{color:#54c5b0}

/* V46.21 — donkere modus UI ook echt donker */
body.map-theme-dark #searchBox{
 background:rgba(8,14,22,.88)!important;
 border-color:rgba(95,123,152,.42)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.36)!important;
}
body.map-theme-dark #searchRow{background:transparent!important}
body.map-theme-dark #searchInput{
 background:transparent!important;
 color:#e7eef7!important;
}
body.map-theme-dark #searchInput::placeholder{color:#99aabd!important}
body.map-theme-dark #searchIcon{color:#bdd0de!important}
body.map-theme-dark #searchResults{
 background:rgba(8,14,22,.97)!important;
 border-color:rgba(95,123,152,.30)!important;
 box-shadow:0 16px 36px rgba(0,0,0,.42)!important;
}
body.map-theme-dark #searchResults .sri:hover{background:rgba(255,255,255,.05)!important}

body.map-theme-dark .cleanBtn,
body.map-theme-dark .cleanIconBtn,
body.map-theme-dark .megaRightBtn,
body.map-theme-dark #megaLocateQuick,
body.map-theme-dark #mobileMapNav,
body.map-theme-dark #cleanStatusBar,
body.map-theme-dark #megaLegendBar{
 background:rgba(8,14,22,.88)!important;
 color:#e7eef7!important;
 border-color:rgba(95,123,152,.40)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
}
body.map-theme-dark .cleanBtn:hover,
body.map-theme-dark .cleanIconBtn:hover,
body.map-theme-dark .megaRightBtn:hover,
body.map-theme-dark #megaLocateQuick:hover,
body.map-theme-dark .mobileMapBtn:hover{
 background:rgba(14,21,31,.96)!important;
}
body.map-theme-dark .cleanBtn .icon,
body.map-theme-dark .cleanIconBtn .ri,
body.map-theme-dark .megaRightBtn .ri,
body.map-theme-dark .mobileMapBtn .mi,
body.map-theme-dark .mobileMapBtn .ml,
body.map-theme-dark #cleanStatusBar,
body.map-theme-dark #megaLegendBar{
 color:#e7eef7!important;
}
body.map-theme-dark .cleanBtn .count{
 background:rgba(38,52,68,.95)!important;
 color:#edf3fa!important;
 border-color:rgba(95,123,152,.28)!important;
}
body.map-theme-dark .cleanBtn.active,
body.map-theme-dark .megaRightBtn.active,
body.map-theme-dark .mobileMapBtn.active,
body.map-theme-dark #megaStopsBtn.active{
 background:#143552!important;
 color:#fff!important;
 border-color:#2a648e!important;
}
body.map-theme-dark .cleanBtn.active .count{
 background:rgba(255,255,255,.14)!important;
 color:#fff!important;
}
body.map-theme-dark #megaLiveBtn .liveLed{
 box-shadow:0 0 0 4px rgba(34,197,94,.18)!important;
}

body.map-theme-dark .proPanel{
 background:rgba(8,14,22,.96)!important;
 color:#e7eef7!important;
 border-color:rgba(95,123,152,.38)!important;
 box-shadow:0 18px 44px rgba(0,0,0,.45)!important;
}
body.map-theme-dark .proPanel .ph{
 background:rgba(8,14,22,.98)!important;
 color:#e7eef7!important;
 border-bottom-color:rgba(95,123,152,.22)!important;
}
body.map-theme-dark .proPanel .ph b,
body.map-theme-dark .proPanel .close,
body.map-theme-dark .proPanel label,
body.map-theme-dark .proPanel h5,
body.map-theme-dark .proPanel small,
body.map-theme-dark .proPanel .governorMeta,
body.map-theme-dark .proPanel .bpHint{
 color:#d5e1ec!important;
}
body.map-theme-dark .proPanel input,
body.map-theme-dark .proPanel select,
body.map-theme-dark .proPanel textarea,
body.map-theme-dark .themeChoice,
body.map-theme-dark .searchQuick,
body.map-theme-dark .presetBtn.light,
body.map-theme-dark .governorProfiles button,
body.map-theme-dark .densityProfiles button,
body.map-theme-dark .bpGrid>div,
body.map-theme-dark .stopLiveSummary,
body.map-theme-dark .stopBoardActions button,
body.map-theme-dark .navCard,
body.map-theme-dark .favItem,
body.map-theme-dark .disItem{
 background:rgba(17,25,37,.94)!important;
 color:#e7eef7!important;
 border-color:rgba(95,123,152,.26)!important;
}
body.map-theme-dark .themeChoice:hover,
body.map-theme-dark .searchQuick:hover,
body.map-theme-dark .presetBtn.light:hover,
body.map-theme-dark .governorProfiles button:hover,
body.map-theme-dark .densityProfiles button:hover,
body.map-theme-dark .stopBoardActions button:hover,
body.map-theme-dark .navCard:hover,
body.map-theme-dark .favItem:hover,
body.map-theme-dark .disItem:hover{
 background:rgba(24,35,50,.98)!important;
}
body.map-theme-dark .themeChoice.active,
body.map-theme-dark .governorProfiles button.active,
body.map-theme-dark .densityProfiles button.active{
 background:#12354e!important;
 border-color:#2d698f!important;
 color:#fff!important;
 box-shadow:0 0 0 2px rgba(69,135,181,.16)!important;
}
body.map-theme-dark .themeChoice small,
body.map-theme-dark .favItem small,
body.map-theme-dark .navCard small,
body.map-theme-dark .bpGrid small{
 color:#9fb0c3!important;
}
body.map-theme-dark .megaChip{
 background:rgba(17,25,37,.94)!important;
 color:#dfe8f2!important;
 border-color:rgba(95,123,152,.25)!important;
}
body.map-theme-dark .megaChip:hover{background:rgba(24,35,50,.98)!important}
body.map-theme-dark .megaChip.active{background:#143552!important;border-color:#2a648e!important;color:#fff!important}
body.map-theme-dark .leaflet-control-zoom{
 border-color:rgba(95,123,152,.38)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
}
body.map-theme-dark .leaflet-control-zoom a{
 background:rgba(8,14,22,.92)!important;
 color:#e7eef7!important;
 border-color:rgba(95,123,152,.30)!important;
}


/* Minder dominante UI. */
@media(max-width:980px){
#megaBrand{left:20px!important;top:18px!important;font-size:21px!important}
#searchBox{
 left:135px!important;top:10px!important;
 width:min(500px,calc(100vw - 610px))!important;
 min-width:330px!important;border-radius:15px!important;
 box-shadow:0 5px 18px rgba(18,51,91,.085)!important
}
#searchRow{height:47px!important}
#searchInput{font-size:12px!important}
}

@media(max-width:980px){
#cleanLeftDock{left:18px!important;top:72px!important;gap:7px!important}
.cleanBtn{
 width:132px!important;min-width:132px!important;height:43px!important;
 border-radius:11px!important;padding:0 11px!important;
 font-size:10px!important;box-shadow:0 4px 13px rgba(18,51,91,.085)!important
}
.cleanBtn .icon{font-size:14px!important;width:18px!important}

#cleanRightDock{right:18px!important;top:72px!important;gap:7px!important}
.cleanIconBtn,.megaRightBtn{
 width:143px!important;height:43px!important;border-radius:11px!important;
 padding:0 11px!important;font-size:10px!important;
 box-shadow:0 4px 13px rgba(18,51,91,.085)!important
}
#megaLocateQuick{
 right:22px!important;bottom:135px!important;width:39px!important;height:39px!important;
 box-shadow:0 4px 13px rgba(18,51,91,.09)!important
}
}

/* Panelen subtieler. */
#filters,#favoritePanel,#disruptionPanel,#navPanel{
 left:160px!important;top:72px!important
}
#layers,#statusPanel,#themePanel{
 right:170px!important;top:72px!important
}
.proPanel{
 border-radius:13px!important;
 box-shadow:0 11px 30px rgba(18,51,91,.13)!important
}

/* Status en legenda compacter. */
#cleanStatusBar{
 left:18px!important;bottom:12px!important;padding:8px 11px!important;
 border-radius:12px!important;font-size:8px!important;gap:9px!important;
 box-shadow:0 5px 16px rgba(18,51,91,.09)!important
}
#megaLegendBar{
 bottom:12px!important;padding:6px 8px!important;border-radius:13px!important;
 gap:6px!important;box-shadow:0 5px 16px rgba(18,51,91,.09)!important;
 max-width:calc(100vw - 470px)!important
}
.megaChip{
 height:28px!important;padding:0 8px!important;font-size:7.5px!important;gap:5px!important
}
.megaChip .chipIcon{width:16px!important;height:16px!important}
.legendSep{height:22px!important}

/* Markerbadges rustiger en iets kleiner. */
.ov-marker{
 height:27px!important;min-width:34px!important;padding:0 6px!important;
 border-width:2px!important;border-radius:8px!important;font-size:10px!important;
 box-shadow:0 2px 5px rgba(18,51,91,.25)!important
}
.ov-punct{width:9px!important;height:9px!important;border-width:2px!important}

/* Smart clusters bij ver uitzoomen. */
.clusterMarker{
 min-width:31px;height:31px;padding:0 7px;border-radius:999px;
 display:flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.96);color:#1f4f85;
 border:2px solid #6ca0cf;box-shadow:0 3px 10px rgba(18,51,91,.22);
 font-size:9px;font-weight:950;transform:translate(-50%,-50%)
}
.clusterMarker.big{
 min-width:38px;height:38px;background:#1f5f99;color:#fff;border-color:#fff
}

/* Verstoring minder agressief. */
.disruptionIcon{
 width:22px!important;height:22px!important;
 background:#d84b53!important;font-size:11px!important
}
@media(max-width:980px){
.cleanBtn .count{font-size:7.5px!important}
}

/* Compacte voertuigpopup. Details blijven beschikbaar via uitklappen. */
.vehiclePopup{width:330px!important}
.vehiclePopup .megaVHead{padding:12px 13px 10px!important}
.vehiclePopup .megaInfo{
 grid-template-columns:92px 1fr!important;
 padding:9px 13px!important;gap:6px 9px!important
}
.vehiclePopup .megaStopHead{padding:9px 13px 5px!important}
.vehiclePopup .megaStops{padding:0 13px 7px!important}
.vehiclePopup details{
 margin:0 13px 9px;border:1px solid #e7edf3;border-radius:9px;background:#fafbfd
}
.vehiclePopup summary{
 list-style:none;cursor:pointer;padding:8px 9px;font-size:9px;font-weight:900;color:#31506f
}
.vehiclePopup summary::-webkit-details-marker{display:none}
.vehiclePopup summary:after{content:"⌄";float:right;color:#718096}
.vehiclePopup details[open] summary:after{content:"⌃"}
.vehiclePopup .popupActions{padding:9px 13px 12px!important}
.vehiclePopup .popupActions button{min-height:34px!important}

/* Extra thema's */
.sw-softgreen{background:linear-gradient(90deg,#f7faf4,#e8f3e5,#e7f3f1)}
.sw-minimal{background:linear-gradient(90deg,#fcfcfc,#eef2f4,#f7f8f9)}
.sw-dark{background:linear-gradient(90deg,#142337,#203b51,#112b37)}

/* Lage zoom hint subtiel. */
#lowZoomHint{
 background:rgba(18,51,91,.88)!important;font-size:7px!important;
 padding:4px 7px!important
}

/* Mobiel nog eenvoudiger. */
@media(max-width:980px){
 #megaBrand{left:10px!important;top:16px!important}
 #searchBox{left:94px!important;width:min(350px,calc(100vw - 158px))!important}
 #cleanLeftDock{left:7px!important;top:58px!important}
 #cleanRightDock{right:7px!important;top:58px!important}
 #cleanStatusBar{left:7px!important;bottom:7px!important}
 #megaLegendBar{bottom:7px!important}
}


/* ============================================================
   V19 — ADAPTIVE CALM MAP
   ============================================================ */
#map{background:#f8fafc!important}

body.map-theme-calm.map-detail-overview .leaflet-tile-pane{
 filter:saturate(.20) brightness(1.19) contrast(.62)!important;opacity:.70!important
}
body.map-theme-calm.map-detail-city .leaflet-tile-pane{
 filter:saturate(.29) brightness(1.16) contrast(.68)!important;opacity:.78!important
}
body.map-theme-calm.map-detail-street .leaflet-tile-pane{
 filter:saturate(.42) brightness(1.11) contrast(.76)!important;opacity:.88!important
}
body.map-theme-softgreen.map-detail-overview .leaflet-tile-pane{
 filter:saturate(.28) brightness(1.17) contrast(.65) sepia(.025) hue-rotate(50deg)!important;opacity:.73!important
}
body.map-theme-minimal .leaflet-tile-pane{
 filter:saturate(.08) brightness(1.18) contrast(.60)!important;opacity:.72!important
}
body.map-theme-dark .leaflet-tile-pane{
 filter:invert(.92) hue-rotate(178deg) saturate(.45) brightness(.62) contrast(.90)!important;opacity:.94!important
}
body.map-theme-standard .leaflet-tile-pane{filter:none!important;opacity:1!important}

#mapCalmVeil{
 position:fixed;inset:0;z-index:240;pointer-events:none;
 background:rgba(255,255,255,.10);transition:background .18s ease
}
body.map-detail-overview #mapCalmVeil{background:rgba(255,255,255,.25)}
body.map-detail-city #mapCalmVeil{background:rgba(255,255,255,.16)}
body.map-detail-street #mapCalmVeil{background:rgba(255,255,255,.08)}
body.map-theme-standard #mapCalmVeil{background:transparent}
body.map-theme-dark #mapCalmVeil{background:rgba(8,20,36,.05)}
body.map-theme-minimal #mapCalmVeil{background:rgba(255,255,255,.22)}
body.map-theme-softgreen #mapCalmVeil{background:rgba(248,253,247,.13)}

@media(max-width:980px){
#megaBrand{left:18px!important;top:17px!important;font-size:19px!important}
#searchBox{
 left:122px!important;top:9px!important;width:min(455px,calc(100vw - 555px))!important;
 min-width:310px!important;border-radius:14px!important
}
#searchRow{height:44px!important}
#searchInput{font-size:11px!important}
#searchIcon{font-size:15px!important}

#cleanLeftDock{left:16px!important;top:66px!important;gap:6px!important}
.cleanBtn{
 width:118px!important;min-width:118px!important;height:39px!important;
 border-radius:10px!important;padding:0 9px!important;font-size:9px!important
}
.cleanBtn .icon{width:16px!important;font-size:12px!important}
.cleanBtn .count{height:19px!important;min-width:19px!important;padding:0 5px!important}

#cleanRightDock{right:16px!important;top:66px!important;gap:6px!important}
.cleanIconBtn,.megaRightBtn{
 width:128px!important;height:39px!important;border-radius:10px!important;
 padding:0 9px!important;font-size:9px!important
}
.megaRightBtn .ri,.cleanIconBtn .ri{width:17px!important;font-size:12px!important}

#filters,#favoritePanel,#disruptionPanel,#navPanel{left:146px!important;top:66px!important}
#layers,#statusPanel,#themePanel{right:154px!important;top:66px!important}

#megaLocateQuick{
 right:19px!important;bottom:119px!important;width:36px!important;height:36px!important;
 border-radius:10px!important
}
}

@media(max-width:980px){
#cleanStatusBar{
 left:16px!important;bottom:9px!important;padding:6px 9px!important;
 border-radius:10px!important;font-size:7.5px!important;gap:7px!important
}
#megaLegendBar{
 bottom:9px!important;padding:5px 7px!important;border-radius:11px!important;
 max-width:calc(100vw - 410px)!important
}
.megaChip{height:25px!important;padding:0 7px!important;font-size:7px!important}
.megaChip .chipIcon{width:14px!important;height:14px!important;font-size:7px!important}
.megaChip .chipDot{width:7px!important;height:7px!important}
.legendSep{height:19px!important}
}

@media(max-width:980px){
.ov-marker{
 height:25px!important;min-width:31px!important;padding:0 5px!important;
 border-radius:7px!important;font-size:9px!important;
 box-shadow:0 2px 4px rgba(18,51,91,.20)!important
}
.ov-punct{width:8px!important;height:8px!important;right:-3px!important;bottom:-3px!important}
}

.clusterMarker{
 min-width:28px!important;height:28px!important;border-width:1.5px!important;
 font-size:8px!important;box-shadow:0 2px 7px rgba(18,51,91,.16)!important
}
.clusterMarker.big{min-width:34px!important;height:34px!important}

body.map-detail-overview .disruptionIcon{transform:scale(.78);opacity:.78}
body.map-detail-city .disruptionIcon{transform:scale(.90);opacity:.90}

@media(max-width:980px){
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important}
}

#adaptiveMapInfo{
 margin-top:8px;padding:8px;border:1px solid #e6ecf2;border-radius:9px;
 background:#f8fafc;font-size:8px;color:#64748b;line-height:1.35
}
#adaptiveMapInfo b{color:#2b4766}

@media(max-width:980px){
 #megaBrand{font-size:16px!important;left:9px!important}
 #searchBox{left:82px!important;width:min(330px,calc(100vw - 140px))!important}
 #cleanLeftDock{left:6px!important;top:55px!important}
 #cleanRightDock{right:6px!important;top:55px!important}
 .cleanBtn,.cleanIconBtn,.megaRightBtn{
  width:40px!important;min-width:40px!important;height:37px!important;padding:0!important
 }
 #cleanStatusBar{left:6px!important;bottom:6px!important}
 #megaLegendBar{bottom:6px!important}
 #megaLocateQuick{right:10px!important;bottom:108px!important}
}


/* V20 NACHT — exact gevraagde filter, alleen op kaarttegels */
body.map-theme-dark .leaflet-tile-pane{
 filter:brightness(0.6) invert(1) contrast(3) hue-rotate(0) saturate(0) brightness(0.3)!important;
 opacity:1!important
}
body.map-theme-dark #mapCalmVeil{background:rgba(0,0,0,.02)!important}


/* Admin-public notice v22 */
#adminPublicNotice{
 position:fixed;z-index:1135;top:61px;left:50%;transform:translateX(-50%);
 width:min(680px,calc(100vw - 330px));display:none;align-items:center;gap:8px;
 border:1px solid #b8d5ec;border-left:4px solid #2875bc;border-radius:10px;
 background:rgba(255,255,255,.97);color:#25415e;padding:8px 10px;
 box-shadow:0 6px 19px rgba(18,51,91,.12);font-size:8px;font-weight:800
}
#adminPublicNotice.show{display:flex}
#adminPublicNotice.warn{border-color:#f3cf91;border-left-color:#d9850b;background:#fffaf0}
#adminPublicNotice.error{border-color:#f0b6bd;border-left-color:#c83f4a;background:#fff5f6}
#adminPublicNoticeText{flex:1}
#adminPublicNoticeLink{color:#1766a5;text-decoration:none;font-weight:950;white-space:nowrap}
#adminPublicNoticeClose{border:0;background:transparent;color:#718096;font-weight:950;padding:2px 4px}
@media(max-width:980px){#adminPublicNotice{top:52px;width:calc(100vw - 105px);left:52px;transform:none}}
@media(max-width:620px){#adminPublicNotice{left:7px;right:7px;width:auto;top:56px}}


/* ============================================================
   V24 MOBILE FIRST — LIVE KAART
   ============================================================ */
#mobileMapNav,#mobileMapMore,#mobileMapScrim{display:none}
@media(max-width:760px){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 body{touch-action:manipulation}
 #cleanLeftDock,#cleanRightDock,#proLeftDock,#proRightDock{display:none!important}
 #megaBrand{display:none!important}
 #searchBox{position:fixed!important;top:calc(7px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;width:auto!important;min-width:0!important;z-index:1180!important;border-radius:13px!important;box-shadow:0 5px 18px rgba(18,51,91,.14)!important}
 #searchRow{height:45px!important}
 #searchInput{font-size:16px!important;padding:0 13px!important}
 #searchResults{max-height:min(56vh,430px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
 #adminPublicNotice{top:calc(60px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;width:auto!important;transform:none!important;font-size:10px!important;padding:9px 10px!important;z-index:1175!important}

 #mobileMapNav{position:fixed;z-index:1210;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));height:62px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:5px;border:1px solid rgba(211,222,234,.98);border-radius:17px;background:rgba(255,255,255,.97);box-shadow:0 9px 30px rgba(18,51,91,.20);backdrop-filter:blur(16px)}
 .mobileMapBtn{position:relative;border:0;background:transparent;color:#29425e;border-radius:11px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:850;padding:2px}
 .mobileMapBtn .mi{font-size:18px;line-height:19px}.mobileMapBtn .ml{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobileMapBtn.active{background:#153a61;color:#fff}
 .mobileMapBtn .badge{position:absolute;top:2px;right:8px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#e8eef5;color:#435871;font-size:7px;border:1px solid #d7e0ea}.mobileMapBtn.active .badge{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}

 #mobileMapScrim{display:block;position:fixed;inset:0;z-index:1195;background:rgba(5,17,30,.38);opacity:0;pointer-events:none;transition:.16s}
 #mobileMapScrim.open{opacity:1;pointer-events:auto}
 #mobileMapMore{display:block;position:fixed;z-index:1200;left:8px;right:8px;bottom:calc(79px + env(safe-area-inset-bottom));max-height:min(67vh,560px);overflow:auto;-webkit-overflow-scrolling:touch;background:rgba(255,255,255,.985);border:1px solid #dbe4ee;border-radius:17px;box-shadow:0 15px 45px rgba(18,51,91,.25);transform:translateY(calc(100% + 100px));opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease;padding:8px}
 #mobileMapMore.open{transform:translateY(0);opacity:1;pointer-events:auto}
 .mobileMoreHead{display:flex;align-items:center;justify-content:space-between;padding:8px 9px 10px;font-size:13px;font-weight:950;color:#193958}.mobileMoreClose{width:36px;height:36px;border:0;border-radius:9px;background:#eef3f7;color:#314a65;font-size:19px}
 .mobileMoreGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.mobileMoreItem{min-height:57px;border:1px solid #e0e7ef;border-radius:11px;background:#f8fafc;color:#29425e;text-align:left;padding:8px 10px;font-size:10px;font-weight:850}.mobileMoreItem small{display:block;color:#7b8999;font-size:8px;margin-top:3px;font-weight:600}.mobileMoreItem.primary{background:#173e67;color:#fff;border-color:#173e67}.mobileMoreItem.primary small{color:#cbd9e7}

 #filters,#favoritePanel,#disruptionPanel,#navPanel,#layers,#statusPanel,#themePanel,#cleanMenuPanel{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(79px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;max-height:min(68vh,590px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch;border-radius:17px!important;z-index:1205!important;box-shadow:0 16px 45px rgba(18,51,91,.25)!important}
 .proPanel .ph{position:sticky;top:0;z-index:2;min-height:48px!important;background:rgba(255,255,255,.985)!important}.proPanel .ph b{font-size:13px!important}.proPanel .close{width:38px!important;height:38px!important;font-size:20px!important}
 #filters button,#favoritePanel button,#disruptionPanel button,#navPanel button,#layers button,#statusPanel button,#themePanel button,#cleanMenuPanel button{min-height:42px}
 .themeChoice{padding:11px!important}.themeChoice b{font-size:11px!important}.themeChoice small{font-size:9px!important}

 #megaLegendBar{display:none!important}
 body.mobileLegendOpen #megaLegendBar{display:flex!important;position:fixed!important;z-index:1204!important;left:8px!important;right:8px!important;width:auto!important;max-width:none!important;bottom:calc(79px + env(safe-area-inset-bottom))!important;transform:none!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;white-space:nowrap;border-radius:14px!important;padding:7px!important}
 body.mobileLegendOpen #megaLegendBar .legendGroup{flex:none} body.mobileLegendOpen #megaLegendBar .megaChip{height:36px!important;font-size:9px!important;padding:0 9px!important}

 #cleanStatusBar{left:8px!important;right:auto!important;bottom:calc(79px + env(safe-area-inset-bottom))!important;padding:6px 8px!important;font-size:8px!important;gap:6px!important;max-width:calc(100vw - 105px)!important;z-index:1160!important;border-radius:10px!important} #cleanStatusBar .hideNarrow{display:none!important}
 .leaflet-bottom.leaflet-right{bottom:calc(76px + env(safe-area-inset-bottom))!important}.leaflet-control-zoom a{width:43px!important;height:43px!important;line-height:43px!important;font-size:20px!important}
 #megaLocateQuick{right:10px!important;bottom:calc(178px + env(safe-area-inset-bottom))!important;width:44px!important;height:44px!important;font-size:18px!important}

 .leaflet-popup{max-width:calc(100vw - 18px)!important}.leaflet-popup-content-wrapper{max-width:calc(100vw - 18px)!important;border-radius:15px!important}.leaflet-popup-content{max-height:min(62vh,520px);overflow:auto;-webkit-overflow-scrolling:touch}.vehiclePopup{width:min(340px,calc(100vw - 48px))!important;max-width:100%!important}.vehiclePopup .megaInfo{grid-template-columns:78px 1fr!important}.vehiclePopup .popupActions button{min-height:42px!important;font-size:10px!important}.stopPopup{width:min(330px,calc(100vw - 48px))!important}
 #routeBar{left:8px!important;right:8px!important;width:auto!important;bottom:calc(81px + env(safe-area-inset-bottom))!important;transform:none!important;max-height:48vh;overflow:auto} #routeBar button{min-height:41px!important}
 #lineFocusBanner{top:calc(61px + env(safe-area-inset-top))!important;max-width:calc(100vw - 16px)!important}
 #liveHealth,#perf,#proLegend{display:none!important} #lowZoomHint{bottom:calc(81px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 120px);font-size:8px!important}
}
@media(max-width:760px) and (orientation:landscape) and (max-height:560px){#mobileMapNav{height:54px}#mobileMapMore,#filters,#favoritePanel,#disruptionPanel,#navPanel,#layers,#statusPanel,#themePanel,#cleanMenuPanel{bottom:calc(70px + env(safe-area-inset-bottom))!important;max-height:60vh!important}#cleanStatusBar,body.mobileLegendOpen #megaLegendBar{bottom:calc(70px + env(safe-area-inset-bottom))!important}}
@media(max-width:380px){#mobileMapNav{left:5px;right:5px;gap:2px}.mobileMapBtn{font-size:8px}.mobileMoreGrid{grid-template-columns:1fr 1fr}#searchBox{left:6px!important;right:6px!important}}


/* ============================================================
   V25 — MOBIELE HALTES TOUCH FIX
   Groot raakvlak, klein zichtbaar stipje.
   ============================================================ */
.mobileStopTouch{
 width:38px!important;height:38px!important;
 margin:0!important;padding:0!important;
 background:transparent!important;border:0!important;
 pointer-events:auto!important
}
.mobileStopTouch .mobileStopDot{
 position:absolute;left:50%;top:50%;
 width:12px;height:12px;transform:translate(-50%,-50%);
 border-radius:50%;background:#fff;border:3px solid #078498;
 box-shadow:0 2px 7px rgba(18,51,91,.24)
}
.mobileStopTouch:active .mobileStopDot{
 transform:translate(-50%,-50%) scale(1.2)
}


/* ============================================================
   V26 — QUICK VEHICLE INFO + LIVE NEXT 3 STOPS
   ============================================================ */
.vehiclePopup .nextStopsAlways{padding:0 13px 7px!important}
.vehiclePopup .nextStopsAlways .megaStopRow{min-height:34px}
.vehiclePopup .nextStopsAlways .megaStopRow:nth-child(1) .megaStopDot{background:#078498!important;border-color:#078498!important}
.vehiclePopup .nextStopsAlways .megaStopRow:nth-child(1) .megaStopName{font-weight:900;color:#183b5b}
.vehiclePopup .nextStopsMeta{margin-left:auto;font-size:7px;color:#8090a2;font-weight:800}
.vehiclePopup .moreStopsDetails{margin:0 13px 9px!important}
.vehiclePopup .moreStopsDetails summary{min-height:33px;display:flex;align-items:center}
.vehiclePopup .stopEmptyCompact{padding:8px 0 10px;color:#7b8795;font-size:8px}
@media(max-width:760px){
 .vehiclePopup .nextStopsAlways .megaStopRow{min-height:39px}
 .vehiclePopup .megaStopName{font-size:10px}
 .vehiclePopup .megaStopTime{font-size:9px}
}


/* ============================================================
   V28 — OPTIE 3: HORIZONTALE HALTEBALK
   Compacte voertuigkaart; 3 volgende haltes naast elkaar.
   ============================================================ */
.vehiclePopup{width:330px!important}
.vehiclePopup .megaVHead{padding:10px 12px 9px!important}
.vehiclePopup .megaInfo{
 display:flex!important;grid-template-columns:none!important;gap:5px!important;
 padding:6px 12px!important;font-size:9px!important;align-items:center
}
.vehiclePopup .megaInfo .k{font-size:8px!important}
.vehiclePopup .megaInfo .v{margin-right:8px!important;font-weight:900}
.vehiclePopup .megaStopHead{
 display:flex;align-items:center;justify-content:space-between;
 padding:8px 12px 4px!important;font-size:9px!important
}
.vehiclePopup .nextStopsMeta{font-size:0!important}
.vehiclePopup .nextStopsMeta:after{
 content:"LIVE";font-size:6.5px;color:#087b68;background:#e9f8f3;
 border-radius:999px;padding:3px 6px;font-weight:950
}
.vehiclePopup .nextStopsAlways{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:0!important;padding:5px 12px 9px!important;overflow:visible!important
}
.vehiclePopup .nextStopsAlways .megaStopRow{
 position:relative!important;display:block!important;min-height:48px!important;
 padding:17px 5px 0 0!important;overflow:visible!important
}
.vehiclePopup .nextStopsAlways .megaStopRail{
 position:absolute!important;left:0!important;right:0!important;top:2px!important;
 height:12px!important;display:block!important
}
.vehiclePopup .nextStopsAlways .megaStopRail:after{
 content:""!important;display:block!important;position:absolute!important;
 left:7px!important;right:-7px!important;top:4px!important;bottom:auto!important;
 width:auto!important;height:2px!important;background:#d8e2ec!important
}
.vehiclePopup .nextStopsAlways .megaStopRow:last-child .megaStopRail:after{
 right:calc(100% - 7px)!important
}
.vehiclePopup .nextStopsAlways .megaStopDot{
 position:absolute!important;left:2px!important;top:0!important;margin:0!important;
 width:9px!important;height:9px!important;box-sizing:border-box!important
}
.vehiclePopup .nextStopsAlways .megaStopName{
 display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
 overflow:hidden!important;font-size:8px!important;line-height:1.25!important;
 padding:0!important;max-width:92px!important;color:#3b5068!important
}
.vehiclePopup .nextStopsAlways .megaStopRow:first-child .megaStopName{font-weight:900!important;color:#183b5b!important}
.vehiclePopup .nextStopsAlways .megaStopTime{display:none!important}
.vehiclePopup .moreStopsDetails{margin:0 12px 7px!important}
.vehiclePopup .moreStopsDetails summary{min-height:28px!important;padding:5px 8px!important;font-size:8px!important}
.vehiclePopup .popupActions{
 grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;
 padding:7px 12px 9px!important
}
.vehiclePopup .popupActions button{min-height:31px!important;padding:4px 2px!important;font-size:7.5px!important}
@media(max-width:760px){
 .vehiclePopup{width:min(330px,calc(100vw - 42px))!important}
 .vehiclePopup .nextStopsAlways .megaStopRow{min-height:55px!important}
 .vehiclePopup .nextStopsAlways .megaStopName{font-size:8.5px!important;max-width:88px!important}
 .vehiclePopup .popupActions{grid-template-columns:repeat(2,1fr)!important}
 .vehiclePopup .popupActions button{min-height:40px!important;font-size:9px!important}
}


/* ============================================================
   V29 — ULTRA COMPACT HORIZONTAL VEHICLE POPUP
   ============================================================ */
.vehiclePopup{width:300px!important}
.vehiclePopup .megaVHead{padding:8px 10px 6px!important}
.vehiclePopup .quickMeta{
 padding:4px 10px!important;
 font-size:7.5px!important;
 border-bottom:1px solid #e8edf3
}
.vehiclePopup .megaStopHead{
 padding:5px 10px 1px!important;
 min-height:18px!important
}
.vehiclePopup .horizontalStopBar{
 padding:2px 10px 4px!important;
 min-height:47px!important
}
.vehiclePopup .horizontalStopBar .hStopName{
 font-size:7.5px!important;
 line-height:1.15!important;
 -webkit-line-clamp:2!important
}
.vehiclePopup .moreStopsDetails{
 margin:0 10px 4px!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important
}
.vehiclePopup .moreStopsDetails summary{
 justify-content:flex-end!important;
 min-height:19px!important;
 padding:0!important;
 color:#50708d!important;
 font-size:7.5px!important;
 background:transparent!important
}
.vehiclePopup .moreStopsDetails summary:before{content:"+"}
.vehiclePopup .moreStopsDetails[open]{
 border:1px solid #e4eaf0!important;
 padding:4px!important
}
.vehiclePopup .popupActions{
 display:grid!important;
 grid-template-columns:1.2fr 1fr .55fr .55fr!important;
 gap:4px!important;
 padding:5px 10px 7px!important;
 border-top:1px solid #edf1f5
}
.vehiclePopup .popupActions button{
 min-height:27px!important;
 border-radius:7px!important;
 font-size:7px!important;
 padding:2px!important
}
.vehiclePopup .nextStopsMeta:after{
 height:15px!important;
 font-size:6px!important
}
@media(max-width:760px){
 .vehiclePopup{width:min(300px,calc(100vw - 42px))!important}
 .vehiclePopup .horizontalStopBar{min-height:52px!important}
 .vehiclePopup .popupActions{
  grid-template-columns:1.2fr 1fr .65fr .65fr!important
 }
 .vehiclePopup .popupActions button{
  min-height:34px!important;
  font-size:8px!important
 }
}


/* ============================================================
   V30 — SPACE OPTIMIZED VEHICLE POPUP
   ============================================================ */
.vehiclePopup .stopBarLine{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;
 gap:6px!important;
 align-items:end!important;
 padding:0 10px 2px!important
}
.vehiclePopup .stopBarLine .nextStopsAlways{
 padding:4px 0 3px!important;
 min-width:0!important
}
.vehiclePopup .extraStopsMini{
 align-self:end!important;
 border:0!important;
 background:transparent!important;
 color:#496b8a!important;
 min-height:22px!important;
 padding:0 0 3px!important;
 font-size:7.5px!important;
 font-weight:900!important;
 white-space:nowrap!important
}
.vehiclePopup .extraStopsMini:hover{color:#173e67!important}
.vehiclePopup .extraStopsPanel{
 margin:0 10px 4px!important;
 border:1px solid #e4eaf0!important;
 border-radius:8px!important;
 background:#fbfcfd!important;
 padding:5px!important
}
.vehiclePopup .extraStopsPanel.hidden{display:none!important}
.vehiclePopup .extraStopsPanel .megaStops{padding:0!important}

/* Zelfde lijn dichtbij is standaard alleen een kleine tekstregel. */
.vehiclePopup .nearbyMiniDetails{
 margin:0 10px 3px!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important
}
.vehiclePopup .nearbyMiniDetails summary{
 list-style:none!important;
 display:flex!important;
 justify-content:flex-end!important;
 align-items:center!important;
 min-height:20px!important;
 padding:0!important;
 background:transparent!important;
 color:#526f8b!important;
 font-size:7.5px!important;
 font-weight:850!important
}
.vehiclePopup .nearbyMiniDetails summary::-webkit-details-marker{display:none!important}
.vehiclePopup .nearbyMiniDetails summary:after{content:' ›';margin-left:2px}
.vehiclePopup .nearbyMiniDetails[open]{
 border:1px solid #e4eaf0!important;
 border-radius:8px!important;
 padding:5px!important;
 background:#fbfcfd!important
}
.vehiclePopup .nearbyMiniDetails[open] summary{
 justify-content:flex-start!important;
 padding-bottom:4px!important
}
.vehiclePopup .nearbyMiniDetails[open] summary:after{content:' ⌃'}
.vehiclePopup .nearbyMiniDetails .nearbyBox{margin:0!important;padding:0!important;border:0!important}

/* Nog een paar pixels winst. */
.vehiclePopup .megaStopHead{padding:4px 10px 0!important;min-height:17px!important}
.vehiclePopup .popupActions{padding:4px 10px 6px!important}
.vehiclePopup .popupActions button{min-height:26px!important}

@media(max-width:760px){
 .vehiclePopup .stopBarLine{gap:4px!important}
 .vehiclePopup .extraStopsMini{min-height:30px!important;font-size:8px!important}
 .vehiclePopup .nearbyMiniDetails summary{min-height:30px!important;font-size:8.5px!important}
 .vehiclePopup .popupActions button{min-height:36px!important}
}


/* ============================================================
   V31 — MOBILE VEHICLE POPUP POLISH
   ============================================================ */
@media(max-width:760px){

 /* Popup zo breed mogelijk zonder tegen schermrand te plakken. */
 .leaflet-popup{
  max-width:calc(100vw - 12px)!important
 }
 .leaflet-popup-content-wrapper{
  max-width:calc(100vw - 12px)!important;
  border-radius:14px!important
 }
 .leaflet-popup-content{
  margin:7px!important;
  max-height:min(58vh,470px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch
 }
 .vehiclePopup{
  width:min(328px,calc(100vw - 32px))!important;
  max-width:none!important
 }

 /* Header compacter. */
 .vehiclePopup .megaVHead{
  padding:7px 9px 5px!important;
  gap:6px!important
 }
 .vehiclePopup .lineBadge{
  padding:5px 7px!important;
  font-size:9px!important
 }
 .vehiclePopup .megaVTitle b{
  font-size:10.5px!important;
  line-height:1.15!important
 }
 .vehiclePopup .megaVTitle small{
  font-size:7.5px!important;
  line-height:1.2!important;
  margin-top:1px!important
 }

 /* Eén dunne metadataregel. */
 .vehiclePopup .quickMeta{
  padding:4px 9px!important;
  gap:5px!important;
  font-size:7.5px!important;
  white-space:nowrap!important;
  overflow:hidden!important
 }

 /* Kop + LIVE zeer klein. */
 .vehiclePopup .megaStopHead{
  padding:4px 9px 0!important;
  min-height:17px!important;
  font-size:8.5px!important
 }
 .vehiclePopup .nextStopsMeta:after{
  height:15px!important;
  padding:0 5px!important;
  font-size:6px!important
 }

 /* Drie haltes blijven naast elkaar, maar met kortere labels en minder hoogte. */
 .vehiclePopup .stopBarLine{
  padding:0 9px 1px!important;
  gap:3px!important
 }
 .vehiclePopup .horizontalStopBar,
 .vehiclePopup .nextStopsAlways{
  min-height:43px!important;
  padding:3px 0 2px!important
 }
 .vehiclePopup .horizontalStopBar .hStopName{
  font-size:7.2px!important;
  line-height:1.12!important;
  -webkit-line-clamp:2!important
 }
 .vehiclePopup .horizontalStopBar .hStopDot{
  width:8px!important;height:8px!important
 }
 .vehiclePopup .extraStopsMini{
  min-height:25px!important;
  font-size:7px!important;
  padding-bottom:1px!important
 }

 /* Nearby / extra alleen als compacte tekstregel gesloten. */
 .vehiclePopup .nearbyMiniDetails{
  margin:0 9px 2px!important
 }
 .vehiclePopup .nearbyMiniDetails summary{
  min-height:24px!important;
  font-size:7.5px!important
 }
 .vehiclePopup .extraStopsPanel{
  margin:0 9px 3px!important
 }

 /* Mobiele acties: één rij i.p.v. 2x2.
    Korte labels houden de popup laag, knoppen blijven 39px hoog. */
 .vehiclePopup .popupActions{
  grid-template-columns:1.2fr 1fr .78fr .7fr!important;
  gap:4px!important;
  padding:4px 9px 6px!important
 }
 .vehiclePopup .popupActions button{
  min-height:39px!important;
  padding:2px 3px!important;
  font-size:8px!important;
  border-radius:8px!important
 }

 /* Sluitknop beter bereikbaar. */
 .leaflet-popup-close-button{
  width:34px!important;
  height:34px!important;
  line-height:33px!important;
  font-size:22px!important
 }
}

@media(max-width:360px){
 .vehiclePopup{
  width:calc(100vw - 26px)!important
 }
 .vehiclePopup .popupActions{
  grid-template-columns:1.15fr .95fr .75fr .65fr!important;
  gap:3px!important
 }
 .vehiclePopup .popupActions button{
  font-size:7.5px!important
 }
 .vehiclePopup .horizontalStopBar .hStopName{
  font-size:6.8px!important
 }
}


/* ============================================================
   V32 — EXPERIMENTELE BESTEMMING IN VOERTUIGBADGE
   Uitschakelbaar in Lagen; oude compacte badge blijft direct beschikbaar.
   ============================================================ */
.ov-marker.withDestination{
 min-width:0!important;
 max-width:190px!important;
 justify-content:flex-start!important;
 gap:5px!important;
 padding-left:7px!important;
 padding-right:9px!important
}
.ov-marker.withDestination .markerLine{
 flex:0 0 auto;
 font-weight:950
}
.ov-marker.withDestination .markerArrow{
 flex:0 0 auto;
 opacity:.88;
 font-size:9px
}
.ov-marker.withDestination .markerDestination{
 display:block;
 min-width:0;
 max-width:135px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:9px;
 font-weight:850;
 letter-spacing:-.01em
}
@media(max-width:760px){
 .ov-marker.withDestination{max-width:150px!important;gap:4px!important}
 .ov-marker.withDestination .markerDestination{max-width:95px;font-size:8px}
}
.layerExperiment{
 margin-top:5px!important;
 padding:7px 8px!important;
 border:1px dashed #b9cadd!important;
 border-radius:8px!important;
 background:#f7fafc!important
}
.layerExperiment small{display:block;margin-left:19px;margin-top:2px;color:#718096;font-size:7px;line-height:1.3}


/* ============================================================
   V35 — DESTINATION BADGE BRIDGE STATUS
   ============================================================ */
#destinationBadgeStatus{
 margin-top:4px!important;
 color:#087c65!important;
 font-weight:800!important
}


/* ============================================================
   V36 — DESTINATION BADGE RENDER FIX
   Data werkte in v35 (bijv. 31/33), maar de flex-layout kneep
   markerDestination weg binnen Leaflet's 0x0 divIcon host.
   ============================================================ */
.ov-marker.withDestination{
 display:inline-flex!important;
 width:max-content!important;
 min-width:44px!important;
 max-width:190px!important;
 flex-wrap:nowrap!important;
 justify-content:flex-start!important;
 align-items:center!important;
 overflow:visible!important
}
.ov-marker.withDestination .markerLine,
.ov-marker.withDestination .markerArrow{
 flex:0 0 auto!important
}
.ov-marker.withDestination .markerDestination{
 display:block!important;
 flex:0 1 auto!important;
 width:auto!important;
 min-width:18px!important;
 max-width:135px!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important
}

/* Leaflet host zelf mag de intrinsieke badge nooit afknippen. */
.leaflet-marker-icon{
 overflow:visible!important
}

/* Mobiel iets korter, maar destination blijft altijd minstens zichtbaar. */
@media(max-width:760px){
 .ov-marker.withDestination{
  width:max-content!important;
  min-width:42px!important;
  max-width:150px!important
 }
 .ov-marker.withDestination .markerDestination{
  min-width:16px!important;
  max-width:95px!important
 }
}


/* ============================================================
   V37 — ADAPTIVE MARKER BUDGET
   ============================================================ */
#lowZoomHint.show{
 max-width:min(520px,calc(100vw - 24px))
}


/* ============================================================
   V39 — MOBIELE LAGEN / VOERTUIGOPTIES
   ============================================================ */
#mobileLayerQuickOptions,#mobileLayerClose{display:none}

@media(max-width:760px){
 #layers .ph{display:grid!important;grid-template-columns:1fr 40px!important;align-items:center!important}
 #layers .ph #layerToggle{display:none!important}
 #mobileLayerClose{display:grid!important;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:#eef3f7;color:#314a65;font-size:21px;font-weight:900}
 #mobileLayerQuickOptions{display:block;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e2e8f0}
 .mobileLayerSectionTitle{margin:3px 0 6px;font-size:9px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:#718096}
 .mobileLayerSectionTitle.mapOptionsTitle{margin-top:11px}
 .mobileLayerChipGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .mobileLayerChip{position:relative;min-width:0!important;min-height:54px!important;border:1px solid #dde6ef;border-radius:11px;background:#f8fafc;color:#2b435d;padding:5px 2px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit}
 .mobileLayerChip>span{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;color:#fff;font-size:9px;font-weight:950}
 .mobileLayerChip>b{font-size:8px;line-height:10px}
 .mobileLayerChip>em{position:absolute;top:3px;right:4px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 3px;border-radius:999px;background:#e8eef5;color:#53677d;font-size:7px;font-style:normal;font-weight:900}
 .mobileLayerChip.mode-bus>span{background:#159b52}
 .mobileLayerChip.mode-tram>span{background:#0ea5e9}
 .mobileLayerChip.mode-metro>span{background:#f97316}
 .mobileLayerChip.mode-train>span{background:#6d4aff}
 .mobileLayerChip.mode-ferry>span{background:#0f8f83}
 .mobileLayerChip.active{border-color:#173e67;background:#eaf2fa;box-shadow:inset 0 0 0 1px #173e67}
 .mobileLayerChip.active>em{background:#173e67;color:#fff}
 .mobileTimingChipGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .mobileTimingChip{min-width:0!important;min-height:42px!important;border:1px solid #dde6ef;border-radius:10px;background:#f8fafc;color:#314a65;padding:6px!important;font-size:8px!important;font-weight:850!important;display:flex;align-items:center;justify-content:center;gap:5px}
 .mobileTimingChip.active{border-color:#173e67;background:#173e67;color:#fff}
 .timingDot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
 .timingDot.ontime{background:#20a45a}.timingDot.late1{background:#f59e0b}.timingDot.late3{background:#dc3545}.timingDot.early{background:#6d4aff}.timingDot.unknown{background:#7b8798}
 .mobileTimingChip.mobileAll{font-weight:950!important}
 .mobileLayerRenderInfo{margin-top:8px;padding:8px 9px;border-radius:10px;background:#eef5fb;border:1px solid #d9e7f3;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:8px;color:#60758c}
 .mobileLayerRenderInfo>b{min-width:0;text-align:right;color:#173e67;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #layers .layerBody{padding:10px!important}
 #layers .layerBody>label{min-height:44px;border-bottom:1px solid #eef2f6;font-size:11px!important;padding:8px 2px!important}
 #layers .layerBody>label input{width:19px;height:19px;flex:0 0 auto}
 #layers .layerBody>label small{font-size:8px!important;line-height:11px!important}
 #densityHint{margin-top:8px!important;font-size:8px!important;line-height:12px!important}
}
@media(max-width:380px){
 .mobileLayerChipGrid{gap:3px}.mobileLayerChip{min-height:50px!important}.mobileLayerChip>b{font-size:7px}.mobileTimingChipGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* V40 — FPS GOVERNOR */
#performanceGovernor{margin:0 9px 9px;padding:8px;border:1px solid #dbeafe;border-radius:9px;background:#f8fbff}
#performanceGovernor h5{margin:0 0 6px;font-size:9px}.governorTop{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}.governorTop b{font-size:11px}.governorState{font-size:8px;font-weight:900;color:#0f766e}.governorProfiles{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.governorProfiles button{min-height:32px;border:1px solid #d9e5f0;border-radius:8px;background:#fff;font-size:8px;font-weight:850;color:#42566c}.governorProfiles button.active{background:#173e67;color:#fff;border-color:#173e67}.governorMeta{margin-top:6px;font-size:7px;line-height:11px;color:#64748b}.governorBar{height:5px;background:#e5edf5;border-radius:99px;overflow:hidden;margin-top:6px}.governorBar>span{display:block;height:100%;width:100%;background:#22c55e;transition:width .25s ease}
@media(max-width:760px){#performanceGovernor{margin:0 7px 8px}.governorProfiles button{min-height:40px;font-size:9px}}

/* V41 HALTE LIVE BOARD */
.stopPopup{width:350px}.stopLiveSummary{display:flex;gap:6px;align-items:center;margin:7px 0 5px;padding:7px 8px;background:#f0f9ff;border:1px solid #d8eef8;border-radius:9px;font-size:8px;color:#31536f}.stopLiveSummary b{font-size:10px;color:#087c65}.stopRow{cursor:pointer}.stopRow:hover{background:#f8fbfe}.stopEta{color:#0f766e;font-weight:900;font-size:8px}.stopDelay{font-size:7px;font-weight:900}.stopDelay.late{color:#dc2626}.stopDelay.early{color:#2563eb}.stopLiveVehicle{display:flex;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid #eef2f6;font-size:8px;cursor:pointer}.stopLiveVehicle b{min-width:42px}.stopLiveVehicle .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stopLiveVehicle .eta{font-weight:900;color:#0f766e}.stopLiveVehicles{margin-top:6px;border-top:1px solid #e6ecf2}.stopBoardActions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.stopBoardActions button{border:0;border-radius:8px;min-height:34px;font-size:8px;font-weight:850;background:#eaf2fa;color:#173e67}.stopBoardActions button.primary{background:#1874c3;color:#fff}
@media(max-width:760px){.stopPopup{width:min(360px,calc(100vw - 42px))!important}.stopRow{grid-template-columns:42px 1fr 54px}.stopBoardActions button{min-height:42px;font-size:9px}}


/* V42 VOERTUIG LIVE+ ROUTEPROGRESS */
.tripProgressCard{margin:6px 0 2px;padding:7px 8px;border:1px solid #e1e9f1;border-radius:9px;background:#f8fbfe}.tripProgressTop{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#64748b}.tripProgressTop b{color:#173e67}.tripProgressTrack{position:relative;height:5px;margin:7px 0 5px;border-radius:99px;background:#dce6ef;overflow:hidden}.tripProgressTrack span{display:block;height:100%;background:#0f8f83;border-radius:99px}.tripProgressStops{display:flex;justify-content:space-between;gap:5px;font-size:7px;color:#748396}.tripProgressStops b{color:#173e67;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nextEtaPill{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:99px;background:#e7f7ef;color:#087c65;font-size:7px;font-weight:900}


/* V43 VERSTORING IMPACT */
.impactRow{display:flex;gap:5px;align-items:center;margin-top:6px}.impactPill{padding:3px 6px;border-radius:99px;background:#fff1f2;color:#b42318;font-size:7px;font-weight:900}.disItem.highImpact{border-left:3px solid #dc2626;padding-left:7px}.disImpactLine{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.affectedVehicle{filter:drop-shadow(0 0 3px rgba(220,38,38,.65))}


/* V44 MOBILE 2.0 */
@media(max-width:760px){
 #filters,#favoritePanel,#disruptionPanel,#navPanel,#layers,#statusPanel,#themePanel,#cleanMenuPanel{border-radius:20px 20px 14px 14px!important;max-height:min(72dvh,650px)!important}
 .proPanel.open::before{content:'';display:block;position:absolute;top:5px;left:50%;width:42px;height:4px;border-radius:99px;background:#cbd5e1;transform:translateX(-50%);z-index:3}
 .proPanel .ph{padding-top:13px!important}
 .leaflet-popup-content-wrapper{border-radius:18px!important}.leaflet-popup-content{max-height:min(68dvh,590px)!important}
 .vehiclePopup,.stopPopup{width:min(360px,calc(100vw - 34px))!important}
 #mobileMapNav{height:64px;border-radius:19px}.mobileMapBtn{min-height:52px}
 #mobileMapMore{border-radius:20px;max-height:72dvh}
 body.mobileSheetDragging .proPanel.open{transition:none!important}
}


/* V45 BROWSER PERFORMANCE LAB */
#browserPerfLab{margin:0 9px 9px;padding:8px;border:1px solid #dbe6f1;border-radius:10px;background:#f8fbfe}#browserPerfLab h5{margin:0 0 7px;font-size:9px}.bpGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.bpGrid>div{background:#fff;border:1px solid #e3eaf1;border-radius:8px;padding:6px}.bpGrid b{display:block;font-size:11px;color:#173e67}.bpGrid small{font-size:6px;color:#718096;text-transform:uppercase;font-weight:850}.bpHint{margin-top:6px;font-size:7px;color:#64748b}.bpWarn{color:#dc2626!important}
@media(max-width:760px){#browserPerfLab{margin:0 7px 8px}.bpGrid{grid-template-columns:repeat(2,1fr)}.bpGrid>div{padding:8px}.bpGrid b{font-size:12px}}


/* v45.1 correction */
.stopBoardActions button:disabled{opacity:.45;cursor:not-allowed}.stopLiveNone{margin-top:5px;padding:6px 0;border-top:1px solid #eef2f6}.bpGrid{grid-template-columns:repeat(4,1fr)}@media(max-width:760px){.bpGrid{grid-template-columns:repeat(2,1fr)}}
.stationSummaryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:7px 0}
.stationSummaryChip{padding:6px 5px;border:1px solid #dbe7f1;border-radius:8px;background:#f7fafc;text-align:center}
.stationSummaryChip b{display:block;font-size:11px;color:#0f766e}.stationSummaryChip small{font-size:7px;color:#687b90;font-weight:850}
.stopPlatform{display:block;margin-top:2px;color:#6d28d9;font-size:7px;font-weight:850}
.stopBoardActions.three{grid-template-columns:repeat(3,1fr)}
body.map-theme-dark .stationSummaryChip{background:rgba(17,25,37,.94);border-color:rgba(95,123,152,.25)}
body.map-theme-dark .stationSummaryChip b{color:#8ed9c3}body.map-theme-dark .stationSummaryChip small{color:#aebfd0}
@media(max-width:760px){.stopBoardActions.three{grid-template-columns:1fr 1fr}.stopBoardActions.three button:first-child{grid-column:1/-1}}

/* V47.7 Visual Polish */
.ov-marker-shell,.trainIconShell{filter:drop-shadow(0 3px 7px rgba(15,23,42,.18))}
.ov-marker{display:inline-flex!important;align-items:center;gap:4px;border:1px solid rgba(255,255,255,.92)!important;box-shadow:0 3px 9px rgba(15,23,42,.22)!important}
.vehicleModeIcon{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.20);display:inline-grid;place-items:center;font-size:8px;font-weight:900;flex:0 0 16px}
.vehicleDirection,.trainDirection{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid currentColor;color:rgba(15,23,42,.72);transform-origin:50% 14px;pointer-events:none}
.vehicleDirection{left:-4px;top:-23px}.trainDirection{left:-4px;top:-24px}
.ov-marker-shell.selected:after,.trainIconShell.selected:after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid rgba(15,118,110,.68);animation:ovSelectedPulse 1.8s ease-out infinite;pointer-events:none}
@keyframes ovSelectedPulse{0%{transform:scale(.65);opacity:.9}70%,100%{transform:scale(1.18);opacity:0}}
body.map-theme-dark .ov-marker-shell,body.map-theme-dark .trainIconShell{filter:drop-shadow(0 4px 9px rgba(0,0,0,.46))}
body.map-theme-dark .vehicleDirection,body.map-theme-dark .trainDirection{color:rgba(238,246,252,.88)}
body.map-theme-dark .ov-marker{border-color:rgba(233,241,248,.72)!important;box-shadow:0 4px 12px rgba(0,0,0,.38)!important}
body.map-theme-dark .vehicleModeIcon{background:rgba(255,255,255,.14)}
@media(prefers-reduced-motion:reduce){.ov-marker-shell.selected:after,.trainIconShell.selected:after{animation:none;opacity:.65;transform:scale(.9)}}

/* V47.8 Mobile Bottom Sheet */
@media(max-width:760px){
 .mobileVehicleSheet.leaflet-popup{margin-bottom:14px!important}
 .mobileVehicleSheet .leaflet-popup-content-wrapper{width:100%!important;max-width:none!important;border-radius:19px 19px 13px 13px!important;box-shadow:0 -8px 32px rgba(15,23,42,.26)!important}
 .mobileVehicleSheet .leaflet-popup-content{width:auto!important;max-width:none!important;transition:max-height .2s ease!important}
 .mobileVehicleSheet.sheetCollapsed .leaflet-popup-content{max-height:220px!important;overflow:hidden!important}
 .mobileVehicleSheet.sheetExpanded .leaflet-popup-content{max-height:min(66dvh,610px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
 .mobileSheetHandle{display:block;width:100%;height:28px;border:0;background:transparent;color:#718096;cursor:pointer;position:relative;font-size:0}
 .mobileSheetHandle:after{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:44px;height:5px;border-radius:99px;background:#aab7c4}
 .mobileVehicleSheet.sheetExpanded .mobileSheetHandle:after{background:#1874c3}
 body.map-theme-dark .mobileSheetHandle:after{background:#607386}
 .mobileVehicleSheet .trainMiniPopup,.mobileVehicleSheet .vehiclePopup{width:100%!important;max-width:none!important}
 .ov-marker-shell:before,.trainIconShell:before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:transparent;pointer-events:auto}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.mobileVehicleSheet .leaflet-popup-content{transition:none!important}}

/* V47.9 Adaptive Map Detail */
body.map-detail-overview .ov-marker{transform:translate(-50%,-100%) scale(.86);transform-origin:50% 100%}
body.map-detail-city .ov-marker{max-width:92px!important}
body.map-detail-street .ov-marker{max-width:190px!important}
body.map-detail-overview .clusterMarker{box-shadow:0 3px 12px rgba(15,23,42,.22)}
body.map-detail-street .trainIconButton,body.map-detail-street .ov-gps-dot{filter:saturate(1.08)}

/* V48 Route Experience */
.miniRoute{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:9px 10px 8px;border-top:1px solid #e7edf3;border-bottom:1px solid #e7edf3;background:#f8fbfe}
.miniRoutePoint{position:relative;min-width:0;padding-top:15px;text-align:center}
.miniRoutePoint:before{content:"";position:absolute;left:0;right:0;top:5px;height:3px;background:#cbd8e3}
.miniRoutePoint:first-child:before{left:50%}.miniRoutePoint:last-child:before{right:50%}
.miniRouteDot{position:absolute;z-index:1;left:50%;top:1px;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid #7890a5}
.miniRoutePoint.current .miniRouteDot{border-color:#f59e0b;background:#fef3c7}.miniRoutePoint.next .miniRouteDot{border-color:#0f766e}.miniRoutePoint.end .miniRouteDot{border-color:#286eb6}
.miniRoutePoint small,.miniRoutePoint b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}.miniRoutePoint small{font-size:7px;color:#7a8999}.miniRoutePoint b{margin-top:2px;font-size:8px;color:#29425e}
body.map-theme-dark .miniRoute{background:rgba(17,25,37,.94);border-color:rgba(95,123,152,.22)}
body.map-theme-dark .miniRoutePoint:before{background:#405367}body.map-theme-dark .miniRouteDot{background:#172331}body.map-theme-dark .miniRoutePoint b{color:#dfe9f2}
@media(max-width:760px){.miniRoute{padding:10px 8px 9px}.miniRoutePoint b{font-size:9px}}

/* V46 AUTO DENSITY */
#autoDensityPanel{margin:0 9px 9px;padding:8px;border:1px solid #d8e6df;border-radius:9px;background:#f8fcfa}
#autoDensityPanel h5{margin:0;font-size:9px}.densityTop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.densityState{font-size:8px;font-weight:950;color:#087c65}.densityProfiles{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.densityProfiles button{min-height:32px;border:1px solid #d9e5df;border-radius:8px;background:#fff;font-size:8px;font-weight:850;color:#42566c}
.densityProfiles button.active{background:#0f766e;color:#fff;border-color:#0f766e}.densityMeta{margin-top:6px;font-size:7px;line-height:11px;color:#64748b}
.densityScale{height:5px;background:#e4eee9;border-radius:99px;overflow:hidden;margin-top:6px}.densityScale>span{display:block;height:100%;width:50%;background:#14b8a6;transition:width .25s ease}
@media(max-width:760px){#autoDensityPanel{margin:0 7px 8px}.densityProfiles button{min-height:40px;font-size:9px}}

/* ============================================================
   V46.1 — MOBILE STATUS/PERFORMANCE SCROLL HOTFIX
   ============================================================ */
@media(max-width:760px){
  /*
   * Status-paneel is op mobiel een bottom sheet. De inhoud werd langer
   * dan het viewport, terwijl de scroll-container geen eigen bruikbare
   * hoogte kreeg. Daardoor kon Browser Performance Lab niet helemaal
   * naar beneden worden gescrold.
   */
  #statusPanel,
  #status,
  .statusPanel{
    max-height:calc(100dvh - env(safe-area-inset-top) - 8px)!important;
    height:auto!important;
    overflow:hidden!important;
    overscroll-behavior:contain;
  }

  #statusPanel .panelBody,
  #status .panelBody,
  .statusPanel .panelBody{
    max-height:calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
    scrollbar-gutter:stable;
  }

  /*
   * Sommige versies hebben geen aparte .panelBody rond status.
   * Dan moet het paneel zelf scrollen.
   */
  #statusPanel:not(:has(.panelBody)),
  #status:not(:has(.panelBody)),
  .statusPanel:not(:has(.panelBody)){
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
  }

  #browserPerformanceLab,
  #performanceGovernor,
  #autoDensityPanel{
    flex:0 0 auto!important;
  }

  /* Onderste kaart mag niet de swipe overnemen terwijl in het paneel wordt gescrold. */
  #statusPanel *,
  #status *,
  .statusPanel *{
    overscroll-behavior:auto;
  }

  /* Genoeg ruimte onder de laatste Performance Lab-kaart. */
  #browserPerformanceLab{
    margin-bottom:18px!important;
  }
}

/* dvh fallback voor oudere mobiele browsers */
@supports not (height:100dvh){
  @media(max-width:760px){
    #statusPanel,
    #status,
    .statusPanel{
      max-height:calc(100vh - 8px)!important;
    }
    #statusPanel .panelBody,
    #status .panelBody,
    .statusPanel .panelBody{
      max-height:calc(100vh - 74px)!important;
    }
  }
}


/* ============================================================
   V46.2 — STATUS & PERFORMANCE DESKTOP + MOBILE SCROLL
   ============================================================ */

/*
 * #statusPanel heeft géén aparte .panelBody. Daarom moet het paneel
 * zelf de scrollcontainer zijn, zowel desktop als mobiel.
 */
#statusPanel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

/* Kop blijft zichtbaar terwijl de Performance Lab-inhoud scrollt. */
#statusPanel>.ph{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  background:rgba(255,255,255,.99)!important;
}

/* Laatste blok krijgt ruimte onderaan zodat niets tegen de rand verdwijnt. */
#statusPanel>#browserPerfLab,
#statusPanel>#browserPerformanceLab,
#statusPanel>#autoDensityPanel,
#statusPanel>.statusActions:last-child{
  margin-bottom:14px!important;
}

@media(min-width:761px){
  #statusPanel{
    /* JS verfijnt dit dynamisch vanaf de werkelijke huidige top-positie. */
    max-height:calc(100dvh - 78px)!important;
    padding-bottom:10px!important;
    touch-action:pan-y!important;
  }
}

/* Mobiele regels uit v46.1 behouden, maar statusPanel mag nu zelf scrollen. */
@media(max-width:760px){
  #statusPanel{
    max-height:calc(100dvh - 92px - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
  }
}

@supports not (height:100dvh){
  @media(min-width:761px){
    #statusPanel{max-height:calc(100vh - 78px)!important}
  }
  @media(max-width:760px){
    #statusPanel{max-height:calc(100vh - 92px)!important}
  }
}


/* ============================================================
   V46.17 — EXACTE VOERTUIGLOCATIE
   Het GPS-bolletje staat exact op Leaflet lat/lon.
   De lijnbadge zweeft erboven en kan daardoor de weg niet meer verhullen.
   ============================================================ */
.ov-marker-shell{
 position:relative!important;
 width:0!important;
 height:0!important;
 overflow:visible!important
}

/* De badge is een label, NIET meer de locatie-aanduiding. */
.ov-marker-shell>.ov-marker{
 position:absolute!important;
 left:0!important;
 top:-11px!important;
 transform:translate(-50%,-100%)!important;
 margin:0!important;
 z-index:2
}

/* Verbindingslijntje tussen label en exacte voertuigpositie. */
.ov-gps-stem{
 position:absolute;
 left:-1px;
 top:-11px;
 width:2px;
 height:11px;
 border-radius:2px;
 background:rgba(15,23,42,.55);
 box-shadow:0 0 0 1px rgba(255,255,255,.55);
 pointer-events:none;
 z-index:1
}

/* DIT bolletje is de exacte lat/lon uit de live feed. */
.ov-gps-dot{
 position:absolute;
 left:0;
 top:0;
 width:10px;
 height:10px;
 box-sizing:border-box;
 transform:translate(-50%,-50%);
 border:2px solid #fff;
 border-radius:50%;
 box-shadow:
  0 0 0 1px rgba(15,23,42,.38),
  0 2px 5px rgba(15,23,42,.30);
 z-index:4;
 cursor:pointer
}

/* Geselecteerd voertuig: exacte positie extra duidelijk. */
.ov-marker-shell.selected .ov-gps-dot{
 width:13px;
 height:13px;
 box-shadow:
  0 0 0 2px rgba(15,23,42,.80),
  0 3px 8px rgba(15,23,42,.35)
}

/*
 * Punctualiteit is alleen een statuslampje.
 * Niet meer rechtsonder buiten de badge, zodat het niet voor GPS-positie
 * aangezien kan worden.
 */
.ov-marker-shell .ov-punct{
 right:3px!important;
 top:3px!important;
 bottom:auto!important;
 width:6px!important;
 height:6px!important;
 border-width:1px!important;
 box-sizing:border-box;
 z-index:5
}
.ov-marker-shell .ov-marker.withDestination{
 padding-right:13px!important
}

@media(max-width:760px){
 .ov-marker-shell>.ov-marker{top:-10px!important}
 .ov-gps-stem{top:-10px;height:10px}
 .ov-gps-dot{width:9px;height:9px}
 .ov-marker-shell.selected .ov-gps-dot{width:12px;height:12px}
}

/* Canvas-modus: de Canvas-cirkel zelf blijft exact op lat/lon. */


/* ============================================================
   V46.20 — ÉÉN LOCATIEBOLLETJE
   Alleen .ov-gps-dot is nog zichtbaar.
   ============================================================ */
.ov-marker-shell .ov-punct,
.ov-marker .ov-punct{
 display:none!important;
 width:0!important;
 height:0!important;
 border:0!important;
}

/* Geen extra ruimte meer reserveren voor het oude statusbolletje. */
.ov-marker-shell .ov-marker.withDestination{
 padding-right:6px!important;
}

/* Exacte locatiepunt blijft het enige ronde punt rond de marker. */
.ov-marker-shell>.ov-gps-dot{
 display:block!important;
}


/* ============================================================
   V46.22 — DARK POPUPS + ROUTEBAR
   Donkere modus wordt nu ook doorgetrokken naar voertuig- en haltepopups.
   OV-/statuskleuren blijven intact.
   ============================================================ */
body.map-theme-dark .leaflet-popup-content-wrapper{
 background:rgba(8,14,22,.975)!important;
 border-color:rgba(95,123,152,.38)!important;
 box-shadow:0 20px 50px rgba(0,0,0,.52)!important;
 color:#e8eef6!important;
}
body.map-theme-dark .leaflet-popup-content{color:#e8eef6!important}
body.map-theme-dark .leaflet-popup-close-button{
 color:#c8d5e2!important;
 background:rgba(17,25,37,.82)!important;
 border-radius:8px!important;
 top:6px!important;
 right:6px!important;
 width:25px!important;
 height:25px!important;
 line-height:23px!important;
}
body.map-theme-dark .leaflet-popup-close-button:hover{
 color:#fff!important;
 background:rgba(35,49,66,.98)!important;
}

/* Voertuigpopup */
body.map-theme-dark .vehiclePopup{
 color:#dce6f1!important;
 background:transparent!important;
}
body.map-theme-dark .vehiclePopup .megaVHead,
body.map-theme-dark .vehiclePopup .megaInfo,
body.map-theme-dark .vehiclePopup .quickMeta,
body.map-theme-dark .vehiclePopup .popupActions{
 border-color:rgba(95,123,152,.22)!important;
}
body.map-theme-dark .vehiclePopup .megaVTitle b,
body.map-theme-dark .vehiclePopup .megaStopHead,
body.map-theme-dark .vehiclePopup .megaStopName,
body.map-theme-dark .vehiclePopup .megaInfo .v,
body.map-theme-dark .vehiclePopup .dest{
 color:#e7eef7!important;
}
body.map-theme-dark .vehiclePopup .megaVTitle small,
body.map-theme-dark .vehiclePopup .muted,
body.map-theme-dark .vehiclePopup .quickMeta,
body.map-theme-dark .vehiclePopup .megaInfo .k,
body.map-theme-dark .vehiclePopup .megaStopTime,
body.map-theme-dark .vehiclePopup .megaStopTime small,
body.map-theme-dark .vehiclePopup .nextStopsMeta,
body.map-theme-dark .vehiclePopup .stopEmptyCompact{
 color:#9eafc1!important;
}
body.map-theme-dark .vehiclePopup .megaStopRail:after,
body.map-theme-dark .vehiclePopup .nextStopsAlways .megaStopRail:after{
 background:#33465a!important;
}
body.map-theme-dark .vehiclePopup .megaStopDot,
body.map-theme-dark .vehiclePopup .horizontalStopBar .hStopDot{
 background:#0b1520!important;
 border-color:#6e8499!important;
}
body.map-theme-dark .vehiclePopup .megaStopRow.current .megaStopDot,
body.map-theme-dark .vehiclePopup .nextStopsAlways .megaStopRow:nth-child(1) .megaStopDot{
 background:#16a2a2!important;
 border-color:#16a2a2!important;
}
body.map-theme-dark .vehiclePopup .nextStopsAlways .megaStopRow:first-child .megaStopName,
body.map-theme-dark .vehiclePopup .nextStopsAlways .megaStopRow:nth-child(1) .megaStopName{
 color:#f1f7fb!important;
}
body.map-theme-dark .vehiclePopup .nextStopsMeta:after{
 color:#67dbc3!important;
 background:rgba(20,104,91,.28)!important;
}
body.map-theme-dark .vehiclePopup details,
body.map-theme-dark .vehiclePopup .extraStopsPanel,
body.map-theme-dark .vehiclePopup .nearbyMiniDetails[open]{
 background:rgba(15,23,34,.96)!important;
 border-color:rgba(95,123,152,.26)!important;
 color:#dce6f1!important;
}
body.map-theme-dark .vehiclePopup summary,
body.map-theme-dark .vehiclePopup .moreStopsDetails summary,
body.map-theme-dark .vehiclePopup .nearbyMiniDetails summary,
body.map-theme-dark .vehiclePopup .extraStopsMini{
 color:#a9bed1!important;
}
body.map-theme-dark .vehiclePopup .extraStopsMini:hover,
body.map-theme-dark .vehiclePopup .nearbyMiniDetails summary:hover,
body.map-theme-dark .vehiclePopup .moreStopsDetails summary:hover{
 color:#e8f2fb!important;
}
body.map-theme-dark .vehiclePopup .nearbyBox,
body.map-theme-dark .vehiclePopup .nearbyRow{
 color:#cbd8e5!important;
 border-color:rgba(95,123,152,.20)!important;
}
body.map-theme-dark .vehiclePopup .popupActions button{
 background:#162333!important;
 color:#dfe9f3!important;
 border:1px solid rgba(95,123,152,.25)!important;
}
body.map-theme-dark .vehiclePopup .popupActions button:hover{
 background:#203249!important;
}
/* Primary behoudt bewust de bestaande blauwe actie-/OV-kleur. */
body.map-theme-dark .vehiclePopup .popupActions .primary{
 background:#286eb6!important;
 color:#fff!important;
 border-color:#347fc8!important;
}

/* Haltepopup / live vertrekbord */
body.map-theme-dark .stopPopup{color:#dce6f1!important}
body.map-theme-dark .stopPopup h3{color:#edf4fb!important}
body.map-theme-dark .stopPopup .sub,
body.map-theme-dark .stopEmpty{color:#9eafc1!important}
body.map-theme-dark .stopBoard,
body.map-theme-dark .stopRow,
body.map-theme-dark .stopLiveVehicles,
body.map-theme-dark .stopLiveVehicle{
 border-color:rgba(95,123,152,.20)!important;
}
body.map-theme-dark .stopRow:hover,
body.map-theme-dark .stopLiveVehicle:hover{
 background:rgba(35,49,66,.55)!important;
}
body.map-theme-dark .stopDest,
body.map-theme-dark .stopTime,
body.map-theme-dark .stopLiveVehicle,
body.map-theme-dark .stopLiveVehicle .grow{
 color:#dce6f1!important;
}
body.map-theme-dark .stopLiveSummary{
 background:rgba(9,68,73,.28)!important;
 border-color:rgba(43,150,151,.34)!important;
 color:#b9d8db!important;
}
body.map-theme-dark .stopLiveSummary b,
body.map-theme-dark .stopEta,
body.map-theme-dark .stopLiveVehicle .eta{
 color:#62d1bc!important;
}
body.map-theme-dark .stopBoardActions button{
 background:#162333!important;
 color:#dfe9f3!important;
 border:1px solid rgba(95,123,152,.25)!important;
}
body.map-theme-dark .stopBoardActions button:hover{background:#203249!important}
body.map-theme-dark .stopBoardActions button.primary{
 background:#1874c3!important;
 color:#fff!important;
 border-color:#2c83cc!important;
}

/* Routebalk / actieve route */
body.map-theme-dark #routeBar{
 background:rgba(8,14,22,.95)!important;
 color:#e7eef7!important;
 border-color:rgba(95,123,152,.38)!important;
 box-shadow:0 16px 40px rgba(0,0,0,.44)!important;
}
body.map-theme-dark #routeBar b,
body.map-theme-dark #routeBarTitle{color:#eef5fb!important}
body.map-theme-dark #routeBarMeta,
body.map-theme-dark #routeBar .routeMeta{color:#9fb1c3!important}
body.map-theme-dark #routeBar .routeProgress{background:#26384b!important}
body.map-theme-dark #routeBar .routeProgress span{background:#31b99f!important}
body.map-theme-dark #routeBar button{
 background:#162333!important;
 color:#dfe9f3!important;
 border-color:rgba(95,123,152,.25)!important;
}
body.map-theme-dark #routeBar button:hover{background:#203249!important}

/* Mobiel: geen fel wit vlak tijdens scrollen van een popup. */
@media(max-width:760px){
 body.map-theme-dark .leaflet-popup-content{
  scrollbar-color:#41566c #101925;
 }
}



/* ============================================================
   V46.27 — AUTO-HIDE BEDIENING
   ============================================================ */
.autoHideSetting{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin:10px 9px 9px;padding:10px 11px;border:1px solid #dfe7ef;
 border-radius:10px;background:#f8fbfe;color:#213a58;cursor:pointer
}
.autoHideSetting>span{display:block;min-width:0}
.autoHideSetting b{display:block;font-size:9px}
.autoHideSetting small{display:block;margin-top:2px;font-size:7px;line-height:1.35;color:#718096}
.autoHideSetting input{width:18px;height:18px;accent-color:#0f766e;flex:0 0 auto}
body.map-theme-dark .autoHideSetting{background:rgba(17,25,37,.94)!important;border-color:rgba(95,123,152,.26)!important;color:#e7eef7!important}
body.map-theme-dark .autoHideSetting small{color:#9fb0c3!important}

#autoHideWakeLeft,#autoHideWakeRight,#autoHideWakeTop{display:none}
@media(min-width:761px){
 #cleanLeftDock,#cleanRightDock,#searchBox,#megaBrand{
  transition:transform .26s ease,opacity .22s ease,filter .22s ease!important;
  will-change:transform,opacity
 }
 body.ui-autohide-enabled.ui-idle #cleanLeftDock{
  transform:translateX(calc(-100% + 24px))!important;opacity:.38!important;filter:saturate(.72)
 }
 body.ui-autohide-enabled.ui-idle #cleanRightDock{
  transform:translateX(calc(100% - 24px))!important;opacity:.38!important;filter:saturate(.72)
 }
 body.ui-autohide-enabled.ui-idle #searchBox{
  transform:translateY(calc(-100% + 11px))!important;opacity:.18!important
 }
 body.ui-autohide-enabled.ui-idle #megaBrand{opacity:.30!important}

 body.ui-panel-active #cleanLeftDock,
 body.ui-panel-active #cleanRightDock,
 body.ui-panel-active #searchBox,
 body.ui-panel-active #megaBrand{
  transform:none!important;opacity:1!important;filter:none!important
 }

 body.ui-autohide-enabled.ui-idle #autoHideWakeLeft,
 body.ui-autohide-enabled.ui-idle #autoHideWakeRight,
 body.ui-autohide-enabled.ui-idle #autoHideWakeTop{
  display:block;position:fixed;z-index:1108;background:transparent;pointer-events:auto
 }
 body.ui-autohide-enabled.ui-idle #autoHideWakeLeft{left:0;top:0;bottom:0;width:38px}
 body.ui-autohide-enabled.ui-idle #autoHideWakeRight{right:0;top:0;bottom:0;width:38px}
 body.ui-autohide-enabled.ui-idle #autoHideWakeTop{left:38px;right:38px;top:0;height:26px}
}


/* ============================================================
   V46.29 — OPTION B / ICON-ONLY DESKTOP DOCKS
   ============================================================ */
@media(min-width:761px){
  body{--icon-dock-size:46px;--icon-dock-gap:9px;--icon-dock-edge:18px}

  /* Optie B is vast: geen auto-hide meer op desktop. */
  body.ui-idle #cleanLeftDock,
  body.ui-idle #cleanRightDock,
  body.ui-idle #searchBox,
  body.ui-idle #megaBrand{
    transform:none!important;opacity:1!important;pointer-events:auto!important
  }
  #autoHideWakeLeft,#autoHideWakeRight,#autoHideWakeTop{display:none!important}

  #cleanLeftDock,
  #cleanRightDock{
    top:82px!important;
    gap:var(--icon-dock-gap)!important;
    width:var(--icon-dock-size)!important;
    align-items:stretch!important;
  }
  #cleanLeftDock{left:var(--icon-dock-edge)!important}
  #cleanRightDock{right:var(--icon-dock-edge)!important}

  .cleanBtn,
  .cleanIconBtn,
  .megaRightBtn{
    position:relative!important;
    width:var(--icon-dock-size)!important;
    min-width:var(--icon-dock-size)!important;
    max-width:var(--icon-dock-size)!important;
    height:var(--icon-dock-size)!important;
    min-height:var(--icon-dock-size)!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    border:1px solid rgba(211,222,234,.94)!important;
    background:rgba(255,255,255,.965)!important;
    color:#17324f!important;
    box-shadow:0 5px 16px rgba(18,51,91,.12)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    cursor:pointer!important;
    overflow:visible!important;
    transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease!important;
  }
  .cleanBtn:hover,
  .cleanIconBtn:hover,
  .megaRightBtn:hover{
    transform:translateY(-1px)!important;
    background:#fff!important;
    border-color:#bdd0e1!important;
    box-shadow:0 8px 20px rgba(18,51,91,.16)!important;
  }

  /* Actief blijft licht: de kaart blijft visueel rustig. */
  .cleanBtn.active,
  .megaRightBtn.active,
  #megaStopsBtn.active{
    background:#edf6fb!important;
    color:#0b6680!important;
    border-color:#9bc9d5!important;
    box-shadow:0 0 0 2px rgba(42,143,165,.09),0 5px 16px rgba(18,51,91,.10)!important;
  }

  .cleanBtn .label,
  .cleanBtn .liveLabel,
  .cleanIconBtn .rlabel,
  .megaRightBtn .rlabel{
    position:absolute!important;
    width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important
  }

  .cleanBtn .icon,
  .cleanIconBtn .ri,
  .megaRightBtn .ri{
    width:21px!important;
    height:21px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    color:inherit!important;
  }
  .iconOnlyBtn svg{
    width:21px;height:21px;display:block;
    fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
    pointer-events:none
  }

  /* Live-led en tellers worden kleine hoekbadges. */
  #megaLiveBtn .liveLed{
    position:absolute!important;
    right:5px!important;bottom:5px!important;
    width:7px!important;height:7px!important;margin:0!important;
    border:2px solid #fff!important;
    box-sizing:content-box!important;
    box-shadow:0 0 0 2px rgba(34,182,92,.10)!important
  }
  .cleanBtn .count{
    position:absolute!important;
    right:-5px!important;top:-5px!important;
    min-width:18px!important;height:18px!important;
    padding:0 5px!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:999px!important;
    background:#eef2f7!important;color:#38516b!important;
    border:2px solid #fff!important;
    font-size:7px!important;line-height:1!important;font-weight:950!important;
    box-shadow:0 2px 6px rgba(18,51,91,.14)!important;
    z-index:2
  }
  .cleanBtn .count.zeroCount{display:none!important}

  /* Hover/focus tooltip: rechts van linker dock, links van rechter dock. */
  .iconOnlyBtn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;
    top:50%;
    min-width:max-content;
    padding:7px 10px;
    border-radius:8px;
    background:rgba(18,36,58,.94);
    color:#fff;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 6px 18px rgba(0,0,0,.20);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-50%) scale(.97);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
    z-index:1300;
    white-space:nowrap
  }
  #cleanLeftDock .iconOnlyBtn[data-tip]::after{left:calc(100% + 10px);transform-origin:left center}
  #cleanRightDock .iconOnlyBtn[data-tip]::after{right:calc(100% + 10px);transform-origin:right center}
  .iconOnlyBtn[data-tip]:hover::after,
  .iconOnlyBtn[data-tip]:focus-visible::after{
    opacity:1;visibility:visible;transform:translateY(-50%) scale(1)
  }

  /* Panelen openen direct naast de smalle docks. */
  #filters,#favoritePanel,#disruptionPanel,#navPanel{
    left:calc(var(--icon-dock-edge) + var(--icon-dock-size) + 12px)!important;
    top:82px!important
  }
  #layers,#statusPanel,#themePanel{
    right:calc(var(--icon-dock-edge) + var(--icon-dock-size) + 12px)!important;
    top:82px!important
  }

  /* Snelle locatieknop krijgt dezelfde visuele maat. */
  #megaLocateQuick{
    right:var(--icon-dock-edge)!important;
    width:var(--icon-dock-size)!important;height:var(--icon-dock-size)!important;
    border-radius:13px!important
  }
}

/* Op small desktop/tablet iets compacter, maar nog steeds Optie B. */
@media(min-width:761px) and (max-width:980px){
  body{--icon-dock-size:42px;--icon-dock-gap:7px;--icon-dock-edge:9px}
  #cleanLeftDock,#cleanRightDock{top:62px!important}
  #filters,#favoritePanel,#disruptionPanel,#navPanel,
  #layers,#statusPanel,#themePanel{top:62px!important}
  .cleanBtn .icon,.cleanIconBtn .ri,.megaRightBtn .ri,.iconOnlyBtn svg{width:19px!important;height:19px!important}
}

/* Dark mode voor icon-only docks. */
@media(min-width:761px){
  body.map-theme-dark .cleanBtn,
  body.map-theme-dark .cleanIconBtn,
  body.map-theme-dark .megaRightBtn{
    background:rgba(8,14,22,.90)!important;
    color:#e7eef7!important;
    border-color:rgba(95,123,152,.42)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.34)!important
  }
  body.map-theme-dark .cleanBtn:hover,
  body.map-theme-dark .cleanIconBtn:hover,
  body.map-theme-dark .megaRightBtn:hover{
    background:rgba(19,29,43,.98)!important;
    border-color:rgba(119,154,186,.56)!important
  }
  body.map-theme-dark .cleanBtn.active,
  body.map-theme-dark .megaRightBtn.active,
  body.map-theme-dark #megaStopsBtn.active{
    background:#12344d!important;color:#dff7ff!important;border-color:#2f6f91!important
  }
  body.map-theme-dark #megaLiveBtn .liveLed{border-color:#0b131e!important}
  body.map-theme-dark .cleanBtn .count{
    background:#203044!important;color:#f4f8fc!important;border-color:#08101a!important
  }
  body.map-theme-dark .iconOnlyBtn[data-tip]::after{
    background:rgba(231,238,247,.97);color:#10243b;box-shadow:0 8px 22px rgba(0,0,0,.42)
  }
}


/* ============================================================
   V46.30 — ICON DOCK POLISH
   Alleen visuele verfijning; geen kaart-/feedlogica aangepast.
   ============================================================ */
@media(min-width:981px){
  body{
    --icon-dock-size:41px!important;
    --icon-dock-gap:7px!important;
    --icon-dock-edge:10px!important;
  }

  /* Logo krijgt meer ademruimte t.o.v. het linker dock. */
  #megaBrand{
    left:18px!important;
    top:18px!important;
    font-size:20px!important;
    padding-left:14px!important;
    min-width:136px!important;
    overflow:visible!important;
  }

  /* Zoekbalk minder dominant en iets korter. */
  #searchBox{
    left:168px!important;
    top:10px!important;
    width:min(510px,calc(100vw - 720px))!important;
    min-width:330px!important;
    border-radius:15px!important;
  }
  #searchRow{height:46px!important}
  #searchInput{font-size:12px!important}

  /* Docks iets lager zodat logo niet tegen eerste knop aan zit. */
  #cleanLeftDock,
  #cleanRightDock{
    top:76px!important;
  }

  .cleanBtn,
  .cleanIconBtn,
  .megaRightBtn{
    border-radius:11px!important;
    box-shadow:0 4px 13px rgba(18,51,91,.105)!important;
  }

  .cleanBtn:hover,
  .cleanIconBtn:hover,
  .megaRightBtn:hover{
    box-shadow:0 6px 17px rgba(18,51,91,.15)!important;
  }

  .cleanBtn .icon,
  .cleanIconBtn .ri,
  .megaRightBtn .ri,
  .iconOnlyBtn svg{
    width:18px!important;
    height:18px!important;
  }

  /* Rechter dock dichter tegen schermrand. */
  #cleanRightDock{
    right:8px!important;
  }

  /* Linker dock subtiel dichter tegen rand. */
  #cleanLeftDock{
    left:10px!important;
  }

  /* Panelen blijven netjes naast kleinere docks openen. */
  #filters,#favoritePanel,#disruptionPanel,#navPanel{
    left:63px!important;
    top:76px!important;
  }
  #layers,#statusPanel,#themePanel{
    right:61px!important;
    top:76px!important;
  }

  /* Locatieknop gelijk aan de kleinere iconen. */
  #megaLocateQuick{
    right:8px!important;
    width:41px!important;
    height:41px!important;
    border-radius:11px!important;
  }

  /* Status onderaan compacter. */
  #cleanStatusBar{
    left:10px!important;
    bottom:8px!important;
    padding:5px 8px!important;
    gap:6px!important;
    min-height:26px!important;
    border-radius:9px!important;
    font-size:7px!important;
    box-shadow:0 4px 12px rgba(18,51,91,.08)!important;
  }
  #cleanStatusBar b,
  #cleanStatusBar strong{
    font-size:7px!important;
  }

  /* Tooltips blijven alleen hover/focus en zijn iets subtieler. */
  .iconOnlyBtn[data-tip]::after{
    padding:6px 8px!important;
    font-size:8px!important;
    border-radius:7px!important;
  }
  #cleanLeftDock .iconOnlyBtn[data-tip]::after{
    left:calc(100% + 8px)!important;
  }
  #cleanRightDock .iconOnlyBtn[data-tip]::after{
    right:calc(100% + 8px)!important;
  }

  #megaLiveBtn .liveLed{
    right:4px!important;
    bottom:4px!important;
    width:6px!important;
    height:6px!important;
  }

  .cleanBtn .count{
    right:-4px!important;
    top:-4px!important;
    min-width:16px!important;
    height:16px!important;
    padding:0 4px!important;
    font-size:6.5px!important;
  }
}

/* Kleine desktop/tablet: ook ongeveer 10% kleiner dan v46.29. */
@media(min-width:761px) and (max-width:980px){
  body{
    --icon-dock-size:38px!important;
    --icon-dock-gap:6px!important;
    --icon-dock-edge:7px!important;
  }
  #cleanLeftDock,#cleanRightDock{top:58px!important}
  .cleanBtn .icon,.cleanIconBtn .ri,.megaRightBtn .ri,.iconOnlyBtn svg{
    width:17px!important;height:17px!important
  }
  #filters,#favoritePanel,#disruptionPanel,#navPanel{
    left:52px!important;top:58px!important
  }
  #layers,#statusPanel,#themePanel{
    right:52px!important;top:58px!important
  }
  #megaLocateQuick{
    width:38px!important;height:38px!important;right:7px!important
  }
}

/* Dark mode: zelfde compactere schaduwen. */
@media(min-width:761px){
  body.map-theme-dark .cleanBtn,
  body.map-theme-dark .cleanIconBtn,
  body.map-theme-dark .megaRightBtn{
    box-shadow:0 5px 16px rgba(0,0,0,.30)!important;
  }
  body.map-theme-dark #cleanStatusBar{
    box-shadow:0 5px 16px rgba(0,0,0,.28)!important;
  }
}


/* ============================================================
   V46.31 — TREINBADGE OPTIE B: COMPACTE BESTEMMING
   Alleen treinen veranderen; bus/tram/metro houden bestaande badges.
   ============================================================ */
.ov-marker.trainCompactDestination{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 width:max-content!important;
 min-width:0!important;
 max-width:148px!important;
 height:25px!important;
 padding:0 6px!important;
 gap:4px!important;
 border-radius:8px!important;
 overflow:visible!important;
 white-space:nowrap!important;
}
.ov-marker.trainCompactDestination .trainTypeChip{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 flex:0 0 auto!important;
 height:17px!important;
 min-width:22px!important;
 padding:0 4px!important;
 border-radius:5px!important;
 background:rgba(255,255,255,.16)!important;
 border:1px solid rgba(255,255,255,.30)!important;
 color:#fff!important;
 font-size:8px!important;
 line-height:1!important;
 font-weight:950!important;
 letter-spacing:.02em!important;
}
.ov-marker.trainCompactDestination .trainBadgeSeparator{
 flex:0 0 auto!important;
 color:rgba(255,255,255,.78)!important;
 font-size:9px!important;
 font-weight:900!important;
}
.ov-marker.trainCompactDestination .trainDestination{
 display:block!important;
 flex:0 1 auto!important;
 min-width:14px!important;
 max-width:102px!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 color:#fff!important;
 font-size:9px!important;
 line-height:1!important;
 font-weight:900!important;
 letter-spacing:-.01em!important;
}

/* Exacte locatiepunt blijft onder het midden van de bredere treinbadge. */
.ov-marker-shell>.ov-marker.trainCompactDestination{
 left:0!important;
 transform:translate(-50%,-100%)!important;
}

/* Geselecteerde trein blijft leesbaar zonder groter label te worden. */
.ov-marker.trainCompactDestination.selected{
 box-shadow:0 0 0 3px rgba(15,23,42,.8),0 3px 10px rgba(15,23,42,.38)!important;
}

@media(max-width:980px){
 .ov-marker.trainCompactDestination{
  max-width:132px!important;
  height:24px!important;
  gap:3px!important;
  padding:0 5px!important;
 }
 .ov-marker.trainCompactDestination .trainTypeChip{
  height:16px!important;
  min-width:20px!important;
  padding:0 3px!important;
  font-size:7.5px!important;
 }
 .ov-marker.trainCompactDestination .trainDestination{
  max-width:88px!important;
  font-size:8.5px!important;
 }
}

@media(max-width:760px){
 .ov-marker.trainCompactDestination{
  max-width:118px!important;
  height:23px!important;
 }
 .ov-marker.trainCompactDestination .trainDestination{
  max-width:76px!important;
  font-size:8px!important;
 }
}

\n/* V46.33 — train label declutter */\n.ov-marker-shell.trainDotOnly>.ov-marker,.ov-marker-shell.trainDotOnly>.ov-gps-stem{display:none!important}\n.ov-marker.trainTypeOnlyBadge{min-width:30px!important;width:auto!important;max-width:48px!important;padding:0 5px!important;display:flex;justify-content:center}\n.ov-marker.trainTypeOnlyBadge .trainTypeChip.trainTypeOnly{min-width:auto!important;padding:0!important;background:transparent!important;border:0!important;color:#fff!important}\n.ov-marker-shell.trainLabelSuppressed>.ov-gps-dot{display:block!important}\n
/* ============================================================
   V46.34 — COMPACT TRAIN HOVER UI
   Trein = klein icoon op exacte positie.
   Bestemming alleen bij hover/focus; mobiel via compacte klikpopup.
   ============================================================ */
.trainIconShell{
 position:relative!important;
 width:0!important;
 height:0!important;
 overflow:visible!important;
 z-index:1;
}

.trainIconButton{
 position:absolute;
 left:0;
 top:0;
 width:22px;
 height:22px;
 transform:translate(-50%,-50%);
 border:2px solid #fff;
 border-radius:7px;
 box-sizing:border-box;
 display:grid;
 place-items:center;
 box-shadow:
  0 0 0 1px rgba(15,23,42,.28),
  0 2px 5px rgba(15,23,42,.22);
 cursor:pointer;
 z-index:4;
 transition:transform .12s ease,box-shadow .12s ease;
}
.trainIconButton svg{
 width:14px;
 height:14px;
 fill:#fff;
 display:block;
}
.trainIconShell:hover .trainIconButton,
.trainIconShell:focus-within .trainIconButton{
 transform:translate(-50%,-50%) scale(1.08);
 box-shadow:
  0 0 0 1px rgba(15,23,42,.35),
  0 4px 9px rgba(15,23,42,.28);
}
.trainIconShell.selected .trainIconButton{
 width:24px;
 height:24px;
 box-shadow:
  0 0 0 2px rgba(15,23,42,.72),
  0 3px 8px rgba(15,23,42,.30);
}

/* Alleen zichtbaar wanneer de gebruiker de trein aanwijst. */
.trainHoverLabel{
 position:absolute;
 left:0;
 bottom:16px;
 transform:translate(-50%,-4px);
 display:block;
 width:max-content;
 max-width:180px;
 padding:5px 7px;
 border:1px solid rgba(255,255,255,.95);
 border-radius:7px;
 background:rgba(22,119,78,.97);
 color:#fff;
 box-shadow:0 5px 14px rgba(15,23,42,.24);
 font-size:9px;
 line-height:1.1;
 font-weight:900;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 z-index:8;
 transition:opacity .08s ease,transform .08s ease,visibility 0s linear .08s;
}
.trainIconShell:hover .trainHoverLabel,
.trainIconShell:focus-within .trainHoverLabel,
.leaflet-marker-icon:focus .trainHoverLabel{
 opacity:1;
 visibility:visible;
 transform:translate(-50%,-7px);
 transition-delay:.12s;
}
.trainIconShell.edgeLeft .trainHoverLabel{
 left:-10px;right:auto;transform:translate(0,-4px)
}
.trainIconShell.edgeLeft:hover .trainHoverLabel,
.trainIconShell.edgeLeft:focus-within .trainHoverLabel,
.leaflet-marker-icon:focus .trainIconShell.edgeLeft .trainHoverLabel{
 transform:translate(0,-7px)
}
.trainIconShell.edgeRight .trainHoverLabel{
 left:auto;right:-10px;transform:translate(0,-4px)
}
.trainIconShell.edgeRight:hover .trainHoverLabel,
.trainIconShell.edgeRight:focus-within .trainHoverLabel,
.leaflet-marker-icon:focus .trainIconShell.edgeRight .trainHoverLabel{
 transform:translate(0,-7px)
}
.trainIconShell.punct-blue .trainHoverLabel{background:rgba(37,99,235,.97)}
.trainIconShell.punct-orange .trainHoverLabel{background:rgba(194,92,8,.97)}
.trainIconShell.punct-red .trainHoverLabel{background:rgba(185,28,28,.97)}
.trainIconShell.punct-gray .trainHoverLabel{background:rgba(71,85,105,.97)}
.canvasTrainHoverTooltip{
 padding:5px 7px!important;border:1px solid rgba(255,255,255,.95)!important;
 border-radius:7px!important;background:rgba(22,119,78,.97)!important;color:#fff!important;
 box-shadow:0 5px 14px rgba(15,23,42,.24)!important;font-size:9px!important;
 line-height:1.1!important;font-weight:900!important;white-space:nowrap!important
}
.canvasTrainHoverTooltip.punct-blue{background:rgba(37,99,235,.97)!important}
.canvasTrainHoverTooltip.punct-orange{background:rgba(194,92,8,.97)!important}
.canvasTrainHoverTooltip.punct-red{background:rgba(185,28,28,.97)!important}
.canvasTrainHoverTooltip.punct-gray{background:rgba(71,85,105,.97)!important}
.canvasTrainHoverTooltip:before{display:none!important}
/* Zodra popup/selectie actief is geen dubbele hovertekst boven popup. */
.trainIconShell.selected .trainHoverLabel{
 opacity:0!important;
 visibility:hidden!important;
}

/* Compacte treinpopup */
.trainCompactLeafletPopup .leaflet-popup-content-wrapper{
 border-radius:12px!important;
}
.trainCompactLeafletPopup .leaflet-popup-content{
 max-height:none!important;
 overflow:visible!important;
}
.trainMiniPopup{
 width:248px;
 max-width:calc(100vw - 54px);
 color:#243c56;
 font-size:9px;
}
.trainMiniHead{
 display:flex;
 align-items:center;
 gap:8px;
 padding:10px 11px 8px;
 border-bottom:1px solid #e8edf3;
}
.trainMiniIcon{
 width:29px;
 height:29px;
 flex:0 0 29px;
 display:grid;
 place-items:center;
 border-radius:8px;
 box-shadow:0 2px 5px rgba(15,23,42,.16);
}
.trainMiniIcon svg{
 width:17px;
 height:17px;
 fill:#fff;
}
.trainMiniTitle{
 min-width:0;
 flex:1;
}
.trainMiniTitle small{
 display:block;
 color:#6f8094;
 font-size:7px;
 font-weight:900;
 text-transform:uppercase;
 margin-bottom:2px;
}
.trainMiniTitle b{
 display:block;
 color:#1d3858;
 font-size:11px;
 line-height:1.15;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.trainMiniMeta{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:8px;
 padding:7px 11px;
 color:#617286;
 border-bottom:1px solid #edf1f5;
}
.trainMiniMeta span{
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.trainMiniMeta b{
 color:#1f5361;
 white-space:nowrap;
}
.trainMiniNext{
 display:grid;
 grid-template-columns:auto 1fr auto;
 align-items:center;
 gap:6px;
 padding:7px 11px;
 color:#314e6b;
 background:#f7fafc;
}
.trainMiniNext small{
 color:#7b8999;
 font-size:7px;
 font-weight:850;
}
.trainMiniNext span{
 min-width:0;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-weight:850;
}
.trainMiniNext b{
 color:#0f766e;
 font-size:8px;
}
.trainMiniActions{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:4px;
 padding:8px 9px 9px;
 border-top:1px solid #edf1f5;
}
.trainMiniActions button{
 min-height:29px!important;
 padding:0 4px!important;
 border:1px solid #dce5ee!important;
 border-radius:7px!important;
 background:#f1f5f8!important;
 color:#29425e!important;
 font-size:7.5px!important;
 font-weight:900!important;
 cursor:pointer;
}

/* Nachtstand ook compact/donker. */
body.map-theme-dark .trainHoverLabel{
 background:rgba(12,32,39,.98)!important;
 border-color:rgba(92,153,137,.72)!important;
 box-shadow:0 6px 18px rgba(0,0,0,.45)!important;
}
body.map-theme-dark .trainMiniPopup{color:#dfe8f2!important}
body.map-theme-dark .trainMiniHead,
body.map-theme-dark .trainMiniMeta,
body.map-theme-dark .trainMiniActions{
 border-color:rgba(95,123,152,.20)!important;
}
body.map-theme-dark .trainMiniTitle small{color:#9fb0c3!important}
body.map-theme-dark .trainMiniTitle b{color:#f1f6fa!important}
body.map-theme-dark .trainMiniMeta{color:#b5c5d4!important}
body.map-theme-dark .trainMiniMeta b{color:#8ed9c3!important}
body.map-theme-dark .trainMiniNext{
 background:rgba(17,25,37,.94)!important;
 color:#d9e5ef!important;
}
body.map-theme-dark .trainMiniActions button{
 background:rgba(17,25,37,.96)!important;
 color:#e5edf5!important;
 border-color:rgba(95,123,152,.28)!important;
}

/* Touchscreens hebben geen bruikbare hover: bestemming via compacte klikpopup. */
@media(hover:none),(pointer:coarse){
 .trainHoverLabel{display:none!important}
 .trainIconButton{width:24px;height:24px}
 .trainIconButton svg{width:15px;height:15px}
}

@media(prefers-reduced-motion:reduce){
 .trainHoverLabel,.trainIconButton{transition:none!important}
}

/* Mobiel: popup bewust kleiner dan de gewone voertuigpopup. */
@media(max-width:760px){
 .trainMiniPopup{
  width:min(255px,calc(100vw - 58px))!important;
 }
 .trainMiniActions button{
  min-height:34px!important;
  font-size:8px!important;
 }
}


/* ============================================================
   V51.3.1 — MOBILE CLICK HOTFIX
   Veilige mobiele polish zonder full-screen touch blockers.
   - Geen wijziging aan live voertuigen, SSE, API of marker-rendering.
   - Herstelt klikken/tappen op mobiel door overlay-panelen zonder .open
     echt onklikbaar/onzichtbaar te maken.
   - Leaflet popup pane blokkeert de kaart niet; popup zelf blijft klikbaar.
   ============================================================ */
@media(max-width:760px){
  :root{
    --mobile-nav-height:58px;
    --mobile-nav-gap:8px;
  }

  html,body{
    height:100%;
    overflow:hidden;
    touch-action:auto!important;
  }
  #map{
    height:100%;
    touch-action:none!important;
    pointer-events:auto!important;
  }

  /* Belangrijk: onzichtbare sheets/scrims mogen geen taps opvangen. */
  #mobileMapScrim:not(.open),
  #mobileMapMore:not(.open),
  #filters:not(.open),
  #favoritePanel:not(.open),
  #disruptionPanel:not(.open),
  #navPanel:not(.open),
  #layers:not(.open),
  #statusPanel:not(.open),
  #themePanel:not(.open),
  #cleanMenuPanel:not(.open){
    pointer-events:none!important;
    visibility:hidden!important;
  }

  #mobileMapScrim.open,
  #mobileMapMore.open,
  #filters.open,
  #favoritePanel.open,
  #disruptionPanel.open,
  #navPanel.open,
  #layers.open,
  #statusPanel.open,
  #themePanel.open,
  #cleanMenuPanel.open{
    pointer-events:auto!important;
    visibility:visible!important;
  }

  /* Leaflet-popup-pane is schermbreed; laat alleen de popup zelf klikken vangen. */
  .leaflet-popup-pane{pointer-events:none!important}
  .leaflet-popup,
  .leaflet-popup *{pointer-events:auto!important}
  .leaflet-marker-pane,
  .leaflet-marker-icon,
  .leaflet-interactive,
  .ov-marker-shell,
  .trainIconShell,
  .mobileStopTouch{pointer-events:auto!important}

  /* Zoekbalk kleiner maar volledig klikbaar. */
  #searchBox{
    position:fixed!important;
    top:calc(7px + env(safe-area-inset-top))!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    min-width:0!important;
    z-index:1180!important;
    border-radius:14px!important;
    pointer-events:auto!important;
    box-shadow:0 5px 18px rgba(18,51,91,.14)!important;
  }
  #searchBox *,#searchRow,#searchInput,#searchIcon{pointer-events:auto!important}
  #searchRow{height:43px!important}
  #searchInput{font-size:14px!important;padding:0 12px!important}
  #searchInput::placeholder{font-size:14px!important}
  #searchResults{max-height:min(52dvh,390px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Bottom-nav compact en boven alles klikbaar. */
  #mobileMapNav{
    position:fixed!important;
    display:grid!important;
    z-index:1210!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    height:var(--mobile-nav-height)!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:3px!important;
    padding:4px!important;
    border-radius:18px!important;
    pointer-events:auto!important;
  }
  #mobileMapNav *, .mobileMapBtn{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .mobileMapBtn{min-height:48px!important;font-size:8px!important;border-radius:13px!important}
  .mobileMapBtn .mi{font-size:17px!important;line-height:18px!important}
  .mobileMapBtn .ml{font-size:8px!important}

  /* Status is informatief en mag geen kaart/markers blokkeren. */
  #cleanStatusBar{
    left:8px!important;
    right:auto!important;
    bottom:calc(var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom))!important;
    max-width:calc(100vw - 112px)!important;
    z-index:1160!important;
    padding:5px 7px!important;
    font-size:7px!important;
    border-radius:999px!important;
    pointer-events:none!important;
  }
  #cleanStatusBar .mobileHide,#cleanStatusBar .hideNarrow{display:none!important}

  /* Rechter kaartknoppen/zoom blijven klikbaar maar staan boven de navigatie. */
  .leaflet-control-container,
  .leaflet-control,
  .leaflet-control a,
  #megaLocateQuick,
  #megaLocateQuick *{pointer-events:auto!important;touch-action:manipulation!important}
  .leaflet-bottom.leaflet-right{bottom:calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom))!important}
  .leaflet-control-zoom a{width:39px!important;height:39px!important;line-height:39px!important;font-size:18px!important}
  #megaLocateQuick{right:11px!important;bottom:calc(var(--mobile-nav-height) + 118px + env(safe-area-inset-bottom))!important;width:42px!important;height:42px!important;border-radius:14px!important;z-index:1165!important}

  /* Panelen blijven sheets, maar alleen open panels nemen touch over. */
  #mobileMapMore,
  #filters,#favoritePanel,#disruptionPanel,#navPanel,#layers,#statusPanel,#themePanel,#cleanMenuPanel{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(68dvh,590px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
    z-index:1205!important;
  }
  #mobileMapMore:not(.open){transform:translateY(calc(100% + 110px))!important;opacity:0!important}
  #mobileMapMore.open{transform:translateY(0)!important;opacity:1!important}

  /* Routeplanner compact, maar hidden blijft echt hidden. */
  .routePlanner[hidden]{display:none!important;pointer-events:none!important;visibility:hidden!important}
  .routePlanner:not([hidden]){
    left:8px!important;
    right:8px!important;
    width:auto!important;
    top:auto!important;
    bottom:calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom))!important;
    max-height:min(62dvh,540px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:1207!important;
    pointer-events:auto!important;
    border-radius:18px!important;
  }
  .routePlanner *, .routePlanner button{pointer-events:auto!important;touch-action:manipulation!important}

  /* Popup blijft normale Leaflet-popup, niet geforceerd fullscreen/bottom fixed. */
  .leaflet-popup.mobileVehicleSheet{
    position:absolute!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    max-width:calc(100vw - 18px)!important;
    z-index:1230!important;
  }
  .leaflet-popup.mobileVehicleSheet .leaflet-popup-content-wrapper{
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:0 9px 28px rgba(15,23,42,.24)!important;
  }
  .leaflet-popup.mobileVehicleSheet .leaflet-popup-content{
    margin:0!important;
    max-height:min(58dvh,430px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mobileSheetHandle{display:none!important}
  .vehiclePopup{width:min(330px,calc(100vw - 46px))!important;max-width:100%!important}
  .vehiclePopup .megaInfo{grid-template-columns:auto 1fr auto 1fr!important}
  .vehiclePopup .popupActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .vehiclePopup .popupActions button{min-height:39px!important;font-size:8.5px!important}

  #liveHealth,#perf,#proLegend{display:none!important}
}


/* ============================================================
   V51.3.2 — MOBILE COMPACT POPUP HOTFIX
   Doel: mobiele voertuigpopup rustiger en lager maken zonder touch te blokkeren.
   Alleen CSS: live-data, SSE, marker-rendering en popup-bindings blijven ongemoeid.
   ============================================================ */
@media(max-width:760px){
  :root{--mobile-nav-height:58px}

  /* Meer kaart in beeld: zoekbalk en ondernav iets compacter. */
  #searchBox{
    left:10px!important;
    right:10px!important;
    top:10px!important;
    width:auto!important;
    height:48px!important;
    border-radius:16px!important;
    z-index:1168!important;
  }
  #searchInput{font-size:14px!important;padding:0 14px!important}
  #mobileMapNav{
    left:9px!important;right:9px!important;
    height:56px!important;
    padding:4px!important;
    border-radius:16px!important;
  }
  .mobileMapBtn{font-size:8.5px!important;gap:1px!important;padding:1px!important}
  .mobileMapBtn .mi{font-size:16px!important;line-height:17px!important}
  .mobileMapBtn .badge{top:1px!important;right:7px!important;min-width:15px!important;height:15px!important;font-size:6.5px!important}

  /* Statusbalk net boven de ondernav en niet over Leaflet-attributie heen. */
  #cleanStatusBar{
    left:8px!important;
    bottom:calc(var(--mobile-nav-height) + 15px + env(safe-area-inset-bottom))!important;
    padding:5px 7px!important;
    font-size:7.5px!important;
    gap:5px!important;
    border-radius:9px!important;
    max-width:calc(100vw - 120px)!important;
  }

  /* Rechter knoppen nemen minder verticale ruimte in. */
  .leaflet-bottom.leaflet-right{bottom:calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom))!important}
  .leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important;font-size:17px!important}
  #megaLocateQuick{right:10px!important;bottom:calc(var(--mobile-nav-height) + 108px + env(safe-area-inset-bottom))!important;width:38px!important;height:38px!important;border-radius:13px!important}

  /* Popup blijft gewone Leaflet-popup, maar veel compacter. */
  .leaflet-popup,
  .leaflet-popup.mobileVehicleSheet{
    max-width:calc(100vw - 24px)!important;
    pointer-events:auto!important;
  }
  .leaflet-popup-content-wrapper,
  .leaflet-popup.mobileVehicleSheet .leaflet-popup-content-wrapper{
    max-width:calc(100vw - 24px)!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .leaflet-popup-content,
  .leaflet-popup.mobileVehicleSheet .leaflet-popup-content{
    margin:0!important;
    max-height:min(48dvh,360px)!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .vehiclePopup{
    width:min(286px,calc(100vw - 54px))!important;
    max-width:100%!important;
    font-size:9px!important;
  }

  /* Header: bestemming leesbaar, maar minder hoog. */
  .vehiclePopup .megaVHead{
    padding:8px 10px 6px!important;
    gap:7px!important;
    align-items:flex-start!important;
  }
  .vehiclePopup .lineBadge{
    padding:5px 7px!important;
    font-size:8.5px!important;
    border-radius:8px!important;
    max-width:92px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    flex:0 0 auto!important;
  }
  .vehiclePopup .megaVTitle b{
    font-size:11px!important;
    line-height:1.15!important;
    max-width:160px!important;
  }
  .vehiclePopup .megaVTitle small{
    font-size:7.5px!important;
    line-height:1.18!important;
    margin-top:1px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  /* Metadata als één dunne regel. */
  .vehiclePopup .megaInfo{
    display:flex!important;
    grid-template-columns:none!important;
    gap:5px!important;
    padding:5px 10px!important;
    font-size:8px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .vehiclePopup .megaInfo .k{font-size:7px!important;color:#64748b!important}
  .vehiclePopup .megaInfo .v{font-size:8px!important;margin-right:6px!important;font-weight:900!important}

  /* Ritvoortgang blijft, maar laag en rustig. */
  .vehiclePopup .tripProgressCard{
    margin:5px 8px 4px!important;
    padding:6px 7px!important;
    border-radius:9px!important;
  }
  .vehiclePopup .tripProgressTop{
    display:block!important;
    font-size:7.5px!important;
    line-height:1.25!important;
  }
  .vehiclePopup .nextEtaPill{
    display:block!important;
    width:fit-content!important;
    max-width:100%!important;
    margin-top:4px!important;
    padding:3px 6px!important;
    font-size:7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .vehiclePopup .tripProgressTrack{height:5px!important;margin:6px 0 4px!important}
  .vehiclePopup .tripProgressStops{font-size:7px!important}

  /* De grote driepunts-routebalk op mobiel weg; dat scheelt veel hoogte. */
  .vehiclePopup .miniRoute{display:none!important}

  /* Volgende haltes: alleen eerstvolgende direct tonen, rest via +haltes knop. */
  .vehiclePopup .megaStopHead{display:none!important}
  .vehiclePopup .stopBarLine{
    display:block!important;
    padding:0 10px 5px!important;
  }
  .vehiclePopup .nextStopsAlways{
    display:block!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .vehiclePopup .nextStopsAlways .megaStopRow{
    display:grid!important;
    grid-template-columns:13px minmax(0,1fr)!important;
    gap:7px!important;
    min-height:0!important;
    padding:5px 0!important;
    align-items:center!important;
  }
  .vehiclePopup .nextStopsAlways .megaStopRow:not(:first-child){display:none!important}
  .vehiclePopup .nextStopsAlways .megaStopRail{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    height:auto!important;
    display:flex!important;
    justify-content:center!important;
  }
  .vehiclePopup .nextStopsAlways .megaStopRail:after{display:none!important}
  .vehiclePopup .nextStopsAlways .megaStopDot{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:9px!important;height:9px!important;
    margin:0!important;
  }
  .vehiclePopup .nextStopsAlways .megaStopName{
    display:block!important;
    max-width:none!important;
    padding:0!important;
    font-size:9px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#233d59!important;
    font-weight:900!important;
  }
  .vehiclePopup .nextStopsAlways .megaStopName:before{
    content:'Volgende: ';
    color:#718096;
    font-weight:800;
  }
  .vehiclePopup .nextStopsAlways .megaStopTime{display:none!important}
  .vehiclePopup .extraStopsMini{
    display:block!important;
    width:100%!important;
    min-height:24px!important;
    padding:3px 0 0!important;
    font-size:7.5px!important;
    text-align:right!important;
    color:#32516f!important;
  }
  .vehiclePopup .extraStopsPanel{margin:0 0 5px!important;max-height:180px!important;overflow:auto!important}

  /* Acties in één lage rij. */
  .vehiclePopup .popupActions{
    display:grid!important;
    grid-template-columns:1.15fr 1fr .75fr .75fr!important;
    gap:4px!important;
    padding:6px 9px 8px!important;
    margin:0!important;
  }
  .vehiclePopup .popupActions button{
    min-height:31px!important;
    padding:2px 3px!important;
    font-size:7.8px!important;
    border-radius:8px!important;
  }

  .leaflet-popup-close-button{
    width:32px!important;
    height:32px!important;
    line-height:31px!important;
    font-size:22px!important;
  }
}

@media(max-width:360px){
  .vehiclePopup{width:calc(100vw - 50px)!important}
  .vehiclePopup .megaVTitle b{max-width:138px!important;font-size:10.5px!important}
  .vehiclePopup .popupActions button{font-size:7.2px!important}
}