/*
 * M3GIM Netzwerk-Tab — konzentrische Personen-Visualisierung um Malaniuk.
 * Geruest und Filter-Controls der Sidebar liegen seit dem Sidebar-Refactor in
 * sidebar.css (geteilte View-Sidebar, .view-shell/.view-sidebar/.view-main,
 * .vs-*). Hier bleibt nur das Netzwerk-Spezifische: Canvas, Ringe, Knoten,
 * Kanten, Detail-Panel, Coverage-Inhalt und die Legenden-Marker, die die
 * staticLegend-Zeilen ueber markerClass referenzieren. Kein eigener Titel —
 * der Tab-Button in der Navigation ist bereits Ueberschrift.
 */

#tab-netzwerk {
  padding: 0;
}

/* Zoom-Controls oben links im Canvas-Bereich */
.netzwerk__zoom-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 4;
}

.nz-zoom-btn {
  width: 26px;
  height: 26px;
  background: var(--color-paper);
  border: 1px solid var(--border-color-light);
  color: var(--color-text-primary);
  font-family: var(--font-title);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background var(--transition-fast);
}

.nz-zoom-btn:hover {
  background: var(--color-cream);
}

.nz-zoom-btn--reset {
  font-size: 14px;
}

.netzwerk-zoom-bg {
  cursor: grab;
}
.netzwerk-zoom-bg:active {
  cursor: grabbing;
}

.netzwerk__canvas-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.netzwerk-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Coverage — Inhalt der titellosen Status-Sektion (network.js::applyFilters). */
.netzwerk__coverage {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px;
  font-family: var(--font-title);
  color: var(--color-text-primary);
  line-height: 1.25;
  border-bottom: 1px solid var(--border-color-light);
}

.netzwerk__coverage-main {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.netzwerk__coverage-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* -- Legenden-Marker (von staticLegend ueber markerClass referenziert) ----- */

/* Ring-Swatches: leere Kreise, die den Canvas-Ringen 1:1 entsprechen.
 *   Ring 1 = solid,  dunkler
 *   Ring 2 = dashed, heller
 */
.netzwerk__legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  justify-self: center;
  flex-shrink: 0;
}
.netzwerk__legend-dot--ring1 {
  border: 1.8px solid #7a6f5e;
}
.netzwerk__legend-dot--ring2 {
  border: 1.4px dashed #a89f8e;
}

/* Linien-Swatches: gerade vs. geschwungene Linie visuell unterschieden. */
.nz-legend__line {
  display: inline-block;
  width: 22px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 10px;
  flex-shrink: 0;
}

