* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: 402px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#homePage .header {
  justify-content: flex-start;
}

.logo-image {
  height: 40px;
  width: auto;
  display: block;
  position: absolute;
  top: 50%; /* 垂直置中於 header */
  left: 50%; /* 水平置中 */
  transform: translate(-50%, -50%); /* 精確校準中心點 */
}

.lang-btn {
  background: #f2f2f2;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #53565c;
  transition: background 0.2s;
}

.lang-btn:hover {
  background: #e0e0e0;
}

.lang-btn.active {
  background: #b3cad8;
  color: white;
}

.page {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page.active {
  display: flex;
}

.header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  height: 60px;
  position: relative;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  color: #53565c;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.page-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.page-copyright {
  text-align: center;
  color: #53565c;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  margin-top: auto;
  padding-bottom: 20px;
  flex-shrink: 0;
}

/* auth page */
#auth-container {
  padding: 40px 40px 0 40px; /* 在容器內部增加一些垂直內邊距 */
  display: flex; /* 容器本身也使用 flexbox */
  flex-direction: column; /* 讓子元素垂直堆疊 */
  align-items: stretch; /* 讓子元素（如按鈕）撐滿寬度 */
  margin-top: 80px;
}

.auth-logo {
  display: block; /* 讓圖片可以設定 margin: auto 來置中 */
  max-width: 150px; /* 設定圖片的最大寬度，請依你的圖片調整 */
  height: auto; /* 讓高度自動調整以保持比例 */
  margin: 0 auto 20px auto; /* 上方0, 左右自動(實現水平置中), 下方20px(與副標題的間距) */
  /* 如果你的 #auth-container 仍然是 flex 容器且 direction 是 column，
                也可以用下面的方式置中 (二選一即可)： */
  /* align-self: center; */
  /* margin-bottom: 20px; */
}

.auth-subtitle {
  text-align: center;
  color: #53565c;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 5px;
  margin-top: 20px;
}

.auth-divider {
  display: flex; /* 使用 Flexbox 來排列線條和文字 */
  align-items: center; /* 垂直置中線條和文字 */
  text-align: center; /* 確保文字本身置中 (雖然 flex 也能處理) */
  margin: 25px 0; /* 設定分隔線上下方的間距，請自行調整 */
  color: #53565c; /* 設定文字和線條的顏色 (稍淺的灰色) */
  font-size: 14px; /* 設定文字大小 */
  font-weight: 500;
  margin-bottom: 30px;
}

/* 使用偽元素畫左右兩邊的線條 */
.auth-divider::before,
.auth-divider::after {
  content: ""; /* 偽元素必需的屬性 */
  flex-grow: 1; /* 讓線條自動填滿左右兩邊的剩餘空間 */
  height: 1px; /* 線條的粗細 */
  background-color: #53565c; /* 線條的顏色 (比文字稍深一點) */
}

/* 在文字 "or" 的左右兩邊增加一些空間，把它和線條隔開 */
.auth-divider span {
  padding: 0 15px; /* 在文字左右各加上 15px 的內邊距 */
  flex-shrink: 0; /* 防止文字在空間不足時被壓縮 */
}

#auth-container .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

#auth-container label {
  width: 80px;
  margin-right: 10px;
  text-align: right;
  color: #53565c;
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0;
}

#auth-container input[type="email"],
#auth-container input[type="password"] {
  flex-grow: 1; /* 讓輸入框佔據剩餘的所有空間 */
  padding: 12px;
  border: 1px solid #ccc;
  /* border-radius: 10px; */
  box-sizing: border-box; /* 將 padding 和 border 計入寬度 */
  font-size: 16px;
}

/* 錯誤訊息樣式 */
.auth-error {
  color: #d32f2f; /* 錯誤紅色 */
  margin-top: 10px; /* 錯誤訊息上方的間距 */
  margin-bottom: 15px; /* 錯誤訊息下方的間距 */
  text-align: center;
  font-size: 14px;
  min-height: 20px; /* 預留空間，避免佈局跳動 */
}

/* 通用按鈕樣式 */
.auth-button,
.auth-link {
  width: 100%;
  padding: 10px;
  border: none;
  /* border-radius: 12px; */
  font-size: 17px; /* 按鈕字體稍大 */
  font-weight: 600; /* 字重調整 */
  cursor: pointer;
  box-sizing: border-box; /* 將 padding 計入寬度 */
  text-align: center; /* 確保按鈕文字置中 */
}

