UI: top-band layout + bottom trip dock + multi-select filters + always-on tint

Restructure:
  - FLEET NOW tiles + SLOs + Filters in a horizontal top band; full-width map
  - Trip panel moved to a bottom dock that slides up; trips render as a
    horizontally-scrollable card strip instead of a vertical right-panel list

Multi-select filter widgets:
  - cost_centre + assigned_city are now dropdowns with an "All …" toggle
    and per-option checkboxes
  - cost_centre options carry a colour swatch matching the marker tint —
    the filter doubles as a live colour legend
  - Server-side filter still applies when exactly one option is picked;
    multi-selection within a widget is narrowed client-side via setFilter
    so the existing serve.fn_live_view contract is unchanged

Cost-centre tint always visible:
  - circle-color now uses cost_centre_color unconditionally
  - operational_state is shown via opacity (moving=1.0 / parked=0.7 /
    offline=0.35), keeping colour as a stable identity cue

applyClientFilter() is a new exported helper called by the page after
each refresh to narrow markers by multi-selection state.

web/fleet-core.js

@@ -141,7 +141,17 @@ export function initMap(elementId, opts = {}) {
           15, 13,
           18, 20,
         ],
-        'circle-color': ['get', 'marker_color'],
+        // Always tint by cost-centre colour — operational state is shown
+        // via opacity (moving=1, parked=0.7, offline=0.35) so colour stays
+        // a stable identity cue and the filter dropdown can double as a
+        // colour legend.
+        'circle-color': ['coalesce', ['get', 'cost_centre_color'], '#94a3b8'],
+        'circle-opacity': [
+          'case',
+          ['==', ['get', 'operational_state'], 'moving'], 1.0,
+          ['==', ['get', 'operational_state'], 'parked'], 0.7,
+          0.35,
+        ],
         'circle-stroke-color': '#0b1220',
         'circle-stroke-width': [
           'interpolate', ['linear'], ['zoom'],
@@ -319,7 +329,7 @@ function _renderSummary(root, summary) {
     { label: 'Moving',  value: summary.moving ?? '—' },
     { label: 'Parked',  value: summary.parked ?? '—' },
     { label: 'Offline', value: summary.offline ?? '—' },
-    { label: 'Below freshness SLO', value: summary.below_freshness_slo ?? '—' },
+    { label: 'Stale',   value: summary.below_freshness_slo ?? '—' },
   ];
   root.innerHTML = tiles
     .map(t => `
@@ -348,17 +358,197 @@ function _renderSlos(root, slos) {
   }).join('');
 }
 
-/* ---------- filters ---------- */
+/* ---------- filters (multi-select dropdowns) ---------- */
 
-export function initFilters(formEl, onChange) {
+/**
-  const handler = () => {
+ * Wire the cost-centre + assigned-city filter widgets.
-    const fd = new FormData(formEl);
+ *
+ * Returns an `updateOptions(features)` callback that the caller invokes
+ * after each /api/views/live refresh — the widgets repopulate from the
+ * loaded feature properties, so we don't need a separate enum endpoint.
+ *
+ * The widget itself is a button that toggles a popover. The popover has
+ * an "All …" checkbox at the top and a checkbox per distinct value.
+ * `cost_centre_color` from the feature is rendered as a swatch beside the
+ * cost-centre options — turning the filter into a live colour legend.
+ *
+ * onChange receives a flat filter object compatible with serve.fn_live_view:
+ *   { cost_centre: 'isp', assigned_city: 'Nairobi' }   ← single select OR
+ *   no key                                              ← when "All" picked
+ *
+ * Multiple selections within one widget collapse to the first value (the
+ * SQL function takes one) — we treat additional selections client-side
+ * as an OR by sending no filter and letting the renderer hide the rest.
+ * That keeps the SQL contract unchanged for P1.
+ */
+export function initFilters(root, onChange) {
+  const ccWidget = _buildMultiSelect(
+    root.querySelector('#flt-cost-centre'),
+    { label: 'cost centre', plural: 'cost centres', showSwatch: true },
+  );
+  const cityWidget = _buildMultiSelect(
+    root.querySelector('#flt-assigned-city'),
+    { label: 'assigned city', plural: 'cities', showSwatch: false },
+  );
+
+  const emit = () => {
     const filters = {};
-    for (const [k, v] of fd.entries()) if (v) filters[k] = v;
+    const cc = ccWidget.getValues();
-    onChange(filters);
+    const city = cityWidget.getValues();
+    if (cc.length === 1) filters.cost_centre = cc[0];
+    if (city.length === 1) filters.assigned_city = city[0];
+    // For multi-selection client-side narrowing, stash so renderer can filter
+    onChange(filters, { costCentres: cc, cities: city });
   };
-  formEl.addEventListener('change', handler);
+
-  formEl.addEventListener('submit', (e) => { e.preventDefault(); handler(); });
+  ccWidget.onChange(emit);
+  cityWidget.onChange(emit);
+
+  return {
+    updateOptions(features) {
+      const cc = new Map();
+      const city = new Set();
+      for (const f of features) {
+        const p = f.properties || {};
+        if (p.cost_centre) cc.set(p.cost_centre, p.cost_centre_color || '#94a3b8');
+        if (p.assigned_city) city.add(p.assigned_city);
+      }
+      ccWidget.setOptions([...cc.entries()].sort()
+        .map(([value, color]) => ({ value, color })));
+      cityWidget.setOptions([...city].sort()
+        .map(value => ({ value })));
+    },
+    getActive() {
+      return { costCentres: ccWidget.getValues(), cities: cityWidget.getValues() };
+    },
+  };
+}
+
+function _buildMultiSelect(root, { label, plural, showSwatch }) {
+  // root is a <div> we own. Render: a button + a hidden popover.
+  root.classList.add('ms');
+  root.innerHTML = `
+    <button type="button" class="ms-btn" aria-haspopup="listbox" aria-expanded="false">
+      <span class="ms-btn-label">All ${plural}</span>
+      <span class="ms-caret">▾</span>
+    </button>
+    <div class="ms-pop" role="listbox" hidden>
+      <label class="ms-row ms-row-all">
+        <input type="checkbox" class="ms-all" checked />
+        <span>All ${plural}</span>
+      </label>
+      <div class="ms-options"></div>
+    </div>
+  `;
+  const btn = root.querySelector('.ms-btn');
+  const btnLabel = root.querySelector('.ms-btn-label');
+  const pop = root.querySelector('.ms-pop');
+  const allBox = root.querySelector('.ms-all');
+  const optsRoot = root.querySelector('.ms-options');
+
+  const listeners = [];
+  let options = []; // [{value, color?}]
+
+  const updateLabel = () => {
+    const checked = [...optsRoot.querySelectorAll('input:checked')];
+    if (checked.length === 0 || checked.length === options.length) {
+      btnLabel.textContent = `All ${plural}`;
+      allBox.checked = true;
+    } else if (checked.length === 1) {
+      btnLabel.textContent = checked[0].value;
+      allBox.checked = false;
+    } else {
+      btnLabel.textContent = `${checked.length} ${plural}`;
+      allBox.checked = false;
+    }
+  };
+  const fire = () => listeners.forEach(fn => fn());
+
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const open = pop.hasAttribute('hidden');
+    if (open) {
+      pop.removeAttribute('hidden');
+      btn.setAttribute('aria-expanded', 'true');
+    } else {
+      pop.setAttribute('hidden', '');
+      btn.setAttribute('aria-expanded', 'false');
+    }
+  });
+  document.addEventListener('click', (e) => {
+    if (!root.contains(e.target) && !pop.hasAttribute('hidden')) {
+      pop.setAttribute('hidden', '');
+      btn.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  allBox.addEventListener('change', () => {
+    const checked = allBox.checked;
+    optsRoot.querySelectorAll('input').forEach(cb => { cb.checked = checked; });
+    if (!checked) allBox.checked = false; // "All" un-check = clear
+    updateLabel();
+    fire();
+  });
+
+  return {
+    setOptions(opts) {
+      options = opts;
+      // Preserve current selections by value when re-rendering
+      const prevChecked = new Set(
+        [...optsRoot.querySelectorAll('input:checked')].map(cb => cb.value),
+      );
+      const wasAll = prevChecked.size === 0 || allBox.checked;
+      optsRoot.innerHTML = opts.map(({ value, color }) => `
+        <label class="ms-row">
+          <input type="checkbox" value="${_esc(value)}" ${wasAll || prevChecked.has(value) ? 'checked' : ''} />
+          ${showSwatch && color ? `<span class="ms-swatch" style="background:${_esc(color)}"></span>` : ''}
+          <span class="ms-row-label">${_esc(value)}</span>
+        </label>
+      `).join('');
+      optsRoot.querySelectorAll('input').forEach(cb => {
+        cb.addEventListener('change', () => { updateLabel(); fire(); });
+      });
+      updateLabel();
+    },
+    getValues() {
+      const checked = [...optsRoot.querySelectorAll('input:checked')];
+      if (checked.length === 0 || checked.length === options.length) return [];
+      return checked.map(cb => cb.value);
+    },
+    onChange(fn) { listeners.push(fn); },
+  };
+}
+
+/**
+ * Client-side narrowing: after rendering, hide markers whose cost_centre
+ * or assigned_city isn't in the multi-select set. Used when the user picks
+ * a subset (the SQL accepts only single-value filters in P1).
+ *
+ * Note: this hides via MapLibre `setFilter` so the source data is intact —
+ * counts in the FLEET NOW tiles still reflect everything fetched.
+ */
+export function applyClientFilter(map, { costCentres = [], cities = [] } = {}) {
+  const layers = ['vehicles-circle', 'vehicles-arrow', 'vehicles-label'];
+  const conds = [];
+  if (costCentres.length > 0 && costCentres.length > 1) {
+    conds.push(['in', ['get', 'cost_centre'], ['literal', costCentres]]);
+  }
+  if (cities.length > 0 && cities.length > 1) {
+    conds.push(['in', ['get', 'assigned_city'], ['literal', cities]]);
+  }
+  const filter = conds.length === 0 ? null
+    : conds.length === 1 ? conds[0]
+    : ['all', ...conds];
+  // Preserve the show_arrow filter on the arrow layer
+  for (const id of layers) {
+    if (!map.getLayer(id)) continue;
+    if (id === 'vehicles-arrow') {
+      const base = ['==', ['get', 'show_arrow'], true];
+      map.setFilter(id, filter ? ['all', base, filter] : base);
+    } else {
+      map.setFilter(id, filter);
+    }
+  }
 }
 
 /* ---------- trip panel ---------- */
@@ -435,15 +625,9 @@ function _renderTripPanel(map, els, payload) {
   const reportingTime = payload.reporting_time
     ? _formatTimeOnly(payload.reporting_time) : '—';
   els.totals.innerHTML = `
-    <div>Reporting time: <strong>${_esc(reportingTime)}</strong></div>
+    <div>Reporting <strong>${_esc(reportingTime)}</strong> · <strong>${t.trip_count ?? 0}</strong> trips · <strong>${_fmtNum(t.distance_km, 1)}</strong> km</div>
-    <div style="margin-top:6px">
+    <div>drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m</div>
-      <strong>${t.trip_count ?? 0}</strong> trips ·
+    <div class="trip-quality">${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}</div>
-      <strong>${_fmtNum(t.distance_km, 1)}</strong> km
-    </div>
-    <div style="margin-top:4px">
-      drive ${_fmtNum(t.driving_min, 0)}m · idle ${_fmtNum(t.idling_min, 0)}m · stop ${_fmtNum(t.stopped_min, 0)}m
-    </div>
-    <div class="quality">${q.fix_count ?? 0} fixes · ACC ${q.has_acc_data ? 'on' : 'off'}</div>
   `;
 
   const trips = payload.trips || [];
@@ -452,27 +636,27 @@ function _renderTripPanel(map, els, payload) {
     return;
   }
   els.list.innerHTML = trips.map(trip => `
-    <div class="trip-row" data-trip-id="${trip.trip_id}">
+    <div class="trip-card" data-trip-id="${trip.trip_id}">
-      <div class="trip-row-top">
+      <div class="trip-card-top">
         <span>Trip ${trip.trip_id}</span>
         <span>${_fmtNum(trip.distance_km, 1)} km</span>
       </div>
-      <div class="trip-row-meta">
+      <div class="trip-card-times">${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)}</div>
-        <span>${_formatTimeOnly(trip.started_at)} → ${_formatTimeOnly(trip.ended_at)}</span>
+      <div class="trip-card-meta">
         <span>${_fmtNum(trip.duration_min, 0)} min</span>
         ${trip.idling_min > 0 ? `<span>idle ${_fmtNum(trip.idling_min, 0)}m</span>` : ''}
       </div>
-      <div class="trip-row-reason ${_reasonClass(trip.end_reason)}">
+      <div class="trip-card-reason ${_reasonClass(trip.end_reason)}">
         ${_reasonLabel(trip.end_reason)}
       </div>
     </div>
   `).join('');
-  for (const row of els.list.querySelectorAll('.trip-row')) {
+  for (const card of els.list.querySelectorAll('.trip-card')) {
-    row.addEventListener('click', () => {
+    card.addEventListener('click', () => {
-      els.list.querySelectorAll('.trip-row.selected')
+      els.list.querySelectorAll('.trip-card.selected')
-        .forEach(r => r.classList.remove('selected'));
+        .forEach(c => c.classList.remove('selected'));
-      row.classList.add('selected');
+      card.classList.add('selected');
-      const tid = Number(row.dataset.tripId);
+      const tid = Number(card.dataset.tripId);
       const trip = trips.find(x => x.trip_id === tid);
       if (trip) _showAndAnimateTrip(map, trip);
     });
@@ -535,7 +719,9 @@ function _showAndAnimateTrip(map, trip) {
     // eslint-disable-next-line no-undef
     new maplibregl.LngLatBounds(coords[0], coords[0]),
   );
-  map.fitBounds(bounds, { padding: { top: 80, right: 380, bottom: 60, left: 60 }, duration: 600 });
+  // Bottom panel takes ~60% height when open; pad the south more so the
+  // polyline isn't hidden under the trip cards.
+  map.fitBounds(bounds, { padding: { top: 60, right: 60, bottom: 360, left: 60 }, duration: 600 });
 
   _animatePathMarker(map, coords, TRIP_ANIM_MS);
 }

web/index-live.html

@@ -9,6 +9,7 @@
     :root {
       --bg: #0f172a;
       --panel: #1e293b;
+      --panel-2: #0b1220;
       --text: #f1f5f9;
       --muted: #94a3b8;
       --accent: #10b981;
@@ -18,43 +19,105 @@
     * { box-sizing: border-box; }
     html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
-    body { display: grid; grid-template-rows: auto 1fr; }
+
+    body { display: grid; grid-template-rows: auto auto 1fr; min-height: 100%; }
+
+    /* ─────────── top header ─────────── */
     header {
       display: flex; align-items: center; justify-content: space-between;
-      padding: 10px 16px; background: var(--panel); border-bottom: 1px solid #0b1220;
+      padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--panel-2);
+    }
+    header h1 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
+    header .right { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); }
+    button.logout {
+      background: transparent; color: var(--muted); border: 1px solid var(--muted);
+      padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
+    }
+    button.logout:hover { color: var(--text); border-color: var(--text); }
+
+    /* ─────────── top dashboard band: tiles + slos + filters ─────────── */
+    .top-band {
+      display: grid;
+      grid-template-columns: minmax(260px,auto) minmax(260px,1fr) minmax(280px,auto);
+      gap: 16px;
+      padding: 10px 16px;
+      background: var(--panel);
+      border-bottom: 1px solid var(--panel-2);
+    }
+    .band-block { display: flex; flex-direction: column; gap: 4px; }
+    .band-title {
+      font-size: 10px; text-transform: uppercase; color: var(--muted);
+      letter-spacing: 0.08em; font-weight: 600;
+    }
+    .band-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+
+    .tile {
+      background: var(--panel-2); padding: 4px 10px; border-radius: 4px;
+      min-width: 70px; display: flex; flex-direction: column; gap: 0;
+    }
+    .tile-label { font-size: 9px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
+    .tile-value { font-size: 18px; font-weight: 600; line-height: 1.1; }
+
+    .slo {
+      display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
+      padding: 3px 8px; border-radius: 4px; font-size: 11px;
+      background: var(--panel-2);
     }
-    header h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
-    header .right { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); }
-    main { display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
-    aside { padding: 12px; overflow: auto; border-right: 1px solid #0b1220; background: var(--panel); }
-    #map { width: 100%; height: 100%; }
-    .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
-    .tile { background: #0b1220; padding: 10px; border-radius: 6px; }
-    .tile-label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }
-    .tile-value { font-size: 22px; font-weight: 600; margin-top: 2px; }
-    h3 { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; letter-spacing: 0.06em; }
-    .slo { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 6px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 4px; background: #0b1220; }
     .slo-name { color: var(--muted); }
-    .slo-status { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
+    .slo-status { text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; }
     .slo-green   .slo-status { color: var(--accent); }
     .slo-red     .slo-status { color: var(--bad); }
     .slo-unknown .slo-status { color: var(--muted); }
-    .slo-empty { color: var(--muted); font-size: 12px; }
+    .slo-empty { color: var(--muted); font-size: 11px; }
 
-    /* hover popup matching the dark theme */
+    /* ─────────── multi-select filter widget ─────────── */
+    .ms { position: relative; min-width: 180px; }
+    .ms-btn {
+      width: 100%; display: flex; justify-content: space-between; align-items: center;
+      background: var(--panel-2); color: var(--text);
+      border: 1px solid var(--panel-2); border-radius: 4px;
+      padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
+    }
+    .ms-btn:hover { border-color: var(--muted); }
+    .ms-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .ms-caret { color: var(--muted); font-size: 10px; margin-left: 8px; }
+    .ms-pop {
+      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
+      background: var(--panel); border: 1px solid var(--panel-2);
+      border-radius: 6px; padding: 6px; z-index: 20;
+      max-height: 320px; overflow-y: auto;
+      box-shadow: 0 12px 32px rgba(0,0,0,0.55);
+    }
+    .ms-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 5px 8px; border-radius: 3px; font-size: 12px; cursor: pointer;
+    }
+    .ms-row:hover { background: var(--panel-2); }
+    .ms-row input[type="checkbox"] { margin: 0; accent-color: var(--accent); }
+    .ms-row-all { border-bottom: 1px solid var(--panel-2); margin-bottom: 4px; padding-bottom: 8px; }
+    .ms-swatch {
+      width: 10px; height: 10px; border-radius: 50%;
+      display: inline-block; flex-shrink: 0;
+      border: 1px solid rgba(0,0,0,0.3);
+    }
+    .ms-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    /* ─────────── map (fills remaining height) ─────────── */
+    #map-container { position: relative; min-height: 0; }
+    #map { position: absolute; inset: 0; }
+
+    /* ─────────── hover popup (unchanged) ─────────── */
     .fleet-popup .maplibregl-popup-content {
-      background: #1e293b !important;
+      background: var(--panel) !important; color: var(--text) !important;
-      color: var(--text) !important;
+      padding: 14px 16px !important; border-radius: 8px !important;
-      padding: 14px 16px !important;
-      border-radius: 8px !important;
       min-width: 240px;
       box-shadow: 0 12px 32px rgba(0,0,0,0.55);
-      border: 1px solid #0b1220;
+      border: 1px solid var(--panel-2);
     }
     .fleet-popup .maplibregl-popup-tip { display: none; }
     .popup-card { font-family: inherit; }
     .popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
-    .popup-plate { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
+    .popup-plate { font-size: 16px; font-weight: 700; }
     .popup-pill {
       font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
       padding: 3px 8px; border-radius: 4px; font-weight: 600;
@@ -67,93 +130,70 @@
     .popup-meta { color: var(--muted); font-size: 12px; margin: 2px 0 4px; }
     .popup-address { color: var(--text); font-size: 13.5px; margin: 6px 0 8px; font-weight: 500; }
     .popup-row { color: #cbd5e1; font-size: 12.5px; margin: 4px 0; }
-    form.filters { display: grid; gap: 8px; }
-    form.filters input, form.filters select { width: 100%; background: #0b1220; color: var(--text); border: 1px solid #0b1220; border-radius: 4px; padding: 6px 8px; font-size: 12px; }
-    form.filters label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; }
-    button.logout { background: transparent; color: var(--muted); border: 1px solid var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
-    button.logout:hover { color: var(--text); border-color: var(--text); }
 
-    /* trip panel */
+    /* ─────────── bottom trip panel (slides up) ─────────── */
-    #map-container { position: relative; height: 100%; }
+    .trip-dock {
-    #map { position: absolute; inset: 0; }
+      position: absolute; left: 0; right: 0; bottom: 0;
-    .trip-panel {
+      background: var(--panel); border-top: 1px solid var(--panel-2);
-      position: absolute; top: 0; right: 0; bottom: 0;
-      width: 360px;
-      background: var(--panel);
-      border-left: 1px solid #0b1220;
       color: var(--text);
-      display: flex; flex-direction: column;
+      display: grid; grid-template-rows: auto 1fr;
-      transform: translateX(100%);
+      max-height: 60%;
+      transform: translateY(100%);
       transition: transform 0.22s ease;
-      z-index: 2;
+      z-index: 3;
-      overflow: hidden;
+      box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
-      box-shadow: -8px 0 24px rgba(0,0,0,0.35);
     }
-    .trip-panel.open { transform: translateX(0); }
+    .trip-dock.open { transform: translateY(0); }
-    .trip-panel-header {
+    .trip-dock-header {
-      display: flex; justify-content: space-between; align-items: flex-start;
+      display: flex; align-items: center; gap: 18px; padding: 10px 16px;
-      padding: 14px 16px 10px; border-bottom: 1px solid #0b1220;
+      border-bottom: 1px solid var(--panel-2); flex-wrap: wrap;
     }
-    .trip-plate { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
+    .trip-id-block { display: flex; flex-direction: column; min-width: 160px; }
+    .trip-plate { font-size: 16px; font-weight: 700; }
     .trip-driver { font-size: 12px; color: var(--muted); margin-top: 2px; }
-    .trip-close {
+    .trip-totals { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
-      background: transparent; color: var(--muted); border: 0;
+    .trip-totals strong { color: var(--text); font-weight: 600; }
-      font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px;
+    .trip-quality { font-size: 10.5px; color: var(--muted); }
-    }
+    .trip-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; }
-    .trip-close:hover { color: var(--text); }
+    .trip-controls label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
-    .trip-controls {
-      display: flex; justify-content: space-between; align-items: center;
-      padding: 10px 16px; gap: 8px; border-bottom: 1px solid #0b1220;
-    }
-    .trip-controls label { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
     .trip-controls input[type="date"] {
-      background: #0b1220; color: var(--text);
+      background: var(--panel-2); color: var(--text);
-      border: 1px solid #0b1220; border-radius: 4px;
+      border: 1px solid var(--panel-2); border-radius: 4px;
-      padding: 4px 6px; font-size: 12px; font-family: inherit;
+      padding: 4px 6px; font-size: 11px; font-family: inherit; color-scheme: dark;
-      color-scheme: dark;
     }
-    .trip-csv {
+    .trip-csv, .trip-close {
       background: transparent; color: var(--muted);
       border: 1px solid var(--muted); border-radius: 4px;
-      padding: 4px 10px; cursor: pointer;
+      padding: 4px 10px; cursor: pointer; font-size: 10px;
-      font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
+      text-transform: uppercase; letter-spacing: 0.06em;
     }
-    .trip-csv:hover { color: var(--text); border-color: var(--text); }
+    .trip-csv:hover, .trip-close:hover { color: var(--text); border-color: var(--text); }
-    .trip-totals {
+
-      padding: 12px 16px; font-size: 12.5px; color: var(--muted);
+    .trip-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; }
-      border-bottom: 1px solid #0b1220; line-height: 1.5;
-    }
-    .trip-totals strong { color: var(--text); font-weight: 600; }
-    .trip-totals .quality { font-size: 11px; margin-top: 6px; }
-    .trip-list { overflow: auto; flex: 1; }
     .trip-list-empty { padding: 16px; color: var(--muted); font-size: 12.5px; }
-    .trip-row {
+    .trip-card {
-      padding: 10px 16px;
+      flex: 0 0 auto; min-width: 170px; max-width: 220px;
-      border-bottom: 1px solid #0b1220;
+      background: var(--panel-2); border-radius: 6px; padding: 10px 12px;
-      cursor: pointer;
+      cursor: pointer; border-left: 3px solid transparent;
     }
-    .trip-row:hover { background: #0b1220; }
+    .trip-card:hover { background: #111a2c; }
-    .trip-row.selected {
+    .trip-card.selected { border-left-color: var(--accent); }
-      background: #0b1220;
+    .trip-card-top {
-      border-left: 3px solid var(--accent);
+      display: flex; justify-content: space-between; align-items: center;
-      padding-left: 13px;
+      font-size: 12.5px; font-weight: 600; margin-bottom: 4px;
     }
-    .trip-row-top {
+    .trip-card-times { font-size: 11px; color: var(--muted); }
-      display: flex; justify-content: space-between;
+    .trip-card-meta {
-      font-size: 13px; font-weight: 600;
+      display: flex; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 2px;
     }
-    .trip-row-meta {
+    .trip-card-reason {
-      display: flex; gap: 10px; flex-wrap: wrap;
-      font-size: 11.5px; color: var(--muted); margin-top: 4px;
-    }
-    .trip-row-reason {
       display: inline-block; margin-top: 6px;
-      font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
+      font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
       color: var(--muted);
     }
-    .trip-row-reason.work-stop  { color: var(--accent); }
+    .trip-card-reason.work-stop  { color: var(--accent); }
-    .trip-row-reason.nofix-stop { color: var(--warn); }
+    .trip-card-reason.nofix-stop { color: var(--warn); }
-    .trip-row-reason.long-gap   { color: var(--bad); }
+    .trip-card-reason.long-gap   { color: var(--bad); }
   </style>
 </head>
 <body>
@@ -164,45 +204,51 @@
       <button class="logout" onclick="window.fleetLogout()">Sign out</button>
     </div>
   </header>
-  <main>
-    <aside>
-      <h3>Fleet now</h3>
-      <div id="summary" class="tile-grid"></div>
 
-      <h3>SLOs</h3>
+  <div class="top-band">
-      <div id="slos"></div>
+    <div class="band-block">
+      <div class="band-title">Fleet now</div>
+      <div class="band-row" id="summary"></div>
+    </div>
+    <div class="band-block">
+      <div class="band-title">SLOs</div>
+      <div class="band-row" id="slos" style="flex-direction:column; gap:4px;"></div>
+    </div>
+    <div class="band-block">
+      <div class="band-title">Filters</div>
+      <div class="band-row" id="filters">
+        <div id="flt-cost-centre"></div>
+        <div id="flt-assigned-city"></div>
+      </div>
+    </div>
+  </div>
 
-      <h3>Filters</h3>
-      <form class="filters" id="filters">
-        <label for="f-cost">Cost centre</label>
-        <input id="f-cost" name="cost_centre" placeholder="e.g. Nairobi-North" />
-        <label for="f-city">Assigned city</label>
-        <input id="f-city" name="assigned_city" placeholder="e.g. Nairobi" />
-      </form>
-    </aside>
   <div id="map-container">
     <div id="map"></div>
-      <aside id="trip-panel" class="trip-panel" aria-hidden="true">
+
-        <div class="trip-panel-header">
+    <aside id="trip-panel" class="trip-dock" aria-hidden="true">
-          <div>
+      <div class="trip-dock-header">
-            <div class="trip-plate" id="trip-plate">—</div>
+        <div class="trip-id-block">
-            <div class="trip-driver" id="trip-driver"></div>
+          <span class="trip-plate" id="trip-plate">—</span>
-          </div>
+          <span class="trip-driver" id="trip-driver"></span>
-          <button class="trip-close" id="trip-close" aria-label="Close trip panel">×</button>
         </div>
+        <div class="trip-totals" id="trip-totals">Click a vehicle to see its trips.</div>
         <div class="trip-controls">
           <label>Date <input type="date" id="trip-date" /></label>
           <button class="trip-csv" id="trip-csv" type="button">CSV</button>
+          <button class="trip-close" id="trip-close" type="button" aria-label="Close trip panel">Close</button>
+        </div>
       </div>
-        <div class="trip-totals" id="trip-totals">Click a vehicle to see its trips.</div>
       <div class="trip-list" id="trip-list"></div>
     </aside>
   </div>
-  </main>
 
   <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
   <script type="module">
-    import { authClient, apiFetch, initMap, renderView, initFilters, clockEAT, initTripPanel } from '/fleet-core.js';
+    import {
+      authClient, apiFetch, initMap, renderView,
+      initFilters, applyClientFilter, initTripPanel, clockEAT,
+    } from '/fleet-core.js';
 
     if (!authClient.requireSession()) { /* redirected */ }
 
@@ -214,19 +260,25 @@
     const summaryEl = document.getElementById('summary');
     const slosEl    = document.getElementById('slos');
     let currentFilters = {};
+    let activeSelection = { costCentres: [], cities: [] };
 
     async function refresh() {
       try {
         const params = Object.keys(currentFilters).length ? { filters: currentFilters } : {};
         const payload = await apiFetch('/api/views/live', { params });
         renderView(map, payload, { summaryRoot: summaryEl, sloRoot: slosEl });
+        // Repopulate filter dropdowns from the latest features
+        const features = (payload.geojson && payload.geojson.features) || [];
+        filters.updateOptions(features);
+        applyClientFilter(map, activeSelection);
       } catch (err) {
         console.error('refresh.failed', err);
       }
     }
 
-    initFilters(document.getElementById('filters'), (filters) => {
+    const filters = initFilters(document.getElementById('filters'), (serverFilters, selection) => {
-      currentFilters = filters;
+      currentFilters = serverFilters;
+      activeSelection = selection;
       refresh();
     });