:root {
  /* 品牌色系 - 以酒紅色為主 */
  --primary: #862633;          /* 酒紅色/企業主色 */
  --primary-dark: #661c27;     /* 深酒紅 */
  --primary-light: #a03040;    /* 淺酒紅 */
  
  /* 輔助色系 */
  --gold: #d4af37;             /* 金色 */
  --gold-light: #e9d498;       /* 淺金 */
  --ink: #2c2f35;              /* 墨黑 */
  --jade: #7bcfa6;             /* 玉色 */
  --porcelain: #f5f2eb;        /* 瓷白 */
  --bamboo: #c8bb97;           /* 竹色 */
  
  /* 中性色系 */
  --white: #ffffff;
  --light-gray: #f8f5f0;       /* 偏暖的淺灰 */
  --mid-gray: #e9e6df;         /* 偏暖的中灰 */
  --gray: #7c7670;             /* 偏暖的灰 */
  --dark-gray: #4a4640;        /* 偏暖的深灰 */
  --darker-gray: #2d2a28;      /* 墨色調深灰 */
  --black: #1a1816;            /* 偏暖的黑 */
  
  /* 功能色系 */
  --info: #5c8d89;             /* 青墨色 */
  --success: #739e73;          /* 竹葉綠 */
  --warning: #c89b3c;          /* 琥珀色 */
  --danger: #bb5457;           /* 朱砂紅 */
  
  /* 陰影 - 更柔和的陰影 */
  --shadow-sm: 0 2px 4px rgba(45, 42, 40, 0.05);
  --shadow-md: 0 3px 10px rgba(45, 42, 40, 0.08);
  --shadow-lg: 0 5px 15px rgba(45, 42, 40, 0.1);
  
  /* 邊框 */
  --border-color: #e7e2d7;     /* 米色邊框 */
  --border-radius: 6px;        /* 通常較方正，稍微減小圓角 */
  --border-radius-sm: 3px;
}

/* 原有樣式，改用變數 */
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* 連結顏色 */
a {
  color: var(--primary);
}

.btn-primary {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

/* 響應式文字大小 */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid var(--border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.box-shadow {
  box-shadow: var(--shadow-sm);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* 頁面佈局 */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--porcelain);  /* 瓷白背景 */
  color: var(--dark-gray);
}

/* 頁頭優化樣式 -  */
.page-header {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  position: relative;
  border-top: 3px solid var(--primary);
  border-bottom: 1px solid var(--gold-light);  /* 淺金邊框 */
}

.header-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header-title h1 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary);       /* 使用酒紅色標題 */
  margin-bottom: 0.5rem;
  position: relative;
}

.header-title h1:after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--gold);  /* 金色裝飾線 */
  margin-top: 8px;
}

.header-title .fas {
  color: var(--primary);
  margin-right: 0.5rem;
}

