temp

frontend/src/App.css

@@ -4,6 +4,8 @@
     margin: 0 auto;
     padding: 2rem;
     font-family: Arial, sans-serif;
+    background-color: white;
+    color: black;
 }
 
 /* Form Layout */
@@ -119,7 +121,7 @@ button:disabled {
     padding: 1rem;
     border: 1px solid #ddd;
     border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: white;
 }
 
 .leg h3 {
@@ -180,7 +182,7 @@ button:disabled {
 
 /* Stops List */
 .stops-list {
-    background-color: #ecf0f1;
+    background-color: white;
     border-radius: 4px;
     padding: 0.5rem;
     margin: 0.5rem 0;
@@ -198,6 +200,15 @@ button:disabled {
     border-bottom: none;
 }
 
+.stop-item.clickable {
+    cursor: pointer;
+}
+
+.stop-item.past {
+    color: #999;
+    cursor: not-allowed;
+}
+
 /* Time Input */
 input[type="datetime-local"] {
     padding: 0.5rem;
@@ -216,20 +227,42 @@ select {
     box-sizing: border-box;
 }
 
-/* Route Selector */
-.route-selector {
+/* Mode Switch */
+.mode-switch {
     display: flex;
     gap: 0.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
     justify-content: center;
 }
 
-.route-selector button {
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
-}
-
-.route-selector button.active {
+.mode-switch button.active {
     background-color: #535bf2;
     font-weight: bold;
 }
+
+/* Explorer */
+.explorer {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+.trips {
+    width: 100%;
+    max-width: 800px;
+}
+
+.trip {
+    margin-bottom: 2rem;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: white;
+}
+
+.trip h3 {
+    margin-top: 0;
+    color: #333;
+    font-size: 1.1rem;
+}