/**
 * Project Sidewalk API Documentation - Cities Component Styles
 *
 * This stylesheet contains styles specific to the Cities component and works in conjunction with the main
 * api-docs.css file.
 */

/* Main container for the cities preview */
#cities-preview {
    width: 100%;
    height: 500px;
    margin: var(--space-lg) 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

/* Map container */
#cities-map {
    width: 100%;
    height: 100%;
}

/* City popup styling */
.city-popup {
    max-width: 250px;
    padding: 5px;
}

.city-popup h3 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-md);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 5px;
}

.city-popup p {
    margin: 5px 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* City link styling - overriding Leaflet defaults */
.leaflet-container .city-popup .city-link,
.city-popup .city-link {
    display: inline-block;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: var(--color-accent-link);
    color: var(--color-text-on-accent) !important;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    transition: background-color var(--transition-fast);
}

.leaflet-container .city-popup .city-link:hover,
.city-popup .city-link:hover {
    background-color: #1166cc;
    text-decoration: none;
    color: var(--color-text-on-accent) !important;
}

/* No cities message */
.no-cities-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    z-index: var(--z-index-dropdown);
}

/* Cities count display */
.cities-count {
    font-size: var(--font-size-xs);
    background-color: white;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-dropdown);
}

/* Leaflet tooltip customization */
.leaflet-tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    font-size: var(--font-size-xs);
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-sm)) {
    #cities-preview {
        height: 400px;
    }

    .city-popup {
        max-width: 200px;
    }
}