/* ======================================================================
   DEPARTURE BOARD STYLES
   ====================================================================== */

/* ----------------------------------------------------------------------
   CSS VARIABLES / DESIGN TOKENS
   Modify these to customize colors, spacing, and sizing globally
   ---------------------------------------------------------------------- */

:root {
  /* Color palette */
  --bg: linear-gradient(180deg, #0b0f1a, #081021);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --accent: #72e0a1;
  --danger: #ff6b6b;
  
  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  --large-scale: 6vw; /* Base font size for large displays */
  
  /* Overlay colors (max 10% transparency = min 0.9 opacity) */
  --overlay-light: rgba(255, 255, 255, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.9);
  --overlay-strong: rgba(0, 0, 0, 0.95);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --border-muted: rgba(255, 255, 255, 0.1);
  
  /* Text shadows (subtle light glow effect visible on dark background) */
  --text-shadow-light: 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 8px rgba(255, 255, 255, 1);
  
  /* Layout spacing - adjust these to control vertical rhythm */
  --vertical-gap: 0em;         /* Gap between departure rows */
  --header-gap: 0.5em;         /* Gap between header elements */
  --departure-padding: 0px 0px; /* Internal padding for each departure */
  --departure-max-width: 100vw; /* Maximum width of departure items */
  
  /* Options panel width (responsive) */
  --options-panel-width: min(360px, 100vw);
  
  /* Text size scale multipliers - used with .text-size-* classes */
  --scale-tiny: 0.5;
  --scale-small: 0.75;
  --scale-medium: 0.9;
  --scale-large: 1;
  --scale-xlarge: 1.25;
}

/* Mobile breakpoint - increase base font scale on small screens */
@media (max-width: 600px) {
  :root {
    --large-scale: 10vw;
  }
}


/* ----------------------------------------------------------------------
   BASE & RESET
   ---------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}


/* ----------------------------------------------------------------------
   MAIN LAYOUT
   ---------------------------------------------------------------------- */

.app-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Shift content left when options panel is open */
body.options-open .app-root {
  transform: translateX(calc(-1 * var(--options-panel-width)));
  transition: transform 280ms ease-in-out;
}

.board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--header-gap);
  text-align: center;
  max-width: 90vw;
}


/* ----------------------------------------------------------------------
   HEADER SECTION
   ---------------------------------------------------------------------- */

.header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  width: 100%;
  position: relative; /* Allows absolute positioning of header-right */
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}

/* Station Dropdown */
.station-dropdown-container {
  position: relative;
  display: inline-block;
}

.station-title {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.8em;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.station-title:hover {
  opacity: 0.9;
}

.dropdown-arrow {
  font-size: 0.7em;
  margin-left: 4px;
}

.station-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: var(--overlay-medium);
  border-radius: 6px;
  padding: 6px;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 6px 18px var(--shadow-color);
  z-index: 1000;
  display: none;
}

.station-dropdown-menu.open {
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;
}

.station-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.station-dropdown-item:hover,
.station-dropdown-item.selected {
  background: var(--text-primary);
  color: #081021;
}

.station-dropdown-empty {
  padding: 8px;
  font-size: 0.9em;
  color: var(--text-secondary);
  font-style: italic;
}

.status-chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--overlay-medium);
  color: var(--text-primary);
  display: none;
}

.status-chip.visible {
  display: inline-block;
  margin-top: 6px;
}


/* ----------------------------------------------------------------------
   BUTTONS
   Unified button styles for all interactive elements
   ---------------------------------------------------------------------- */

/* Base button style (used by options actions and language flags) */
button {
  padding: 4px 4px;
  border-radius: 6px;
  background: var(--overlay-light);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

button:hover {
  background: var(--overlay-light);
}

button:active {
  background: var(--overlay-strong);
}

/* Language flag buttons */
.language-flag {
  padding: 2px 2px;
  font-size: 1em;
}

.language-flag.active {
  background: var(--text-primary);
  color: #081021;
  border-color: var(--text-primary);
}

.language-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Gear button - uses base button styles but keeps custom size */
.gear-btn {
  font-size: 20px;
}

/* Fixed gear button in top-right corner of viewport */
.global-gear {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 1300;
}

.global-gear .gear-btn {
  font-size: 26px;
}


/* ----------------------------------------------------------------------
   DEPARTURES LIST
   Adjust --vertical-gap in :root to control spacing between rows
   ---------------------------------------------------------------------- */

.departures {
  display: flex;
  flex-direction: column;
  gap: var(--vertical-gap);
  width: 100%;
  align-items: center;
}

.departure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vertical-gap);
  padding: var(--departure-padding);
  border-radius: 6px;
  width: 100%;
  max-width: var(--departure-max-width);
  box-sizing: border-box;
}

.departure-destination {
  /* Uses proportional UI font; monospace reserved for timers */
  font-family: inherit;
  font-weight: 900;
  font-size: calc(var(--large-scale) * 0.8);
  color: var(--accent);
  display: block;
  margin: 0;
  padding: 0;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  text-shadow: var(--text-shadow-light);
}

.departure-time {
  font-family: var(--mono);
  font-weight: 800;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  text-shadow: var(--text-shadow-light);
}

