/* ── Layout ─────────────────────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; overflow: hidden; }

nav.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
}

#content-wrapper {
    display: flex;
    position: fixed;
    top: 52px; left: 0; right: 0; bottom: 0;
}

#map { width: 100%; height: 100%; }
#map.route-mode { cursor: crosshair; }
#map.distance-pick-mode { cursor: crosshair; }
#map.waypoint-pick-mode { cursor: crosshair; }

/* ── Place search and bookmarks ──────────────────────────────────────────── */
#place-search {
    position: absolute; z-index: 1000; top: 10px; right: 10px;
    width: min(370px, calc(100vw - 70px)); padding: 8px;
    background: rgba(255,255,255,.97); border-radius: 6px;
}
#place-search.place-search-hidden { display:none; }
#place-search-status { min-height: 1em; }
#distance-form { border-top: 1px solid #ddd; padding-top: 8px; }
#distance-status { overflow-wrap: anywhere; }
.center-flag-marker { background: transparent; border: 0; }
.center-flag-marker svg { display: block; overflow: visible; filter: drop-shadow(0 1px 2px #111); }
#place-search-results, #bookmark-list { max-height: 220px; overflow-y: auto; }
.place-result, .place-bookmark { display:flex; align-items:center; gap:8px; width:100%; padding:6px 4px; border:0; border-top:1px solid #eee; background:#fff; text-align:left; font-size:.78rem; }
.place-result { cursor:pointer; }
.place-result:hover, .place-bookmark:hover { background:#f3f6fa; }
.place-result span, .place-bookmark-go { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.place-result small { color:#6b7280; white-space:nowrap; }
.place-bookmark-go { display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; overflow:hidden; border:0; background:none; text-align:left; font-size:inherit; white-space:normal; cursor:pointer; }
.place-bookmark-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; font-weight:600; }
.place-bookmark-detail { max-width:100%; overflow-wrap:anywhere; color:#6b7280; font-size:.66rem; line-height:1.3; }
.place-bookmark-delete { border:0; background:none; color:#dc2626; font-size:1.1rem; cursor:pointer; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
    position: fixed;
    right: 0;
    top: 52px;
    width: 290px;
    height: calc(100vh - 52px);
    background: #fff;
    border-left: 1px solid #dee2e6;
    box-shadow: -4px 0 16px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    z-index: 1001;
}

#sidebar.sidebar-open { transform: translateX(0); }

/* ── Custom waypoint marker ──────────────────────────────────────────────── */
.custom-wp-pin {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #7c3aed;
    border: 2px solid rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.custom-wp-pin.home-location { background: #fff; border-color: #374151; color: #111827; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 1px 5px rgba(0,0,0,.55); }
.home-location-row { background: #eff6ff; border-left: 3px solid #0d6efd; }
.home-location-label { color: #0d6efd; font-size: .62rem; font-weight: 800; letter-spacing: .04em; }

/* ── Route selection list ────────────────────────────────────────────────── */
.sel-row { background: #fff; transition: background .1s; }
.sel-row:hover { background: #f8f9fa; }
.sel-row.drag-over { background: #e8f0fe; border-top: 2px solid #0d6efd; }

/* ── Cache markers ───────────────────────────────────────────────────────── */
.cache-pin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    transition: transform .15s;
}
.cache-pin:hover { transform: scale(1.3); }

/* ── Navbar overrides ────────────────────────────────────────────────────── */
.navbar { min-height: 52px; }
.navbar .form-control, .navbar .form-select { font-size: .85rem; }
.navbar .form-label { font-size: .8rem; }

/* ── Floating map controls ───────────────────────────────────────────────── */
#map-controls {
    position: absolute;
    top: 12px;
    left: 58px;
    z-index: 1000;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(255,255,255,.92);
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    max-width: calc(100vw - 100px);
}

#map-controls .btn { font-size: .82rem; }
#map-controls .form-control, #map-controls .form-select { font-size: .82rem; }

#status-msg {
    font-size: .78rem;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar content ─────────────────────────────────────────────────────── */
#sidebar .table th { font-size: .82rem; }
#sidebar .table td { font-size: .82rem; }
.sidebar-header { font-size: .75rem; letter-spacing: .04em; }
.cache-type-label { color: #374151; font-weight: 600; }
.coordinate-override-label {
    display: inline-block;
    padding: 0 .25rem;
    border-radius: .2rem;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

/* ── Star rating ─────────────────────────────────────────────────────────── */
.stars { color: #f59e0b; letter-spacing: -.05em; }

/* ── Leaflet.markercluster overrides ─────────────────────────────────────── */
.marker-cluster-small  { background-color: rgba(110,204,57,.6); }
.marker-cluster-medium { background-color: rgba(240,194,12,.6); }
.marker-cluster-large  { background-color: rgba(241,128,23,.6); }

/* ── Left cache-list panel ───────────────────────────────────────────────── */
#list-panel {
    position: fixed;
    left: 0; top: 52px;
    width: 300px;
    height: calc(100vh - 52px);
    background: #fff;
    border-right: 1px solid #dee2e6;
    box-shadow: 4px 0 16px rgba(0,0,0,.14);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}
#list-panel.panel-open { transform: translateX(0); }

#list-panel-head {
    padding: 6px 10px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
}

#list-body { flex: 1; overflow-y: auto; }

#list-footer {
    padding: 8px;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

/* Map control column (zoom + list toggle + cluster toggle) */
#map-ctrl-col {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#map-ctrl-col button {
    width: 34px; height: 34px;
    background: #fff;
    border: 2px solid rgba(0,0,0,.22);
    border-radius: 4px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: bold; line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
    padding: 0;
    color: #333;
    transition: background .1s;
}
#map-ctrl-col button:hover  { background: #f0f0f0; }
#map-ctrl-col button.active { background: #0d6efd; color: #fff; border-color: #0861d0; }
#map-style-menu, #map-overlay-menu {
    position:fixed; z-index:1001; top:62px; left:52px; width:220px;
    padding:8px; border-radius:5px; background:rgba(255,255,255,.97);
}
#map-overlay-menu { width:250px; }
#map-overlay-menu { max-height:calc(100vh - 20px); overflow-y:auto; }
.coordinate-grid-label {
    width: auto !important;
    height: auto !important;
    padding: 1px 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000, 1px 0 3px #000, 0 -1px 3px #000, -1px 0 3px #000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#map-filter-menu {
    position:fixed; z-index:1001; top:62px; left:52px; width:min(280px,calc(100vw - 64px)); max-height:calc(100vh - 20px);
    overflow-y:auto; padding:10px; border-radius:5px; background:rgba(255,255,255,.98);
}
#map-ctrl-col button.filtered { background:#e7f0ff; color:#0d6efd; border-color:#0d6efd; }
.map-filter-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 8px; }
.map-filter-option { display:flex; align-items:center; gap:6px; min-width:0; font-size:.75rem; line-height:1.25; cursor:pointer; }
.map-filter-option .form-check-input { flex:0 0 auto; margin:0; }
.map-filter-option span { overflow:hidden; text-overflow:ellipsis; }

/* Cluster toggle icon size */
#btn-toggle-cluster svg { width: 16px; height: 16px; }
.route-km-icon { background: transparent; border: 0; }
.route-km-label {
    display: block; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%;
    background: #111; color: #fff; font: 700 10px/18px Arial, sans-serif; text-align: center;
    white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.shopping-poi-icon { background: transparent; border: 0; }
.charging-poi-icon { background: transparent; border: 0; }
.charging-poi-icon span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #16834a; box-shadow: 0 1px 5px #0008; color: #fff; font-size: 13px; }
.parking-poi-icon { background: transparent; border: 0; }
.parking-poi-icon span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 5px #0008; color: #fff; font: 700 14px/1 Arial, sans-serif; }
.shopping-poi-icon .shopping-brand-logo {
    position: relative; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center;
    border: 2px solid #15803d; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.4); overflow: hidden;
}
.shopping-poi-icon .shopping-brand-logo::before { content: '🏬'; position: absolute; font-size: 15px; }
.shopping-poi-icon .shopping-brand-logo img { position: relative; z-index: 1; width: 25px; height: 25px; object-fit: contain; }
.shopping-poi-icon .shopping-brand-logo.aldi,
.shopping-poi-icon .shopping-brand-logo.dm { width: 38px; height: 38px; }
.shopping-poi-icon .shopping-brand-logo.aldi img,
.shopping-poi-icon .shopping-brand-logo.dm img { width: 32px; height: 32px; }
.shopping-poi-icon .shopping-cart-logo {
    display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;
    border: 2px solid #15803d; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 15px;
}
.shopping-category-options { opacity: .95; }
.wind-vector-icon { display:flex; align-items:center; justify-content:center; overflow:visible !important; }
.wind-barb-svg { width:56px; height:56px; margin:-12px; overflow:visible; pointer-events:auto; }
.wind-barb-outline { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.wind-barb-staff { fill:none; stroke:#123653; stroke-width:2.4; stroke-linecap:round; }
.wind-barb-line { fill:none; stroke:#123653; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.wind-barb-filled { fill:#123653; stroke:#fff; stroke-width:1.5; stroke-linejoin:round; }
.wind-model-control {
    display:flex; flex-direction:column; gap:1px; padding:5px 8px; border-radius:4px;
    background:rgba(255,255,255,.94); color:#183247; font:11px/1.35 Arial,sans-serif;
    box-shadow:0 1px 4px rgba(0,0,0,.25); pointer-events:none;
}
.wind-model-control strong { font-size:11px; }

/* Fix Leaflet div-icon background bleed */
.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

/* Route-mode button lives in the dark navbar — active = filled warning */
#btn-route-mode        { font-size: .78rem; white-space: nowrap; }
#route-mode-controls { align-items: center; }
.route-action-stack { display: flex; flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.route-action-stack .btn { font-size: .75rem; line-height: 1.25; padding: .2rem .35rem; white-space: nowrap; }
.saved-route-row + .saved-route-row { border-top: 1px solid #dee2e6; }
.saved-route-actions { flex-shrink: 0; }
.saved-route-actions .btn { white-space: nowrap; }
.saved-route-name {
    display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: none;
    color: #0d6efd; font: inherit; font-weight: 600; text-align: left; text-overflow: ellipsis;
    white-space: nowrap; cursor: pointer;
}
.saved-route-name:hover, .saved-route-name:focus-visible { color: #084298; text-decoration: underline; }
#btn-route-mode.active:not(.route-calculated) { background: #198754; color: #fff; border-color: #198754; }
#btn-route-mode.route-calculated { background: #198754; color: #fff; border-color: #198754; }

/* Cache list rows */
.cache-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}
.cache-row:hover { background: #f8f9fa; }
.cache-row.selected { background: #e8f0fe; }
.cache-row.detail-active { background:#f5f7f9; box-shadow:inset 3px 0 #94a3b8; }
.cache-row.selected.detail-active { background:#e8f0fe; box-shadow:inset 3px 0 #60a5fa; }

.sel-badge {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.sel-badge.active { background: #0d6efd; color: #fff; }
.cache-row-select:hover { background:#bfdbfe; color:#1d4ed8; }
.cache-row-name { cursor:pointer; }
.cache-row-name:hover .small { color:#0d6efd; }

/* Route result */
.route-source-note {
    font-size: .7rem; color: #9ca3af;
    margin-bottom: 8px;
}
.route-waypoint {
    display: flex; align-items: center;
    gap: 8px; padding: 5px 0;
}
.route-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.route-leg-dist {
    padding-left: 16px;
    font-size: .78rem; color: #6b7280;
    display: flex; align-items: center; gap: 5px;
}
.route-leg-dist::before { content: '↕'; color: #0d6efd; font-size: .85rem; }
.route-total {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid #dee2e6;
    font-size: .85rem; color: #374151;
}
.route-profile-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.route-profile-stat { min-width:0; padding:9px 12px; border:0; border-radius:7px; background:#f3f8f4; }
.route-profile-stat strong { display:block; color:#202b24; font-size:1.1rem; font-weight:700; }
.route-profile-stat span { color:#66736a; font-size:.72rem; }
.route-profile-elevation { padding:16px 18px 8px; background:#fafcf9; border:1px solid #e7eee8; border-radius:9px; }
.route-profile-chart { width:100%; min-height:150px; overflow:hidden; cursor:crosshair; }
.route-profile-chart svg { display:block; width:100%; height:auto; }
.route-profile-chart .profile-grid { stroke:#e5e7eb; stroke-width:1; }
.route-profile-chart .profile-area { fill:#dcefe2; opacity:.9; }
.route-profile-chart .profile-line { fill:none; stroke:#339b61; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.route-profile-chart .profile-label { fill:#6b7280; font:12px sans-serif; }
#route-profile-elevation-source { font-size:.7rem; }
.route-profile-bars { height:13px; display:flex; overflow:hidden; border-radius:8px; background:#edf0ed; }
.route-profile-bar-segment { min-width:2px; height:100%; }
.route-profile-legend { display:grid; gap:7px; margin-top:12px; }
.route-profile-legend-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; font-size:.8rem; }
.route-profile-legend-name { display:flex; align-items:center; gap:7px; min-width:0; }
.route-profile-legend-swatch { width:10px; height:10px; flex:0 0 10px; border-radius:50%; }
.route-profile-legend-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-profile-legend-distance { color:#6b7280; white-space:nowrap; }
.route-profile-legend-percent { min-width:38px; font-weight:600; text-align:right; }

/* ── Map area: shifts right when list panel opens ────────────────────────── */
#map-area {
    transition: margin-left .25s ease;
}

/* ── Marker highlight (hover from cache list) ────────────────────────────── */
.marker-highlight > div,
.marker-highlight > svg {
    transform: scale(1.55) !important;
    transform-origin: 50% 50%;
    transition: transform .12s ease;
    filter: drop-shadow(0 0 5px rgba(245,158,11,.85));
}
.marker-focused > div,
.marker-focused > svg {
    transform: scale(1.55) !important;
    transform-origin: 50% 50%;
    transition: transform .12s ease;
    filter: drop-shadow(0 0 5px rgba(245,158,11,.85));
}

/* Active marker: sidebar is showing this cache */
.marker-active > div {
    transform: scale(1.35) !important;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 6px rgba(245,158,11,1)) drop-shadow(0 0 12px rgba(245,158,11,.5));
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    border-radius: 50%;
}

/* ── Mouse position display ──────────────────────────────────────────────── */
.mouse-pos-ctrl {
    background: rgba(255,255,255,.88);
    padding: 3px 7px;
    font-family: monospace;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    white-space: nowrap;
    pointer-events: auto;
    min-width: 210px;
    text-align: center;
    line-height: 1.5;
}
.mouse-pos-ctrl div:first-child { font-size: .72rem; }
.mouse-pos-ctrl .mouse-pos-zoom { display:none; font-size:.65rem; color:#374151; }
.mouse-pos-ctrl:hover .mouse-pos-zoom { display:block; }
.mouse-pos-ctrl div:last-child:not(.mouse-pos-zoom) { font-size:.65rem; color:#6b7280; }
.leaflet-container.details-open .leaflet-bottom.leaflet-right {
    left:50%; right:auto; transform:translateX(-50%);
}

/* ── Cache-Detail-Modal ──────────────────────────────────────────────────── */
.cache-description {
    line-height: 1.6;
    overflow: auto;
}
.cache-description img { max-width: 100%; height: auto; }
.cache-description a   { color: #0d6efd; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .route-profile-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #sidebar { width: 100%; }
    #list-panel { width: 85vw; }
    #map-controls { left: 8px; right: 8px; }
}
.cache-attribute {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .25rem .45rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #fff;
    color: #495057;
    font-size: .78rem;
}

.cache-attribute img,
.cache-attribute-fallback {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cache-attribute-fallback {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #e9ecef;
    font-weight: 700;
}