/* Mapping page isolated styles with dark app-like layout */
:root{
  --bg:#191d24;
  --panel:#191d24;
  --text:#e6eef6;
  --muted:#9aa7b6;
  --border:rgba(255,255,255,0.08);
  --max-width:1100px;
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  height:100vh;
  overflow:hidden; /* no page scrolling */
  display:flex;
  flex-direction:column;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
}

.container{width:90%;max-width:var(--max-width);margin:0 auto;padding:0}

/* Header: fixed height and light scheme */
.site-header{border-bottom:1px solid var(--border);background:var(--panel);height:56px}
/* Make header use full viewport width so logo and controls align to edges */
.site-header .container{max-width:none;width:100%;padding:0 12px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0 0.75rem;height:56px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:0.6px}
.site-logo{height:25px;display:block}
.logo a{display:inline-block}

/* Header controls (Import / Export) */
.header-controls{display:flex;gap:10px;align-items:center}
.menu-btn{border:0;padding:8px 12px;border-radius:8px;color:var(--text);font-weight:700;cursor:pointer;font-size:13px;-webkit-appearance:none;appearance:none}
.menu-btn:focus{outline:2px solid rgba(255,255,255,0.08);outline-offset:2px}
.menu-btn.import{background: linear-gradient(90deg,#4f46e5,#7c3aed) !important;box-shadow:0 6px 18px rgba(79,70,229,0.12) !important}
.menu-btn.export{background: linear-gradient(90deg,#16a34a,#059669) !important;box-shadow:0 6px 18px rgba(5,150,105,0.14) !important}
/* Disabled state for menu buttons */
.menu-btn:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}


/* App main: 30/70 split, fill viewport beneath header */
.app-main{
  height: calc(100vh - 56px);
  display:grid;
  grid-template-columns: 30% 70%;
  grid-template-areas: "menu map";
  overflow:hidden;
}

.menu{
  grid-area: menu;
  background: var(--panel);
  border-right:1px solid var(--border);
  overflow:hidden;
  display: flex;
  flex-direction: column;
}

.menu-nav{
  display: flex;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}

.menu-tab{
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s;
}

.menu-tab:hover{
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.menu-tab.active{
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

.menu-content{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* prevent scroll chaining to viewport */
  position: relative;
  /* Give extra bottom padding so final list items can scroll above the viewport/keyboard
     Include safe-area inset for devices with home indicator. Make it large enough
     so the last list item and any form controls are reachable above the keyboard. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  /* Add a pseudo spacer to ensure the scrollable area extends past the last item */
  position: relative;
}

.menu-content::after{
  content: '';
  display: block;
  height: calc(env(safe-area-inset-bottom, 0px) + 120px);
  pointer-events: none;
}

.menu-page{
  display: none;
  height: 100%;
}

.menu-page.active{
  display: block;
}

.menu-page-inner{
  padding: 16px;
}

/* Page header for POIs with right-aligned add button */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.add-poi-btn{background: linear-gradient(90deg,#4f46e5,#7c3aed) !important;color:white;border:0;padding:6px 10px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none}
.add-poi-btn.cancel{background: linear-gradient(90deg,#ef4444,#f97316) !important}

.pois-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
/* Ensure the POI list itself has extra bottom padding as well; do not create an inner scroll */
.pois-list{padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px)}
.poi-item{background: rgba(255,255,255,0.02);border:1px solid var(--border);padding:10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}
.poi-item .meta{font-size:13px;color:var(--muted)}

/* Left column: title over meta */
.poi-info{display:flex;flex-direction:column;gap:4px}
.poi-item .poi-title{color:var(--text);font-weight:700}
.poi-item .poi-meta{font-size:12px;color:var(--muted);opacity:0.9}

.poi-actions{display:flex;gap:8px;align-items:center}

/* Inline add form styles */
.poi-add-form{background: rgba(255,255,255,0.02);border:1px solid var(--border);padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:8px}
.poi-add-form label{font-size:12px;color:var(--muted)}
.poi-add-form input[type="text"], .poi-add-form input[type="number"]{padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.poi-add-form select{padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);-webkit-appearance:none;appearance:none}
.poi-add-form .poi-select-helper{font-size:12px;color:var(--muted)}
.poi-add-form input[type="range"]{width:100%}
.poi-add-form .rad-value{font-weight:700;color:var(--text)}

/* Center button (purple) */
.center-btn{background: linear-gradient(90deg,#7c3aed,#5b21b6) !important;color:#fff;border:0;padding:6px 10px;border-radius:6px;-webkit-appearance:none;appearance:none}

/* Create button (green) inside add form */
.create-btn{background: linear-gradient(90deg,#16a34a,#059669) !important;color:#fff;border:0;padding:8px 12px;border-radius:8px;font-weight:700;-webkit-appearance:none;appearance:none}

/* Edit (purple) and Delete (danger) menu button styles */
.edit-btn{background: linear-gradient(90deg,#f59e0b,#f97316) !important;box-shadow:0 6px 18px rgba(249,115,22,0.14) !important;color:#fff;padding:6px 10px;border-radius:6px}
.delete-btn{background: linear-gradient(90deg,#ef4444,#f97316) !important;box-shadow:0 6px 18px rgba(249,115,22,0.14) !important;color:#fff;padding:6px 10px;border-radius:6px}

/* Overlay shown when in add-state */
.add-overlay{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight:600;
  z-index: 5000;
  pointer-events: none;
}

/* Arrow icons for trip direction markers: don't capture pointer events */
.trip-arrow-icon{pointer-events: none}

.menu-page h2{
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--text);
}

.menu-hint{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

#map{
  grid-area: map;
  height: 100%;
  width: 100%;
  touch-action: pan-x pan-y pinch-zoom; /* allow map gestures */
  overscroll-behavior: contain; /* keep scrolling/zooming contained to the map */
}

/* Ensure the app fills the viewport exactly and doesn't allow page scroll */
.app-main{height:100vh}

/* Map attribution in bottom-right of map pane */
.map-attrib{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.5);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  z-index: 4000;
}

/* Make the attribution link a brighter, more visible blue */
.map-attrib a {
  color: #38a1ff;
  text-decoration: underline;
}
.map-attrib a:hover {
  color: #1e90ff;
}

/* Portrait mode: vertical layout with map above menu */
@media (orientation: portrait) {
  .app-main{
    grid-template-columns: 1fr;
    grid-template-rows: 40% 60%;
    grid-template-areas: "map" "menu";
  }
  
  .menu{
    border-right: none;
    border-top: 1px solid var(--border);
  }
}