/* 定義 主題顏色 */
:root {
    /* 主要顏色 (深藍色) */
    --sb-primary: #4e73df;
    /* 次要顏色 (中灰色) */
    --sb-secondary: #858796;
    /* 成功 (綠色) */
    --sb-success: #1cc88a;
    /* 資訊 (淺藍色) */
    --sb-info: #36b9cc;
    /* 警告 (橙色) */
    --sb-warning: #f6c23e;
    /* 危險/錯誤 (紅色) */
    --sb-danger: #e74a3b;
    /* 淺色/背景 (米白色) */
    --sb-light: #f8f9fc;
    /* 深色/文字 (深灰色) */
    --sb-dark: #5a5c69;

    /* 邊框和次要背景 */
    --sb-light-gray: #eaecf4;

    /* 定義禁用按鈕的透明度 */
    --btn-disabled-opacity: 0.65;
}

/* ------------------------------------------- */
/* 覆蓋 Bootstrap 按鈕樣式 (Button) */
/* ------------------------------------------- */

/* --- Primary (主要按鈕 - 深藍色) --- */
.btn-primary {
    color: #fff;
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
}
.btn-primary:hover {
    color: #fff;
    background-color: #2e59d9;
    border-color: #2e59d9;
}
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #2e59d9;
    border-color: #2e59d9;
}

/* 禁用狀態 (DISABLED STATE) */
.btn-primary.disabled, 
.btn-primary:disabled {
    color: #fff;
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
    opacity: var(--btn-disabled-opacity); /* 應用透明度 */
}

/* --- Success (成功按鈕 - 綠色) --- */
.btn-success {
    background-color: var(--sb-success);
    border-color: var(--sb-success);
}
.btn-success:hover {
    background-color: #13895e;
    border-color: #13895e;
}
/* 禁用狀態 (DISABLED STATE) */
.btn-success.disabled, 
.btn-success:disabled {
    color: #fff;
    background-color: var(--sb-success);
    border-color: var(--sb-success);
    opacity: var(--btn-disabled-opacity);
}

/* --- Info (資訊按鈕 - 淺藍色) --- */
.btn-info {
    background-color: var(--sb-info);
    border-color: var(--sb-info);
}
.btn-info:hover {
    background-color: #27a8ba;
    border-color: #27a8ba;
}
/* 禁用狀態 (DISABLED STATE) */
.btn-info.disabled, 
.btn-info:disabled {
    color: #fff;
    background-color: var(--sb-info);
    border-color: var(--sb-info);
    opacity: var(--btn-disabled-opacity);
}

/* --- Warning (警告按鈕 - 橙色) --- */
.btn-warning {
    background-color: var(--sb-warning);
    border-color: var(--sb-warning);
    color: #1c1c1c; 
}
.btn-warning:hover {
    background-color: #f4b400;
    border-color: #f4b400;
}
/* 禁用狀態 (DISABLED STATE) */
.btn-warning.disabled, 
.btn-warning:disabled {
    color: #1c1c1c;
    background-color: var(--sb-warning);
    border-color: var(--sb-warning);
    opacity: var(--btn-disabled-opacity);
}

/* --- Danger (危險按鈕 - 紅色) --- */
.btn-danger {
    background-color: var(--sb-danger);
    border-color: var(--sb-danger);
}
.btn-danger:hover {
    background-color: #d62a1a;
    border-color: #d62a1a;
}
/* 禁用狀態 (DISABLED STATE) */
.btn-danger.disabled, 
.btn-danger:disabled {
    color: #fff;
    background-color: var(--sb-danger);
    border-color: var(--sb-danger);
    opacity: var(--btn-disabled-opacity);
}

/* ------------------------------------------- */
/* 覆蓋 Bootstrap 文字顏色 (Text Utilities) */
/* ------------------------------------------- */

.text-primary { color: var(--sb-primary) !important; }
.text-secondary { color: var(--sb-secondary) !important; }
.text-success { color: var(--sb-success) !important; }
.text-info { color: var(--sb-info) !important; }
.text-warning { color: var(--sb-warning) !important; }
.text-danger { color: var(--sb-danger) !important; }
.text-light { color: var(--sb-light) !important; }
.text-dark { color: var(--sb-dark) !important; }