.header-description {
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 80%;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-panel {
  background-color: var(--light-gray);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-left: 3px solid var(--gold);  /* 金色邊框 */
  box-shadow: var(--shadow-sm);
  height: 60px;
}

.user-panel .fas {
  color: var(--primary);
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

.username { 
  font-weight: 500;
  color: var(--dark-gray);
  margin-right: 1rem;
}

/* 登出按鈕樣式 */
.btn-logout {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-logout:hover {
  background-color: var(--primary-dark);
  color: var(--white);
  text-decoration: none;
}

.btn-logout .fas {
  color: var(--white);
  margin-right: 5px;
}

/* 主頁面內容區域 */
.container main {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  border: 1px solid var(--mid-gray);
}

/* 導航欄優化 -  */
.navbar {
  background-color: var(--white) !important;
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--mid-gray);
  padding: 0.8rem 1rem;
}

.navbar-brand {
  font-weight: 600;
  color: var(--primary) !important;
}

.nav-link {
  font-weight: 500;
  transition: all 0.2s;
}

.nav-link:hover {
  color: var(--primary) !important;
}

.nav-link.active {
  color: var(--primary) !important;
  border-bottom: 2px solid var(--gold);  /* 當前頁面加入金色下劃線 */
}

/* 表格樣式 -  */
.table thead th {
  border-bottom: 2px solid var(--gold-light);
  color: var(--primary);
  font-weight: 600;
}

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

/* 按鈕樣式 */
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* 響應式調整 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-info {
    margin-top: 1rem;
    width: 100%;
  }

  .user-panel {
    width: 100%;
    justify-content: space-between;
    min-height: 50px;
  }

  .header-description {
    max-width: 100%;
  }
}

/* 重新定義表頭樣式 - 更加精緻的 */
/* 修改表頭文字樣式，增加對比度 */
.thead-chinese {
  background: linear-gradient(to bottom, #862633 0%, #701f2b 100%);
  /* 酒紅色漸層 */
  color: #ffffff !important;
  /* 確保文字為純白色 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* 增強文字陰影 */
}

.thead-chinese th {
  border-color: #701f2b !important;
  /* 邊框顏色加深 */
  font-weight: 600 !important;
  /* 加粗文字 */
  padding: 12px 8px;
  /* 增加內邊距讓表頭更突出 */
  text-align: center;
  vertical-align: middle;
  border-bottom: none !important;
  color: #ffffff !important;
  /* 再次確保文字為純白色 */
  letter-spacing: 0.03em;
  /* 增加字間距 */
}

/* 確保Bootstrap不會覆蓋我們的樣式 */
.table thead th {
  color: #ffffff !important;
  /* 全局確保表頭文字為白色 */
  vertical-align: middle;
}

/* 針對表格整體的樣式調整 */
.table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
  /* 確保圓角不被內容覆蓋 */
  border: 1px solid #e9e6df;
}

/* 條紋樣式 */
.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #f9f6f1;
  /* 淺米色背景 */
}

/* 確保條紋樣式不影響懸停效果 */
.table-hover tbody tr:hover {
  background-color: rgba(134, 38, 51, 0.05);
  /* 酒紅色透明背景 */
}

/* 操作列樣式 - 讓按鈕更美觀 */
.table .btn {
  margin: 0 3px;
  border-radius: 4px;
}

/* 數據格式化樣式 */
.badge-percentage {
  background-color: var(--gold);
  color: var(--white);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}
/* 分頁下拉選單樣式 - 符合酒紅色主題 */
.btn-group.dropdown.dropup.show {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 下拉按鈕樣式 */
.btn.btn-secondary.dropdown-toggle {
  background: var(--primary) !important;
  border-color: var(--primary-dark) !important;
  color: #ffffff !important;
  padding: 0.375rem 1rem;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.btn.btn-secondary.dropdown-toggle:hover,
.btn.btn-secondary.dropdown-toggle:active,
.btn.btn-secondary.dropdown-toggle:focus {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(134, 38, 51, 0.25) !important;
}

/* 下拉按鈕中的箭頭樣式 */
.btn.btn-secondary.dropdown-toggle .caret {
  margin-left: 5px;
  border-top-color: #ffffff;
}

/* 下拉菜單樣式 */
.dropdown-menu.show {
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
  padding: 0.25rem 0;
  border-radius: 4px;
  min-width: 5rem;
}

/* 下拉菜單項目樣式 */
.dropdown-item {
  padding: 0.35rem 1rem;
  color: var(--dark-gray);
  font-size: 0.95rem;
  text-align: center;
}

/* 活躍項目（當前選中）樣式 */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary) !important;
  color: #ffffff;
}

/* 鼠標懸停效果 */
.dropdown-item:hover {
  background-color: rgba(134, 38, 51, 0.1);
  color: var(--primary);
}

