/* Modern Station Panel - Departure Board Design */

/* Design System Variables */
:root {
  /* Station Panel Theme - Dark Gray Base (matching train panel) */
  --station-panel: 0 0% 9%;  /* #181818 equivalent */
  --station-panel-foreground: 0 0% 95%;
  
  
  /* Status Colors */
  --status-ontime: 142 76% 36%;     /* Green for on-time */
  --status-delayed: 45 93% 47%;     /* Yellow for delays */
  --status-cancelled: 0 84% 60%;    /* Red for cancelled */
  --status-boarding: 217 91% 60%;   /* Blue for boarding */
  
  /* Enhanced Card System */
  --card: 0 0% 12%;
  --card-foreground: 0 0% 95%;
  --card-hover: 0 0% 15%;
  --card-border: 0 0% 20% / 0.3;
  
  /* Primary - Electric Blue Accent */
  --primary: 217 91% 60%;
  --primary-foreground: 210 40% 98%;
  --primary-glow: 217 91% 70%;

  /* Secondary - Subtle Panel Elements */
  --secondary: 0 0% 20%;
  --secondary-foreground: 0 0% 90%;

  /* Muted Elements */
  --muted: 0 0% 25%;
  --muted-foreground: 0 0% 65%;

  /* Accent - Success/Active States */
  --accent: 142 76% 36%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 0 0% 30%;
  --input: 0 0% 20%;
  --ring: 217 91% 60%;

  --radius: 0.75rem;
  
  /* Gradients */
  --gradient-panel: linear-gradient(135deg, hsl(var(--station-panel)) / 0.9, hsl(var(--station-panel)) / 0.7);
  --gradient-card: linear-gradient(145deg, hsl(var(--card)), hsl(var(--card)) / 0.8);
  --gradient-status: linear-gradient(90deg, hsl(var(--status-ontime)) / 0.8, hsl(var(--status-ontime)) / 0.6);
  
  /* Shadows */
  --shadow-card: 0 8px 30px -8px hsl(var(--station-panel)) / 0.3;
  --shadow-glow: 0 0 40px hsl(var(--primary)) / 0.2;
  
  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Main panel styling - matching train panel exactly */
#station-panel {
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  color: hsl(var(--station-panel-foreground));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'SF Pro Display', sans-serif;
}

/* Station header - uppercase, bold, center-aligned */
#station-title {
  text-align: center;
  margin: 1.5rem 0 1rem 0;
  padding: 0 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: hsl(var(--station-panel-foreground));
}

/* Hero photo styling */
.sp-hero-photo { 
  height: 140px; 
  border-radius: 14px; 
  overflow: hidden; 
  margin-bottom: 1rem; 
  background: #111; 
}
.sp-hero-photo img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}
.sp-hero-photo.no-image { 
  display: none; 
}

/* Tab styling - pill-shaped buttons */
.sp-actions { 
  display: flex; 
  justify-content: center; 
  margin: 1rem 0 1.2rem; 
}
.sp-actions .seg { 
  display: inline-flex; 
  gap: 2px; 
  padding: 2px; 
  background: hsl(var(--secondary)); 
  border: 1px solid hsl(var(--border)); 
  border-radius: 12px; 
}
.seg .tab { 
  border: none; 
  background: transparent; 
  color: hsl(var(--muted-foreground)); 
  font-weight: 600; 
  padding: 0.5rem 1.2rem; 
  border-radius: 10px; 
  cursor: pointer; 
  transition: var(--transition-smooth);
  font-size: 0.9rem;
}
.seg .tab.active { 
  background: hsl(var(--primary)); 
  color: hsl(var(--primary-foreground)); 
  box-shadow: var(--shadow-glow);
}
.seg .tab:not(.active):hover { 
  background: hsl(var(--card-hover)); 
  color: hsl(var(--card-foreground));
}

