.logo img {
    height: 35px;
    width: auto;
}

/* 主視覺區塊 */
.hero {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 讓圖片滿版顯示 */
.hero img {
    width: 100%;
    height: auto;
    display: block;
}

#div-title-info {
    background: #D5F2F6;
}

.container {
    max-width: 800px;
    margin-top: 30px;
    font-weight: bold;
}
.card, .my-card {
    margin-bottom: 20px;
}
.card {
    border: none;
}
.card .card-header {
    background-color: unset;
    border: none;
}
.card-body {
    padding-top: 0px;
}

.form-control {
    border-width: 3px;
    border-color: #D5F2F6;
}

.icon-text {
    display: flex;
    align-items: flex-start;
}
.icon-text img {
    height: 1.2em;
    margin-right: 10px;
    vertical-align: middle;
}
.dot-text::before {
    content: "•"; /* 使用圆点符号 */
    font-size: 2em; /* 圆点的大小 */
    margin-right: 10px; /* 圆点与文字之间的间距 */
    vertical-align: middle; /* 垂直对齐 */
    color: #5DE1FC;
}
/*============================================================================================================*/
/* Loading 遮罩 */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 旋轉 Loading 圖案 */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.2);
    border-top-color: #007BFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.show-loading {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

pre 
{
    white-space: pre-wrap;  /* ✅ 允許自動換行 */
    word-wrap: break-word;  /* ✅ 避免過長單字溢出 */
    max-width: 100%;       /* ✅ 限制最大寬度 */
    overflow-x: auto;      /* ✅ 超出範圍時，允許水平滾動 */
    background: #f4f4f4;   /* ✅ 淺灰背景 */
    padding: 10px;         /* ✅ 增加內距 */
    border-radius: 5px;    /* ✅ 圓角邊框 */
    border: 1px solid #ddd; /* ✅ 淡灰色邊框 */
    font-family: monospace; /* ✅ 使用等寬字體 */
}

.toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.toggle-switch {
    display: flex;
    background: #ddd;
    border-radius: 25px;
    padding: 5px;
    width: 200px;
    position: relative;
}
.toggle-button {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.3s;
}
.toggle-button.active {
    background: #007BFF;
    color: white;
}
.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}
#generation-result {
    white-space: pre-line;
}
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
}
.drop-zone.dragover {
    background-color: #e3f2fd;
}
.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.image-preview div {
    position: relative;
    width: 100px;
    height: 100px;
}
.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.image-preview button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.preview-img-box {
    position: relative;
    width: 150px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f8f9fa;
}

.preview-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-img-box .remove-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    line-height: 22px;
}

