/* map.css — dashboard map layout (tailored to your HTML) */

.map-panel {
    display: grid;
    grid-template-columns: 1fr 360px;
    /* left = map, right = list */
    gap: 12px;
}

/* Map container */
#mapCanvas {
    height: 520px;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Right-side list */
#mapSide {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    max-height: 520px;
    overflow: auto;
}

#mapSide .map-item {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform .08s ease, background .08s ease;
}

#mapSide .map-item:hover {
    background: var(--field-bg-hover);
    transform: translateY(-1px);
}

#mapSide .title {
    font-weight: 700;
}

#mapSide .sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

@media (max-width: 980px) {
    .map-panel {
        grid-template-columns: 1fr;
    }

    #mapSide {
        max-height: 300px;
    }
}

/* ===== Leaflet theming to match #0f1115 dark UI ===== */

/* Map canvas background (seen before tiles load) */
.leaflet-container {
    background: #0f1115;
}

/* Make the dark basemap a bit brighter/softer */
#mapCanvas .leaflet-tile {
    filter: brightness(1.18) contrast(1.02) saturate(0.95);
}

/* Popups: match cards (dark bg, light text) */
.leaflet-popup-content-wrapper {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}

.leaflet-popup-tip {
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.leaflet-popup-content {
    color: var(--text-main);
}

.leaflet-popup-content .small {
    color: var(--text-muted);
}

/* Zoom controls styled like your buttons/cards */
.leaflet-control-zoom a {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    box-shadow: none;
}

.leaflet-control-zoom a:hover {
    background: var(--field-bg-hover);
}

/* Attribution bar to match theme */
.leaflet-control-attribution {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
}

/* Optional: remove default link blue inside popups */
.leaflet-popup-content a {
    color: var(--text-main);
    text-decoration: none;
}

.leaflet-popup-content a:hover {
    opacity: .9;
}

/* ===== Dark theme for Leaflet popups (InspectAsset) ===== */
.ia-popup .leaflet-popup-content-wrapper {
    background: var(--bg-card) !important;
    /* your dark card bg */
    color: var(--text-main) !important;
    /* light text */
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.ia-popup .leaflet-popup-tip {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
}

.ia-popup .leaflet-popup-content {
    color: var(--text-main) !important;
}

.ia-popup .leaflet-popup-content .small {
    color: var(--text-muted) !important;
}

/* Links & button inside popup */
.ia-popup .leaflet-popup-content a {
    color: var(--text-main) !important;
    text-decoration: none;
}

.ia-popup .leaflet-popup-content a:hover {
    opacity: .9;
}

/* Optional: make the "Open Client" button feel like your UI */
.ia-popup .button.small {
    background: var(--grad-orange);
    border: none;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 700;
}