/* 主要按鈕 (登入) */
.auth-button {
  background-color: #b3cad8;
  color: #53565c;
  margin-top: 20px;
}

/* 次要按鈕 (註冊) */
.auth-button.secondary {
  background-color: #f2f2f2;
  color: #53565c; /* 確保文字顏色對比度足夠 */
  margin-top: 10px; /* 按鈕之間的統一間距 */
}

/* Google 按鈕 - 修正選擇器並加上基本樣式 */
.auth-button.google-button {
  /* 正確的選擇器 (兩個 class 連寫) */
  background-color: #f2f2f2; /* 白色背景 */
  color: #4285f4; /* Google 藍色文字 */
  border: 1px solid #dadce0; /* 細邊框 */
  margin-bottom: 10px;
  /* 如果你有 Google 圖示，可以在這裡添加樣式 */
}

.auth-button.google-button .google-icon {
  margin-right: 12px; /* 圖示和文字之間的間距 */
  /* SVG 的寬高已在 HTML 中設定，通常不需要再設 */
  flex-shrink: 0; /* 防止圖示被壓縮 */
}

.auth-button.google-button:active {
  background-color: #f1f3f4; /* 點擊時更深的背景 */
  box-shadow: none; /* 可選：移除陰影 */
}

.forgot-password-link {
  display: block; /* 讓它可以設定 text-align */
  text-align: center; /* 將連結靠右對齊 */
  margin-top: 5px; /* 與上方密碼框的間距 */
  margin-bottom: 5px; /* 與下方錯誤訊息/按鈕的間距 */
  font-size: 14px; /* 字體可以小一點 */
  background: none; /* 移除繼承自 auth-link 的背景 */
  padding: 0; /* 移除繼承自 auth-link 的內邊距 */
  width: auto; /* 移除繼承自 auth-link 的寬度 */
  text-decoration: none; /* 移除預設底線 (如果 auth-link 沒有移除的話) */
  color: #66828e; /* 設定顏色 */
}

/* 連結樣式按鈕 (重新寄送驗證信) */
.auth-link {
  background: none; /* 看起來像連結 */
  color: #66828e; /* 使用連結顏色 */
  font-weight: 500;
  padding: 10px; /* 連結樣式按鈕用較少 padding */
  margin-top: 15px; /* 連結上方多一點間距 */
  text-decoration: underline; /* 可選：加上底線 */
}

/* 可選：移除按鈕預設的焦點外框，讓視覺更統一 */
button:focus {
  outline: none;
}
/* auth page */

/* set up page */
input[type="number"] {
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #53565c;
  font-family: "Inter", sans-serif;
}

input[type="number"]:focus {
  outline: 2px solid #66828e;
}

.avatar-option {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #53565c;
  font-size: 30px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border 0.2s, background-color 0.2s;
  text-align: center;
}

.avatar-option:hover {
  background-color: #e6e6e6;
}

.avatar-option.selected {
  border: 3px solid #66828e;
  background-color: #b3cad8;
  color: white;
}

input.avatar-option {
  font-size: 28px;
  padding: 0;
  text-align: center;
  border: none;
  background-color: transparent;
}

input.avatar-option::placeholder {
  color: #53565c;
  opacity: 1;
}

input.avatar-option.selected::placeholder {
  color: white;
}

input.avatar-option.selected {
  color: #53565c;
  border: 3px solid #66828e;
  background-color: #b3cad8;
}
/* set up page */

/* home page */
.page-title {
  text-align: left;
  color: #53565c;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
  flex-shrink: 0;
}

.clock-container {
  background-color: #f2f2f2; /* 背景色 (用你 App 的灰色背景) */
  border-radius: 8px; /* 圓角 */
  padding: 20px; /* 內邊距 (讓時鐘和框框有空間) */
  margin-top: 10px; /* 和上方標題的間距 */

  /* 可選：如果你想要一個可見的邊框線 */
  /* border: 1px solid #e0e0e0; */

  /* 可選：如果你想要一點點陰影 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#currentDate {
  text-align: center;
  color: #53565c;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.48px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.digital-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* margin-bottom: 20px; */
  flex-shrink: 0;
}

.time-unit {
  display: flex;
  gap: 8px;
}

/*
.digit-box {
  width: 41px;
  height: 60px;
  /* background: #d7cdd5; */
/* border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
*/

.digit-box span {
  color: #53565c;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.colon {
  color: #53565c;
  font-size: 30px;
  font-weight: 700;
  transform: translateY(2px);
}