.departure-time-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: calc(var(--large-scale) * 0.8 * 0.8);
  color: var(--text-primary);
}

.departure-situations {
  color: var(--danger);
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.empty-state {
  color: var(--text-secondary);
  font-weight: 700;
  padding: 12px 10px;
  border-radius: 6px;
}


/* ----------------------------------------------------------------------
   TEXT SIZE UTILITY CLASSES
   Apply .text-size-{tiny|small|medium|large|xlarge} to <html>
   ---------------------------------------------------------------------- */

.text-size-tiny .departure-destination,
.text-size-tiny .departure-time-wrap {
  font-size: calc(var(--large-scale) * (var(--scale-tiny) * 0.8));
}

.text-size-small .departure-destination,
.text-size-small .departure-time-wrap {
  font-size: calc(var(--large-scale) * (var(--scale-small) * 0.8));
}

.text-size-medium .departure-destination,
.text-size-medium .departure-time-wrap {
  font-size: calc(var(--large-scale) * (var(--scale-medium) * 0.8));
}

.text-size-large .departure-destination,
.text-size-large .departure-time-wrap {
  font-size: calc(var(--large-scale) * (var(--scale-large) * 0.8));
}

.text-size-xlarge .departure-destination,
.text-size-xlarge .departure-time-wrap {
  font-size: calc(var(--large-scale) * (var(--scale-xlarge) * 0.8));
}


/* ----------------------------------------------------------------------
   OPTIONS PANEL (Slide-in from right)
   ---------------------------------------------------------------------- */

.options-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: var(--options-panel-width);
  background: var(--bg);
  box-shadow: -8px 0 24px var(--shadow-color);
  transform: translateX(100%); /* Hidden by default */
  transition: transform 280ms ease-in-out;
  padding: 20px;
  overflow: auto;
  z-index: 1200;
  color: var(--text-primary);
}

.options-panel.open {
  transform: translateX(0); /* Slide in */
}

.options-panel h3 {
  margin-top: 0;
  color: var(--text-primary);
}

.options-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.options-row label {
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.options-row input[type='text'],
.options-row input[type='number'],
.options-row select {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-muted);
  background: transparent;
  color: var(--text-primary);
}

/* Station autocomplete styles */
.station-autocomplete-wrap { 
  position: relative; 
  width: 100%; 
}

.station-autocomplete-wrap > input[type='text'] { 
  width: 100%; 
  box-sizing: border-box; 
}

/* Configurable spacing and highlight tokens for the autocomplete list */
:root {
  --autocomplete-item-gap: 6px;
  --autocomplete-highlight-bg: var(--text-primary);
  --autocomplete-highlight-fg: #081021;
}

.station-autocomplete-list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2000;
  list-style: none;
  margin: 6px 0 0 0;
  padding: 6px;
  display: none;
  border-radius: 6px;
  overflow: auto;
  background: var(--overlay-medium);
  box-shadow: 0 6px 18px var(--shadow-color);
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--autocomplete-item-gap);
}

.station-autocomplete-list.open { 
  display: grid; 
}

.station-autocomplete-list li {
  padding: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  border-radius: 4px;
}

/* Invert colors when active (keyboard) or hovered by mouse */
.station-autocomplete-list li.highlighted,
.station-autocomplete-list li:hover {
  background: var(--autocomplete-highlight-bg);
  color: var(--autocomplete-highlight-fg);
}


.options-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.options-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  padding: 8px 12px;
  background: var(--overlay-strong);
  color: var(--text-primary);
  border-radius: 6px;
  transition: opacity 240ms ease-in-out;
  display: none;
}

.options-toast.visible {
  display: block;
}


/* ----------------------------------------------------------------------
   TRANSPORT MODE CHECKBOXES
   ---------------------------------------------------------------------- */

.modes-checkboxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mode-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.92em;
  color: var(--text-primary);
}

.mode-checkbox-label span {
  margin-left: 6px;
}

.mode-icon {
  font-size: 1em;
  display: inline-block;
  width: 1.3em;
  text-align: center;
  text-shadow: var(--text-shadow-light);
}

.mode-checkbox-label input[type=checkbox] {
  margin-left: 4px;
  width: 14px;
  height: 14px;
}


/* ----------------------------------------------------------------------
   DEBUG PANEL
   Controlled by .open class; used for development diagnostics
   ---------------------------------------------------------------------- */

.debug-panel {
  display: none;
  max-width: 90vw;
  overflow: auto;
  padding: 8px;
  border-radius: 6px;
  background: var(--overlay-strong);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 0.9em;
}

.debug-panel.open {
  display: block;
}


/* ----------------------------------------------------------------------
   UTILITY CLASSES
   ---------------------------------------------------------------------- */

/* Screen reader only - visually hidden but accessible */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------
   APP FOOTER (Version & GitHub link)
   ---------------------------------------------------------------------- */

.app-footer {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 1000;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--overlay-medium);
  padding: 6px 10px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.app-footer a {
  color: var(--accent);
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

/* Service Worker Update Toast */
#sw-update-toast {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 2000;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--overlay-strong);
  padding: 8px 12px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 240ms ease-in-out;
}

#sw-update-toast.hidden {
  opacity: 0;
  pointer-events: none;
}