.reddit-sans-departures {
  font-family: "Reddit Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 750;
  font-style: normal;
}

.reddit-sans-body {
  font-family: "Reddit Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    margin: 10px;
    padding: 0;
}

body{
  font-family: "Reddit Sans", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #96B68B;
    color: #333;
    
}

/* Header stylling was done by myself */
header{
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}
#mainNav{
  --nav-bg: #0C1700;
  margin: 0;
  padding: 10px;
  color: white;
  background-color: var(--nav-bg);
  position: relative; /* create stacking context so z-index works */
  z-index: 1000; /* keep nav above other page content */
}

#logo {
    height: 25px;
    padding-left: 10px;
    vertical-align: middle;
}

#navgrid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
}

/* Clock was done partially by Github Co-Pilot and myself for stylling */
#liveClock {
  font-family: "Reddit Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, monospace;
  font-size: 1.9em; 
  font-weight: 700; 
  text-align: right;
  color: #ffffff;
  padding-right: 12px;
  justify-self: end;
  -webkit-text-stroke: 0.2px rgba(0,0,0,0.28);
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.clock-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#clockToggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  cursor: pointer;
}

/* .pressed indicates 24H mode */
#clockToggle.pressed {
  background: rgba(255,255,255,0.12);
}

#tableGrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    /* padding: 20px; */
      position: relative;
  z-index: 1;
}

/* Departures table was created by Github Copilot and stylled by myself */
#departuresTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "Reddit Sans", Arial, Helvetica, sans-serif;
  color: #eafaf0;
  background-color:#234721;
}

#departuresTable th, #departuresTable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}

#departuresTable th {
  background: rgba(255,255,255,0.03);
  font-weight: 700;
  color: #fff;
}

.time-depart { color: #b7f3b7; font-weight: 700; }
.time-arrive { color: #b7d2ff; font-weight: 700; }

/* Status styles */
.status-on { color: #b7f3b7; font-weight: 700; }
.status-delayed { color: #ffd1d1; background: rgba(255,50,50,0.04); font-weight: 800; }
.status-early { color: #d1ffd6; font-weight: 700; }
.status-cancelled { color: #ffb3b3; text-decoration: line-through; font-weight: 800; }

/* zebra rows */
#departuresTable tbody tr:nth-child(odd) { background: rgba(255,255,255,0.01); }
#departuresTable tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Station selector was done partially by myself and with Github Copilot for SVG styling */
#stationSelect {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
#stationDropdown {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Station panel layout */
#stationPanel { margin: 8px; }
#stationLayout { display: flex; gap: 12px; align-items: stretch; }
#lineSvgWrap { width: 40px; flex: 0 0 40px; }
#lineSvgWrap { width: 40px; flex: 0 0 40px; }
#verticalLine { width: 6px; background: #2A4D28; border-radius: 3px; margin-top: 6px; margin-bottom: 6px; height: 100%; position: relative; z-index: 0; }

/* scale down the inline SVG so its circles align visually with the button list height */
#inlineLineSvg { width: 30px; display: block; transform-origin: top center; }

/* Adjust the SVG scale — tweak the scaleY value to better line up with your buttons */
.line-scale-small { transform: scaleY(0.9); }
.line-scale-medium { transform: scaleY(0.8); }
.line-scale-tight { transform: scaleY(0.75); }

#stationList { list-style: none; margin: 0; padding: 0; }
#stationList li { margin: 6px 0; }

.station-row { display: flex; align-items: center; gap: 8px; }
.station-dot { width: 20px; height: 20px; display: inline-block; color: #2A4D28; }
.station-dot svg { width: 100%; height: 100%; }
.station-dot.active { color: #ffffff; }

.station-btn {
  display: inline-block;
  width: 180px;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  color: #fff;
  background-color: rgba(0,0,0,0.08);
  cursor: pointer;
}

.station-btn:focus { outline: 3px solid rgba(255,255,255,0.12); }
.station-btn.selected { background-color: #ffffff44; color: #fff; font-weight: 700; }

/* When JS sets data attributes on the <circle> elements to indicate selection, use CSS as a fallback for inline SVG interactions */
svg circle[data-selected="true"] { fill: white !important; stroke: #2A4D28 !important; }

.station-current {
  display: inline-block;
  width: 180px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-style: italic;
  pointer-events: none; 
}