/* * 1. 包裝 (Wrapper):
 * 它的工作是「撐開」垂直空間，讓打卡按鈕不會往上跑。
*/
.home-page-divider-wrapper {
  height: 5px; /* 線條的粗細 */
  margin: 20px 0; /* 線條的「上下」間距 */
  position: relative; /* 關鍵：作為 "divider-line" 的定位基準 */
}

.home-page-divider {
  height: 100%; /* 繼承 wrapper 的高度 */
  background-color: #f2f2f2; /* 線的顏色 */
  position: absolute;
  left: -20px; /* 往左 20px (突破 .page-content 的 padding) */
  right: -20px; /* 往右 20px (突破 .page-content 的 padding) */
  /* * 我們用 left: -20px 和 right: -20px
   * 瀏覽器會自動幫我們把寬度拉滿，這比 calc() 更可靠
  */
}

.page-title-punch {
  text-align: left;
  color: #53565c;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-top: 15px;
  margin-bottom: 5px;
  flex-shrink: 0;
}

.punch-btn {
  width: 230px;
  height: 78px;
  background: #b3cad8;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  flex-shrink: 0;
  position: relative;
  /* --- ↓↓ 3D 立體感樣式 ↓↓ --- */
  /* 1. 使用漸層取代單色，模擬光從上往下照 */
  background: linear-gradient(to bottom, #c0d3e0, #b3cad8);
  /* 2. 移除舊 border，改用 3D 邊緣效果 */
  border: none;
  border-top: 1px solid #c8d8e3; /* 頂部高光 */
  /* 3. 關鍵：用 box-shadow 做出按鈕的 "厚度" */
  /* 參數： X偏移 Y偏移 模糊 顏色 */
  box-shadow: 0 4px 0 #9cb0be,
    /* <--- 這是 4px 厚的 "底部邊緣" */ 0 6px 12px rgba(0, 0, 0, 0.1); /* 這是按鈕底下的陰影 */
  /* 4. 讓 "按下" 的動畫更流暢 */
  transition: background 0.2s, transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

/*
.punch-btn:hover {
  background: #a0b8c7;
}
*/

/* 按下 (Active) 時，讓按鈕 "沉" 下去 */
.punch-btn:active {
  /* 1. 關鍵：讓按鈕往下移動 4px (剛好等於底部邊緣的厚度) */
  transform: translateY(4px);
  /* 2. 移除 "底部邊緣" (因為被壓下去了) */
  box-shadow: 0 0 0 #9cb0be, 0 2px 5px rgba(0, 0, 0, 0.1); /* 陰影也變小 */
  background: linear-gradient(to bottom, #aebecb, #b3cad8); /* 顏色稍微變暗 */
}

#punchText {
  color: #53565c;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.64px;
  /* --- ↓↓ 修正你的 HTML 內嵌樣式 ↓↓ --- */
  /* 移除絕對定位，讓 JS 控制 left 即可 */
  position: absolute;
  top: 19px;
  text-align: center;
  /* 讓文字也有一點陰影增加立體感 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.punch-btn.punched-in #punchText {
  left: 58px;
  white-space: nowrap;
}

.toggle-bg {
  width: 48px;
  height: 24px;
  left: 4px;
  top: 27px;
  position: absolute;
  border-radius: 50px;
  transition: background 0.3s;
  /* 關鍵：使用 "內陰影" 讓它看起來像個 "凹槽" */
  background: #d9d9d9; /* 這是 JS 會蓋過的預設值 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-circle {
  width: 18px;
  height: 18px;
  top: 30px;
  position: absolute;
  background: #fdfdfd;
  border-radius: 9999px;
  transition: left 0.3s;
  /* 關鍵：讓 "圓圈" 看起來是凸的 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), /* 底部陰影 */ inset 0 1px 1px white; /* 內部高光 */
}

.home-divider {
  height: 2px; /* 線的粗細 */
  background-color: #f2f2f2; /* 線的顏色 */
  margin-bottom: 20px;
  width: 100%;
}

#clockInTimeText {
  text-align: left;
  margin-bottom: 10px;
  flex-shrink: 0;
}

#clockInLabel {
  background-color: #f2f2f2;
  color: #53565c;
  font-size: 15px;
  font-weight: 500px;
  border-radius: 15px;
  border: none;
  padding: 8px;
}