/* ------------------------------------------- */
/* 覆蓋 Bootstrap 分頁樣式 (Pagination) */
/* ------------------------------------------- */

/* 1. 頁面連結基礎樣式 (非啟用/非禁用) */
.page-link {
    color: var(--sb-primary); /* 連結文字顏色使用 primary color */
    border: 1px solid var(--sb-light-gray); /* 使用較淺的邊框色 */
}

.page-link:hover {
    color: #2e59d9; /* 滑鼠懸停時略深 */
    text-decoration: none;
    background-color: #f0f0f5; /* 輕微的淺灰色背景 */
    border-color: var(--sb-light-gray);
}

/* 2. 啟用中的頁面 (Active State) */
.page-item.active .page-link {
    color: #fff; /* 文字為白色 */
    background-color: var(--sb-primary); /* 背景色使用 primary color */
    border-color: var(--sb-primary); /* 邊框色使用 primary color */
}

/* 3. 禁用的頁面 (Disabled State) */
.page-item.disabled .page-link {
    color: #858796; /* 禁用文字顏色使用 secondary/深灰色 */
    background-color: #fff; /* 背景為白色 */
    border-color: var(--sb-light-gray); /* 邊框使用輕微的淺灰色 */
}


/* ------------------------------------------- */
/* 覆蓋 Bootstrap 分頁標籤樣式 (Nav Tabs) */
/* ------------------------------------------- */

/* Nav Tab 基礎樣式 (非啟用狀態) */
.nav-tabs .nav-link {
    border-color: #dee2e6 #dee2e6 var(--sb-light-gray); /* 預設邊框，底部用淺灰 */
    color: var(--sb-secondary); /* 預設文字使用中灰色 */
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    color: var(--sb-primary); /* 懸停時文字變為 primary color */
}

/* Nav Tab 啟用狀態 (Active State) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--sb-dark); /* 啟用時文字顏色保持深色或深灰 */
    background-color: #fff; /* 啟用時背景色通常是白色 */
    border-color: #dee2e6 #dee2e6 #fff; /* 上方和側邊有邊框，底部與背景融合 (白色) */
    font-weight: 700; /* 啟用時粗體 */
}


/* ------------------------------------------- */
/* 覆蓋 Bootstrap 膠囊狀標籤樣式 (Nav Pills) */
/* ------------------------------------------- */

/* Nav Pills 基礎樣式 (非啟用狀態) */
.nav-pills .nav-link {
    color: var(--sb-primary); /* 連結文字顏色使用 primary color */
}

.nav-pills .nav-link:hover {
    background-color: #f0f0f5; /* 懸停時淺灰色背景 */
    color: #2e59d9;
}

/* Nav Pills 啟用狀態 (Active State) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff; /* 啟用時文字為白色 */
    background-color: var(--sb-primary); /* 背景色使用 primary color (深藍色) */
}

/* ------------------------------------------- */
/* 自訂元件的視覺風格, 如 ui_list.js ... etc   */
/* ------------------------------------------- */

/*  ui_list  */
.ui-list-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.ui-list-item-action:hover, .ui-list-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.ui-list-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.ui-list-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.ui-list-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.ui-list-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.ui-list-item.disabled, .ui-list-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.ui-list-item.active {
  z-index: 2;
  color: #fff;
  background-color: #4e73df;
  border-color: #4e73df;
}

.ui-list-item + .ui-list-item {
  border-top-width: 0;
}

.ui-list-item + .ui-list-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

/* ------------------------------------------- */
/* 增加 獨特的視覺風格 (例如卡片陰影)          */
/* ------------------------------------------- */
.card {
    /* 增加柔和的陰影效果 */
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

/* 添加一個自訂的類別，設定卡片左側的邊條 */
.card-border-primary {
    border-left: 0.25rem solid var(--sb-primary) !important;
}
.card-border-success {
    border-left: 0.25rem solid var(--sb-success) !important;
}