/* ── Dashboard layout ─────────────────────────────────────────
   Structure only — app.css loads after this and overrides palette/glass
   tokens plus any geometry it needs to change. */

body.proto-v2 { overflow: hidden; }

/* Read by Dashboard._occlusionPadding() (shell.js) so a flyTo doesn't
   land a just-selected trail under the drawer/detail panel. A variant
   with different chrome geometry overrides these in its own stylesheet. */
body.proto-v2 {
  --occlusion-left: 332px;
  --occlusion-top: 90px;
  --occlusion-right: 70px;
  --occlusion-bottom: 248px;
}
body.proto-v2.drawer-collapsed { --occlusion-left: 40px; }

#map { position: fixed; inset: 0; touch-action: none; }
.leaflet-control-attribution { display: none; }

/* ── Map controls (zoom + recenter), added by Dashboard ──────── */
.leaflet-top.leaflet-right { margin-top: 90px; margin-right: 16px; }
/* Bottom-left (controlsPosition: 'bottomleft'): offset is a CSS variable
   so it tracks the drawer's width and collapsed/expanded state. */
.leaflet-bottom.leaflet-left {
  margin-left: var(--controls-left-offset, 16px);
  margin-bottom: 16px;
  transition: margin-left 0.42s var(--ease-out);
}
.leaflet-control-zoom { border: none !important; box-shadow: none !important; margin-bottom: 8px !important; }
.leaflet-control-zoom a {
  width: 32px !important; height: 32px !important; line-height: 32px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color: var(--ink-2) !important;
  border: 1px solid var(--glass-border) !important;
  font-size: 19.3px !important;
  transition: background 0.12s, color 0.12s !important;
}
.leaflet-control-zoom a:hover { color: var(--ink) !important; }
.leaflet-control-zoom-in { border-radius: 10px 10px 0 0 !important; }
.leaflet-control-zoom-out { border-radius: 0 0 10px 10px !important; }
.leaflet-control-recenter { border: none !important; box-shadow: none !important; clear: both !important; }
.leaflet-control-recenter a {
  display: flex !important; align-items: center; justify-content: center;
  width: 32px !important; height: 32px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  color: var(--ink-2) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: color 0.12s !important;
}
.leaflet-control-recenter a:hover { color: var(--ink) !important; }

/* Leaflet positions this element via its own inline transform — a CSS
   transform for hover would fight it and silently lose, so hover uses
   filter/opacity instead. */
