@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-primary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  --color-primary-dark: #004D80; 
  --color-primary: #007BFF;      
  --color-primary-light: #57A5FF; 
  
  --color-accent: #28A745;        
  --color-accent-light: #34C759;  

  --color-text-primary: #212529;  
  --color-text-secondary: #6C757D;
  --color-text-on-dark: #FFFFFF;  
  --color-text-on-accent: #FFFFFF;

  --color-background-main: #F8F9FA; 
  --color-background-card: #FFFFFF; 
  --color-background-card-expanded: #E9F7EC; 
  --color-background-overlay: rgba(248, 249, 250, 0.9); /* Adjusted for new main background */

  --color-border: #DEE2E6;        
  --color-danger: #DC3545;        
  --color-danger-bg: rgba(220, 53, 69, 0.1); 

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  --border-radius: 6px;

  --header-height-desktop: 70px; 
  --header-height-mobile: 56px; 

  --resizer-size: 8px;
}

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

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background-main);
  height: 100vh;
  overflow: auto;
}

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

/* Header styles */
header {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  padding: 0.75rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
  transition: top 0.3s ease-in-out;
  cursor: pointer; /* For fullscreen toggle */
}

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

.search-container {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  max-width: 90%;
  margin: 0 auto;
  cursor: default; /* Prevent search from triggering fullscreen */
}
.search-container > * {
    cursor: auto; /* Ensure children of search container have normal cursor */
}

#search-input {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  width: 70%; 
  max-width: 300px; 
  font-size: 1rem;
  font-family: var(--font-primary);
  color: var(--color-text-primary);
}
#search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

#search-button, #reset-button {
  padding: 0.5rem 0.75rem;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#reset-button {
  border-radius: var(--border-radius);
}

#search-button:hover, #reset-button:hover {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

/* Main content area - Mobile Portrait (Stacked) */
main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto; /* Changed to hidden for desktop later, auto for mobile scroll */
  padding: 0; 
  gap: 0;
}

@media (max-width: 767px) {
  main {
    padding-top: var(--header-height-mobile); 
  }
  #map-container {
    flex: 1 1 60%; /* Default: 60% basis, can grow/shrink */
    min-height: 200px; /* Sensible minimum */
    height: auto; /* Let flexbox manage */
  }
  #info-panel {
    flex: 1 1 40%; /* Default: 40% basis, can grow/shrink */
    min-height: 150px; /* Sensible minimum */
    max-height: none; /* Override previous fixed max-height */
    overflow-y: auto;
  }
}

#map-container {
  position: relative;
  background-color: #E9ECEF; /* Light gray for map background */
}

#map {
  width: 100%;
  height: 100%;
  background-color: #E9ECEF;
}

/* Loading/Error overlay */
#map-loading, #map-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background-overlay);
  z-index: 100;
  font-size: 1.2rem;
  font-weight: 500; /* Medium weight */
  padding: 1rem;
  text-align: center;
  border-radius: var(--border-radius); /* Apply to error if it's contained */
}

#map-error {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: 1.5rem; /* More padding for errors */
}

.hidden {
  display: none !important;
}

/* Info panel styles - Mobile Portrait (Stacked) */
#info-panel {
  background-color: var(--color-background-card);
  padding: 1rem;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.08); /* Softer shadow upwards */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#info-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-top: 0.5rem;
}

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

.info-header h2 {
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  font-weight: 600;
  flex-grow: 1;
  margin: 0;
}

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

#close-info {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.1rem; /* Slightly larger icon */
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}

#close-info:hover {
  background-color: #E9ECEF; /* Light gray hover */
  color: var(--color-text-primary);
}

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

.river-card {
  background-color: var(--color-background-card);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-left-color 0.15s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.river-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--color-primary-light);
}

