/**
 * nexus-graph.css — Nexus Graph (Dashboard-Unterseite graph.php, Phase 1)
 *
 * Styling für die Graph-Bühne, Filter-Bar, Force-Layout-Knoten/-Kanten,
 * Tooltip und Detail-Panel. Additiv — nutzt die geteilten Tokens (var(--…)).
 * Nur auf graph.php geladen.
 */

/* ============================================================
   Graph-eigene Datenvisualisierungs-Palette - Kanten, gedimmter
   Text auf dunklen Flaechen, Suchtreffer-Ring und die drei
   Buehnen-Schatten haben kein Token-Aequivalent. Bewusst
   ausserhalb der Token-Skala, dafuer EINE Pflegestelle statt
   Streuung im File; Ist-Werte 1:1 (Audit L-E2/#201).
   ============================================================ */
body.nx-graph-page {
  --nx-edge: #c7ccd1;                             /* Kanten-Default (.nx-link-Stroke) */
  --nx-dim-text: #cbd5e1;                         /* gedimmter Text auf var(--ink)-Grund (Tooltip-Typzeile, Hop-Buttons) */
  --nx-muted-soft: #9ca3af;                       /* leises Grau (Filter-Zaehler, Suchfeld, Panel-Close) */
  --nx-hit-ring: #f59e0b;                         /* Suchtreffer-Ring (Amber) */
  --nx-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.2);  /* Tooltip */
  --nx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.22); /* Fokus-Leiste */
  --nx-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.12); /* Detail-Panel */
  --nx-grid-dot: rgba(0, 0, 0, 0.05);             /* Punktraster der Buehne (L5b) */
}

/* ============================================================
   Seiten-Rahmen (Nexus-Graph-Unterseite) — volle Viewport-Höhe
   #app als Flex-Spalte (Header + Subnavi + Main + Footer); Main flext auf
   den Rest. DPI-/zoomfest, ohne JS-Höhenrechnung. Nur auf graph.php
   (body.nx-graph-page), damit andere Seiten unberührt bleiben.
   ============================================================ */
body.nx-graph-page #app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.nx-graph-page #app > .ds-graph-main { flex: 1 1 auto; min-height: 0; }

.ds-graph-main {
  width: 100%;
  /* Kein unteres Padding: der Host flext bis zum Footer; zusätzliches Padding
     würde den Footer unter den Fold drücken. */
  padding: var(--space-6, 24px) var(--space-8, 32px) 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1100px) {
  .ds-graph-main { padding: var(--space-4, 16px) var(--space-4, 16px) 0; }
}

/* ============================================================
   Graph-View-Host — füllt den Content-Bereich (flext im Main)
   ============================================================ */
