/* schedule.css — trip planner UI styles. */

/* The shared styles.css sets `body { overflow: hidden }` for the map page;
   override here so the schedule page is naturally scrollable. */
body.schedule-page {
  overflow: auto;
}

.schedule-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

.schedule-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(13, 17, 23, 0.9);
}
.schedule-header h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}

.schedule-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 18px 40px;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.schedule-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px 12px;
  align-items: end;
  margin-bottom: 24px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}
.field input[type="text"],
.field input[type="datetime-local"] {
  width: 100%;
  background: #0d1117;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus {
  border-color: #58a6ff;
}
.field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Combobox — input with suggestions dropdown */
.combo { position: relative; }
.combo-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.combo-option {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.combo-option:last-child { border-bottom: 0; }
.combo-option:hover,
.combo-option.active {
  background: rgba(88, 166, 255, 0.12);
}
.combo-group-label {
  padding: 8px 12px 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
}

.dest-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-bottom: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}
.dest-toggle input { margin: 0; cursor: pointer; flex-shrink: 0; }
.dest-toggle:hover { color: var(--text); }
.combo-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Swap button between origin and dest */
.swap-btn {
  align-self: end;
  margin-bottom: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.12s, transform 0.18s;
}
.swap-btn:hover {
  background: rgba(88, 166, 255, 0.1);
  transform: rotate(180deg);
}

/* When-field has the datetime-local input + a "Now" button inline */
.field-when {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: end;
  gap: 8px;
}
.field-when label {
  position: absolute;
  margin-top: -16px;
}
.field-when input {
  flex: 1;
  max-width: 280px;
}
.now-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.now-btn:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: var(--early);
}

.search-btn {
  grid-column: 1 / -1;
  background: var(--early);
  color: #0d1117;
  border: 0;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s;
}
.search-btn:hover:not(:disabled) {
  background: #79b8ff;
}
.search-btn:disabled {
  background: #30363d;
  color: var(--muted);
  cursor: not-allowed;
}

/* ── Results ────────────────────────────────────────────────────────────── */
.results-empty,
.results-loading,
.results-error {
  padding: 60px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.results-error { color: var(--late); }

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
  gap: 8px;
}
.results-summary {
  font-size: 16px;
}
.results-summary .arrow {
  color: var(--muted);
  margin: 0 8px;
}
.results-count {
  color: var(--muted);
  font-size: 12px;
}

/* ── Trip card ──────────────────────────────────────────────────────────── */
.trip-card {
  background: rgba(22, 27, 34, 0.7);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.trip-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.trip-head:hover {
  background: rgba(255, 255, 255, 0.02);
}

.trip-times {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.trip-times-sep { color: var(--muted); font-size: 14px; }
.trip-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.trip-duration { color: var(--text); }
.transfer-note { font-style: italic; }
.trip-otp { display: inline-block; font-weight: 600; }
.trip-otp.on-time { color: #3fb950; }
.trip-otp.slight  { color: #d4a017; }
.trip-otp.late    { color: var(--late); }
.trip-otp.canceled {
  background: var(--very-late);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.trip-track { flex-shrink: 0; }

.trip-branches {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.trip-expand-icon {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}

/* Track badge — same logic as the GCT board, but inline */
.track-badge {
  display: inline-block;
  background: #ffffff;
  color: #0d1117;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.track-badge.track-predicted {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-weight: 600;
}
.track-badge.track-changed {
  background: #ee0034;
  color: #fff;
  border: none;
}
.track-badge.track-changed.track-predicted {
  background: transparent;
  border: 1px dashed #ee0034;
  color: #ff7a90;
}
.track-badge.track-unknown {
  color: var(--muted);
  font-weight: 400;
  background: transparent;
  font-size: 11px;
}

.branch-chip {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.leg-arrow { color: var(--muted); }

.trip-card.expanded .trip-expand-icon { transform: rotate(180deg); }

/* ── Trip detail (expanded view) ────────────────────────────────────────── */
.trip-detail {
  display: none;
  padding: 0 16px 16px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--panel-border);
}
.trip-card.expanded .trip-detail { display: block; }

.leg {
  padding: 12px 0;
}
.leg + .leg {
  border-top: 1px dashed var(--panel-border);
}
.leg-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f5c842;
  padding: 8px 12px;
  margin: 4px -16px;
  background: rgba(245, 200, 66, 0.06);
  border-top: 1px solid rgba(245, 200, 66, 0.2);
  border-bottom: 1px solid rgba(245, 200, 66, 0.2);
}
.leg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
  font-size: 12px;
}
.leg-branch {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
}
.leg-train { font-weight: 600; }
.leg-direction { color: var(--muted); }

.leg-stops {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.leg-stop {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  font-size: 12px;
}
.leg-stop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  margin-left: -13px;
  border: 2px solid #0d1117;
}
.leg-stop.endpoint .leg-stop-dot {
  background: var(--early);
  width: 10px;
  height: 10px;
  margin-left: -14px;
}
.leg-stop-name {
  color: var(--text);
}
.leg-stop.endpoint .leg-stop-name {
  font-weight: 600;
}
.leg-stop-track .track-badge {
  font-size: 10px;
  padding: 2px 6px;
}
.leg-stop-time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: 11px;
}
.leg-stop-time .stop-actual {
  color: var(--late);
  font-size: 10px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .schedule-header { padding: 10px 14px; }
  .schedule-header h1 { font-size: 14px; }
  .schedule-main { padding: 12px 14px 28px; }

  .schedule-form {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .field label { font-size: 9px; }
  .field input[type="text"],
  .field input[type="datetime-local"] {
    padding: 8px 10px;
    font-size: 16px;     /* keep ≥16px to prevent iOS zoom on focus */
  }
  .swap-btn {
    justify-self: center;
    width: 32px;
    height: 32px;
    transform: rotate(90deg);
  }
  .swap-btn:hover { transform: rotate(270deg); }
  .swap-btn svg { width: 14px; height: 14px; }

  .field-when {
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
  }
  .field-when input { max-width: none; }
  .now-btn { padding: 8px 12px; font-size: 12px; }

  .search-btn { padding: 10px 16px; font-size: 13px; }

  /* Compact results header */
  .results-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .results-summary { font-size: 14px; }
  .results-count { font-size: 11px; }

  /* Compact trip cards */
  .trip-head {
    padding: 10px 12px;
    gap: 6px 10px;
  }
  .trip-times { font-size: 15px; gap: 6px; }
  .trip-times-sep { font-size: 12px; }
  .trip-meta { font-size: 11px; gap: 6px; }
  /* Force the branch-chips row to a second line so cards look identical
     whether or not an OTP indicator is present. Without this, cards with
     no OTP keep everything on one line and the chips overflow the right
     edge of the screen. */
  .trip-branches {
    flex-basis: 100%;
    justify-content: flex-start;
    order: 10;
  }
  .branch-chip { font-size: 9px; padding: 2px 6px; }
  .track-badge { font-size: 10px; padding: 3px 8px; }

  .dest-toggle { font-size: 11px; }
}