/* Search field styling */
.sp-search { 
  display: flex; 
  justify-content: center; 
  margin: 0 0 1.2rem; 
  padding: 0 1rem;
  position: relative;
}
.sp-search input {
  width: 100%;
  max-width: 280px;
  padding: 0.75rem 1rem 0.75rem 3rem; /* Add left padding for icon */
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  color: hsl(var(--card-foreground));
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}
.sp-search input::placeholder {
  color: hsl(var(--muted-foreground));
}
.sp-search input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  background: hsl(var(--card-hover));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}
/* Search icon styling */
.sp-search::before {
  content: "🔍";
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

/* Train cards list */
.sp-list { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 16px; 
  padding: 0; 
  margin: 0 auto; 
  width: 100%; 
  align-items: center;
}

/* Modern train card styling - enhanced design system */
.train-card { 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 20px; 
  background: hsl(var(--card) / 0.9); 
  border: 2px solid hsl(var(--card-border));
  border-radius: var(--radius); 
  padding: 24px 32px; 
  cursor: pointer; 
  transition: var(--transition-smooth); 
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: visible;
  width: 345px;
  min-height: 194px;
  margin: 0 auto;
}
.train-card:hover {
  background: hsl(var(--card-hover) / 0.9);
  transform: translateY(-2px);
  box-shadow: var(--panel-shadow);
  border-color: hsl(var(--primary) / 0.5);
}

/* Left side content */
.info { 
  flex: 1; 
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  min-height: 100%;
  overflow: visible;
}
.train-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.train-icon {
  width: 48px;
  height: 48px;
  background: hsl(var(--primary) / 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.train-icon::before {
  content: "🚆";
  font-size: 24px;
}
.info-content {
  flex: 1;
}
.destination { 
  font-weight: 700; 
  font-size: 1.1rem; 
  margin-bottom: 6px; 
  color: hsl(var(--card-foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sub { 
  font-size: 0.85rem; 
  color: hsl(var(--muted-foreground)); 
  line-height: 1.3;
}

/* Right side content */
.right { 
  text-align: right; 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  justify-content: flex-start;
  min-width: 80px;
}
.time { 
  font-weight: 700; 
  font-size: 1.5rem; 
  color: hsl(var(--card-foreground));
  line-height: 1;
}
.date { 
  font-size: 0.8rem; 
  color: hsl(var(--muted-foreground)); 
}

/* Status badge styling */
.badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 0.75rem; 
  font-weight: 500; 
  padding: 6px 12px; 
  border-radius: 999px; 
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

/* Status colors */
.on-time { 
  background: hsl(var(--status-ontime)); 
  color: white; 
}
.on-time .status-icon { 
  background: white; 
}

.delay { 
  background: hsl(var(--status-delayed)); 
  color: black; 
}
.delay .status-icon { 
  background: black; 
}

.cancel { 
  background: hsl(var(--status-cancelled)); 
  color: white; 
}
.cancel .status-icon { 
  background: white; 
}

.boarding { 
  background: hsl(var(--status-boarding)); 
  color: white; 
}
.boarding .status-icon { 
  background: white; 
}

/* Additional status states */
.tag-upcoming { 
  background: hsl(var(--status-ontime) / 0.15); 
  color: hsl(var(--status-ontime)); 
  border-color: hsl(var(--status-ontime) / 0.3); 
}
.tag-unknown { 
  background: hsl(var(--muted)); 
  color: hsl(var(--muted-foreground)); 
  border-color: hsl(var(--border)); 
}

/* Load more button styling */
.sp-more { 
  display: flex; 
  justify-content: center; 
  padding: 1rem 0 1.5rem; 
}
.sp-more button { 
  background: hsl(var(--secondary)); 
  color: hsl(var(--secondary-foreground)); 
  border: 1px solid hsl(var(--border)); 
  padding: 0.75rem 1.5rem; 
  border-radius: 12px; 
  cursor: pointer; 
  font-weight: 500;
  transition: var(--transition-smooth);
}
.sp-more button:hover {
  background: hsl(var(--card-hover));
  border-color: hsl(var(--primary) / 0.3);
  transform: translateY(-1px);
}
.sp-more .muted { 
  opacity: 0.65; 
  pointer-events: none; 
}
.sp-more .err { 
  color: hsl(var(--destructive-foreground)); 
  border-color: hsl(var(--destructive) / 0.5); 
  background: hsl(var(--destructive) / 0.15); 
}

/* Additional train card elements */
.train-details {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}

.train-detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.train-detail-item::before {
  content: '';
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.platform::before {
  content: '📍';
}

.duration::before {
  content: '🕐';
}

.traffic-impact {
  margin-top: 8px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.traffic-impact-label {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 6px;
  font-weight: 500;
}

.traffic-impact-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.traffic-impact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: hsl(var(--status-delayed) / 0.1);
  border: 1px solid hsl(var(--status-delayed) / 0.2);
  border-radius: 6px;
  min-height: 20px;
}

.traffic-impact-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.traffic-impact-text {
  font-size: 0.8rem;
  color: hsl(var(--status-delayed));
  line-height: 1.2;
  flex: 1;
}

.deviations {
  margin-top: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.deviation-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive) / 0.2);
  border-radius: 6px;
  margin-bottom: 6px;
  min-height: 24px;
}

.deviation-item:last-child {
  margin-bottom: 0;
}

.deviation-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.deviation-text {
  font-size: 0.8rem;
  color: hsl(var(--destructive));
  line-height: 1.2;
}

.next-stop {
  margin-top: 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.next-stop-text {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 8px;
}

.next-stop-name {
  color: hsl(var(--card-foreground));
  font-weight: 500;
}

.next-stop-arrow {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.amenities {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-shrink: 0;
}

.amenity-icon {
  width: 20px;
  height: 20px;
  background: hsl(var(--muted));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #station-panel {
    border-radius: 16px 16px 0 0; /* Match train panel border radius */
  }
  
  #station-title {
    font-size: 1.25rem;
    margin: 1rem 0 0.75rem 0;
    padding: 0 1rem;
  }
  
  .sp-actions {
    margin: 0.75rem 0 1rem;
  }
  
  .sp-search {
    margin: 0 0 1rem;
    padding: 0 1rem;
  }
  
  .sp-list {
    padding: 0;
    gap: 12px; /* Even spacing between cards */
    align-items: center;
  }
  
  .train-card {
    width: 320px;
    min-height: 180px;
    padding: 16px 20px; /* Consistent internal padding */
    gap: 16px;
  }
  
  .destination {
    font-size: 1rem;
  }
  
  .time {
    font-size: 1.1rem;
  }
  
  .sp-more {
    padding: 0.75rem 0 1rem;
  }
}

@media (max-width: 480px) {
  #station-title {
    font-size: 1.1rem;
  }
  
  .train-card {
    width: 280px;
    min-height: 160px;
    padding: 12px 14px; /* Consistent internal padding */
  }
  
  .destination {
    font-size: 0.95rem;
  }
  
  .sub {
    font-size: 0.8rem;
  }
  
  .time {
    font-size: 1rem;
  }
  
  .date {
    font-size: 0.75rem;
  }
}