/* MB Mileage — mobile-first styles (dashboard component). */

/* Phones FIRST: a generous 18px base — every rem-sized element (text, buttons, cards,
   tables) scales with it, which is what makes the app feel like a native mobile app
   instead of a shrunken desktop page. Desktop keeps its denser 16px base. */
html {
  font-size: 18px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
   Large tap targets (>= 44px) for category toggles, filters and
   buttons — hard requirement for phone usability.
   ------------------------------------------------------------------ */
.btn-tap {
  min-height: 44px;
  min-width: 44px;
}

/* Category toggle group: three equally sized 44px buttons. */
.category-toggle .btn {
  min-height: 44px;
  min-width: 44px;
}

.category-toggle .btn.active-business {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
}

.category-toggle .btn.active-private {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.category-toggle .btn.active-unclassified {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* ------------------------------------------------------------------
   Summary cards.
   ------------------------------------------------------------------ */
.summary-card {
  border-left: 4px solid #6c757d;
}

.summary-card .summary-value {
  font-size: 1.4rem;
  font-weight: 600;
}

.summary-business {
  border-left-color: #198754;
}

.summary-private {
  border-left-color: #0d6efd;
}

.summary-unclassified {
  border-left-color: #6c757d;
}

.summary-total {
  border-left-color: #212529;
}

/* ------------------------------------------------------------------
   Notes inline editing.
   ------------------------------------------------------------------ */
.notes-display {
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.notes-display .notes-placeholder {
  color: #6c757d;
  font-style: italic;
}

.notes-editor textarea {
  min-height: 60px;
}

/* ------------------------------------------------------------------
   Trips table -> stacked cards below 576px. CSS ONLY — the same
   markup renders as a table on larger screens and as label/value
   card rows (via td::before { content: attr(data-label); }) on phones.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .trips-table thead {
    display: none;
  }

  .trips-table,
  .trips-table tbody,
  .trips-table tr,
  .trips-table td {
    display: block;
    width: 100%;
  }

  .trips-table tr {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .trips-table td {
    border: 0;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    text-align: right;
  }

  .trips-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }

  .trips-table td.text-end {
    text-align: right;
  }

  /* Category + notes cells stack their controls full-width. */
  .trips-table td.cell-category,
  .trips-table td.cell-notes {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .trips-table td.cell-category .category-toggle {
    width: 100%;
  }
}

/* On >= 576px screens keep the normal table look. */
@media (min-width: 576px) {
  .trips-table td.cell-notes {
    max-width: 22rem;
  }
}

/* ------------------------------------------------------------------
   Energy provenance. The "~" that once marked an estimated cost is gone
   with the two-path model that justified it: every trip is now computed
   the same way, so no figure is second-class. What is worth saying —
   which conversion factor was used and where it came from — is said in
   words, in the cost cell's tooltip and in the expanded panel's
   .route-factor line.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Mileage privacy lock: masked odometer displays are clickable and
   subtly marked (odo-lock.js opens the PIN dialog).
   ------------------------------------------------------------------ */
.odo-locked {
  cursor: pointer;
}

.odo-locked:hover {
  color: #0d6efd;
}

/* ------------------------------------------------------------------
   Footer status bar.
   ------------------------------------------------------------------ */
#status-bar .status-ok {
  color: #75b798;
}

#status-bar .status-warn {
  color: #ffda6a;
}

/* ---- per-trip expandable route map (inserted row beneath the trip) ---- */
.trips-table tbody tr[data-trip-id] { cursor: pointer; }
.trips-table tbody tr[data-trip-id]:hover { background: rgba(13, 110, 253, 0.05); }
tr.trip-row-active { background: rgba(13, 110, 253, 0.10) !important; box-shadow: inset 3px 0 0 #0d6efd; }

.trip-route-map { height: 260px; width: 100%; border-radius: 0.375rem; z-index: 0; }
.trips-table td.trip-route-cell { padding: 0.5rem 0.75rem; }
.trip-route-label { margin-bottom: 0.35rem; }

/* ---- consumption-painted route: legend chips, summary, toggle ---- */
.route-energy { margin-bottom: 0.4rem; }

.route-summary {
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.25rem;
}

/* The conversion factor and its provenance, under the summary's arithmetic —
   deliberately quieter than the numbers it explains. */
.route-factor {
  margin-top: -0.15rem;
  margin-bottom: 0.3rem;
}

.route-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.route-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.route-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.3rem;
  border-radius: 0.15rem;
}

.route-dot-electric { background: #3b82f6; }
.route-dot-petrol { background: #f59e0b; }
.route-dot-both {
  background: repeating-linear-gradient(90deg, #f59e0b 0 4px, #3b82f6 4px 8px);
}
.route-dot-regen { background: #10b981; }
.route-dot-coast { background: #9ca3af; }

/* Hide the class chips when the classic view is active (summary + toggle stay). */
.route-energy.consumption-off .route-chip { display: none; }

/* ---- car-measured trip facts (tripFacts payload, trips-map.js) ---- */
.route-facts { margin-top: 0.35rem; }

.route-lifecycle { margin-top: 0.15rem; }

/* Eco chips are facts, not consumption-legend entries — keep them visible
   when the classic (consumption-off) view hides the legend chips. */
.route-energy.consumption-off .route-facts .route-chip { display: inline-flex; }

/* Scope marker on the eco chips: those scores cover the whole journey, so the
   label rides along with them rather than looking like another score. */
.route-chip-scope {
  font-style: italic;
  opacity: 0.85;
}

.route-toggle {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

.route-toggle.on {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #1d4ed8;
}

@media (max-width: 575.98px) {
  .trip-route-map { height: 220px; }

  /* Join the expanded trip card and its route card into one block. */
  .trips-table tr[aria-expanded="true"] {
    margin-bottom: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .trips-table tr.trip-route-row {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 0;
  }

  /* Undo the generic label/value flex layout for the map cell. */
  .trips-table td.trip-route-cell {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .trips-table td.trip-route-cell::before {
    content: none;
  }
}

/* ---- live location card ---- */
#live-map {
  height: 300px;
  width: 100%;
  border-bottom-left-radius: var(--bs-card-inner-border-radius, 8px);
  border-bottom-right-radius: var(--bs-card-inner-border-radius, 8px);
  z-index: 0;
}

/* White circular chip around the vehicle/phone glyph markers. The vehicle chip is rotated to
   the car's reported heading by live-map.js (inline transform) — ease between updates. */
.live-marker-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #212529;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.6s ease;
}

/* Live map: fade the vehicle chip when its position is stale (car parked — last report only). */
.live-marker-stale { opacity: 0.55; }
.live-marker-stale .live-marker-chip { border: 1px dashed #999; }

/* Dedicated Live page: the map is the content — give it real estate. */
.live-page #live-map {
  height: min(70vh, 640px);
}

/* Vehicle status strip below the live map: while it is visible (live-map.js toggles the class)
   the map is no longer the card's bottom edge, so its corners go square. */
#live-map.map-has-strip {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ------------------------------------------------------------------
   Mobile navbar: below md the page links live in the hamburger panel —
   full-width rows with 44px-class tap targets and subtle separators.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  #main-nav {
    padding-top: 0.25rem;
  }
  #main-nav .nav-link {
    padding-block: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #main-nav .nav-link.active {
    font-weight: 600;
  }
}

/* ------------------------------------------------------------------
   Reports page: summary card accents, pure-DOM stacked bar chart and
   report tables (rendered by reports.js from /api/reports/energy).
   ------------------------------------------------------------------ */

/* Totals cards reuse .summary-card; accent colors match the chart segments. */
.summary-electric {
  border-left-color: #3b82f6;
}

.summary-petrol {
  border-left-color: #f59e0b;
}

.summary-unknown {
  border-left-color: #9ca3af;
}

/* Chart: fixed-height flex columns inside a horizontal scroll container —
   overflow (31 daily columns) scrolls INSIDE the card, never the page. */
.report-chart-scroll {
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.report-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.report-col {
  flex: 1 0 2.25rem;
  min-width: 2.25rem;
  max-width: 4.5rem;
}

/* Segment heights are set inline by reports.js as a percentage of the
   max bucket totalKm; justify-content keeps the stack sitting on the axis. */
.report-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 180px;
}

.report-seg {
  width: 100%;
  min-height: 2px;
}

.report-seg:first-child {
  border-radius: 2px 2px 0 0;
}

.report-seg-electric { background: #3b82f6; }
.report-seg-petrol { background: #f59e0b; }
.report-seg-unknown { background: #9ca3af; }

.report-col-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
  white-space: nowrap;
}

/* Legend chips above the chart (colors shared with the bar segments). */
.report-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.report-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.report-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.3rem;
  border-radius: 0.15rem;
}

/* Report tables -> stacked cards below 576px, same CSS-only pattern as
   .trips-table (td::before { content: attr(data-label); }). */
@media (max-width: 575.98px) {
  .report-table thead {
    display: none;
  }

  .report-table,
  .report-table tbody,
  .report-table tr,
  .report-table td {
    display: block;
    width: 100%;
  }

  .report-table tr {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .report-table td {
    border: 0;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    text-align: right;
  }

  .report-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
}