/* static/css/style.css */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent body scrollbars */
}

body {
     display: flex;
     flex-direction: column;
}

nav.navbar {
    flex-shrink: 0; /* Prevent navbar from shrinking */
}

.main-container {
    flex-grow: 1; /* Allow container to fill remaining space */
    padding: 0 !important; /* Override bootstrap padding */
    max-width: none; /* Allow full width */
    height: calc(100vh - 56px); /* Adjust based on actual navbar height */
    display: flex;
}

.main-container .row {
     flex-grow: 1; /* Allow row to fill container height */
     height: 100%;
}

.map-container {
    height: 100%;
    position: relative; /* Needed for absolute positioning of error */
    padding: 0 !important; /* Override bootstrap padding */
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#map-error {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000; /* Ensure it's above map */
    width: calc(100% - 20px);
}


/* Sidebar */
#sidebar {
    width: 380px; /* Adjust width as needed */
    background-color: #f8f9fa;
    z-index: 1045; /* Ensure it's above map but below navbar potentially */
}

@media (max-width: 991.98px) { /* Below Bootstrap lg breakpoint */
    #sidebar {
        width: 90%; /* Make wider on small screens */
        max-width: 400px;
    }
}

#sidebar .offcanvas-body {
    padding: 1rem;
    overflow-y: auto; /* Allow scrolling within sidebar */
}

/* Make offcanvas header sticky */
#sidebar .offcanvas-header {
     position: sticky;
     top: 0;
     background-color: #e9ecef; /* Slightly different background */
     z-index: 10; /* Above scrolling content */
     border-bottom: 1px solid #dee2e6;
}

.genre-list .list-group-item i {
    width: 1.25em; /* Align icons */
    text-align: center;
}
.genre-list .list-group-item.active i.fa-square {
    font-weight: 900; /* Make square bold when active (FontAwesome trick) */
}

/* Calendar Styles */
.calendar-table td {
    padding: 0.25rem;
    vertical-align: middle;
    height: 40px; /* Give cells some height */
}

.calendar-table td a {
    display: block;
    padding: 0.3rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}
.calendar-table td a:hover {
    background-color: #e9ecef;
    text-decoration: none;
}
.calendar-table td.table-primary a:hover {
     background-color: #0b5ed7; /* Darker blue on hover for selected */
}
.calendar-table td.table-info a:hover {
     background-color: #6cbcf0; /* Darker blue on hover for today */
}

/* Event List Styles */
.event-list {
    max-height: 40vh; /* Limit height and make scrollable if needed */
    overflow-y: auto;
}
.event-list-item {
    cursor: pointer;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.event-list-item:hover {
    background-color: #e9ecef;
}
.event-list-item h6 {
     font-size: 0.95rem;
}
.event-list-item .event-details {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #6c757d;
}
.event-list-item .event-genres .badge {
     font-size: 0.7rem;
     margin-right: 3px;
     margin-bottom: 3px;
}
.event-list-item.list-group-item-light {
    font-style: italic;
    cursor: not-allowed; /* Indicate non-clickable */
}
.event-list-item.list-group-item-light:hover {
     background-color: #f8f9fa; /* Don't highlight on hover */
}

/* Map Popups */
.mapboxgl-popup {
    max-width: 250px;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.mapboxgl-popup-content {
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.event-popup strong {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
}
.event-popup small {
    line-height: 1.5;
}
.event-popup i {
     width: 1.2em; /* Align icons */
}

/* Flash warning for non-geocoded list items */
@keyframes flash {
  0% { background-color: #f8f9fa; } /* Default light gray */
  50% { background-color: #fff3cd; } /* Bootstrap warning yellow */
  100% { background-color: #f8f9fa; }
}

.flash-warning {
  animation: flash 0.5s ease-in-out;
}