#clockInValue {
  color: #53565c;
  font-size: 20px;
  font-weight: 700px;
  letter-spacing: 0.48px;
}

#clockOutTimeText {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

#clockOutLabel {
  background-color: #f6cbcb;
  color: #53565c;
  font-size: 15px;
  font-weight: 500px;
  border-radius: 15px;
  border: none;
  padding: 8px;
}

#clockOutValue {
  color: #53565c;
  font-size: 20px;
  font-weight: 700px;
  letter-spacing: 0.48px;
}

/* 1. 定義一個名為 'bounce' 的關鍵影格動畫 */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0); /* 0% 和 100% 時，元素在原位 */
  }
  50% {
    transform: translateY(
      -10px
    ); /* 50% 時，元素向上移動 10px (你可以調整這個值) */
  }
}

/* 2. 插圖的基本樣式 (如果你沒有，可以加上) */
.fruit {
  max-width: 30px; /* 範例：設定最大寬度，請根據你的圖片調整 */
  height: auto;
  margin: 0 auto; /* 如果你想讓單個圖片水平置中 */
}

/* 3. 容器的排版 (讓多個圖片排成一列或一排) */
.fruit-container {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* <-- 從 space-around 改成 center */
  gap: 20px;
  align-items: flex-end; /* 讓所有圖片底部對齊 (像站在同一個平面) */
  margin-top: 20px; /* 和上方內容的間距 */
  margin-bottom: 20px; /* 和下方內容的間距 */
  margin-left: 10px;
  margin-right: 10px;
}

/* 4. 將動畫應用到 'bounce-animation' class */
.bounce-animation {
  animation: bounce 1.5s ease-in-out infinite; /* 動畫名稱 週期 速度曲線 重複無限次 */
  animation-delay: var(--animation-delay); /* 使用 HTML 中設定的延遲 */
}

/* Toast 通知基本樣式 */
.toast {
  visibility: hidden; /* 初始隱藏，且不佔據空間 */
  min-width: 250px; /* 最小寬度 */
  background-color: #d7cdd5;
  color: #53565c;
  text-align: center; /* 文字置中 */
  border-radius: 5px; /* 圓角 */
  padding: 16px; /* 內邊距 */
  position: fixed; /* 固定在視窗上 */
  z-index: 1001; /* 確保在其他元素之上 (除了 modal) */
  left: 50%; /* 水平置中第一步 */
  transform: translateX(-50%); /* 水平置中第二步 */
  bottom: 30px; /* 距離底部 30px */
  font-size: 15px;
  opacity: 0; /* 初始完全透明 */
  transition: opacity 0.5s, visibility 0.5s, bottom 0.5s; /* 動畫效果 */
}

/* Toast 通知顯示時的樣式 */
.toast.show {
  visibility: visible; /* 變為可見 */
  opacity: 1; /* 完全不透明 */
  bottom: 50px; /* 可以稍微向上移動一點，產生滑入效果 */
}
/* home page */

/* others page */
.profile-card {
  /* display: flex; 
align-items: center; */ /* 可以不用 flex，讓 profile-info 自然佔滿寬度 */
  position: relative; /* 保持 relative 給頭像定位用 */
  background: #f2f2f2;
  border-radius: 20px;
  padding: 20px; /* ✨ 大幅減少 padding ✨ */
  min-height: 120px; /* 確保卡片有基本高度容納頭像 */
}

.profile-avatar {
  position: absolute; /* 頭像保持 absolute */
  top: 50%;
  transform: translateY(-50%);
  left: 15px; /* 靠近左邊 */

  font-size: 55px; /* 保持 */
  width: 80px; /* 保持 */
  height: 80px; /* 保持 */
  line-height: 80px; /* 保持 */
  border-radius: 50%; /* 保持 */
  background-color: #ffffff; /* 保持 */
  text-align: center; /* 保持 */
}

/* ✨ 新增: 包裹右側文字和按鈕的容器 ✨ */
.profile-info {
  /* 這個 div 會自然佔據 profile-card 內剩餘的空間 */
  padding-left: 95px; /* ✨ 為頭像(80px) + 間距(15px) 留出左側空間 ✨ */
  /* 你可以微調 110px 這個值 */
  display: flex; /* ✨ 讓內部元素垂直排列 ✨ */
  flex-direction: column;
  justify-content: center; /* ✨ 垂直居中對齊姓名/Email/按鈕區塊 (可選) ✨ */
  height: 100%; /* 確保容器能撐開以供垂直居中 */
}

