/* ============================================================================
   Trail Planner — "Modern outdoor / clean" theme
   Near-black slate base · sky-blue accent · precise technical sans.
   Fonts: IBM Plex Sans (display) / Inter (body) / JetBrains Mono (numbers).
   ============================================================================ */

:root{
  --bg:#0e1116;
  --sidebar:#12161d;
  --panel:#1a1f28;
  --field:#11151c;
  --accent:#5aabe0;        /* sky blue */
  --accent-hi:#78c0ea;
  --accent-dim:#3d85b8;
  --on-accent:#071724;     /* text on the blue */
  --err:#f87171;
  --border:#242b36;
  --border-hi:#313a48;
  --text:#f2f4f7;
  --muted:#8b95a5;
  --grad-low:#3ab87a;      /* low elevation (forest green) */
  --grad-mid:#e8c44a;      /* mid elevation (alpine gold) */
  --grad-high:#d06838;     /* high elevation (warm rock) */
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --display:'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --radius:10px;
  --radius-sm:7px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}

/* ---- Header ---- */
header{
  flex:0 0 auto; display:flex; align-items:baseline; gap:12px;
  padding:13px 18px; background:var(--sidebar);
  border-bottom:1px solid var(--border);
}
header h1{
  font-family:var(--display); font-size:17px; font-weight:600; margin:0;
  letter-spacing:-.2px; display:flex; align-items:center; gap:8px;
}
header h1 .mark{ color:var(--accent); font-size:18px; }
header .tagline{ color:var(--muted); font-size:12px; }

/* ---- App shell ---- */
#app{ flex:1 1 auto; display:flex; min-height:0; }
#sidebar{
  width:328px; flex:0 0 328px; background:var(--sidebar);
  border-right:1px solid var(--border); overflow-y:auto;
  display:flex; flex-direction:column;
}
#main{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
#map{ flex:1 1 auto; min-height:0; }
#profile-wrap{
  flex:0 0 auto; height:226px; border-top:1px solid var(--border);
  background:var(--panel); display:flex; flex-direction:column;
}

/* ---- Sidebar panels ---- */
.panel{ padding:16px 18px; border-bottom:1px solid var(--border); }
.panel h2{
  font-family:var(--display); font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--muted); margin:0 0 12px; font-weight:600;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.panel-head h2{ margin:0; }
.muted{ color:var(--muted); font-size:12px; }

