/* integration-control.css — SPEC-0154: Schreibwege der Integration-Control-
 * Plane. Baut auf den federation-/admin-panel-Klassen (admin-panels.css)
 * auf; hier stehen nur die Ergänzungen für Formulare und Zeilen-Aktionen.
 * Tokens: ausschließlich die gemessenen --core-*-Tokens (SPEC-0002). */

.integration-control-view .ic-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--core-space-md, 12px);
  margin-bottom: var(--core-space-md, 12px);
}

.integration-control-view .ic-form-grid label,
.integration-control-view .ic-cancel-form label {
  display: flex;
  flex-direction: column;
  gap: var(--core-space-sm, 4px);
  font-size: 12px;
  color: var(--core-color-text-muted);
}

.integration-control-view .ic-cancel-form label {
  max-width: 420px;
}

.integration-control-view .ic-form-grid input,
.integration-control-view .ic-form-grid select,
.integration-control-view .ic-cancel-form input,
.integration-control-view .ic-trigger-editor textarea {
  background: var(--core-color-surface);
  color: var(--core-color-text);
  border: 1px solid var(--core-color-border);
  border-radius: var(--core-radius-sm, 6px);
  padding: 6px 8px;
  font: inherit;
}

.integration-control-view .ic-trigger-editor textarea {
  width: 100%;
  font-family: var(--core-font-mono, ui-monospace, monospace);
  font-size: 12px;
  resize: vertical;
}

.integration-control-view .ic-form-actions {
  display: flex;
  gap: var(--core-space-sm, 8px);
  margin-top: var(--core-space-sm, 8px);
}

.integration-control-view .ic-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Label-Selektor des Runtime-Group-Editors (Bestand
 * `CatalogRuntimeGroupsSection.vue:77-84`: Schlüssel, Wert und ein
 * Entfernen-Knopf je Zeile, darunter „Label hinzufügen"). */
.ic-labels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  align-items: flex-start;
}

.ic-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  width: 100%;
  align-items: center;
}