/* ✨ 修改：移除 absolute 定位 ✨ */
.profile-name {
  /* position: absolute; top: 45px; left: 130px; */ /* 移除 */
  font-size: 18px; /* 調整字體大小 */
  font-weight: 700; /* 加粗 */
  letter-spacing: 1px;
  color: #53565c;
  text-align: left; /* 靠左對齊 */
  margin-bottom: 3px; /* ✨ 姓名和 Email 間距 ✨ */
  width: 100%; /* 確保佔滿寬度以便靠左 */
  white-space: normal;
}

/* ✨ 修改：移除 top/left，保持正常流 ✨ */
.profile-email {
  /* top: 50px; left: 130px; */ /* 移除 */
  font-size: 14px; /* 調整字體大小 */
  font-weight: 400; /* 正常字重 */
  color: #75797b; /* 顏色稍淺 */
  text-align: left; /* 靠左對齊 */
  margin-bottom: 10px; /* ✨ Email 和按鈕間距 ✨ */
  word-break: break-all; /* 長 Email 換行 */
  white-space: normal; /* 允許換行 */
  width: 100%; /* 確保佔滿寬度以便靠左 */
}

/* ✨ 修改：移除 absolute 定位，調整樣式 ✨ */
.editProfile-Btn {
  /* position: absolute; top: 100px; left: 130px; */ /* 移除 */
  background: #b3cad8;
  color: #53565c;
  width: auto; /* ✨ 寬度自適應內容 ✨ */
  align-self: flex-start; /* ✨ 按鈕本身靠左對齊 ✨ */
  padding: 8px 15px;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center; /* 按鈕文字居中 */
  cursor: pointer;
}

.user-actions {
  display: flex;
  flex-direction: column;
}

.action-btn {
  cursor: pointer;
}

.exportPage-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  background-color: transparent;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.exportPage-btn .fa-file-excel {
  color: #217346;
}

.exportPage-btn .fa-file-alt {
  color: #0078d4;
}

.exportPage-btn .fa-file-pdf {
  color: #d32f2f;
}

/* --- 用於 userPage 的 Accordion 樣式 --- */
.accordion-trigger {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #53565c;
  cursor: pointer;
  transition: background-color 0.2s, border-radius 0.1s;
}

/* 觸發按鈕內的排版 */
.accordion-title-container {
  display: flex;
  align-items: center;
  gap: 15px; /* 標題和圖示的間距 */
}

.accordion-icons-preview {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

/* 箭頭圖示 */
.accordion-icon {
  color: #75797b;
  transition: transform 0.3s ease-in-out; /* 箭頭旋轉動畫 */
}

/* --- 按鈕被點擊 (active) 時的樣式 --- */
.accordion-trigger.active {
  border-bottom-left-radius: 0; /* 讓按鈕和打開的面板貼合 */
  border-bottom-right-radius: 0;
  background-color: transparent;
}

.accordion-trigger.active .accordion-icon {
  transform: rotate(180deg); /* 箭頭旋轉 180 度 */
}

/* --- 可縮合的面板 --- */
.accordion-panel {
  background-color: transparent;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* 關鍵的動畫效果 */
  max-height: 0; /* 預設是 0 (縮合的) */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding: 0 15px; /* 縮合時沒有上下 padding */
}

/* 面板被點擊 (active) 時的樣式 */
.accordion-panel.active {
  max-height: 500px; /* 展開：設一個比內容還高的高度 */
  padding: 15px; /* 展開時，加入 padding */
}

/* --- 覆蓋舊的 export-item/button 樣式，讓它們適應面板 --- */
.accordion-panel .export-item {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  background-color: #ffffff; /* 讓按鈕在面板中是白底 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.accordion-panel .export-item:last-of-type {
  margin-bottom: 0; /* 最後一個按鈕不要 margin */
}

.accordion-panel .export-button {
  width: 100%;
  height: auto;
  padding: 15px;
  background: transparent;
  text-align: left;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 覆蓋掉 JS 設的 disabled 樣式，讓它保持可見 */
  opacity: 1 !important;
  cursor: pointer;
}
.accordion-panel .export-button:disabled {
  /* 只有在 disabled 時才套用樣式 */
  cursor: not-allowed;
  opacity: 0.5 !important;
}

/* 重新設定彩色圖示的 CSS 規則 */
.accordion-icons-preview .fa-file-excel,
.accordion-panel .export-button .fa-file-excel {
  color: #217346;
}

.accordion-icons-preview .fa-file-alt,
.accordion-panel .export-button .fa-file-alt {
  color: #0078d4;
}

.accordion-icons-preview .fa-file-pdf,
.accordion-panel .export-button .fa-file-pdf {
  color: #d32f2f;
}

/* "No data" 訊息的樣式 */
.accordion-panel #exportMessage {
  text-align: center;
  font-size: 14px;
  color: #75797b;
  padding-top: 10px;
}

