/* ============================================================
   Map-Tool — gemeinsame Styles für Karten-Tools (CalcSI)
   Wird zusammen mit Leaflet + leaflet.markercluster geladen.
   ============================================================ */

.map-wrap { position: relative; }
.map-wrap .leaflet-map {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid var(--color-hairline);
}
@media (min-width: 992px) {
    .map-wrap .leaflet-map { height: 75vh; }
}
.map-wrap:fullscreen .leaflet-map,
.map-wrap:-webkit-full-screen .leaflet-map {
    height: 100vh !important;
    min-height: 100vh;
    border-radius: 0;
    border: none;
}
.map-wrap:fullscreen, .map-wrap:-webkit-full-screen { background: #fff; }

/* Loading overlay */
.map-loading-overlay {
    position: absolute; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.55); backdrop-filter: blur(2px);
    border-radius: 12px; pointer-events: none;
    opacity: 0; transition: opacity .15s ease;
}
.map-loading-overlay.is-visible { opacity: 1; pointer-events: auto; }
.map-loading-overlay .spinner-box {
    background: #fff; border: 1px solid var(--color-hairline);
    border-radius: 999px; padding: .55rem 1rem;
    display: inline-flex; align-items: center; gap: .55rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    font-size: .9rem; color: var(--color-ink);
}
.map-loading-overlay .spinner-box i { color: var(--color-primary, #0d9488); }

/* Status bar */
.map-status-bar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    padding: .65rem .85rem; margin-bottom: .75rem;
    background: var(--color-canvas-soft); border: 1px solid var(--color-hairline);
    border-radius: 10px; font-size: .85rem; color: var(--color-ink-mute);
}
.map-status-bar .stat { display: inline-flex; align-items: center; gap: .35rem; }
.map-status-bar .stat strong { color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.map-status-bar .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22,163,74,.6);
    animation: mt-pulse 1.8s infinite;
}
@keyframes mt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* Toolbar */
.map-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; align-items: center; }
.map-toolbar .btn { font-size: .85rem; }

/* Address search */
.map-search { position: relative; flex: 1 1 220px; max-width: 360px; margin-left: auto; }
.map-search input {
    width: 100%; padding: .35rem .8rem .35rem 2rem; font-size: .85rem;
    border: 1px solid var(--color-hairline); border-radius: 999px;
    background: #fff; color: var(--color-ink);
}
.map-search input:focus {
    outline: none; border-color: var(--color-primary, #0d9488);
    box-shadow: 0 0 0 2px rgba(13,148,136,.15);
}
.map-search > i.bi {
    position: absolute; left: .65rem; top: 50%;
    transform: translateY(-50%); color: var(--color-ink-mute); font-size: .9rem;
}
.map-search .results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 700;
    background: #fff; border: 1px solid var(--color-hairline);
    border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.08);
    max-height: 280px; overflow-y: auto; font-size: .85rem;
}
.map-search .results .item {
    padding: .45rem .75rem; cursor: pointer;
    border-bottom: 1px solid var(--color-hairline);
}
.map-search .results .item:last-child { border-bottom: none; }
.map-search .results .item:hover { background: var(--color-canvas-soft); }
.map-search .results .empty { padding: .55rem .75rem; color: var(--color-ink-mute); }

/* Legend */
.map-legend { font-size: .8rem; line-height: 1.4; }
.map-legend .item {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-right: .85rem; margin-bottom: .25rem;
}
.map-legend .swatch {
    width: 12px; height: 12px; border-radius: 3px;
    display: inline-block; border: 1px solid rgba(0,0,0,.15);
}

/* POI Marker (generic, color via inline style or CSS var --poi-color) */
.poi-marker {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    color: #fff; background: var(--poi-color, #0d9488);
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    border: 2px solid #fff; font-size: 14px;
    transition: none !important; will-change: transform;
}
.leaflet-marker-icon, .leaflet-marker-shadow { transition: none !important; }
.leaflet-zoom-anim .leaflet-zoom-animated { will-change: transform; }

/* User position marker */
.user-marker {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-primary, #0d9488); border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(13,148,136,.35), 0 2px 4px rgba(0,0,0,.25);
    transition: none !important; will-change: transform;
}
.accuracy-circle { stroke: #0d9488; stroke-opacity: .5; fill: #0d9488; fill-opacity: .08; }

/* Popups */
.leaflet-popup-content { font-size: .85rem; line-height: 1.45; }
.leaflet-popup-content b { color: var(--color-ink); }
.leaflet-popup-content .pop-meta { color: var(--color-ink-mute); font-size: .8rem; }
.leaflet-popup-content .pop-row { margin-top: .15rem; }
.leaflet-popup-content .pop-row i { margin-right: .25rem; color: var(--color-ink-mute); }
.leaflet-popup-content a { color: var(--color-primary, #0d9488); }

/* Marker cluster — Teal */
.marker-cluster-small  { background-color: rgba(13,148,136,.5); }
.marker-cluster-small div  { background-color: rgba(13,148,136,.85); color: #fff; font-weight: 500; }
.marker-cluster-medium { background-color: rgba(13,148,136,.55); }
.marker-cluster-medium div { background-color: rgba(13,148,136,.85); color: #fff; font-weight: 500; }
.marker-cluster-large  { background-color: rgba(13,148,136,.6); }
.marker-cluster-large div  { background-color: rgba(13,148,136,.9);  color: #fff; font-weight: 500; }

/* Fullscreen button */
.leaflet-bar .mt-fs-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: #fff; color: #333; font-size: 1rem;
}
.leaflet-bar .mt-fs-btn:hover { background: #f4f4f4; }

/* Filter panel (tool-specific filter UIs share this) */
.map-filters {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
    padding: .6rem .85rem; margin-bottom: .75rem;
    background: #fff; border: 1px solid var(--color-hairline);
    border-radius: 10px; font-size: .85rem;
}
.map-filters .filter-group { display: inline-flex; align-items: center; gap: .35rem; }
.map-filters label { margin: 0; color: var(--color-ink); }
.map-filters .form-check { padding-left: 1.4rem; }
.map-filters select, .map-filters input[type="number"] {
    font-size: .85rem; padding: .15rem .45rem; border-radius: 6px;
    border: 1px solid var(--color-hairline);
}

/* Big red emergency button (used by lifesaver) */
.btn-emergency {
    background: #dc2626; border-color: #dc2626; color: #fff !important;
    font-weight: 500;
}
.btn-emergency:hover { background: #b91c1c; border-color: #b91c1c; }

/* Inline keyframes for spinning icons (status bar) */
@keyframes mt-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mt-spin { animation: mt-spin 1s linear infinite; display: inline-block; }