/* Custom Map Interface Enhancements */

/* Ensure grid square labels stay together (fix for separated letters) */
.leaflet-marker-icon.my-div-icon,
.my-div-icon .grid-text,
.my-div-icon .grid-text font,
span.grid-text,
span.grid-text > font {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    white-space: nowrap !important;
    font-family: monospace !important;
    display: inline-block !important;
}

/* Map container enhancements */
#custommap {
    border-radius: 0 0 0.375rem 0.375rem;
    overflow: hidden;
    transition: height 0.3s ease;
    width: 100%;
    height: 1000px !important; /* Maintain original screenshot-friendly height */
}

/* Fullscreen map styling */
#custommap:fullscreen {
    border-radius: 0;
}

/* Statistics badges */
.custom-map-QSOs .badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}


/* Legend styling */
.custom-map-QSOs .fas {
    width: 1em;
    text-align: center;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .custom-map-QSOs .card-body {
        padding: 1rem 0.5rem;
    }
    
    .custom-map-QSOs .btn-group .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Keep map height at 1000px even on mobile for screenshots */
    #custommap {
        height: 1000px !important;
        min-height: 1000px !important;
    }
}

/* Animation for statistics updates */
.custom-map-QSOs .badge {
    transition: all 0.3s ease;
}

.custom-map-QSOs .badge.updated {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}