/* 全局設定 */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  /* 移除預設的 body margin */
  padding: 15px;
  /* 在 body 周圍添加一些內邊距 */
  display: flex;
  /* 使用 flexbox 進行整體佈局 */
  flex-direction: column;
  /* 主軸方向為垂直 */
  min-height: 100vh;
  /* 確保 body 至少佔滿整個視窗高度 */
}

/* 頁首區域 (包含更新時間和匯出按鈕) */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  /* 在小螢幕時允許換行 */
}

.last-updated-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* 在小螢幕換行時增加底部間距 */
}

.last-updated-container h3 {
  margin-right: 10px;
  margin-bottom: 0;
  /* 移除 h3 預設的底部間距 */
}

#github-push-time {
  font-size: 16px;
  color: #333;
}

.export-buttons {
  /* 這是 export-buttons 的初始佈局樣式 */
  margin-left: auto;
  /* 保持在右側 */
}

/* 選擇器區域 */
.select-area-container {
  display: flex;
  justify-content: space-between;
  /* 平均分配空間 */
  flex-wrap: wrap;
  /* 在小螢幕時允許換行 */
  gap: 15px;
  /* 項目之間的間距 */
  margin-bottom: 20px;
}

.select-container {
  border: 1px solid #ddd;
  /* 稍微柔和的邊框 */
  padding: 15px;
  background-color: #fff;
  /* 背景改為白色，更清晰 */
  border-radius: 8px;
  /* 更大的圓角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  /* 細微陰影 */
  flex-grow: 1;
  /* 允許容器擴展以填充可用空間 */
  min-width: 280px;
  /* 設定最小寬度，避免在 flex 佈局中過度壓縮 */
  margin-bottom: 15px;
  /* 在換行時提供間距 */
}

.select-container h3 {
  margin-top: 0;
  /* 移除 h3 頂部預設間距 */
  margin-bottom: 15px;
  /* 增加標題和內容之間的間距 */
  color: #333;
  font-size: 1.1em;
}

#school-select {
  max-height: 250px;
  /* 稍微減少最大高度 */
  overflow-y: auto;
  /* 保留滾動條 */
}

.school-item {
  display: block;
  /* 讓每個學校選項獨佔一行，更清晰 */
  margin-bottom: 8px;
}

.school-item label {
  font-size: 14px;
  display: flex;
  /* 使用 flex 讓 checkbox 和文字對齊 */
  align-items: center;
}

.school-item input[type="checkbox"] {
  margin-right: 8px;
}

/* 通用標題樣式 */
h2 {
  /* 如果網頁中有 h2，也統一樣式 */
  color: #007bff;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 15px;
}

/* 基本排版設置 (表單元素等) */
select,
input[type="text"],
button {
  /* 注意：這裡的 button 樣式會被後面的 button 專有樣式和 .export-buttons button 樣式覆蓋或繼承 */
  padding: 10px 12px;
  /* 增加內邊距 */
  font-size: 14px;
  border-radius: 5px;
  /* 統一圓角 */
  border: 1px solid #ccc;
  margin-bottom: 10px;
  /* 統一底部間距 */
}

/* 按鈕樣式 */
button {
  /* 更通用的按鈕樣式 */
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  /* 移除預設邊框 (如果上面 select, input[type="text"], button 的 border 不適用於所有 button) */
  transition: background-color 0.2s ease-in-out;
  /* 平滑過渡效果 */
  /* padding, font-size, border-radius, margin-bottom 已在上面統一定義，這裡可按需覆蓋 */
}

button:hover {
  background-color: #0056b3;
  /* 滑鼠懸停時加深顏色 */
}

.export-buttons button {
  /* 針對匯出按鈕容器內的按鈕 */
  margin-left: 10px;
  /* 匯出按鈕之間的間距 */
}

.export-buttons button:first-child {
  /* 如果希望第一個匯出按鈕沒有左邊距 */
  margin-left: 0;
}


