:root {
  --app-form-field-min-height: 2.6rem;
  --app-form-field-radius: 1rem;
  --app-form-field-border: #cfe3f1;
  --app-form-field-border-hover: #78b5c8;
  --app-form-field-border-focus: #afd5e2;
  --app-form-field-bg: rgba(255, 255, 255, 0.86);
  --app-form-field-color: inherit;
  --app-form-placeholder-color: #6c8593;
  --app-form-addon-bg: rgba(233, 244, 249, 0.92);
  --app-form-addon-color: #4f7283;
  --app-form-chip-bg: #d9edf4;
  --app-form-chip-border: #afd5e2;
  --app-form-chip-color: #245062;
  --app-form-check-bg: rgba(255, 255, 255, 0.92);
  --app-form-check-border: #a9c8d8;
  --app-form-check-checked-bg: #5f97aa;
  --app-form-check-checked-border: #5f97aa;
}

.form-control,
.form-select,
.input-group-text {
  min-height: var(--app-form-field-min-height);
  border-radius: var(--app-form-field-radius);
  border-color: var(--app-form-field-border);
  background: var(--app-form-field-bg);
  color: var(--app-form-field-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.form-control:hover,
.form-select:hover,
.input-group-text:hover {
  border-color: var(--app-form-field-border-hover);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-form-field-border-hover);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px var(--app-form-field-border-focus),
    0 0 0 0.12rem rgba(120, 181, 200, 0.14);
}

.form-control::placeholder,
.form-select:invalid {
  color: var(--app-form-placeholder-color);
}

textarea.form-control {
  min-height: 6.5rem;
}

.input-group-text {
  background: var(--app-form-addon-bg);
  color: var(--app-form-addon-color);
}

.form-control:disabled,
.form-select:disabled,
.input-group-text:has(+ .form-control:disabled),
.input-group-text:has(+ .form-select:disabled) {
  background: rgba(239, 246, 250, 0.78);
  color: #6d8793;
  border-color: #d7e8f3;
  opacity: 1;
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .input-group-text:has(+ .form-control:disabled),
html[data-bs-theme="dark"] .input-group-text:has(+ .form-select:disabled) {
  background: rgba(32, 52, 62, 0.72);
  color: #92adbb;
  border-color: #3e6170;
}

.form-check-input {
  background-color: var(--app-form-check-bg);
  border-color: var(--app-form-check-border);
  box-shadow: none;
}

.form-check-input:hover,
.form-check-input:focus {
  border-color: var(--app-form-field-border-hover);
  box-shadow: 0 0 0 0.12rem rgba(120, 181, 200, 0.14);
}

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

html[data-bs-theme="dark"] {
  --app-form-field-border: var(--app-dark-border-soft);
  --app-form-field-border-hover: #5e8ba0;
  --app-form-field-border-focus: var(--app-dark-accent-border);
  --app-form-field-bg: rgba(35, 55, 66, 0.82);
  --app-form-field-color: var(--tblr-body-color);
  --app-form-placeholder-color: var(--app-dark-text-muted);
  --app-form-addon-bg: rgba(40, 66, 78, 0.88);
  --app-form-addon-color: #c7dde8;
  --app-form-chip-bg: var(--app-dark-accent-bg);
  --app-form-chip-border: var(--app-dark-accent-border);
  --app-form-chip-color: var(--app-dark-accent-fg);
  --app-form-check-bg: rgba(35, 55, 66, 0.92);
  --app-form-check-border: #5a8194;
  --app-form-check-checked-bg: #6d9db2;
  --app-form-check-checked-border: #6d9db2;
}


/* Tom Select (Symfony UX Autocomplete), on top of the bootstrap5 theme */
.ts-wrapper {
  /* The bootstrap5 theme reads Bootstrap variables, which Tabler names --tblr-* */
  --bs-body-bg: var(--tblr-bg-surface);
  --bs-body-color: var(--tblr-body-color);
  --bs-border-color: var(--tblr-border-color);
  --bs-border-color-translucent: var(--tblr-border-color-translucent);
  --bs-border-width: var(--tblr-border-width);
  --bs-border-radius: var(--tblr-border-radius);
  --bs-border-radius-sm: var(--tblr-border-radius-sm);
  --bs-border-radius-lg: var(--tblr-border-radius-lg);
  --bs-box-shadow-inset: var(--tblr-box-shadow-inset);
  --bs-form-valid-color: var(--tblr-form-valid-color);
  --bs-form-invalid-color: var(--tblr-form-invalid-color);
  --bs-secondary-bg: var(--tblr-secondary-bg);
  --bs-secondary-color: var(--tblr-secondary-color);
  --bs-tertiary-bg: var(--tblr-tertiary-bg);

  width: 100%;
}

.ts-wrapper .ts-control,
.ts-wrapper.single.input-active .ts-control {
  min-height: var(--app-form-field-min-height);
  border-radius: var(--app-form-field-radius);
  border-color: var(--app-form-field-border);
  background-color: var(--app-form-field-bg);
  color: var(--app-form-field-color);
}

.ts-wrapper .ts-control:hover,
.ts-wrapper.focus .ts-control {
  border-color: var(--app-form-field-border-hover);
  box-shadow: inset 0 0 0 1px var(--app-form-field-border-focus);
}

.ts-wrapper .ts-control input::placeholder {
  color: var(--app-form-placeholder-color);
}

.ts-wrapper.multi .ts-control > .item {
  border: 1px solid var(--app-form-chip-border);
  border-radius: 999px;
  background: var(--app-form-chip-bg);
  color: var(--app-form-chip-color);
  font-size: 0.8125rem;
  font-weight: 600;
}

.ts-wrapper.disabled .ts-control {
  opacity: 0.75;
  cursor: not-allowed;
}

.ts-dropdown {
  border-color: var(--app-form-field-border);
  border-radius: 1rem;
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  overflow: hidden;
}

.ts-dropdown .active {
  background-color: var(--app-form-chip-bg);
  color: var(--app-form-chip-color);
}