/* ----------------------------------------------------
 * CSS 樣式 (手機優先，增強視覺效果)
 * ---------------------------------------------------- */

/* 基本樣式重置與字體設定 */
html, body {
  height: 100%; /* 確保html和body佔滿整個視窗高度 */
  margin: 0; /* 移除預設邊距 */
  font-family: "Noto Sans TC", "PingFang TC", Arial, Helvetica, sans-serif; /* 設定字體 */
  background: #fbfcfe; /* 設定背景顏色 */
  overflow: hidden; /* 隱藏溢出內容，防止滾動條 */
}

/* 主要應用程式容器 */
#app-container {
  display: flex; /* 使用Flexbox佈局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100vh; /* 佔滿整個視窗高度 */
}

/* 頂部標頭區塊 */
#header-bar {
  flex-shrink: 0; /* 不壓縮此元素 */
  padding: 8px 12px; /* 內邊距 */
  background: #fff; /* 背景顏色 */
  border-bottom: 1px solid #e6e9ee; /* 底部邊框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 陰影效果 */
  display: flex; /* 使用Flexbox佈局 */
  flex-direction: column; /* 垂直排列子元素 */
}
#header-bar h1 {
  font-size: 15px; /* 字體大小 */
  margin: 0; /* 移除預設邊距 */
  font-weight: 600; /* 字體粗細 */
  color: #333; /* 字體顏色 */
  display: flex; /* 使用Flexbox佈局 */
  justify-content: space-between; /* 子元素之間平均分佈空間 */
  align-items: center; /* 垂直居中對齊 */
}

/* 狀態指示器樣式 */
#status-indicator {
  font-size: 11px; /* 字體大小 */
  color: #007bff; /* 字體顏色 */
  position: relative; /* 相對定位 */
  padding-left: 15px; /* 左側內邊距 */
}
#status-indicator::before {
  content: ''; /* 偽元素內容 */
  position: absolute; /* 絕對定位 */
  left: 0; /* 靠左 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直位移調整 */
  width: 8px; /* 寬度 */
  height: 8px; /* 高度 */
  background: #007bff; /* 背景顏色 */
  border-radius: 50%; /* 圓角 */
  animation: pulse 1.5s infinite; /* 脈衝動畫 */
}

/* 脈衝動畫 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* 旋轉動畫 (用於載入指示器) */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 頁籤導航區塊 */
#tab-nav {
  display: flex; /* 使用Flexbox佈局 */
  justify-content: space-around; /* 子元素之間平均分佈空間 */
  border-top: 1px solid #f1f3f6; /* 頂部邊框 */
  margin-top: 6px; /* 頂部外邊距 */
}

/* 頁籤按鈕樣式 */
.tab-btn {
  flex-grow: 1; /* 均勻分配可用空間 */
  padding: 8px 0; /* 內邊距 */
  cursor: pointer; /* 鼠標指針樣式 */
  text-align: center; /* 文字居中 */
  font-size: 14px; /* 字體大小 */
  font-weight: 500; /* 字體粗細 */
  color: #6c757d; /* 字體顏色 */
  border-bottom: 2px solid transparent; /* 底部透明邊框 */
  transition: all 0.2s; /* 過渡動畫 */
  border-radius: 4px 4px 0 0; /* 圓角 */
}

/* 活躍頁籤按鈕樣式 */
.tab-btn.active {
  color: #1d72ff; /* 活躍字體顏色 */
  border-bottom: 2px solid #1d72ff; /* 活躍底部邊框 */
  background: #f7f9ff; /* 活躍背景顏色 */
}

/* 頁籤按鈕懸停樣式 */
.tab-btn:hover {
  background: #f1f3f6; /* 懸停背景顏色 */
  color: #1d72ff; /* 懸停字體顏色 */
}

/* 頁籤內容區塊 */
#tab-content {
  flex-grow: 1; /* 佔據剩餘空間 */
  position: relative; /* 相對定位 */
  overflow: hidden; /* 隱藏溢出內容 */
}

/* 頁籤面板樣式 */
.tab-pane {
  position: absolute; /* 絕對定位 */
  top: 0;
  left: 0;
  width: 100%; /* 寬度佔滿 */
  height: 100%; /* 高度佔滿 */
  overflow: auto; /* 內容溢出時顯示滾動條 */
  display: none; /* 預設隱藏 */
  padding: 12px; /* 內邊距 */
  -webkit-overflow-scrolling: touch; /* 改善iOS上的滾動體驗 */
}

/* 活躍頁籤面板樣式 */
.tab-pane.active {
  display: block; /* 顯示活躍面板 */
}

/* 底部狀態資訊區塊 */
#bottom-status {
  flex-shrink: 0; /* 不壓縮此元素 */
  padding: 8px 12px; /* 內邊距 */
  background: #fff; /* 背景顏色 */
  border-top: 1px solid #e6e9ee; /* 頂部邊框 */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); /* 陰影效果 */
  font-size: 12px; /* 字體大小 */
  line-height: 1.4; /* 行高 */
}
#bottom-status strong {
  color: #28a745; /* 字體顏色 */
  font-weight: 600; /* 字體粗細 */
}

