*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Theme palette ─────────────────────────────────────────── */
:root,html[data-theme="dark"]{
  --bg:#1a1d2e; --panel:#13151f; --panel2:#0f1118; --border:#2a2d3e;
  --text:#e0e4f0; --muted:#4a5070; --hover:#1e2235; --hover2:#1e2130;
  --map-bg:#1a1d2e;
  --num-bg:#1e2a4a; --num-border:#3a4a7a; --num-text:#7090e0;
  --mk-bg:#1e2a4a; --mk-border:#3a5aaa; --mk-text:#7090e0;
}
html[data-theme="light"]{
  --bg:#eef1f7; --panel:#ffffff; --panel2:#f3f5fa; --border:#d3d9e6;
  --text:#1a1d2e; --muted:#8089a3; --hover:#e7ecf6; --hover2:#eef1f7;
  --map-bg:#dfe6ef;
  --num-bg:#dbe4f7; --num-border:#9fb4e6; --num-text:#3a5aaa;
  --mk-bg:#ffffff; --mk-border:#3a5aaa; --mk-text:#28407a;
}

html,body{height:100%;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
/* 100dvh (not 100vh) so the layout matches the *visible* viewport on mobile:
   on Android Chrome the address bar stays put and 100vh overshoots, which used
   to push the collapsed route bar off the bottom of the screen. */
#app{display:flex;height:100vh;height:100dvh;flex-direction:column}

/* Header */
#header{position:relative;background:var(--panel);border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;z-index:1000}
#header-top{display:flex;align-items:center;gap:10px}
#header-controls{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
#title{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
#search-box{position:relative;flex:1;min-width:120px;max-width:240px}
#search-glyph{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
#search-input{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:6px 10px 6px 28px;font-size:13px;outline:none}
#search-results{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:6px;margin-top:2px;z-index:2000;max-height:260px;overflow-y:auto;display:none}
.search-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--hover2);display:flex;align-items:center;gap:8px}
.search-item:hover,.search-item.active{background:var(--hover)}
.search-kind{font-size:10px;color:var(--muted);margin-left:auto;text-transform:uppercase;letter-spacing:.05em}
.search-icon{width:18px;text-align:center;flex-shrink:0}
.icon-btn{background:var(--panel2);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:6px 9px;font-size:14px;line-height:1;cursor:pointer;min-width:32px}
.icon-btn:hover{border-color:var(--num-border)}
.icon-btn.off{opacity:.4}
/* Toolbar buttons are icon-only (the tooltip carries the meaning) */
.btn-label{display:none}

/* Shown only on narrow (mobile) viewports */
.mobile-only{display:none}

