/*
 * YC Components
 * 來源：src/assets/app.css 中的按鈕、彈窗、表格、顏色/字級/間距工具 class、
 *       Selector(multiselect 套件覆寫)、Input(浮動標籤)、Nav & Tabs、Card 等規則，
 *       原樣抽出、僅將寫死的 hex 換成 yc-design-tokens.css 的變數。
 * 用途：跨專案共用的完整元件樣式（非僅數值）。使用方式：
 *   1. 複製 yc-design-tokens.css 與本檔到目標專案
 *   2. 在全域樣式中 @import 這兩個檔案（本檔需晚於 tokens 檔載入）
 *   3. 專案本身需已引入 Bootstrap 5（按鈕使用 --bs-btn-* CSS 變數）、
 *      vue-multiselect 套件（Selector 區塊依賴其 class 名稱）
 * 不含：圖表(ApexChart/VueChart)、彈跳動畫(NumberIncrementAnimation/MarqueeAnimation)、
 *       SweetAlert(yc$alert) 樣式 —— 這些依賴額外套件或 JS 邏輯，非純 CSS。
 */

@import './yc-design-tokens.css';

/* ============================= 按鈕 Buttons ============================= */

.btn-primary {
  background-color: var(--yc-blue-500);
  border-color: var(--yc-blue-500);
  color: var(--yc-color-white);
  --bs-btn-bg: var(--yc-blue-500) !important;
  --bs-btn-border-color: var(--yc-blue-500) !important;
  --bs-btn-hover-bg: var(--yc-blue-600) !important;
  --bs-btn-border-hover-color: var(--yc-blue-600) !important;
}

.text-primary {
  color: var(--yc-blue-500) !important;
}

.btn-primary:hover {
  background-color: var(--yc-blue-600);
  border-color: var(--yc-blue-600);
  color: var(--yc-color-white);
}

.btn-outline-primary {
  --bs-btn-color: var(--yc-blue-500) !important;
  --bs-btn-border-color: var(--yc-blue-500) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--yc-blue-500) !important;
  --bs-btn-hover-border-color: var(--yc-blue-500) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--yc-blue-500) !important;
  --bs-btn-active-border-color: var(--yc-blue-500) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--yc-blue-500) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--yc-blue-500) !important;
  --bs-gradient: none !important;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--yc-blue-500);
  border-color: var(--yc-blue-500);
}

.card-primary.card-outline {
  border-top: 3px solid var(--yc-blue-500) !important;
}

.btn-success {
  background-color: var(--yc-green-500);
  border-color: var(--yc-green-500);
  color: var(--yc-color-white);
  --bs-btn-border-color: var(--yc-green-500) !important;
  --bs-btn-hover-bg: var(--yc-green-600) !important;
  --bs-btn-border-hover-color: var(--yc-green-600) !important;
}

.text-success {
  color: var(--yc-green-500) !important;
}

.btn-success:hover {
  background-color: var(--yc-green-600);
  border-color: var(--yc-green-600);
  color: var(--yc-color-white);
}

.btn-outline-success {
  --bs-btn-color: var(--yc-green-500) !important;
  --bs-btn-border-color: var(--yc-green-500) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--yc-green-500) !important;
  --bs-btn-hover-border-color: var(--yc-green-500) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--yc-green-500) !important;
  --bs-btn-active-border-color: var(--yc-green-500) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--yc-green-500) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--yc-green-500) !important;
  --bs-gradient: none !important;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: var(--yc-green-500);
  border-color: var(--yc-green-500);
}

.btn-danger {
  background-color: var(--yc-red-500);
  border-color: var(--yc-red-500);
  color: var(--yc-color-white);
}

.text-danger {
  color: var(--yc-red-500) !important;
}

.btn-danger:hover {
  background-color: var(--yc-red-600);
  border-color: var(--yc-red-600);
  color: var(--yc-color-white);
}

.btn-outline-danger {
  --bs-btn-color: var(--yc-red-500) !important;
  --bs-btn-border-color: var(--yc-red-500) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--yc-red-500) !important;
  --bs-btn-hover-border-color: var(--yc-red-500) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--yc-red-500) !important;
  --bs-btn-active-border-color: var(--yc-red-500) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--yc-red-500) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--yc-red-500) !important;
  --bs-gradient: none !important;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: var(--yc-red-500);
  border-color: var(--yc-red-500);
}

.btn-warning {
  background-color: var(--yc-yellow-500);
  border-color: var(--yc-yellow-500);
  color: var(--yc-color-black);
}

.text-warning {
  color: var(--yc-yellow-500) !important;
}

.btn-warning:hover {
  background-color: var(--yc-yellow-600);
  border-color: var(--yc-yellow-600);
  color: var(--yc-color-white);
}

