/* Use Inter font */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom styles for hidden/visible panel */
.hidden-panel {
    display: none;
}

.visible-panel {
    display: block;
}

/* Map container height */
#map {
    height: 300px;
    /* Default height for map */
}

@media (min-width: 768px) {

    /* Medium screens and up */
    #map {
        height: 400px;
    }
}

@media (min-width: 1024px) {

    /* Large screens and up */
    #map {
        height: 500px;
    }
}

/* Custom marker icon for Leaflet */
/* Now a simple blue circle */
.aprs-marker-icon {
    background-color: #007bff;
    /* Blue color for the circle */
    border-radius: 50%;
    /* Make it a circle */
    width: 16px;
    /* Size of the circle */
    height: 16px;
    /* Size of the circle */
    border: 2px solid #fff;
    /* White border for visibility */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    /* Subtle shadow */
}

/* Adjusted padding for auto-send control to make it narrower */
.auto-send-control-narrow {
    padding-top: 0.75rem;
    /* p-3 */
    padding-bottom: 0.75rem;
    /* p-3 */
}

/* Message bubble styles */
#messageBubble {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark background with transparency */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    /* Fully rounded */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    z-index: 50;
    /* Ensure it's above other content */
    white-space: nowrap;
    /* Prevent text wrapping */
    max-width: 90%;
    /* Limit width on small screens */
    text-overflow: ellipsis;
    /* Add ellipsis if text overflows */
    overflow: hidden;
    /* Hide overflowing text */
}

#messageBubble.visible {
    opacity: 1;
    visibility: visible;
}

/* Ensure log area has a max-height and scroll */
#statusMessage {
    max-height: 200px;
    /* Adjust as needed */
    overflow-y: auto;
}

/* Adjust Leaflet zoom control position */
.leaflet-control-zoom {
    top: 3rem !important;
    /* Overrides default top: 10px */
    left: 10px !important;
    /* Keep it aligned to the left */
}

/* Custom Select Styles */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-selected-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    /* p-2, p-3 */
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    border-radius: 0.375rem;
    /* rounded-md */
    background-color: #ffffff;
    /* bg-white */
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    transition: all 0.15s ease-in-out;
}

.custom-select-selected-item:hover {
    border-color: #60a5fa;
    /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
    /* focus:ring-blue-500 */
}

.custom-select-selected-item::after {
    content: '▼';
    /* Dropdown arrow */
    margin-left: auto;
    font-size: 0.75rem;
    color: #6b7280;
    /* text-gray-500 */
}

.custom-select-items {
    position: absolute;
    top: 100%;
    /* Position below the selected item */
    left: 0;
    right: 0;
    background-color: #ffffff;
    /* bg-white */
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    border-radius: 0.375rem;
    /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-lg */
    z-index: 10;
    /* Ensure it's above other content */
    max-height: 200px;
    /* Limit height and enable scroll */
    overflow-y: auto;
    margin-top: 0.25rem;
    /* mt-1 */
}

.custom-select-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.custom-select-item:hover {
    background-color: #e5e7eb;
    /* bg-gray-200 */
}

.custom-select-item img {
    width: 24px;
    /* Icon size */
    height: 24px;
    margin-right: 8px;
    /* Spacing between icon and text */
    object-fit: contain;
    /* Ensure image scales properly */
}

.custom-select-selected-item img {
    width: 24px;
    /* Smaller icon size for preview */
    height: 24px;
    margin-right: 8px;
    object-fit: contain;
}