.ds-graph-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 360px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-lg, 8px);
  background: var(--white, #fff);
  overflow: hidden;
}
.nx-graph {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- Filter-Bar ---- */
.nx-filterbar {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  flex-wrap: wrap;
}
.nx-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: var(--font-sm, 0.8125rem);
  user-select: none;
}
.nx-filter input { accent-color: var(--accent, #167ea0); cursor: pointer; }
.nx-count { color: var(--nx-muted-soft); font-variant-numeric: tabular-nums; }
.nx-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.nx-bar-spacer { flex: 1; }
.nx-btn {
  appearance: none;
  border: 1px solid var(--line, #e5e5e5);
  background: var(--white, #fff);
  color: var(--ink, #111111);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-sm, 0.8125rem);
  padding: 6px 12px;
  border-radius: var(--radius-md, 6px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nx-btn:hover { background: var(--bg-hover, #f8f8f8); }
.nx-btn.is-active {
  background: var(--ink, #111111);
  color: var(--white);
  border-color: var(--ink, #111111);
}

/* ---- Suchfeld ---- */
.nx-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--white, #fff);
  color: var(--nx-muted-soft);
}
.nx-search:focus-within { border-color: var(--accent, #167ea0); }
.nx-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--font-sm, 0.8125rem);
  color: var(--ink, #111111);
  width: 150px;
}

/* ---- Bühne (SVG + Overlays) ---- */
.nx-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background:
    radial-gradient(circle at 1px 1px, var(--nx-grid-dot) 1px, transparent 0);
  background-size: 22px 22px;
}
.nx-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.nx-svg:active { cursor: grabbing; }

.nx-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--neutral-mid);
  font-size: var(--font-sm, 0.8125rem);
}
.nx-loading.is-error { color: var(--red, #e11d21); }

/* ---- Kanten ---- */
.nx-link {
  stroke: var(--nx-edge);
  stroke-opacity: 0.7;
  transition: stroke-opacity 0.15s;
}
.nx-link.is-active { stroke: var(--neutral-mid); stroke-opacity: 1; }
.nx-link.is-dim { stroke-opacity: 0.12; }
/* Relations-Stile (Konzept): Zuweisung gestrichelt, Referenz gepunktet. */
.nx-link--zuweisung { stroke-dasharray: 5 4; }
.nx-link--referenz { stroke-dasharray: 1 5; stroke-linecap: round; }

/* ---- Knoten ---- */
.nx-node { cursor: pointer; }
.nx-node circle {
  /* --nx-stroke setzt die View pro Knoten inline (heller Beige-Knoten →
     dunklerer Ring); Default weiß. is-selected überschreibt explizit. */
  stroke: var(--nx-stroke, var(--white, #fff));
  stroke-width: 1.5;
  transition: opacity 0.15s;
}
.nx-node.is-selected circle {
  stroke: var(--ink, #111111);
  stroke-width: 2.5;
}
/* Manuell gezogener (gepinnter) Knoten: gestrichelter Rand = „bleibt fixiert".
   „Neu anordnen" löst die Pins wieder. */
.nx-node.is-pinned circle {
  stroke: var(--ink, #111111);
  stroke-width: 1.8;
  stroke-dasharray: 3 2;
}
/* Erledigt/inaktiv (nur sichtbar bei „Erledigtes anzeigen"): halbtransparent.
   Vor is-dim/search-off definiert, damit deren stärkere Abdunklung bei
   Kombination greift (gleiche Spezifität → Quellreihenfolge entscheidet). */
.nx-node.nx-done { opacity: 0.5; }
.nx-node.is-dim { opacity: 0.22; }

/* Suche: Nicht-Treffer ausblenden, Treffer mit Ring hervorheben. */
.nx-node.nx-search-off { opacity: 0.08; }
.nx-node.nx-search-hit circle { stroke: var(--nx-hit-ring); stroke-width: 3; }
.nx-node-label {
  font-size: var(--font-xs);
  fill: var(--ink, #111111);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--white, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.nx-node.is-dim .nx-node-label { opacity: 0.4; }

/* ---- Tooltip ---- */
.nx-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--ink, #111111);
  color: var(--white);
  font-size: var(--font-sm, 0.8125rem);
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: var(--radius-md, 6px);
  max-width: 260px;
  box-shadow: var(--nx-shadow-sm);
}
.nx-tt-type { color: var(--nx-dim-text); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }

/* ---- Fokus-Leiste (Ego-Fokus aktiv) ---- */
/* hidden-Attribut muss greifen — der display-Wert unten würde es sonst
   überstimmen (leere schwarze Pille). */
.nx-focusbar[hidden] { display: none; }
.nx-focusbar {
  position: absolute;
  top: var(--space-3, 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: var(--ink, #111111);
  color: var(--white);
  border-radius: 999px;
  box-shadow: var(--nx-shadow-md);
  font-size: var(--font-sm, 0.8125rem);
  max-width: calc(100% - 24px);
}
.nx-focus-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.nx-focus-hops { display: inline-flex; gap: 2px; background: color-mix(in srgb, var(--white) 12%, transparent); border-radius: 999px; padding: 2px; }
.nx-focus-hops button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--nx-dim-text); font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.nx-focus-hops button.is-active { background: var(--white); color: var(--ink, #111111); }
.nx-focus-exit {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.8rem; font-weight: 600;
  background: color-mix(in srgb, var(--white) 15%, transparent); color: var(--white);
  padding: 4px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.nx-focus-exit:hover { background: color-mix(in srgb, var(--white) 28%, transparent); }

/* ---- Detail-Panel (rechts, einblendbar) ---- */
.nx-detail {
  position: absolute;
  top: var(--space-3, 12px);
  right: var(--space-3, 12px);
  z-index: 6;
  width: 280px;
  max-width: calc(100% - 24px);
  background: var(--white, #fff);
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--nx-shadow-lg);
  padding: var(--space-4, 16px);
}
.nx-detail-close {
  position: absolute;
  top: 8px; right: 8px;
  appearance: none; border: 0; background: transparent;
  cursor: pointer; color: var(--nx-muted-soft);
  font-size: 1rem; padding: 4px; line-height: 1;
}
.nx-detail-close:hover { color: var(--ink, #111111); }
.nx-detail-type {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--neutral-mid); font-weight: 600;
}
.nx-detail-title {
  margin: 6px 0 12px;
  font-size: var(--font-base, 1rem);
  line-height: 1.3;
  color: var(--ink, #111111);
  word-break: break-word;
}
.nx-detail-meta { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.nx-detail-meta dt { color: var(--neutral-mid); font-size: var(--font-sm, 0.8125rem); }
.nx-detail-meta dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--font-sm, 0.8125rem); }
.nx-detail-focus {
  appearance: none; cursor: pointer; font: inherit;
  font-size: var(--font-sm, 0.8125rem); font-weight: 600;
  border: 1px solid var(--line, #e5e5e5); background: var(--white, #fff);
  color: var(--ink, #111111);
  padding: 8px 12px; border-radius: var(--radius-md, 6px);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 10px;
}
.nx-detail-focus:hover { background: var(--bg-hover, #f8f8f8); }
.nx-detail-open {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--font-sm, 0.8125rem); font-weight: 600;
  color: var(--accent, #167ea0); text-decoration: none;
}
.nx-detail-open:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .nx-detail { width: auto; left: var(--space-3, 12px); }
  .ds-graph-view { min-height: calc(100vh - 160px); }
}