.start-pin { background: none !important; border: none !important; transition: filter 0.15s ease, opacity 0.2s ease; }
.start-pin:hover { filter: brightness(1.25) drop-shadow(0 2px 4px rgba(0,0,0,0.35)); opacity: 1 !important; }
.leaflet-tooltip {
  background: var(--glass-bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(var(--glass-blur));
  font-family: var(--body) !important;
  padding: 8px 12px !important;
}
.leaflet-tooltip-top::before { border-top-color: var(--glass-border) !important; }

/* ── Topbar ───────────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 15.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  flex-shrink: 0;
}
.brand svg { width: 18px; height: 18px; color: var(--accent); }

.clear-filters-btn {
  flex-shrink: 0;
  padding: 8px 13px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  color: var(--ink-3);
  font-family: var(--body); font-size: 13.9px; font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.clear-filters-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Left drawer ──────────────────────────────────────────── */
.drawer {
  position: fixed;
  top: 86px; left: 16px; bottom: 16px;
  width: 300px;
  padding: 8px;
  z-index: 1000;
  transition: transform 0.42s var(--ease-out), opacity 0.3s;
}
body.drawer-collapsed .drawer { transform: translateX(calc(-100% - 28px)); opacity: 0; pointer-events: none; }

.drawer-toggle {
  position: fixed; top: 106px; left: 332px; z-index: 1001;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer; border: none;
  transition: left 0.42s var(--ease-out), color 0.15s;
}
.drawer-toggle:hover { color: var(--ink); }
.drawer-toggle svg { transition: transform 0.42s var(--ease-out); }
body.drawer-collapsed .drawer-toggle { left: 16px; }
body.drawer-collapsed .drawer-toggle svg { transform: rotate(180deg); }

.activity-list {
  list-style: none;
  height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}

.activity-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.activity-item:hover { background: var(--row-hover-bg, rgba(0,0,0,0.035)); }
.activity-item.linked { background: var(--row-hover-bg, rgba(0,0,0,0.045)); }

/* Selection uses the app's own accent, deliberately, not the sport's
   own colour — a Ride activity's indigo previously borrowed the left
   border and read as a stray focus ring rather than a chosen state. */
.activity-item.selected {
  background: var(--select-bg, rgba(196,69,53,0.10));
}
.activity-item.selected::before {
  content: '';
  position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: var(--accent);
}

.activity-thumb {
  position: relative;
  width: 38px; height: 38px; flex-shrink: 0;
  color: var(--item-color, var(--ink-3));
  background: var(--thumb-bg, rgba(0,0,0,0.03));
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.activity-thumb svg { width: 88%; height: 88%; }
/* Pulled further outside the box (vs. sitting just inside it) so the badge
   only clips its own corner, not the route drawn underneath — the route's
   own padding keeps it off the edges, but a wide-flat shape can still reach
   into the corners the badge used to sit inside. */
.activity-emoji {
  position: absolute; right: -6px; bottom: -6px;
  font-size: 14.4px; line-height: 1;
  background: var(--glass-bg);
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.activity-body { min-width: 0; flex: 1; }
.activity-name {
  font-size: 15px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-meta { font-size: 12.8px; color: var(--ink-3); margin-top: 3px; display: flex; gap: 8px; }

/* ── Proximity hover label ───────────────────────────────────*/
.hover-label {
  position: fixed; z-index: 1700;
  padding: 8px 13px;
  font-size: 14.4px;
  pointer-events: none;
  opacity: 0;
  transform: translate(14px, -50%) scale(0.96);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
  white-space: nowrap;
}
.hover-label.show { opacity: 1; transform: translate(14px, -50%) scale(1); }
.hover-label .hl-name { font-weight: 700; color: var(--ink); }
.hover-label .hl-meta { color: var(--ink-3); font-size: 12.8px; margin-top: 2px; }

/* ── Detail panel — hidden at rest, appears only on selection ─*/
.detail-panel {
  position: fixed;
  left: 332px; right: 16px; bottom: 16px;
  height: 216px;
  z-index: 1400;
  padding: 18px 24px 14px;
  display: flex; flex-direction: column;
  transform: translateY(calc(100% + 60px)) scale(0.98);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.35s var(--ease-out), left 0.42s var(--ease-out);
  pointer-events: none;
}
.detail-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
body.drawer-collapsed .detail-panel { left: 16px; }

.detail-top { display: flex; align-items: center; gap: 22px; }
.detail-id { min-width: 0; }
.detail-title {
  font-family: var(--serif); font-style: italic; font-size: 22.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.detail-date { font-family: var(--label); font-size: 12.3px; color: var(--ink-3); margin-top: 4px; }

.detail-stats { display: flex; gap: 20px; flex-shrink: 0; }
.detail-stats .dstat { text-align: center; }
.detail-stats .dstat-v { font-size: 19.3px; font-weight: 700; color: var(--ink); }
.detail-stats .dstat-l { font-size: 11.8px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* Replay and Close as one group, Replay first — replaces the earlier
   layout where Close was absolutely positioned over Replay's
   margin-left:auto slot and the two collided in the top-right corner. */
.detail-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}

.replay-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--paper);
  border: none; border-radius: 20px;
  font-family: var(--label); font-size: 12.8px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.replay-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.replay-btn:active { transform: translateY(0); }

.detail-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--ink-2); cursor: pointer; font-size: 14.4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s;
}
.detail-close:hover { color: var(--ink); }

.detail-chart-wrap { flex: 1; min-height: 0; }
#detail-chart { width: 100%; height: 100%; cursor: crosshair; }

@media (max-width: 980px) {
  .drawer { width: min(280px, calc(100vw - 32px)); }
  .drawer-toggle { left: 312px; }
  .detail-panel { left: 312px; }
  body.drawer-collapsed .detail-panel { left: 16px; }
}