.btn-outline-warning {
  --bs-btn-color: var(--yc-yellow-500) !important;
  --bs-btn-border-color: var(--yc-yellow-500) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--yc-yellow-500) !important;
  --bs-btn-hover-border-color: var(--yc-yellow-500) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--yc-yellow-500) !important;
  --bs-btn-active-border-color: var(--yc-yellow-500) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
  --bs-btn-disabled-color: var(--yc-yellow-500) !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: var(--yc-yellow-500) !important;
  --bs-gradient: none !important;
}

.btn-outline-warning:hover {
  color: var(--yc-color-black);
  background-color: var(--yc-yellow-500);
  border-color: var(--yc-yellow-500);
}

/* ============================= 彈窗 Dialog / Modal ============================= */

.modal-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1000px;
  height: 600px;
  margin: auto;
  border-radius: var(--yc-radius-modal);
  padding: 20px;
  background-color: var(--yc-color-white);
  border: none;
}

.modal-container::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.dlgBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  text-align: left;
  overflow: hidden; /* 隱藏滾動區域以外的部分 */
}

.yc-dialog-h3-bold {
  font-size: var(--yc-title-h3-size);
  font-weight: var(--yc-title-h3-bold-weight);
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: solid var(--yc-color-dialog-title);
  color: var(--yc-color-dialog-title);
}

.el-card {
  position: sticky;
  width: 100%;
  z-index: auto;
  border-radius: var(--yc-radius-card);
}

.el-card .el-card__header {
  padding: 5px;
  background-color: var(--yc-gray-300);
}

.el-card .el-card__body {
  padding: 5px;
}

.el-card .el-card__footer {
  padding: 5px;
}

/* ============================= 表格 Table ============================= */

.table-container {
  overflow-y: auto;
  border: 1px solid var(--yc-color-border);
  position: relative;
}

.table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--yc-shadow-scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.table-settings {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}

.table-settings thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--yc-blue-400), var(--yc-blue-500));
}

.table-settings th {
  border-bottom: 2px solid linear-gradient(180deg, var(--yc-blue-400), var(--yc-blue-500));
  color: white;
}

.table-settings tbody tr:nth-child(odd) {
  background-color: white;
}

.table-settings tbody tr:nth-child(even) {
  background-color: var(--yc-color-table-stripe);
}

.table-settings tbody tr:hover {
  background-color: var(--yc-color-table-hover);
}

.Two-column-header-table-container {
  overflow-x: auto !important;
  overflow-y: auto;
  border: 1px solid var(--yc-color-border);
  position: relative;
  width: 100%;
}

.Two-column-header-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.Two-column-header-table-container::-webkit-scrollbar-thumb {
  background: var(--yc-shadow-scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.Two-column-header-table-settings {
  min-width: 100%;
  width: auto !important;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  position: relative;
}

.Two-column-header-table-settings thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--yc-blue-400), var(--yc-blue-500));
}

.Two-column-header-table-settings thead tr:first-child th {
  border-bottom: 1px solid var(--yc-color-white);
}

.Two-column-header-table-settings th {
  padding: 8px;
  border: 1px solid var(--yc-color-white);
  color: white;
  white-space: nowrap;
}

.Two-column-header-table-settings th:last-child {
  border-right: none;
}

.Two-column-header-table-settings td {
  padding: 8px;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}

.Two-column-header-table-settings tbody tr:nth-child(odd) {
  background-color: white;
}

.Two-column-header-table-settings tbody tr:nth-child(even) {
  background-color: var(--yc-color-table-stripe);
}

.Two-column-header-table-settings tbody tr:hover {
  background-color: var(--yc-color-table-hover);
}

/* ============================= 顏色 / 字級 / 間距 工具 Class ============================= */

.yc-color-blue-100 {
  background-color: var(--yc-blue-100) !important;
}

.yc-color-blue-400 {
  background-color: var(--yc-blue-400) !important;
}
.yc-border-color-blue-400 {
  border-color: var(--yc-blue-400) !important;
}

.yc-color-blue-500 {
  background-color: var(--yc-blue-500) !important;
}
.yc-border-color-blue-500 {
  border-color: var(--yc-blue-500) !important;
}

.yc-color-blue-600 {
  background-color: var(--yc-blue-600) !important;
}

.yc-color-yellow-500 {
  background-color: var(--yc-yellow-500) !important;
}
.yc-border-color-yellow-500 {
  border-color: var(--yc-yellow-500) !important;
}

.yc-color-yellow-600 {
  background-color: var(--yc-yellow-600) !important;
}

.yc-color-green-500 {
  background-color: var(--yc-green-500) !important;
}
.yc-border-color-green-500 {
  border-color: var(--yc-green-500) !important;
}

.yc-color-green-600 {
  background-color: var(--yc-green-600) !important;
}

.yc-color-red-500 {
  background-color: var(--yc-red-500) !important;
}
.yc-border-color-red-500 {
  border-color: var(--yc-red-500) !important;
}

.yc-color-red-600 {
  background-color: var(--yc-red-600) !important;
}

.yc-color-gray-100 {
  background-color: var(--yc-gray-100) !important;
}

.yc-color-gray-200 {
  background-color: var(--yc-gray-200) !important;
}