.nz-legend__line--agrelon {
  /* Horizontale durchgehende Linie, KUG-Blau */
  background-image: linear-gradient(var(--color-kug-blau, #004A8F), var(--color-kug-blau, #004A8F));
  background-size: 22px 2px;
  background-position: center;
}

.nz-legend__line--cooc {
  /* Geschwungene Kurve als SVG inline */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'><path d='M 1 8 Q 11 -2 21 8' stroke='%238a6e30' stroke-width='1.5' fill='none'/></svg>");
}

.nz-legend__qid {
  display: inline-block;
  justify-self: center;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #c9a961;
  flex-shrink: 0;
}

/* Ringe — Evidenzstaerke deutlich sichtbar:
 *   Ring 1: solid, dunkler, staerker — "harte Beziehung"
 *   Ring 2: gestrichelt, heller     — "Umfeld"
 */
.netzwerk-ring {
  fill: none;
  pointer-events: none;
  transition: opacity 0.2s;
}
.netzwerk-ring--1 {
  stroke: #7a6f5e;
  stroke-width: 1.6;
  opacity: 0.75;
}
.netzwerk-ring--2 {
  stroke: #c5bdaf;
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}

/* AgRelOn-Radials: gerade Linie zum Zentrum. Pointer-events:stroke, damit
 * der native <title>-Tooltip anspringt, aber ohne die Linien als Click-Target
 * durchgehend zu machen. */
.netzwerk-link {
  stroke: var(--color-kug-blau, #004A8F);
  stroke-opacity: 0.55;
  pointer-events: stroke;
  cursor: help;
  transition: stroke-opacity 0.2s, stroke-width 0.2s;
}
.netzwerk-link--strong {
  stroke-opacity: 0.65;
}
.netzwerk-link:hover,
.netzwerk-link--active {
  stroke-opacity: 1;
  stroke-width: 2.6 !important;
}
.netzwerk-link--hidden {
  stroke-opacity: 0 !important;
  pointer-events: none;
}

/* Ko-Okkurrenz-Baender — das eigentliche Netzwerk. Die Gruppe .netzwerk-
 * cooccurrence traegt keine eigene CSS-Regel; gestylt werden die einzelnen
 * .netzwerk-edge-Pfade. pointer-events:stroke aktiviert den <title>-Tooltip
 * beim Hover auf die Linie selbst. */
.netzwerk-edge {
  fill: none;
  stroke: #8a6e30;
  stroke-opacity: 0.22;
  pointer-events: stroke;
  cursor: help;
  transition: stroke-opacity 0.2s, stroke-width 0.2s;
}
.netzwerk-edge:hover {
  stroke-opacity: 0.85;
  stroke-width: 2.4 !important;
}
.netzwerk-edge--dim {
  stroke-opacity: 0 !important;
}
.netzwerk-edge--active {
  stroke: var(--color-kug-blau, #004A8F);
  stroke-opacity: 0.9;
  stroke-width: 2.2 !important;
}
.netzwerk-edge--hidden {
  stroke-opacity: 0 !important;
  pointer-events: none;
}

.netzwerk-node {
  cursor: pointer;
  transition: opacity 0.2s;
}

/* Dim zuerst, damit Hidden danach gewinnt — --hidden braucht gleiche
 * Spezifitaet wie der --dim-:not()-Chain (3 Klassen), sonst ploppen
 * Ring-3-Knoten beim Hover eines Nachbarn wieder auf. */
.netzwerk-node--dim:not(.netzwerk-node--hover):not(.netzwerk-node--selected) {
  opacity: 0.12;
}

.netzwerk-node--hidden:not(.netzwerk-node--hover):not(.netzwerk-node--selected) {
  opacity: 0.04;
  pointer-events: none;
}

.netzwerk-node__circle {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1;
  fill-opacity: 0.9;
  transition: stroke-width 0.15s, fill-opacity 0.15s;
}

/* Schwache Evidenz (Ko-Okkurrenz ohne AgRelOn): einfach geringere Fuellung,
 * KEIN gestrichelter Rand mehr — das machte die Kreise visuell diffus. */
.netzwerk-node__circle--weak {
  fill-opacity: 0.55;
  stroke: rgba(0, 0, 0, 0.25);
}

.netzwerk-node--hover .netzwerk-node__circle {
  stroke: var(--color-kug-blau, #004A8F);
  stroke-width: 2;
  fill-opacity: 1;
}

/* Gepinnter Zustand (Click) — prominent hervorgehoben mit Ring + Halo. */
.netzwerk-node--selected .netzwerk-node__circle {
  stroke: var(--color-kug-blau, #004A8F);
  stroke-width: 3.5;
  fill-opacity: 1;
}
.netzwerk-node--selected {
  filter: drop-shadow(0 0 8px rgba(0, 74, 143, 0.55));
}

.netzwerk-node__qid {
  fill: #c9a961;
  stroke: #8a6e30;
  stroke-width: 0.5;
  pointer-events: none;
}

.netzwerk-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--color-text-primary);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.15s;
  /* Weisser Text-"Halo" als lesbarer Hintergrund in jedem Kanten-Wirrwarr. */
  paint-order: stroke fill;
  stroke: var(--color-paper, #f5f1e8);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Permanent sichtbar: Ring 1 + "wichtige" Ring 2 (>=3 Records). */
.netzwerk-label--always { opacity: 1; }

/* On-Demand sichtbar bei Hover/Pin/Nachbar. */
.netzwerk-node--hover .netzwerk-label,
.netzwerk-node--selected .netzwerk-label,
.netzwerk-node--neighbour .netzwerk-label {
  opacity: 1;
  font-weight: var(--weight-semibold);
}

.netzwerk-node--ring2 .netzwerk-label {
  fill: var(--color-text-secondary);
  font-size: 9.5px;
}

/* Zentrum */
.netzwerk-center {
  pointer-events: none;
}

.netzwerk-center__circle {
  fill: var(--color-kug-blau, #004A8F);
  stroke: #002244;
  stroke-width: 1.5;
}

.netzwerk-center__label {
  fill: #fff;
  font-family: var(--font-title);
  font-weight: var(--weight-semibold);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* -- Detail-Panel rechts ------------------------------------------------- */

.netzwerk__detail {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 360px;
  max-height: calc(100% - var(--space-6));
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  z-index: 5;
  transition: opacity 0.18s, transform 0.18s;
}

.netzwerk__detail--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
}

.netzwerk__detail-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
}

.netzwerk__detail-close:hover {
  background: var(--color-cream);
  color: var(--color-text-primary);
}

.netzwerk__detail-empty {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--text-base);
  padding: var(--space-4) 0;
}

.netzwerk__detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-1);
}

.netzwerk__detail-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.netzwerk__detail-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.netzwerk__detail-section {
  margin-bottom: var(--space-4);
}

.netzwerk__detail-subtitle {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.netzwerk__detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.netzwerk__record-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.netzwerk__record {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: 8px;
  align-items: baseline;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.netzwerk__record:hover {
  background: var(--color-cream);
}

.netzwerk__record-sig {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.netzwerk__record-title {
  font-family: var(--font-title);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.netzwerk__record-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: right;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .netzwerk__detail {
    position: static;
    width: auto;
    max-height: none;
    margin-top: var(--space-3);
    box-shadow: none;
  }
  .netzwerk__detail--hidden {
    display: none;
  }
}