/* Custom filter UI — dark surfaces aligned with dashboard form fields */

.tf-add-btn { font-size: 0.75rem; }

/* Full-width row below glossary so filter + row count align to the right */
.tf-filter-toolbar {
  width: 100%;
}

.tf-add-btn.tf-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tf-row-count {
  font-size: 0.8rem;
  color: #fff;
}

.tf-filtered-count {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
}

/* Value field = base; slot panel = slightly lighter than field */
.tf-slots-container {
  color-scheme: dark;
}

.tf-slot {
  --tf-field-bg: #1c1c24;
  --tf-slot-bg: #26262f;
  --tf-edge: rgba(255, 255, 255, 0.14);
  --tf-edge-strong: rgba(255, 255, 255, 0.22);

  background: var(--tf-slot-bg);
  border: 1px solid var(--tf-edge-strong);
  border-radius: 0.375rem;
  padding: 0.3rem 0.5rem;
  color: #fff;
}

.tf-slot .tf-col-select,
.tf-slot .tf-op-select {
  width: auto;
  min-width: 90px;
  background-color: var(--tf-field-bg);
  color: #fff;
  border: 1px solid var(--tf-edge);
}

.tf-slot .tf-val-input {
  width: 110px;
  height: 30px;
  background-color: var(--tf-field-bg);
  color: #fff;
  border: 1px solid var(--tf-edge);
}

.tf-slot .tf-val-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.tf-slot .tf-col-select:focus,
.tf-slot .tf-op-select:focus,
.tf-slot .tf-val-input:focus {
  background-color: var(--tf-field-bg);
  color: #fff;
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
  outline: 0;
}

.tf-slot .tf-remove-btn {
  color: #fff;
  border-color: var(--tf-edge-strong);
  background-color: transparent;
}

.tf-slot .tf-remove-btn:hover,
.tf-slot .tf-remove-btn:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.06);
}