/* Live Departure International v1.01 */

/* Farben & Basis */
:root{
  --bg:#000;
  --fg:#ffa31a;
  --fg-dim:#ffb84d;
  --line:#333;
  --chip-bg:#000;
  --chip-bg-active:#111;
  --chip-shadow:0 0 0 1px #ffa31a inset, 0 0 14px rgba(255,163,26,.25);

}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,"Liberation Mono",Consolas,monospace;
  -webkit-font-smoothing:antialiased;
  font-size:clamp(14px,2.7vw,18px);
}

/* Title container (keeps icon and text on the same line and adds space underneath) */
.title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.0rem;                /* reduced from 0.5rem for tighter icon–title spacing */
  margin: 0.8rem 0 1.2rem 0;  /* slightly less top/bottom space */
}

/* Larger logo icon in header */
.title-wrap img {
  height: 2.8rem;  /* balanced size, not too dominant */
  width: auto;
  margin-right: 0.2rem; /* subtle horizontal adjustment */
}

/* Icon next to title */
.title-icon {
  height: 1.8rem;
  width: auto;
  margin-right: 0.2rem; /* align visually with text baseline */
}

/* Title block spacing */
h1{
  margin: 0 0 .25rem 0;              /* gap AFTER the underline to the buttons */
  font-size: clamp(18px,4.8vw,28px);
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--accent);
  border-bottom: 0.5px solid var(--fg);
}
h1 small{
  margin: .05rem 0 .20rem 0;         /* tiny gap to title, small gap to underline */
  display:block;
  font-size:.6em;
  opacity:.6;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* Chips / Buttons */
.chip{
  appearance:none; border:none; cursor:pointer;
  color:var(--fg); background:var(--chip-bg);
  padding:.45rem .9rem; border-radius:999px;
  box-shadow:var(--chip-shadow);
  transition:transform .06s ease, box-shadow .15s ease;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:clamp(14px,2.6vw,16px); line-height:1;
}
.chip:active{transform:scale(.98)}
.chip.active{background:var(--chip-bg-active)}

/* Button-Zeile */
#mode-buttons{
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  flex-wrap:wrap; margin:.6rem auto;
}

#mode-buttons .chip{padding:.35rem .8rem}

/* Anzeige-Chip in der Mitte (aktuelle Station) */
.display-chip{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:-1.50rem 0 .4rem;   /* moved slightly upward */
  pointer-events:auto;
}

.display-chip #currentStationLabel{
  display:inline-block;
  margin-top: 1.5rem;  
  max-width:min(72vw,680px);
  padding:.35rem 1rem;    /* slightly slimmer */
  border:2px solid var(--fg);
  border-radius:2rem;
  box-shadow:0 0 12px rgba(244,167,59,.25);
  font-size:1rem;      /* a bit larger for better visibility */
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;

  /* --- Option A – Glass effect --- */
  background: rgba(255, 255, 255, 0.08);   /* stronger glass tint */
  border: 1px solid rgba(255, 163, 26, 0.35);
  box-shadow: 0 0 14px rgba(255, 163, 26, 0.25),
              inset 0 0 6px rgba(255, 255, 255, 0.08);
  color: var(--fg-dim);
  font-weight: 500;
  letter-spacing: 0.4px;
  backdrop-filter: blur(4px);              /* adds real glass blur */
  -webkit-backdrop-filter: blur(4px);
}

/* Autocomplete wrapper */
.ac-wrap {
  max-width: min(400px, 92vw);
  width: 100%;
  margin: 0.6rem auto;
  padding: 0;
  display: none;
}

.ac-wrap.is-open {
  display: block;
}

.ac-label {
  display: block;
  margin: 0 0 .25rem .2rem;
  color: var(--fg-dim);
}

/* Input field */
.ac-input {
  width: 100%;
  font-size: 1rem;
  line-height: 1.1;
  padding: 0.55rem 1rem;
  margin-top: 0.35rem;
  border-radius: 999px;                        /* pill shape */
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);       /* subtle transparent */
  color: var(--fg);
  box-shadow: 0 0 18px rgba(255, 165, 0, 0.12); /* soft glow */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ac-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(255, 165, 0, 0.25);
}

/* Input wrapper for centering */
.ac-input-wrap {
  display: flex;
  justify-content: center;
}

.ac-input-wrap .ac-input {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

/* Suggestions dropdown */
.ac-list {
  position: relative;
}

.ac-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 0.95rem;
  margin-top: .25rem;
  text-align: left;
  list-style: none;
  padding: .25rem 0;
  max-height: 280px;
  overflow: auto;
  background: #0e0e0e;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
  z-index: 1000;
}

