/* Shared theme, loader and header styles live in common.css */
#tpg-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  background: var(--bg0);
  overflow: hidden;
}

#home-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* ═══════════════════════════════
   SIDEBAR
   ═══════════════════════════════ */
#sidebar {
  width: 396px;
  min-width: 352px;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 20;
  scrollbar-width: thin;
  scrollbar-color: var(--bg3) transparent;
}

/* ── Search Panel ── */
#search-panel {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.stop-field {
  position: relative;
}

.stop-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-2);
  text-transform: lowercase;
  margin-bottom: 10px;
  padding-left: 2px;
}
.stop-num {
  color: var(--accent);
}

.stop-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
}

.stop-marker {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  flex-shrink: 0;
}
.stop-marker.green  { color: var(--green);  background: rgba(34,197,94,0.2); }
.stop-marker.amber  { color: var(--amber);  background: rgba(245,158,11,0.2); }

.stop-input-wrap input {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  min-height: 52px;
  padding: 14px 40px 14px 52px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-1);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.stop-input-wrap input::placeholder {
  color: var(--text-3);
  opacity: 1;
  text-indent: 8px;
}
.stop-input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--bg3);
}

.geoloc-btn {
  position: absolute;
  right: 42px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  z-index: 2;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  padding: 0;
  color: var(--text-3);
}
.geoloc-btn:hover { 
  background: var(--accent-dim);
  color: var(--accent);
}

.clear-btn {
  position: absolute;
  right: 12px;
  z-index: 2;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  line-height: 1;
}
.clear-btn:hover { background: var(--bg3); color: var(--text-1); }

/* Autocomplete dropdown */
.autocomplete-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: none;
}
.autocomplete-drop.open { display: block; }

.ac-item {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .12s;
  border-bottom: 1px solid var(--border);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.focused { background: var(--bg3); color: var(--text-1); }
.ac-item .ac-name { font-weight: 500; }
.ac-item .ac-lines { margin-left: auto; display: flex; gap: 4px; }
.ac-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ac-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* Swap zone */
#swap-zone {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 0 2px;
}
.connector-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
#swap-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border-s);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .2s;
  flex-shrink: 0;
}
#swap-btn:hover { background: var(--accent); color: #fff; transform: rotate(180deg); }

/* Spacer left after removing unused options */
#options-spacer {
  height: 60px;
  padding: 4px 0 12px;
}

/* Search button */
#search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 15px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,122,71,0.3);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px var(--accent-glow);
}
#search-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 28px var(--accent-glow); }
#search-btn:active:not(:disabled) { transform: translateY(0); }
#search-btn:disabled {
  cursor: not-allowed;
  border-color: rgba(255,122,71,0.2);
  background: var(--accent);
  color: rgba(255,255,255,0.85);
  box-shadow: 0 10px 24px rgba(255,90,31,0.18);
}
#search-btn.loading #btn-arrow { display: none; }
#search-btn.loading #btn-loader { display: block !important; }

.btn-spin { animation: spin 1s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Side Panels ── */
.side-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-panel.hidden { display: none !important; }

.panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-3);
  flex-shrink: 0;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  transition: opacity .15s;
}
.back-btn:hover { opacity: 0.7; }

/* ── Journey Cards ── */
#journey-cards {
  overflow-y: auto;
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg3) transparent;
}

.journey-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.journey-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity .2s;
}
.journey-card:hover { border-color: var(--border-s); background: var(--bg3); transform: translateX(2px); }
.journey-card:hover::before { opacity: 1; }
.journey-card.best::before { opacity: 1; }
.journey-card.best { border-color: rgba(255,90,31,0.35); }

.jc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.jc-times {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
}
.jc-times .arrow { color: var(--text-3); margin: 0 6px; }
.jc-duration {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg3);
  padding: 3px 8px;
  border-radius: 20px;
}

.jc-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.jc-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.jc-line.logo {
  padding: 2px 4px;
  background: transparent !important;
  border-color: transparent !important;
}
.jc-line-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter:
    saturate(1.15)
    contrast(1.03)
    brightness(1.01)
    drop-shadow(0 0 0.45px rgba(255,255,255,0.92))
    drop-shadow(0 0 1.1px rgba(255,255,255,0.42));
}
.jc-transfers {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}
.best-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ── Journey Detail ── */
#detail-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--text-2);
}

#detail-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bg3) transparent;
}

.tl-segment {
  display: flex;
  gap: 14px;
}

.tl-gutter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--bg1);
  flex-shrink: 0;
  margin-top: 2px;
}
.tl-dot.dep  { color: var(--green); background: rgba(34,197,94,0.15); }
.tl-dot.mid  { color: var(--accent); background: rgba(255,90,31,0.15); }
.tl-dot.arr  { color: var(--amber); background: rgba(245,158,11,0.15); }
.tl-dot.walk { color: var(--text-3); background: var(--bg2); }

.tl-line {
  flex: 1;
  width: 2px;
  min-height: 20px;
  background: var(--border-s);
  margin: 4px auto 0;
}
.tl-line.colored { width: 3px; }

.tl-body {
  flex: 1;
  padding-bottom: 20px;
}

.tl-stop-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 2px;
}
.tl-time {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-3);
}