/*---------------------------建班modal CSS-----------------------------------*/  
.activity-modal {
    display: none; /* 初始隱藏 */
    position: fixed; /* 固定在螢幕上 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精準置中 */
    background: #fff;
    padding: 15px 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* 更有浮起來的感覺 */
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    z-index: 1001; /* 保證在最上層 */
  }
  
  /* 順便補一個黑色半透明的背景遮罩 */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* 半透明黑色 */
    z-index: 1000; /* 在 modal 下面一層 */
  }
  
  /* 開啟 Modal 的按鈕 */
  .open-modal-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #00aaff;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 20px;
  }
  .open-modal-btn:hover {
    background-color: #008fcc;
  }

  h2 {
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
  }
  .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  .form-row label {
    width: 85px;
    text-align: left;
    margin-right: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row input[type="datetime-local"],
  .form-row select,
  .class-input {
    flex: 1;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .radio-group {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }
  #class-tags {
    margin-bottom: 8px;
  }
  .class-tag {
    display: inline-block;
    background: #00c58e;
    color: white;
    padding: 2px 10px;
    margin: 3px 5px 0 0;
    border-radius: 12px;
    font-size: 14px;
  }
  .class-tag button {
    background: none;
    border: none;
    color: white;
    margin-left: 5px;
    cursor: pointer;
  }
  .tag-input-group {
    display: flex;
    gap: 10px;
  }
  .small-btn {
    min-width: 122px;
    padding: 6px 12px;
    background-color: #10B981;
    color: white;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  .button-group {
    text-align: center;
    margin-top: 25px;
  }
  .submit-btn {
    min-width: 140px;
    min-height: 40px;
    background-color: #3b82f6;
    color: white;
    padding: 6px 30px;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    margin-left: 10px;
    cursor: pointer;
  }
  .cancel-btn {
    min-width: 140px;
    min-height: 40px;
    background-color: #bdbfc4;
    color: white;
    padding: 6px 30px;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    margin-right: 10px;
    cursor: pointer;
  }
  #to {
    margin: 0 5px 0 5px;
  }

  @media (max-width: 480px) {
      .cancel-btn {
      min-width: 80px;
      min-height: 40px;
      background-color: #bdbfc4;
      color: white;
      padding: 6px 30px;
      font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: 18px;
      border: none;
      border-radius: 6px;
      margin-right: 10px;
      cursor: pointer;
    }

    .submit-btn {
      min-width: 80px;
      min-height: 40px;
      background-color: #3b82f6;
      color: white;
      padding: 6px 30px;
      font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: 18px;
      border: none;
      border-radius: 6px;
      margin-left: 10px;
      cursor: pointer;
    }
  }

  .is-invalid {
    border-color: red !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
  }

  #fixed-days-select{
    padding: 3px;
    font-size: 14px;
  }
  /*end 建班modal CSS*/
/*成班、結果檢視按鈕樣式*/
 .nav-button-group {
      display: flex;
      align-items: center;
      overflow: visible; /* 若你用div包按鈕也要設 */
  }
 .nav-custom-btn {
    min-width: 162px;
    min-height: 40px;
    background-color: #3b82f6;
    color: white;
    position: relative;  
    padding: 6px 12px;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    margin-left: 10px;
    cursor: pointer;
 }

.nav-custom-btn-video {
    min-width: 162px;
    min-height: 40px;
    background-color: #0BAE6D;
    color: white;
    position: relative;  
    padding: 6px 12px;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    margin-left: 10px;
    cursor: pointer;
 }

 /* Tooltip 卡片設計 */
  .btn-tooltip {
      display: none;
      position: absolute;
      top: 40px;              /* 距離按鈕頂部 44px+6px = 50px */
      left: 0;
      width: 162px;
      background: #ddd;
      color: #2f2f2f;
      border-radius: 6px;
      border: 1px solid #595959;
      box-shadow: 0 2px 8px rgba(30,40,60,.08);
      font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
      font-weight: bolder;
      font-size: 16px;        /* 比18px小3pt */
      letter-spacing: 3px;
      padding: 12px;
      margin-top: 6px;
      z-index: 100;
  }
  .nav-custom-btn:hover .btn-tooltip,
  .nav-custom-btn:focus .btn-tooltip {
      display: block;
  }

 .btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 44px;
    font-family: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 2px;
    background: #fff;
    color: #222;
    border-radius: 40px;
    border: none;
    margin-left: 10px;
    transition: background 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    cursor: pointer;
}
.btn-login:hover, .btn-login:focus {
    background: #f4f4f4;
}
.login-avatar {
    width: 28px;         /* 根據你的設計圖微調，這裡假設28px */
    height: 28px;
    border-radius: 50%;  /* 圓形頭像 */
    object-fit: cover;
    margin-right: 10px;  /* 與登入文字間距 */
    background: #eee;    /* 如果圖片有透明可以加底色 */
}

.filterSearch {
  padding: 0.5rem; /* 相當於 p-2 */
  border-width: 1px; /* 相當於 border */
  border-style: solid;
  border-color: #e5e7eb; /* 預設的 border 顏色，您需要根據專案設定調整 */
  border-radius: 0.25rem; /* 相當於 rounded */
}

