/* start 主題色與樣式覆寫 */

/* 主軸主題色與文字大小樣式覆寫 */
body {
    line-height: 1.5; /* 增加行高讓閱讀更舒適 */
}
.app-sidebar .menu .menu-item .menu-link .menu-text {
    padding-bottom: 2px;
}
/* 針對 Bootstrap 5 的表單控制項 */
.form-control, .form-select {
  font-size: 0.9375rem !important; /* 根據需求調整，1.1rem 約 17.6px */
}
/* 如果有使用浮動標籤 (Floating Labels) */
.form-floating > label {
  font-size: 0.9375rem; 
}
.btn {
  --bs-btn-font-size: 0.9375rem; /* 預設約為 1rem，調成 1.1rem 或 1.2rem */
}
h6{
    font-size: 15px;
}
:root {
  --bs-body-font-size: 0.9375rem;

  --bs-primary: #00acac;
  --bs-primary-rgb: 0, 172, 172; /* 必須提供 RGB 格式，供透明度背景使用 */
  /* 1. 設定標準連結顏色 */
  --bs-link-color: #00acac !important;
  /* 2. 設定 RGB 數值（僅填入數字，逗號隔開） */
  --bs-link-color-rgb: 0, 172, 172 !important;
  /* 3. 設定滑鼠懸停顏色 */
  --bs-link-hover-color: #008a8a !important;
  --bs-link-hover-color-rgb: 0, 138, 138 !important;
}
.btn-primary {
  --bs-btn-bg: var(--bs-app-theme);
  --bs-btn-border-color: var(--bs-app-theme);
  /* 滑鼠移入 (Hover) 狀態 */
  --bs-btn-hover-bg: #009191; /* 建議比主色稍微深一點點 */
  --bs-btn-hover-border-color: #009191;
  /* 點擊後的陰影 (Focus) */
  --bs-btn-focus-shadow-rgb: 0, 172, 172;
  /* 選取狀態 (Active) */
  --bs-btn-active-bg: #008080;
  --bs-btn-active-border-color: #008080;
}
/* 針對所有按鈕類別的禁用狀態覆寫 */
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    --bs-btn-disabled-color: #ffffff !important;         /* 禁用時的文字顏色，通常建議白色 */
    --bs-btn-disabled-bg: #80d6d6 !important;            /* 這是主題色 #00acac 的淡化版 (50% 混色) */
    --bs-btn-disabled-border-color: #80d6d6 !important;  /* 邊框同步淡化 */
    --bs-btn-disabled-opacity: 0.65 !important;          /* 保持適當的透明度以示禁用 */
    /* 確保滑鼠游標顯示為禁止符號（部分樣板會漏掉） */
    cursor: not-allowed !important;
    pointer-events: none; /* 防止點擊事件 */
}
.btn-link {
    /* 1. 平時顏色：使用所選主題色 */
    --bs-btn-color: #00acac !important;
    /* 2. 滑鼠懸停 (Hover) 與 選取 (Active) 顏色：稍微加深 */
    --bs-btn-hover-color: #008a8a !important;
    --bs-btn-active-color: #008a8a !important;
    /* 3. 禁用狀態 (Disabled) 顏色：改為灰色 */
    --bs-btn-disabled-color: #adb5bd !important;
    /* 4. 點擊時的光圈 (Focus Shadow)：使用主題色的 RGB 數值 */
    --bs-btn-focus-shadow-rgb: 0, 172, 172 !important;
    /* 保持樣板原有的裝飾設定 */
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    text-decoration: underline; /* 如果不想要底線，可以改為 none */
}
/* 針對選中狀態 (Active) 的分頁按鈕覆寫 */
.active > .page-link, .page-link.active {
    --bs-pagination-active-bg: #00acac !important;            /* 背景改為主題色 */
    --bs-pagination-active-border-color: #00acac !important;  /* 邊框改為主題色 */
    --bs-pagination-active-color: #ffffff !important;         /* 文字改為白色 */
    z-index: 3;
}

/* 針對一般狀態與滑鼠懸停 (Hover) 的分頁連結覆寫 */
.page-link {
    --bs-pagination-color: #00acac !important;                /* 未選中時的文字顏色 */
    --bs-pagination-hover-color: #008a8a !important;          /* 滑鼠移入時的文字顏色 */
    --bs-pagination-focus-shadow-rgb: 0, 172, 172 !important; /* 點擊時的藍色光圈改為主題色 */
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-app-theme);
}
.btn-outline-primary {
  /* 1. 平時狀態：文字與邊框 */
  --bs-btn-color: #00acac !important;
  --bs-btn-border-color: #00acac !important;
  /* 2. 滑鼠懸停 (Hover) 狀態：填滿顏色，文字變白 */
  --bs-btn-hover-bg: #00acac !important;
  --bs-btn-hover-border-color: #00acac !important;
  --bs-btn-hover-color: #fff !important;
  /* 3. 點擊/選取 (Active) 狀態 */
  --bs-btn-active-bg: #008a8a !important;
  --bs-btn-active-border-color: #008a8a !important;
  --bs-btn-active-color: #fff !important;
  /* 4. 焦點 (Focus/Shadow) 顏色 */
  --bs-btn-focus-shadow-rgb: 0, 172, 172 !important;
}
.form-check-input:checked {
  /* 設定選中時的背景顏色與邊框 */
  background-color: #00acac !important;
  border-color: #00acac !important;
}

.form-check-input:focus {
  /* 點擊時的外框光暈（Shadow）顏色 */
  /* 這裡使用 rgba 並帶入你的 RGB 數值，最後 0.25 是透明度 */
  border-color: #00acac !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 172, 172, 0.25) !important;
}

/* 覆寫 Tom Select 多選標籤的樣式 */
.ts-wrapper.multi .ts-control > div {
    background: #00acac !important; /* 背景改為主體色 */
    color: #ffffff !important;      /* 文字改為白色以利閱讀 */
    border-radius: 4px;             /* 建議加一點圓角，視覺更精緻 */
    padding: 2px 8px !important;    /* 稍微加大內距，提升質感 */
    margin: 0 5px 5px 0 !important;
}

/* 覆寫當標籤處於「選取狀態」或「移除按鈕」的顏色 (選填) */
.ts-wrapper.multi .ts-control > div.active {
    background: #008a8a !important; /* 選取時顏色加深 */
}

/* end 主題色與樣式覆寫 */