/* Lexiara — Reise (ÖPNV/Bahn) */

:root {
  --jrny-bg: #14161f;
  --jrny-panel: #1a1d2b;
  --jrny-panel-hi: #222640;
  --jrny-border: #2b2f45;
  --jrny-text: #eee;
  --jrny-dim: #9aa0b5;
  --jrny-accent: #2f8f7b;
  --jrny-accent-hi: #44b89e;
  --jrny-warn: #e0573a;
  --jrny-ok: #4fbf7a;

  /* Modus-Farben */
  --m-fern: #b48dff;
  --m-regio: #5aa0ff;
  --m-sbahn: #4fbf7a;
  --m-ubahn: #3f6fd0;
  --m-tram: #e06363;
  --m-bus: #c77dff;
  --m-ferry: #4fc7d6;
  --m-taxi: #e0c04f;
  --m-walk: #8a90a6;
}

/* --- Desktop-Shell: Grid (header / owners / axis · edit) -------------- */

.jrny-layout {
  display: grid;
  height: 100vh;
  height: 100dvh; /* dynamische Viewport-Höhe: Mobile-Browser-UI mit einrechnen */
  grid-template-columns: minmax(300px, 380px) 1fr;
  grid-template-rows: 48px auto auto minmax(0, 1fr);
  grid-template-areas:
    "header    header"
    "owners    owners"
    "providers providers"
    "axis      edit";
  background: var(--jrny-bg);
  color: var(--jrny-text);
  overflow: hidden;
}

.jrny-header { grid-area: header; }
.jrny-header h2 { font-size: 1.2rem; margin: 0; }

/* --- Mobile-Shell: Tabs Übersicht/Planen ----------------------------- */

.jrny-mobile-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* dvh statt vh: sonst ist die Shell so hoch wie der Viewport OHNE Browser-
     Adressleiste → die Tabbar (letztes Flex-Kind) rutscht hinter die mobile
     Browser-UI und ist „meist nicht zu sehen". */
  height: 100dvh;
  background: var(--jrny-bg);
  color: var(--jrny-text);
}

.jrny-mobile-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.7rem;
}

.jrny-tabbar {
  display: flex;
  flex-shrink: 0; /* nie zusammenquetschen, auch wenn der Pane-Inhalt hoch ist */
  border-top: 1px solid var(--jrny-border);
  background: var(--jrny-panel);
}
.jrny-tabbar .tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--jrny-dim);
  padding: 0.75rem 0.5rem;
  font-size: 0.92rem;
  cursor: pointer;
}
.jrny-tabbar .tab-btn.active {
  color: var(--jrny-text);
  box-shadow: inset 0 -2px 0 var(--jrny-accent-hi);
}

.jrny-owners {
  grid-area: owners;
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--jrny-panel);
  border-bottom: 1px solid var(--jrny-border);
  overflow-x: auto;
}

.jrny-owner {
  background: transparent;
  border: 1px solid var(--jrny-border);
  color: var(--jrny-dim);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}
.jrny-owner:hover { border-color: var(--jrny-accent-hi); color: var(--jrny-text); }
.jrny-owner.active {
  border-color: var(--jrny-accent-hi);
  background: rgba(68, 184, 158, 0.12);
  color: var(--jrny-text);
}

/* --- Provider-Erreichbarkeits-Leiste ---------------------------------- */

.jrny-providers {
  grid-area: providers;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  background: var(--jrny-panel);
  border-bottom: 1px solid var(--jrny-border);
  font-size: 0.78rem;
}

.jrny-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--jrny-border);
  color: var(--jrny-dim);
  white-space: nowrap;
}
.jrny-provider.ok { color: var(--jrny-text); border-color: rgba(68, 184, 158, 0.5); }
.jrny-provider.down { color: #e6a0a0; border-color: rgba(200, 90, 90, 0.5); }
.jrny-provider.pending { opacity: 0.7; }

/* --- Linke Spalte: Zeitachse ------------------------------------------- */

.jrny-axis-inner { display: flex; flex-direction: column; height: 100%; }
.jrny-edit-inner { display: flex; flex-direction: column; gap: 0.8rem; }

.jrny-axis-col {
  grid-area: axis;
  display: flex;
  flex-direction: column;
  background: var(--jrny-panel);
  border: 1px solid var(--jrny-border);
  border-radius: 12px;
  padding: 0.8rem;
  margin: 0.8rem;
  overflow: hidden;
}

.jrny-endpoints-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--jrny-dim);
  margin-bottom: 0.5rem;
}
.jrny-ep.start { color: var(--jrny-ok); }
.jrny-ep.dest { color: var(--jrny-accent-hi); }

.jrny-timeline { flex: 1; overflow-y: auto; }

.jrny-empty-axis {
  color: var(--jrny-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 0.5rem;
}

.jrny-track {
  position: relative;
  height: 68vh;
  margin-left: 0.2rem;
  /* Mittellinie der Reise */
  background:
    linear-gradient(to bottom, transparent, transparent) no-repeat;
}
.jrny-track::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--jrny-border);
}

