/* TF_Dash app-specific styles. Framework theme/core tokens load first. */

.tfd-debug {
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid var(--bf-color-border, #ddd);
  border-radius: var(--bf-radius, 6px);
  background: var(--bf-color-surface-soft, #fafafa);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #444;
}

.tfd-debug b { color: #111; }

.tfd-empty {
  margin: 24px;
  color: #777;
  font: 14px/1.5 system-ui, sans-serif;
}

/* Dev toolbar (holds the Configure button; only shown under ?mode=dev) */
.tfd-devbar {
  gap: 8px;
  padding: 8px 12px;
  justify-content: flex-end;
  border-bottom: 1px solid var(--bf-color-border-light, #eee);
  background: var(--bf-color-surface-soft, #fafafa);
}

/* List Configurator lives in a near-full-screen modal. The framework modal
   panel is inline-styled (max-width 640px / max-height 80vh), so override with
   !important. This app's only modal is the configurator, so a global override
   is safe. */
.bf-modal-panel {
  max-width: 96vw !important;
  width: 1180px !important;
  max-height: 92vh !important;
}

.tfd-config > .bf-container-title {
  font: 600 14px/1.4 system-ui, sans-serif;
  margin: 0 0 4px;
}

.tfd-options {
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.tfd-buttons {
  gap: 8px;
  justify-content: flex-end;
}