.yc-color-gray-300 {
  background-color: var(--yc-gray-300) !important;
}

.yc-color-gray-500 {
  background-color: var(--yc-gray-500) !important;
}

.yc-title-h1 {
  font-size: var(--yc-title-h1-size);
}

.yc-title-h1-bold {
  font-size: var(--yc-title-h1-size);
  font-weight: var(--yc-title-h1-bold-weight);
}

.yc-title-h2 {
  font-size: var(--yc-title-h2-size);
}

.yc-title-h2-bold {
  font-size: var(--yc-title-h2-size);
  font-weight: var(--yc-title-h2-bold-weight);
}

.yc-title-h3 {
  font-size: var(--yc-title-h3-size);
}

.yc-title-h3-bold {
  font-size: var(--yc-title-h3-size);
  font-weight: var(--yc-title-h3-bold-weight);
}

.yc-title-h6 {
  font-size: var(--yc-title-h6-size);
}

.yc-title-h6-bold {
  font-size: var(--yc-title-h6-size);
  font-weight: var(--yc-title-h6-bold-weight);
}

.yc-content-container {
  padding-top: var(--yc-content-padding-top);
  padding-bottom: var(--yc-content-padding-bottom);
}

.yc-main-title-spacing {
  padding-bottom: var(--yc-main-title-spacing);
}

.yc-component-sm-spacing {
  padding-bottom: var(--yc-component-sm-spacing);
}

.yc-component-spacing {
  padding-bottom: var(--yc-component-spacing);
}

.yc-component-lg-spacing {
  padding-bottom: var(--yc-component-lg-spacing);
}

.yc-nav-tab-container {
  padding: 0.5rem;
}

.yc-item-separator {
  width: 100%;
  border-bottom: 2px solid var(--yc-gray-200);
}

.yc-table-content-container {
  padding: 0.5rem !important;
}

.table-ellipsis {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 20px !important;
}

/* ============================= Card ============================= */
/* .card-primary.card-outline 已在上方「按鈕」區塊定義（藍色頂邊框） */

.card {
  margin-bottom: 0rem !important;
}

/* ============================= Nav & Tabs 頁籤 ============================= */

.nav-tabs .nav-link {
  color: var(--yc-blue-500);
}

/* ============================= Input 輸入框（浮動標籤） ============================= */

.yc-custom-input {
  position: relative;
  margin-bottom: 0rem;
}

.yc-custom-input label {
  position: absolute;
  top: -12px;
  left: 12px;
  background-color: var(--yc-color-white);
  font-size: 15px;
  padding: 0 5px;
  z-index: 1;
  display: inline-block;
}

.yc-select-wrapper {
  position: relative;
}

.yc-select-wrapper label {
  position: absolute;
  top: -12px;
  left: 12px;
  background-color: var(--yc-color-white);
  font-size: 15px;
  padding: 0 5px;
  z-index: 2;
}

/* 原生 select 客製箭頭（搭配 .yc-select-wrapper 使用） */
.select-container {
  position: relative;
}

.select-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 30px;
}

.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #999999;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* ============================= Selector 下拉選單（vue-multiselect 套件覆寫） ============================= */
/* 注意：來源檔用 Vue scoped 語法 :deep(...) 包裹，那是 Vue 編譯器專用語法，
   一般 CSS 檔不支援、瀏覽器會直接丟棄該規則，故這裡改回純 class 選擇器。
   若在 Vue SFC 的 <style scoped> 中使用本節，需自行加回 :deep()。 */

.multiselect__option {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  display: block;
}

.multiselect__option span {
  display: block;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

.multiselect__option--highlight {
  background: #f3f3f3;
  color: #35495e;
}

.multiselect__option--highlight:after {
  display: none;
}

.multiselect__option--selected {
  background: var(--yc-gray-500) !important;
  color: #fff !important;
}

.multiselect__option--selected.multiselect__option--highlight {
  background: var(--yc-gray-500) !important;
  color: #fff !important;
}

.multiselect__tags {
  min-height: 37px;
  display: block;
  padding: 0px 37px 0px 8px;
  background: rgba(255, 255, 255);
  font-size: 16px;
  box-shadow: var(--yc-shadow-inset-input); /* 僅針對上下的陰影 */
  border-color: var(--yc-color-border);
}

.multiselect__single {
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075); /* 上方陰影 */
  border-color: var(--yc-color-border);
  margin-bottom: 0rem;
  display: flex;
  align-items: center;
  height: 37px;
}

.multiselect__placeholder {
  padding-left: 5px;
  padding-top: 0rem;
  margin-bottom: 0rem;
  display: flex;
  align-items: center;
  height: 37px;
}

.multiselect__input,
.multiselect__single {
  font-family: inherit;
  font-size: 16px !important;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  height: 37px;
  margin-bottom: 0rem;
}

.multiselect__input:focus,
.multiselect__single:focus {
  background-color: rgba(255, 255, 255, 0);
}