.river-card.selected {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.river-card h4.river-name {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  font-weight: 600;
}

.river-card p {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

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

.river-card .river-length {
  font-weight: 500; /* Medium weight */
  color: var(--color-text-primary);
}

.river-card .river-length i {
  margin-right: 0.3em;
  color: var(--color-primary);
}

/* Expanded Card Styles */
.river-card.expanded {
  border-left-color: var(--color-accent);
  background-color: var(--color-background-card-expanded);
  cursor: auto;
  transform: none;
  box-shadow: var(--shadow-md);
}

.river-card.expanded:hover {
  transform: none;
  border-left-color: var(--color-accent); /* Keep accent color */
  box-shadow: var(--shadow-md);
}

.river-card .card-summary {
  display: flex;
  flex-direction: column;
}

.river-card .card-details {
  padding-top: 0.75rem;
  border-top: 1px solid #CCE8D2; /* Lighter green border */
  margin-top: 0.75rem;
}

.river-card .card-details h5 { 
  margin-bottom: 0.5rem;
  color: var(--color-primary-dark);
  font-size: 1rem;
  font-weight: 600;
}

.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: #495057; /* Slightly darker than secondary text for emphasis */
  font-weight: 500;
}

/* Panel Resizer Styles */
.panel-resizer {
  background-color: var(--color-border);
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0; /* Important for flex layout */
  touch-action: none; /* Prevent default touch actions like scroll/zoom */
  z-index: 50; /* Ensure it's above map content if overlapping, below header */
  position: relative;
}

.panel-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.panel-resizer:hover::before {
  opacity: 0.3;
}

.panel-resizer.resizing {
  background-color: var(--color-primary) !important;
}

.panel-resizer.resizing::before {
  opacity: 0.5;
}

/* Media query for Desktop/Tablet Landscape (Side-by-side) */
@media (min-width: 768px) {
  body {
    overflow: hidden;
  }
  main {
    flex-direction: row;
    gap: 0; /* Remove gap, manage with padding/borders */
    padding: 0; 
    overflow: hidden;
    padding-top: 0; 
  }

  #map-container {
    flex: 2 1 0%; /* Default: 2 parts, can shrink, basis 0 initially */
    min-width: 200px; /* Minimum width */
    height: 100%; /* Ensure it takes full height in row layout */
  }
  
  #info-panel {
    flex: 1 1 0%; /* Default: 1 part, can shrink, basis 0 initially */
    min-width: 250px; /* Minimum width for cards */
    max-height: none; /* Override mobile max-height */
    height: 100%; /* Ensure it takes full height */
    border-left: none; /* Resizer acts as border */
    box-shadow: none; /* Remove mobile bottom shadow */
    padding: 1rem; /* Consistent padding */
  }

  .panel-resizer {
    width: var(--resizer-size);
    height: 100%; 
    cursor: col-resize;
  }
  .panel-resizer:hover {
    background-color: var(--color-primary);
  }

  #river-cards-container {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
  }

  .river-card {
    padding: 0.75rem;
  }

  .river-card h4.river-name {
    font-size: 1rem;
  }

  .river-card p {
    font-size: 0.85rem;
  }

  #info-content {
    overflow-y: auto;
  }

  header {
    position: static;
    height: var(--header-height-desktop); 
    display: block; 
    padding: 0.75rem 1rem; 
    display: flex; /* Use flex for vertical centering if needed */
    flex-direction: column;
    justify-content: center;
  }

  header h1 {
    font-size: 1.5rem; 
    margin-bottom: 0.5rem; 
    margin-right: 0;
    text-align: center; /* Ensure centered on desktop */
  }

  .search-container {
    justify-content: center;
    max-width: 450px; /* Can be a bit wider on desktop */
    margin: 0 auto;
    flex-grow: 0; 
    align-items: stretch; 
  }

  #search-input {
    width: 70%;
    max-width: 300px;
    padding: 0.5rem;
    font-size: 1rem;
    min-width: auto; 
  }
  
  #search-button, #reset-button {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }

  #close-info.mobile-only {
    display: none !important;
  }
}

/* Mobile specific header fixed positioning and styling */
@media (max-width: 767px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem; /* Slightly less horizontal padding on mobile */
    height: var(--header-height-mobile);
  }

  header h1 {
    font-size: 1.2rem; /* Adjusted for "LuShK" */
    margin-bottom: 0; 
    margin-right: 0.5rem; 
    white-space: nowrap;
    flex-shrink: 0; 
  }

  .search-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-grow: 1; 
    justify-content: flex-end; 
    max-width: none; 
    margin: 0; 
  }

  #search-input {
    padding: 0.4rem 0.6rem; /* Adjusted padding */
    font-size: 0.9rem;
    flex-grow: 1; 
    width: auto; 
    max-width: 180px; /* Slightly less max-width */
    min-width: 80px; 
  }

  #search-button, #reset-button {
    padding: 0.4rem 0.6rem; 
    font-size: 0.9rem; 
    flex-shrink: 0; 
  }

  header.hidden {
    top: calc(-1 * var(--header-height-mobile)); 
  }

  .panel-resizer {
    width: 100%;
    height: var(--resizer-size);
    cursor: row-resize;
  }
  .panel-resizer:hover {
    background-color: var(--color-primary);
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px; /* Slightly wider for easier grabbing */
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #EDF2F7; /* Lighter track */
}
::-webkit-scrollbar-thumb {
  background: #CBD5E0; /* A neutral gray for scrollbar */
  border-radius: var(--border-radius);
  border: 2px solid #EDF2F7; /* Track color border for padding effect */
}
::-webkit-scrollbar-thumb:hover {
  background: #A0AEC0; /* Darker on hover */
}