html {
  color-scheme: var(--app-color-scheme, light);
}

body {
  background: var(--app-body-background, var(--bs-body-bg));
  color: var(--app-body-color, var(--bs-body-color));
  font-family: var(--app-body-font-family, var(--bs-font-sans-serif));
  line-height: var(--app-body-line-height, var(--bs-body-line-height));
}

body:not(.auth-page) header {
  background: var(--app-topbar-shell-bg, transparent);
}

.text-muted,
.text-body-secondary {
  color: var(--app-ink-muted, var(--bs-secondary-color)) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--app-accent, var(--bs-primary)) 72%, transparent);
  outline-offset: 2px;
}

.btn {
  --bs-btn-border-radius: var(--app-button-radius, var(--app-radius-md, 0.375rem));
  --bs-btn-font-weight: var(--app-button-font-weight, 600);
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.btn-sm {
  --bs-btn-border-radius: var(--app-button-radius-sm, var(--app-radius-sm, 0.25rem));
}

.btn-link {
  text-decoration: none;
}

.btn-primary {
  background: var(--app-btn-primary-background, var(--bs-primary));
  border-color: var(--app-btn-primary-border-color, var(--bs-primary));
  color: var(--app-btn-primary-color, #fff);
  box-shadow: var(--app-btn-primary-box-shadow, none);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(
    --app-btn-primary-hover-background,
    var(--app-btn-primary-background, var(--bs-primary))
  );
  border-color: var(
    --app-btn-primary-hover-border-color,
    var(--app-btn-primary-border-color, var(--bs-primary))
  );
  color: var(--app-btn-primary-hover-color, var(--app-btn-primary-color, #fff));
  box-shadow: var(--app-btn-primary-hover-box-shadow, var(--app-btn-primary-box-shadow, none));
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background: var(
    --app-btn-primary-active-background,
    var(--app-btn-primary-hover-background, var(--app-btn-primary-background, var(--bs-primary)))
  );
  border-color: var(
    --app-btn-primary-active-border-color,
    var(
      --app-btn-primary-hover-border-color,
      var(--app-btn-primary-border-color, var(--bs-primary))
    )
  );
  color: var(
    --app-btn-primary-active-color,
    var(--app-btn-primary-hover-color, var(--app-btn-primary-color, #fff))
  );
  box-shadow: var(
    --app-btn-primary-active-box-shadow,
    var(--app-btn-primary-hover-box-shadow, var(--app-btn-primary-box-shadow, none))
  );
}

.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
  background: var(--app-btn-primary-disabled-background, var(--bs-secondary-bg));
  border-color: var(--app-btn-primary-disabled-border-color, var(--bs-border-color));
  color: var(--app-btn-primary-disabled-color, var(--bs-secondary-color));
  box-shadow: var(--app-btn-primary-disabled-box-shadow, none);
  opacity: var(--app-btn-primary-disabled-opacity, 1);
}

.btn-outline-secondary {
  --bs-btn-border-color: var(
    --app-btn-outline-secondary-border-color,
    rgba(var(--bs-secondary-rgb), 1)
  );
  --bs-btn-color: var(--app-btn-outline-secondary-color, var(--bs-body-color));
  --bs-btn-hover-bg: var(--app-btn-outline-secondary-hover-background, transparent);
  --bs-btn-hover-border-color: var(--app-btn-outline-secondary-hover-border-color, currentColor);
  --bs-btn-hover-color: var(
    --app-btn-outline-secondary-hover-color,
    var(--app-btn-outline-secondary-color, inherit)
  );
  --bs-btn-focus-box-shadow: var(--app-btn-outline-secondary-hover-box-shadow, none);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--app-control-bg, var(--bs-body-bg));
  border-color: var(--app-control-border, var(--bs-border-color));
  color: var(--app-control-color, var(--bs-body-color));
}

.form-control::placeholder {
  color: var(--app-control-placeholder-color, var(--bs-secondary-color));
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-control-focus-bg, var(--app-control-bg, var(--bs-body-bg)));
  border-color: var(--app-control-focus-border, var(--bs-primary));
  color: var(--app-control-color, var(--bs-body-color));
  box-shadow: var(--app-control-focus-shadow, 0 0 0 0.2rem var(--bs-focus-ring-color));
}

.form-check-input {
  border-color: var(--app-check-border, var(--app-control-border, var(--bs-border-color)));
}

.form-check-input:focus {
  border-color: var(--app-check-focus-border, var(--app-control-focus-border, var(--bs-primary)));
  box-shadow: var(
    --app-check-focus-shadow,
    var(--app-control-focus-shadow, 0 0 0 0.2rem var(--bs-focus-ring-color))
  );
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--app-check-checked-bg, var(--app-accent, var(--bs-primary)));
  border-color: var(
    --app-check-checked-border,
    var(--app-check-checked-bg, var(--app-accent, var(--bs-primary)))
  );
}

.form-switch .form-check-input:checked {
  background-color: var(--app-switch-checked-bg, var(--app-check-checked-bg, var(--bs-primary)));
  border-color: var(
    --app-switch-checked-border,
    var(--app-switch-checked-bg, var(--app-check-checked-bg, var(--bs-primary)))
  );
}

.dropdown-menu {
  --bs-dropdown-bg: var(--app-dropdown-bg, var(--bs-body-bg));
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-radius: var(--app-radius-lg, var(--bs-border-radius-lg));
  --bs-dropdown-box-shadow: var(--app-dropdown-shadow, var(--bs-box-shadow));
  --bs-dropdown-link-hover-bg: var(--app-dropdown-hover-bg, var(--bs-tertiary-bg));
  --bs-dropdown-link-active-bg: var(--app-dropdown-active-bg, var(--bs-tertiary-bg));
  --bs-dropdown-link-active-color: var(
    --app-dropdown-active-color,
    var(--app-ink, var(--bs-body-color))
  );
  --bs-dropdown-item-padding-x: 0.75rem;
  --bs-dropdown-item-padding-y: 0.58rem;

  border: var(--app-dropdown-border, var(--bs-border-width) solid var(--bs-border-color));
}

.dropdown-item {
  border-radius: var(--app-radius-sm, var(--bs-border-radius-sm));
}

.table {
  --bs-table-border-color: var(--app-card-table-row-border, var(--bs-border-color));
  --bs-table-hover-bg: var(--app-card-table-hover-bg, var(--bs-tertiary-bg));
}

.table-light {
  --bs-table-bg: var(--app-card-table-heading-bg, var(--bs-tertiary-bg));
  --bs-table-border-color: var(--app-card-table-heading-border, var(--bs-border-color));
}