/* Taabi TMS — UAE · Live Trips.
 *
 * Styles for the tracking console in web/src/live.js. Kept out of the generated
 * app.css so a regeneration cannot drop them.
 */

.lv-live {
  margin-inline-start: auto;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--good);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline-end: 2px;
}

/* the pulsing dot that says the screen is updating itself */
.lv-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: lv-pulse 1.8s ease-out infinite;
}

@keyframes lv-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.lv-count {
  margin-inline-start: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
}

.lv-map {
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rail);
  background: var(--map-water);
}

/* map panes must not be repainted over the tooltips */
.lv-map .leaflet-tooltip {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.lv-tbl {
  max-height: 420px;
}

.lv-veh {
  font-weight: 600;
  white-space: nowrap;
}

.lv-ping {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* progress along the route */
.lv-bar {
  display: inline-block;
  vertical-align: middle;
  width: 84px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}

.lv-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 1s linear;
}

.lv-pct {
  display: inline-block;
  min-width: 34px;
  margin-inline-start: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, var(--muted));
}

.lv-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--muted, var(--muted));
  font-size: 13px;
}

[data-theme="dark"] .lv-map {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .lv-bar {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
  .lv-map {
    height: 300px;
  }
}

/* --- the simulated tracking demo -------------------------------------------------
   Drawn only when the register turns it on (app_settings.sim_live), and clearly
   badged as simulated so it can never be mistaken for recorded history. */
.sim-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-badge { background: var(--accent); color: var(--white); font-size: 10px; letter-spacing: .08em;
  font-weight: 700; border-radius: 4px; padding: 2px 6px; }
.sim-sp { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.sim-btn { border: 1px solid var(--border); background: var(--white); border-radius: 6px; padding: 2px 8px;
  font-size: 12px; margin-inline-start: 4px; cursor: pointer; }
.sim-btn.on { background: var(--primary); border-color: var(--primary); color: var(--white); }
.sim-note { color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.sim-list { display: flex; flex-direction: column; }
.sim-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.sim-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
  border-top: 1px solid var(--border-2); }
.sim-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--primary); }
.sim-dot.bad { background: var(--bad); }
.sim-dot.warn { background: var(--accent); }
.sim-body { flex: 1; min-width: 0; }
.sim-t { font-weight: 600; font-size: 13px; }
.sim-m { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sim-told { color: var(--muted); }
.sim-when { text-align: end; font-size: 11px; color: var(--muted); flex: none; }
.sim-sev { margin-top: 2px; font-weight: 600; }
.sim-sev.bad { color: var(--bad); }
.sim-sev.warn { color: var(--accent); }
.sim-sev.info { color: var(--primary); }
.sim-ping { animation: simPing 1.4s ease-out; }
@keyframes simPing {
  0% { stroke-width: 6; stroke: var(--white); }
  40% { stroke-width: 14; stroke: var(--accent); }
  100% { stroke-width: 6; stroke: var(--white); }
}

/* --- the trip timeline -----------------------------------------------------------
   A journey row carries its kind (a leg, a halt, a stoppage) and each kind paints its
   own dot. The kind is namespaced because a bare `.run` is already defined — by the
   AI assistant's stylesheet, for its tool-run box — and it painted every leg of the
   journey near-black (#0f172a) under the panel's dark ink, so the Route Summary read
   as black whatever the theme. Namespacing keeps one module's rule off another's rows,
   and the transparent background undoes the leak on any row that still carries it. */
.tlitem.ev-run, .tlitem.ev-halt, .tlitem.ev-stop { background: none; }
.tlitem.ev-halt::before { background: var(--warn); }
.tlitem.ev-stop::before { background: var(--bad); }