:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --accent: #2563eb;
  --border: #e2e8f0;
}
* {box-sizing:border-box;margin:0;padding:0;}
body {
  font-family: system-ui, sans-serif;
  background:
    linear-gradient(135deg, #e0f2f1 0%, #e8f5e9 40%, #dcedc8 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {background: linear-gradient(90deg, #14532d, #166534); /* deep greens */
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
  color: #ecfdf3;
z-index:-1;
}
h1 {font-size:1.2rem;font-weight:600;cursor:pointer;letter-spacing: 0.02em;flex:1;}
h1:hover {color: #bbf7d0; /* lighter green */}
header h1 a {color: inherit;text-decoration: none;display: inline-block;}
header h1 a:hover {color: #bbf7d0;}

main {flex:1;display:flex;height: calc(100vh - 60px);position: relative;margin-top: 0;}

#map {
  flex: 2;
  height: 100%;
  position: relative;
  z-index: 5;
  margin-left: 9px;
  margin-top: -5px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4),
              0 12px 24px rgba(15, 23, 42, 0.25); /* map depth */
  border-radius: 12px;
  overflow: hidden;
}

/* Center float above map */
#trail-info {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  border: 1px solid rgba(148, 163, 184, 0.7); /* softer, greyish */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.18),
    0 10px 25px rgba(37, 99, 235, 0.35); /* stronger glow */
  z-index: 1000;
}
#trail-info:hover {
  background: rgba(248, 250, 252, 0.98);     /* light grey hover */
  border-color: rgba(148, 163, 184, 1);}

/* 1. Ensure the sidebar treats children correctly */
#sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;  
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  overflow: hidden; /* Prevents sidebar itself from scrolling */}

#search {padding:0.45rem 0.9rem;border-bottom:1px solid var(--border);  background: rgba(255, 255, 255, 0.98);margin-top: 5px;}
#search input {width:100%;padding:0.55rem 0.75rem;border:2px solid #e2e8f0;border-radius:999px;font-size:0.95rem;background:#f9fafb;}
#search input:focus {outline:none;border-color:var(--accent);background:white;}
#trail-list {flex: 1 1 150px;  overflow-y: auto;}

/* Details panel fixed at bottom, always visible */
#details {
  flex: 0 1 auto;
  position: relative;
  z-index: 2;
  display: block;
resize: vertical;
  overflow: auto;
  min-height: 200px;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
  border-top: 2px solid rgba(0,0,0,0.1);
  /* Optional: fixed height you can tweak */
  max-height: 60vh;}
  
#trail-title {font-size:1.25rem;color:var(--accent);margin-bottom:0.5rem;}
#trail-meta {background:rgba(37,99,235,0.1);color:#2563eb;padding:0.5rem 0.75rem;border-radius:8px;border-left:4px solid var(--accent);font-size:0.9rem;margin-bottom:1rem;}
.trail-desc {font-size:0.95rem;line-height:1.6;}
.trail-desc img {max-width:100%;height:auto;border-radius:8px;margin:1rem 0;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.leaflet-tile-pane {filter:grayscale(30%) brightness(0.9);contrast(1.05);}
.credit {font-size:0.75rem;color:#64748b;text-align:center;padding:0.5rem;background:var(--panel);margin:0;}
@media (max-width:1000px) {main{flex-direction:column;}#sidebar{width:100%;height:45vh;}}
/* Existing list item styles can stay as they are */
.trail-item {
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s;
}
.trail-item:hover { background:#f8fafc; }
.trail-item:last-child {border-bottom: none;}
.trail-item.active {
  background: linear-gradient(90deg,rgba(37,99,235,0.1),#f0f9ff);
  border-left: 5px solid var(--accent);
  padding-left: 1.15rem;
}
.trail-color { width:16px; height:16px; border-radius:4px; flex-shrink:0; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.trail-name { font-weight:600; font-size:0.95rem; }
.trail-meta { font-size:0.8rem; color:#64748b; }