/* 連結樣式 */
a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 搜尋欄樣式 (如果取消註解使用) */
.search-container {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin: 20px 0;
  display: flex;
  /* 使用 flex 佈局 */
  align-items: center;
  /* 垂直居中 */
}

.search-container label {
  font-weight: bold;
  margin-right: 10px;
  /* 標籤和輸入框之間的間隔 */
}

.search-container input[type="text"] {
  flex-grow: 1;
  /* 讓輸入框填滿剩餘空間 */
  margin-left: 0;
  /* 因為 label 已經有 margin-right */
  /* margin-bottom 已在上面 select, input[type="text"], button 處統一定義 */
}

/* 表格樣式 */
.table-container {
  /* 為表格添加一個容器，方便管理樣式 */
  overflow-x: auto;
  /* 允許表格水平滾動 */
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  /* 與下方元素的間距 */
}

table.display {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  /* 移除表格自身的 margin-top，由容器控制 */
}

th,
td {
  padding: 12px 15px;
  text-align: left;
  /* 文字靠左，通常更易讀 */
  border-bottom: 1px solid #e0e0e0;
  /* 更細緻的邊框 */
}

th {
  background-color: #f0f2f5;
  /* 更柔和的表頭背景色 */
  color: #333;
  /* 深色文字 */
  font-weight: bold;
  /* 加粗表頭文字 */
  white-space: nowrap;
  /* 防止表頭文字換行 */
}

td {
  background-color: #ffffff;
  word-wrap: break-word;
}

tr:nth-child(even) td {
  background-color: #f9f9f9;
}

tr:hover td {
  background-color: #e9ecef;
  /* 懸停時的背景色 */
}

/* DataTables 調整 */
.dataTables_wrapper {
  padding: 0;
  /* 移除 DataTables 自身的 padding，由 .table-container 控制 */
}

.dataTables_length,
.dataTables_filter {
  margin-bottom: 15px;
  /* 增加與表格的間距 */
  font-size: 14px;
}

.dataTables_info {
  font-size: 14px;
  padding-top: 10px;
  /* 與分頁元件的間距 */
}

/* 將搜尋框移到右邊 (DataTables 預設行為，可微調) */
.dataTables_filter {
  float: right;
  text-align: right;
}

.dataTables_filter input {
  font-size: 14px;
  /* 調整 DataTables 搜尋框字體 */
  padding: 8px 10px;
  /* 調整 DataTables 搜尋框內邊距 */
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  /* margin-bottom 已在上面 select, input[type="text"], button 處統一定義 */
}

/* 表格列調整 (如果需要可調整寬度的功能) */
#json-table th,
#school-data-table th {
  position: relative;
  /* cursor: ew-resize; */
  /* 如果需要手動調整列寬，取消註解 */
}

#json-table td,
#school-data-table td {
  min-width: 80px;
  /* 增加最小寬度 */
  /* max-width: 300px; */
  /* 視情況設定最大寬度 */
  height: auto;
  /* 高度自動 */
  /* cursor: pointer; */
}

#json-table,
#school-data-table {
  table-layout: auto;
  /* 讓瀏覽器自動決定列寬 */
}

/* School Data Table 容器樣式 */
#school-data-table-container {
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 0;
  /* 內部的 table-container 會處理 padding */
  border-radius: 8px;
  margin-top: 20px;
  /* 與上方表格的間距 */
}

#school-data-table-container h3 {
  margin: 15px;
  /* 標題的內邊距 */
  padding-bottom: 10px;
  /* 標題下方的間距 */
  border-bottom: 1px solid #eee;
  /* 標題下的分隔線 */
}

/* --- 懸浮按鈕樣式 --- */
.export-buttons {
  /* 這是你添加的懸浮按鈕樣式，它會覆蓋或擴展上面 .export-buttons 的 margin-left 屬性 */
  position: fixed;
  top: 20px;
  /* 距離視窗頂部的距離 */
  right: 20px;
  /* 距離視窗右側的距離 */
  z-index: 1000;
  /* 確保它在其他元素之上 */
  background-color: white;
  /* 可選：添加背景色以避免文字重疊 */
  padding: 10px;
  /* 可選：添加一些內邊距 */
  border-radius: 5px;
  /* 可選：添加圓角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 可選：添加陰影效果 */
  /* margin-left: auto; 會因為 position:fixed 和 right 的設定而不再嚴格需要，但保留也無大礙 */
}


