/* CoreForge · Build-Space, Bereich „Ziele und Pläne“ (Agentenfabrik, Entwurf D7, Abschnitt S1).
   Eigene Klassen mit dem Präfix ziele-. Karten, Tabellen, Chips, Master-Detail, Dialoge und
   Leerzustände kommen aus komponenten.css. Farben nur über die Variablen aus tokens.css, damit
   Hell und Dunkel aus denselben Regeln kommen. */

.ziele-bereich {
  display: grid;
  gap: var(--cf-abstand-4, 16px);
  min-width: 0;
}

.ziele-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ziele-stand {
  margin: 0 auto 0 0;
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-leise);
}

.ziele-leise {
  margin: 0;
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-leise);
}

.ziele-mono {
  font-family: var(--cf-schrift-mono, ui-monospace, monospace);
  font-size: var(--cf-groesse-klein, 12px);
  overflow-wrap: anywhere;
}

/* ---------- Hinweis und Meldungen ---------- */

.ziele-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-zwei, var(--cf-text));
  background: var(--cf-flaeche);
  border: 1px dashed var(--cf-rahmen);
  border-radius: var(--cf-radius-karte, 10px);
}

.ziele-banner-zeichen {
  flex: none;
  color: var(--cf-text-leise);
}

.ziele-meldung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte, 10px);
  background: var(--cf-karte);
}

.ziele-meldung p {
  flex: 1 1 24ch;
  margin: 0;
}

.ziele-meldung-ok {
  background: var(--cf-erfolg-weich);
  border-color: var(--cf-erfolg);
}

.ziele-meldung-info {
  background: var(--cf-info-weich);
  border-color: var(--cf-link);
}

.ziele-meldung-warn {
  background: var(--cf-warnung-weich);
  border-color: var(--cf-warnung);
}

.ziele-meldung-bad {
  background: var(--cf-gefahr-weich);
  border-color: var(--cf-gefahr);
}

/* ---------- Liste ---------- */

.ziele-liste {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ziele-titelzelle {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.ziele-legende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 24px;
  margin: 0;
}

.ziele-legende-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ziele-legende-eintrag dt,
.ziele-legende-eintrag dd {
  margin: 0;
}

.ziele-legende-eintrag dd {
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-zwei, var(--cf-text));
}

.ziele-offen {
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-leise);
}

.ziele-offen summary {
  cursor: pointer;
}

.ziele-offen summary:focus-visible {
  outline: 2px solid var(--cf-fokus);
  outline-offset: 2px;
}

.ziele-offen ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.ziele-offen-titel {
  margin: 0;
  font-weight: 600;
  color: var(--cf-text);
}

.ziele-offen-grund {
  margin: 0;
}

/* ---------- Detail ---------- */

.ziele-oberzeile {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ziele-auftrag {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--cf-text-zwei, var(--cf-text));
}

.ziele-felder {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-size: var(--cf-groesse-meta, 13px);
}

.ziele-felder dt {
  color: var(--cf-text-leise);
}

.ziele-felder dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ziele-block {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte, 10px);
}

.ziele-block-titel {
  margin: 0;
  font-size: var(--cf-groesse-klein, 12px);
  font-weight: 700;
  letter-spacing: var(--cf-sperrung-abschnitt, 0.06em);
  text-transform: uppercase;
  color: var(--cf-text-leise);
}

.ziele-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.ziele-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ziele-aktion-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.ziele-aktion-grund {
  flex: 1 1 22ch;
  margin: 0;
  font-size: var(--cf-groesse-meta, 13px);
  color: var(--cf-text-leise);
}

.ziele-hinweis-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ziele-laufliste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ziele-laufliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ziele-abbruch {
  border-color: var(--cf-warnung);
}

.ziele-dialog {
  display: grid;
  gap: 10px;
}

.ziele-dialog p {
  margin: 0;
}

/* ---------- Plan und Graph ---------- */

.ziele-wahl {
  max-width: 520px;
}

.ziele-aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.ziele-graph-rahmen {
  overflow: auto;
  padding: 16px;
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte, 10px);
}

.ziele-graph-rahmen:focus-visible {
  outline: 2px solid var(--cf-fokus);
  outline-offset: 2px;
}

.ziele-graph {
  position: relative;
}

.ziele-graph-kanten {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.ziele-graph-kante {
  fill: none;
  stroke: var(--cf-text-leise);
  stroke-width: 1.5;
}

.ziele-graph-pfeil {
  fill: var(--cf-text-leise);
}

.ziele-graph-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ziele-graph-knoten {
  position: absolute;
  display: grid;
  align-content: space-between;
  gap: 6px;
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--cf-text);
  background: var(--cf-karte);
  border: 1px solid var(--cf-rahmen);
  border-left-width: 4px;
  border-radius: var(--cf-radius, 8px);
  box-shadow: var(--cf-schatten-klein, none);
}

.ziele-graph-titel {
  margin: 0;
  overflow: hidden;
  font-size: var(--cf-groesse-meta, 13px);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ziele-graph-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.ziele-graph-fuss .ziele-leise {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ziele-graph-verified { border-left-color: var(--cf-erfolg); }
.ziele-graph-running { border-left-color: var(--cf-link); }
.ziele-graph-awaitingApproval,
.ziele-graph-haltedByDrift,
.ziele-graph-haltedByKillSwitch,
.ziele-graph-haltedBySpendCap { border-left-color: var(--cf-warnung); }
.ziele-graph-failed { border-left-color: var(--cf-gefahr); }
.ziele-graph-offen,
.ziele-graph-cancelled { border-left-color: var(--cf-rahmen); }

/* Mit offenem Detail ist die Liste schmal: dann nur Ziel, Status und Anlage wie im Entwurf. */
.cfk-md[data-offen="true"] .ziele-liste .cfk-tabelle th:nth-child(3),
.cfk-md[data-offen="true"] .ziele-liste .cfk-tabelle td:nth-child(3),
.cfk-md[data-offen="true"] .ziele-liste .cfk-tabelle th:nth-child(4),
.cfk-md[data-offen="true"] .ziele-liste .cfk-tabelle td:nth-child(4) {
  display: none;
}

/* ---------- Planversionen: Unterschied zweier Fassungen ---------- */

.ziele-diff {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 8px 12px;
  font-family: var(--cf-schrift-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--cf-text);
  background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-klein, 6px);
}

.ziele-diff > span {
  display: block;
}

.ziele-diff-weg {
  background: var(--cf-gefahr-weich);
}

.ziele-diff-neu {
  background: var(--cf-erfolg-weich);
}

.ziele-diff-gleich {
  color: var(--cf-text-zwei);
}