body {
  background-color: #f8f9fa;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* 改善觸控滾動 */
  -webkit-overflow-scrolling: touch;
}

.navbar-brand {
  font-weight: 600;
}

.card {
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.badge {
  font-size: 0.85rem;
}

/* 資格狀態標籤視覺優化 */
.status-badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}
.status-badge .bi {
  font-size: 0.9em;
  vertical-align: -0.1em;
}
.status-badge--qualified { /* 合格 */
  background-color: #198754 !important;
  color: #fff !important;
}
.status-badge--pending { /* 審核中 */
  background-color: #ffc107 !important;
  color: #000 !important;
}
.status-badge--suspended { /* 停權 */
  background-color: #dc3545 !important;
  color: #fff !important;
}
.status-badge--rejected { /* 不合格 */
  background-color: #dc3545 !important;
  color: #fff !important;
}
.status-badge--pending-docs { /* 待補件 */
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

/* ============================================
   行動裝置優化
   ============================================ */

/* 觸控目標大小優化（至少 44x44px） */
.btn, .nav-link, .dropdown-item, .form-control, .form-select {
  min-height: 44px;
  touch-action: manipulation; /* 禁用雙擊縮放 */
}

.btn-sm {
  min-height: 38px;
}

/* 表單元素在手機上的優化 */
@media (max-width: 768px) {
  .form-control, .form-select {
    font-size: 16px; /* 防止 iOS 自動縮放 */
  }
  
  /* 改善輸入框在手機上的顯示 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 表格在手機上轉換為卡片式佈局 */
@media (max-width: 768px) {
  .table-responsive {
    border: none;
  }
  
  /* 表格卡片化 */
  .table-card-view {
    display: block;
  }
  
  .table-card-view thead {
    display: none;
  }
  
  .table-card-view tbody {
    display: block;
  }
  
  .table-card-view tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
  
  .table-card-view td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    /* 覆蓋固定寬度 */
    width: auto !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  .table-card-view td:last-child {
    border-bottom: none;
  }
  
  .table-card-view td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6c757d;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  
  .table-card-view td:last-child::after {
    content: '';
  }
  
  /* 表格中的固定寬度在手機上無效 */
  .table-card-view th,
  .table-card-view td {
    width: auto !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
}

/* 導航欄優化 */
@media (max-width: 991px) {
  .navbar-nav {
    padding-top: 1rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
  }
  
  /* 通知下拉選單在手機上的優化 */
  .notification-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
  }
  
  /* 確保所有固定寬度的下拉選單在手機上全寬顯示 */
  .dropdown-menu {
    max-width: 100% !important;
  }
  
  /* 表單中的固定寬度元素在手機上改為響應式 */
  .form-select[style*="max-width"],
  .form-select[style*="width"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 卡片在手機上的優化 */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .card-header {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
}

/* 按鈕組在手機上的優化 */
@media (max-width: 768px) {
  .btn-group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn {
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem !important;
  }
  
  .btn-group .btn:last-child {
    margin-bottom: 0;
  }
  
  /* 水平按鈕組改為垂直 */
  .btn-toolbar {
    flex-direction: column;
  }
  
  .btn-toolbar .btn-group {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* 使用 flex justify-content-between 的按鈕組在手機上改為垂直堆疊 */
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .d-flex.justify-content-between .btn {
    width: 100%;
  }
  
  /* 確保按鈕在手機上有足夠的間距 */
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* 模態框在手機上的優化 */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  
  .modal-content {
    border-radius: 0.5rem;
  }
  
  .modal-header {
    padding: 1rem;
  }
  
  .modal-body {
    padding: 1rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  
  .modal-footer {
    padding: 1rem;
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .modal-footer .btn:last-child {
    margin-bottom: 0;
  }
}

/* 表單在手機上的優化 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  
  .form-row .col,
  .form-row [class*="col-"] {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .form-row .col:last-child,
  .form-row [class*="col-"]:last-child {
    margin-bottom: 0;
  }
  
  /* 改善標籤和輸入框的間距 */
  label {
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  
  .form-check {
    margin-bottom: 0.75rem;
  }
}

/* 改善觸控反饋 */
.btn, .nav-link, .dropdown-item, .card {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 改善滾動體驗 */
@media (max-width: 768px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* 改善長列表的滾動 */
  .list-group {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 改善文字選擇 */
@media (max-width: 768px) {
  /* 防止意外選擇 */
  .btn, .nav-link, .dropdown-item {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* 允許文字選擇的地方 */
  .card-body, .modal-body, p, span, div[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* 改善間距 */
@media (max-width: 768px) {
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }
  
  .mt-4 {
    margin-top: 1.5rem !important;
  }
  
  .py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* 改善圖標大小 */
@media (max-width: 768px) {
  .bi {
    font-size: 1.1em;
  }
  
  .fs-1 {
    font-size: 2rem !important;
  }
  
  .fs-2 {
    font-size: 1.5rem !important;
  }
}

/* 深色模式樣式 */
[data-theme="dark"] {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

[data-theme="dark"] .navbar-dark {
  background-color: #0d1117 !important;
}

[data-theme="dark"] .card {
  background-color: #212529;
  color: #e0e0e0;
  border-color: #495057;
}

[data-theme="dark"] .card-header {
  background-color: #2d3339;
  border-bottom-color: #495057;
  color: #ffffff; /* 提高標題文字對比度 */
}

/* 深色模式下，強制覆蓋 bg-light 的 card-header */
[data-theme="dark"] .card-header.bg-light {
  background-color: #2d3339 !important;
  border-bottom-color: #495057;
  color: #ffffff !important; /* 強制使用白色文字 */
}

[data-theme="dark"] .table {
  color: #ffffff !important; /* 提高表格文字對比度 */
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #2d3339; /* 保持表格條紋色 */
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: #212529; /* 確保偶數行也有背景色 */
}

/* 提高表格整體可讀性 */
[data-theme="dark"] .table > :not(caption) > * > * {
  border-color: #495057;
}

[data-theme="dark"] .table thead th {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #495057;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #3a4149 !important; /* 提高亮度，從 #2d3339 改為 #3a4149 */
  border-color: #5a6268 !important; /* 提高邊框亮度 */
  color: #ffffff !important; /* 使用純白色提高對比度 */
}

[data-theme="dark"] .form-control::placeholder {
  color: #ced4da !important; /* 提高 placeholder 亮度 */
  opacity: 1; /* Firefox */
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #3a4149 !important; /* 保持一致的背景色 */
  border-color: #0d6efd !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 添加聚焦陰影 */
}

/* 輸入群組的優化 */
[data-theme="dark"] .input-group-text {
  background-color: #3a4149 !important;
  border-color: #5a6268 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #3a4149 !important; /* 提高下拉選單背景亮度 */
  border-color: #5a6268 !important;
}

[data-theme="dark"] .dropdown-item {
  color: #ffffff !important; /* 使用純白色提高對比度 */
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #495057 !important; /* 提高 hover 背景亮度 */
  color: #ffffff !important;
}

/* 下拉選單選項的 active 狀態 */
[data-theme="dark"] .dropdown-item.active {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .alert {
  border-color: #495057;
}

[data-theme="dark"] .modal-content {
  background-color: #212529;
  color: #e0e0e0;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #495057;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #495057;
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* 覆蓋深色模式下的深色文字類別 */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-black {
  color: #ffffff !important; /* 強制使用白色文字 */
}

/* 確保所有文字元素在深色模式下都清晰可見 */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge):not(.btn),
[data-theme="dark"] div:not(.card):not(.modal):not(.dropdown-menu),
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #ffffff !important; /* 使用純白色確保最高對比度 */
}

/* 深色模式下的 badge 文字顏色優化 */
[data-theme="dark"] .badge.text-dark {
  color: #ffffff !important;
  background-color: #495057 !important;
}

[data-theme="dark"] .badge.bg-warning.text-dark {
  color: #000000 !important; /* 警告標籤保持黑字（黃底） */
}

[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: #3a4149 !important;
  color: #ffffff !important;
}

/* 深色模式下的資格狀態標籤 */
[data-theme="dark"] .status-badge--qualified {
  background-color: #2ea043 !important;
  color: #fff !important;
}
[data-theme="dark"] .status-badge--pending {
  background-color: #d4a72c !important;
  color: #000 !important;
}
[data-theme="dark"] .status-badge--suspended {
  background-color: #da3633 !important;
  color: #fff !important;
}
[data-theme="dark"] .status-badge--rejected {
  background-color: #da3633 !important;
  color: #fff !important;
}
[data-theme="dark"] .status-badge--pending-docs {
  background-color: #58a6ff !important;
  color: #000 !important;
}

/* 深色模式下的文字顏色類別覆蓋 */
[data-theme="dark"] .text-muted {
  color: #ced4da !important; /* 提高 muted 文字亮度，從 #adb5bd 改為 #ced4da */
}

[data-theme="dark"] .text-secondary {
  color: #ced4da !important; /* 提高次要文字亮度 */
}

[data-theme="dark"] small,
[data-theme="dark"] .small {
  color: #ced4da !important; /* 確保小字也清晰可見 */
}

/* 確保表格內容清晰可見 */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  color: #ffffff !important;
  background-color: inherit !important;
}

/* 深色模式下，確保所有表格行和單元格都有深色背景 */
[data-theme="dark"] .table tbody tr,
[data-theme="dark"] .table > tbody > tr {
  background-color: #212529 !important;
  --bs-table-bg: #212529 !important;
  --bs-table-striped-bg: #2d3339 !important;
  --bs-table-hover-bg: #3a4149 !important;
}

[data-theme="dark"] .table tbody tr td,
[data-theme="dark"] .table > tbody > tr > td {
  background-color: #212529 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:nth-of-type(odd),
[data-theme="dark"] .table > tbody > tr:nth-of-type(odd) {
  background-color: #212529 !important;
}

[data-theme="dark"] .table tbody tr:nth-of-type(odd) td,
[data-theme="dark"] .table > tbody > tr:nth-of-type(odd) > td {
  background-color: #212529 !important;
}

[data-theme="dark"] .table tbody tr:nth-of-type(even),
[data-theme="dark"] .table > tbody > tr:nth-of-type(even) {
  background-color: #2d3339 !important;
}

[data-theme="dark"] .table tbody tr:nth-of-type(even) td,
[data-theme="dark"] .table > tbody > tr:nth-of-type(even) > td {
  background-color: #2d3339 !important;
}

/* table-hover 在深色模式下的 hover 效果 */
[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: #3a4149 !important;
  --bs-table-hover-bg: #3a4149 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover td,
[data-theme="dark"] .table-hover tbody tr:hover th,
[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: #3a4149 !important;
  color: #ffffff !important;
}

/* 確保表格中的連結在深色模式下可見 */
[data-theme="dark"] .table a {
  color: #6ea8fe !important;
}

[data-theme="dark"] .table a:hover {
  color: #8bb9fe !important;
}

/* 深色模式下的連結顏色 */
[data-theme="dark"] a {
  color: #6ea8fe;
}

[data-theme="dark"] a:hover {
  color: #8bb9fe;
}

/* 深色模式下的卡片文字 */
[data-theme="dark"] .card-body {
  color: #e0e0e0;
}

/* 深色模式下的列表文字 */
[data-theme="dark"] .list-group-item {
  background-color: #212529;
  border-color: #495057;
  color: #e0e0e0;
}

[data-theme="dark"] .list-group-item.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
}

/* 深色模式下的表單標籤 */
[data-theme="dark"] .form-label {
  color: #ffffff !important;
}

/* 深色模式下的 Alert 組件 */
[data-theme="dark"] .alert-info {
  background-color: #1a3a4a !important;
  border-color: #2d5a6e !important;
  color: #8ecae6 !important;
}

[data-theme="dark"] .alert-info a {
  color: #6ea8fe !important;
}

[data-theme="dark"] .alert-info a:hover {
  color: #8bb9fe !important;
}

[data-theme="dark"] .alert-success {
  background-color: #1a4a2e !important;
  border-color: #2d6e4a !important;
  color: #8ee6a8 !important;
}

[data-theme="dark"] .alert-warning {
  background-color: #4a3a1a !important;
  border-color: #6e5a2d !important;
  color: #e6c88e !important;
}

[data-theme="dark"] .alert-danger {
  background-color: #4a1a1a !important;
  border-color: #6e2d2d !important;
  color: #e68e8e !important;
}

/* 深色模式下的輸入群組文字 */
[data-theme="dark"] .input-group-text {
  color: #ffffff !important;
}

/* 確保所有按鈕文字在深色模式下清晰可見 */
[data-theme="dark"] .btn-outline-secondary {
  color: #ffffff !important;
  border-color: #6c757d !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

/* 深色模式下的選項文字 */
[data-theme="dark"] option {
  background-color: #3a4149 !important;
  color: #ffffff !important;
}

/* 表單錯誤提示 - 確保 invalid-feedback 可見 */
.invalid-feedback.d-block {
  display: block !important;
}

/* 麵包屑導航 */
.breadcrumb {
  --bs-breadcrumb-divider: "›";
}

/* 深色模式下的麵包屑 */
[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
  color: #6ea8fe;
}

[data-theme="dark"] .breadcrumb-item a:hover {
  color: #8bb9fe;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #ced4da;
}