/* ============================================================
   Results page — full track & log
   Extends the tokens defined in style.css
   ============================================================ */

html.results-page, body.results-page {
  height: auto;
  overflow: visible;
}

/* The base stylesheet locks <html> itself to overflow:hidden/height:100% for the
   single-viewport live tracker. This stylesheet is now loaded both on the
   standalone results page AND on index.html (where the live tracker fills the
   first 100vh and this section sits below it), so unlock scrolling
   unconditionally here rather than gating on a page class. */
html, body {
  height: auto;
  overflow-x: hidden;  /* the full-bleed accent line above the results title uses 100vw */
  overflow-y: visible;
  scroll-behavior: smooth;
}

#results-app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ── Header ─────────────────────────────────────────────────── */
.results-header {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Full-bleed accent bar: spans the entire browser width edge-to-edge via
   the 100vw trick, sitting directly above the title with a small fixed gap. */
.results-header-accent {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  margin-bottom: 16px;
}

.results-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.back-link {
  margin-bottom: 0;
}

.results-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 10px 0 4px;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0;
}

/* "Missing Fixes" / "Track Gaps" call out data-quality issues, not
   performance numbers — give them the warning color instead of accent. */
#stat-missing, #stat-gaps {
  color: var(--accent2);
}

.stat {
  background: var(--surface2);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Map ────────────────────────────────────────────────────── */
#results-map-wrap {
  position: relative;
  height: 65vh;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

#results-map {
  width: 100%;
  height: 100%;
}

.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 500;
  background: rgba(17, 23, 32, 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(4px);
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.legend-title {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text);
}

.legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

/* Solid bar swatch for route-leg legend entries (Outbound / Return) */
.legend-item i.legend-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

/* Dashed-line swatch for the "Data gap" legend entry */
.legend-item i.legend-dash {
  width: 16px;
  height: 0;
  border-radius: 0;
  border-top: 2px dashed #ff6b35;
}

/* Diamond swatch for the "Trend begins" legend entry */
.legend-item i.legend-diamond {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #ff6b35;
  transform: rotate(45deg);
}

.highlight-marker { background: transparent; border: none; }

/* Table cell shown in place of lat/lon when a row has no GPS fix */
.missing-fix {
  color: var(--accent2);
  font-style: italic;
}

.load-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--danger);
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ── Table panel ────────────────────────────────────────────── */
#table-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.table-header h2 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-range {
  font-size: 11px;
  color: var(--muted);
}

.page-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--display);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.table-scroll {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
}

#log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

#log-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

#log-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

#log-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}

#log-table tbody tr:hover {
  background: rgba(0, 200, 255, 0.06);
}

#log-table tbody tr.row-stale-gps td:first-child {
  box-shadow: inset 3px 0 0 var(--accent2);
}

#log-table tbody td.row-idx {
  color: var(--muted);
}

#log-table tbody td.err-cell.has-error {
  color: var(--danger);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
  #results-map-wrap { height: 50vh; }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .results-header h1 { font-size: 22px; }
}