.jrny-leg,
.jrny-wait {
  position: absolute;
  left: 22px;
  right: 4px;
  min-height: 22px;
  border-radius: 8px;
  padding: 4px 8px;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 0.78rem;
}

.jrny-leg {
  background: var(--jrny-panel-hi);
  border-left: 4px solid var(--m-regio);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.jrny-leg:hover { background: #2a2f4f; }
.jrny-leg.selected { outline: 2px solid var(--jrny-accent-hi); }
.jrny-leg.cancelled {
  border-left-color: var(--jrny-warn);
  text-decoration: line-through;
  opacity: 0.7;
}
.jrny-leg-line { font-weight: 600; }
.jrny-leg-time { color: var(--jrny-dim); }

.jrny-leg.mode-fern  { border-left-color: var(--m-fern); }
.jrny-leg.mode-regio { border-left-color: var(--m-regio); }
.jrny-leg.mode-sbahn { border-left-color: var(--m-sbahn); }
.jrny-leg.mode-ubahn { border-left-color: var(--m-ubahn); }
.jrny-leg.mode-tram  { border-left-color: var(--m-tram); }
.jrny-leg.mode-bus   { border-left-color: var(--m-bus); }
.jrny-leg.mode-ferry { border-left-color: var(--m-ferry); }
.jrny-leg.mode-taxi  { border-left-color: var(--m-taxi); }
.jrny-leg.mode-walk  { border-left-color: var(--m-walk); }

/* Störungs-Hervorhebung NACH den Modus-Farben (gleiche Spezifität → gewinnt):
   Ausfall = roter Rand trotz Modus-Farbe; große Verspätung (≥5 min) deutlich. */
.jrny-leg.cancelled { border-left-color: var(--jrny-warn); }
.jrny-leg.delayed {
  border-left-color: var(--jrny-warn);
  box-shadow: inset 0 0 0 1px rgba(224, 87, 58, 0.5);
}
.jrny-leg-warn { color: var(--jrny-warn); font-weight: 700; }

.jrny-wait {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    rgba(255, 255, 255, 0.03) 6px, rgba(255, 255, 255, 0.03) 12px
  );
  border: 1px dashed var(--jrny-border);
  color: var(--jrny-dim);
  display: flex;
  align-items: center;
}
.jrny-delay { color: var(--jrny-warn); font-weight: 600; }

.jrny-untimed { margin-top: 0.8rem; }
.jrny-untimed h4 { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--jrny-dim); }
.jrny-untimed-chip {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--jrny-panel-hi);
  border: 1px solid var(--jrny-border);
  border-left: 4px solid var(--m-regio);
  color: var(--jrny-text);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
  font-size: 0.78rem;
}
.jrny-untimed-chip.selected { outline: 2px solid var(--jrny-accent-hi); }

/* --- Rechte Spalte: Editbereich --------------------------------------- */

.jrny-edit { grid-area: edit; overflow-y: auto; margin: 0.8rem 0.8rem 0.8rem 0; }