.tl-ride {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg2);
  border-left: 3px solid currentColor;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-ride-logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter:
    saturate(1.15)
    contrast(1.03)
    brightness(1.01)
    drop-shadow(0 0 0.45px rgba(255,255,255,0.92))
    drop-shadow(0 0 1.15px rgba(255,255,255,0.44));
}
.tl-ride-line {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}
.tl-ride-info {
  font-size: 11px;
  color: var(--text-2);
}
.tl-ride-dur {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-3);
}

.tl-walk {
  margin: 4px 0;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--bg2);
  border: 1px dashed var(--border-s);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}

#detail-note {
  padding: 14px 22px;
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
  flex-shrink: 0;
}
#detail-note strong { color: var(--text-2); }

/* ── Error Panel ── */
#error-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 22px;
  text-align: center;
}
#error-icon {
  font-size: 32px;
  color: var(--amber);
  margin-bottom: 4px;
}
#error-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 240px;
}
#error-retry {
  padding: 8px 20px;
  border-radius: var(--r-sm);
  background: var(--bg3);
  border: 1px solid var(--border-s);
  font-size: 12px;
  color: var(--text-1);
  transition: background .15s;
}
#error-retry:hover { background: var(--accent); }

/* ── Footer ── */
#sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  flex-shrink: 0;
}
#lines-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.line-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(from var(--c) r g b / 0.15);
  color: var(--c);
  border: 1px solid rgba(from var(--c) r g b / 0.3);
  letter-spacing: 0.02em;
  /* Fallback for browsers without color() */
  border-color: color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 15%, transparent);
}
.line-chip img {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
  filter:
    saturate(1.14)
    contrast(1.03)
    brightness(1.01)
    drop-shadow(0 0 0.4px rgba(255,255,255,0.90))
    drop-shadow(0 0 1px rgba(255,255,255,0.38));
}
#lines-preview .line-chip.logo-chip {
  padding: 2px 4px;
  background: transparent;
  border: none;
}
#footer-copy {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}

/* ═══════════════════════════════
   MAP ZONE
   ═══════════════════════════════ */
#map-zone {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#map-el {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg0);
}

/* Splash */
#map-splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #0d1428 0%, var(--bg0) 70%);
  transition: opacity .4s, visibility .4s;
}
#map-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#splash-content {
  text-align: center;
  max-width: 400px;
  padding: 24px;
}
#splash-moon {
  font-size: 56px;
  margin-bottom: 16px;
  display: block;
  filter: drop-shadow(0 0 20px rgba(251,191,36,0.5));
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
#splash-content h2 {
  font-family: var(--font-title);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--text-1);
}
#splash-content p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 20px;
}
#splash-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.splash-chip {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 20px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  letter-spacing: 0.02em;
}

/* Map UI controls */
#map-ui {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg1);
  border: 1px solid var(--border-s);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.map-btn:hover { background: var(--bg3); color: var(--text-1); }

/* Leaflet overrides */
.leaflet-container {
  background: #0a0f1e !important;
  font-family: var(--font-body);
}
.leaflet-control-zoom {
  border: 1px solid var(--border-s) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.leaflet-control-zoom a {
  background: var(--bg1) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  width: 30px !important; height: 30px !important;
  line-height: 30px !important;
  font-size: 16px !important;
}
.leaflet-control-zoom a:hover { background: var(--bg3) !important; color: var(--text-1) !important; }

.leaflet-popup-content-wrapper {
  background: var(--bg2) !important;
  border: 1px solid var(--border-s) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  color: var(--text-1) !important;
  font-family: var(--font-body) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: var(--bg2) !important; }
.leaflet-popup-close-button { color: var(--text-3) !important; font-size: 18px !important; top: 8px !important; right: 8px !important; }

.tpg-popup {
  padding: 12px 14px;
  min-width: 160px;
}
.tpg-popup-name {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.tpg-popup-lines {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tpg-popup-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
}
.tpg-popup-chip.logo-chip {
  padding: 2px;
  background: transparent !important;
  border: none !important;
}
.tpg-popup-chip.logo-chip img {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
  filter:
    saturate(1.14)
    contrast(1.03)
    brightness(1.01)
    drop-shadow(0 0 0.4px rgba(255,255,255,0.90))
    drop-shadow(0 0 0.95px rgba(255,255,255,0.36));
}

/* Leaflet attribution */
.leaflet-control-attribution {
  background: rgba(7,11,20,0.8) !important;
  color: var(--text-3) !important;
  font-size: 9px !important;
  border-top-left-radius: var(--r-sm) !important;
}
.leaflet-control-attribution a { color: var(--text-3) !important; }

/* Line label tooltips */
.line-label-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 768px) {
  #tpg-app { height: auto; min-height: 100vh; }
  #home-layout { flex-direction: column; }
  #sidebar { width: 100%; min-width: unset; max-height: 70vh; border-right: none; border-bottom: 1px solid var(--border); }
  #map-zone { height: 50vh; flex: none; }
  #splash-content h2 { font-size: 18px; }
  #search-panel { padding: 20px; }
  #options-spacer { height: 60px; }
}

/* ── Utility ── */
.hidden { display: none !important; }