/* Base styles and reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  height: 100vh;
  overflow: hidden; /* Prevent scroll on body, handle scroll on specific elements */
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Header styles */
header {
  background-color: #00437a;
  color: white;
  padding: 0.75rem 1rem; /* Adjusted padding */
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  flex-shrink: 0; /* Prevent header from shrinking */
}

header h1 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.search-container {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  max-width: 90%;
  margin: 0 auto;
}

#search-input {
  padding: 0.5rem;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 70%;
  max-width: 300px;
  font-size: 1rem; /* Ensure readability on mobile */
}

#search-button, #reset-button {
  padding: 0.5rem 0.75rem;
  background: #0275d8;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1rem; /* Ensure icons/text are visible */
  display: flex; /* Align icon */
  align-items: center;
  justify-content: center;
}

#search-button {
  border-radius: 0 4px 4px 0;
}

#reset-button {
  border-radius: 4px;
}

#search-button:hover, #reset-button:hover {
  background-color: #025aa5;
}

/* Main content area - Mobile Portrait (Stacked) */
main {
  display: flex;
  flex-direction: column; /* Default: stacked (Mobile Portrait) */
  flex: 1;
  overflow: hidden; /* Hide overflow, as children manage their scroll */
  padding: 0; /* No padding by default */
  gap: 0; /* No gap by default */
}

#map-container {
  position: relative;
  flex: 1;
  min-height: 60vh; /* Mobile default: map takes most height */
  height: auto; /* Allow flex to control height */
  background-color: #e0e0e0; /* Grey background while loading */
}

#map {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0; /* Grey background before map renders */
}

/* Loading/Error overlay */
#map-loading, #map-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* Stack text */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 100;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem; /* Add some padding */
  text-align: center;
}

#map-error {
  background-color: rgba(255, 235, 235, 0.9);
  color: #d9534f;
}

.hidden {
  display: none !important;
}

/* Info panel styles - Mobile Portrait (Stacked) */
#info-panel {
  background-color: white;
  padding: 1rem;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Allow scrolling if content overflows */
  max-height: 40vh; /* Mobile default: panel takes less height */
  flex-shrink: 0; /* Prevent panel from shrinking */
  display: flex; /* Use flexbox for header and content */
  flex-direction: column;
}

#info-content {
  flex-grow: 1; /* Allow content area to take available space */
  overflow-y: auto; /* Scroll the content area if it overflows */
  padding-top: 0.5rem; /* Add some space below header */
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem; /* Space below header */
}

.info-header h2 {
  font-size: 1.25rem;
  color: #00437a;
  flex-grow: 1; /* Allow h2 to take space */
  margin: 0; /* Reset margin */
}

/* Mobile specific button visibility */
#close-info.mobile-only {
    display: flex; /* Show by default on mobile */
}

/* Back button is removed */
#back-to-list {
    display: none !important;
}

/* Desktop/Wider screens button visibility */
@media (min-width: 768px) {
    #close-info {
        display: none !important; /* Hide close button on desktop */
    }
}

#close-info {
  background: none;
  border: none;
  color: #666;
  font-size: 1rem; /* Adjusted size */
  cursor: pointer;
  padding: 0.25rem 0.5rem; /* Add padding */
  border-radius: 4px;
  transition: background-color 0.2s;
  display: flex; /* Use flex to center icon/text */
  align-items: center;
}

#close-info:hover {
  background-color: #eee;
}

/* Footer styles */
footer {
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: #e0e0e0;
  color: #555;
  font-size: 0.9rem;
  flex-shrink: 0; /* Prevent footer from shrinking */
}

/* River Card Styles */
#river-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
    gap: 1rem; /* Space between cards */
    padding: 0.5rem 0; /* Padding above/below the grid */
}

.river-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 5px solid #0275d8; /* Accent color */
    border-radius: 4px;
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, border-left-color 0.1s ease-in-out, height 0.3s ease-in-out; /* Added height transition */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden; /* Hide content until expanded */
}

.river-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-left-color: #025aa5;
}

.river-card.selected {
    border-left-color: #5bc0de; /* Highlight selected card */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    background-color: #f9f9f9;
}

.river-card h4.river-name {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #00437a;
    font-size: 1.1rem;
}

.river-card p {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: #666;
}

.river-card p:last-child {
    margin-bottom: 0;
}

.river-card .river-length {
    font-weight: bold;
    color: #333;
}

.river-card .river-length i {
    margin-right: 0.3em;
    color: #0275d8;
}

/* Expanded Card Styles */
.river-card.expanded {
    border-left-color: #5cb85c; /* Different accent for expanded */
    background-color: #e9f4ee; /* Light green background */
    cursor: auto; /* Change cursor back to default */
    transform: none; /* No hover effect */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Keep a subtle shadow */
}

.river-card.expanded:hover {
     transform: none;
     border-left-color: #5cb85c;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.river-card .card-summary {
    /* Styles for the initial view content */
    display: flex;
    flex-direction: column;
}

.river-card .card-details {
    /* Styles for the expanded view content */
    padding-top: 0.75rem; /* Space between summary and details */
    border-top: 1px solid #eee;
    margin-top: 0.75rem;
}

.river-card .card-details h5 {
    margin-bottom: 0.5rem;
    color: #00437a;
    font-size: 1rem;
}

.river-card .card-details p {
    margin-bottom: 0.5rem;
}

.river-card .card-details p:last-child {
    margin-bottom: 0;
}

.river-card .card-details strong {
    color: #555; /* Slightly darker text for labels */
}

/* Media query for Desktop/Tablet Landscape (Side-by-side) */
@media (min-width: 768px) {
     main {
        flex-direction: row; /* Side-by-side */
        gap: 0.5rem; /* Gap between map and panel */
        padding: 0.5rem; /* Add padding to main */
     }

    #map-container {
        min-height: auto; /* Let map take remaining space */
        flex: 2; /* Map takes more width */
        height: 100%; /* Ensure map takes full height of main */
    }

    #info-panel {
        max-height: none; /* Let flex handle height */
        flex: 1; /* Panel takes less width */
        height: 100%; /* Ensure panel takes full height of main */
    }

    /* Adjust card layout for the side panel */
    #river-cards-container {
        grid-template-columns: 1fr; /* Stack cards in a single column */
        gap: 0.75rem;
        padding: 0; /* Remove padding from cards container, padding is on info-content/panel */
    }
    .river-card {
        padding: 0.75rem;
    }
    .river-card h4.river-name {
        font-size: 1rem;
    }
    .river-card p {
         font-size: 0.85rem;
    }
    /* Ensure info content can scroll if cards or details overflow */
    #info-content {
        overflow-y: auto;
    }

     /* Expanded card adjustments for desktop */
    .river-card.expanded {
        /* On desktop, maybe don't change height significantly, just show content */
        /* Height transition removed for desktop side panel to avoid layout issues */
        transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, border-left-color 0.1s ease-in-out;
    }
}