.infoPage-btn {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #53565c;
  cursor: pointer;
}

.logout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f6cbcb;
  color: #53565c;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: auto;
}

.user-page-divider-wrapper {
  height: 5px; /* 線條的粗細 */
  margin: 20px 0; /* 線條的「上下」間距 */
  position: relative; /* 關鍵：作為 "divider-line" 的定位基準 */
}

.user-divider-1 {
  height: 100%; /* 繼承 wrapper 的高度 */
  background-color: #f2f2f2; /* 線的顏色 */
  position: absolute;
  left: -20px; /* 往左 20px (突破 .page-content 的 padding) */
  right: -20px; /* 往右 20px (突破 .page-content 的 padding) */
  /* * 我們用 left: -20px 和 right: -20px
   * 瀏覽器會自動幫我們把寬度拉滿，這比 calc() 更可靠
  */
}

.user-divider-2 {
  height: 2px; /* 線的粗細 */
  background-color: #f2f2f2; /* 線的顏色 */
  margin: 15px 0; /* 線的上下間距 */
  width: 100%;
}

.user-divider-3 {
  height: 2px; /* 線的粗細 */
  background-color: #f2f2f2; /* 線的顏色 */
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
}
/* user page */

/* settings page */
#settings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.settings-item {
  width: 314px;
  background: #f2f2f2;
  border-radius: 25px;
  padding: 25px 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
/* settings page */

/* history page */
.history-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-record-btn {
  padding: 8px 15px;
  background-color: #b3cad8;
  color: #53565c;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

#monthSelector {
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: #f2f2f2;
}

#monthSummary {
  text-align: center;
  color: #53565c;
  font-size: 16px;
  font-weight: 600;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

#historyListContainer {
  flex-grow: 1;
  overflow-y: auto;
}

.history-item {
  background: transparent;
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  /* ✨ 新增：定義透明度和變換的過渡效果 ✨ */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out,
    margin 0.4s ease-out, padding 0.4s ease-out, height 0.4s ease-out;
  overflow: hidden; /* 配合 height 動畫 */
}

/* ✨ 新增：正在刪除 (淡出中) 的樣式 ✨ */
.history-item.deleting {
  opacity: 0;
  transform: scale(0.95); /* 可選：稍微縮小增加效果 */
  /* 讓元素高度也平滑變為 0，佔用空間消失 */
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* 移除邊框，避免高度為0時還看得到線 */
  border: none;
}

.history-item-header {
  font-size: 15px;
  font-weight: 700;
  color: #53565c;
  margin-bottom: 8px;
}

.history-item-details {
  font-size: 15px;
  font-weight: 500px;
  color: #53565c;
  margin-bottom: 2px;
}

.history-item-wage {
  font-size: 15px;
  font-weight: 700;
  color: #66828e;
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.edit-wage-btn {
  margin-left: 10px;
  cursor: pointer;
  color: #53565c;
}

.history-item-note {
  margin-top: 12px;
}

.note-textarea {
  width: 100%;
  padding: 8px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 14px;
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}

.history-item-actions {
  margin-top: 15px;
  text-align: right;
}

.button-style-small.edit-btn {
  padding: 8px 15px;
  background: #b3cad8;
  color: #53565c;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
}

.button-style-danger-small.delete-btn {
  padding: 8px 15px;
  background: #f6cbcb;
  color: #53565c;
  font-size: 12px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
}
/* history page */

/* export page */
#export-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.export-item {
  width: 314px;
  height: 85px;
  background: #f2f2f2;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.export-button {
  width: 250px;
  height: 70px;
  background: transparent;
  border-radius: 15px;
  border: none;
  cursor: not-allowed;
  color: #53565c;
  font-size: 18px;
  font-family: Inter;
  font-weight: 500;
  transition: all 0.1s ease-in-out;
}

.export-button i {
  margin-right: 8px;
}

.export-button .fa-file-excel {
  color: #217346; /* A standard green for Excel */
}

