/* ==== Classic layout (original look) ==== */
html, body{
  height:100%;
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

body{
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* Map occupies the page; chart sits below */
#map{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:55vh;
}

/* Leaflet controls keep their natural look with a tiny polish */
.leaflet-control{
  background:#fff;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding:6px 8px;
  line-height:1.2;
}

/* Chart panel below the map (hidden until a track is clicked) */
#chart-container{
  position:relative;
  width:97%;
  height:240px;
  max-height:35vh;
  padding:10px 10px 10px 30px;
  background:#fff;
  border-top:1px solid #e5e7eb;
}
#chart-container.hidden{ display:none; }


/* Optional fixed tooltip removed */
#chart-container canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
  z-index:1;
}


/* ===== Valtrack sticky header ===== */
.vt-header { position: sticky; top: 0; z-index: 10060; background: #fff; }
.vt-brandbar{ background:#d32f2f; color:#fff; padding:10px 12px; text-align:center; border-bottom:1px solid rgba(255,255,255,.15); }
.vt-brand{ font-weight:700; letter-spacing:.4px; font-size:1.1rem; }
.vt-menubar{ display:flex; gap:8px; align-items:center; padding:6px 10px; background:#fff; border-bottom:1px solid #e5e7eb; overflow-x:auto; }
.vt-dropdown{ position:relative; }
.vt-trigger{ border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:10px; font-weight:500; cursor:pointer; }
.vt-trigger:hover{ background:#f8f9fb; }

/* Floating overlay panels (no tiny scroll area) */
.vt-panel{
  display:none;
  position: fixed;
  top: calc(var(--vt-header-bottom, 72px) + 8px);
  left: 12px;
  min-width: 320px;
  max-width: min(92vw, 720px);
  max-height: min(78vh, 640px);
  overflow: auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  padding:12px;
  z-index: 10050;
}
.vt-dropdown > .vt-panel { display: none !important; }
.vt-divider{ border:none; border-top:1px solid #eee; margin:10px 0; }
.vt-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.vt-stack > * + *{ margin-top:8px; }
.vt-status{ margin-left:8px; font-weight:600; }

/* Inputs inside panels */
.vt-panel input[type="text"],
.vt-panel input[type="password"],
.vt-panel input[type="file"]{
  width:100%;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  margin:4px 0 8px;
}

/* Give the map room under the sticky header */
#map{ min-height:60vh; }


/* Make the GPX upload look like a button */
.vt-upload{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.vt-upload input[type="file"]{ display:none; } /* use label click */

/* Force chart hidden on load; charts.js can reveal later */
#chart-container{ display:none; }

@media (max-width: 640px){
  #chart-container{
    max-width: calc(100% - 24px);
    margin: 0 12px;
    height: 240px;
  }
}



/* --- New chart panel layout (no overlay) --- */
#chart-container{
  position:relative;
  width:97%;
  height:260px;
  max-height:35vh;
  padding:0;
  background:#fff;
  border-top:1px solid #e5e7eb;
  display:block;
}
#chart-panel{ display:flex; flex-direction:column; height:100%; width:100%; }
#chart-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px; border-bottom:1px solid #e5e7eb; background:#fff; }
#chart-topbar #chart-controls{ position:static; background:transparent; border:none; padding:0; font-size:12px; }
#chart-topbar #chart-info{ position:static; background:transparent; border:none; padding:0; font-size:12px; }
#chart-topbar #chart-close{ background:#fff; border:1px solid #e5e7eb; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#chart-topbar #chart-close:hover{ background:#f8f9fb; }
#chart-body{ position:relative; flex:1 1 auto; min-height:180px; }
#chart-body canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:1; }


/* Hide chart on initial load */
#chart-container{ display:none; }

.leaflet-control-container { z-index: 1000 !important; }

/* Hide source panels in their original location; they will be shown when moved into dropdowns */
#login-panel,
#gpx-panel,
#session-panel,
#listener-controls,
#controls,
#valmap-controls,
#privacy-panel {
  display: none;
}