html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

[data-bs-theme="dark"] body {
  background-color: #121417;
  color: #e9ecef;
}

[data-bs-theme="dark"] .rs-navbar {
  background-color: #1b1f24 !important;
  border-color: #343a40 !important;
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link,
[data-bs-theme="dark"] .btn-link {
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .custom-nav-link {
  color: #ced4da !important;
}

[data-bs-theme="dark"] .custom-nav-link:hover {
  color: #ffffff !important;
  background-color: #2b3035;
}

[data-bs-theme="dark"] .custom-nav-link.active-tab {
  color: #ffffff !important;
  background-color: #0d6efd;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1b1f24;
  color: #e9ecef;
  border-color: #343a40;
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: #1b1f24;
  --bs-table-color: #e9ecef;
  --bs-table-striped-bg: #24292f;
  --bs-table-striped-color: #e9ecef;
  --bs-table-hover-bg: #2b3035;
  --bs-table-hover-color: #ffffff;
  border-color: #343a40;
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: #2b3035;
  --bs-table-color: #f8f9fa;
  border-color: #343a40;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1b1f24;
  color: #e9ecef;
  border-color: #495057;
}

[data-bs-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-secondary {
  color: #e9ecef !important;
}

/* 上面的 .text-dark 規則是為了讓一般內文字在深色背景上看得清楚，
   但徽章 (badge) 常刻意搭配亮色底 (bg-warning/bg-info) 要求深色文字才有對比，
   這裡用較高的選擇器優先度把徽章內的 text-dark 還原成深色文字。 */
[data-bs-theme="dark"] .badge.text-dark {
  color: #1b1f24 !important;
}

/* 但 bg-light/bg-white 徽章的底色在深色主題下會被前面的規則轉成深色 (#1b1f24)，
   這種徽章的文字要維持亮色才有對比，不能被上面那條規則變成黑字疊黑底。 */
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-white.text-dark {
  color: #e9ecef !important;
}

/* Bootstrap 的 outline 按鈕在深色主題下仍使用原始（未依主題調亮的）顏色，
   在深色卡片背景上對比度不足，這裡改用 Bootstrap 深色主題自帶的
   *-text-emphasis 變數 (原生設計給深色背景用的亮色版本)。 */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-color: #121417;
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-color: #121417;
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
  --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-border-color: var(--bs-success-text-emphasis);
  --bs-btn-hover-color: #121417;
  --bs-btn-hover-bg: var(--bs-success-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-success-text-emphasis);
  --bs-btn-active-color: #121417;
  --bs-btn-active-bg: var(--bs-success-text-emphasis);
  --bs-btn-active-border-color: var(--bs-success-text-emphasis);
  --bs-btn-disabled-color: var(--bs-success-text-emphasis);
  --bs-btn-disabled-border-color: var(--bs-success-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-hover-color: #121417;
  --bs-btn-hover-bg: var(--bs-danger-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-active-color: #121417;
  --bs-btn-active-bg: var(--bs-danger-text-emphasis);
  --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-border-color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: #1b1f24 !important;
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
  border-color: #343a40 !important;
}

[data-bs-theme="dark"] .footer {
  background-color: #121417;
  border-color: #343a40 !important;
}

[data-bs-theme="dark"] .worker-monitor-grid {
  background: #1b1f24;
  border-color: #343a40;
}

[data-bs-theme="dark"] .worker-monitor-table thead th {
  background: #2b3035;
}

[data-bs-theme="dark"] .glass-panel {
  background: #1b1f24 !important;
  border-color: #343a40 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .welcome-header {
  border-bottom-color: #343a40 !important;
}

[data-bs-theme="dark"] .drop-zone,
[data-bs-theme="dark"] .upload-box {
  background-color: #15191e !important;
  border-color: #6c757d !important;
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .drop-zone:hover,
[data-bs-theme="dark"] .drop-zone.dragover,
[data-bs-theme="dark"] .upload-box:hover {
  background-color: #1d2a3a !important;
  border-color: #0d6efd !important;
}

[data-bs-theme="dark"] .service-card-label {
  background-color: #20252b !important;
  border-color: #495057 !important;
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .service-card-label:hover {
  background-color: #252b33 !important;
  border-color: #6c757d !important;
}

[data-bs-theme="dark"] .service-card-input:checked + .service-card-label {
  background-color: #102746 !important;
  border-color: #0d6efd !important;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.35) !important;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: #20252b !important;
  color: #dfe6ee !important;
  border-color: #3a4048 !important;
}

[data-bs-theme="dark"] .list-group-item:hover {
  background-color: #252b33 !important;
  color: #ffffff !important;
}

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

[data-bs-theme="dark"] .list-group-item.active .text-secondary,
[data-bs-theme="dark"] .list-group-item .text-secondary {
  color: #e9ecef !important;
}

[data-bs-theme="dark"] .custom-tabs .nav-link {
  color: #cfd6de !important;
}

[data-bs-theme="dark"] .custom-tabs .nav-link:hover {
  color: #ffffff !important;
  border-bottom-color: #6c757d !important;
}

[data-bs-theme="dark"] .custom-tabs .nav-link.active {
  color: #63a4ff !important;
}

[data-bs-theme="dark"] .custom-dept-pills .nav-link {
  background-color: #20252b !important;
  color: #dfe6ee !important;
  border-color: #495057 !important;
}

[data-bs-theme="dark"] .custom-dept-pills .nav-link:hover:not(.active) {
  background-color: #2b3035 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .custom-dept-pills .nav-link.active {
  background-color: #0d6efd !important;
  color: #ffffff !important;
  border-color: #0d6efd !important;
}

[data-bs-theme="dark"] code {
  color: #9ec5fe;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}