.export-button .fa-file-alt {
  color: #555; /* A neutral dark grey for text */
}

.export-button .fa-file-pdf {
  color: #d32f2f; /* A standard red for PDF */
}

.export-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4a616b;
}

#pdfRecordTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#pdfRecordTitle {
  background-color: #ffffff;
  color: #53565c;
  border: 1px solid #aaa;
}

#pdfRecordTable thead th {
  border: 1px solid #aaa;
  padding: 4px 6px; /* 你可以調整 8px 來改變標題的上下行距 */
  line-height: 1.4; /* 你可以調整 1.4 來改變標題的文字行高 */
  background-color: #f4f4f4;
  font-weight: bold;
  text-align: left;
}

#pdfRecordTable tbody td {
  border: 1px solid #aaa;
  padding: 4px 6px;
  text-align: left;
  line-height: 1.3; /* 縮小文字行高 */
}

#pdfRecordTable tfoot td {
  border: 1px solid #aaa;
  padding: 6px;
}

#pdfSummaryRow {
  background-color: #f2f2f2;
  font-weight: 700;
}
#pdfSummaryRow td:first-child {
  /* 讓 "Total:" 靠右 */
  text-align: right;
}
#pdfSummaryRow td:not(:first-child) {
  /* 讓數字靠左 (或右，視需求) */
  text-align: left;
}

#pdfSubsidyRow {
  background-color: #e9f5e9; /* 淡綠色背景 (可自訂) */
  font-weight: 500; /* 可以用稍輕一點的字重 */
}

#pdfSubsidyRow td:first-child {
  /* 讓文字靠右 */
  text-align: right;
}

#pdfSubsidyRow td:last-child {
  /* 讓數字靠左 (或右) */
  text-align: left;
}

#pdfFinalTotalRow {
  background-color: #e3f2fd; /* 淡藍色背景 (可自訂) */
  font-weight: 700; /* 強調總計，使用粗體 */
  font-size: 1.05em; /* 字體可以稍微放大 */
  padding: 6px;
}
#pdfFinalTotalRow td:first-child {
  /* 讓文字靠右 */
  text-align: right;
}
#pdfFinalTotalRow td:last-child {
  /* 讓數字靠左 (或右) */
  text-align: left;
}

.pdf_generated_on {
  margin-top: 50px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
  font-size: 12px;
  color: #53565c;
}
/* export page */

/* calendar page */
#calendar-container {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* padding: 0 20px; */
  margin-bottom: 20px;
}

/* * 新增：頁面頂部 Header 中的 "Today" 按鈕樣式
 */
.header-today-btn {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 8px; /* 跟 header 裡其他按鈕風格一致 */
  padding: 6px 10px;
  height: 30px; /* 讓它和 header 高度匹配 */
  display: flex;
  align-items: center;
  gap: 6px; /* 圖示和文字的間距 */
  font-size: 14px;
  font-weight: 500;
  color: #53565c;
  cursor: pointer;
  transition: background-color 0.2s;
}

.header-today-btn i {
  font-size: 12px; /* 讓圖示小一點 */
}

#prevMonthBtn,
#nextMonthBtn {
  background-color: #b3cad8;
  border-radius: 5px;
  border: 0;
  color: #53565c;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  transition: background-color 0.2s, color 0.2s; /* 讓 hover 效果有漸變動畫 */
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  width: 100%;
  /* padding: 0 20px; */
}

.calendar-day,
.calendar-day-name {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.holiday {
  background-color: #f6cbcb;
  color: white;
  border-radius: 50%;
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #ccc;
}

.legend-label {
  font-size: 14px;
}

.today {
  outline: 2px solid #66828e;
  outline-offset: -2px;
  border-radius: 50%;
}

.selected-day {
  background-color: #66828e !important;
  color: white !important;
  border-radius: 50%;
}

.selected-date {
  color: #53565c;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-align: left;
  white-space: nowrap;
}

.holiday-display {
  color: #53565c;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.4px;
  text-align: left;
  white-space: nowrap;
}

#date-info-container {
  margin: 20px 0;
  padding: 0;
  text-align: left;
}

#note-input {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 2px;
  padding: 5px;
  box-sizing: border-box; /* 讓 width: 100% 的計算包含 padding 和 border */
  resize: vertical; /* 只允許垂直拖拉，禁止水平拖拉 */
  min-height: 50px; /* 設定最小高度，防止縮得太小 */
  background-color: #f2f2f2;
}

