/* FitTrack style.css — complete rewrite, all layout bugs fixed
   KEY FIXES:
   - .track-view has NO display property — JS controls it via switchView()
   - .track-view has position:relative — fin-overlay stays inside track
   - Desktop track height = 100% of #main-content, not separate 100vh
   - fin-overlay z-index:3000 — above Leaflet (400) and sidebar (2002)
*/

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --bg:    #0a0a0f;
  --sfc:   #111118;
  --sfc2:  #1a1a24;
  --sfc3:  #22222e;
  --bdr:   #2a2a38;
  --acc:   #00e87a;
  --acc-d: #00703c;
  --txt:   #e8e8f0;
  --mut:   #6a6a80;
  --dim:   #3a3a50;
  --red:   #ff3b5c;
  --info:  #4da6ff;
  --shad:  0 4px 24px rgba(0,0,0,.65);
  --hh:    52px;
}
[data-theme="light"] {
  --bg:#f2f2f7; --sfc:#fff; --sfc2:#f0f0f5; --sfc3:#e4e4ed;
  --bdr:#d0d0dc; --acc:#009050; --acc-d:#006d3c;
  --txt:#111118; --mut:#6a6a80; --dim:#b0b0c0;
  --red:#d42b4a; --shad:0 4px 24px rgba(0,0,0,.1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:'JetBrains Mono','Fira Code',monospace; background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; }
a    { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea {
  font-family:'JetBrains Mono',monospace;
  background:var(--sfc2); color:var(--txt);
  border:1px solid var(--bdr); border-radius:6px;
  font-size:.875rem; padding:.5rem .75rem;
  outline:none; transition:border-color .15s; width:100%;
}
input:focus,select:focus,textarea:focus { border-color:var(--acc); }
canvas { display:block; width:100%!important; }

/* ── Screens ────────────────────────────────────────────────── */
.screen { display:none; width:100%; }

/* ── Auth ───────────────────────────────────────────────────── */
#auth-screen {
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; position:relative; overflow:hidden;
}
.auth-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 20% 80%,rgba(0,232,122,.08),transparent 70%),
             radial-gradient(ellipse 50% 50% at 80% 20%,rgba(77,166,255,.06),transparent 70%);
}
.auth-card {
  position:relative; z-index:1;
  background:var(--sfc); border:1px solid var(--bdr); border-radius:14px;
  padding:2rem; width:100%; max-width:400px; margin:1rem; box-shadow:var(--shad);
}
.auth-logo { text-align:center; margin-bottom:1.5rem; }
.logo-hex  { font-size:2.4rem; color:var(--acc); margin-bottom:.3rem; }
.auth-logo h1 { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.auth-sub  { font-size:.7rem; color:var(--mut); letter-spacing:.2em; text-transform:uppercase; margin-top:.25rem; }
.tab-bar   { display:flex; border-bottom:1px solid var(--bdr); margin-bottom:1.5rem; }
.tab-btn   { flex:1; padding:.6rem; font-family:'Barlow Condensed',sans-serif; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; cursor:pointer; }
.tab-btn.active  { color:var(--acc); border-color:var(--acc); }
.tab-content     { display:none; }
.tab-content.active { display:block; }
.fg { margin-bottom:1rem; }
.fg label { display:block; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:.3rem; }
.auth-err { padding:.7rem 1rem; border-radius:6px; font-size:.8rem; margin-top:.75rem; background:rgba(255,59,92,.1); border:1px solid var(--red); color:var(--red); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; border-radius:6px;
  padding:.5rem 1.1rem; font-size:.85rem; transition:all .15s;
  white-space:nowrap; flex-shrink:0; cursor:pointer; border:none;
}
.btn-primary { background:var(--acc); color:#000; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-ghost { background:transparent; color:var(--mut); border:1px solid var(--bdr); }
.btn-ghost:hover { border-color:var(--mut); color:var(--txt); }
.btn-danger { background:transparent; color:var(--red); border:1px solid var(--red); }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-sm   { padding:.3rem .8rem; font-size:.75rem; }
.btn-full { width:100%; }
.btn-install-nav {
  width:100%; padding:.45rem; display:block;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--acc);
  border:1px solid var(--acc-d); border-radius:6px; background:transparent;
  cursor:pointer; transition:all .15s;
}
.btn-install-nav:hover { background:rgba(0,144,80,.1); }
.icon-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--mut); transition:all .15s; cursor:pointer;
}
.icon-btn:hover { color:var(--txt); background:var(--sfc2); }

