/* Keep Bootstrap components in the same palette as the dashboard shell. */
html[data-theme] {
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--text-secondary);
  --bs-secondary-bg: var(--surface-secondary);
  --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-heading-color: var(--text);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--positive);
  --bs-code-color: var(--accent);
  --bs-form-valid-color: var(--positive);
  --bs-form-invalid-color: var(--negative);
}

html[data-theme] .card,
html[data-theme] .dropdown-menu,
html[data-theme] .modal-content,
html[data-theme] .list-group-item,
html[data-theme] .accordion-item {
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme] .card-header,
html[data-theme] .card-footer,
html[data-theme] .accordion-button {
  background-color: var(--surface-secondary);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] textarea,
html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme] main form p label {
  display: block;
  margin-bottom: .3rem;
  color: var(--text-secondary);
  font-weight: 600;
}

html[data-theme] main form p input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
html[data-theme] main form p textarea,
html[data-theme] main form p select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
}

html[data-theme] .form-control::placeholder,
html[data-theme] textarea::placeholder,
html[data-theme] input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus,
html[data-theme] textarea:focus,
html[data-theme] input:focus:not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--focus);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--focus) 25%, transparent);
}

html[data-theme] .form-control:disabled,
html[data-theme] .form-select:disabled,
html[data-theme] input:disabled {
  background-color: var(--surface-secondary);
  color: var(--text-muted);
}

html[data-theme] .form-check-input {
  background-color: var(--surface);
  border-color: var(--text-muted);
}

html[data-theme] .form-check-input:checked {
  background-color: var(--positive);
  border-color: var(--positive);
}

html[data-theme] .text-bg-light,
html[data-theme] .bg-light {
  background-color: var(--surface-secondary) !important;
  color: var(--text) !important;
}

html[data-theme] .text-muted,
html[data-theme] .text-secondary {
  color: var(--text-secondary) !important;
}

html[data-theme] .btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-secondary);
  --bs-btn-hover-border-color: var(--text-muted);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-secondary);
  --bs-btn-active-border-color: var(--text-muted);
}

html[data-theme] .btn-outline-danger {
  --bs-btn-color: var(--negative);
  --bs-btn-border-color: var(--negative);
  --bs-btn-hover-color: var(--page-bg);
  --bs-btn-hover-bg: var(--negative);
  --bs-btn-hover-border-color: var(--negative);
}

html[data-theme] .btn-success {
  --bs-btn-bg: var(--positive);
  --bs-btn-border-color: var(--positive);
  --bs-btn-color: var(--page-bg);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--page-bg);
}

html[data-theme] .table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-secondary);
  --bs-table-striped-color: var(--text);
}

html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b5c4b9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b5c4b9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
}