/* 分頁器底部樣式 */
.pagination {
  margin-top: 1rem;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

.pagination .page-link {
  color: var(--primary);
}

.pagination .page-link:hover {
  color: var(--primary-dark);
  background-color: var(--light-gray);
}

/* 每頁顯示文字樣式 */
.page-size-label {
  color: var(--dark-gray);
  font-size: 0.95rem;
  margin-right: 0.5rem;
}

/* 下拉框整體容器 */
.pagination-detail {
  display: flex;
  align-items: center;
}

/* 項目計數樣式 */
.pagination-info {
  color: var(--gray);
  font-size: 0.9rem;
  margin-left: 1rem;
}
/* 頁尾樣式 -  */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--dark-gray);
  border-top: 3px solid var(--gold-light);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  color: var(--light-gray);
}

.footer .container {
  padding: 1.2rem 0;
}

.footer-copyright {
  font-size: 0.9rem;
  color: var(--light-gray);
  margin-bottom: 0.3rem;
}

.footer-contact {
  font-size: 0.85rem;
  color: var(--mid-gray);
}

.footer-contact a {
  color: var(--mid-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* 清除浮動 */
.clearfix-footer {
  clear: both;
  display: block;
  width: 100%;
  height: 50px;
}

/* 表單元素樣式 -  */
.form-control {
  border-color: var(--mid-gray);
}

.form-control:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 0.2rem rgba(134, 38, 51, 0.25);
}

.btn-search {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.btn-search:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* 警告提示框優化 -  */
.alert-info {
  background-color: var(--light-gray);
  border-left: 4px solid var(--info);
  color: var(--dark-gray);
}

/* 卡片樣式 -  */
.card {
  border-color: var(--mid-gray);
  border-radius: var(--border-radius);
}

.card-header {
  background-color: var(--light-gray);
  border-bottom: 1px solid var(--mid-gray);
  color: var(--primary);
}

/* 標籤樣式 */
.badge-primary {
  background-color: var(--primary);
}

.badge-info {
  background-color: var(--info);
}

.badge-success {
  background-color: var(--success);
}

.badge-warning {
  background-color: var(--warning);
}

/* 分頁樣式 -  */
.pagination .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}

.pagination .page-link {
  color: var(--primary);
}

.pagination .page-link:hover {
  background-color: var(--light-gray);
  border-color: var(--mid-gray);
  color: var(--primary-dark);
}


/* 主要按鈕懸停效果優化 */
.btn-primary:hover {
  background-color: var(--primary-light);
  /* 改用淺酒紅色而非深酒紅 */
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(134, 38, 51, 0.3);
  /* 增加柔和陰影效果 */
  transform: translateY(-1px);
  /* 輕微上浮效果 */
  transition: all 0.25s ease;
}

/* 按鈕點擊效果 */
.btn-primary:active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 1px 3px rgba(134, 38, 51, 0.4) inset;
  transform: translateY(0px);
}

/* 按鈕焦點效果 */
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(134, 38, 51, 0.25);
}
/* 禁用按鈕樣式 - 保持原色但透明度降低 */
.btn-primary:disabled {
  background-color: var(--primary);
  border-color: var(--primary-dark);
  opacity: 0.7;
  cursor: not-allowed;
}


/*swal 自定義樣式 */


/* 可加入到專案的 CSS 文件中 */
.ll-toast-popup {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.ll-toast-title {
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

/* 不同狀態的顏色優化 */
.swal2-icon.swal2-success {
  border-color: #a5dc86 !important;
}

.swal2-icon.swal2-error {
  border-color: #f27474 !important;
}

.swal2-icon.swal2-info {
  border-color: #3fc3ee !important;
}


.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 123, 0.4) !important;
}
/** 表單驗證 樣式佈局 */
label.error {
    position: absolute;
    right: 18px;
    top: 10px;
    color: #ef392b;
    font-size: 12px;
    z-index: 1;
}

.Validform_error, input.error, select.error {
    background-color: #fbe2e2;
    border-color: #c66161;
    color: #c00
}

.Validform_wrong, .Validform_right, .Validform_warning {
    display: inline-block;
    height: 20px;
    font-size: 12px;
    vertical-align: middle;
    padding-left: 25px
}

.i-checks label.error, .check-box label.error, .radio-box label.error {
    right: auto;
    width: 150px;
    left: 210px;
    top: 1px;
    max-width: none;
}