/* 滑塊行樣式 */
.slider-row {
  margin-bottom: 10px; /* 底部外邊距 */
  position: relative; /* 相對定位 */
}
.slider-row label {
  display: block; /* 區塊顯示 */
  font-size: 13px; /* 字體大小 */
  margin-bottom: 4px; /* 底部外邊距 */
  display: flex; /* 使用Flexbox佈局 */
  justify-content: space-between; /* 子元素之間平均分佈空間 */
  align-items: center; /* 垂直居中對齊 */
}
.slider-row input[type=range] {
  width: 100%; /* 寬度佔滿 */
  -webkit-appearance: none; /* 移除Webkit瀏覽器預設樣式 */
  height: 6px; /* 高度 */
  background: #e6e9ee; /* 背景顏色 */
  border-radius: 3px; /* 圓角 */
  outline: none; /* 移除外框 */
}
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 移除Webkit瀏覽器預設樣式 */
  background: #1d72ff; /* 滑塊背景顏色 */
  cursor: pointer; /* 鼠標指針樣式 */
  border-radius: 50%; /* 圓角 */
  width: 16px; /* 寬度 */
  height: 16px; /* 高度 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}
.slider-row input[type=range]::-moz-range-thumb {
  background: #1d72ff; /* 滑塊背景顏色 */
  cursor: pointer; /* 鼠標指針樣式 */
  border-radius: 50%; /* 圓角 */
  width: 16px; /* 寬度 */
  height: 16px; /* 高度 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 陰影效果 */
}

/* 滑塊工具提示樣式 */
.slider-tooltip {
  position: absolute; /* 絕對定位 */
  top: -30px; /* 向上偏移 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平位移調整 */
  background: #1d72ff; /* 背景顏色 */
  color: #fff; /* 字體顏色 */
  padding: 4px 8px; /* 內邊距 */
  border-radius: 4px; /* 圓角 */
  font-size: 12px; /* 字體大小 */
  display: none; /* 預設隱藏 */
  z-index: 10; /* 層級 */
}
.slider-row:hover .slider-tooltip {
  display: block; /* 懸停時顯示 */
}

/* 通用按鈕樣式 */
.btn {
  display: inline-block; /* 行內區塊顯示 */
  padding: 8px 10px; /* 內邊距 */
  border-radius: 6px; /* 圓角 */
  border: none; /* 無邊框 */
  cursor: pointer; /* 鼠標指針樣式 */
  font-size: 12px; /* 字體大小 */
  transition: background 0.2s; /* 背景過渡動畫 */
}

/* 主要按鈕樣式 */
.btn-primary {
  background: #1d72ff; /* 背景顏色 */
  color: #fff; /* 字體顏色 */
}

/* 幽靈按鈕樣式 */
.btn-ghost {
  background: #fff; /* 背景顏色 */
  border: 1px solid #d7dbe0; /* 邊框 */
}

/* 工具提示樣式 */
#tooltip {
  position: absolute; /* 絕對定位 */
  background: rgba(255, 255, 255, 0.95); /* 背景顏色 */
  border: 1px solid #ccc; /* 邊框 */
  border-radius: 6px; /* 圓角 */
  padding: 8px 12px; /* 內邊距 */
  font-size: 12px; /* 字體大小 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 陰影效果 */
  pointer-events: none; /* 不響應鼠標事件 */
  max-width: 240px; /* 最大寬度 */
  z-index: 10; /* 層級 */
}

/* 通知系統容器樣式 */
#notification-container {
  position: fixed; /* 固定定位 */
  top: 10px; /* 頂部距離 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平位移調整 */
  z-index: 10000; /* 層級 */
  display: flex; /* 使用Flexbox佈局 */
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 子元素間距 */
  pointer-events: none; /* 允許點擊穿透 */
}

/* 通知訊息樣式 */
.notification {
  background-color: #333; /* 背景顏色 */
  color: #fff; /* 字體顏色 */
  padding: 10px 20px; /* 內邊距 */
  border-radius: 5px; /* 圓角 */
  font-size: 14px; /* 字體大小 */
  opacity: 0.9; /* 透明度 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 陰影效果 */
  pointer-events: all; /* 響應鼠標事件 */
}
.notification.info {
  background-color: #2196F3; /* 資訊類型通知背景色 */
}
.notification.warning {
  background-color: #ff9800; /* 警告類型通知背景色 */
}
.notification.error {
  background-color: #f44336; /* 錯誤類型通知背景色 */
}

/* 桌面端優化 (當視窗寬度大於800px時應用) */
@media (min-width: 800px) {
  #app-container {
    flex-direction: column; /* 垂直排列子元素 */
  }
  #header-bar {
    display: flex; /* 保持Flexbox佈局 */
  }
  #tab-nav {
    display: flex; /* 保持Flexbox佈局 */
  }
  #bottom-status {
    display: flex; /* 保持Flexbox佈局 */
  }
  #tab-content {
    flex-grow: 1; /* 佔據剩餘空間 */
    width: 100%; /* 寬度佔滿 */
    height: 100%; /* 高度佔滿 */
    position: relative; /* 相對定位 */
  }
  .tab-pane {
    display: none; /* 預設隱藏所有面板 */
    position: absolute; /* 絕對定位 */
    top: 0;
    left: 0;
    width: 100%; /* 寬度佔滿 */
    height: 100%; /* 高度佔滿 */
    overflow: auto; /* 內容溢出時顯示滾動條 */
    padding: 12px; /* 內邊距 */
  }
  .tab-pane.active {
    display: block; /* 顯示活躍面板 */
  }
  .tab-btn {
    font-size: 14px; /* 字體大小 */
  }
  .btn {
    font-size: 13px; /* 字體大小 */
  }
  .slider-row {
    margin-bottom: 0; /* 移除底部外邊距 */
  }
}