/* ── App shell ──────────────────────────────────────────────── */
#app-screen { display:flex; flex-direction:row; width:100%; min-height:100vh; }

/* ── Mobile header ──────────────────────────────────────────── */
#mobile-header {
  display:none; position:fixed; top:0; left:0; right:0; height:var(--hh);
  background:var(--sfc); border-bottom:1px solid var(--bdr);
  align-items:center; justify-content:space-between; padding:0 1rem; z-index:2000;
}
#btn-menu { width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:6px; }
#btn-menu span { display:block; width:22px; height:2px; background:var(--txt); border-radius:2px; transition:all .2s; }
#mob-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:1rem; color:var(--acc); }

/* ── Nav overlay ────────────────────────────────────────────── */
#nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2001; }
#nav-overlay.show { display:block; }

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
  width:220px; min-width:220px; flex-shrink:0;
  background:var(--sfc); border-right:1px solid var(--bdr);
  display:flex; flex-direction:column; padding:1.25rem 0;
  z-index:2002; transition:transform .25s ease;
}
.nav-logo { display:flex; align-items:center; gap:.6rem; padding:0 1.25rem 1.25rem; border-bottom:1px solid var(--bdr); font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.logo-hex-sm { color:var(--acc); font-size:1.2rem; }
.nav-user { display:flex; align-items:center; gap:.6rem; padding:1rem 1.25rem; font-size:.8rem; color:var(--mut); overflow:hidden; }
.nav-avatar { width:32px; height:32px; border-radius:50%; background:var(--acc-d); color:#000; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; overflow:hidden; flex-shrink:0; }
.nav-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.nav-uname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-links { list-style:none; flex:1; padding:.5rem 0; overflow-y:auto; }
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); border-left:3px solid transparent; transition:all .15s; }
.nav-link svg { width:16px; height:16px; flex-shrink:0; }
.nav-link:hover  { color:var(--txt); background:var(--sfc2); }
.nav-link.active { color:var(--acc); border-color:var(--acc); background:rgba(0,144,80,.08); }
.nav-foot     { padding:1rem 1.25rem; border-top:1px solid var(--bdr); display:flex; flex-direction:column; gap:.5rem; }
.nav-foot-row { display:flex; align-items:center; justify-content:space-between; }
.sync-status  { display:flex; align-items:center; gap:.5rem; font-size:.7rem; color:var(--mut); }
.sync-dot { width:8px; height:8px; border-radius:50%; background:var(--dim); flex-shrink:0; display:inline-block; transition:background .3s; }
.sync-dot.online  { background:var(--acc); box-shadow:0 0 5px var(--acc); }
.sync-dot.offline { background:var(--red); }
.sync-dot.pending { background:#ffd700; }

/* ── Main content ───────────────────────────────────────────── */
#main-content { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; position:relative; }
.view { display:none; padding:1.5rem; }
.view-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; flex-wrap:wrap; gap:.75rem; }
.view-hdr h2 { font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.view-hdr-right { display:flex; align-items:center; gap:.5rem; }
.sel-sm,.inp-sm { width:auto; font-size:.8rem; padding:.35rem .6rem; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; padding:1rem; }
.stat-card.accent { border-color:var(--acc-d); background:rgba(0,144,80,.05); }
.stat-lbl  { font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mut); margin-bottom:.4rem; }
.stat-val  { font-size:2rem; font-weight:700; line-height:1; }
.stat-unit { font-size:.65rem; color:var(--mut); margin-top:.15rem; }

/* ── Dashboard ──────────────────────────────────────────────── */
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.chart-card { background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; padding:1.2rem; }
.chart-card h3 { font-family:'Barlow Condensed',sans-serif; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:.9rem; }
.dash-map-card { background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; overflow:hidden; margin-bottom:1.5rem; }
.dash-map-hdr  { padding:.75rem 1.2rem; border-bottom:1px solid var(--bdr); }
.dash-map-hdr h3 { font-family:'Barlow Condensed',sans-serif; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:.3rem; }
.last-act-stats { display:flex; gap:.75rem; font-size:.75rem; color:var(--mut); flex-wrap:wrap; }
.last-act-stats span { color:var(--txt); font-weight:700; }
#dashboard-map { height:260px; min-height:200px; position:relative; }
.recent-wrap  { margin-bottom:1rem; }
.section-title { font-family:'Barlow Condensed',sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:.75rem; }

