:root {
  --rail-ink: #1e2d42;
  --rail-muted: #65758b;
  --rail-line: #e4eaf1;
  --rail-blue: #2457a7;
  --rail-paper: #f6f8fb;
}
html, body { min-height: 100%; }
body { margin: 0; color: var(--rail-ink); background: var(--rail-paper);
       font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--rail-blue); }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-content { flex: 1; }
.brand { letter-spacing: -.05em; font-size: 1.35rem; color: #162d4e; }
.brand-accent { color: var(--rail-blue); }
.brand-mark { display: inline-flex; width: 2.2rem; height: 2.2rem;
    align-items: center; justify-content: center; background: var(--rail-blue);
    border-radius: .6rem; color: white; margin-right: .45rem; letter-spacing: normal; }
.navbar { min-height: 74px; }
.nav-link { color: var(--rail-muted); font-size: .94rem; font-weight: 550; }
.nav-link.active { color: var(--rail-blue) !important; }
.nav-import { border-radius: .7rem; padding: .6rem 1rem; }
.btn-primary { --bs-btn-bg: #2457a7; --bs-btn-border-color: #2457a7; --bs-btn-hover-bg: #1e488a;
               --bs-btn-hover-border-color: #1e488a; }
.btn-outline-primary { --bs-btn-color: #2457a7; --bs-btn-border-color: #2457a7; }
.page-title { font-weight: 760; letter-spacing: -.045em; font-size: clamp(1.85rem, 4vw, 2.5rem); }
.page-kicker { letter-spacing: .13em; text-transform: uppercase; font-size: .73rem;
               font-weight: 760; color: var(--rail-blue); }
.page-subtitle { color: var(--rail-muted); line-height: 1.65; }
.panel { background: white; border: 1px solid var(--rail-line); border-radius: 1rem;
         box-shadow: 0 3px 18px rgba(27, 46, 77, .04); }
.panel-heading { padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--rail-line); }
.panel-body { padding: 1.25rem; }
.stat-number { font-size: 1.8rem; font-weight: 770; letter-spacing: -.05em; }
.stat-label { color: var(--rail-muted); font-size: .84rem; }
.map-frame { width: 100%; height: min(58vh, 540px); min-height: 340px; border-radius: .7rem; z-index: 0; }
.map-tiles-muted { filter: grayscale(.92) saturate(.2) brightness(1.05); }
.map-note { color: var(--rail-muted); font-size: .82rem; }
.icon-circle { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center;
               justify-content: center; border-radius: .75rem; background: #eaf0fa; color: var(--rail-blue); }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--rail-muted); }
.empty-state i { font-size: 2.2rem; color: #99aac4; }
.timeline-leg { position: relative; padding: .25rem 0 1.5rem 2rem; border-left: 2px solid #dbe5f3;
                margin-left: .4rem; }
.timeline-leg::before { content: ""; position: absolute; left: -.41rem; top: .5rem;
                        width: .7rem; height: .7rem; background: var(--rail-blue);
                        border: 2px solid #fff; outline: 1px solid var(--rail-blue); border-radius: 50%; }
.timeline-leg:last-child { border-color: transparent; padding-bottom: .4rem; }
.leg-time { font-variant-numeric: tabular-nums; font-weight: 680; }
.leg-muted { color: var(--rail-muted); font-size: .85rem; }
.source-pill { background: #eff4fb; color: #325b8d; border-radius: 3rem; font-size: .75rem;
               padding: .3rem .7rem; font-weight: 650; }
.form-label { font-size: .84rem; font-weight: 650; }
.form-control, .form-select { border-color: #d7e0ed; border-radius: .6rem; }
.footer-bar { border-top: 1px solid var(--rail-line); background: white; color: var(--rail-muted);
              font-size: .81rem; padding: 1.1rem 0; }
.footer-version { color: inherit; text-decoration: none; }
.footer-version:hover { color: var(--rail-blue); }
#blazor-error-ui { display: none; padding: .9rem; position: fixed; bottom: 0; left: 0;
                   right: 0; z-index: 1000; background: #fff3cd; }
@media (max-width: 767.98px) {
  .panel-heading, .panel-body { padding: 1rem; }
  .nav-import { display: inline-block; margin: .6rem 0; }
  .page-title { font-size: 1.8rem; }
}


/* Accessible typeahead overlays; no separate public autocomplete API. */
.station-combobox { position: relative; }
.station-suggestions {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: white;
  border: 1px solid var(--rail-line);
  border-radius: .65rem;
}
.station-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: .45rem;
  padding: .6rem .7rem;
  text-align: left;
  color: var(--rail-ink);
}
.station-suggestion:hover, .station-suggestion:focus-visible {
  background: #ecf2fb;
  outline: none;
}
.station-suggestion-name { font-size: .9rem; }
.station-suggestion-code { font-size: .76rem; color: var(--rail-muted); white-space: nowrap; }
.station-suggestion-empty { padding: .65rem; font-size: .83rem; color: var(--rail-muted); }


/* Manual journey field-level feedback. Red frames remain visible even when
   Bootstrap-specific defaults and other form rules are applied. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    padding-right: 2.25rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .22rem rgba(220, 53, 69, .17);
}
.leg-has-errors { border-color: #dc3545 !important; }
.invalid-feedback.d-block { font-size: .8rem; }


/* Timetable-inspired, independent transport badges for the journey logbook.
   All shapes are authored in CSS; pictograms come from Font Awesome Free. */
.departure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .6rem;
  row-gap: .25rem;
  min-height: 1.65rem;
}
.departure-clock {
  color: var(--rail-ink);
  font-size: .95rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.departure-service {
  font-size: .95rem;
  color: var(--rail-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 740;
}
.departure-train-no {
  color: var(--rail-muted);
  font-size: .77rem;
  white-space: nowrap;
}
/* One shared departure-board badge system for every RailDiary screen.
   The references use operator colours in long distance, category colours in
   regional traffic, and line colours for S-Bahn. Keep SEV unchanged below. */
.transport-badge {
  min-width: 2.15rem;
  height: 1.65rem;
  padding: 0 .36rem;
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: .3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
  color: #fff;
  background: #44546a;
  vertical-align: middle;
  white-space: nowrap;
}
.transport-badge i { font-size: .89rem; }
.transport-badge-numbered {
  gap: .28rem;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 1.65rem;
  max-width: 100%;
  padding: .28rem .46rem;
  font-size: .75rem;
  letter-spacing: 0;
  line-height: 1.1;
}
.transport-badge-numbered .transport-badge-line {
  font-weight: 800;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* Fernverkehr: operator colours where the designation identifies it. */
.transport-ice, .transport-ic {
  background: #fff;
  color: #202124;
  border-color: #c6c9ce;
  min-width: 2.65rem;
}
.transport-flx { background: #97d700; color: #172010; }
.transport-tgv { background: #b94191; color: #fff; }
.transport-nj { background: #e2002a; color: #fff; }
.transport-rj { background: #d00026; color: #fff; }
.transport-night { background: #44366c; color: #fff; }
/* Regional traffic: the mode, not the operator, determines the badge. */
.transport-re, .transport-rb { background: #525761; color: #fff; }
.transport-dz { background: #da6ba2; color: #151515; }
/* S-Bahn: examples from the supplied reference; green for other lines. */
.transport-s {
  background: #168340;
  color: #fff;
  border-radius: .3rem;
  min-width: 1.65rem;
}
.transport-s5 { background: #ec7400; color: #111; }
.transport-s8 { background: #f8f200; color: #111; }
.transport-u { background: #2361ad; border-radius: .23rem; min-width: 1.65rem; width: 1.65rem; padding: 0; font-size: .9rem; }
.transport-tram { background: #a13a38; }
.transport-bus { background: #664f95; }
.transport-sev {
  background: #a22168; color: #fff; width: auto; min-width: 3.5rem;
  gap: .25rem; padding: 0 .5rem; white-space: nowrap;
}
.transport-sev .sev-direction,
.transport-sev .sev-bus { color: #ffd348; }
.transport-sev .sev-direction { font-size: .65rem; }

.transport-ferry { background: #1a7784; }
.transport-taxi { background: #b18b28; color: #192234; }
.transport-train { background: #465e77; }
@media (max-width: 575.98px) {
  .departure-row { column-gap: .45rem; }
  .departure-clock, .departure-service { font-size: .9rem; }
}

/* Inline Bootstrap modal (no JS dependency): keep the rail diary dialog
   above the navigation, with a usable scroll body on tablet and desktop. */
.modal.d-block { z-index: 1060; }
.modal-backdrop.show { z-index: 1055; }
.modal-dialog-scrollable .modal-body { overscroll-behavior: contain; }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .4rem; }
}

/* Compact home-list status labels: always one line, no distorted pill. */
.home-journey-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: center;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 1.65rem;
  padding: .28rem .65rem;
  border-radius: .45rem;
  border: 1px solid transparent;
  font-size: .75rem;
  font-weight: 680;
}
.home-journey-status-planned {
  background: #edf3fb;
  border-color: #d9e5f5;
  color: #315a91;
}
.home-journey-status-completed {
  background: #e8f5ef;
  border-color: #cce9d9;
  color: #206442;
}


/* Compact journey list and reserved journey-map column in the logbook. */
.logbook-journey-list { min-width: 0; }
.logbook-journey-list .timeline-leg {
  padding: .12rem 0 .68rem 1.15rem;
  margin-left: .2rem;
}
.logbook-journey-list .timeline-leg::before {
  top: .35rem;
  width: .55rem;
  height: .55rem;
  left: -.34rem;
}
.logbook-journey-list .departure-row {
  gap: .3rem .42rem;
  min-height: 1.35rem;
  margin-bottom: .3rem !important;
}
.logbook-journey-list .departure-clock,
.logbook-journey-list .departure-service { font-size: .84rem; }
.logbook-journey-list .departure-train-no,
.logbook-journey-list .leg-muted { font-size: .76rem; }
.logbook-journey-list .timeline-leg > .small.mb-2 {
  margin-bottom: .32rem !important;
}
.logbook-journey-list .timeline-leg .badge {
  font-size: .66rem;
  line-height: 1.1;
}
.logbook-route-panel {
  overflow: hidden;
  border: 1px solid var(--rail-line);
  border-radius: .8rem;
  background: #fff;
  position: sticky;
  top: .75rem;
}
.logbook-route-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem .8rem;
  font-weight: 680;
  font-size: .84rem;
}
.logbook-route-map {
  height: 330px;
  width: 100%;
  background: #f0f3f5;
  z-index: 0;
}
.logbook-route-caption {
  margin: 0;
  padding: .65rem .8rem;
  color: var(--rail-muted);
  font-size: .76rem;
}
@media (max-width: 991.98px) {
  .logbook-route-panel { position: static; }
  .logbook-route-map { height: 280px; }
}


/* One-line logbook overview: disclosure triangle, black route, grey timing
   metadata and right-aligned status badges. Expanded content remains unchanged. */
.logbook-journey > summary.panel-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .62rem .9rem;
  list-style: none;
  cursor: pointer;
}
.logbook-journey > summary.panel-heading::-webkit-details-marker { display: none; }
.logbook-journey > summary.panel-heading::before {
  content: "▸";
  flex: 0 0 auto;
  font-size: .85rem;
  color: var(--rail-ink);
}
.logbook-journey[open] > summary.panel-heading::before { content: "▾"; }
.logbook-journey > summary.panel-heading > span {
  display: flex !important;
  align-items: center;
  flex: 1 1 auto;
  gap: .8rem;
  flex-wrap: nowrap !important;
  min-width: 0;
}
.logbook-journey > summary.panel-heading > span > span:first-child {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: .65rem;
  min-width: 0;
}
.logbook-journey > summary.panel-heading strong {
  display: block;
  flex: 0 1 auto;
  color: var(--rail-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logbook-journey > summary.panel-heading .d-block.small.text-secondary {
  display: inline !important;
  flex: 0 0 auto;
  margin-top: 0 !important;
  white-space: nowrap;
  color: var(--rail-muted) !important;
}
.logbook-journey > summary.panel-heading > span > span:last-child {
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
}
@media (max-width: 991.98px) {
  .logbook-journey > summary.panel-heading > span { flex-wrap: wrap !important; gap: .25rem .6rem; }
  .logbook-journey > summary.panel-heading > span > span:first-child { flex-wrap: wrap; }
}