/* --- 響應式設計：手機版樣式 --- */
@media (max-width: 768px) {
  body {
    padding: 10px;
    /* 調整 body 內邊距 */
    font-size: 15px;
    /* 稍微增大基礎字體，方便閱讀 */
  }

  .header-container {
    flex-direction: column;
    /* 標題和按鈕垂直排列 */
    align-items: flex-start;
    /* 左對齊 */
  }

  /* 在手機版，如果 export-buttons 是 fixed 的，下面的樣式可能需要調整或考慮是否依然適用 */
  .export-buttons {
    /* position: fixed; 會讓它脫離 header-container 的流佈局 */
    /* 如果仍然希望它在 header-container 塌陷時佔據特定位置，可能需要調整 */
    /* 以下是原有的手機版樣式，在 position:fixed 的情況下，width:100% 和 margin-left:0 可能不再是期望的行為 */
    /* 你可能需要決定在小螢幕時，fixed 的按鈕如何表現 */

    /* 原有樣式 (與 fixed 佈局可能衝突，請根據需求調整):
    margin-left: 0;
    margin-top: 15px;
    width: 100%;
    display: flex;
    gap: 10px;
    */

    /* 如果希望 fixed 按鈕在小屏幕依然靠右上方，則不需要修改太多 */
    /* 但如果希望它在小螢幕變成橫跨頂部或底部，則需要在此處修改 top, right, left, bottom, width 等屬性 */
    /* 例如，讓按鈕在小屏幕時橫向排列並置於頂部： */

    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    display: flex;
    justify-content: space-around;/
  }

  .export-buttons button {
    flex-grow: 1;
    /* 在 fixed 佈局下，如果按鈕容器不是 flex 且有固定寬度，這個可能不需要 */
  }

  .select-area-container {
    flex-direction: column;
    /* 選擇器垂直堆疊 */
    gap: 10px;
  }

  .select-container {
    width: 100%;
    /* 選擇器佔滿寬度 */
    margin-right: 0;
    /* 移除右邊距 */
    min-width: unset;
    /* 重置最小寬度 */
  }

  .dataTables_filter {
    float: none;
    /* 取消浮動 */
    text-align: left;
    /* 靠左對齊 */
    width: 100%;
    /* 佔滿寬度 */
    margin-bottom: 10px;
  }

  .dataTables_filter input {
    width: calc(100% - 50px);
    /* 調整輸入框寬度，給標籤留空間 */
    margin-left: 0;
  }

  .dataTables_length {
    float: none;
    /* 取消浮動 */
    text-align: left;
    /* 靠左對齊 */
    margin-bottom: 10px;
  }

  /* 讓 DataTables 的控制元件在小螢幕上更好排列 */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center;
    /* 或 left/right 根據喜好調整 */
    margin-bottom: 10px;
  }

  .dataTables_paginate .paginate_button {
    padding: 0.3em 0.8em;
    /* 調整分頁按鈕大小 */
  }

  th,
  td {
    padding: 10px 8px;
    /* 調整表格儲存格內邊距 */
    font-size: 13px;
    /* 調整表格內字體大小 */
  }
}

/* --- 響應式設計：更小螢幕的調整 (例如小於 480px) --- */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .export-buttons {

    flex-direction: column;
    align-items: flex-end;

    .export-buttons button {
      width: 100%;
      /* 如果上面 .export-buttons 設為 flex-direction: column，這個可以讓按鈕佔滿寬度 */
    }

    th,
    td {
      font-size: 12px;
      /* 進一步縮小表格字體 */
    }

    #github-push-time {
      font-size: 14px;
    }

    .last-updated-container h3 {
      font-size: 1.1em;
    }
  }
}