.map-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
    width: 100%; 
    max-width: 1000px; /* Limits width on huge screens */
    margin: 0 auto; 
    padding: 10px;
    box-sizing: border-box;
}

#map { 
    height: 400px; /* Reduced height slightly for better mobile scrolling */
    width: 100%;   /* Full width by default */
    border-radius: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
}
/* Input utilities */
.table-input {
    width: 90%;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 3px;
    font-size: 16px;
    color: #000;
}

/* Cell utilities */
.cell-coords {
    font-size: 16px;
    color: #000;
}

.cell-action {
    text-align: center;
}

/* Utility classes for text and content */
.coords-font {
    font-size: 16px;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Button utilities */
.btn {
    border: none;
    padding: 5px 5px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    transition: opacity 0.2s ease;
}

.btn:hover {
    opacity: 0.9;
}

.btn-primary {
    background-color: #0B123C;
}

.btn-danger {
    background-color: #C00000;
}

.btn-spacing {
    margin-left: 5px;
}

/* Desktop adjustment: If the screen is wide, make the map a bit smaller if desired */
@media (min-width: 768px) {
    #map { height: 400px; width: 50%; }
}