/* ── Activity list items ────────────────────────────────────── */
.act-list { display:flex; flex-direction:column; gap:.5rem; }
.act-item { display:flex; align-items:center; gap:.65rem; background:var(--sfc); border:1px solid var(--bdr); border-radius:8px; padding:.7rem .9rem; cursor:pointer; transition:all .15s; user-select:none; }
.act-item:hover,.act-item.selected,.act-item.active { border-color:var(--acc); background:rgba(0,144,80,.04); }
.act-type-icon { width:36px; height:36px; border-radius:6px; background:var(--sfc2); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.act-info { flex:1; min-width:0; }
.act-name { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-date { font-size:.67rem; color:var(--mut); margin-top:.1rem; }
.act-stats { display:flex; gap:.5rem; font-size:.72rem; color:var(--mut); flex-wrap:wrap; margin-top:.2rem; }
.act-stat-val { color:var(--txt); font-weight:600; }

/* ── TRACK VIEW ─────────────────────────────────────────────
   CRITICAL RULES:
   1. NO display property here — JS sets display:flex via switchView()
   2. position:relative — so fin-overlay (position:absolute) stays inside
   3. On desktop: height:100% fills #main-content exactly
   4. On mobile: .active overrides with position:fixed
*/
.track-view {
  /* NO display — controlled by JS */
  flex-direction:column;
  overflow:hidden;
  height:100%;          /* fills #main-content height on desktop */
  position:relative;    /* contains fin-overlay */
  padding:0!important;
}

#track-map { flex:1; background:var(--sfc2); min-height:200px; }

.track-panel { flex-shrink:0; background:var(--sfc); border-top:1px solid var(--bdr); }
.track-metrics { display:flex; align-items:center; padding:.65rem 1rem; border-bottom:1px solid var(--bdr); }
.metric { text-align:center; flex:1; }
.mval  { font-size:1.8rem; font-weight:700; line-height:1.1; }
.mlbl  { font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mut); }
.msep  { width:1px; height:34px; background:var(--bdr); margin:0 .4rem; flex-shrink:0; }
.track-timebar { display:flex; justify-content:space-between; padding:.2rem 1rem; font-size:.7rem; color:var(--mut); border-bottom:1px solid var(--bdr); }
.track-controls { padding:.75rem 1rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.type-row { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:center; }
.type-btn { padding:.28rem .7rem; border-radius:20px; font-size:.73rem; color:var(--mut); border:1px solid var(--bdr); transition:all .15s; cursor:pointer; background:transparent; font-family:inherit; }
.type-btn.active { color:var(--acc); border-color:var(--acc); background:rgba(0,144,80,.1); }
.ctrl-row { display:flex; gap:1.2rem; align-items:center; justify-content:center; }
.gps-status { font-size:.7rem; letter-spacing:.06em; color:var(--mut); display:flex; align-items:center; gap:.4rem; }
.gps-dot { width:7px; height:7px; border-radius:50%; background:var(--dim); flex-shrink:0; display:inline-block; animation:gpspulse 1.5s ease-in-out infinite; }
.gps-dot.good { background:var(--acc); animation:none; }
.gps-dot.poor { background:#ffd700; animation:none; }
@keyframes gpspulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* Track buttons */
.trk-btn {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem;
  width:130px; height:130px; border-radius:50%;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.1em; text-transform:uppercase;
  border:none; cursor:pointer; transition:all .15s;
  box-shadow:0 0 0 4px var(--sfc2),0 0 0 6px var(--bdr); flex-shrink:0;
}
.trk-btn svg { width:24px; height:24px; }
.btn-start { background:var(--acc); color:#000; }
.btn-start:hover { filter:brightness(1.08); }
.btn-pause { background:#ff5f1f; color:#fff; }
.btn-pause:hover { filter:brightness(1.08); }
.btn-stop  { background:var(--red); color:#fff; }
.btn-stop:hover  { filter:brightness(1.08); }

/* Finish dialog — position:absolute inside position:relative .track-view
   z-index:3000 — above Leaflet controls (400), sidebar (2002), header (2000) */
.fin-overlay {
  position:absolute; inset:0; z-index:3000;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.75);
}
.fin-card { background:var(--sfc); border-radius:14px 14px 0 0; padding:1.5rem; width:100%; max-width:500px; }
.fin-card h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.75rem; }
.fin-summary { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; font-size:.85rem; }
.fin-summary span { color:var(--acc); font-weight:700; }
.fin-row { display:flex; gap:.75rem; justify-content:flex-end; margin-top:.75rem; }
textarea { resize:vertical; }

/* ── History ────────────────────────────────────────────────── */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.pagination  { display:flex; gap:.4rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.page-btn { width:32px; height:32px; border-radius:6px; font-size:.78rem; background:var(--sfc); border:1px solid var(--bdr); color:var(--mut); cursor:pointer; transition:all .15s; font-family:inherit; }
.page-btn.active,.page-btn:hover { border-color:var(--acc); color:var(--acc); }
.hist-layout { display:grid; grid-template-columns:300px 1fr; gap:1rem; align-items:start; }
.hist-list-col { display:flex; flex-direction:column; }
.detail-pane { background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; overflow:hidden; min-height:400px; position:sticky; top:1rem; max-height:calc(100vh - 100px); display:flex; flex-direction:column; }
.pane-empty  { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; color:var(--mut); opacity:.45; padding:2rem; }
.pane-empty p { font-size:.82rem; }
.pane-hdr    { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-bottom:1px solid var(--bdr); gap:.5rem; flex-wrap:wrap; flex-shrink:0; }
.pane-title  { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.88rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pane-acts   { display:flex; gap:.3rem; flex-shrink:0; }
#btn-close-pane { display:none; }
.panel-map   { height:240px; flex-shrink:0; background:var(--sfc2); }
.panel-stats { padding:.9rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; overflow-y:auto; }
.panel-stat  { background:var(--sfc2); border:1px solid var(--bdr); border-radius:6px; padding:.65rem; }
.panel-stat-label { font-size:.57rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:.25rem; }
.panel-stat-value { font-size:1.05rem; font-weight:700; }
.ctx-menu { position:fixed; z-index:5000; background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; box-shadow:var(--shad); min-width:190px; overflow:hidden; }
.ctx-item  { display:block; width:100%; padding:.85rem 1.2rem; text-align:left; font-size:.85rem; color:var(--txt); transition:background .15s; cursor:pointer; background:transparent; border:none; font-family:inherit; }
.ctx-item:hover { background:var(--sfc2); }
.ctx-danger { color:var(--red); }

/* ── Profile ────────────────────────────────────────────────── */
.profile-banner { display:flex; align-items:center; gap:1.25rem; background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; padding:1.4rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.av-wrap { position:relative; flex-shrink:0; }
.av-ini  { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--acc-d),var(--acc)); color:#000; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:900; font-family:'Barlow Condensed',sans-serif; }
.av-cam  { position:absolute; bottom:-2px; right:-2px; width:24px; height:24px; border-radius:50%; background:#ff5f1f; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid var(--sfc); transition:transform .15s; }
.av-cam:hover { transform:scale(1.1); }
.av-cam svg { stroke:#fff; }
.profile-info   { flex:1; min-width:0; }
.profile-name   { font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; word-break:break-all; }
.profile-meta   { font-size:.72rem; color:var(--mut); margin-top:.2rem; word-break:break-all; }
.profile-streak { text-align:center; flex-shrink:0; }
.streak-val { font-size:2rem; font-weight:700; color:#ff5f1f; line-height:1; }
.streak-lbl { font-size:.62rem; color:var(--mut); letter-spacing:.1em; text-transform:uppercase; }
.scard { background:var(--sfc); border:1px solid var(--bdr); border-radius:10px; padding:1.2rem; margin-bottom:1rem; }
.scard h3 { font-family:'Barlow Condensed',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-bottom:.9rem; padding-bottom:.55rem; border-bottom:1px solid var(--bdr); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.danger-zone { border-color:rgba(212,43,74,.3); }
.danger-zone h3 { color:var(--red); }
.danger-zone p  { font-size:.8rem; color:var(--mut); margin-bottom:1rem; }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1rem; z-index:9999; display:flex; flex-direction:column; gap:.45rem; pointer-events:none; max-width:300px; }
.toast { padding:.65rem .95rem; border-radius:6px; font-size:.8rem; background:var(--sfc); border:1px solid var(--bdr); box-shadow:var(--shad); animation:tin .2s ease,tout .3s ease 2.7s forwards; pointer-events:all; }
.toast.success { border-color:var(--acc); color:var(--acc); }
.toast.error   { border-color:var(--red); color:var(--red); }
.toast.info    { border-color:var(--info); color:var(--info); }
@keyframes tin  { from{transform:translateX(20px);opacity:0} to{transform:none;opacity:1} }
@keyframes tout { to{opacity:0;transform:translateX(20px)} }
.install-banner { position:fixed; bottom:0; left:0; right:0; z-index:8000; background:var(--sfc2); border-top:1px solid var(--acc-d); padding:.7rem 1rem; display:flex; align-items:center; gap:.75rem; font-size:.8rem; }
.install-banner span { flex:1; }

/* ── Leaflet ────────────────────────────────────────────────── */
.leaflet-container { background:#1a1a24!important; font-family:'JetBrains Mono',monospace!important; }
[data-theme="light"] .leaflet-container { background:#dce8f0!important; }
[data-theme="dark"] .leaflet-tile-pane { filter:brightness(.85) saturate(.7); }
.leaflet-control-zoom a { background:var(--sfc)!important; color:var(--txt)!important; border-color:var(--bdr)!important; }
.leaflet-top,.leaflet-bottom { z-index:400!important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥769px
   - body overflow:hidden so layout fills viewport exactly
   - #main-content is flex:1 overflow-y:auto — scrolls independently
   - track-view fills 100% of #main-content
══════════════════════════════════════════════════════════════ */
@media(min-width:769px) {
  html,body { height:100%; overflow:hidden; }
  #app-screen { height:100vh; height:100dvh; overflow:hidden; }
  #mobile-header { display:none!important; }
  #nav-overlay   { display:none!important; }
  /* Main content scrolls, but track view must fill it exactly */
  #main-content { height:100vh; height:100dvh; overflow-y:auto; position:relative; }
  /* When track is active on desktop, prevent main-content from scrolling */
  #main-content.track-active { overflow:hidden; }
  .stat-val { font-size:2.2rem; }
  #dashboard-map { height:300px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE <769px
══════════════════════════════════════════════════════════════ */
@media(max-width:768px) {
  #mobile-header { display:flex; }
  #app-screen { flex-direction:column; min-height:100vh; min-height:100dvh; }
  #sidebar { position:fixed; top:0; left:0; bottom:0; height:100%; transform:translateX(-100%); width:260px; min-width:0; }
  #sidebar.open { transform:translateX(0); }
  #main-content { padding-top:var(--hh); overflow-y:auto; min-height:100vh; min-height:100dvh; }
  .view { padding:.9rem; }

  /* Track: fixed full-screen when active — above everything */
  .track-view.active {
    position:fixed!important;
    top:var(--hh)!important;
    left:0!important; right:0!important; bottom:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:2500!important;
    padding:0!important;
  }
  /* On mobile, fin-overlay must also be fixed (track-view is fixed, so absolute works) */
  .fin-overlay { position:fixed!important; z-index:3000!important; }

  .trk-btn { width:108px; height:108px; font-size:.82rem; }
  .trk-btn svg { width:20px; height:20px; }
  .mval { font-size:1.4rem; }
  .mlbl { font-size:.54rem; }
  .track-controls { padding:.5rem .75rem .85rem; gap:.5rem; }
  .track-metrics  { padding:.5rem .75rem; }
  .track-timebar  { padding:.18rem .75rem; }

  .stat-grid { grid-template-columns:repeat(2,1fr); gap:.65rem; margin-bottom:1rem; }
  .stat-val  { font-size:1.65rem; }
  .stat-card { padding:.9rem; }
  .chart-grid { grid-template-columns:1fr; gap:.75rem; }
  #dashboard-map { height:190px; }

  .hist-layout { grid-template-columns:1fr; }
  .detail-pane {
    position:fixed!important;
    top:var(--hh); left:0; right:0; bottom:0;
    transform:translateX(100%);
    transition:transform .28s ease;
    border-radius:0; min-height:0; max-height:none;
    z-index:500; pointer-events:none;
  }
  .detail-pane.open { transform:translateX(0); pointer-events:auto; }
  #btn-close-pane { display:inline-flex; }
  .panel-map { height:200px!important; }
  .panel-stats { grid-template-columns:repeat(2,1fr); gap:.5rem; padding:.75rem; }

  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar .btn,.sel-sm,.inp-sm { width:100%; }

  .profile-banner { flex-direction:column; align-items:center; text-align:center; padding:1.1rem; }
  .profile-info { width:100%; }
  .form-row { grid-template-columns:1fr; }
  .scard { padding:1rem; }
  .view-hdr { margin-bottom:1rem; }
  #toast-container { right:.5rem; bottom:.75rem; max-width:calc(100vw - 1rem); }
}

@media(max-width:380px) {
  .trk-btn { width:96px; height:96px; font-size:.75rem; }
  .stat-val { font-size:1.4rem; }
  .mval     { font-size:1.25rem; }
  .type-btn { padding:.22rem .55rem; font-size:.67rem; }
}