.jrny-panel {
  background: var(--jrny-panel);
  border: 1px solid var(--jrny-border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}
.jrny-panel h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.jrny-panel-head { display: flex; align-items: center; justify-content: space-between; }
.jrny-panel-head h3 { margin: 0; }

.jrny-note { color: var(--jrny-dim); font-size: 0.85rem; margin: 0.4rem 0; }
.jrny-hint { color: var(--jrny-dim); font-size: 0.75rem; margin: 0 0 0.5rem; }
.jrny-ro { color: var(--jrny-text); font-size: 0.9rem; }

.jrny-form { display: flex; flex-direction: column; gap: 0.5rem; }
.jrny-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--jrny-dim); }
.jrny-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.jrny-form input,
.jrny-form select {
  background: var(--jrny-bg);
  border: 1px solid var(--jrny-border);
  color: var(--jrny-text);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.jrny-form input:focus,
.jrny-form select:focus { outline: none; border-color: var(--jrny-accent-hi); }

.jrny-btn {
  background: var(--jrny-accent);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.jrny-btn:hover { background: var(--jrny-accent-hi); }
.jrny-btn.small { padding: 0.25rem 0.6rem; font-size: 0.78rem; }
.jrny-btn.tiny { padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.jrny-btn.danger { background: transparent; border: 1px solid var(--jrny-warn); color: var(--jrny-warn); }
.jrny-btn.danger:hover { background: rgba(224, 87, 58, 0.12); }
.jrny-btn.secondary { background: transparent; border: 1px solid var(--jrny-accent); color: var(--jrny-accent); }
.jrny-btn.secondary:hover { background: rgba(47, 143, 123, 0.14); }
.jrny-btn:disabled { opacity: 0.55; cursor: progress; }

.jrny-row-actions { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.jrny-lookup-error {
  margin-top: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--jrny-warn);
  background: rgba(224, 87, 58, 0.1);
  color: var(--jrny-warn);
  font-size: 0.82rem;
}

.jrny-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jrny-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--jrny-border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  color: var(--jrny-dim);
  cursor: pointer;
}
.jrny-mode.on { border-color: var(--jrny-accent-hi); color: var(--jrny-text); background: rgba(68, 184, 158, 0.1); }

/* Fahrten-Liste */
.jrny-legs { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.jrny-leg-row { border: 1px solid var(--jrny-border); border-radius: 8px; margin-bottom: 0.4rem; overflow: hidden; }
.jrny-leg-row.open { border-color: var(--jrny-accent-hi); }
.jrny-leg-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 12px auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--jrny-text);
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.82rem;
}
.jrny-leg-summary:hover { background: var(--jrny-panel-hi); }
.jrny-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--m-regio); }
.jrny-dot.mode-fern { background: var(--m-fern); }
.jrny-dot.mode-regio { background: var(--m-regio); }
.jrny-dot.mode-sbahn { background: var(--m-sbahn); }
.jrny-dot.mode-ubahn { background: var(--m-ubahn); }
.jrny-dot.mode-tram { background: var(--m-tram); }
.jrny-dot.mode-bus { background: var(--m-bus); }
.jrny-dot.mode-ferry { background: var(--m-ferry); }
.jrny-dot.mode-taxi { background: var(--m-taxi); }
.jrny-dot.mode-walk { background: var(--m-walk); }
.jrny-leg-title { font-weight: 600; }
.jrny-leg-od { color: var(--jrny-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrny-leg-clock { color: var(--jrny-dim); font-variant-numeric: tabular-nums; }
.jrny-leg-flag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  white-space: nowrap;
}
.jrny-leg-flag.delay { color: var(--jrny-warn); border: 1px solid var(--jrny-warn); }
.jrny-leg-flag.delay.severe { color: #fff; background: var(--jrny-warn); border-color: var(--jrny-warn); }
.jrny-leg-flag.cancelled { color: #fff; background: var(--jrny-warn); }

.jrny-leg-detail { padding: 0.5rem 0.6rem 0.7rem; background: var(--jrny-bg); border-top: 1px solid var(--jrny-border); }

.jrny-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.jrny-cancelled { color: var(--jrny-warn); font-weight: 600; }
.jrny-platform { color: var(--jrny-dim); }
.jrny-fresh.ok { color: var(--jrny-ok); }
.jrny-fresh.off { color: var(--jrny-dim); }

/* Zwischenziele */
.jrny-waypoints { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.jrny-wp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--jrny-border);
  font-size: 0.82rem;
}
.jrny-wp-kind {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--jrny-border);
  color: var(--jrny-dim);
}
.jrny-wp-kind.stay { color: var(--m-taxi); border-color: var(--m-taxi); }
.jrny-wp-kind.via { color: var(--m-regio); border-color: var(--m-regio); }
.jrny-wp-place { font-weight: 600; }
.jrny-wp-note { color: var(--jrny-dim); }
.jrny-wp-row .jrny-btn { margin-left: auto; }
.jrny-wp-form { margin-top: 0.5rem; }

.jrny-danger-zone { border-color: rgba(224, 87, 58, 0.4); }

/* Mobile: kompaktere Zeitachse (Server schaltet die Shell via Viewport-Hook
   um, daher keine Layout-Media-Query mehr — nur Feintuning). */
.jrny-mobile .jrny-track { height: 62vh; }
.jrny-mobile .jrny-axis-inner { height: auto; }

/* --- Fahrt-Assistent (Wizard) ----------------------------------------- */

.jrny-head-actions { display: inline-flex; gap: 0.4rem; }

.jrny-wizard { border-color: rgba(47, 143, 123, 0.45); }

.jrny-wizard-steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.74rem;
}
.jrny-wizard-steps li {
  flex: 1;
  text-align: center;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--jrny-border);
  color: var(--jrny-dim);
}
.jrny-wizard-steps li.active {
  color: var(--jrny-text);
  border-color: var(--jrny-accent);
  background: rgba(47, 143, 123, 0.14);
}

.jrny-wizard-providers { display: flex; flex-direction: column; gap: 0.4rem; }
.jrny-wizard-providers .wizard-provider { justify-content: flex-start; text-align: left; }
.wizard-provider.down { opacity: 0.7; }

.jrny-wizard-deps, .jrny-wizard-stops {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}

.jrny-dep, .jrny-stop {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  background: var(--jrny-panel-hi);
  border: 1px solid var(--jrny-border);
  border-radius: 8px;
  color: var(--jrny-text);
  cursor: pointer;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}
.jrny-dep:hover, .jrny-stop:hover { border-color: var(--jrny-accent); }
.jrny-dep:disabled, .jrny-stop:disabled { opacity: 0.55; cursor: progress; }

.jrny-dep-line, .jrny-stop-name { font-weight: 600; }
.jrny-dep-dir { color: var(--jrny-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrny-dep-time, .jrny-stop-time { color: var(--jrny-accent-hi); white-space: nowrap; }
.jrny-dep-pl, .jrny-stop-pl { color: var(--jrny-dim); white-space: nowrap; }
.jrny-stop-name { flex: 1; }