/* ==========================================================
   Cascais Sweep — styles
   ========================================================== */


/* ---------- 1. Colours (CSS variables) ----------
   Change a colour here and it changes across the whole site.
   Usage: color: var(--text);                             */
:root {
  /* backgrounds and lines */
  --surface: #fcfcfb;   /* page background */
  --panel:   #ffffff;   /* side panel background */
  --line:    #e6e5e1;   /* thin dividers */
  --soft:    #f3f2ef;   /* tiles and notes background */

  /* text */
  --text:   #0b0b0b;    /* primary */
  --text-2: #52514e;    /* secondary */
  --muted:  #8a8984;    /* faintest (h2 headings) */

  /* accents */
  --blue:   #2a78d6;    /* stations, links */
  --orange: #eb6834;
  --aqua:   #1baf7a;

  /* how long a vehicle has been abandoned: 2–4 h / 4–8 h / 8+ h */
  --sev1: #eda100;
  --sev2: #eb6834;
  --sev3: #e34948;

  --route: #0d366b;     /* route line */
}


/* ---------- 2. Page base ---------- */
* {
  box-sizing: border-box;   /* width includes padding and border */
}

html,
body {
  height: 100%;
  margin: 0;
}

/* page = two-column grid: 380px panel on the left, map on the right */
body {
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--surface);
  display: grid;
  grid-template-columns: 380px 1fr;
}


/* ---------- 3. Side panel and map ---------- */
#side {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;          /* the panel scrolls, the map does not */
  display: flex;
  flex-direction: column;
}

#map {
  height: 100%;
}

/* OpenStreetMap tiles are colourful: make them light grey so our data stands out */
.leaflet-tile-pane {
  filter: grayscale(1) brightness(1.05) contrast(0.9);
}


/* ---------- 4. Header ---------- */
header {
  padding: 16px 18px 10px;
}

header h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: -.01em;
}

header p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
}


/* ---------- 5. Tabs ---------- */
nav {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

nav button {
  border: 0;
  background: none;
  padding: 9px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

/* active tab: JS adds the .on class */
nav button.on {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

/* tab content is hidden until it gets the .on class */
section {
  padding: 14px 18px 22px;
  display: none;
}

section.on {
  display: block;
}


/* ---------- 6. Section headings ---------- */
h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 18px 0 8px;
  font-weight: 600;
}

h2:first-child {
  margin-top: 4px;
}


/* ---------- 7. Big "abandoned now" number ---------- */
.hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero b {
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
}

.hero span {
  color: var(--text-2);
}


/* ---------- 8. Number tiles (km, run time) ---------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two per row */
  gap: 8px;
  margin-top: 10px;
}

.tile {
  background: var(--soft);
  border-radius: 10px;
  padding: 9px 11px;
}

.tile b {
  display: block;
  font-size: 20px;
}

.tile small {
  color: var(--text-2);
  font-size: 12px;
}

.tile.good b {
  color: #127a4f;                   /* green = "saved" */
}


/* ---------- 9. Controls: sliders, buttons, selects ---------- */
input[type=range] {
  width: 100%;
  margin: 12px 0 6px;
  accent-color: var(--text);
}

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

button.btn,
select {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 6px 11px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

button.btn.primary {                /* black Play button */
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.when {                             /* date and time next to the slider */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ---------- 10. Small text and legend ---------- */
.muted {
  color: var(--text-2);
  font-size: 12.5px;
}

.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 8px;
}

.dot {                              /* coloured dot in the legend */
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: -1px;
}


/* ---------- 11. Priorities (weight sliders) ---------- */
.weights label {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
}

.weights b {                        /* weight value on the right */
  color: var(--text);
  float: right;
  font-variant-numeric: tabular-nums;
}

.weights input {
  margin: 4px 0 2px;
}

.weights select {
  width: 100%;
  margin: 4px 0 2px;
}

/* ---------- 12. Route stop list ---------- */
ol.stops {
  margin: 6px 0 0;
  padding-left: 22px;
  max-height: 220px;
  overflow: auto;
  font-size: 13px;
}

ol.stops li {
  padding: 2px 0;
}

ol.stops a {
  color: var(--blue);
  text-decoration: none;
}

.loopname {                         /* "Run 1 · 18 vehicles · 12 km" */
  font-weight: 600;
  margin-top: 8px;
  font-size: 12.5px;
}

.stop-num {                         /* 1, 2, 3... next to each stop on the map */
  width: 18px;
  height: 18px;
  background: var(--route);          /* overridden per run in collection.js */
  color: #fff;
  font: 700 10px/15px system-ui, sans-serif;
  text-align: center;
  border-radius: 9px;
  border: 1.5px solid #fff;
}

.loopname.skipped {                 /* "Skipped run 3 · ..." */
  color: var(--muted);
  font-weight: 500;
}

.warn {                             /* "not worth it" in Collect all mode */
  color: var(--orange);
}

.dot.skip-dot {                     /* legend: white dot with a grey dashed border */
  background: #fff;
  border: 1.5px dashed #8a8984;
}

#compare table {
  margin-top: 4px;
}

tr.diff td {
  color: var(--text-2);
  font-size: 12px;
}

/* ---------- 13. Scenario table and notes (Impact tab) ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: right;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  color: var(--text-2);
  font-weight: 500;
  font-size: 12px;
}

tr.pick td {                        /* highlighted "our route" row */
  background: #eef5fd;
}

.note {
  background: var(--soft);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 12px;
}

.note b {
  color: var(--text);
}


/* ---------- 14. Depot icon on the map ----------
   Dark rounded square with a white warehouse drawn in SVG (see map.js) */
.depot-icon {
  background: var(--text);
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;              /* centre the SVG inside the square */
}

.depot-icon svg {
  width: 16px;
  height: 16px;
}


/* ---------- 15. Phone: map on top, panel below ---------- */
@media (max-width: 820px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 55vh 1fr;
  }

  #map  { grid-row: 1; }
  #side { grid-row: 2; }
}