/* GPX (uploaded) route card */
.gpx-badge{font-size:9px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:1px 5px;letter-spacing:.04em;white-space:nowrap;flex-shrink:0}
.gpx-info{padding:14px 10px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7;cursor:pointer;border:1px dashed var(--border);border-radius:6px}
.gpx-info:hover{border-color:var(--rc,#34d399);color:var(--text)}
.gpx-info i{color:var(--rc,#34d399)}
.gpx-sub{font-size:10px}

/* Main layout */
#main{flex:1;display:flex;min-height:0}
#map{flex:1;min-width:0;position:relative}
#map.selecting{cursor:crosshair}

/* Fullscreen toggle — top-right of the map, above the Leaflet panes */
.map-btn{position:absolute;top:10px;right:10px;z-index:1000;width:40px;height:40px;border-radius:8px;background:var(--panel);color:var(--text);border:1px solid var(--border);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.map-btn:hover{border-color:var(--num-border);color:var(--num-text)}

/* Live km readout for the active route — only shown in fullscreen */
#fs-readout{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1000;display:none;background:var(--panel);border:1px solid var(--num-border);border-radius:10px;padding:8px 16px;box-shadow:0 4px 18px rgba(0,0,0,.35);white-space:nowrap;align-items:baseline;gap:10px}
#app.fullscreen #fs-readout{display:flex}
#fs-readout .fs-dot{width:10px;height:10px;border-radius:50%;background:var(--active-color,#34d399);align-self:center;flex-shrink:0}
#fs-readout .fs-name{font-size:13px;font-weight:700;color:var(--text);max-width:40vw;overflow:hidden;text-overflow:ellipsis}
#fs-readout .fs-km{font-size:18px;font-weight:800;color:var(--active-color,#34d399)}
#fs-readout .fs-km small{font-size:12px;font-weight:700;color:var(--muted);margin-left:2px}

/* Fullscreen: hide all chrome, leave only the map (+ fullscreen btn & readout) */
#app.fullscreen #header,#app.fullscreen #divider,#app.fullscreen #sidebar,#app.fullscreen #route-add-float{display:none}

/* Hint shown when zoomed out too far to render the numbered junctions */
#zoom-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:900;display:none;background:var(--panel);border:1px solid var(--num-border);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 4px 18px rgba(0,0,0,.3);pointer-events:none;white-space:nowrap}
#zoom-hint i{margin-right:6px;color:var(--num-text)}
#map.show-zoomhint:not(.hide-knopen) #zoom-hint{display:block}

/* Floating "add route" button — always visible, bottom-right of the map */
#route-add-float{position:absolute;right:16px;bottom:16px;z-index:1000;width:52px;height:52px;border-radius:50%;background:var(--num-bg);color:var(--num-text);border:2px solid var(--num-border);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .12s}
#route-add-float:hover{transform:scale(1.08)}

/* Draggable divider between map and routes panel */
#divider{width:6px;flex-shrink:0;cursor:col-resize;background:var(--border);position:relative}
#divider:hover,#divider:active{background:var(--num-border)}
#divider::after{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);width:2px;height:28px;border-radius:2px;background:var(--muted);opacity:.6}

/* Sidebar holds routes side by side */
#sidebar{width:300px;background:var(--panel);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
#sidebar-bar{display:none;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
#sidebar-summary{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#routes-panel{flex:1;display:flex;flex-direction:row;align-items:stretch;gap:8px;padding:8px;overflow-x:auto;overflow-y:hidden}

/* Route card */
.route-card{flex:0 0 230px;display:flex;flex-direction:column;min-height:0;background:var(--panel2);border:1px solid var(--border);border-top:3px solid var(--rc,#34d399);border-radius:8px;overflow:hidden}
.route-card.active{box-shadow:0 0 0 2px var(--rc,#34d399) inset}
.route-card.hidden-route{opacity:.55}
.card-head{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:7px 8px;border-bottom:1px solid var(--border)}
.card-title-row{display:flex;align-items:center;gap:5px;min-width:0}
.card-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.card-head button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:3px}
.card-head button:hover{color:var(--text)}
.card-pencil{color:var(--muted)}
.route-card.active .card-pencil{color:var(--rc,#34d399)}
.card-dot{width:9px;height:9px;border-radius:50%;background:var(--rc,#34d399);flex-shrink:0}
.card-name{flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-fit:hover{color:#2dd4bf}
.card-share:hover{color:#7090e0}
.card-download:hover{color:#34d399}
.card-duplicate:hover{color:#a78bfa}
.card-reverse:hover{color:#64d2ff}
.card-eraser:hover{color:#f0b060}
.card-trash:hover{color:#f87171}
.card-list{flex:1;overflow-y:auto;padding:8px}
.card-total{padding:8px 10px;border-top:1px solid var(--border);font-size:12px}

.route-item{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:7px 9px;margin-bottom:6px;display:flex;align-items:center;gap:8px;cursor:grab;user-select:none;transition:border-color .15s}
.route-item:active{cursor:grabbing}
.route-item.dragging{opacity:.4}
.route-item.drop-before::before,.route-item.drop-after::after{content:"";position:absolute;left:4px;right:4px;height:3px;border-radius:2px;background:var(--rc,#34d399)}
.route-item.drop-before::before{top:-5px}
.route-item.drop-after::after{bottom:-5px}
.route-num{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--n,#34d399) 30%,var(--panel));border:1px solid var(--n,#34d399);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text);flex-shrink:0}
.route-info{flex:1;min-width:0}
.route-knoop{font-size:13px;font-weight:700;color:var(--text)}
.route-seg{font-size:10px;color:var(--muted);margin-top:1px}
.route-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 2px;flex-shrink:0}
.route-del:hover{color:#f87171}
.total-label{color:var(--muted)}
.total-val{color:var(--rc,#34d399);font-weight:700;font-size:15px}
.total-climb{color:var(--muted);font-weight:700;font-size:12px;margin-left:6px}
.total-climb i{margin-right:2px}
.total-up i{color:#e8590c}
.total-down i{color:#1971c2}
.empty-state{padding:16px 8px;text-align:center;color:var(--muted);font-size:11px;line-height:1.6}

/* Loop-builder actions at the bottom of a route's node list */
.list-actions{display:flex;flex-direction:column;gap:5px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.list-action{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 8px;font-size:11px;cursor:pointer;width:100%}
.list-action:hover{border-color:var(--rc,#34d399);color:var(--rc,#34d399)}

/* Export dropdown (per route): GPX or knooppunten-afbeelding */
.dl-menu{position:fixed;z-index:10002;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:5px;min-width:200px;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.dl-menu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-radius:5px;color:var(--text);padding:8px 10px;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;white-space:nowrap}
.dl-menu button i{width:16px;text-align:center;color:var(--muted)}
.dl-menu button:hover{background:var(--hover)}
.dl-menu button:hover i{color:var(--text)}
.dl-sep{height:1px;background:var(--border);margin:4px 6px}
.dl-ar{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;letter-spacing:.03em}

/* Drag hint: shows which two junctions the dragged point lands between */
#drag-hint{position:fixed;z-index:10001;display:none;background:var(--panel);border:1px solid var(--num-border);border-radius:6px;padding:4px 9px;font-size:11px;font-weight:600;color:var(--text);pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3)}

/* Mobile: sidebar below map, divider becomes horizontal grabber */
@media(max-width:600px){
  .mobile-only{display:inline-flex}
  .desktop-only{display:none!important}
  .title-sub{display:none}
  /* Two compact rows: row 1 = title + buttons, row 2 = the remaining buttons.
     Stats and inline search field are dropped to save vertical space. */
  #header{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  #header-top{justify-content:space-between;align-items:center}
  #header-top-actions{display:flex;gap:8px;flex-shrink:0}
  #title{font-size:16px}
  /* Right-align both button rows with the same gap + uniform square buttons,
     so the icons line up in columns from the right edge. */
  #header-controls{width:100%;justify-content:flex-end;gap:8px}
  .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:0;padding:0;font-size:18px}
  /* Search sits behind a button (next to the title); it drops open as a panel */
  #search-box{position:absolute;top:calc(100% + 8px);left:12px;right:12px;max-width:none;display:none;z-index:2500}
  #app.search-open #search-box{display:block}
  #search-input{font-size:16px;padding:11px 12px 11px 34px}
  #search-glyph{font-size:14px;left:12px}
  #app.header-collapsed #header-controls{display:none}
  #main{flex-direction:column}
  #map{min-height:0}
  #divider{width:100%;height:6px;cursor:row-resize}
  #divider::after{left:50%;top:1px;transform:translateX(-50%);width:28px;height:2px}
  #sidebar{width:100%!important;height:230px;border-left:none;border-top:1px solid var(--border)}
  #sidebar-bar{display:flex}
  #sidebar.collapsed{height:auto}
  #sidebar.collapsed #routes-panel{display:none}
  .route-card{flex-basis:200px}
}

/* Leaflet overrides */
.leaflet-container{background:var(--map-bg)}
/* Center the marker within its 26×26 icon box, so a shrunk dot (low zoom) stays
   on the anchor point instead of drifting to the top-left corner. */
.knoop-ic{display:flex;align-items:center;justify-content:center}
.knoop-marker{width:26px;height:26px;border-radius:50%;background:var(--mk-bg);border:2px solid var(--mk-border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--mk-text);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.knoop-marker:hover,.knoop-marker.hover{background:#2a3a6a;border-color:#7090e0;color:#cdd9f5;transform:scale(1.18)}
.knoop-marker.in-route{background:color-mix(in srgb,var(--active-color,#34d399) 22%,var(--mk-bg));border-color:var(--active-color,#34d399);color:var(--active-color,#34d399)}
.knoop-marker.box-hit{background:#3a2a1a;border-color:#f0b060;color:#f0b060}

/* Climb markers: coloured tier badge on hilly segments (10+/30+/50+ m) */
.climb-ic{display:flex;align-items:center;justify-content:center}
.climb-badge{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.climb-badge.t1{background:#2f9e44}
.climb-badge.t2{background:#f08c00}
.climb-badge.t3{background:#e03131}
/* Legend, shown only while the climb badges are on */
#climb-legend{position:absolute;left:16px;bottom:16px;z-index:1000;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.3);pointer-events:none}
#climb-legend[hidden]{display:none}
.climb-legend-title{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.climb-legend-row{display:flex;align-items:center;gap:8px;line-height:20px}
.climb-legend-row+.climb-legend-row{margin-top:4px}
.climb-legend-row .climb-badge{flex:0 0 auto}

/* Hide all knooppunt markers */
#map.hide-knopen .knoop-marker{display:none}

/* Low zoom: collapse numbered markers to small dots */
#map.lowzoom .knoop-marker{width:10px;height:10px;border-width:2px;font-size:0;color:transparent}
#map.lowzoom .knoop-marker.in-route{width:13px;height:13px}
#map.lowzoom .knoop-marker:hover,#map.lowzoom .knoop-marker.hover{transform:scale(1.6)}

/* Box select rubber band */
#select-box{position:absolute;border:1.5px dashed #f0b060;background:rgba(240,176,96,.12);z-index:1500;pointer-events:none;display:none}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--num-border);border-radius:8px;padding:10px 18px;font-size:13px;color:var(--text);z-index:9999;display:none;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.25)}

/* Confirmation modal */
#modal{position:fixed;inset:0;background:rgba(10,12,20,.55);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px}
#modal-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;max-width:340px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.4)}
#modal-icon{font-size:30px;color:#f0b060;margin-bottom:10px}
#modal-msg{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:18px}
.modal-input{display:block;width:100%;margin-top:12px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;font-size:14px;outline:none;text-align:center}
.modal-input:focus{border-color:var(--num-border)}
/* Segmented choice inside a prompt modal (e.g. climb preference) */
.modal-seg{display:flex;gap:6px;margin-top:12px}
.modal-seg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--muted);padding:9px 6px;font-size:11px;font-weight:600;cursor:pointer}
.modal-seg button i{font-size:15px}
.modal-seg button:hover{border-color:var(--num-border)}
.modal-seg button.sel{background:var(--num-bg);border-color:var(--num-border);color:var(--num-text)}
#modal-actions{display:flex;gap:8px;justify-content:center}
#modal-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;border:1px solid var(--border)}
.modal-cancel{background:var(--panel2);color:var(--text)}
.modal-cancel:hover{border-color:var(--num-border)}
.modal-ok{background:#2a1a1a;border-color:#5a2a2a;color:#f87171}
.modal-ok:hover{background:#3a2020}
html[data-theme="light"] .modal-ok{background:#fde8e8;border-color:#f3b0b0;color:#c43b3b}
.modal-primary{background:var(--num-bg);border-color:var(--num-border);color:var(--num-text)}
.modal-primary:hover{filter:brightness(1.12)}