From 37d8eedd641bb04c086797010292bcb25240d56d Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Thu, 6 Nov 2025 23:36:52 +0100
Subject: Refactor styles and add alert color variables; implement scroll
 management for timetable

---
 src/frontend/app/components/SchedulesTable.css | 55 +++++++++++++++++---------
 1 file changed, 37 insertions(+), 18 deletions(-)

(limited to 'src/frontend/app/components/SchedulesTable.css')

diff --git a/src/frontend/app/components/SchedulesTable.css b/src/frontend/app/components/SchedulesTable.css
index 8980fb4..6d2f201 100644
--- a/src/frontend/app/components/SchedulesTable.css
+++ b/src/frontend/app/components/SchedulesTable.css
@@ -7,7 +7,7 @@
   margin-bottom: 1rem;
   text-align: left;
   font-size: 1.1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .timetable-cards {
@@ -18,17 +18,36 @@
 }
 
 .timetable-card {
-  background-color: var(--surface-future, #fff);
-  border: 1px solid var(--card-border, #e0e0e0);
+  background-color: var(--surface-future);
+  border: 1px solid var(--card-border);
   border-radius: 10px;
   padding: 1.25rem;
   transition: background-color 0.2s ease, border 0.2s ease;
 }
 
+/* Next upcoming service: slight emphasis */
+.timetable-card.timetable-next {
+  background-color: var(--surface-next);
+  border-color: var(--card-border);
+  position: relative;
+}
+
+.timetable-card.timetable-next::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  background: var(--accent-next);
+}
+
 .timetable-card.timetable-past {
-  background-color: var(--surface-past, #f3f3f3);
-  color: var(--text-secondary, #aaa);
-  border: 1px solid #e0e0e0;
+  background-color: var(--surface-past);
+  color: var(--text-secondary);
+  border: 1px solid var(--card-border);
 }
 
 .card-header {
@@ -46,7 +65,7 @@
   flex: 1;
   text-align: left;
   margin: 0 1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .destination-info strong {
@@ -54,7 +73,7 @@
 }
 
 .timetable-card.timetable-past .destination-info {
-  color: var(--text-secondary, #aaa);
+  color: var(--text-secondary);
 }
 
 .time-info {
@@ -68,11 +87,11 @@
   font-weight: bold;
   font-family: monospace;
   font-size: 1.1rem;
-  color: var(--text-primary, #333);
+  color: var(--text-primary);
 }
 
 .timetable-card.timetable-past .departure-time {
-  color: var(--text-secondary, #aaa);
+  color: var(--text-secondary);
 }
 
 .card-body {
@@ -81,7 +100,7 @@
 
 .route-streets {
   font-size: 0.85rem;
-  color: var(--text-secondary, #666);
+  color: var(--text-secondary);
   line-height: 1.8;
   word-break: break-word;
 }
@@ -89,8 +108,8 @@
 .service-id {
   font-family: monospace;
   font-size: 0.8rem;
-  color: var(--text-secondary, #666);
-  background: var(--service-background, #f0f0f0);
+  color: var(--text-secondary);
+  background: var(--service-background);
   padding: 0.15rem 0.4rem;
   border-radius: 3px;
   font-weight: 500;
@@ -99,18 +118,18 @@
 }
 
 .timetable-card.timetable-past .service-id {
-  color: var(--text-secondary, #bbb);
-  background: #e8e8e8;
+  color: var(--text-secondary);
+  background: var(--service-background-past);
 }
 
 .no-data {
   text-align: center;
-  color: var(--text-secondary, #666);
+  color: var(--text-secondary);
   font-style: italic;
   padding: 2rem;
-  background: var(--card-background, #f8f9fa);
+  background: var(--card-background);
   border-radius: 8px;
-  border: 1px solid var(--card-border, #e0e0e0);
+  border: 1px solid var(--card-border);
 }
 
 /* Responsive design */
-- 
cgit v1.3