:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-bg: #f7f8fc;
    --color-card-bg: #ffffff;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #7f8c8d;
    --color-text-accent: #3498db;
    --color-border: #ecf0f1;
    --color-green: #27ae60;
    --color-red: #e74c3c;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  }
  
  html, body {
    height: 100%; /* Crucial for flex layout to fill screen */
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .main-view {
    flex-grow: 1; /* Takes up available vertical space */
    background-color: var(--color-card-bg);
    padding: 20px; /* Padding around map and details scroll area */
    overflow: hidden; /* Prevent main-view itself from scrolling */
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
      .main-view {
          margin: 20px auto;
          max-width: 420px;
          border-radius: 20px;
          box-shadow: var(--shadow);
          /* For desktop card, let's define a max-height or let flexbox handle it */
          /* Since body is 100vh, and main-view is flex-grow, it will size correctly within its max-width */
          height: calc(100vh - 40px - 70px); /* body padding - nav height, adjust if needed */
          max-height: 90vh; /* Example max height for desktop card */
      }
      body {
           padding-top: 20px;
      }
  }
  
  .map-card-wrapper {
    height: clamp(380px, 50vh, 550px); /* Made map taller */
    flex-shrink: 0; /* Prevent map from shrinking */
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px; /* Space between map and details */
    box-shadow: var(--shadow);
    position: relative;
  }
  #map { height: 100%; width: 100%; }
  
  .details-scroll-container {
      flex-grow: 1; /* Takes remaining space in main-view */
      overflow-y: auto; /* Enables scrolling for the details section */
      position: relative; /* For any potential absolute children if needed */
  }
  
  .leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,0.7) !important; padding: 2px 5px !important; border-radius: 3px; }
  .leaflet-control-zoom a { background-color: var(--color-card-bg) !important; color: var(--color-text-primary) !important; border-bottom: 1px solid var(--color-border) !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; }
  .leaflet-control-zoom a:hover { background-color: #f4f4f4 !important; }
  
  .details-section { padding: 0; /* Original padding was 0, keep it */ }
  .last-updated { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 25px; text-align: left; }
  /*.route-info {  container for route stops  }*/
  
  .route-stop { display: flex; align-items: flex-start; margin-bottom: 20px; position: relative; }
  .route-stop:last-child { margin-bottom: 0; }
  .route-stop:not(:last-child)::before {
      content: ''; position: absolute; left: 11px; top: 28px; bottom: -15px; width: 2px; background-color: var(--color-border); z-index: 0;
  }
  .route-stop.status-passed:not(:last-child)::before,
  .route-stop.status-arrived:not(:last-child)::before {
      background-color: var(--color-green);
  }
  .route-stop.status-approaching:not(:last-child)::before {
      background-color: var(--color-text-accent);
  }
  
  .stop-graphic { display: flex; flex-direction: column; align-items: center; margin-right: 18px; position: relative; z-index: 1; flex-shrink: 0; }
  .stop-graphic .icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: var(--color-card-bg); border-radius: 50%; }
  .stop-graphic .icon svg { width: 20px; height: 20px; }
  
  .route-stop.status-upcoming .stop-graphic .icon svg circle{
    fill: var(--color-text-primary);
  }
  .route-stop.status-arrived .stop-graphic .icon svg circle,
  .route-stop.status-passed .stop-graphic .icon svg circle {
    fill: var(--color-green);
  }
  .route-stop.status-approaching .stop-graphic .icon svg {
    stroke: var(--color-text-accent);
    fill: none;
  }
  .stop-graphic .icon.dot svg { width: 12px; height: 12px; fill: var(--color-text-primary); }
  
  .stop-details { display: flex; flex-grow: 1; align-items: center; padding-top: 1px; }
  .stop-name { font-size: 1rem; color: var(--color-text-primary); font-weight: 500; }
  .stop-time { font-size: 0.95rem; font-weight: 500; text-align: right; line-height: 1.3; }
  .stop-time .original-time.strike-through { text-decoration: line-through; color: var(--color-text-secondary); font-weight: 400; display: block; font-size: 0.85em; }
  .stop-time .updated-time.red-time { color: var(--color-red); }
  .stop-time.green-time { color: var(--color-green); }
  
  .bottom-nav {
    background-color: var(--color-card-bg); border-top: 1px solid var(--color-border); padding: 5px 0; display: flex; justify-content: space-around; align-items: center; height: 70px; box-sizing: border-box; flex-shrink: 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  }
  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--color-text-secondary); font-size: 0.75rem; font-weight: 500; flex: 1; height: 100%; transition: color 0.2s ease-in-out; }
  .nav-item .nav-icon svg { width: 24px; height: 24px; margin-bottom: 4px; stroke-width: 1.5; transition: stroke 0.2s ease-in-out; }
  .nav-item.active { color: var(--color-text-accent); }
  .nav-item.active .nav-icon svg { stroke: var(--color-text-accent); fill: var(--color-text-accent); }
  .nav-item:hover { color: var(--color-text-accent); }
  .nav-item:hover .nav-icon svg { stroke: var(--color-text-accent); fill: var(--color-text-accent); }