/* =================================
   1. Page Layout & Reset
   ================================= */
html {
    height: 100%; /* Ensure the html element takes full height */
}

body {
    height: 100%; /* Ensure the body element takes the full height of the html */
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex; /* Use flexbox for the main layout */
    /* REMOVED overflow: hidden; as it was causing the issue */
}

/* =================================
   2. Sidebar Styling
   ================================= */
.sidebar {
    width: 280px;
    flex-shrink: 0; /* Prevents the sidebar from shrinking */
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow sidebar to scroll if it has too many items */
}

.sidebar h2 {
    margin-top: 0;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 16px;
    color: #495057;
}

/* =================================
   3. Map Container Styling
   ================================= */
#map {
    height: 100vh; /* Set height to 100% of the viewport height */
    width: 100%;  /* The flexbox parent will handle the actual width */
    flex-grow: 1; /* This makes the map take up all remaining horizontal space */
}

/* =================================
   4. Slider Switch CSS
   ================================= */
.switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Made slightly smaller for a tighter look */
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #007bff; /* A more standard 'active' blue */
}

input:checked + .slider:before {
    transform: translateX(22px);
}


/* =================================
   5. Google Maps InfoWindow Styling
   ================================= */
/* This class is added by our JS to the InfoWindow content */
.infowindow-content {
    color: #333;
}

.infowindow-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #0056b3;
}

.infowindow-content p {
    margin: 0 0 5px 0;
}

.infowindow-content strong {
    font-weight: 600;
}

/* =================================
   6. Sidebar Footer & Admin Link
   ================================= */
.sidebar-footer {
    margin-top: auto; /* This is the magic part: pushes the link to the bottom */
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    text-align: center;
}

.sidebar-footer a {
    text-decoration: none;
    color: #6c757d;
    font-size: 0.9em;
    transition: color 0.2s;
}

.sidebar-footer a:hover {
    color: #007bff;
}

/* =================================
   7. High Priority InfoWindow Styling
   ================================= */
.infowindow-content.high-priority {
    background-color: #ffebee; /* A light red background */
    color: #b71c1c; /* A dark red text color */
}

.infowindow-content.high-priority h3 {
    color: #c62828; /* A slightly different red for the title */
}

/* Style for the extra "HIGH PRIORITY" title */
.infowindow-content h4 {
    margin: 10px 0;
    text-align: center;
    font-weight: bold;
    color: #d32f2f;
}


/* =================================
   9. Custom Solid Marker Styling
   ================================= */

.marker-container {
    /* This container is mainly for positioning and animation */
    width: 36px;
    height: 48px;
    position: relative;
    cursor: pointer;
}

.marker-pin {
    width: 100%;
    height: 100%;
    
    /* The solid background color comes from the CSS variable set in JS */
    background-color: var(--marker-color);
    
    /* This uses a mask to clip the element into a pin shape */
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67a24 24 0 0 1-35.464 0z"/></svg>');
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67a24 24 0 0 1-35.464 0z"/></svg>');
    
    /* Center the icon inside the pin */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 8px; /* Nudge the icon up a bit */
    box-sizing: border-box;
}

.marker-icon {
    /* The SVG icon itself */
    width: 50%; /* Make the icon take up half the width of the pin */
    height: auto;
}

/* Keyframes for the bounce animation (no change here) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* The class we add in JS to trigger the animation (no change here) */
.animate-bounce {
    animation: bounce 2s infinite ease-in-out;
}