/* Ergänzt die vorhandenen Farben und Karten der Tabellenkalkulations-Aufgaben. */
.dfd-editor {
  --dfd-blue: var(--sheet-accent-dark, #1d4ed8);
  min-width: 0;
  width: 100%;
  color: #172033;
  background: #fff;
}

.dfd-editor button,
.dfd-editor input,
.dfd-editor select { font: inherit; }

.dfd-editor button {
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid #bdcbe0;
  border-radius: 6px;
  color: #172033;
  background: #fff;
  cursor: pointer;
}

.dfd-editor button:hover { background: #eff6ff; border-color: var(--dfd-blue); }
.dfd-editor button[aria-pressed="true"] { background: #dbeafe; border-color: var(--dfd-blue); font-weight: 700; }
.dfd-editor :is(button, input, select, .dfd-editor-viewport, .dfd-editor-node, [data-edge]):focus-visible {
  outline: 3px solid var(--dfd-blue);
  outline-offset: 2px;
}

.dfd-editor-toolbar,
.dfd-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .65rem;
  background: #f7f9fc;
}

.dfd-editor-toolbar { border-bottom: 1px solid #d7dee8; }
.dfd-editor-toolbar button { display: inline-flex; align-items: center; gap: .35rem; }
.dfd-editor-toolbar button[data-tool="input"],
.dfd-editor-toolbar button[data-tool="constant"],
.dfd-editor-toolbar button[data-tool="function"],
.dfd-editor-toolbar button[data-tool="splitter"],
.dfd-editor-toolbar button[data-tool="output"] { touch-action: none; cursor: grab; }
.dfd-editor-toolbar button.is-dragging { cursor: grabbing; }
.dfd-editor-tool-icon { width: 34px; height: 25px; flex: none; }
.dfd-editor-tool-icon rect, .dfd-editor-tool-icon circle { stroke-width: 2; }
.dfd-editor-tool-icon text { fill: #172033; font: 700 13px Arial, sans-serif; }
.dfd-editor-tool-input rect, .dfd-editor-tool-output rect { fill: #e8f7ee; stroke: #15803d; }
.dfd-editor-tool-constant rect { fill: #f1f5f9; stroke: #64748b; }
.dfd-editor-tool-function rect { fill: #eff6ff; stroke: var(--dfd-blue, #1d4ed8); }
.dfd-editor-tool-splitter circle { fill: #facc15; stroke: #92400e; }
.dfd-editor-tool-connect path, .dfd-editor-tool-delete path { fill: none; stroke: var(--dfd-blue, #1d4ed8); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dfd-editor-tool-delete path { stroke: #b45309; }
.dfd-editor-drag-preview { position: fixed; z-index: 1000; display: flex; align-items: center; gap: .35rem; padding: .35rem .55rem; border: 2px solid var(--sheet-accent-dark, #1d4ed8); border-radius: 6px; background: #fff; box-shadow: 0 4px 14px #17203333; pointer-events: none; transform: translate(12px, 12px); }
.dfd-editor-actions { border-top: 1px solid #d7dee8; }
.dfd-editor-actions [data-dfd-action="calculate"] { color: #fff; background: var(--dfd-blue); }
.dfd-editor-actions [data-dfd-action="calculate"]:hover { background: #1e40af; }
.dfd-editor-hint { margin: 0; padding: .55rem .8rem; color: #475569; }

.dfd-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 285px);
  min-height: 420px;
  border-top: 1px solid #d7dee8;
}

.dfd-editor-viewport {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #d7dee8;
  background: #fff;
  touch-action: pan-x pan-y;
}
.dfd-editor-viewport.is-placing { cursor: crosshair; }
.dfd-editor-viewport.is-drop-target { outline: 3px dashed var(--dfd-blue); outline-offset: -5px; background: #eff6ff; }
.dfd-editor-svg { display: block; width: 100%; min-width: 670px; height: auto; }
.dfd-editor-background { fill: #fff; }

.dfd-editor-side { min-width: 0; max-height: 640px; overflow: auto; padding: .65rem; background: #fafbfe; }
.dfd-editor-side section + section { border-top: 1px solid #d7dee8; margin-top: .85rem; padding-top: .85rem; }
.dfd-editor-side h3,
.dfd-editor-inputs h3,
.dfd-editor-results h3 { margin: 0 0 .45rem; font-size: 1rem; color: var(--dfd-blue); }
.dfd-editor-node-list { display: grid; gap: .35rem; }
.dfd-editor-node-list button { text-align: left; overflow-wrap: anywhere; }
.dfd-editor-inspector { display: grid; gap: .55rem; }
.dfd-editor-inspector label,
.dfd-editor-inputs label { display: grid; gap: .2rem; font-weight: 650; }
.dfd-editor-inspector input,
.dfd-editor-inspector select,
.dfd-editor-inputs input { width: 100%; min-height: 42px; padding: .4rem .5rem; border: 1px solid #aebdd0; border-radius: 5px; background: #fff; color: #172033; }
.dfd-editor-port-list { margin: .1rem 0; padding-left: 1.4rem; }
.dfd-editor-edge-list { display: grid; gap: .45rem; }
.dfd-editor-edge-row { display: grid; gap: .25rem; padding: .35rem 0; border-bottom: 1px solid #e2e8f0; overflow-wrap: anywhere; }
.dfd-editor-edge-row button { justify-self: start; }
.dfd-editor-inputs { display: grid; gap: .5rem; padding: .75rem; border-top: 1px solid #d7dee8; }
.dfd-editor-inputs:empty { display: none; }
.dfd-editor-status { margin: 0; padding: .75rem; background: #eff6ff; border-top: 1px solid #d7dee8; }
.dfd-editor-results { margin: .75rem; padding: .75rem; border: 1px solid #d7dee8; border-radius: 6px; background: #f7f9fc; }
.dfd-editor-results[hidden] { display: none; }
.dfd-editor-results ul { margin: .4rem 0; padding-left: 1.35rem; }

.dfd-editor-edge { fill: none; stroke: var(--dfd-blue); stroke-width: 2.5; pointer-events: none; }
.dfd-editor-edge.is-selected { stroke: #b45309; stroke-width: 4; }
.dfd-editor-edge-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.dfd-editor-connection-preview { fill: none; stroke: var(--dfd-blue); stroke-width: 3; stroke-dasharray: 7 5; pointer-events: none; }
.dfd-editor-connector { fill: #fff; stroke: var(--dfd-blue); stroke-width: 2.5; cursor: crosshair; touch-action: none; }
.dfd-editor-connector:hover, .dfd-editor-connector.is-active { fill: #bfdbfe; stroke-width: 3; }
.dfd-editor-connector:focus-visible { outline: none; stroke: #b45309; stroke-width: 4; }
.dfd-editor-node { cursor: grab; touch-action: none; }
.dfd-editor-node:active { cursor: grabbing; }
.dfd-editor-node rect,
.dfd-editor-node circle { stroke-width: 2.4; }
.dfd-editor-input rect,
.dfd-editor-output rect { fill: #e8f7ee; stroke: #15803d; }
.dfd-editor-constant rect { fill: #f1f5f9; stroke: #64748b; }
.dfd-editor-function rect { fill: #eff6ff; stroke: var(--dfd-blue); }
.dfd-editor-splitter circle { fill: #facc15; stroke: #92400e; }
.dfd-editor-node.is-selected rect,
.dfd-editor-node.is-selected circle { stroke: #b45309; stroke-width: 4; }
.dfd-editor-label { fill: #172033; font-size: 15px; font-weight: 650; pointer-events: none; }
.dfd-editor-value { fill: #334155; font-size: 12px; pointer-events: none; }
.dfd-editor-port { fill: var(--dfd-blue); font-size: 11px; font-weight: 700; pointer-events: none; }

@media (max-width: 900px) {
  .dfd-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .dfd-editor-viewport { border-right: 0; border-bottom: 1px solid #d7dee8; }
  .dfd-editor-side { max-height: none; }
}

@media (max-width: 620px) {
  .dfd-editor-toolbar button { flex: 1 1 110px; }
  .dfd-editor-actions button { flex: 1 1 100%; }
}