1 files changed, 214 insertions, 0 deletions
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
new file mode 100644
index 0000000..8a442c3
--- /dev/null
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
@@ -0,0 +1,214 @@
+@reference "../../root.css";
+
+.consolidated-circulation-card {
+  all: unset;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: var(--message-background-color);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  padding: 0.65rem 0.85rem;
+  transition: all 0.2s ease;
+}
+
+.consolidated-circulation-card.has-gps {
+  cursor: pointer;
+}
+
+.consolidated-circulation-card.no-gps {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.consolidated-circulation-card.has-gps:hover {
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+  border-color: var(--button-background-color);
+  background-color: color-mix(
+    in oklab,
+    var(--button-background-color) 5%,
+    var(--message-background-color)
+  );
+}
+
+.consolidated-circulation-card.has-gps:active {
+  transform: scale(0.98);
+}
+
+.consolidated-circulation-card:disabled {
+  pointer-events: none;
+}
+
+
+.consolidated-circulation-card .card-row {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.consolidated-circulation-card .card-row.main {
+  min-height: 48px;
+}
+
+.consolidated-circulation-card .line-info {
+  flex-shrink: 0;
+}
+
+.consolidated-circulation-card .route-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.consolidated-circulation-card .route-info strong {
+  font-size: 1rem;
+  color: var(--text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.25;
+}
+
+.consolidated-circulation-card .eta-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3rem 0.45rem;
+  border-radius: 12px;
+}
+
+.consolidated-circulation-card .eta-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1;
+}
+
+.consolidated-circulation-card .eta-value {
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.consolidated-circulation-card .eta-unit {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.consolidated-circulation-card .eta-badge.time-running {
+  background: rgba(34, 197, 94, 0.12);
+  color: #1a9e56;
+}
+
+.consolidated-circulation-card .eta-badge.time-delayed {
+  background: rgba(255, 106, 0, 0.12);
+  color: #d06100;
+}
+
+.consolidated-circulation-card .eta-badge.time-scheduled {
+  background: rgba(11, 61, 145, 0.12);
+  color: #0b3d91;
+}
+
+[data-theme="dark"] .consolidated-circulation-card .eta-badge.time-scheduled {
+  color: #8fb4ff;
+}
+
+.consolidated-circulation-card .card-row.meta {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.4rem;
+}
+
+.meta-chip {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.03);
+
+  @apply flex items-center justify-center gap-1 flex-shrink-0 bg-gray-200/30 dark:bg-gray-600/30;
+}
+
+.meta-chip.delay-ok {
+  @apply bg-green-400/30 dark:bg-green-600/30 border-green-500 dark:border-green-700 text-green-800 dark:text-green-200;
+}
+
+.meta-chip.delay-warn {
+  @apply bg-yellow-400/30 dark:bg-yellow-600/30 border-yellow-500 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200;
+}
+
+.meta-chip.delay-critical {
+  @apply bg-red-400/30 dark:bg-red-600/30 border-red-500 dark:border-red-700 text-white;
+}
+
+.meta-chip.delay-early {
+  @apply bg-blue-400/30 dark:bg-blue-600/30 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-200;
+}
+
+/* GPS Indicator */
+.gps-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.gps-pulse {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  animation: gpsPulse 2s ease-in-out infinite;
+}
+
+.gps-pulse.previous-trip {
+  background: #ff9800;
+  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
+  animation: gpsPulseOrange 2s ease-in-out infinite;
+}
+
+@keyframes gpsPulse {
+  0% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+}
+
+@keyframes gpsPulseOrange {
+  0% {
+    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
+  }
+}
+
+@media (max-width: 480px) {
+  .consolidated-circulation-card {
+    padding: 0.65rem 0.75rem;
+  }
+
+  .consolidated-circulation-card .card-row {
+    gap: 0.5rem;
+  }
+
+  .consolidated-circulation-card .eta-badge {
+    padding: 0.25rem 0.4rem;
+  }
+}