/* Suggestions items */
.ac-item {
  padding: .45rem .9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ac-item:hover,
.ac-item.is-active {
  background: rgba(255,165,0,0.1);
  color: var(--accent);
}

/* Departure table layout */
.departure-table {
  width: min(980px, 94vw);
  margin: 0 auto 2rem;
  border-collapse: collapse;
  table-layout: auto;   /* was fixed */
}

/* Header cells */
.departure-table thead th {
  font-weight: 700;
  padding: .5rem .35rem;
  border-bottom: 2px solid var(--line);
}

/* Prevent clipping of the Abfahrt toggle in the header */
.departure-table thead th:last-child {
  position: relative;
  overflow: visible; /* ensures nothing gets cut */
}

.departure-table thead th:last-child button {
  position: absolute;
  right: 0.3rem;       /* pushes glow fully outside border */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  font-size: 1.1em;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem 0.8rem;
  border-radius: 0.9rem;
}

/* Body cells */
.departure-table tbody td {
  padding: .5rem .35rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Linie column (left) */
.departure-table th:nth-child(1),
.departure-table td:nth-child(1) {
  text-align: left;
  min-width: 3ch;
  max-width: 14ch;
  width: 1%;
  white-space: nowrap;
  padding-right: 0.3rem;
}

/* Ziel column (middle) */
.departure-table th:nth-child(2),
.departure-table td:nth-child(2) {
  width: 100%;
  max-width: 40ch;           /* limit visible text length */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Abfahrt column (right) */
.departure-table th:nth-child(3),
.departure-table td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
  min-width: 3ch;
  width: auto;
}

/* Footer row (version info) */
.departure-table tfoot td {
  border-top: 2px solid var(--line);
  padding: 0.4rem 0.6rem 0 0.6rem;  /* right spacing + less bottom gap */
  font-family: var(--mono, monospace);
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
  opacity: 0.8;
  background: transparent;
}

/* Right-align the version info */
/* Version info cell */
.departure-table tfoot td.version-info {
  text-align: right;
  border: none;
}

/* Sichtbar, zentriert, mit vernünftiger Breite/Schrift – wie vor der Änderung */

.select-chip{
  display: none;                    /* hidden by default */
  justify-content: center;
  margin: .8rem auto .2rem;
  height: auto;
  pointer-events: auto;
}

/* kleiner Pfeil rechts im Chip */
.select-chip{ position: relative; }
.select-chip::after{
  content: "▾";
  position: relative;
  left: -1.8rem;
  align-self: center;
  pointer-events: none;
  color: var(--fg-dim);
}

/* Mobile Feinschliff */
@media(max-width:480px){
  .title-wrap{margin:.6rem 0 0}
  #mode-buttons{gap:.5rem}
  .display-chip #currentStationLabel{font-size:1rem; padding:.4rem .9rem}
  table{margin-bottom:1.4rem}
  input,select,textarea{font-size:16px}
  
  .departure-table th:nth-child(2),
  .departure-table td:nth-child(2){
    max-width:28ch;
  }
}

/* Keep chip below buttons when Andere is open */
body.mode-other #currentStationWrap,
body.mode-other .display-chip{
  margin-top:-1.5rem !important;  /* fixed distance under the buttons */
}

body.mode-other .ac-wrap{
  margin-top:.35rem;             /* small gap between chip and input */
}

/* Defensive stacking (prevents accidental overlap) */
#currentStationWrap,
.display-chip { position:relative; z-index:0; }

.station-area {
  position: relative;
  margin: 1rem auto;
  text-align: center;
}

#currentStation {
  margin-bottom: 0.5rem;
  cursor: pointer;        /* show hand cursor */
  pointer-events: auto;   /* ensure clicks reach JS */
}

.version-info {
  text-align: right;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35); /* subtle transparent white */
  font-style: italic; /* optional */
  padding-top: 0.3rem;
}

/* Style the dropdowns (Favoriten & In der Nähe) */
.select-chip select {
  color: var(--fg);
  background: var(--chip-bg);
  border-radius: 999px;
  border: 0;
  padding: .55rem 2.2rem .55rem .9rem;
  box-shadow: var(--chip-shadow);
  font: inherit;
  appearance: none;
  outline: none;
  text-align: left;
  min-width: 10rem;   /* adjust as needed */
  max-width: 20rem;   /* adjust as needed */
  cursor: pointer;
}

/* Dropdown options: system native, readable */
.select-chip select option {
  color: black;
  background: white;
}
/* --- v6.6 dev1 cosmetic tweaks --- */

/* Table header strip */
.departure-table thead th {
  background: rgba(255, 165, 0, 0.08); /* subtle orange tint */
}

/* Keep button glow while unifying font */
.departure-table thead th button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--chip-bg, #1a1208);
  border: 1px solid var(--accent, #ffb84d);
  border-radius: 1.2rem;
  box-shadow: 0 0 0.8rem rgba(255, 184, 77, 0.2);
  padding: 0.1rem 0.6rem;
  transition: background 0.2s, box-shadow 0.2s;
}

/* Button glow adjustment */
.chip {
  box-shadow: 0 0 4px rgba(255, 165, 0, 0.25);
}
.chip.active {
  box-shadow: 0 0 12px rgba(255, 165, 0, 0.6);
}

/* Typography refinement for v6.6 */
.departure-table {
  font-size: 1rem;        /* keep base size */
  line-height: 1.4;       /* slightly more breathing room */
}

.departure-table thead th {
  font-size: 0.9rem;      /* a bit smaller than body cells */
  letter-spacing: 0.5px;  /* subtle separation for headers */
}

.departure-table thead th button.chip {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit;
  text-transform: none;
}
.version {
  position: fixed;
  right: 0.8rem;
  bottom: 0.5rem;
  font-family: var(--mono, monospace);
  font-size: 0.9rem;
  color: #888;          /* softer gray tone */
  opacity: 0.8;
  font-style: italic;
  text-align: right;
  white-space: nowrap;
  z-index: 10;
}

/* Flag toggle button styled like other chips */
#countryToggle {
  margin-left: 0.6rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--bg-dark, #18120a);
  border: 1px solid #b36b00;
  border-radius: 1rem;
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.25);
  color: #ffa733;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.2s, transform 0.1s;
  vertical-align: middle;
}

#countryToggle:hover {
  box-shadow: 0 0 12px rgba(255, 160, 0, 0.45);
  transform: scale(1.03);
}

#countryToggle:active {
  transform: scale(0.98);
}