/* ======================================================
   [全方位穩定版] 小琉球公車即時動態系統 UI
   ====================================================== */

:root {
  --primary-color: #17bebb;
  --secondary-color: #2ec4b6;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --bg-light: #f8fafc;
  --text-dark: #1e293b;
  --card-bg: #ffffff;
  --timeline-color: #e2e8f0;
}

/* 基本重置 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Noto Sans TC', -apple-system, sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止主視窗捲動 */
}

/* ===============================
   頂部 Header 與 路線切換
=============================== */
.bus-header {
  margin-top: 60px; /* 為 Navbar 預留空間 */
  padding: 1.5rem 5%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.bus-title { display: flex; flex-direction: column; gap: 8px; }
.bus-name { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
.bus-no { font-size: 48px; font-weight: 900; opacity: 0.95; }

.route-selector { display: flex; gap: 10px; margin-top: 5px; }
.route-btn {
  padding: 6px 18px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent; color: white; cursor: pointer; font-weight: 700;
  transition: 0.3s;
}
.route-btn.active { background: white; color: var(--primary-color); border-color: white; }

.fare-btn {
  background: #ffcc00; color: #6d4c00; padding: 6px 15px; border-radius: 50px;
  border: none; cursor: pointer; font-weight: 700; transition: 0.3s;
}

/* ===============================
   主要佈局 (不亂跳關鍵)
=============================== */
.bus-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 400px 1fr; /* 固定寬度，防止內容撐開 */
  overflow: hidden;
}

/* 左側站牌面板 */
.stop-panel {
  background: white;
  border-right: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stop-panel h3 {
  margin: 0; padding: 18px 25px; font-size: 17px; font-weight: 800;
  border-bottom: 1px solid #f1f5f9; background: white;
}

#stop-list {
  padding: 0; margin: 0; list-style: none;
  overflow-y: auto; flex: 1; /* 使列表可單獨捲動 */
  min-height: 100%;
}
/* 解決清單看不到後面站點的問題 */
.bus-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    height: calc(100vh - 160px); /* 鎖定總高度為視窗高度扣除 header */
    overflow: hidden;
}

.stop-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#stop-list {
    flex: 1;
    overflow-y: auto; /* 強制這裡內部捲動 */
    padding: 0;
    margin: 0;
    padding-bottom: 100px; /* 給底部一點緩衝 space */
}

.stop {
    min-height: 80px; /* 給予每一站固定的最小高度，防止內容塌陷 */
}
/* 單個站位卡片 */
.stop {
  display: flex; align-items: center; padding: 15px 25px;
  border-bottom: 1px solid #f8fafc; transition: background 0.3s;
  cursor: pointer;
}
.stop:hover { background: #f1faff; }

/* 時間軸元件 */
.timeline { width: 35px; display: flex; flex-direction: column; align-items: center; position: relative; margin-right: 15px; }
.timeline .dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; z-index: 2; border: 2.5px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.timeline .line { position: absolute; top: 15px; bottom: -20px; width: 2px; background: var(--timeline-color); }
.stop:last-child .line { display: none; }

/* ===============================
   動態狀態樣式 (即時連動用)
=============================== */
/* 站位內容 */
.stop-content { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.stop-name { font-size: 16px; font-weight: 600; color: #475569; }

/* 膠囊 (ETA Badge) */
.eta-badge {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 800;
  min-width: 80px; text-align: center; background: #f1f5f9; color: #94a3b8;
}

/* --- 到站狀態特定樣式 --- */
.stop.arriving .dot { background: var(--danger-color); box-shadow: 0 0 0 1px var(--danger-color); }
.stop.arriving .stop-name { color: var(--danger-color); }
.stop.arriving .eta-badge { background: var(--danger-color); color: white; animation: blink 1s infinite alternate; }

.stop.next .dot { background: var(--warning-color); box-shadow: 0 0 0 1px var(--warning-color); }
.stop.next .stop-name { color: var(--text-dark); }
.stop.next .eta-badge { background: var(--warning-color); color: white; }

@keyframes blink { from { opacity: 1; transform: scale(1); } to { opacity: 0.8; transform: scale(1.02); } }

/* ===============================
   右側地圖 (Carto 樣式補強)
=============================== */
.map-panel { position: relative; }
#bus-map { width: 100%; height: 100%; background: #f5f6fa; }

/* --- 地圖圖標 --- */
.bus-stop-icon .bus-stop {
  width: 22px; height: 22px; background: #334155; color: white;
  border: 2px solid white; border-radius: 50%; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.bus-marker-icon { display: flex; flex-direction: column; align-items: center; }
.bus-pointer {
  width: 32px; height: 32px; background: var(--danger-color); border: 2px solid white;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}
.bus-pointer i { transform: rotate(45deg); color: white; font-size: 15px; }
.bus-plate {
  background: #1e293b; color: white; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; margin-top: 5px; font-weight: bold; white-space: nowrap;
}

/* ===============================
   手機版響應式 RWD
=============================== */
@media (max-width: 800px) {
  .bus-layout { grid-template-columns: 1fr; }
  .map-panel { height: 45vh; order: 1; }
  .stop-panel { height: 55vh; order: 2; border-right: none; }
  .bus-header { padding: 12px 15px; }
  .bus-no { font-size: 32px; }
}

/* 訪客區 */
.visitor-section { background: white; border-top: 1px solid #eee; padding: 10px; font-size: 13px; text-align: center; color: #94a3b8; }