/* 專屬於 searchInput 的樣式 */
#searchInput {
  width: 33.333333%; /* 相當於 w-1/3 */
}

.time-picker-container {
    display: flex;
    align-items: center;
    gap: 8px;                  /* 稍微縮小間距 */
    width: 100%;
}

/* 日期輸入框設定 */
.time-picker-container input[type="datetime-local"] {
    flex: 1;
    min-width: 0;              /* 允許縮小 */
    width: 0;                  /* 解決 iOS Flexbox 寬度計算問題的關鍵 */
    padding: 8px 5px;          /* 減少左右 padding 以節省空間 */
    font-size: 14px;           /* 手機上稍微縮小字體 */
    -webkit-appearance: none;  /* 移除部分 iOS 原生外觀 */
}

/* "至" 文字的樣式 */
.time-picker-container .time-separator {
    flex-shrink: 0;
    color: #555;
    padding: 0 4px;
}

/* 調整按鈕群組 */
.activity-modal .button-group {
    margin-top: 25px;
    display: flex;             /* 確保按鈕水平排列 */
    justify-content: center;   /* 置中對齊 */
    gap: 10px;                 /* 按鈕之間的間距 */
}

/* === 關鍵修正：針對小螢幕手機的 RWD 設定 === */
@media (max-width: 480px) {
    /* 在手機上改為垂直排列 */
    .time-picker-container {
        flex-direction: column;
        align-items: stretch;  /* 讓輸入框填滿寬度 */
        gap: 8px;
    }
    
    /* 調整 "至" 的位置為置中 */
    .time-picker-container .time-separator {
        text-align: center;
        padding: 0;
    }

    /* 讓輸入框恢復正常高度計算 */
    .time-picker-container input[type="datetime-local"] {
        width: 100%;
        height: 40px; /* 給一個固定的舒適點擊高度 */
    }
}

@media (max-width: 768px) {

    /* --- 1. 減小 Modal 整體的上下內邊距 --- */
    .activity-modal {
        padding: 15px 20px; /* 左右邊距從 30px 縮小到 20px */
    }

    /* --- 2. 減小標題和第一行之間的距離 --- */
    .activity-modal h2 {
        margin-bottom: 12px; /* 從 15px 縮小到 12px */
        font-size: 18px;     /* 標題字體稍微縮小 */
    }

    /* --- 3. 這是最關鍵的：縮小每一行 (form-row) 之間的垂直距離 --- */
    .activity-modal .form-row {
        margin-bottom: 8px; /* 原本是 5px，但我們統一用這個屬性控制 */
    }
    
    /* 你的 custom.css 裡可能有這條，我們在這裡覆蓋它 */
    .form-row + .form-row {
        margin-top: 0; /* 取消舊的 margin-top */
    }

    /* --- 4. 縮短每一行本身的高度 (透過減小輸入框的 padding) --- */
    .activity-modal .form-row input[type="text"],
    .activity-modal .form-row input[type="number"],
    .activity-modal .form-row input[type="datetime-local"],
    .activity-modal .form-row select,
    .activity-modal .class-input {
        padding: 6px 8px; /* 上下邊距從 8px 縮小到 6px */
        font-size: 14px;  /* 輸入框字體稍微縮小 */
    }

    /* --- 5. 縮小標籤 (Label) 的寬度和字體 --- */
    .activity-modal .form-row label {
        width: 75px;        /* 標籤寬度從 85px 縮小到 75px */
        font-size: 14px;    /* 標籤字體稍微縮小 */
        margin-right: 8px;  /* 標籤和輸入框的距離也縮小一點 */
    }

    /* --- 6. 減小最後按鈕區塊和上方表單的距離 --- */
    .activity-modal .button-group {
        margin-top: 15px; /* 從 25px 大幅縮小到 15px */
    }
}