label{ display:block; font-size:11px; color:var(--muted); margin-bottom:9px; letter-spacing:.2px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
input[type=text]{
  width:100%; margin-top:5px; padding:8px 9px; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:13px; transition:border-color .12s, box-shadow .12s;
}
input[type=text]:focus{ outline:none; border-color:var(--accent-dim); box-shadow:0 0 0 3px rgba(90,171,224,.14); }
input.invalid{ border-color:var(--err); background:#2a1614; }

.btn{
  appearance:none; border:1px solid var(--border-hi); background:#202734; color:var(--text);
  padding:9px 13px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:background .12s, border-color .12s, transform .04s;
}
.btn:hover{ background:#283142; border-color:#3a4555; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-accent{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600;
  box-shadow:0 2px 12px rgba(90,171,224,.28);
}
.btn-accent:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }
.btn-danger{ color:var(--err); border-color:#4a2724; background:#221917; }
.btn-danger:hover{ background:#2c1d1a; }
.add-form .btn{ width:100%; margin-top:4px; }

.actions label{ margin-bottom:13px; }
select#profile-select{
  width:100%; margin-top:5px; padding:8px 9px; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:13px; cursor:pointer; transition:border-color .12s;
}
select#profile-select:focus{ outline:none; border-color:var(--accent-dim); }
.actions .btn-row{ display:grid; grid-template-columns:1fr 1.3fr; gap:8px; }
.inline-error{ color:var(--err); font-size:12px; margin-bottom:8px; }

.link-btn{ background:none; border:none; color:var(--accent); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }

/* ---- Search box + autocomplete ---- */
.search-wrap{ position:relative; margin-bottom:14px; }
.search-box{ position:relative; display:flex; align-items:center; }
.search-ico{ position:absolute; left:10px; top:0; bottom:0; height:14px; margin-top:auto; margin-bottom:auto; display:flex; align-items:center; opacity:.6; pointer-events:none; }
#search{
  width:100%; padding:10px 30px; background:var(--field); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-family:var(--sans);
  transition:border-color .12s, box-shadow .12s;
}
#search:focus{ outline:none; border-color:var(--accent-dim); box-shadow:0 0 0 3px rgba(90,171,224,.16); }
.search-clear{ position:absolute; right:7px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; padding:3px 5px; display:flex; align-items:center; }
.search-clear:hover{ color:var(--text); }
.search-results{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:20;
  background:var(--panel); border:1px solid var(--border-hi); border-radius:var(--radius); overflow:hidden auto;
  max-height:300px; box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.search-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; cursor:pointer; border-bottom:1px solid var(--border); }
.search-item:last-child{ border-bottom:none; }
.search-item.active{ background:#222a36; }
.si-ico{ width:18px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.si-text{ display:flex; flex-direction:column; min-width:0; }
.si-label{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-sub{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-coord .si-ico{ color:var(--accent); }
.search-empty{ padding:11px; color:var(--muted); font-size:12px; }
.search-loading{ padding:11px; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; }
.search-loading .spinner{ width:14px; height:14px; border-width:2px; }
.divider{ display:flex; align-items:center; text-align:center; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.8px; margin:2px 0 14px; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.divider span{ padding:0 9px; }

/* ---- Waypoint list ---- */
.wp-list{ display:flex; flex-direction:column; gap:7px; }
.wp-empty{ color:var(--muted); font-size:13px; line-height:1.55; }
.wp-row{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 9px 9px 7px; display:grid; grid-template-columns:18px 1fr auto; gap:6px 8px;
  align-items:center; transition:border-color .12s, box-shadow .12s;
}
.wp-row:hover{ border-color:var(--border-hi); box-shadow:0 2px 12px rgba(0,0,0,.3); }
.wp-row.dragging{ opacity:.45; }
.wp-row.drag-over{ border-color:var(--accent-dim); }
.wp-handle{ grid-row:1 / span 2; cursor:grab; color:var(--muted); display:flex; align-items:center; justify-content:center; user-select:none; }
.wp-handle:active{ cursor:grabbing; }
.wp-label{ font-weight:600; font-size:13px; cursor:text; word-break:break-word; }
.wp-label .num{ color:var(--accent); margin-right:6px; font-family:var(--mono); font-size:11px; }
.wp-label-input{ width:100%; font-size:13px; }
.wp-del{ background:none; border:none; color:var(--muted); cursor:pointer; padding:3px 4px; display:flex; align-items:center; }
.wp-del:hover{ color:var(--err); }
.wp-coords{ grid-column:2; font-family:var(--mono); font-size:11px; color:var(--muted); }
.wp-elev{ grid-column:3; display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12px; }
.wp-elev .val{ color:var(--text); }
.wp-elev .val.null{ color:var(--muted); }
.wp-elev .edit{ background:none; border:none; color:var(--muted); cursor:pointer; padding:0 3px; display:flex; align-items:center; }
.wp-elev .edit:hover{ color:var(--accent); }
.wp-elev input{ width:64px; padding:3px 5px; margin:0; font-size:12px; }

/* ---- Stats table ---- */
#stats{ overflow-x:auto; }
table.stats{ border-collapse:collapse; width:100%; font-size:11px; }
table.stats th, table.stats td{ padding:6px 6px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
table.stats th{ color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
table.stats td:first-child, table.stats th:first-child{ text-align:left; font-family:var(--mono); }
table.stats td{ font-family:var(--mono); }
table.stats tr.total td{ font-weight:700; border-top:2px solid var(--border-hi); border-bottom:none; color:var(--text); }
.stat-asc{ color:var(--grad-high); }
.stat-desc{ color:var(--grad-low); }
.stats-note{ font-size:10px; color:var(--muted); margin-bottom:7px; font-style:italic; }
.leg-straight{ color:var(--err); cursor:help; font-style:normal; }

/* ---- Elevation profile ---- */
.profile-head{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 14px 4px; }
.profile-head span:first-child{
  font-family:var(--display); font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--muted); font-weight:600;
}
#profile{ flex:1 1 auto; position:relative; }
#profile svg{ display:block; width:100%; height:100%; }
.profile-empty{ color:var(--muted); font-size:13px; padding:22px 14px; }
.axis text{ fill:var(--muted); font-size:10px; font-family:var(--mono); }
.axis line{ stroke:var(--border-hi); }
.grid line{ stroke:#1f242d; }
.wp-tick line{ stroke:#42506a; stroke-dasharray:3 3; }
.wp-tick text{ fill:var(--muted); font-size:9px; font-family:var(--sans); }
.profile-line{ fill:none; stroke:var(--accent); stroke-width:2; }
.cursor-line{ stroke:#fff; stroke-width:1; stroke-dasharray:2 2; }
.cursor-dot{ fill:#fff; }
.cursor-label{ fill:#fff; font-size:10px; font-family:var(--mono); }

/* ---- Map overlays ---- */
#loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(10,13,18,.6); color:var(--text); font-size:13px; z-index:5; backdrop-filter:blur(2px);
}
#loading[hidden]{ display:none; }
.spinner{
  width:22px; height:22px; border:3px solid #39414f; border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.crosshair{
  width:16px; height:16px; border:2px solid #fff; border-radius:50%;
  background:rgba(90,171,224,.38); box-sizing:border-box; pointer-events:none;
}

/* ---- Map controls (2D/3D + overlay toggles) ---- */
.map-controls{
  position:absolute; top:12px; left:12px; z-index:4;
  background:var(--panel); border:1px solid var(--border-hi);
  border-radius:var(--radius); padding:8px 10px;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:7px; min-width:168px;
  pointer-events:all;
}
.mc-dim{ display:flex; gap:4px; }
.mc-btn{
  flex:1; padding:5px 2px; background:transparent; border:1px solid var(--border-hi);
  border-radius:var(--radius-sm); color:var(--muted); font-size:12px; font-weight:600;
  cursor:pointer; font-family:var(--mono); letter-spacing:.3px; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.mc-btn:hover{ color:var(--text); border-color:#3a4555; }
.mc-btn.mc-active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.mc-sep{ height:1px; background:var(--border); margin:1px 0; }
.mc-layer{
  display:flex !important; align-items:center; gap:8px;
  font-size:12px !important; color:var(--muted); cursor:pointer;
  margin:0 !important; letter-spacing:0 !important;
  font-family:var(--sans); line-height:1.3; user-select:none;
}
.mc-layer:hover{ color:var(--text); }
.mc-layer input[type=checkbox]{ width:13px; height:13px; margin:0; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; }

/* ---- Route warning banner (loud fallback notice) ---- */
.route-warning{
  position:absolute; top:12px; left:196px; right:12px; z-index:6;
  display:flex; align-items:center; gap:10px;
  background:#241413; border:1px solid #6f2f29; color:#fca5a5;
  padding:10px 13px; border-radius:var(--radius); font-size:12.5px; line-height:1.4;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.route-warning[hidden]{ display:none; }
.route-warning .rw-ico{ flex:0 0 auto; display:flex; align-items:center; }
.route-warning .rw-msg{ flex:1 1 auto; }
.route-warning .rw-retry{
  flex:0 0 auto; appearance:none; cursor:pointer; font:inherit; font-weight:600;
  background:#f87171; color:#2a0f0c; border:none; border-radius:var(--radius-sm); padding:6px 13px;
}
.route-warning .rw-retry:hover{ background:#fca5a5; }
.btn-icon{ display:inline-flex; align-items:center; gap:5px; }
.route-warning .rw-close{
  flex:0 0 auto; appearance:none; cursor:pointer; background:none; border:none;
  color:#fca5a5; padding:3px 4px; display:flex; align-items:center;
}
.route-warning .rw-close:hover{ color:#fff; }

/* ---- Toasts ---- */
#toast-container{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:50; max-width:360px; }
.toast{
  background:#1f2632; border:1px solid var(--border-hi); color:var(--text); padding:11px 13px;
  border-radius:var(--radius); font-size:13px; line-height:1.45; animation:slidein .2s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.5); border-left:3px solid var(--accent);
}
@keyframes slidein{ from{ transform:translateY(8px); opacity:0; } }

/* ---- MapLibre popup theming ---- */
.maplibregl-popup-content{ background:var(--panel); color:var(--text); border:1px solid var(--border-hi); border-radius:var(--radius-sm); font-family:var(--sans); font-size:12px; padding:8px 11px; }
.maplibregl-popup-tip{ border-top-color:var(--panel) !important; border-bottom-color:var(--panel) !important; }
.maplibregl-popup-close-button{ color:var(--muted); }
.popup-title{ font-weight:600; margin-bottom:2px; }
.popup-elev{ font-family:var(--mono); color:var(--accent); }

/* ---- Export panel ---- */
#export-panel .btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---- Mobile ---- */
@media (max-width:768px){
  body{ overflow:auto; }
  #app{ flex-direction:column; }
  #sidebar{ width:100%; flex:0 0 auto; }
  #main{ height:auto; }
  #map{ height:60vh; flex:none; }
  #profile-wrap{ height:226px; }
}