.save-note-btn {
  width: auto;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  color: #53565c;
  background: #b3cad8;
}

/* calendar page */

/* information page */
#info-container {
  display: flex;
  flex-direction: column;
  align-items: left;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.info-text {
  color: #53565c;
  font-size: 14px;
  font-weight: 400px;
  margin-bottom: 15px;
}

.info-title {
  color: #53565c;
  font-size: 14px;
  font-weight: 600px;
  margin-top: 10px;
}

.info-bullet {
  color: #53565c;
  font-size: 14px;
  font-weight: 400px;
  padding-left: 20px;
  margin-bottom: 15px;
}

.info-bullet-2 {
  color: #53565c;
  font-size: 14px;
  font-weight: 400px;
  padding-left: 15px;
}

/* Bottom Navigation */
.bottom-nav {
  display: none;
  justify-content: space-around;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 402px;
  flex-shrink: 0;
}

.nav-item {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-grow: 1;
}

.nav-icon {
  stroke: #75797b;
}

.nav-text {
  font-size: 12px;
  color: #75797b;
}

.nav-icon-solid {
  display: none;
}

.nav-text-solid {
  display: none;
}

.nav-item.active .nav-icon {
  display: none;
  /* stroke: #66828e; */
}

.nav-item.active .nav-text {
  display: none;
  /*
  color: #66828e;
  font-weight: 700;
  */
}

.nav-item.active .nav-icon-solid {
  display: inline-block;
  fill: #66828e; /* 顯示「實心」圖示，並填滿啟動顏色 */
  stroke: #53565c; /* 邊框也設為同色 */
  stroke-width: 2;
  width: 24px;
  height: 24px;
}

.nav-item.active .nav-text-solid {
  display: inline;
  color: #66828e;
  font-weight: 700;
  font-size: 12px;
}
/* Bottom Navigation */

/* Modal */
#editModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.editModel-contents {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 350px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal_edit_title {
  margin-top: 0;
  color: #53565c;
}

.model_label {
  display: block;
  margin-top: 10px;
  color: #53565c;
}

.modal-input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_cancel_button {
  padding: 10px 15px;
  background-color: #d9d9d9;
  color: #53565c;
  border: none;
  border-radius: 10px;
  margin-right: 10px;
}

.modal_save_button {
  padding: 10px 15px;
  background-color: #b3cad8;
  color: #53565c;
  border: none;
  border-radius: 10px;
}

#editWageModal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.editWageModal-contents {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 350px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal_edit_wage_title {
  margin-top: 0;
  color: #53565c;
}

.modal_edit_wage_label {
  display: block;
  margin-top: 10px;
  color: #53565c;
}

#editWageInput {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_edit_wage_hint {
  color: #53565c;
  font-size: 12px;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

#exportOptionModal {
  display: none;
  position: fixed;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.exportOptionModal-contents {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 350px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal_export_options_title {
  margin-top: 0;
  color: #53565c;
}

.modal_export_report_type {
  display: block;
  margin-top: 15px;
  color: #53565c;
}

#reportType {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_export_select_month {
  display: block;
  color: #53565c;
}

#exportMonth {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

#rangeInputGroup {
  display: none;
}

.modal_export_start_date {
  display: block;
  color: #53565c;
}

#startDate {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_export_end_date {
  display: block;
  color: #53565c;
}

#endDate {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_export_date_hint {
  color: #53565c;
  font-size: 12px;
  letter-spacing: 0.4px;
}

#confirmExportBtn {
  padding: 10px 15px;
  background-color: #b3cad8;
  color: #53565c;
  border: none;
  border-radius: 10px;
}

#addRecordModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.addRecordModal-contents {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 350px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal_add_title {
  margin-top: 0;
  color: #53565c;
}

.modal_add_date_label {
  display: block;
  margin-top: 10px;
  color: #53565c;
}

#newDate {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_add_clock_in_label {
  display: block;
  margin-top: 10px;
  color: #53565c;
}

#newClockIn {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal_add_clock_out_label {
  display: block;
  margin-top: 10px;
  color: #53565c;
}

#newClockOut {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

#pdfContentContainer {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 800px;
  height: auto;
  padding: 30px;
  background-color: white;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: #53565c;
  pointer-events: none;
}

.pdf_title {
  color: #53565c;
  border-bottom: 2px solid #53565c;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.pdf_logo {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 150px;
  height: auto;
  z-index: 10;
}